diff --git a/package-lock.json b/package-lock.json
index 9572b3e..752030f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,20 +12,25 @@
                 "@hookform/resolvers": "^3.3.4",
                 "@radix-ui/react-icons": "^1.3.0",
                 "@radix-ui/react-label": "^2.0.2",
+                "@radix-ui/react-select": "^2.0.0",
                 "@radix-ui/react-slot": "^1.0.2",
                 "@radix-ui/react-tabs": "^1.0.4",
                 "@radix-ui/react-toast": "^1.1.5",
+                "@radix-ui/react-tooltip": "^1.0.7",
                 "@tanstack/react-query": "^5.17.8",
                 "class-variance-authority": "^0.7.0",
                 "clsx": "^2.1.0",
                 "date-fns": "^2.29.3",
+                "embla-carousel-autoplay": "^8.0.1",
+                "embla-carousel-react": "^8.0.1",
                 "firebase": "^9.17.1",
                 "jotai": "^2.6.4",
-                "react": "^18.2.0",
-                "react-dom": "^18.2.0",
+                "lucide-react": "^0.365.0",
+                "react": "^18.3.0",
+                "react-dom": "^18.3.0",
                 "react-hook-form": "^7.49.3",
                 "react-loader-spinner": "^6.1.6",
-                "react-router-dom": "^6.22.0",
+                "react-router-dom": "^6.22.3",
                 "tailwind-merge": "^2.2.1",
                 "tailwindcss-animate": "^1.0.7",
                 "zod": "^3.22.4"
@@ -1508,6 +1513,40 @@
             "resolved": "https://registry.npmjs.org/@firebase/webchannel-wrapper/-/webchannel-wrapper-0.9.0.tgz",
             "integrity": "sha512-BpiZLBWdLFw+qFel9p3Zs1jD6QmH7Ii4aTDu6+vx8ShdidChZUXqDhYJly4ZjSgQh54miXbBgBrk0S+jTIh/Qg=="
         },
+        "node_modules/@floating-ui/core": {
+            "version": "1.6.0",
+            "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.0.tgz",
+            "integrity": "sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==",
+            "dependencies": {
+                "@floating-ui/utils": "^0.2.1"
+            }
+        },
+        "node_modules/@floating-ui/dom": {
+            "version": "1.6.3",
+            "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.3.tgz",
+            "integrity": "sha512-RnDthu3mzPlQ31Ss/BTwQ1zjzIhr3lk1gZB1OC56h/1vEtaXkESrOqL5fQVMfXpwGtRwX+YsZBdyHtJMQnkArw==",
+            "dependencies": {
+                "@floating-ui/core": "^1.0.0",
+                "@floating-ui/utils": "^0.2.0"
+            }
+        },
+        "node_modules/@floating-ui/react-dom": {
+            "version": "2.0.8",
+            "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.8.tgz",
+            "integrity": "sha512-HOdqOt3R3OGeTKidaLvJKcgg75S6tibQ3Tif4eyd91QnIJWr0NLvoXFpJA/j8HqkFSL68GDca9AuyWEHlhyClw==",
+            "dependencies": {
+                "@floating-ui/dom": "^1.6.1"
+            },
+            "peerDependencies": {
+                "react": ">=16.8.0",
+                "react-dom": ">=16.8.0"
+            }
+        },
+        "node_modules/@floating-ui/utils": {
+            "version": "0.2.1",
+            "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz",
+            "integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q=="
+        },
         "node_modules/@grpc/grpc-js": {
             "version": "1.7.3",
             "resolved": "https://registry.npmjs.org/@grpc/grpc-js/-/grpc-js-1.7.3.tgz",
@@ -1882,6 +1921,14 @@
             "resolved": "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz",
             "integrity": "sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw=="
         },
+        "node_modules/@radix-ui/number": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.0.1.tgz",
+            "integrity": "sha512-T5gIdVO2mmPW3NNhjNgEP3cqMXjXL9UbO0BzWcXfvdBs+BohbQxvd/K5hSVKmn9/lbTdsQVKbUcP5WLCwvUbBg==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10"
+            }
+        },
         "node_modules/@radix-ui/primitive": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.1.tgz",
@@ -1890,6 +1937,29 @@
                 "@babel/runtime": "^7.13.10"
             }
         },
+        "node_modules/@radix-ui/react-arrow": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.0.3.tgz",
+            "integrity": "sha512-wSP+pHsB/jQRaL6voubsQ/ZlrGBHHrOjmBnr19hxYgtS0WvAFwZhK2WP/YY5yF9uKECCEEDGxuLxq1NBK51wFA==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10",
+                "@radix-ui/react-primitive": "1.0.3"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0",
+                "react-dom": "^16.8 || ^17.0 || ^18.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/@radix-ui/react-collection": {
             "version": "1.0.3",
             "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.3.tgz",
@@ -1994,6 +2064,48 @@
                 }
             }
         },
+        "node_modules/@radix-ui/react-focus-guards": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.1.tgz",
+            "integrity": "sha512-Rect2dWbQ8waGzhMavsIbmSVCgYxkXLxxR3ZvCX79JOglzdEy4JXMb98lq4hPxUbLr77nP0UOGf4rcMU+s1pUA==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-focus-scope": {
+            "version": "1.0.4",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.4.tgz",
+            "integrity": "sha512-sL04Mgvf+FmyvZeYfNu1EPAaaxD+aw7cYeIB9L9Fvq8+urhltTRaEo5ysKOpHuKPclsZcSUMKlN05x4u+CINpA==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10",
+                "@radix-ui/react-compose-refs": "1.0.1",
+                "@radix-ui/react-primitive": "1.0.3",
+                "@radix-ui/react-use-callback-ref": "1.0.1"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0",
+                "react-dom": "^16.8 || ^17.0 || ^18.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/@radix-ui/react-icons": {
             "version": "1.3.0",
             "resolved": "https://registry.npmjs.org/@radix-ui/react-icons/-/react-icons-1.3.0.tgz",
@@ -2043,6 +2155,38 @@
                 }
             }
         },
+        "node_modules/@radix-ui/react-popper": {
+            "version": "1.1.3",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.1.3.tgz",
+            "integrity": "sha512-cKpopj/5RHZWjrbF2846jBNacjQVwkP068DfmgrNJXpvVWrOvlAmE9xSiy5OqeE+Gi8D9fP+oDhUnPqNMY8/5w==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10",
+                "@floating-ui/react-dom": "^2.0.0",
+                "@radix-ui/react-arrow": "1.0.3",
+                "@radix-ui/react-compose-refs": "1.0.1",
+                "@radix-ui/react-context": "1.0.1",
+                "@radix-ui/react-primitive": "1.0.3",
+                "@radix-ui/react-use-callback-ref": "1.0.1",
+                "@radix-ui/react-use-layout-effect": "1.0.1",
+                "@radix-ui/react-use-rect": "1.0.1",
+                "@radix-ui/react-use-size": "1.0.1",
+                "@radix-ui/rect": "1.0.1"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0",
+                "react-dom": "^16.8 || ^17.0 || ^18.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/@radix-ui/react-portal": {
             "version": "1.0.4",
             "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.0.4.tgz",
@@ -2144,6 +2288,49 @@
                 }
             }
         },
+        "node_modules/@radix-ui/react-select": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.0.0.tgz",
+            "integrity": "sha512-RH5b7af4oHtkcHS7pG6Sgv5rk5Wxa7XI8W5gvB1N/yiuDGZxko1ynvOiVhFM7Cis2A8zxF9bTOUVbRDzPepe6w==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10",
+                "@radix-ui/number": "1.0.1",
+                "@radix-ui/primitive": "1.0.1",
+                "@radix-ui/react-collection": "1.0.3",
+                "@radix-ui/react-compose-refs": "1.0.1",
+                "@radix-ui/react-context": "1.0.1",
+                "@radix-ui/react-direction": "1.0.1",
+                "@radix-ui/react-dismissable-layer": "1.0.5",
+                "@radix-ui/react-focus-guards": "1.0.1",
+                "@radix-ui/react-focus-scope": "1.0.4",
+                "@radix-ui/react-id": "1.0.1",
+                "@radix-ui/react-popper": "1.1.3",
+                "@radix-ui/react-portal": "1.0.4",
+                "@radix-ui/react-primitive": "1.0.3",
+                "@radix-ui/react-slot": "1.0.2",
+                "@radix-ui/react-use-callback-ref": "1.0.1",
+                "@radix-ui/react-use-controllable-state": "1.0.1",
+                "@radix-ui/react-use-layout-effect": "1.0.1",
+                "@radix-ui/react-use-previous": "1.0.1",
+                "@radix-ui/react-visually-hidden": "1.0.3",
+                "aria-hidden": "^1.1.1",
+                "react-remove-scroll": "2.5.5"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0",
+                "react-dom": "^16.8 || ^17.0 || ^18.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/@radix-ui/react-slot": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
@@ -2226,6 +2413,40 @@
                 }
             }
         },
+        "node_modules/@radix-ui/react-tooltip": {
+            "version": "1.0.7",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.0.7.tgz",
+            "integrity": "sha512-lPh5iKNFVQ/jav/j6ZrWq3blfDJ0OH9R6FlNUHPMqdLuQ9vwDgFsRxvl8b7Asuy5c8xmoojHUxKHQSOAvMHxyw==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10",
+                "@radix-ui/primitive": "1.0.1",
+                "@radix-ui/react-compose-refs": "1.0.1",
+                "@radix-ui/react-context": "1.0.1",
+                "@radix-ui/react-dismissable-layer": "1.0.5",
+                "@radix-ui/react-id": "1.0.1",
+                "@radix-ui/react-popper": "1.1.3",
+                "@radix-ui/react-portal": "1.0.4",
+                "@radix-ui/react-presence": "1.0.1",
+                "@radix-ui/react-primitive": "1.0.3",
+                "@radix-ui/react-slot": "1.0.2",
+                "@radix-ui/react-use-controllable-state": "1.0.1",
+                "@radix-ui/react-visually-hidden": "1.0.3"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "@types/react-dom": "*",
+                "react": "^16.8 || ^17.0 || ^18.0",
+                "react-dom": "^16.8 || ^17.0 || ^18.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                },
+                "@types/react-dom": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/@radix-ui/react-use-callback-ref": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz",
@@ -2296,6 +2517,59 @@
                 }
             }
         },
+        "node_modules/@radix-ui/react-use-previous": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.0.1.tgz",
+            "integrity": "sha512-cV5La9DPwiQ7S0gf/0qiD6YgNqM5Fk97Kdrlc5yBcrF3jyEZQwm7vYFqMo4IfeHgJXsRaMvLABFtd0OVEmZhDw==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-use-rect": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.0.1.tgz",
+            "integrity": "sha512-Cq5DLuSiuYVKNU8orzJMbl15TXilTnJKUCltMVQg53BQOF1/C5toAaGrowkgksdBQ9H+SRL23g0HDmg9tvmxXw==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10",
+                "@radix-ui/rect": "1.0.1"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@radix-ui/react-use-size": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.0.1.tgz",
+            "integrity": "sha512-ibay+VqrgcaI6veAojjofPATwledXiSmX+C0KrBk/xgpX9rBzPV3OsfwlhQdUOFbh+LKQorLYT+xTXW9V8yd0g==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10",
+                "@radix-ui/react-use-layout-effect": "1.0.1"
+            },
+            "peerDependencies": {
+                "@types/react": "*",
+                "react": "^16.8 || ^17.0 || ^18.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/@radix-ui/react-visually-hidden": {
             "version": "1.0.3",
             "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.0.3.tgz",
@@ -2319,10 +2593,18 @@
                 }
             }
         },
+        "node_modules/@radix-ui/rect": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.0.1.tgz",
+            "integrity": "sha512-fyrgCaedtvMg9NK3en0pnOYJdtfwxUcNolezkNPUsoX57X8oQk+NkqcvzHXD2uKNij6GXmWU9NDru2IWjrO4BQ==",
+            "dependencies": {
+                "@babel/runtime": "^7.13.10"
+            }
+        },
         "node_modules/@remix-run/router": {
-            "version": "1.15.0",
-            "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.0.tgz",
-            "integrity": "sha512-HOil5aFtme37dVQTB6M34G95kPM3MMuqSmIRVCC52eKV+Y/tGSqw9P3rWhlAx6A+mz+MoX+XxsGsNJbaI5qCgQ==",
+            "version": "1.15.3",
+            "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.3.tgz",
+            "integrity": "sha512-Oy8rmScVrVxWZVOpEF57ovlnhpZ8CCPlnIIumVcV9nFdiSIrus99+Lw78ekXyGvVDlIsFJbSfmSovJUhCWYV3w==",
             "engines": {
                 "node": ">=14.0.0"
             }
@@ -2937,6 +3219,17 @@
             "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
             "dev": true
         },
+        "node_modules/aria-hidden": {
+            "version": "1.2.4",
+            "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.4.tgz",
+            "integrity": "sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==",
+            "dependencies": {
+                "tslib": "^2.0.0"
+            },
+            "engines": {
+                "node": ">=10"
+            }
+        },
         "node_modules/array-buffer-byte-length": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.0.tgz",
@@ -4227,6 +4520,11 @@
                 "node": ">=0.4.0"
             }
         },
+        "node_modules/detect-node-es": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
+            "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="
+        },
         "node_modules/didyoumean": {
             "version": "1.2.2",
             "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -4282,6 +4580,39 @@
             "integrity": "sha512-z/6oZ/Muqk4BaE7P69bXhUhpJbUM9ZJeka43ZwxsDshKtePns4mhBlh8bU5+yrnOnz3fhG82XLzGUXazOmsWnA==",
             "dev": true
         },
+        "node_modules/embla-carousel": {
+            "version": "8.0.1",
+            "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.0.1.tgz",
+            "integrity": "sha512-RsaMRyBCd144N95gb3XoI+H9zj3RI4y0qcfvKYEh2tIAIEenL9CW9vwzltCeoYkWYipGdkvup+HGT9ewG1YTEw=="
+        },
+        "node_modules/embla-carousel-autoplay": {
+            "version": "8.0.1",
+            "resolved": "https://registry.npmjs.org/embla-carousel-autoplay/-/embla-carousel-autoplay-8.0.1.tgz",
+            "integrity": "sha512-4zcB6jVSGTJSXL7uroccjak9U+lyyoZTO4NISwdCHNMYVbIra8aZGEz0I/4Ql753do6jqjaRE8MsCBhJbt6u6A==",
+            "peerDependencies": {
+                "embla-carousel": "8.0.1"
+            }
+        },
+        "node_modules/embla-carousel-react": {
+            "version": "8.0.1",
+            "resolved": "https://registry.npmjs.org/embla-carousel-react/-/embla-carousel-react-8.0.1.tgz",
+            "integrity": "sha512-cpFQ/HwCsjBjzpu9Z9IHmZ9DaCSf/wo4q+qUTcRW3SsNv+1Q8IY7Y8J2QIyTmz0vOWY7tliu3uE2gqRH7ZDwOQ==",
+            "dependencies": {
+                "embla-carousel": "8.0.1",
+                "embla-carousel-reactive-utils": "8.0.1"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.1 || ^18.0.0"
+            }
+        },
+        "node_modules/embla-carousel-reactive-utils": {
+            "version": "8.0.1",
+            "resolved": "https://registry.npmjs.org/embla-carousel-reactive-utils/-/embla-carousel-reactive-utils-8.0.1.tgz",
+            "integrity": "sha512-KBSkz2h9LwVFkOrwzIJKgXbmEDlIShkreeOHnV8Cph09AdBMzb412nRkcctbeDcuG9x3CVsqLzJrSXnZeYhFPQ==",
+            "peerDependencies": {
+                "embla-carousel": "8.0.1"
+            }
+        },
         "node_modules/emoji-regex": {
             "version": "8.0.0",
             "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
@@ -5418,6 +5749,14 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/get-nonce": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
+            "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==",
+            "engines": {
+                "node": ">=6"
+            }
+        },
         "node_modules/get-stream": {
             "version": "6.0.1",
             "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
@@ -5861,6 +6200,14 @@
                 "node": ">= 0.4"
             }
         },
+        "node_modules/invariant": {
+            "version": "2.2.4",
+            "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+            "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+            "dependencies": {
+                "loose-envify": "^1.0.0"
+            }
+        },
         "node_modules/is-array-buffer": {
             "version": "3.0.2",
             "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.2.tgz",
@@ -6829,6 +7176,14 @@
                 "yallist": "^3.0.2"
             }
         },
+        "node_modules/lucide-react": {
+            "version": "0.365.0",
+            "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.365.0.tgz",
+            "integrity": "sha512-sJYpPyyzGHI4B3pys+XSFnE4qtSWc68rFnDLxbNNKjkLST5XSx9DNn5+1Z3eFgFiw39PphNRiVBSVb+AL3oKwA==",
+            "peerDependencies": {
+                "react": "^16.5.1 || ^17.0.0 || ^18.0.0"
+            }
+        },
         "node_modules/magic-string": {
             "version": "0.27.0",
             "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.27.0.tgz",
@@ -7818,9 +8173,9 @@
             ]
         },
         "node_modules/react": {
-            "version": "18.2.0",
-            "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
-            "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
+            "version": "18.3.1",
+            "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+            "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
             "dependencies": {
                 "loose-envify": "^1.1.0"
             },
@@ -7829,15 +8184,15 @@
             }
         },
         "node_modules/react-dom": {
-            "version": "18.2.0",
-            "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
-            "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
+            "version": "18.3.1",
+            "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+            "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
             "dependencies": {
                 "loose-envify": "^1.1.0",
-                "scheduler": "^0.23.0"
+                "scheduler": "^0.23.2"
             },
             "peerDependencies": {
-                "react": "^18.2.0"
+                "react": "^18.3.1"
             }
         },
         "node_modules/react-hook-form": {
@@ -7886,12 +8241,57 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/react-remove-scroll": {
+            "version": "2.5.5",
+            "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz",
+            "integrity": "sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==",
+            "dependencies": {
+                "react-remove-scroll-bar": "^2.3.3",
+                "react-style-singleton": "^2.2.1",
+                "tslib": "^2.1.0",
+                "use-callback-ref": "^1.3.0",
+                "use-sidecar": "^1.1.2"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "peerDependencies": {
+                "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+                "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/react-remove-scroll-bar": {
+            "version": "2.3.6",
+            "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.6.tgz",
+            "integrity": "sha512-DtSYaao4mBmX+HDo5YWYdBWQwYIQQshUV/dVxFxK+KM26Wjwp1gZ6rv6OC3oujI6Bfu6Xyg3TwK533AQutsn/g==",
+            "dependencies": {
+                "react-style-singleton": "^2.2.1",
+                "tslib": "^2.0.0"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "peerDependencies": {
+                "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+                "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/react-router": {
-            "version": "6.22.0",
-            "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.0.tgz",
-            "integrity": "sha512-q2yemJeg6gw/YixRlRnVx6IRJWZD6fonnfZhN1JIOhV2iJCPeRNSH3V1ISwHf+JWcESzLC3BOLD1T07tmO5dmg==",
+            "version": "6.22.3",
+            "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.3.tgz",
+            "integrity": "sha512-dr2eb3Mj5zK2YISHK++foM9w4eBnO23eKnZEDs7c880P6oKbrjz/Svg9+nxqtHQK+oMW4OtjZca0RqPglXxguQ==",
             "dependencies": {
-                "@remix-run/router": "1.15.0"
+                "@remix-run/router": "1.15.3"
             },
             "engines": {
                 "node": ">=14.0.0"
@@ -7901,12 +8301,12 @@
             }
         },
         "node_modules/react-router-dom": {
-            "version": "6.22.0",
-            "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.0.tgz",
-            "integrity": "sha512-z2w+M4tH5wlcLmH3BMMOMdrtrJ9T3oJJNsAlBJbwk+8Syxd5WFJ7J5dxMEW0/GEXD1BBis4uXRrNIz3mORr0ag==",
+            "version": "6.22.3",
+            "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.3.tgz",
+            "integrity": "sha512-7ZILI7HjcE+p31oQvwbokjk6OA/bnFxrhJ19n82Ex9Ph8fNAq+Hm/7KchpMGlTgWhUxRHMMCut+vEtNpWpowKw==",
             "dependencies": {
-                "@remix-run/router": "1.15.0",
-                "react-router": "6.22.0"
+                "@remix-run/router": "1.15.3",
+                "react-router": "6.22.3"
             },
             "engines": {
                 "node": ">=14.0.0"
@@ -7916,6 +8316,28 @@
                 "react-dom": ">=16.8"
             }
         },
+        "node_modules/react-style-singleton": {
+            "version": "2.2.1",
+            "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
+            "integrity": "sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==",
+            "dependencies": {
+                "get-nonce": "^1.0.0",
+                "invariant": "^2.2.4",
+                "tslib": "^2.0.0"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "peerDependencies": {
+                "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+                "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/read-cache": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -8328,9 +8750,9 @@
             }
         },
         "node_modules/scheduler": {
-            "version": "0.23.0",
-            "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
-            "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
+            "version": "0.23.2",
+            "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+            "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
             "dependencies": {
                 "loose-envify": "^1.1.0"
             }
@@ -9522,6 +9944,47 @@
                 "requires-port": "^1.0.0"
             }
         },
+        "node_modules/use-callback-ref": {
+            "version": "1.3.2",
+            "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.2.tgz",
+            "integrity": "sha512-elOQwe6Q8gqZgDA8mrh44qRTQqpIHDcZ3hXTLjBe1i4ph8XpNJnO+aQf3NaG+lriLopI4HMx9VjQLfPQ6vhnoA==",
+            "dependencies": {
+                "tslib": "^2.0.0"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "peerDependencies": {
+                "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+                "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/use-sidecar": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz",
+            "integrity": "sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==",
+            "dependencies": {
+                "detect-node-es": "^1.1.0",
+                "tslib": "^2.0.0"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "peerDependencies": {
+                "@types/react": "^16.9.0 || ^17.0.0 || ^18.0.0",
+                "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/react": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/util-deprecate": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -10952,6 +11415,36 @@
             "resolved": "https://registry.npmjs.org/@firebase/webchannel-wrapper/-/webchannel-wrapper-0.9.0.tgz",
             "integrity": "sha512-BpiZLBWdLFw+qFel9p3Zs1jD6QmH7Ii4aTDu6+vx8ShdidChZUXqDhYJly4ZjSgQh54miXbBgBrk0S+jTIh/Qg=="
         },
+        "@floating-ui/core": {
+            "version": "1.6.0",
+            "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.0.tgz",
+            "integrity": "sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==",
+            "requires": {
+                "@floating-ui/utils": "^0.2.1"
+            }
+        },
+        "@floating-ui/dom": {
+            "version": "1.6.3",
+            "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.3.tgz",
+            "integrity": "sha512-RnDthu3mzPlQ31Ss/BTwQ1zjzIhr3lk1gZB1OC56h/1vEtaXkESrOqL5fQVMfXpwGtRwX+YsZBdyHtJMQnkArw==",
+            "requires": {
+                "@floating-ui/core": "^1.0.0",
+                "@floating-ui/utils": "^0.2.0"
+            }
+        },
+        "@floating-ui/react-dom": {
+            "version": "2.0.8",
+            "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.8.tgz",
+            "integrity": "sha512-HOdqOt3R3OGeTKidaLvJKcgg75S6tibQ3Tif4eyd91QnIJWr0NLvoXFpJA/j8HqkFSL68GDca9AuyWEHlhyClw==",
+            "requires": {
+                "@floating-ui/dom": "^1.6.1"
+            }
+        },
+        "@floating-ui/utils": {
+            "version": "0.2.1",
+            "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz",
+            "integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q=="
+        },
         "@grpc/grpc-js": {
             "version": "1.7.3",
             "resolved": "https://registry.npmjs.org/@grpc/grpc-js/-/grpc-js-1.7.3.tgz",
@@ -11237,6 +11730,14 @@
             "resolved": "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz",
             "integrity": "sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw=="
         },
+        "@radix-ui/number": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.0.1.tgz",
+            "integrity": "sha512-T5gIdVO2mmPW3NNhjNgEP3cqMXjXL9UbO0BzWcXfvdBs+BohbQxvd/K5hSVKmn9/lbTdsQVKbUcP5WLCwvUbBg==",
+            "requires": {
+                "@babel/runtime": "^7.13.10"
+            }
+        },
         "@radix-ui/primitive": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.1.tgz",
@@ -11245,6 +11746,15 @@
                 "@babel/runtime": "^7.13.10"
             }
         },
+        "@radix-ui/react-arrow": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.0.3.tgz",
+            "integrity": "sha512-wSP+pHsB/jQRaL6voubsQ/ZlrGBHHrOjmBnr19hxYgtS0WvAFwZhK2WP/YY5yF9uKECCEEDGxuLxq1NBK51wFA==",
+            "requires": {
+                "@babel/runtime": "^7.13.10",
+                "@radix-ui/react-primitive": "1.0.3"
+            }
+        },
         "@radix-ui/react-collection": {
             "version": "1.0.3",
             "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.3.tgz",
@@ -11294,6 +11804,25 @@
                 "@radix-ui/react-use-escape-keydown": "1.0.3"
             }
         },
+        "@radix-ui/react-focus-guards": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.1.tgz",
+            "integrity": "sha512-Rect2dWbQ8waGzhMavsIbmSVCgYxkXLxxR3ZvCX79JOglzdEy4JXMb98lq4hPxUbLr77nP0UOGf4rcMU+s1pUA==",
+            "requires": {
+                "@babel/runtime": "^7.13.10"
+            }
+        },
+        "@radix-ui/react-focus-scope": {
+            "version": "1.0.4",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.4.tgz",
+            "integrity": "sha512-sL04Mgvf+FmyvZeYfNu1EPAaaxD+aw7cYeIB9L9Fvq8+urhltTRaEo5ysKOpHuKPclsZcSUMKlN05x4u+CINpA==",
+            "requires": {
+                "@babel/runtime": "^7.13.10",
+                "@radix-ui/react-compose-refs": "1.0.1",
+                "@radix-ui/react-primitive": "1.0.3",
+                "@radix-ui/react-use-callback-ref": "1.0.1"
+            }
+        },
         "@radix-ui/react-icons": {
             "version": "1.3.0",
             "resolved": "https://registry.npmjs.org/@radix-ui/react-icons/-/react-icons-1.3.0.tgz",
@@ -11318,6 +11847,24 @@
                 "@radix-ui/react-primitive": "1.0.3"
             }
         },
+        "@radix-ui/react-popper": {
+            "version": "1.1.3",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.1.3.tgz",
+            "integrity": "sha512-cKpopj/5RHZWjrbF2846jBNacjQVwkP068DfmgrNJXpvVWrOvlAmE9xSiy5OqeE+Gi8D9fP+oDhUnPqNMY8/5w==",
+            "requires": {
+                "@babel/runtime": "^7.13.10",
+                "@floating-ui/react-dom": "^2.0.0",
+                "@radix-ui/react-arrow": "1.0.3",
+                "@radix-ui/react-compose-refs": "1.0.1",
+                "@radix-ui/react-context": "1.0.1",
+                "@radix-ui/react-primitive": "1.0.3",
+                "@radix-ui/react-use-callback-ref": "1.0.1",
+                "@radix-ui/react-use-layout-effect": "1.0.1",
+                "@radix-ui/react-use-rect": "1.0.1",
+                "@radix-ui/react-use-size": "1.0.1",
+                "@radix-ui/rect": "1.0.1"
+            }
+        },
         "@radix-ui/react-portal": {
             "version": "1.0.4",
             "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.0.4.tgz",
@@ -11363,6 +11910,35 @@
                 "@radix-ui/react-use-controllable-state": "1.0.1"
             }
         },
+        "@radix-ui/react-select": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.0.0.tgz",
+            "integrity": "sha512-RH5b7af4oHtkcHS7pG6Sgv5rk5Wxa7XI8W5gvB1N/yiuDGZxko1ynvOiVhFM7Cis2A8zxF9bTOUVbRDzPepe6w==",
+            "requires": {
+                "@babel/runtime": "^7.13.10",
+                "@radix-ui/number": "1.0.1",
+                "@radix-ui/primitive": "1.0.1",
+                "@radix-ui/react-collection": "1.0.3",
+                "@radix-ui/react-compose-refs": "1.0.1",
+                "@radix-ui/react-context": "1.0.1",
+                "@radix-ui/react-direction": "1.0.1",
+                "@radix-ui/react-dismissable-layer": "1.0.5",
+                "@radix-ui/react-focus-guards": "1.0.1",
+                "@radix-ui/react-focus-scope": "1.0.4",
+                "@radix-ui/react-id": "1.0.1",
+                "@radix-ui/react-popper": "1.1.3",
+                "@radix-ui/react-portal": "1.0.4",
+                "@radix-ui/react-primitive": "1.0.3",
+                "@radix-ui/react-slot": "1.0.2",
+                "@radix-ui/react-use-callback-ref": "1.0.1",
+                "@radix-ui/react-use-controllable-state": "1.0.1",
+                "@radix-ui/react-use-layout-effect": "1.0.1",
+                "@radix-ui/react-use-previous": "1.0.1",
+                "@radix-ui/react-visually-hidden": "1.0.3",
+                "aria-hidden": "^1.1.1",
+                "react-remove-scroll": "2.5.5"
+            }
+        },
         "@radix-ui/react-slot": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
@@ -11408,6 +11984,26 @@
                 "@radix-ui/react-visually-hidden": "1.0.3"
             }
         },
+        "@radix-ui/react-tooltip": {
+            "version": "1.0.7",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.0.7.tgz",
+            "integrity": "sha512-lPh5iKNFVQ/jav/j6ZrWq3blfDJ0OH9R6FlNUHPMqdLuQ9vwDgFsRxvl8b7Asuy5c8xmoojHUxKHQSOAvMHxyw==",
+            "requires": {
+                "@babel/runtime": "^7.13.10",
+                "@radix-ui/primitive": "1.0.1",
+                "@radix-ui/react-compose-refs": "1.0.1",
+                "@radix-ui/react-context": "1.0.1",
+                "@radix-ui/react-dismissable-layer": "1.0.5",
+                "@radix-ui/react-id": "1.0.1",
+                "@radix-ui/react-popper": "1.1.3",
+                "@radix-ui/react-portal": "1.0.4",
+                "@radix-ui/react-presence": "1.0.1",
+                "@radix-ui/react-primitive": "1.0.3",
+                "@radix-ui/react-slot": "1.0.2",
+                "@radix-ui/react-use-controllable-state": "1.0.1",
+                "@radix-ui/react-visually-hidden": "1.0.3"
+            }
+        },
         "@radix-ui/react-use-callback-ref": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz",
@@ -11442,6 +12038,32 @@
                 "@babel/runtime": "^7.13.10"
             }
         },
+        "@radix-ui/react-use-previous": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.0.1.tgz",
+            "integrity": "sha512-cV5La9DPwiQ7S0gf/0qiD6YgNqM5Fk97Kdrlc5yBcrF3jyEZQwm7vYFqMo4IfeHgJXsRaMvLABFtd0OVEmZhDw==",
+            "requires": {
+                "@babel/runtime": "^7.13.10"
+            }
+        },
+        "@radix-ui/react-use-rect": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.0.1.tgz",
+            "integrity": "sha512-Cq5DLuSiuYVKNU8orzJMbl15TXilTnJKUCltMVQg53BQOF1/C5toAaGrowkgksdBQ9H+SRL23g0HDmg9tvmxXw==",
+            "requires": {
+                "@babel/runtime": "^7.13.10",
+                "@radix-ui/rect": "1.0.1"
+            }
+        },
+        "@radix-ui/react-use-size": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.0.1.tgz",
+            "integrity": "sha512-ibay+VqrgcaI6veAojjofPATwledXiSmX+C0KrBk/xgpX9rBzPV3OsfwlhQdUOFbh+LKQorLYT+xTXW9V8yd0g==",
+            "requires": {
+                "@babel/runtime": "^7.13.10",
+                "@radix-ui/react-use-layout-effect": "1.0.1"
+            }
+        },
         "@radix-ui/react-visually-hidden": {
             "version": "1.0.3",
             "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.0.3.tgz",
@@ -11451,10 +12073,18 @@
                 "@radix-ui/react-primitive": "1.0.3"
             }
         },
+        "@radix-ui/rect": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.0.1.tgz",
+            "integrity": "sha512-fyrgCaedtvMg9NK3en0pnOYJdtfwxUcNolezkNPUsoX57X8oQk+NkqcvzHXD2uKNij6GXmWU9NDru2IWjrO4BQ==",
+            "requires": {
+                "@babel/runtime": "^7.13.10"
+            }
+        },
         "@remix-run/router": {
-            "version": "1.15.0",
-            "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.0.tgz",
-            "integrity": "sha512-HOil5aFtme37dVQTB6M34G95kPM3MMuqSmIRVCC52eKV+Y/tGSqw9P3rWhlAx6A+mz+MoX+XxsGsNJbaI5qCgQ=="
+            "version": "1.15.3",
+            "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.3.tgz",
+            "integrity": "sha512-Oy8rmScVrVxWZVOpEF57ovlnhpZ8CCPlnIIumVcV9nFdiSIrus99+Lw78ekXyGvVDlIsFJbSfmSovJUhCWYV3w=="
         },
         "@rollup/pluginutils": {
             "version": "4.2.1",
@@ -11885,6 +12515,14 @@
             "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
             "dev": true
         },
+        "aria-hidden": {
+            "version": "1.2.4",
+            "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.4.tgz",
+            "integrity": "sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==",
+            "requires": {
+                "tslib": "^2.0.0"
+            }
+        },
         "array-buffer-byte-length": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.0.tgz",
@@ -12776,6 +13414,11 @@
             "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
             "dev": true
         },
+        "detect-node-es": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
+            "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="
+        },
         "didyoumean": {
             "version": "1.2.2",
             "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -12825,6 +13468,32 @@
             "integrity": "sha512-z/6oZ/Muqk4BaE7P69bXhUhpJbUM9ZJeka43ZwxsDshKtePns4mhBlh8bU5+yrnOnz3fhG82XLzGUXazOmsWnA==",
             "dev": true
         },
+        "embla-carousel": {
+            "version": "8.0.1",
+            "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.0.1.tgz",
+            "integrity": "sha512-RsaMRyBCd144N95gb3XoI+H9zj3RI4y0qcfvKYEh2tIAIEenL9CW9vwzltCeoYkWYipGdkvup+HGT9ewG1YTEw=="
+        },
+        "embla-carousel-autoplay": {
+            "version": "8.0.1",
+            "resolved": "https://registry.npmjs.org/embla-carousel-autoplay/-/embla-carousel-autoplay-8.0.1.tgz",
+            "integrity": "sha512-4zcB6jVSGTJSXL7uroccjak9U+lyyoZTO4NISwdCHNMYVbIra8aZGEz0I/4Ql753do6jqjaRE8MsCBhJbt6u6A==",
+            "requires": {}
+        },
+        "embla-carousel-react": {
+            "version": "8.0.1",
+            "resolved": "https://registry.npmjs.org/embla-carousel-react/-/embla-carousel-react-8.0.1.tgz",
+            "integrity": "sha512-cpFQ/HwCsjBjzpu9Z9IHmZ9DaCSf/wo4q+qUTcRW3SsNv+1Q8IY7Y8J2QIyTmz0vOWY7tliu3uE2gqRH7ZDwOQ==",
+            "requires": {
+                "embla-carousel": "8.0.1",
+                "embla-carousel-reactive-utils": "8.0.1"
+            }
+        },
+        "embla-carousel-reactive-utils": {
+            "version": "8.0.1",
+            "resolved": "https://registry.npmjs.org/embla-carousel-reactive-utils/-/embla-carousel-reactive-utils-8.0.1.tgz",
+            "integrity": "sha512-KBSkz2h9LwVFkOrwzIJKgXbmEDlIShkreeOHnV8Cph09AdBMzb412nRkcctbeDcuG9x3CVsqLzJrSXnZeYhFPQ==",
+            "requires": {}
+        },
         "emoji-regex": {
             "version": "8.0.0",
             "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
@@ -13691,6 +14360,11 @@
                 "hasown": "^2.0.0"
             }
         },
+        "get-nonce": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
+            "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q=="
+        },
         "get-stream": {
             "version": "6.0.1",
             "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
@@ -14007,6 +14681,14 @@
                 "side-channel": "^1.0.4"
             }
         },
+        "invariant": {
+            "version": "2.2.4",
+            "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+            "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+            "requires": {
+                "loose-envify": "^1.0.0"
+            }
+        },
         "is-array-buffer": {
             "version": "3.0.2",
             "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.2.tgz",
@@ -14688,6 +15370,12 @@
                 "yallist": "^3.0.2"
             }
         },
+        "lucide-react": {
+            "version": "0.365.0",
+            "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.365.0.tgz",
+            "integrity": "sha512-sJYpPyyzGHI4B3pys+XSFnE4qtSWc68rFnDLxbNNKjkLST5XSx9DNn5+1Z3eFgFiw39PphNRiVBSVb+AL3oKwA==",
+            "requires": {}
+        },
         "magic-string": {
             "version": "0.27.0",
             "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.27.0.tgz",
@@ -15339,20 +16027,20 @@
             "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A=="
         },
         "react": {
-            "version": "18.2.0",
-            "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
-            "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
+            "version": "18.3.1",
+            "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+            "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
             "requires": {
                 "loose-envify": "^1.1.0"
             }
         },
         "react-dom": {
-            "version": "18.2.0",
-            "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
-            "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
+            "version": "18.3.1",
+            "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+            "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
             "requires": {
                 "loose-envify": "^1.1.0",
-                "scheduler": "^0.23.0"
+                "scheduler": "^0.23.2"
             }
         },
         "react-hook-form": {
@@ -15381,21 +16069,52 @@
             "integrity": "sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==",
             "dev": true
         },
+        "react-remove-scroll": {
+            "version": "2.5.5",
+            "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz",
+            "integrity": "sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==",
+            "requires": {
+                "react-remove-scroll-bar": "^2.3.3",
+                "react-style-singleton": "^2.2.1",
+                "tslib": "^2.1.0",
+                "use-callback-ref": "^1.3.0",
+                "use-sidecar": "^1.1.2"
+            }
+        },
+        "react-remove-scroll-bar": {
+            "version": "2.3.6",
+            "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.6.tgz",
+            "integrity": "sha512-DtSYaao4mBmX+HDo5YWYdBWQwYIQQshUV/dVxFxK+KM26Wjwp1gZ6rv6OC3oujI6Bfu6Xyg3TwK533AQutsn/g==",
+            "requires": {
+                "react-style-singleton": "^2.2.1",
+                "tslib": "^2.0.0"
+            }
+        },
         "react-router": {
-            "version": "6.22.0",
-            "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.0.tgz",
-            "integrity": "sha512-q2yemJeg6gw/YixRlRnVx6IRJWZD6fonnfZhN1JIOhV2iJCPeRNSH3V1ISwHf+JWcESzLC3BOLD1T07tmO5dmg==",
+            "version": "6.22.3",
+            "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.3.tgz",
+            "integrity": "sha512-dr2eb3Mj5zK2YISHK++foM9w4eBnO23eKnZEDs7c880P6oKbrjz/Svg9+nxqtHQK+oMW4OtjZca0RqPglXxguQ==",
             "requires": {
-                "@remix-run/router": "1.15.0"
+                "@remix-run/router": "1.15.3"
             }
         },
         "react-router-dom": {
-            "version": "6.22.0",
-            "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.0.tgz",
-            "integrity": "sha512-z2w+M4tH5wlcLmH3BMMOMdrtrJ9T3oJJNsAlBJbwk+8Syxd5WFJ7J5dxMEW0/GEXD1BBis4uXRrNIz3mORr0ag==",
+            "version": "6.22.3",
+            "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.3.tgz",
+            "integrity": "sha512-7ZILI7HjcE+p31oQvwbokjk6OA/bnFxrhJ19n82Ex9Ph8fNAq+Hm/7KchpMGlTgWhUxRHMMCut+vEtNpWpowKw==",
             "requires": {
-                "@remix-run/router": "1.15.0",
-                "react-router": "6.22.0"
+                "@remix-run/router": "1.15.3",
+                "react-router": "6.22.3"
+            }
+        },
+        "react-style-singleton": {
+            "version": "2.2.1",
+            "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
+            "integrity": "sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==",
+            "requires": {
+                "get-nonce": "^1.0.0",
+                "invariant": "^2.2.4",
+                "tslib": "^2.0.0"
             }
         },
         "read-cache": {
@@ -15676,9 +16395,9 @@
             }
         },
         "scheduler": {
-            "version": "0.23.0",
-            "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
-            "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
+            "version": "0.23.2",
+            "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+            "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
             "requires": {
                 "loose-envify": "^1.1.0"
             }
@@ -16545,6 +17264,23 @@
                 "requires-port": "^1.0.0"
             }
         },
+        "use-callback-ref": {
+            "version": "1.3.2",
+            "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.2.tgz",
+            "integrity": "sha512-elOQwe6Q8gqZgDA8mrh44qRTQqpIHDcZ3hXTLjBe1i4ph8XpNJnO+aQf3NaG+lriLopI4HMx9VjQLfPQ6vhnoA==",
+            "requires": {
+                "tslib": "^2.0.0"
+            }
+        },
+        "use-sidecar": {
+            "version": "1.1.2",
+            "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz",
+            "integrity": "sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==",
+            "requires": {
+                "detect-node-es": "^1.1.0",
+                "tslib": "^2.0.0"
+            }
+        },
         "util-deprecate": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
diff --git a/package.json b/package.json
index 915d21c..e2af9e6 100644
--- a/package.json
+++ b/package.json
@@ -16,20 +16,25 @@
         "@hookform/resolvers": "^3.3.4",
         "@radix-ui/react-icons": "^1.3.0",
         "@radix-ui/react-label": "^2.0.2",
+        "@radix-ui/react-select": "^2.0.0",
         "@radix-ui/react-slot": "^1.0.2",
         "@radix-ui/react-tabs": "^1.0.4",
         "@radix-ui/react-toast": "^1.1.5",
+        "@radix-ui/react-tooltip": "^1.0.7",
         "@tanstack/react-query": "^5.17.8",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.0",
         "date-fns": "^2.29.3",
+        "embla-carousel-autoplay": "^8.0.1",
+        "embla-carousel-react": "^8.0.1",
         "firebase": "^9.17.1",
         "jotai": "^2.6.4",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0",
+        "lucide-react": "^0.365.0",
+        "react": "^18.3.0",
+        "react-dom": "^18.3.0",
         "react-hook-form": "^7.49.3",
         "react-loader-spinner": "^6.1.6",
-        "react-router-dom": "^6.22.0",
+        "react-router-dom": "^6.22.3",
         "tailwind-merge": "^2.2.1",
         "tailwindcss-animate": "^1.0.7",
         "zod": "^3.22.4"
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
new file mode 100644
index 0000000..f3a05c6
--- /dev/null
+++ b/src/components/ui/card.tsx
@@ -0,0 +1,57 @@
+/* eslint-disable react/prop-types */
+import * as React from 'react'
+
+import { cn } from '@utils/utils'
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+    ({ className, ...props }, ref) => (
+        <div
+            ref={ref}
+            className={cn('rounded-xl border bg-card text-card-foreground shadow', className)}
+            {...props}
+        />
+    )
+)
+Card.displayName = 'Card'
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+    ({ className, ...props }, ref) => (
+        <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
+    )
+)
+CardHeader.displayName = 'CardHeader'
+
+const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+    ({ className, ...props }, ref) => (
+        <h3
+            ref={ref}
+            className={cn('font-semibold leading-none tracking-tight', className)}
+            {...props}
+        />
+    )
+)
+CardTitle.displayName = 'CardTitle'
+
+const CardDescription = React.forwardRef<
+    HTMLParagraphElement,
+    React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+    <p ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
+))
+CardDescription.displayName = 'CardDescription'
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+    ({ className, ...props }, ref) => (
+        <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+    )
+)
+CardContent.displayName = 'CardContent'
+
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+    ({ className, ...props }, ref) => (
+        <div ref={ref} className={cn('flex items-center p-6 pt-0', className)} {...props} />
+    )
+)
+CardFooter.displayName = 'CardFooter'
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
diff --git a/src/components/ui/carousel.tsx b/src/components/ui/carousel.tsx
new file mode 100644
index 0000000..0af3bde
--- /dev/null
+++ b/src/components/ui/carousel.tsx
@@ -0,0 +1,236 @@
+/* eslint-disable react/prop-types */
+import * as React from 'react'
+
+import { ArrowLeftIcon, ArrowRightIcon } from '@radix-ui/react-icons'
+import useEmblaCarousel, { type UseEmblaCarouselType } from 'embla-carousel-react'
+
+import { cn } from '@utils/utils'
+
+import { Button } from './button'
+
+type CarouselApi = UseEmblaCarouselType[1]
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
+type CarouselOptions = UseCarouselParameters[0]
+type CarouselPlugin = UseCarouselParameters[1]
+
+type CarouselProps = {
+    opts?: CarouselOptions
+    plugins?: CarouselPlugin
+    orientation?: 'horizontal' | 'vertical'
+    setApi?: (api: CarouselApi) => void
+}
+
+type CarouselContextProps = {
+    carouselRef: ReturnType<typeof useEmblaCarousel>[0]
+    api: ReturnType<typeof useEmblaCarousel>[1]
+    scrollPrev: () => void
+    scrollNext: () => void
+    canScrollPrev: boolean
+    canScrollNext: boolean
+} & CarouselProps
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null)
+
+function useCarousel() {
+    const context = React.useContext(CarouselContext)
+
+    if (!context) {
+        throw new Error('useCarousel must be used within a <Carousel />')
+    }
+
+    return context
+}
+
+const Carousel = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement> & CarouselProps
+>(({ orientation = 'horizontal', opts, setApi, plugins, className, children, ...props }, ref) => {
+    const [carouselRef, api] = useEmblaCarousel(
+        {
+            ...opts,
+            axis: orientation === 'horizontal' ? 'x' : 'y'
+        },
+        plugins
+    )
+    const [canScrollPrev, setCanScrollPrev] = React.useState(false)
+    const [canScrollNext, setCanScrollNext] = React.useState(false)
+
+    const onSelect = React.useCallback((api: CarouselApi) => {
+        if (!api) {
+            return
+        }
+
+        setCanScrollPrev(api.canScrollPrev())
+        setCanScrollNext(api.canScrollNext())
+    }, [])
+
+    const scrollPrev = React.useCallback(() => {
+        api?.scrollPrev()
+    }, [api])
+
+    const scrollNext = React.useCallback(() => {
+        api?.scrollNext()
+    }, [api])
+
+    const handleKeyDown = React.useCallback(
+        (event: React.KeyboardEvent<HTMLDivElement>) => {
+            if (event.key === 'ArrowLeft') {
+                event.preventDefault()
+                scrollPrev()
+            } else if (event.key === 'ArrowRight') {
+                event.preventDefault()
+                scrollNext()
+            }
+        },
+        [scrollPrev, scrollNext]
+    )
+
+    React.useEffect(() => {
+        if (!api || !setApi) {
+            return
+        }
+
+        setApi(api)
+    }, [api, setApi])
+
+    React.useEffect(() => {
+        if (!api) {
+            return
+        }
+
+        onSelect(api)
+        api.on('reInit', onSelect)
+        api.on('select', onSelect)
+
+        return () => {
+            api?.off('select', onSelect)
+        }
+    }, [api, onSelect])
+
+    return (
+        <CarouselContext.Provider
+            value={{
+                carouselRef,
+                api: api,
+                opts,
+                orientation: orientation || (opts?.axis === 'y' ? 'vertical' : 'horizontal'),
+                scrollPrev,
+                scrollNext,
+                canScrollPrev,
+                canScrollNext
+            }}
+        >
+            <div
+                ref={ref}
+                onKeyDownCapture={handleKeyDown}
+                className={cn('relative', className)}
+                role="region"
+                aria-roledescription="carousel"
+                {...props}
+            >
+                {children}
+            </div>
+        </CarouselContext.Provider>
+    )
+})
+Carousel.displayName = 'Carousel'
+
+const CarouselContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+    ({ className, ...props }, ref) => {
+        const { carouselRef, orientation } = useCarousel()
+
+        return (
+            <div ref={carouselRef} className="overflow-hidden">
+                <div
+                    ref={ref}
+                    className={cn(
+                        'flex',
+                        orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',
+                        className
+                    )}
+                    {...props}
+                />
+            </div>
+        )
+    }
+)
+CarouselContent.displayName = 'CarouselContent'
+
+const CarouselItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+    ({ className, ...props }, ref) => {
+        const { orientation } = useCarousel()
+
+        return (
+            <div
+                ref={ref}
+                role="group"
+                aria-roledescription="slide"
+                className={cn(
+                    'min-w-0 shrink-0 grow-0 basis-full',
+                    orientation === 'horizontal' ? 'pl-4' : 'pt-4',
+                    className
+                )}
+                {...props}
+            />
+        )
+    }
+)
+CarouselItem.displayName = 'CarouselItem'
+
+const CarouselPrevious = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(
+    ({ className, variant = 'outline', size = 'icon', ...props }, ref) => {
+        const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+
+        return (
+            <Button
+                ref={ref}
+                variant={variant}
+                size={size}
+                className={cn(
+                    'absolute  h-8 w-8 rounded-full',
+                    orientation === 'horizontal'
+                        ? '-left-12 top-1/2 -translate-y-1/2'
+                        : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
+                    className
+                )}
+                disabled={!canScrollPrev}
+                onClick={scrollPrev}
+                {...props}
+            >
+                <ArrowLeftIcon className="h-4 w-4" />
+                <span className="sr-only">Previous slide</span>
+            </Button>
+        )
+    }
+)
+CarouselPrevious.displayName = 'CarouselPrevious'
+
+const CarouselNext = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(
+    ({ className, variant = 'outline', size = 'icon', ...props }, ref) => {
+        const { orientation, scrollNext, canScrollNext } = useCarousel()
+
+        return (
+            <Button
+                ref={ref}
+                variant={variant}
+                size={size}
+                className={cn(
+                    'absolute h-8 w-8 rounded-full',
+                    orientation === 'horizontal'
+                        ? '-right-12 top-1/2 -translate-y-1/2'
+                        : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
+                    className
+                )}
+                disabled={!canScrollNext}
+                onClick={scrollNext}
+                {...props}
+            >
+                <ArrowRightIcon className="h-4 w-4" />
+                <span className="sr-only">Next slide</span>
+            </Button>
+        )
+    }
+)
+CarouselNext.displayName = 'CarouselNext'
+
+export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext }
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
new file mode 100644
index 0000000..ba2aa67
--- /dev/null
+++ b/src/components/ui/select.tsx
@@ -0,0 +1,152 @@
+/* eslint-disable react/prop-types */
+import React from 'react'
+
+import { CaretSortIcon, CheckIcon, ChevronDownIcon, ChevronUpIcon } from '@radix-ui/react-icons'
+import * as SelectPrimitive from '@radix-ui/react-select'
+
+import { cn } from '@utils/utils'
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef<
+    React.ElementRef<typeof SelectPrimitive.Trigger>,
+    React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+    <SelectPrimitive.Trigger
+        ref={ref}
+        className={cn(
+            'flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+            className
+        )}
+        {...props}
+    >
+        {children}
+        <SelectPrimitive.Icon asChild>
+            <CaretSortIcon className="h-4 w-4 opacity-50" />
+        </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef<
+    React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+    React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+    <SelectPrimitive.ScrollUpButton
+        ref={ref}
+        className={cn('flex cursor-default items-center justify-center py-1', className)}
+        {...props}
+    >
+        <ChevronUpIcon />
+    </SelectPrimitive.ScrollUpButton>
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+    React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+    React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+    <SelectPrimitive.ScrollDownButton
+        ref={ref}
+        className={cn('flex cursor-default items-center justify-center py-1', className)}
+        {...props}
+    >
+        <ChevronDownIcon />
+    </SelectPrimitive.ScrollDownButton>
+))
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+    React.ElementRef<typeof SelectPrimitive.Content>,
+    React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = 'popper', ...props }, ref) => (
+    <SelectPrimitive.Portal>
+        <SelectPrimitive.Content
+            ref={ref}
+            className={cn(
+                'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+                position === 'popper' &&
+                    'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+                className
+            )}
+            position={position}
+            {...props}
+        >
+            <SelectScrollUpButton />
+            <SelectPrimitive.Viewport
+                className={cn(
+                    'p-1',
+                    position === 'popper' &&
+                        'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'
+                )}
+            >
+                {children}
+            </SelectPrimitive.Viewport>
+            <SelectScrollDownButton />
+        </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+    React.ElementRef<typeof SelectPrimitive.Label>,
+    React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+    <SelectPrimitive.Label
+        ref={ref}
+        className={cn('px-2 py-1.5 text-sm font-semibold', className)}
+        {...props}
+    />
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = React.forwardRef<
+    React.ElementRef<typeof SelectPrimitive.Item>,
+    React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+    <SelectPrimitive.Item
+        ref={ref}
+        className={cn(
+            'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+            className
+        )}
+        {...props}
+    >
+        <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+            <SelectPrimitive.ItemIndicator>
+                <CheckIcon className="h-4 w-4" />
+            </SelectPrimitive.ItemIndicator>
+        </span>
+        <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+    React.ElementRef<typeof SelectPrimitive.Separator>,
+    React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+    <SelectPrimitive.Separator
+        ref={ref}
+        className={cn('-mx-1 my-1 h-px bg-muted', className)}
+        {...props}
+    />
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export {
+    Select,
+    SelectGroup,
+    SelectValue,
+    SelectTrigger,
+    SelectContent,
+    SelectLabel,
+    SelectItem,
+    SelectSeparator,
+    SelectScrollUpButton,
+    SelectScrollDownButton
+}
diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
new file mode 100644
index 0000000..ebc44a1
--- /dev/null
+++ b/src/components/ui/textarea.tsx
@@ -0,0 +1,23 @@
+import React from 'react'
+
+import { cn } from '@utils/utils'
+
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+    ({ className, ...props }, ref) => {
+        return (
+            <textarea
+                className={cn(
+                    'flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+                    className
+                )}
+                ref={ref}
+                {...props}
+            />
+        )
+    }
+)
+Textarea.displayName = 'Textarea'
+
+export { Textarea }
diff --git a/src/components/ui/tooltip.tsx b/src/components/ui/tooltip.tsx
new file mode 100644
index 0000000..a5ec959
--- /dev/null
+++ b/src/components/ui/tooltip.tsx
@@ -0,0 +1,30 @@
+import * as React from 'react'
+
+import * as TooltipPrimitive from '@radix-ui/react-tooltip'
+
+import { cn } from '@utils/utils'
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+    React.ElementRef<typeof TooltipPrimitive.Content>,
+    React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+    // eslint-disable-next-line react/prop-types
+>(({ className, sideOffset = 4, ...props }, ref) => (
+    <TooltipPrimitive.Content
+        ref={ref}
+        sideOffset={sideOffset}
+        className={cn(
+            'z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+            className
+        )}
+        {...props}
+    />
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
diff --git a/src/constants/routes.ts b/src/constants/routes.ts
index 0d97c9d..09f2e86 100644
--- a/src/constants/routes.ts
+++ b/src/constants/routes.ts
@@ -3,5 +3,6 @@ export const ROUTES = {
     USERSEARCH: '/usersearch',
     AUSER: '/user/:id',
     LIKEDPOSTS: '/likedposts',
-    CHAT: '/chat'
+    CHAT: '/chat',
+    CREATE_POST: '/create-post'
 } as const
diff --git a/src/main.tsx b/src/main.tsx
index 4520253..10aa24f 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -2,13 +2,15 @@ import React from 'react'
 import { createRoot } from 'react-dom/client'
 
 import { QueryClientProvider, QueryClient } from '@tanstack/react-query'
-import { BrowserRouter } from 'react-router-dom'
+import { BrowserRouter, Routes, Route } from 'react-router-dom'
 
 import './styles/index.scss'
 
 import { ErrorBoundary } from '@components/error-boundary/error-boundary'
+import { CreatePost } from '@pages/create-post/create-post'
 
 import { App } from './App'
+import { ROUTES } from './constants'
 
 const queryClient = new QueryClient()
 
@@ -19,7 +21,10 @@ root.render(
         <ErrorBoundary>
             <QueryClientProvider client={queryClient}>
                 <BrowserRouter>
-                    <App />
+                    <Routes>
+                        <Route path="/*" element={<App />} />
+                        <Route path={ROUTES.CREATE_POST} element={<CreatePost />} />
+                    </Routes>
                 </BrowserRouter>
             </QueryClientProvider>
         </ErrorBoundary>
diff --git a/src/methods/profile-methods/profile-methods.ts b/src/methods/profile-methods/profile-methods.ts
index 18a0de6..75b608c 100644
--- a/src/methods/profile-methods/profile-methods.ts
+++ b/src/methods/profile-methods/profile-methods.ts
@@ -28,3 +28,33 @@ export const editProfile = async (variables: EditProfilePopupData): Promise<void
     const userdoc = doc(db, Collections.USERS, variables.user_id)
     await updateDoc(userdoc, newstatusdb)
 }
+
+export const generateProfileImage = async (prompt: string): Promise<void> => {
+    try {
+        const request = await fetch('https://api.edenai.run/v2/image/generation', {
+            method: 'POST',
+            headers: {
+                authorization:
+                    'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoiNTcyN2Y3YTAtN2FmZC00NjA2LThjNzQtZWM0Y2M4ZDQ3NjVlIiwidHlwZSI6ImFwaV90b2tlbiJ9.Q2OtFHWZTOOE0hOYHWAR35DPgxKYp7C0Kmo0igr2zGA',
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                providers: 'openai',
+                text: prompt,
+                resolution: '256x256',
+                fallback_providers: 'deepai'
+            })
+        })
+
+        if (!request.ok) {
+            throw new Error(`Request failed with status ${request.status}`)
+        }
+
+        const data = await request.json()
+        console.log(data)
+    } catch (error: unknown) {
+        console.log('---------- Caught error ----------')
+        console.error(error)
+        console.log('----------------------------------')
+    }
+}
diff --git a/src/pages/create-post/_components/files-form/files-form.tsx b/src/pages/create-post/_components/files-form/files-form.tsx
new file mode 100644
index 0000000..bf4de84
--- /dev/null
+++ b/src/pages/create-post/_components/files-form/files-form.tsx
@@ -0,0 +1,108 @@
+import React, { useState, useCallback } from 'react'
+
+import { zodResolver } from '@hookform/resolvers/zod'
+import { Paperclip } from 'lucide-react'
+import { flushSync } from 'react-dom'
+import { useForm } from 'react-hook-form'
+
+import { Button, Form, Input, Label } from '@components/ui'
+import { Textarea } from '@components/ui/textarea'
+import { TooltipTrigger, Tooltip, TooltipProvider, TooltipContent } from '@components/ui/tooltip'
+
+import { FormValues, FilesFormSchema } from './form-schema'
+
+export const FilesForm = () => {
+    const form = useForm<FormValues>({
+        defaultValues: {
+            title: 'Title',
+            content: 'content'
+        },
+        resolver: zodResolver(FilesFormSchema),
+        mode: 'all'
+    })
+
+    const [images, setImages] = useState<string[]>([
+        'https://images.unsplash.com/photo-1684009779393-bc492383b48b?q=80&w=3024&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+        'https://images.unsplash.com/photo-1684010261709-962cc669733d?q=80&w=3474&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'
+    ])
+    const [image, setImage] = useState<string>('')
+    console.log(images)
+
+    const handleImageChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+        setImage(event.target.value)
+    }, [])
+
+    const addImage = useCallback(
+        (event: React.KeyboardEvent<HTMLInputElement>): void => {
+            if (!image.length || event.key !== 'Enter') return
+
+            flushSync(() => {
+                setImages((prev) => [...prev, image])
+            })
+            setImage('')
+        },
+        [image]
+    )
+
+    const createPost = useCallback((values: FormValues) => {
+        console.log(values)
+    }, [])
+
+    return (
+        <div className="relative hidden flex-col items-start gap-8 md:flex">
+            <Form {...form}>
+                <form
+                    className="grid w-full items-start gap-6"
+                    onSubmit={form.handleSubmit(createPost)}
+                >
+                    <fieldset className="grid gap-6 rounded-lg border p-4">
+                        <legend className="-ml-1 px-1 text-sm font-medium">Images</legend>
+                        <div className="gap-3 flex h-[150px] w-full items-center justify-center rounded-md border border-dashed text-sm">
+                            Drop files
+                        </div>
+                        <div className="grid gap-3">
+                            <div className="flex gap-1 items-center">
+                                <TooltipProvider>
+                                    <Tooltip>
+                                        <TooltipTrigger asChild>
+                                            <Button variant="ghost" size="icon">
+                                                <Paperclip className="size-4" />
+                                                <span className="sr-only">Attach file</span>
+                                            </Button>
+                                        </TooltipTrigger>
+                                        <TooltipContent side="top">Attach File</TooltipContent>
+                                    </Tooltip>
+                                </TooltipProvider>
+                                <p className="text-sm">browse file system</p>
+                            </div>
+                            <Input
+                                value={image}
+                                onChange={handleImageChange}
+                                onKeyDown={addImage}
+                                placeholder="Enter image url..."
+                                className="w-[400px]"
+                            />
+                        </div>
+                    </fieldset>
+                </form>
+            </Form>
+            <Form>
+                <fieldset className="grid gap-6 rounded-lg border p-4">
+                    <legend className="-ml-1 px-1 text-sm font-medium">Post</legend>
+                    <div className="grid gap-3">
+                        <Label htmlFor="role">Title</Label>
+                        <Input placeholder="post title..." />
+                    </div>
+                    <div className="grid gap-3">
+                        <Label htmlFor="content">Content</Label>
+                        <Textarea
+                            id="content"
+                            placeholder="what is your post about..."
+                            className="min-h-[9.5rem]"
+                        />
+                    </div>
+                </fieldset>
+            </Form>
+        </div>
+    )
+}
diff --git a/src/pages/create-post/_components/files-form/form-schema.ts b/src/pages/create-post/_components/files-form/form-schema.ts
new file mode 100644
index 0000000..5e60499
--- /dev/null
+++ b/src/pages/create-post/_components/files-form/form-schema.ts
@@ -0,0 +1,38 @@
+import { z } from 'zod'
+
+const required_message = 'Field is required' as const
+const invalid_url_message = 'Invalid url' as const
+const max_upload_size = 1024 * 1024 * 3 // 3MB
+const accepted_file_types = ['image/png']
+
+export const FilesFormSchema = z.object({
+    content: z.string().trim().min(1, {
+        message: required_message
+    }),
+    title: z
+        .string()
+        .trim()
+        .min(1, {
+            message: required_message
+        })
+        .max(30, {
+            message: 'Title cannot be longer than 30 letters'
+        }),
+    imageurl: z
+        .string()
+        .trim()
+        .url({
+            message: invalid_url_message
+        })
+        .optional(),
+    imagefile: z
+        .instanceof(File)
+        .refine((file) => {
+            return !file || file.size <= max_upload_size
+        }, 'Image must be less than 3mb')
+        .refine((file) => {
+            return accepted_file_types.includes(file.type)
+        }, 'Image must be png')
+})
+
+export type FormValues = z.infer<typeof FilesFormSchema>
diff --git a/src/pages/create-post/_components/post-text-form.schema.ts b/src/pages/create-post/_components/post-text-form.schema.ts
new file mode 100644
index 0000000..bd886e6
--- /dev/null
+++ b/src/pages/create-post/_components/post-text-form.schema.ts
@@ -0,0 +1 @@
+import { z } from 'zod'
diff --git a/src/pages/create-post/_components/post-text-form.tsx b/src/pages/create-post/_components/post-text-form.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/create-post/_state/state.ts b/src/pages/create-post/_state/state.ts
new file mode 100644
index 0000000..c063194
--- /dev/null
+++ b/src/pages/create-post/_state/state.ts
@@ -0,0 +1,3 @@
+import { atom } from 'jotai'
+
+export const imagesAtom = atom<string[]>([])
diff --git a/src/pages/create-post/create-post.tsx b/src/pages/create-post/create-post.tsx
new file mode 100644
index 0000000..7b91a0d
--- /dev/null
+++ b/src/pages/create-post/create-post.tsx
@@ -0,0 +1,69 @@
+import React, { useState } from 'react'
+
+import Autoplay from 'embla-carousel-autoplay'
+
+import { Label } from '@components/ui'
+import { Card, CardContent, CardHeader } from '@components/ui/card'
+import {
+    Carousel,
+    CarouselItem,
+    CarouselNext,
+    CarouselContent,
+    CarouselPrevious,
+    type CarouselApi
+} from '@components/ui/carousel'
+
+import { FilesForm } from './_components/files-form/files-form'
+
+export const CreatePost = (): JSX.Element => {
+    const [images, setImages] = useState<string[]>([
+        'https://images.unsplash.com/photo-1684009779393-bc492383b48b?q=80&w=3024&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+        'https://images.unsplash.com/photo-1684010261709-962cc669733d?q=80&w=3474&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'
+    ])
+    const [carouselApi, setCarouselApi] = useState<CarouselApi>()
+    console.log(carouselApi, setImages)
+
+    return (
+        <main
+            className="grid flex-1 gap-4 overflow-auto p-4 md:grid-cols-2 lg:grid-cols-3 mx-auto place-self-center"
+            data-kb-theme="dark"
+        >
+            <FilesForm />
+            <div className="relative flex h-full min-h-[50vh] flex-col rounded-xl bg-muted/50 p-4 lg:col-span-2">
+                <section className="flex-1 grid place-items-center">
+                    <Label className="sr-only">Post preview</Label>
+                    <Card className="w-[300px] mx-auto">
+                        <CardHeader>
+                            <Carousel
+                                setApi={setCarouselApi}
+                                plugins={[
+                                    Autoplay({
+                                        delay: 5000
+                                    })
+                                ]}
+                            >
+                                <CarouselContent>
+                                    {images.map((image, index) => (
+                                        <CarouselItem key={index}>
+                                            <img
+                                                src={image}
+                                                className="rounded object-cover object-center h-full"
+                                            />
+                                        </CarouselItem>
+                                    ))}
+                                </CarouselContent>
+                                <CarouselPrevious />
+                                <CarouselNext />
+                            </Carousel>
+                        </CardHeader>
+
+                        <CardContent>
+                            <h3 className="font-semibold text-lg mb-2">title</h3>
+                            <p className="text-sm">content</p>
+                        </CardContent>
+                    </Card>
+                </section>
+            </div>
+        </main>
+    )
+}
diff --git a/src/pages/profile/profile.tsx b/src/pages/profile/profile.tsx
index d006140..cf1a7ef 100644
--- a/src/pages/profile/profile.tsx
+++ b/src/pages/profile/profile.tsx
@@ -8,6 +8,8 @@ import { Posts } from './_components/posts'
 export const Profile = memo((): JSX.Element => {
     const { isLoading, username, status, profileImageUrl } = useCurrentUser()
 
+    console.log(crypto.randomUUID())
+
     return (
         <main className="main">
             <ProfileInfo