diff --git a/package-lock.json b/package-lock.json
index 03357af..5564781 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,6 +20,7 @@
         "file-saver": "^2.0.5",
         "jspdf": "^3.0.3",
         "jspdf-autotable": "^5.0.2",
+        "lucide-react": "^0.545.0",
         "react": "^19.1.0",
         "react-chartjs-2": "^5.3.0",
         "react-dom": "^19.1.0",
@@ -3571,6 +3572,15 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/lucide-react": {
+      "version": "0.545.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.545.0.tgz",
+      "integrity": "sha512-7r1/yUuflQDSt4f1bpn5ZAocyIxcTyVyBBChSVtBKn5M+392cPmI5YJMWOJKk/HUWGm5wg83chlAZtCcGbEZtw==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.17",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",
diff --git a/package.json b/package.json
index 302a8f6..a646710 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "file-saver": "^2.0.5",
     "jspdf": "^3.0.3",
     "jspdf-autotable": "^5.0.2",
+    "lucide-react": "^0.545.0",
     "react": "^19.1.0",
     "react-chartjs-2": "^5.3.0",
     "react-dom": "^19.1.0",
diff --git a/src/assets/img/TaskSphereLogo.png b/src/assets/img/TaskSphereLogo.png
new file mode 100644
index 0000000..a0d3be8
Binary files /dev/null and b/src/assets/img/TaskSphereLogo.png differ
diff --git a/src/components/Signin.jsx b/src/components/Signin.jsx
index 5888f72..8a150fd 100644
--- a/src/components/Signin.jsx
+++ b/src/components/Signin.jsx
@@ -1,10 +1,8 @@
-// src/components/Signin.jsx
 import React, { useState, useEffect } from "react";
 import { useNavigate, useLocation, useOutletContext } from "react-router-dom";
 import Swal from "sweetalert2";
-import "../components/Style/Style.css";
-import Logo1 from "../assets/img/Dct-Logo.png";
-import Logo2 from "../assets/img/Costum.png";
+import Logo1 from "../assets/img/TaskSphereLogo.png";
+import Logo2 from "../assets/img/Dct-Logo.png";
 import { supabase } from "../supabaseClient";
 import { UserAuth } from "../Contex/AuthContext";
 import SigninHead from "./heade-foot/SigninHead";
@@ -20,13 +18,21 @@ const Signin = () => {
   const { setIsLoggedIn } = useOutletContext();
   const { login } = UserAuth();
 
-  // =====================================================
-  // 🚫 Route Guard (Trap user inside /Signin)
-  // =====================================================
+  // Hard lock page scroll (belt-and-suspenders)
   useEffect(() => {
-    const storedUser = localStorage.getItem("customUser");
+    const prevDoc = document.documentElement.style.overflow;
+    const prevBody = document.body.style.overflow;
+    document.documentElement.style.overflow = "hidden";
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.documentElement.style.overflow = prevDoc;
+      document.body.style.overflow = prevBody;
+    };
+  }, []);
 
-    // 🔹 If user is logged in, redirect to their dashboard
+  // Route guard
+  useEffect(() => {
+    const storedUser = localStorage.getItem("customUser");
     if (storedUser) {
       const user = JSON.parse(storedUser);
       const roleRoutes = {
@@ -37,27 +43,16 @@ const Signin = () => {
       };
       navigate(roleRoutes[user.user_roles] || "/Signin", { replace: true });
     } else {
-      // 🔹 If user is not logged in, trap them inside /Signin
-      const allowedPaths = ["/", "/Signin", "/signin"];
-      if (!allowedPaths.includes(location.pathname)) {
-        navigate("/Signin", { replace: true });
-      }
-
-      // Disable back/forward navigation
+      const allowed = ["/", "/Signin", "/signin"];
+      if (!allowed.includes(location.pathname)) navigate("/Signin", { replace: true });
       window.history.pushState(null, "", window.location.href);
-      window.onpopstate = () => {
-        window.history.pushState(null, "", window.location.href);
-      };
+      window.onpopstate = () => window.history.pushState(null, "", window.location.href);
     }
   }, [location, navigate]);
 
-  // =====================================================
-  // 🔹 Handle Sign In
-  // =====================================================
   const handleSignIn = async (e) => {
     e.preventDefault();
     setLoading(true);
-
     try {
       const { data: user, error } = await supabase
         .from("user_credentials")
@@ -67,27 +62,15 @@ const Signin = () => {
         .single();
 
       if (error || !user) {
-        Swal.fire({
-          icon: "error",
-          title: "Login failed",
-          text: "Invalid credentials. Please try again.",
-        });
+        Swal.fire({ icon: "error", title: "Login failed", text: "Invalid credentials. Please try again." });
         return;
       }
 
-      // ✅ Save to context + localStorage
       login(user);
       localStorage.setItem("customUser", JSON.stringify(user));
       localStorage.setItem("user_id", user.user_id);
       setIsLoggedIn(true);
 
-      console.log("✅ User signed in:", {
-        user_id: user.user_id,
-        uuid: user.id,
-        role: user.user_roles,
-      });
-
-      // 🔹 Role-based navigation
       const roleRoutes = {
         1: { path: "/Manager", label: "Manager" },
         2: { path: "/Member", label: "Member" },
@@ -106,107 +89,115 @@ const Signin = () => {
         });
         navigate(target.path);
       } else {
-        Swal.fire({
-          icon: "warning",
-          title: "Unknown role",
-          text: "Please contact the administrator.",
-        });
+        Swal.fire({ icon: "warning", title: "Unknown role", text: "Please contact the administrator." });
       }
     } catch (err) {
-      Swal.fire({
-        icon: "error",
-        title: "Server Error",
-        text: "Something went wrong. Please try again later.",
-      });
+      Swal.fire({ icon: "error", title: "Server Error", text: "Something went wrong. Please try again later." });
       console.error("❌ SignIn Error:", err.message);
     } finally {
       setLoading(false);
     }
   };
+
   useEffect(() => {
-  const storedUser = localStorage.getItem("customUser");
-  if (storedUser) {
-    const user = JSON.parse(storedUser);
-    const roleRoutes = {
-      1: "/Manager/Dashboard",
-      2: "/Member/Dashboard",
-      3: "/Adviser/Dashboard",
-      4: "/Instructor/Dashboard",
-    };
-    navigate(roleRoutes[user.user_roles] || "/Signin", { replace: true });
-  }
-}, []);
+    const storedUser = localStorage.getItem("customUser");
+    if (storedUser) {
+      const user = JSON.parse(storedUser);
+      const roleRoutes = {
+        1: "/Manager/Dashboard",
+        2: "/Member/Dashboard",
+        3: "/Adviser/Dashboard",
+        4: "/Instructor/Dashboard",
+      };
+      navigate(roleRoutes[user.user_roles] || "/Signin", { replace: true });
+    }
+  }, [navigate]);
 
-  // =====================================================
-  // 🔹 UI
-  // =====================================================
   return (
-    <div className="w-full min-h-screen bg-gray-100 flex flex-col">
+    // Lock the page height; no scroll
+    <div className="h-screen w-full bg-neutral-100 flex flex-col overflow-hidden">
       <SigninHead />
 
-      <div className="flex flex-col md:flex-row w-full max-w-6xl mx-auto h-full border rounded-lg py-5 px-3 main-bg-color flex-grow">
-        <div className="w-full md:w-1/2 p-6 flex items-center justify-center b-rd bg-white">
-          <form onSubmit={handleSignIn} className="w-full max-w-md text-center">
-            <h2 className="text-2xl font-bold mb-4">Welcome to TaskSphere IT</h2>
-            <img src={Logo1} alt="Logo" className="mx-auto mb-6 w-24 h-24" />
-            <div className="mb-4 text-left">
-              <label htmlFor="userID" className="block font-medium mb-1">
-                ID Number
-              </label>
-              <input
-                onChange={(e) => setUserID(e.target.value)}
-                value={userID}
-                className="w-full p-3 border rounded"
-                type="text"
-                id="userID"
-                placeholder="Enter your ID number"
-                required
-              />
-            </div>
-
-            <div className="mb-2 text-left">
-              <label htmlFor="password" className="block font-medium mb-1">
-                Password
-              </label>
-              <input
-                onChange={(e) => setPassword(e.target.value)}
-                value={password}
-                className="w-full p-3 border rounded"
-                type="password"
-                id="password"
-                placeholder="Enter your password"
-                required
-              />
-              <div className="text-right mt-1">
-                <button
-                  type="button"
-                  onClick={() => navigate("/ForgotPassword")}
-                  className="text-sm text-blue-600 hover:text-blue-800 font-medium"
-                >
-                  Forgot Password?
-                </button>
+      {/* Main fills remaining height; internal overflow hidden */}
+      <main className="flex-1 bg-white flex flex-col overflow-hidden">
+        <div className="flex-1 overflow-hidden">
+          <div className="mx-auto h-full w-full max-w-[1200px] px-6 md:px-8 grid grid-cols-1 md:grid-cols-2 gap-10 items-center">
+            {/* Left: taller login card */}
+            <div className="flex justify-start">
+              <div className="w-full max-w-[440px] rounded-xl border border-neutral-200 bg-white p-8 shadow-sm min-h-[640px]">
+                <h2 className="text-center text-[32px] md:text-[34px] font-extrabold leading-8 text-[#611A11]">
+                  Welcome to
+                  <br />
+                  <span className="text-[32px] md:text-[34px] font-extrabold">TaskSphere IT</span>
+                </h2>
+
+                <img
+                  src={Logo1}
+                  alt="TaskSphere icon"
+                  className="mx-auto mt-5 h-[150px] w-[150px] object-contain"
+                />
+
+                <form onSubmit={handleSignIn} className="mt-8 space-y-6">
+                  <div>
+                    <label htmlFor="userID" className="mb-1 block text-sm font-semibold text-neutral-700">
+                      Username
+                    </label>
+                    <input
+                      id="userID"
+                      type="text"
+                      value={userID}
+                      onChange={(e) => setUserID(e.target.value)}
+                      className="w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-sm text-black outline-none focus:border-[#611A11] focus:ring-1 focus:ring-[#611A11]"
+                      required
+                    />
+                  </div>
+
+                  <div>
+                    <label htmlFor="password" className="mb-1 block text-sm font-semibold text-neutral-700">
+                      Password
+                    </label>
+                    <input
+                      id="password"
+                      type="password"
+                      value={password}
+                      onChange={(e) => setPassword(e.target.value)}
+                      className="w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-sm text-black outline-none focus:border-[#611A11] focus:ring-1 focus:ring-[#611A11]"
+                      required
+                    />
+                    <div className="mt-1 text-right">
+                      <button
+                        type="button"
+                        onClick={() => navigate("/ForgotPassword")}
+                        className="text-[11px] font-medium text-black hover:underline focus:outline-none bg-transparent p-0 m-0"
+                      >
+                        Forgot Password
+                      </button>
+                    </div>
+                  </div>
+
+                  <button
+                    type="submit"
+                    disabled={loading}
+                    className="mt-2 w-full rounded-full bg-[#611A11] py-2 text-sm font-semibold text-white shadow hover:opacity-95 active:opacity-90 disabled:opacity-60"
+                  >
+                    {loading ? "Signing in..." : "Sign In"}
+                  </button>
+                </form>
               </div>
             </div>
 
-            <button
-              type="submit"
-              disabled={loading}
-              className="w-full bg-blue-600 text-white py-2 rounded main-bg-color"
-            >
-              {loading ? "Signing in..." : "Sign In"}
-            </button>
-          </form>
-        </div>
-
-        <div className="w-full md:w-1/2 flex flex-col items-center justify-center main-bg-color text-white rounded-lg p-8 space-y-6">
-          <h1 className="text-3xl font-semibold text-center">
-            Empowering Collaboration,
-            <br />
-            Streamlining IT Capstone Success.
-          </h1>
-          <img src={Logo2} alt="Team" className="w-80 h-auto rounded-lg shadow-md" />
+            {/* Right: seal + headline */}
+            <div className="flex flex-col items-center justify-center text-center">
+              <img src={Logo2} alt="CCS Seal" className="h-32 w-32 md:h-36 md:w-36 object-contain" />
+              <p className="mt-6 text-[30px] md:text-[34px] font-semibold leading-tight text-neutral-800">
+                A Task Management System for
+                <br />
+                Capstone Project Development
+              </p>
+            </div>
+          </div>
         </div>
-      </div>
+      </main>
 
       <SigninFoot />
     </div>
diff --git a/src/components/Style/Style.css b/src/components/Style/Style.css
index 9480bf4..95deeb5 100644
--- a/src/components/Style/Style.css
+++ b/src/components/Style/Style.css
@@ -10,4 +10,5 @@
 }
 .b-rd {
   border-radius: 8px;
-}
\ No newline at end of file
+}
+
diff --git a/src/components/heade-foot/SigninFoot.jsx b/src/components/heade-foot/SigninFoot.jsx
index 5c849b9..6470ae3 100644
--- a/src/components/heade-foot/SigninFoot.jsx
+++ b/src/components/heade-foot/SigninFoot.jsx
@@ -1,42 +1,22 @@
-import React from 'react';
- 
-const Footer = () => {
-    return (
-        <>
-            <div
-                style={{
-                    backgroundColor: '#3B0304',
-                    height: '2px',
-                    margin: '0 0.3in',
-                    borderRadius: '4px',
-                }}
-            />
-            <footer className="bg-white py-3">
-                <div
-                    className="d-flex flex-column flex-md-row align-items-center"
-                    style={{
-                        paddingLeft: '0.3in',
-                        paddingRight: '0.3in',
-                        justifyContent: 'space-between',
-                    }}
-                >
-                    <p
-                        className="mb-0 text-center text-md-start"
-                        style={{ color: '#3B0304', fontSize: '14px' }}
-                    >
-                        ©2025 TaskSphere IT - All Rights Reserved
-                    </p>
-                    <a
-                        href="#"
-                        className="text-decoration-none text-center text-md-end mt-2 mt-md-0"
-                        style={{ color: '#3B0304', fontSize: '14px' }}
-                    >
-                        Terms of Service
-                    </a>
-                </div>
-            </footer>
-        </>
-    );
+import React from "react";
+
+const SigninFoot = () => {
+  return (
+    // Fixed footer so it doesn't add to page height
+    <footer className="fixed bottom-0 left-0 right-0 bg-white">
+      {/* Full-width gradient directly above the red divider */}
+      <div className="h-24 w-full bg-gradient-to-t from-[#611A11]/30 to-transparent" />
+
+      {/* Red divider line (inset like your mock) */}
+      <div className="mx-[0.3in] h-[2px] bg-[#3B0304]" />
+
+      {/* Footer content */}
+      <div className="mx-[0.3in] flex flex-col items-center justify-between gap-2 py-3 text-[14px] text-[#3B0304] md:flex-row">
+        <p>©2025 TaskSphere IT - All Rights Reserved</p>
+        <a href="#" className="hover:underline">Terms of Service</a>
+      </div>
+    </footer>
+  );
 };
- 
-export default Footer;
\ No newline at end of file
+
+export default SigninFoot;
diff --git a/src/components/heade-foot/SigninHead.jsx b/src/components/heade-foot/SigninHead.jsx
index 75f1167..80264de 100644
--- a/src/components/heade-foot/SigninHead.jsx
+++ b/src/components/heade-foot/SigninHead.jsx
@@ -1,27 +1,14 @@
-// SigninHeader.jsx
 import React from "react";
 import Logo from "../../assets/img/Logo.png";
 
-const SigninHeader = () => {
+const SigninHead = () => {
   return (
-    <div
-      className="mb-3 px-4 py-2"
-      style={{
-        backgroundColor: "rgba(240, 240, 240, 0.4)",
-        borderBottomLeftRadius: "14px",
-        borderBottomRightRadius: "14px",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "space-between",
-        height: "60px",
-        position: "relative",
-      }}
-    >
-      <a href="/" style={{ display: "inline-block" }}>
-        <img src={Logo} width="150" height="120" alt="Logo" />
-      </a>
-    </div>
+    <header className="w-full bg-white border-b border-neutral-200 shadow-sm">
+      <div className="h-[100px] flex items-center justify-start px-6">
+        <img src={Logo} alt="TaskSphere IT" className="h-12 md:h-14 w-auto ml-2" />
+      </div>
+    </header>
   );
 };
 
-export default SigninHeader;
+export default SigninHead;