diff --git a/README.md b/README.md
index f969113..69fc4c7 100644
--- a/README.md
+++ b/README.md
@@ -1,9 +1,3 @@
-<div align="center" >
-  <br/>
-  <br/>
-  <img src="/src/assets/svg/nextsound.svg" alt="NextSound logo" width="80" height="auto" />
-  <h1>NextSound</h1>
-  <br/>
 
   <p >
 A music discovery app built with React and TypeScript. <br/> Browse tracks, albums, and artists using Spotify's API.
@@ -171,5 +165,10 @@ npm run preview
 
 <div align="center">
   <p>Built with ❤️ for music lovers everywhere</p>
-  <p>Discover your next favorite track with NextSound</p>
+
 </div>
+
+
+hi you are cool - and I love you!
+
+Nice lol 
diff --git a/package-lock.json b/package-lock.json
index 3bbb40b..6c4c8bb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6677,9 +6677,9 @@
       }
     },
     "node_modules/glob": {
-      "version": "10.4.5",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
-      "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.5.0.tgz",
+      "integrity": "sha512-DfXN8DfhJ7NH3Oe7cFmu3NCu1wKbkReJ8TorzSAFbSKrlNaQSKfIzqYqVY8zlbs2NLBbWpRiU52GX2PbaBVNkg==",
       "license": "ISC",
       "dependencies": {
         "foreground-child": "^3.1.0",
@@ -7529,9 +7529,9 @@
       "license": "MIT"
     },
     "node_modules/js-yaml": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
-      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
+      "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -10481,9 +10481,9 @@
       }
     },
     "node_modules/vite": {
-      "version": "7.1.6",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-7.1.6.tgz",
-      "integrity": "sha512-SRYIB8t/isTwNn8vMB3MR6E+EQZM/WG1aKmmIUCfDXfVvKfc20ZpamngWHKzAmmu9ppsgxsg4b2I7c90JZudIQ==",
+      "version": "7.2.4",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-7.2.4.tgz",
+      "integrity": "sha512-NL8jTlbo0Tn4dUEXEsUg8KeyG/Lkmc4Fnzb8JXN/Ykm9G4HNImjtABMJgkQoVjOBN/j2WAwDTRytdqJbZsah7w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
diff --git a/package.json b/package.json
index ac62853..4fe62f2 100644
--- a/package.json
+++ b/package.json
@@ -75,4 +75,4 @@
     "vite": "^7.1.6",
     "vite-plugin-eslint": "^1.8.1"
   }
-}
+}
\ No newline at end of file
diff --git a/src/App.tsx b/src/App.tsx
index e5b4f2d..819985d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -8,7 +8,6 @@ import {
   ScrollToTop,
   Loader,
   ErrorBoundary,
-  DemoModeBadge,
 } from "@/common";
 import { CommandPalette } from "@/components/ui/CommandPalette";
 
@@ -39,7 +38,6 @@ const App = () => {
     <>
       <SideBar />
       <Header onOpenSearch={() => setIsCommandPaletteOpen(true)} />
-      <DemoModeBadge />
       <main className="transition-all duration-300 lg:pb-14 md:pb-4 sm:pb-2 xs:pb-1 pb-0 bg-white dark:bg-deep-dark min-h-screen">
         <ScrollToTop>
           <ErrorBoundary>
diff --git a/src/common/DemoModeBadge/index.tsx b/src/common/DemoModeBadge/index.tsx
deleted file mode 100644
index d64017b..0000000
--- a/src/common/DemoModeBadge/index.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { shouldUseMockData } from "@/data/mockMusicData";
-
-const DemoModeBadge = () => {
-  const isDemoMode = shouldUseMockData();
-
-  if (!isDemoMode) {
-    return null;
-  }
-
-  return (
-    <div className="fixed top-4 right-4 z-50 bg-gradient-to-r from-purple-600 to-blue-600 text-white px-3 py-2 rounded-full text-sm font-medium shadow-lg backdrop-blur-sm bg-opacity-90 flex items-center gap-2 animate-pulse">
-      <div className="w-2 h-2 bg-green-400 rounded-full animate-ping"></div>
-      <span>No API Mode</span>
-    </div>
-  );
-};
-
-export default DemoModeBadge;
\ No newline at end of file
diff --git a/src/common/Header/index.tsx b/src/common/Header/index.tsx
index 658dbb3..ca90ab7 100644
--- a/src/common/Header/index.tsx
+++ b/src/common/Header/index.tsx
@@ -5,7 +5,6 @@ import { BsMoonStarsFill } from "react-icons/bs";
 import { AiOutlineMenu } from "react-icons/ai";
 import { FiSun } from "react-icons/fi";
 import { FiSearch } from "react-icons/fi";
-import throttle from "lodash.throttle";
 import { Button } from "react-aria-components";
 
 import { ThemeMenu, Logo } from "..";
@@ -15,7 +14,6 @@ import { useGlobalContext } from "@/context/globalContext";
 import { useTheme } from "@/context/themeContext";
 import { maxWidth } from "@/styles";
 import { navLinks } from "@/constants";
-import { THROTTLE_DELAY } from "@/utils/config";
 import { cn } from "@/utils/helper";
 
 interface HeaderProps {
@@ -26,36 +24,9 @@ const Header = ({ onOpenSearch }: HeaderProps) => {
   const { openMenu, theme, showThemeOptions } = useTheme();
   const { setShowSidebar } = useGlobalContext();
 
-  const [isActive, setIsActive] = useState<boolean>(false);
   const [isNotFoundPage, setIsNotFoundPage] = useState<boolean>(false);
   const location = useLocation();
 
-  useEffect(() => {
-    const handleBackgroundChange = () => {
-      const body = document.body;
-      if (
-        window.scrollY > 0 ||
-        (body.classList.contains("no-scroll") &&
-          parseFloat(body.style.top) * -1 > 0)
-      ) {
-        setIsActive(true);
-      } else {
-        setIsActive(false);
-      }
-    };
-
-    const throttledHandleBackgroundChange = throttle(
-      handleBackgroundChange,
-      THROTTLE_DELAY
-    );
-
-    window.addEventListener("scroll", throttledHandleBackgroundChange);
-
-    return () => {
-      window.removeEventListener("scroll", throttledHandleBackgroundChange);
-    };
-  }, []);
-
   useEffect(() => {
     if (location.pathname.split("/").length > 3) {
       setIsNotFoundPage(true);
@@ -64,24 +35,20 @@ const Header = ({ onOpenSearch }: HeaderProps) => {
     }
   }, [location.pathname]);
 
+  // Permanently active (fixed black header)
+  const isActive = true;
+
   return (
     <header
       className={cn(
-        `md:py-[16px] py-[14.5px]  fixed top-0 left-0 w-full z-10 transition-all duration-50`,
-        isActive && (theme === "Dark" ? "header-bg--dark" : "header-bg--light")
+        `md:py-[16px] py-[14.5px] fixed top-0 left-0 w-full z-10 transition-all duration-50 header-bg--dark dark`
       )}
     >
       <nav
         className={cn(maxWidth, `flex justify-between flex-row items-center`)}
       >
         <Logo
-          logoColor={cn(
-            isNotFoundPage
-              ? "text-black dark:text-white"
-              : !isNotFoundPage && isActive
-              ? "text-black dark:text-white"
-              : "text-white"
-          )}
+          logoColor="text-black dark:text-white"
         />
 
         <div className=" hidden md:flex flex-row gap-8 items-center text-gray-600 dark:text-gray-300">
@@ -103,18 +70,14 @@ const Header = ({ onOpenSearch }: HeaderProps) => {
             onPress={onOpenSearch}
             className={cn(
               "flex items-center justify-center px-3 py-1.5 rounded-full transition-all duration-200 hover:scale-105 border border-gray-300 dark:border-gray-600",
-              isNotFoundPage || isActive
-                ? "bg-white/80 dark:bg-gray-800/80 text-gray-700 dark:text-gray-300 hover:bg-white dark:hover:bg-gray-800"
-                : "bg-white/10 backdrop-blur-sm text-gray-300 hover:bg-white/20"
+              "bg-white/80 dark:bg-gray-800/80 text-gray-700 dark:text-gray-300 hover:bg-white dark:hover:bg-gray-800"
             )}
           >
             <FiSearch className="w-4 h-4 mr-2" />
             <span className="text-sm font-medium">Search</span>
             <kbd className={cn(
               "ml-2 px-1.5 py-0.5 text-xs font-mono rounded border text-[10px]",
-              isNotFoundPage || isActive
-                ? "bg-gray-100 dark:bg-gray-700 border-gray-200 dark:border-gray-600"
-                : "bg-white/10 border-white/20 text-gray-300"
+              "bg-gray-100 dark:bg-gray-700 border-gray-200 dark:border-gray-600"
             )}>
               ⌘K
             </kbd>
@@ -128,9 +91,7 @@ const Header = ({ onOpenSearch }: HeaderProps) => {
               id="theme"
               className={cn(
                 `flex items-center justify-center mb-[2px] transition-all duration-100 hover:scale-110`,
-                isNotFoundPage || isActive
-                  ? ` text-black dark:text-white dark:hover:text-gray-300 hover:text-gray-600 `
-                  : ` dark:hover:text-sec-color text-gray-300 `
+                ` text-black dark:text-white dark:hover:text-gray-300 hover:text-gray-600 `
               )}
             >
               {theme === "Dark" ? <BsMoonStarsFill /> : <FiSun />}
@@ -146,9 +107,7 @@ const Header = ({ onOpenSearch }: HeaderProps) => {
           name="menu"
           className={cn(
             `inline-block text-[22.75px] md:hidden  transition-all duration-300`,
-            isNotFoundPage || isActive
-              ? `text-black dark:text-white dark:hover:text-gray-300 hover:text-gray-600 `
-              : ` dark:hover:text-sec-color text-sec-color`
+            `text-black dark:text-white dark:hover:text-gray-300 hover:text-gray-600 `
           )}
           onClick={() => setShowSidebar(true)}
         >
diff --git a/src/common/index.ts b/src/common/index.ts
index e1c6b3a..964dc41 100644
--- a/src/common/index.ts
+++ b/src/common/index.ts
@@ -10,7 +10,6 @@ import Error from "./Error";
 import ErrorBoundary, { APIErrorBoundary } from "./ErrorBoundary";
 import ThemeMenu from "./ThemeMenu";
 import Section from "./Section";
-import DemoModeBadge from "./DemoModeBadge";
 
 export {
   Footer,
@@ -30,5 +29,4 @@ export {
   APIErrorBoundary,
   ThemeMenu,
   Section,
-  DemoModeBadge,
 };
diff --git a/src/components/ui/TrackCard.tsx b/src/components/ui/TrackCard.tsx
index a1d89b4..0fedf32 100644
--- a/src/components/ui/TrackCard.tsx
+++ b/src/components/ui/TrackCard.tsx
@@ -1,7 +1,9 @@
 import React, { useState } from 'react';
 import { Card, CardContent } from './card';
 import {
-  FaClock
+  FaClock,
+  FaHeart,
+  FaRegHeart
 } from 'react-icons/fa';
 import { ITrack } from '@/types';
 import { getImageUrl, cn } from '@/utils';
@@ -25,6 +27,7 @@ export const TrackCard: React.FC<TrackCardProps> = ({
 }) => {
   const [isHovered, setIsHovered] = useState(false);
   const [imageLoaded, setImageLoaded] = useState(false);
+  const [isLiked, setIsLiked] = useState(false);
 
   const { poster_path, original_title: title, name, artist, album, duration } = track;
   const displayTitle = title || name || 'Unknown Track';
@@ -81,6 +84,27 @@ export const TrackCard: React.FC<TrackCardProps> = ({
             loading="lazy"
           />
 
+          {/* Like button */}
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              setIsLiked(!isLiked);
+            }}
+            className={cn(
+              "absolute top-2 right-2 z-10 p-2 rounded-full transition-all duration-200",
+              "bg-black/50 backdrop-blur-sm hover:bg-black/70",
+              "text-white hover:scale-110 active:scale-95",
+              "focus:outline-none focus:ring-2 focus:ring-white/50"
+            )}
+            aria-label={isLiked ? "Unlike track" : "Like track"}
+          >
+            {isLiked ? (
+              <FaHeart className="w-4 h-4 text-red-500" />
+            ) : (
+              <FaRegHeart className="w-4 h-4" />
+            )}
+          </button>
+
           {/* Gradient overlay on hover */}
           <div className={cn(
             "absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent transition-opacity duration-300 rounded-lg",