Updated UI, added new logo and public assets

apps/admin/src/app/page.tsx

@@ -5,6 +5,7 @@ import { Users, CreditCard, CalendarCheck, TrendingUp, Brain, Calendar, User } f
 import { StatsCard } from "@/components/ui/StatsCard";
 import { UserManagement } from "@/components/users/UserManagement";
 import { AnalyticsDashboard } from "@/components/analytics/AnalyticsDashboard";
+import { Logo } from "@/components/ui/Logo";
 import axios from "axios";
 
 interface DashboardStats {
@@ -125,9 +126,8 @@ export default function Home() {
       <div className="w-full px-4 sm:px-6 lg:px-8 py-6 sm:py-8">
         {/* Header Section */}
         <div className="mb-8 sm:mb-10">
-          <div className="flex items-center gap-3 mb-3">
-            <div className="h-1 w-12 bg-gradient-to-r from-[#2563eb] to-[#fb7a1b] rounded-full"></div>
-            <h1 className="text-3xl sm:text-4xl font-bold text-slate-900 dark:text-white">💪 FitAI Elite</h1>
+          <div className="flex items-center gap-4 mb-6">
+            <Logo variant="full" />
           </div>
           <h2 className="text-2xl sm:text-3xl font-bold text-slate-900 dark:text-white mt-4">Admin Dashboard</h2>
           <p className="text-slate-600 dark:text-slate-400 mt-2 text-sm sm:text-base">Manage your fitness platform with complete control.</p>

apps/admin/src/components/ui/Logo.tsx

@@ -0,0 +1,69 @@
+import React from "react";
+import Image from "next/image";
+
+interface LogoProps {
+  variant?: "full" | "icon" | "text";
+  className?: string;
+}
+
+export function Logo({ variant = "full", className = "" }: LogoProps) {
+  if (variant === "icon") {
+    return (
+      <div className={`relative w-24 h-24 flex-shrink-0 ${className}`}>
+        <Image
+          src="/logo.png"
+          alt="FitAI Logo"
+          width={96}
+          height={96}
+          className="object-contain"
+          priority
+        />
+      </div>
+    );
+  }
+
+  if (variant === "text") {
+    return (
+      <div className={`flex items-center gap-3 ${className}`}>
+        <div className="relative w-14 h-14 flex-shrink-0">
+          <Image
+            src="/logo.png"
+            alt="FitAI Logo"
+            width={56}
+            height={56}
+            className="object-contain"
+            priority
+          />
+        </div>
+        <div className="flex flex-col leading-tight">
+          <span className="text-lg font-black text-slate-900 dark:text-white">
+            NextForm
+          </span>
+          <span className="text-xs font-bold text-slate-500 dark:text-slate-400">Smart Fitness Twin</span>
+        </div>
+      </div>
+    );
+  }
+
+  // Full variant (default)
+  return (
+    <div className={`flex items-center gap-6 ${className}`}>
+      <div className="relative w-28 h-28 flex-shrink-0">
+        <Image
+          src="/logo.png"
+          alt="FitAI Logo"
+          width={112}
+          height={112}
+          className="object-contain"
+          priority
+        />
+      </div>
+      <div className="flex flex-col">
+        <span className="text-4xl font-black text-slate-900 dark:text-white">
+          NextForm
+        </span>
+        <span className="text-base font-bold text-slate-600 dark:text-slate-400">Your Smart Fitness Twin</span>
+      </div>
+    </div>
+  );
+}

apps/admin/src/components/ui/Sidebar.tsx

@@ -13,6 +13,7 @@ import {
     Brain,
 } from "lucide-react";
 import { UserButton, useUser } from "@clerk/nextjs";
+import { Logo } from "./Logo";
 
 interface Recommendation {
     id: string;
@@ -66,10 +67,10 @@ export function Sidebar() {
 
     return (
         <aside className="w-64 bg-slate-900 text-white h-screen fixed left-0 top-0 flex flex-col border-r border-slate-800">
-            <div className="p-6 border-b border-slate-800">
-                <h1 className="text-2xl font-bold bg-gradient-to-r from-blue-400 to-indigo-400 bg-clip-text text-transparent">
-                    FitAI Admin
-                </h1>
+            <div className="p-6 border-b border-slate-800 flex items-center justify-center">
+                <Link href="/" className="hover:opacity-80 transition-opacity">
+                    <Logo variant="text" className="justify-start" />
+                </Link>
             </div>
 
             <nav className="flex-1 p-4 space-y-2">