diff --git a/components.json b/components.json
new file mode 100644
index 0000000..0e8b633
--- /dev/null
+++ b/components.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index 55fd279..b44a4fc 100644
--- a/package.json
+++ b/package.json
@@ -15,11 +15,18 @@
     "format:check": "prettier --check \"**/*.{ts,tsx,js,jsx,mdx}\" --cache"
   },
   "dependencies": {
+    "@radix-ui/react-dialog": "^1.1.2",
+    "@radix-ui/react-slot": "^1.1.0",
     "babel-plugin-react-compiler": "0.0.0-experimental-734b737-20241003",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.456.0",
     "next": "15.0.0-rc.1",
     "next-plausible": "^3.12.2",
     "react": "19.0.0-rc-cd22717c-20241013",
-    "react-dom": "19.0.0-rc-cd22717c-20241013"
+    "react-dom": "19.0.0-rc-cd22717c-20241013",
+    "tailwind-merge": "^2.5.4",
+    "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
     "@types/eslint": "^8.56.10",
@@ -31,9 +38,9 @@
     "concurrently": "^9.1.0",
     "eslint": "^8",
     "eslint-config-next": "15.0.0-rc.1",
+    "postcss": "^8",
     "prettier": "^3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.8",
-    "postcss": "^8",
     "tailwindcss": "^3.4.1",
     "typescript": "^5"
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 30439a1..6510e9d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -12,9 +12,24 @@ importers:
 
   .:
     dependencies:
+      '@radix-ui/react-dialog':
+        specifier: ^1.1.2
+        version: 1.1.2(react-dom@19.0.0-rc-cd22717c-20241013(react@19.0.0-rc-cd22717c-20241013))(react@19.0.0-rc-cd22717c-20241013)(types-react-dom@19.0.0-rc.1)(types-react@19.0.0-rc.1)
+      '@radix-ui/react-slot':
+        specifier: ^1.1.0
+        version: 1.1.0(react@19.0.0-rc-cd22717c-20241013)(types-react@19.0.0-rc.1)
       babel-plugin-react-compiler:
         specifier: 0.0.0-experimental-734b737-20241003
         version: 0.0.0-experimental-734b737-20241003
+      class-variance-authority:
+        specifier: ^0.7.0
+        version: 0.7.0
+      clsx:
+        specifier: ^2.1.1
+        version: 2.1.1
+      lucide-react:
+        specifier: ^0.456.0
+        version: 0.456.0(react@19.0.0-rc-cd22717c-20241013)
       next:
         specifier: 15.0.0-rc.1
         version: 15.0.0-rc.1(babel-plugin-react-compiler@0.0.0-experimental-734b737-20241003)(react-dom@19.0.0-rc-cd22717c-20241013(react@19.0.0-rc-cd22717c-20241013))(react@19.0.0-rc-cd22717c-20241013)
@@ -27,6 +42,12 @@ importers:
       react-dom:
         specifier: 19.0.0-rc-cd22717c-20241013
         version: 19.0.0-rc-cd22717c-20241013(react@19.0.0-rc-cd22717c-20241013)
+      tailwind-merge:
+        specifier: ^2.5.4
+        version: 2.5.4
+      tailwindcss-animate:
+        specifier: ^1.0.7
+        version: 1.0.7(tailwindcss@3.4.13)
     devDependencies:
       '@types/eslint':
         specifier: ^8.56.10
@@ -331,6 +352,168 @@ packages:
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
 
+  '@radix-ui/primitive@1.1.0':
+    resolution: {integrity: sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA==}
+
+  '@radix-ui/react-compose-refs@1.1.0':
+    resolution: {integrity: sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==}
+    peerDependencies:
+      '@types/react': npm:types-react@19.0.0-rc.1
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-context@1.1.1':
+    resolution: {integrity: sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==}
+    peerDependencies:
+      '@types/react': npm:types-react@19.0.0-rc.1
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-dialog@1.1.2':
+    resolution: {integrity: sha512-Yj4dZtqa2o+kG61fzB0H2qUvmwBA2oyQroGLyNtBj1beo1khoQ3q1a2AO8rrQYjd8256CO9+N8L9tvsS+bnIyA==}
+    peerDependencies:
+      '@types/react': npm:types-react@19.0.0-rc.1
+      '@types/react-dom': npm:types-react-dom@19.0.0-rc.1
+      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-dismissable-layer@1.1.1':
+    resolution: {integrity: sha512-QSxg29lfr/xcev6kSz7MAlmDnzbP1eI/Dwn3Tp1ip0KT5CUELsxkekFEMVBEoykI3oV39hKT4TKZzBNMbcTZYQ==}
+    peerDependencies:
+      '@types/react': npm:types-react@19.0.0-rc.1
+      '@types/react-dom': npm:types-react-dom@19.0.0-rc.1
+      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.1':
+    resolution: {integrity: sha512-pSIwfrT1a6sIoDASCSpFwOasEwKTZWDw/iBdtnqKO7v6FeOzYJ7U53cPzYFVR3geGGXgVHaH+CdngrrAzqUGxg==}
+    peerDependencies:
+      '@types/react': npm:types-react@19.0.0-rc.1
+      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.0':
+    resolution: {integrity: sha512-200UD8zylvEyL8Bx+z76RJnASR2gRMuxlgFCPAe/Q/679a/r0eK3MBVYMb7vZODZcffZBdob1EGnky78xmVvcA==}
+    peerDependencies:
+      '@types/react': npm:types-react@19.0.0-rc.1
+      '@types/react-dom': npm:types-react-dom@19.0.0-rc.1
+      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.0':
+    resolution: {integrity: sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==}
+    peerDependencies:
+      '@types/react': npm:types-react@19.0.0-rc.1
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-portal@1.1.2':
+    resolution: {integrity: sha512-WeDYLGPxJb/5EGBoedyJbT0MpoULmwnIPMJMSldkuiMsBAv7N1cRdsTWZWht9vpPOiN3qyiGAtbK2is47/uMFg==}
+    peerDependencies:
+      '@types/react': npm:types-react@19.0.0-rc.1
+      '@types/react-dom': npm:types-react-dom@19.0.0-rc.1
+      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-presence@1.1.1':
+    resolution: {integrity: sha512-IeFXVi4YS1K0wVZzXNrbaaUvIJ3qdY+/Ih4eHFhWA9SwGR9UDX7Ck8abvL57C4cv3wwMvUE0OG69Qc3NCcTe/A==}
+    peerDependencies:
+      '@types/react': npm:types-react@19.0.0-rc.1
+      '@types/react-dom': npm:types-react-dom@19.0.0-rc.1
+      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.0.0':
+    resolution: {integrity: sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==}
+    peerDependencies:
+      '@types/react': npm:types-react@19.0.0-rc.1
+      '@types/react-dom': npm:types-react-dom@19.0.0-rc.1
+      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.1.0':
+    resolution: {integrity: sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==}
+    peerDependencies:
+      '@types/react': npm:types-react@19.0.0-rc.1
+      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.0':
+    resolution: {integrity: sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==}
+    peerDependencies:
+      '@types/react': npm:types-react@19.0.0-rc.1
+      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.1.0':
+    resolution: {integrity: sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==}
+    peerDependencies:
+      '@types/react': npm:types-react@19.0.0-rc.1
+      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.0':
+    resolution: {integrity: sha512-L7vwWlR1kTTQ3oh7g1O0CBF3YCyyTj8NmhLR+phShpyA50HCfBFKVJTpshm9PzLiKmehsrQzTYTpX9HvmC9rhw==}
+    peerDependencies:
+      '@types/react': npm:types-react@19.0.0-rc.1
+      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.0':
+    resolution: {integrity: sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==}
+    peerDependencies:
+      '@types/react': npm:types-react@19.0.0-rc.1
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@rtsao/scc@1.1.0':
     resolution: {integrity: sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==}
 
@@ -483,6 +666,10 @@ packages:
   argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
 
+  aria-hidden@1.2.4:
+    resolution: {integrity: sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==}
+    engines: {node: '>=10'}
+
   aria-query@5.1.3:
     resolution: {integrity: sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==}
 
@@ -580,6 +767,9 @@ packages:
     resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
     engines: {node: '>= 8.10.0'}
 
+  class-variance-authority@0.7.0:
+    resolution: {integrity: sha512-jFI8IQw4hczaL4ALINxqLEXQbWcNjoSkloa4IaufXCJr6QawJyw7tuRysRsrE8w2p/4gGaxKIt/hX3qz/IbD1A==}
+
   client-only@0.0.1:
     resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
 
@@ -587,6 +777,14 @@ packages:
     resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
     engines: {node: '>=12'}
 
+  clsx@2.0.0:
+    resolution: {integrity: sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==}
+    engines: {node: '>=6'}
+
+  clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+    engines: {node: '>=6'}
+
   color-convert@1.9.3:
     resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
 
@@ -682,6 +880,9 @@ packages:
     resolution: {integrity: sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==}
     engines: {node: '>=8'}
 
+  detect-node-es@1.1.0:
+    resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
+
   didyoumean@1.2.2:
     resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
 
@@ -931,6 +1132,10 @@ packages:
     resolution: {integrity: sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==}
     engines: {node: '>= 0.4'}
 
+  get-nonce@1.0.1:
+    resolution: {integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==}
+    engines: {node: '>=6'}
+
   get-symbol-description@1.0.2:
     resolution: {integrity: sha512-g0QYk1dZBxGwk+Ngc+ltRH2IBp2f7zBkBMBJZCDerh6EhlhSR6+9irMCuT/09zD6qkarHUSn529sK/yL4S27mg==}
     engines: {node: '>= 0.4'}
@@ -1229,6 +1434,11 @@ packages:
   lru-cache@10.4.3:
     resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
 
+  lucide-react@0.456.0:
+    resolution: {integrity: sha512-DIIGJqTT5X05sbAsQ+OhA8OtJYyD4NsEMCA/HQW/Y6ToPQ7gwbtujIoeAaup4HpHzV35SQOarKAWH8LYglB6eA==}
+    peerDependencies:
+      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc
+
   merge2@1.4.1:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
@@ -1528,6 +1738,36 @@ packages:
   react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 
+  react-remove-scroll-bar@2.3.6:
+    resolution: {integrity: sha512-DtSYaao4mBmX+HDo5YWYdBWQwYIQQshUV/dVxFxK+KM26Wjwp1gZ6rv6OC3oujI6Bfu6Xyg3TwK533AQutsn/g==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': npm:types-react@19.0.0-rc.1
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  react-remove-scroll@2.6.0:
+    resolution: {integrity: sha512-I2U4JVEsQenxDAKaVa3VZ/JeJZe0/2DxPWL8Tj8yLKctQJQiZM52pn/GWFpSp8dftjM3pSAHVJZscAnC/y+ySQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': npm:types-react@19.0.0-rc.1
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  react-style-singleton@2.2.1:
+    resolution: {integrity: sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': npm:types-react@19.0.0-rc.1
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   react@19.0.0-rc-cd22717c-20241013:
     resolution: {integrity: sha512-k28GszmyQ1tX/JmeLGZINq5KXiNy/MmN0fCAtcwF8a9INDyVYG0zATCRGJwaPB9WixmkuwPv1BfB1QBfJC7cNg==}
     engines: {node: '>=0.10.0'}
@@ -1726,6 +1966,14 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
+  tailwind-merge@2.5.4:
+    resolution: {integrity: sha512-0q8cfZHMu9nuYP/b5Shb7Y7Sh1B7Nnl5GqNr1U+n2p6+mybvRtayrQ+0042Z5byvTA8ihjlP8Odo8/VnHbZu4Q==}
+
+  tailwindcss-animate@1.0.7:
+    resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || insiders'
+
   tailwindcss@3.4.13:
     resolution: {integrity: sha512-KqjHOJKogOUt5Bs752ykCeiwvi0fKVkr5oqsFNt/8px/tA8scFPIlkygsf6jXrfCqGHz7VflA6+yytWuM+XhFw==}
     engines: {node: '>=14.0.0'}
@@ -1820,6 +2068,26 @@ packages:
   uri-js@4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
 
+  use-callback-ref@1.3.2:
+    resolution: {integrity: sha512-elOQwe6Q8gqZgDA8mrh44qRTQqpIHDcZ3hXTLjBe1i4ph8XpNJnO+aQf3NaG+lriLopI4HMx9VjQLfPQ6vhnoA==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': npm:types-react@19.0.0-rc.1
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  use-sidecar@1.1.2:
+    resolution: {integrity: sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': npm:types-react@19.0.0-rc.1
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
@@ -2104,6 +2372,141 @@ snapshots:
   '@pkgjs/parseargs@0.11.0':
     optional: true
 
+  '@radix-ui/primitive@1.1.0': {}
+
+  '@radix-ui/react-compose-refs@1.1.0(react@19.0.0-rc-cd22717c-20241013)(types-react@19.0.0-rc.1)':
+    dependencies:
+      react: 19.0.0-rc-cd22717c-20241013
+    optionalDependencies:
+      '@types/react': types-react@19.0.0-rc.1
+
+  '@radix-ui/react-context@1.1.1(react@19.0.0-rc-cd22717c-20241013)(types-react@19.0.0-rc.1)':
+    dependencies:
+      react: 19.0.0-rc-cd22717c-20241013
+    optionalDependencies:
+      '@types/react': types-react@19.0.0-rc.1
+
+  '@radix-ui/react-dialog@1.1.2(react-dom@19.0.0-rc-cd22717c-20241013(react@19.0.0-rc-cd22717c-20241013))(react@19.0.0-rc-cd22717c-20241013)(types-react-dom@19.0.0-rc.1)(types-react@19.0.0-rc.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.0
+      '@radix-ui/react-compose-refs': 1.1.0(react@19.0.0-rc-cd22717c-20241013)(types-react@19.0.0-rc.1)
+      '@radix-ui/react-context': 1.1.1(react@19.0.0-rc-cd22717c-20241013)(types-react@19.0.0-rc.1)
+      '@radix-ui/react-dismissable-layer': 1.1.1(react-dom@19.0.0-rc-cd22717c-20241013(react@19.0.0-rc-cd22717c-20241013))(react@19.0.0-rc-cd22717c-20241013)(types-react-dom@19.0.0-rc.1)(types-react@19.0.0-rc.1)
+      '@radix-ui/react-focus-guards': 1.1.1(react@19.0.0-rc-cd22717c-20241013)(types-react@19.0.0-rc.1)
+      '@radix-ui/react-focus-scope': 1.1.0(react-dom@19.0.0-rc-cd22717c-20241013(react@19.0.0-rc-cd22717c-20241013))(react@19.0.0-rc-cd22717c-20241013)(types-react-dom@19.0.0-rc.1)(types-react@19.0.0-rc.1)
+      '@radix-ui/react-id': 1.1.0(react@19.0.0-rc-cd22717c-20241013)(types-react@19.0.0-rc.1)
+      '@radix-ui/react-portal': 1.1.2(react-dom@19.0.0-rc-cd22717c-20241013(react@19.0.0-rc-cd22717c-20241013))(react@19.0.0-rc-cd22717c-20241013)(types-react-dom@19.0.0-rc.1)(types-react@19.0.0-rc.1)
+      '@radix-ui/react-presence': 1.1.1(react-dom@19.0.0-rc-cd22717c-20241013(react@19.0.0-rc-cd22717c-20241013))(react@19.0.0-rc-cd22717c-20241013)(types-react-dom@19.0.0-rc.1)(types-react@19.0.0-rc.1)
+      '@radix-ui/react-primitive': 2.0.0(react-dom@19.0.0-rc-cd22717c-20241013(react@19.0.0-rc-cd22717c-20241013))(react@19.0.0-rc-cd22717c-20241013)(types-react-dom@19.0.0-rc.1)(types-react@19.0.0-rc.1)
+      '@radix-ui/react-slot': 1.1.0(react@19.0.0-rc-cd22717c-20241013)(types-react@19.0.0-rc.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(react@19.0.0-rc-cd22717c-20241013)(types-react@19.0.0-rc.1)
+      aria-hidden: 1.2.4
+      react: 19.0.0-rc-cd22717c-20241013
+      react-dom: 19.0.0-rc-cd22717c-20241013(react@19.0.0-rc-cd22717c-20241013)
+      react-remove-scroll: 2.6.0(react@19.0.0-rc-cd22717c-20241013)(types-react@19.0.0-rc.1)
+    optionalDependencies:
+      '@types/react': types-react@19.0.0-rc.1
+      '@types/react-dom': types-react-dom@19.0.0-rc.1
+
+  '@radix-ui/react-dismissable-layer@1.1.1(react-dom@19.0.0-rc-cd22717c-20241013(react@19.0.0-rc-cd22717c-20241013))(react@19.0.0-rc-cd22717c-20241013)(types-react-dom@19.0.0-rc.1)(types-react@19.0.0-rc.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.0
+      '@radix-ui/react-compose-refs': 1.1.0(react@19.0.0-rc-cd22717c-20241013)(types-react@19.0.0-rc.1)
+      '@radix-ui/react-primitive': 2.0.0(react-dom@19.0.0-rc-cd22717c-20241013(react@19.0.0-rc-cd22717c-20241013))(react@19.0.0-rc-cd22717c-20241013)(types-react-dom@19.0.0-rc.1)(types-react@19.0.0-rc.1)
+      '@radix-ui/react-use-callback-ref': 1.1.0(react@19.0.0-rc-cd22717c-20241013)(types-react@19.0.0-rc.1)
+      '@radix-ui/react-use-escape-keydown': 1.1.0(react@19.0.0-rc-cd22717c-20241013)(types-react@19.0.0-rc.1)
+      react: 19.0.0-rc-cd22717c-20241013
+      react-dom: 19.0.0-rc-cd22717c-20241013(react@19.0.0-rc-cd22717c-20241013)
+    optionalDependencies:
+      '@types/react': types-react@19.0.0-rc.1
+      '@types/react-dom': types-react-dom@19.0.0-rc.1
+
+  '@radix-ui/react-focus-guards@1.1.1(react@19.0.0-rc-cd22717c-20241013)(types-react@19.0.0-rc.1)':
+    dependencies:
+      react: 19.0.0-rc-cd22717c-20241013
+    optionalDependencies:
+      '@types/react': types-react@19.0.0-rc.1
+
+  '@radix-ui/react-focus-scope@1.1.0(react-dom@19.0.0-rc-cd22717c-20241013(react@19.0.0-rc-cd22717c-20241013))(react@19.0.0-rc-cd22717c-20241013)(types-react-dom@19.0.0-rc.1)(types-react@19.0.0-rc.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.0(react@19.0.0-rc-cd22717c-20241013)(types-react@19.0.0-rc.1)
+      '@radix-ui/react-primitive': 2.0.0(react-dom@19.0.0-rc-cd22717c-20241013(react@19.0.0-rc-cd22717c-20241013))(react@19.0.0-rc-cd22717c-20241013)(types-react-dom@19.0.0-rc.1)(types-react@19.0.0-rc.1)
+      '@radix-ui/react-use-callback-ref': 1.1.0(react@19.0.0-rc-cd22717c-20241013)(types-react@19.0.0-rc.1)
+      react: 19.0.0-rc-cd22717c-20241013
+      react-dom: 19.0.0-rc-cd22717c-20241013(react@19.0.0-rc-cd22717c-20241013)
+    optionalDependencies:
+      '@types/react': types-react@19.0.0-rc.1
+      '@types/react-dom': types-react-dom@19.0.0-rc.1
+
+  '@radix-ui/react-id@1.1.0(react@19.0.0-rc-cd22717c-20241013)(types-react@19.0.0-rc.1)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.0(react@19.0.0-rc-cd22717c-20241013)(types-react@19.0.0-rc.1)
+      react: 19.0.0-rc-cd22717c-20241013
+    optionalDependencies:
+      '@types/react': types-react@19.0.0-rc.1
+
+  '@radix-ui/react-portal@1.1.2(react-dom@19.0.0-rc-cd22717c-20241013(react@19.0.0-rc-cd22717c-20241013))(react@19.0.0-rc-cd22717c-20241013)(types-react-dom@19.0.0-rc.1)(types-react@19.0.0-rc.1)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.0.0(react-dom@19.0.0-rc-cd22717c-20241013(react@19.0.0-rc-cd22717c-20241013))(react@19.0.0-rc-cd22717c-20241013)(types-react-dom@19.0.0-rc.1)(types-react@19.0.0-rc.1)
+      '@radix-ui/react-use-layout-effect': 1.1.0(react@19.0.0-rc-cd22717c-20241013)(types-react@19.0.0-rc.1)
+      react: 19.0.0-rc-cd22717c-20241013
+      react-dom: 19.0.0-rc-cd22717c-20241013(react@19.0.0-rc-cd22717c-20241013)
+    optionalDependencies:
+      '@types/react': types-react@19.0.0-rc.1
+      '@types/react-dom': types-react-dom@19.0.0-rc.1
+
+  '@radix-ui/react-presence@1.1.1(react-dom@19.0.0-rc-cd22717c-20241013(react@19.0.0-rc-cd22717c-20241013))(react@19.0.0-rc-cd22717c-20241013)(types-react-dom@19.0.0-rc.1)(types-react@19.0.0-rc.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.0(react@19.0.0-rc-cd22717c-20241013)(types-react@19.0.0-rc.1)
+      '@radix-ui/react-use-layout-effect': 1.1.0(react@19.0.0-rc-cd22717c-20241013)(types-react@19.0.0-rc.1)
+      react: 19.0.0-rc-cd22717c-20241013
+      react-dom: 19.0.0-rc-cd22717c-20241013(react@19.0.0-rc-cd22717c-20241013)
+    optionalDependencies:
+      '@types/react': types-react@19.0.0-rc.1
+      '@types/react-dom': types-react-dom@19.0.0-rc.1
+
+  '@radix-ui/react-primitive@2.0.0(react-dom@19.0.0-rc-cd22717c-20241013(react@19.0.0-rc-cd22717c-20241013))(react@19.0.0-rc-cd22717c-20241013)(types-react-dom@19.0.0-rc.1)(types-react@19.0.0-rc.1)':
+    dependencies:
+      '@radix-ui/react-slot': 1.1.0(react@19.0.0-rc-cd22717c-20241013)(types-react@19.0.0-rc.1)
+      react: 19.0.0-rc-cd22717c-20241013
+      react-dom: 19.0.0-rc-cd22717c-20241013(react@19.0.0-rc-cd22717c-20241013)
+    optionalDependencies:
+      '@types/react': types-react@19.0.0-rc.1
+      '@types/react-dom': types-react-dom@19.0.0-rc.1
+
+  '@radix-ui/react-slot@1.1.0(react@19.0.0-rc-cd22717c-20241013)(types-react@19.0.0-rc.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.0(react@19.0.0-rc-cd22717c-20241013)(types-react@19.0.0-rc.1)
+      react: 19.0.0-rc-cd22717c-20241013
+    optionalDependencies:
+      '@types/react': types-react@19.0.0-rc.1
+
+  '@radix-ui/react-use-callback-ref@1.1.0(react@19.0.0-rc-cd22717c-20241013)(types-react@19.0.0-rc.1)':
+    dependencies:
+      react: 19.0.0-rc-cd22717c-20241013
+    optionalDependencies:
+      '@types/react': types-react@19.0.0-rc.1
+
+  '@radix-ui/react-use-controllable-state@1.1.0(react@19.0.0-rc-cd22717c-20241013)(types-react@19.0.0-rc.1)':
+    dependencies:
+      '@radix-ui/react-use-callback-ref': 1.1.0(react@19.0.0-rc-cd22717c-20241013)(types-react@19.0.0-rc.1)
+      react: 19.0.0-rc-cd22717c-20241013
+    optionalDependencies:
+      '@types/react': types-react@19.0.0-rc.1
+
+  '@radix-ui/react-use-escape-keydown@1.1.0(react@19.0.0-rc-cd22717c-20241013)(types-react@19.0.0-rc.1)':
+    dependencies:
+      '@radix-ui/react-use-callback-ref': 1.1.0(react@19.0.0-rc-cd22717c-20241013)(types-react@19.0.0-rc.1)
+      react: 19.0.0-rc-cd22717c-20241013
+    optionalDependencies:
+      '@types/react': types-react@19.0.0-rc.1
+
+  '@radix-ui/react-use-layout-effect@1.1.0(react@19.0.0-rc-cd22717c-20241013)(types-react@19.0.0-rc.1)':
+    dependencies:
+      react: 19.0.0-rc-cd22717c-20241013
+    optionalDependencies:
+      '@types/react': types-react@19.0.0-rc.1
+
   '@rtsao/scc@1.1.0': {}
 
   '@rushstack/eslint-patch@1.10.4': {}
@@ -2269,6 +2672,10 @@ snapshots:
 
   argparse@2.0.1: {}
 
+  aria-hidden@1.2.4:
+    dependencies:
+      tslib: 2.7.0
+
   aria-query@5.1.3:
     dependencies:
       deep-equal: 2.2.3
@@ -2410,6 +2817,10 @@ snapshots:
     optionalDependencies:
       fsevents: 2.3.3
 
+  class-variance-authority@0.7.0:
+    dependencies:
+      clsx: 2.0.0
+
   client-only@0.0.1: {}
 
   cliui@8.0.1:
@@ -2418,6 +2829,10 @@ snapshots:
       strip-ansi: 6.0.1
       wrap-ansi: 7.0.0
 
+  clsx@2.0.0: {}
+
+  clsx@2.1.1: {}
+
   color-convert@1.9.3:
     dependencies:
       color-name: 1.1.3
@@ -2532,6 +2947,8 @@ snapshots:
   detect-libc@2.0.3:
     optional: true
 
+  detect-node-es@1.1.0: {}
+
   didyoumean@1.2.2: {}
 
   dlv@1.1.3: {}
@@ -2946,6 +3363,8 @@ snapshots:
       has-symbols: 1.0.3
       hasown: 2.0.2
 
+  get-nonce@1.0.1: {}
+
   get-symbol-description@1.0.2:
     dependencies:
       call-bind: 1.0.7
@@ -3235,6 +3654,10 @@ snapshots:
 
   lru-cache@10.4.3: {}
 
+  lucide-react@0.456.0(react@19.0.0-rc-cd22717c-20241013):
+    dependencies:
+      react: 19.0.0-rc-cd22717c-20241013
+
   merge2@1.4.1: {}
 
   micromatch@4.0.8:
@@ -3470,6 +3893,34 @@ snapshots:
 
   react-is@16.13.1: {}
 
+  react-remove-scroll-bar@2.3.6(react@19.0.0-rc-cd22717c-20241013)(types-react@19.0.0-rc.1):
+    dependencies:
+      react: 19.0.0-rc-cd22717c-20241013
+      react-style-singleton: 2.2.1(react@19.0.0-rc-cd22717c-20241013)(types-react@19.0.0-rc.1)
+      tslib: 2.7.0
+    optionalDependencies:
+      '@types/react': types-react@19.0.0-rc.1
+
+  react-remove-scroll@2.6.0(react@19.0.0-rc-cd22717c-20241013)(types-react@19.0.0-rc.1):
+    dependencies:
+      react: 19.0.0-rc-cd22717c-20241013
+      react-remove-scroll-bar: 2.3.6(react@19.0.0-rc-cd22717c-20241013)(types-react@19.0.0-rc.1)
+      react-style-singleton: 2.2.1(react@19.0.0-rc-cd22717c-20241013)(types-react@19.0.0-rc.1)
+      tslib: 2.7.0
+      use-callback-ref: 1.3.2(react@19.0.0-rc-cd22717c-20241013)(types-react@19.0.0-rc.1)
+      use-sidecar: 1.1.2(react@19.0.0-rc-cd22717c-20241013)(types-react@19.0.0-rc.1)
+    optionalDependencies:
+      '@types/react': types-react@19.0.0-rc.1
+
+  react-style-singleton@2.2.1(react@19.0.0-rc-cd22717c-20241013)(types-react@19.0.0-rc.1):
+    dependencies:
+      get-nonce: 1.0.1
+      invariant: 2.2.4
+      react: 19.0.0-rc-cd22717c-20241013
+      tslib: 2.7.0
+    optionalDependencies:
+      '@types/react': types-react@19.0.0-rc.1
+
   react@19.0.0-rc-cd22717c-20241013: {}
 
   read-cache@1.0.0:
@@ -3716,6 +4167,12 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
+  tailwind-merge@2.5.4: {}
+
+  tailwindcss-animate@1.0.7(tailwindcss@3.4.13):
+    dependencies:
+      tailwindcss: 3.4.13
+
   tailwindcss@3.4.13:
     dependencies:
       '@alloc/quick-lru': 5.2.0
@@ -3841,6 +4298,21 @@ snapshots:
     dependencies:
       punycode: 2.3.1
 
+  use-callback-ref@1.3.2(react@19.0.0-rc-cd22717c-20241013)(types-react@19.0.0-rc.1):
+    dependencies:
+      react: 19.0.0-rc-cd22717c-20241013
+      tslib: 2.7.0
+    optionalDependencies:
+      '@types/react': types-react@19.0.0-rc.1
+
+  use-sidecar@1.1.2(react@19.0.0-rc-cd22717c-20241013)(types-react@19.0.0-rc.1):
+    dependencies:
+      detect-node-es: 1.1.0
+      react: 19.0.0-rc-cd22717c-20241013
+      tslib: 2.7.0
+    optionalDependencies:
+      '@types/react': types-react@19.0.0-rc.1
+
   util-deprecate@1.0.2: {}
 
   which-boxed-primitive@1.0.2:
@@ -3923,4 +4395,4 @@ snapshots:
     dependencies:
       zod: 3.23.8
 
-  zod@3.23.8: {}
\ No newline at end of file
+  zod@3.23.8: {}
diff --git a/public/favicon.svg b/public/favicon.svg
index c818847..d6d1156 100644
--- a/public/favicon.svg
+++ b/public/favicon.svg
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="1200pt" height="1200pt" version="1.1" viewBox="0 0 1200 1200" xmlns="http://www.w3.org/2000/svg">
+<svg width="1200pt" height="1200pt" version="1.1" viewBox="0 0 1200 1200" fill="#0062ff" xmlns="http://www.w3.org/2000/svg">
     <rect x="0" y="0" width="1200" height="1200"/>  
     <g transform="matrix(1,0,0,1,-86.0315,-86.5)">
         <g transform="matrix(0.846767,0,0,0.846767,177.975,178.44)">
diff --git a/src/app/(tools)/layout.tsx b/src/app/(tools)/layout.tsx
index c70d623..b623be2 100644
--- a/src/app/(tools)/layout.tsx
+++ b/src/app/(tools)/layout.tsx
@@ -1,53 +1,21 @@
+import { Button } from "@/components/ui/button";
+import { ArrowLeft } from "lucide-react";
 import Link from "next/link";
 
-function BackButton() {
-  return (
-    <div className="fixed left-4 top-4 z-50">
-      <Link
-        href="/"
-        className="flex items-center gap-2 rounded-md px-3 py-1 text-sm font-medium text-gray-400 transition-colors duration-200 hover:text-gray-200"
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          className="h-4 w-4"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth={2}
-            d="M10 19l-7-7m0 0l7-7m-7 7h18"
-          />
-        </svg>
-        Back
-      </Link>
-    </div>
-  );
-}
-
 export default function ToolsLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
   return (
-    <div className="flex min-h-screen flex-col justify-between p-8 font-[family-name:var(--font-geist-sans)] sm:p-20">
-      <BackButton />
-      <main className="flex flex-grow flex-col items-center justify-center">
-        {children}
-      </main>
-      <footer className="mt-8 text-center text-sm text-gray-500">
-        <a
-          href="https://github.com/t3dotgg/quickpic"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="hover:underline"
-        >
-          View on GitHub
-        </a>
-      </footer>
-    </div>
+    <main className="flex-center relative flex-col gap-4">
+      <Link href="/" className="absolute left-1 top-2">
+        <Button variant="secondary">
+          <ArrowLeft />
+          <span>Back</span>
+        </Button>
+      </Link>
+      {children}
+    </main>
   );
 }
diff --git a/src/app/(tools)/rounded-border/rounded-tool.tsx b/src/app/(tools)/rounded-border/rounded-tool.tsx
index a5dbf34..7eda131 100644
--- a/src/app/(tools)/rounded-border/rounded-tool.tsx
+++ b/src/app/(tools)/rounded-border/rounded-tool.tsx
@@ -10,6 +10,8 @@ import {
   type FileUploaderResult,
 } from "@/hooks/use-file-uploader";
 import { FileDropzone } from "@/components/shared/file-dropzone";
+import Paragraph from "@/components/paragraph";
+import { Button } from "@/components/ui/button";
 
 type Radius = number;
 
@@ -98,7 +100,7 @@ const ImageRenderer = ({
   }, [imageContent, radius]);
 
   return (
-    <div ref={containerRef} className="relative w-[500px]">
+    <div ref={containerRef} className="relative">
       <div
         className="absolute inset-0"
         style={{ backgroundColor: background, borderRadius: 0 }}
@@ -138,15 +140,14 @@ function SaveAsPngButton({
   return (
     <div>
       <canvas ref={setCanvasRef} {...canvasProps} hidden />
-      <button
+      <Button
         onClick={() => {
           plausible("convert-image-to-png");
           void convertToPng();
         }}
-        className="rounded-lg bg-green-700 px-4 py-2 text-sm font-semibold text-white shadow-md transition-colors duration-200 hover:bg-green-800 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-opacity-75"
       >
         Save as PNG
-      </button>
+      </Button>
     </div>
   );
 }
@@ -173,8 +174,9 @@ function RoundedToolCore(props: { fileUploaderProps: FileUploaderResult }) {
   if (!imageMetadata) {
     return (
       <UploadBox
-        title="Add rounded borders to your images. Quick and easy."
-        subtitle="Allows pasting images from clipboard"
+        title="Corner Rounder"
+        subtitle={`Add rounded borders to your images. Quick and easy.
+          Allows pasting images from clipboard`}
         description="Upload Image"
         accept="image/*"
         onChange={handleFileUploadEvent}
@@ -183,20 +185,18 @@ function RoundedToolCore(props: { fileUploaderProps: FileUploaderResult }) {
   }
 
   return (
-    <div className="mx-auto flex max-w-2xl flex-col items-center justify-center gap-6 p-6">
+    <div className="mx-auto flex max-w-2xl flex-col items-center justify-center gap-6 px-6 py-10">
       <div className="flex w-full flex-col items-center gap-4 rounded-xl p-6">
         <ImageRenderer
           imageContent={imageContent}
           radius={radius}
           background={background}
         />
-        <p className="text-lg font-medium text-white/80">
-          {imageMetadata.name}
-        </p>
+        <Paragraph className="text-xs">{imageMetadata.name}</Paragraph>
       </div>
 
-      <div className="flex flex-col items-center rounded-lg bg-white/5 p-3">
-        <span className="text-sm text-white/60">Original Size</span>
+      <div className="flex flex-col items-center gap-[6px] rounded-lg bg-white/10 px-4 py-3 backdrop-blur-sm">
+        <span className="paragraph opacity-80">Original</span>
         <span className="font-medium text-white">
           {imageMetadata.width} × {imageMetadata.height}
         </span>
@@ -222,12 +222,12 @@ function RoundedToolCore(props: { fileUploaderProps: FileUploaderResult }) {
       />
 
       <div className="flex gap-3">
-        <button
+        <Button
           onClick={cancel}
-          className="rounded-lg bg-red-700 px-4 py-2 text-sm font-medium text-white/90 transition-colors hover:bg-red-800"
+          className="border-t-2 border-red-400 bg-gradient-to-t from-red-500 to-red-600 hover:border-t-red-500 hover:from-red-600 hover:to-red-700"
         >
           Cancel
-        </button>
+        </Button>
         <SaveAsPngButton
           imageContent={imageContent}
           radius={radius}
diff --git a/src/app/(tools)/square-image/square-tool.tsx b/src/app/(tools)/square-image/square-tool.tsx
index 8264309..3b5c736 100644
--- a/src/app/(tools)/square-image/square-tool.tsx
+++ b/src/app/(tools)/square-image/square-tool.tsx
@@ -10,6 +10,8 @@ import {
   useFileUploader,
 } from "@/hooks/use-file-uploader";
 import { useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
+import Paragraph from "@/components/paragraph";
 
 function SquareToolCore(props: { fileUploaderProps: FileUploaderResult }) {
   const { imageContent, imageMetadata, handleFileUploadEvent, cancel } =
@@ -69,8 +71,9 @@ function SquareToolCore(props: { fileUploaderProps: FileUploaderResult }) {
   if (!imageMetadata) {
     return (
       <UploadBox
-        title="Create square images with custom backgrounds. Fast and free."
-        subtitle="Allows pasting images from clipboard"
+        title="Square Image Creator"
+        subtitle={`Create square images with custom backgrounds. Fast and free.
+          Allows pasting images from clipboard`}
         description="Upload Image"
         accept="image/*"
         onChange={handleFileUploadEvent}
@@ -79,26 +82,24 @@ function SquareToolCore(props: { fileUploaderProps: FileUploaderResult }) {
   }
 
   return (
-    <div className="mx-auto flex max-w-2xl flex-col items-center justify-center gap-6 p-6">
+    <div className="mx-auto flex max-w-2xl flex-col items-center justify-center gap-6 px-6 py-10">
       <div className="flex w-full flex-col items-center gap-4 rounded-xl p-6">
         {squareImageContent && (
           <img src={squareImageContent} alt="Preview" className="mb-4" />
         )}
-        <p className="text-lg font-medium text-white/80">
-          {imageMetadata.name}
-        </p>
+        <Paragraph className="text-xs">{imageMetadata.name}</Paragraph>
       </div>
 
-      <div className="flex gap-6 text-base">
-        <div className="flex flex-col items-center rounded-lg bg-white/5 p-3">
-          <span className="text-sm text-white/60">Original</span>
+      <div className="flex gap-6 text-xs">
+        <div className="flex flex-col items-center gap-[6px] rounded-lg bg-white/10 px-4 py-3 backdrop-blur-sm">
+          <span className="paragraph opacity-80">Original</span>
           <span className="font-medium text-white">
             {imageMetadata.width} × {imageMetadata.height}
           </span>
         </div>
 
-        <div className="flex flex-col items-center rounded-lg bg-white/5 p-3">
-          <span className="text-sm text-white/60">Square Size</span>
+        <div className="flex flex-col items-center gap-[6px] rounded-lg bg-white/10 px-4 py-3 backdrop-blur-sm">
+          <span className="paragraph opacity-80">Square Size</span>
           <span className="font-medium text-white">
             {Math.max(imageMetadata.width, imageMetadata.height)} ×{" "}
             {Math.max(imageMetadata.width, imageMetadata.height)}
@@ -117,21 +118,20 @@ function SquareToolCore(props: { fileUploaderProps: FileUploaderResult }) {
       />
 
       <div className="flex gap-3">
-        <button
+        <Button
           onClick={cancel}
-          className="rounded-lg bg-red-700 px-4 py-2 text-sm font-medium text-white/90 transition-colors hover:bg-red-800"
+          className="border-t-2 border-red-400 bg-gradient-to-t from-red-500 to-red-600 hover:border-t-red-500 hover:from-red-600 hover:to-red-700"
         >
           Cancel
-        </button>
-        <button
+        </Button>
+        <Button
           onClick={() => {
             plausible("create-square-image");
             handleSaveImage();
           }}
-          className="rounded-lg bg-green-700 px-4 py-2 text-sm font-semibold text-white shadow-md transition-colors duration-200 hover:bg-green-800 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-opacity-75"
         >
           Save Image
-        </button>
+        </Button>
       </div>
     </div>
   );
diff --git a/src/app/(tools)/svg-to-png/svg-tool.tsx b/src/app/(tools)/svg-to-png/svg-tool.tsx
index 137d778..45cccd5 100644
--- a/src/app/(tools)/svg-to-png/svg-tool.tsx
+++ b/src/app/(tools)/svg-to-png/svg-tool.tsx
@@ -118,15 +118,14 @@ function SaveAsPngButton({
   return (
     <div>
       <canvas ref={setCanvasRef} {...canvasProps} hidden />
-      <button
+      <Button
         onClick={() => {
           plausible("convert-svg-to-png");
           void convertToPng();
         }}
-        className="rounded-lg bg-green-700 px-4 py-2 text-sm font-semibold text-white shadow-md transition-colors duration-200 hover:bg-green-800 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-opacity-75"
       >
         Save as PNG
-      </button>
+      </Button>
     </div>
   );
 }
@@ -136,6 +135,8 @@ import {
   useFileUploader,
 } from "@/hooks/use-file-uploader";
 import { FileDropzone } from "@/components/shared/file-dropzone";
+import Paragraph from "@/components/paragraph";
+import { Button } from "@/components/ui/button";
 
 function SVGToolCore(props: { fileUploaderProps: FileUploaderResult }) {
   const { rawContent, imageMetadata, handleFileUploadEvent, cancel } =
@@ -153,7 +154,8 @@ function SVGToolCore(props: { fileUploaderProps: FileUploaderResult }) {
   if (!imageMetadata)
     return (
       <UploadBox
-        title="Make SVGs into PNGs. Also makes them bigger. (100% free btw.)"
+        title="SVG to PNG Converter"
+        subtitle="Make SVGs into PNGs. Also makes them bigger. (100% free btw.)"
         description="Upload SVG"
         accept=".svg"
         onChange={handleFileUploadEvent}
@@ -161,26 +163,24 @@ function SVGToolCore(props: { fileUploaderProps: FileUploaderResult }) {
     );
 
   return (
-    <div className="mx-auto flex max-w-2xl flex-col items-center justify-center gap-6 p-6">
+    <div className="mx-auto flex max-w-2xl flex-col items-center justify-center gap-6 px-6 py-10">
       {/* Preview Section */}
       <div className="flex w-full flex-col items-center gap-4 rounded-xl p-6">
         <SVGRenderer svgContent={rawContent} />
-        <p className="text-lg font-medium text-white/80">
-          {imageMetadata.name}
-        </p>
+        <Paragraph className="text-xs">{imageMetadata.name}</Paragraph>
       </div>
 
       {/* Size Information */}
-      <div className="flex gap-6 text-base">
-        <div className="flex flex-col items-center rounded-lg bg-white/5 p-3">
-          <span className="text-sm text-white/60">Original</span>
+      <div className="flex gap-6 text-xs">
+        <div className="flex flex-col items-center gap-[6px] rounded-lg bg-white/10 px-4 py-3 backdrop-blur-sm">
+          <span className="paragraph opacity-80">Original</span>
           <span className="font-medium text-white">
             {imageMetadata.width} × {imageMetadata.height}
           </span>
         </div>
 
-        <div className="flex flex-col items-center rounded-lg bg-white/5 p-3">
-          <span className="text-sm text-white/60">Scaled</span>
+        <div className="flex flex-col items-center gap-[6px] rounded-lg bg-white/10 px-4 py-3 backdrop-blur-sm">
+          <span className="paragraph opacity-80">Scaled</span>
           <span className="font-medium text-white">
             {imageMetadata.width * effectiveScale} ×{" "}
             {imageMetadata.height * effectiveScale}
@@ -200,12 +200,12 @@ function SVGToolCore(props: { fileUploaderProps: FileUploaderResult }) {
 
       {/* Action Buttons */}
       <div className="flex gap-3">
-        <button
+        <Button
           onClick={cancel}
-          className="rounded-lg bg-red-700 px-4 py-2 text-sm font-medium text-white/90 transition-colors hover:bg-red-800"
+          className="border-t-2 border-red-400 bg-gradient-to-t from-red-500 to-red-600 hover:border-t-red-500 hover:from-red-600 hover:to-red-700"
         >
           Cancel
-        </button>
+        </Button>
         <SaveAsPngButton
           svgContent={rawContent}
           scale={effectiveScale}
diff --git a/src/app/favicon.ico b/src/app/favicon.ico
deleted file mode 100644
index 718d6fe..0000000
Binary files a/src/app/favicon.ico and /dev/null differ
diff --git a/src/app/fonts/GeistMonoVF.woff b/src/app/fonts/GeistMonoVF.woff
deleted file mode 100644
index f2ae185..0000000
Binary files a/src/app/fonts/GeistMonoVF.woff and /dev/null differ
diff --git a/src/app/fonts/GeistVF.woff b/src/app/fonts/GeistVF.woff
deleted file mode 100644
index 1b62daa..0000000
Binary files a/src/app/fonts/GeistVF.woff and /dev/null differ
diff --git a/src/app/fonts/KronaOne-Regular.ttf b/src/app/fonts/KronaOne-Regular.ttf
new file mode 100644
index 0000000..51725ff
Binary files /dev/null and b/src/app/fonts/KronaOne-Regular.ttf differ
diff --git a/src/app/globals.css b/src/app/globals.css
index 6a8b964..58342a1 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -2,13 +2,64 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
-  --background: #0a0a0a;
-  --foreground: #ededed;
+@layer base {
+  :root {
+    --background: 0 0% 0%;
+    --foreground: 0 0% 100%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.5rem;
+  }
 }
 
-body {
-  color: var(--foreground);
-  background: var(--background);
-  font-family: Arial, Helvetica, sans-serif;
+@layer utilities {
+  .heading {
+    @apply text-2xl font-bold leading-[28px] text-center;
+  }
+
+  .paragraph {
+    @apply text-[10px] leading-[15px] tracking-[0.5px] text-center;
+  }
+
+  .flex-center {
+    @apply flex items-center justify-center;
+  }
+
+  .label-button {
+    @apply flex items-center gap-[10px] px-4 py-3 box-border text-xs tracking-[0.5px] rounded-lg bg-gradient-to-t from-blue-ribbon-500 to-blue-ribbon-600 hover:from-blue-ribbon-600 hover:to-blue-ribbon-700 border-t-2 hover:border-t-blue-ribbon-500 cursor-pointer;
+  }
 }
+
+@layer base {
+  * {
+    @apply border-blue-ribbon-500;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+
+  main {
+    @apply min-h-[calc(100vh-60px)] bg-background;
+  }
+}
\ No newline at end of file
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 337be0e..96cf7e0 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -2,16 +2,11 @@ import type { Metadata } from "next";
 import localFont from "next/font/local";
 import "./globals.css";
 import PlausibleProvider from "next-plausible";
+import { Navbar } from "@/components/navbar";
+import Footer from "@/components/footer";
 
-const geistSans = localFont({
-  src: "./fonts/GeistVF.woff",
-  variable: "--font-geist-sans",
-  weight: "100 900",
-});
-const geistMono = localFont({
-  src: "./fonts/GeistMonoVF.woff",
-  variable: "--font-geist-mono",
-  weight: "100 900",
+const kronaOne = localFont({
+  src: "./fonts/KronaOne-Regular.ttf",
 });
 
 export const metadata: Metadata = {
@@ -32,10 +27,10 @@ export default function RootLayout({
       <head>
         <PlausibleProvider domain="quickpic.t3.gg" />
       </head>
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} dark antialiased`}
-      >
+      <body className={`${kronaOne.className} dark antialiased`}>
+        <Navbar />
         {children}
+        <Footer />
       </body>
     </html>
   );
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 5d093b4..72e97b9 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,42 +1,36 @@
+import Heading from "@/components/heading";
+import Paragraph from "@/components/paragraph";
+import { Button } from "@/components/ui/button";
+import { heroLinks } from "@/constant";
 import Link from "next/link";
 
 export default function Home() {
   return (
-    <div className="flex min-h-screen flex-col justify-between p-8 font-[family-name:var(--font-geist-sans)] sm:p-20">
-      <main className="flex flex-grow flex-col items-center justify-center">
-        <div>
-          Hi. I&apos;m{" "}
-          <a
-            href="https://twitter.com/t3dotgg"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="hover:underline"
-          >
-            Theo
-          </a>
-          . I built these tools because I was annoyed they did not exist.
-        </div>
-        <div className="mt-4"></div>
-        <Link href="/svg-to-png" className="text-blue-500 hover:underline">
-          SVG to PNG converter
-        </Link>
-        <Link href="/square-image" className="text-blue-500 hover:underline">
-          Square image generator
-        </Link>
-        <Link href="/rounded-border" className="text-blue-500 hover:underline">
-          Corner Rounder
-        </Link>
-      </main>
-      <footer className="mt-8 text-center text-sm text-gray-500">
-        <a
-          href="https://github.com/t3dotgg/quickpic"
+    <main className="flex-center relative flex-col gap-4">
+      <Heading>QuickPic</Heading>
+      <Paragraph className="w-[282px] text-center">
+        Hi. I&apos;m{" "}
+        <Link
+          href="https://twitter.com/t3dotgg"
           target="_blank"
           rel="noopener noreferrer"
-          className="hover:underline"
+          className="text-blue-ribbon-400 underline-offset-4 hover:underline"
         >
-          View on GitHub
-        </a>
-      </footer>
-    </div>
+          Theo
+        </Link>
+        . I built these tools because I was annoyed they did not exist.
+      </Paragraph>
+
+      <div className="flex w-[272px] flex-col gap-2">
+        {heroLinks.map((link) => (
+          <Link key={link.label} href={link.href}>
+            <Button className="w-full">
+              {link.image}
+              <span>{link.label}</span>
+            </Button>
+          </Link>
+        ))}
+      </div>
+    </main>
   );
 }
diff --git a/src/assets/bg-svg.tsx b/src/assets/bg-svg.tsx
new file mode 100644
index 0000000..3e07f00
--- /dev/null
+++ b/src/assets/bg-svg.tsx
@@ -0,0 +1,383 @@
+import type { SvgProps } from "@/props/svgProps";
+import React from "react";
+
+export default function BgSvg({ className, ...events }: SvgProps) {
+  return (
+    <svg
+      className={className}
+      {...events}
+      width="360"
+      height="485"
+      viewBox="0 0 360 485"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g opacity="0.5" clipPath="url(#clip0_2_69)">
+        <path d="M435 -12H-75V498H435V-12Z" fill="black" />
+        <path
+          opacity="0.87"
+          d="M342.887 438.322L13.366 108.801C12.9926 108.428 12.3871 108.428 12.0137 108.801C11.6402 109.175 11.6402 109.78 12.0137 110.154L341.535 439.674C341.908 440.048 342.513 440.048 342.887 439.674C343.26 439.301 343.26 438.696 342.887 438.322Z"
+          fill="#0062FF"
+        />
+        <path
+          opacity="0.7"
+          d="M103.466 454.539L-72.3385 278.734C-72.7119 278.361 -73.3174 278.361 -73.6909 278.734C-74.0643 279.108 -74.0643 279.713 -73.6909 280.087L102.114 455.891C102.487 456.265 103.092 456.265 103.466 455.891C103.839 455.518 103.839 454.912 103.466 454.539Z"
+          fill="#0062FF"
+        />
+        <path
+          opacity="0.58"
+          d="M111.145 249.93L-184.567 -45.782C-184.94 -46.1555 -185.546 -46.1555 -185.919 -45.7821C-186.293 -45.4086 -186.293 -44.8031 -185.919 -44.4297L109.793 251.283C110.166 251.656 110.772 251.656 111.145 251.283C111.519 250.909 111.519 250.304 111.145 249.93Z"
+          fill="#0062FF"
+        />
+        <path
+          opacity="0.2"
+          d="M364.672 345.357L254.23 234.916C253.857 234.543 253.252 234.543 252.878 234.916C252.505 235.29 252.505 235.895 252.878 236.269L363.319 346.71C363.693 347.083 364.298 347.083 364.672 346.71C365.045 346.336 365.045 345.731 364.672 345.357Z"
+          fill="#0062FF"
+        />
+        <path
+          opacity="0.73"
+          d="M359.958 194.655L280.62 115.318C280.247 114.944 279.641 114.944 279.268 115.318C278.894 115.691 278.894 116.297 279.268 116.67L358.605 196.008C358.979 196.381 359.584 196.381 359.958 196.008C360.331 195.634 360.331 195.029 359.958 194.655Z"
+          fill="#0062FF"
+        />
+        <path
+          opacity="0.49"
+          d="M109.509 228.532L56.7681 175.791C56.3946 175.417 55.7892 175.417 55.4157 175.791C55.0423 176.164 55.0423 176.77 55.4157 177.143L108.157 229.884C108.53 230.258 109.136 230.258 109.509 229.884C109.883 229.511 109.883 228.906 109.509 228.532Z"
+          fill="#0062FF"
+        />
+        <path
+          opacity="0.22"
+          d="M327.875 53.5597L315.253 40.9379C314.88 40.5645 314.274 40.5645 313.901 40.9379C313.527 41.3113 313.527 41.9168 313.901 42.2902L326.523 54.9121C326.896 55.2855 327.502 55.2855 327.875 54.9121C328.248 54.5386 328.248 53.9332 327.875 53.5597Z"
+          fill="#0062FF"
+        />
+        <path
+          opacity="0.16"
+          d="M256.908 411.631L177.12 331.843C176.747 331.469 176.141 331.469 175.768 331.843C175.394 332.216 175.394 332.822 175.768 333.195L255.556 412.983C255.929 413.357 256.535 413.357 256.908 412.983C257.282 412.61 257.282 412.004 256.908 411.631Z"
+          fill="#0062FF"
+        />
+        <path
+          opacity="0.53"
+          d="M395.022 177.445L226.43 8.85296C226.057 8.47952 225.451 8.47952 225.078 8.85296C224.704 9.2264 224.704 9.83186 225.078 10.2053L393.67 178.797C394.043 179.171 394.649 179.171 395.022 178.797C395.396 178.424 395.396 177.818 395.022 177.445Z"
+          fill="#0062FF"
+        />
+        <path
+          opacity="0.69"
+          d="M239.965 93.7876L195.338 49.1603C194.964 48.7869 194.359 48.7869 193.985 49.1603C193.612 49.5337 193.612 50.1392 193.985 50.5126L238.613 95.1399C238.986 95.5134 239.592 95.5134 239.965 95.1399C240.338 94.7665 240.338 94.161 239.965 93.7876Z"
+          fill="#0062FF"
+        />
+        <path
+          opacity="0.26"
+          d="M353.122 434.532L156.131 237.541C155.757 237.168 155.152 237.168 154.778 237.541C154.405 237.915 154.405 238.52 154.778 238.894L351.77 435.885C352.143 436.258 352.748 436.258 353.122 435.885C353.495 435.511 353.495 434.906 353.122 434.532Z"
+          fill="#0062FF"
+        />
+        <path
+          opacity="0.55"
+          d="M66.449 86.0217L25.8787 45.4514C25.5053 45.078 24.8998 45.078 24.5264 45.4514C24.153 45.8249 24.153 46.4303 24.5264 46.8038L65.0967 87.3741C65.4701 87.7475 66.0756 87.7475 66.449 87.3741C66.8225 87.0006 66.8225 86.3952 66.449 86.0217Z"
+          fill="#0062FF"
+        />
+        <path
+          opacity="0.15"
+          d="M196.009 529.869L-57.7808 276.08C-58.1542 275.706 -58.7597 275.706 -59.1331 276.08C-59.5066 276.453 -59.5066 277.059 -59.1331 277.432L194.656 531.222C195.03 531.595 195.635 531.595 196.009 531.222C196.382 530.848 196.382 530.243 196.009 529.869Z"
+          fill="#0062FF"
+        />
+        <path
+          opacity="0.74"
+          d="M257.081 193.779L193.521 130.219C193.148 129.845 192.542 129.845 192.169 130.219C191.795 130.592 191.795 131.198 192.169 131.571L255.729 195.131C256.102 195.505 256.708 195.505 257.081 195.131C257.455 194.758 257.455 194.152 257.081 193.779Z"
+          fill="#0062FF"
+        />
+        <path
+          d="M32.0915 311.127L-129.739 149.296C-130.112 148.923 -130.718 148.923 -131.091 149.296C-131.465 149.67 -131.465 150.275 -131.091 150.649L30.7392 312.479C31.1126 312.852 31.7181 312.852 32.0916 312.479C32.465 312.105 32.465 311.5 32.0915 311.127Z"
+          fill="#0062FF"
+        />
+        <path
+          opacity="0.63"
+          d="M140.277 144.55L66.8001 71.0727C66.4266 70.6993 65.8212 70.6993 65.4477 71.0727C65.0743 71.4462 65.0743 72.0517 65.4477 72.4251L138.925 145.902C139.298 146.276 139.904 146.276 140.277 145.902C140.651 145.529 140.651 144.923 140.277 144.55Z"
+          fill="#0062FF"
+        />
+        <path
+          opacity="0.51"
+          d="M50.5129 488.286L-34.6846 403.088C-35.0581 402.715 -35.6635 402.715 -36.037 403.088C-36.4104 403.462 -36.4104 404.067 -36.037 404.44L49.1606 489.638C49.534 490.011 50.1395 490.011 50.5129 489.638C50.8864 489.265 50.8864 488.659 50.5129 488.286Z"
+          fill="#0062FF"
+        />
+        <path
+          opacity="0.39"
+          d="M226.381 422.541L62.2969 258.457C61.9235 258.084 61.318 258.084 60.9446 258.457C60.5711 258.831 60.5711 259.436 60.9446 259.81L225.029 423.894C225.402 424.267 226.008 424.267 226.381 423.894C226.755 423.52 226.755 422.915 226.381 422.541Z"
+          fill="#0062FF"
+        />
+        <path
+          opacity="0.96"
+          d="M280.217 156.99L2.0854 -121.142C1.71196 -121.515 1.10649 -121.515 0.733054 -121.142C0.359615 -120.768 0.359615 -120.163 0.733054 -119.789L278.865 158.342C279.238 158.716 279.844 158.716 280.217 158.342C280.59 157.969 280.59 157.363 280.217 156.99Z"
+          fill="#0062FF"
+        />
+        <path
+          opacity="0.12"
+          d="M529.267 400.302L280.886 151.921C280.513 151.548 279.907 151.548 279.534 151.921C279.16 152.295 279.16 152.9 279.534 153.274L527.914 401.654C528.288 402.027 528.893 402.027 529.267 401.654C529.64 401.28 529.64 400.675 529.267 400.302Z"
+          fill="#0062FF"
+        />
+        <path
+          opacity="0.82"
+          d="M328.035 440.683L86.8675 199.515C86.494 199.142 85.8886 199.142 85.5151 199.515C85.1417 199.889 85.1417 200.494 85.5151 200.868L326.683 442.035C327.056 442.409 327.662 442.409 328.035 442.035C328.408 441.662 328.408 441.056 328.035 440.683Z"
+          fill="#0062FF"
+        />
+        <path
+          opacity="0.88"
+          d="M524.745 284.218L300.707 60.1799C300.334 59.8065 299.728 59.8065 299.355 60.1799C298.981 60.5534 298.981 61.1588 299.355 61.5323L523.393 285.57C523.766 285.944 524.372 285.944 524.745 285.57C525.118 285.197 525.118 284.591 524.745 284.218Z"
+          fill="#0062FF"
+        />
+        <path
+          opacity="0.68"
+          d="M127.03 172.74L108.098 153.807C107.724 153.434 107.119 153.434 106.745 153.807C106.372 154.181 106.372 154.786 106.745 155.16L125.678 174.093C126.051 174.466 126.657 174.466 127.03 174.093C127.404 173.719 127.404 173.114 127.03 172.74Z"
+          fill="#0062FF"
+        />
+        <path
+          opacity="0.71"
+          d="M17.7826 105.568L-119.255 -31.4698C-119.628 -31.8432 -120.234 -31.8432 -120.607 -31.4698C-120.981 -31.0964 -120.981 -30.4909 -120.607 -30.1175L16.4303 106.92C16.8037 107.293 17.4092 107.293 17.7826 106.92C18.1561 106.547 18.1561 105.941 17.7826 105.568Z"
+          fill="#0062FF"
+        />
+        <path
+          opacity="0.36"
+          d="M486.641 152.401L354.112 19.8713C353.738 19.4979 353.133 19.4979 352.759 19.8713C352.386 20.2448 352.386 20.8502 352.759 21.2237L485.289 153.753C485.662 154.127 486.268 154.127 486.641 153.753C487.015 153.38 487.015 152.774 486.641 152.401Z"
+          fill="#0062FF"
+        />
+        <path
+          opacity="0.89"
+          d="M478.483 545.869L326.57 393.955C326.197 393.582 325.591 393.582 325.218 393.955C324.844 394.329 324.844 394.934 325.218 395.308L477.131 547.221C477.504 547.594 478.11 547.594 478.483 547.221C478.856 546.847 478.856 546.242 478.483 545.869Z"
+          fill="#0062FF"
+        />
+        <path
+          opacity="0.41"
+          d="M323.584 521.02L111.718 309.153C111.344 308.78 110.739 308.78 110.365 309.153C109.992 309.527 109.992 310.132 110.365 310.506L322.232 522.372C322.605 522.746 323.211 522.746 323.584 522.372C323.958 521.999 323.958 521.393 323.584 521.02Z"
+          fill="#0062FF"
+        />
+        <path
+          opacity="0.26"
+          d="M408.749 182.884L324.903 99.039C324.53 98.6655 323.924 98.6655 323.551 99.039C323.178 99.4124 323.178 100.018 323.551 100.391L407.396 184.237C407.77 184.61 408.375 184.61 408.749 184.237C409.122 183.863 409.122 183.258 408.749 182.884Z"
+          fill="#0062FF"
+        />
+        <path
+          opacity="0.35"
+          d="M460.376 408.548L302.603 250.775C302.229 250.402 301.624 250.402 301.25 250.775C300.877 251.149 300.877 251.754 301.25 252.128L459.024 409.901C459.397 410.274 460.002 410.274 460.376 409.901C460.749 409.527 460.749 408.922 460.376 408.548Z"
+          fill="#0062FF"
+        />
+        <path
+          opacity="0.58"
+          d="M417.279 460.439L183.774 226.935C183.401 226.561 182.796 226.561 182.422 226.935C182.049 227.308 182.049 227.913 182.422 228.287L415.926 461.791C416.3 462.165 416.905 462.165 417.279 461.791C417.652 461.418 417.652 460.812 417.279 460.439Z"
+          fill="#0062FF"
+        />
+        <path
+          d="M285.369 76.7165L250.659 42.0064C250.286 41.6329 249.68 41.6329 249.307 42.0064C248.933 42.3798 248.933 42.9853 249.307 43.3587L284.017 78.0688C284.39 78.4423 284.996 78.4423 285.369 78.0688C285.743 77.6954 285.743 77.0899 285.369 76.7165Z"
+          fill="#0062FF"
+        />
+        <path
+          opacity="0.85"
+          d="M203.89 147.601L-58.0134 -114.303C-58.3869 -114.676 -58.9923 -114.676 -59.3658 -114.303C-59.7392 -113.929 -59.7392 -113.324 -59.3658 -112.951L202.538 148.953C202.911 149.327 203.517 149.327 203.89 148.953C204.264 148.58 204.264 147.974 203.89 147.601Z"
+          fill="#0062FF"
+        />
+        <path
+          opacity="0.17"
+          d="M182.843 465.704L62.4847 345.345C62.1113 344.972 61.5058 344.972 61.1324 345.345C60.7589 345.719 60.7589 346.324 61.1324 346.697L181.491 467.056C181.864 467.429 182.47 467.429 182.843 467.056C183.217 466.682 183.217 466.077 182.843 465.704Z"
+          fill="#0062FF"
+        />
+        <path
+          opacity="0.93"
+          d="M318.308 57.3809L224.095 -36.8323C223.722 -37.2058 223.116 -37.2058 222.743 -36.8323C222.369 -36.4589 222.369 -35.8534 222.743 -35.48L316.956 58.7332C317.329 59.1067 317.935 59.1066 318.308 58.7332C318.682 58.3598 318.682 57.7543 318.308 57.3809Z"
+          fill="#0062FF"
+        />
+        <path
+          opacity="0.63"
+          d="M82.3634 261.948L-61.4357 118.149C-61.8091 117.776 -62.4146 117.776 -62.788 118.149C-63.1615 118.523 -63.1615 119.128 -62.788 119.502L81.0111 263.301C81.3845 263.674 81.99 263.674 82.3634 263.301C82.7369 262.927 82.7369 262.322 82.3634 261.948Z"
+          fill="#0062FF"
+        />
+        <path
+          opacity="0.95"
+          d="M216.713 189.749L130.614 103.649C130.24 103.276 129.635 103.276 129.261 103.649C128.888 104.023 128.888 104.628 129.261 105.002L215.361 191.101C215.734 191.474 216.339 191.474 216.713 191.101C217.086 190.728 217.086 190.122 216.713 189.749Z"
+          fill="#0062FF"
+        />
+        <path
+          opacity="0.55"
+          d="M321.847 586.857L81.5811 346.591C81.2077 346.218 80.6022 346.218 80.2288 346.591C79.8554 346.965 79.8554 347.57 80.2288 347.944L320.495 588.21C320.868 588.583 321.473 588.583 321.847 588.209C322.22 587.836 322.22 587.231 321.847 586.857Z"
+          fill="#0062FF"
+        />
+        <path
+          opacity="0.42"
+          d="M384.347 278.97L158.055 52.6778C157.682 52.3044 157.076 52.3044 156.703 52.6778C156.33 53.0513 156.33 53.6567 156.703 54.0302L382.995 280.322C383.368 280.695 383.974 280.695 384.347 280.322C384.721 279.949 384.721 279.343 384.347 278.97Z"
+          fill="#0062FF"
+        />
+        <path
+          opacity="0.2"
+          d="M149.192 541.702L1.78642 394.297C1.41298 393.923 0.807513 393.923 0.434073 394.297C0.0606344 394.67 0.0606342 395.276 0.434073 395.649L147.839 543.054C148.213 543.428 148.818 543.428 149.192 543.054C149.565 542.681 149.565 542.075 149.192 541.702Z"
+          fill="#0062FF"
+        />
+        <path
+          opacity="0.18"
+          d="M10.3569 351.867L-82.5039 259.006C-82.8773 258.633 -83.4828 258.633 -83.8562 259.006C-84.2296 259.38 -84.2296 259.985 -83.8562 260.358L9.00454 353.219C9.37798 353.593 9.98344 353.593 10.3569 353.219C10.7303 352.846 10.7303 352.24 10.3569 351.867Z"
+          fill="#0062FF"
+        />
+        <path
+          opacity="0.49"
+          d="M153.233 173.443L-157.806 -137.596C-158.179 -137.969 -158.784 -137.969 -159.158 -137.596C-159.531 -137.222 -159.531 -136.617 -159.158 -136.243L151.881 174.796C152.254 175.169 152.86 175.169 153.233 174.796C153.607 174.422 153.607 173.817 153.233 173.443Z"
+          fill="#0062FF"
+        />
+        <path
+          opacity="0.63"
+          d="M334.843 31.203L286.609 -17.0305C286.236 -17.4039 285.63 -17.4039 285.257 -17.0305C284.883 -16.6571 284.883 -16.0516 285.257 -15.6782L333.49 32.5554C333.864 32.9288 334.469 32.9288 334.843 32.5554C335.216 32.1819 335.216 31.5765 334.843 31.203Z"
+          fill="#0062FF"
+        />
+        <path
+          opacity="0.11"
+          d="M44.8995 255.722L-141.273 69.5503C-141.646 69.1768 -142.252 69.1768 -142.625 69.5503C-142.999 69.9237 -142.999 70.5292 -142.625 70.9026L43.5472 257.075C43.9206 257.448 44.5261 257.448 44.8995 257.075C45.2729 256.701 45.2729 256.096 44.8995 255.722Z"
+          fill="#0062FF"
+        />
+        <path
+          opacity="0.88"
+          d="M158.989 486.474L129.689 457.174C129.315 456.8 128.71 456.8 128.336 457.174C127.963 457.547 127.963 458.152 128.336 458.526L157.637 487.827C158.01 488.2 158.616 488.2 158.989 487.827C159.363 487.453 159.363 486.848 158.989 486.474Z"
+          fill="#0062FF"
+        />
+        <path
+          opacity="0.49"
+          d="M59.1318 567.029L-149.129 358.769C-149.502 358.395 -150.108 358.395 -150.481 358.769C-150.855 359.142 -150.855 359.747 -150.481 360.121L57.7794 568.382C58.1529 568.755 58.7583 568.755 59.1318 568.382C59.5052 568.008 59.5052 567.403 59.1318 567.029Z"
+          fill="#0062FF"
+        />
+        <path
+          opacity="0.8"
+          d="M445.082 284.242L279.646 118.806C279.272 118.432 278.667 118.432 278.293 118.806C277.92 119.179 277.92 119.785 278.293 120.158L443.73 285.594C444.103 285.968 444.709 285.968 445.082 285.594C445.456 285.221 445.456 284.616 445.082 284.242Z"
+          fill="#0062FF"
+        />
+        <path
+          opacity="0.23"
+          d="M462.675 483.523L291.378 312.226C291.005 311.853 290.399 311.853 290.026 312.226C289.652 312.599 289.652 313.205 290.026 313.578L461.322 484.875C461.696 485.248 462.301 485.248 462.675 484.875C463.048 484.502 463.048 483.896 462.675 483.523Z"
+          fill="#0062FF"
+        />
+        <path
+          opacity="0.74"
+          d="M36.3449 173.855L-14.1425 123.368C-14.516 122.994 -15.1214 122.994 -15.4949 123.368C-15.8683 123.741 -15.8683 124.346 -15.4949 124.72L34.9926 175.207C35.366 175.581 35.9715 175.581 36.3449 175.207C36.7183 174.834 36.7183 174.228 36.3449 173.855Z"
+          fill="#0062FF"
+        />
+        <path
+          opacity="0.34"
+          d="M454.408 578.531L215.494 339.618C215.121 339.244 214.516 339.244 214.142 339.618C213.769 339.991 213.769 340.596 214.142 340.97L453.056 579.884C453.429 580.257 454.035 580.257 454.408 579.884C454.782 579.51 454.782 578.905 454.408 578.531Z"
+          fill="#0062FF"
+        />
+        <path
+          opacity="0.14"
+          d="M204.409 141.106L80.444 17.1416C80.0705 16.7681 79.4651 16.7681 79.0916 17.1416C78.7182 17.515 78.7182 18.1205 79.0916 18.4939L203.056 142.459C203.43 142.832 204.035 142.832 204.409 142.459C204.782 142.085 204.782 141.48 204.409 141.106Z"
+          fill="#0062FF"
+        />
+        <path
+          opacity="0.24"
+          d="M297.718 321.116L76.3844 99.7824C76.011 99.4089 75.4055 99.4089 75.0321 99.7824C74.6586 100.156 74.6586 100.761 75.032 101.135L296.365 322.468C296.739 322.841 297.344 322.841 297.718 322.468C298.091 322.095 298.091 321.489 297.718 321.116Z"
+          fill="#0062FF"
+        />
+        <path
+          opacity="0.6"
+          d="M416.195 443.417L265.183 292.406C264.81 292.032 264.205 292.032 263.831 292.406C263.458 292.779 263.458 293.385 263.831 293.758L414.843 444.77C415.216 445.143 415.822 445.143 416.195 444.77C416.568 444.396 416.568 443.791 416.195 443.417Z"
+          fill="#0062FF"
+        />
+        <path
+          opacity="0.64"
+          d="M265.415 46.5617L192.839 -26.014C192.465 -26.3875 191.86 -26.3875 191.487 -26.014C191.113 -25.6406 191.113 -25.0351 191.487 -24.6617L264.062 47.914C264.436 48.2874 265.041 48.2875 265.415 47.914C265.788 47.5406 265.788 46.9351 265.415 46.5617Z"
+          fill="#0062FF"
+        />
+        <path
+          opacity="0.14"
+          d="M237.699 494.422L-91.8217 164.901C-92.1951 164.528 -92.8006 164.528 -93.174 164.901C-93.5475 165.275 -93.5475 165.88 -93.174 166.254L236.347 495.774C236.72 496.148 237.326 496.148 237.699 495.774C238.073 495.401 238.073 494.796 237.699 494.422Z"
+          fill="#0062FF"
+        />
+        <path
+          opacity="0.68"
+          d="M136.095 390.268L-88.393 165.779C-88.7665 165.406 -89.3719 165.406 -89.7454 165.779C-90.1188 166.153 -90.1188 166.758 -89.7454 167.132L134.743 391.62C135.117 391.993 135.722 391.993 136.095 391.62C136.469 391.247 136.469 390.641 136.095 390.268Z"
+          fill="#0062FF"
+        />
+        <path
+          opacity="0.69"
+          d="M55.4501 131.76L27.9525 104.263C27.5791 103.889 26.9736 103.889 26.6002 104.263C26.2267 104.636 26.2267 105.242 26.6002 105.615L54.0978 133.113C54.4712 133.486 55.0767 133.486 55.4501 133.113C55.8236 132.739 55.8236 132.134 55.4501 131.76Z"
+          fill="#0062FF"
+        />
+        <path
+          opacity="0.63"
+          d="M385.656 39.9416L336.521 -9.19349C336.148 -9.56693 335.542 -9.56693 335.169 -9.19349C334.795 -8.82005 334.795 -8.21459 335.169 -7.84115L384.304 41.2939C384.677 41.6673 385.283 41.6673 385.656 41.2939C386.03 40.9205 386.03 40.315 385.656 39.9416Z"
+          fill="#0062FF"
+        />
+        <path
+          opacity="0.99"
+          d="M311.837 165.659L198.691 52.5136C198.317 52.1402 197.712 52.1402 197.339 52.5136C196.965 52.887 196.965 53.4925 197.339 53.8659L310.484 167.012C310.858 167.385 311.463 167.385 311.837 167.012C312.21 166.638 312.21 166.033 311.837 165.659Z"
+          fill="#0062FF"
+        />
+        <path
+          opacity="0.69"
+          d="M229.86 383.308L-11.3076 142.14C-11.6811 141.767 -12.2865 141.767 -12.66 142.14C-13.0334 142.514 -13.0334 143.119 -12.66 143.492L228.508 384.66C228.881 385.033 229.486 385.033 229.86 384.66C230.233 384.287 230.233 383.681 229.86 383.308Z"
+          fill="#0062FF"
+        />
+        <path
+          opacity="0.43"
+          d="M208.675 45.9234L180.727 17.975C180.354 17.6016 179.748 17.6016 179.375 17.975C179.001 18.3485 179.001 18.9539 179.375 19.3274L207.323 47.2758C207.697 47.6492 208.302 47.6492 208.675 47.2758C209.049 46.9023 209.049 46.2969 208.675 45.9234Z"
+          fill="#0062FF"
+        />
+        <path
+          opacity="0.87"
+          d="M278.08 274.066L215.872 211.858C215.499 211.485 214.893 211.485 214.52 211.858C214.147 212.232 214.147 212.837 214.52 213.211L276.728 275.418C277.101 275.792 277.707 275.792 278.08 275.418C278.454 275.045 278.454 274.439 278.08 274.066Z"
+          fill="#0062FF"
+        />
+        <path
+          opacity="0.55"
+          d="M412.361 93.4207L358.267 39.3271C357.893 38.9536 357.288 38.9536 356.914 39.3271C356.541 39.7005 356.541 40.306 356.914 40.6794L411.008 94.7731C411.382 95.1465 411.987 95.1465 412.361 94.7731C412.734 94.3997 412.734 93.7942 412.361 93.4207Z"
+          fill="#0062FF"
+        />
+        <path
+          opacity="0.62"
+          d="M265.287 173.297L122.84 30.8505C122.467 30.4771 121.862 30.4771 121.488 30.8505C121.115 31.224 121.115 31.8295 121.488 32.2029L263.935 174.65C264.308 175.023 264.914 175.023 265.287 174.65C265.661 174.276 265.661 173.671 265.287 173.297Z"
+          fill="#0062FF"
+        />
+        <path
+          opacity="0.72"
+          d="M274.892 298.289L257.312 280.709C256.938 280.336 256.333 280.336 255.959 280.709C255.586 281.083 255.586 281.688 255.959 282.061L273.54 299.642C273.913 300.015 274.519 300.015 274.892 299.642C275.265 299.268 275.265 298.663 274.892 298.289Z"
+          fill="#0062FF"
+        />
+        <path
+          opacity="0.43"
+          d="M103.047 315.782L-65.5448 147.19C-65.9183 146.817 -66.5237 146.817 -66.8972 147.19C-67.2706 147.564 -67.2706 148.169 -66.8972 148.543L101.695 317.135C102.068 317.508 102.674 317.508 103.047 317.135C103.421 316.761 103.421 316.156 103.047 315.782Z"
+          fill="#0062FF"
+        />
+        <path
+          opacity="0.39"
+          d="M390.364 133.262L317.788 60.6862C317.415 60.3128 316.81 60.3128 316.436 60.6862C316.063 61.0597 316.063 61.6651 316.436 62.0386L389.012 134.614C389.385 134.988 389.991 134.988 390.364 134.614C390.738 134.241 390.738 133.635 390.364 133.262Z"
+          fill="#0062FF"
+        />
+        <path
+          opacity="0.97"
+          d="M335.303 540.388L189.25 394.335C188.877 393.962 188.271 393.962 187.898 394.335C187.524 394.709 187.524 395.314 187.898 395.688L333.951 541.741C334.324 542.114 334.93 542.114 335.303 541.741C335.676 541.367 335.676 540.762 335.303 540.388Z"
+          fill="#0062FF"
+        />
+        <path
+          opacity="0.83"
+          d="M252.074 500.51L81.2284 329.664C80.855 329.29 80.2495 329.29 79.8761 329.664C79.5026 330.037 79.5026 330.643 79.8761 331.016L250.722 501.862C251.095 502.236 251.701 502.236 252.074 501.862C252.448 501.489 252.448 500.883 252.074 500.51Z"
+          fill="#0062FF"
+        />
+        <path
+          opacity="0.66"
+          d="M314.301 433.324L256.151 375.174C255.777 374.8 255.172 374.8 254.798 375.174C254.425 375.547 254.425 376.152 254.798 376.526L312.949 434.677C313.323 435.05 313.928 435.05 314.301 434.677C314.675 434.303 314.675 433.698 314.301 433.324Z"
+          fill="#0062FF"
+        />
+        <path
+          opacity="0.12"
+          d="M479.362 411.596L222.417 154.651C222.043 154.278 221.438 154.278 221.064 154.651C220.691 155.025 220.691 155.63 221.064 156.004L478.009 412.949C478.383 413.322 478.988 413.322 479.362 412.949C479.735 412.575 479.735 411.97 479.362 411.596Z"
+          fill="#0062FF"
+        />
+        <path
+          opacity="0.66"
+          d="M342.397 258.057L275.231 190.891C274.857 190.517 274.252 190.517 273.878 190.891C273.505 191.264 273.505 191.87 273.878 192.243L341.045 259.409C341.418 259.783 342.024 259.783 342.397 259.409C342.771 259.036 342.771 258.431 342.397 258.057Z"
+          fill="#0062FF"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_2_69">
+          <rect
+            width="510"
+            height="510"
+            fill="white"
+            transform="translate(-75 -12)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
diff --git a/src/assets/logo-svg.tsx b/src/assets/logo-svg.tsx
new file mode 100644
index 0000000..1c3d3a3
--- /dev/null
+++ b/src/assets/logo-svg.tsx
@@ -0,0 +1,25 @@
+import type { SvgProps } from "@/props/svgProps";
+import React from "react";
+
+export default function LogoSvg({ className, ...events }: SvgProps) {
+  return (
+    <svg
+      className={className}
+      {...events}
+      width="32"
+      height="32"
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M6.73384 3.96042C6.34333 3.5699 5.71018 3.56988 5.31965 3.96038L4.02879 5.25113C3.63824 5.64165 3.63823 6.27484 4.02876 6.66538L12.6563 15.2929C13.0468 15.6834 13.0468 16.3166 12.6563 16.7071L4.02876 25.3346C3.63823 25.7251 3.63824 26.3583 4.02879 26.7489L5.31965 28.0396C5.71018 28.4301 6.34333 28.4301 6.73384 28.0396L18.0661 16.7071C18.4566 16.3166 18.4566 15.6834 18.0661 15.2929L6.73384 3.96042Z"
+        fill="white"
+      />
+      <path
+        d="M16.6388 3.96043C16.2483 3.56991 15.6151 3.56991 15.2246 3.96043L13.9339 5.25113C13.5434 5.64166 13.5434 6.27482 13.9339 6.66535L22.5614 15.2929C22.9519 15.6834 22.9519 16.3166 22.5614 16.7071L13.9339 25.3346C13.5434 25.7252 13.5434 26.3583 13.9339 26.7489L15.2246 28.0396C15.6151 28.4301 16.2483 28.4301 16.6388 28.0396L27.9712 16.7071C28.3618 16.3166 28.3618 15.6834 27.9712 15.2929L16.6388 3.96043Z"
+        fill="white"
+      />
+    </svg>
+  );
+}
diff --git a/src/assets/x-svg.tsx b/src/assets/x-svg.tsx
new file mode 100644
index 0000000..df4cdba
--- /dev/null
+++ b/src/assets/x-svg.tsx
@@ -0,0 +1,29 @@
+import type { SvgProps } from "@/props/svgProps";
+import React from "react";
+
+export default function XSvg({ className, ...events }: SvgProps) {
+  return (
+    <svg
+      className={className}
+      {...events}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M19.8841 4.11599C20.3722 4.60415 20.3722 5.39561 19.8841 5.88376L5.88407 19.8838C5.39591 20.3719 4.60445 20.3719 4.1163 19.8838C3.62814 19.3956 3.62814 18.6041 4.1163 18.116L18.1163 4.11599C18.6045 3.62784 19.3959 3.62784 19.8841 4.11599Z"
+        fill="#0676FF"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.1163 4.11599C4.60445 3.62784 5.39591 3.62784 5.88407 4.11599L19.8841 18.116C20.3722 18.6041 20.3722 19.3956 19.8841 19.8838C19.3959 20.3719 18.6045 20.3719 18.1163 19.8838L4.1163 5.88376C3.62814 5.39561 3.62814 4.60415 4.1163 4.11599Z"
+        fill="#0676FF"
+      />
+    </svg>
+  );
+}
diff --git a/src/components/border-radius-selector.tsx b/src/components/border-radius-selector.tsx
index 8ff2ed8..93a7845 100644
--- a/src/components/border-radius-selector.tsx
+++ b/src/components/border-radius-selector.tsx
@@ -1,4 +1,5 @@
 import React, { useRef, useEffect } from "react";
+import Paragraph from "./paragraph";
 
 interface BorderRadiusSelectorProps {
   title: string;
@@ -62,15 +63,15 @@ export function BorderRadiusSelector({
 
   return (
     <div className="flex flex-col items-center gap-2">
-      <span className="text-sm text-white/60">{title}</span>
+      <Paragraph className="opacity-80">{title}</Paragraph>
       <div className="flex flex-col items-center gap-2">
         <div
           ref={containerRef}
-          className="relative inline-flex rounded-lg bg-white/5 p-1"
+          className="relative inline-flex rounded-lg bg-white/10 p-1 backdrop-blur-sm"
         >
           <div
             ref={highlightRef}
-            className="absolute inset-y-1 rounded-md bg-blue-600 transition-all duration-200"
+            className="absolute top-1 h-[calc(100%-8px)] rounded-md bg-blue-ribbon-600 transition-all duration-200"
           />
           {[...options, "custom" as const].map((option) => (
             <button
@@ -79,7 +80,7 @@ export function BorderRadiusSelector({
               onClick={() =>
                 onChange(typeof option === "number" ? option : "custom")
               }
-              className={`relative rounded-md px-3 py-1.5 text-sm font-medium transition-colors ${
+              className={`relative rounded-md px-3 py-1.5 text-[10px] font-medium transition-colors ${
                 option === selected
                   ? "text-white"
                   : "text-white/80 hover:text-white"
@@ -99,7 +100,7 @@ export function BorderRadiusSelector({
                 value={customValue}
                 onChange={handleInputChange}
                 onKeyDown={handleKeyDown}
-                className="w-24 rounded-lg bg-white/5 px-3 py-1.5 text-sm text-white"
+                className="w-24 rounded-lg bg-white/10 px-3 py-1.5 text-[10px] text-white backdrop-blur-sm"
                 placeholder="Enter radius"
               />
               <span className="absolute right-3 text-sm text-white/60">px</span>
diff --git a/src/components/footer.tsx b/src/components/footer.tsx
new file mode 100644
index 0000000..dc996e3
--- /dev/null
+++ b/src/components/footer.tsx
@@ -0,0 +1,32 @@
+import { Github, Twitter, Youtube } from "lucide-react";
+import Link from "next/link";
+import Logo from "./logo";
+import Paragraph from "./paragraph";
+
+export default function Footer() {
+  return (
+    <footer className="flex flex-col items-center gap-3 bg-blue-ribbon-700 px-6 py-4">
+      <div className="flex w-full justify-between">
+        <Logo />
+
+        <div className="flex gap-3">
+          <Link href="https://github.com/t3dotgg/quickpic" target="_blank">
+            <Github />
+          </Link>
+          <Link href="https://x.com/theo" target="_blank">
+            <Twitter />
+          </Link>
+          <Link href="https://www.youtube.com/@t3dotgg" target="_blank">
+            <Youtube />
+          </Link>
+        </div>
+      </div>
+
+      <div className="h-[2px] w-full bg-white/25"></div>
+
+      <Paragraph className="text-center">
+        &copy; QuickPic {new Date().getFullYear()}. All rights reserved.
+      </Paragraph>
+    </footer>
+  );
+}
diff --git a/src/components/heading.tsx b/src/components/heading.tsx
new file mode 100644
index 0000000..c3c5419
--- /dev/null
+++ b/src/components/heading.tsx
@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils";
+import type { HTMLAttributes } from "react";
+
+export default function Heading({
+  className,
+  children,
+}: HTMLAttributes<HTMLHeadingElement>) {
+  return (
+    <h1
+      className={cn("text-center text-2xl font-bold leading-[28px]", className)}
+    >
+      {children}
+    </h1>
+  );
+}
diff --git a/src/components/logo.tsx b/src/components/logo.tsx
new file mode 100644
index 0000000..30f3b6b
--- /dev/null
+++ b/src/components/logo.tsx
@@ -0,0 +1,11 @@
+import LogoSvg from "@/assets/logo-svg";
+import Link from "next/link";
+
+export default function Logo() {
+  return (
+    <Link href="/" className="flex items-center gap-3">
+      <LogoSvg />
+      <span className="heading">QuickPic</span>
+    </Link>
+  );
+}
diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
new file mode 100644
index 0000000..370ff96
--- /dev/null
+++ b/src/components/navbar.tsx
@@ -0,0 +1,82 @@
+"use client";
+
+import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
+
+import { navigationLinks } from "@/constant";
+import { Menu } from "lucide-react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useState } from "react";
+import Logo from "./logo";
+import Paragraph from "./paragraph";
+
+export function Navbar() {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const pathname = usePathname();
+
+  return (
+    <nav className="sticky top-0 z-50 flex h-[60px] items-center justify-between bg-blue-ribbon-700 px-6 text-white">
+      <Logo />
+
+      <ul className="hidden gap-1 lg:flex">
+        {navigationLinks.map((link) => {
+          return (
+            <li key={link.label}>
+              <Link
+                href={link.href}
+                className={`flex items-center gap-[10px] rounded-md px-3 py-2 transition-colors ${
+                  link.href === "/"
+                    ? pathname === "/"
+                      ? "bg-blue-ribbon-500"
+                      : "hover:bg-blue-ribbon-600"
+                    : pathname.includes(link.href)
+                      ? "bg-blue-ribbon-500"
+                      : "hover:bg-blue-ribbon-600"
+                }`}
+              >
+                {link.image}
+                <Paragraph className="font-bold">{link.label}</Paragraph>
+              </Link>
+            </li>
+          );
+        })}
+      </ul>
+
+      <div className="size-6 lg:hidden">
+        <Sheet open={isMenuOpen} onOpenChange={setIsMenuOpen}>
+          <SheetTrigger asChild>
+            <button onClick={() => setIsMenuOpen(true)}>
+              <Menu />
+            </button>
+          </SheetTrigger>
+          <SheetContent>
+            <ul className="w-full">
+              {navigationLinks.map((link) => {
+                return (
+                  <li key={link.label}>
+                    <Link
+                      href={link.href}
+                      className={`flex items-center gap-4 px-6 py-3 transition-colors ${
+                        link.href === "/"
+                          ? pathname === "/"
+                            ? "bg-blue-ribbon-700 hover:bg-blue-ribbon-600"
+                            : "hover:bg-white/10"
+                          : pathname.includes(link.href)
+                            ? "bg-blue-ribbon-700 hover:bg-blue-ribbon-600"
+                            : "hover:bg-white/10"
+                      }`}
+                      onClick={() => setIsMenuOpen(false)}
+                    >
+                      {link.image}
+                      <Paragraph className="font-bold">{link.label}</Paragraph>
+                    </Link>
+                  </li>
+                );
+              })}
+            </ul>
+          </SheetContent>
+        </Sheet>
+      </div>
+    </nav>
+  );
+}
diff --git a/src/components/paragraph.tsx b/src/components/paragraph.tsx
new file mode 100644
index 0000000..8767f89
--- /dev/null
+++ b/src/components/paragraph.tsx
@@ -0,0 +1,18 @@
+import { cn } from "@/lib/utils";
+import type { HTMLAttributes } from "react";
+
+export default function Paragraph({
+  className,
+  children,
+}: HTMLAttributes<HTMLParagraphElement>) {
+  return (
+    <p
+      className={cn(
+        "text-center text-[10px] leading-[15px] tracking-[0.5px]",
+        className,
+      )}
+    >
+      {children}
+    </p>
+  );
+}
diff --git a/src/components/shared/file-dropzone.tsx b/src/components/shared/file-dropzone.tsx
index fc0ad70..0066b12 100644
--- a/src/components/shared/file-dropzone.tsx
+++ b/src/components/shared/file-dropzone.tsx
@@ -85,7 +85,7 @@ export function FileDropzone({
       {isDragging && (
         <div className="fixed inset-0 z-50 flex items-center justify-center">
           <div className="absolute inset-0 bg-black/80 backdrop-blur-sm" />
-          <div className="animate-in fade-in zoom-in relative flex h-[90%] w-[90%] transform items-center justify-center rounded-xl border-2 border-dashed border-white/30 transition-all duration-200 ease-out">
+          <div className="relative flex h-[90%] w-[90%] transform items-center justify-center rounded-xl border-2 border-dashed border-white/30 transition-all duration-200 ease-out animate-in fade-in zoom-in">
             <p className="text-2xl font-semibold text-white">{dropText}</p>
           </div>
         </div>
diff --git a/src/components/shared/option-selector.tsx b/src/components/shared/option-selector.tsx
index b77ce5e..b8e7a1c 100644
--- a/src/components/shared/option-selector.tsx
+++ b/src/components/shared/option-selector.tsx
@@ -37,11 +37,11 @@ export function OptionSelector<T extends string | number>({
 
   return (
     <div className="flex flex-col items-center gap-2">
-      <span className="text-sm text-white/60">{title}</span>
+      <span className="paragraph opacity-80">{title}</span>
       <div className="flex flex-col items-center gap-2">
         <div
           ref={containerRef}
-          className="relative inline-flex rounded-lg bg-white/5 p-1"
+          className="relative inline-flex rounded-lg bg-white/10 p-1 backdrop-blur-sm"
         >
           <div
             ref={highlightRef}
@@ -52,7 +52,7 @@ export function OptionSelector<T extends string | number>({
               key={option}
               ref={option === selected ? selectedRef : null}
               onClick={() => onChange(option)}
-              className={`relative rounded-md px-3 py-1.5 text-sm font-medium transition-colors ${
+              className={`relative px-3 py-1.5 text-xs transition-colors ${
                 option === selected
                   ? "text-white"
                   : "text-white/80 hover:text-white"
diff --git a/src/components/shared/upload-box.tsx b/src/components/shared/upload-box.tsx
index 4972a4a..002dbf6 100644
--- a/src/components/shared/upload-box.tsx
+++ b/src/components/shared/upload-box.tsx
@@ -1,4 +1,7 @@
+import { CloudUpload, Upload } from "lucide-react";
 import React from "react";
+import Heading from "../heading";
+import Paragraph from "../paragraph";
 
 interface UploadBoxProps {
   title: string;
@@ -16,40 +19,33 @@ export function UploadBox({
   onChange,
 }: UploadBoxProps) {
   return (
-    <div className="flex flex-col items-center justify-center gap-4 p-4">
-      <div className="flex flex-col items-center gap-2">
-        <p className="text-center text-white">{title}</p>
-        {subtitle && (
-          <p className="inline-block rounded-full border border-white/30 bg-white/5 px-2 py-0.5 text-center text-sm text-white/60">
-            {subtitle}
-          </p>
-        )}
+    <div className="flex-center flex-col gap-4 p-4">
+      <div className="flex flex-col items-center gap-4">
+        <Heading>{title}</Heading>
+        <div className="flex flex-col items-center gap-2">
+          {subtitle?.split("\n").map((line, i) => (
+            <Paragraph className="w-full" key={i}>
+              {line}
+              {i !== subtitle.split("\n").length - 1 && <br />}
+            </Paragraph>
+          ))}
+        </div>
       </div>
-      <div className="flex w-72 flex-col items-center justify-center gap-4 rounded-xl border-2 border-dashed border-white/30 bg-white/10 p-6 backdrop-blur-sm">
-        <svg
-          className="h-8 w-8 text-gray-400"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth={2}
-            d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
-          />
-        </svg>
-        <p className="text-sm text-gray-400">Drag and Drop</p>
-        <p className="text-sm text-gray-500">or</p>
-        <label className="inline-flex cursor-pointer items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 font-semibold text-white shadow-md transition-colors duration-200 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75">
+      <div className="flex-center w-72 flex-col gap-4 rounded-xl border-2 border-dashed border-white/30 bg-white/10 p-6 backdrop-blur-sm">
+        <CloudUpload className="size-8" />
+        <Paragraph>Drag and Drop</Paragraph>
+        <Paragraph className="text-gray-400">or</Paragraph>
+        <label htmlFor="upload-file-input" className="label-button">
+          <Upload />
           <span>{description}</span>
-          <input
-            type="file"
-            onChange={onChange}
-            accept={accept}
-            className="hidden"
-          />
         </label>
+        <input
+          id="upload-file-input"
+          type="file"
+          onChange={onChange}
+          accept={accept}
+          className="hidden"
+        />
       </div>
     </div>
   );
diff --git a/src/components/svg-scale-selector.tsx b/src/components/svg-scale-selector.tsx
index f2eb628..7c1f3e4 100644
--- a/src/components/svg-scale-selector.tsx
+++ b/src/components/svg-scale-selector.tsx
@@ -1,4 +1,5 @@
 import React, { useRef, useEffect } from "react";
+import Paragraph from "./paragraph";
 
 interface SVGScaleSelectorProps {
   title: string;
@@ -37,15 +38,15 @@ export function SVGScaleSelector({
 
   return (
     <div className="flex flex-col items-center gap-2">
-      <span className="text-sm text-white/60">{title}</span>
+      <Paragraph className="opacity-80">{title}</Paragraph>
       <div className="flex flex-col items-center gap-2">
         <div
           ref={containerRef}
-          className="relative inline-flex rounded-lg bg-white/5 p-1"
+          className="relative inline-flex rounded-lg bg-white/10 p-1 backdrop-blur-sm"
         >
           <div
             ref={highlightRef}
-            className="absolute top-1 h-[calc(100%-8px)] rounded-md bg-blue-600 transition-all duration-200"
+            className="absolute top-1 h-[calc(100%-8px)] rounded-md bg-blue-ribbon-600 transition-all duration-200"
           />
           {[...options, "custom" as const].map((option) => (
             <button
@@ -54,7 +55,7 @@ export function SVGScaleSelector({
               onClick={() =>
                 onChange(typeof option === "number" ? option : "custom")
               }
-              className={`relative rounded-md px-3 py-1.5 text-sm font-medium transition-colors ${
+              className={`relative rounded-md px-3 py-1.5 text-[10px] font-medium transition-colors ${
                 option === selected
                   ? "text-white"
                   : "text-white/80 hover:text-white"
@@ -94,7 +95,7 @@ export function SVGScaleSelector({
               );
               onCustomValueChange?.(clampedValue);
             }}
-            className="w-24 rounded-lg bg-white/5 px-3 py-1.5 text-sm text-white"
+            className="w-24 rounded-lg bg-white/5 px-3 py-1.5 text-[10px] text-white"
             placeholder="Enter scale"
           />
         )}
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
new file mode 100644
index 0000000..d6ded49
--- /dev/null
+++ b/src/components/ui/button.tsx
@@ -0,0 +1,56 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "flex items-center gap-[10px] box-border text-xs tracking-[0.5px] rounded-lg",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-gradient-to-t from-blue-ribbon-500 to-blue-ribbon-600 hover:from-blue-ribbon-600 hover:to-blue-ribbon-700 border-t-2 hover:border-t-blue-ribbon-500",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary: "text-foreground transition-opacity hover:opacity-80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-foreground underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "px-4 py-3",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };
diff --git a/src/components/ui/sheet.tsx b/src/components/ui/sheet.tsx
new file mode 100644
index 0000000..dfd4abe
--- /dev/null
+++ b/src/components/ui/sheet.tsx
@@ -0,0 +1,142 @@
+"use client";
+
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import XSvg from "@/assets/x-svg";
+import { cn } from "@/lib/utils";
+
+const Sheet = SheetPrimitive.Root;
+
+const SheetTrigger = SheetPrimitive.Trigger;
+
+const SheetClose = SheetPrimitive.Close;
+
+const SheetPortal = SheetPrimitive.Portal;
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className,
+    )}
+    {...props}
+    ref={ref}
+  />
+));
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
+
+const sheetVariants = cva(
+  "fixed z-50 gap-4 bg-background shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom:
+          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right:
+          "inset-y-0 right-0 h-full w-full data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+      },
+    },
+    defaultVariants: {
+      side: "right",
+    },
+  },
+);
+
+interface SheetContentProps
+  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+    VariantProps<typeof sheetVariants> {}
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Content>,
+  SheetContentProps
+>(({ side = "right", className, children, ...props }, ref) => (
+  <SheetPortal>
+    <SheetOverlay />
+    <SheetPrimitive.Content
+      ref={ref}
+      className={cn(sheetVariants({ side }), className)}
+      {...props}
+    >
+      <div className="flex h-[60px] items-center justify-end px-6">
+        <SheetPrimitive.Close className="hover-opacity size-6">
+          <XSvg />
+          <span className="sr-only">Close</span>
+        </SheetPrimitive.Close>
+      </div>
+      {children}
+    </SheetPrimitive.Content>
+  </SheetPortal>
+));
+SheetContent.displayName = SheetPrimitive.Content.displayName;
+
+const SheetHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className,
+    )}
+    {...props}
+  />
+);
+SheetHeader.displayName = "SheetHeader";
+
+const SheetFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className,
+    )}
+    {...props}
+  />
+);
+SheetFooter.displayName = "SheetFooter";
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold text-foreground", className)}
+    {...props}
+  />
+));
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
+
+export {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetOverlay,
+  SheetPortal,
+  SheetTitle,
+  SheetTrigger,
+};
diff --git a/src/constant/index.tsx b/src/constant/index.tsx
new file mode 100644
index 0000000..3f534fe
--- /dev/null
+++ b/src/constant/index.tsx
@@ -0,0 +1,42 @@
+import { ArrowBigRightDash, Home, Square, SquareDashed } from "lucide-react";
+
+export const navigationLinks = [
+  {
+    label: "Home",
+    href: "/",
+    image: <Home />,
+  },
+  {
+    label: "SVG to PNG converter",
+    href: "/svg-to-png",
+    image: <ArrowBigRightDash />,
+  },
+  {
+    label: "Square image generator",
+    href: "/square-image",
+    image: <SquareDashed />,
+  },
+  {
+    label: "Corner Rounder",
+    href: "/rounded-border",
+    image: <Square />,
+  },
+];
+
+export const heroLinks = [
+  {
+    label: "SVG to PNG converter",
+    href: "/svg-to-png",
+    image: <ArrowBigRightDash />,
+  },
+  {
+    label: "Square image generator",
+    href: "/square-image",
+    image: <SquareDashed />,
+  },
+  {
+    label: "Corner Rounder",
+    href: "/rounded-border",
+    image: <Square />,
+  },
+];
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
new file mode 100644
index 0000000..a5ef193
--- /dev/null
+++ b/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
diff --git a/src/props/svgProps.ts b/src/props/svgProps.ts
new file mode 100644
index 0000000..d19c2c2
--- /dev/null
+++ b/src/props/svgProps.ts
@@ -0,0 +1,5 @@
+import type { SVGProps } from "react";
+
+export interface SvgProps extends SVGProps<SVGSVGElement> {
+  className?: string;
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 021c393..b92045b 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,6 +1,7 @@
 import type { Config } from "tailwindcss";
 
 const config: Config = {
+  darkMode: ["class"],
   content: [
     "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
@@ -9,11 +10,67 @@ const config: Config = {
   theme: {
     extend: {
       colors: {
-        background: "var(--background)",
-        foreground: "var(--foreground)",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        "blue-ribbon": {
+          "50": "#edf8ff",
+          "100": "#d6eeff",
+          "200": "#b5e3ff",
+          "300": "#83d3ff",
+          "400": "#48b9ff",
+          "500": "#1e97ff",
+          "600": "#0676ff",
+          "700": "#0062ff",
+          "800": "#084bc5",
+          "900": "#0d439b",
+          "950": "#0e2a5d",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        chart: {
+          "1": "hsl(var(--chart-1))",
+          "2": "hsl(var(--chart-2))",
+          "3": "hsl(var(--chart-3))",
+          "4": "hsl(var(--chart-4))",
+          "5": "hsl(var(--chart-5))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
       },
     },
   },
-  plugins: [],
+  plugins: [require("tailwindcss-animate")],
 };
 export default config;