From 66e3f5a3d195c736dceb8cab68ba0a44d8b1f685 Mon Sep 17 00:00:00 2001
From: edic <edic@c-g-r.de>
Date: Wed, 28 Jan 2026 10:43:42 +0100
Subject: [PATCH] Add prettier and plugin for tailwind; Adapted global css for
 light and dark theme

---
 .prettierrc                  |   5 +
 app/(backend)/layout.tsx     |  15 ++-
 app/(backend)/page.tsx       |  65 ++++++---
 app/globals.css              | 255 +++++++++++++++++++++++------------
 components/Header/index.tsx  |   2 +-
 components/Sidebar/index.tsx |   2 +-
 package-lock.json            |  97 +++++++++++++
 package.json                 |   2 +
 8 files changed, 335 insertions(+), 108 deletions(-)
 create mode 100644 .prettierrc

diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..bfb0eec
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,5 @@
+{
+    "plugins": [
+        "prettier-plugin-tailwindcss"
+    ]
+}
\ No newline at end of file
diff --git a/app/(backend)/layout.tsx b/app/(backend)/layout.tsx
index 7e4c359..a7a077d 100644
--- a/app/(backend)/layout.tsx
+++ b/app/(backend)/layout.tsx
@@ -12,17 +12,24 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
   const [sidebarOpen, setSidebarOpen] = useState(false);
 
   return (
-    <div data-cmp="DashboardLayout" className="min-h-screen bg-muted/30">
+    <div className="dashboard">
       <Sidebar />
 
       {/* Mobile Sidebar Overlay */}
       {sidebarOpen && (
-        <div className="fixed inset-0 bg-black/50 z-40 md:hidden" onClick={() => setSidebarOpen(false)} />
+        <div
+          className="fixed inset-0 z-40 bg-black/50 md:hidden"
+          onClick={() => setSidebarOpen(false)}
+        />
       )}
 
-      <div className={`md:pl-64 flex flex-col min-h-screen transition-all duration-300`}>
+      <div
+        className={`flex min-h-screen flex-col transition-all duration-300 md:pl-64`}
+      >
         <Header onMenuClick={() => setSidebarOpen(!sidebarOpen)} />
-        <main className="flex-1 p-4 md:p-8 animate-in fade-in duration-500">{children}</main>
+        <main className="animate-in fade-in flex-1 p-4 duration-500 md:p-8">
+          {children}
+        </main>
       </div>
     </div>
   );
diff --git a/app/(backend)/page.tsx b/app/(backend)/page.tsx
index 56011b7..77d6f3c 100644
--- a/app/(backend)/page.tsx
+++ b/app/(backend)/page.tsx
@@ -51,7 +51,8 @@ const Dashboard: React.FC = () => {
         {
           id: "addresses",
           title: "Addresses",
-          description: "Database of addresses for registered users and locations.",
+          description:
+            "Database of addresses for registered users and locations.",
           icon: MapPin,
           path: "/addresses",
         },
@@ -63,14 +64,16 @@ const Dashboard: React.FC = () => {
         {
           id: "services",
           title: "Services & Lectures",
-          description: "Schedule and manage church services and lecture events.",
+          description:
+            "Schedule and manage church services and lecture events.",
           icon: Calendar,
           path: "/services",
         },
         {
           id: "lectures_list",
           title: "Lectures List",
-          description: "Browse the complete archive of lectures from all communities.",
+          description:
+            "Browse the complete archive of lectures from all communities.",
           icon: Mic2,
           path: "/lectures",
         },
@@ -136,7 +139,8 @@ const Dashboard: React.FC = () => {
         {
           id: "types",
           title: "Lecture Types",
-          description: "Define and categorize different types of presentations.",
+          description:
+            "Define and categorize different types of presentations.",
           icon: Tag,
           path: "/types",
         },
@@ -159,37 +163,64 @@ const Dashboard: React.FC = () => {
   ];
 
   return (
-    <div data-cmp="Dashboard" className="max-w-7xl mx-auto space-y-8">
+    <div className="mx-auto max-w-7xl space-y-8">
       {/* Welcome Section */}
-      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
+      <div className="flex flex-col justify-between gap-4 md:flex-row md:items-center">
         <div>
-          <h1 className="text-3xl font-bold text-foreground tracking-tight">Community Dashboard</h1>
+          <h1 className="text-foreground text-3xl font-bold tracking-tight">
+            Community Dashboard
+          </h1>
           <p className="text-muted-foreground mt-1">
             Welcome to the admin area. Manage your community resources safely.
           </p>
         </div>
         <div className="flex space-x-3">
-          <span className="text-sm px-3 py-1 bg-primary/10 text-primary rounded-full font-medium">v2.4.0 Live</span>
+          <span className="bg-primary/10 text-primary rounded-full px-3 py-1 text-sm font-medium">
+            v2.4.0 Live
+          </span>
         </div>
       </div>
 
       {/* Quick Stats */}
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-        <StatCard label="Total Members" value="2,845" icon={Users} trend="up" change="12% this month" />
-        <StatCard label="Upcoming Services" value="24" icon={Calendar} trend="neutral" change="Next 7 days" />
-        <StatCard label="Songs Database" value="1,430" icon={Music} trend="up" change="5 new added" />
+      <div className="grid grid-cols-1 gap-6 md:grid-cols-3">
+        <StatCard
+          label="Total Members"
+          value="2,845"
+          icon={Users}
+          trend="up"
+          change="12% this month"
+        />
+        <StatCard
+          label="Upcoming Services"
+          value="24"
+          icon={Calendar}
+          trend="neutral"
+          change="Next 7 days"
+        />
+        <StatCard
+          label="Songs Database"
+          value="1,430"
+          icon={Music}
+          trend="up"
+          change="5 new added"
+        />
       </div>
 
       {/* Categories */}
       <div className="space-y-10">
         {categories.map((category) => (
-          <div key={category.title} className="animate-in fade-in slide-in-from-bottom-4 duration-700">
-            <div className="flex items-center space-x-2 mb-6">
-              <h2 className="text-xl font-semibold text-foreground border-l-4 border-primary pl-3">{category.title}</h2>
-              <div className="h-px bg-border flex-1 ml-4 opacity-50"></div>
+          <div
+            key={category.title}
+            className="animate-in fade-in slide-in-from-bottom-4 duration-700"
+          >
+            <div className="mb-6 flex items-center space-x-2">
+              <h2 className="text-foreground border-primary border-l-4 pl-3 text-xl font-semibold">
+                {category.title}
+              </h2>
+              <div className="bg-border ml-4 h-px flex-1 opacity-50"></div>
             </div>
 
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+            <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
               {category.items.map((item) => (
                 <ModuleCard
                   key={item.id}
diff --git a/app/globals.css b/app/globals.css
index 0986e72..aa56095 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -118,263 +118,349 @@
   --color-gray-900: #050505;
   --color-gray-800: #141414;
   --color-gray-700: #212328;
-  --color-gray-600: #30333A;
-  --color-gray-500: #9095A1;
-  --color-gray-400: #CCDADC;
+  --color-gray-600: #30333a;
+  --color-gray-500: #9095a1;
+  --color-gray-400: #ccdadc;
+  --color-gray-100: #fafafa;
 
   /* Vibrant Colors */
-  --color-blue-600: #5862FF;
-  --color-yellow-400: #FDD458;
-  --color-yellow-500: #E8BA40;
-  --color-teal-400: #0FEDBE;
-  --color-red-500: #FF495B;
-  --color-orange-500: #FF8243;
-  --color-purple-500: #D13BFF;
+  --color-blue-600: #5862ff;
+  --color-yellow-400: #fdd458;
+  --color-yellow-500: #e8ba40;
+  --color-teal-400: #0fedbe;
+  --color-red-500: #ff495b;
+  --color-orange-500: #ff8243;
+  --color-purple-500: #d13bff;
 }
 
 @layer base {
   * {
     @apply border-border outline-ring/50;
   }
+
   body {
-    @apply bg-gray-900 text-foreground;
+    @apply text-foreground bg-gray-900;
   }
 }
 
 @layer utilities {
+  .dashboard {
+    @apply min-h-screen bg-gray-100 dark:bg-gray-900;
+  }
   .container {
     @apply mx-auto max-w-screen-2xl px-4 md:px-6 lg:px-8;
   }
+
   .yellow-btn {
-    @apply h-12 cursor-pointer bg-gradient-to-b from-yellow-400 to-yellow-500 hover:from-yellow-500 hover:to-yellow-400 text-gray-950 font-medium text-base rounded-lg shadow-lg disabled:opacity-50;
+    @apply h-12 cursor-pointer rounded-lg bg-gradient-to-b from-yellow-400 to-yellow-500 text-base font-medium text-gray-950 shadow-lg hover:from-yellow-500 hover:to-yellow-400 disabled:opacity-50;
   }
+
   .home-wrapper {
-    @apply text-gray-400 flex-col gap-4 md:gap-10 items-center sm:items-start;
+    @apply flex-col items-center gap-4 text-gray-400 sm:items-start md:gap-10;
   }
+
   .home-section {
-    @apply w-full gap-8 grid-cols-1 md:grid-cols-2 xl:grid-cols-3;
+    @apply w-full grid-cols-1 gap-8 md:grid-cols-2 xl:grid-cols-3;
   }
+
   .header {
-    @apply z-50 w-full h-[70px] bg-gray-800;
+    @apply z-50 bg-white dark:bg-gray-800;
   }
+
+  .side-bar {
+    @apply z-50 bg-white dark:bg-gray-800;
+  }
+
   .header-wrapper {
-    @apply flex justify-between items-center px-6 py-4 text-gray-500;
+    @apply flex items-center justify-between px-6 py-4 text-gray-500;
   }
+
   .auth-layout {
-    @apply flex flex-col justify-between lg:flex-row h-screen bg-gray-900 relative overflow-hidden;
+    @apply relative flex h-screen flex-col justify-between overflow-hidden bg-gray-900 lg:flex-row;
   }
+
   .auth-logo {
-    @apply pt-6 lg:pt-8 mb-8 lg:mb-12;
+    @apply mb-8 pt-6 lg:mb-12 lg:pt-8;
   }
+
   .auth-left-section {
-    @apply w-full lg:w-[45%] lg:h-screen px-6 lg:px-16 flex flex-col overflow-y-auto;
+    @apply flex w-full flex-col overflow-y-auto px-6 lg:h-screen lg:w-[45%] lg:px-16;
   }
+
   .auth-right-section {
-    @apply w-full max-lg:border-t max-lg:border-gray-600 lg:w-[55%] lg:h-screen bg-gray-800 px-6 py-4 md:p-6 lg:py-12 lg:px-18 flex flex-col justify-start;
+    @apply flex w-full flex-col justify-start bg-gray-800 px-6 py-4 max-lg:border-t max-lg:border-gray-600 md:p-6 lg:h-screen lg:w-[55%] lg:px-18 lg:py-12;
   }
+
   .auth-blockquote {
-    @apply text-sm md:text-xl lg:text-2xl font-medium text-gray-400 mb-1 md:mb-6 lg:mb-8;
+    @apply mb-1 text-sm font-medium text-gray-400 md:mb-6 md:text-xl lg:mb-8 lg:text-2xl;
   }
+
   .auth-testimonial-author {
-    @apply text-xs md:text-lg font-bold text-gray-400 not-italic;
+    @apply text-xs font-bold text-gray-400 not-italic md:text-lg;
   }
+
   .auth-dashboard-preview {
-    @apply border-6 border-gray-800 left-0 hidden w-[1024px] h-auto max-w-none lg:block rounded-xl shadow-2xl;
+    @apply left-0 hidden h-auto w-[1024px] max-w-none rounded-xl border-6 border-gray-800 shadow-2xl lg:block;
   }
+
   .form-title {
-    @apply text-4xl font-bold text-gray-400 mb-10;
+    @apply mb-10 text-4xl font-bold text-gray-400;
   }
+
   .form-label {
     @apply text-sm font-medium text-gray-400;
   }
+
   .form-input {
-    @apply h-12 px-3 py-3 text-white text-base placeholder:text-gray-500 border-gray-600 bg-gray-800 rounded-lg focus:!border-yellow-500 focus:ring-0;
+    @apply rounded-lg !border-yellow-500 border-gray-600 bg-gray-800 px-3 py-3 text-base text-white placeholder:text-gray-500 focus:h-12 focus:ring-0;
   }
+
   .select-trigger {
-    @apply w-full !h-12 px-3 py-3 text-base border-gray-600 bg-gray-800 text-white rounded-lg focus:!border-yellow-500 focus:ring-0;
+    @apply w-full rounded-lg !border-yellow-500 border-gray-600 bg-gray-800 px-3 py-3 text-base text-white focus:!h-12 focus:ring-0;
   }
+
   .country-select-trigger {
-    @apply h-12 px-3 py-3 text-base w-full justify-between font-normal border-gray-600 bg-gray-800 text-gray-400 rounded-lg focus:!border-yellow-500 focus:ring-0;
+    @apply w-full justify-between rounded-lg !border-yellow-500 border-gray-600 bg-gray-800 px-3 py-3 text-base font-normal text-gray-400 focus:h-12 focus:ring-0;
   }
+
   .country-select-input {
-    @apply !bg-gray-800 text-gray-400 border-0 border-b border-gray-600 rounded-none focus:ring-0 placeholder:text-gray-500;
+    @apply rounded-none border-0 border-b border-gray-600 !bg-gray-800 text-gray-400 placeholder:text-gray-500 focus:ring-0;
   }
+
   .country-select-empty {
-    @apply text-gray-500 py-6 text-center !bg-gray-800;
+    @apply !bg-gray-800 py-6 text-center text-gray-500;
   }
+
   .country-select-item {
-    @apply text-white cursor-pointer px-3 py-2 rounded-sm bg-gray-800 hover:!bg-gray-600;
+    @apply rounded-sm !bg-gray-600 bg-gray-800 px-3 py-2 text-white hover:cursor-pointer;
   }
+
   .footer-link {
-    @apply text-gray-400 font-medium hover:text-yellow-400 hover:underline transition-colors;
+    @apply font-medium text-gray-400 transition-colors hover:text-yellow-400 hover:underline;
   }
+
   .search-text {
     @apply cursor-pointer hover:text-yellow-500;
   }
+
   .search-btn {
-    @apply cursor-pointer px-4 py-2 w-fit flex items-center gap-2 text-sm md:text-base bg-yellow-500 hover:bg-yellow-500 text-black font-medium rounded;
+    @apply flex w-fit cursor-pointer items-center gap-2 rounded bg-yellow-500 px-4 py-2 text-sm font-medium text-black hover:bg-yellow-500 md:text-base;
   }
+
   .search-dialog {
-    @apply !bg-gray-800 lg:min-w-[800px] border-gray-600 fixed top-10 left-1/2 -translate-x-1/2 translate-y-10;
+    @apply fixed top-10 left-1/2 -translate-x-1/2 translate-y-10 border-gray-600 !bg-gray-800 lg:min-w-[800px];
   }
+
   .search-field {
-    @apply !bg-gray-800 border-b border-gray-600 relative;
+    @apply relative border-b border-gray-600 !bg-gray-800;
   }
+
   .search-list {
-    @apply !bg-gray-800 max-h-[400px];
+    @apply max-h-[400px] !bg-gray-800;
   }
+
   .search-list-indicator {
-    @apply px-5 py-2
+    @apply px-5 py-2;
   }
+
   .search-list-empty {
-    @apply py-6 !bg-transparent text-center text-gray-500;
+    @apply !bg-transparent py-6 text-center text-gray-500;
   }
+
   .search-input {
-    @apply !bg-gray-800 border-0 text-gray-400 placeholder:text-gray-500 focus:ring-0 text-base h-14 pr-10;
+    @apply h-14 border-0 !bg-gray-800 pr-10 text-base text-gray-400 placeholder:text-gray-500 focus:ring-0;
   }
+
   .search-loader {
-    @apply absolute right-12 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-500 animate-spin;
+    @apply absolute top-1/2 right-12 h-4 w-4 -translate-y-1/2 animate-spin text-gray-500;
   }
+
   .search-count {
-    @apply py-2 px-4 text-sm font-medium text-gray-400 bg-gray-700 border-b border-gray-700;
+    @apply border-b border-gray-700 bg-gray-700 px-4 py-2 text-sm font-medium text-gray-400;
   }
+
   .search-item {
-    @apply rounded-none my-3 px-1 w-full data-[selected=true]:bg-gray-600;
+    @apply my-3 w-full rounded-none px-1 data-[selected=true]:bg-gray-600;
   }
+
   .search-item-link {
-    @apply px-2 w-full cursor-pointer border-b border-gray-600 last:border-b-0 transition-colors flex items-center gap-3;
+    @apply flex w-full cursor-pointer items-center gap-3 border-b border-gray-600 px-2 transition-colors last:border-b-0;
   }
+
   .search-item-name {
-    @apply font-medium text-base text-gray-400;
+    @apply text-base font-medium text-gray-400;
   }
+
   .nav-list {
-    @apply flex flex-col sm:flex-row p-2 gap-3 sm:gap-10 font-medium;
+    @apply flex flex-col gap-3 p-2 font-medium sm:flex-row sm:gap-10;
   }
+
   .stock-details-container {
-    @apply w-full grid-cols-1 gap-6 xl:grid-cols-3 space-y-6 sm:space-y-8;
+    @apply w-full grid-cols-1 gap-6 space-y-6 sm:space-y-8 xl:grid-cols-3;
   }
+
   .watchlist-btn {
-    @apply bg-yellow-500 text-base hover:bg-yellow-500 text-gray-900 w-full rounded h-11 font-semibold cursor-pointer;
+    @apply h-11 w-full cursor-pointer rounded bg-yellow-500 text-base font-semibold text-gray-900 hover:bg-yellow-500;
   }
+
   .watchlist-remove {
-    @apply bg-red-500! hover:bg-red-500! text-gray-900!
+    @apply bg-red-500! text-gray-900! hover:bg-red-500!;
   }
+
   .watchlist-empty-container {
-    @apply container gap-8 flex-col items-center md:mt-10 p-6 text-center;
+    @apply container flex-col items-center gap-8 p-6 text-center md:mt-10;
   }
+
   .watchlist-empty {
     @apply flex flex-col items-center justify-center text-center;
   }
+
   .watchlist-star {
-    @apply h-16 w-16 text-gray-500 mb-4;
+    @apply mb-4 h-16 w-16 text-gray-500;
   }
+
   .empty-title {
-    @apply text-xl font-semibold text-gray-400 mb-2;
+    @apply mb-2 text-xl font-semibold text-gray-400;
   }
+
   .empty-description {
-    @apply text-gray-500 mb-6 max-w-md;
+    @apply mb-6 max-w-md text-gray-500;
   }
+
   .watchlist-container {
-    @apply flex flex-col-reverse lg:grid lg:grid-cols-3 gap-8;
+    @apply flex flex-col-reverse gap-8 lg:grid lg:grid-cols-3;
   }
+
   .watchlist {
-    @apply lg:col-span-2 space-y-8;
+    @apply space-y-8 lg:col-span-2;
   }
+
   .watchlist-alerts {
-    @apply items-start gap-6 h-full flex-col w-full lg:col-span-1;
+    @apply h-full w-full flex-col items-start gap-6 lg:col-span-1;
   }
+
   .watchlist-icon-btn {
-    @apply w-fit cursor-pointer hover:bg-transparent! text-gray-400 hover:text-yellow-500;
+    @apply w-fit cursor-pointer text-gray-400 hover:bg-transparent! hover:text-yellow-500;
   }
+
   .watchlist-icon-added {
-    @apply !text-yellow-500 hover:!text-yellow-600;
+    @apply !text-yellow-600 hover:!text-yellow-500;
   }
+
   .watchlist-icon {
-    @apply w-8 h-8 rounded-full flex items-center justify-center bg-gray-700/50;
+    @apply flex h-8 w-8 items-center justify-center rounded-full bg-gray-700/50;
   }
+
   .trash-icon {
     @apply h-4 w-4 text-gray-400 hover:text-red-400;
   }
+
   .star-icon {
     @apply h-4 w-4;
   }
+
   .watchlist-title {
-    @apply text-xl md:text-2xl font-bold text-gray-100;
+    @apply text-xl font-bold text-gray-100 md:text-2xl;
   }
+
   .watchlist-table {
-    @apply !relative overflow-hidden !w-full bg-gray-800 border !border-gray-600 !rounded-lg;
+    @apply !relative !w-full overflow-hidden !rounded-lg border !border-gray-600 bg-gray-800;
   }
+
   .table-header-row {
-    @apply text-gray-400 font-medium bg-gray-700 border-b border-gray-600 hover:bg-gray-700;
+    @apply border-b border-gray-600 bg-gray-700 font-medium text-gray-400 hover:bg-gray-700;
   }
+
   .table-header:first-child {
     @apply pl-4;
   }
+
   .table-row {
-    @apply border-b cursor-pointer text-gray-100 border-gray-600 hover:bg-gray-700/50 transition-colors;
+    @apply cursor-pointer border-b border-gray-600 text-gray-100 transition-colors hover:bg-gray-700/50;
   }
+
   .table-cell {
-    @apply font-medium text-base
+    @apply text-base font-medium;
   }
+
   .add-alert {
-    @apply flex text-sm items-center whitespace-nowrap gap-1.5 px-3 w-fit py-2 text-yellow-600 border border-yellow-600/20 rounded font-medium bg-transparent hover:bg-transparent cursor-pointer transition-colors;
+    @apply flex w-fit cursor-pointer items-center gap-1.5 rounded border border-yellow-600/20 bg-transparent px-3 py-2 text-sm font-medium whitespace-nowrap text-yellow-600 transition-colors hover:bg-transparent;
   }
+
   .watchlist-news {
-    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4;
+    @apply grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3;
   }
+
   .news-item {
-    @apply bg-gray-800 rounded-lg border w-full border-gray-600  p-4 duration-200 hover:border-gray-600 cursor-pointer;
+    @apply w-full cursor-pointer rounded-lg border border-gray-600 bg-gray-800 p-4 duration-200 hover:border-gray-600;
   }
+
   .news-tag {
-    @apply inline-block w-fit px-2 py-1 mb-5 rounded bg-gray-600/60 text-green-500 text-sm font-mono font-medium;
+    @apply mb-5 inline-block w-fit rounded bg-gray-600/60 px-2 py-1 font-mono text-sm font-medium text-green-500;
   }
+
   .news-title {
-    @apply text-lg  font-semibold text-gray-100 leading-tight mb-3 line-clamp-2;
+    @apply mb-3 line-clamp-2 text-lg leading-tight font-semibold text-gray-100;
   }
+
   .news-meta {
-    @apply flex items-center text-sm text-gray-500 mb-1;
+    @apply mb-1 flex items-center text-sm text-gray-500;
   }
+
   .news-summary {
-    @apply text-gray-400 flex-1 text-base leading-relaxed mb-3 line-clamp-3;
+    @apply mb-3 line-clamp-3 flex-1 text-base leading-relaxed text-gray-400;
   }
+
   .news-cta {
-    @apply text-sm align-bottom text-yellow-500 hover:text-gray-400;
+    @apply align-bottom text-sm text-yellow-500 hover:text-gray-400;
   }
+
   .alert-dialog {
-    @apply bg-gray-800 border-gray-600 text-gray-400 max-w-md;
+    @apply max-w-md border-gray-600 bg-gray-800 text-gray-400;
   }
+
   .alert-title {
     @apply text-xl font-semibold text-gray-100;
   }
+
   .alert-list {
-    @apply overflow-y-auto w-full max-h-[911px] rounded-lg flex border border-gray-600 flex-col gap-4 bg-gray-800 p-3 flex-1;
+    @apply flex max-h-[911px] w-full flex-1 flex-col gap-4 overflow-y-auto rounded-lg border border-gray-600 bg-gray-800 p-3;
   }
+
   .alert-empty {
     @apply px-6 py-8 text-center text-gray-500/50;
   }
+
   .alert-item {
-    @apply p-4 rounded-lg bg-gray-700 border border-gray-600;
+    @apply rounded-lg border border-gray-600 bg-gray-700 p-4;
   }
+
   .alert-name {
-    @apply mb-2 text-lg text-yellow-500 font-semibold;
+    @apply mb-2 text-lg font-semibold text-yellow-500;
   }
+
   .alert-details {
-    @apply flex border-b pb-3 items-center justify-between gap-3 mb-2;
+    @apply mb-2 flex items-center justify-between gap-3 border-b pb-3;
   }
+
   .alert-company {
-    @apply text-gray-400 text-base;
+    @apply text-base text-gray-400;
   }
+
   .alert-price {
-    @apply text-gray-100 font-bold;
+    @apply font-bold text-gray-100;
   }
+
   .alert-actions {
     @apply flex items-end justify-between;
   }
+
   .alert-update-btn {
-    @apply text-gray-400 rounded-full bg-transparent hover:bg-green-500/15 cursor-pointer;
+    @apply cursor-pointer rounded-full bg-transparent text-gray-400 hover:bg-green-500/15;
   }
+
   .alert-delete-btn {
-    @apply text-gray-400 rounded-full hover:bg-red-600/15 bg-transparent cursor-pointer transition-colors;
+    @apply cursor-pointer rounded-full bg-transparent text-gray-400 transition-colors hover:bg-red-600/15;
   }
 }
 
@@ -403,7 +489,6 @@
 .tradingview-widget-container__widget {
   background-color: #141414 !important;
   height: 100% !important;
-
 }
 
 .widget-stock-heatmap-container .screenerMapWrapper-BBVfGP0b {
@@ -451,7 +536,7 @@
 }
 
 .custom-chart.tradingview-widget-container iframe {
-  border: 1px solid #30333A;
+  border: 1px solid #30333a;
   border-radius: 8px !important;
   overflow: hidden !important;
 }
@@ -477,13 +562,13 @@
 }
 
 .scrollbar-hide-default:hover {
-  scrollbar-color: #30333A transparent;
+  scrollbar-color: #30333a transparent;
 }
 
 .scrollbar-hide-default:hover::-webkit-scrollbar-thumb {
-  background-color: #30333A;
+  background-color: #30333a;
 }
 
 .scrollbar-hide-default::-webkit-scrollbar-thumb:hover {
-  background-color: #9095A1;
-}
\ No newline at end of file
+  background-color: #9095a1;
+}
diff --git a/components/Header/index.tsx b/components/Header/index.tsx
index 7f5d9e5..081a90b 100644
--- a/components/Header/index.tsx
+++ b/components/Header/index.tsx
@@ -9,7 +9,7 @@ const Header: React.FC<HeaderProps> = ({ onMenuClick }) => {
   return (
     <header
       data-cmp="Header"
-      className="h-16 bg-card border-b border-border sticky top-0 z-20 px-4 md:px-8 flex items-center justify-between"
+      className="header h-16 border-b border-border sticky top-0 z-20 px-4 md:px-8 flex items-center justify-between"
     >
       <div className="flex items-center md:hidden">
         <button title="Menu" onClick={onMenuClick} className="p-2 -ml-2 text-foreground hover:bg-muted rounded-md">
diff --git a/components/Sidebar/index.tsx b/components/Sidebar/index.tsx
index 70735ae..b37c62b 100644
--- a/components/Sidebar/index.tsx
+++ b/components/Sidebar/index.tsx
@@ -18,7 +18,7 @@ const Sidebar: React.FC = () => {
   return (
     <aside
       data-cmp="Sidebar"
-      className="hidden md:flex flex-col w-64 h-screen bg-card border-r border-border fixed left-0 top-0 z-30"
+      className="side-bar hidden md:flex flex-col w-64 h-screen border-r border-border fixed left-0 top-0 z-30"
     >
       <div className="p-6 border-b border-border">
         <div className="flex items-center space-x-3">
diff --git a/package-lock.json b/package-lock.json
index 39db123..9b1dc0a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -28,6 +28,8 @@
                 "@types/react-dom": "^19",
                 "eslint": "^9",
                 "eslint-config-next": "16.1.4",
+                "prettier": "^3.8.1",
+                "prettier-plugin-tailwindcss": "^0.7.2",
                 "tailwindcss": "^4",
                 "tw-animate-css": "^1.4.0",
                 "typescript": "^5"
@@ -6120,6 +6122,101 @@
                 "node": ">= 0.8.0"
             }
         },
+        "node_modules/prettier": {
+            "version": "3.8.1",
+            "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.8.1.tgz",
+            "integrity": "sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg==",
+            "dev": true,
+            "license": "MIT",
+            "bin": {
+                "prettier": "bin/prettier.cjs"
+            },
+            "engines": {
+                "node": ">=14"
+            },
+            "funding": {
+                "url": "https://github.com/prettier/prettier?sponsor=1"
+            }
+        },
+        "node_modules/prettier-plugin-tailwindcss": {
+            "version": "0.7.2",
+            "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.7.2.tgz",
+            "integrity": "sha512-LkphyK3Fw+q2HdMOoiEHWf93fNtYJwfamoKPl7UwtjFQdei/iIBoX11G6j706FzN3ymX9mPVi97qIY8328vdnA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=20.19"
+            },
+            "peerDependencies": {
+                "@ianvs/prettier-plugin-sort-imports": "*",
+                "@prettier/plugin-hermes": "*",
+                "@prettier/plugin-oxc": "*",
+                "@prettier/plugin-pug": "*",
+                "@shopify/prettier-plugin-liquid": "*",
+                "@trivago/prettier-plugin-sort-imports": "*",
+                "@zackad/prettier-plugin-twig": "*",
+                "prettier": "^3.0",
+                "prettier-plugin-astro": "*",
+                "prettier-plugin-css-order": "*",
+                "prettier-plugin-jsdoc": "*",
+                "prettier-plugin-marko": "*",
+                "prettier-plugin-multiline-arrays": "*",
+                "prettier-plugin-organize-attributes": "*",
+                "prettier-plugin-organize-imports": "*",
+                "prettier-plugin-sort-imports": "*",
+                "prettier-plugin-svelte": "*"
+            },
+            "peerDependenciesMeta": {
+                "@ianvs/prettier-plugin-sort-imports": {
+                    "optional": true
+                },
+                "@prettier/plugin-hermes": {
+                    "optional": true
+                },
+                "@prettier/plugin-oxc": {
+                    "optional": true
+                },
+                "@prettier/plugin-pug": {
+                    "optional": true
+                },
+                "@shopify/prettier-plugin-liquid": {
+                    "optional": true
+                },
+                "@trivago/prettier-plugin-sort-imports": {
+                    "optional": true
+                },
+                "@zackad/prettier-plugin-twig": {
+                    "optional": true
+                },
+                "prettier-plugin-astro": {
+                    "optional": true
+                },
+                "prettier-plugin-css-order": {
+                    "optional": true
+                },
+                "prettier-plugin-jsdoc": {
+                    "optional": true
+                },
+                "prettier-plugin-marko": {
+                    "optional": true
+                },
+                "prettier-plugin-multiline-arrays": {
+                    "optional": true
+                },
+                "prettier-plugin-organize-attributes": {
+                    "optional": true
+                },
+                "prettier-plugin-organize-imports": {
+                    "optional": true
+                },
+                "prettier-plugin-sort-imports": {
+                    "optional": true
+                },
+                "prettier-plugin-svelte": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/prop-types": {
             "version": "15.8.1",
             "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
diff --git a/package.json b/package.json
index 5a407f6..faab31e 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,8 @@
         "@types/react-dom": "^19",
         "eslint": "^9",
         "eslint-config-next": "16.1.4",
+        "prettier": "^3.8.1",
+        "prettier-plugin-tailwindcss": "^0.7.2",
         "tailwindcss": "^4",
         "tw-animate-css": "^1.4.0",
         "typescript": "^5"