diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 391f3ed..1acf97b 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,18 +1,33 @@
-import React from "react";
+import React, { useState } from "react";
 import Header from "./components/Header";
 import Footer from "./components/Footer";
 import MultiForm from "./components/MultiForm";
 import { Toaster } from "react-hot-toast";
+import Circles from "./components/Circles";
+import hero from "./assets/hero-img.png";
+import Modal from "./components/Modal";
 
 const App: React.FC = () => {
+    const [openModal, setOpenModal] = useState(false);
     return (
         <>
+            <main>
+                <Circles />
+                <div id="wrapper">
+                    <div className="wrapper-item">
+                        <div id="wrapped">
+                            <Header />
+                            <MultiForm />
+                        </div>
+                        <Footer openModal={setOpenModal} />
+                    </div>
+                    <aside>
+                        <img src={hero} alt="." />
+                    </aside>
+                </div>
+            </main>
+            {openModal && <Modal closeModal={setOpenModal} />}
             <Toaster position="bottom-center" />
-            <div>
-                <Header />
-                <MultiForm />
-            </div>
-            <Footer />
         </>
     );
 };
diff --git a/frontend/src/AppContext/AppContext.tsx b/frontend/src/AppContext/AppContext.tsx
index 68f1d43..e171cb4 100644
--- a/frontend/src/AppContext/AppContext.tsx
+++ b/frontend/src/AppContext/AppContext.tsx
@@ -22,12 +22,12 @@ interface IContext {
 }
 
 const DEFAULT_USER: IUser = {
-    rollNo: "",
+    rollNo: sessionStorage.getItem("rollNo") || "",
     password: "",
     securityQuestion: "",
     securityAnswer: "",
-    ssoToken: sessionStorage.getItem("ssoToken"),
-    sessionToken: sessionStorage.getItem("sessionToken"),
+    ssoToken: sessionStorage.getItem("ssoToken") || "",
+    sessionToken: sessionStorage.getItem("sessionToken") || "",
 };
 
 export const AppContext = createContext<IContext | null>(null);
@@ -35,7 +35,7 @@ export const AppContext = createContext<IContext | null>(null);
 export const AppProvider: React.FC<IProps> = ({ children }) => {
     const [authState, setAuth] = useState<IAuth>({
         user: DEFAULT_USER,
-        currentStep: 0,
+        currentStep: DEFAULT_USER.ssoToken ? 2 : 0,
     });
 
     const logout = () => {
diff --git a/frontend/src/assets/header-logo.png b/frontend/src/assets/header-logo.png
deleted file mode 100644
index be67cbe..0000000
Binary files a/frontend/src/assets/header-logo.png and /dev/null differ
diff --git a/frontend/src/assets/hero-img.png b/frontend/src/assets/hero-img.png
new file mode 100644
index 0000000..b9d01e8
Binary files /dev/null and b/frontend/src/assets/hero-img.png differ
diff --git a/frontend/src/assets/logo.jpg b/frontend/src/assets/logo.jpg
deleted file mode 100644
index a1769cb..0000000
Binary files a/frontend/src/assets/logo.jpg and /dev/null differ
diff --git a/frontend/src/assets/metakgp-logo-header.png b/frontend/src/assets/metakgp-logo-header.png
deleted file mode 100644
index 7e285d0..0000000
Binary files a/frontend/src/assets/metakgp-logo-header.png and /dev/null differ
diff --git a/frontend/src/assets/metakgp-logo-white.png b/frontend/src/assets/metakgp-logo-white.png
deleted file mode 100644
index 1c7cec4..0000000
Binary files a/frontend/src/assets/metakgp-logo-white.png and /dev/null differ
diff --git a/frontend/src/assets/metakgp-logo.png b/frontend/src/assets/metakgp-logo.png
index ac03c57..ecca495 100644
Binary files a/frontend/src/assets/metakgp-logo.png and b/frontend/src/assets/metakgp-logo.png differ
diff --git a/frontend/src/components/Circles.tsx b/frontend/src/components/Circles.tsx
new file mode 100644
index 0000000..a10edab
--- /dev/null
+++ b/frontend/src/components/Circles.tsx
@@ -0,0 +1,41 @@
+import React from "react";
+
+let circles_list = [
+    {
+        position: [10, 15],
+        color: "0 0 400px 140px rgba(0, 133, 255, 1)",
+    },
+    {
+        position: [10, 90],
+        color: "0 0 100px 100px rgba(0, 255, 102, 0.72)",
+    },
+    { position: [40, 40], color: "0 0 150px 100px #FFD447" },
+    {
+        position: [100, 10],
+        color: "0 0 250px 150px rgba(204, 0, 255, 0.75)",
+    },
+    {
+        position: [80, 90],
+        color: "0 0 200px 80px rgba(204, 0, 255, 1)",
+    },
+];
+
+const Circles: React.FC = () => {
+    return (
+        <div className="circle-container">
+            {circles_list.map((x) => (
+                <>
+                    <div
+                        className="circle"
+                        style={{
+                            top: `${x.position[0]}%`,
+                            left: `${x.position[1]}%`,
+                            boxShadow: x.color,
+                        }}
+                    />
+                </>
+            ))}
+        </div>
+    );
+};
+export default Circles;
diff --git a/frontend/src/components/Electives.tsx b/frontend/src/components/Electives.tsx
index 80953d6..0a7f8f2 100644
--- a/frontend/src/components/Electives.tsx
+++ b/frontend/src/components/Electives.tsx
@@ -1,14 +1,21 @@
-import React from "react";
+import React, { useState } from "react";
 import { BACKEND_URL } from "./url";
 import { toast } from "react-hot-toast";
 import { useAppContext } from "../AppContext/AppContext";
+import Spinner from "./Spinner";
 
 const Electives: React.FC = () => {
     const { user } = useAppContext();
-
+    const [isBreadthDownloading, setIsBreadthDownloading] = useState(false);
+    const [isDepthDownloading, setIsDepthDownloading] = useState(false);
     const getElective = async (elective: string) => {
         const formData = new URLSearchParams();
         formData.append("roll_number", user.rollNo);
+        {
+            elective == "breadth"
+                ? setIsBreadthDownloading(true)
+                : setIsDepthDownloading(true);
+        }
 
         try {
             const res = await fetch(`${BACKEND_URL}/elective/${elective}`, {
@@ -38,39 +45,37 @@ const Electives: React.FC = () => {
         } catch (error) {
             toast.error(`Error fetching ${elective} electives!`);
             console.error("Error fetching breadth electives:", error);
+        } finally {
+            {
+                elective == "breadth"
+                    ? setIsBreadthDownloading(false)
+                    : setIsDepthDownloading(false);
+            }
         }
     };
 
     return (
         <div className="electives-container">
             <h2>Download Electives</h2>
+            <p>
+                Below are the filtered electives that are available as per your
+                slots
+            </p>
             <div className="electives">
-                <div className="elective-item">
-                    <h4>Breadth</h4>
-                    <p>
-                        Click download to save the excel file for available
-                        breadth electives.
-                    </p>
-                    <button
-                        className="download-button"
-                        onClick={() => getElective("breadth")}
-                    >
-                        Download
-                    </button>
-                </div>
-                <div className="elective-item">
-                    <h4>Depth</h4>
-                    <p>
-                        Click download to save the excel file for available
-                        depth electives.
-                    </p>
-                    <button
-                        className="download-button"
-                        onClick={() => getElective("depth")}
-                    >
-                        Download
-                    </button>
-                </div>
+                <button
+                    className="download-button"
+                    onClick={() => getElective("breadth")}
+                    disabled={isBreadthDownloading}
+                >
+                    {isBreadthDownloading ? <Spinner /> : "Download Breadth"}
+                </button>
+                <button
+                    className="download-button"
+                    onClick={() => getElective("depth")}
+                    disabled={isDepthDownloading}
+                >
+                    {isDepthDownloading ? <Spinner /> : "Download Depth"}
+                </button>
             </div>
         </div>
     );
diff --git a/frontend/src/components/Footer.tsx b/frontend/src/components/Footer.tsx
index 4fc5696..c4073a6 100644
--- a/frontend/src/components/Footer.tsx
+++ b/frontend/src/components/Footer.tsx
@@ -1,10 +1,23 @@
 import React from "react";
-import About from "./About";
+import { useAppContext } from "../AppContext/AppContext";
+type props = {
+    openModal: React.Dispatch<React.SetStateAction<boolean>>;
+};
+const Footer: React.FC<props> = ({ openModal }) => {
+    const { logout, user } = useAppContext();
 
-const Footer: React.FC = () => {
     return (
         <div>
-            <About />
+            <div className="help">
+                <button className="help-button" onClick={() => openModal(true)}>
+                    Help 💡
+                </button>
+                {user.ssoToken && (
+                    <button onClick={logout} className="logout-button">
+                        Logout
+                    </button>
+                )}
+            </div>
             <footer>
                 <p>
                     Maintained by{" "}
diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
index a5583c6..2728b16 100644
--- a/frontend/src/components/Header.tsx
+++ b/frontend/src/components/Header.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import metakgpLogo from "../assets/metakgp-logo-white.png";
+import metakgpLogo from "../assets/metakgp-logo.png";
 
 const Header: React.FC = () => {
     return (
diff --git a/frontend/src/components/RollForm.tsx b/frontend/src/components/RollForm.tsx
index c40b818..e013629 100644
--- a/frontend/src/components/RollForm.tsx
+++ b/frontend/src/components/RollForm.tsx
@@ -77,7 +77,7 @@ const RollForm: React.FC = () => {
         <>
             <form onSubmit={handleSubmit(getSecurityQuestion)}>
                 <div className="input-item">
-                    <label>Roll number: </label>
+                    <label>Roll number :</label>
                     <input
                         type="text"
                         placeholder="Roll number for ERP"
@@ -94,7 +94,7 @@ const RollForm: React.FC = () => {
                     </span>
                 </div>
                 <div className={`input-item`}>
-                    <label>Password: </label>
+                    <label>Password :</label>
                     <input
                         type="password"
                         placeholder="Password for ERP login"
diff --git a/frontend/src/components/SecurityQueForm.tsx b/frontend/src/components/SecurityQueForm.tsx
index 846632c..9c60449 100644
--- a/frontend/src/components/SecurityQueForm.tsx
+++ b/frontend/src/components/SecurityQueForm.tsx
@@ -130,7 +130,7 @@ const SecurityQueForm: React.FC = () => {
     return (
         <form className="login-form" onSubmit={handleSubmit(onSubmit)}>
             <div className="input-item">
-                <label>{user.securityQuestion || "\u00A0"}</label>
+                <label>{user.securityQuestion || "\u00A0"} :</label>
                 <input
                     type="password"
                     placeholder="Enter your answer"
@@ -146,7 +146,7 @@ const SecurityQueForm: React.FC = () => {
                 </span>
             </div>
             <div className="input-item">
-                <label>Enter OTP</label>
+                <label>Enter OTP :</label>
                 <input
                     type="text"
                     placeholder="Enter OTP sent to email"
diff --git a/frontend/src/components/Spinner.tsx b/frontend/src/components/Spinner.tsx
index 27a5827..b3b1aa4 100644
--- a/frontend/src/components/Spinner.tsx
+++ b/frontend/src/components/Spinner.tsx
@@ -7,9 +7,10 @@ export default function Spinner(props: SVGProps<SVGSVGElement>) {
       width="1em"
       height="1em"
       viewBox="0 0 24 24"
+      className="spinner"
       {...props}
     >
-      <g stroke="currentColor">
+      <g stroke="white">
         <circle
           cx={12}
           cy={12}
diff --git a/frontend/src/styles/footer.scss b/frontend/src/styles/footer.scss
index ab71628..a44c40f 100644
--- a/frontend/src/styles/footer.scss
+++ b/frontend/src/styles/footer.scss
@@ -1,9 +1,33 @@
 footer {
-  font-size: 1.2rem;
-  margin-top: 1rem;
-  .metakgp {
-    font-family: $metakgp-font;
-    font-weight: 800;
     font-size: 1.2rem;
-  }
+    margin-top: 1rem;
+    text-align: center;
+    .metakgp {
+        font-family: $metakgp-font;
+        font-weight: 800;
+        font-size: 1.2rem;
+    }
+    a {
+        text-decoration: none;
+    }
+}
+.help {
+    display: flex;
+    gap: 1rem;
+    justify-content: center;
+    align-items: center;
+    .help-button,
+    .logout-button {
+        margin-top: 1rem;
+        border: none;
+        width: fit-content;
+        padding: 0.5rem 1rem;
+        font-size: 1rem;
+        border-radius: 8px;
+        color: white !important;
+        font-weight: bold;
+        background-color: #989898;
+        box-shadow: none;
+        cursor: pointer;
+    }
 }
diff --git a/frontend/src/styles/header.scss b/frontend/src/styles/header.scss
index 47eec57..b161eb0 100644
--- a/frontend/src/styles/header.scss
+++ b/frontend/src/styles/header.scss
@@ -1,18 +1,18 @@
 .header {
-  @include flexbox(column, center, center, 2rem);
-  margin-bottom: 2rem;
-  .header-logo {
-    max-width: 7rem;
-    img {
-      width: 100%;
-      height: auto;
+    @include flexbox(column, center, center, 0);
+    margin-bottom: 2rem;
+    .header-logo {
+        img {
+            width: 100%;
+            height: auto;
+        }
     }
-  }
-  .header-title {
-    font-size: 2.5em;
-    line-height: 1;
-    #word {
-      font-family: $cursive-font;
+    .header-title {
+        font-size: 2rem;
+        line-height: 1;
+        #word {
+            font-family: $cursive-font;
+            font-size: 3.5rem;
+        }
     }
-  }
 }
diff --git a/frontend/src/styles/index.scss b/frontend/src/styles/index.scss
index 3bb5188..7d16aca 100644
--- a/frontend/src/styles/index.scss
+++ b/frontend/src/styles/index.scss
@@ -8,118 +8,128 @@
 @import "./footer.scss";
 @import "./modal.scss";
 
-#root {
-    max-width: 1280px;
+main {
+    width: 100%;
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    gap: 2rem;
+    align-items: center;
+    padding: 1.5rem;
+    position: relative;
+}
+
+aside img {
+    display: block;
+    width: 100%;
+    max-height: 600px;
+    height: auto;
+}
+@media screen and (max-width: 900px) {
+    aside {
+        display: none;
+    }
+}
+.circle {
+    pointer-events: none;
+    width: 0px;
+    height: 0px;
+    border-radius: 50%;
+    position: absolute;
+}
+.circle-container {
+    position: fixed;
+    width: 100vw;
+    height: 100vh;
+    z-index: -10;
+}
+
+#wrapper {
     height: 100%;
-    margin: 0 auto;
-    padding: 2rem;
+    width: 100%;
+    border-radius: 10px;
+    padding: 1rem;
+    z-index: 20;
+    border-radius: 24px;
+    border: 2px solid #fff;
+    background: #ffffff49;
+    backdrop-filter: blur(10px);
+    display: flex;
     text-align: center;
-    @include flexbox(column, space-between, center, 2rem);
-    form {
-        padding: 2rem;
-        background-color: #0005;
-        max-width: 25rem;
-        margin: auto;
-        border-radius: 2rem;
+    align-items: center;
+    justify-content: space-evenly;
+    gap: 2rem;
+    overflow: auto;
+}
+.wrapper-item {
+    * {
+        color: #000;
     }
-
-    .input-item {
-        @include flexbox(column, center, center, 0.2rem);
-        position: relative;
-        margin-bottom: 1.5rem;
-        font-size: 1.25rem;
-        .input-box {
-            font-size: 1.25rem;
-            width: 100%;
-            padding: 1rem;
-            border-radius: 0.75rem;
-            box-shadow: none;
-            outline: none;
-            background-color: #0005;
-            border: 2px solid $font-color-darker;
-            border: none;
-            &:focus {
-                outline: 2px solid $accent-color-lighter;
-            }
-            &:disabled {
-                background: darken($surface-1, 5);
-            }
-        }
-        .input-error {
-            outline: 2px solid $error-color;
-        }
-        label {
-            font-weight: 500;
-        }
-        .input-error-msg {
-            position: absolute;
-            font-size: 1rem;
-            top: 100%;
-            color: $error-color;
-            font-weight: 600;
-        }
+    #wrapped {
+        max-width: 20rem;
+        margin: auto;
     }
-    .submit-button {
-        margin-top: 1rem;
+}
+.input-item {
+    @include flexbox(column, center, center, 0.2rem);
+    position: relative;
+    margin-bottom: 1.5rem;
+    font-size: 1.1rem;
+    .input-box {
+        font-size: 1.1rem;
         width: 100%;
-        font-size: 1.25rem;
-        padding: 1rem;
-        border: none;
+        padding: 0.5rem 1rem;
         border-radius: 0.75rem;
-        background: $accent-color;
-        color: $font-color-darker;
+        box-shadow: none;
         outline: none;
-        font-weight: bold;
-        box-shadow: 0 5px 5px -6px black;
-        cursor: pointer;
-        &:focus {
-            outline: 2px solid $accent-color-lighter;
+        background-color: white;
+        border: none;
+        box-shadow: 0 0 20px -2px #0000003b;
+        &:disabled {
+            background-color: #aaa;
         }
     }
+    .input-error {
+        outline: 1px solid $error-color;
+    }
+    label {
+        font-weight: 700;
+        text-transform: uppercase;
+    }
+    .input-error-msg {
+        position: absolute;
+        font-size: 1rem;
+        top: 100%;
+        color: $error-color;
+        font-weight: 600;
+    }
+}
+.submit-button,
+.download-button {
+    border: none;
+    background-color: #00ba29;
+    padding: 0.5rem 1rem;
+    font-size: 1.1rem;
+    border-radius: 8px;
+    width: 100%;
+    color: white;
+    font-weight: bold;
+    cursor: pointer;
+    margin-inline: auto;
+}
 
-    .help {
-        margin-top: 2rem;
+.electives-container {
+    h2 {
+        font-size: 2rem;
         margin-bottom: 1rem;
-        @include flexbox(row, center, center, 1rem);
-        .help-button,
-        .logout-button {
-            padding: 0.75rem 1rem;
-            background-color: $accent-color;
-            border: none;
-            font-size: 1.2rem;
-            border-radius: 1rem;
-            cursor: pointer;
-            width: 100%;
-        }
     }
-
-    .electives-container {
-        h2 {
-            font-size: 2rem;
-            margin-bottom: 1rem;
-        }
-        h4 {
-            font-size: 1.5rem;
-        }
-        .electives {
-            @include flexbox(column, center, center, 1rem);
-        }
-        .elective-item {
-            padding: 1rem;
-            background-color: #0005;
-            border-radius: 1rem;
-            max-width: 20rem;
-            @include flexbox(column, center, center, 0);
-        }
-        .download-button {
-            padding: 0.75rem 1rem;
-            background-color: $accent-color;
-            border: none;
-            font-size: 1.2rem;
-            border-radius: 1rem;
-            cursor: pointer;
-            width: 100%;
-            margin-top: 2rem;
-        }
+    p {
+        font-size: 1.1rem;
+    }
+    .electives {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+        margin-top: 1rem;
     }
 }
diff --git a/frontend/src/styles/mixins.scss b/frontend/src/styles/mixins.scss
index 6dfb5a7..f95847b 100644
--- a/frontend/src/styles/mixins.scss
+++ b/frontend/src/styles/mixins.scss
@@ -11,22 +11,3 @@
   gap: $gap;
 }
 
-@mixin custom-btn {
-  padding: 0.5em 2em;
-  border-radius: 10px;
-  color: $font-color;
-  font-family: $metakgp-font;
-  font-size: 1.2em;
-  border: 1px solid $font-color-darker;
-}
-
-@mixin about-btn {
-  padding: 0.5em 1.4em;
-  border-radius: 10px;
-  color: $font-color;
-  font-family: $metakgp-font;
-  font-size: 1.2em;
-  font-weight: 600;
-  background-color: $purple;
-  border: 1px solid $font-color-darker;
-}
diff --git a/frontend/src/styles/modal.scss b/frontend/src/styles/modal.scss
index f50f6fc..79e7340 100644
--- a/frontend/src/styles/modal.scss
+++ b/frontend/src/styles/modal.scss
@@ -1,6 +1,8 @@
 .modal-overlay {
   z-index: 20;
   background-color: #0008;
+  background-color: #000a;
+  backdrop-filter: blur(4px);
   height: 100vh;
   width: 100vw;
   position: fixed;
@@ -10,7 +12,7 @@
   @include flexbox(row, center, center, 0);
 
   .modal-content {
-    background-color: $surface-2;
+    background-color: $surface-1;
     max-width: 30rem;
     padding: 2rem;
     border-radius: 1rem;
@@ -20,8 +22,10 @@
     h2 {
       font-size: 1.75rem;
       margin-bottom: 1rem;
+      text-align: center;
     }
     h4 {
+      text-align: center;
       font-size: 1.25rem;
     }
     p {
diff --git a/frontend/src/styles/reset.scss b/frontend/src/styles/reset.scss
index 225b4f1..f9d4aa5 100644
--- a/frontend/src/styles/reset.scss
+++ b/frontend/src/styles/reset.scss
@@ -3,23 +3,36 @@
     margin: 0;
     box-sizing: border-box;
     user-select: none;
+    font-family: $metakgp-font;
 }
 
 html {
-    font-family: $metakgp-font;
     font-size: 14px;
     color: $font-color;
-
     @media all and (max-width: 768px) {
         font-size: 14px;
     }
 }
+
 :root {
-    color-scheme: dark;
-    color: $font-color;
-    background-color: $metakgp-black;
     font-synthesis: none;
     text-rendering: optimizeLegibility;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-}
\ No newline at end of file
+}
+
+
+*::-webkit-scrollbar-track {
+	-webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.3);
+	background-color: transparent;
+}
+
+*::-webkit-scrollbar {
+	width: 5px;
+	background-color: transparent;
+}
+
+*::-webkit-scrollbar-thumb {
+	background-color: white;
+	border: 2px solid #ddd;
+}
diff --git a/frontend/src/styles/variables.scss b/frontend/src/styles/variables.scss
index 0620b62..db5ae5b 100644
--- a/frontend/src/styles/variables.scss
+++ b/frontend/src/styles/variables.scss
@@ -1,12 +1,7 @@
-$metakgp-black: #242424;
-$font-color: #fefefe;
-$font-color-darker: #d3d1d1;
+$font-color: #f0f0f0;
+$surface-1: lighten(black, 15);
+$error-color: #e65f3f;
+
+// Fonts
 $metakgp-font: "Titillium Web", sans-serif;
 $cursive-font: "Kalam", sans-serif;
-$accent-color: #1453b8;
-$accent-color-lighter: #4786eb;
-$accent-color-darker: #0f3e8a;
-$accent-color-disabled: #3d5c8f;
-$surface-1: #413e3f;
-$surface-2: #4b4b4b;
-$error-color: crimson;