diff --git a/config-overrides.js b/config-overrides.js
index 5161229..4ac0c3a 100644
--- a/config-overrides.js
+++ b/config-overrides.js
@@ -1,16 +1,63 @@
-const { useBabelRc, override, addWebpackResolve} = require('customize-cra');
+// const { useBabelRc, override, addWebpackResolve, addWebpackPlugin} = require('customize-cra');
+// const { ProvidePlugin } = require('webpack');
 
-module.exports = override(
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    useBabelRc(),
-    addWebpackResolve({
-        fallback: {
-            assert: require.resolve('assert'),
-            buffer: require.resolve('buffer'),
-            crypto: require.resolve('crypto-browserify'),
-            fs: false,
-            path: require.resolve('path-browserify'),
-            stream: require.resolve('stream-browserify'),
-        }
-    })
-)
\ No newline at end of file
+// module.exports = override(
+//     // eslint-disable-next-line react-hooks/rules-of-hooks
+//     useBabelRc(),
+//     addWebpackPlugin(
+//         new ProvidePlugin({
+//             Buffer: ['buffer', 'Buffer'],
+//         }),
+//     ),
+//     addWebpackResolve({
+//         fallback: {
+//             assert: require.resolve('assert'),
+//             buffer: require.resolve('buffer'),
+//             crypto: require.resolve('crypto-browserify'),
+//             fs: false,
+//             path: require.resolve('path-browserify'),
+//             stream: require.resolve('stream-browserify'),
+//         }
+//     }),
+    
+// )
+
+const { ProvidePlugin } = require('webpack');
+
+module.exports = function (config, env) {
+  return {
+    ...config,
+    module: {
+      ...config.module,
+      rules: [
+        ...config.module.rules,
+        {
+          test: /\.(m?js|ts)$/,
+          enforce: 'pre',
+          use: ['source-map-loader'],
+        },
+      ],
+    },
+    plugins: [
+      ...config.plugins,
+    //   new ProvidePlugin({
+    //     process: 'process/browser',
+    //   }),
+      new ProvidePlugin({
+        Buffer: ['buffer', 'Buffer'],
+      }),
+    ],
+    resolve: {
+      ...config.resolve,
+      fallback: {
+        assert: require.resolve('assert'),
+        buffer: require.resolve('buffer'),
+        stream: require.resolve('stream-browserify'),
+        crypto: require.resolve('crypto-browserify'),
+        fs: false,
+        path: require.resolve('path-browserify'),
+      },
+    },
+    ignoreWarnings: [/Failed to parse source map/],
+  };
+};
\ No newline at end of file
diff --git a/public/CivicLogos/Icon/civic-icon-black.png b/public/CivicLogos/Icon/civic-icon-black.png
new file mode 100644
index 0000000..3684042
Binary files /dev/null and b/public/CivicLogos/Icon/civic-icon-black.png differ
diff --git a/public/CivicLogos/Icon/civic-icon-black.svg b/public/CivicLogos/Icon/civic-icon-black.svg
new file mode 100644
index 0000000..1eb2524
--- /dev/null
+++ b/public/CivicLogos/Icon/civic-icon-black.svg
@@ -0,0 +1 @@
+<svg fill="none" height="219" viewBox="0 0 218 219" width="218" xmlns="http://www.w3.org/2000/svg"><g fill="#000"><path d="m131.246 92.7977c0-12.1689-9.864-22.0331-22.033-22.0331-12.1678 0-22.0326 9.8641-22.0326 22.0331 0 8.5143 4.838 15.8873 11.9082 19.5553l-8.1658 35.311h36.5812l-8.165-35.311c7.069-3.668 11.907-11.041 11.907-19.5553z"/><path d="m195.392 136.983c-4.279 33.225-32.727 58.986-67.098 58.986h-38.1611c-37.3161 0-67.6751-30.359-67.6751-67.675v-38.1603c0-37.3162 30.359-67.6752 67.6751-67.6752h38.1611c34.371 0 62.818 25.7624 67.098 58.9872h22.608c-4.386-45.6383-42.938-81.4457-89.706-81.4457h-38.1611c-49.6995 0-90.1329 40.4342-90.1329 90.1337v38.1603c0 49.7 40.4335 90.134 90.1329 90.134h38.1611c46.768 0 85.32-35.808 89.706-81.445z"/></g></svg>
\ No newline at end of file
diff --git a/public/CivicLogos/Icon/civic-icon-dark.png b/public/CivicLogos/Icon/civic-icon-dark.png
new file mode 100644
index 0000000..0381b76
Binary files /dev/null and b/public/CivicLogos/Icon/civic-icon-dark.png differ
diff --git a/public/CivicLogos/Icon/civic-icon-dark.svg b/public/CivicLogos/Icon/civic-icon-dark.svg
new file mode 100644
index 0000000..d7835c8
--- /dev/null
+++ b/public/CivicLogos/Icon/civic-icon-dark.svg
@@ -0,0 +1 @@
+<svg fill="none" height="219" viewBox="0 0 218 219" width="218" xmlns="http://www.w3.org/2000/svg"><g fill="#2f0d30"><path d="m131.246 92.7977c0-12.1689-9.864-22.0331-22.033-22.0331-12.1678 0-22.0326 9.8641-22.0326 22.0331 0 8.5143 4.838 15.8873 11.9082 19.5553l-8.1658 35.311h36.5812l-8.165-35.311c7.069-3.668 11.907-11.041 11.907-19.5553z"/><path d="m195.392 136.983c-4.279 33.225-32.727 58.986-67.098 58.986h-38.1611c-37.3161 0-67.6751-30.359-67.6751-67.675v-38.1603c0-37.3162 30.359-67.6752 67.6751-67.6752h38.1611c34.371 0 62.818 25.7624 67.098 58.9872h22.608c-4.386-45.6383-42.938-81.4457-89.706-81.4457h-38.1611c-49.6995 0-90.1329 40.4342-90.1329 90.1337v38.1603c0 49.7 40.4335 90.134 90.1329 90.134h38.1611c46.768 0 85.32-35.808 89.706-81.445z"/></g></svg>
\ No newline at end of file
diff --git a/public/CivicLogos/Icon/civic-icon-orange.png b/public/CivicLogos/Icon/civic-icon-orange.png
new file mode 100644
index 0000000..b6f6187
Binary files /dev/null and b/public/CivicLogos/Icon/civic-icon-orange.png differ
diff --git a/public/CivicLogos/Icon/civic-icon-orange.svg b/public/CivicLogos/Icon/civic-icon-orange.svg
new file mode 100644
index 0000000..90e7fa6
--- /dev/null
+++ b/public/CivicLogos/Icon/civic-icon-orange.svg
@@ -0,0 +1 @@
+<svg fill="none" height="219" viewBox="0 0 218 219" width="218" xmlns="http://www.w3.org/2000/svg"><g fill="#ff6b4e"><path d="m131.246 92.7977c0-12.1689-9.864-22.0331-22.033-22.0331-12.1678 0-22.0326 9.8641-22.0326 22.0331 0 8.5143 4.838 15.8873 11.9082 19.5553l-8.1658 35.311h36.5812l-8.165-35.311c7.069-3.668 11.907-11.041 11.907-19.5553z"/><path d="m195.392 136.983c-4.279 33.225-32.727 58.986-67.098 58.986h-38.1611c-37.3161 0-67.6751-30.359-67.6751-67.675v-38.1603c0-37.3162 30.359-67.6752 67.6751-67.6752h38.1611c34.371 0 62.818 25.7624 67.098 58.9872h22.608c-4.386-45.6383-42.938-81.4457-89.706-81.4457h-38.1611c-49.6995 0-90.1329 40.4342-90.1329 90.1337v38.1603c0 49.7 40.4335 90.134 90.1329 90.134h38.1611c46.768 0 85.32-35.808 89.706-81.445z"/></g></svg>
\ No newline at end of file
diff --git a/public/CivicLogos/Icon/civic-icon-white.png b/public/CivicLogos/Icon/civic-icon-white.png
new file mode 100644
index 0000000..1a6803d
Binary files /dev/null and b/public/CivicLogos/Icon/civic-icon-white.png differ
diff --git a/public/CivicLogos/Icon/civic-icon-white.svg b/public/CivicLogos/Icon/civic-icon-white.svg
new file mode 100644
index 0000000..4e24cb9
--- /dev/null
+++ b/public/CivicLogos/Icon/civic-icon-white.svg
@@ -0,0 +1 @@
+<svg fill="none" height="219" viewBox="0 0 218 219" width="218" xmlns="http://www.w3.org/2000/svg"><g fill="#fff"><path d="m131.247 92.7977c0-12.1689-9.865-22.0331-22.033-22.0331-12.1687 0-22.0335 9.8641-22.0335 22.0331 0 8.5143 4.838 15.8873 11.9081 19.5553l-8.1657 35.311h36.5811l-8.165-35.311c7.069-3.668 11.908-11.041 11.908-19.5553z"/><path d="m195.392 136.983c-4.279 33.225-32.727 58.986-67.098 58.986h-38.1611c-37.3161 0-67.6751-30.359-67.6751-67.675v-38.1603c0-37.3162 30.359-67.6752 67.6751-67.6752h38.1611c34.371 0 62.818 25.7624 67.098 58.9872h22.608c-4.386-45.6383-42.938-81.4457-89.706-81.4457h-38.1611c-49.6995 0-90.1329 40.4342-90.1329 90.1337v38.1603c0 49.7 40.4335 90.134 90.1329 90.134h38.1611c46.768 0 85.32-35.808 89.706-81.445z"/></g></svg>
\ No newline at end of file
diff --git a/public/CivicLogos/Logo/civic-logo-black.png b/public/CivicLogos/Logo/civic-logo-black.png
new file mode 100644
index 0000000..7d22646
Binary files /dev/null and b/public/CivicLogos/Logo/civic-logo-black.png differ
diff --git a/public/CivicLogos/Logo/civic-logo-black.svg b/public/CivicLogos/Logo/civic-logo-black.svg
new file mode 100644
index 0000000..641f6d1
--- /dev/null
+++ b/public/CivicLogos/Logo/civic-logo-black.svg
@@ -0,0 +1 @@
+<svg fill="none" height="220" viewBox="0 0 690 220" width="690" xmlns="http://www.w3.org/2000/svg"><g fill="#000"><path d="m131.993 93.3254c0-12.2381-9.92-22.1583-22.158-22.1583-12.2378 0-22.1587 9.9201-22.1587 22.1583 0 8.5636 4.8655 15.9776 11.9759 19.6666l-8.2122 35.512h36.789l-8.211-35.512c7.109-3.689 11.975-11.103 11.975-19.6666z"/><path d="m196.503 137.762c-4.303 33.414-32.913 59.322-67.479 59.322h-38.3784c-37.5285 0-68.06-30.532-68.06-68.06v-38.3776c0-37.5285 30.5315-68.0601 68.06-68.0601h38.3784c34.566 0 63.175 25.9088 67.479 59.3226h22.737c-4.411-45.8978-43.182-81.9089-90.216-81.9089h-38.3784c-49.9822 0-90.6456 40.6642-90.6456 90.6464v38.3776c0 49.983 40.6635 90.646 90.6456 90.646h38.3784c47.034 0 85.805-36.012 90.216-81.908z"/><path d="m412.498 62.3046h-22.616v105.5214h22.616z"/><path d="m481.076 143.118-28.776-80.8134h-24.289l38.954 105.5214h27.403l38.952-105.5214h-23.88z"/><path d="m571.447 62.3046h-22.614v105.5214h22.614z"/><path d="m666.082 131.304c-3.08 11.557-12.203 18.422-24.68 18.422-17.539 0-29.325-13.846-29.325-34.455 0-20.8544 11.786-34.8659 29.325-34.8659 12.83 0 21.604 6.5377 24.873 18.4227h23.717c-4.842-23.9994-22.316-37.7541-48.18-37.7541-15.655 0-28.953 5.1504-38.459 14.8947-9.49 9.728-14.506 23.3185-14.506 39.3026 0 16.153 4.91 29.725 14.198 39.251 9.273 9.51 22.466 14.536 38.152 14.536 26.061 0 44.193-14.099 48.803-37.754z"/><path d="m347.531 131.304c-3.08 11.557-12.203 18.422-24.681 18.422-17.54 0-29.324-13.846-29.324-34.455 0-20.8544 11.784-34.8659 29.324-34.8659 12.831 0 21.605 6.5377 24.874 18.4227h23.716c-4.843-23.9994-22.316-37.7541-48.179-37.7541-15.655 0-28.953 5.1504-38.46 14.8947-9.49 9.728-14.506 23.3185-14.506 39.3026 0 16.153 4.91 29.725 14.198 39.251 9.273 9.51 22.466 14.536 38.153 14.536 26.062 0 44.194-14.099 48.801-37.754z"/></g></svg>
\ No newline at end of file
diff --git a/public/CivicLogos/Logo/civic-logo-dark.png b/public/CivicLogos/Logo/civic-logo-dark.png
new file mode 100644
index 0000000..3937b80
Binary files /dev/null and b/public/CivicLogos/Logo/civic-logo-dark.png differ
diff --git a/public/CivicLogos/Logo/civic-logo-dark.svg b/public/CivicLogos/Logo/civic-logo-dark.svg
new file mode 100644
index 0000000..deed906
--- /dev/null
+++ b/public/CivicLogos/Logo/civic-logo-dark.svg
@@ -0,0 +1 @@
+<svg fill="none" height="220" viewBox="0 0 690 220" width="690" xmlns="http://www.w3.org/2000/svg"><g fill="#2f1730"><path d="m131.993 93.3253c0-12.2381-9.92-22.1583-22.158-22.1583-12.2378 0-22.1587 9.9201-22.1587 22.1583 0 8.5627 4.8655 15.9777 11.9759 19.6667l-8.2122 35.512h36.789l-8.211-35.512c7.109-3.689 11.975-11.104 11.975-19.6667z"/><path d="m196.503 137.762c-4.303 33.414-32.913 59.322-67.479 59.322h-38.3784c-37.5285 0-68.06-30.532-68.06-68.06v-38.3776c0-37.5285 30.5315-68.0601 68.06-68.0601h38.3784c34.566 0 63.175 25.9088 67.479 59.3226h22.737c-4.411-45.8978-43.182-81.9089-90.216-81.9089h-38.3784c-49.9822 0-90.6456 40.6642-90.6456 90.6464v38.3776c0 49.983 40.6635 90.646 90.6456 90.646h38.3784c47.034 0 85.805-36.012 90.216-81.908z"/><path d="m412.498 62.3046h-22.616v105.5214h22.616z"/><path d="m481.076 143.118-28.776-80.8134h-24.289l38.954 105.5214h27.403l38.952-105.5214h-23.88z"/><path d="m571.447 62.3046h-22.614v105.5214h22.614z"/><path d="m666.082 131.304c-3.08 11.557-12.203 18.422-24.68 18.422-17.539 0-29.325-13.846-29.325-34.455 0-20.8544 11.786-34.8659 29.325-34.8659 12.83 0 21.604 6.5377 24.873 18.4227h23.717c-4.842-23.9994-22.316-37.7541-48.18-37.7541-15.655 0-28.953 5.1504-38.459 14.8947-9.49 9.728-14.506 23.3185-14.506 39.3026 0 16.153 4.91 29.725 14.198 39.251 9.273 9.51 22.466 14.536 38.152 14.536 26.061 0 44.193-14.099 48.803-37.754z"/><path d="m347.531 131.304c-3.08 11.557-12.203 18.422-24.681 18.422-17.54 0-29.324-13.846-29.324-34.455 0-20.8544 11.784-34.8659 29.324-34.8659 12.831 0 21.605 6.5377 24.874 18.4227h23.716c-4.843-23.9994-22.316-37.7541-48.179-37.7541-15.655 0-28.953 5.1504-38.46 14.8947-9.49 9.728-14.506 23.3185-14.506 39.3026 0 16.153 4.91 29.725 14.198 39.251 9.273 9.51 22.466 14.536 38.153 14.536 26.062 0 44.194-14.099 48.801-37.754z"/></g></svg>
\ No newline at end of file
diff --git a/public/CivicLogos/Logo/civic-logo-orange.png b/public/CivicLogos/Logo/civic-logo-orange.png
new file mode 100644
index 0000000..bb4756f
Binary files /dev/null and b/public/CivicLogos/Logo/civic-logo-orange.png differ
diff --git a/public/CivicLogos/Logo/civic-logo-orange.svg b/public/CivicLogos/Logo/civic-logo-orange.svg
new file mode 100644
index 0000000..e7fdf5d
--- /dev/null
+++ b/public/CivicLogos/Logo/civic-logo-orange.svg
@@ -0,0 +1 @@
+<svg fill="none" height="220" viewBox="0 0 690 220" width="690" xmlns="http://www.w3.org/2000/svg"><g fill="#ff6b4e"><path d="m131.993 93.3253c0-12.2381-9.92-22.1583-22.158-22.1583-12.2378 0-22.1587 9.9201-22.1587 22.1583 0 8.5627 4.8655 15.9777 11.9759 19.6667l-8.2122 35.512h36.789l-8.211-35.512c7.109-3.689 11.975-11.104 11.975-19.6667z"/><path d="m196.503 137.762c-4.303 33.414-32.913 59.322-67.479 59.322h-38.3784c-37.5285 0-68.06-30.532-68.06-68.06v-38.3776c0-37.5285 30.5315-68.0601 68.06-68.0601h38.3784c34.566 0 63.175 25.9088 67.479 59.3226h22.737c-4.411-45.8978-43.182-81.9089-90.216-81.9089h-38.3784c-49.9822 0-90.6456 40.6642-90.6456 90.6464v38.3776c0 49.983 40.6635 90.646 90.6456 90.646h38.3784c47.034 0 85.805-36.012 90.216-81.908z"/><path d="m412.498 62.3046h-22.615v105.5214h22.615z"/><path d="m481.076 143.118-28.776-80.8134h-24.288l38.953 105.5214h27.403l38.952-105.5214h-23.879z"/><path d="m571.448 62.3046h-22.615v105.5214h22.615z"/><path d="m666.083 131.304c-3.081 11.557-12.204 18.422-24.681 18.422-17.539 0-29.324-13.846-29.324-34.455 0-20.8544 11.785-34.8659 29.324-34.8659 12.83 0 21.604 6.5377 24.873 18.4227h23.717c-4.842-23.9994-22.316-37.7541-48.18-37.7541-15.655 0-28.953 5.1504-38.459 14.8947-9.49 9.728-14.506 23.3185-14.506 39.3026 0 16.153 4.91 29.725 14.198 39.251 9.273 9.51 22.466 14.536 38.152 14.536 26.061 0 44.194-14.099 48.803-37.754z"/><path d="m347.531 131.304c-3.08 11.557-12.203 18.422-24.681 18.422-17.54 0-29.324-13.846-29.324-34.455 0-20.8544 11.784-34.8659 29.324-34.8659 12.831 0 21.605 6.5377 24.874 18.4227h23.717c-4.844-23.9994-22.317-37.7541-48.18-37.7541-15.655 0-28.953 5.1504-38.46 14.8947-9.489 9.728-14.506 23.3185-14.506 39.3026 0 16.153 4.91 29.725 14.198 39.251 9.273 9.51 22.466 14.536 38.153 14.536 26.062 0 44.194-14.099 48.802-37.754z"/></g></svg>
\ No newline at end of file
diff --git a/public/CivicLogos/Logo/civic-logo-white.png b/public/CivicLogos/Logo/civic-logo-white.png
new file mode 100644
index 0000000..52e7580
Binary files /dev/null and b/public/CivicLogos/Logo/civic-logo-white.png differ
diff --git a/public/CivicLogos/Logo/civic-logo-white.svg b/public/CivicLogos/Logo/civic-logo-white.svg
new file mode 100644
index 0000000..98870a8
--- /dev/null
+++ b/public/CivicLogos/Logo/civic-logo-white.svg
@@ -0,0 +1 @@
+<svg fill="none" height="220" viewBox="0 0 690 220" width="690" xmlns="http://www.w3.org/2000/svg"><g fill="#fff"><path d="m131.993 93.3206c0-12.2375-9.92-22.1572-22.158-22.1572-12.2378 0-22.1587 9.9196-22.1587 22.1572 0 8.5624 4.8655 15.9774 11.9759 19.6654l-8.2122 35.51h36.789l-8.211-35.51c7.109-3.688 11.975-11.103 11.975-19.6654z"/><path d="m196.503 137.755c-4.303 33.412-32.913 59.319-67.479 59.319h-38.3784c-37.5285 0-68.06-30.53-68.06-68.057v-38.3753c0-37.5265 30.5315-68.0566 68.06-68.0566h38.3784c34.566 0 63.175 25.9075 67.479 59.3196h22.737c-4.411-45.8955-43.182-81.9047-90.216-81.9047h-38.3784c-49.9822 0-90.6456 40.6621-90.6456 90.6417v38.3753c0 49.98 40.6635 90.642 90.6456 90.642h38.3784c47.034 0 85.805-36.01 90.216-81.904z"/><path d="m412.498 62.3014h-22.616v105.5166h22.616z"/><path d="m481.076 143.111-28.776-80.8096h-24.288l38.953 105.5166h27.403l38.952-105.5166h-23.88z"/><path d="m571.447 62.3014h-22.614v105.5166h22.614z"/><path d="m666.082 131.297c-3.08 11.557-12.203 18.422-24.68 18.422-17.539 0-29.325-13.846-29.325-34.454 0-20.8532 11.786-34.864 29.325-34.864 12.83 0 21.604 6.5374 24.873 18.4217h23.717c-4.842-23.9981-22.316-37.7521-48.18-37.7521-15.655 0-28.953 5.1501-38.459 14.8939-9.49 9.7275-14.506 23.3173-14.506 39.3005 0 16.152 4.91 29.724 14.198 39.249 9.273 9.509 22.466 14.535 38.152 14.535 26.061 0 44.193-14.098 48.803-37.752z"/><path d="m347.531 131.297c-3.08 11.557-12.203 18.422-24.681 18.422-17.54 0-29.324-13.846-29.324-34.454 0-20.8532 11.784-34.864 29.324-34.864 12.831 0 21.605 6.5374 24.874 18.4217h23.716c-4.843-23.9981-22.316-37.7521-48.179-37.7521-15.655 0-28.953 5.1501-38.46 14.8939-9.49 9.7275-14.506 23.3173-14.506 39.3005 0 16.152 4.91 29.724 14.198 39.249 9.273 9.509 22.466 14.535 38.153 14.535 26.062 0 44.194-14.098 48.802-37.752z"/></g></svg>
\ No newline at end of file
diff --git a/src/App.css b/src/App.css
index b3f8fe0..ccd66d2 100644
--- a/src/App.css
+++ b/src/App.css
@@ -36,3 +36,5 @@
 /*    transform: rotate(360deg);*/
 /*  }*/
 /*}*/
+
+/*civic orange: #FF6B4E*/
\ No newline at end of file
diff --git a/src/Logo.tsx b/src/Logo.tsx
index e585da7..f0a709e 100644
--- a/src/Logo.tsx
+++ b/src/Logo.tsx
@@ -7,6 +7,7 @@ import {
     usePrefersReducedMotion,
 } from "@chakra-ui/react"
 import logo from "./logo.svg"
+import civicLogo from "./public/civic-logo-white.svg"
 
 const spin = keyframes`
   from { transform: rotate(0deg); }
@@ -19,6 +20,6 @@ export const Logo = forwardRef<ImageProps, "img">((props, ref) => {
     const animation = prefersReducedMotion
         ? undefined
         : `${spin} infinite 20s linear`
-
-    return <chakra.img animation={animation} src={logo} ref={ref} {...props} />
+    //animation={animation}
+    return <chakra.img src={civicLogo} ref={ref} {...props} />
 })
\ No newline at end of file
diff --git a/src/components/CivicOrangeButton.tsx b/src/components/CivicOrangeButton.tsx
new file mode 100644
index 0000000..0e48f4e
--- /dev/null
+++ b/src/components/CivicOrangeButton.tsx
@@ -0,0 +1,16 @@
+
+import {Button} from "@chakra-ui/react";
+import {ReactNode} from "react"
+
+interface Props {
+    onClick?: any,
+    text?: ReactNode
+    // any props that come into the component
+}
+
+export const CivicOrangeButton = ({onClick, text, ...props}: Props) => {
+
+    return (
+        <Button onClick={onClick} {...props} style={{backgroundColor: "#FF6B4E"}}>{text}</Button>
+    )
+}
\ No newline at end of file
diff --git a/src/components/Credential.tsx b/src/components/Credential.tsx
index 58b4b80..0f46ead 100644
--- a/src/components/Credential.tsx
+++ b/src/components/Credential.tsx
@@ -1,7 +1,8 @@
 import {FC, useCallback, useState} from "react";
 import {useCredentials} from "../hooks/useCredentials";
-import {extractMerkleProofFromCredential, getClaim, MerkleProof} from "../lib/credentials";
+import {extractMerkleProofFromCredential, getClaim, getSignature, MerkleProof} from "../lib/credentials";
 import {VerifiableCredential} from "../types/VerifiableCredential";
+import { CivicOrangeButton } from "./CivicOrangeButton";
 import {
     Box, Button,
     Container,
@@ -33,12 +34,14 @@ export const Credential: FC = () => {
     const selectCredential = useCallback(async (credential: VerifiableCredential) => {
         const merkle = extractMerkleProofFromCredential(credential, claimIdentifier);
         const claim = getClaim(credential, claimIdentifier);
+        const signature = getSignature(credential, claimIdentifier);
 
         setMerkleProof(merkle);
         setClaimValue(claim.value);
 
         set('merkleProof', merkle);
         set('issuer', credential.issuer);
+        set('signature', signature);
     }, [set]);
 
     const store = useCallback(() => {
@@ -65,7 +68,7 @@ export const Credential: FC = () => {
                     <FormLabel>Credential</FormLabel>
                     <Textarea id="credential" placeholder="Credential" onChange={e => setCredentialString(e.target.value)} value={credentialString}/>
                 </FormControl>
-                <Button onClick={store}>Store</Button>
+                <CivicOrangeButton onClick={store} text={"Store a credential"} />
                 <Button onClick={getDummyCredential}>Get Dummy Credential</Button>
                 <Button onClick={clearCredentials}>Clear</Button>
                 <TableContainer>
diff --git a/src/components/Verify.tsx b/src/components/Verify.tsx
index a30a311..7ad7b19 100644
--- a/src/components/Verify.tsx
+++ b/src/components/Verify.tsx
@@ -2,15 +2,44 @@ import React, {FC, useState} from "react";
 import {useSnarky} from "../hooks/useSnarky";
 import {Button, Container, Input, Stack, Textarea} from "@chakra-ui/react";
 
+import { extractMerkleProofFromPayload, extractSignatureFromPayload, extractIssuerFromPayload, MerkleProof } from "../lib/credentials";
+import { useCredentials } from "../hooks/useCredentials";
+
 export const Verify: FC = () => {
     const snarky = useSnarky();
+    const credentials = useCredentials();
     const [proof, setProof] = useState<string>();
+    const [payload, setPayload] = useState<string>();
+
+    const verifyEverything = async () => {
+        //require payload
+        if(!payload) return
+        //extract the data from the payload
+        const merkleProofData: MerkleProof = extractMerkleProofFromPayload(payload);
+        console.log("Merkle proof data: ", merkleProofData)
+        //1. verify merkle root
+        const verifyMerkleProofResult = await credentials.verifyMerkleProofAction(JSON.stringify(merkleProofData.proof), merkleProofData.merkleRoot, merkleProofData.targetHash)
+        if (verifyMerkleProofResult == false) {
+            console.log("Merkle proof verification failed")
+        }
+        //2. verify credential
+        const signature: string = extractSignatureFromPayload(payload)
+        const issuer: string = extractIssuerFromPayload(payload)
+        const verifySignatureResult = await credentials.verifySignatureAction(merkleProofData.merkleRoot, signature, issuer)
+        if(verifySignatureResult == false){
+            //revert
+        }
+
+        //3. verify proof
+    }
 
     return <Container width="100%">
         <Stack style={{ marginBottom: "2px" }}>
             <label htmlFor="proof">Proof: </label>
             <Input id="proof" onChange={(e) => setProof(e.target.value)} type="text" />
+            <Input id="payload" onChange={(e) => setPayload(e.target.value)} type="text" />
             <Button onClick={() => proof && snarky.verify(proof)}>Verify proof</Button>
+            <Button onClick={verifyEverything}>Verify</Button>
         </Stack>
         {/* <Textarea
             style={{ width: "20vw" }}
diff --git a/src/context/CredentialProof.tsx b/src/context/CredentialProof.tsx
index 721df4f..e5cf1b4 100644
--- a/src/context/CredentialProof.tsx
+++ b/src/context/CredentialProof.tsx
@@ -5,12 +5,13 @@ type CredentialProof = {
     merkleProof: MerkleProof | undefined;
     zkProof: string | undefined;
     issuer: string | undefined;
+    signature: string | undefined;
 }
 type CredentialProofContextType = CredentialProof & {
     set: <T extends keyof CredentialProof>(property: T, value: CredentialProof[T]) => void;
 }
 const defaultProofContext = {
-    issuer: undefined, merkleProof: undefined, merkleRoot: undefined, zkProof: undefined, set: () => {}
+    issuer: undefined, merkleProof: undefined, merkleRoot: undefined, zkProof: undefined, signature: undefined, set: () => {}
 };
 const CredentialProofContext = createContext<CredentialProofContextType>(defaultProofContext);
 
diff --git a/src/hooks/useCredentials.ts b/src/hooks/useCredentials.ts
index 574e637..9cdc4a4 100644
--- a/src/hooks/useCredentials.ts
+++ b/src/hooks/useCredentials.ts
@@ -1,5 +1,6 @@
 import {useCallback, useEffect, useState} from "react";
 import {VerifiableCredential} from "../types/VerifiableCredential";
+import {verifyMerkleProof, verifySignature} from "../lib/credentials"
 
 const fetchCredentialsFromStorage = async (): Promise<VerifiableCredential[]> => {
     const credentialString = window.localStorage.getItem('credentials');
@@ -60,6 +61,36 @@ export const useCredentials = () => {
         }
     }, [credentials]);
 
+    const verifyMerkleProofAction = async (proof: string, merkleRoot: string, targetHash: string): Promise<boolean | undefined> => {
+        setLoading(true)
+
+        try {
+            const result = await verifyMerkleProof(proof, merkleRoot, targetHash)
+            return result
+        } catch (e: any) {
+            setError(e.toString())
+            console.error(e);
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    const verifySignatureAction = async (merkleRootString: string, signatureString: string, issuer: string): Promise<boolean | undefined> => {
+        setLoading(true)
+
+        try {
+            const result = await verifySignature(merkleRootString, signatureString, issuer)
+            return result
+        } catch (e: any) {
+            setError(e.toString())
+            console.error(e);
+        } finally {
+            setLoading(false)
+        }
+
+        return false
+    }
+
     useEffect(() => {
         fetchCredentials();
     }, [fetchCredentials]);
@@ -72,6 +103,8 @@ export const useCredentials = () => {
         removeCredential,
         fetchCredentials,
         saveCredentials,
-        clearCredentials
+        clearCredentials,
+        verifyMerkleProofAction,
+        verifySignatureAction
     };
 }
\ No newline at end of file
diff --git a/src/hooks/useSnarky.ts b/src/hooks/useSnarky.ts
index bd14fa3..9abfca8 100644
--- a/src/hooks/useSnarky.ts
+++ b/src/hooks/useSnarky.ts
@@ -81,7 +81,9 @@ export const useSnarky = () => {
 
     const verify = useCallback(async (proof: string) => {
         console.log("Verifying proof...", verifying);
+        
         const circuitProof = (Proof<Field>).fromJSON(JSON.parse(proof));
+        console.log("Proof: ", circuitProof)
         setVerifying(true);
         Prover.verifyProof(circuitProof)
             .then((res: any) => {
diff --git a/src/lib/credentials.ts b/src/lib/credentials.ts
index 2cfd27d..e961eda 100644
--- a/src/lib/credentials.ts
+++ b/src/lib/credentials.ts
@@ -1,5 +1,9 @@
 import MerkleTools, {Proof} from 'merkle-tools';
 import {Leaf, VerifiableCredential} from "../types/VerifiableCredential";
+import * as nacl from 'tweetnacl';
+import { decode } from 'bs58';
+
+
 
 export type MerkleProof = {
     proof: Proof<string>[],
@@ -15,6 +19,14 @@ export const getClaim = (credential: VerifiableCredential, identifier: string):
     return claim;
 }
 
+export const getSignature = (credential: VerifiableCredential, identifier: string): string => {
+    const signature = credential.proof.merkleRootSignature.signature
+
+    if (!signature) throw new Error(`No signature found for identifier ${identifier}`);
+
+    return signature;
+}
+
 export const extractMerkleProofFromCredential = (credential: VerifiableCredential, identifier: string): MerkleProof => {
     console.log('extractMerkleProofFromCredential', credential, identifier);
     const claim = getClaim(credential, identifier);
@@ -27,8 +39,43 @@ export const extractMerkleProofFromCredential = (credential: VerifiableCredentia
     return { proof, targetHash, merkleRoot };
 }
 
-export const verifyMerkleProof = ({ proof, merkleRoot, targetHash}: MerkleProof): boolean => {
+export const extractMerkleProofFromPayload = (payload: string): MerkleProof => {
+    const payloadJSON = JSON.parse(payload)
+    const proof = payloadJSON.merkleProof.proof;
+    const targetHash = payloadJSON.merkleProof.targetHash;
+    const merkleRoot = payloadJSON.merkleProof.merkleRoot;
+    return { proof, targetHash, merkleRoot };
+}
+
+export const extractSignatureFromPayload = (payload: string): string => {
+    const payloadJSON = JSON.parse(payload)
+    return payloadJSON.signature
+}
+
+export const extractIssuerFromPayload = (payload: string): string => {
+    const payloadJSON = JSON.parse(payload)
+    return payloadJSON.issuer
+}
+
+export const verifyMerkleProof = (proof: string, merkleRoot: string, targetHash: string): boolean => {
+    console.log("Verifying merkle proof...")
     const merkleTools = new MerkleTools({ hashType: 'sha256' });
     const castedProof = proof as unknown as Proof<string>;
-    return merkleTools.validateProof(castedProof, targetHash, merkleRoot);
+    console.log("Casted proof: ", castedProof)
+    const res = merkleTools.validateProof(castedProof, targetHash, merkleRoot);
+    console.log("Verification result: ", res)
+    return res
+}
+
+export const verifySignature = (merkleRootString: string, signatureString: string, issuer: string) => {
+    const merkleRoot = new TextEncoder().encode(merkleRootString);
+
+    const signature = Buffer.from(signatureString, 'hex');
+
+    const signerPublicKeyString = issuer.replace(/(did:.*:)/, '');
+    const signerPublicKey = decode(signerPublicKeyString);
+
+    const verification = nacl.sign.detached.verify(merkleRoot, signature, signerPublicKey);
+    console.log('signature verified', verification);
+    return verification;
 }
\ No newline at end of file
diff --git a/src/lib/snarky.ts b/src/lib/snarky.ts
index 51beb36..3e71e5a 100644
--- a/src/lib/snarky.ts
+++ b/src/lib/snarky.ts
@@ -121,10 +121,10 @@ export class Prover {
 
   static async generateProof(year: UInt32, salt: CircuitString, publicYear: UInt32): Promise<any> {
     let user = new User(year, salt, publicYear);
-    // return JSON.stringify(
-    //     await Prover.proverProgram!.verifyAge(user.hash(), user)
-    // );
-    return await Prover.proverProgram!.verifyAge(user.hash(), user)
+    return JSON.stringify(
+        await Prover.proverProgram!.verifyAge(user.hash(), user)
+    );
+    // return await Prover.proverProgram!.verifyAge(user.hash(), user)
   }
 
   static async verifyProof(proof: Proof<Field>): Promise<boolean> {
diff --git a/src/lib/verifyCredential.ts b/src/lib/verifyCredential.ts
new file mode 100644
index 0000000..365878e
--- /dev/null
+++ b/src/lib/verifyCredential.ts
@@ -0,0 +1,24 @@
+import * as nacl from 'tweetnacl';
+import { decode } from 'bs58';
+import {TextEncoder} from "util";
+
+const credential = require('../dummyCredential.json');
+
+const merkleRootString = credential.proof.merkleRoot;
+// credential-commons requires this rather than the more natural Buffer.from(merkleRootString, 'hex')
+const merkleRoot = new TextEncoder().encode(merkleRootString);
+
+const signatureString = credential.proof.merkleRootSignature.signature;
+const signature = Buffer.from(signatureString, 'hex');
+
+const signerPublicKeyString = credential.issuer.replace(/(did:.*:)/, '');
+const signerPublicKey = decode(signerPublicKeyString);
+
+console.log('verifying signature...', {
+    merkleRootString,
+    signatureString,
+    issuer: credential.issuer,
+    signerPublicKeyString,
+});
+const verification = nacl.sign.detached.verify(merkleRoot, signature, signerPublicKey);
+console.log('signature verified', verification);
\ No newline at end of file
diff --git a/src/public/civic-logo-dark.svg b/src/public/civic-logo-dark.svg
new file mode 100644
index 0000000..deed906
--- /dev/null
+++ b/src/public/civic-logo-dark.svg
@@ -0,0 +1 @@
+<svg fill="none" height="220" viewBox="0 0 690 220" width="690" xmlns="http://www.w3.org/2000/svg"><g fill="#2f1730"><path d="m131.993 93.3253c0-12.2381-9.92-22.1583-22.158-22.1583-12.2378 0-22.1587 9.9201-22.1587 22.1583 0 8.5627 4.8655 15.9777 11.9759 19.6667l-8.2122 35.512h36.789l-8.211-35.512c7.109-3.689 11.975-11.104 11.975-19.6667z"/><path d="m196.503 137.762c-4.303 33.414-32.913 59.322-67.479 59.322h-38.3784c-37.5285 0-68.06-30.532-68.06-68.06v-38.3776c0-37.5285 30.5315-68.0601 68.06-68.0601h38.3784c34.566 0 63.175 25.9088 67.479 59.3226h22.737c-4.411-45.8978-43.182-81.9089-90.216-81.9089h-38.3784c-49.9822 0-90.6456 40.6642-90.6456 90.6464v38.3776c0 49.983 40.6635 90.646 90.6456 90.646h38.3784c47.034 0 85.805-36.012 90.216-81.908z"/><path d="m412.498 62.3046h-22.616v105.5214h22.616z"/><path d="m481.076 143.118-28.776-80.8134h-24.289l38.954 105.5214h27.403l38.952-105.5214h-23.88z"/><path d="m571.447 62.3046h-22.614v105.5214h22.614z"/><path d="m666.082 131.304c-3.08 11.557-12.203 18.422-24.68 18.422-17.539 0-29.325-13.846-29.325-34.455 0-20.8544 11.786-34.8659 29.325-34.8659 12.83 0 21.604 6.5377 24.873 18.4227h23.717c-4.842-23.9994-22.316-37.7541-48.18-37.7541-15.655 0-28.953 5.1504-38.459 14.8947-9.49 9.728-14.506 23.3185-14.506 39.3026 0 16.153 4.91 29.725 14.198 39.251 9.273 9.51 22.466 14.536 38.152 14.536 26.061 0 44.193-14.099 48.803-37.754z"/><path d="m347.531 131.304c-3.08 11.557-12.203 18.422-24.681 18.422-17.54 0-29.324-13.846-29.324-34.455 0-20.8544 11.784-34.8659 29.324-34.8659 12.831 0 21.605 6.5377 24.874 18.4227h23.716c-4.843-23.9994-22.316-37.7541-48.179-37.7541-15.655 0-28.953 5.1504-38.46 14.8947-9.49 9.728-14.506 23.3185-14.506 39.3026 0 16.153 4.91 29.725 14.198 39.251 9.273 9.51 22.466 14.536 38.153 14.536 26.062 0 44.194-14.099 48.801-37.754z"/></g></svg>
\ No newline at end of file
diff --git a/src/public/civic-logo-white.svg b/src/public/civic-logo-white.svg
new file mode 100644
index 0000000..98870a8
--- /dev/null
+++ b/src/public/civic-logo-white.svg
@@ -0,0 +1 @@
+<svg fill="none" height="220" viewBox="0 0 690 220" width="690" xmlns="http://www.w3.org/2000/svg"><g fill="#fff"><path d="m131.993 93.3206c0-12.2375-9.92-22.1572-22.158-22.1572-12.2378 0-22.1587 9.9196-22.1587 22.1572 0 8.5624 4.8655 15.9774 11.9759 19.6654l-8.2122 35.51h36.789l-8.211-35.51c7.109-3.688 11.975-11.103 11.975-19.6654z"/><path d="m196.503 137.755c-4.303 33.412-32.913 59.319-67.479 59.319h-38.3784c-37.5285 0-68.06-30.53-68.06-68.057v-38.3753c0-37.5265 30.5315-68.0566 68.06-68.0566h38.3784c34.566 0 63.175 25.9075 67.479 59.3196h22.737c-4.411-45.8955-43.182-81.9047-90.216-81.9047h-38.3784c-49.9822 0-90.6456 40.6621-90.6456 90.6417v38.3753c0 49.98 40.6635 90.642 90.6456 90.642h38.3784c47.034 0 85.805-36.01 90.216-81.904z"/><path d="m412.498 62.3014h-22.616v105.5166h22.616z"/><path d="m481.076 143.111-28.776-80.8096h-24.288l38.953 105.5166h27.403l38.952-105.5166h-23.88z"/><path d="m571.447 62.3014h-22.614v105.5166h22.614z"/><path d="m666.082 131.297c-3.08 11.557-12.203 18.422-24.68 18.422-17.539 0-29.325-13.846-29.325-34.454 0-20.8532 11.786-34.864 29.325-34.864 12.83 0 21.604 6.5374 24.873 18.4217h23.717c-4.842-23.9981-22.316-37.7521-48.18-37.7521-15.655 0-28.953 5.1501-38.459 14.8939-9.49 9.7275-14.506 23.3173-14.506 39.3005 0 16.152 4.91 29.724 14.198 39.249 9.273 9.509 22.466 14.535 38.152 14.535 26.061 0 44.193-14.098 48.803-37.752z"/><path d="m347.531 131.297c-3.08 11.557-12.203 18.422-24.681 18.422-17.54 0-29.324-13.846-29.324-34.454 0-20.8532 11.784-34.864 29.324-34.864 12.831 0 21.605 6.5374 24.874 18.4217h23.716c-4.843-23.9981-22.316-37.7521-48.179-37.7521-15.655 0-28.953 5.1501-38.46 14.8939-9.49 9.7275-14.506 23.3173-14.506 39.3005 0 16.152 4.91 29.724 14.198 39.249 9.273 9.509 22.466 14.535 38.153 14.535 26.062 0 44.194-14.098 48.802-37.752z"/></g></svg>
\ No newline at end of file