diff --git a/frontend/src/Account.tsx b/frontend/src/Account.tsx
deleted file mode 100644
index d1ecfc0f..00000000
--- a/frontend/src/Account.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import React from "react";
-import { observer } from "mobx-react-lite";
-import { useAuthContext } from "./context/auth/authContext";
-import Profile from "./Profile";
-
-/**
- * Account page that renders the Profile component as a nested child
- * Provides navigation options for the user to logout, or continue into the app.
- */
-const Account = observer(() => {
-  const { user } = useAuthContext();
-
-  return (
-    <div style={styles.pageContainer}>
-      {/* Blurred background layer */}
-      <div style={styles.backgroundLayer} />
-
-      {/* Foreground container */}
-      <div style={styles.foregroundContent}>
-        <div style={styles.accountContainer}>
-          <h1 style={styles.heading}>Welcome, {user?.userId}</h1>
-          <Profile />
-        </div>
-      </div>
-    </div>
-  );
-});
-
-export default Account;
-
-const styles: { [key: string]: React.CSSProperties } = {
-  pageContainer: {
-    position: "relative",
-    width: "100vw",
-    height: "100vh",
-    margin: 0,
-    padding: 0,
-    overflow: "hidden",
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  backgroundLayer: {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    width: "100%",
-    height: "100%",
-    zIndex: 0,
-    background: `
-    linear-gradient(135deg,
-     rgb(164, 183, 251) 0%,
-      rgb(212, 240, 255) 47%, rgb(111, 147, 237) 96%)
-    `,
-    backgroundSize: "cover",
-    backgroundBlendMode: "overlay",
-    filter: "blur(7px)",
-  },
-  foregroundContent: {
-    position: "relative",
-    zIndex: 1,
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-  },
-  accountContainer: {
-    width: "100%",
-    padding: "3rem",
-    backgroundColor: "rgba(255, 255, 255, 0.8)", // partially transparent
-    borderRadius: "8px",
-    boxShadow: "0 2px 10px rgba(0,0,0,0.15)",
-    display: "flex",
-    flexDirection: "column",
-  },
-  topRow: {
-    display: "flex",
-    width: "100%",
-    justifyContent: "flex-end",
-    marginBottom: "1.5rem",
-  },
-  navButton: {
-    marginLeft: "0.5rem",
-    padding: "1.2rem",
-    fontSize: "1.2rem",
-    borderRadius: "4px",
-    cursor: "pointer",
-    backgroundColor: "#0b303b",
-    border: "1px solid #ccc",
-    color: "#fff",
-  },
-  heading: {
-    marginBottom: "2rem",
-    fontSize: "2.2rem",
-    fontWeight: 500,
-    textAlign: "center",
-  },
-};
diff --git a/frontend/src/Login.tsx b/frontend/src/Login.tsx
index 2f8ae703..282bbd9f 100644
--- a/frontend/src/Login.tsx
+++ b/frontend/src/Login.tsx
@@ -28,9 +28,9 @@ const Login = observer(() => {
   };
 
   return (
-    <div className="bg-white grid grid-cols-2" style={styles.pageContainer}>
+    <div className="bg-white grid grid-cols-[60%_40%] w-screen h-screen relative m-0 p-0 overflow-hidden text-start">
       {/*/ Left side: Registration form */}
-      <div className="w-[60%] h-full py-20 px-24 flex flex-col justify-center items-start">
+      <div className="h-full py-20 px-24 flex flex-col justify-center items-start">
         <div className="mb-12">
           <h1 className="text-[32px] pb-4">Welcome back!</h1>
           <h2 className="text-lg">
@@ -52,7 +52,6 @@ const Login = observer(() => {
                   required
                   onChange={(e) => setUsername(e.target.value)}
                   placeholder="Enter your email"
-                  style={styles.inputContainer}
                   className="block min-w-0 rounded-md grow bg-white py-1.5 pr-3 pl-4 text-base placeholder:text-gray-500 border border-medium-gray"
                 />
               </div>
@@ -70,7 +69,6 @@ const Login = observer(() => {
                   required
                   onChange={(e) => setPassword(e.target.value)}
                   placeholder="Enter your password"
-                  style={styles.inputContainer}
                   className="block min-w-0 rounded-md grow bg-white py-1.5 pr-3 pl-4 text-base placeholder:text-gray-500 border border-medium-gray"
                 />
               </div>
@@ -88,7 +86,6 @@ const Login = observer(() => {
           <button
             type="submit"
             className="w-full block mt-8 min-w-0 rounded-md grow bg-dark-orange text-white py-1.5 pr-3 pl-4 text-base placeholder:text-gray-500"
-            style={{ ...styles.button, ...styles.helloButton }}
           >
             Login
           </button>
@@ -111,7 +108,7 @@ const Login = observer(() => {
       </div>
 
       {/*/ Right side: logo */}
-      <div className="w-[40%] h-full flex flex-col justify-center items-center">
+      <div className="h-full flex flex-col justify-center items-center">
         <div className="w-full h-full  bg-medium-orange rounded-l-4xl flex flex-col justify-center items-center">
           <img
             className="w-[60%] h-[60%] object-contain p-10 mb-40"
@@ -125,19 +122,3 @@ const Login = observer(() => {
 });
 
 export default Login;
-
-// Inline style objects
-const styles: { [key: string]: React.CSSProperties } = {
-  pageContainer: {
-    position: "relative",
-    width: "100vw",
-    height: "100vh",
-    margin: 0,
-    padding: 0,
-    overflow: "hidden",
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "start",
-    textAlign: "start",
-  },
-};
diff --git a/frontend/src/Profile.tsx b/frontend/src/Profile.tsx
deleted file mode 100644
index 641db377..00000000
--- a/frontend/src/Profile.tsx
+++ /dev/null
@@ -1,175 +0,0 @@
-import React, { useState } from "react";
-import { observer } from "mobx-react-lite";
-import { useAuthContext } from "./context/auth/authContext";
-import { updateUserProfile } from "./external/bcanSatchel/actions";
-import { toJS } from 'mobx';
-import { Link } from "react-router-dom";
-import { api } from "./api";
-import { UserStatus } from "../../middle-layer/types/UserStatus";
-
-/**
- * Current logged in user's profile
- * Information can be updated for the profile here.
- */
-const Profile = observer(() => {
-  const { user } = useAuthContext();
-  const [email, setEmail] = useState(user?.email || "");
-  const [position, setPosition] = useState(user?.position || "");
-
-  console.log(toJS(user))
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-  
-    try {
-      const response = await api("/auth/update-profile", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-          // TODO: Bearer token guarded by Auth
-          // Authorization: `Bearer ${user?.accessToken ?? ""}`,
-        },
-        body: JSON.stringify({
-          username: user?.userId,
-          email,
-          position: position,
-        }),
-      });
-  
-      if (!response.ok) {
-        const errorData = await response.json();
-        alert(errorData.message || "Failed to update profile.");
-        return;
-      }
-  
-      // Optionally parse the updated item returned
-      // const updatedData = await response.json();
-  
-      // Update local store so changes reflect immediately in the UI
-      // Conditional update semantics based on valid non-null 'User' object available
-      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-      user && updateUserProfile({
-        ...user,
-        email,
-        position: position as UserStatus,
-      });
-  
-      alert("Profile updated successfully.");
-    } catch (error) {
-      console.error("Error updating profile:", error);
-      alert("An error occurred while updating your profile.");
-    }
-  };  
-
-  return (
-    <form onSubmit={handleSubmit} style={styles.formContainer}>
-      <h2 style={styles.heading}>Profile</h2>
-
-      {/* Username (read-only) */}
-      <div style={styles.field}>
-        <label style={styles.label}>Username:</label>
-        <span style={styles.readonlyValue}>{user?.userId}</span>
-      </div>
-
-      {/* Email */}
-      <div style={styles.field}>
-        <label style={styles.label}>Email:</label>
-        <input
-          type="email"
-          style={styles.input}
-          value={email}
-          onChange={(e) => setEmail(e.target.value)}
-          required
-        />
-      </div>
-
-      {/* Biography */}
-      <div style={styles.field}>
-        <label style={styles.label}>Position/Role:</label>
-        <textarea
-          style={styles.textarea}
-          value={position}
-          onChange={(e) => setPosition(e.target.value)}
-        />
-      </div>
-      {/* Account Page Action Buttons */}
-      <div style={styles.actionButtons}>
-      <button type="submit" style={styles.button}>
-        Save Changes
-      </button>
-      <Link to="/main" style={{ textDecoration: "none" }}>
-        <button style={styles.button}>Home</button>
-      </Link>
-      </div>
-    </form>
-  );
-});
-
-export default Profile;
-
-// Style objects
-const styles: { [key: string]: React.CSSProperties } = {
-  formContainer: {
-    width: "500px",
-    padding: "2rem",
-    backgroundColor: "#ffffff",
-    borderRadius: "8px",
-    boxShadow: "0 2px 10px rgba(0,0,0,0.15)",
-    display: "flex",
-    flexDirection: "column",
-    margin: "0 auto",
-  },
-  heading: {
-    marginBottom: "1.5rem",
-    fontSize: "2rem",
-    fontWeight: 500,
-    textAlign: "center",
-  },
-  field: {
-    marginBottom: "1.5rem",
-  },
-  label: {
-    display: "block",
-    marginBottom: "0.5rem",
-    fontSize: "1.2rem",
-    fontWeight: 500,
-  },
-  readonlyValue: {
-    marginLeft: "0.5rem",
-    fontSize: "1.2rem",
-  },
-  input: {
-    width: "100%",
-    padding: "1rem",
-    fontSize: "1.2rem",
-    border: "1px solid #ccc",
-    borderRadius: "4px",
-    boxSizing: "border-box",
-    color: "lightgray",
-  },
-  textarea: {
-    width: "100%",
-    padding: "1rem",
-    fontSize: "1.2rem",
-    border: "1px solid #ccc",
-    borderRadius: "4px",
-    boxSizing: "border-box",
-    minHeight: "120px",
-    color: "lightgray",
-  },
-  button: {
-    padding: "1rem",
-    fontSize: "1.1rem",
-    backgroundColor: "#0b303b",
-    color: "#fff",
-    border: "none",
-    borderRadius: "4px",
-    cursor: "pointer",
-    alignSelf: "flex-start",
-  },
-  actionButtons: {
-    display: "flex",
-    justifyContent: "space-between",
-    alignItems: "center"
-  }
-};
diff --git a/frontend/src/Register.tsx b/frontend/src/Register.tsx
index 771c7a9a..aa808bc2 100644
--- a/frontend/src/Register.tsx
+++ b/frontend/src/Register.tsx
@@ -89,8 +89,8 @@ const Register = observer(() => {
   };
 
   return (
-    <div className="bg-white grid grid-cols-2" style={styles.pageContainer}>
-      <div className="sm:w-3/4 lg:w-[60%] h-full py-20 px-20 flex flex-col justify-center items-start">
+    <div className="bg-white grid grid-cols-[60%_40%] w-screen h-screen relative m-0 p-0 overflow-hidden text-start">
+      <div className="h-full py-20 px-20 flex flex-col justify-center items-start">
         {/*/ Left side: Registration form */}
         <div className="mb-4">
           <h1 className="text-[32px]">Get Started Now</h1>
@@ -111,7 +111,6 @@ const Register = observer(() => {
                   required
                   onChange={(e) => setUsername(e.target.value)}
                   placeholder="Enter your username"
-                  style={styles.inputContainer}
                   className="block min-w-0 rounded-md grow bg-white py-1.5 pr-3 pl-4 text-base placeholder:text-gray-500 border border-medium-gray"
                 />
               </div>
@@ -129,12 +128,11 @@ const Register = observer(() => {
                   required
                   onChange={(e) => setEmail(e.target.value)}
                   placeholder="Enter your email"
-                  style={
+                  className={`block min-w-0 rounded-md grow bg-white py-1.5 pr-3 pl-4 text-base placeholder:text-gray-500 border ${
                     failure.item === "email"
-                      ? styles.errorItem
-                      : styles.inputContainer
-                  }
-                  className="block min-w-0 rounded-md grow bg-white py-1.5 pr-3 pl-4 text-base placeholder:text-gray-500 border border-medium-gray"
+                      ? "border-[#D33221]"
+                      : "border-medium-gray"
+                  }`}
                 />
               </div>
             </div>
@@ -151,12 +149,11 @@ const Register = observer(() => {
                   required
                   onChange={(e) => handlePassword(e.target.value)}
                   placeholder="Enter your password"
-                  style={
+                  className={`block min-w-0 rounded-md grow bg-white py-1.5 pr-3 pl-4 text-base placeholder:text-gray-500 border ${
                     failure.item === "password"
-                      ? styles.errorItem
-                      : styles.inputContainer
-                  }
-                  className="block min-w-0 rounded-md grow bg-white py-1.5 pr-3 pl-4 text-base placeholder:text-gray-500 border border-medium-gray"
+                      ? "border-[#D33221]"
+                      : "border-medium-gray"
+                  }`}
                 />
               </div>
             </div>
@@ -173,20 +170,22 @@ const Register = observer(() => {
                   onChange={(e) => handlePasswordMatch(e.target.value)}
                   required
                   placeholder="Re-enter your password"
-                  style={
+                  className={`block min-w-0 rounded-md grow bg-white py-1.5 pr-3 pl-4 text-base placeholder:text-gray-500 border ${
                     failure.item === "password"
-                      ? styles.errorItem
-                      : styles.inputContainer
-                  }
-                  className="block min-w-0 rounded-md grow bg-white py-1.5 pr-3 pl-4 text-base placeholder:text-gray-500 border border-medium-gray"
+                      ? "border-[#D33221]"
+                      : "border-medium-gray"
+                  }`}
                 />
               </div>
             </div>
           </div>
           <div className="items-center">
             <div
-              style={failure.state ? styles.error : styles.warning}
-              className={`min-h-28 mt-4 text-sm rounded-md flex items-center justify-center p-4 whitespace-pre-line text-left`}
+              className={`min-h-28 mt-4 text-sm rounded-md flex items-center justify-center p-4 whitespace-pre-line text-left ${
+                failure.state
+                  ? "text-[#D33221] bg-[#FFA399]"
+                  : "text-[#616161] bg-[#E7E7E7]"
+              }`}
             >
               {failure.state ? failure.message : defaultPasswordMessage}
             </div>
@@ -195,7 +194,6 @@ const Register = observer(() => {
           <button
             type="submit"
             className="w-full block mt-8 min-w-0 rounded-md grow bg-dark-orange text-white py-1.5 pr-3 pl-4 text-base placeholder:text-gray-500"
-            style={{ ...styles.button, ...styles.helloButton }}
           >
             Register
           </button>
@@ -217,7 +215,7 @@ const Register = observer(() => {
         </form>
       </div>
       {/*/ Right side: logo */}
-      <div className="sm:w-1/4 lg:w-[40%] h-full flex flex-col justify-center items-center">
+      <div className="h-full flex flex-col justify-center items-center">
         <div className="w-full h-full  bg-medium-orange rounded-l-4xl flex flex-col justify-center items-center">
           <img
             className="w-[60%] h-[60%] object-contain p-10 mb-40"
@@ -231,29 +229,3 @@ const Register = observer(() => {
 });
 
 export default Register;
-
-// Inline style objects
-const styles: { [key: string]: React.CSSProperties } = {
-  pageContainer: {
-    position: "relative",
-    width: "100%",
-    height: "100vh",
-    margin: 0,
-    padding: 0,
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "start",
-    textAlign: "start",
-  },
-  warning: {
-    color: "#616161",
-    backgroundColor: "#E7E7E7",
-  },
-  error: {
-    color: "#D33221",
-    backgroundColor: "#FFA399",
-  },
-  errorItem: {
-    borderColor: "#D33221",
-  },
-};
diff --git a/frontend/src/RegisterLanding.tsx b/frontend/src/RegisterLanding.tsx
index 3562e756..bd2a1062 100644
--- a/frontend/src/RegisterLanding.tsx
+++ b/frontend/src/RegisterLanding.tsx
@@ -9,8 +9,8 @@ import { useAuthContext } from "./context/auth/authContext";
 const RegisterLanding = () => {
   const {logout} = useAuthContext();
   return (
-    <div className="bg-white grid grid-cols-2" style={styles.pageContainer}>
-      <div className="w-[35%] h-full flex flex-col justify-center items-center pb-32">
+    <div className="bg-white grid grid-cols-[35%_65%] relative w-screen h-screen m-0 p-0 overflow-hidden text-start">
+      <div className="h-full flex flex-col justify-center items-center pb-32">
         <div className="w-full h-[70%] bg-medium-orange rounded-r-4xl flex flex-col justify-center items-center">
           <img
             className="w-[90%] h-[90%] object-contain p-20 ml-10"
@@ -19,7 +19,7 @@ const RegisterLanding = () => {
           />
         </div>
       </div>
-      <div className="w-[65%] h-full py-20 px-24 flex flex-col justify-center items-start mb-32">
+      <div className="h-full py-20 px-24 flex flex-col justify-center items-start mb-32">
         <div className="mb-24">
           <h1 className="text-[40px] pb-8 font-bold">
             Account registration successful!
@@ -31,11 +31,7 @@ const RegisterLanding = () => {
           </h2>
           <Link to="/login">
                     <button
-                      style={{
-                        backgroundColor: ButtonColorOption.ORANGE ,
-                        color: 'black',
-                        borderStyle: 'solid', borderColor: 'black', borderWidth: '1px'
-                      }}
+                      style={styles.loginButton}
                       className="py-2 px-4 rounded"
                       onClick={() => {
                         logout()
@@ -66,4 +62,11 @@ const styles: { [key: string]: React.CSSProperties } = {
     alignItems: "start",
     textAlign: "start",
   },
+  loginButton :{
+    backgroundColor: ButtonColorOption.ORANGE,
+    color: 'black',
+    borderStyle: 'solid',
+    borderColor: 'black',
+    borderWidth: '1px'
+  }
 };
diff --git a/frontend/tests/GrantCalculations.test.tsx b/frontend/tests/GrantCalculations.test.tsx
index 37435189..21a1e3bd 100644
--- a/frontend/tests/GrantCalculations.test.tsx
+++ b/frontend/tests/GrantCalculations.test.tsx
@@ -97,16 +97,16 @@ describe("Grant Calculations", () => {
   it("should aggregate money by year without grouping", () => {
     const result = aggregateMoneyGrantsByYear(mockGrants);
     assert.deepEqual(result, [
-      { year: 2024, All: 1000 },
-      { year: 2025, All: 6000 },
+      { year: 2024, data: { All: 1000 } },
+      { year: 2025, data: { All: 6000 } },
     ]);
   });
 
   it("should aggregate money by year by status", () => {
     const result = aggregateMoneyGrantsByYear(mockGrants, "status");
     assert.deepEqual(result, [
-      { year: 2024, Potential: 1000 },
-      { year: 2025, Active: 2000, Potential: 4000 },
+      { year: 2024, data: { Potential: 1000 } },
+      { year: 2025, data: { Active: 2000, Potential: 4000 } },
     ]);
   });
 
@@ -118,16 +118,16 @@ describe("Grant Calculations", () => {
   it("should count by year without grouping", () => {
     const result = aggregateCountGrantsByYear(mockGrants);
     assert.deepEqual(result, [
-      { year: 2024, All: 1 },
-      { year: 2025, All: 3 },
+      { year: 2024, data: { All: 1 } },
+      { year: 2025, data: { All: 3 } },
     ]);
   });
 
   it("should count by year by status", () => {
     const result = aggregateCountGrantsByYear(mockGrants, "status");
     assert.deepEqual(result, [
-      { year: 2024, Potential: 1 },
-      { year: 2025, Active: 1, Potential: 2 },
+      { year: 2024, data: { Potential: 1 } },
+      { year: 2025, data: { Active: 1, Potential: 2 } },
     ]);
   });