diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 980f76f..affd5bd 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -91,6 +91,7 @@
       "integrity": "sha512-i1SLeK+DzNnQ3LL/CswPCa/E5u4lh1k6IAEphON8F+cXt0t9euTshDru0q7/IqMa1PMPz5RnHuHscF8/ZJsStg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
         "@babel/code-frame": "^7.26.0",
@@ -1438,6 +1439,7 @@
       "integrity": "sha512-t4yC+vtgnkYjNSKlFx1jkAhH8LgTo2N/7Qvi83kdEaUtMDiwpbLAktKDaAMlRcJ5eSxZkH74eEGt1ky31d7kfQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
@@ -1489,6 +1491,7 @@
       "integrity": "sha512-Wy+/sdEH9kI3w9civgACwabHbKl+qIOu0uFZ9IMKzX3Jpv9og0ZBJrZExGrPpFAY7rWsXuxs5e7CPPP17A4eYA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.21.0",
         "@typescript-eslint/types": "8.21.0",
@@ -1698,6 +1701,7 @@
       "integrity": "sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -1915,6 +1919,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "caniuse-lite": "^1.0.30001688",
         "electron-to-chromium": "^1.5.73",
@@ -2134,7 +2139,8 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/debug": {
       "version": "4.4.0",
@@ -2334,6 +2340,7 @@
       "integrity": "sha512-+waTfRWQlSbpt3KWE+CjrPPYnbq9kfZIYUqapc0uBXyjTp8aYXZDsUH16m39Ryq3NjAVP4tjuF7KaukeqoCoaA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -3573,6 +3580,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.8",
         "picocolors": "^1.1.1",
@@ -3755,6 +3763,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
       "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -3767,6 +3776,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
       "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
         "scheduler": "^0.23.2"
@@ -4336,6 +4346,7 @@
       "integrity": "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -4421,6 +4432,7 @@
       "integrity": "sha512-4VL9mQPKoHy4+FE0NnRE/kbY51TOfaknxAjt3fJbGJxhIpBZiqVzlZDEesWWsuREXHwNdAoOFZ9MkPEVXczHwg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.24.2",
         "postcss": "^8.4.49",
diff --git a/frontend/src/components/Button.tsx b/frontend/src/components/Button.tsx
index bfd5d35..04dd0ef 100644
--- a/frontend/src/components/Button.tsx
+++ b/frontend/src/components/Button.tsx
@@ -12,12 +12,15 @@ interface ButtonProps {
 }
 
 const variantClasses = {
-  primary: "bg-purple-600 text-white text-xl font-semibold hover:bg-purple-800 focus:ring-purple-400",
-  secondary: "bg-purple-200 text-purple-700 hover:bg-purple-300 focus:ring-purple-300",
+  // Workable Green
+  primary: "bg-[#00835C] text-white hover:bg-[#006e4d] focus:ring-[#00835C]",
+  // Clean Slate Gray (Neutral)
+  secondary:
+    "bg-slate-100 text-slate-700 hover:bg-slate-200 focus:ring-slate-300",
 };
 
 const defaultStyles =
-  "px-4 py-2 rounded-xl font-medium flex items-center justify-center gap-2 transition-colors duration-200 shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed border-2 border-black";
+  "px-4 py-2 rounded-md text-sm font-medium flex items-center justify-center gap-2 transition-colors duration-200 shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-1 disabled:opacity-50 disabled:cursor-not-allowed";
 
 export function Button({
   variant,
@@ -26,6 +29,7 @@ export function Button({
   onClick,
   loading = false,
   fullWidth = false,
+  className,
 }: ButtonProps) {
   const fullWidthClass = fullWidth ? "w-full" : "";
 
@@ -36,7 +40,10 @@ export function Button({
       disabled={loading}
       aria-busy={loading}
       className={twMerge(
-        `${variantClasses[variant]} ${defaultStyles} ${fullWidthClass}`
+        variantClasses[variant],
+        defaultStyles,
+        fullWidthClass,
+        className
       )}
     >
       {loading ? (
@@ -55,7 +62,7 @@ export function Button({
 function Spinner() {
   return (
     <svg
-      className="animate-spin h-5 w-5 text-white"
+      className="animate-spin h-5 w-5 text-current"
       xmlns="http://www.w3.org/2000/svg"
       fill="none"
       viewBox="0 0 24 24"
diff --git a/frontend/src/components/Card.tsx b/frontend/src/components/Card.tsx
index 1fa9f2d..4083cb6 100644
--- a/frontend/src/components/Card.tsx
+++ b/frontend/src/components/Card.tsx
@@ -50,20 +50,24 @@ export function Card({
 
   return (
     <div className="w-full h-full">
-      <div className="p-4 bg-gray-50 rounded-lg border border-gray-300 shadow-sm w-full h-full flex flex-col">
-        <div className="flex justify-between items-start">
-          <div className="flex items-center text-md font-medium text-gray-800">
-            <div className="pr-2 text-gray-600">
+      {/* Changed: bg-gray-50 -> bg-white, softer border */}
+      <div className="p-5 bg-white rounded-lg border border-slate-200 shadow-sm hover:shadow-md transition-all duration-200 w-full h-full flex flex-col">
+        <div className="flex justify-between items-start mb-4">
+          {/* Changed: text-gray-800 -> text-[#1C2939] (Dark Navy) */}
+          <div className="flex items-center text-md font-semibold text-[#1C2939] leading-snug">
+            {/* Changed: text-gray-600 -> text-[#00835C] (Workable Green) */}
+            <div className="pr-3 text-[#00835C]">
               {type === "twitter" && <TwitterIcon />}
               {type === "youtube" && <YoutubeIcon />}
               {type === "document" && <DocumentIcon />}
             </div>
             {title}
           </div>
+
           {!readOnly && (
-            <div className="flex items-center gap-2">
+            <div className="flex items-center gap-3">
               <div
-                className="text-gray-600 cursor-pointer"
+                className="text-slate-400 hover:text-[#00835C] cursor-pointer transition-colors"
                 onClick={async () => {
                   try {
                     await navigator.clipboard.writeText(link);
@@ -77,7 +81,7 @@ export function Card({
                 {(type === "twitter" || type === "youtube") && <ShareIcon />}
               </div>
 
-              <div className="text-gray-600 cursor-pointer">
+              <div className="text-slate-400 hover:text-red-500 cursor-pointer transition-colors">
                 <a
                   href="#"
                   onClick={(e) => {
@@ -95,11 +99,11 @@ export function Card({
           )}
         </div>
 
-        <div className="pt-4 flex-1">
+        <div className="flex-1">
           {type === "youtube" && (
             <div>
               <iframe
-                className="w-full aspect-video rounded-md border border-gray-300"
+                className="w-full aspect-video rounded-md border border-slate-100 bg-slate-50"
                 src={embedUrl}
                 title={title}
                 allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
@@ -110,13 +114,13 @@ export function Card({
                 }}
               />
               {iframeError && (
-                <div className="mt-2 p-2 bg-red-50 text-red-700 rounded text-sm">
+                <div className="mt-2 p-3 bg-red-50 text-red-600 rounded text-sm border border-red-100">
                   Failed to load video.
                   <a
                     href={link}
                     target="_blank"
                     rel="noopener noreferrer"
-                    className="underline ml-1"
+                    className="underline ml-1 font-medium"
                   >
                     Open in YouTube
                   </a>
@@ -132,14 +136,15 @@ export function Card({
           )}
 
           {type === "document" && description && (
-            <div className="bg-gray-100 rounded-lg p-3 border border-gray-300">
-              <div className="text-gray-700 text-sm leading-relaxed whitespace-pre-wrap">
+            // Changed: bg-gray-100 -> bg-slate-50, border-slate-100
+            <div className="bg-slate-50 rounded-lg p-4 border border-slate-100 mt-1">
+              <div className="text-slate-600 text-sm leading-relaxed whitespace-pre-wrap">
                 {isExpanded ? description : truncateText(description, 150)}
               </div>
               {description.length > 150 && (
                 <button
                   onClick={() => setIsExpanded(!isExpanded)}
-                  className="mt-2 text-gray-600 hover:text-gray-800 text-xs font-medium"
+                  className="mt-2 text-[#00835C] hover:text-[#006e4d] text-xs font-semibold uppercase tracking-wide"
                 >
                   {isExpanded ? "Show Less" : "Show More"}
                 </button>
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index b19f2a3..a932a28 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -35,7 +35,7 @@ export function Sidebar({
       {/* Mobile Overlay */}
       {isOpen && (
         <div
-          className="fixed inset-0 bg-black bg-opacity-50 z-40 sm:hidden"
+          className="fixed inset-0 bg-slate-900/50 backdrop-blur-sm z-40 sm:hidden"
           onClick={handleClose}
         />
       )}
@@ -45,22 +45,25 @@ export function Sidebar({
         className={`
           h-screen pl-6 pr-4 py-6
           flex flex-col w-64 flex-shrink-0
-          bg-gradient-to-b from-purple-50 via-purple-100 to-purple-200
-          border-r-8 border-purple-300
+          bg-[#1C2939] text-white
+          border-r border-slate-800
           transition-transform duration-300 ease-in-out
           ${isOpen ? "translate-x-0" : "-translate-x-full sm:translate-x-0"}
           fixed top-0 left-0 z-50 sm:static sm:z-auto
+          shadow-xl sm:shadow-none
         `}
       >
         {/* Header with close button for mobile */}
         <div className="flex items-center justify-between mb-8">
-          <div className="flex items-center space-x-2 text-purple-600">
+          <div className="flex items-center space-x-2 text-[#00835C]">
             <Logo />
-            <span className="text-xl font-semibold text-gray-800">Brainly</span>
+            <span className="text-xl font-bold text-white tracking-tight">
+              Brainly
+            </span>
           </div>
           <button
             onClick={handleClose}
-            className="sm:hidden text-gray-600 hover:text-gray-800"
+            className="sm:hidden text-slate-400 hover:text-white transition-colors"
           >
             <CrossIcon />
           </button>
@@ -99,6 +102,7 @@ export function Sidebar({
               text="Logout"
               startIcon={<Logout />}
               fullWidth={true}
+              className="bg-[#00835C] hover:bg-[#006e4d] text-white border-none shadow-sm"
             />
           </div>
         </div>
diff --git a/frontend/src/components/SidebarItem.tsx b/frontend/src/components/SidebarItem.tsx
index a5dbac5..d598892 100644
--- a/frontend/src/components/SidebarItem.tsx
+++ b/frontend/src/components/SidebarItem.tsx
@@ -11,11 +11,11 @@ export function SidebarItem({
 }) {
   return (
     <div
-      className="flex text-gray-700 py-2 cursor-pointer hover:bg-purple-300 rounded max-w-48 pl-4 transition-all duration-150"
+      className="flex items-center text-slate-300 py-3 px-4 cursor-pointer hover:bg-white/10 hover:text-white rounded-md transition-all duration-200"
       onClick={onClick}
     >
-      <div className="pr-2">{icon}</div>
-      <div>{text}</div>
+      <div className="mr-3 text-[#00835C] group-hover:text-white">{icon}</div>
+      <div className="font-medium text-sm">{text}</div>
     </div>
   );
 }
diff --git a/frontend/src/components/input.tsx b/frontend/src/components/input.tsx
index 30ac768..a9cc718 100644
--- a/frontend/src/components/input.tsx
+++ b/frontend/src/components/input.tsx
@@ -1,18 +1,27 @@
 interface InputProps {
-    placeholder: string;
-    reference?: React.Ref<HTMLInputElement>;
+  placeholder: string;
+  reference?: React.Ref<HTMLInputElement>;
 }
 
 export function Input({ placeholder, reference }: InputProps) {
-    return (
-        <div className="w-full">
-            <input
-                ref={reference}
-                placeholder={placeholder}
-                type="text"
-                className="w-full px-4 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-purple-500 m-2"
-            />
-        </div>
-    );
+  return (
+    <div className="w-full">
+      <input
+        ref={reference}
+        placeholder={placeholder}
+        type="text"
+        className="
+                    w-full px-4 py-2
+                    border border-slate-300
+                    rounded-md
+                    text-[#1C2939]
+                    placeholder-slate-400
+                    focus:outline-none
+                    focus:ring-2
+                    focus:ring-[#00835C]/30
+                    focus:border-[#00835C]
+                "
+      />
+    </div>
+  );
 }
-
diff --git a/frontend/src/components/landing/ButtonL.tsx b/frontend/src/components/landing/ButtonL.tsx
index be1d01a..896d730 100644
--- a/frontend/src/components/landing/ButtonL.tsx
+++ b/frontend/src/components/landing/ButtonL.tsx
@@ -8,15 +8,20 @@ export interface ButtonLProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 
 const sizeClasses = {
   sm: "h-8 px-3 text-sm",
-  md: "h-9 px-4 text-sm",
-  lg: "h-11 px-6 text-base",
+  md: "h-10 px-5 text-sm", // Adjusted height slightly for better touch target
+  lg: "h-12 px-8 text-base",
 };
 
 const variantClasses = {
-  default: "text-primary-foreground bg-gradient-to-r from-blue-600 to-purple-600 hover:bg-primary/90",
-  outline: "border-[0.2px] border-black bg-transparent hover:bg-black hover:text-white transition-colors",
+  // Workable Green Solid
+  default: "text-white bg-[#00835C] hover:bg-[#006e4d] shadow-sm",
 
-  secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+  // Clean Gray Outline -> Hover Green
+  outline:
+    "border border-slate-300 bg-white text-slate-700 hover:border-[#00835C] hover:text-[#00835C] hover:bg-slate-50 transition-all",
+
+  // Secondary Gray
+  secondary: "bg-slate-100 text-slate-900 hover:bg-slate-200",
 };
 
 export const ButtonL = forwardRef<HTMLButtonElement, ButtonLProps>(
@@ -25,8 +30,8 @@ export const ButtonL = forwardRef<HTMLButtonElement, ButtonLProps>(
       <button
         ref={ref}
         className={twMerge(
-          "inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium rounded-md transition-colors",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ring-offset-background",
+          "inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium rounded-md transition-colors duration-200",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#00835C] focus-visible:ring-offset-2 ring-offset-white",
           "disabled:opacity-50 disabled:pointer-events-none",
           "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
           sizeClasses[size],
diff --git a/frontend/src/components/landing/Header.tsx b/frontend/src/components/landing/Header.tsx
index d6b96c7..1aee355 100644
--- a/frontend/src/components/landing/Header.tsx
+++ b/frontend/src/components/landing/Header.tsx
@@ -5,27 +5,33 @@ import { Logo } from "../../icons/Logo";
 export default function Header() {
   const navigate = useNavigate();
   return (
-    <header className="border-b bg-white/80 backdrop-blur-sm sticky top-0 z-50">
+    // Changed: bg-white/80 -> solid bg-white, lighter border color
+    <header className="border-b border-gray-100 bg-white sticky top-0 z-50">
       <div className="container mx-auto px-4 h-16 flex items-center justify-between">
         <div className="flex items-center gap-2">
-          <div className="w-8 h-8 text-purple-600 rounded-lg flex items-center justify-center">
+          {/* Changed: Text-purple-600 -> text-[#00835C] (Workable Green) */}
+          <div className="w-8 h-8 text-[#00835C] rounded-lg flex items-center justify-center">
             <Logo />
           </div>
-          <span className="text-xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
+          {/* Changed: Removed Gradient -> Solid Dark Navy text (#1C2939) */}
+          <span className="text-xl font-bold text-[#1C2939] tracking-tight">
             SecondBrains
           </span>
         </div>
-        <nav className="hidden md:flex items-center gap-6">
+        <nav className="hidden md:flex items-center gap-4">
+          {/* Changed: Outline button styled as a clean text link to match Workable's "Log in" */}
           <ButtonL
             variant="outline"
             size="sm"
+            className="border-transparent bg-transparent text-slate-600 hover:text-[#00835C] hover:bg-slate-50 font-medium transition-colors"
             onClick={() => navigate("/signin")}
           >
             Sign In
           </ButtonL>
+          {/* Changed: Removed Gradient -> Solid Workable Green (#00835C) */}
           <ButtonL
             size="sm"
-            className="bg-gradient-to-r from-purple-500 to-indigo-500"
+            className="bg-[#00835C] hover:bg-[#006e4d] text-white font-medium shadow-sm transition-colors"
             onClick={() => navigate("/signup")}
           >
             Get Started
diff --git a/frontend/src/components/landing/Hero.tsx b/frontend/src/components/landing/Hero.tsx
index 176a6e1..4412466 100644
--- a/frontend/src/components/landing/Hero.tsx
+++ b/frontend/src/components/landing/Hero.tsx
@@ -22,33 +22,43 @@ export default function Hero() {
   };
 
   return (
-    <section className="pt-40 min-h-screen px-4 dotted-bg">
+    // Changed: Removed 'dotted-bg', added clean white background and adjusted spacing
+    <section className="pt-32 pb-24 min-h-screen px-4 bg-white">
       <div className="container mx-auto text-center max-w-4xl">
-        <div className="inline-flex items-center gap-2 bg-purple-100 text-purple-700 px-4 py-2 rounded-full text-sm font-medium mb-6">
+        {/* Changed: Purple Badge -> Green Badge (Workable Green) */}
+        <div className="inline-flex items-center gap-2 bg-emerald-50 text-[#00835C] px-4 py-2 rounded-full text-sm font-semibold mb-8 border border-emerald-100">
           <Sparkles className="w-4 h-4" />
           Your Digital Second Brain
         </div>
-        <h1 className="text-5xl md:text-6xl font-bold pb-6 bg-gradient-to-r from-purple-700 to-indigo-600 bg-clip-text text-transparent leading-tight">
+
+        {/* Changed: Gradient Text -> Solid Dark Navy (#1C2939) */}
+        <h1 className="text-5xl md:text-6xl font-bold pb-6 text-[#1C2939] leading-tight tracking-tight">
           Curate, Preview & Organize Your Digital Content
         </h1>
-        <p className="text-xl text-gray-700 mb-8 max-w-2xl mx-auto leading-relaxed">
+
+        {/* Changed: Text Color -> Slate 500 for softer contrast */}
+        <p className="text-xl text-slate-500 mb-10 max-w-2xl mx-auto leading-relaxed">
           Store tweets, YouTube videos, and documents with rich previews.
           Filter, organize, and access your curated content with a clean,
           minimalist interface built for focus.
         </p>
+
         <div className="flex flex-col sm:flex-row gap-4 justify-center">
+          {/* Changed: Primary Button -> Solid Workable Green (#00835C) */}
           <ButtonL
             size="lg"
-            className="bg-gradient-to-r from-purple-400 to-indigo-500 text-lg px-8"
+            className="bg-[#00835C] hover:bg-[#006e4d] text-white text-lg px-8 shadow-sm transition-colors duration-200"
             onClick={() => navigate("/signup")}
           >
             Get Started
             <ArrowRight className="w-5 h-5 ml-2" />
           </ButtonL>
+
+          {/* Changed: Secondary Button -> Gray Outline style */}
           <ButtonL
             variant="outline"
             size="lg"
-            className="text-lg px-8 bg-transparent border border-purple-500 text-purple-700 hover:bg-black"
+            className="text-lg px-8 bg-white border border-slate-300 text-slate-700 hover:bg-slate-50 hover:border-slate-400"
             onClick={handleDemoLogin}
             disabled={isLoading}
           >
diff --git a/frontend/src/icons/TwitterIcon.tsx b/frontend/src/icons/TwitterIcon.tsx
index 2a66912..38f3d5b 100644
--- a/frontend/src/icons/TwitterIcon.tsx
+++ b/frontend/src/icons/TwitterIcon.tsx
@@ -1,7 +1,15 @@
-
 export function TwitterIcon() {
-    return <svg stroke="currentColor" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="25" height="25" viewBox="0 0 50 50" className="text-gray-300">
-    <path d="M 34.21875 5.46875 C 28.238281 5.46875 23.375 10.332031 23.375 16.3125 C 23.375 16.671875 23.464844 17.023438 23.5 17.375 C 16.105469 16.667969 9.566406 13.105469 5.125 7.65625 C 4.917969 7.394531 4.597656 7.253906 4.261719 7.277344 C 3.929688 7.300781 3.632813 7.492188 3.46875 7.78125 C 2.535156 9.386719 2 11.234375 2 13.21875 C 2 15.621094 2.859375 17.820313 4.1875 19.625 C 3.929688 19.511719 3.648438 19.449219 3.40625 19.3125 C 3.097656 19.148438 2.726563 19.15625 2.425781 19.335938 C 2.125 19.515625 1.941406 19.839844 1.9375 20.1875 L 1.9375 20.3125 C 1.9375 23.996094 3.84375 27.195313 6.65625 29.15625 C 6.625 29.152344 6.59375 29.164063 6.5625 29.15625 C 6.21875 29.097656 5.871094 29.21875 5.640625 29.480469 C 5.410156 29.742188 5.335938 30.105469 5.4375 30.4375 C 6.554688 33.910156 9.40625 36.5625 12.9375 37.53125 C 10.125 39.203125 6.863281 40.1875 3.34375 40.1875 C 2.582031 40.1875 1.851563 40.148438 1.125 40.0625 C 0.65625 40 0.207031 40.273438 0.0507813 40.71875 C -0.109375 41.164063 0.0664063 41.660156 0.46875 41.90625 C 4.980469 44.800781 10.335938 46.5 16.09375 46.5 C 25.425781 46.5 32.746094 42.601563 37.65625 37.03125 C 42.566406 31.460938 45.125 24.226563 45.125 17.46875 C 45.125 17.183594 45.101563 16.90625 45.09375 16.625 C 46.925781 15.222656 48.5625 13.578125 49.84375 11.65625 C 50.097656 11.285156 50.070313 10.789063 49.777344 10.445313 C 49.488281 10.101563 49 9.996094 48.59375 10.1875 C 48.078125 10.417969 47.476563 10.441406 46.9375 10.625 C 47.648438 9.675781 48.257813 8.652344 48.625 7.5 C 48.75 7.105469 48.613281 6.671875 48.289063 6.414063 C 47.964844 6.160156 47.511719 6.128906 47.15625 6.34375 C 45.449219 7.355469 43.558594 8.066406 41.5625 8.5 C 39.625 6.6875 37.074219 5.46875 34.21875 5.46875 Z M 34.21875 7.46875 C 36.769531 7.46875 39.074219 8.558594 40.6875 10.28125 C 40.929688 10.53125 41.285156 10.636719 41.625 10.5625 C 42.929688 10.304688 44.167969 9.925781 45.375 9.4375 C 44.679688 10.375 43.820313 11.175781 42.8125 11.78125 C 42.355469 12.003906 42.140625 12.53125 42.308594 13.011719 C 42.472656 13.488281 42.972656 13.765625 43.46875 13.65625 C 44.46875 13.535156 45.359375 13.128906 46.3125 12.875 C 45.457031 13.800781 44.519531 14.636719 43.5 15.375 C 43.222656 15.578125 43.070313 15.90625 43.09375 16.25 C 43.109375 16.65625 43.125 17.058594 43.125 17.46875 C 43.125 23.71875 40.726563 30.503906 36.15625 35.6875 C 31.585938 40.871094 24.875 44.5 16.09375 44.5 C 12.105469 44.5 8.339844 43.617188 4.9375 42.0625 C 9.15625 41.738281 13.046875 40.246094 16.1875 37.78125 C 16.515625 37.519531 16.644531 37.082031 16.511719 36.683594 C 16.378906 36.285156 16.011719 36.011719 15.59375 36 C 12.296875 35.941406 9.535156 34.023438 8.0625 31.3125 C 8.117188 31.3125 8.164063 31.3125 8.21875 31.3125 C 9.207031 31.3125 10.183594 31.1875 11.09375 30.9375 C 11.53125 30.808594 11.832031 30.402344 11.816406 29.945313 C 11.800781 29.488281 11.476563 29.097656 11.03125 29 C 7.472656 28.28125 4.804688 25.382813 4.1875 21.78125 C 5.195313 22.128906 6.226563 22.402344 7.34375 22.4375 C 7.800781 22.464844 8.214844 22.179688 8.355469 21.746094 C 8.496094 21.3125 8.324219 20.835938 7.9375 20.59375 C 5.5625 19.003906 4 16.296875 4 13.21875 C 4 12.078125 4.296875 11.03125 4.6875 10.03125 C 9.6875 15.519531 16.6875 19.164063 24.59375 19.5625 C 24.90625 19.578125 25.210938 19.449219 25.414063 19.210938 C 25.617188 18.96875 25.695313 18.648438 25.625 18.34375 C 25.472656 17.695313 25.375 17.007813 25.375 16.3125 C 25.375 11.414063 29.320313 7.46875 34.21875 7.46875 Z"></path>
+  return (
+    <svg
+      fill="currentColor" // Changed from stroke to fill for this specific path
+      viewBox="0 0 50 50"
+      width="24"
+      height="24"
+      xmlns="http://www.w3.org/2000/svg"
+      // Removed "text-gray-300" so it inherits color from SidebarItem
+      className="w-5 h-5"
+    >
+      <path d="M 34.21875 5.46875 C 28.238281 5.46875 23.375 10.332031 23.375 16.3125 C 23.375 16.671875 23.464844 17.023438 23.5 17.375 C 16.105469 16.667969 9.566406 13.105469 5.125 7.65625 C 4.917969 7.394531 4.597656 7.253906 4.261719 7.277344 C 3.929688 7.300781 3.632813 7.492188 3.46875 7.78125 C 2.535156 9.386719 2 11.234375 2 13.21875 C 2 15.621094 2.859375 17.820313 4.1875 19.625 C 3.929688 19.511719 3.648438 19.449219 3.40625 19.3125 C 3.097656 19.148438 2.726563 19.15625 2.425781 19.335938 C 2.125 19.515625 1.941406 19.839844 1.9375 20.1875 L 1.9375 20.3125 C 1.9375 23.996094 3.84375 27.195313 6.65625 29.15625 C 6.625 29.152344 6.59375 29.164063 6.5625 29.15625 C 6.21875 29.097656 5.871094 29.21875 5.640625 29.480469 C 5.410156 29.742188 5.335938 30.105469 5.4375 30.4375 C 6.554688 33.910156 9.40625 36.5625 12.9375 37.53125 C 10.125 39.203125 6.863281 40.1875 3.34375 40.1875 C 2.582031 40.1875 1.851563 40.148438 1.125 40.0625 C 0.65625 40 0.207031 40.273438 0.0507813 40.71875 C -0.109375 41.164063 0.0664063 41.660156 0.46875 41.90625 C 4.980469 44.800781 10.335938 46.5 16.09375 46.5 C 25.425781 46.5 32.746094 42.601563 37.65625 37.03125 C 42.566406 31.460938 45.125 24.226563 45.125 17.46875 C 45.125 17.183594 45.101563 16.90625 45.09375 16.625 C 46.925781 15.222656 48.5625 13.578125 49.84375 11.65625 C 50.097656 11.285156 50.070313 10.789063 49.777344 10.445313 C 49.488281 10.101563 49 9.996094 48.59375 10.1875 C 48.078125 10.417969 47.476563 10.441406 46.9375 10.625 C 47.648438 9.675781 48.257813 8.652344 48.625 7.5 C 48.75 7.105469 48.613281 6.671875 48.289063 6.414063 C 47.964844 6.160156 47.511719 6.128906 47.15625 6.34375 C 45.449219 7.355469 43.558594 8.066406 41.5625 8.5 C 39.625 6.6875 37.074219 5.46875 34.21875 5.46875 Z" />
     </svg>
+  );
 }
-
diff --git a/frontend/src/pages/Signin.tsx b/frontend/src/pages/Signin.tsx
index cebf71a..fb32cb6 100644
--- a/frontend/src/pages/Signin.tsx
+++ b/frontend/src/pages/Signin.tsx
@@ -26,30 +26,35 @@ export function Signin() {
   };
 
   return (
-    <div className="min-h-screen w-full bg-gradient-to-br from-white via-indigo-100 to-purple-400 flex justify-center items-center px-4">
-      <div className="bg-white rounded-2xl shadow-lg border-black border w-full max-w-sm p-6 sm:p-8 space-y-5">
-        <div className="text-center space-y-2 flex flex-col items-center text-purple-600">
-          <Logo /> {/* Add your preferred height/width */}
-          <h1 className="text-3xl font-semibold text-gray-800">Welcome Back</h1>
-          <p className="text-md text-gray-500 pt-1 text-balance text-center">
-            Sign in to access your saved tweets,
-            <br />
+    <div className="min-h-screen w-full bg-slate-100 flex justify-center items-center px-4">
+      <div className="bg-white rounded-xl border border-slate-200 shadow-sm hover:shadow-md transition-all duration-200 w-full max-w-sm p-6 space-y-6">
+        {/* Header */}
+        <div className="text-center space-y-2 flex flex-col items-center">
+          <Logo />
+          <h1 className="text-2xl font-semibold text-[#1C2939]">
+            Welcome Back
+          </h1>
+          <p className="text-sm text-slate-500 leading-relaxed">
+            Sign in to access your saved tweets, <br />
             documents, and videos
           </p>
         </div>
 
-        <div className="space-y-4 ">
+        {/* Inputs */}
+        <div className="space-y-4">
           <div>
-            <p className="font-medium text-xl pl-2">Username</p>
+            <p className="font-medium text-[#1C2939] pb-1">Username</p>
             <Input reference={usernameRef} placeholder="Username" />
           </div>
+
           <div>
-            <p className="font-medium text-xl pl-2">Password</p>
+            <p className="font-medium text-[#1C2939] pb-1">Password</p>
             <Input reference={passwordRef} placeholder="Password" />
           </div>
         </div>
 
-        <div className="pt-2 space-y-4">
+        {/* Actions */}
+        <div className="space-y-4 pt-2">
           <Button
             onClick={handleSignin}
             loading={false}
@@ -58,11 +63,11 @@ export function Signin() {
             fullWidth={true}
           />
 
-          <p className="text-center text-gray-600 text-sm">
+          <p className="text-center text-slate-600 text-sm">
             New here?{" "}
             <span
               onClick={() => navigate("/signup")}
-              className="text-purple-600 hover:text-purple-800 cursor-pointer font-medium"
+              className="text-[#00835C] hover:text-[#006e4d] cursor-pointer font-medium"
             >
               Create an account
             </span>
diff --git a/frontend/src/pages/Signup.tsx b/frontend/src/pages/Signup.tsx
index df0ed65..2e2af3c 100644
--- a/frontend/src/pages/Signup.tsx
+++ b/frontend/src/pages/Signup.tsx
@@ -17,29 +17,35 @@ export function Signup() {
   };
 
   return (
-    <div className="min-h-screen w-full bg-gradient-to-br from-white via-indigo-100 to-purple-400 flex justify-center items-center px-4">
-      <div className="bg-white rounded-2xl shadow-lg border-black border w-full max-w-sm p-6 sm:p-8 space-y-5">
-        <div className="text-center flex flex-col items-center text-purple-600 space-y-2">
-          <Logo /> {/* Adjust size as preferred */}
-          <h1 className="text-3xl font-semibold text-gray-800">Join Brainly</h1>
-          <p className="text-md text-gray-500 pt-1 text-balance text-center ">
+    <div className="min-h-screen w-full bg-slate-100 flex justify-center items-center px-4">
+      <div className="bg-white rounded-xl border border-slate-200 shadow-sm hover:shadow-md transition-all duration-200 w-full max-w-sm p-6 space-y-6">
+        {/* Header */}
+        <div className="text-center flex flex-col items-center space-y-2">
+          <Logo />
+          <h1 className="text-2xl font-semibold text-[#1C2939]">
+            Join Brainly
+          </h1>
+          <p className="text-sm text-slate-500 leading-relaxed">
             Save tweets, documents,
             <br />
             YouTube videos to free your mind
           </p>
         </div>
 
-        <div className="space-y-4 ">
+        {/* Inputs */}
+        <div className="space-y-4">
           <div>
-            <p className="font-medium text-xl pl-2">Username</p>
+            <p className="font-medium text-[#1C2939] pb-1">Username</p>
             <Input reference={usernameRef} placeholder="Username" />
           </div>
+
           <div>
-            <p className="font-medium text-xl pl-2">Password</p>
+            <p className="font-medium text-[#1C2939] pb-1">Password</p>
             <Input reference={passwordRef} placeholder="Password" />
           </div>
         </div>
 
+        {/* Actions */}
         <div className="pt-2">
           <Button
             onClick={handleSignup}
@@ -48,11 +54,12 @@ export function Signup() {
             text="Sign up"
             fullWidth={true}
           />
-          <p className="text-center text-gray-600 text-sm pt-4">
+
+          <p className="text-center text-slate-600 text-sm pt-4">
             Already have an account?{" "}
             <span
               onClick={() => navigate("/signin")}
-              className="text-purple-600 hover:text-purple-800 cursor-pointer font-medium"
+              className="text-[#00835C] hover:text-[#006e4d] cursor-pointer font-medium"
             >
               Sign in
             </span>
diff --git a/frontend/src/pages/dashboard.tsx b/frontend/src/pages/dashboard.tsx
index dd38c80..10c5f05 100644
--- a/frontend/src/pages/dashboard.tsx
+++ b/frontend/src/pages/dashboard.tsx
@@ -43,7 +43,8 @@ export function Dashboard() {
         onClose={() => setSidebarOpen(false)}
       />
 
-      <div className="flex-1 p-4 bg-gradient-to-br from-white via-indigo-100 to-purple-200 h-full overflow-auto">
+      {/* Changed: Removed purple gradient -> clean slate background */}
+      <div className="flex-1 p-4 bg-slate-50 h-full overflow-auto">
         <CreateContentModal
           open={modalOpen}
           onClose={() => setModalOpen(false)}
@@ -56,21 +57,25 @@ export function Dashboard() {
               console.log("Mobile menu button clicked");
               setSidebarOpen(true);
             }}
-            className="sm:hidden fixed top-4 left-4 z-50 p-3 bg-purple-600 text-white rounded-lg shadow-lg hover:bg-purple-700 transition-colors"
+            // Changed: Purple -> Workable Green
+            className="sm:hidden fixed top-4 left-4 z-50 p-3 bg-[#00835C] text-white rounded-lg shadow-lg hover:bg-[#006e4d] transition-colors"
           >
             <MenuIcon />
           </button>
         )}
 
-        <div className="flex justify-between items-center mb-10 mt-12 sm:mt-0">
-          <h1 className="text-4xl font-semibold text-purple-700 pl-9 px-5">
+        <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-10 mt-12 sm:mt-0 gap-4">
+          {/* Changed: Purple text -> Dark Navy (#1C2939) */}
+          <h1 className="text-4xl font-bold text-[#1C2939] pl-0 sm:pl-0 px-2">
             All Notes{" "}
             {sidebarOpen && (
-              <span className="text-sm text-red-500">(Sidebar Open)</span>
+              <span className="text-sm text-red-500 font-normal ml-2">
+                (Sidebar Open)
+              </span>
             )}
           </h1>
 
-          <div className="flex gap-4">
+          <div className="flex gap-4 w-full sm:w-auto px-2">
             <Button
               onClick={() => setModalOpen(true)}
               variant="primary"
@@ -122,7 +127,7 @@ export function Dashboard() {
           </div>
         </div>
 
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 px-2">
           {filteredContents.length > 0 ? (
             filteredContents.map((item) => (
               <div key={item._id} className="w-full">
@@ -136,7 +141,11 @@ export function Dashboard() {
               </div>
             ))
           ) : (
-            <p className="text-gray-600">No content found.</p>
+            <div className="col-span-full text-center py-20">
+              <p className="text-slate-400 text-lg">
+                No content found. Click "Add content" to get started.
+              </p>
+            </div>
           )}
         </div>
       </div>