diff --git a/package.json b/package.json
index 306ae02..871f433 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,9 @@
     "prepare": "husky"
   },
   "dependencies": {
+    "@radix-ui/react-primitive": "^2.1.3",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-slot": "^1.2.3",
     "@react-spring/web": "^10.0.3",
     "@react-three/drei": "^10.7.6",
     "@react-three/fiber": "^9.3.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b54ded1..7bac4f8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -7,6 +7,15 @@ settings:
 importers:
   .:
     dependencies:
+      '@radix-ui/react-primitive':
+        specifier: ^2.1.3
+        version: 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-select':
+        specifier: ^2.2.6
+        version: 2.2.6(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-slot':
+        specifier: ^1.2.3
+        version: 1.2.3(@types/react@19.1.13)(react@19.1.0)
       '@react-spring/web':
         specifier: ^10.0.3
         version: 10.0.3(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
@@ -512,6 +521,33 @@ packages:
       }
     engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
 
+  '@floating-ui/core@1.7.3':
+    resolution:
+      {
+        integrity: sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==,
+      }
+
+  '@floating-ui/dom@1.7.4':
+    resolution:
+      {
+        integrity: sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==,
+      }
+
+  '@floating-ui/react-dom@2.1.6':
+    resolution:
+      {
+        integrity: sha512-4JX6rEatQEvlmgU80wZyq9RT96HZJa88q8hp0pBd+LrczeDI4o6uA2M+uvxngVHo4Ihr8uibXxH6+70zhAFrVw==,
+      }
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+
+  '@floating-ui/utils@0.2.10':
+    resolution:
+      {
+        integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==,
+      }
+
   '@humanfs/core@0.19.1':
     resolution:
       {
@@ -967,6 +1003,336 @@ packages:
       }
     engines: { node: '>=12.4.0' }
 
+  '@radix-ui/number@1.1.1':
+    resolution:
+      {
+        integrity: sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g==,
+      }
+
+  '@radix-ui/primitive@1.1.3':
+    resolution:
+      {
+        integrity: sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==,
+      }
+
+  '@radix-ui/react-arrow@1.1.7':
+    resolution:
+      {
+        integrity: sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==,
+      }
+    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:
+      '@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-compose-refs@1.1.2':
+    resolution:
+      {
+        integrity: sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==,
+      }
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-context@1.1.2':
+    resolution:
+      {
+        integrity: sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==,
+      }
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-direction@1.1.1':
+    resolution:
+      {
+        integrity: sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==,
+      }
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-dismissable-layer@1.1.11':
+    resolution:
+      {
+        integrity: sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg==,
+      }
+    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-focus-guards@1.1.3':
+    resolution:
+      {
+        integrity: sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw==,
+      }
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-focus-scope@1.1.7':
+    resolution:
+      {
+        integrity: sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw==,
+      }
+    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:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-popper@1.2.8':
+    resolution:
+      {
+        integrity: sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw==,
+      }
+    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-portal@1.1.9':
+    resolution:
+      {
+        integrity: sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==,
+      }
+    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-primitive@2.1.3':
+    resolution:
+      {
+        integrity: sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==,
+      }
+    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.6':
+    resolution:
+      {
+        integrity: sha512-I30RydO+bnn2PQztvo25tswPH+wFBjehVGtmagkU78yMdwTwVf12wnAOF+AeP8S2N8xD+5UPbGhkUfPyvT+mwQ==,
+      }
+    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:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-callback-ref@1.1.1':
+    resolution:
+      {
+        integrity: sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==,
+      }
+    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-controllable-state@1.2.2':
+    resolution:
+      {
+        integrity: sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==,
+      }
+    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-effect-event@0.0.2':
+    resolution:
+      {
+        integrity: sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==,
+      }
+    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-escape-keydown@1.1.1':
+    resolution:
+      {
+        integrity: sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==,
+      }
+    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:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@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:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-size@1.1.1':
+    resolution:
+      {
+        integrity: sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==,
+      }
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@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==,
+      }
+
   '@react-native/assets-registry@0.81.4':
     resolution:
       {
@@ -2176,6 +2542,13 @@ packages:
         integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==,
       }
 
+  aria-hidden@1.2.6:
+    resolution:
+      {
+        integrity: sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==,
+      }
+    engines: { node: '>=10' }
+
   aria-query@5.3.2:
     resolution:
       {
@@ -2264,12 +2637,6 @@ packages:
         integrity: sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==,
       }
 
-  asynckit@0.4.0:
-    resolution:
-      {
-        integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==,
-      }
-
   autoprefixer@10.4.21:
     resolution:
       {
@@ -2294,12 +2661,6 @@ packages:
       }
     engines: { node: '>=4' }
 
-  axios@1.12.2:
-    resolution:
-      {
-        integrity: sha512-vMJzPewAlRyOgxV2dU0Cuz2O8zzzx9VYtbJOaBgXFeLc4IV/Eg50n4LowmehOOR61S8ZMpc2K5Sa7g6A4jfkUw==,
-      }
-
   axobject-query@4.1.0:
     resolution:
       {
@@ -2579,13 +2940,6 @@ packages:
       }
     engines: { node: '>=12.5.0' }
 
-  combined-stream@1.0.8:
-    resolution:
-      {
-        integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==,
-      }
-    engines: { node: '>= 0.8' }
-
   commander@12.1.0:
     resolution:
       {
@@ -2720,13 +3074,6 @@ packages:
       }
     engines: { node: '>= 0.4' }
 
-  delayed-stream@1.0.0:
-    resolution:
-      {
-        integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==,
-      }
-    engines: { node: '>=0.4.0' }
-
   depd@2.0.0:
     resolution:
       {
@@ -2754,6 +3101,12 @@ packages:
       }
     engines: { node: '>=8' }
 
+  detect-node-es@1.1.0:
+    resolution:
+      {
+        integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==,
+      }
+
   doctrine@2.1.0:
     resolution:
       {
@@ -3294,31 +3647,12 @@ packages:
         integrity: sha512-3PYnM29RFXwvAN6Pc/scUfkI7RwhQ/xqyLUyPNlXUp9S40zI8nup9tUSrTLSVnWGBN38FNiGWbwZOB6uR4OGdw==,
       }
 
-  follow-redirects@1.15.11:
-    resolution:
-      {
-        integrity: sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==,
-      }
-    engines: { node: '>=4.0' }
-    peerDependencies:
-      debug: '*'
-    peerDependenciesMeta:
-      debug:
-        optional: true
-
-  for-each@0.3.5:
-    resolution:
-      {
-        integrity: sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==,
-      }
-    engines: { node: '>= 0.4' }
-
-  form-data@4.0.4:
+  for-each@0.3.5:
     resolution:
       {
-        integrity: sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==,
+        integrity: sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==,
       }
-    engines: { node: '>= 6' }
+    engines: { node: '>= 0.4' }
 
   fraction.js@4.3.7:
     resolution:
@@ -3404,6 +3738,13 @@ packages:
       }
     engines: { node: '>= 0.4' }
 
+  get-nonce@1.0.1:
+    resolution:
+      {
+        integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==,
+      }
+    engines: { node: '>=6' }
+
   get-package-type@0.1.0:
     resolution:
       {
@@ -5005,12 +5346,6 @@ packages:
         integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==,
       }
 
-  proxy-from-env@1.1.0:
-    resolution:
-      {
-        integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==,
-      }
-
   punycode@2.3.1:
     resolution:
       {
@@ -5163,6 +5498,32 @@ packages:
       }
     engines: { node: '>=0.10.0' }
 
+  react-remove-scroll-bar@2.3.8:
+    resolution:
+      {
+        integrity: sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==,
+      }
+    engines: { node: '>=10' }
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  react-remove-scroll@2.7.1:
+    resolution:
+      {
+        integrity: sha512-HpMh8+oahmIdOuS5aFKKY6Pyog+FNaZV/XyJOq7b4YFwsFHe5yYfdbIalI4k3vU2nSDql7YskmUseHsRrJqIPA==,
+      }
+    engines: { node: '>=10' }
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   react-spring@10.0.3:
     resolution:
       {
@@ -5172,6 +5533,19 @@ packages:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
 
+  react-style-singleton@2.2.3:
+    resolution:
+      {
+        integrity: sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==,
+      }
+    engines: { node: '>=10' }
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   react-tilt@1.0.2:
     resolution:
       {
@@ -6035,6 +6409,32 @@ packages:
         integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==,
       }
 
+  use-callback-ref@1.3.3:
+    resolution:
+      {
+        integrity: sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==,
+      }
+    engines: { node: '>=10' }
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  use-sidecar@1.1.3:
+    resolution:
+      {
+        integrity: sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==,
+      }
+    engines: { node: '>=10' }
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   use-sync-external-store@1.5.0:
     resolution:
       {
@@ -6517,6 +6917,23 @@ snapshots:
       '@eslint/core': 0.15.2
       levn: 0.4.1
 
+  '@floating-ui/core@1.7.3':
+    dependencies:
+      '@floating-ui/utils': 0.2.10
+
+  '@floating-ui/dom@1.7.4':
+    dependencies:
+      '@floating-ui/core': 1.7.3
+      '@floating-ui/utils': 0.2.10
+
+  '@floating-ui/react-dom@2.1.6(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@floating-ui/dom': 1.7.4
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+
+  '@floating-ui/utils@0.2.10': {}
+
   '@humanfs/core@0.19.1': {}
 
   '@humanfs/node@0.16.7':
@@ -6765,6 +7182,224 @@ snapshots:
 
   '@nolyfill/is-core-module@1.0.39': {}
 
+  '@radix-ui/number@1.1.1': {}
+
+  '@radix-ui/primitive@1.1.3': {}
+
+  '@radix-ui/react-arrow@1.1.7(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(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.9(@types/react@19.1.13))(@types/react@19.1.13)(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.13
+      '@types/react-dom': 19.1.9(@types/react@19.1.13)
+
+  '@radix-ui/react-collection@1.1.7(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(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.13)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.13)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.1.13)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.13
+      '@types/react-dom': 19.1.9(@types/react@19.1.13)
+
+  '@radix-ui/react-compose-refs@1.1.2(@types/react@19.1.13)(react@19.1.0)':
+    dependencies:
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.13
+
+  '@radix-ui/react-context@1.1.2(@types/react@19.1.13)(react@19.1.0)':
+    dependencies:
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.13
+
+  '@radix-ui/react-direction@1.1.1(@types/react@19.1.13)(react@19.1.0)':
+    dependencies:
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.13
+
+  '@radix-ui/react-dismissable-layer@1.1.11(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.13)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(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.13)(react@19.1.0)
+      '@radix-ui/react-use-escape-keydown': 1.1.1(@types/react@19.1.13)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.13
+      '@types/react-dom': 19.1.9(@types/react@19.1.13)
+
+  '@radix-ui/react-focus-guards@1.1.3(@types/react@19.1.13)(react@19.1.0)':
+    dependencies:
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.13
+
+  '@radix-ui/react-focus-scope@1.1.7(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(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.13)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(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.13)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.13
+      '@types/react-dom': 19.1.9(@types/react@19.1.13)
+
+  '@radix-ui/react-id@1.1.1(@types/react@19.1.13)(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.13)(react@19.1.0)
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.13
+
+  '@radix-ui/react-popper@1.2.8(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@floating-ui/react-dom': 2.1.6(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.9(@types/react@19.1.13))(@types/react@19.1.13)(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.13)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.13)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(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.13)(react@19.1.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.13)(react@19.1.0)
+      '@radix-ui/react-use-rect': 1.1.1(@types/react@19.1.13)(react@19.1.0)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@19.1.13)(react@19.1.0)
+      '@radix-ui/rect': 1.1.1
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.13
+      '@types/react-dom': 19.1.9(@types/react@19.1.13)
+
+  '@radix-ui/react-portal@1.1.9(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(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.9(@types/react@19.1.13))(@types/react@19.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.13)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.13
+      '@types/react-dom': 19.1.9(@types/react@19.1.13)
+
+  '@radix-ui/react-primitive@2.1.3(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.1.13)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.13
+      '@types/react-dom': 19.1.9(@types/react@19.1.13)
+
+  '@radix-ui/react-select@2.2.6(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(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.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(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.13)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.1.13)(react@19.1.0)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.1.13)(react@19.1.0)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.1.13)(react@19.1.0)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.1.13)(react@19.1.0)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(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.9(@types/react@19.1.13))(@types/react@19.1.13)(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.9(@types/react@19.1.13))(@types/react@19.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.1.13)(react@19.1.0)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.13)(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.13)(react@19.1.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.13)(react@19.1.0)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.1.13)(react@19.1.0)
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(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.13)(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.13
+      '@types/react-dom': 19.1.9(@types/react@19.1.13)
+
+  '@radix-ui/react-slot@1.2.3(@types/react@19.1.13)(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.13)(react@19.1.0)
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.13
+
+  '@radix-ui/react-use-callback-ref@1.1.1(@types/react@19.1.13)(react@19.1.0)':
+    dependencies:
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.13
+
+  '@radix-ui/react-use-controllable-state@1.2.2(@types/react@19.1.13)(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@19.1.13)(react@19.1.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.13)(react@19.1.0)
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.13
+
+  '@radix-ui/react-use-effect-event@0.0.2(@types/react@19.1.13)(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.13)(react@19.1.0)
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.13
+
+  '@radix-ui/react-use-escape-keydown@1.1.1(@types/react@19.1.13)(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.13)(react@19.1.0)
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.13
+
+  '@radix-ui/react-use-layout-effect@1.1.1(@types/react@19.1.13)(react@19.1.0)':
+    dependencies:
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.13
+
+  '@radix-ui/react-use-previous@1.1.1(@types/react@19.1.13)(react@19.1.0)':
+    dependencies:
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.13
+
+  '@radix-ui/react-use-rect@1.1.1(@types/react@19.1.13)(react@19.1.0)':
+    dependencies:
+      '@radix-ui/rect': 1.1.1
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.13
+
+  '@radix-ui/react-use-size@1.1.1(@types/react@19.1.13)(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.13)(react@19.1.0)
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.1.13
+
+  '@radix-ui/react-visually-hidden@1.2.3(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(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.9(@types/react@19.1.13))(@types/react@19.1.13)(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.13
+      '@types/react-dom': 19.1.9(@types/react@19.1.13)
+
+  '@radix-ui/rect@1.1.1': {}
+
   '@react-native/assets-registry@0.81.4': {}
 
   '@react-native/codegen@0.81.4(@babel/core@7.28.4)':
@@ -7590,6 +8225,10 @@ snapshots:
 
   argparse@2.0.1: {}
 
+  aria-hidden@1.2.6:
+    dependencies:
+      tslib: 2.8.1
+
   aria-query@5.3.2: {}
 
   array-buffer-byte-length@1.0.2:
@@ -7667,8 +8306,6 @@ snapshots:
 
   async-limiter@1.0.1: {}
 
-  asynckit@0.4.0: {}
-
   autoprefixer@10.4.21(postcss@8.5.6):
     dependencies:
       browserslist: 4.26.0
@@ -7685,14 +8322,6 @@ snapshots:
 
   axe-core@4.10.3: {}
 
-  axios@1.12.2:
-    dependencies:
-      follow-redirects: 1.15.11
-      form-data: 4.0.4
-      proxy-from-env: 1.1.0
-    transitivePeerDependencies:
-      - debug
-
   axobject-query@4.1.0: {}
 
   babel-jest@29.7.0(@babel/core@7.28.4):
@@ -7890,10 +8519,6 @@ snapshots:
       color-string: 1.9.1
     optional: true
 
-  combined-stream@1.0.8:
-    dependencies:
-      delayed-stream: 1.0.0
-
   commander@12.1.0: {}
 
   commander@2.20.3: {}
@@ -7969,8 +8594,6 @@ snapshots:
       has-property-descriptors: 1.0.2
       object-keys: 1.1.1
 
-  delayed-stream@1.0.0: {}
-
   depd@2.0.0: {}
 
   destroy@1.2.0: {}
@@ -7981,6 +8604,8 @@ snapshots:
 
   detect-libc@2.0.4: {}
 
+  detect-node-es@1.1.0: {}
+
   doctrine@2.1.0:
     dependencies:
       esutils: 2.0.3
@@ -8446,20 +9071,10 @@ snapshots:
 
   flow-enums-runtime@0.0.6: {}
 
-  follow-redirects@1.15.11: {}
-
   for-each@0.3.5:
     dependencies:
       is-callable: 1.2.7
 
-  form-data@4.0.4:
-    dependencies:
-      asynckit: 0.4.0
-      combined-stream: 1.0.8
-      es-set-tostringtag: 2.1.0
-      hasown: 2.0.2
-      mime-types: 2.1.35
-
   fraction.js@4.3.7: {}
 
   framer-motion@12.23.14(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
@@ -8508,6 +9123,8 @@ snapshots:
       hasown: 2.0.2
       math-intrinsics: 1.1.0
 
+  get-nonce@1.0.1: {}
+
   get-package-type@0.1.0: {}
 
   get-proto@1.0.1:
@@ -9479,8 +10096,6 @@ snapshots:
       object-assign: 4.1.1
       react-is: 16.13.1
 
-  proxy-from-env@1.1.0: {}
-
   punycode@2.3.1: {}
 
   qs@6.14.0:
@@ -9609,6 +10224,25 @@ snapshots:
 
   react-refresh@0.14.2: {}
 
+  react-remove-scroll-bar@2.3.8(@types/react@19.1.13)(react@19.1.0):
+    dependencies:
+      react: 19.1.0
+      react-style-singleton: 2.2.3(@types/react@19.1.13)(react@19.1.0)
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.1.13
+
+  react-remove-scroll@2.7.1(@types/react@19.1.13)(react@19.1.0):
+    dependencies:
+      react: 19.1.0
+      react-remove-scroll-bar: 2.3.8(@types/react@19.1.13)(react@19.1.0)
+      react-style-singleton: 2.2.3(@types/react@19.1.13)(react@19.1.0)
+      tslib: 2.8.1
+      use-callback-ref: 1.3.3(@types/react@19.1.13)(react@19.1.0)
+      use-sidecar: 1.1.3(@types/react@19.1.13)(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.1.13
+
   react-spring@10.0.3(@react-three/fiber@9.3.0(@types/react@19.1.13)(immer@10.1.3)(react-dom@19.1.0(react@19.1.0))(react-native@0.81.4(@babel/core@7.28.4)(@types/react@19.1.13)(react@19.1.0))(react@19.1.0)(three@0.180.0))(konva@10.0.2)(react-dom@19.1.0(react@19.1.0))(react-konva@19.0.10(@types/react@19.1.13)(konva@10.0.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-native@0.81.4(@babel/core@7.28.4)(@types/react@19.1.13)(react@19.1.0))(react-zdog@1.2.2)(react@19.1.0)(three@0.180.0)(zdog@1.1.3):
     dependencies:
       '@react-spring/core': 10.0.3(react@19.1.0)
@@ -9628,6 +10262,14 @@ snapshots:
       - three
       - zdog
 
+  react-style-singleton@2.2.3(@types/react@19.1.13)(react@19.1.0):
+    dependencies:
+      get-nonce: 1.0.1
+      react: 19.1.0
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.1.13
+
   react-tilt@1.0.2(@types/react-dom@19.1.9(@types/react@19.1.13))(@types/react@19.1.13)(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
     dependencies:
       '@types/react': 19.1.13
@@ -10230,6 +10872,21 @@ snapshots:
     dependencies:
       punycode: 2.3.1
 
+  use-callback-ref@1.3.3(@types/react@19.1.13)(react@19.1.0):
+    dependencies:
+      react: 19.1.0
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.1.13
+
+  use-sidecar@1.1.3(@types/react@19.1.13)(react@19.1.0):
+    dependencies:
+      detect-node-es: 1.1.0
+      react: 19.1.0
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.1.13
+
   use-sync-external-store@1.5.0(react@19.1.0):
     dependencies:
       react: 19.1.0
diff --git a/src/app/compare/CompareItemCard.tsx b/src/app/compare/CompareItemCard.tsx
new file mode 100644
index 0000000..aee8533
--- /dev/null
+++ b/src/app/compare/CompareItemCard.tsx
@@ -0,0 +1,166 @@
+'use client';
+
+import React from 'react';
+import Image from 'next/image';
+import { ProductType } from '@/types/CategoryType';
+import CloseComponent from '@/components/UI/ShoppingCartIcons/CloseComponent';
+import { toast } from 'sonner';
+import { removeFromCompareByKey } from '@/lib/features/compare/compareSlice';
+import { useDispatch } from 'react-redux';
+import Link from 'next/link';
+import { motion } from 'framer-motion';
+import AddOrNavToCartButton from '@/components/UI/AddOrNavToCartButton';
+import FavoriteButton from '@/components/Products/FavoriteButton';
+import { mapDetailsToSummary } from '@/lib/mappers';
+
+interface CompareItemCardProps {
+  product: ProductType;
+  index?: number;
+  disableOnce?: boolean;
+  showSpecs?: boolean;
+  differingSpecs?: ProductType[];
+}
+
+const CompareItemCard: React.FC<CompareItemCardProps> = ({
+  product,
+  index = 0,
+  disableOnce = false,
+  showSpecs,
+  differingSpecs,
+}) => {
+  const imgSrc = `/${product.images?.[0] || 'placeholder.png'}`;
+
+  const dispatch = useDispatch();
+
+  const specList = [
+    { key: 'capacity', label: 'Capacity' },
+    { key: 'capacityAvailable', label: 'Capacity Available' },
+    { key: 'screen', label: 'Screen' },
+    { key: 'resolution', label: 'Resolution' },
+    { key: 'processor', label: 'Processor' },
+    { key: 'ram', label: 'RAM' },
+    { key: 'camera', label: 'Camera' },
+    { key: 'zoom', label: 'Zoom' },
+    { key: 'cell', label: 'Cell' },
+  ] as const;
+
+  const handleRemove = () => {
+    dispatch(
+      removeFromCompareByKey({
+        id: product.id,
+        color: product.color,
+        capacity: product.capacity,
+      }),
+    );
+    toast(`${product.name} removed from compare`);
+  };
+
+  const differingKeys = React.useMemo(() => {
+    if (!differingSpecs || differingSpecs.length < 2) return [];
+
+    return specList
+      .map((s) => s.key)
+      .filter((key) => {
+        const values = differingSpecs.map(
+          (item) => item[key as keyof ProductType],
+        );
+        return new Set(values.map(String)).size > 1;
+      });
+  }, [differingSpecs]);
+
+  const specsToShow =
+    showSpecs ? specList : (
+      specList.filter((s) => differingKeys.includes(s.key))
+    );
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 50 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      transition={{
+        duration: 0.6,
+        ease: [0.42, 0, 0.58, 1],
+        delay: index < 4 ? index * 0.15 : 0,
+      }}
+      viewport={{ once: !disableOnce, amount: 0.3 }}
+      className=" box-border
+        border border-light-theme-border-color
+        rounded-2xl
+        dark:bg-item-bg dark:border-dark-theme-border-color
+        transition-shadow duration-700
+        hover:shadow-[0_3px_13px_0_rgba(23,32,49,0.4)]
+        flex flex-col justify-center
+      "
+    >
+      <button
+        className="mt-3 mr-3 flex self-end justify-self-center cursor-pointer
+        transition-transform duration-300 hover:scale-[1.4]"
+        onClick={handleRemove}
+      >
+        <CloseComponent />
+      </button>
+      <Link
+        href={`/products/${product.id}`}
+        className="relative flex justify-center h-[130px] sm:h-[196px] "
+      >
+        <Image
+          src={imgSrc}
+          style={{ objectFit: 'contain' }}
+          width={208}
+          height={196}
+          alt={product.name}
+          className="transition-transform duration-600 ease-in-out hover:scale-110"
+        />
+      </Link>
+      <h3 className="h-[42px] px-5 font-semibold text-[14px] leading-[21px] text-light-theme-text dark:text-text-light pt-[24px]">
+        <Link
+          href={`/products/${product.id}`}
+          className="hover:underline hover:text-light-theme-btn-product-bg dark:hover:text-dark-theme-btn-hover"
+        >
+          {product.name}
+        </Link>
+      </h3>
+      <div className="my-2 pt-[21px] px-5">
+        <div className="flex gap-[8px]">
+          <p className="font-extrabold text-[22px] leading-snug text-light-theme-text dark:text-text-light">
+            ${product.priceDiscount}
+          </p>
+          <p className="font-semibold text-[22px] leading-snug text-light-theme-text-menu dark:text-text-gray line-through">
+            ${product.priceRegular}
+          </p>
+        </div>
+        <div className="border-b border-zinc-700 mt-2"></div>
+      </div>
+      <div className="grid grid-cols-1 text-sm">
+        {specsToShow.map((spec) => {
+          const raw = product[spec.key];
+          const value =
+            Array.isArray(raw) ? raw.join(' | ')
+            : raw !== undefined && raw !== null ? String(raw)
+            : '-';
+
+          return (
+            <div
+              key={spec.key}
+              className="flex  items-center py-1 px-5"
+            >
+              <span className="w-[100px] text-light-theme-text-menu dark:text-text-gray">
+                {spec.label}
+              </span>
+              <span className="flex-1 text-right text-light-theme-text dark:text-text-light font-bold text-[12px]">
+                {value}
+              </span>
+            </div>
+          );
+        })}
+      </div>
+      <div className="flex items-center justify-center gap-4 my-4 mx-5">
+        <AddOrNavToCartButton product={mapDetailsToSummary(product)} />
+
+        <FavoriteButton product={mapDetailsToSummary(product)} />
+      </div>
+    </motion.div>
+  );
+};
+
+export default CompareItemCard;
diff --git a/src/app/compare/CompareList.tsx b/src/app/compare/CompareList.tsx
new file mode 100644
index 0000000..7a0a0e7
--- /dev/null
+++ b/src/app/compare/CompareList.tsx
@@ -0,0 +1,173 @@
+'use client';
+
+import React, { useRef, useState, useEffect } from 'react';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Navigation } from 'swiper/modules';
+import { motion } from 'framer-motion';
+
+import 'swiper/css';
+import 'swiper/css/navigation';
+import CompareItemCard from './CompareItemCard';
+import { useSelector } from 'react-redux';
+import { ProductType } from '@/types/CategoryType';
+import { RootState } from '@/lib/store';
+
+interface CompareSliderProps {
+  title?: string;
+  showSpecs: boolean;
+}
+
+export default function CompareList({ title, showSpecs }: CompareSliderProps) {
+  const prevRef = useRef<HTMLButtonElement | null>(null);
+  const nextRef = useRef<HTMLButtonElement | null>(null);
+  const [isBeginning, setIsBeginning] = useState(true);
+  const [isEnd, setIsEnd] = useState(false);
+  const [windowWidth, setWindowWidth] = useState(0);
+
+  const compareItems = useSelector(
+    (state: RootState) => state.persisted.compare.items,
+  ) as ProductType[];
+
+  const filteredItems =
+    title ?
+      compareItems.filter((item: ProductType) => item.category === title)
+    : compareItems;
+
+  useEffect(() => {
+    setWindowWidth(window.innerWidth);
+    const handleResize = () => setWindowWidth(window.innerWidth);
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  const getSlidesPerView = (width: number) => {
+    if (width >= 1200) return 4;
+    if (width >= 990) return 3;
+    if (width >= 640) return 2;
+    return 1;
+  };
+
+  const shouldShowNavButtons =
+    filteredItems.length > getSlidesPerView(windowWidth);
+
+  if (filteredItems.length === 0) return null;
+
+  const normalizeTitle =
+    title!.slice(0, 1).toUpperCase() + title!.slice(1).toLowerCase();
+
+  return (
+    <div className="w-full relative pb-10 sm:pb-12 lg:pb-16">
+      <div className="flex flex-row justify-between pr-7 pb-4 text-light-theme-text dark:text-dark-theme-text gap-10">
+        <motion.h2
+          className="font-extrabold text-[22px] sm:text-[32px] sm:leading-[41px] leading-[1.4] sm:tracking-[-0.01em] tracking-normal"
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          viewport={{ once: true, amount: 0.5 }}
+          transition={{ duration: 0.3, ease: [0.42, 0, 0.58, 1] }}
+        >
+          {normalizeTitle}
+        </motion.h2>
+
+        <div className="flex flex-row gap-6">
+          {shouldShowNavButtons && (
+            <>
+              <button
+                ref={prevRef}
+                className={`group p-2 flex justify-center items-center border border-light-theme-border-active
+                  dark:border-product-add-btn-selected dark:bg-product-add-btn-selected dark:hover:border-text-gray
+                  dark:hover:bg-dark-theme-border-hover w-8 h-8 rounded-full hover:border-light-theme-text 
+                  ${isBeginning ? 'cursor-not-allowed opacity-20' : 'cursor-pointer '}`}
+                disabled={isBeginning}
+              >
+                <svg
+                  className="h-5 w-5 text-light-theme-text dark:text-dark-theme-text"
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 16 16"
+                  fill="none"
+                >
+                  <path
+                    d="M10.0002 11.9999L6 7.99971L10.0025 3.99719"
+                    stroke="currentColor"
+                    strokeWidth="1.6"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                </svg>
+              </button>
+
+              <button
+                ref={nextRef}
+                className={`group p-2 flex justify-center items-center border border-light-theme-border-active
+                  dark:border-product-add-btn-selected dark:bg-product-add-btn-selected dark:hover:border-text-gray
+                  dark:hover:bg-dark-theme-border-hover w-8 h-8 rounded-full hover:border-light-theme-text 
+                  ${isEnd ? 'cursor-not-allowed opacity-20' : 'cursor-pointer '}`}
+                disabled={isEnd}
+              >
+                <svg
+                  className="h-5 w-5 text-light-theme-text dark:text-dark-theme-text"
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 16 16"
+                  fill="none"
+                >
+                  <path
+                    d="M5.99984 4.00012L10 8.00029L5.99748 12.0028"
+                    stroke="currentColor"
+                    strokeWidth="1.6"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                </svg>
+              </button>
+            </>
+          )}
+        </div>
+      </div>
+
+      <div className="w-full">
+        <Swiper
+          modules={[Navigation]}
+          spaceBetween={30}
+          loop={false}
+          onBeforeInit={(swiper) => {
+            if (prevRef.current && nextRef.current) {
+              // @ts-expect-error: Swiper types don't know about refs
+              swiper.params.navigation.prevEl = prevRef.current;
+              // @ts-expect-error: Swiper types don't know about refs
+              swiper.params.navigation.nextEl = nextRef.current;
+            }
+          }}
+          onInit={(swiper) => {
+            swiper.navigation.init();
+            swiper.navigation.update();
+            setIsBeginning(swiper.isBeginning);
+            setIsEnd(swiper.isEnd);
+          }}
+          onSlideChange={(swiper) => {
+            setIsBeginning(swiper.isBeginning);
+            setIsEnd(swiper.isEnd);
+          }}
+          breakpoints={{
+            0: { slidesPerView: 1 },
+            640: { slidesPerView: 2 },
+            990: { slidesPerView: 3 },
+            1200: { slidesPerView: 4 },
+          }}
+          className="multiple-slide-carousel"
+        >
+          {filteredItems.map((product, idx) => (
+            <SwiperSlide
+              key={`${product.id}-${product.color}-${product.capacity}`}
+            >
+              <CompareItemCard
+                product={product}
+                index={idx}
+                showSpecs={showSpecs}
+                differingSpecs={filteredItems}
+              />
+            </SwiperSlide>
+          ))}
+        </Swiper>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/compare/ComparePage.tsx b/src/app/compare/ComparePage.tsx
new file mode 100644
index 0000000..a1cc2a1
--- /dev/null
+++ b/src/app/compare/ComparePage.tsx
@@ -0,0 +1,176 @@
+'use client';
+
+import React, { useMemo, useState, useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { RootState } from '@/lib/store';
+import { ProductType } from '@/types/CategoryType';
+import { CategoryName } from '@/types/CategoryName';
+import SelectArrow from '@/components/UI/SelectArrow';
+import {
+  clearCompare,
+  clearCompareByCategory,
+} from '@/lib/features/compare/compareSlice';
+import CategoryHeader from '@/components/UI/CategoryHeader';
+import ActionButton from '@/components/UI/ActionButton';
+import CompareList from './CompareList';
+
+const categoryLabels: Partial<Record<CategoryName, string>> = {
+  [CategoryName.Phones]: 'Phones',
+  [CategoryName.Tablets]: 'Tablets',
+  [CategoryName.Accessories]: 'Accessories',
+};
+
+const ComparePage = () => {
+  const [showSpecs, setShowSpecs] = useState(true);
+  const compareItems = useSelector(
+    (state: RootState) => state.persisted.compare.items,
+  );
+
+  const [mounted, setMounted] = useState(false);
+  const [selectedCategory, setSelectedCategory] = useState<CategoryName | ''>(
+    '',
+  );
+
+  const dispatch = useDispatch();
+
+  useEffect(() => setMounted(true), []);
+
+  const itemsByCategory = useMemo(() => {
+    return compareItems.reduce<Record<CategoryName, ProductType[]>>(
+      (acc, item) => {
+        if (!acc[item.category]) acc[item.category] = [];
+        acc[item.category].push(item);
+        return acc;
+      },
+      {} as Record<CategoryName, ProductType[]>,
+    );
+  }, [compareItems]);
+
+  const availableCategories = Object.keys(itemsByCategory).filter(
+    (cat) => itemsByCategory[cat as CategoryName].length > 0,
+  ) as CategoryName[];
+
+  useEffect(() => {
+    if (!selectedCategory && availableCategories.length > 0) {
+      setSelectedCategory(availableCategories[0]);
+    } else if (
+      selectedCategory &&
+      (!itemsByCategory[selectedCategory] ||
+        itemsByCategory[selectedCategory].length === 0)
+    ) {
+      setSelectedCategory(availableCategories[0] || '');
+    }
+  }, [selectedCategory, itemsByCategory, availableCategories]);
+
+  if (!mounted) return null;
+
+  const productTypes =
+    selectedCategory && itemsByCategory[selectedCategory] ?
+      itemsByCategory[selectedCategory]
+    : [];
+
+  const hasProducts = productTypes.length > 0;
+  if (!hasProducts) {
+    return (
+      <div className=" mx-4 sm:mx-6 lg-max:mx-8 flex justify-center items-center flex-col py-20 dark:bg-dark-theme-bg">
+        <h1 className="text-[32px] sm:text-[48px] font-[800] text-light-theme-text dark:text-dark-theme-text mb-4">
+          Your compare list is empty
+        </h1>
+        <p className="text-light-theme-text-menu dark:text-text-gray mb-8">
+          Looks like you haven&apos;t added anything yet.
+        </p>
+        <ActionButton name="Start Shopping" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="pt-6 px-4 sm:px-8 ">
+      <CategoryHeader
+        categoryName={CategoryName.Compare}
+        total={productTypes.length}
+      />
+
+      {hasProducts && (
+        <>
+          {/* Вибір категорії */}
+          <div className="flex items-center mb-2 sm:mb-6 justify-between ">
+            <div className="relative w-34 sm:w-47 lg:w-44 mt-4">
+              <label className="block py-2 font-[700] text-[12px] text-light-theme-text-menu dark:text-text-gray">
+                Choose category
+              </label>
+              <select
+                value={selectedCategory}
+                onChange={(e) =>
+                  setSelectedCategory(e.target.value as CategoryName)
+                }
+                className="w-full appearance-none bg-light-theme-bg-dark
+                dark:bg-dark-theme-btn-selected px-4 py-2 pr-10
+                font-[600] text-[14px] leading-[21px]
+                text-light-theme-text dark:text-text-light border
+                border-light-theme-border-active
+                focus:outline-none focus:ring-2 focus:ring-light-theme-border-active
+                dark:border-dark-theme-btn-selected"
+              >
+                {availableCategories.map((category) => (
+                  <option
+                    key={category}
+                    value={category}
+                  >
+                    {categoryLabels[category] || category}
+                  </option>
+                ))}
+              </select>
+              <SelectArrow isCompare />
+            </div>
+
+            <div className="grid grid-cols-1 sm:grid-cols-4 gap-2 sm:gap-4 mt-12">
+              {[
+                {
+                  label: 'Show All',
+                  value: true,
+                  onClick: () => setShowSpecs(true),
+                  isToggle: true,
+                },
+                {
+                  label: 'Show Differences',
+                  value: false,
+                  onClick: () => setShowSpecs(false),
+                  isToggle: true,
+                },
+                { label: 'Clear all', onClick: () => dispatch(clearCompare()) },
+                {
+                  label: 'Clear category',
+                  onClick: () =>
+                    dispatch(clearCompareByCategory(selectedCategory)),
+                },
+              ].map((btn) => (
+                <button
+                  key={btn.label}
+                  onClick={btn.onClick}
+                  className={`flex justify-center items-center w-20 h-10 text-sm leading-[21px] rounded-[6px]
+        transition-transform duration-500 hover:shadow-[0_0_13px_0_rgba(23,32,49,0.4)] hover:cursor-pointer hover:scale-110
+        ${
+          btn.isToggle ?
+            showSpecs === btn.value ?
+              'bg-light-theme-btn-product-bg text-white dark:bg-product-add-btn dark:text-text-light'
+            : 'border border-light-theme-border-active dark:border-product-add-btn-selected text-light-theme-text dark:text-text-light'
+          : 'bg-light-theme-btn-product-bg text-white dark:bg-product-add-btn dark:text-text-light'
+        }`}
+                >
+                  {btn.label}
+                </button>
+              ))}
+            </div>
+          </div>
+          <CompareList
+            title={selectedCategory}
+            showSpecs={showSpecs}
+          />
+        </>
+      )}
+    </div>
+  );
+};
+
+export default ComparePage;
diff --git a/src/app/compare/page.tsx b/src/app/compare/page.tsx
new file mode 100644
index 0000000..1e4c77f
--- /dev/null
+++ b/src/app/compare/page.tsx
@@ -0,0 +1,7 @@
+import ComparePage from './ComparePage';
+
+const page = () => {
+  return <ComparePage />;
+};
+
+export default page;
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index cb45d41..7bdf40d 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -65,10 +65,7 @@ export default function RootLayout({
               },
             }}
           />
-          <div
-            className="sticky bg-white top-0 z-50 w-full 
-          border-b border-light-theme-border-color dark:border-dark-theme-border-color dark:bg-dark-theme-bg "
-          >
+          <div className="sticky bg-white top-0 z-50 w-full  dark:bg-dark-theme-bg ">
             <div className="max-w-[1920px] mx-auto">
               <NavBar />
             </div>
diff --git a/src/components/Layout/NavBar/HydradetIcons.tsx b/src/components/Layout/NavBar/HydradetIcons.tsx
index 6508eeb..fb2c771 100644
--- a/src/components/Layout/NavBar/HydradetIcons.tsx
+++ b/src/components/Layout/NavBar/HydradetIcons.tsx
@@ -5,6 +5,8 @@ import { HydrationProvider } from '@/lib/HydrationProvider';
 import { IconsSkeleton } from './IconsSkeleton';
 import FavouritesLink from '@/components/UI/NavBar/FavouritesLink';
 import ShoppingCartLink from '@/components/UI/NavBar/ShoppingCartLink';
+import ThemeSwitcher from '@/components/UI/ThemeSwitcher';
+import CompareLink from '@/components/UI/NavBar/CompareLink';
 
 type IconsProps = {
   onClose?: () => void;
@@ -14,6 +16,35 @@ export function HydratedIcons({ onClose }: IconsProps) {
   return (
     <HydrationProvider loading={<IconsSkeleton />}>
       {/* Цей блок буде показано ПІСЛЯ гідратації */}
+
+      <div
+        className="border-light-theme-border-color dark:border-dark-theme-border-color 
+          flex h-16 w-full items-center justify-between border-t
+        "
+      >
+        <div
+          className="relative after:bg-light-theme-text-hover dark:after:bg-dark-theme-text
+          after:absolute after:right-0 after:bottom-0 after:left-0 after:h-[2px] after:origin-bottom after:scale-x-0 after:transition-transform after:duration-200
+        hover:after:scale-x-100
+          w-full h-16 flex justify-center items-center 
+          border-r border-light-theme-border-color dark:border-dark-theme-border-color"
+        >
+          <ThemeSwitcher />
+        </div>
+
+        <div
+          className="w-full h-16 flex justify-center items-center
+          relative after:bg-light-theme-text-hover dark:after:bg-dark-theme-text
+          after:absolute after:right-0 after:bottom-0 after:left-0 after:h-[2px] after:origin-bottom after:scale-x-0 after:transition-transform after:duration-200
+        hover:after:scale-x-100
+          "
+        >
+          <CompareLink
+            isBurger
+            onClose={onClose}
+          />
+        </div>
+      </div>
       <div className="flex h-16 items-center justify-between">
         <FavouritesLink
           isBurger
diff --git a/src/components/Layout/NavBar/MenuHamburger.tsx b/src/components/Layout/NavBar/MenuHamburger.tsx
index 6099be3..c5d2deb 100644
--- a/src/components/Layout/NavBar/MenuHamburger.tsx
+++ b/src/components/Layout/NavBar/MenuHamburger.tsx
@@ -5,6 +5,7 @@ import ThemeSwitcher from '@/components/UI/ThemeSwitcher';
 // import FavouritesLink from '@/components/UI/NavBar/FavouritesLink';
 import CategoriesMenu from '@/components/UI/NavBar/CategoriesMenu';
 import dynamic from 'next/dynamic';
+import CompareLink from '@/components/UI/NavBar/CompareLink';
 // import { HydratedIcons } from './HydradetIcons';
 
 const HydratedIcons = dynamic(
@@ -30,27 +31,7 @@ const MenuHamburger: React.FC<Props> = ({ onClose }) => {
         direction="col"
       />
       <div>
-        <div
-          className="border-light-theme-border-color dark:border-dark-theme-border-color 
-        after:bg-light-theme-text-hover dark:after:bg-dark-theme-text
-        relative flex h-16 w-full items-center justify-center border-t
-        after:absolute after:right-0 after:bottom-0 after:left-0 after:h-[2px] after:origin-bottom after:scale-x-0 after:transition-transform after:duration-200
-        hover:after:scale-x-100"
-        >
-          <ThemeSwitcher />
-        </div>
         <HydratedIcons onClose={onClose} />
-
-        {/* <div className="flex h-16 items-center justify-between">
-          <FavouritesLink
-            isBurger
-            onClose={onClose}
-          />
-          <ShoppingCartLink
-            fullWidth
-            onClose={onClose}
-          />
-        </div> */}
       </div>
     </div>
   );
diff --git a/src/components/Layout/NavBar/NavBar.tsx b/src/components/Layout/NavBar/NavBar.tsx
index 41136b6..6c313d1 100644
--- a/src/components/Layout/NavBar/NavBar.tsx
+++ b/src/components/Layout/NavBar/NavBar.tsx
@@ -31,7 +31,7 @@ const NavBar: React.FC = () => {
 
   return (
     <>
-      <nav className="h-12 flex justify-between pl-4 sm:hidden">
+      <nav className="h-12 flex justify-between pl-4 sm:hidden border-b border-light-theme-border-color dark:border-dark-theme-border-color">
         <Logo placement="navbar" />
         <div
           className="relative w-8 content-center mx-4 pl-4 h-full border-l border-light-theme-border-color dark:border-dark-theme-border-color
@@ -39,7 +39,7 @@ const NavBar: React.FC = () => {
             after:absolute after:left-0 after:right-0 after:h-[2px] 
             after:bg-light-theme-text-hover after:bottom-[0] after:w-[48px]
             after:scale-x-0 hover:after:scale-x-100 after:transition-transform after:duration-200  
-            dark:after:bg-dark-theme-text"
+            dark:after:bg-dark-theme-text "
         >
           <HamburgerComponent
             opened={opened}
@@ -49,7 +49,7 @@ const NavBar: React.FC = () => {
         {opened && <MenuHamburger onClose={() => setOpened(false)} />}
       </nav>
 
-      <nav className="h-12 lg-max:h-16 hidden sm:flex flex-row items-center pl-4 lg-max:pl-6 dark:bg-dark-theme-bg ">
+      <nav className="h-12 lg-max:h-16 hidden sm:flex flex-row items-center pl-4 lg-max:pl-6 dark:bg-dark-theme-bg border-b border-light-theme-border-color dark:border-dark-theme-border-color">
         <Logo placement="navbar" />
         <div className="dark:bg-dark-theme-bg">
           <CategoriesMenu direction="row" />
@@ -57,10 +57,7 @@ const NavBar: React.FC = () => {
         <div className="h-12 lg:h-16 flex flex-row ml-auto ">
           {NavBarRightComponents.map(({ id, element }) => {
             // TODO: must be remove to separate component in future
-            const isActive =
-              pathname === `/${id}` ?
-                'after:absolute after:left-0 after:right-0 after:h-[3px] after:bg-light-theme-text-hover after:bottom-0 after:scale-x-100'
-              : '';
+            const isActive = pathname === `/${id}`;
 
             return (
               <div
@@ -70,7 +67,7 @@ const NavBar: React.FC = () => {
               after:absolute after:left-0 after:right-0 after:h-[3px] 
               after:bg-light-theme-text-hover after:bottom-0 
               after:scale-x-0 hover:after:scale-x-100 after:transition-transform after:duration-200  
-              dark:after:bg-dark-theme-text ${isActive}`}
+              dark:after:bg-dark-theme-text ${isActive && 'after:absolute after:left-0 after:right-0 after:h-[3px] after:bg-light-theme-text-hover after:bottom-0 after:scale-x-100'}`}
               >
                 {element}
               </div>
diff --git a/src/components/Products/AddToCompareButton.tsx b/src/components/Products/AddToCompareButton.tsx
new file mode 100644
index 0000000..292c0f1
--- /dev/null
+++ b/src/components/Products/AddToCompareButton.tsx
@@ -0,0 +1,94 @@
+'use client';
+
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import {
+  addToCompare,
+  removeFromCompareByKey,
+} from '@/lib/features/compare/compareSlice';
+import { RootState } from '@/lib/store';
+import Image from 'next/image';
+import ScaleBlack from '@/components/UI/icons/Scale(Black).svg';
+import ScaleGrey from '@/components/UI/icons/Scale(Grey).svg';
+import ScaleYellow from '@/components/UI/icons/Scale(Yellow).svg';
+import { toast } from 'sonner';
+import { ProductType } from '@/types/CategoryType';
+
+interface AddToCompareButtonProps {
+  product: ProductType;
+  onClick?: () => void;
+  isCart?: boolean;
+}
+
+const AddToCompareButton: React.FC<AddToCompareButtonProps> = ({
+  product,
+  onClick,
+  isCart,
+}) => {
+  const dispatch = useDispatch();
+
+  const existsInCompare = useSelector((state: RootState) =>
+    state.persisted.compare.items.some(
+      (i) =>
+        i.id === product.id &&
+        i.color === product.color &&
+        i.capacity === product.capacity,
+    ),
+  );
+
+  const handleToggle = () => {
+    if (existsInCompare) {
+      dispatch(
+        removeFromCompareByKey({
+          id: product.id,
+          color: product.color,
+          capacity: product.capacity,
+        }),
+      );
+      toast(`${product.name} removed from compare`);
+    } else {
+      dispatch(addToCompare(product));
+      toast(`${product.name} added to compare`);
+    }
+    onClick?.();
+  };
+
+  const Icon = existsInCompare ? ScaleYellow : ScaleBlack;
+  const IconDark = existsInCompare ? ScaleYellow : ScaleGrey;
+
+  return (
+    <button
+      onClick={handleToggle}
+      className={
+        !isCart ?
+          'bg-white dark:bg-gray-700 p-2.5 rounded-full border border-light-theme-border-active dark:border-none hover:border-light-theme-text hover:cursor-pointer dark:hover:bg-dark-theme-border-hover dark:hover:border-dark-theme-border-color flex items-center justify-center'
+        : '  transition-all hover:scale-110 cursor-pointer'
+      }
+    >
+      <Image
+        src={Icon}
+        width={isCart ? 25 : 30}
+        height={isCart ? 25 : 30}
+        alt={existsInCompare ? 'Remove from compare' : 'Add to compare'}
+        className={
+          !isCart ?
+            'dark:hidden transition-all duration-300 hover:scale-[1.2]'
+          : 'dark:hidden'
+        }
+      />
+      <Image
+        src={IconDark}
+        width={isCart ? 25 : 30}
+        height={isCart ? 25 : 30}
+        alt={existsInCompare ? 'Remove from compare' : 'Add to compare'}
+        className={
+          !isCart ?
+            'hidden dark:block transition-all duration-300 hover:scale-[1.2]'
+          : 'hidden dark:block'
+        }
+      />
+    </button>
+  );
+};
+
+export default AddToCompareButton;
diff --git a/src/components/Products/CategorySortSelectors.tsx b/src/components/Products/CategorySortSelectors.tsx
index 964e857..e13907f 100644
--- a/src/components/Products/CategorySortSelectors.tsx
+++ b/src/components/Products/CategorySortSelectors.tsx
@@ -100,7 +100,7 @@ const CategorySortSelectors: React.FC<Props> = ({
                 </option>
               ))}
             </select>
-            <SelectArrow />
+            <SelectArrow isCategory />
           </div>
         </div>
 
@@ -136,7 +136,7 @@ const CategorySortSelectors: React.FC<Props> = ({
                   </option>
                 ))}
             </select>
-            <SelectArrow />
+            <SelectArrow isCategory />
           </div>
         </div>
       </div>
diff --git a/src/components/Products/ProductCart.tsx b/src/components/Products/ProductCart.tsx
index 5f1c684..f9c7a1a 100644
--- a/src/components/Products/ProductCart.tsx
+++ b/src/components/Products/ProductCart.tsx
@@ -1,5 +1,5 @@
 import Image from 'next/image';
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { Product } from '@/types/product';
 import Link from 'next/link';
 import { motion } from 'framer-motion';
@@ -7,6 +7,8 @@ import { motion } from 'framer-motion';
 import FavoriteButton from '@/components/Products/FavoriteButton';
 
 import AddOrNavToCartButton from '../UI/AddOrNavToCartButton';
+import AddToCompareButton from './AddToCompareButton';
+import { useGetProductByIdQuery } from '@/lib/features/api/apiSlice';
 
 interface ProductCartProps {
   product: Product;
@@ -21,6 +23,8 @@ const ProductCart = ({
 }: ProductCartProps) => {
   const imgSrc = `/${product.image}`;
 
+  const { data: productDetails } = useGetProductByIdQuery(product.itemId);
+
   return (
     <motion.div
       initial={{ opacity: 0, y: 50 }}
@@ -31,7 +35,7 @@ const ProductCart = ({
         delay: index < 4 ? index * 0.15 : 0,
       }}
       viewport={{ once: !disableOnce, amount: 0.1 }}
-      className="
+      className="group
         border border-light-theme-border-color
         rounded-2xl
         dark:bg-item-bg dark:border-dark-theme-border-color
@@ -39,7 +43,15 @@ const ProductCart = ({
         hover:shadow-[0_3px_13px_0_rgba(23,32,49,0.4)]
       "
     >
-      <div className="p-8">
+      <div className="p-8 relative">
+        {productDetails && (
+          <div className="flex justify-end absolute top-2 right-4 opacity-0 group-hover:opacity-100 transition-all duration-400 ">
+            <AddToCompareButton
+              product={productDetails}
+              isCart
+            />
+          </div>
+        )}
         <Link
           href={`/products/${product.itemId}`}
           className="
diff --git a/src/components/UI/CategoriesHeading.tsx b/src/components/UI/CategoriesHeading.tsx
index cffa2dd..6e4d369 100644
--- a/src/components/UI/CategoriesHeading.tsx
+++ b/src/components/UI/CategoriesHeading.tsx
@@ -24,12 +24,14 @@ const CategoryHeading: React.FC<CatalogProps> = ({
           `Mobile ${categoryName.toLowerCase()}`
         : formattedCategory}
       </h2>
-      <p
-        className="font-[600] text-[14px] leading-[21px]
+      <>
+        <p
+          className="font-[600] text-[14px] leading-[21px]
         text-light-theme-text-menu dark:text-text-gray"
-      >
-        {total} {!isFavourites ? 'models' : 'items'}
-      </p>
+        >
+          {total} {!isFavourites ? 'models' : 'items'}
+        </p>
+      </>
     </div>
   );
 };
diff --git a/src/components/UI/CategoryHeader.tsx b/src/components/UI/CategoryHeader.tsx
index 337a60c..b15f970 100644
--- a/src/components/UI/CategoryHeader.tsx
+++ b/src/components/UI/CategoryHeader.tsx
@@ -9,11 +9,12 @@ type Props = {
   isFavourites?: true;
 
   categoryName: CategoryName;
-  total: number;
+  total?: number;
 };
 const CategoryHeader: React.FC<Props> = ({
   isCart,
   isFavourites,
+
   categoryName,
   total,
 }) => {
@@ -25,12 +26,12 @@ const CategoryHeader: React.FC<Props> = ({
           {isFavourites ?
             <CategoryHeading
               categoryName={categoryName}
-              total={total}
+              total={total ?? 0}
               isFavourites
             />
           : <CategoryHeading
               categoryName={categoryName}
-              total={total}
+              total={total ?? 0}
             />
           }
         </>
diff --git a/src/components/UI/NavBar/CategoriesMenu.tsx b/src/components/UI/NavBar/CategoriesMenu.tsx
index 2e9b252..bc2e28f 100644
--- a/src/components/UI/NavBar/CategoriesMenu.tsx
+++ b/src/components/UI/NavBar/CategoriesMenu.tsx
@@ -15,17 +15,13 @@ const CategoriesMenu: React.FC<Props> = ({ direction = 'row', onClose }) => {
 
   return (
     <ul
-      className={`flex ${isRow ? 'flex-row gap-8 lg:gap-16 ml-8 lg:ml-12' : 'flex-col items-center pt-6 gap-4 z-50'}`}
+      className={`flex ${isRow ? 'flex-row gap-8 lg:gap-16 ml-8 lg:ml-12 ' : 'flex-col items-center pt-6 gap-4 z-50'}`}
     >
       {NavBarCategories.slice(0, 4).map((category) => {
         // TODO: must be remove to separate component in future
         const isActive =
-          (
-            pathname === `/${category}` ||
-            (category === CategoryName.Home && pathname === '/')
-          ) ?
-            'after:absolute after:left-0 after:right-0 after:h-[3px] after:bg-light-theme-text-hover after:bottom-0 after:scale-x-100'
-          : '';
+          pathname === `/${category}` ||
+          (category === CategoryName.Home && pathname === '/');
 
         return (
           <li key={category}>
@@ -33,14 +29,16 @@ const CategoriesMenu: React.FC<Props> = ({ direction = 'row', onClose }) => {
               href={category === CategoryName.Home ? `/` : `/${category}`}
               onClick={onClose}
               className={`
-              relative text-light-theme-text-menu text-[12px] font-extrabold uppercase tracking-[1]
+              relative  text-light-theme-text-menu text-[12px] font-extrabold uppercase tracking-[1]
+              
               hover:text-light-theme-text-hover transition-colors duration-200
               after:absolute after:left-0 after:right-0 after:h-[2px] 
               after:bg-light-theme-text-hover after:scale-x-0 after:transition-transform after:duration-200
-              hover:after:scale-x-100
-              ${isRow ? 'after:h-[3px] after:bottom-[-14px] lg:after:bottom-[-22px]' : 'after:bottom-[-8px]'}
-              dark:hover:text-white dark:after:bg-dark-theme-text dark:text-text-gray
-              ${isActive}
+              hover:after:scale-x-100 
+              ${isRow ? 'after:h-[3px] after:bottom-[-14px] lg:after:bottom-[-24px]' : 'after:bottom-[-8px]'}
+              
+              dark:hover:text-white dark:after:bg-dark-theme-text dark:text-text-gray 
+              ${isActive && 'dark:text-white text-product-add-btn-selected after:absolute after:left-0 after:right-0 after:h-[3px] after:bg-light-theme-text-hover  after:bottom-0 after:scale-x-100'}
             `}
             >
               {category}
diff --git a/src/components/UI/NavBar/CompareLink.tsx b/src/components/UI/NavBar/CompareLink.tsx
new file mode 100644
index 0000000..b61d905
--- /dev/null
+++ b/src/components/UI/NavBar/CompareLink.tsx
@@ -0,0 +1,60 @@
+// #region Imports
+import Image from 'next/image';
+import React, { useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';
+
+import ScaleBlack from '@/components/UI/icons/Scale(Black).svg';
+import ScaleWhite from '@/components/UI/icons/Scale(White).svg';
+import Link from 'next/link';
+import { CategoryName } from '@/types/CategoryName';
+import { RootState } from '@/lib/store';
+
+// #endregion
+type Props = {
+  onClose?: () => void;
+  isBurger?: boolean;
+};
+const CompareLink: React.FC<Props> = ({ onClose, isBurger = false }) => {
+  const [isClient, setIsClient] = useState(false);
+  const compareCount = useSelector(
+    (state: RootState) => state.persisted.compare.items.length,
+  );
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  return (
+    <>
+      <Link
+        href={`/${CategoryName.Compare}`}
+        className="transition-all duration-500 pt-1 hover:scale-[1.4]"
+        onClick={onClose}
+      >
+        <button className="relative w-5 h-5">
+          <Image
+            width={20}
+            height={20}
+            src={ScaleWhite}
+            alt="ScaleWhite"
+            className="hidden dark:block cursor-pointer"
+          />
+          <Image
+            width={20}
+            height={20}
+            src={ScaleBlack}
+            alt="ScaleBlack"
+            className="dark:hidden cursor-pointer"
+          />
+          {isClient && compareCount > 0 && (
+            <span className="absolute text-[10px] pl-[1px] bottom-2 left-3 bg-red-500 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center cursor-pointer ">
+              {compareCount > 9 ? '9+' : compareCount}
+            </span>
+          )}
+        </button>
+      </Link>
+    </>
+  );
+};
+
+export default CompareLink;
diff --git a/src/components/UI/NavBar/FavouritesLink.tsx b/src/components/UI/NavBar/FavouritesLink.tsx
index 911f0d0..5830e1e 100644
--- a/src/components/UI/NavBar/FavouritesLink.tsx
+++ b/src/components/UI/NavBar/FavouritesLink.tsx
@@ -28,39 +28,41 @@ const FavouritesLink: React.FC<Props> = ({ onClose, isBurger = false }) => {
     setIsClient(true);
   }, []);
 
-  const baseClasses = `
-    relative block
-    ${
-      isBurger ?
-        `w-full h-16 flex justify-center items-center  // Додаємо items-center
-       border-r border-t border-light-theme-border-color dark:border-dark-theme-border-color 
-       after:absolute after:left-0 after:right-0 after:h-[2px] after:bg-light-theme-text-hover after:bottom-0
-       after:scale-x-0 hover:after:scale-x-100 after:origin-bottom after:transition-transform after:duration-200 dark:after:bg-dark-theme-text`
-      : 'p-2'
-    }`;
-
+  const baseClasses =
+    isBurger ?
+      `flex justify-center items-center h-full w-full relative
+        border-r border-t border-light-theme-border-color dark:border-dark-theme-border-color 
+        after:absolute after:left-0 after:right-0 after:h-[2px] after:bg-light-theme-text-hover after:bottom-0
+        after:scale-x-0 hover:after:scale-x-100 after:origin-bottom after:transition-transform after:duration-200 dark:after:bg-dark-theme-text`
+    : '';
   return (
     <Link
       href={`/${CategoryName.Favourites}`}
       className={baseClasses}
       onClick={onClose}
     >
-      <Image
-        src={FavouritesBlack}
-        alt="FavouritesBlack"
-        className="dark:hidden"
-      />
+      <div className="relative w-5 h-5 transition-all duration-500    hover:scale-[1.4]">
+        <Image
+          width={20}
+          height={20}
+          src={FavouritesBlack}
+          alt="FavouritesBlack"
+          className="dark:hidden"
+        />
 
-      <Image
-        src={FavouritesWhite}
-        alt="FavouritesWhite"
-        className="hidden dark:block"
-      />
-      {isClient && favoritesCount > 0 && (
-        <span className="absolute top-0 right-0 bg-red-500 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">
-          {favoritesCount > 9 ? '9+' : favoritesCount}
-        </span>
-      )}
+        <Image
+          width={20}
+          height={20}
+          src={FavouritesWhite}
+          alt="FavouritesWhite"
+          className="hidden dark:block"
+        />
+        {isClient && favoritesCount > 0 && (
+          <span className="absolute text-[10px]  bottom-2 left-3 bg-red-500 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">
+            {favoritesCount > 9 ? '9+' : favoritesCount}
+          </span>
+        )}
+      </div>
     </Link>
   );
 };
diff --git a/src/components/UI/NavBar/ShoppingCartLink.tsx b/src/components/UI/NavBar/ShoppingCartLink.tsx
index e7abff5..c155f16 100644
--- a/src/components/UI/NavBar/ShoppingCartLink.tsx
+++ b/src/components/UI/NavBar/ShoppingCartLink.tsx
@@ -24,33 +24,40 @@ const ShoppingCartLink: React.FC<Props> = ({ onClose, fullWidth = false }) => {
     setIsClient(true);
   }, []);
 
+  const baseClasses =
+    fullWidth ?
+      `flex justify-center items-center h-full w-full relative
+        border-r border-t border-light-theme-border-color dark:border-dark-theme-border-color 
+        after:absolute after:left-0 after:right-0 after:h-[2px] after:bg-light-theme-text-hover after:bottom-0
+        after:scale-x-0 hover:after:scale-x-100 after:origin-bottom after:transition-transform after:duration-200 dark:after:bg-dark-theme-text`
+    : '';
   return (
     <Link
       href={`/${CategoryName.Cart}`}
       onClick={onClose}
-      className={`
-        relative block
-        ${fullWidth ? 'w-full h-16 border-t flex justify-center items-center' : 'inline-flex p-2'}
-        border-light-theme-border-color dark:border-dark-theme-border-color
-        after:absolute after:left-0 after:right-0 after:h-[2px] after:bg-light-theme-text-hover after:bottom-0
-        after:scale-x-0 after:origin-bottom after:transition-transform after:duration-200 dark:after:bg-dark-theme-text
-      `}
+      className={baseClasses}
     >
-      <Image
-        src={CartBlack}
-        alt="CartBlack"
-        className="dark:hidden"
-      />
-      <Image
-        src={CartWhite}
-        alt="CartWhite"
-        className="hidden dark:block"
-      />
-      {isClient && itemCount > 0 && (
-        <span className="absolute top-0 right-0 bg-red-500 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">
-          {itemCount > 9 ? '9+' : itemCount}
-        </span>
-      )}
+      <div className="relative w-5 h-5 transition-all duration-500  hover:scale-[1.4]">
+        <Image
+          width={20}
+          height={20}
+          src={CartBlack}
+          alt="CartBlack"
+          className="dark:hidden"
+        />
+        <Image
+          width={20}
+          height={20}
+          src={CartWhite}
+          alt="CartWhite"
+          className="hidden dark:block"
+        />
+        {isClient && itemCount > 0 && (
+          <span className="absolute text-[10px] bottom-2 left-3 bg-red-500 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">
+            {itemCount > 9 ? '9+' : itemCount}
+          </span>
+        )}
+      </div>
     </Link>
   );
 };
diff --git a/src/components/UI/SelectArrow.tsx b/src/components/UI/SelectArrow.tsx
index e81fea8..4bf1670 100644
--- a/src/components/UI/SelectArrow.tsx
+++ b/src/components/UI/SelectArrow.tsx
@@ -2,12 +2,17 @@ import React from 'react';
 
 type Props = {
   className?: string;
+  isCompare?: boolean;
+  isCategory?: boolean;
 };
 
-const SelectArrow: React.FC<Props> = ({ className }) => {
+const SelectArrow: React.FC<Props> = ({ className, isCategory, isCompare }) => {
   return (
     <svg
-      className={`absolute right-2 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-600 dark:text-text-light pointer-events-none ${className}`}
+      className={`absolute 
+        ${isCategory ? 'right-2 top-1/2' : ''} 
+        ${isCompare ? 'right-2 bottom-0' : ''} 
+        -translate-y-1/2 w-5 h-5 text-gray-600 dark:text-text-light pointer-events-none ${className}`}
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 20 20"
       fill="currentColor"
diff --git a/src/components/UI/ShoppingCartIcons/CloseComponent.tsx b/src/components/UI/ShoppingCartIcons/CloseComponent.tsx
index 854c246..c4d6be9 100644
--- a/src/components/UI/ShoppingCartIcons/CloseComponent.tsx
+++ b/src/components/UI/ShoppingCartIcons/CloseComponent.tsx
@@ -15,13 +15,11 @@ const CloseComponent: React.FC<Props> = ({ placement = 'default' }) => {
 
   return (
     <>
-      {/* black close */}
       <Image
         src={blackGrey}
         alt="close"
         className="dark:hidden"
       />
-      {/* white close */}
       <Image
         src={whiteGrey}
         alt="close"
diff --git a/src/components/UI/ThemeSwitcher.tsx b/src/components/UI/ThemeSwitcher.tsx
index 0bb4a5b..accb8e6 100644
--- a/src/components/UI/ThemeSwitcher.tsx
+++ b/src/components/UI/ThemeSwitcher.tsx
@@ -16,7 +16,7 @@ const ThemeSwitcher = () => {
     <button
       onClick={toggleTheme}
       aria-label="Toggle theme"
-      className="relative w-[14px] h-[10px] flex items-center justify-center rounded-full transition-transform duration-500 hover:rotate-180 hover:cursor-pointer"
+      className="relative w-full h-[16px] flex items-center justify-center rounded-full transition-transform duration-500 hover:rotate-180 hover:cursor-pointer"
     >
       <p className="w-6 h-6 text-gray-800 dark:hidden">
         <Sun animateOnHover />
diff --git a/src/components/UI/icons/Cart(Black).svg b/src/components/UI/icons/Cart(Black).svg
index 1aaff84..ecf9a93 100644
--- a/src/components/UI/icons/Cart(Black).svg
+++ b/src/components/UI/icons/Cart(Black).svg
@@ -1,5 +1,5 @@
-<svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M2.46683 0.933323C2.59273 0.765453 2.79032 0.666656 3.00016 0.666656H11.0002C11.21 0.666656 11.4076 0.765453 11.5335 0.933323L13.5335 3.59999C13.62 3.71539 13.6668 3.85574 13.6668 3.99999V13.3333C13.6668 13.8638 13.4561 14.3725 13.081 14.7475C12.706 15.1226 12.1973 15.3333 11.6668 15.3333H2.3335C1.80306 15.3333 1.29436 15.1226 0.919282 14.7475C0.54421 14.3725 0.333496 13.8638 0.333496 13.3333V3.99999C0.333496 3.85574 0.380281 3.71539 0.466829 3.59999L2.46683 0.933323ZM3.3335 1.99999L1.66683 4.22221V13.3333C1.66683 13.5101 1.73707 13.6797 1.86209 13.8047C1.98712 13.9298 2.15669 14 2.3335 14H11.6668C11.8436 14 12.0132 13.9298 12.1382 13.8047C12.2633 13.6797 12.3335 13.5101 12.3335 13.3333V4.22221L10.6668 1.99999H3.3335Z" fill="#0F0F11"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M0.333496 4.00001C0.333496 3.63182 0.631973 3.33334 1.00016 3.33334H13.0002C13.3684 3.33334 13.6668 3.63182 13.6668 4.00001C13.6668 4.3682 13.3684 4.66668 13.0002 4.66668H1.00016C0.631973 4.66668 0.333496 4.3682 0.333496 4.00001Z" fill="#0F0F11"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M4.33341 6C4.7016 6 5.00008 6.29848 5.00008 6.66667C5.00008 7.1971 5.21079 7.70581 5.58587 8.08088C5.96094 8.45595 6.46965 8.66667 7.00008 8.66667C7.53051 8.66667 8.03922 8.45595 8.41429 8.08088C8.78937 7.70581 9.00008 7.1971 9.00008 6.66667C9.00008 6.29848 9.29856 6 9.66675 6C10.0349 6 10.3334 6.29848 10.3334 6.66667C10.3334 7.55072 9.98222 8.39857 9.3571 9.02369C8.73198 9.64881 7.88414 10 7.00008 10C6.11603 10 5.26818 9.64881 4.64306 9.02369C4.01794 8.39857 3.66675 7.55072 3.66675 6.66667C3.66675 6.29848 3.96522 6 4.33341 6Z" fill="#0F0F11"/>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.46683 0.933323C3.59273 0.765453 3.79032 0.666656 4.00016 0.666656H12.0002C12.21 0.666656 12.4076 0.765453 12.5335 0.933323L14.5335 3.59999C14.62 3.71539 14.6668 3.85574 14.6668 3.99999V13.3333C14.6668 13.8638 14.4561 14.3725 14.081 14.7475C13.706 15.1226 13.1973 15.3333 12.6668 15.3333H3.3335C2.80306 15.3333 2.29436 15.1226 1.91928 14.7475C1.54421 14.3725 1.3335 13.8638 1.3335 13.3333V3.99999C1.3335 3.85574 1.38028 3.71539 1.46683 3.59999L3.46683 0.933323ZM4.3335 1.99999L2.66683 4.22221V13.3333C2.66683 13.5101 2.73707 13.6797 2.86209 13.8047C2.98712 13.9298 3.15669 14 3.3335 14H12.6668C12.8436 14 13.0132 13.9298 13.1382 13.8047C13.2633 13.6797 13.3335 13.5101 13.3335 13.3333V4.22221L11.6668 1.99999H4.3335Z" fill="#0F0F11"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.3335 4.00001C1.3335 3.63182 1.63197 3.33334 2.00016 3.33334H14.0002C14.3684 3.33334 14.6668 3.63182 14.6668 4.00001C14.6668 4.3682 14.3684 4.66668 14.0002 4.66668H2.00016C1.63197 4.66668 1.3335 4.3682 1.3335 4.00001Z" fill="#0F0F11"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.33366 6C5.70185 6 6.00033 6.29848 6.00033 6.66667C6.00033 7.1971 6.21104 7.70581 6.58611 8.08088C6.96118 8.45595 7.46989 8.66667 8.00033 8.66667C8.53076 8.66667 9.03947 8.45595 9.41454 8.08088C9.78961 7.70581 10.0003 7.1971 10.0003 6.66667C10.0003 6.29848 10.2988 6 10.667 6C11.0352 6 11.3337 6.29848 11.3337 6.66667C11.3337 7.55072 10.9825 8.39857 10.3573 9.02369C9.73223 9.64881 8.88438 10 8.00033 10C7.11627 10 6.26842 9.64881 5.6433 9.02369C5.01818 8.39857 4.66699 7.55072 4.66699 6.66667C4.66699 6.29848 4.96547 6 5.33366 6Z" fill="#0F0F11"/>
 </svg>
diff --git a/src/components/UI/icons/Cart(White).svg b/src/components/UI/icons/Cart(White).svg
index d12428f..425ee63 100644
--- a/src/components/UI/icons/Cart(White).svg
+++ b/src/components/UI/icons/Cart(White).svg
@@ -1,5 +1,5 @@
-<svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M2.46683 0.933323C2.59273 0.765453 2.79032 0.666656 3.00016 0.666656H11.0002C11.21 0.666656 11.4076 0.765453 11.5335 0.933323L13.5335 3.59999C13.62 3.71539 13.6668 3.85574 13.6668 3.99999V13.3333C13.6668 13.8638 13.4561 14.3725 13.081 14.7475C12.706 15.1226 12.1973 15.3333 11.6668 15.3333H2.3335C1.80306 15.3333 1.29436 15.1226 0.919282 14.7475C0.54421 14.3725 0.333496 13.8638 0.333496 13.3333V3.99999C0.333496 3.85574 0.380281 3.71539 0.466829 3.59999L2.46683 0.933323ZM3.3335 1.99999L1.66683 4.22221V13.3333C1.66683 13.5101 1.73707 13.6797 1.86209 13.8047C1.98712 13.9298 2.15669 14 2.3335 14H11.6668C11.8436 14 12.0132 13.9298 12.1382 13.8047C12.2633 13.6797 12.3335 13.5101 12.3335 13.3333V4.22221L10.6668 1.99999H3.3335Z" fill="#F1F2F9"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M0.333496 4.00001C0.333496 3.63182 0.631973 3.33334 1.00016 3.33334H13.0002C13.3684 3.33334 13.6668 3.63182 13.6668 4.00001C13.6668 4.3682 13.3684 4.66668 13.0002 4.66668H1.00016C0.631973 4.66668 0.333496 4.3682 0.333496 4.00001Z" fill="#F1F2F9"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M4.33366 6C4.70185 6 5.00033 6.29848 5.00033 6.66667C5.00033 7.1971 5.21104 7.70581 5.58611 8.08088C5.96118 8.45595 6.46989 8.66667 7.00033 8.66667C7.53076 8.66667 8.03947 8.45595 8.41454 8.08088C8.78961 7.70581 9.00033 7.1971 9.00033 6.66667C9.00033 6.29848 9.2988 6 9.66699 6C10.0352 6 10.3337 6.29848 10.3337 6.66667C10.3337 7.55072 9.98247 8.39857 9.35735 9.02369C8.73223 9.64881 7.88438 10 7.00033 10C6.11627 10 5.26842 9.64881 4.6433 9.02369C4.01818 8.39857 3.66699 7.55072 3.66699 6.66667C3.66699 6.29848 3.96547 6 4.33366 6Z" fill="#F1F2F9"/>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.46683 0.933323C3.59273 0.765453 3.79032 0.666656 4.00016 0.666656H12.0002C12.21 0.666656 12.4076 0.765453 12.5335 0.933323L14.5335 3.59999C14.62 3.71539 14.6668 3.85574 14.6668 3.99999V13.3333C14.6668 13.8638 14.4561 14.3725 14.081 14.7475C13.706 15.1226 13.1973 15.3333 12.6668 15.3333H3.3335C2.80306 15.3333 2.29436 15.1226 1.91928 14.7475C1.54421 14.3725 1.3335 13.8638 1.3335 13.3333V3.99999C1.3335 3.85574 1.38028 3.71539 1.46683 3.59999L3.46683 0.933323ZM4.3335 1.99999L2.66683 4.22221V13.3333C2.66683 13.5101 2.73707 13.6797 2.86209 13.8047C2.98712 13.9298 3.15669 14 3.3335 14H12.6668C12.8436 14 13.0132 13.9298 13.1382 13.8047C13.2633 13.6797 13.3335 13.5101 13.3335 13.3333V4.22221L11.6668 1.99999H4.3335Z" fill="#F1F2F9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.3335 4.00001C1.3335 3.63182 1.63197 3.33334 2.00016 3.33334H14.0002C14.3684 3.33334 14.6668 3.63182 14.6668 4.00001C14.6668 4.3682 14.3684 4.66668 14.0002 4.66668H2.00016C1.63197 4.66668 1.3335 4.3682 1.3335 4.00001Z" fill="#F1F2F9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.33366 6C5.70185 6 6.00033 6.29848 6.00033 6.66667C6.00033 7.1971 6.21104 7.70581 6.58611 8.08088C6.96118 8.45595 7.46989 8.66667 8.00033 8.66667C8.53076 8.66667 9.03947 8.45595 9.41454 8.08088C9.78961 7.70581 10.0003 7.1971 10.0003 6.66667C10.0003 6.29848 10.2988 6 10.667 6C11.0352 6 11.3337 6.29848 11.3337 6.66667C11.3337 7.55072 10.9825 8.39857 10.3573 9.02369C9.73223 9.64881 8.88438 10 8.00033 10C7.11627 10 6.26842 9.64881 5.6433 9.02369C5.01818 8.39857 4.66699 7.55072 4.66699 6.66667C4.66699 6.29848 4.96547 6 5.33366 6Z" fill="#F1F2F9"/>
 </svg>
diff --git a/src/components/UI/icons/Scale(Black).svg b/src/components/UI/icons/Scale(Black).svg
new file mode 100644
index 0000000..6fc8952
--- /dev/null
+++ b/src/components/UI/icons/Scale(Black).svg
@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
<g id="SVGRepo_iconCarrier"> <path d="M2.50047 13H8.50047M15.5005 13H21.5005M12.0005 7V21M12.0005 7C13.3812 7 14.5005 5.88071 14.5005 4.5M12.0005 7C10.6198 7 9.50047 5.88071 9.50047 4.5M4.00047 21L20.0005 21M4.00047 4.50001L9.50047 4.5M9.50047 4.5C9.50047 3.11929 10.6198 2 12.0005 2C13.3812 2 14.5005 3.11929 14.5005 4.5M14.5005 4.5L20.0005 4.5M8.88091 14.3364C8.48022 15.8706 7.11858 17 5.50047 17C3.88237 17 2.52073 15.8706 2.12004 14.3364C2.0873 14.211 2.07093 14.1483 2.06935 13.8979C2.06838 13.7443 2.12544 13.3904 2.17459 13.2449C2.25478 13.0076 2.34158 12.8737 2.51519 12.6059L5.50047 8L8.48576 12.6059C8.65937 12.8737 8.74617 13.0076 8.82636 13.2449C8.87551 13.3904 8.93257 13.7443 8.9316 13.8979C8.93002 14.1483 8.91365 14.211 8.88091 14.3364ZM21.8809 14.3364C21.4802 15.8706 20.1186 17 18.5005 17C16.8824 17 15.5207 15.8706 15.12 14.3364C15.0873 14.211 15.0709 14.1483 15.0693 13.8979C15.0684 13.7443 15.1254 13.3904 15.1746 13.2449C15.2548 13.0076 15.3416 12.8737 15.5152 12.6059L18.5005 8L21.4858 12.6059C21.6594 12.8737 21.7462 13.0076 21.8264 13.2449C21.8755 13.3904 21.9326 13.7443 21.9316 13.8979C21.93 14.1483 21.9137 14.211 21.8809 14.3364Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </g>
+
</svg>
\ No newline at end of file
diff --git a/src/components/UI/icons/Scale(Grey).svg b/src/components/UI/icons/Scale(Grey).svg
new file mode 100644
index 0000000..df6fcd5
--- /dev/null
+++ b/src/components/UI/icons/Scale(Grey).svg
@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
<g id="SVGRepo_iconCarrier"> <path d="M2.50047 13H8.50047M15.5005 13H21.5005M12.0005 7V21M12.0005 7C13.3812 7 14.5005 5.88071 14.5005 4.5M12.0005 7C10.6198 7 9.50047 5.88071 9.50047 4.5M4.00047 21L20.0005 21M4.00047 4.50001L9.50047 4.5M9.50047 4.5C9.50047 3.11929 10.6198 2 12.0005 2C13.3812 2 14.5005 3.11929 14.5005 4.5M14.5005 4.5L20.0005 4.5M8.88091 14.3364C8.48022 15.8706 7.11858 17 5.50047 17C3.88237 17 2.52073 15.8706 2.12004 14.3364C2.0873 14.211 2.07093 14.1483 2.06935 13.8979C2.06838 13.7443 2.12544 13.3904 2.17459 13.2449C2.25478 13.0076 2.34158 12.8737 2.51519 12.6059L5.50047 8L8.48576 12.6059C8.65937 12.8737 8.74617 13.0076 8.82636 13.2449C8.87551 13.3904 8.93257 13.7443 8.9316 13.8979C8.93002 14.1483 8.91365 14.211 8.88091 14.3364ZM21.8809 14.3364C21.4802 15.8706 20.1186 17 18.5005 17C16.8824 17 15.5207 15.8706 15.12 14.3364C15.0873 14.211 15.0709 14.1483 15.0693 13.8979C15.0684 13.7443 15.1254 13.3904 15.1746 13.2449C15.2548 13.0076 15.3416 12.8737 15.5152 12.6059L18.5005 8L21.4858 12.6059C21.6594 12.8737 21.7462 13.0076 21.8264 13.2449C21.8755 13.3904 21.9326 13.7443 21.9316 13.8979C21.93 14.1483 21.9137 14.211 21.8809 14.3364Z" stroke="#6b7280" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </g>
+
</svg>
\ No newline at end of file
diff --git a/src/components/UI/icons/Scale(White).svg b/src/components/UI/icons/Scale(White).svg
new file mode 100644
index 0000000..cb16e56
--- /dev/null
+++ b/src/components/UI/icons/Scale(White).svg
@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
<g id="SVGRepo_iconCarrier"> <path d="M2.50047 13H8.50047M15.5005 13H21.5005M12.0005 7V21M12.0005 7C13.3812 7 14.5005 5.88071 14.5005 4.5M12.0005 7C10.6198 7 9.50047 5.88071 9.50047 4.5M4.00047 21L20.0005 21M4.00047 4.50001L9.50047 4.5M9.50047 4.5C9.50047 3.11929 10.6198 2 12.0005 2C13.3812 2 14.5005 3.11929 14.5005 4.5M14.5005 4.5L20.0005 4.5M8.88091 14.3364C8.48022 15.8706 7.11858 17 5.50047 17C3.88237 17 2.52073 15.8706 2.12004 14.3364C2.0873 14.211 2.07093 14.1483 2.06935 13.8979C2.06838 13.7443 2.12544 13.3904 2.17459 13.2449C2.25478 13.0076 2.34158 12.8737 2.51519 12.6059L5.50047 8L8.48576 12.6059C8.65937 12.8737 8.74617 13.0076 8.82636 13.2449C8.87551 13.3904 8.93257 13.7443 8.9316 13.8979C8.93002 14.1483 8.91365 14.211 8.88091 14.3364ZM21.8809 14.3364C21.4802 15.8706 20.1186 17 18.5005 17C16.8824 17 15.5207 15.8706 15.12 14.3364C15.0873 14.211 15.0709 14.1483 15.0693 13.8979C15.0684 13.7443 15.1254 13.3904 15.1746 13.2449C15.2548 13.0076 15.3416 12.8737 15.5152 12.6059L18.5005 8L21.4858 12.6059C21.6594 12.8737 21.7462 13.0076 21.8264 13.2449C21.8755 13.3904 21.9326 13.7443 21.9316 13.8979C21.93 14.1483 21.9137 14.211 21.8809 14.3364Z" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </g>
+
</svg>
\ No newline at end of file
diff --git a/src/components/UI/icons/Scale(Yellow).svg b/src/components/UI/icons/Scale(Yellow).svg
new file mode 100644
index 0000000..2a27a46
--- /dev/null
+++ b/src/components/UI/icons/Scale(Yellow).svg
@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
<g id="SVGRepo_iconCarrier"> <path d="M2.50047 13H8.50047M15.5005 13H21.5005M12.0005 7V21M12.0005 7C13.3812 7 14.5005 5.88071 14.5005 4.5M12.0005 7C10.6198 7 9.50047 5.88071 9.50047 4.5M4.00047 21L20.0005 21M4.00047 4.50001L9.50047 4.5M9.50047 4.5C9.50047 3.11929 10.6198 2 12.0005 2C13.3812 2 14.5005 3.11929 14.5005 4.5M14.5005 4.5L20.0005 4.5M8.88091 14.3364C8.48022 15.8706 7.11858 17 5.50047 17C3.88237 17 2.52073 15.8706 2.12004 14.3364C2.0873 14.211 2.07093 14.1483 2.06935 13.8979C2.06838 13.7443 2.12544 13.3904 2.17459 13.2449C2.25478 13.0076 2.34158 12.8737 2.51519 12.6059L5.50047 8L8.48576 12.6059C8.65937 12.8737 8.74617 13.0076 8.82636 13.2449C8.87551 13.3904 8.93257 13.7443 8.9316 13.8979C8.93002 14.1483 8.91365 14.211 8.88091 14.3364ZM21.8809 14.3364C21.4802 15.8706 20.1186 17 18.5005 17C16.8824 17 15.5207 15.8706 15.12 14.3364C15.0873 14.211 15.0709 14.1483 15.0693 13.8979C15.0684 13.7443 15.1254 13.3904 15.1746 13.2449C15.2548 13.0076 15.3416 12.8737 15.5152 12.6059L18.5005 8L21.4858 12.6059C21.6594 12.8737 21.7462 13.0076 21.8264 13.2449C21.8755 13.3904 21.9326 13.7443 21.9316 13.8979C21.93 14.1483 21.9137 14.211 21.8809 14.3364Z" stroke="#d9dd0e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </g>
+
</svg>
\ No newline at end of file
diff --git a/src/components/animate-ui/icons/x.tsx b/src/components/animate-ui/icons/x.tsx
new file mode 100644
index 0000000..2bfb466
--- /dev/null
+++ b/src/components/animate-ui/icons/x.tsx
@@ -0,0 +1,126 @@
+'use client';
+
+import * as React from 'react';
+import { motion, type Variants } from 'motion/react';
+
+import {
+  getVariants,
+  useAnimateIconContext,
+  IconWrapper,
+  type IconProps,
+} from '@/components/animate-ui/icons/icon';
+
+type XProps = IconProps<keyof typeof animations>;
+
+const animations = {
+  default: {
+    line1: {
+      initial: {
+        rotate: 0,
+        transition: { ease: 'easeInOut', duration: 0.4 },
+      },
+      animate: {
+        rotate: 90,
+        transition: { ease: 'easeInOut', duration: 0.4 },
+      },
+    },
+    line2: {
+      initial: {
+        rotate: 0,
+        transition: { ease: 'easeInOut', duration: 0.4, delay: 0.1 },
+      },
+      animate: {
+        rotate: 90,
+        transition: { ease: 'easeInOut', duration: 0.4, delay: 0.1 },
+      },
+    },
+  } satisfies Record<string, Variants>,
+  plus: {
+    line1: {
+      initial: {
+        rotate: 0,
+        x1: 6,
+        y1: 18,
+        x2: 18,
+        y2: 6,
+        transition: { ease: 'easeInOut', duration: 0.3, delay: 0.1 },
+      },
+      animate: {
+        rotate: 45,
+        x1: 7.1,
+        y1: 16.9,
+        x2: 16.9,
+        y2: 7.1,
+        transition: { ease: 'easeInOut', duration: 0.3, delay: 0.1 },
+      },
+    },
+    line2: {
+      initial: {
+        rotate: 0,
+        x1: 6,
+        y1: 6,
+        x2: 18,
+        y2: 18,
+        transition: { ease: 'easeInOut', duration: 0.3 },
+      },
+      animate: {
+        rotate: 45,
+        x1: 7.1,
+        y1: 7.1,
+        x2: 16.9,
+        y2: 16.9,
+        transition: { ease: 'easeInOut', duration: 0.3 },
+      },
+    },
+  } satisfies Record<string, Variants>,
+} as const;
+
+function IconComponent({ size, ...props }: XProps) {
+  const { controls } = useAnimateIconContext();
+  const variants = getVariants(animations);
+
+  return (
+    <motion.svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <motion.line
+        x1={6}
+        y1={18}
+        x2={18}
+        y2={6}
+        variants={variants.line1}
+        initial="initial"
+        animate={controls}
+      />
+      <motion.line
+        x1={6}
+        y1={6}
+        x2={18}
+        y2={18}
+        variants={variants.line2}
+        initial="initial"
+        animate={controls}
+      />
+    </motion.svg>
+  );
+}
+
+function X(props: XProps) {
+  return (
+    <IconWrapper
+      icon={IconComponent}
+      {...props}
+    />
+  );
+}
+
+export { animations, X, X as XIcon, type XProps, type XProps as XIconProps };
diff --git a/src/components/home/CategoryShowcase/CategoryShowcase.tsx b/src/components/home/CategoryShowcase/CategoryShowcase.tsx
index ef1848f..dd94427 100644
--- a/src/components/home/CategoryShowcase/CategoryShowcase.tsx
+++ b/src/components/home/CategoryShowcase/CategoryShowcase.tsx
@@ -21,7 +21,6 @@ const containerVariants = {
 
 const CategoryShowcase: React.FC<Props> = ({ categories }) => {
   // TODO remove comments
-  // console.log(categories);
   // const { data: categories, isLoading, isError } = useGetCategoriesQuery();
 
   // if (isLoading) {
diff --git a/src/components/pages/Favourites.tsx b/src/components/pages/Favourites.tsx
index db5e8e4..6136e46 100644
--- a/src/components/pages/Favourites.tsx
+++ b/src/components/pages/Favourites.tsx
@@ -42,7 +42,7 @@ const Favourites: React.FC = () => {
 
   return (
     <>
-      <div className="pt-6 px-4 sm:px-8">
+      <div className="pt-6 ">
         <CategoryHeader
           categoryName={CategoryName.Favourites}
           total={detailedFavouritesItems.length}
diff --git a/src/components/pages/ProductDetails/ProductDetails.tsx b/src/components/pages/ProductDetails/ProductDetails.tsx
index 1824fa9..dd364dd 100644
--- a/src/components/pages/ProductDetails/ProductDetails.tsx
+++ b/src/components/pages/ProductDetails/ProductDetails.tsx
@@ -71,6 +71,7 @@ const ProductDetails = ({
       <div className="w-full sm:w-1/2 sm:px-4">
         <ProductDetailsOrderOptions
           product={productSummary}
+          productForCompare={product}
           namespaceId={product.namespaceId}
           colorsAvailable={product.colorsAvailable}
           capacityAvailable={product.capacityAvailable}
diff --git a/src/components/pages/ProductDetails/ProductDetailsOrderOptions.tsx b/src/components/pages/ProductDetails/ProductDetailsOrderOptions.tsx
index 1338867..b223a46 100644
--- a/src/components/pages/ProductDetails/ProductDetailsOrderOptions.tsx
+++ b/src/components/pages/ProductDetails/ProductDetailsOrderOptions.tsx
@@ -1,16 +1,16 @@
 'use client';
 
-import { useRouter } from 'next/navigation';
-
 import FavoriteButton from '@/components/Products/FavoriteButton';
 import { Product } from '@/types/product';
 import OptionGroup from './ProductDetailsOptionGroup';
 import Link from 'next/link';
 import { ProductType } from '@/types/CategoryType';
+import AddToCompareButton from '@/components/Products/AddToCompareButton';
 import AddOrNavToCartButton from '@/components/UI/AddOrNavToCartButton';
 
 interface Props {
   product: Product;
+  productForCompare: ProductType;
   variants: ProductType[];
 
   namespaceId: string;
@@ -45,6 +45,7 @@ const colorMap: { [key: string]: string } = {
 
 const ProductDetailsOrderOptions: React.FC<Props> = ({
   product,
+  productForCompare,
   capacityAvailable,
   namespaceId,
   colorsAvailable,
@@ -52,8 +53,6 @@ const ProductDetailsOrderOptions: React.FC<Props> = ({
   priceRegular,
   variants,
 }) => {
-  const router = useRouter();
-
   return (
     <div className="text-light-theme-text dark:text-dark-theme-text w-full py-8 px-4">
       <div className="flex justify-between items-center mb-4">
@@ -127,6 +126,9 @@ const ProductDetailsOrderOptions: React.FC<Props> = ({
         <div className="flex-grow w-full">
           <AddOrNavToCartButton product={product} />
         </div>
+        <div className="pr-4">
+          <AddToCompareButton product={productForCompare} />
+        </div>
         <div className="pr-4">
           <FavoriteButton product={product} />
         </div>
diff --git a/src/lib/features/compare/compareSlice.tsx b/src/lib/features/compare/compareSlice.tsx
new file mode 100644
index 0000000..5839626
--- /dev/null
+++ b/src/lib/features/compare/compareSlice.tsx
@@ -0,0 +1,76 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { ProductType } from '@/types/CategoryType';
+
+interface CompareState {
+  items: ProductType[];
+}
+
+const initialState: CompareState = {
+  items: [],
+};
+
+const compareSlice = createSlice({
+  name: 'compare',
+  initialState,
+  reducers: {
+    addToCompare: (state, action: PayloadAction<ProductType>) => {
+      const product = action.payload;
+      const exists = state.items.some(
+        (i) =>
+          i.id === product.id &&
+          i.color === product.color &&
+          i.capacity === product.capacity,
+      );
+
+      if (!exists) state.items.push(product);
+    },
+
+    removeFromCompareByKey: (
+      state,
+      action: PayloadAction<{
+        id: number | string;
+        color: string;
+        capacity: string;
+      }>,
+    ) => {
+      const { id, color, capacity } = action.payload;
+      state.items = state.items.filter(
+        (i) => !(i.id === id && i.color === color && i.capacity === capacity),
+      );
+    },
+
+    clearCompare: (state) => {
+      state.items = [];
+    },
+
+    clearCompareByCategory: (state, action: PayloadAction<string>) => {
+      state.items = state.items.filter((p) => p.category !== action.payload);
+    },
+
+    toggleCompare: (state, action: PayloadAction<ProductType>) => {
+      const product = action.payload;
+      const existsIndex = state.items.findIndex(
+        (i) =>
+          i.id === product.id &&
+          i.color === product.color &&
+          i.capacity === product.capacity,
+      );
+
+      if (existsIndex >= 0) {
+        state.items.splice(existsIndex, 1);
+      } else {
+        state.items.push(product);
+      }
+    },
+  },
+});
+
+export const {
+  addToCompare,
+  removeFromCompareByKey,
+  clearCompare,
+  clearCompareByCategory,
+  toggleCompare,
+} = compareSlice.actions;
+
+export default compareSlice.reducer;
diff --git a/src/lib/store.ts b/src/lib/store.ts
index af506a8..574ca09 100644
--- a/src/lib/store.ts
+++ b/src/lib/store.ts
@@ -4,6 +4,7 @@ import { combineReducers, configureStore } from '@reduxjs/toolkit';
 import { apiSlice } from '@/lib/features/api/apiSlice';
 import favouritesReducer from '@/lib/features/favourites/favouritesSlice';
 import cartReducer from '@/lib/features/cart/cartSlice';
+import compareReducer from '@/lib/features/compare/compareSlice';
 
 import { persistReducer, persistStore } from 'redux-persist';
 import storage from 'redux-persist/lib/storage';
@@ -12,12 +13,13 @@ import { CategoryName } from '@/types/CategoryName';
 const persistedReducers = combineReducers({
   favourites: favouritesReducer,
   cart: cartReducer,
+  compare: compareReducer,
 });
 
 const persistConfig = {
   key: 'root',
   storage,
-  whitelist: [CategoryName.Favourites, CategoryName.Cart],
+  whitelist: [CategoryName.Favourites, CategoryName.Cart, CategoryName.Compare],
 };
 
 const persistedReducer = persistReducer(persistConfig, persistedReducers);
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 8164923..2819a83 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -1,4 +1,3 @@
-import { CategoryName } from '@/types/CategoryName';
 import { clsx, type ClassValue } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 
diff --git a/src/types/CategoryName.ts b/src/types/CategoryName.ts
index 7f9b919..176250b 100644
--- a/src/types/CategoryName.ts
+++ b/src/types/CategoryName.ts
@@ -5,4 +5,5 @@ export enum CategoryName {
   Accessories = 'accessories',
   Favourites = 'favourites',
   Cart = 'cart',
+  Compare = 'compare',
 }
diff --git a/src/types/CategoryType.ts b/src/types/CategoryType.ts
index 54beeaf..46197f2 100644
--- a/src/types/CategoryType.ts
+++ b/src/types/CategoryType.ts
@@ -13,6 +13,7 @@ export type DescriptionItem = {
 
 export type ProductType = {
   id: string;
+  itemId: string;
   category: CategoryName;
   namespaceId: string;
   name: string;
diff --git a/src/types/NavBarRightComponents.tsx b/src/types/NavBarRightComponents.tsx
index b3590e1..c74f0e4 100644
--- a/src/types/NavBarRightComponents.tsx
+++ b/src/types/NavBarRightComponents.tsx
@@ -2,9 +2,11 @@ import FavouritesLink from '@/components/UI/NavBar/FavouritesLink';
 import ShoppingCartLink from '@/components/UI/NavBar/ShoppingCartLink';
 import ThemeSwitcher from '@/components/UI/ThemeSwitcher';
 import React from 'react';
-import { CategoryName } from './CategoryName';
+import { CategoryName } from '@/types/CategoryName';
+import CompareLink from '@/components/UI/NavBar/CompareLink';
 
 export const NavBarRightComponents = [
+  { id: CategoryName.Compare, element: <CompareLink /> },
   { id: 'theme', element: <ThemeSwitcher /> },
   { id: CategoryName.Favourites, element: <FavouritesLink /> },
   { id: CategoryName.Cart, element: <ShoppingCartLink /> },
diff --git a/src/types/product.ts b/src/types/product.ts
index 53bf0ec..8878379 100644
--- a/src/types/product.ts
+++ b/src/types/product.ts
@@ -2,7 +2,7 @@ import { CategoryName } from './CategoryName';
 
 export const VALID_CATEGORIES = Object.values(CategoryName).slice(1, 4);
 
-type Category = (typeof VALID_CATEGORIES)[number];
+export type Category = (typeof VALID_CATEGORIES)[number];
 
 export interface Product {
   id: number;