diff --git a/app/src/app/globals.css b/app/src/app/globals.css
index 23d132e..9f89ffc 100644
--- a/app/src/app/globals.css
+++ b/app/src/app/globals.css
@@ -1,75 +1,77 @@
 @import "tailwindcss";
 
-:root {
-  --background: #000000;
-  --foreground: #ffffff;
-}
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
-}
-
-body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
-  margin: 0;
-  padding: 0;
-}
-
-/* Custom scrollbar for dark theme */
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-::-webkit-scrollbar-track {
-  background: #000000;
-}
-
-::-webkit-scrollbar-thumb {
-  background: #374151;
-  border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: #4B5563;
-}
-
-/* Hide scrollbar for album container */
-.scrollbar-hide {
-  -ms-overflow-style: none;  /* IE and Edge */
-  scrollbar-width: none;  /* Firefox */
-}
-
-.scrollbar-hide::-webkit-scrollbar {
-  display: none;  /* Chrome, Safari and Opera */
-}
-
-@layer utilities {
-  @keyframes music {
-    0%, 100% {
-      height: 20%;
-    }
-    50% {
-      height: 100%;
-    }
-  }
-
-  .animate-music {
-    animation: music 1s ease-in-out infinite;
-  }
-}
-
-@layer utilities {
-  .animate-music-fast {
-    animation: music 0.6s ease-in-out infinite;
-  }
-
-  .animate-music-slow {
-    animation: music 1.4s ease-in-out infinite;
-  }
-}
+@custom-variant dark (&:where(.dark, .dark *));
+
+:root {
+  --background: #000000;
+  --foreground: #ffffff;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: Arial, Helvetica, sans-serif;
+  margin: 0;
+  padding: 0;
+}
+
+/* Custom scrollbar for dark theme */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: #000000;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #374151;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #4B5563;
+}
+
+/* Hide scrollbar for album container */
+.scrollbar-hide {
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+}
+
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;  /* Chrome, Safari and Opera */
+}
+
+@layer utilities {
+  @keyframes music {
+    0%, 100% {
+      height: 20%;
+    }
+    50% {
+      height: 100%;
+    }
+  }
+
+  .animate-music {
+    animation: music 1s ease-in-out infinite;
+  }
+}
+
+@layer utilities {
+  .animate-music-fast {
+    animation: music 0.6s ease-in-out infinite;
+  }
+
+  .animate-music-slow {
+    animation: music 1.4s ease-in-out infinite;
+  }
+}
diff --git a/app/src/components/OverviewCards.tsx b/app/src/components/OverviewCards.tsx
index fefa7b7..97d5276 100644
--- a/app/src/components/OverviewCards.tsx
+++ b/app/src/components/OverviewCards.tsx
@@ -1,98 +1,98 @@
-'use client';
-
-import { featureFlags } from '@/lib/featureFlags';
-import { MOCK_OVERVIEW_CARDS } from '@/lib/mockData';
-import MockDataBadge from '@/components/MockDataBadge';
-import useOverviewServices from '@/services/overviewService';
-
-interface KpiCard {
-  title: string;
-  value: string;
-  isFirst: boolean;
-}
-
-function formatCurrency(n: number): string {
-  return `$${n.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
-}
-
-function kpiToCards(data: { songsPublished: number; totalEarnings: number; listenersCount: number; mostStreamedRegion: string }): KpiCard[] {
-  return [
-    { title: 'Songs Published', value: String(data.songsPublished), isFirst: true },
-    { title: 'Total Earnings', value: formatCurrency(data.totalEarnings), isFirst: false },
-    { title: 'Listeners Count', value: data.listenersCount.toLocaleString('en-US'), isFirst: false },
-    { title: 'Most Streamed Region', value: data.mostStreamedRegion, isFirst: false },
-  ];
-}
-
-function CardGrid({ cards, isMock }: { cards: KpiCard[]; isMock: boolean }) {
-  return (
-    <div>
-      <h2 className="text-white text-lg font-semibold mb-4 flex items-center">
-        Overview
-        {isMock && <MockDataBadge label="overview" />}
-      </h2>
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-        {cards.map((card, index) => (
-          <div key={index}>
-            {card.isFirst ? (
-              <div className="relative rounded-lg p-[1px] bg-gradient-to-br from-purple-500 via-pink-500 to-gray-900">
-                <div className="bg-[#0F0F0F] rounded-lg">
-                  <div className="p-6">
-                    <p className="text-gray-400 text-sm font-normal mb-2">{card.title}</p>
-                    <p className="text-white text-2xl font-bold">{card.value}</p>
-                  </div>
-                </div>
-              </div>
-            ) : (
-              <div className="bg-[#0F0F0F] border border-gray-800 rounded-lg p-6">
-                <p className="text-gray-400 text-sm font-normal mb-2">{card.title}</p>
-                <p className="text-white text-2xl font-bold">{card.value}</p>
-              </div>
-            )}
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
-
-function OverviewCardsSkeleton() {
-  return (
-    <div>
-      <h2 className="text-white text-lg font-semibold mb-4">Overview</h2>
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-        {Array.from({ length: 4 }).map((_, i) => (
-          <div key={i} className="bg-[#0F0F0F] border border-gray-800 rounded-lg p-6 animate-pulse">
-            <div className="h-3 bg-gray-700 rounded w-2/3 mb-3" />
-            <div className="h-6 bg-gray-700 rounded w-1/2" />
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
-
-function LiveOverviewCards() {
-  const { useGetOverviewKpi } = useOverviewServices();
-  const { data, isLoading, isError } = useGetOverviewKpi();
-
-  if (isLoading) return <OverviewCardsSkeleton />;
-
-  if (isError || !data?.data) {
-    return (
-      <div>
-        <h2 className="text-white text-lg font-semibold mb-4">Overview</h2>
-        <p className="text-red-400 text-sm">Failed to load overview data. Please try again later.</p>
-      </div>
-    );
-  }
-
-  return <CardGrid cards={kpiToCards(data.data)} isMock={false} />;
-}
-
-export default function OverviewCards() {
-  if (featureFlags.useMockOverviewCards) {
-    return <CardGrid cards={MOCK_OVERVIEW_CARDS} isMock />;
-  }
-  return <LiveOverviewCards />;
-}
+'use client';
+
+import { featureFlags } from '@/lib/featureFlags';
+import { MOCK_OVERVIEW_CARDS } from '@/lib/mockData';
+import MockDataBadge from '@/components/MockDataBadge';
+import useOverviewServices from '@/services/overviewService';
+
+interface KpiCard {
+  title: string;
+  value: string;
+  isFirst: boolean;
+}
+
+function formatCurrency(n: number): string {
+  return `$${n.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
+}
+
+function kpiToCards(data: { songsPublished: number; totalEarnings: number; listenersCount: number; mostStreamedRegion: string }): KpiCard[] {
+  return [
+    { title: 'Songs Published', value: String(data.songsPublished), isFirst: true },
+    { title: 'Total Earnings', value: formatCurrency(data.totalEarnings), isFirst: false },
+    { title: 'Listeners Count', value: data.listenersCount.toLocaleString('en-US'), isFirst: false },
+    { title: 'Most Streamed Region', value: data.mostStreamedRegion, isFirst: false },
+  ];
+}
+
+function CardGrid({ cards, isMock }: { cards: KpiCard[]; isMock: boolean }) {
+  return (
+    <div>
+      <h2 className="text-white dark:text-gray-50 text-lg font-semibold mb-4 flex items-center">
+        Overview
+        {isMock && <MockDataBadge label="overview" />}
+      </h2>
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+        {cards.map((card, index) => (
+          <div key={index}>
+            {card.isFirst ? (
+              <div className="relative rounded-lg p-[1px] bg-gradient-to-br from-purple-500 via-pink-500 to-gray-900">
+                <div className="bg-[#0F0F0F] dark:bg-[#0B0B0F] rounded-lg">
+                  <div className="p-6">
+                    <p className="text-gray-400 dark:text-gray-300 text-sm font-normal mb-2">{card.title}</p>
+                    <p className="text-white dark:text-gray-50 text-2xl font-bold">{card.value}</p>
+                  </div>
+                </div>
+              </div>
+            ) : (
+              <div className="bg-[#0F0F0F] dark:bg-[#0B0B0F] border border-gray-800 dark:border-gray-700 rounded-lg p-6">
+                <p className="text-gray-400 dark:text-gray-300 text-sm font-normal mb-2">{card.title}</p>
+                <p className="text-white dark:text-gray-50 text-2xl font-bold">{card.value}</p>
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function OverviewCardsSkeleton() {
+  return (
+    <div>
+      <h2 className="text-white dark:text-gray-50 text-lg font-semibold mb-4">Overview</h2>
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+        {Array.from({ length: 4 }).map((_, i) => (
+          <div key={i} className="bg-[#0F0F0F] dark:bg-[#0B0B0F] border border-gray-800 dark:border-gray-700 rounded-lg p-6 animate-pulse">
+            <div className="h-3 bg-gray-700 dark:bg-gray-600 rounded w-2/3 mb-3" />
+            <div className="h-6 bg-gray-700 dark:bg-gray-600 rounded w-1/2" />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function LiveOverviewCards() {
+  const { useGetOverviewKpi } = useOverviewServices();
+  const { data, isLoading, isError } = useGetOverviewKpi();
+
+  if (isLoading) return <OverviewCardsSkeleton />;
+
+  if (isError || !data?.data) {
+    return (
+      <div>
+        <h2 className="text-white dark:text-gray-50 text-lg font-semibold mb-4">Overview</h2>
+        <p className="text-red-400 text-sm">Failed to load overview data. Please try again later.</p>
+      </div>
+    );
+  }
+
+  return <CardGrid cards={kpiToCards(data.data)} isMock={false} />;
+}
+
+export default function OverviewCards() {
+  if (featureFlags.useMockOverviewCards) {
+    return <CardGrid cards={MOCK_OVERVIEW_CARDS} isMock />;
+  }
+  return <LiveOverviewCards />;
+}
diff --git a/app/src/components/Sidebar.tsx b/app/src/components/Sidebar.tsx
index 9c1a73a..bfcd91c 100644
--- a/app/src/components/Sidebar.tsx
+++ b/app/src/components/Sidebar.tsx
@@ -1,141 +1,141 @@
-'use client';
-
-import { Music, Calendar, Tag, Star, Home, X } from 'lucide-react';
-import Link from 'next/link';
-import Image from 'next/image';
-import { usePathname } from 'next/navigation';
-import { useEffect } from 'react';
-
-const navItems = [
-  { name: 'Overview', icon: Home, href: '/dashboard/overview' },
-  { name: 'My Music', icon: Music, href: '/dashboard/my-music' },
-  { name: 'Events', icon: Calendar, href: '/dashboard/events' },
-  { name: 'Merches', icon: Tag, href: '/dashboard/merches' },
-  { name: 'Premium', icon: Star, href: '/dashboard/premium' },
-];
-
-const legalLinks = [
-  { name: 'Privacy Center', href: '/privacy-center' },
-  { name: 'Privacy Policy', href: '/privacy-policy' },
-  { name: 'Cookies', href: '/cookies' },
-];
-
-export default function Sidebar({
-  open,
-  onClose,
-}: {
-  open: boolean;
-  onClose: () => void;
-}) {
-  const pathname = usePathname();
-
-  // Prevent body scroll while mobile drawer is open
-  useEffect(() => {
-    if (open) {
-      document.body.style.overflow = 'hidden';
-    } else {
-      document.body.style.overflow = '';
-    }
-    return () => { document.body.style.overflow = ''; };
-  }, [open]);
-
-  return (
-    <>
-      {/* Mobile Dark Overlay */}
-      {open && (
-        <div
-          onClick={onClose}
-          aria-hidden="true"
-          className="fixed inset-0 bg-black/60 z-40 md:hidden"
-        />
-      )}
-
-      {/* Sidebar */}
-      <div
-        role={open ? 'dialog' : undefined}
-        aria-modal={open ? true : undefined}
-        aria-label="Navigation"
-        className={`
-          fixed top-0 left-0 h-full w-64 bg-[#161616] flex flex-col
-          transform transition-transform duration-300 ease-in-out
-          z-50
-
-          ${open ? 'translate-x-0' : '-translate-x-full'}
-          md:translate-x-0
-        `}
-      >
-        {/* Mobile Header */}
-        <div className="p-6 flex items-center justify-between md:hidden">
-          <Image
-            src="/logo.png"
-            alt="AudioBlocks Logo"
-            width={90}
-            height={50}
-          />
-          <button className='cursor-pointer' onClick={onClose} aria-label="Close navigation menu">
-            <X className="text-white" aria-hidden="true" />
-          </button>
-        </div>
-
-        {/* Desktop Logo */}
-        <div className="hidden md:flex p-9">
-          <Link href="/">
-            <Image
-              src="/logo.png"
-              alt="AudioBlocks Logo"
-              width={99}
-              height={54}
-            />
-          </Link>
-        </div>
-
-        {/* Navigation */}
-        <nav className="flex-1 p-4 space-y-1" aria-label="Main navigation">
-          {navItems.map((item) => {
-            const Icon = item.icon;
-            const isActive =
-              pathname === item.href ||
-              pathname.startsWith(item.href + '/');
-
-            return (
-              <Link
-                key={item.name}
-                href={item.href}
-                onClick={onClose}
-                className={`flex items-center gap-3 px-4 py-3 rounded-lg transition-colors
-                  ${
-                    isActive
-                      ? 'text-pink-500'
-                      : 'text-gray-300 hover:text-white'
-                  }`}
-                aria-current={isActive ? 'page' : undefined}
-              >
-                <Icon size={20} aria-hidden="true" />
-                <span className={isActive ? 'font-medium' : ''}>
-                  {item.name}
-                </span>
-              </Link>
-            );
-          })}
-        </nav>
-
-        {/* Legal */}
-        <div className="p-4">
-          <h3 className="text-gray-400 text-sm font-semibold mb-2">
-            Legal
-          </h3>
-          {legalLinks.map((link) => (
-            <Link
-              key={link.name}
-              href={link.href}
-              onClick={onClose}
-              className="block text-gray-400 text-sm hover:text-white py-1"
-            >
-              {link.name}
-            </Link>
-          ))}
-        </div>
-      </div>
-    </>
-  );
-}
\ No newline at end of file
+'use client';
+
+import { Music, Calendar, Tag, Star, Home, X } from 'lucide-react';
+import Link from 'next/link';
+import Image from 'next/image';
+import { usePathname } from 'next/navigation';
+import { useEffect } from 'react';
+
+const navItems = [
+  { name: 'Overview', icon: Home, href: '/dashboard/overview' },
+  { name: 'My Music', icon: Music, href: '/dashboard/my-music' },
+  { name: 'Events', icon: Calendar, href: '/dashboard/events' },
+  { name: 'Merches', icon: Tag, href: '/dashboard/merches' },
+  { name: 'Premium', icon: Star, href: '/dashboard/premium' },
+];
+
+const legalLinks = [
+  { name: 'Privacy Center', href: '/privacy-center' },
+  { name: 'Privacy Policy', href: '/privacy-policy' },
+  { name: 'Cookies', href: '/cookies' },
+];
+
+export default function Sidebar({
+  open,
+  onClose,
+}: {
+  open: boolean;
+  onClose: () => void;
+}) {
+  const pathname = usePathname();
+
+  // Prevent body scroll while mobile drawer is open
+  useEffect(() => {
+    if (open) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = '';
+    }
+    return () => { document.body.style.overflow = ''; };
+  }, [open]);
+
+  return (
+    <>
+      {/* Mobile Dark Overlay */}
+      {open && (
+        <div
+          onClick={onClose}
+          aria-hidden="true"
+          className="fixed inset-0 bg-black/60 z-40 md:hidden"
+        />
+      )}
+
+      {/* Sidebar */}
+      <div
+        role={open ? 'dialog' : undefined}
+        aria-modal={open ? true : undefined}
+        aria-label="Navigation"
+        className={`
+          fixed top-0 left-0 h-full w-64 bg-[#161616] dark:bg-[#0B0B0F] dark:border-r dark:border-white/10 flex flex-col
+          transform transition-transform duration-300 ease-in-out
+          z-50
+
+          ${open ? 'translate-x-0' : '-translate-x-full'}
+          md:translate-x-0
+        `}
+      >
+        {/* Mobile Header */}
+        <div className="p-6 flex items-center justify-between md:hidden">
+          <Image
+            src="/logo.png"
+            alt="AudioBlocks Logo"
+            width={90}
+            height={50}
+          />
+          <button className='cursor-pointer' onClick={onClose} aria-label="Close navigation menu">
+            <X className="text-white dark:text-gray-100" aria-hidden="true" />
+          </button>
+        </div>
+
+        {/* Desktop Logo */}
+        <div className="hidden md:flex p-9">
+          <Link href="/">
+            <Image
+              src="/logo.png"
+              alt="AudioBlocks Logo"
+              width={99}
+              height={54}
+            />
+          </Link>
+        </div>
+
+        {/* Navigation */}
+        <nav className="flex-1 p-4 space-y-1" aria-label="Main navigation">
+          {navItems.map((item) => {
+            const Icon = item.icon;
+            const isActive =
+              pathname === item.href ||
+              pathname.startsWith(item.href + '/');
+
+            return (
+              <Link
+                key={item.name}
+                href={item.href}
+                onClick={onClose}
+                className={`flex items-center gap-3 px-4 py-3 rounded-lg transition-colors
+                  ${
+                    isActive
+                      ? 'text-pink-500 dark:text-pink-400'
+                      : 'text-gray-300 hover:text-white dark:text-gray-300 dark:hover:text-white'
+                  }`}
+                aria-current={isActive ? 'page' : undefined}
+              >
+                <Icon size={20} aria-hidden="true" />
+                <span className={isActive ? 'font-medium' : ''}>
+                  {item.name}
+                </span>
+              </Link>
+            );
+          })}
+        </nav>
+
+        {/* Legal */}
+        <div className="p-4">
+          <h3 className="text-gray-400 dark:text-gray-300 text-sm font-semibold mb-2">
+            Legal
+          </h3>
+          {legalLinks.map((link) => (
+            <Link
+              key={link.name}
+              href={link.href}
+              onClick={onClose}
+              className="block text-gray-400 dark:text-gray-400 text-sm hover:text-white dark:hover:text-white py-1"
+            >
+              {link.name}
+            </Link>
+          ))}
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/app/src/components/TopHeader.tsx b/app/src/components/TopHeader.tsx
index 72c9249..182a5a4 100644
--- a/app/src/components/TopHeader.tsx
+++ b/app/src/components/TopHeader.tsx
@@ -1,136 +1,136 @@
-'use client';
-
-import { Search, Bell, Menu } from 'lucide-react';
-import { useEffect, useState } from 'react';
-import Link from 'next/link';
-
-export default function TopHeader({
-  onMenuClick,
-  sidebarOpen = false,
-}: {
-  onMenuClick: () => void;
-  sidebarOpen?: boolean;
-}) {
-  const [currentDate, setCurrentDate] = useState('');
-  const [currentTime, setCurrentTime] = useState('');
-
-  useEffect(() => {
-    const updateDateTime = () => {
-      const now = new Date();
-
-      setCurrentDate(
-        now.toLocaleDateString('en-GB', {
-          day: 'numeric',
-          month: 'long',
-          year: 'numeric',
-        })
-      );
-
-      setCurrentTime(
-        now.toLocaleTimeString('en-GB', {
-          hour: '2-digit',
-          minute: '2-digit',
-          hour12: true,
-          timeZoneName: 'short',
-        })
-      );
-    };
-
-    updateDateTime();
-    const interval = setInterval(updateDateTime, 60000);
-    return () => clearInterval(interval);
-  }, []);
-
-  return (
-    <header className="sticky top-0 z-30 bg-[#161616] flex-shrink-0 border-b border-white/10">
-      {/* Main row */}
-      <div className="h-16 sm:h-20 flex items-center justify-between px-4 md:px-8">
-
-        {/* LEFT */}
-        <div className="flex items-center gap-3 sm:gap-4">
-
-          {/* Mobile Menu Button */}
-          <button
-            onClick={onMenuClick}
-            aria-label="Open navigation menu"
-            aria-expanded={sidebarOpen}
-            aria-controls="sidebar-nav"
-            className="md:hidden text-white p-1 -ml-1 rounded focus-visible:ring-2 focus-visible:ring-purple-500"
-          >
-            <Menu size={26} />
-          </button>
-
-          {/* Welcome */}
-          <div>
-            <h2 className="text-white text-base sm:text-lg md:text-xl font-bold leading-tight">
-              Welcome, Pete Lisk
-            </h2>
-            <p className="text-gray-400 text-xs sm:text-sm mt-0.5">
-              {currentDate} | {currentTime}
-            </p>
-          </div>
-        </div>
-
-        {/* CENTER - Search (hidden on mobile, shown md+) */}
-        <div className="hidden md:flex flex-1 max-w-xl mx-8">
-          <div className="relative w-full">
-            <Search
-              className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400"
-              size={20}
-            />
-            <input
-              type="search"
-              placeholder="Search by artists, songs or albums"
-              aria-label="Search"
-              className="w-full bg-[#2A2A2A] rounded-lg pl-12 pr-4 py-3 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-purple-600"
-            />
-          </div>
-        </div>
-
-        {/* RIGHT */}
-        <div className="flex items-center gap-3 sm:gap-4">
-          <button
-            aria-label="Notifications"
-            className="relative text-white hover:text-gray-300 transition-colors"
-          >
-            <Bell size={24} strokeWidth={2} />
-            <span className="absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full border-2 border-[#161616]" />
-          </button>
-
-          <Link
-            href="/dashboard/profile"
-            aria-label="Go to profile"
-            className="w-9 h-9 sm:w-10 sm:h-10 md:w-12 md:h-12 rounded-full overflow-hidden border-2 border-gray-700 hover:border-gray-500 transition-colors"
-          >
-            <div className="w-full h-full bg-gradient-to-br from-gray-600 to-gray-800 flex items-center justify-center">
-              <svg
-                className="w-6 h-6 sm:w-7 sm:h-7 md:w-8 md:h-8 text-gray-300"
-                fill="currentColor"
-                viewBox="0 0 24 24"
-                aria-hidden="true"
-              >
-                <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
-              </svg>
-            </div>
-          </Link>
-        </div>
-      </div>
-
-      {/* Mobile search row (shown on sm only) */}
-      <div className="md:hidden px-4 pb-3">
-        <div className="relative w-full">
-          <Search
-            className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"
-            size={16}
-          />
-          <input
-            type="search"
-            placeholder="Search artists, songs or albums"
-            aria-label="Search"
-            className="w-full bg-[#2A2A2A] rounded-lg pl-9 pr-4 py-2.5 text-sm text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-purple-600"
-          />
-        </div>
-      </div>
-    </header>
-  );
-}
+'use client';
+
+import { Search, Bell, Menu } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import Link from 'next/link';
+
+export default function TopHeader({
+  onMenuClick,
+  sidebarOpen = false,
+}: {
+  onMenuClick: () => void;
+  sidebarOpen?: boolean;
+}) {
+  const [currentDate, setCurrentDate] = useState('');
+  const [currentTime, setCurrentTime] = useState('');
+
+  useEffect(() => {
+    const updateDateTime = () => {
+      const now = new Date();
+
+      setCurrentDate(
+        now.toLocaleDateString('en-GB', {
+          day: 'numeric',
+          month: 'long',
+          year: 'numeric',
+        })
+      );
+
+      setCurrentTime(
+        now.toLocaleTimeString('en-GB', {
+          hour: '2-digit',
+          minute: '2-digit',
+          hour12: true,
+          timeZoneName: 'short',
+        })
+      );
+    };
+
+    updateDateTime();
+    const interval = setInterval(updateDateTime, 60000);
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <header className="sticky top-0 z-30 bg-[#161616] dark:bg-[#0B0B0F] flex-shrink-0 border-b border-white/10 dark:border-white/10">
+      {/* Main row */}
+      <div className="h-16 sm:h-20 flex items-center justify-between px-4 md:px-8">
+
+        {/* LEFT */}
+        <div className="flex items-center gap-3 sm:gap-4">
+
+          {/* Mobile Menu Button */}
+          <button
+            onClick={onMenuClick}
+            aria-label="Open navigation menu"
+            aria-expanded={sidebarOpen}
+            aria-controls="sidebar-nav"
+            className="md:hidden text-white p-1 -ml-1 rounded focus-visible:ring-2 focus-visible:ring-purple-500"
+          >
+            <Menu size={26} />
+          </button>
+
+          {/* Welcome */}
+          <div>
+            <h2 className="text-white dark:text-gray-50 text-base sm:text-lg md:text-xl font-bold leading-tight">
+              Welcome, Pete Lisk
+            </h2>
+            <p className="text-gray-400 dark:text-gray-300 text-xs sm:text-sm mt-0.5">
+              {currentDate} | {currentTime}
+            </p>
+          </div>
+        </div>
+
+        {/* CENTER - Search (hidden on mobile, shown md+) */}
+        <div className="hidden md:flex flex-1 max-w-xl mx-8">
+          <div className="relative w-full">
+            <Search
+              className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 dark:text-gray-300"
+              size={20}
+            />
+            <input
+              type="search"
+              placeholder="Search by artists, songs or albums"
+              aria-label="Search"
+              className="w-full bg-[#2A2A2A] dark:bg-[#111827] rounded-lg pl-12 pr-4 py-3 text-white dark:text-gray-50 placeholder-gray-400 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-purple-600 dark:focus:ring-purple-500"
+            />
+          </div>
+        </div>
+
+        {/* RIGHT */}
+        <div className="flex items-center gap-3 sm:gap-4">
+          <button
+            aria-label="Notifications"
+            className="relative text-white dark:text-gray-50 hover:text-gray-300 dark:hover:text-gray-200 transition-colors"
+          >
+            <Bell size={24} strokeWidth={2} />
+            <span className="absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full border-2 border-[#161616] dark:border-[#0B0B0F]" />
+          </button>
+
+          <Link
+            href="/dashboard/profile"
+            aria-label="Go to profile"
+            className="w-9 h-9 sm:w-10 sm:h-10 md:w-12 md:h-12 rounded-full overflow-hidden border-2 border-gray-700 dark:border-gray-600 hover:border-gray-500 dark:hover:border-gray-400 transition-colors"
+          >
+            <div className="w-full h-full bg-gradient-to-br from-gray-600 to-gray-800 flex items-center justify-center">
+              <svg
+                className="w-6 h-6 sm:w-7 sm:h-7 md:w-8 md:h-8 text-gray-300"
+                fill="currentColor"
+                viewBox="0 0 24 24"
+                aria-hidden="true"
+              >
+                <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
+              </svg>
+            </div>
+          </Link>
+        </div>
+      </div>
+
+      {/* Mobile search row (shown on sm only) */}
+      <div className="md:hidden px-4 pb-3">
+        <div className="relative w-full">
+          <Search
+            className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 dark:text-gray-300"
+            size={16}
+          />
+          <input
+            type="search"
+            placeholder="Search artists, songs or albums"
+            aria-label="Search"
+            className="w-full bg-[#2A2A2A] dark:bg-[#111827] rounded-lg pl-9 pr-4 py-2.5 text-sm text-white dark:text-gray-50 placeholder-gray-400 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-purple-600 dark:focus:ring-purple-500"
+          />
+        </div>
+      </div>
+    </header>
+  );
+}