diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
new file mode 100644
index 0000000..9bcdd8d
--- /dev/null
+++ b/src/app/dashboard/page.tsx
@@ -0,0 +1,209 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import { useState } from "react";
+import {
+  BarChart3,
+  Wallet,
+  Home,
+  TrendingUp,
+  PieChart,
+  Settings,
+  ShoppingCart,
+  Zap,
+  Send,
+  LogOut,
+  Menu,
+  X,
+} from "lucide-react";
+
+export default function DashboardPage() {
+  const [sidebarOpen, setSidebarOpen] = useState(true);
+  const [activeTab, setActiveTab] = useState("overview");
+
+  const dashboardStats = [
+    {
+      title: "Total Spent",      values: [2450, 3120, 2890],
+      valuePrefix: "$",      description: "This month"},
+    {
+      title: "Saved",      values: [890, 1250, 1580],
+      valuePrefix: "$",      description: "This month"},
+    {
+      title: "Categories",      values: [12, 14, 16],
+      description: "Tracked"},
+  ];
+
+  const recentTransactions = [
+    { icon: ShoppingCart, title: "Grocery Store", status: "Categorized", amount: "-$45.99" },
+    { icon: Zap, title: "Electricity Bill", status: "Confirmed", amount: "-$120.00" },
+    { icon: Send, title: "Restaurant Charge", status: "Categorized", amount: "-$62.50" },
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="elastic-effect"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="rounded"
+      contentWidth="mediumLarge"
+      sizing="mediumLargeSizeMediumTitles"
+      background="floatingGradient"
+      cardStyle="layered-gradient"
+      primaryButtonStyle="double-inset"
+      secondaryButtonStyle="radial-glow"
+      headingFontWeight="medium"
+    >
+      <div className="flex min-h-screen bg-gray-900 text-white">
+        {/* Sidebar */}
+        <aside
+          className={`${
+            sidebarOpen ? "w-64" : "w-20"
+          } bg-gray-950 border-r border-gray-800 transition-all duration-300 flex flex-col shadow-2xl`}
+        >
+          <div className="p-6 flex items-center justify-between">
+            {sidebarOpen && (
+              <h1 className="text-xl font-bold bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">
+                FinTracker
+              </h1>
+            )}
+            <button
+              onClick={() => setSidebarOpen(!sidebarOpen)}
+              className="p-2 hover:bg-gray-800 rounded-lg transition-colors"
+            >
+              {sidebarOpen ? <X size={20} /> : <Menu size={20} />}
+            </button>
+          </div>
+
+          <nav className="flex-1 space-y-2 px-4 py-4">
+            {[
+              { icon: Home, label: "Dashboard", id: "overview" },
+              { icon: TrendingUp, label: "Analytics", id: "analytics" },
+              { icon: PieChart, label: "Budget", id: "budget" },
+              { icon: Wallet, label: "Accounts", id: "accounts" },
+            ].map((item) => (
+              <button
+                key={item.id}
+                onClick={() => setActiveTab(item.id)}
+                className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg transition-all ${
+                  activeTab === item.id
+                    ? "bg-gradient-to-r from-cyan-500 to-blue-600 text-white shadow-lg shadow-cyan-500/50"
+                    : "hover:bg-gray-800 text-gray-400"
+                }`}
+              >
+                <item.icon size={20} />
+                {sidebarOpen && <span>{item.label}</span>}
+              </button>
+            ))}
+          </nav>
+
+          <div className="p-4 border-t border-gray-800">
+            <button className="w-full flex items-center gap-2 px-4 py-2 text-gray-400 hover:text-red-400 hover:bg-gray-800 rounded-lg transition-colors">
+              <LogOut size={20} />
+              {sidebarOpen && <span>Logout</span>}
+            </button>
+          </div>
+        </aside>
+
+        {/* Main Content */}
+        <main className="flex-1 overflow-auto">
+          {/* Top Navigation */}
+          <div className="sticky top-0 bg-gray-950 border-b border-gray-800 px-8 py-6 flex items-center justify-between shadow-xl">
+            <div>
+              <h2 className="text-3xl font-bold bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">
+                Financial Dashboard
+              </h2>
+              <p className="text-gray-500 mt-1">Welcome back! Here's your financial overview.</p>
+            </div>
+            <div className="flex items-center gap-4">
+              <input
+                type="text"
+                placeholder="Search transactions..."
+                className="px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:border-cyan-500 focus:ring-2 focus:ring-cyan-500/20"
+              />
+            </div>
+          </div>
+
+          {/* Content Area */}
+          <div className="p-8">
+            {/* Stats Grid */}
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+              {dashboardStats.map((stat, index) => (
+                <div
+                  key={index}
+                  className="bg-gray-800 border border-gray-700 rounded-xl p-6 hover:border-cyan-500/50 transition-all hover:shadow-lg hover:shadow-cyan-500/20"
+                >
+                  <h3 className="text-gray-400 text-sm font-semibold uppercase tracking-wider">
+                    {stat.title}
+                  </h3>
+                  <div className="mt-4 flex items-baseline gap-2">
+                    <span className="text-3xl font-bold text-white">
+                      {stat.valuePrefix}{stat.values[stat.values.length - 1]}
+                    </span>
+                    <span className="text-sm text-gray-500">{stat.description}</span>
+                  </div>
+                  <div className="mt-3 flex gap-1">
+                    {stat.values.map((v, i) => (
+                      <div
+                        key={i}
+                        className="h-1 flex-1 bg-gray-700 rounded-full overflow-hidden"
+                      >
+                        <div
+                          className="h-full bg-gradient-to-r from-cyan-500 to-blue-600"
+                          style={{ width: `${(v / 100) * 100}%` }}
+                        ></div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              ))}
+            </div>
+
+            {/* Charts and Transactions */}
+            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+              {/* Chart */}
+              <div className="lg:col-span-2 bg-gray-800 border border-gray-700 rounded-xl p-6 hover:border-cyan-500/50 transition-all">
+                <h3 className="text-lg font-bold text-white mb-4">Spending Trend</h3>
+                <div className="h-80 flex items-end gap-2">
+                  {[65, 45, 78, 52, 88, 72, 55].map((value, i) => (
+                    <div
+                      key={i}
+                      className="flex-1 bg-gradient-to-t from-cyan-500 to-blue-600 rounded-t-lg hover:shadow-lg hover:shadow-cyan-500/50 transition-all cursor-pointer"
+                      style={{ height: `${value * 1.5}px` }}
+                      title={`${value}%`}
+                    ></div>
+                  ))}
+                </div>
+              </div>
+
+              {/* Recent Transactions */}
+              <div className="bg-gray-800 border border-gray-700 rounded-xl p-6 hover:border-cyan-500/50 transition-all">
+                <h3 className="text-lg font-bold text-white mb-4">Recent Transactions</h3>
+                <div className="space-y-3">
+                  {recentTransactions.map((tx, i) => {
+                    const Icon = tx.icon;
+                    return (
+                      <div
+                        key={i}
+                        className="flex items-center gap-3 p-3 bg-gray-700/50 rounded-lg hover:bg-gray-700 transition-colors"
+                      >
+                        <div className="p-2 bg-gradient-to-r from-cyan-500/20 to-blue-600/20 rounded-lg">
+                          <Icon size={18} className="text-cyan-400" />
+                        </div>
+                        <div className="flex-1 min-w-0">
+                          <p className="text-sm font-semibold text-white truncate">
+                            {tx.title}
+                          </p>
+                          <p className="text-xs text-gray-500">{tx.status}</p>
+                        </div>
+                        <p className="text-sm font-bold text-cyan-400">{tx.amount}</p>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            </div>
+          </div>
+        </main>
+      </div>
+    </ThemeProvider>
+  );
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index de97e23..211c5fa 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,17 +1,14 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import { Inter } from "next/font/google";
 import "./globals.css";
 
-const geist = Geist({
-  variable: "--font-geist-sans",  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",  subsets: ["latin"],
+const inter = Inter({
+  variable: "--font-inter",  subsets: ["latin"],
 });
 
 export const metadata: Metadata = {
-  title: "FinTracker",  description: "Track your spending instantly with AI-powered categorization"};
+  title: "FinTracker",  description: "Track your spending instantly with AI-powered categorization"
+};
 
 export default function RootLayout({
   children,
@@ -20,7 +17,7 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body className={`${geist.variable} ${geistMono.variable} antialiased`}>
+      <body className={`${inter.variable} antialiased`}>
         {children}
       
         <script
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
new file mode 100644
index 0000000..d06aeb1
--- /dev/null
+++ b/src/app/login/page.tsx
@@ -0,0 +1,187 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import { useState } from "react";
+import { Mail, Lock, Eye, EyeOff, Sparkles } from "lucide-react";
+import Link from "next/link";
+
+export default function LoginPage() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [showPassword, setShowPassword] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleLogin = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsLoading(true);
+    // Simulate API call
+    setTimeout(() => {
+      setIsLoading(false);
+      // Redirect to dashboard
+      window.location.href = "/dashboard";
+    }, 1500);
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="elastic-effect"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="rounded"
+      contentWidth="mediumLarge"
+      sizing="mediumLargeSizeMediumTitles"
+      background="floatingGradient"
+      cardStyle="layered-gradient"
+      primaryButtonStyle="double-inset"
+      secondaryButtonStyle="radial-glow"
+      headingFontWeight="medium"
+    >
+      <div className="min-h-screen bg-gradient-to-br from-gray-950 via-gray-900 to-black flex items-center justify-center px-4 relative overflow-hidden">
+        {/* Animated background elements */}
+        <div className="absolute inset-0 overflow-hidden">
+          <div className="absolute -top-40 -right-40 w-80 h-80 bg-cyan-500/30 rounded-full blur-3xl opacity-20 animate-pulse"></div>
+          <div className="absolute -bottom-40 -left-40 w-80 h-80 bg-blue-500/30 rounded-full blur-3xl opacity-20 animate-pulse" style={{ animationDelay: "1s" }}></div>
+        </div>
+
+        {/* Login Card */}
+        <div className="relative z-10 w-full max-w-md">
+          <div className="bg-gray-900 border border-gray-800 rounded-2xl shadow-2xl overflow-hidden">
+            {/* Glowing top border */}
+            <div className="h-1 bg-gradient-to-r from-cyan-500 via-blue-500 to-purple-500"></div>
+
+            <div className="p-8 md:p-10">
+              {/* Logo */}
+              <div className="flex items-center justify-center gap-2 mb-8">
+                <div className="p-2 bg-gradient-to-br from-cyan-500 to-blue-600 rounded-lg">
+                  <Sparkles size={24} className="text-white" />
+                </div>
+                <h1 className="text-2xl font-bold bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">
+                  FinTracker
+                </h1>
+              </div>
+
+              {/* Heading */}
+              <h2 className="text-3xl font-bold text-white text-center mb-2">
+                Welcome Back
+              </h2>
+              <p className="text-gray-400 text-center mb-8">
+                Sign in to your account to continue tracking your finances
+              </p>
+
+              {/* Login Form */}
+              <form onSubmit={handleLogin} className="space-y-4">
+                {/* Email Input */}
+                <div>
+                  <label className="block text-sm font-medium text-gray-300 mb-2">
+                    Email Address
+                  </label>
+                  <div className="relative">
+                    <Mail
+                      size={18}
+                      className="absolute left-4 top-3 text-gray-500"
+                    />
+                    <input
+                      type="email"
+                      value={email}
+                      onChange={(e) => setEmail(e.target.value)}
+                      placeholder="your@email.com"
+                      className="w-full pl-12 pr-4 py-3 bg-gray-800 border border-gray-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:border-cyan-500 focus:ring-2 focus:ring-cyan-500/20 transition-all"
+                      required
+                    />
+                  </div>
+                </div>
+
+                {/* Password Input */}
+                <div>
+                  <label className="block text-sm font-medium text-gray-300 mb-2">
+                    Password
+                  </label>
+                  <div className="relative">
+                    <Lock
+                      size={18}
+                      className="absolute left-4 top-3 text-gray-500"
+                    />
+                    <input
+                      type={showPassword ? "text" : "password"}
+                      value={password}
+                      onChange={(e) => setPassword(e.target.value)}
+                      placeholder="••••••••"
+                      className="w-full pl-12 pr-12 py-3 bg-gray-800 border border-gray-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:border-cyan-500 focus:ring-2 focus:ring-cyan-500/20 transition-all"
+                      required
+                    />
+                    <button
+                      type="button"
+                      onClick={() => setShowPassword(!showPassword)}
+                      className="absolute right-4 top-3 text-gray-500 hover:text-gray-400 transition-colors"
+                    >
+                      {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
+                    </button>
+                  </div>
+                </div>
+
+                {/* Remember & Forgot */}
+                <div className="flex items-center justify-between text-sm">
+                  <label className="flex items-center gap-2 text-gray-400 hover:text-gray-300 cursor-pointer transition-colors">
+                    <input type="checkbox" className="rounded border-gray-600 accent-cyan-500" />
+                    Remember me
+                  </label>
+                  <Link
+                    href="#"
+                    className="text-cyan-400 hover:text-cyan-300 transition-colors"
+                  >
+                    Forgot password?
+                  </Link>
+                </div>
+
+                {/* Login Button */}
+                <button
+                  type="submit"
+                  disabled={isLoading}
+                  className="w-full mt-6 py-3 px-4 bg-gradient-to-r from-cyan-500 to-blue-600 hover:from-cyan-600 hover:to-blue-700 disabled:opacity-50 disabled:cursor-not-allowed text-white font-bold rounded-lg transition-all shadow-lg shadow-cyan-500/50 hover:shadow-cyan-500/75"
+                >
+                  {isLoading ? (
+                    <span className="flex items-center justify-center gap-2">
+                      <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin"></div>
+                      Signing in...
+                    </span>
+                  ) : (
+                    "Sign In"
+                  )}
+                </button>
+              </form>
+
+              {/* Divider */}
+              <div className="my-6 flex items-center gap-3">
+                <div className="flex-1 h-px bg-gray-700"></div>
+                <span className="text-gray-500 text-sm">Or</span>
+                <div className="flex-1 h-px bg-gray-700"></div>
+              </div>
+
+              {/* Social Login */}
+              <div className="grid grid-cols-2 gap-3">
+                <button className="py-2 px-4 bg-gray-800 border border-gray-700 rounded-lg text-gray-300 font-medium hover:bg-gray-700/50 hover:border-gray-600 transition-all">
+                  Google
+                </button>
+                <button className="py-2 px-4 bg-gray-800 border border-gray-700 rounded-lg text-gray-300 font-medium hover:bg-gray-700/50 hover:border-gray-600 transition-all">
+                  GitHub
+                </button>
+              </div>
+
+              {/* Sign Up Link */}
+              <p className="text-center text-gray-400 mt-6">
+                Don't have an account?{" "}
+                <Link href="/#contact" className="text-cyan-400 hover:text-cyan-300 font-medium transition-colors">
+                  Sign up for free
+                </Link>
+              </p>
+            </div>
+          </div>
+
+          {/* Security Badge */}
+          <div className="mt-6 text-center text-gray-500 text-sm">
+            <p>🔒 Bank-level encryption • 100% secure</p>
+          </div>
+        </div>
+      </div>
+    </ThemeProvider>
+  );
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 07cddf6..8b5208e 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -30,9 +30,23 @@ import {
   HelpCircle,
   Mail,
   Quote,
+  LogIn,
 } from "lucide-react";
+import { useState } from "react";
 
 export default function FinTrackerPage() {
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const [userEmail, setUserEmail] = useState("");
+
+  const handleLogin = () => {
+    setIsLoggedIn(true);
+  };
+
+  const handleLogout = () => {
+    setIsLoggedIn(false);
+    setUserEmail("");
+  };
+
   return (
     <ThemeProvider
       defaultButtonVariant="elastic-effect"
@@ -56,7 +70,8 @@ export default function FinTrackerPage() {
             { name: "Contact", id: "contact" },
           ]}
           button={{
-            text: "Start Tracking Free",            href: "contact"}}
+            text: isLoggedIn ? "Dashboard" : "Start Tracking Free",            href: isLoggedIn ? "/dashboard" : "contact"
+          }}
           brandName="FinTracker"
         />
       </div>
@@ -89,13 +104,16 @@ export default function FinTrackerPage() {
             stats: [
               {
                 title: "Total Spent",                values: [2450, 3120, 2890],
-                valuePrefix: "$",                description: "This month"},
+                valuePrefix: "$",                description: "This month"
+              },
               {
                 title: "Saved",                values: [890, 1250, 1580],
-                valuePrefix: "$",                description: "This month"},
+                valuePrefix: "$",                description: "This month"
+              },
               {
                 title: "Categories",                values: [12, 14, 16],
-                description: "Tracked"},
+                description: "Tracked"
+              },
             ],
             chartTitle: "Spending Trend",            chartData: [
               { value: 65 },
@@ -139,16 +157,20 @@ export default function FinTrackerPage() {
           features={[
             {
               title: "Smart Upload",              description: "Upload PDF or CSV statements instantly. Our AI automatically extracts and categorizes transactions.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXT9EDXImOlgpR13XX5dwECwGc/a-close-up-of-a-smooth-bank-statement-pd-1772737936900-f63dc2fd.png?_wi=2",              imageAlt: "Smart file upload",              buttonIcon: ArrowRight,
-              buttonHref: "contact"},
+              buttonHref: "contact"
+            },
             {
               title: "Auto-Categorization",              description: "Transactions are instantly categorized by type. Learn your spending patterns at a glance.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXT9EDXImOlgpR13XX5dwECwGc/a-detailed-expense-categorization-view-s-1772737937204-07e8a1b9.png",              imageAlt: "Expense categorization",              buttonIcon: ArrowRight,
-              buttonHref: "contact"},
+              buttonHref: "contact"
+            },
             {
               title: "Trend Analysis",              description: "Visual spending trends over time. Identify patterns and opportunities to save more.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXT9EDXImOlgpR13XX5dwECwGc/a-spending-insights-dashboard-showing-ti-1772737937593-6a695691.png",              imageAlt: "Spending insights",              buttonIcon: ArrowRight,
-              buttonHref: "contact"},
+              buttonHref: "contact"
+            },
             {
               title: "Privacy First",              description: "Bank-level encryption. Your data stays yours. We never sell or share your financial information.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXT9EDXImOlgpR13XX5dwECwGc/a-close-up-of-a-smooth-bank-statement-pd-1772737936900-f63dc2fd.png?_wi=3",              imageAlt: "Security assurance",              buttonIcon: Shield,
-              buttonHref: "#"},
+              buttonHref: "#"
+            },
           ]}
           textboxLayout="default"
           useInvertedBackground={false}
@@ -172,7 +194,8 @@ export default function FinTrackerPage() {
                 { text: "Learn More", href: "#" },
               ],
               features: [
-                "Upload up to 3 statements",                "Basic categorization",                "View spending summary",                "Export monthly reports"],
+                "Upload up to 3 statements",                "Basic categorization",                "View spending summary",                "Export monthly reports"
+              ],
             },
             {
               id: "pro",              badge: "Professional",              badgeIcon: Star,
@@ -181,7 +204,8 @@ export default function FinTrackerPage() {
                 { text: "Chat to Sales", href: "#" },
               ],
               features: [
-                "Unlimited statements",                "Advanced categorization",                "Spending trend analysis",                "Savings goal tracking",                "Export any format",                "Priority support"],
+                "Unlimited statements",                "Advanced categorization",                "Spending trend analysis",                "Savings goal tracking",                "Export any format",                "Priority support"
+              ],
             },
             {
               id: "family",              badge: "Family",              badgeIcon: Users,
@@ -190,7 +214,8 @@ export default function FinTrackerPage() {
                 { text: "Chat to Sales", href: "#" },
               ],
               features: [
-                "Multiple member accounts",                "Shared expense tracking",                "Family savings goals",                "Smart budget alerts",                "Detailed analytics",                "Priority support"],
+                "Multiple member accounts",                "Shared expense tracking",                "Family savings goals",                "Smart budget alerts",                "Detailed analytics",                "Priority support"
+              ],
             },
           ]}
           animationType="slide-up"
@@ -210,7 +235,8 @@ export default function FinTrackerPage() {
           textboxLayout="default"
           useInvertedBackground={false}
           logos={[
-            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXT9EDXImOlgpR13XX5dwECwGc/professional-financial-institution-or-ba-1772737935772-c220bf12.png",            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXT9EDXImOlgpR13XX5dwECwGc/professional-fintech-company-logo-modern-1772737935793-812025ae.png",            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXT9EDXImOlgpR13XX5dwECwGc/professional-financial-analytics-or-acco-1772737936413-f742211b.png",            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXT9EDXImOlgpR13XX5dwECwGc/professional-investment-or-wealth-manage-1772737934505-68cbe6e8.png",            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXT9EDXImOlgpR13XX5dwECwGc/professional-payment-processing-or-digit-1772737937126-03b0e9ae.png",            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXT9EDXImOlgpR13XX5dwECwGc/professional-financial-advisory-or-consu-1772737937624-0a3d3272.png",            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXT9EDXImOlgpR13XX5dwECwGc/professional-cryptocurrency-or-blockchai-1772737937232-7f567eab.png"]}
+            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXT9EDXImOlgpR13XX5dwECwGc/professional-financial-institution-or-ba-1772737935772-c220bf12.png",            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXT9EDXImOlgpR13XX5dwECwGc/professional-fintech-company-logo-modern-1772737935793-812025ae.png",            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXT9EDXImOlgpR13XX5dwECwGc/professional-financial-analytics-or-acco-1772737936413-f742211b.png",            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXT9EDXImOlgpR13XX5dwECwGc/professional-investment-or-wealth-manage-1772737934505-68cbe6e8.png",            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXT9EDXImOlgpR13XX5dwECwGc/professional-payment-processing-or-digit-1772737937126-03b0e9ae.png",            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXT9EDXImOlgpR13XX5dwECwGc/professional-financial-advisory-or-consu-1772737937624-0a3d3272.png",            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXT9EDXImOlgpR13XX5dwECwGc/professional-cryptocurrency-or-blockchai-1772737937232-7f567eab.png"
+          ]}
           names={[]}
           speed={40}
           showCard={true}
@@ -228,13 +254,17 @@ export default function FinTrackerPage() {
           useInvertedBackground={false}
           testimonials={[
             {
-              id: "1",              title: "Finally understand my spending",              quote: "I've always wondered where my money was going. FinTracker's automatic categorization gave me instant clarity. I found $300+ in monthly expenses I didn't realize. Now I'm saving intentionally.",              name: "Sarah Johnson",              role: "Marketing Manager",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXT9EDXImOlgpR13XX5dwECwGc/professional-headshot-of-a-confident-fem-1772737934593-d76a5aa2.png",              imageAlt: "Sarah Johnson"},
+              id: "1",              title: "Finally understand my spending",              quote: "I've always wondered where my money was going. FinTracker's automatic categorization gave me instant clarity. I found $300+ in monthly expenses I didn't realize. Now I'm saving intentionally.",              name: "Sarah Johnson",              role: "Marketing Manager",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXT9EDXImOlgpR13XX5dwECwGc/professional-headshot-of-a-confident-fem-1772737934593-d76a5aa2.png",              imageAlt: "Sarah Johnson"
+            },
             {
-              id: "2",              title: "Game changer for freelance budgeting",              quote: "As a freelancer with irregular income, FinTracker helps me track multiple bank accounts and see savings trends month-to-month. The automated insights save me hours of spreadsheet work.",              name: "Michael Chen",              role: "Software Consultant",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXT9EDXImOlgpR13XX5dwECwGc/professional-headshot-of-a-confident-mal-1772737936509-72b330a2.png",              imageAlt: "Michael Chen"},
+              id: "2",              title: "Game changer for freelance budgeting",              quote: "As a freelancer with irregular income, FinTracker helps me track multiple bank accounts and see savings trends month-to-month. The automated insights save me hours of spreadsheet work.",              name: "Michael Chen",              role: "Software Consultant",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXT9EDXImOlgpR13XX5dwECwGc/professional-headshot-of-a-confident-mal-1772737936509-72b330a2.png",              imageAlt: "Michael Chen"
+            },
             {
-              id: "3",              title: "Family finances made simple",              quote: "We switched from manually tracking expenses to FinTracker's family plan. Now my spouse and I can see our combined spending, set shared goals, and actually stick to our budget.",              name: "Emily Rodriguez",              role: "Small Business Owner",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXT9EDXImOlgpR13XX5dwECwGc/professional-headshot-of-a-confident-fem-1772737936180-907c0937.png",              imageAlt: "Emily Rodriguez"},
+              id: "3",              title: "Family finances made simple",              quote: "We switched from manually tracking expenses to FinTracker's family plan. Now my spouse and I can see our combined spending, set shared goals, and actually stick to our budget.",              name: "Emily Rodriguez",              role: "Small Business Owner",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXT9EDXImOlgpR13XX5dwECwGc/professional-headshot-of-a-confident-fem-1772737936180-907c0937.png",              imageAlt: "Emily Rodriguez"
+            },
             {
-              id: "4",              title: "Security and simplicity combined",              quote: "I was hesitant uploading bank statements anywhere, but FinTracker's commitment to privacy and bank-level encryption gives me complete peace of mind. Best financial tool I've used.",              name: "David Kim",              role: "Finance Analyst",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXT9EDXImOlgpR13XX5dwECwGc/professional-headshot-of-a-confident-mal-1772737935938-61212e2c.png",              imageAlt: "David Kim"},
+              id: "4",              title: "Security and simplicity combined",              quote: "I was hesitant uploading bank statements anywhere, but FinTracker's commitment to privacy and bank-level encryption gives me complete peace of mind. Best financial tool I've used.",              name: "David Kim",              role: "Finance Analyst",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXT9EDXImOlgpR13XX5dwECwGc/professional-headshot-of-a-confident-mal-1772737935938-61212e2c.png",              imageAlt: "David Kim"
+            },
           ]}
         />
       </div>
@@ -248,17 +278,23 @@ export default function FinTrackerPage() {
           tagAnimation="slide-up"
           faqs={[
             {
-              id: "1",              title: "How secure is uploading my bank statements?",              content: "We use bank-level AES-256 encryption for all uploaded statements and stored data. Your information is never sold, shared, or used for marketing. We comply with SOC 2 and maintain strict privacy policies. All data is encrypted in transit and at rest."},
+              id: "1",              title: "How secure is uploading my bank statements?",              content: "We use bank-level AES-256 encryption for all uploaded statements and stored data. Your information is never sold, shared, or used for marketing. We comply with SOC 2 and maintain strict privacy policies. All data is encrypted in transit and at rest."
+            },
             {
-              id: "2",              title: "What file formats do you accept?",              content: "We currently accept PDF and CSV files from most major banks. Our AI can extract data from virtually any statement format. If your bank isn't recognized, you can manually categorize transactions or contact support for format-specific guidance."},
+              id: "2",              title: "What file formats do you accept?",              content: "We currently accept PDF and CSV files from most major banks. Our AI can extract data from virtually any statement format. If your bank isn't recognized, you can manually categorize transactions or contact support for format-specific guidance."
+            },
             {
-              id: "3",              title: "Can I connect live bank feeds instead of uploading statements?",              content: "Currently, we support manual PDF/CSV uploads for maximum control and privacy. We're developing direct bank connections for the future, which will sync transactions automatically while maintaining enterprise-grade encryption."},
+              id: "3",              title: "Can I connect live bank feeds instead of uploading statements?",              content: "Currently, we support manual PDF/CSV uploads for maximum control and privacy. We're developing direct bank connections for the future, which will sync transactions automatically while maintaining enterprise-grade encryption."
+            },
             {
-              id: "4",              title: "How accurate is the auto-categorization?",              content: "Our AI categorizes 95%+ of transactions correctly on first pass. You can manually adjust any categorization, and our system learns from your corrections to improve accuracy over time. The more you use it, the smarter it gets."},
+              id: "4",              title: "How accurate is the auto-categorization?",              content: "Our AI categorizes 95%+ of transactions correctly on first pass. You can manually adjust any categorization, and our system learns from your corrections to improve accuracy over time. The more you use it, the smarter it gets."
+            },
             {
-              id: "5",              title: "Can I use FinTracker for multiple bank accounts?",              content: "Yes! You can upload statements from unlimited bank accounts across all plans. The Professional and Family plans have enhanced multi-account analytics to compare spending across accounts and identify total savings opportunities."},
+              id: "5",              title: "Can I use FinTracker for multiple bank accounts?",              content: "Yes! You can upload statements from unlimited bank accounts across all plans. The Professional and Family plans have enhanced multi-account analytics to compare spending across accounts and identify total savings opportunities."
+            },
             {
-              id: "6",              title: "What's included in the free plan?",              content: "The free Starter plan includes uploading up to 3 statements, basic categorization, viewing spending summaries, and monthly report exports. Perfect for trying out FinTracker with no commitment."},
+              id: "6",              title: "What's included in the free plan?",              content: "The free Starter plan includes uploading up to 3 statements, basic categorization, viewing spending summaries, and monthly report exports. Perfect for trying out FinTracker with no commitment."
+            },
           ]}
           faqsAnimation="slide-up"
           textboxLayout="default"
diff --git a/src/app/styles/variables.css b/src/app/styles/variables.css
index 0fdb09b..42ea0c1 100644
--- a/src/app/styles/variables.css
+++ b/src/app/styles/variables.css
@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #fffefe;
-  --card: #f6f7f4;
-  --foreground: #080908;
-  --primary-cta: #0e3a29;
+  --background: #0a0a0a;
+  --card: #1a1a1a;
+  --foreground: #ffffffe6;
+  --primary-cta: #00d9ff;
   --primary-cta-text: #fffefe;
-  --secondary-cta: #e7eecd;
+  --secondary-cta: #1a1a1a;
   --secondary-cta-text: #080908;
-  --accent: #35c18b;
-  --background-accent: #ecebe4;
+  --accent: #0099ff;
+  --background-accent: #004d99;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);