diff --git a/.astro/settings.json b/.astro/settings.json
index 501b47e44..b33c042c8 100644
--- a/.astro/settings.json
+++ b/.astro/settings.json
@@ -3,6 +3,6 @@
 		"enabled": false
 	},
 	"_variables": {
-		"lastUpdateCheck": 1749494681580
+		"lastUpdateCheck": 1749465237682
 	}
 }
\ No newline at end of file
diff --git a/package.json b/package.json
index bd177097e..831f517f2 100644
--- a/package.json
+++ b/package.json
@@ -73,6 +73,7 @@
     "npm-check-updates": "^18.0.1",
     "playwright": "^1.52.0",
     "prismjs": "^1.30.0",
+    "radix-ui": "^1.4.2",
     "react": "^19.1.0",
     "react-calendar-heatmap": "^1.10.0",
     "react-confetti": "^6.4.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b80184638..2aaa61835 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -134,6 +134,9 @@ importers:
       prismjs:
         specifier: ^1.30.0
         version: 1.30.0
+      radix-ui:
+        specifier: ^1.4.2
+        version: 1.4.2(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       react:
         specifier: ^19.1.0
         version: 19.1.0
@@ -1031,9 +1034,51 @@ packages:
   '@popperjs/core@2.11.8':
     resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
 
+  '@radix-ui/number@1.1.1':
+    resolution: {integrity: sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g==}
+
   '@radix-ui/primitive@1.1.2':
     resolution: {integrity: sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA==}
 
+  '@radix-ui/react-accessible-icon@1.1.7':
+    resolution: {integrity: sha512-XM+E4WXl0OqUJFovy6GjmxxFyx9opfCAIUku4dlKRd5YEPqt4kALOkQOp0Of6reHuUkJuiPBEc5k0o4z4lTC8A==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-accordion@1.2.11':
+    resolution: {integrity: sha512-l3W5D54emV2ues7jjeG1xcyN7S3jnK3zE2zHqgn0CmMsy9lNJwmgcrmaxS+7ipw15FAivzKNzH3d5EcGoFKw0A==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-alert-dialog@1.1.14':
+    resolution: {integrity: sha512-IOZfZ3nPvN6lXpJTBCunFQPRSvK8MDgSc1FB85xnIpUKOw9en0dJj8JmCAxV7BiZdtYlUpmrQjoTFkVYtdoWzQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-arrow@1.1.7':
     resolution: {integrity: sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==}
     peerDependencies:
@@ -1047,6 +1092,58 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-aspect-ratio@1.1.7':
+    resolution: {integrity: sha512-Yq6lvO9HQyPwev1onK1daHCHqXVLzPhSVjmsNjCa2Zcxy2f7uJD2itDtxknv6FzAKCwD1qQkeVDmX/cev13n/g==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-avatar@1.1.10':
+    resolution: {integrity: sha512-V8piFfWapM5OmNCXTzVQY+E1rDa53zY+MQ4Y7356v4fFz6vqCyUtIz2rUD44ZEdwg78/jKmMJHj07+C/Z/rcog==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-checkbox@1.3.2':
+    resolution: {integrity: sha512-yd+dI56KZqawxKZrJ31eENUwqc1QSqg4OZ15rybGjF2ZNwMO+wCyHzAVLRp9qoYJf7kYy0YpZ2b0JCzJ42HZpA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-collapsible@1.1.11':
+    resolution: {integrity: sha512-2qrRsVGSCYasSz1RFOorXwl0H7g7J1frQtgpQgYrt+MOidtPAINHn9CPovQXb83r8ahapdx3Tu0fa/pdFFSdPg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-collection@1.1.7':
     resolution: {integrity: sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==}
     peerDependencies:
@@ -1069,6 +1166,19 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-context-menu@2.2.15':
+    resolution: {integrity: sha512-UsQUMjcYTsBjTSXw0P3GO0werEQvUY2plgRQuKoCTtkNr45q1DiL51j4m7gxhABzZ0BadoXNsIbg7F3KwiUBbw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-context@1.1.2':
     resolution: {integrity: sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==}
     peerDependencies:
@@ -1078,6 +1188,19 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-dialog@1.1.14':
+    resolution: {integrity: sha512-+CpweKjqpzTmwRwcYECQcNYbI8V9VSQt0SNFKeEBLgfucbsLssU6Ppq7wUdNXEGb573bMjFhVjKVll8rmV6zMw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-direction@1.1.1':
     resolution: {integrity: sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==}
     peerDependencies:
@@ -1135,6 +1258,32 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-form@0.1.7':
+    resolution: {integrity: sha512-IXLKFnaYvFg/KkeV5QfOX7tRnwHXp127koOFUjLWMTrRv5Rny3DQcAtIFFeA/Cli4HHM8DuJCXAUsgnFVJndlw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-hover-card@1.1.14':
+    resolution: {integrity: sha512-CPYZ24Mhirm+g6D8jArmLzjYu4Eyg3TTUHswR26QgzXBHBe64BO/RHOJKzmF/Dxb4y4f9PKyJdwm/O/AhNkb+Q==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-id@1.1.1':
     resolution: {integrity: sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==}
     peerDependencies:
@@ -1144,6 +1293,19 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-label@2.1.7':
+    resolution: {integrity: sha512-YT1GqPSL8kJn20djelMX7/cTRp/Y9w5IZHvfxQTVHrOqa2yMl7i/UfMqKRU5V7mEyKTrUVgJXhNQPVCG8PBLoQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-menu@2.1.15':
     resolution: {integrity: sha512-tVlmA3Vb9n8SZSd+YSbuFR66l87Wiy4du+YE+0hzKQEANA+7cWKH1WgqcEX4pXqxUFQKrWQGHdvEfw00TjFiew==}
     peerDependencies:
@@ -1157,6 +1319,58 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-menubar@1.1.15':
+    resolution: {integrity: sha512-Z71C7LGD+YDYo3TV81paUs8f3Zbmkvg6VLRQpKYfzioOE6n7fOhA3ApK/V/2Odolxjoc4ENk8AYCjohCNayd5A==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-navigation-menu@1.2.13':
+    resolution: {integrity: sha512-WG8wWfDiJlSF5hELjwfjSGOXcBR/ZMhBFCGYe8vERpC39CQYZeq1PQ2kaYHdye3V95d06H89KGMsVCIE4LWo3g==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-one-time-password-field@0.1.7':
+    resolution: {integrity: sha512-w1vm7AGI8tNXVovOK7TYQHrAGpRF7qQL+ENpT1a743De5Zmay2RbWGKAiYDKIyIuqptns+znCKwNztE2xl1n0Q==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-password-toggle-field@0.1.2':
+    resolution: {integrity: sha512-F90uYnlBsLPU1UbSLciLsWQmk8+hdWa6SFw4GXaIdNWxFxI5ITKVdAG64f+Twaa9ic6xE7pqxPyUmodrGjT4pQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-popover@1.1.14':
     resolution: {integrity: sha512-ODz16+1iIbGUfFEfKx2HTPKizg2MN39uIOV8MXeHnmdd3i/N9Wt7vU46wbHsqA0xoaQyXVcs0KIlBdOA2Y95bw==}
     peerDependencies:
@@ -1222,6 +1436,32 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-progress@1.1.7':
+    resolution: {integrity: sha512-vPdg/tF6YC/ynuBIJlk1mm7Le0VgW6ub6J2UWnTQ7/D23KXcPI1qy+0vBkgKgd38RCMJavBXpB83HPNFMTb0Fg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-radio-group@1.3.7':
+    resolution: {integrity: sha512-9w5XhD0KPOrm92OTTE0SysH3sYzHsSTHNvZgUBo/VZ80VdYyB5RneDbc0dKpURS24IxkoFRu/hI0i4XyfFwY6g==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-roving-focus@1.1.10':
     resolution: {integrity: sha512-dT9aOXUen9JSsxnMPv/0VqySQf5eDQ6LCk5Sw28kamz8wSOW2bJdlX2Bg5VUIIcV+6XlHpWTIuTPCf/UNIyq8Q==}
     peerDependencies:
@@ -1235,6 +1475,58 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-scroll-area@1.2.9':
+    resolution: {integrity: sha512-YSjEfBXnhUELsO2VzjdtYYD4CfQjvao+lhhrX5XsHD7/cyUNzljF1FHEbgTPN7LH2MClfwRMIsYlqTYpKTTe2A==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-select@2.2.5':
+    resolution: {integrity: sha512-HnMTdXEVuuyzx63ME0ut4+sEMYW6oouHWNGUZc7ddvUWIcfCva/AMoqEW/3wnEllriMWBa0RHspCYnfCWJQYmA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-separator@1.1.7':
+    resolution: {integrity: sha512-0HEb8R9E8A+jZjvmFCy/J4xhbXy3TV+9XSnGJ3KvTtjlIUy/YQ/p6UYZvi7YbeoeXdyU9+Y3scizK6hkY37baA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-slider@1.3.5':
+    resolution: {integrity: sha512-rkfe2pU2NBAYfGaxa3Mqosi7VZEWX5CxKaanRv0vZd4Zhl9fvQrg0VM93dv3xGLGfrHuoTRF3JXH8nb9g+B3fw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-slot@1.2.3':
     resolution: {integrity: sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==}
     peerDependencies:
@@ -1244,6 +1536,97 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-switch@1.2.5':
+    resolution: {integrity: sha512-5ijLkak6ZMylXsaImpZ8u4Rlf5grRmoc0p0QeX9VJtlrM4f5m3nCTX8tWga/zOA8PZYIR/t0p2Mnvd7InrJ6yQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-tabs@1.1.12':
+    resolution: {integrity: sha512-GTVAlRVrQrSw3cEARM0nAx73ixrWDPNZAruETn3oHCNP6SbZ/hNxdxp+u7VkIEv3/sFoLq1PfcHrl7Pnp0CDpw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-toast@1.2.14':
+    resolution: {integrity: sha512-nAP5FBxBJGQ/YfUB+r+O6USFVkWq3gAInkxyEnmvEV5jtSbfDhfa4hwX8CraCnbjMLsE7XSf/K75l9xXY7joWg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-toggle-group@1.1.10':
+    resolution: {integrity: sha512-kiU694Km3WFLTC75DdqgM/3Jauf3rD9wxeS9XtyWFKsBUeZA337lC+6uUazT7I1DhanZ5gyD5Stf8uf2dbQxOQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-toggle@1.1.9':
+    resolution: {integrity: sha512-ZoFkBBz9zv9GWer7wIjvdRxmh2wyc2oKWw6C6CseWd6/yq1DK/l5lJ+wnsmFwJZbBYqr02mrf8A2q/CVCuM3ZA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-toolbar@1.1.10':
+    resolution: {integrity: sha512-jiwQsduEL++M4YBIurjSa+voD86OIytCod0/dbIxFZDLD8NfO1//keXYMfsW8BPcfqwoNjt+y06XcJqAb4KR7A==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-tooltip@1.2.7':
+    resolution: {integrity: sha512-Ap+fNYwKTYJ9pzqW+Xe2HtMRbQ/EeWkj2qykZ6SuEV4iS/o1bZI5ssJbk4D2r8XuDuOBVz/tIx2JObtuqU+5Zw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-use-callback-ref@1.1.1':
     resolution: {integrity: sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==}
     peerDependencies:
@@ -1280,6 +1663,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-use-is-hydrated@0.1.0':
+    resolution: {integrity: sha512-U+UORVEq+cTnRIaostJv9AGdV3G6Y+zbVd+12e18jQ5A3c0xL03IhnHuiU4UV69wolOQp5GfR58NW/EgdQhwOA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-use-layout-effect@1.1.1':
     resolution: {integrity: sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==}
     peerDependencies:
@@ -1289,6 +1681,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-use-previous@1.1.1':
+    resolution: {integrity: sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-use-rect@1.1.1':
     resolution: {integrity: sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==}
     peerDependencies:
@@ -1307,6 +1708,19 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-visually-hidden@1.2.3':
+    resolution: {integrity: sha512-pzJq12tEaaIhqjbzpCuv/OypJY/BPavOofm+dbab+MHLajy277+1lLm6JFcGgF5eskJ6mquGirhXY2GD/8u8Ug==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/rect@1.1.1':
     resolution: {integrity: sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==}
 
@@ -3606,6 +4020,19 @@ packages:
   queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 
+  radix-ui@1.4.2:
+    resolution: {integrity: sha512-fT/3YFPJzf2WUpqDoQi005GS8EpCi+53VhcLaHUj5fwkPYiZAjk1mSxFvbMA8Uq71L03n+WysuYC+mlKkXxt/Q==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   radix3@1.1.2:
     resolution: {integrity: sha512-b484I/7b8rDEdSDKckSSBA8knMpcdsXudlE/LNL639wFoHKwLbEkQFZHWEYwDC0wa0FKUcCY+GAF73Z7wxNVFA==}
 
@@ -5075,8 +5502,50 @@ snapshots:
 
   '@popperjs/core@2.11.8': {}
 
+  '@radix-ui/number@1.1.1': {}
+
   '@radix-ui/primitive@1.1.2': {}
 
+  '@radix-ui/react-accessible-icon@1.1.7(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.4
+      '@types/react-dom': 19.1.5(@types/react@19.1.4)
+
+  '@radix-ui/react-accordion@1.2.11(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-collapsible': 1.1.11(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.4)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.4
+      '@types/react-dom': 19.1.5(@types/react@19.1.4)
+
+  '@radix-ui/react-alert-dialog@1.1.14(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-dialog': 1.1.14(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.1.4)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.4
+      '@types/react-dom': 19.1.5(@types/react@19.1.4)
+
   '@radix-ui/react-arrow@1.1.7(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
       '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
@@ -5086,6 +5555,60 @@ snapshots:
       '@types/react': 19.1.4
       '@types/react-dom': 19.1.5(@types/react@19.1.4)
 
+  '@radix-ui/react-aspect-ratio@1.1.7(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.4
+      '@types/react-dom': 19.1.5(@types/react@19.1.4)
+
+  '@radix-ui/react-avatar@1.1.10(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-use-is-hydrated': 0.1.0(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.4)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.4
+      '@types/react-dom': 19.1.5(@types/react@19.1.4)
+
+  '@radix-ui/react-checkbox@1.3.2(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@19.1.4)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.4
+      '@types/react-dom': 19.1.5(@types/react@19.1.4)
+
+  '@radix-ui/react-collapsible@1.1.11(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.4)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.4
+      '@types/react-dom': 19.1.5(@types/react@19.1.4)
+
   '@radix-ui/react-collection@1.1.7(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.4)(react@19.1.0)
@@ -5104,12 +5627,48 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.1.4
 
+  '@radix-ui/react-context-menu@2.2.15(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-menu': 2.1.15(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.4)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.4
+      '@types/react-dom': 19.1.5(@types/react@19.1.4)
+
   '@radix-ui/react-context@1.1.2(@types/react@19.1.4)(react@19.1.0)':
     dependencies:
       react: 19.1.0
     optionalDependencies:
       '@types/react': 19.1.4
 
+  '@radix-ui/react-dialog@1.1.14(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-dismissable-layer': 1.1.10(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-focus-guards': 1.1.2(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.4)(react@19.1.0)
+      aria-hidden: 1.2.6
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+      react-remove-scroll: 2.7.1(@types/react@19.1.4)(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.4
+      '@types/react-dom': 19.1.5(@types/react@19.1.4)
+
   '@radix-ui/react-direction@1.1.1(@types/react@19.1.4)(react@19.1.0)':
     dependencies:
       react: 19.1.0
@@ -5161,6 +5720,37 @@ snapshots:
       '@types/react': 19.1.4
       '@types/react-dom': 19.1.5(@types/react@19.1.4)
 
+  '@radix-ui/react-form@0.1.7(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-label': 2.1.7(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.4
+      '@types/react-dom': 19.1.5(@types/react@19.1.4)
+
+  '@radix-ui/react-hover-card@1.1.14(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-dismissable-layer': 1.1.10(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-popper': 1.2.7(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.4)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.4
+      '@types/react-dom': 19.1.5(@types/react@19.1.4)
+
   '@radix-ui/react-id@1.1.1(@types/react@19.1.4)(react@19.1.0)':
     dependencies:
       '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.4)(react@19.1.0)
@@ -5168,6 +5758,15 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.1.4
 
+  '@radix-ui/react-label@2.1.7(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.4
+      '@types/react-dom': 19.1.5(@types/react@19.1.4)
+
   '@radix-ui/react-menu@2.1.15(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
       '@radix-ui/primitive': 1.1.2
@@ -5194,6 +5793,82 @@ snapshots:
       '@types/react': 19.1.4
       '@types/react-dom': 19.1.5(@types/react@19.1.4)
 
+  '@radix-ui/react-menubar@1.1.15(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-menu': 2.1.15(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-roving-focus': 1.1.10(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.4)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.4
+      '@types/react-dom': 19.1.5(@types/react@19.1.4)
+
+  '@radix-ui/react-navigation-menu@1.2.13(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-dismissable-layer': 1.1.10(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.4
+      '@types/react-dom': 19.1.5(@types/react@19.1.4)
+
+  '@radix-ui/react-one-time-password-field@0.1.7(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/number': 1.1.1
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-roving-focus': 1.1.10(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-use-is-hydrated': 0.1.0(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.4)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.4
+      '@types/react-dom': 19.1.5(@types/react@19.1.4)
+
+  '@radix-ui/react-password-toggle-field@0.1.2(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-use-is-hydrated': 0.1.0(@types/react@19.1.4)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.4
+      '@types/react-dom': 19.1.5(@types/react@19.1.4)
+
   '@radix-ui/react-popover@1.1.14(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
       '@radix-ui/primitive': 1.1.2
@@ -5264,6 +5939,34 @@ snapshots:
       '@types/react': 19.1.4
       '@types/react-dom': 19.1.5(@types/react@19.1.4)
 
+  '@radix-ui/react-progress@1.1.7(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.4
+      '@types/react-dom': 19.1.5(@types/react@19.1.4)
+
+  '@radix-ui/react-radio-group@1.3.7(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-roving-focus': 1.1.10(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@19.1.4)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.4
+      '@types/react-dom': 19.1.5(@types/react@19.1.4)
+
   '@radix-ui/react-roving-focus@1.1.10(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
       '@radix-ui/primitive': 1.1.2
@@ -5281,6 +5984,80 @@ snapshots:
       '@types/react': 19.1.4
       '@types/react-dom': 19.1.5(@types/react@19.1.4)
 
+  '@radix-ui/react-scroll-area@1.2.9(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/number': 1.1.1
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.4)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.4
+      '@types/react-dom': 19.1.5(@types/react@19.1.4)
+
+  '@radix-ui/react-select@2.2.5(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/number': 1.1.1
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-dismissable-layer': 1.1.10(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-focus-guards': 1.1.2(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-popper': 1.2.7(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      aria-hidden: 1.2.6
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+      react-remove-scroll: 2.7.1(@types/react@19.1.4)(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.4
+      '@types/react-dom': 19.1.5(@types/react@19.1.4)
+
+  '@radix-ui/react-separator@1.1.7(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.4
+      '@types/react-dom': 19.1.5(@types/react@19.1.4)
+
+  '@radix-ui/react-slider@1.3.5(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/number': 1.1.1
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@19.1.4)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.4
+      '@types/react-dom': 19.1.5(@types/react@19.1.4)
+
   '@radix-ui/react-slot@1.2.3(@types/react@19.1.4)(react@19.1.0)':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.4)(react@19.1.0)
@@ -5288,6 +6065,118 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.1.4
 
+  '@radix-ui/react-switch@1.2.5(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@19.1.4)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.4
+      '@types/react-dom': 19.1.5(@types/react@19.1.4)
+
+  '@radix-ui/react-tabs@1.1.12(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-roving-focus': 1.1.10(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.4)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.4
+      '@types/react-dom': 19.1.5(@types/react@19.1.4)
+
+  '@radix-ui/react-toast@1.2.14(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-dismissable-layer': 1.1.10(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.4
+      '@types/react-dom': 19.1.5(@types/react@19.1.4)
+
+  '@radix-ui/react-toggle-group@1.1.10(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-roving-focus': 1.1.10(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-toggle': 1.1.9(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.4)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.4
+      '@types/react-dom': 19.1.5(@types/react@19.1.4)
+
+  '@radix-ui/react-toggle@1.1.9(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.4)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.4
+      '@types/react-dom': 19.1.5(@types/react@19.1.4)
+
+  '@radix-ui/react-toolbar@1.1.10(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-roving-focus': 1.1.10(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-separator': 1.1.7(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-toggle-group': 1.1.10(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.4
+      '@types/react-dom': 19.1.5(@types/react@19.1.4)
+
+  '@radix-ui/react-tooltip@1.2.7(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-dismissable-layer': 1.1.10(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-popper': 1.2.7(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.4
+      '@types/react-dom': 19.1.5(@types/react@19.1.4)
+
   '@radix-ui/react-use-callback-ref@1.1.1(@types/react@19.1.4)(react@19.1.0)':
     dependencies:
       react: 19.1.0
@@ -5316,12 +6205,25 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.1.4
 
+  '@radix-ui/react-use-is-hydrated@0.1.0(@types/react@19.1.4)(react@19.1.0)':
+    dependencies:
+      react: 19.1.0
+      use-sync-external-store: 1.5.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.4
+
   '@radix-ui/react-use-layout-effect@1.1.1(@types/react@19.1.4)(react@19.1.0)':
     dependencies:
       react: 19.1.0
     optionalDependencies:
       '@types/react': 19.1.4
 
+  '@radix-ui/react-use-previous@1.1.1(@types/react@19.1.4)(react@19.1.0)':
+    dependencies:
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.4
+
   '@radix-ui/react-use-rect@1.1.1(@types/react@19.1.4)(react@19.1.0)':
     dependencies:
       '@radix-ui/rect': 1.1.1
@@ -5336,6 +6238,15 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.1.4
 
+  '@radix-ui/react-visually-hidden@1.2.3(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.4
+      '@types/react-dom': 19.1.5(@types/react@19.1.4)
+
   '@radix-ui/rect@1.1.1': {}
 
   '@remirror/core-constants@3.0.0': {}
@@ -7733,6 +8644,69 @@ snapshots:
 
   queue-microtask@1.2.3: {}
 
+  radix-ui@1.4.2(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-accessible-icon': 1.1.7(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-accordion': 1.2.11(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-alert-dialog': 1.1.14(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-arrow': 1.1.7(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-aspect-ratio': 1.1.7(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-avatar': 1.1.10(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-checkbox': 1.3.2(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-collapsible': 1.1.11(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-context-menu': 2.2.15(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-dialog': 1.1.14(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-dismissable-layer': 1.1.10(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-dropdown-menu': 2.1.15(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-focus-guards': 1.1.2(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-form': 0.1.7(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-hover-card': 1.1.14(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-label': 2.1.7(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-menu': 2.1.15(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-menubar': 1.1.15(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-navigation-menu': 1.2.13(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-one-time-password-field': 0.1.7(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-password-toggle-field': 0.1.2(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-popover': 1.1.14(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-popper': 1.2.7(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-progress': 1.1.7(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-radio-group': 1.3.7(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-roving-focus': 1.1.10(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-scroll-area': 1.2.9(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-select': 2.2.5(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-separator': 1.1.7(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-slider': 1.3.5(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-switch': 1.2.5(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-tabs': 1.1.12(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-toast': 1.2.14(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-toggle': 1.1.9(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-toggle-group': 1.1.10(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-toolbar': 1.1.10(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-tooltip': 1.2.7(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-use-escape-keydown': 1.1.1(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-use-is-hydrated': 0.1.0(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@19.1.4)(react@19.1.0)
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.1.5(@types/react@19.1.4))(@types/react@19.1.4)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.4
+      '@types/react-dom': 19.1.5(@types/react@19.1.4)
+
   radix3@1.1.2: {}
 
   range-parser@1.2.1: {}
diff --git a/src/components/AIChat/AIChat.tsx b/src/components/AIChat/AIChat.tsx
index 783398e31..86246a0c4 100644
--- a/src/components/AIChat/AIChat.tsx
+++ b/src/components/AIChat/AIChat.tsx
@@ -219,7 +219,7 @@ export function AIChat(props: AIChatProps) {
       credentials: 'include',
       body: JSON.stringify({
         chatHistoryId: defaultChatHistoryId,
-        messages: messages.slice(-10),
+        messages,
         force,
       }),
     });
@@ -283,8 +283,7 @@ export function AIChat(props: AIChatProps) {
         });
       },
       onDetails: (details) => {
-        const detailsJson = JSON.parse(details);
-        const chatHistoryId = detailsJson?.chatHistoryId;
+        const chatHistoryId = details?.chatHistoryId;
         if (!chatHistoryId) {
           return;
         }
diff --git a/src/components/AIChat/AIChatCouse.tsx b/src/components/AIChat/AIChatCouse.tsx
index e7a48ff37..ecbc7d21c 100644
--- a/src/components/AIChat/AIChatCouse.tsx
+++ b/src/components/AIChat/AIChatCouse.tsx
@@ -33,7 +33,7 @@ export function AIChatCourse(props: AIChatCourseProps) {
     return null;
   }
 
-  const courseSearchUrl = `/ai/search?term=${course?.keyword}&difficulty=${course?.difficulty}`;
+  const courseSearchUrl = `/ai/course?term=${course?.keyword}&difficulty=${course?.difficulty}`;
 
   return (
     <div className="relative my-6 flex flex-wrap gap-1 first:mt-0 last:mb-0">
diff --git a/src/components/AIGuide/AIGuideActions.tsx b/src/components/AIGuide/AIGuideActions.tsx
new file mode 100644
index 000000000..65772b877
--- /dev/null
+++ b/src/components/AIGuide/AIGuideActions.tsx
@@ -0,0 +1,116 @@
+import { ArrowUpRightIcon, MoreVertical, Play, Trash2 } from 'lucide-react';
+import { useRef, useState } from 'react';
+import { useOutsideClick } from '../../hooks/use-outside-click';
+import { useKeydown } from '../../hooks/use-keydown';
+import { useToast } from '../../hooks/use-toast';
+import { useMutation } from '@tanstack/react-query';
+import { queryClient } from '../../stores/query-client';
+import { httpDelete } from '../../lib/query-http';
+
+type AIGuideActionsType = {
+  guideSlug: string;
+  onDeleted?: () => void;
+};
+
+export function AIGuideActions(props: AIGuideActionsType) {
+  const { guideSlug, onDeleted } = props;
+
+  const toast = useToast();
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const [isOpen, setIsOpen] = useState(false);
+  const [isConfirming, setIsConfirming] = useState(false);
+
+  const { mutate: deleteCourse, isPending: isDeleting } = useMutation(
+    {
+      mutationFn: async () => {
+        return httpDelete(`/v1-delete-ai-guide/${guideSlug}`);
+      },
+      onSuccess: () => {
+        toast.success('Guide deleted');
+        queryClient.invalidateQueries({
+          predicate: (query) => query.queryKey?.[0] === 'user-ai-guides',
+        });
+        onDeleted?.();
+      },
+      onError: (error) => {
+        toast.error(error?.message || 'Failed to delete guide');
+      },
+    },
+    queryClient,
+  );
+
+  useOutsideClick(dropdownRef, () => {
+    setIsOpen(false);
+  });
+
+  useKeydown('Escape', () => {
+    setIsOpen(false);
+  });
+
+  return (
+    <div className="relative h-full" ref={dropdownRef}>
+      <button
+        className="h-full text-gray-400 hover:text-gray-700"
+        onClick={(e) => {
+          e.stopPropagation();
+          setIsOpen(!isOpen);
+        }}
+      >
+        <MoreVertical size={16} />
+      </button>
+
+      {isOpen && (
+        <div className="absolute top-8 right-0 z-10 w-48 overflow-hidden rounded-md border border-gray-200 bg-white shadow-lg">
+          <a
+            href={`/ai/guide/${guideSlug}`}
+            className="flex w-full items-center gap-1.5 p-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-black disabled:cursor-not-allowed disabled:opacity-70"
+          >
+            <ArrowUpRightIcon className="h-3.5 w-3.5" />
+            View Guide
+          </a>
+          {!isConfirming && (
+            <button
+              className="flex w-full items-center gap-1.5 p-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-black disabled:cursor-not-allowed disabled:opacity-70"
+              onClick={() => setIsConfirming(true)}
+              disabled={isDeleting}
+            >
+              {!isDeleting ? (
+                <>
+                  <Trash2 className="h-3.5 w-3.5" />
+                  Delete Guide
+                </>
+              ) : (
+                'Deleting...'
+              )}
+            </button>
+          )}
+
+          {isConfirming && (
+            <span className="flex w-full items-center justify-between gap-1.5 p-2 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-black disabled:cursor-not-allowed disabled:opacity-70">
+              Are you sure?
+              <div className="flex items-center gap-2">
+                <button
+                  onClick={() => {
+                    setIsConfirming(false);
+                    deleteCourse();
+                  }}
+                  disabled={isDeleting}
+                  className="text-red-500 underline hover:text-red-800"
+                >
+                  Yes
+                </button>
+                <button
+                  onClick={() => setIsConfirming(false)}
+                  className="text-red-500 underline hover:text-red-800"
+                >
+                  No
+                </button>
+              </div>
+            </span>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/AIGuide/AIGuideCard.tsx b/src/components/AIGuide/AIGuideCard.tsx
new file mode 100644
index 000000000..c5f96c1d8
--- /dev/null
+++ b/src/components/AIGuide/AIGuideCard.tsx
@@ -0,0 +1,52 @@
+import type { ListUserAIGuidesResponse } from '../../queries/ai-guide';
+import { AIGuideActions } from './AIGuideActions';
+
+type AIGuideCardProps = {
+  guide: ListUserAIGuidesResponse['data'][number] & {
+    html: string;
+  };
+  showActions?: boolean;
+};
+
+export function AIGuideCard(props: AIGuideCardProps) {
+  const { guide, showActions = true } = props;
+
+  const guideDepthColor =
+    {
+      essentials: 'text-green-700',
+      detailed: 'text-blue-700',
+      complete: 'text-purple-700',
+    }[guide.depth] || 'text-gray-700';
+
+  return (
+    <div className="relative flex flex-grow flex-col">
+      <a
+        href={`/ai/guide/${guide.slug}`}
+        className="group relative flex h-full min-h-[120px] w-full flex-col overflow-hidden rounded-lg border border-gray-200 bg-white p-3 text-left hover:border-gray-300 hover:bg-gray-50 sm:p-4"
+      >
+        <div className="mb-2 flex items-center justify-between sm:mb-3">
+          <span
+            className={`rounded-full text-xs font-medium capitalize opacity-80 ${guideDepthColor}`}
+          >
+            {guide.depth}
+          </span>
+        </div>
+
+        <div className="relative max-h-[180px] min-h-[140px] overflow-y-hidden sm:max-h-[200px] sm:min-h-[160px]">
+          <div
+            className="prose prose-sm prose-pre:bg-gray-100 [&_h1]:hidden [&_h1:first-child]:block [&_h1:first-child]:text-base [&_h1:first-child]:font-bold [&_h1:first-child]:leading-[1.35] [&_h1:first-child]:text-pretty sm:[&_h1:first-child]:text-lg [&_h2]:hidden [&_h3]:hidden [&_h4]:hidden [&_h5]:hidden [&_h6]:hidden"
+            dangerouslySetInnerHTML={{ __html: guide.html }}
+          />
+
+          <div className="absolute inset-x-0 bottom-0 h-12 bg-gradient-to-t from-white to-transparent group-hover:from-gray-50 sm:h-16" />
+        </div>
+      </a>
+
+      {showActions && guide.slug && (
+        <div className="absolute top-2 right-2">
+          <AIGuideActions guideSlug={guide.slug} />
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/AIGuide/AILibraryLayout.tsx b/src/components/AIGuide/AILibraryLayout.tsx
new file mode 100644
index 000000000..fb2173aac
--- /dev/null
+++ b/src/components/AIGuide/AILibraryLayout.tsx
@@ -0,0 +1,34 @@
+import { useState } from 'react';
+import { AITutorHeader } from '../AITutor/AITutorHeader';
+import { AITutorLayout } from '../AITutor/AITutorLayout';
+import { UpgradeAccountModal } from '../Billing/UpgradeAccountModal';
+import { LibraryTabs } from '../Library/LibraryTab';
+
+type AILibraryLayoutProps = {
+  activeTab: 'courses' | 'guides';
+  children: React.ReactNode;
+};
+
+export function AILibraryLayout(props: AILibraryLayoutProps) {
+  const { activeTab, children } = props;
+
+  const [showUpgradePopup, setShowUpgradePopup] = useState(false);
+
+  return (
+    <AITutorLayout activeTab="library">
+      {showUpgradePopup && (
+        <UpgradeAccountModal onClose={() => setShowUpgradePopup(false)} />
+      )}
+      <div className="mx-auto flex w-full max-w-6xl flex-grow flex-col p-2">
+        <AITutorHeader
+          title="Library"
+          subtitle="Explore your AI-generated guides and courses"
+          onUpgradeClick={() => setShowUpgradePopup(true)}
+        />
+
+        <LibraryTabs activeTab={activeTab} />
+        {children}
+      </div>
+    </AITutorLayout>
+  );
+}
diff --git a/src/components/AITutor/AIExploreCourseListing.tsx b/src/components/AITutor/AIExploreCourseListing.tsx
index 15ac7c9ef..c0a357429 100644
--- a/src/components/AITutor/AIExploreCourseListing.tsx
+++ b/src/components/AITutor/AIExploreCourseListing.tsx
@@ -1,7 +1,6 @@
 import { useQuery } from '@tanstack/react-query';
 import { useEffect, useState } from 'react';
 import { AICourseCard } from '../GenerateCourse/AICourseCard';
-import { AILoadingState } from './AILoadingState';
 import { AITutorHeader } from './AITutorHeader';
 import { UpgradeAccountModal } from '../Billing/UpgradeAccountModal';
 import {
@@ -13,14 +12,15 @@ import { deleteUrlParam, getUrlParams, setUrlParams } from '../../lib/browser';
 import { Pagination } from '../Pagination/Pagination';
 import { AICourseSearch } from '../GenerateCourse/AICourseSearch';
 import { AITutorTallMessage } from './AITutorTallMessage';
-import { BookOpen } from 'lucide-react';
+import { BookOpen, Loader2 } from 'lucide-react';
+import { humanizeNumber } from '../../lib/number';
 
 export function AIExploreCourseListing() {
   const [isInitialLoading, setIsInitialLoading] = useState(true);
   const [showUpgradePopup, setShowUpgradePopup] = useState(false);
 
   const [pageState, setPageState] = useState<ListExploreAiCoursesQuery>({
-    perPage: '21',
+    perPage: '42',
     currPage: '1',
     query: '',
   });
@@ -36,6 +36,7 @@ export function AIExploreCourseListing() {
   }, [exploreAiCourses]);
 
   const courses = exploreAiCourses?.data ?? [];
+  const isAnyLoading = isExploreAiCoursesLoading || isInitialLoading;
 
   useEffect(() => {
     const queryParams = getUrlParams();
@@ -63,66 +64,91 @@ export function AIExploreCourseListing() {
 
       <AITutorHeader
         title="Explore Courses"
+        subtitle="Explore the AI courses created by community"
         onUpgradeClick={() => setShowUpgradePopup(true)}
-      >
-        <AICourseSearch
-          value={pageState?.query || ''}
-          onChange={(value) => {
-            setPageState({
-              ...pageState,
-              query: value,
-              currPage: '1',
-            });
-          }}
-        />
-      </AITutorHeader>
+      />
+      <AICourseSearch
+        value={pageState?.query || ''}
+        onChange={(value) => {
+          setPageState({
+            ...pageState,
+            query: value,
+            currPage: '1',
+          });
+        }}
+        disabled={isAnyLoading}
+      />
 
-      {(isInitialLoading || isExploreAiCoursesLoading) && (
-        <AILoadingState
-          title="Loading courses"
-          subtitle="This may take a moment..."
-        />
+      {isAnyLoading && (
+        <p className="mb-4 flex flex-row items-center gap-2 text-sm text-gray-500">
+          <Loader2 className="h-4 w-4 animate-spin" />
+          Loading courses...
+        </p>
       )}
 
-      {!isExploreAiCoursesLoading && courses && courses.length > 0 && (
-        <div className="flex flex-col gap-2">
-          <div className="grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-3">
-            {courses.map((course) => (
-              <AICourseCard
-                key={course._id}
-                course={course}
-                showActions={false}
-                showProgress={false}
+      {!isAnyLoading && (
+        <>
+          <div className="mb-4 flex items-center justify-between">
+            <p className="text-sm text-gray-500">
+              Community has generated{' '}
+              {humanizeNumber(exploreAiCourses?.totalCount || 0)} courses
+            </p>
+
+            <div className="hidden lg:block">
+              <Pagination
+                variant="minimal"
+                totalCount={exploreAiCourses?.totalCount || 0}
+                totalPages={exploreAiCourses?.totalPages || 0}
+                currPage={Number(exploreAiCourses?.currPage || 1)}
+                perPage={Number(exploreAiCourses?.perPage || 21)}
+                onPageChange={(page) => {
+                  setPageState({ ...pageState, currPage: String(page) });
+                }}
+                className=""
               />
-            ))}
+            </div>
           </div>
 
-          <Pagination
-            totalCount={exploreAiCourses?.totalCount || 0}
-            totalPages={exploreAiCourses?.totalPages || 0}
-            currPage={Number(exploreAiCourses?.currPage || 1)}
-            perPage={Number(exploreAiCourses?.perPage || 21)}
-            onPageChange={(page) => {
-              setPageState({ ...pageState, currPage: String(page) });
-            }}
-            className="rounded-lg border border-gray-200 bg-white p-4"
-          />
-        </div>
-      )}
+          {courses && courses.length > 0 && (
+            <div className="flex flex-col gap-2">
+              <div className="grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-3">
+                {courses.map((course) => (
+                  <AICourseCard
+                    key={course._id}
+                    course={course}
+                    showActions={false}
+                    showProgress={false}
+                    variant="column"
+                  />
+                ))}
+              </div>
 
-      {!isInitialLoading &&
-        !isExploreAiCoursesLoading &&
-        courses.length === 0 && (
-          <AITutorTallMessage
-            title="No courses found"
-            subtitle="Try a different search or check back later."
-            icon={BookOpen}
-            buttonText="Create your first course"
-            onButtonClick={() => {
-              window.location.href = '/ai';
-            }}
-          />
-        )}
+              <Pagination
+                totalCount={exploreAiCourses?.totalCount || 0}
+                totalPages={exploreAiCourses?.totalPages || 0}
+                currPage={Number(exploreAiCourses?.currPage || 1)}
+                perPage={Number(exploreAiCourses?.perPage || 21)}
+                onPageChange={(page) => {
+                  setPageState({ ...pageState, currPage: String(page) });
+                }}
+                className="rounded-lg border border-gray-200 bg-white p-4"
+              />
+            </div>
+          )}
+
+          {courses.length === 0 && (
+            <AITutorTallMessage
+              title="No courses found"
+              subtitle="Try a different search or check back later."
+              icon={BookOpen}
+              buttonText="Create your first course"
+              onButtonClick={() => {
+                window.location.href = '/ai';
+              }}
+            />
+          )}
+        </>
+      )}
     </>
   );
 }
diff --git a/src/components/AITutor/AIFeaturedCoursesListing.tsx b/src/components/AITutor/AIFeaturedCoursesListing.tsx
index 2219e7784..e027ea924 100644
--- a/src/components/AITutor/AIFeaturedCoursesListing.tsx
+++ b/src/components/AITutor/AIFeaturedCoursesListing.tsx
@@ -20,7 +20,7 @@ export function AIFeaturedCoursesListing() {
   const [showUpgradePopup, setShowUpgradePopup] = useState(false);
 
   const [pageState, setPageState] = useState<ListUserAiCoursesQuery>({
-    perPage: '21',
+    perPage: '42',
     currPage: '1',
     query: '',
   });
@@ -63,7 +63,8 @@ export function AIFeaturedCoursesListing() {
       )}
 
       <AITutorHeader
-        title="Featured Courses"
+        title="Staff Picks"
+        subtitle="Explore our hand-picked courses generated by AI"
         onUpgradeClick={() => setShowUpgradePopup(true)}
       >
         <AICourseSearch
@@ -96,6 +97,7 @@ export function AIFeaturedCoursesListing() {
                   course={course}
                   showActions={false}
                   showProgress={false}
+                  variant="column"
                 />
               ))}
             </div>
diff --git a/src/components/AITutor/AITutorHeader.tsx b/src/components/AITutor/AITutorHeader.tsx
index 154a87865..0cc1bd60f 100644
--- a/src/components/AITutor/AITutorHeader.tsx
+++ b/src/components/AITutor/AITutorHeader.tsx
@@ -1,17 +1,18 @@
 import { useQuery } from '@tanstack/react-query';
-import { AITutorLimits } from './AITutorLimits';
 import { getAiCourseLimitOptions } from '../../queries/ai-course';
 import { queryClient } from '../../stores/query-client';
 import { useIsPaidUser } from '../../queries/billing';
+import { PlusIcon } from 'lucide-react';
 
 type AITutorHeaderProps = {
   title: string;
+  subtitle?: string;
   onUpgradeClick: () => void;
   children?: React.ReactNode;
 };
 
 export function AITutorHeader(props: AITutorHeaderProps) {
-  const { title, onUpgradeClick, children } = props;
+  const { title, subtitle, onUpgradeClick, children } = props;
 
   const { data: limits } = useQuery(getAiCourseLimitOptions(), queryClient);
   const { isPaidUser, isLoading: isPaidUserLoading } = useIsPaidUser();
@@ -20,20 +21,22 @@ export function AITutorHeader(props: AITutorHeaderProps) {
 
   return (
     <div className="mb-3 flex min-h-[35px] items-center justify-between max-sm:mb-1">
-      <div className="flex items-center gap-2">
-        <h2 className="relative flex-shrink-0 top-0 lg:top-1 text-lg font-semibold">{title}</h2>
-      </div>
-
-      <div className="flex items-center gap-2">
-        <AITutorLimits
-          used={used}
-          limit={limit}
-          isPaidUser={isPaidUser}
-          isPaidUserLoading={isPaidUserLoading}
-          onUpgradeClick={onUpgradeClick}
-        />
-
-        {children}
+      <div className="flex w-full flex-row items-center justify-between gap-2">
+        <div className="gap-2">
+          <h2 className="relative top-0 mb-1 sm:mb-3 flex-shrink-0 text-2xl sm:text-3xl font-semibold lg:top-1">
+            {title}
+          </h2>
+          {subtitle && <p className="mb-4 text-sm text-gray-500">{subtitle}</p>}
+        </div>
+        <div className="flex flex-row items-center gap-2">
+          <a
+            href="/ai"
+            className="flex max-sm:hidden flex-row items-center gap-2 rounded-lg bg-black px-4 py-1.5 text-sm font-medium text-white"
+          >
+            <PlusIcon className="h-4 w-4" />
+            New
+          </a>
+        </div>
       </div>
     </div>
   );
diff --git a/src/components/AITutor/AITutorLayout.tsx b/src/components/AITutor/AITutorLayout.tsx
index f7c797458..c42ac67c6 100644
--- a/src/components/AITutor/AITutorLayout.tsx
+++ b/src/components/AITutor/AITutorLayout.tsx
@@ -6,7 +6,7 @@ import { cn } from '../../lib/classname';
 
 type AITutorLayoutProps = {
   children: React.ReactNode;
-  activeTab: AITutorTab;
+  activeTab?: AITutorTab;
   wrapperClassName?: string;
   containerClassName?: string;
 };
diff --git a/src/components/AITutor/AITutorSidebar.tsx b/src/components/AITutor/AITutorSidebar.tsx
index abbad81e7..a06187d95 100644
--- a/src/components/AITutor/AITutorSidebar.tsx
+++ b/src/components/AITutor/AITutorSidebar.tsx
@@ -14,20 +14,20 @@ import { UserDropdown } from './UserDropdown';
 
 type AITutorSidebarProps = {
   isFloating: boolean;
-  activeTab: AITutorTab;
+  activeTab?: AITutorTab;
   onClose: () => void;
 };
 
 const sidebarItems = [
   {
     key: 'new',
-    label: 'New Course',
+    label: 'New',
     href: '/ai',
     icon: Plus,
   },
   {
-    key: 'courses',
-    label: 'My Courses',
+    key: 'library',
+    label: 'Library',
     href: '/ai/courses',
     icon: BookOpen,
   },
diff --git a/src/components/AITutor/BaseDropdown.tsx b/src/components/AITutor/BaseDropdown.tsx
new file mode 100644
index 000000000..80bf24d12
--- /dev/null
+++ b/src/components/AITutor/BaseDropdown.tsx
@@ -0,0 +1,75 @@
+import { ChevronDown } from 'lucide-react';
+import { useState, useRef, useEffect } from 'react';
+import { cn } from '../../lib/classname';
+import type { LucideIcon } from 'lucide-react';
+
+type BaseDropdownProps<T extends string> = {
+  value: T;
+  options: readonly T[];
+  onChange: (value: T) => void;
+  icons?: Record<T, LucideIcon>;
+};
+
+export function BaseDropdown<T extends string>(props: BaseDropdownProps<T>) {
+  const { value, options, onChange, icons } = props;
+
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    }
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  const Icon = icons?.[value];
+
+  return (
+    <div className="relative" ref={dropdownRef}>
+      <button
+        type="button"
+        onClick={() => setIsOpen(!isOpen)}
+        className={cn(
+          'flex items-center gap-2 rounded-full bg-gray-100 px-3 py-1 text-sm text-gray-700 hover:bg-gray-200 hover:text-black',
+        )}
+      >
+        {Icon && <Icon size={16} />}
+        <span className="capitalize">{value}</span>
+        <ChevronDown size={16} className={cn(isOpen && 'rotate-180')} />
+      </button>
+
+      {isOpen && (
+        <div className="absolute z-10 mt-1 flex flex-col overflow-hidden rounded-md border border-gray-200 bg-white shadow-lg">
+          {options.map((option) => {
+            const OptionIcon = icons?.[option];
+            return (
+              <button
+                key={option}
+                type="button"
+                onClick={() => {
+                  onChange(option);
+                  setIsOpen(false);
+                }}
+                className={cn(
+                  'flex items-center gap-2 px-5 py-2 text-left text-sm capitalize hover:bg-gray-100',
+                  value === option && 'bg-gray-200 font-medium hover:bg-gray-200',
+                )}
+              >
+                {OptionIcon && <OptionIcon size={16} />}
+                {option}
+              </button>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/src/components/AITutor/DifficultyDropdown.tsx b/src/components/AITutor/DifficultyDropdown.tsx
index 0f5320090..31b951b3d 100644
--- a/src/components/AITutor/DifficultyDropdown.tsx
+++ b/src/components/AITutor/DifficultyDropdown.tsx
@@ -1,9 +1,7 @@
-import { ChevronDown } from 'lucide-react';
-import { useState, useRef, useEffect } from 'react';
-import { cn } from '../../lib/classname';
+import { BaseDropdown } from './BaseDropdown';
 import {
-  difficultyLevels,
-  type DifficultyLevel,
+    difficultyLevels,
+    type DifficultyLevel,
 } from '../GenerateCourse/AICourse';
 
 type DifficultyDropdownProps = {
@@ -14,56 +12,11 @@ type DifficultyDropdownProps = {
 export function DifficultyDropdown(props: DifficultyDropdownProps) {
   const { value, onChange } = props;
 
-  const [isOpen, setIsOpen] = useState(false);
-  const dropdownRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    function handleClickOutside(event: MouseEvent) {
-      if (
-        dropdownRef.current &&
-        !dropdownRef.current.contains(event.target as Node)
-      ) {
-        setIsOpen(false);
-      }
-    }
-
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, []);
-
   return (
-    <div className="relative" ref={dropdownRef}>
-      <button
-        type="button"
-        onClick={() => setIsOpen(!isOpen)}
-        className={cn(
-          'flex items-center gap-2 rounded-full bg-gray-100 px-3 py-1 text-sm text-gray-700 hover:bg-gray-200 hover:text-black',
-        )}
-      >
-        <span className="capitalize">{value}</span>
-        <ChevronDown size={16} className={cn(isOpen && 'rotate-180')} />
-      </button>
-
-      {isOpen && (
-        <div className="absolute z-10 mt-1 flex flex-col overflow-hidden rounded-md border border-gray-200 bg-white shadow-lg">
-          {difficultyLevels.map((level) => (
-            <button
-              key={level}
-              type="button"
-              onClick={() => {
-                onChange(level);
-                setIsOpen(false);
-              }}
-              className={cn(
-                'px-5 py-2 text-left text-sm capitalize hover:bg-gray-100',
-                value === level && 'bg-gray-200 font-medium hover:bg-gray-200',
-              )}
-            >
-              {level}
-            </button>
-          ))}
-        </div>
-      )}
-    </div>
+    <BaseDropdown
+      value={value}
+      options={difficultyLevels}
+      onChange={onChange}
+    />
   );
 }
diff --git a/src/components/AITutor/NatureDropdown.tsx b/src/components/AITutor/NatureDropdown.tsx
new file mode 100644
index 000000000..dad5b1bd5
--- /dev/null
+++ b/src/components/AITutor/NatureDropdown.tsx
@@ -0,0 +1,28 @@
+import { BaseDropdown } from './BaseDropdown';
+import { BookOpen, FileText } from 'lucide-react';
+
+export const natureTypes = ['course', 'document'] as const;
+export type NatureType = (typeof natureTypes)[number];
+
+const natureIcons = {
+  course: BookOpen,
+  document: FileText,
+} as const;
+
+type NatureDropdownProps = {
+  value: NatureType;
+  onChange: (value: NatureType) => void;
+};
+
+export function NatureDropdown(props: NatureDropdownProps) {
+  const { value, onChange } = props;
+
+  return (
+    <BaseDropdown
+      value={value}
+      options={natureTypes}
+      onChange={onChange}
+      icons={natureIcons}
+    />
+  );
+} 
\ No newline at end of file
diff --git a/src/components/ContentGenerator/ContentGenerator.tsx b/src/components/ContentGenerator/ContentGenerator.tsx
new file mode 100644
index 000000000..bc255b931
--- /dev/null
+++ b/src/components/ContentGenerator/ContentGenerator.tsx
@@ -0,0 +1,229 @@
+import {
+  BookOpenIcon,
+  FileTextIcon,
+  SparklesIcon,
+  type LucideIcon,
+} from 'lucide-react';
+import { useEffect, useId, useState, type FormEvent } from 'react';
+import { FormatItem } from './FormatItem';
+import { GuideOptions } from './GuideOptions';
+import { FineTuneCourse } from '../GenerateCourse/FineTuneCourse';
+import { CourseOptions } from './CourseOptions';
+import {
+  clearFineTuneData,
+  getCourseFineTuneData,
+  getLastSessionId,
+  storeFineTuneData,
+} from '../../lib/ai';
+import { isLoggedIn } from '../../lib/jwt';
+import { showLoginPopup } from '../../lib/popup';
+import { UpgradeAccountModal } from '../Billing/UpgradeAccountModal';
+import { useIsPaidUser } from '../../queries/billing';
+import { cn } from '../../lib/classname';
+
+const allowedFormats = ['course', 'guide', 'roadmap'] as const;
+type AllowedFormat = (typeof allowedFormats)[number];
+
+export function ContentGenerator() {
+  const [isUpgradeModalOpen, setIsUpgradeModalOpen] = useState(false);
+  const { isPaidUser, isLoading: isPaidUserLoading } = useIsPaidUser();
+
+  const [title, setTitle] = useState('');
+  const [selectedFormat, setSelectedFormat] = useState<AllowedFormat>('course');
+
+  // guide options
+  const [depth, setDepth] = useState('essentials');
+  // course options
+  const [difficulty, setDifficulty] = useState('beginner');
+
+  // fine-tune options
+  const [showFineTuneOptions, setShowFineTuneOptions] = useState(false);
+  const [about, setAbout] = useState('');
+  const [goal, setGoal] = useState('');
+  const [customInstructions, setCustomInstructions] = useState('');
+
+  const titleFieldId = useId();
+  const fineTuneOptionsId = useId();
+
+  const allowedFormats: {
+    label: string;
+    icon: LucideIcon;
+    value: AllowedFormat;
+  }[] = [
+    {
+      label: 'Course',
+      icon: BookOpenIcon,
+      value: 'course',
+    },
+    {
+      label: 'Guide',
+      icon: FileTextIcon,
+      value: 'guide',
+    },
+  ];
+
+  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    if (!isLoggedIn()) {
+      showLoginPopup();
+      return;
+    }
+
+    let sessionId = '';
+    if (showFineTuneOptions) {
+      clearFineTuneData();
+      sessionId = storeFineTuneData({
+        about,
+        goal,
+        customInstructions,
+      });
+    }
+
+    if (selectedFormat === 'course') {
+      window.location.href = `/ai/course?term=${encodeURIComponent(title)}&difficulty=${difficulty}&id=${sessionId}&format=${selectedFormat}`;
+    } else if (selectedFormat === 'guide') {
+      window.location.href = `/ai/guide?term=${encodeURIComponent(title)}&depth=${depth}&id=${sessionId}&format=${selectedFormat}`;
+    }
+  };
+
+  useEffect(() => {
+    window?.fireEvent({
+      action: 'tutor_user',
+      category: 'ai_tutor',
+      label: 'Visited AI Course Page',
+    });
+  }, []);
+
+  useEffect(() => {
+    const lastSessionId = getLastSessionId();
+    if (!lastSessionId) {
+      return;
+    }
+
+    const fineTuneData = getCourseFineTuneData(lastSessionId);
+    if (!fineTuneData) {
+      return;
+    }
+
+    setAbout(fineTuneData.about);
+    setGoal(fineTuneData.goal);
+    setCustomInstructions(fineTuneData.customInstructions);
+  }, []);
+
+  return (
+    <div className="mx-auto flex w-full max-w-2xl flex-grow flex-col pt-4 md:justify-center md:pt-10 lg:pt-4">
+      <div className="relative">
+        {isUpgradeModalOpen && (
+          <UpgradeAccountModal onClose={() => setIsUpgradeModalOpen(false)} />
+        )}
+        {!isPaidUser && !isPaidUserLoading && isLoggedIn() && (
+          <div className="absolute bottom-full left-1/2 -translate-x-1/2 -translate-y-8 text-gray-500 max-md:hidden">
+            You are on the free plan
+            <button
+              onClick={() => setIsUpgradeModalOpen(true)}
+              className="ml-2 rounded-xl bg-yellow-600 px-2 py-1 text-sm text-white hover:opacity-80"
+            >
+              Upgrade to Pro
+            </button>
+          </div>
+        )}
+        <h1 className="mb-0.5 text-center text-4xl font-semibold max-md:text-left max-md:text-xl lg:mb-3">
+          What can I help you learn?
+        </h1>
+        <p className="text-center text-lg text-balance text-gray-600 max-md:text-left max-md:text-sm">
+          Enter a topic below to generate a personalized course for it
+        </p>
+      </div>
+
+      <form className="mt-10 space-y-4" onSubmit={handleSubmit}>
+        <div className="flex flex-col gap-2">
+          <label htmlFor={titleFieldId} className="inline-block text-gray-500">
+            What can I help you learn?
+          </label>
+          <input
+            type="text"
+            id={titleFieldId}
+            placeholder="Enter a topic"
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            className="block w-full rounded-xl border border-gray-200 bg-white p-4 outline-none placeholder:text-gray-500 focus:border-gray-500"
+            required
+            minLength={3}
+          />
+        </div>
+        <div className="flex flex-col gap-2">
+          <label className="inline-block text-gray-500">
+            Choose the format
+          </label>
+          <div className="grid grid-cols-2 gap-3">
+            {allowedFormats.map((format) => {
+              const isSelected = format.value === selectedFormat;
+
+              return (
+                <FormatItem
+                  key={format.value}
+                  label={format.label}
+                  onClick={() => setSelectedFormat(format.value)}
+                  icon={format.icon}
+                  isSelected={isSelected}
+                />
+              );
+            })}
+          </div>
+        </div>
+
+        {selectedFormat === 'guide' && (
+          <GuideOptions depth={depth} setDepth={setDepth} />
+        )}
+
+        {selectedFormat === 'course' && (
+          <CourseOptions
+            difficulty={difficulty}
+            setDifficulty={setDifficulty}
+          />
+        )}
+
+        {selectedFormat !== 'roadmap' && (
+          <>
+            <label
+              className={cn(
+                'flex items-center gap-2 border border-gray-200 bg-white p-4',
+                showFineTuneOptions && 'rounded-t-xl',
+                !showFineTuneOptions && 'rounded-xl',
+              )}
+              htmlFor={fineTuneOptionsId}
+            >
+              <input
+                type="checkbox"
+                id={fineTuneOptionsId}
+                checked={showFineTuneOptions}
+                onChange={(e) => setShowFineTuneOptions(e.target.checked)}
+              />
+              Explain more for a better result
+            </label>
+            {showFineTuneOptions && (
+              <FineTuneCourse
+                hasFineTuneData={showFineTuneOptions}
+                about={about}
+                goal={goal}
+                customInstructions={customInstructions}
+                setAbout={setAbout}
+                setGoal={setGoal}
+                setCustomInstructions={setCustomInstructions}
+                className="-mt-4.5 overflow-hidden rounded-b-xl border border-gray-200 bg-white [&_div:first-child_label]:border-t-0"
+              />
+            )}
+          </>
+        )}
+
+        <button
+          type="submit"
+          className="flex w-full items-center justify-center gap-2 rounded-xl bg-black p-4 text-white focus:outline-none"
+        >
+          <SparklesIcon className="size-4" />
+          Generate
+        </button>
+      </form>
+    </div>
+  );
+}
diff --git a/src/components/ContentGenerator/CourseOptions.tsx b/src/components/ContentGenerator/CourseOptions.tsx
new file mode 100644
index 000000000..6f6df4432
--- /dev/null
+++ b/src/components/ContentGenerator/CourseOptions.tsx
@@ -0,0 +1,79 @@
+import { useId, useState } from 'react';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../Select';
+
+type CourseOptionsProps = {
+  difficulty: string;
+  setDifficulty: (difficulty: string) => void;
+};
+
+export function CourseOptions(props: CourseOptionsProps) {
+  const { difficulty, setDifficulty } = props;
+  const difficultySelectId = useId();
+
+  const difficultyOptions = [
+    {
+      label: 'Beginner',
+      value: 'beginner',
+      description: 'Covers fundamental concepts',
+    },
+    {
+      label: 'Intermediate',
+      value: 'intermediate',
+      description: 'Explore advanced topics',
+    },
+    {
+      label: 'Advanced',
+      value: 'advanced',
+      description: 'Deep dives into complex concepts',
+    },
+  ];
+
+  const selectedDifficulty = difficultyOptions.find(
+    (option) => option.value === difficulty,
+  );
+
+  return (
+    <div className="flex flex-col gap-2">
+      <label
+        htmlFor={difficultySelectId}
+        className="inline-block text-gray-500"
+      >
+        Choose difficulty level
+      </label>
+      <Select value={difficulty} onValueChange={setDifficulty}>
+        <SelectTrigger
+          id={difficultySelectId}
+          className="h-auto rounded-xl bg-white p-4 text-base"
+        >
+          {selectedDifficulty && (
+            <div className="flex flex-col gap-1">
+              <span>{selectedDifficulty.label}</span>
+            </div>
+          )}
+
+          {!selectedDifficulty && (
+            <SelectValue placeholder="Select a difficulty" />
+          )}
+        </SelectTrigger>
+        <SelectContent className="rounded-xl bg-white">
+          {difficultyOptions.map((option) => (
+            <SelectItem key={option.value} value={option.value}>
+              <div className="flex flex-col gap-1">
+                <span>{option.label}</span>
+                <span className="text-xs text-gray-500">
+                  {option.description}
+                </span>
+              </div>
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  );
+}
diff --git a/src/components/ContentGenerator/FormatItem.tsx b/src/components/ContentGenerator/FormatItem.tsx
new file mode 100644
index 000000000..9797ac0c5
--- /dev/null
+++ b/src/components/ContentGenerator/FormatItem.tsx
@@ -0,0 +1,29 @@
+import { type LucideIcon } from 'lucide-react';
+import { cn } from '../../lib/classname';
+
+type FormatItemProps = {
+  label: string;
+  onClick: () => void;
+  icon: LucideIcon;
+  isSelected: boolean;
+};
+
+export function FormatItem(props: FormatItemProps) {
+  const { label, onClick, icon: Icon, isSelected } = props;
+
+  return (
+    <button
+      type="button"
+      className={cn(
+        'flex w-full flex-col items-center justify-center gap-2.5 rounded-xl border border-gray-200 p-2 py-8',
+        isSelected
+          ? 'border-gray-400 font-medium bg-white'
+          : 'bg-white text-gray-400 hover:bg-white hover:border-gray-300',
+      )}
+      onClick={onClick}
+    >
+      <Icon className="size-6" />
+      <span>{label}</span>
+    </button>
+  );
+}
diff --git a/src/components/ContentGenerator/GuideOptions.tsx b/src/components/ContentGenerator/GuideOptions.tsx
new file mode 100644
index 000000000..4c7801239
--- /dev/null
+++ b/src/components/ContentGenerator/GuideOptions.tsx
@@ -0,0 +1,72 @@
+import { useId } from 'react';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../Select';
+
+type GuideOptionsProps = {
+  depth: string;
+  setDepth: (depth: string) => void;
+};
+
+export function GuideOptions(props: GuideOptionsProps) {
+  const { depth, setDepth } = props;
+  const depthSelectId = useId();
+
+  const depthOptions = [
+    {
+      label: 'Essentials',
+      value: 'essentials',
+      description: 'Just the core concepts',
+    },
+    {
+      label: 'Detailed',
+      value: 'detailed',
+      description: 'In-depth explanation',
+    },
+    {
+      label: 'Complete',
+      value: 'complete',
+      description: 'Cover the topic fully',
+    },
+  ];
+
+  const selectedDepth = depthOptions.find((option) => option.value === depth);
+
+  return (
+    <div className="flex flex-col gap-2">
+      <label htmlFor={depthSelectId} className="inline-block text-gray-500">
+        Choose depth of content
+      </label>
+      <Select value={depth} onValueChange={setDepth}>
+        <SelectTrigger
+          id={depthSelectId}
+          className="h-auto rounded-xl bg-white p-4 text-base"
+        >
+          {selectedDepth && (
+            <div className="flex flex-col gap-1">
+              <span>{selectedDepth.label}</span>
+            </div>
+          )}
+
+          {!selectedDepth && <SelectValue placeholder="Select a depth" />}
+        </SelectTrigger>
+        <SelectContent className="rounded-xl bg-white">
+          {depthOptions.map((option) => (
+            <SelectItem key={option.value} value={option.value}>
+              <div className="flex flex-col gap-1">
+                <span>{option.label}</span>
+                <span className="text-xs text-gray-500">
+                  {option.description}
+                </span>
+              </div>
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  );
+}
diff --git a/src/components/FrameRenderer/RoadmapFloatingChat.tsx b/src/components/FrameRenderer/RoadmapFloatingChat.tsx
index b10f0c3a5..d8018965f 100644
--- a/src/components/FrameRenderer/RoadmapFloatingChat.tsx
+++ b/src/components/FrameRenderer/RoadmapFloatingChat.tsx
@@ -47,7 +47,7 @@ type ChatHeaderButtonProps = {
   target?: string;
 };
 
-function ChatHeaderButton(props: ChatHeaderButtonProps) {
+export function ChatHeaderButton(props: ChatHeaderButtonProps) {
   const { onClick, href, icon, children, className, target } = props;
 
   const classNames = cn(
diff --git a/src/components/GenerateCourse/AICourse.tsx b/src/components/GenerateCourse/AICourse.tsx
index e0c5fca47..4e85d1972 100644
--- a/src/components/GenerateCourse/AICourse.tsx
+++ b/src/components/GenerateCourse/AICourse.tsx
@@ -4,6 +4,7 @@ import { isLoggedIn } from '../../lib/jwt';
 import { showLoginPopup } from '../../lib/popup';
 import { FineTuneCourse } from './FineTuneCourse';
 import { DifficultyDropdown } from '../AITutor/DifficultyDropdown';
+import { NatureDropdown, type NatureType } from '../AITutor/NatureDropdown';
 import {
   clearFineTuneData,
   getCourseFineTuneData,
@@ -26,6 +27,7 @@ type AICourseProps = {};
 export function AICourse(props: AICourseProps) {
   const [keyword, setKeyword] = useState('');
   const [difficulty, setDifficulty] = useState<DifficultyLevel>('beginner');
+  const [nature, setNature] = useState<NatureType>('course');
 
   const [hasFineTuneData, setHasFineTuneData] = useState(false);
   const [about, setAbout] = useState('');
@@ -81,7 +83,11 @@ export function AICourse(props: AICourseProps) {
       });
     }
 
-    window.location.href = `/ai/search?term=${encodeURIComponent(keyword)}&difficulty=${difficulty}&id=${sessionId}`;
+    if (nature === 'course') {
+      window.location.href = `/ai/course?term=${encodeURIComponent(keyword)}&difficulty=${difficulty}&id=${sessionId}&nature=${nature}`;
+    } else {
+      window.location.href = `/ai/document?term=${encodeURIComponent(keyword)}&difficulty=${difficulty}&id=${sessionId}&nature=${nature}`;
+    }
   }
 
   return (
@@ -131,6 +137,7 @@ export function AICourse(props: AICourseProps) {
           <div className="flex flex-col items-start justify-between gap-2 px-4 pb-4 md:flex-row md:items-center">
             <div className="flex flex-row items-center gap-2">
               <div className="flex flex-row gap-2">
+                <NatureDropdown value={nature} onChange={setNature} />
                 <DifficultyDropdown
                   value={difficulty}
                   onChange={setDifficulty}
@@ -148,7 +155,6 @@ export function AICourse(props: AICourseProps) {
                   id="fine-tune-checkbox"
                 />
                 Explain more
-                <span className="hidden md:inline"> for a better course</span>
               </label>
             </div>
 
@@ -169,7 +175,6 @@ export function AICourse(props: AICourseProps) {
 
           <FineTuneCourse
             hasFineTuneData={hasFineTuneData}
-            setHasFineTuneData={setHasFineTuneData}
             about={about}
             goal={goal}
             customInstructions={customInstructions}
diff --git a/src/components/GenerateCourse/AICourseCard.tsx b/src/components/GenerateCourse/AICourseCard.tsx
index 9db197881..d345d4633 100644
--- a/src/components/GenerateCourse/AICourseCard.tsx
+++ b/src/components/GenerateCourse/AICourseCard.tsx
@@ -2,17 +2,24 @@ import type { AICourseWithLessonCount } from '../../queries/ai-course';
 import type { DifficultyLevel } from './AICourse';
 import { BookOpen } from 'lucide-react';
 import { AICourseActions } from './AICourseActions';
+import { getRelativeTimeString } from '../../lib/date';
+import { cn } from '../../lib/classname';
 
 type AICourseCardProps = {
   course: AICourseWithLessonCount;
   showActions?: boolean;
   showProgress?: boolean;
+  variant?: 'row' | 'column';
 };
 
 export function AICourseCard(props: AICourseCardProps) {
-  const { course, showActions = true, showProgress = true } = props;
+  const {
+    course,
+    showActions = true,
+    showProgress = true,
+    variant = 'row',
+  } = props;
 
-  // Map difficulty to color
   const difficultyColor =
     {
       beginner: 'text-green-700',
@@ -20,49 +27,65 @@ export function AICourseCard(props: AICourseCardProps) {
       advanced: 'text-purple-700',
     }[course.difficulty as DifficultyLevel] || 'text-gray-700';
 
-  // Calculate progress percentage
+  const modulesCount = course.modules?.length || 0;
   const totalTopics = course.lessonCount || 0;
   const completedTopics = course.done?.length || 0;
   const progressPercentage =
     totalTopics > 0 ? Math.round((completedTopics / totalTopics) * 100) : 0;
+  const updatedAgo = getRelativeTimeString(course?.updatedAt);
 
   return (
-    <div className="relative flex flex-grow flex-col">
+    <div className="relative flex flex-grow">
       <a
         href={`/ai/${course.slug}`}
-        className="hover:border-gray-3 00 group relative flex h-full min-h-[140px] w-full flex-col overflow-hidden rounded-lg border border-gray-200 bg-white p-4 text-left transition-all hover:bg-gray-50"
+        className={cn(
+          'group relative flex h-full w-full gap-3 overflow-hidden rounded-lg border border-gray-200 bg-white p-4 text-left transition-all hover:border-gray-300 hover:bg-gray-50 sm:gap-4',
+          variant === 'column' && 'flex-col',
+          variant === 'row' && 'flex-row sm:flex-row sm:items-center',
+        )}
       >
-        <div className="flex items-center justify-between">
-          <span
-            className={`rounded-full text-xs font-medium capitalize opacity-80 ${difficultyColor}`}
-          >
-            {course.difficulty}
-          </span>
-        </div>
-
-        <h3 className="my-2 text-base font-semibold text-gray-900">
-          {course.title}
-        </h3>
-
-        <div className="mt-auto flex items-center justify-between pt-2">
-          <div className="flex items-center text-xs text-gray-600">
-            <BookOpen className="mr-1 h-3.5 w-3.5" />
-            <span>{totalTopics} lessons</span>
+        {/* Title and difficulty section */}
+        <div className="min-w-0 flex-1">
+          <div className="mb-1 flex items-center gap-2">
+            <span
+              className={`rounded-full text-xs font-medium capitalize opacity-80 ${difficultyColor}`}
+            >
+              {course.difficulty}
+            </span>
           </div>
 
-          {showProgress && totalTopics > 0 && (
+          <h3 className="line-clamp-2 text-base font-semibold text-balance text-gray-900">
+            {course.title
+              ?.replace(": A Beginner's Guide", '')
+              ?.replace(' for beginners', '')
+              ?.replace(': A Comprehensive Guide', '')}
+          </h3>
+        </div>
+
+        {/* Course stats section */}
+        <div className="mt-7 flex items-center gap-4 sm:gap-4">
+          <div className="hidden items-center text-xs text-gray-600 sm:flex">
+            <BookOpen className="mr-1 h-3.5 w-3.5" />
+            <span>{modulesCount} modules</span>
+          </div>
+
+          <div className="flex items-center gap-2 text-xs text-gray-600">
             <div className="flex items-center">
-              <div className="mr-2 h-1.5 w-16 overflow-hidden rounded-full bg-gray-200">
-                <div
-                  className="h-full rounded-full bg-blue-600"
-                  style={{ width: `${progressPercentage}%` }}
-                />
-              </div>
-              <span className="text-xs font-medium text-gray-700">
-                {progressPercentage}%
-              </span>
+              <BookOpen className="mr-1 h-3.5 w-3.5" />
+              <span>{totalTopics} lessons</span>
             </div>
-          )}
+
+            {showProgress && totalTopics > 0 && (
+              <>
+                <span className="hidden text-gray-400 sm:inline">•</span>
+                <div className="flex items-center">
+                  <span className="flex items-center text-xs font-medium text-gray-700">
+                    {progressPercentage}% complete
+                  </span>
+                </div>
+              </>
+            )}
+          </div>
         </div>
       </a>
 
diff --git a/src/components/GenerateCourse/AICourseSearch.tsx b/src/components/GenerateCourse/AICourseSearch.tsx
index 33be82a18..9b9da1f54 100644
--- a/src/components/GenerateCourse/AICourseSearch.tsx
+++ b/src/components/GenerateCourse/AICourseSearch.tsx
@@ -5,10 +5,12 @@ import { useDebounceValue } from '../../hooks/use-debounce';
 type AICourseSearchProps = {
   value: string;
   onChange: (value: string) => void;
+  placeholder?: string;
+  disabled?: boolean;
 };
 
 export function AICourseSearch(props: AICourseSearchProps) {
-  const { value: defaultValue, onChange } = props;
+  const { value: defaultValue, onChange, placeholder, disabled } = props;
 
   const [searchTerm, setSearchTerm] = useState(defaultValue);
   const debouncedSearchTerm = useDebounceValue(searchTerm, 500);
@@ -30,16 +32,17 @@ export function AICourseSearch(props: AICourseSearchProps) {
   }, [debouncedSearchTerm]);
 
   return (
-    <div className="relative w-64 max-sm:hidden">
+    <div className="relative mb-4">
       <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
         <SearchIcon className="h-4 w-4 text-gray-400" />
       </div>
       <input
         type="text"
-        className="block w-full rounded-md border border-gray-200 bg-white py-1.5 pl-10 pr-3 leading-5 placeholder-gray-500 focus:border-gray-300 focus:outline-hidden focus:ring-blue-500 disabled:opacity-70 sm:text-sm"
-        placeholder="Search courses..."
+        className="block w-full rounded-lg border border-gray-200 bg-white py-3 pr-3 pl-10 leading-5 placeholder-gray-500 focus:border-gray-300 focus:ring-blue-500 focus:outline-hidden disabled:opacity-70 sm:text-sm"
+        placeholder={placeholder || 'Search courses...'}
         value={searchTerm}
         onChange={(e) => setSearchTerm(e.target.value)}
+        disabled={disabled}
       />
     </div>
   );
diff --git a/src/components/GenerateCourse/FineTuneCourse.tsx b/src/components/GenerateCourse/FineTuneCourse.tsx
index 390fe9d07..8f5d0e237 100644
--- a/src/components/GenerateCourse/FineTuneCourse.tsx
+++ b/src/components/GenerateCourse/FineTuneCourse.tsx
@@ -1,3 +1,6 @@
+import { useId } from 'react';
+import { cn } from '../../lib/classname';
+
 type QuestionProps = {
   label: string;
   placeholder: string;
@@ -8,13 +11,18 @@ type QuestionProps = {
 
 function Question(props: QuestionProps) {
   const { label, placeholder, value, onChange, autoFocus = false } = props;
+  const questionId = useId();
 
   return (
     <div className="flex flex-col">
-      <label className="border-y bg-gray-100 px-4 py-2.5 text-sm font-medium text-gray-700">
+      <label
+        htmlFor={questionId}
+        className="border-y bg-gray-50 px-4 py-2.5 text-sm font-medium text-gray-700"
+      >
         {label}
       </label>
       <textarea
+        id={questionId}
         placeholder={placeholder}
         className="min-h-[80px] w-full resize-none px-4 py-3 text-gray-700 placeholder:text-gray-400 focus:outline-hidden"
         value={value}
@@ -31,10 +39,10 @@ type FineTuneCourseProps = {
   goal: string;
   customInstructions: string;
 
-  setHasFineTuneData: (hasMetadata: boolean) => void;
   setAbout: (about: string) => void;
   setGoal: (goal: string) => void;
   setCustomInstructions: (customInstructions: string) => void;
+  className?: string;
 };
 
 export function FineTuneCourse(props: FineTuneCourseProps) {
@@ -46,7 +54,7 @@ export function FineTuneCourse(props: FineTuneCourseProps) {
     setAbout,
     setGoal,
     setCustomInstructions,
-    setHasFineTuneData,
+    className,
   } = props;
 
   if (!hasFineTuneData) {
@@ -54,7 +62,7 @@ export function FineTuneCourse(props: FineTuneCourseProps) {
   }
 
   return (
-    <div className="mt-0 flex flex-col">
+    <div className={cn('mt-0 flex flex-col', className)}>
       <Question
         label="Tell us about yourself"
         placeholder="e.g. I am a frontend developer and have good knowledge of HTML, CSS, and JavaScript."
diff --git a/src/components/GenerateCourse/UserCoursesList.tsx b/src/components/GenerateCourse/UserCoursesList.tsx
index 6a64f34ef..6b82bc39b 100644
--- a/src/components/GenerateCourse/UserCoursesList.tsx
+++ b/src/components/GenerateCourse/UserCoursesList.tsx
@@ -1,21 +1,19 @@
 import { useQuery } from '@tanstack/react-query';
-import { BookOpen } from 'lucide-react';
+import { BookOpen, Loader2 } from 'lucide-react';
 import { useEffect, useState } from 'react';
 import { deleteUrlParam, getUrlParams, setUrlParams } from '../../lib/browser';
-import { isLoggedIn } from '../../lib/jwt';
-import { showLoginPopup } from '../../lib/popup';
 import {
   listUserAiCoursesOptions,
   type ListUserAiCoursesQuery,
 } from '../../queries/ai-course';
 import { queryClient } from '../../stores/query-client';
-import { AITutorHeader } from '../AITutor/AITutorHeader';
 import { AITutorTallMessage } from '../AITutor/AITutorTallMessage';
 import { UpgradeAccountModal } from '../Billing/UpgradeAccountModal';
 import { Pagination } from '../Pagination/Pagination';
 import { AICourseCard } from './AICourseCard';
 import { AICourseSearch } from './AICourseSearch';
-import { AILoadingState } from '../AITutor/AILoadingState';
+import { isLoggedIn } from '../../lib/jwt';
+import { showLoginPopup } from '../../lib/popup';
 
 export function UserCoursesList() {
   const [isInitialLoading, setIsInitialLoading] = useState(true);
@@ -60,28 +58,8 @@ export function UserCoursesList() {
     }
   }, [pageState]);
 
-  if (isUserAiCoursesLoading || isInitialLoading) {
-    return (
-      <AILoadingState
-        title="Loading your courses"
-        subtitle="This may take a moment..."
-      />
-    );
-  }
-
-  if (!isLoggedIn()) {
-    return (
-      <AITutorTallMessage
-        title="Sign up or login"
-        subtitle="Takes 2s to sign up and generate your first course."
-        icon={BookOpen}
-        buttonText="Sign up or Login"
-        onButtonClick={() => {
-          showLoginPopup();
-        }}
-      />
-    );
-  }
+  const isUserAuthenticated = isLoggedIn();
+  const isAnyLoading = isUserAiCoursesLoading || isInitialLoading;
 
   return (
     <>
@@ -89,60 +67,78 @@ export function UserCoursesList() {
         <UpgradeAccountModal onClose={() => setShowUpgradePopup(false)} />
       )}
 
-      <AITutorHeader
-        title="Your Courses"
-        onUpgradeClick={() => setShowUpgradePopup(true)}
-      >
-        <AICourseSearch
-          value={pageState?.query || ''}
-          onChange={(value) => {
-            setPageState({
-              ...pageState,
-              query: value,
-              currPage: '1',
-            });
-          }}
-        />
-      </AITutorHeader>
+      <AICourseSearch
+        value={pageState?.query || ''}
+        onChange={(value) => {
+          setPageState({
+            ...pageState,
+            query: value,
+            currPage: '1',
+          });
+        }}
+        disabled={isAnyLoading}
+      />
 
-      {(isUserAiCoursesLoading || isInitialLoading) && (
-        <AILoadingState
-          title="Loading your courses"
-          subtitle="This may take a moment..."
-        />
+      {isAnyLoading && (
+        <p className="mb-4 flex flex-row items-center gap-2 text-sm text-gray-500">
+          <Loader2 className="h-4 w-4 animate-spin" />
+          Loading your courses...
+        </p>
       )}
 
-      {!isUserAiCoursesLoading && !isInitialLoading && courses.length > 0 && (
-        <div className="flex flex-col gap-2">
-          <div className="grid grid-cols-1 gap-2 md:grid-cols-2 xl:grid-cols-3">
-            {courses.map((course) => (
-              <AICourseCard key={course._id} course={course} />
-            ))}
-          </div>
+      {!isAnyLoading && (
+        <>
+          <p className="mb-4 text-sm text-gray-500">
+            {isUserAuthenticated
+              ? `You have generated ${userAiCourses?.totalCount} courses so far.`
+              : 'Sign up or login to generate your first course. Takes 2s to do so.'}
+          </p>
 
-          <Pagination
-            totalCount={userAiCourses?.totalCount || 0}
-            totalPages={userAiCourses?.totalPages || 0}
-            currPage={Number(userAiCourses?.currPage || 1)}
-            perPage={Number(userAiCourses?.perPage || 10)}
-            onPageChange={(page) => {
-              setPageState({ ...pageState, currPage: String(page) });
-            }}
-            className="rounded-lg border border-gray-200 bg-white p-4"
-          />
-        </div>
-      )}
+          {isUserAuthenticated && !isAnyLoading && courses.length > 0 && (
+            <div className="flex flex-col gap-2">
+              {courses.map((course) => (
+                <AICourseCard key={course._id} course={course} />
+              ))}
 
-      {!isUserAiCoursesLoading && !isInitialLoading && courses.length === 0 && (
-        <AITutorTallMessage
-          title="No courses found"
-          subtitle="You haven't generated any courses yet."
-          icon={BookOpen}
-          buttonText="Create your first course"
-          onButtonClick={() => {
-            window.location.href = '/ai';
-          }}
-        />
+              <Pagination
+                totalCount={userAiCourses?.totalCount || 0}
+                totalPages={userAiCourses?.totalPages || 0}
+                currPage={Number(userAiCourses?.currPage || 1)}
+                perPage={Number(userAiCourses?.perPage || 10)}
+                onPageChange={(page) => {
+                  setPageState({ ...pageState, currPage: String(page) });
+                }}
+                className="rounded-lg border border-gray-200 bg-white p-4"
+              />
+            </div>
+          )}
+
+          {!isAnyLoading && courses.length === 0 && (
+            <AITutorTallMessage
+              title={
+                isUserAuthenticated ? 'No courses found' : 'Sign up or login'
+              }
+              subtitle={
+                isUserAuthenticated
+                  ? "You haven't generated any courses yet."
+                  : 'Takes 2s to sign up and generate your first course.'
+              }
+              icon={BookOpen}
+              buttonText={
+                isUserAuthenticated
+                  ? 'Create your first course'
+                  : 'Sign up or login'
+              }
+              onButtonClick={() => {
+                if (isUserAuthenticated) {
+                  window.location.href = '/ai';
+                } else {
+                  showLoginPopup();
+                }
+              }}
+            />
+          )}
+        </>
       )}
     </>
   );
diff --git a/src/components/GenerateGuide/AIGuide.tsx b/src/components/GenerateGuide/AIGuide.tsx
new file mode 100644
index 000000000..47c726f28
--- /dev/null
+++ b/src/components/GenerateGuide/AIGuide.tsx
@@ -0,0 +1,231 @@
+import { useQuery } from '@tanstack/react-query';
+import { ExternalLink } from 'lucide-react';
+import { useMemo, useState } from 'react';
+import { flushSync } from 'react-dom';
+import { generateGuide } from '../../helper/generate-ai-guide';
+import { shuffle } from '../../helper/shuffle';
+import { useToast } from '../../hooks/use-toast';
+import { isLoggedIn } from '../../lib/jwt';
+import {
+  aiGuideSuggestionsOptions,
+  getAiGuideOptions,
+} from '../../queries/ai-guide';
+import { queryClient } from '../../stores/query-client';
+import { AITutorLayout } from '../AITutor/AITutorLayout';
+import { UpgradeAccountModal } from '../Billing/UpgradeAccountModal';
+import { AIGuideChat } from './AIGuideChat';
+import { AIGuideContent } from './AIGuideContent';
+import { GenerateAIGuide } from './GenerateAIGuide';
+
+type AIGuideProps = {
+  guideSlug?: string;
+};
+
+export function AIGuide(props: AIGuideProps) {
+  const { guideSlug: defaultGuideSlug } = props;
+  const [guideSlug, setGuideSlug] = useState(defaultGuideSlug);
+
+  const toast = useToast();
+  const [showUpgradeModal, setShowUpgradeModal] = useState(false);
+  const [isRegenerating, setIsRegenerating] = useState(false);
+  const [regeneratedHtml, setRegeneratedHtml] = useState<string | null>(null);
+
+  // only fetch the guide if the guideSlug is provided
+  // otherwise we are still generating the guide
+  const { data: aiGuide, isLoading: isLoadingBySlug } = useQuery(
+    getAiGuideOptions(guideSlug),
+    queryClient,
+  );
+
+  const { data: aiGuideSuggestions, isLoading: isAiGuideSuggestionsLoading } =
+    useQuery(
+      {
+        ...aiGuideSuggestionsOptions(guideSlug),
+        enabled: !!guideSlug && !!isLoggedIn(),
+      },
+      queryClient,
+    );
+
+  const randomQuestions = useMemo(() => {
+    return shuffle(aiGuideSuggestions?.questions || []).slice(0, 4);
+  }, [aiGuideSuggestions]);
+  const relatedTopics = useMemo(() => {
+    return shuffle(aiGuideSuggestions?.relatedTopics || []).slice(0, 2);
+  }, [aiGuideSuggestions]);
+  const deepDiveTopics = useMemo(() => {
+    return shuffle(aiGuideSuggestions?.deepDiveTopics || []).slice(0, 2);
+  }, [aiGuideSuggestions]);
+
+  const handleRegenerate = async (prompt?: string) => {
+    flushSync(() => {
+      setIsRegenerating(true);
+      setRegeneratedHtml(null);
+    });
+
+    queryClient.cancelQueries(getAiGuideOptions(guideSlug));
+    queryClient.setQueryData(getAiGuideOptions(guideSlug).queryKey, (old) => {
+      if (!old) {
+        return old;
+      }
+
+      return {
+        ...old,
+        content: '',
+        html: '',
+      };
+    });
+
+    await generateGuide({
+      slug: aiGuide?.slug || '',
+      term: aiGuide?.keyword || '',
+      depth: aiGuide?.depth || '',
+      prompt,
+      onStreamingChange: setIsRegenerating,
+      onHtmlChange: setRegeneratedHtml,
+      onFinish: () => {
+        setIsRegenerating(false);
+        queryClient.invalidateQueries(getAiGuideOptions(guideSlug));
+      },
+      isForce: true,
+      onError: (error) => {
+        toast.error(error);
+      },
+    });
+  };
+
+  return (
+    <AITutorLayout
+      wrapperClassName="flex-row p-0 lg:p-0 overflow-hidden bg-white"
+      containerClassName="h-[calc(100vh-49px)] overflow-hidden relative"
+    >
+      {showUpgradeModal && (
+        <UpgradeAccountModal onClose={() => setShowUpgradeModal(false)} />
+      )}
+
+      <div className="grow overflow-y-auto p-4 pt-0">
+        {guideSlug && (
+          <AIGuideContent
+            html={regeneratedHtml || aiGuide?.html || ''}
+            onRegenerate={handleRegenerate}
+            isLoading={isLoadingBySlug || isRegenerating}
+          />
+        )}
+        {!guideSlug && <GenerateAIGuide onGuideSlugChange={setGuideSlug} />}
+
+        {aiGuide && !isRegenerating && (
+          <div className="mx-auto mt-12 mb-12 max-w-4xl">
+            <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
+              <ListSuggestions
+                title="Related Topics"
+                suggestions={relatedTopics}
+                depth="essentials"
+                isLoading={isAiGuideSuggestionsLoading}
+                currentGuideTitle={aiGuide.title}
+              />
+
+              <ListSuggestions
+                title="Dive Deeper"
+                suggestions={deepDiveTopics}
+                depth="detailed"
+                isLoading={isAiGuideSuggestionsLoading}
+                currentGuideTitle={aiGuide.title}
+              />
+            </div>
+          </div>
+        )}
+      </div>
+      <AIGuideChat
+        guideSlug={guideSlug}
+        isGuideLoading={!aiGuide}
+        onUpgrade={() => setShowUpgradeModal(true)}
+        randomQuestions={randomQuestions}
+        isQuestionsLoading={isAiGuideSuggestionsLoading}
+      />
+    </AITutorLayout>
+  );
+}
+
+type ListSuggestionsProps = {
+  currentGuideTitle?: string;
+  title: string;
+  suggestions: string[];
+  depth: string;
+  isLoading: boolean;
+};
+
+export function ListSuggestions(props: ListSuggestionsProps) {
+  const { title, suggestions, depth, isLoading, currentGuideTitle } = props;
+
+  return (
+    <div className="group relative overflow-hidden rounded-xl border border-gray-300 bg-linear-to-br from-gray-100 to-gray-50 shadow-xs transition-all duration-200">
+      <div className="border-b border-gray-200 bg-white px-5 py-4">
+        <h2 className="text-lg font-semibold text-gray-900">{title}</h2>
+        <p className="mt-1 text-sm text-gray-600">
+          {depth === 'essentials'
+            ? 'Explore related concepts to expand your knowledge'
+            : 'Take a deeper dive into specific areas'}
+        </p>
+      </div>
+
+      <div className="p-5">
+        {isLoading && (
+          <div className="space-y-3">
+            {[1, 2].map((i) => (
+              <div
+                key={i}
+                className="h-10 w-full animate-pulse rounded-lg bg-white"
+              ></div>
+            ))}
+          </div>
+        )}
+
+        {!isLoading && suggestions?.length > 0 && (
+          <div className="space-y-2">
+            {suggestions.map((topic) => {
+              const topicTerm =
+                depth === 'essentials'
+                  ? `I have covered the basics of ${currentGuideTitle} and want to learn more about ${topic}`
+                  : `I have covered the basics of ${currentGuideTitle} and want to dive deeper into ${topic}`;
+              const url = `/ai/guide?term=${encodeURIComponent(topicTerm)}&depth=${depth}&id=&format=guide`;
+
+              return (
+                <a
+                  key={topic}
+                  href={url}
+                  target="_blank"
+                  className="group/item flex items-center justify-between rounded-lg border border-gray-200 bg-white px-4 py-3 text-sm font-medium text-gray-700 transition-all duration-200 hover:border-gray-300 hover:bg-gray-50"
+                >
+                  <span className="flex-1 truncate group-hover/item:text-gray-900">
+                    {topic}
+                  </span>
+                  <ExternalLink className="ml-2 size-4 text-gray-400 group-hover/item:text-gray-600" />
+                </a>
+              );
+            })}
+          </div>
+        )}
+
+        {!isLoading && suggestions?.length === 0 && (
+          <div className="flex flex-col items-center justify-center py-8 text-center">
+            <div className="mb-3 rounded-full bg-gray-100 p-3">
+              <svg
+                className="h-6 w-6 text-gray-400"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"
+                />
+              </svg>
+            </div>
+            <p className="text-sm text-gray-500">No suggestions available</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/GenerateGuide/AIGuideChat.tsx b/src/components/GenerateGuide/AIGuideChat.tsx
new file mode 100644
index 000000000..407ddc00d
--- /dev/null
+++ b/src/components/GenerateGuide/AIGuideChat.tsx
@@ -0,0 +1,381 @@
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react';
+import { useChat, type ChatMessage } from '../../hooks/use-chat';
+import { RoadmapAIChatCard } from '../RoadmapAIChat/RoadmapAIChatCard';
+import {
+  ArrowDownIcon,
+  BotIcon,
+  LockIcon,
+  MessageCircleIcon,
+  PauseCircleIcon,
+  SendIcon,
+  Trash2Icon,
+  XIcon,
+} from 'lucide-react';
+import { ChatHeaderButton } from '../FrameRenderer/RoadmapFloatingChat';
+import { isLoggedIn } from '../../lib/jwt';
+import { showLoginPopup } from '../../lib/popup';
+import { flushSync } from 'react-dom';
+import { markdownToHtml } from '../../lib/markdown';
+import { getAiCourseLimitOptions } from '../../queries/ai-course';
+import { useQuery } from '@tanstack/react-query';
+import { queryClient } from '../../stores/query-client';
+import { billingDetailsOptions } from '../../queries/billing';
+import { LoadingChip } from '../LoadingChip';
+import { getTailwindScreenDimension } from '../../lib/is-mobile';
+
+type AIGuideChatProps = {
+  guideSlug?: string;
+  isGuideLoading?: boolean;
+  onUpgrade?: () => void;
+  isQuestionsLoading?: boolean;
+  randomQuestions?: string[];
+};
+
+export function AIGuideChat(props: AIGuideChatProps) {
+  const {
+    guideSlug,
+    isGuideLoading,
+    onUpgrade,
+    randomQuestions,
+    isQuestionsLoading,
+  } = props;
+
+  const scrollareaRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const [inputValue, setInputValue] = useState('');
+  const [showScrollToBottom, setShowScrollToBottom] = useState(false);
+  const [isChatOpen, setIsChatOpen] = useState(true);
+  const [isMobile, setIsMobile] = useState(false);
+
+  const {
+    data: tokenUsage,
+    isLoading: isTokenUsageLoading,
+    refetch: refetchTokenUsage,
+  } = useQuery(getAiCourseLimitOptions(), queryClient);
+
+  const {
+    data: userBillingDetails,
+    isLoading: isBillingDetailsLoading,
+    refetch: refetchBillingDetails,
+  } = useQuery(billingDetailsOptions(), queryClient);
+
+  const isLimitExceeded = (tokenUsage?.used || 0) >= (tokenUsage?.limit || 0);
+  const isPaidUser = userBillingDetails?.status === 'active';
+
+  const {
+    messages,
+    status,
+    streamedMessageHtml,
+    sendMessages,
+    setMessages,
+    stop,
+  } = useChat({
+    endpoint: `${import.meta.env.PUBLIC_API_URL}/v1-ai-guide-chat`,
+    onError: (error) => {
+      console.error(error);
+    },
+    data: {
+      guideSlug,
+    },
+    onFinish: () => {
+      refetchTokenUsage();
+    },
+  });
+
+  const scrollToBottom = useCallback(
+    (behavior: 'smooth' | 'instant' = 'smooth') => {
+      scrollareaRef.current?.scrollTo({
+        top: scrollareaRef.current.scrollHeight,
+        behavior,
+      });
+    },
+    [scrollareaRef],
+  );
+
+  const isStreamingMessage = status === 'streaming';
+  const hasMessages = messages.length > 0;
+
+  const handleSubmitInput = useCallback(
+    (defaultInputValue?: string) => {
+      const message = defaultInputValue || inputValue;
+      if (!isLoggedIn()) {
+        showLoginPopup();
+        return;
+      }
+
+      if (isStreamingMessage) {
+        return;
+      }
+
+      const newMessages: ChatMessage[] = [
+        ...messages,
+        {
+          role: 'user',
+          content: message,
+          html: markdownToHtml(message),
+        },
+      ];
+      flushSync(() => {
+        setMessages(newMessages);
+      });
+      sendMessages(newMessages);
+      setInputValue('');
+    },
+    [inputValue, isStreamingMessage, messages, sendMessages, setMessages],
+  );
+
+  const checkScrollPosition = useCallback(() => {
+    const scrollArea = scrollareaRef.current;
+    if (!scrollArea) {
+      return;
+    }
+
+    const { scrollTop, scrollHeight, clientHeight } = scrollArea;
+    const isAtBottom = scrollTop + clientHeight >= scrollHeight - 50; // 50px threshold
+    setShowScrollToBottom(!isAtBottom && messages.length > 0);
+  }, [messages.length]);
+
+  useEffect(() => {
+    const scrollArea = scrollareaRef.current;
+    if (!scrollArea) {
+      return;
+    }
+
+    scrollArea.addEventListener('scroll', checkScrollPosition);
+    return () => scrollArea.removeEventListener('scroll', checkScrollPosition);
+  }, [checkScrollPosition]);
+
+  const isLoading =
+    isGuideLoading || isTokenUsageLoading || isBillingDetailsLoading;
+
+  useLayoutEffect(() => {
+    const deviceType = getTailwindScreenDimension();
+    const isMediumSize = ['sm', 'md'].includes(deviceType);
+
+    if (!isMediumSize) {
+      const storedState = localStorage.getItem('chat-history-sidebar-open');
+      setIsChatOpen(storedState === null ? true : storedState === 'true');
+    } else {
+      setIsChatOpen(!isMediumSize);
+    }
+
+    setIsMobile(isMediumSize);
+  }, []);
+
+  useEffect(() => {
+    if (!isMobile) {
+      localStorage.setItem('chat-history-sidebar-open', isChatOpen.toString());
+    }
+  }, [isChatOpen, isMobile]);
+
+  if (!isChatOpen) {
+    return (
+      <div className="absolute inset-x-0 bottom-0 flex justify-center p-2">
+        <button
+          className="flex items-center justify-center gap-2 rounded-full bg-black px-4 py-2 text-white shadow"
+          onClick={() => {
+            setIsChatOpen(true);
+          }}
+        >
+          <MessageCircleIcon className="h-4 w-4" />
+          <span className="text-sm">Open Chat</span>
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="absolute inset-0 flex h-full w-full max-w-full flex-col overflow-hidden border-l border-gray-200 bg-white md:relative md:max-w-[40%]">
+      <div className="flex items-center justify-between gap-2 border-b border-gray-200 bg-white p-2">
+        <h2 className="flex items-center gap-2 text-sm font-medium">
+          <BotIcon className="h-4 w-4" />
+          AI Guide
+        </h2>
+
+        <button
+          className="mr-2 flex size-5 items-center justify-center rounded-md text-gray-500 hover:bg-gray-300 md:hidden"
+          onClick={() => {
+            setIsChatOpen(false);
+          }}
+        >
+          <XIcon className="h-3.5 w-3.5" />
+        </button>
+      </div>
+
+      {isLoading && (
+        <div className="absolute inset-0 flex items-center justify-center bg-gray-100">
+          <LoadingChip message="Loading..." />
+        </div>
+      )}
+
+      {!isLoading && (
+        <>
+          <div className="relative grow overflow-y-auto" ref={scrollareaRef}>
+            <div className="absolute inset-0 flex flex-col">
+              <div className="relative flex grow flex-col justify-end">
+                <div className="flex flex-col justify-end gap-2 px-3 py-2">
+                  <RoadmapAIChatCard
+                    role="assistant"
+                    html="Hello, how can I help you today?"
+                    isIntro
+                  />
+                  {isQuestionsLoading && (
+                    <div className="flex flex-col gap-2">
+                      {[1, 2, 3, 4].map((i) => (
+                        <div
+                          key={i}
+                          className="h-[48px] w-full animate-pulse rounded-lg bg-gray-200"
+                        ></div>
+                      ))}
+                    </div>
+                  )}
+                  {!isQuestionsLoading &&
+                    randomQuestions &&
+                    randomQuestions.length > 0 &&
+                    messages.length === 0 && (
+                      <div className="space-y-2">
+                        <p className="mb-2 text-xs font-normal text-gray-500">
+                          Some questions you might have about this lesson.
+                        </p>
+                        <div className="space-y-1">
+                          {randomQuestions?.map((question) => {
+                            return (
+                              <button
+                                key={`chat-${question}`}
+                                className="flex h-full self-start rounded-md bg-yellow-500/10 px-3 py-2 text-left text-sm text-black hover:bg-yellow-500/20"
+                                onClick={() => {
+                                  handleSubmitInput(question);
+                                }}
+                              >
+                                {question}
+                              </button>
+                            );
+                          })}
+                        </div>
+                      </div>
+                    )}
+
+                  {messages.map((chat, index) => {
+                    return (
+                      <RoadmapAIChatCard key={`chat-${index}`} {...chat} />
+                    );
+                  })}
+
+                  {status === 'streaming' && !streamedMessageHtml && (
+                    <RoadmapAIChatCard role="assistant" html="Thinking..." />
+                  )}
+
+                  {status === 'streaming' && streamedMessageHtml && (
+                    <RoadmapAIChatCard
+                      role="assistant"
+                      html={streamedMessageHtml}
+                    />
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {(hasMessages || showScrollToBottom) && (
+            <div className="flex flex-row justify-between gap-2 border-t border-gray-200 px-3 py-2">
+              <ChatHeaderButton
+                icon={<Trash2Icon className="h-3.5 w-3.5" />}
+                className="rounded-md bg-gray-200 py-1 pr-2 pl-1.5 text-gray-500 hover:bg-gray-300"
+                onClick={() => {
+                  setMessages([]);
+                }}
+              >
+                Clear
+              </ChatHeaderButton>
+              {showScrollToBottom && (
+                <ChatHeaderButton
+                  icon={<ArrowDownIcon className="h-3.5 w-3.5" />}
+                  className="rounded-md bg-gray-200 py-1 pr-2 pl-1.5 text-gray-500 hover:bg-gray-300"
+                  onClick={() => {
+                    scrollToBottom('smooth');
+                  }}
+                >
+                  Scroll to bottom
+                </ChatHeaderButton>
+              )}
+            </div>
+          )}
+
+          <div className="relative flex items-center border-t border-gray-200 text-sm">
+            {isLimitExceeded && isLoggedIn() && (
+              <div className="absolute inset-0 z-10 flex items-center justify-center gap-2 bg-black text-white">
+                <LockIcon
+                  className="size-4 cursor-not-allowed"
+                  strokeWidth={2.5}
+                />
+                <p className="cursor-not-allowed">
+                  Limit reached for today
+                  {isPaidUser ? '. Please wait until tomorrow.' : ''}
+                </p>
+                {!isPaidUser && (
+                  <button
+                    onClick={() => {
+                      onUpgrade?.();
+                    }}
+                    className="rounded-md bg-white px-2 py-1 text-xs font-medium text-black hover:bg-gray-300"
+                  >
+                    Upgrade for more
+                  </button>
+                )}
+              </div>
+            )}
+
+            <input
+              ref={inputRef}
+              type="text"
+              value={inputValue}
+              onChange={(e) => setInputValue(e.target.value)}
+              autoFocus
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                  e.preventDefault();
+                  if (isStreamingMessage) {
+                    return;
+                  }
+                  handleSubmitInput();
+                }
+              }}
+              placeholder="Ask me anything about this guide..."
+              className="w-full resize-none px-3 py-4 outline-none"
+            />
+
+            <button
+              className="absolute top-1/2 right-2 -translate-y-1/2 p-1 text-zinc-500 hover:text-black disabled:opacity-50"
+              onClick={() => {
+                if (!isLoggedIn()) {
+                  showLoginPopup();
+                  return;
+                }
+
+                if (status !== 'idle') {
+                  stop();
+                  return;
+                }
+
+                handleSubmitInput();
+              }}
+            >
+              {isStreamingMessage ? (
+                <PauseCircleIcon className="h-4 w-4" />
+              ) : (
+                <SendIcon className="h-4 w-4" />
+              )}
+            </button>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/GenerateGuide/AIGuideContent.css b/src/components/GenerateGuide/AIGuideContent.css
new file mode 100644
index 000000000..a6b8a9bac
--- /dev/null
+++ b/src/components/GenerateGuide/AIGuideContent.css
@@ -0,0 +1,131 @@
+.prose ul li > code,
+.prose ol li > code,
+p code,
+a > code,
+strong > code,
+em > code,
+h1 > code,
+h2 > code,
+h3 > code {
+  background: #ebebeb !important;
+  color: currentColor !important;
+  font-size: 14px;
+  font-weight: normal !important;
+}
+
+.course-ai-content.course-content.prose ul li > code,
+.course-ai-content.course-content.prose ol li > code,
+.course-ai-content.course-content.prose p code,
+.course-ai-content.course-content.prose a > code,
+.course-ai-content.course-content.prose strong > code,
+.course-ai-content.course-content.prose em > code,
+.course-ai-content.course-content.prose h1 > code,
+.course-ai-content.course-content.prose h2 > code,
+.course-ai-content.course-content.prose h3 > code,
+.course-notes-content.prose ul li > code,
+.course-notes-content.prose ol li > code,
+.course-notes-content.prose p code,
+.course-notes-content.prose a > code,
+.course-notes-content.prose strong > code,
+.course-notes-content.prose em > code,
+.course-notes-content.prose h1 > code,
+.course-notes-content.prose h2 > code,
+.course-notes-content.prose h3 > code {
+  font-size: 12px !important;
+}
+
+.course-ai-content pre {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.course-ai-content pre::-webkit-scrollbar {
+  display: none;
+}
+
+.course-ai-content pre,
+.course-notes-content pre {
+  overflow: scroll;
+  font-size: 15px;
+  margin: 10px 0;
+}
+
+.prose ul li > code:before,
+p > code:before,
+.prose ul li > code:after,
+.prose ol li > code:before,
+p > code:before,
+.prose ol li > code:after,
+.course-content h1 > code:after,
+.course-content h1 > code:before,
+.course-content h2 > code:after,
+.course-content h2 > code:before,
+.course-content h3 > code:after,
+.course-content h3 > code:before,
+.course-content h4 > code:after,
+.course-content h4 > code:before,
+p > code:after,
+a > code:after,
+a > code:before {
+  content: '' !important;
+}
+
+.course-content.prose ul li > code,
+.course-content.prose ol li > code,
+.course-content p code,
+.course-content a > code,
+.course-content strong > code,
+.course-content em > code,
+.course-content h1 > code,
+.course-content h2 > code,
+.course-content h3 > code,
+.course-content table code {
+  background: #f4f4f5 !important;
+  border: 1px solid #282a36 !important;
+  color: #282a36 !important;
+  padding: 2px 4px;
+  border-radius: 5px;
+  font-size: 16px !important;
+  white-space: pre;
+  font-weight: normal;
+}
+
+.course-content blockquote {
+  font-style: normal;
+}
+
+.course-content.prose blockquote h1,
+.course-content.prose blockquote h2,
+.course-content.prose blockquote h3,
+.course-content.prose blockquote h4 {
+  font-style: normal;
+  margin-bottom: 8px;
+}
+
+.course-content.prose ul li > code:before,
+.course-content p > code:before,
+.course-content.prose ul li > code:after,
+.course-content p > code:after,
+.course-content h2 > code:after,
+.course-content h2 > code:before,
+.course-content table code:before,
+.course-content table code:after,
+.course-content a > code:after,
+.course-content a > code:before,
+.course-content h2 code:after,
+.course-content h2 code:before,
+.course-content h2 code:after,
+.course-content h2 code:before {
+  content: '' !important;
+}
+
+.course-content table {
+  border-collapse: collapse;
+  border: 1px solid black;
+  border-radius: 5px;
+}
+
+.course-content table td,
+.course-content table th {
+  padding: 5px 10px;
+}
diff --git a/src/components/GenerateGuide/AIGuideContent.tsx b/src/components/GenerateGuide/AIGuideContent.tsx
new file mode 100644
index 000000000..94daad17c
--- /dev/null
+++ b/src/components/GenerateGuide/AIGuideContent.tsx
@@ -0,0 +1,40 @@
+import './AIGuideContent.css';
+import { AIGuideRegenerate } from './AIGuideRegenerate';
+import { cn } from '../../lib/classname';
+import { LoadingChip } from '../LoadingChip';
+
+type AIGuideContentProps = {
+  html: string;
+  onRegenerate?: (prompt?: string) => void;
+  isLoading?: boolean;
+};
+
+export function AIGuideContent(props: AIGuideContentProps) {
+  const { html, onRegenerate, isLoading } = props;
+
+  return (
+    <div
+      className={cn(
+        'relative mx-auto w-full max-w-4xl',
+        isLoading && 'min-h-full',
+      )}
+    >
+      <div
+        className="course-content prose-h1:leading-[1.15] prose prose-lg prose-headings:mb-3 prose-headings:mt-8 prose-blockquote:font-normal prose-pre:rounded-2xl prose-pre:text-lg prose-li:my-1 prose-thead:border-zinc-800 prose-tr:border-zinc-800 max-lg:prose-h2:mt-3 max-lg:prose-h2:text-lg max-lg:prose-h3:text-base max-lg:prose-pre:px-3 max-lg:prose-pre:text-sm mt-8 max-w-full text-black max-lg:mt-4 max-lg:text-base [&>h1]:text-balance"
+        dangerouslySetInnerHTML={{ __html: html }}
+      />
+
+      {isLoading && !html && (
+        <div className="absolute inset-0 flex items-center justify-center">
+          <LoadingChip message="Please wait..." />
+        </div>
+      )}
+
+      {onRegenerate && !isLoading && (
+        <div className="absolute top-4 right-4">
+          <AIGuideRegenerate onRegenerate={onRegenerate} />
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/GenerateGuide/AIGuideRegenerate.tsx b/src/components/GenerateGuide/AIGuideRegenerate.tsx
new file mode 100644
index 000000000..3be0df9c0
--- /dev/null
+++ b/src/components/GenerateGuide/AIGuideRegenerate.tsx
@@ -0,0 +1,88 @@
+import { PenSquare, RefreshCcw } from 'lucide-react';
+import { useRef, useState } from 'react';
+import { useOutsideClick } from '../../hooks/use-outside-click';
+import { cn } from '../../lib/classname';
+import { UpgradeAccountModal } from '../Billing/UpgradeAccountModal';
+import { ModifyCoursePrompt } from '../GenerateCourse/ModifyCoursePrompt';
+
+type AIGuideRegenerateProps = {
+  onRegenerate: (prompt?: string) => void;
+};
+
+export function AIGuideRegenerate(props: AIGuideRegenerateProps) {
+  const { onRegenerate } = props;
+
+  const [isDropdownVisible, setIsDropdownVisible] = useState(false);
+  const [showUpgradeModal, setShowUpgradeModal] = useState(false);
+  const [showPromptModal, setShowPromptModal] = useState(false);
+
+  const ref = useRef<HTMLDivElement>(null);
+
+  useOutsideClick(ref, () => setIsDropdownVisible(false));
+
+  return (
+    <>
+      {showUpgradeModal && (
+        <UpgradeAccountModal
+          onClose={() => {
+            setShowUpgradeModal(false);
+          }}
+        />
+      )}
+
+      {showPromptModal && (
+        <ModifyCoursePrompt
+          description="Pass additional information to the AI to generate a guide."
+          onClose={() => setShowPromptModal(false)}
+          onSubmit={(prompt) => {
+            setShowPromptModal(false);
+            onRegenerate(prompt);
+          }}
+        />
+      )}
+
+      <div ref={ref} className="relative flex items-stretch">
+        <button
+          className={cn('rounded-md px-2.5 text-gray-400 hover:text-black', {
+            'text-black': isDropdownVisible,
+          })}
+          onClick={() => setIsDropdownVisible(!isDropdownVisible)}
+        >
+          <PenSquare className="text-current" size={16} strokeWidth={2.5} />
+        </button>
+        {isDropdownVisible && (
+          <div className="absolute top-full right-0 min-w-[170px] translate-y-1 overflow-hidden rounded-md border border-gray-200 bg-white shadow-md">
+            <button
+              onClick={() => {
+                setIsDropdownVisible(false);
+                onRegenerate();
+              }}
+              className="flex w-full items-center gap-2.5 px-3 py-2 text-left text-sm text-gray-600 hover:bg-gray-100"
+            >
+              <RefreshCcw
+                size={16}
+                className="text-gray-400"
+                strokeWidth={2.5}
+              />
+              Regenerate
+            </button>
+            <button
+              onClick={() => {
+                setIsDropdownVisible(false);
+                setShowPromptModal(true);
+              }}
+              className="flex w-full items-center gap-2.5 px-3 py-2 text-left text-sm text-gray-600 hover:bg-gray-100"
+            >
+              <PenSquare
+                size={16}
+                className="text-gray-400"
+                strokeWidth={2.5}
+              />
+              Modify Prompt
+            </button>
+          </div>
+        )}
+      </div>
+    </>
+  );
+}
diff --git a/src/components/GenerateGuide/GenerateAIGuide.tsx b/src/components/GenerateGuide/GenerateAIGuide.tsx
new file mode 100644
index 000000000..64ed875a0
--- /dev/null
+++ b/src/components/GenerateGuide/GenerateAIGuide.tsx
@@ -0,0 +1,142 @@
+import { useEffect, useRef, useState } from 'react';
+import { generateGuide } from '../../helper/generate-ai-guide';
+import { getCourseFineTuneData } from '../../lib/ai';
+import { getUrlParams } from '../../lib/browser';
+import { isLoggedIn } from '../../lib/jwt';
+import { AIGuideContent } from './AIGuideContent';
+import { queryClient } from '../../stores/query-client';
+import { getAiGuideOptions } from '../../queries/ai-guide';
+import { LoadingChip } from '../LoadingChip';
+
+type GenerateAIGuideProps = {
+  onGuideSlugChange?: (guideSlug: string) => void;
+};
+
+export function GenerateAIGuide(props: GenerateAIGuideProps) {
+  const { onGuideSlugChange } = props;
+
+  const [isLoading, setIsLoading] = useState(true);
+  const [isStreaming, setIsStreaming] = useState(false);
+  const [error, setError] = useState('');
+
+  const [content, setContent] = useState('');
+  const [html, setHtml] = useState('');
+  const htmlRef = useRef<string>('');
+
+  useEffect(() => {
+    const params = getUrlParams();
+    const paramsTerm = params?.term;
+    const paramsDepth = params?.depth;
+    const paramsSrc = params?.src || 'search';
+    if (!paramsTerm || !paramsDepth) {
+      return;
+    }
+
+    let paramsGoal = '';
+    let paramsAbout = '';
+    let paramsCustomInstructions = '';
+
+    const sessionId = params?.id;
+    if (sessionId) {
+      const fineTuneData = getCourseFineTuneData(sessionId);
+      if (fineTuneData) {
+        paramsGoal = fineTuneData.goal;
+        paramsAbout = fineTuneData.about;
+        paramsCustomInstructions = fineTuneData.customInstructions;
+      }
+    }
+
+    handleGenerateDocument({
+      term: paramsTerm,
+      depth: paramsDepth,
+      instructions: paramsCustomInstructions,
+      goal: paramsGoal,
+      about: paramsAbout,
+      src: paramsSrc,
+    });
+  }, []);
+
+  const handleGenerateDocument = async (options: {
+    term: string;
+    depth: string;
+    instructions?: string;
+    goal?: string;
+    about?: string;
+    isForce?: boolean;
+    prompt?: string;
+    src?: string;
+  }) => {
+    const { term, depth, isForce, prompt, instructions, goal, about, src } =
+      options;
+
+    if (!isLoggedIn()) {
+      window.location.href = '/ai';
+      return;
+    }
+
+    await generateGuide({
+      term,
+      depth,
+      onDetailsChange: (details) => {
+        const { guideId, guideSlug, creatorId, title } = details;
+
+        const guideData = {
+          _id: guideId,
+          userId: creatorId,
+          title,
+          html: htmlRef.current,
+          keyword: term,
+          depth,
+          content,
+          tokens: {
+            prompt: 0,
+            completion: 0,
+            total: 0,
+          },
+          relatedTopics: [],
+          deepDiveTopics: [],
+          questions: [],
+          viewCount: 0,
+          lastVisitedAt: new Date(),
+          createdAt: new Date(),
+          updatedAt: new Date(),
+        };
+
+        queryClient.setQueryData(
+          getAiGuideOptions(guideSlug).queryKey,
+          guideData,
+        );
+
+        onGuideSlugChange?.(guideSlug);
+        window.history.replaceState(null, '', `/ai/guide/${guideSlug}`);
+      },
+      onLoadingChange: setIsLoading,
+      onError: setError,
+      instructions,
+      goal,
+      about,
+      isForce,
+      prompt,
+      src,
+      onHtmlChange: (html) => {
+        htmlRef.current = html;
+        setHtml(html);
+      },
+      onStreamingChange: setIsStreaming,
+    });
+  };
+
+  if (error) {
+    return <div className="text-red-500">{error}</div>;
+  }
+
+  if (isLoading) {
+    return (
+      <div className="flex h-full w-full items-center justify-center">
+        <LoadingChip message="Please wait..." />
+      </div>
+    );
+  }
+
+  return <AIGuideContent html={html} />;
+}
diff --git a/src/components/GenerateGuide/GetAIGuide.tsx b/src/components/GenerateGuide/GetAIGuide.tsx
new file mode 100644
index 000000000..21821f8f5
--- /dev/null
+++ b/src/components/GenerateGuide/GetAIGuide.tsx
@@ -0,0 +1,84 @@
+import { useQuery } from '@tanstack/react-query';
+import { useEffect, useState } from 'react';
+import { queryClient } from '../../stores/query-client';
+import { AIGuideContent } from './AIGuideContent';
+import { getAiGuideOptions } from '../../queries/ai-guide';
+
+type GetAIGuideProps = {
+  slug: string;
+};
+
+export function GetAIGuide(props: GetAIGuideProps) {
+  const { slug: documentSlug } = props;
+
+  const [isLoading, setIsLoading] = useState(true);
+  const [isRegenerating, setIsRegenerating] = useState(false);
+
+  const [error, setError] = useState('');
+  const { data: aiGuide, error: queryError } = useQuery(
+    {
+      ...getAiGuideOptions(documentSlug),
+      enabled: !!documentSlug,
+    },
+    queryClient,
+  );
+
+  useEffect(() => {
+    if (!aiGuide) {
+      return;
+    }
+
+    setIsLoading(false);
+  }, [aiGuide]);
+
+  useEffect(() => {
+    if (!queryError) {
+      return;
+    }
+
+    setIsLoading(false);
+    setError(queryError.message);
+  }, [queryError]);
+
+  const handleRegenerateDocument = async (prompt?: string) => {
+    // if (!aiDocument) {
+    //   return;
+    // }
+    // queryClient.setQueryData(
+    //   getAiDocumentOptions({ documentSlug: documentSlug }).queryKey,
+    //   {
+    //     ...aiDocument,
+    //     title: '',
+    //     difficulty: '',
+    //     modules: [],
+    //   },
+    // );
+    // await generateDocument({
+    //   term: aiDocument.keyword,
+    //   difficulty: aiDocument.difficulty,
+    //   slug: documentSlug,
+    //   prompt,
+    //   onDocumentChange: (document) => {
+    //     queryClient.setQueryData(
+    //       getAiDocumentOptions({ documentSlug: documentSlug }).queryKey,
+    //       {
+    //         ...aiDocument,
+    //         title: aiDocument.title,
+    //         difficulty: aiDocument.difficulty,
+    //         content: document,
+    //       },
+    //     );
+    //   },
+    //   onLoadingChange: (isNewLoading) => {
+    //     setIsRegenerating(isNewLoading);
+    //     if (!isNewLoading) {
+    //       // TODO: Update progress
+    //     }
+    //   },
+    //   onError: setError,
+    //   isForce: true,
+    // });
+  };
+
+  return <AIGuideContent html={aiGuide?.html || ''} />;
+}
diff --git a/src/components/GenerateGuide/UserGuidesList.tsx b/src/components/GenerateGuide/UserGuidesList.tsx
new file mode 100644
index 000000000..f215c419d
--- /dev/null
+++ b/src/components/GenerateGuide/UserGuidesList.tsx
@@ -0,0 +1,148 @@
+import { useQuery } from '@tanstack/react-query';
+import { BookOpen, Loader2 } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { deleteUrlParam, getUrlParams, setUrlParams } from '../../lib/browser';
+import { isLoggedIn } from '../../lib/jwt';
+import { showLoginPopup } from '../../lib/popup';
+import {
+  listUserAIGuidesOptions,
+  type ListUserAIGuidesQuery,
+} from '../../queries/ai-guide';
+import { queryClient } from '../../stores/query-client';
+import { AITutorTallMessage } from '../AITutor/AITutorTallMessage';
+import { UpgradeAccountModal } from '../Billing/UpgradeAccountModal';
+import { Pagination } from '../Pagination/Pagination';
+import { AICourseSearch } from '../GenerateCourse/AICourseSearch';
+import { AIGuideCard } from '../AIGuide/AIGuideCard';
+
+export function UserGuidesList() {
+  const [isInitialLoading, setIsInitialLoading] = useState(true);
+  const [showUpgradePopup, setShowUpgradePopup] = useState(false);
+
+  const [pageState, setPageState] = useState<ListUserAIGuidesQuery>({
+    perPage: '21',
+    currPage: '1',
+    query: '',
+  });
+
+  const { data: userAiGuides, isFetching: isUserAiGuidesLoading } = useQuery(
+    listUserAIGuidesOptions(pageState),
+    queryClient,
+  );
+
+  useEffect(() => {
+    setIsInitialLoading(false);
+  }, [userAiGuides]);
+
+  const guides = userAiGuides?.data ?? [];
+
+  useEffect(() => {
+    const queryParams = getUrlParams();
+
+    setPageState({
+      ...pageState,
+      currPage: queryParams?.p || '1',
+      query: queryParams?.q || '',
+    });
+  }, []);
+
+  useEffect(() => {
+    if (pageState?.currPage !== '1' || pageState?.query !== '') {
+      setUrlParams({
+        p: pageState?.currPage || '1',
+        q: pageState?.query || '',
+      });
+    } else {
+      deleteUrlParam('p');
+      deleteUrlParam('q');
+    }
+  }, [pageState]);
+
+  const isUserAuthenticated = isLoggedIn();
+  const isAnyLoading = isUserAiGuidesLoading || isInitialLoading;
+
+  return (
+    <>
+      {showUpgradePopup && (
+        <UpgradeAccountModal onClose={() => setShowUpgradePopup(false)} />
+      )}
+
+      <AICourseSearch
+        value={pageState?.query || ''}
+        onChange={(value) => {
+          setPageState({
+            ...pageState,
+            query: value,
+            currPage: '1',
+          });
+        }}
+        disabled={isAnyLoading}
+        placeholder="Search guides..."
+      />
+
+      {isAnyLoading && (
+        <p className="mb-4 flex flex-row items-center gap-2 text-sm text-gray-500">
+          <Loader2 className="h-4 w-4 animate-spin" />
+          Loading your guides...
+        </p>
+      )}
+
+      {!isAnyLoading && (
+        <>
+          <p className="mb-4 text-sm text-gray-500">
+            {isUserAuthenticated
+              ? `You have generated ${userAiGuides?.totalCount} guides so far.`
+              : 'Sign up or login to generate your first guide. Takes 2s to do so.'}
+          </p>
+
+          {isUserAuthenticated && !isAnyLoading && guides.length > 0 && (
+            <div className="flex flex-col gap-2">
+              <div className="grid grid-cols-1 gap-2 md:grid-cols-2 xl:grid-cols-3">
+                {guides.map((guide) => (
+                  <AIGuideCard key={guide._id} guide={guide} />
+                ))}
+              </div>
+
+              <Pagination
+                totalCount={userAiGuides?.totalCount || 0}
+                totalPages={userAiGuides?.totalPages || 0}
+                currPage={Number(userAiGuides?.currPage || 1)}
+                perPage={Number(userAiGuides?.perPage || 10)}
+                onPageChange={(page) => {
+                  setPageState({ ...pageState, currPage: String(page) });
+                }}
+                className="rounded-lg border border-gray-200 bg-white p-4"
+              />
+            </div>
+          )}
+
+          {!isAnyLoading && guides.length === 0 && (
+            <AITutorTallMessage
+              title={
+                isUserAuthenticated ? 'No guides found' : 'Sign up or login'
+              }
+              subtitle={
+                isUserAuthenticated
+                  ? "You haven't generated any guides yet."
+                  : 'Takes 2s to sign up and generate your first guide.'
+              }
+              icon={BookOpen}
+              buttonText={
+                isUserAuthenticated
+                  ? 'Create your first guide'
+                  : 'Sign up or login'
+              }
+              onButtonClick={() => {
+                if (isUserAuthenticated) {
+                  window.location.href = '/ai';
+                } else {
+                  showLoginPopup();
+                }
+              }}
+            />
+          )}
+        </>
+      )}
+    </>
+  );
+}
diff --git a/src/components/Library/LibraryTab.tsx b/src/components/Library/LibraryTab.tsx
new file mode 100644
index 000000000..18d3c445f
--- /dev/null
+++ b/src/components/Library/LibraryTab.tsx
@@ -0,0 +1,53 @@
+import { BookOpen, FileTextIcon, type LucideIcon } from 'lucide-react';
+import { cn } from '../../lib/classname';
+
+type LibraryTabsProps = {
+  activeTab: 'guides' | 'courses';
+};
+
+export function LibraryTabs(props: LibraryTabsProps) {
+  const { activeTab } = props;
+
+  return (
+    <div className="mb-6 flex gap-2 border-b border-gray-300">
+      <LibraryTabButton
+        isActive={activeTab === 'courses'}
+        icon={BookOpen}
+        label="Courses"
+        href="/ai/courses"
+      />
+      <LibraryTabButton
+        isActive={activeTab === 'guides'}
+        icon={FileTextIcon}
+        label="Guides"
+        href="/ai/guides"
+      />
+    </div>
+  );
+}
+
+type LibraryTabButtonProps = {
+  isActive: boolean;
+  icon: LucideIcon;
+  label: string;
+  href: string;
+};
+
+function LibraryTabButton(props: LibraryTabButtonProps) {
+  const { isActive, icon: Icon, label, href } = props;
+
+  return (
+    <a
+      href={href}
+      className={cn(
+        'flex items-center gap-1 rounded-t-md px-4 py-2 text-sm font-medium',
+        isActive
+          ? 'bg-gray-300'
+          : 'bg-gray-100 transition-colors hover:bg-gray-200',
+      )}
+    >
+      <Icon className="h-4 w-4" />
+      {label}
+    </a>
+  );
+}
diff --git a/src/components/LoadingChip.tsx b/src/components/LoadingChip.tsx
new file mode 100644
index 000000000..72cbfb1ba
--- /dev/null
+++ b/src/components/LoadingChip.tsx
@@ -0,0 +1,16 @@
+import { Loader2Icon } from 'lucide-react';
+
+type LoadingChipProps = {
+  message?: string;
+};
+
+export function LoadingChip(props: LoadingChipProps) {
+  const { message = 'Please wait...' } = props;
+
+  return (
+    <div className="flex items-center gap-2 rounded-lg border border-gray-300 bg-white py-2 pr-4 pl-3 text-sm">
+      <Loader2Icon className="size-4 animate-spin text-gray-400" />
+      <span>{message}</span>
+    </div>
+  );
+}
diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
index c20214c8b..cfac40800 100644
--- a/src/components/Pagination/Pagination.tsx
+++ b/src/components/Pagination/Pagination.tsx
@@ -51,7 +51,7 @@ export function Pagination(props: PaginationProps) {
             onPageChange(currPage - 1);
           }}
           disabled={currPage === 1 || isDisabled}
-          className="rounded-md border px-2 py-1 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-40"
+          className="rounded-md bg-white border px-2 py-1 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-40"
         >
           &larr;
         </button>
@@ -91,7 +91,7 @@ export function Pagination(props: PaginationProps) {
         )}
         <button
           disabled={currPage === totalPages || isDisabled}
-          className="rounded-md border px-2 py-1 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-40"
+          className="rounded-md bg-white border px-2 py-1 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-40"
           onClick={() => {
             onPageChange(currPage + 1);
           }}
diff --git a/src/components/RoadmapAIChat/RoadmapAIChatCard.tsx b/src/components/RoadmapAIChat/RoadmapAIChatCard.tsx
index f1eabef9b..766cbfa1c 100644
--- a/src/components/RoadmapAIChat/RoadmapAIChatCard.tsx
+++ b/src/components/RoadmapAIChat/RoadmapAIChatCard.tsx
@@ -1,4 +1,4 @@
-import type { RoadmapAIChatHistoryType } from './RoadmapAIChat';
+import type { RoadmapAIChatHistoryType } from '../../hooks/use-roadmap-ai-chat';
 import { cn } from '../../lib/classname';
 import { BotIcon, User2Icon } from 'lucide-react';
 
diff --git a/src/components/Select.tsx b/src/components/Select.tsx
new file mode 100644
index 000000000..0fa5da088
--- /dev/null
+++ b/src/components/Select.tsx
@@ -0,0 +1,185 @@
+import * as React from 'react';
+import { Select as SelectPrimitive } from 'radix-ui';
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react';
+import { cn } from '../lib/classname';
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />;
+}
+
+function SelectGroup({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />;
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />;
+}
+
+function SelectTrigger({
+  className,
+  size = 'default',
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: 'sm' | 'default';
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "flex h-9 w-full items-center justify-between gap-2 rounded-lg border bg-transparent px-3 py-2 text-sm whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  );
+}
+
+function SelectContent({
+  className,
+  children,
+  position = 'popper',
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          'relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg border bg-white shadow-md',
+          position === 'popper' &&
+            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+          className,
+        )}
+        position={position}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            'p-1',
+            position === 'popper' &&
+              'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1',
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  );
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn('px-2 py-1.5 text-xs', className)}
+      {...props}
+    />
+  );
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "relative flex w-full cursor-default items-center gap-2 rounded-md py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-gray-100 focus:text-black data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className,
+      )}
+      {...props}
+    >
+      <span className="absolute right-2 flex size-3.5 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  );
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn(
+        'pointer-events-none -mx-1 my-1 h-px bg-gray-200',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        'flex cursor-default items-center justify-center py-1',
+        className,
+      )}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  );
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        'flex cursor-default items-center justify-center py-1',
+        className,
+      )}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  );
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+};
diff --git a/src/components/TopicDetail/CreateCourseModal.tsx b/src/components/TopicDetail/CreateCourseModal.tsx
index 24b68ed81..55997d01e 100644
--- a/src/components/TopicDetail/CreateCourseModal.tsx
+++ b/src/components/TopicDetail/CreateCourseModal.tsx
@@ -24,7 +24,7 @@ export function CreateCourseModal(props: CreateCourseModalProps) {
           const formData = new FormData(e.target as HTMLFormElement);
           const subject = formData.get('subject');
 
-          window.location.href = `/ai/search?term=${subject}&difficulty=beginner&src=topic`;
+          window.location.href = `/ai/course?term=${subject}&difficulty=beginner&src=topic`;
           onClose();
         }}
       >
diff --git a/src/components/TopicDetail/TopicDetailAI.tsx b/src/components/TopicDetail/TopicDetailAI.tsx
index 5bbe07aa2..e34ef8193 100644
--- a/src/components/TopicDetail/TopicDetailAI.tsx
+++ b/src/components/TopicDetail/TopicDetailAI.tsx
@@ -278,7 +278,7 @@ export function TopicDetailAI(props: TopicDetailAIProps) {
                       return;
                     }
                   }}
-                  href={`/ai/search?term=${subject}&difficulty=beginner&src=topic`}
+                  href={`/ai/course?term=${subject}&difficulty=beginner&src=topic`}
                   className="flex items-center gap-1 gap-2 rounded-md border border-gray-300 bg-gray-100 px-2 py-1 hover:bg-gray-200 hover:text-black"
                 >
                   {subject}
@@ -289,7 +289,7 @@ export function TopicDetailAI(props: TopicDetailAIProps) {
             {roadmapTreeMapping?.subjects?.length === 0 && (
               <a
                 target="_blank"
-                href={`/ai/search?term=${roadmapTreeMapping?.text}&difficulty=beginner&src=topic`}
+                href={`/ai/course?term=${roadmapTreeMapping?.text}&difficulty=beginner&src=topic`}
                 className="flex items-center gap-1 rounded-md border border-gray-300 bg-gray-100 px-2 py-1 hover:bg-gray-200 hover:text-black"
               >
                 {nodeTextParts.slice(1).map((text, index) => {
diff --git a/src/helper/generate-ai-course.ts b/src/helper/generate-ai-course.ts
index 250d302b4..209451b48 100644
--- a/src/helper/generate-ai-course.ts
+++ b/src/helper/generate-ai-course.ts
@@ -121,7 +121,7 @@ export async function generateCourse(options: GenerateCourseOptions) {
     const CREATOR_ID_REGEX = new RegExp('@CREATORID:(\\w+)@');
 
     await readStream(reader, {
-      onStream: (result) => {
+      onStream: async (result) => {
         if (result.includes('@COURSEID') || result.includes('@COURSESLUG')) {
           const courseIdMatch = result.match(COURSE_ID_REGEX);
           const courseSlugMatch = result.match(COURSE_SLUG_REGEX);
@@ -166,7 +166,7 @@ export async function generateCourse(options: GenerateCourseOptions) {
           console.error('Error parsing streamed course content:', e);
         }
       },
-      onStreamEnd: (result) => {
+      onStreamEnd: async (result) => {
         result = result
           .replace(COURSE_ID_REGEX, '')
           .replace(COURSE_SLUG_REGEX, '')
diff --git a/src/helper/generate-ai-guide.ts b/src/helper/generate-ai-guide.ts
new file mode 100644
index 000000000..fb33f9564
--- /dev/null
+++ b/src/helper/generate-ai-guide.ts
@@ -0,0 +1,142 @@
+import { queryClient } from '../stores/query-client';
+import { getAiCourseLimitOptions } from '../queries/ai-course';
+import { readChatStream } from '../lib/chat';
+import { markdownToHtmlWithHighlighting } from '../lib/markdown';
+
+type GuideDetails = {
+  guideId: string;
+  guideSlug: string;
+  creatorId: string;
+  title: string;
+};
+
+type GenerateGuideOptions = {
+  term: string;
+  depth: string;
+  slug?: string;
+  isForce?: boolean;
+  prompt?: string;
+  instructions?: string;
+  goal?: string;
+  about?: string;
+  onGuideSlugChange?: (guideSlug: string) => void;
+  onGuideChange?: (guide: string) => void;
+  onLoadingChange?: (isLoading: boolean) => void;
+  onError?: (error: string) => void;
+  src?: string;
+  onHtmlChange?: (html: string) => void;
+  onStreamingChange?: (isStreaming: boolean) => void;
+  onDetailsChange?: (details: GuideDetails) => void;
+  onFinish?: () => void;
+};
+
+export async function generateGuide(options: GenerateGuideOptions) {
+  const {
+    term,
+    slug,
+    depth,
+    onGuideChange,
+    onLoadingChange,
+    onError,
+    isForce = false,
+    prompt,
+    instructions,
+    goal,
+    about,
+    src = 'search',
+    onHtmlChange,
+    onStreamingChange,
+    onDetailsChange,
+    onFinish,
+  } = options;
+
+  onLoadingChange?.(true);
+  onGuideChange?.('');
+
+  try {
+    let response = null;
+
+    if (slug && isForce) {
+      response = await fetch(
+        `${import.meta.env.PUBLIC_API_URL}/v1-regenerate-ai-guide/${slug}`,
+        {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          credentials: 'include',
+          body: JSON.stringify({
+            prompt,
+          }),
+        },
+      );
+    } else {
+      response = await fetch(
+        `${import.meta.env.PUBLIC_API_URL}/v1-generate-ai-guide`,
+        {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            keyword: term,
+            depth,
+            isForce,
+            customPrompt: prompt,
+            instructions,
+            goal,
+            about,
+            src,
+          }),
+          credentials: 'include',
+        },
+      );
+    }
+
+    if (!response.ok) {
+      const data = await response.json();
+      console.error(
+        'Error generating course:',
+        data?.message || 'Something went wrong',
+      );
+      onLoadingChange?.(false);
+      onError?.(data?.message || 'Something went wrong');
+      return;
+    }
+
+    const stream = response.body;
+    if (!stream) {
+      console.error('Failed to get stream from response');
+      onError?.('Something went wrong');
+      onLoadingChange?.(false);
+      return;
+    }
+
+    onLoadingChange?.(false);
+    onStreamingChange?.(true);
+    await readChatStream(stream, {
+      onMessage: async (message) => {
+        onGuideChange?.(message);
+        onHtmlChange?.(await markdownToHtmlWithHighlighting(message));
+      },
+      onMessageEnd: async (message) => {
+        onGuideChange?.(message);
+        onHtmlChange?.(await markdownToHtmlWithHighlighting(message));
+        queryClient.invalidateQueries(getAiCourseLimitOptions());
+        onStreamingChange?.(false);
+      },
+      onDetails: async (details) => {
+        if (!details?.guideId || !details?.guideSlug) {
+          throw new Error('Invalid details');
+        }
+
+        onDetailsChange?.(details);
+      },
+    });
+    onFinish?.();
+  } catch (error: any) {
+    onError?.(error?.message || 'Something went wrong');
+    console.error('Error in course generation:', error);
+    onLoadingChange?.(false);
+  }
+}
diff --git a/src/helper/shuffle.ts b/src/helper/shuffle.ts
new file mode 100644
index 000000000..0c8d60629
--- /dev/null
+++ b/src/helper/shuffle.ts
@@ -0,0 +1,19 @@
+export function shuffle<T = any>(array: T[]): T[] {
+  let currentIndex = array.length;
+  const result = [...array];
+
+  // While there remain elements to shuffle...
+  while (currentIndex != 0) {
+    // Pick a remaining element...
+    let randomIndex = Math.floor(Math.random() * currentIndex);
+    currentIndex--;
+
+    // And swap it with the current element.
+    [result[currentIndex], result[randomIndex]] = [
+      result[randomIndex],
+      result[currentIndex],
+    ];
+  }
+
+  return result;
+}
diff --git a/src/hooks/use-chat.ts b/src/hooks/use-chat.ts
new file mode 100644
index 000000000..833fa74ed
--- /dev/null
+++ b/src/hooks/use-chat.ts
@@ -0,0 +1,137 @@
+import { useCallback, useRef, useState } from 'react';
+import { removeAuthToken } from '../lib/jwt';
+import { readChatStream } from '../lib/chat';
+import { markdownToHtmlWithHighlighting } from '../lib/markdown';
+import { flushSync } from 'react-dom';
+
+export type ChatMessage = {
+  role: 'user' | 'assistant';
+  content: string;
+  html?: string;
+};
+
+type UseChatOptions = {
+  endpoint: string;
+  initialMessages?: ChatMessage[];
+  onError?: (error: Error) => void;
+  data?: Record<string, any>;
+  onFinish?: () => void;
+};
+
+export function useChat(options: UseChatOptions) {
+  const { endpoint, initialMessages, onError, data = {}, onFinish } = options;
+
+  const abortControllerRef = useRef<AbortController | null>(null);
+  const [messages, setMessages] = useState<ChatMessage[]>(
+    initialMessages || [],
+  );
+
+  // we use it to show optimistic message
+  // and then replace it with the actual message
+  const [streamedMessageHtml, setStreamedMessageHtml] = useState<string | null>(
+    null,
+  );
+
+  const [status, setStatus] = useState<
+    'idle' | 'streaming' | 'loading' | 'ready' | 'error'
+  >('idle');
+
+  const sendMessages = useCallback(
+    async (messages: ChatMessage[]) => {
+      try {
+        setStatus('loading');
+        abortControllerRef.current?.abort();
+        abortControllerRef.current = new AbortController();
+
+        const response = await fetch(endpoint, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({ messages, ...data }),
+          signal: abortControllerRef.current?.signal,
+          credentials: 'include',
+        });
+
+        if (!response.ok) {
+          const data = await response.json();
+          setStatus('error');
+          setMessages([...messages].slice(0, messages.length - 1));
+          if (data.status === 401) {
+            removeAuthToken();
+            window.location.reload();
+          }
+
+          throw new Error(data?.message || 'Something went wrong');
+        }
+
+        const stream = response.body;
+        if (!stream) {
+          setStatus('error');
+          setMessages([...messages].slice(0, messages.length - 1));
+          throw new Error('Something went wrong');
+        }
+
+        await readChatStream(stream, {
+          onMessage: async (content) => {
+            const html = await markdownToHtmlWithHighlighting(content);
+            flushSync(() => {
+              setStatus('streaming');
+              setStreamedMessageHtml(html);
+            });
+          },
+          onMessageEnd: async (content) => {
+            const html = await markdownToHtmlWithHighlighting(content);
+
+            flushSync(() => {
+              setStreamedMessageHtml(null);
+              setStatus('ready');
+              setMessages((prevMessages) => {
+                return [
+                  ...prevMessages,
+                  {
+                    role: 'assistant',
+                    content,
+                    html,
+                  },
+                ];
+              });
+            });
+          },
+        });
+
+        setStatus('idle');
+        abortControllerRef.current = null;
+        onFinish?.();
+      } catch (error) {
+        if (abortControllerRef.current?.signal.aborted) {
+          // we don't want to show error if the user stops the chat
+          // so we just return
+          return;
+        }
+
+        onError?.(error as Error);
+        setStatus('error');
+      }
+    },
+    [endpoint, onError],
+  );
+
+  const stop = useCallback(() => {
+    if (!abortControllerRef.current) {
+      return;
+    }
+
+    abortControllerRef.current.abort();
+    abortControllerRef.current = null;
+  }, []);
+
+  return {
+    messages,
+    setMessages,
+    sendMessages,
+    status,
+    streamedMessageHtml,
+    stop,
+  };
+}
diff --git a/src/hooks/use-roadmap-ai-chat.tsx b/src/hooks/use-roadmap-ai-chat.tsx
index 6f6abbcde..a73f9c736 100644
--- a/src/hooks/use-roadmap-ai-chat.tsx
+++ b/src/hooks/use-roadmap-ai-chat.tsx
@@ -237,8 +237,7 @@ export function useRoadmapAIChat(options: Options) {
           });
         },
         onDetails: (details) => {
-          const detailsJson = JSON.parse(details);
-          const chatHistoryId = detailsJson?.chatHistoryId;
+          const chatHistoryId = details?.chatHistoryId;
           if (!chatHistoryId) {
             return;
           }
diff --git a/src/lib/chat.ts b/src/lib/chat.ts
index b1004b865..a7a29c0ea 100644
--- a/src/lib/chat.ts
+++ b/src/lib/chat.ts
@@ -27,7 +27,7 @@ export async function readChatStream(
   }: {
     onMessage?: (message: string) => Promise<void>;
     onMessageEnd?: (message: string) => Promise<void>;
-    onDetails?: (details: string) => Promise<void> | void;
+    onDetails?: (details: any) => Promise<void> | void;
   },
 ) {
   const reader = stream.getReader();
@@ -73,7 +73,7 @@ export async function readChatStream(
           case CHAT_RESPONSE_PREFIX.message:
             return { type: 'message', content: JSON.parse(content) };
           case CHAT_RESPONSE_PREFIX.details:
-            return { type: 'details', content };
+            return { type: 'details', content: JSON.parse(content) };
           default:
             throw new Error('Invalid prefix: ' + prefix);
         }
diff --git a/src/pages/ai/community.astro b/src/pages/ai/community.astro
index 0f9422936..6ea1178a2 100644
--- a/src/pages/ai/community.astro
+++ b/src/pages/ai/community.astro
@@ -12,6 +12,8 @@ const ogImage = 'https://roadmap.sh/og-images/ai-tutor.png';
   description='Learn anything with AI Tutor. Pick a topic, choose a difficulty level and the AI will guide you through the learning process.'
 >
   <AITutorLayout activeTab='community' client:load>
-    <AIExploreCourseListing client:load />
+    <div class='mx-auto flex w-full max-w-6xl flex-grow flex-col p-2'>
+      <AIExploreCourseListing client:load />
+    </div>
   </AITutorLayout>
 </SkeletonLayout>
diff --git a/src/pages/ai/search.astro b/src/pages/ai/course.astro
similarity index 94%
rename from src/pages/ai/search.astro
rename to src/pages/ai/course.astro
index 284e8f4ce..fcd5466c7 100644
--- a/src/pages/ai/search.astro
+++ b/src/pages/ai/course.astro
@@ -9,7 +9,7 @@ import { CheckSubscriptionVerification } from '../../components/Billing/CheckSub
   briefTitle='AI Tutor'
   description='AI Tutor'
   keywords={['ai', 'tutor', 'education', 'learning']}
-  canonicalUrl='/ai/search'
+  canonicalUrl='/ai/course'
   noIndex={true}
 >
   <GenerateAICourse client:load />
diff --git a/src/pages/ai/courses.astro b/src/pages/ai/courses.astro
index 25a37a443..816a6d8ac 100644
--- a/src/pages/ai/courses.astro
+++ b/src/pages/ai/courses.astro
@@ -1,7 +1,7 @@
 ---
 import { UserCoursesList } from '../../components/GenerateCourse/UserCoursesList';
 import SkeletonLayout from '../../layouts/SkeletonLayout.astro';
-import { AITutorLayout } from '../../components/AITutor/AITutorLayout';
+import { AILibraryLayout } from '../../components/AIGuide/AILibraryLayout';
 const ogImage = 'https://roadmap.sh/og-images/ai-tutor.png';
 ---
 
@@ -11,7 +11,7 @@ const ogImage = 'https://roadmap.sh/og-images/ai-tutor.png';
   ogImageUrl={ogImage}
   description='Learn anything with AI Tutor. Pick a topic, choose a difficulty level and the AI will guide you through the learning process.'
 >
-  <AITutorLayout activeTab='courses' client:load>
+  <AILibraryLayout activeTab='courses' client:load>
     <UserCoursesList client:load />
-  </AITutorLayout>
+  </AILibraryLayout>
 </SkeletonLayout>
diff --git a/src/pages/ai/guide/[slug].astro b/src/pages/ai/guide/[slug].astro
new file mode 100644
index 000000000..9190b55b2
--- /dev/null
+++ b/src/pages/ai/guide/[slug].astro
@@ -0,0 +1,22 @@
+---
+import { AIGuide } from '../../../components/GenerateGuide/AIGuide';
+import SkeletonLayout from '../../../layouts/SkeletonLayout.astro';
+
+export const prerender = false;
+
+interface Params extends Record<string, string | undefined> {
+  slug: string;
+}
+
+const { slug } = Astro.params as Params;
+---
+
+<SkeletonLayout
+  title='AI Tutor'
+  briefTitle='AI Tutor'
+  description='AI Tutor'
+  keywords={['ai', 'tutor', 'education', 'learning']}
+  canonicalUrl={`/ai/guide/${slug}`}
+>
+  <AIGuide client:load guideSlug={slug} />
+</SkeletonLayout>
diff --git a/src/pages/ai/guide/index.astro b/src/pages/ai/guide/index.astro
new file mode 100644
index 000000000..efb74dc60
--- /dev/null
+++ b/src/pages/ai/guide/index.astro
@@ -0,0 +1,18 @@
+---
+import { AITutorLayout } from '../../../components/AITutor/AITutorLayout';
+import { CheckSubscriptionVerification } from '../../../components/Billing/CheckSubscriptionVerification';
+import { AIGuide } from '../../../components/GenerateGuide/AIGuide';
+import { GenerateAIGuide } from '../../../components/GenerateGuide/GenerateAIGuide';
+import SkeletonLayout from '../../../layouts/SkeletonLayout.astro';
+---
+
+<SkeletonLayout
+  title='AI Tutor'
+  briefTitle='AI Tutor'
+  description='AI Tutor'
+  keywords={['ai', 'tutor', 'education', 'learning']}
+  canonicalUrl='/ai/guide'
+  noIndex={true}
+>
+  <AIGuide client:load />
+</SkeletonLayout>
diff --git a/src/pages/ai/guides.astro b/src/pages/ai/guides.astro
new file mode 100644
index 000000000..72d52f8c6
--- /dev/null
+++ b/src/pages/ai/guides.astro
@@ -0,0 +1,17 @@
+---
+import { UserGuidesList } from '../../components/GenerateGuide/UserGuidesList';
+import SkeletonLayout from '../../layouts/SkeletonLayout.astro';
+import { AILibraryLayout } from '../../components/AIGuide/AILibraryLayout';
+const ogImage = 'https://roadmap.sh/og-images/ai-tutor.png';
+---
+
+<SkeletonLayout
+  title='Roadmap AI'
+  noIndex={true}
+  ogImageUrl={ogImage}
+  description='Learn anything with AI Tutor. Pick a topic, choose a difficulty level and the AI will guide you through the learning process.'
+>
+  <AILibraryLayout activeTab='guides' client:load>
+    <UserGuidesList client:load />
+  </AILibraryLayout>
+</SkeletonLayout>
diff --git a/src/pages/ai/index.astro b/src/pages/ai/index.astro
index 16db0eceb..65ddd22d9 100644
--- a/src/pages/ai/index.astro
+++ b/src/pages/ai/index.astro
@@ -1,9 +1,8 @@
 ---
-import { ChevronLeft, PlusCircle, BookOpen, Compass } from 'lucide-react';
 import { CheckSubscriptionVerification } from '../../components/Billing/CheckSubscriptionVerification';
-import { AICourse } from '../../components/GenerateCourse/AICourse';
-import SkeletonLayout from '../../layouts/SkeletonLayout.astro';
+import { ContentGenerator } from '../../components/ContentGenerator/ContentGenerator';
 import { AITutorLayout } from '../../components/AITutor/AITutorLayout';
+import SkeletonLayout from '../../layouts/SkeletonLayout.astro';
 const ogImage = 'https://roadmap.sh/og-images/ai-tutor.png';
 ---
 
@@ -14,7 +13,7 @@ const ogImage = 'https://roadmap.sh/og-images/ai-tutor.png';
   description='Learn anything with AI Tutor. Pick a topic, choose a difficulty level and the AI will guide you through the learning process.'
 >
   <AITutorLayout activeTab='new' client:load>
-    <AICourse client:load />
+    <ContentGenerator client:load />
     <CheckSubscriptionVerification client:load />
   </AITutorLayout>
 </SkeletonLayout>
diff --git a/src/pages/ai/staff-picks.astro b/src/pages/ai/staff-picks.astro
index 8fcae506a..cb3ec39da 100644
--- a/src/pages/ai/staff-picks.astro
+++ b/src/pages/ai/staff-picks.astro
@@ -12,6 +12,8 @@ const ogImage = 'https://roadmap.sh/og-images/ai-tutor.png';
   description='Learn anything with AI Tutor. Pick a topic, choose a difficulty level and the AI will guide you through the learning process.'
 >
   <AITutorLayout activeTab='staff-picks' client:load>
-    <AIFeaturedCoursesListing client:load />
+    <div class='mx-auto flex w-full max-w-6xl flex-grow flex-col p-2'>
+      <AIFeaturedCoursesListing client:load />
+    </div>
   </AITutorLayout>
 </SkeletonLayout>
diff --git a/src/queries/ai-guide.ts b/src/queries/ai-guide.ts
new file mode 100644
index 000000000..dc5822674
--- /dev/null
+++ b/src/queries/ai-guide.ts
@@ -0,0 +1,116 @@
+import { httpGet } from '../lib/query-http';
+import { isLoggedIn } from '../lib/jwt';
+import { queryOptions } from '@tanstack/react-query';
+import {
+  markdownToHtml,
+  markdownToHtmlWithHighlighting,
+} from '../lib/markdown';
+
+export interface AIGuideDocument {
+  _id: string;
+  userId: string;
+  title: string;
+  slug?: string;
+  keyword: string;
+  depth: string;
+  content: string;
+  tokens: {
+    prompt: number;
+    completion: number;
+    total: number;
+  };
+
+  relatedTopics: string[];
+  deepDiveTopics: string[];
+  questions: string[];
+
+  viewCount: number;
+  lastVisitedAt: Date;
+  createdAt: Date;
+  updatedAt: Date;
+}
+
+type GetAIGuideResponse = AIGuideDocument;
+
+export function getAiGuideOptions(guideSlug?: string) {
+  return queryOptions({
+    queryKey: ['ai-guide', guideSlug],
+    queryFn: async () => {
+      const res = await httpGet<GetAIGuideResponse>(
+        `/v1-get-ai-guide/${guideSlug}`,
+      );
+
+      return {
+        ...res,
+        html: await markdownToHtmlWithHighlighting(res.content),
+      };
+    },
+    enabled: !!guideSlug,
+  });
+}
+
+type AIGuideSuggestionsResponse = {
+  relatedTopics: string[];
+  deepDiveTopics: string[];
+  questions: string[];
+};
+
+export function aiGuideSuggestionsOptions(guideSlug?: string) {
+  return queryOptions({
+    queryKey: ['ai-guide-suggestions', guideSlug],
+    queryFn: () => {
+      return httpGet<AIGuideSuggestionsResponse>(
+        `/v1-ai-guide-suggestions/${guideSlug}`,
+      );
+    },
+    enabled: !!guideSlug && !!isLoggedIn(),
+  });
+}
+
+export type ListUserAIGuidesQuery = {
+  perPage?: string;
+  currPage?: string;
+  query?: string;
+};
+
+export type ListUserAIGuidesResponse = {
+  data: Omit<
+    AIGuideDocument,
+    'tokens' | 'relatedTopics' | 'deepDiveTopics' | 'questions'
+  >[];
+  totalCount: number;
+  totalPages: number;
+  currPage: number;
+  perPage: number;
+};
+
+export function listUserAIGuidesOptions(
+  params: ListUserAIGuidesQuery = {
+    perPage: '21',
+    currPage: '1',
+    query: '',
+  },
+) {
+  return queryOptions({
+    queryKey: ['ai-guides', params],
+    queryFn: async () => {
+      const response = await httpGet<ListUserAIGuidesResponse>(
+        `/v1-list-user-ai-guides`,
+        params,
+      );
+
+      return {
+        ...response,
+        data: response.data.map((guide) => {
+          const preview = guide.content.slice(0, 500);
+
+          return {
+            ...guide,
+            html: markdownToHtml(preview, false),
+          };
+        }),
+      };
+    },
+    enabled: !!isLoggedIn(),
+  });
+}