diff --git a/backend/images/PictoPy.thumbnails/PictoPy_Logo.png b/backend/images/PictoPy.thumbnails/PictoPy_Logo.png
new file mode 100644
index 00000000..940fd236
Binary files /dev/null and b/backend/images/PictoPy.thumbnails/PictoPy_Logo.png differ
diff --git a/frontend/.prettierrc b/frontend/.prettierrc
index 59b6c78b..2bb6a340 100644
--- a/frontend/.prettierrc
+++ b/frontend/.prettierrc
@@ -1,7 +1,7 @@
 {
-    "semi": true,
-    "singleQuote": true,
-    "tabWidth": 2,
-    "trailingComma": "all",
-    "plugins": ["prettier-plugin-tailwindcss"]
-  }
\ No newline at end of file
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "plugins": ["prettier-plugin-tailwindcss"]
+}
diff --git a/frontend/postcss.config.js b/frontend/postcss.config.js
index 0486115b..8e53f9d1 100644
--- a/frontend/postcss.config.js
+++ b/frontend/postcss.config.js
@@ -1,7 +1,7 @@
-const postcssConfig =  {
+const postcssConfig = {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
-export default postcssConfig
\ No newline at end of file
+};
+export default postcssConfig;
diff --git a/frontend/src-tauri/tauri.conf.json b/frontend/src-tauri/tauri.conf.json
index 6eae9883..6db42328 100644
--- a/frontend/src-tauri/tauri.conf.json
+++ b/frontend/src-tauri/tauri.conf.json
@@ -23,9 +23,7 @@
   "plugins": {
     "updater": {
       "active": true,
-      "endpoints": [
-        "https://server.com//api/v1/tauri/update"
-      ],
+      "endpoints": ["https://server.com//api/v1/tauri/update"],
       "dialog": true,
       "pubkey": "dW50cnVzdGVkIGNvbW1lbnQ6IG1pbmlzaWduIHB1YmxpYyBrZXk6IEI3ODc5QjNDMERGMzlCMUEKUldRYW0vTU5QSnVIdHplYktOV3hKKzdmSGd6ZVN3eTg4Q2ExbmVTbk4yN0pMWjZLYXl1M1ZzN3AK"
     }
@@ -43,12 +41,10 @@
     ],
     "security": {
       "assetProtocol": {
-        "scope": [
-          "**"
-        ],
+        "scope": ["**"],
         "enable": true
       },
       "csp": null
     }
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/src/App.css b/frontend/src/App.css
index 8f255c12..da2d7a50 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -2,10 +2,10 @@
 @tailwind components;
 @tailwind utilities;
 
-  @layer base {
-    :root {
-      --background: 0 0% 100%;
-      --foreground: 0 0% 0%;
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 0%;
 
     --card: 0 0% 100%;
     --card-foreground: 222.2 84% 4.9%;
@@ -32,39 +32,38 @@
     --input: 214.3 31.8% 91.4%;
     --ring: 222.2 84% 4.9%;
 
-      --radius: 0.5rem;
-    }
+    --radius: 0.5rem;
+  }
 
-    .dark {
-      --background: 221, 39%, 11%;
-      --foreground: 0 0% 100%;
+  .dark {
+    --background: 221, 39%, 11%;
+    --foreground: 0 0% 100%;
 
-      --card: 222.2 84% 4.9%;
-      --card-foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
 
-      --popover: 222.2 84% 4.9%;
-      --popover-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
 
-      --primary: 210 40% 98%;
-      --primary-foreground: 222.2 47.4% 11.2%;
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
 
-      --secondary: 217.2 32.6% 17.5%;
-      --secondary-foreground: 210 40% 98%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
 
-      --muted: 217.2 32.6% 17.5%;
-      --muted-foreground: 215 20.2% 65.1%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
 
-      --accent: 217.2 32.6% 17.5%;
-      --accent-foreground: 210 40% 98%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
 
-      --destructive: 0 62.8% 30.6%;
-      --destructive-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
 
-      --border: 217.2 32.6% 17.5%;
-      --input: 217.2 32.6% 17.5%;
-      --ring: 212.7 26.8% 83.9%;
-    }
-  
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+  }
 }
 
 @layer base {
@@ -83,4 +82,3 @@
   -ms-overflow-style: none;
   scrollbar-width: none;
 }
-
diff --git a/frontend/src/components/Album/ImageManagementDialog.tsx b/frontend/src/components/Album/ImageManagementDialog.tsx
index 435931a7..00c91bca 100644
--- a/frontend/src/components/Album/ImageManagementDialog.tsx
+++ b/frontend/src/components/Album/ImageManagementDialog.tsx
@@ -104,7 +104,7 @@ const ImageManagementDialog: React.FC<ImageManagementDialogProps> = ({
                   <Button
                     onClick={() => handleRemoveImage(image)}
                     disabled={isRemovingImage}
-                    className="absolute right-0 top-0 rounded-full bg-red-500 p-1 text-white"
+                    className="rounded-full absolute right-0 top-0 bg-red-500 p-1 text-white"
                   >
                     X
                   </Button>
diff --git a/frontend/src/components/Album/ImageSelection.tsx b/frontend/src/components/Album/ImageSelection.tsx
index e3a563e7..a1e584ea 100644
--- a/frontend/src/components/Album/ImageSelection.tsx
+++ b/frontend/src/components/Album/ImageSelection.tsx
@@ -99,7 +99,7 @@ const ImageSelectionPage: React.FC<ImageSelectionPageProps> = ({
           return (
             <div key={index} className="relative">
               <div
-                className={`absolute -right-2 -top-2 z-10 h-6 w-6 cursor-pointer rounded-full border-2 border-white ${
+                className={`rounded-full absolute -right-2 -top-2 z-10 h-6 w-6 cursor-pointer border-2 border-white ${
                   selectedImages.includes(imagePath)
                     ? 'bg-blue-500'
                     : 'bg-gray-300'
diff --git a/frontend/src/components/FolderPicker/DeleteSelectedImagePage.tsx b/frontend/src/components/FolderPicker/DeleteSelectedImagePage.tsx
index 54b7ed54..3e097819 100644
--- a/frontend/src/components/FolderPicker/DeleteSelectedImagePage.tsx
+++ b/frontend/src/components/FolderPicker/DeleteSelectedImagePage.tsx
@@ -166,7 +166,7 @@ const DeleteSelectedImagePage: React.FC<DeleteSelectedImageProps> = ({
           return (
             <div key={index} className="relative">
               <div
-                className={`absolute -right-2 -top-2 z-10 h-6 w-6 cursor-pointer rounded-full border-2 border-white ${
+                className={`rounded-full absolute -right-2 -top-2 z-10 h-6 w-6 cursor-pointer border-2 border-white ${
                   selectedImages.includes(imagePath)
                     ? 'bg-blue-500'
                     : 'bg-gray-300'
diff --git a/frontend/src/components/LoadingScreen/LoadingScreen.tsx b/frontend/src/components/LoadingScreen/LoadingScreen.tsx
index a5979f82..16399c2a 100644
--- a/frontend/src/components/LoadingScreen/LoadingScreen.tsx
+++ b/frontend/src/components/LoadingScreen/LoadingScreen.tsx
@@ -1,14 +1,26 @@
 import React from 'react';
 
 export const LoadingScreen: React.FC = () => {
-    return(
-        <div className="flex justify-center items-center h-screen">
-            <div >
-            <svg aria-hidden="true" className="w-8 h-8 text-gray-200 animate-spin dark:text-gray-600 fill-primary" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/>
-                <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/>
-            </svg>
-            </div>
-        </div>
-    )
+  return (
+    <div className="flex h-screen items-center justify-center">
+      <div>
+        <svg
+          aria-hidden="true"
+          className="h-8 w-8 animate-spin fill-primary text-gray-200 dark:text-gray-600"
+          viewBox="0 0 100 101"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+            fill="currentColor"
+          />
+          <path
+            d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+            fill="currentFill"
+          />
+        </svg>
+      </div>
+    </div>
+  );
 };
diff --git a/frontend/src/components/Media/MediaView.tsx b/frontend/src/components/Media/MediaView.tsx
index 08d014e0..d53322ed 100644
--- a/frontend/src/components/Media/MediaView.tsx
+++ b/frontend/src/components/Media/MediaView.tsx
@@ -184,4 +184,4 @@ const MediaView: React.FC<MediaViewProps> = ({
   );
 };
 
-export default MediaView;
\ No newline at end of file
+export default MediaView;
diff --git a/frontend/src/components/Navigation/Sidebar/Sidebar.tsx b/frontend/src/components/Navigation/Sidebar/Sidebar.tsx
index d1e8135f..80a6c272 100644
--- a/frontend/src/components/Navigation/Sidebar/Sidebar.tsx
+++ b/frontend/src/components/Navigation/Sidebar/Sidebar.tsx
@@ -40,7 +40,7 @@ const Sidebar = () => {
 
   return (
     <div
-      className={`relative sidebar bg-theme-light dark:bg-gray-800 text-gray-900 dark:text-gray-200 m-4 flex flex-col justify-between rounded-2xl border border-gray-300 dark:border-gray-700 p-4 shadow-md transition-all duration-300 ${
+      className={`sidebar relative bg-theme-light dark:bg-gray-800 text-gray-900 dark:text-gray-200 m-4 flex flex-col justify-between rounded-2xl border border-gray-300 dark:border-gray-700 p-4 shadow-md transition-all duration-300 ${
         isExpanded ? 'w-48' : 'w-16'
       }`}
       onMouseEnter={handleMouseEnter}
diff --git a/frontend/src/components/ui/404/404.tsx b/frontend/src/components/ui/404/404.tsx
index 0dd80521..0e0170d2 100644
--- a/frontend/src/components/ui/404/404.tsx
+++ b/frontend/src/components/ui/404/404.tsx
@@ -18,7 +18,7 @@ const NotFoundPage: React.FC<NotFoundProps> = ({ message }) => {
         </p>
         <a
           href="/"
-          className="inline-block rounded bg-blue-500 px-6 py-3 text-white transition-colors hover:bg-blue-600"
+          className="rounded inline-block bg-blue-500 px-6 py-3 text-white transition-colors hover:bg-blue-600"
         >
           Go Home
         </a>
diff --git a/frontend/src/components/ui/button.tsx b/frontend/src/components/ui/button.tsx
index eb7c1ef3..e244184f 100644
--- a/frontend/src/components/ui/button.tsx
+++ b/frontend/src/components/ui/button.tsx
@@ -9,12 +9,18 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default: 'bg-primary text-primary-foreground hover:bg-primary/90 active:bg-primary/80 focus:ring-primary dark:bg-primary-dark dark:text-primary-foreground-dark dark:hover:bg-primary-dark/90 dark:active:bg-primary-dark/80',
-        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90 active:bg-destructive/80 focus:ring-destructive dark:bg-destructive-dark dark:text-destructive-foreground-dark dark:hover:bg-destructive-dark/90 dark:active:bg-destructive-dark/80',
-        outline: 'border border-input hover:bg-accent hover:text-accent-foreground active:bg-accent/90 focus:ring-accent dark:bg-accent-dark dark:text-accent-foreground-dark dark:border-input-dark',
-        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 active:bg-secondary/70 focus:ring-secondary dark:bg-secondary-dark dark:text-secondary-foreground-dark dark:hover:bg-secondary-dark/80 dark:active:bg-secondary-dark/70',
-        ghost: 'hover:bg-accent hover:text-accent-foreground active:bg-accent/90 focus:ring-accent dark:hover:bg-accent-dark dark:text-accent-foreground-dark',
-        link: 'text-primary underline-offset-4 hover:underline active:text-primary/80 focus:ring-primary dark:text-primary-dark dark:hover:underline',
+        default:
+          'bg-primary text-primary-foreground hover:bg-primary/90 active:bg-primary/80 focus:ring-primary dark:bg-primary-dark dark:text-primary-foreground-dark dark:hover:bg-primary-dark/90 dark:active:bg-primary-dark/80',
+        destructive:
+          'bg-destructive text-destructive-foreground hover:bg-destructive/90 active:bg-destructive/80 focus:ring-destructive dark:bg-destructive-dark dark:text-destructive-foreground-dark dark:hover:bg-destructive-dark/90 dark:active:bg-destructive-dark/80',
+        outline:
+          'border border-input hover:bg-accent hover:text-accent-foreground active:bg-accent/90 focus:ring-accent dark:bg-accent-dark dark:text-accent-foreground-dark dark:border-input-dark',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80 active:bg-secondary/70 focus:ring-secondary dark:bg-secondary-dark dark:text-secondary-foreground-dark dark:hover:bg-secondary-dark/80 dark:active:bg-secondary-dark/70',
+        ghost:
+          'hover:bg-accent hover:text-accent-foreground active:bg-accent/90 focus:ring-accent dark:hover:bg-accent-dark dark:text-accent-foreground-dark',
+        link:
+          'text-primary underline-offset-4 hover:underline active:text-primary/80 focus:ring-primary dark:text-primary-dark dark:hover:underline',
       },
       size: {
         default: 'h-10 px-4 py-2',
@@ -48,7 +54,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     );
   },
 );
+
 Button.displayName = 'Button';
 
 export { Button, buttonVariants };
-
diff --git a/frontend/src/features/Setup/Setup.tsx b/frontend/src/features/Setup/Setup.tsx
index cb559ba6..6be18ddb 100644
--- a/frontend/src/features/Setup/Setup.tsx
+++ b/frontend/src/features/Setup/Setup.tsx
@@ -11,7 +11,7 @@ export const SetupScreen: React.FC<SetupScreenProps> = ({
 }) => (
   <div className="flex min-h-screen items-center justify-center bg-gray-900">
     <div className="animate-fade-in-up flex flex-col items-center justify-center space-y-6">
-      <div className="flex h-24 w-24 items-center justify-center rounded-full bg-white">
+      <div className="rounded-full flex h-24 w-24 items-center justify-center bg-white">
         <Pitopy className="h-16 w-16 text-gray-900" />
       </div>
       <p className="text-2xl font-bold text-white">Pictopy</p>
diff --git a/frontend/src/pages/SettingsPage/Settings.tsx b/frontend/src/pages/SettingsPage/Settings.tsx
index 9867798f..25941ac3 100644
--- a/frontend/src/pages/SettingsPage/Settings.tsx
+++ b/frontend/src/pages/SettingsPage/Settings.tsx
@@ -37,7 +37,7 @@ const Settings: React.FC = () => {
 
   return (
     <div className="mx-auto flex-1 px-4 pt-1">
-      <div className="bg-theme-light space-y-6 rounded-2xl border border-white/10 p-6 shadow backdrop-blur-md backdrop-saturate-150 dark:border-white/5 dark:bg-white/5">
+      <div className="bg-theme-light rounded-2xl space-y-6 border border-white/10 p-6 shadow backdrop-blur-md backdrop-saturate-150 dark:border-white/5 dark:bg-white/5">
         <div>
           <h2 className="text-theme-dark dark:text-theme-light mb-2 text-lg font-medium">
             Current Folder Path
diff --git a/frontend/tailwind.config.cjs b/frontend/tailwind.config.cjs
index 0a0ebfa6..e4bad266 100644
--- a/frontend/tailwind.config.cjs
+++ b/frontend/tailwind.config.cjs
@@ -1,77 +1,78 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  darkMode: ["class"],
+  darkMode: ['class'],
   content: [
     './pages/**/*.{ts,tsx}',
     './components/**/*.{ts,tsx}',
     './app/**/*.{ts,tsx}',
     './src/**/*.{ts,tsx}',
   ],
-  prefix: "",
+  prefix: '',
   theme: {
     container: {
       center: true,
-      padding: "2rem",
+      padding: '2rem',
       screens: {
-        "2xl": "1400px",
+        '2xl': '1400px',
       },
     },
     extend: {
       colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
         primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
         },
         secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
         },
         destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
         },
         muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
         },
         accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
         },
         popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))',
         },
         card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
         },
       },
       borderRadius: {
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
       },
       keyframes: {
-        "accordion-down": {
-          from: { height: "0" },
-          to: { height: "var(--radix-accordion-content-height)" },
+        'accordion-down': {
+          from: { height: '0' },
+          to: { height: 'var(--radix-accordion-content-height)' },
         },
-        "accordion-up": {
-          from: { height: "var(--radix-accordion-content-height)" },
-          to: { height: "0" },
+        'accordion-up': {
+          from: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: '0' },
         },
       },
       animation: {
-        "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out",
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
       },
     },
   },
-  plugins: [require("tailwindcss-animate")],
+  plugins: [require('tailwindcss-animate')],
 };
+
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 88a22540..edbc16f2 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -1,100 +1,112 @@
 /** @type {import('tailwindcss').Config} */
-const tailwindcssAnimate = require("tailwindcss-animate");
+const tailwindcssAnimate = require('tailwindcss-animate');
 
 module.exports = {
-  darkMode: ["class"],
+  darkMode: ['class'],
   content: [
-    "./pages/**/*.{ts,tsx}",
-    "./components/**/*.{ts,tsx}",
-    "./app/**/*.{ts,tsx}",
-    "./src/**/*.{ts,tsx}",
+    './pages/**/*.{ts,tsx}',
+    './components/**/*.{ts,tsx}',
+    './app/**/*.{ts,tsx}',
+    './src/**/*.{ts,tsx}',
   ],
-  prefix: "",
+  prefix: '',
   theme: {
     container: {
       center: true,
-      padding: "2rem",
+      padding: '2rem',
       screens: {
-        "2xl": "1400px",
+        '2xl': '1400px',
       },
     },
     extend: {
       colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
         primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
         },
         secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
         },
         destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
         },
         muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
         },
         accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
         },
         popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))',
         },
         card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
         },
-        gradientFrom: "#6366F1",
-        gradientVia: "#8B5CF6",
-        gradientTo: "#EC4899",
-        gradientFromDark: "#4F46E5",
-        gradientViaDark: "#7C3AED",
-        gradientToDark: "#BE185D",
+        gradientFrom: '#6366F1',
+        gradientVia: '#8B5CF6',
+        gradientTo: '#EC4899',
+        gradientFromDark: '#4F46E5',
+        gradientViaDark: '#7C3AED',
+        gradientToDark: '#BE185D',
       },
       boxShadow: {
-        lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
-        xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
-        darkLg: "0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3)",
+        lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+        xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
+        darkLg: '0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3)',
       },
       keyframes: {
-        "accordion-down": {
-          from: { height: "0" },
-          to: { height: "var(--radix-accordion-content-height)" },
+        'accordion-down': {
+          from: { height: '0' },
+          to: { height: 'var(--radix-accordion-content-height)' },
         },
-        "accordion-up": {
-          from: { height: "var(--radix-accordion-content-height)" },
-          to: { height: "0" },
+        'accordion-up': {
+          from: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: '0' },
         },
-        "button-hover": {
-          "0%": { transform: "scale(1)", boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)" },
-          "100%": { transform: "scale(1.05)", boxShadow: "0 6px 10px rgba(0, 0, 0, 0.2)" },
+        'button-hover': {
+          '0%': {
+            transform: 'scale(1)',
+            boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
+          },
+          '100%': {
+            transform: 'scale(1.05)',
+            boxShadow: '0 6px 10px rgba(0, 0, 0, 0.2)',
+          },
         },
-        "button-hover-dark": {
-          "0%": { transform: "scale(1)", boxShadow: "0 4px 6px rgba(255, 255, 255, 0.1)" },
-          "100%": { transform: "scale(1.05)", boxShadow: "0 6px 10px rgba(255, 255, 255, 0.15)" },
+        'button-hover-dark': {
+          '0%': {
+            transform: 'scale(1)',
+            boxShadow: '0 4px 6px rgba(255, 255, 255, 0.1)',
+          },
+          '100%': {
+            transform: 'scale(1.05)',
+            boxShadow: '0 6px 10px rgba(255, 255, 255, 0.15)',
+          },
         },
       },
       animation: {
-        "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out",
-        "button-hover": "button-hover 0.3s ease-in-out",
-        "button-hover-dark": "button-hover-dark 0.3s ease-in-out",
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
+        'button-hover': 'button-hover 0.3s ease-in-out',
+        'button-hover-dark': 'button-hover-dark 0.3s ease-in-out',
       },
     },
     borderRadius: {
-      lg: "var(--radius)",
-      md: "calc(var(--radius) - 2px)",
-      sm: "calc(var(--radius) - 4px)",
+      lg: 'var(--radius)',
+      md: 'calc(var(--radius) - 2px)',
+      sm: 'calc(var(--radius) - 4px)',
     },
   },
   plugins: [tailwindcssAnimate],
-};
\ No newline at end of file
+};