diff --git a/package-lock.json b/package-lock.json
index 4e1fb7b..2c821d2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -28,6 +28,7 @@
         "gatsby-plugin-sitemap": "^6.14.0",
         "graphiql": "^3.8.3",
         "graphql-tag": "^2.12.6",
+        "jose": "^6.1.0",
         "lodash": "^4.17.21",
         "react": "^18.0.0",
         "react-dom": "^18.0.0",
@@ -47,6 +48,7 @@
         "@graphql-codegen/typescript-operations": "^4.0.0",
         "@tailwindcss/typography": "^0.5.0",
         "@types/node": "^24.7.1",
+        "@types/react-dom": "^19.2.3",
         "@types/react-syntax-highlighter": "^15.5.3",
         "autoprefixer": "^10.4.0",
         "gatsby-adapter-netlify": "^1.2.0",
@@ -2515,6 +2517,33 @@
         "react-dom": "^16.8.0 || ^17 || ^18"
       }
     },
+    "node_modules/@graphiql/react/node_modules/framer-motion": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-6.5.1.tgz",
+      "integrity": "sha512-o1BGqqposwi7cgDrtg0dNONhkmPsUFDaLcKXigzuTFC5x58mE8iyTazxSudFzmT6MEyJKfjjU8ItoMe3W+3fiw==",
+      "license": "MIT",
+      "dependencies": {
+        "@motionone/dom": "10.12.0",
+        "framesync": "6.0.1",
+        "hey-listen": "^1.0.8",
+        "popmotion": "11.0.3",
+        "style-value-types": "5.0.0",
+        "tslib": "^2.1.0"
+      },
+      "optionalDependencies": {
+        "@emotion/is-prop-valid": "^0.8.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.8 || ^17.0.0 || ^18.0.0",
+        "react-dom": ">=16.8 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@graphiql/react/node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
     "node_modules/@graphiql/toolkit": {
       "version": "0.11.1",
       "resolved": "https://registry.npmjs.org/@graphiql/toolkit/-/toolkit-0.11.1.tgz",
@@ -4303,6 +4332,16 @@
         "ws": "*"
       }
     },
+    "node_modules/@graphql-tools/prisma-loader/node_modules/jose": {
+      "version": "5.10.0",
+      "resolved": "https://registry.npmjs.org/jose/-/jose-5.10.0.tgz",
+      "integrity": "sha512-s+3Al/p9g32Iq+oqXxkW//7jk2Vig6FF1CFqzVXoTUXt2qz89YWbL+OwS17NFYEvxC35n0FKeGO2LGYSxeM2Gg==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/panva"
+      }
+    },
     "node_modules/@graphql-tools/prisma-loader/node_modules/js-yaml": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
@@ -4915,6 +4954,7 @@
       "version": "10.18.0",
       "resolved": "https://registry.npmjs.org/@motionone/animation/-/animation-10.18.0.tgz",
       "integrity": "sha512-9z2p5GFGCm0gBsZbi8rVMOAJCtw1WqBTIPw3ozk06gDvZInBPIsQcHgYogEJ4yuHJ+akuW8g1SEIOpTOvYs8hw==",
+      "license": "MIT",
       "dependencies": {
         "@motionone/easing": "^10.18.0",
         "@motionone/types": "^10.17.1",
@@ -4925,12 +4965,14 @@
     "node_modules/@motionone/animation/node_modules/tslib": {
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
-      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
     },
     "node_modules/@motionone/dom": {
       "version": "10.12.0",
       "resolved": "https://registry.npmjs.org/@motionone/dom/-/dom-10.12.0.tgz",
       "integrity": "sha512-UdPTtLMAktHiqV0atOczNYyDd/d8Cf5fFsd1tua03PqTwwCe/6lwhLSQ8a7TbnQ5SN0gm44N1slBfj+ORIhrqw==",
+      "license": "MIT",
       "dependencies": {
         "@motionone/animation": "^10.12.0",
         "@motionone/generators": "^10.12.0",
@@ -4943,12 +4985,14 @@
     "node_modules/@motionone/dom/node_modules/tslib": {
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
-      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
     },
     "node_modules/@motionone/easing": {
       "version": "10.18.0",
       "resolved": "https://registry.npmjs.org/@motionone/easing/-/easing-10.18.0.tgz",
       "integrity": "sha512-VcjByo7XpdLS4o9T8t99JtgxkdMcNWD3yHU/n6CLEz3bkmKDRZyYQ/wmSf6daum8ZXqfUAgFeCZSpJZIMxaCzg==",
+      "license": "MIT",
       "dependencies": {
         "@motionone/utils": "^10.18.0",
         "tslib": "^2.3.1"
@@ -4957,12 +5001,14 @@
     "node_modules/@motionone/easing/node_modules/tslib": {
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
-      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
     },
     "node_modules/@motionone/generators": {
       "version": "10.18.0",
       "resolved": "https://registry.npmjs.org/@motionone/generators/-/generators-10.18.0.tgz",
       "integrity": "sha512-+qfkC2DtkDj4tHPu+AFKVfR/C30O1vYdvsGYaR13W/1cczPrrcjdvYCj0VLFuRMN+lP1xvpNZHCRNM4fBzn1jg==",
+      "license": "MIT",
       "dependencies": {
         "@motionone/types": "^10.17.1",
         "@motionone/utils": "^10.18.0",
@@ -4972,17 +5018,20 @@
     "node_modules/@motionone/generators/node_modules/tslib": {
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
-      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
     },
     "node_modules/@motionone/types": {
       "version": "10.17.1",
       "resolved": "https://registry.npmjs.org/@motionone/types/-/types-10.17.1.tgz",
-      "integrity": "sha512-KaC4kgiODDz8hswCrS0btrVrzyU2CSQKO7Ps90ibBVSQmjkrt2teqta6/sOG59v7+dPnKMAg13jyqtMKV2yJ7A=="
+      "integrity": "sha512-KaC4kgiODDz8hswCrS0btrVrzyU2CSQKO7Ps90ibBVSQmjkrt2teqta6/sOG59v7+dPnKMAg13jyqtMKV2yJ7A==",
+      "license": "MIT"
     },
     "node_modules/@motionone/utils": {
       "version": "10.18.0",
       "resolved": "https://registry.npmjs.org/@motionone/utils/-/utils-10.18.0.tgz",
       "integrity": "sha512-3XVF7sgyTSI2KWvTf6uLlBJ5iAgRgmvp3bpuOiQJvInd4nZ19ET8lX5unn30SlmRH7hXbBbH+Gxd0m0klJ3Xtw==",
+      "license": "MIT",
       "dependencies": {
         "@motionone/types": "^10.17.1",
         "hey-listen": "^1.0.8",
@@ -4992,7 +5041,8 @@
     "node_modules/@motionone/utils/node_modules/tslib": {
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
-      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
     },
     "node_modules/@n1ru4l/push-pull-async-iterable-iterator": {
       "version": "3.2.0",
@@ -8124,12 +8174,22 @@
       }
     },
     "node_modules/@types/react": {
-      "version": "19.0.8",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.0.8.tgz",
-      "integrity": "sha512-9P/o1IGdfmQxrujGbIMDyYaaCykhLKc0NGCtYcECNUr9UAaDe4gwvV9bR6tvd5Br1SG0j+PBpbKr2UYY8CwqSw==",
+      "version": "19.2.7",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.7.tgz",
+      "integrity": "sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==",
       "license": "MIT",
       "dependencies": {
-        "csstype": "^3.0.2"
+        "csstype": "^3.2.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "19.2.3",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz",
+      "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
+      "devOptional": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^19.2.0"
       }
     },
     "node_modules/@types/react-syntax-highlighter": {
@@ -12315,9 +12375,10 @@
       }
     },
     "node_modules/csstype": {
-      "version": "3.0.10",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.10.tgz",
-      "integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA=="
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "license": "MIT"
     },
     "node_modules/currently-unhandled": {
       "version": "0.4.1",
@@ -15116,35 +15177,11 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
-    "node_modules/framer-motion": {
-      "version": "6.5.1",
-      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-6.5.1.tgz",
-      "integrity": "sha512-o1BGqqposwi7cgDrtg0dNONhkmPsUFDaLcKXigzuTFC5x58mE8iyTazxSudFzmT6MEyJKfjjU8ItoMe3W+3fiw==",
-      "dependencies": {
-        "@motionone/dom": "10.12.0",
-        "framesync": "6.0.1",
-        "hey-listen": "^1.0.8",
-        "popmotion": "11.0.3",
-        "style-value-types": "5.0.0",
-        "tslib": "^2.1.0"
-      },
-      "optionalDependencies": {
-        "@emotion/is-prop-valid": "^0.8.2"
-      },
-      "peerDependencies": {
-        "react": ">=16.8 || ^17.0.0 || ^18.0.0",
-        "react-dom": ">=16.8 || ^17.0.0 || ^18.0.0"
-      }
-    },
-    "node_modules/framer-motion/node_modules/tslib": {
-      "version": "2.8.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
-      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
-    },
     "node_modules/framesync": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/framesync/-/framesync-6.0.1.tgz",
       "integrity": "sha512-fUY88kXvGiIItgNC7wcTOl0SNRCVXMKSWW2Yzfmn7EKNc+MpCzcz9DhdHcdjbrtN3c6R4H5dTY2jiCpPdysEjA==",
+      "license": "MIT",
       "dependencies": {
         "tslib": "^2.1.0"
       }
@@ -15152,7 +15189,8 @@
     "node_modules/framesync/node_modules/tslib": {
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
-      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
     },
     "node_modules/fresh": {
       "version": "0.5.2",
@@ -19203,7 +19241,8 @@
     "node_modules/hey-listen": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz",
-      "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q=="
+      "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==",
+      "license": "MIT"
     },
     "node_modules/highlight.js": {
       "version": "10.7.3",
@@ -20645,10 +20684,10 @@
       }
     },
     "node_modules/jose": {
-      "version": "5.8.0",
-      "resolved": "https://registry.npmjs.org/jose/-/jose-5.8.0.tgz",
-      "integrity": "sha512-E7CqYpL/t7MMnfGnK/eg416OsFCVUrU/Y3Vwe7QjKhu/BkS1Ms455+2xsqZQVN57/U2MHMBvEb5SrmAZWAIntA==",
-      "dev": true,
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/jose/-/jose-6.1.0.tgz",
+      "integrity": "sha512-TTQJyoEoKcC1lscpVDCSsVgYzUDg/0Bt3WE//WiTPK6uOCQC2KZS4MpugbMWt/zyjkopgZoXhZuCi00gLudfUA==",
+      "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/panva"
       }
@@ -24927,6 +24966,7 @@
       "version": "11.0.3",
       "resolved": "https://registry.npmjs.org/popmotion/-/popmotion-11.0.3.tgz",
       "integrity": "sha512-Y55FLdj3UxkR7Vl3s7Qr4e9m0onSnP8W7d/xQLsoJM40vs6UKHFdygs6SWryasTZYqugMjm3BepCF4CWXDiHgA==",
+      "license": "MIT",
       "dependencies": {
         "framesync": "6.0.1",
         "hey-listen": "^1.0.8",
@@ -24937,7 +24977,8 @@
     "node_modules/popmotion/node_modules/tslib": {
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
-      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
     },
     "node_modules/possible-typed-array-names": {
       "version": "1.0.0",
@@ -28614,6 +28655,7 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/style-value-types/-/style-value-types-5.0.0.tgz",
       "integrity": "sha512-08yq36Ikn4kx4YU6RD7jWEv27v4V+PUsOGa4n/as8Et3CuODMJQ00ENeAVXAeydX4Z2j1XHZF1K2sX4mGl18fA==",
+      "license": "MIT",
       "dependencies": {
         "hey-listen": "^1.0.8",
         "tslib": "^2.1.0"
@@ -28622,7 +28664,8 @@
     "node_modules/style-value-types/node_modules/tslib": {
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
-      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
     },
     "node_modules/stylehacks": {
       "version": "5.1.0",
@@ -32937,6 +32980,27 @@
         "markdown-it": "^14.1.0",
         "react-compiler-runtime": "19.0.0-beta-37ed2a7-20241206",
         "set-value": "^4.1.0"
+      },
+      "dependencies": {
+        "framer-motion": {
+          "version": "6.5.1",
+          "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-6.5.1.tgz",
+          "integrity": "sha512-o1BGqqposwi7cgDrtg0dNONhkmPsUFDaLcKXigzuTFC5x58mE8iyTazxSudFzmT6MEyJKfjjU8ItoMe3W+3fiw==",
+          "requires": {
+            "@emotion/is-prop-valid": "^0.8.2",
+            "@motionone/dom": "10.12.0",
+            "framesync": "6.0.1",
+            "hey-listen": "^1.0.8",
+            "popmotion": "11.0.3",
+            "style-value-types": "5.0.0",
+            "tslib": "^2.1.0"
+          }
+        },
+        "tslib": {
+          "version": "2.8.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+          "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
+        }
       }
     },
     "@graphiql/toolkit": {
@@ -34292,6 +34356,12 @@
           "dev": true,
           "requires": {}
         },
+        "jose": {
+          "version": "5.10.0",
+          "resolved": "https://registry.npmjs.org/jose/-/jose-5.10.0.tgz",
+          "integrity": "sha512-s+3Al/p9g32Iq+oqXxkW//7jk2Vig6FF1CFqzVXoTUXt2qz89YWbL+OwS17NFYEvxC35n0FKeGO2LGYSxeM2Gg==",
+          "dev": true
+        },
         "js-yaml": {
           "version": "4.1.0",
           "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
@@ -36765,13 +36835,20 @@
       }
     },
     "@types/react": {
-      "version": "19.0.8",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.0.8.tgz",
-      "integrity": "sha512-9P/o1IGdfmQxrujGbIMDyYaaCykhLKc0NGCtYcECNUr9UAaDe4gwvV9bR6tvd5Br1SG0j+PBpbKr2UYY8CwqSw==",
+      "version": "19.2.7",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.7.tgz",
+      "integrity": "sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==",
       "requires": {
-        "csstype": "^3.0.2"
+        "csstype": "^3.2.2"
       }
     },
+    "@types/react-dom": {
+      "version": "19.2.3",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz",
+      "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
+      "devOptional": true,
+      "requires": {}
+    },
     "@types/react-syntax-highlighter": {
       "version": "15.5.3",
       "resolved": "https://registry.npmjs.org/@types/react-syntax-highlighter/-/react-syntax-highlighter-15.5.3.tgz",
@@ -39765,9 +39842,9 @@
       }
     },
     "csstype": {
-      "version": "3.0.10",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.10.tgz",
-      "integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA=="
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ=="
     },
     "currently-unhandled": {
       "version": "0.4.1",
@@ -41718,27 +41795,6 @@
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
       "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew=="
     },
-    "framer-motion": {
-      "version": "6.5.1",
-      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-6.5.1.tgz",
-      "integrity": "sha512-o1BGqqposwi7cgDrtg0dNONhkmPsUFDaLcKXigzuTFC5x58mE8iyTazxSudFzmT6MEyJKfjjU8ItoMe3W+3fiw==",
-      "requires": {
-        "@emotion/is-prop-valid": "^0.8.2",
-        "@motionone/dom": "10.12.0",
-        "framesync": "6.0.1",
-        "hey-listen": "^1.0.8",
-        "popmotion": "11.0.3",
-        "style-value-types": "5.0.0",
-        "tslib": "^2.1.0"
-      },
-      "dependencies": {
-        "tslib": {
-          "version": "2.8.1",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
-          "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
-        }
-      }
-    },
     "framesync": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/framesync/-/framesync-6.0.1.tgz",
@@ -45510,10 +45566,9 @@
       }
     },
     "jose": {
-      "version": "5.8.0",
-      "resolved": "https://registry.npmjs.org/jose/-/jose-5.8.0.tgz",
-      "integrity": "sha512-E7CqYpL/t7MMnfGnK/eg416OsFCVUrU/Y3Vwe7QjKhu/BkS1Ms455+2xsqZQVN57/U2MHMBvEb5SrmAZWAIntA==",
-      "dev": true
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/jose/-/jose-6.1.0.tgz",
+      "integrity": "sha512-TTQJyoEoKcC1lscpVDCSsVgYzUDg/0Bt3WE//WiTPK6uOCQC2KZS4MpugbMWt/zyjkopgZoXhZuCi00gLudfUA=="
     },
     "js-tokens": {
       "version": "4.0.0",
diff --git a/package.json b/package.json
index 754e7ad..367a621 100644
--- a/package.json
+++ b/package.json
@@ -50,6 +50,7 @@
     "gatsby-plugin-sitemap": "^6.14.0",
     "graphiql": "^3.8.3",
     "graphql-tag": "^2.12.6",
+    "jose": "^6.1.0",
     "lodash": "^4.17.21",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
@@ -69,6 +70,7 @@
     "@graphql-codegen/typescript-operations": "^4.0.0",
     "@tailwindcss/typography": "^0.5.0",
     "@types/node": "^24.7.1",
+    "@types/react-dom": "^19.2.3",
     "@types/react-syntax-highlighter": "^15.5.3",
     "autoprefixer": "^10.4.0",
     "gatsby-adapter-netlify": "^1.2.0",
diff --git a/plugins/static-redirects/gatsby-node.js b/plugins/static-redirects/gatsby-node.js
index 81f09fc..5b72468 100644
--- a/plugins/static-redirects/gatsby-node.js
+++ b/plugins/static-redirects/gatsby-node.js
@@ -6,7 +6,10 @@ const redirects = [
 
 exports.onPostBuild = ({ reporter, basePath, pathPrefix }) => {
   const redirectsPath = path.resolve(`${__dirname}/../../public/_redirects`);
-  const input = fs.readFileSync(redirectsPath, 'utf-8');
+  let input = "";
+  if (fs.existsSync(redirectsPath)) {
+    input = fs.readFileSync(redirectsPath, "utf-8");
+  }
   const output = `${input}\n${redirects.join('\n')}`;
   console.log(output);
   fs.writeFileSync(redirectsPath, output);
diff --git a/src/components/OidcVisualizer/OidcVisualizer.tsx b/src/components/OidcVisualizer/OidcVisualizer.tsx
new file mode 100644
index 0000000..882a25c
--- /dev/null
+++ b/src/components/OidcVisualizer/OidcVisualizer.tsx
@@ -0,0 +1,270 @@
+import React, { useEffect, useLayoutEffect, useState, useRef } from 'react';
+import { jwtVerify, createRemoteJWKSet, JWTPayload } from 'jose';
+import useLocalStorage from './hooks/useLocalStorage';
+import OidcSettingsModal from './components/OidcSettingsModal';
+import oidcConfig from './oidcConfig';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import StepOne from './components/steps/StepOne';
+import StepTwo from './components/steps/StepTwo';
+import StepThree from './components/steps/StepThree';
+import StepFour from './components/steps/StepFour';
+import { generateJWT } from './generateJwt';
+import type { OidcTokenResponse, OidcSettings } from './types';
+
+const OidcVisualizer = () => {
+  const [authCode, setAuthCode] = useState<string | null>(null);
+  const [tokenResponse, setTokenResponse] = useState<OidcTokenResponse | null>(null);
+  const [decodedPayload, setDecodedPayload] = useState<JWTPayload | null>(null);
+  const [tokenRequest, setTokenRequest] = useState<string | null>(null);
+  const [codeExchangeCompleted, setCodeExchangeCompleted] = useState<boolean>(false);
+  const [step2Error, setStep2Error] = useState<string | null>(null);
+  const [step3Error, setStep3Error] = useState<string | null>(null);
+  const [showSettings, setShowSettings] = useState<boolean>(false);
+  const [oidcSettings, setOidcSettings] = useLocalStorage<OidcSettings>(
+    'oidc-settings',
+    oidcConfig,
+  );
+
+  const authorizeUrl = `https://${oidcSettings.domain}/oauth2/authorize?response_type=code&client_id=${oidcSettings.clientId}&redirect_uri=${encodeURIComponent(oidcConfig.redirectUri)}&scope=${encodeURIComponent(oidcSettings.scope)}${
+    oidcSettings.acrValues?.length
+      ? `&acr_values=${encodeURIComponent(oidcSettings.acrValues.join(' '))}`
+      : ''
+  }`;
+
+  /* Close settings modal with Escape key */
+  useEffect(() => {
+    const handler = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') setShowSettings(false);
+    };
+
+    document.addEventListener('keydown', handler);
+    return () => document.removeEventListener('keydown', handler);
+  }, []);
+
+  /* Define the current step for scrolling */
+  const STEP = {
+    STEP_1: 1,
+    STEP_2: 2,
+    STEP_3: 3,
+    STEP_4: 4,
+  } as const;
+
+  const step1Ref = useRef<HTMLDivElement>(null);
+  const step2Ref = useRef<HTMLDivElement>(null);
+  const step3Ref = useRef<HTMLDivElement>(null);
+  const step4Ref = useRef<HTMLDivElement>(null);
+
+  const currentStep = (() => {
+    if (decodedPayload) return STEP.STEP_4;
+    if (tokenResponse && codeExchangeCompleted) return STEP.STEP_3;
+    if (authCode) return STEP.STEP_2;
+    return STEP.STEP_1;
+  })();
+
+  const stepRefs = {
+    [STEP.STEP_1]: step1Ref,
+    [STEP.STEP_2]: step2Ref,
+    [STEP.STEP_3]: step3Ref,
+    [STEP.STEP_4]: step4Ref,
+  };
+
+  /* Scroll to current step on step change */
+  useLayoutEffect(() => {
+    const el = stepRefs[currentStep].current;
+    if (!el) return;
+
+    const headerHeight = 56;
+    const elementTop = el.getBoundingClientRect().top;
+    const targetY = elementTop + window.scrollY - headerHeight;
+
+    if (tokenResponse && !decodedPayload && currentStep !== 3) {
+      el.scrollIntoView({ behavior: 'smooth', block: 'end' });
+      // When token is received, scroll to the bottom of step #2 to show "Next" button
+    } else {
+      // Otherwise, scroll to top
+      window.scrollTo({
+        top: targetY,
+        behavior: 'smooth',
+      });
+    }
+  }, [currentStep, tokenResponse]);
+
+  /* Extract authorization code from URL on mount */
+  useEffect(() => {
+    const urlParams = new URLSearchParams(window.location.search);
+    const code = urlParams.get('code');
+
+    if (code) {
+      setAuthCode(code);
+      window.history.replaceState({}, document.title, window.location.pathname); // Remove authorization code from URL
+    }
+  }, []);
+
+  /* Handle code for token exchange */
+  const handleExchange = async () => {
+    if (!authCode) return;
+
+    try {
+      const params: Record<string, string> = {
+        grant_type: 'authorization_code',
+        code: authCode,
+        redirect_uri: oidcConfig.redirectUri,
+      };
+
+      const clientAssertion = await generateJWT(oidcSettings);
+
+      if (oidcSettings.pkJwtAuth) {
+        params['client_assertion_type'] = 'urn:ietf:params:oauth:client-assertion-type:jwt-bearer';
+        params['client_assertion'] = clientAssertion;
+      } else {
+        params['client_id'] = oidcSettings.clientId;
+        params['client_secret'] = oidcSettings.clientSecret;
+      }
+
+      const getToken = await fetch(`https://${oidcSettings.domain}/oauth2/token`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+        body: new URLSearchParams(params),
+      });
+
+      const formattedRequest = [
+        `POST /oauth2/token HTTP/1.1`,
+        `Host: ${oidcSettings.domain}`,
+        `Content-Type: application/x-www-form-urlencoded`,
+        ``,
+        new URLSearchParams(params).toString().replaceAll('&', '\n'),
+      ].join('\n');
+
+      setTokenRequest(formattedRequest);
+
+      const data: OidcTokenResponse = await getToken.json();
+
+      if (data.error) throw new Error(data.error_description || data.error);
+      setTokenResponse(data);
+    } catch (err: any) {
+      setStep2Error(err.message);
+    }
+  };
+
+  /* Proceed to token verification step */
+  const proceedToVerifyWT = () => {
+    setCodeExchangeCompleted(true);
+  };
+
+  /* Handle JWT validation */
+  const handleVerify = async () => {
+    if (!tokenResponse?.id_token) return;
+
+    try {
+      const JWKS = createRemoteJWKSet(
+        new URL(`https://${oidcSettings.domain}/.well-known/jwks.json`),
+      );
+      const { payload } = await jwtVerify(tokenResponse.id_token, JWKS);
+      setDecodedPayload(payload);
+    } catch (err: any) {
+      setStep3Error('Token Verification Failed: ' + err.message);
+    }
+  };
+
+  const handleReset = () => {
+    setAuthCode(null);
+    setTokenResponse(null);
+    setDecodedPayload(null);
+    setCodeExchangeCompleted(false);
+    setStep2Error(null);
+    setStep3Error(null);
+    window.history.replaceState({}, document.title, window.location.pathname);
+  };
+
+  /* Updating OIDC settings */
+  const handleUpdateSettings = (newSettings: OidcSettings) => {
+    setOidcSettings(prev => ({
+      ...prev,
+      ...newSettings,
+    }));
+    handleReset();
+    setShowSettings(false);
+  };
+
+  return (
+    <div className="max-w-3xl pl-0 p-2">
+      <div className="flex justify-between items-center mb-2">
+        <h1 className="text-3xl font-bold text-slate-900 mb-0">OpenID Connect Visualizer</h1>
+        <button
+          onClick={() => setShowSettings(true)}
+          className="bg-white text-sky-700 uppercase text-xs font-medium transition hover:text-sky-900 hover:delay-100 focus:outline-none focus:ring-0 focus:border-transparent focus:shadow-none"
+        >
+          <div className="flex flex-row items-center gap-1">
+            <FontAwesomeIcon icon="gear" className="text-md" />
+            <p>Configure</p>
+          </div>
+        </button>
+      </div>
+
+      {/* STEP 1: Authorization */}
+      <StepOne
+        stepRef={step1Ref}
+        authCode={authCode}
+        authorizeUrl={authorizeUrl}
+        onLogin={() => {
+          window.location.href = authorizeUrl;
+        }}
+      />
+
+      {/* STEP 2: Code for Token Exchange */}
+      <StepTwo
+        req={tokenRequest}
+        stepRef={step2Ref}
+        authCode={authCode}
+        tokenResponse={tokenResponse}
+        codeExchangeCompleted={codeExchangeCompleted}
+        onCodeExchange={handleExchange}
+        proceedToVerifyWT={proceedToVerifyWT}
+        step2Error={step2Error}
+        pkJwtAuth={oidcSettings.pkJwtAuth}
+      />
+
+      {/* STEP 3: Token Verification */}
+      <StepThree
+        stepRef={step3Ref}
+        tokenResponse={tokenResponse}
+        codeExchangeCompleted={codeExchangeCompleted}
+        decodedPayload={decodedPayload}
+        onVerify={handleVerify}
+      />
+
+      {/* STEP 4: Result */}
+      {decodedPayload && <StepFour stepRef={step4Ref} decodedPayload={decodedPayload} />}
+
+      {/* Reset Button */}
+      {(decodedPayload || step2Error || step3Error) && (
+        <div className="flex justify-center mt-4">
+          <button
+            onClick={handleReset}
+            className="px-6 py-4 bg-white border-2 border-sky-900 text-sky-900 uppercase text-xs font-medium transition hover:bg-sky-900 hover:text-white hover:delay-100"
+          >
+            Start over
+          </button>
+        </div>
+      )}
+
+      {/* OIDC Settings Modal */}
+      {showSettings && (
+        <OidcSettingsModal
+          open={showSettings}
+          onClose={() => setShowSettings(false)}
+          domain={oidcSettings.domain}
+          clientId={oidcSettings.clientId}
+          clientSecret={oidcSettings.clientSecret}
+          scope={oidcSettings.scope}
+          redirectUri={oidcConfig.redirectUri}
+          onSave={handleUpdateSettings}
+          pkJwtAuth={oidcSettings.pkJwtAuth}
+          acrValues={oidcSettings.acrValues}
+        />
+      )}
+    </div>
+  );
+};
+
+export default OidcVisualizer;
diff --git a/src/components/OidcVisualizer/components/OidcSettingsModal.tsx b/src/components/OidcVisualizer/components/OidcSettingsModal.tsx
new file mode 100644
index 0000000..c8ad43b
--- /dev/null
+++ b/src/components/OidcVisualizer/components/OidcSettingsModal.tsx
@@ -0,0 +1,273 @@
+import React, { useState } from 'react';
+import { createPortal } from 'react-dom';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { linkStyles, inputStyles, disabledInputStyles } from '../styles';
+import { PROVIDERS } from '../../../utils/auth-methods';
+import publicSigningKey from '../keys/signing_jwks_public.json';
+import oidcConfig from '../oidcConfig';
+
+type ModalProps = {
+  open: boolean;
+  onClose: () => void;
+  onSave: (newConfig: {
+    domain: string;
+    clientId: string;
+    clientSecret: string;
+    scope: string;
+    pkJwtAuth: boolean;
+    acrValues?: string[];
+  }) => void;
+  domain: string;
+  clientId: string;
+  clientSecret: string;
+  scope: string;
+  redirectUri: string;
+  pkJwtAuth: boolean;
+  acrValues?: string[];
+};
+
+export default function Modal({
+  open,
+  onClose,
+  onSave,
+  domain,
+  clientId,
+  clientSecret,
+  scope,
+  pkJwtAuth,
+  acrValues,
+}: ModalProps) {
+  const [settings, setSettings] = useState({
+    domain,
+    clientId,
+    clientSecret,
+    scope,
+    pkJwtAuth,
+    acrValues: acrValues || [],
+  });
+
+  const toggleAcrValue = (value: string) => {
+    setSettings(prev => {
+      const current = prev.acrValues;
+      const next = current.includes(value) ? current.filter(v => v !== value) : [...current, value];
+      return { ...prev, acrValues: next };
+    });
+  };
+
+  const authDescriptions = {
+    client_secret: (
+      <>
+        Standard client authentication using a shared{' '}
+        <a className={linkStyles} href="/verify/reference/glossary/#client-secret" target="_blank">
+          client secret
+        </a>
+        .
+      </>
+    ),
+    private_jwt: (
+      <>
+        A more secure authentication option based on asymmetric cryptography. For more details, see{' '}
+        <a href="/verify/guides/privatekey-jwt/" target="_blank" className={linkStyles}>
+          Private key JWT authentication
+        </a>
+        .
+      </>
+    ),
+  };
+
+  return createPortal(
+    <div
+      className={`backdrop-blur-sm bg-black/30 fixed h-screen w-screen inset-0 z-50 p-4 items-center justify-center ${open ? 'flex' : 'hidden'}`}
+      onClick={onClose} // clicking outside closes modal
+    >
+      <div
+        className="bg-white shadow-xl p-6 w-full max-w-4xl relative"
+        onClick={e => e.stopPropagation()}
+      >
+        <button
+          className="absolute right-4 top-4 text-gray-600 hover:text-black text-lg"
+          onClick={onClose}
+        >
+          <FontAwesomeIcon icon="xmark" />
+        </button>
+
+        <h2 className="text-xl font-semibold text-gray-900 my-1">Client Configuration</h2>
+
+        <p className="text-gray-700 mb-4 text-xs leading-tight">
+          This visualizer is configured to use Idura’s default application settings. You can update
+          them to test the OpenID Connect flow with your own Idura application instead. If you do,
+          make sure to add{' '}
+          <span className="font-mono text-xs">
+            https://docs.idura.app/verify/guides/oidc-visualizer
+          </span>{' '}
+          as a <span className="font-medium">redirect URI</span> in your application settings in the{' '}
+          <a
+            href="https://dashboard.idura.app/"
+            target="_blank"
+            rel="noopener noreferrer"
+            className={linkStyles}
+          >
+            Idura dashboard
+          </a>
+          .
+        </p>
+
+        <div className="flex flex-col gap-2 text-xs">
+          <div className="flex items-start gap-2">
+            <label className="w-32 text-gray-800 font-medium">Client Authentication</label>
+            <div className="flex flex-col flex-1">
+              <select
+                className="flex-1 border border-gray-300 px-1 py-1 text-gray-900 transition-colors focus:border-sky-600 focus:ring-0 focus:ring-sky-600 focus:outline-none"
+                value={settings.pkJwtAuth ? 'private_jwt' : 'client_secret'}
+                onChange={e => {
+                  setSettings({ ...settings, pkJwtAuth: e.target.value === 'private_jwt' });
+                }}
+              >
+                <option value="client_secret">Client Secret</option>
+                <option value="private_jwt">Private Key JWT</option>
+              </select>
+              <p className="leading-tight text-[10px] px-2 py-1 mt-0 bg-slate-50 text-slate-600">
+                {settings.pkJwtAuth ? authDescriptions.private_jwt : authDescriptions.client_secret}
+              </p>
+            </div>
+          </div>
+          {settings.pkJwtAuth && (
+            <div className="flex items-start gap-2">
+              <label className="w-32 text-gray-800 font-medium">Public key</label>
+              <div className="flex-1 relative">
+                <textarea
+                  readOnly
+                  className={`${inputStyles} w-full h-24 font-mono text-[9px] leading-tight resize-none bg-gray-50 cursor-text`}
+                  value={JSON.stringify(publicSigningKey, null, 2)}
+                  onClick={e => (e.target as HTMLTextAreaElement).select()}
+                />
+                <div className="px-2 py-1 -mt-1 bg-slate-50 leading-tight text-[10px] text-slate-600">
+                  <p className="mb-1">
+                    To test Private Key JWT authentication with your own application, you must
+                    register the provided public signing key in the Idura Dashboard. Open your
+                    application settings and navigate to the{' '}
+                    <span className="font-medium text-gray-700">OpenID Connect</span> tab. Under{' '}
+                    <span className="font-medium text-slate-900">Client JWKs</span>, set the type to
+                    <span className="font-medium text-slate-900"> Static</span> and paste the JWK
+                    set shown above.
+                  </p>
+
+                  <div className="mt-1 bg-yellow-100 p-2">
+                    <p>
+                      <strong>Security Note:</strong> These keys are for demonstration only. When
+                      building your own applications, generate a unique key pair and never share the
+                      private key.
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+          <div className="flex items-center gap-2">
+            <label className="w-32 text-gray-800 font-medium">Domain</label>
+            <input
+              className={inputStyles}
+              value={settings.domain}
+              onChange={e => setSettings({ ...settings, domain: e.target.value })}
+            />
+          </div>
+
+          <div className="flex items-center gap-2">
+            <label className="w-32 text-gray-800 font-medium">Client ID</label>
+            <input
+              className={inputStyles}
+              value={settings.clientId}
+              onChange={e => setSettings({ ...settings, clientId: e.target.value })}
+            />
+          </div>
+
+          {!settings.pkJwtAuth && (
+            <div className="flex items-center gap-2">
+              <label className="w-32 text-gray-800 font-medium">Client Secret</label>
+              <input
+                className={inputStyles}
+                value={settings.clientSecret}
+                onChange={e => setSettings({ ...settings, clientSecret: e.target.value })}
+                disabled={settings.pkJwtAuth}
+              />
+            </div>
+          )}
+
+          <div className="flex items-center gap-2">
+            <label className="w-32 text-gray-800 font-medium">Scope</label>
+            <input
+              className={inputStyles}
+              value={settings.scope}
+              onChange={e => setSettings({ ...settings, scope: e.target.value })}
+            />
+          </div>
+
+          <div className="flex items-center gap-2">
+            <label className="w-32 text-gray-800 font-medium">Redirect URI</label>
+            <input
+              disabled
+              className={disabledInputStyles}
+              value="https://docs.idura.app/verify/guides/oidc-visualizer"
+            />
+          </div>
+
+          <div className="flex items-start gap-2">
+            <label className="w-32 text-gray-800 font-medium">Acr values</label>
+
+            <div className="flex-1 grid grid-cols-5 gap-x-4 gap-y-3 text-[10px]">
+              {PROVIDERS.map(provider => (
+                <div key={provider.title} className="flex flex-col">
+                  <p className="font-medium text-gray-800 mb-1">{provider.title}</p>
+
+                  <div className="flex flex-col space-y-0.5">
+                    {provider.authMethods.map(authMethod => (
+                      <label
+                        key={authMethod.acrValue}
+                        className="flex items-center text-gray-600 hover:text-gray-900 cursor-pointer"
+                      >
+                        <input
+                          type="checkbox"
+                          id={authMethod.acrValue}
+                          className="mr-2 h-3 w-3 mt-0.5 accent-sky-600"
+                          checked={settings.acrValues.includes(authMethod.acrValue)}
+                          onChange={() => toggleAcrValue(authMethod.acrValue)}
+                        />
+                        <span className="leading-normal">{authMethod.title}</span>
+                      </label>
+                    ))}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        <div className="mt-4 flex justify-end text-sm">
+          <button
+            onClick={() => {
+              setSettings({
+                domain: oidcConfig.domain,
+                clientId: oidcConfig.clientId,
+                clientSecret: oidcConfig.clientSecret,
+                scope: oidcConfig.scope,
+                pkJwtAuth: oidcConfig.pkJwtAuth,
+                acrValues: oidcConfig.acrValues || [],
+              });
+            }}
+            className="px-5 py-2 bg-sky-900 mr-2 text-white font-medium hover:bg-gray-900 transition"
+          >
+            Reset to Default
+          </button>
+
+          <button
+            onClick={() => onSave(settings)}
+            className="px-5 py-2 bg-black text-white font-medium hover:bg-gray-900 transition"
+          >
+            Save
+          </button>
+        </div>
+      </div>
+    </div>,
+    document.body,
+  );
+}
diff --git a/src/components/OidcVisualizer/components/StepCard.tsx b/src/components/OidcVisualizer/components/StepCard.tsx
new file mode 100644
index 0000000..d7c88d3
--- /dev/null
+++ b/src/components/OidcVisualizer/components/StepCard.tsx
@@ -0,0 +1,99 @@
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCheck } from '@fortawesome/free-solid-svg-icons';
+import cx from 'classnames';
+
+type JsonValue = string | number | boolean | null | JsonValue[] | { [key: string]: JsonValue };
+type JsonData = { [key: string]: JsonValue };
+
+type StepCardProps = {
+  number?: number;
+  title?: string;
+  description?: string | React.ReactNode;
+  req?: string | JsonData | null;
+  res?: string | JsonData | null;
+  reqNote?: React.ReactNode;
+  action?: React.ReactNode;
+  isActive?: boolean;
+  isCompleted?: boolean;
+  error?: string | null;
+  responseId?: string;
+  cardRef?: React.RefObject<HTMLDivElement | null>;
+};
+
+const StepCard = ({
+  number,
+  title,
+  description,
+  req,
+  reqNote,
+  res,
+  action,
+  isActive,
+  isCompleted,
+  error,
+  responseId,
+  cardRef,
+}: StepCardProps) => {
+  const showStep = isActive || isCompleted ? 'block' : 'hidden';
+
+  return (
+    <div
+      ref={cardRef}
+      className={cx('relative border p-6 mb-6 bg-white shadow-sm transition-all', showStep)}
+    >
+      <div className="absolute left-0 top-0 h-full w-1 bg-sky-700" />
+      <div className="flex items-center gap-3 mb-4">
+        <div
+          className={cx('w-8 h-8 rounded-full flex items-center justify-center font-bold', {
+            'bg-green-600 text-white': isCompleted,
+            'bg-sky-600 text-white': !isCompleted,
+          })}
+        >
+          {isCompleted ? <FontAwesomeIcon icon={faCheck} /> : number}
+        </div>
+        <h3 className="text-xl font-bold text-gray-800 my-4">{title}</h3>
+      </div>
+
+      <p className="text-gray-600 mb-4">{description}</p>
+
+      {/* Request Section */}
+      {req && (
+        <div className="mb-4">
+          <span className="text-xs font-bold text-gray-500 uppercase tracking-wider">Request</span>
+          <pre className="p-4 mt-1 overflow-x-auto text-sm">
+            {typeof req === 'string' ? req : JSON.stringify(req, null, 2)}
+          </pre>
+
+          {reqNote && (
+            <div className="-mt-4 p-2 bg-gray-50 border-l-4 border-gray-200 text-xs">{reqNote}</div>
+          )}
+        </div>
+      )}
+
+      {/* Response Section */}
+      {res && (
+        <div
+          className="mb-4"
+          id={responseId} // This id will be used for scrolling to the response section on Step 2, once the code exchange is completed
+        >
+          <span className="text-xs font-bold text-gray-500 uppercase tracking-wider">Response</span>
+          <pre className="p-4 mt-1 overflow-x-auto text-sm">
+            {typeof res === 'string' ? res : JSON.stringify(res, null, 2)}
+          </pre>
+        </div>
+      )}
+
+      {action && <div className="mt-4 pt-4 flex justify-center">{action}</div>}
+
+      {error && (
+        <div className="bg-red-100 text-red-700 p-4 mt-6">
+          <p className="font-bold">An error occurred</p>
+          <p>{error}</p>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default StepCard;
diff --git a/src/components/OidcVisualizer/components/steps/StepFour.tsx b/src/components/OidcVisualizer/components/steps/StepFour.tsx
new file mode 100644
index 0000000..21030bb
--- /dev/null
+++ b/src/components/OidcVisualizer/components/steps/StepFour.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import StepCard from '../StepCard';
+import { JWTPayload } from 'jose';
+
+type StepOneProps = {
+  stepRef: React.RefObject<HTMLDivElement | null>;
+  decodedPayload: JWTPayload | null;
+};
+
+export default function StepFour({ stepRef, decodedPayload }: StepOneProps) {
+  return (
+    <StepCard
+      number={4}
+      cardRef={stepRef}
+      title="🎉 ID Token is valid!"
+      description={
+        <>
+          <p className="text-xs font-bold text-gray-500 uppercase tracking-wider">
+            Decoded payload:
+          </p>
+          <pre>{JSON.stringify(decodedPayload, null, 2)}</pre>
+        </>
+      }
+      isActive={!!decodedPayload}
+      isCompleted={!!decodedPayload}
+    />
+  );
+}
diff --git a/src/components/OidcVisualizer/components/steps/StepOne.tsx b/src/components/OidcVisualizer/components/steps/StepOne.tsx
new file mode 100644
index 0000000..e7e46e1
--- /dev/null
+++ b/src/components/OidcVisualizer/components/steps/StepOne.tsx
@@ -0,0 +1,42 @@
+import React, { MouseEvent } from 'react';
+import StepCard from '../StepCard';
+import { primaryBtn } from '../../styles';
+
+type StepOneProps = {
+  stepRef: React.RefObject<HTMLDivElement | null>;
+  authorizeUrl: string;
+  authCode?: string | null;
+  onLogin: (event: MouseEvent<HTMLButtonElement>) => void;
+};
+
+export function formatUrl(url: string): string {
+  const [base, query] = url.split('?');
+  if (!query) return base;
+
+  const formattedParams = query
+    .split('&')
+    .map(param => '  ' + decodeURIComponent(param))
+    .join('\n');
+
+  return `${base}?\n${formattedParams}`;
+}
+
+export default function StepOne({ stepRef, authorizeUrl, authCode, onLogin }: StepOneProps) {
+  return (
+    <StepCard
+      number={1}
+      cardRef={stepRef}
+      title="Redirect to OpenID Connect Server"
+      description="User is redirected to the Authorization Server to log in."
+      req={formatUrl(authorizeUrl)}
+      res={authCode ? { code: authCode } : null}
+      isActive={!authCode}
+      isCompleted={!!authCode}
+      action={
+        <button onClick={onLogin} className={primaryBtn}>
+          Start
+        </button>
+      }
+    />
+  );
+}
diff --git a/src/components/OidcVisualizer/components/steps/StepThree.tsx b/src/components/OidcVisualizer/components/steps/StepThree.tsx
new file mode 100644
index 0000000..294d817
--- /dev/null
+++ b/src/components/OidcVisualizer/components/steps/StepThree.tsx
@@ -0,0 +1,72 @@
+import React from 'react';
+import { JWTPayload } from 'jose';
+import StepCard from '../StepCard';
+import { primaryBtn } from '../../styles';
+import type { OidcTokenResponse } from '../../types';
+import oidcConfig from '../../oidcConfig';
+
+type StepThreeProps = {
+  stepRef: React.RefObject<HTMLDivElement | null>;
+  tokenResponse: OidcTokenResponse | null;
+  codeExchangeCompleted: boolean;
+  decodedPayload: JWTPayload | null;
+  onVerify: () => void;
+  step3Error?: string | null;
+};
+
+export default function StepThree({
+  stepRef,
+  tokenResponse,
+  decodedPayload,
+  codeExchangeCompleted,
+  onVerify,
+  step3Error,
+}: StepThreeProps) {
+  const jwksUrl = `https://${oidcConfig.domain}/.well-known/jwks`;
+  return (
+    <StepCard
+      number={3}
+      cardRef={stepRef}
+      title="Verify ID Token"
+      description={
+        tokenResponse && (
+          <>
+            <p className="text-gray-600 mb-3">
+              The final step is validating the{' '}
+              <a href="/verify/reference/glossary/#id-token" target="_blank">
+                ID Token
+              </a>
+              . To confirm that the token originates from the expected issuer and has not been
+              tampered with, we must check its{' '}
+              <a href="/verify/reference/glossary/#json-web-signature-jws" target="_blank">
+                signature
+              </a>
+              .
+            </p>
+
+            <p className="font-semibold mt-4">Your id_token is:</p>
+
+            <pre>{tokenResponse.id_token}</pre>
+
+            <p className="mt-4 text-gray-600">
+              The token is cryptographically signed by Idura Verify. To validate the signature, we
+              use the public key from one of the asymmetric key pairs published at{' '}
+              <a href={jwksUrl} target="_blank">
+                {jwksUrl}
+              </a>
+              . The correct key is selected based on the token’s Key ID (<code>kid</code>).
+            </p>
+          </>
+        )
+      }
+      isActive={!!tokenResponse && !decodedPayload && codeExchangeCompleted}
+      isCompleted={!!decodedPayload}
+      action={
+        <button onClick={onVerify} className={primaryBtn}>
+          Validate Signature
+        </button>
+      }
+      error={step3Error}
+    />
+  );
+}
diff --git a/src/components/OidcVisualizer/components/steps/StepTwo.tsx b/src/components/OidcVisualizer/components/steps/StepTwo.tsx
new file mode 100644
index 0000000..d441c2b
--- /dev/null
+++ b/src/components/OidcVisualizer/components/steps/StepTwo.tsx
@@ -0,0 +1,105 @@
+import React from 'react';
+import StepCard from '../StepCard';
+import { primaryBtn } from '../../styles';
+import type { OidcTokenResponse } from '../../types';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import cx from 'classnames';
+
+type StepTwoProps = {
+  stepRef: React.RefObject<HTMLDivElement | null>;
+  authCode: string | null;
+  tokenResponse: OidcTokenResponse | null;
+  codeExchangeCompleted: boolean;
+  onCodeExchange: () => void;
+  proceedToVerifyWT: () => void;
+  step2Error?: string | null;
+  req: string | null;
+  pkJwtAuth: boolean;
+};
+
+export default function StepTwo({
+  stepRef,
+  authCode,
+  tokenResponse,
+  codeExchangeCompleted,
+  onCodeExchange,
+  proceedToVerifyWT,
+  step2Error,
+  req,
+  pkJwtAuth,
+}: StepTwoProps) {
+  return (
+    <StepCard
+      number={2}
+      cardRef={stepRef}
+      title="Exchange Code for Token"
+      description={
+        authCode && (
+          <>
+            Your Authorization Code is:{' '}
+            <span className="bg-gray-200 text-gray-700 font-mono text-sm px-2 py-1 rounded-sm shadow-inner break-all">
+              {authCode}
+            </span>
+            <p>
+              The code can now be exchanged for an access token and an ID token. Your application
+              initiates the exchange by sending a POST request with the code and the client
+              credentials to the{' '}
+              <a href="/verify/reference/glossary/#token-endpoint">token endpoint</a>.
+            </p>
+            <p>
+              The authorization code is only valid for a single use. Another token request with the
+              same code will trigger an{' '}
+              <a href="/verify/reference/errors/unknown-access-code-error/" target="_blank">
+                <code>Unknown Access Code</code>
+              </a>{' '}
+              error.
+            </p>
+          </>
+        )
+      }
+      req={authCode ? req : null}
+      reqNote={
+        !pkJwtAuth ? (
+          <>
+            <strong>Note:</strong> Including client credentials (<code>client_id</code> and{' '}
+            <code>client_secret</code>) in the payload is discouraged by the OAuth2 specification.
+            Server-side applications should instead send the credentials in the{' '}
+            <code>Authorization: Basic</code> HTTP header.
+          </>
+        ) : null
+      }
+      responseId="codeExchangeResponse"
+      res={tokenResponse}
+      isActive={!!authCode && !codeExchangeCompleted}
+      isCompleted={!!tokenResponse && codeExchangeCompleted}
+      action={
+        !tokenResponse ? (
+          <button onClick={onCodeExchange} className={cx(primaryBtn)}>
+            Exchange Code
+          </button>
+        ) : (
+          <div className="flex flex-row gap-2">
+            <button onClick={onCodeExchange} className={cx(primaryBtn)}>
+              <div className="flex flex-row items-center gap-1">
+                <FontAwesomeIcon icon="arrows-rotate" className="text-md" />
+                Retry Exchange
+              </div>
+            </button>
+
+            <button
+              onClick={proceedToVerifyWT}
+              className={cx(
+                primaryBtn,
+                step2Error && 'bg-gray-400 cursor-not-allowed hover:bg-gray-400',
+              )}
+              disabled={!!step2Error}
+            >
+              Next
+            </button>
+          </div>
+        )
+      }
+      error={step2Error}
+    />
+  );
+}
diff --git a/src/components/OidcVisualizer/generateJwt.tsx b/src/components/OidcVisualizer/generateJwt.tsx
new file mode 100644
index 0000000..0ef107c
--- /dev/null
+++ b/src/components/OidcVisualizer/generateJwt.tsx
@@ -0,0 +1,28 @@
+import * as jose from 'jose';
+import signingJwks from './keys/signing_jwks_public_and_private.json';
+
+type generateJwtProps = {
+  domain: string;
+  clientId: string;
+};
+
+export async function generateJWT({ domain, clientId }: generateJwtProps): Promise<string> {
+  const jwkObject = signingJwks.keys[0];
+  const privateKey = await jose.importJWK(jwkObject, 'RS256');
+
+  try {
+    const jti = crypto.randomUUID();
+    const jwt = await new jose.SignJWT({ jti })
+      .setProtectedHeader({ alg: 'RS256', kid: jwkObject.kid })
+      .setIssuedAt()
+      .setIssuer(clientId)
+      .setSubject(clientId)
+      .setAudience(`https://${domain}`)
+      .setExpirationTime('5m')
+      .sign(privateKey);
+    return jwt;
+  } catch (error) {
+    console.error('Error generating JWT:', error instanceof Error ? error.message : String(error));
+    throw error;
+  }
+}
diff --git a/src/components/OidcVisualizer/hooks/useLocalStorage.tsx b/src/components/OidcVisualizer/hooks/useLocalStorage.tsx
new file mode 100644
index 0000000..911b1e0
--- /dev/null
+++ b/src/components/OidcVisualizer/hooks/useLocalStorage.tsx
@@ -0,0 +1,16 @@
+import { useState, useEffect } from 'react';
+
+export default function useLocalStorage<T>(key: string, defaultValue: T) {
+  const [value, setValue] = useState<T>(() => {
+    if (typeof window === 'undefined') return defaultValue;
+    const saved = localStorage.getItem(key);
+    return saved ? JSON.parse(saved) : defaultValue;
+  });
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    localStorage.setItem(key, JSON.stringify(value));
+  }, [key, value]);
+
+  return [value, setValue] as const;
+}
diff --git a/src/components/OidcVisualizer/keys/signing_jwks_public.json b/src/components/OidcVisualizer/keys/signing_jwks_public.json
new file mode 100644
index 0000000..2c52929
--- /dev/null
+++ b/src/components/OidcVisualizer/keys/signing_jwks_public.json
@@ -0,0 +1,11 @@
+{
+  "keys": [
+    {
+      "kty": "RSA",
+      "use": "sig",
+      "kid": "iq6S-xzUIUMVxWxRPlJWG0yZjdVa4xQ4OF8JJ_BYbOk",
+      "e": "AQAB",
+      "n": "uOJ50wKTobDzHLWBMjky8OHTUxD4drnKdulPFLBJClPi0tcjsrYoLaa6bXPjwnh_OuloPiBVPY_Wl3UL7qWMzx6ouNTPbEmJJYE-kgF-G2pB0wz_gxdTyPzy6GcdRIAhuZvfdrD4VZ5IiOXdsoeQOgMmGafcnHoivXiQXN9w7CXzWcWkWqmdP0_bcFlJHtj8epHn0ZgfB-qyFfQJ03eHSCtAKqiHnLvLuSn8dAVBdsv-OBnP_hKD3PemCO70tzHNd5wX9KGXke7rzwOeeYa8nsMdJdh2Uncz_-lvRK4TiO7QzUs-ZFDujIufLrrlbZgGhkiDUvJmBmnYboTfWtv1iQ"
+    }
+  ]
+}
diff --git a/src/components/OidcVisualizer/keys/signing_jwks_public_and_private.json b/src/components/OidcVisualizer/keys/signing_jwks_public_and_private.json
new file mode 100644
index 0000000..df4d031
--- /dev/null
+++ b/src/components/OidcVisualizer/keys/signing_jwks_public_and_private.json
@@ -0,0 +1,17 @@
+{
+  "keys": [
+    {
+      "kty": "RSA",
+      "n": "uOJ50wKTobDzHLWBMjky8OHTUxD4drnKdulPFLBJClPi0tcjsrYoLaa6bXPjwnh_OuloPiBVPY_Wl3UL7qWMzx6ouNTPbEmJJYE-kgF-G2pB0wz_gxdTyPzy6GcdRIAhuZvfdrD4VZ5IiOXdsoeQOgMmGafcnHoivXiQXN9w7CXzWcWkWqmdP0_bcFlJHtj8epHn0ZgfB-qyFfQJ03eHSCtAKqiHnLvLuSn8dAVBdsv-OBnP_hKD3PemCO70tzHNd5wX9KGXke7rzwOeeYa8nsMdJdh2Uncz_-lvRK4TiO7QzUs-ZFDujIufLrrlbZgGhkiDUvJmBmnYboTfWtv1iQ",
+      "e": "AQAB",
+      "d": "LhgoT3N9pExEwj0AZrXkKiIbJByhMyEnLIaEmn9Iupu1i888H1ZG1sF5uVY7n1DM-f-IlCVrQ7ke58h7lq7MDu_S18guyhnUfS_wttewjPR3CydbFvZkk9QC1A7hQTLRXlSvFMPduHbWaeWQDxc7Q60r5uhQZX39nRbPaTvJ86gpRMUkSRcbbdS_KIW9_M8JZVJ6aJQlLYrkAOACb4EVNjfxuXL3BEFePvVdtIppRX74a23gRdRp1NWQD_VCxV9u8f4GKLdOlB2_rIPbTWjt0FU7FQsfs_lYPDkAkp5MLgNbO4O05f73BhEaBKZ6gyX3_pVvJv9qz9TxptPir54t",
+      "p": "-y41wPdrAa1qt9nkOMJqPIMUImxQdn8efpukjO-MDvT_Y8hpYUU-wZY1OY9ps_wBTx54Y8qK0Cu4k9c3UIvrTMfhCavBL_EH-PTObxKEd59fhInQ-TqbehDrmd3qH_DJ2QOSe7NuxGS9CfhLE1cgyrt6zN_TGUJSsVLjJ42RaXM",
+      "q": "vG6ffuQg5Hw98rw2wKS2RtFxq7x3CG-xQA70dSaN93VcUkRWfOfTnBXN49HyHdz0XrXa77hvPVwmkhFjIkufc6HtSKHXZ7haVc2gTsIAIcjcAA57jXQZe1an4yVwLaPCPJSiFcYhjQNj4rwswwwOjDPNAxRfzP0XTfp8jBqp1hM",
+      "dp": "sWH-4BlaXkLjnJapz1OsxrMi4vRvFl_LX0n3OPhqhp2KRiNgGCtYmEnFqLKYyVxsaD1yc7aztTNLFEzmaWGGeCCn0baTpZGoOa5YoqQHHJtWTzksdPVomxmb6HuJPalEQpd9ORKMZPFndsT779qV89XWcRyX7byivUt105bsW_U",
+      "dq": "TWxmvIyft0IVchdDqAQFoTONsTLO9fhurBN4_mnJC1R9io_puYjHuep7npA1G3AeOIwgWT8-9cdXUc0zHnRUH_74sE9PYp6s_3Rt2e58f2U4gA1zVrvNfJAui3ZmkVooBRxNPQUb5ATwlckb20io8ZKXOhy1AFU9rhyt8CNEhWE",
+      "qi": "QdX8GEE59ulLdr38SXvFyHFANozzNKC9MXE4TREVE9MTVtFHFib7Kssm6UyfRynYu_TH0g8-QJpTREAZ0n-ag6hwCNYeVOP32W7vMINZfKeZJUdenFGW2-0dXN8N0AopgnePtbCBnyRfD4T1bDJ9nNfO_y-Qapnp2RNgr6f8tGQ",
+      "use": "sig",
+      "kid": "iq6S-xzUIUMVxWxRPlJWG0yZjdVa4xQ4OF8JJ_BYbOk"
+    }
+  ]
+}
diff --git a/src/components/OidcVisualizer/oidcConfig.tsx b/src/components/OidcVisualizer/oidcConfig.tsx
new file mode 100644
index 0000000..85b6b3a
--- /dev/null
+++ b/src/components/OidcVisualizer/oidcConfig.tsx
@@ -0,0 +1,12 @@
+const oidcConfig = {
+  clientId: 'urn:oidc:visualizer',
+  clientSecret: '4AGzg0LRnJpoVzHV01/N9YfBDZkwcoePYca5QB93c88=',
+  domain: 'docs-samples-test.criipto.id',
+  redirectUri: `${typeof window !== 'undefined' ? window.location.origin : 'https://docs.idura.app'}/verify/guides/oidc-visualizer`,
+  scope: 'openid',
+  responseType: 'code',
+  pkJwtAuth: false,
+  acrValues: [],
+};
+
+export default oidcConfig;
diff --git a/src/components/OidcVisualizer/styles.tsx b/src/components/OidcVisualizer/styles.tsx
new file mode 100644
index 0000000..dc0a308
--- /dev/null
+++ b/src/components/OidcVisualizer/styles.tsx
@@ -0,0 +1,10 @@
+export const primaryBtn =
+  'px-6 py-4 bg-sky-900 text-white uppercase text-xs font-medium transition hover:bg-sky-700 hover:delay-100';
+
+export const linkStyles = 'text-sky-700 underline hover:text-sky-900';
+
+export const inputStyles =
+  'flex-1 border border-gray-300 px-2 py-1 text-gray-900 transition-colors focus:border-sky-600 focus:ring-0 focus:ring-sky-600 focus:outline-none';
+
+export const disabledInputStyles =
+  'flex-1 border border-gray-300 bg-gray-100 text-gray-700 px-2 py-1';
diff --git a/src/components/OidcVisualizer/types.tsx b/src/components/OidcVisualizer/types.tsx
new file mode 100644
index 0000000..97bfbe5
--- /dev/null
+++ b/src/components/OidcVisualizer/types.tsx
@@ -0,0 +1,17 @@
+export type OidcTokenResponse = {
+  token_type: 'Bearer';
+  expires_in: number;
+  id_token: string;
+  access_token: string;
+  error?: string;
+  error_description?: string;
+};
+
+export type OidcSettings = {
+  domain: string;
+  clientId: string;
+  clientSecret: string;
+  scope: string;
+  pkJwtAuth: boolean;
+  acrValues?: string[];
+};
diff --git a/src/pages/verify/guides/oidc-visualizer.mdx b/src/pages/verify/guides/oidc-visualizer.mdx
new file mode 100644
index 0000000..ae7c989
--- /dev/null
+++ b/src/pages/verify/guides/oidc-visualizer.mdx
@@ -0,0 +1,14 @@
+---
+product: verify
+category: Guides & Tools
+sort: 0
+title: OIDC Visualizer
+subtitle: An interactive OpenID Connect sequence visualizer
+---
+
+import OidcVisualizer from '../../../components/OidcVisualizer/OidcVisualizer';
+
+This interactive tool is built to help developers understand [OpenID Connect](/verify/getting-started/glossary/#openid-connect-oidc).
+Run the protocol's calls in sequence to see what happens at every step.
+
+<OidcVisualizer />