diff --git a/cypress/e2e/admin/admins/Select.cy.js b/cypress/e2e/admin/admins/Select.cy.js
index 67bd814b..3b975d82 100644
--- a/cypress/e2e/admin/admins/Select.cy.js
+++ b/cypress/e2e/admin/admins/Select.cy.js
@@ -13,7 +13,7 @@ describe("Admin Select", () => {
   });
 
   it("Select All", () => {
-    cy.get('[data-cy="select-all"]').click();
+    cy.get('[data-cy="toolbar"]').find('[data-cy="checkbox"]').click();
     admins.forEach((admin) => {
       cy.get(`[data-cy="${admin.uid}"]`).should("have.class", "bg-green-100");
     });
diff --git a/cypress/e2e/admin/committees/Select.cy.js b/cypress/e2e/admin/committees/Select.cy.js
index 067d6532..0211f608 100644
--- a/cypress/e2e/admin/committees/Select.cy.js
+++ b/cypress/e2e/admin/committees/Select.cy.js
@@ -13,7 +13,7 @@ describe("committee Select", () => {
   });
 
   it("Select All", () => {
-    cy.get('[data-cy="select-all"]').click();
+    cy.get('[data-cy="toolbar"]').find('[data-cy="checkbox"]').click();
     committees.forEach((committee) => {
       cy.get(`[data-cy="${committee.uid}"]`).should(
         "have.class",
diff --git a/cypress/e2e/admin/judges/Select.cy.js b/cypress/e2e/admin/judges/Select.cy.js
index 0e68875d..2ba5dffa 100644
--- a/cypress/e2e/admin/judges/Select.cy.js
+++ b/cypress/e2e/admin/judges/Select.cy.js
@@ -13,7 +13,7 @@ describe("Mentor Select", () => {
   });
 
   it("Select All", () => {
-    cy.get('[data-cy="select-all"]').click();
+    cy.get('[data-cy="toolbar"]').find('[data-cy="checkbox"]').click();
     judges.forEach((judge) => {
       cy.get(`[data-cy="${judge.uid}"]`).should("have.class", "bg-green-100");
     });
diff --git a/cypress/e2e/admin/mentors/Select.cy.js b/cypress/e2e/admin/mentors/Select.cy.js
index 64e1b54e..93fd01f8 100644
--- a/cypress/e2e/admin/mentors/Select.cy.js
+++ b/cypress/e2e/admin/mentors/Select.cy.js
@@ -13,7 +13,7 @@ describe("Mentor Select", () => {
   });
 
   it("Select All", () => {
-    cy.get('[data-cy="select-all"]').click();
+    cy.get('[data-cy="toolbar"]').find('[data-cy="checkbox"]').click();
     mentors.forEach((mentor) => {
       cy.get(`[data-cy="${mentor.uid}"]`).should("have.class", "bg-green-100");
     });
diff --git a/cypress/e2e/admin/participants/Select.cy.js b/cypress/e2e/admin/participants/Select.cy.js
index c85939de..65276334 100644
--- a/cypress/e2e/admin/participants/Select.cy.js
+++ b/cypress/e2e/admin/participants/Select.cy.js
@@ -13,7 +13,7 @@ describe("Participant Select", () => {
   });
 
   it("Select All", () => {
-    cy.get('[data-cy="select-all"]').click();
+    cy.get('[data-cy="toolbar"]').find('[data-cy="checkbox"]').click();
     participants.forEach((participant) => {
       cy.get(`[data-cy="${participant.uid}"]`).should(
         "have.class",
diff --git a/cypress/e2e/admin/sponsors/Select.cy.js b/cypress/e2e/admin/sponsors/Select.cy.js
index 8a54d7a2..c43ea68d 100644
--- a/cypress/e2e/admin/sponsors/Select.cy.js
+++ b/cypress/e2e/admin/sponsors/Select.cy.js
@@ -13,7 +13,7 @@ describe("Sponsors Select", () => {
   });
 
   it("Select All", () => {
-    cy.get('[data-cy="select-all"]').click();
+    cy.get('[data-cy="toolbar"]').find('[data-cy="checkbox"]').click();
     sponsors.forEach((sponsor) => {
       cy.get(`[data-cy="${sponsor.uid}"]`).should("have.class", "bg-green-100");
     });
diff --git a/cypress/e2e/admin/teams/Select.cy.js b/cypress/e2e/admin/teams/Select.cy.js
index 1a13e6d6..b5ef4108 100644
--- a/cypress/e2e/admin/teams/Select.cy.js
+++ b/cypress/e2e/admin/teams/Select.cy.js
@@ -13,7 +13,7 @@ describe("Teams Select", () => {
   });
 
   it("Select All", () => {
-    cy.get('[data-cy="select-all"]').click();
+    cy.get('[data-cy="toolbar"]').find('[data-cy="checkbox"]').click();
     teams.forEach((team) => {
       cy.get(`[data-cy="${team.uid}"]`).should("have.class", "bg-green-100");
     });
diff --git a/cypress/e2e/admin/volunteers/Select.cy.js b/cypress/e2e/admin/volunteers/Select.cy.js
index 908b847e..d5a2a9f0 100644
--- a/cypress/e2e/admin/volunteers/Select.cy.js
+++ b/cypress/e2e/admin/volunteers/Select.cy.js
@@ -13,7 +13,7 @@ describe("Volunteers Select", () => {
   });
 
   it("Select All", () => {
-    cy.get('[data-cy="select-all"]').click();
+    cy.get('[data-cy="toolbar"]').find('[data-cy="checkbox"]').click();
     volunteers.forEach((volunteer) => {
       cy.get(`[data-cy="${volunteer.uid}"]`).should(
         "have.class",
diff --git a/package-lock.json b/package-lock.json
index a5dcdcdb..115d6d61 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8038,9 +8038,9 @@
       }
     },
     "node_modules/start-server-and-test": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/start-server-and-test/-/start-server-and-test-2.0.2.tgz",
-      "integrity": "sha512-4sGS2QmETUwqeBUqtTLP7OqXp3PdDnevaWlPlrFQgn8+7uCgVg4Do7/H/ZhAAVyvnL3DqKyANhnLgcgxrjhrMA==",
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/start-server-and-test/-/start-server-and-test-2.0.3.tgz",
+      "integrity": "sha512-QsVObjfjFZKJE6CS6bSKNwWZCKBG6975/jKRPPGFfFh+yOQglSeGXiNWjzgQNXdphcBI9nXbyso9tPfX4YAUhg==",
       "dev": true,
       "dependencies": {
         "arg": "^5.0.2",
@@ -8050,7 +8050,7 @@
         "execa": "5.1.1",
         "lazy-ass": "1.6.0",
         "ps-tree": "1.2.0",
-        "wait-on": "7.1.0"
+        "wait-on": "7.2.0"
       },
       "bin": {
         "server-test": "src/bin/start.js",
@@ -8889,12 +8889,12 @@
       }
     },
     "node_modules/wait-on": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/wait-on/-/wait-on-7.1.0.tgz",
-      "integrity": "sha512-U7TF/OYYzAg+OoiT/B8opvN48UHt0QYMi4aD3PjRFpybQ+o6czQF8Ig3SKCCMJdxpBrCalIJ4O00FBof27Fu9Q==",
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/wait-on/-/wait-on-7.2.0.tgz",
+      "integrity": "sha512-wCQcHkRazgjG5XoAq9jbTMLpNIjoSlZslrJ2+N9MxDsGEv1HnFoVjOCexL0ESva7Y9cu350j+DWADdk54s4AFQ==",
       "dev": true,
       "dependencies": {
-        "axios": "^0.27.2",
+        "axios": "^1.6.1",
         "joi": "^17.11.0",
         "lodash": "^4.17.21",
         "minimist": "^1.2.8",
@@ -8907,16 +8907,6 @@
         "node": ">=12.0.0"
       }
     },
-    "node_modules/wait-on/node_modules/axios": {
-      "version": "0.27.2",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
-      "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
-      "dev": true,
-      "dependencies": {
-        "follow-redirects": "^1.14.9",
-        "form-data": "^4.0.0"
-      }
-    },
     "node_modules/warning": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
diff --git a/src/app/api/team/route.js b/src/app/api/team/route.js
index d0705c7f..06970718 100644
--- a/src/app/api/team/route.js
+++ b/src/app/api/team/route.js
@@ -22,7 +22,7 @@ export async function POST() {
         devpost: "",
         figma: "",
       },
-      members: [{ email: user.email, name: user.name, uid: user.id }],
+      members: [{ discord: user.discord, name: user.name, uid: user.id }],
       status: 0,
     };
     const docRef = await addDoc(collection(db, "teams"), team);
diff --git a/src/app/api/teams/route.js b/src/app/api/teams/route.js
index 1abd2ced..a87ef48d 100644
--- a/src/app/api/teams/route.js
+++ b/src/app/api/teams/route.js
@@ -29,7 +29,7 @@ export async function GET() {
       const { links, status, members } = doc.data();
 
       const formattedNames = members.map((member) => member.name);
-      const formattedEmails = members.map((member) => member.email);
+      const formattedDiscords = members.map((member) => member.discord);
       const formattedUids = members.map((member) => member.uid);
       const formattedLinks = Object.entries(links)
         .filter(([key, value]) => value !== "")
@@ -40,7 +40,7 @@ export async function GET() {
       output.push({
         links: formattedLinks,
         members: formattedNames,
-        emails: formattedEmails,
+        discords: formattedDiscords,
         uids: formattedUids,
         status,
         uid: doc.id,
diff --git a/src/app/form/[type]/page.js b/src/app/form/[type]/page.js
new file mode 100644
index 00000000..034e25b2
--- /dev/null
+++ b/src/app/form/[type]/page.js
@@ -0,0 +1,49 @@
+import Admin from "@/components/dynamic/form/Admin";
+import Committee from "@/components/dynamic/form/Committee";
+import Feedback from "@/components/dynamic/form/Feedback";
+import Interest from "@/components/dynamic/form/Interest";
+import Judge from "@/components/dynamic/form/Judge";
+import Mentor from "@/components/dynamic/form/Mentor";
+import Participant from "@/components/dynamic/form/Participant";
+import Sponsor from "@/components/dynamic/form/Sponsor";
+import Volunteer from "@/components/dynamic/form/Volunteer";
+import ProtectedPage from "@/components/dynamic/ProtectedPage";
+import Fault from "@/utils/error";
+
+const Page = ({ params }) => {
+  const components = {
+    admin: <Admin />,
+    committee: <Committee />,
+    feedback: <Feedback />,
+    interest: <Interest />,
+    judge: <Judge />,
+    mentor: <Mentor />,
+    participant: <Participant />,
+    sponsor: <Sponsor />,
+    volunteer: <Volunteer />,
+  };
+
+  const capitalizeFirstLetter = (word) => {
+    return word[0].toUpperCase() + word.slice(1);
+  };
+
+  if (components.hasOwnProperty(params.type)) {
+    return (
+      <ProtectedPage
+        title={`Form | ${capitalizeFirstLetter(params.type)}`}
+        restrictions={{}}
+        customStyle={true}
+      >
+        {components[params.type]}
+      </ProtectedPage>
+    );
+  } else {
+    throw new Fault(
+      404,
+      "Page Not Found",
+      "The page you are looking for does not seem to exist"
+    );
+  }
+};
+
+export default Page;
diff --git a/src/app/form/admin/page.js b/src/app/form/admin/page.js
deleted file mode 100644
index f55ce044..00000000
--- a/src/app/form/admin/page.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import Admin from "@/components/dynamic/form/Admin";
-import ProtectedPage from "@/components/dynamic/ProtectedPage";
-
-const Page = () => {
-  return (
-    <ProtectedPage title="Form | Admin" restrictions={{}}>
-      <Admin />
-    </ProtectedPage>
-  );
-};
-
-export default Page;
diff --git a/src/app/form/committee/page.js b/src/app/form/committee/page.js
deleted file mode 100644
index 073eef05..00000000
--- a/src/app/form/committee/page.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import Committee from "@/components/dynamic/form/Committee";
-import ProtectedPage from "@/components/dynamic/ProtectedPage";
-
-const Page = () => {
-  return (
-    <ProtectedPage title="Form | Committee" restrictions={{}}>
-      <Committee />
-    </ProtectedPage>
-  );
-};
-
-export default Page;
diff --git a/src/app/form/feedback/page.js b/src/app/form/feedback/page.js
deleted file mode 100644
index f6f34173..00000000
--- a/src/app/form/feedback/page.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import Feedback from "@/components/dynamic/form/Feedback";
-import ProtectedPage from "@/components/dynamic/ProtectedPage";
-
-const Page = () => {
-  return (
-    <ProtectedPage title="Form | Feedback" restrictions={{}}>
-      <Feedback />
-    </ProtectedPage>
-  );
-};
-
-export default Page;
diff --git a/src/app/form/interest/page.js b/src/app/form/interest/page.js
deleted file mode 100644
index 6d90bc9b..00000000
--- a/src/app/form/interest/page.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import Interest from "@/components/dynamic/form/Interest";
-import ProtectedPage from "@/components/dynamic/ProtectedPage";
-
-const Page = () => {
-  return (
-    <ProtectedPage title="Form | Interest" restrictions={{}}>
-      <Interest />
-    </ProtectedPage>
-  );
-};
-
-export default Page;
diff --git a/src/app/form/judge/page.js b/src/app/form/judge/page.js
deleted file mode 100644
index 70657c10..00000000
--- a/src/app/form/judge/page.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import Judge from "@/components/dynamic/form/Judge";
-import ProtectedPage from "@/components/dynamic/ProtectedPage";
-
-const Page = () => {
-  return (
-    <ProtectedPage title="Form | Judge" restrictions={{}}>
-      <Judge />
-    </ProtectedPage>
-  );
-};
-
-export default Page;
diff --git a/src/app/form/mentor/page.js b/src/app/form/mentor/page.js
deleted file mode 100644
index b7481637..00000000
--- a/src/app/form/mentor/page.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import Mentor from "@/components/dynamic/form/Mentor";
-import ProtectedPage from "@/components/dynamic/ProtectedPage";
-
-const Page = () => {
-  return (
-    <ProtectedPage title="Form | Mentor" restrictions={{}}>
-      <Mentor />
-    </ProtectedPage>
-  );
-};
-
-export default Page;
diff --git a/src/app/form/participant/page.js b/src/app/form/participant/page.js
deleted file mode 100644
index fff454fc..00000000
--- a/src/app/form/participant/page.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import Participant from "@/components/dynamic/form/Participant";
-import ProtectedPage from "@/components/dynamic/ProtectedPage";
-
-const Page = () => {
-  return (
-    <ProtectedPage title="Form | Participant" restrictions={{}}>
-      <Participant />
-    </ProtectedPage>
-  );
-};
-
-export default Page;
diff --git a/src/app/form/sponsor/page.js b/src/app/form/sponsor/page.js
deleted file mode 100644
index 7713b77e..00000000
--- a/src/app/form/sponsor/page.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import Sponsor from "@/components/dynamic/form/Sponsor";
-import ProtectedPage from "@/components/dynamic/ProtectedPage";
-
-const Page = () => {
-  return (
-    <ProtectedPage title="Form | Sponsor" restrictions={{}}>
-      <Sponsor />
-    </ProtectedPage>
-  );
-};
-
-export default Page;
diff --git a/src/app/form/volunteer/page.js b/src/app/form/volunteer/page.js
deleted file mode 100644
index ade09152..00000000
--- a/src/app/form/volunteer/page.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import Volunteer from "@/components/dynamic/form/Volunteer";
-import ProtectedPage from "@/components/dynamic/ProtectedPage";
-
-const Page = () => {
-  return (
-    <ProtectedPage title="Form | Volunteer" restrictions={{}}>
-      <Volunteer />
-    </ProtectedPage>
-  );
-};
-
-export default Page;
diff --git a/src/components/dynamic/Checkbox.jsx b/src/components/dynamic/Checkbox.jsx
index a5696508..401c6a97 100644
--- a/src/components/dynamic/Checkbox.jsx
+++ b/src/components/dynamic/Checkbox.jsx
@@ -1,6 +1,13 @@
 import { BsCheckLg } from "react-icons/bs";
 
-const Checkbox = ({ toggle, onClick = () => {}, text = "", color }) => {
+const Checkbox = ({
+  toggle,
+  onClick = () => {},
+  text = "",
+  color,
+  customStyle = false,
+  "data-cy": dataCy,
+}) => {
   return (
     <div
       className="flex items-center hover:cursor-pointer w-fit"
@@ -9,7 +16,9 @@ const Checkbox = ({ toggle, onClick = () => {}, text = "", color }) => {
     >
       <div
         data-cy="checkbox-bg"
-        className={`w-4 h-4 rounded-sm border border-white !bg-transparent ${
+        className={`w-4 h-4 rounded-sm ${
+          customStyle ? "border border-white !bg-transparent" : ""
+        } ${
           toggle
             ? `${color ? color : "bg-hackathon-blue-100"}`
             : "bg-hackathon-gray-100"
diff --git a/src/components/dynamic/Loading.jsx b/src/components/dynamic/Loading.jsx
index 393b4c31..e618b448 100644
--- a/src/components/dynamic/Loading.jsx
+++ b/src/components/dynamic/Loading.jsx
@@ -1,11 +1,16 @@
 import { AiOutlineLoading3Quarters } from "react-icons/ai";
 
-const Loading = () => {
-  return (
-    <div className="w-full h-screen flex flex-col items-center justify-center bg-bear-dark gap-4">
+const Loading = ({ customStyle = false }) => {
+  return customStyle ? (
+    <div className="w-full h-screen flex flex-col items-center justify-center gap-4 bg-bear-dark">
       <p className="text-3xl font-bold text-white font-header">Loading...</p>
       <AiOutlineLoading3Quarters className="animate-spin text-white" />
     </div>
+  ) : (
+    <div className="w-full h-full flex flex-col items-center justify-center gap-4">
+      <p className="text-3xl font-bold text-hackathon-blue-100">Loading...</p>
+      <AiOutlineLoading3Quarters className="animate-spin text-hackathon-blue-100" />
+    </div>
   );
 };
 
diff --git a/src/components/dynamic/ProtectedPage.jsx b/src/components/dynamic/ProtectedPage.jsx
index 8c700625..0a588b2b 100644
--- a/src/components/dynamic/ProtectedPage.jsx
+++ b/src/components/dynamic/ProtectedPage.jsx
@@ -7,7 +7,12 @@ import RELEASES from "@/data/Releases";
 import Fault from "@/utils/error";
 import Navigation from "@/components/dynamic/Navigation";
 
-const ProtectedPage = ({ children, restrictions, title }) => {
+const ProtectedPage = ({
+  children,
+  restrictions,
+  title,
+  customStyle = false,
+}) => {
   const { data: session, status } = useSession();
   const [confirmed, setConfirmed] = useState(false);
 
@@ -52,13 +57,21 @@ const ProtectedPage = ({ children, restrictions, title }) => {
 
   return (
     <>
-      {status === "loading" && <Loading />}
+      {status === "loading" && <Loading customStyle={customStyle} />}
       {confirmed && (
         <>
           <title>{title}</title>
           {navigation && <Navigation />}
-          <div className="flex justify-center items-start w-full bg-gradient-to-b from-hackathon-page to-[#002525] h-screen py-12 lg:py-0 z-0 overflow-x-hidden">
-            <div className={`w-full h-full`}>{children}</div>
+          <div
+            className={`flex justify-center items-start w-full ${
+              customStyle
+                ? "bg-gradient-to-b from-bear-page-gradient-1 to-bear-page-gradient-2"
+                : "bg-hackathon-page"
+            } h-screen py-12 lg:py-0 z-0 overflow-x-hidden`}
+          >
+            <div className={`${customStyle ? "w-full" : "w-[96%]"} h-full`}>
+              {children}
+            </div>
           </div>
         </>
       )}
diff --git a/src/components/dynamic/admin/dashboards/Toolbar.jsx b/src/components/dynamic/admin/dashboards/Toolbar.jsx
index ee63be17..5057b036 100644
--- a/src/components/dynamic/admin/dashboards/Toolbar.jsx
+++ b/src/components/dynamic/admin/dashboards/Toolbar.jsx
@@ -173,10 +173,8 @@ const Toolbar = ({
 
   return (
     <div className="w-full flex items-center" data-cy="toolbar">
-      <div className="w-11/12 flex items-center">
-        <div className="mr-4" data-cy="select-all">
-          <Checkbox onClick={selectAll} toggle={toggle} />
-        </div>
+      <div className="w-11/12 flex items-center gap-4">
+        <Checkbox onClick={selectAll} toggle={toggle} />
         <div className="flex flex-row gap-2">
           {tags.map((tag, index) => (
             <Tag
diff --git a/src/components/dynamic/form/Judge.jsx b/src/components/dynamic/form/Judge.jsx
index be1096b7..49fc43b7 100644
--- a/src/components/dynamic/form/Judge.jsx
+++ b/src/components/dynamic/form/Judge.jsx
@@ -8,7 +8,7 @@ import axios from "axios";
 import toast from "react-hot-toast";
 import { STATUSES } from "@/data/dynamic/admin/Judges.js";
 
-const judge = () => {
+const Judge = () => {
   const { data: session } = useSession();
   const [judge, setJudge] = useState({
     ...ATTRIBUTES,
@@ -41,4 +41,4 @@ const judge = () => {
   );
 };
 
-export default judge;
+export default Judge;
diff --git a/src/components/dynamic/form/Questions.jsx b/src/components/dynamic/form/Questions.jsx
index f2c765d8..f6fa95e3 100644
--- a/src/components/dynamic/form/Questions.jsx
+++ b/src/components/dynamic/form/Questions.jsx
@@ -125,6 +125,7 @@ const Questions = ({
                       })
                     }
                     color="bg-transparent"
+                    customStyle={true}
                   />
                 </>
               ))}
diff --git a/src/components/dynamic/user/Dashboard.jsx b/src/components/dynamic/user/Dashboard.jsx
index 42bc19f7..ae51d89b 100644
--- a/src/components/dynamic/user/Dashboard.jsx
+++ b/src/components/dynamic/user/Dashboard.jsx
@@ -15,7 +15,7 @@ const Dashboard = () => {
     <div className="h-full font-poppins flex flex-col py-4 gap-3">
       <Title title="Dashboard" />
       <Header email={user.email} name={user.name} />
-      <div className="grid grid-cols-1 lg:grid-cols-2 h-full gap-3">
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
         <User user={user} setUser={setUser} edit={edit} setEdit={setEdit} />
         {user.roles.participants === 1 && (
           <Team user={user} team={user.team} setUser={setUser} />
diff --git a/src/components/static/Countdown.jsx b/src/components/static/Countdown.jsx
index 9e30aa17..2774dda9 100644
--- a/src/components/static/Countdown.jsx
+++ b/src/components/static/Countdown.jsx
@@ -1,102 +1,58 @@
 "use client";
+import { useState, useEffect } from "react";
+import { CONFIG } from "@/data/Config";
 
-import { useEffect, useState } from "react";
+const Digits = ({ value, unit }) => {
+  return (
+    <div className="flex flex-col items-center gap-3 last:hidden sm:last:flex">
+      <div className="flex gap-1 lg:!gap-2">
+        {value
+          .toString()
+          .padStart(2, "0")
+          .split("")
+          .map((digit, index) => (
+            <div
+              className="text-lg lg:text-4xl font-bold text-white bg-bear-teal-100/50 p-[10px] lg:p-3 rounded-lg"
+              key={index}
+            >
+              {digit}
+            </div>
+          ))}
+      </div>
+      <div>{unit}</div>
+    </div>
+  );
+};
 
-// approximate units for a simple implementation, can use Date API if more accuracy is needed
-const units = [
-  {
-    unitSingular: "second",
-    unitPlural: "seconds",
-    millis: 1000,
-  },
-  {
-    unitSingular: "minute",
-    unitPlural: "minutes",
-    millis: 60 * 1000,
-  },
-  {
-    unitSingular: "hour",
-    unitPlural: "hours",
-    millis: 60 * 60 * 1000,
-  },
-  {
-    unitSingular: "day",
-    unitPlural: "days",
-    millis: 24 * 60 * 60 * 1000,
-  },
-  {
-    unitSingular: "week",
-    unitPlural: "weeks",
-    millis: 7 * 24 * 60 * 60 * 1000,
-  },
-  {
-    unitSingular: "month",
-    unitPlural: "months",
-    millis: 30 * 24 * 60 * 60 * 1000,
-  },
-];
+const Countdown = () => {
+  const [time, setTime] = useState({
+    days: 0,
+    hours: 0,
+    minutes: 0,
+    seconds: 0,
+  });
 
-/**
- * returns block data that can be rendered for some duration
- * @param {number} duration milliseconds to convert into larger time units
- * @return {{unit:string, amount:number}[]}
- */
-function calculateBlocksForDuration(duration) {
-  let left = duration;
-  const blocks = [];
-  for (let i = units.length - 1; i >= 0 && blocks.length < 3; --i) {
-    const { unitSingular, unitPlural, millis } = units[i];
-    const blocksIfRemainingAdded = blocks.length + i + 1;
-    const amount = Math.floor(left / millis);
-    left -= millis * amount;
-    if (blocksIfRemainingAdded <= 3 || amount > 0) {
-      blocks.push({
-        unit: amount == 1 ? unitSingular : unitPlural,
-        amount: amount,
+  useEffect(() => {
+    const updateTime = () => {
+      const diff = Math.max(CONFIG.date.getTime() - Date.now(), 0);
+      setTime({
+        days: Math.floor(diff / (1000 * 60 * 60 * 24)),
+        hours: Math.floor(diff / (1000 * 60 * 60)) % 24,
+        minutes: Math.floor(diff / (1000 * 60)) % 60,
+        seconds: Math.floor(diff / 1000) % 60,
       });
-    }
-  }
-  return blocks;
-}
+    };
 
-/**
- * Renders a countdown element with the 3 most significant time units.
- * @param {{targetTime: number}} props targetTime in millis since unix epoch (same as `Date.now()`)
- * @return {JSX.Element}
- */
-const Countdown = ({ targetTime }) => {
-  const [blocks, setBlocks] = useState(
-    calculateBlocksForDuration(Math.max(targetTime - Date.now(), 0))
-  );
-  useEffect(() => {
-    const intervalId = setInterval(() => {
-      setBlocks(
-        calculateBlocksForDuration(Math.max(targetTime - Date.now(), 0))
-      );
-    }, 1000);
-    return () => clearInterval(intervalId);
-  }, [targetTime]);
+    updateTime();
+    const interval = setInterval(updateTime, 1000);
+
+    return () => clearInterval(interval);
+  }, []);
 
   return (
-    <div className="flex gap-4 font-paragraph">
-      {blocks.map(({ unit, amount }, index) => (
-        <div className="flex flex-col items-center m-2 gap-2" key={index}>
-          <div className="flex gap-2">
-            {amount
-              .toString()
-              .padStart(2, "0")
-              .split("")
-              .map((digit, index) => (
-                <div
-                  className="text-md lg:text-5xl font-bold text-white bg-[#B3FBF780] p-3 rounded-lg"
-                  key={index}
-                >
-                  {digit}
-                </div>
-              ))}
-          </div>
-          <div className="">{unit}</div>
-        </div>
+    <div className="flex gap-3 md:!gap-6 font-paragraph">
+      {Object.entries(time).map(([unit, value], index) => (
+        <Digits key={index} unit={unit} value={value} />
       ))}
     </div>
   );
diff --git a/src/components/static/Title.jsx b/src/components/static/Title.jsx
index 3181a36c..1d110358 100644
--- a/src/components/static/Title.jsx
+++ b/src/components/static/Title.jsx
@@ -8,8 +8,12 @@ import { CONFIG } from "@/data/Config.js";
 const Title = () => {
   return (
     <div className="w-full h-screen text-white flex flex-col justify-center items-center lg:items-end">
-      <div className="absolute hidden lg:flex items-center left-0 w-full h-full m-auto z-0">
-        <Image src={titleBg} alt={"Background"} />
+      <div className="absolute hidden lg:flex w-full h-full z-0">
+        <Image
+          src={titleBg}
+          alt={"Background"}
+          className="object-cover h-full"
+        />
       </div>
       <div className="flex flex-col z-1 p-8 lg:p-16 gap-2 rounded-lg bg-slate-900 lg:bg-transparent">
         <div className="p-8 flex flex-col items-center lg:items-end gap-2">
@@ -17,14 +21,17 @@ const Title = () => {
             BEARHACK 2024
           </div>
           <div className="text-lg lg:text-xl font-paragraph text-bear-teal-100">
-            {CONFIG.date.toLocaleDateString(undefined, {
-              year: "numeric",
+            {CONFIG.date.toLocaleDateString("en-US", {
               month: "long",
               day: "numeric",
             })}
+            {"-"}
+            {CONFIG.lastDate.getDate()}
+            {", "}
+            {CONFIG.lastDate.getFullYear()}
           </div>
         </div>
-        <div className="flex gap-4 flex-col lg:flex-row px-8">
+        <div className="flex flex-col gap-4 justify-end lg:flex-row px-8">
           <Link text={"Register"} link={"/form/participant"} />
           <Link text={"Mentor"} link={"/form/mentor"} />
           <Link text={"Volunteer"} link={"/form/volunteer"} />
@@ -34,7 +41,7 @@ const Title = () => {
           <HorizontalLine />
         </div>
         <div className="m-auto">
-          <Countdown targetTime={CONFIG.date.getTime()} />
+          <Countdown />
         </div>
       </div>
     </div>
diff --git a/src/data/Config.js b/src/data/Config.js
index d3af96b8..676e9e04 100644
--- a/src/data/Config.js
+++ b/src/data/Config.js
@@ -1,8 +1,9 @@
 export const CONFIG = {
   name: "Bearhack 2024",
-  email: "contact.acmucr@gmail.com",
+  email: "bearhackucr@gmail.com",
   year: "2024",
   date: new Date("April 27, 2024 9:00:00"),
+  lastDate: new Date("April 28, 2024 9:00:00"),
   packet: "",
 };
 
diff --git a/src/data/dynamic/admin/Teams.js b/src/data/dynamic/admin/Teams.js
index 2f2f7103..8ae923f5 100644
--- a/src/data/dynamic/admin/Teams.js
+++ b/src/data/dynamic/admin/Teams.js
@@ -26,7 +26,7 @@ export const TAGS = [
 export const HEADERS = [
   { text: "name", size: "w-2/12", icon: true, sort: "off", symbol: "winner" },
   { text: "members", size: "w-2/12", icon: false, sort: "off" },
-  { text: "emails", size: "w-3/12", icon: false, sort: "off" },
+  { text: "discords", size: "w-3/12", icon: false, sort: "off" },
   { text: "links", size: "w-3/12", icon: false, sort: "off" },
   {
     text: "status",
diff --git a/tailwind.config.js b/tailwind.config.js
index 9e72e13c..b8228835 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -25,7 +25,7 @@ module.exports = {
           "gray-200": "#9ea4af",
           "gray-300": "#525252",
           "select-bg": "#3F3F3F",
-          page: "#000303" /* bear-dark */,
+          page: "#F5F5F5",
           tags: {
             "red-bg": "#FFE9E2",
             "red-text": "#F07167",
@@ -50,6 +50,8 @@ module.exports = {
         },
         bear: {
           dark: "#000303",
+          "page-gradient-1": "#000303",
+          "page-gradient-2": "#002525",
           teal: "#4ABFB5",
           "teal-100": "#B3FBF7",
           purple: "#B16FF0",