diff --git a/apps/web/components/BlogAppbar.tsx b/apps/web/components/BlogAppbar.tsx
index defaa0d2..12451d35 100644
--- a/apps/web/components/BlogAppbar.tsx
+++ b/apps/web/components/BlogAppbar.tsx
@@ -93,7 +93,7 @@ export const BlogAppbar = ({
           transition={{ duration: 0.3 }}
           className={`${visible ? "translate-y-0" : "-translate-y-full"} px-6`}
         >
-          <Card className="border-primary/10 no-scrollbar max-h-[50vh] w-fit overflow-auto bg-black/10 pt-4 backdrop-blur-lg">
+          <Card className="border-primary/10 no-scrollbar max-h-[50vh] w-fit overflow-auto bg-[#e5e5e5]/95 pt-4 backdrop-blur-lg dark:bg-black/95">
             {track?.problems?.map((problem: { id: string; title: string }, index: number) => {
               const isDisabled = currentTrack === `${track.id}/${problem.id}`;
               return (
@@ -175,7 +175,7 @@ export const BlogAppbar = ({
             {/* menu */}
             <div
               onClick={() => setIsOpen(!isOpen)}
-              className="text-primary border-primary/10 flex cursor-pointer items-center gap-4 rounded-lg border bg-black/10 p-3 backdrop-blur-lg"
+              className="text-primary border-primary/10 flex cursor-pointer items-center gap-4 rounded-lg border bg-[#e5e5e5]/95 dark:bg-black/95 p-3 backdrop-blur-lg"
             >
               {isOpen ? <X className="size-6" /> : <Menu className="size-6" />}
             </div>
@@ -187,7 +187,7 @@ export const BlogAppbar = ({
               className="flex justify-between gap-2"
             >
               <div
-                className={`border-primary/10 flex items-center gap-4 rounded-lg border bg-black/10 p-2 backdrop-blur-lg transition-all duration-500 ease-in-out`}
+                className={`border-primary/10 flex items-center gap-4 rounded-lg border bg-[#e5e5e5]/95 dark:bg-black/95 p-2 backdrop-blur-lg transition-all duration-500 ease-in-out`}
               >
                 <Link href={"/"} className="hidden cursor-pointer items-center gap-4 md:flex">
                   <Image
@@ -217,7 +217,7 @@ export const BlogAppbar = ({
             className="flex gap-2"
           >
             <div
-              className={`border-primary/10 flex items-center gap-2 rounded-lg border bg-black/10 p-2 backdrop-blur-lg transition-all duration-500 ease-in-out ${
+              className={`border-primary/10 flex items-center gap-2 rounded-lg border bg-[#e5e5e5]/95 p-2 backdrop-blur-lg transition-all duration-500 ease-in-out dark:bg-black/95 ${
                 isOpen ? `translate-y-0 opacity-100` : `-translate-y-32 opacity-0`
               }`}
             >
diff --git a/apps/web/components/PageToggle.tsx b/apps/web/components/PageToggle.tsx
index 4167a9f3..a95b93da 100644
--- a/apps/web/components/PageToggle.tsx
+++ b/apps/web/components/PageToggle.tsx
@@ -27,10 +27,9 @@ export function PageToggle({
       <DropdownMenuTrigger asChild>
         <Button
           className={`flex gap-2 font-semibold ${isLegacyMode ? "" : "dark:bg-[#323232]"}`}
-          size={"lg"}
           variant={isLegacyMode ? "outline" : "secondary"}
         >
-          <span className={`hidden ${isAtHeader ? "lg" : "md"}:block`}>Jump To</span>
+          <span className={`hidden ${isAtHeader ? "lg" : "sm"}:block`}>Jump To</span>
           <ArrowUpRight className="size-4" />
         </Button>
       </DropdownMenuTrigger>
diff --git a/apps/web/components/TrackTools.tsx b/apps/web/components/TrackTools.tsx
index 078271bb..025c982c 100644
--- a/apps/web/components/TrackTools.tsx
+++ b/apps/web/components/TrackTools.tsx
@@ -2,7 +2,7 @@ import { Track, Problem } from "@prisma/client";
 import { PageToggle } from "./PageToggle";
 import Link from "next/link";
 import { Button } from "@repo/ui";
-import { ArrowUp, ChevronLeft, ChevronRight } from "lucide-react";
+import { ArrowUp, ChevronLeft, ChevronRight,HomeIcon } from "lucide-react";
 import { motion } from "framer-motion";
 
 const TrackTools = ({
@@ -22,12 +22,13 @@ const TrackTools = ({
       initial={{ y: 20, opacity: 0 }}
       animate={{ y: 0, opacity: 1 }}
       transition={{ duration: 0.5, ease: "easeInOut", type: "spring", damping: 10 }}
-      className="flex w-full items-center justify-between gap-2 p-6"
-    >
-      <div className="border-primary/10 flex gap-2 rounded-lg border bg-black/10 p-1 backdrop-blur-lg">
-        <Link href={"/"} className="hidden lg:block">
-          <Button className="flex gap-2 bg-[#323232] font-semibold dark:bg-slate-50" size={"lg"}>
-            Back to home
+      className="flex w-full items-center justify-center sm:justify-between gap-2 py-6 sm:p-6"
+      >
+      <div className="border-primary/10 flex gap-2 rounded-lg border bg-[#e5e5e5]/95 dark:bg-black/95 p-1 backdrop-blur-lg">
+        <Link href={"/"}>
+          <Button className="flex gap-2 bg-[#323232] font-semibold dark:bg-slate-50">
+            <span className="hidden sm:block">Back to home</span>
+            <HomeIcon className="size-4" />
           </Button>
         </Link>
         <PageToggle allProblems={track.problems} track={track} />
@@ -39,10 +40,9 @@ const TrackTools = ({
           <Button
             className="flex gap-2 bg-[#323232] font-semibold dark:bg-slate-50"
             disabled={problemIndex === 0}
-            size={"lg"}
           >
             <ChevronLeft className="size-4" />
-            <span className="hidden md:block">Prev</span>
+            <span className="hidden sm:block">Prev</span>
           </Button>
         </Link>
         <Link
@@ -57,16 +57,16 @@ const TrackTools = ({
           <Button
             className="flex gap-2 bg-[#323232] font-semibold dark:bg-slate-50"
             disabled={problemIndex + 1 === track.problems.length}
-            size={"lg"}
           >
-            <span className="hidden md:block">Next</span>
+            <span className="hidden sm:block">Next</span>
             <ChevronRight className="size-4" />
           </Button>
         </Link>
-
         {/* To Top */}
-        <Button className="flex gap-2 dark:bg-[#323232]" onClick={scrollToTop} size={"lg"} variant={"secondary"}>
-          <span className="hidden md:block">Go to Top</span>
+        <Button
+          className="flex gap-2 dark:bg-[#323232] sm:w-auto" onClick={scrollToTop} variant={"secondary"}
+        >
+          <span className="hidden sm:block">Go to Top</span>
           <ArrowUp className="size-4" />
         </Button>
       </div>
diff --git a/packages/ui/src/shad/ui/switch.tsx b/packages/ui/src/shad/ui/switch.tsx
index d7be702d..ac42f007 100644
--- a/packages/ui/src/shad/ui/switch.tsx
+++ b/packages/ui/src/shad/ui/switch.tsx
@@ -11,7 +11,7 @@ const Switch = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SwitchPrimitives.Root
     className={cn(
-      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-gray-300 shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
       className
     )}
     {...props}