diff --git a/package-lock.json b/package-lock.json
index e70ca3c..58d3025 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,6 +24,7 @@
         "font-awesome": "^4.7.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "react-icons": "^5.2.1",
         "react-router-dom": "^6.23.1",
         "react-scripts": "5.0.1",
         "styled-components": "^6.1.11",
@@ -15725,6 +15726,14 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "node_modules/react-icons": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.2.1.tgz",
+      "integrity": "sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
diff --git a/package.json b/package.json
index 7a0f26d..8593bc4 100644
--- a/package.json
+++ b/package.json
@@ -3,13 +3,13 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
     "@fortawesome/free-brands-svg-icons": "^6.5.2",
     "@fortawesome/free-regular-svg-icons": "^6.5.2",
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
     "@fortawesome/react-fontawesome": "^0.2.2",
-    "@emotion/react": "^11.11.4",
-    "@emotion/styled": "^11.11.5",
     "@mui/icons-material": "^5.15.18",
     "@mui/material": "^5.15.18",
     "@mui/styled-engine-sc": "^6.0.0-alpha.18",
@@ -19,6 +19,7 @@
     "font-awesome": "^4.7.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-icons": "^5.2.1",
     "react-router-dom": "^6.23.1",
     "react-scripts": "5.0.1",
     "styled-components": "^6.1.11",
diff --git a/src/App.js b/src/App.js
index 2569aa1..40ab9fa 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2,8 +2,10 @@ import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import Landingpage from "./pages/landingpage";
 import Home from "./pages/Home";
 import SignIn from "./pages/SignIn";
+import CourseFiles from "./pages/CourseFiles";
 import SignUp from "./pages/SignUp";
 
+
 function App() {
   return (
     <Router>
@@ -11,8 +13,11 @@ function App() {
         <Route path="/" element={<Landingpage />} />
 
         <Route path="/Home" element={<Home />} />
-        <Route path="/SignUp" element={<SignUp />} />
         <Route path="/SignIn" element={<SignIn />} />
+
+        <Route path="/SignUp" element={<SignUp />} />
+
+        <Route path="/CourseFiles" element={<CourseFiles />} />
       </Routes>
     </Router>
   );
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index 122a8a5..a5f0738 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -1,31 +1,29 @@
-import React from "react";
+import React, { useState } from "react";
 import "../styles/Navbar.css";
 import MenuIcon from "@mui/icons-material/Menu";
-import { useState } from "react";
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 
 const Navbar = () => {
   const [showNav, setShowNav] = useState(false);
-  const [showYearDrop, setShowYearDrop] =useState(false)
+  const [showYearDrop, setShowYearDrop] = useState(false);
 
   const handleHamburgerClick = () => {
     setShowNav(!showNav);
   };
+
   const showYearDropDown = () => {
-    setShowYearDrop(!showYearDrop)
-  }
+    setShowYearDrop(!showYearDrop);
+  };
+
   return (
     <>
       <div className="nav">
         <div>
           <div className="Address">
             <img src="./acesLogo.jpeg" alt="aceslogo" />
-
             <h3 className="poppins-regular">Hi, Logical883</h3>
           </div>
-
           <p className="email">logical@gmail.com</p>
-
           <div className="hamburger-icon">
             <MenuIcon
               onClick={handleHamburgerClick}
@@ -37,44 +35,31 @@ const Navbar = () => {
           <ul className="mainLinks">
             <li>
               <div>
-              <a href="#">Select Year <ExpandMoreIcon/></a>
+                <a href="#" className="nav-link">
+                  <span>Select Year</span> <ExpandMoreIcon className="icon" />
+                </a>
               </div>
               <ul className="dropdown">
-                <li>
-                  <a href="#">Year 1</a>
-                </li>
-                <li>
-                  <a href="#">Year 2</a>
-                </li>
-                <li>
-                  <a href="#">Year 3</a>
-                </li>
-                <li>
-                  <a href="#">Year 4</a>
-                </li>
+                <li><a href="#">Year 1</a></li>
+                <li><a href="#">Year 2</a></li>
+                <li><a href="#">Year 3</a></li>
+                <li><a href="#">Year 4</a></li>
               </ul>
             </li>
             <li>
-              <a href="#">More Info <ExpandMoreIcon/></a>
+              <a href="#" className="nav-link">
+                <span>More Info</span> <ExpandMoreIcon className="icon" />
+              </a>
               <ul className="dropdown">
-                <li>
-                  <a href="#">Team</a>
-                </li>
-                <li>
-                  <a href="#">History</a>
-                </li>
-                <li>
-                  <a href="#">Mission</a>
-                </li>
+                <li><a href="#">Team</a></li>
+                <li><a href="#">History</a></li>
+                <li><a href="#">Mission</a></li>
               </ul>
             </li>
             <li>
-              <a href="#">User Instructions <ExpandMoreIcon/></a>
-              {/* <ul className="dropdown">
-            <li><a href="#">Web Development</a></li>
-            <li><a href="#">Graphic Design</a></li>
-            <li><a href="#">Consulting</a></li>
-          </ul> */}
+              <a href="#" className="nav-link">
+                <span>User Instructions</span> <ExpandMoreIcon className="icon" />
+              </a>
             </li>
           </ul>
         </div>
@@ -85,51 +70,38 @@ const Navbar = () => {
           <h3 className="poppins-regular">Hi, Logical883</h3>
         </div>
         <p className="email">logical@gmail.com</p>
-
         <ul className="sideLinks">
           <li>
-            <a href="#"  onClick={showYearDropDown }><ExpandMoreIcon/>Select Year</a>
+            <a href="#" onClick={showYearDropDown} className="nav-link">
+              <ExpandMoreIcon className="icon" />
+              <span style={{ marginLeft: "5px" }}>Select Year</span>
+            </a>
             <ul className={`sidedropdown ${showYearDrop ? "active" : ""}`}>
-              <li>
-                <a href="#">Year 1</a>
-              </li>
-              <li>
-                <a href="#">Year 2</a>
-              </li>
-              <li>
-                <a href="#">Year 3</a>
-              </li>
-              <li>
-                <a href="#">Year 4</a>
-              </li>
+              <li><a href="#">Year 1</a></li>
+              <li><a href="#">Year 2</a></li>
+              <li><a href="#">Year 3</a></li>
+              <li><a href="#">Year 4</a></li>
             </ul>
           </li>
           <li>
-            <a href="#"><ExpandMoreIcon/>More Info</a>
+            <a href="#" className="nav-link">
+              <ExpandMoreIcon className="icon" />
+              More Info
+            </a>
             <ul className="dropdown">
-              <li>
-                <a href="#">Team</a>
-              </li>
-              <li>
-                <a href="#">History</a>
-              </li>
-              <li>
-                <a href="#">Mission</a>
-              </li>
+              <li><a href="#">Team</a></li>
+              <li><a href="#">History</a></li>
+              <li><a href="#">Mission</a></li>
             </ul>
           </li>
           <li>
-            <a href="#"><ExpandMoreIcon/>User Instructions</a>
-            {/* <ul className="dropdown">
-            <li><a href="#">Web Development</a></li>
-            <li><a href="#">Graphic Design</a></li>
-            <li><a href="#">Consulting</a></li>
-          </ul> */}
+            <a href="#" className="nav-link">
+              <ExpandMoreIcon className="icon" />
+              User Instructions
+            </a>
           </li>
         </ul>
-        <button className="logout-button">
-          Log Out
-        </button>
+        <button className="logout-button">Log Out</button>
       </div>
     </>
   );
diff --git a/src/index.css b/src/index.css
index 4585429..c801f82 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,4 +1,10 @@
+
+/* body {
+  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
+    url("./assets/gradient_2.jpg");
+} */
+
 /* body {
     background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
       url("./assets/gradient_2.jpg");
-  } */
\ No newline at end of file
+  } */
diff --git a/src/pages/CourseFiles.js b/src/pages/CourseFiles.js
new file mode 100644
index 0000000..cdcf08f
--- /dev/null
+++ b/src/pages/CourseFiles.js
@@ -0,0 +1,49 @@
+import React from "react";
+import "../styles/coursefiles.css";
+import { Link } from "react-router-dom";
+
+import { FaBook, FaDownload } from "react-icons/fa";
+import Navbar from "../components/Navbar";
+
+function CourseFiles() {
+  const courses = [
+    "Algebra",
+    "Applied Electricity",
+    "Basic Mechanics",
+    "Comm. Skills",
+    "Environ. Studies",
+  ];
+
+  return (
+    <>
+      <Navbar />
+      <div className="cf-container">
+        <h1 className="cf-heading">ACES Course Files</h1>
+        <div className="cf-content">
+          <h2>First Semester</h2>
+          <ul>
+            {courses.map((course) => (
+              <li key={course}>
+                <FaBook /> {course} <FaDownload />
+              </li>
+            ))}
+          </ul>
+          <Link
+            to="/Home"
+            style={{ textDecoration: "None", textAlign: "center" }}
+            className="go-back"
+          >
+            <button
+              style={{ background: "inherit", border: "none", color: "#000" }}
+              className="go-back-icon"
+            >
+              Back
+            </button>
+          </Link>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default CourseFiles;
diff --git a/src/pages/Home.js b/src/pages/Home.js
index e4bb279..77a507b 100644
--- a/src/pages/Home.js
+++ b/src/pages/Home.js
@@ -1,4 +1,5 @@
 import "../styles/Home.css"
+import { Link } from "react-router-dom";
 import Navbar from "../components/Navbar";
 
 function Home() {
@@ -10,26 +11,34 @@ function Home() {
       <div className="course-Container">
          <div>
         <div className="course">
+        <Link to="/CourseFiles" style={{textDecoration: 'None'}}>
           <img src="./acesLogo.jpeg" alt="computer enginerring logo" />
-          <h2>computer</h2>
+          <h2>Computer</h2>
           <h2>Engineering</h2>
+        </Link>
         </div>
         <div className="course">
+        <Link to="/CourseFiles" style={{textDecoration: 'None'}}>
           <img src="./acesLogo.jpeg" alt="computer enginerring logo" />
-          <h2>computer</h2>
+          <h2>Computer</h2>
           <h2>Engineering</h2>
+        </Link>
         </div>
         </div>
         <div>
         <div className="course">
+        <Link to="/CourseFiles" style={{textDecoration: 'None'}}>
           <img src="./acesLogo.jpeg" alt="computer enginerring logo" />
-          <h2>computer</h2>
+          <h2>Computer</h2>
           <h2>Engineering</h2>
+        </Link>
         </div>
         <div className="course">
+        <Link to="/CourseFiles" style={{textDecoration: 'None'}}>
           <img src="./acesLogo.jpeg" alt="computer enginerring logo" />
-          <h2>computer</h2>
+          <h2>Computer</h2>
           <h2>Engineering</h2>
+        </Link>
         </div>
         </div>
       </div>
diff --git a/src/pages/landingpage.jsx b/src/pages/landingpage.jsx
index a33c8ac..0086abb 100644
--- a/src/pages/landingpage.jsx
+++ b/src/pages/landingpage.jsx
@@ -5,11 +5,8 @@ const Landingpage = () => {
   return (
     <div>
       <div className="App">
-        <Link to="/Home" style={{ textDecoration: "None", color: "#fff" }}>
-          Home
-        </Link>
-        <div className="container">
-          <div className="content">
+        <div className="Landingcontainer">
+          <div className="Landingcontent">
             <h2>CBET</h2>
 
             <p>
@@ -25,19 +22,64 @@ const Landingpage = () => {
               <img src="./acesLogo.jpeg" alt="aceslogo" />
             </div>
             <div className="buttons">
+              {/* <button className="login-button"><Link to="/SignUp" style={{textDecoration: 'None', color: '#fff'}}>Sign Up</Link></button>
+              <button className="login-button"><Link to="/SignIn" style={{textDecoration: 'None', color: '#fff'}}>Login</Link></button>
+              <button className="login-button"><Link to="/Home" style={{textDecoration: 'None', color: '#fff'}}>Home</Link></button> */}
+
               <Link
                 to="/SignUp"
-                style={{ textDecoration: "None", textAlign:"center"}}
+                style={{ textDecoration: "None", textAlign: "center" }}
+                className="login-button"
               >
-                <button style={{ background:"inherit", border:"none", color:"white" }}>Sign Up</button>
+                <button
+                  style={{
+                    background: "inherit",
+                    border: "none",
+                    color: "white",
+                  }}
+                >
+                  Sign Up
+                </button>
               </Link>
 
               <Link
                 to="/SignIn"
-                style={{ textDecoration: "None", textAlign:"center" }}
+                style={{
+                  textDecoration: "None",
+                  textAlign: "center",
+                  marginLeft: 15,
+                }}
+                className="login-button"
+              >
+                <button
+                  style={{
+                    background: "inherit",
+                    border: "none",
+                    color: "white",
+                  }}
+                >
+                  Login
+                </button>
+              </Link>
+
+              <Link
+                to="/Home"
+                style={{
+                  textDecoration: "None",
+                  textAlign: "center",
+                  marginLeft: 15,
+                }}
                 className="login-button"
               >
-                <button  style={{ background:"inherit", border:"none", color:"white" }}>Login</button>
+                <button
+                  style={{
+                    background: "inherit",
+                    border: "none",
+                    color: "white",
+                  }}
+                >
+                  Home
+                </button>
               </Link>
             </div>
           </div>
diff --git a/src/styles/Navbar.css b/src/styles/Navbar.css
index 5d605bf..79365fa 100644
--- a/src/styles/Navbar.css
+++ b/src/styles/Navbar.css
@@ -188,5 +188,23 @@
   .logout-button:hover {
     background-color: #ff3737; /* darker red on hover */
   }
+  
+}
+
+.nav-link {
+  display: inline-flex;
+  align-items: center;
+  text-decoration: none;
+  color: white;
 }
 
+.nav-link span {
+  margin-right: 5px; /* Adjust the spacing as needed */
+}
+
+.icon {
+  vertical-align: middle;
+}
+
+
+
diff --git a/src/styles/coursefiles.css b/src/styles/coursefiles.css
new file mode 100644
index 0000000..7270941
--- /dev/null
+++ b/src/styles/coursefiles.css
@@ -0,0 +1,314 @@
+.cf-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-top: 50px;
+    height: 100vh;
+    position: relative;
+  }
+
+
+.cf-heading {
+    color: #ffffff;
+    margin-top: 90px;
+    margin-left: 10px;
+    padding: 0 20px;
+    text-align: left;
+    font-weight: bolder;
+    font-size: 24px;
+  }
+  
+
+.cf-content {
+    background-color: #ffffff;
+    font-weight: bold;
+    border-top-left-radius: 50px;
+    border-top-right-radius: 50px;
+    padding-bottom: 10px;
+    width: 100%;
+    padding: 20px;
+    align-items: center;
+    position: absolute;
+    bottom: 0;
+    display: flex;
+    flex-direction: column;
+    height: 75vh;
+  }
+  
+
+.cf-content h2 {
+    position: absolute;
+    top: 5%;
+    margin-top: 0;
+    color: #002366;
+    margin-bottom: 20px;
+}
+
+.cf-content ul {
+    position: absolute;
+    top: 17%;
+    list-style: none;
+    text-align: center;
+    width: 100%;
+    padding: 0;
+    margin: 0;
+
+    }
+    
+    .cf-content li {
+    background-color: #f0f0f0;
+    width: calc(90% - 10px);
+    margin-bottom: 10px;
+    padding: 15px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-radius: 5px;
+    transition: background-color 0.3s ease;
+    margin-left: auto;
+    margin-right: auto;
+    }
+
+.cf-content li:hover {
+background-color: #e0e0e0;
+}
+
+.cf-content i {
+color: #002366;
+}
+
+.go-back {
+  position: inherit;
+  width: 30px;
+  height: 30px;
+  bottom: 12%;
+}
+
+.go-back-icon {
+  color: #ffffff;
+  width: 30px;
+  height: 30px;
+  padding: 0;
+  margin: 0;
+}
+
+@media (min-width: 1058px) {
+    .cf-container {
+      padding-top: 20px;
+      justify-content: center;
+    }
+  
+    .cf-content {
+      width: 60%;
+      max-width: 600px;
+      height: auto;
+      border-radius: 10px;
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+      position: relative;
+      bottom: auto;
+      padding: 40px;
+    }
+    .cf-content h2 {
+        position: static;
+        color: #002366;
+        margin-bottom: 20px;
+        }
+        
+        .cf-content ul {
+            position: static;
+        list-style: none;
+        text-align: center;
+        width: 100%;
+        padding: 0;
+        margin: auto;
+
+        }
+        
+        .cf-content li {
+        background-color: #f0f0f0;
+        width: calc(90% - 10px);
+        margin-bottom: 10px;
+        padding: 15px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        border-radius: 5px;
+        transition: background-color 0.3s ease;
+        margin-left: auto;
+        margin-right: auto;
+        }
+        
+        .cf-content li:hover {
+        background-color: #e0e0e0;
+        }
+        
+        .cf-content i {
+        color: #002366;
+        }
+
+        .go-back {
+          /* position: absolute; */
+          position: static;
+          width: 30px;
+          height: 30px;
+          /* top: 20%;
+          left: 2%; */
+        }
+
+        .go-back-icon {
+          color: #ffffff;
+          width: 30px;
+          height: 30px;
+          padding: 0;
+          margin: 0;
+        }
+  }
+  
+  
+  @media (min-width: 902px) {
+    .cf-container {
+      padding-top: 20px;
+      justify-content: center;
+    }
+  
+    .cf-content {
+      width: 60%;
+      max-width: 600px;
+      height: auto;
+      border-radius: 10px;
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+      position: relative;
+      bottom: auto;
+      padding: 40px;
+    }
+
+    .cf-content h2 {
+        /* position: static; */
+        color: #002366;
+        margin-bottom: 20px;
+        }
+        
+        .cf-content ul {
+            position: static;
+            list-style: none;
+            text-align: center;
+            width: 100%;
+            padding: 0;
+            margin: auto;
+    
+            }
+            
+            .cf-content li {
+            background-color: #f0f0f0;
+            width: calc(90% - 10px);
+            margin-bottom: 10px;
+            padding: 15px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            border-radius: 5px;
+            transition: background-color 0.3s ease;
+            margin-left: auto;
+            margin-right: auto;
+            }
+        
+        .cf-content li:hover {
+        background-color: #e0e0e0;
+        }
+        
+        .cf-content i {
+        color: #002366;
+        }
+
+        .go-back {
+          /* position: absolute; */
+          position: static;
+          width: 30px;
+          height: 30px;
+          /* top: 20%;
+          left: 2%; */
+        }
+
+        .go-back-icon {
+          color: #ffffff;
+          width: 30px;
+          height: 30px;
+          padding: 0;
+          margin: 0;
+        }
+  
+  }
+  
+  
+  @media (min-width: 608px) {
+    .cf-container {
+      padding-top: 20px;
+      justify-content: center;
+    }
+  
+    .cf-content {
+      width: 60%;
+      max-width: 600px;
+      height: auto;
+      border-radius: 10px;
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+      position: relative;
+      bottom: auto;
+      padding: 40px;
+    }
+
+    .cf-content h2 {
+        position: static;
+        color: #002366;
+        margin-bottom: 20px;
+        }
+        
+        .cf-content ul {
+            position: static;
+            list-style: none;
+            text-align: center;
+            width: 100%;
+            padding: 0;
+            margin: auto;
+    
+            }
+            
+            .cf-content li {
+            background-color: #f0f0f0;
+            width: calc(90% - 10px);
+            margin-bottom: 10px;
+            padding: 15px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            border-radius: 5px;
+            transition: background-color 0.3s ease;
+            margin-left: auto;
+            margin-right: auto;
+            }
+        
+        .cf-content li:hover {
+        background-color: #e0e0e0;
+        }
+        
+        .cf-content i {
+        color: #002366;
+        }
+
+        .go-back {
+          /* position: absolute; */
+          position: static;
+          width: 30px;
+          height: 30px;
+          /* top: 20%;
+          left: 2%; */
+        }
+
+        .go-back-icon {
+          color: #ffffff;
+          width: 30px;
+          height: 30px;
+          padding: 0;
+          margin: 0;
+        }
+  }
\ No newline at end of file
diff --git a/src/styles/landingPage.css b/src/styles/landingPage.css
index a5eb959..c7ff72c 100644
--- a/src/styles/landingPage.css
+++ b/src/styles/landingPage.css
@@ -7,29 +7,29 @@
   box-sizing: border-box;
   font-family: "poppins";
 }
-.container{
+.Landingcontainer{
   max-width: 1440px;
   padding: 0 50px;
   margin: 0 auto;
 }
-.content{
+.Landingcontent{
   display: flex;
   flex-direction: column;
   width: 60%;
   justify-content: center;
   height: 90vh;
 }
-.content h2{
+.Landingcontent h2{
   font-size: 4.5rem;
-  color: #fff;
+  color: #ffffff;
   font-family: "ubuntu",sans-serif;
 }
-.content p{
+.Landingcontent p{
   color: #fff;
   line-height: 2;
   margin-top: 1rem;
 }
-.content a{
+.Landingcontent a{
   display: block;
   margin: 2rem 0;
   width: 21%;
@@ -43,13 +43,13 @@
   transition: all 0.3s ease-in-out;
   
 }
-.content .login-button{
+/* .Landingcontent .login-button{
   margin-left: 30px;
-}
-.content button:hover,i:hover{
+} */
+.Landingcontent button:hover,i:hover{
   background: #3498db;
 }
-.content .logos{
+.Landingcontent .logos{
   display: flex;
 
   width: 50%;
@@ -59,8 +59,8 @@
 
 
 }
-.content .logos img{
-  width: 40px;
+.Landingcontent .logos img{
+  width: 60px;
   border-radius: 50px;
   transition: all 0.5s ease-in-out;
   margin: 10px;
@@ -81,25 +81,25 @@
 
 /* responsiveness */
 @media(max-width: 1058px){
-  .container{
+  .Landingcontainer{
     padding: 0 25px;
   }
-  .content h2{
+  .Landingcontent h2{
     font-size: 4rem;
   }
-  .content p{
+  .Landingcontent p{
     display: none;
   }
-  .content .logos img{
+  .Landingcontent .logos img{
     margin: 5px 5px;
   }
-  .content .login-button{
+  .Landingcontent .login-button{
     margin-left: 20px;
   }
   
 }
 @media(max-width: 902px){
-  .content{
+  .Landingcontent{
     display: flex;
     flex-direction: column;
     width:100%;
@@ -107,10 +107,10 @@
     height: 90vh;
     align-items: center;
   }
-  .content h2{
+  .Landingcontent h2{
     font-size: 3.5rem;
   }
-  .content a{
+  .Landingcontent a{
     width: 90%;
     margin: 10px 0px;
     background-color: #011298;
@@ -118,7 +118,7 @@
    margin-left: 20px;
     
   }
-  .content .buttons{
+  .Landingcontent .buttons{
     flex-direction: column;
     width: 100%;
     position: absolute; 
@@ -131,17 +131,17 @@
     
   }
   
-  .content .logos{
+  .Landingcontent .logos{
     justify-content: center;
     width: 5%;
 
   }
 }
 @media(max-width: 562px){
-  .content h2{
+  .Landingcontent h2{
     font-size: 2.5rem;
   }
-  .content .buttons{
+  .Landingcontent .buttons{
     flex-direction: column;
     width: 100%;
     position: absolute; 
diff --git a/src/styles/signin.css b/src/styles/signin.css
index b36b688..5e13549 100644
--- a/src/styles/signin.css
+++ b/src/styles/signin.css
@@ -92,7 +92,7 @@
 
 .iconContainer {
   position: relative;
-  margin-right: -11px;
+  margin-right: -12px;
 }
 
 .icon {
@@ -202,7 +202,7 @@
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     position: relative;
     bottom: auto;
-    padding: 40px;
+    padding: 10px 40px 14px 40px;
   }
 
   .signInText {
@@ -244,6 +244,7 @@
     width: 30%;
     padding: 15px;
     font-size: 16px;
+    margin-bottom: 10px;
   }
 
   .forgotPassword {
@@ -251,17 +252,19 @@
   }
 
   .socialIcons {
-    margin-top: 20px;
+    margin-top: 10px;
   }
 
   .socialIcon {
     width: 30px;
     height: 30px;
-    margin: 10px;
+    margin: 5px;
   }
 
   .signUpText {
     font-size: 18px;
+    padding: 0;
+    margin: 0;
   }
 }
 
@@ -280,7 +283,7 @@
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     position: relative;
     bottom: auto;
-    padding: 40px;
+    padding: 10px 40px 14px 40px;
   }
 
   .signInText {
@@ -315,7 +318,7 @@
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     position: relative;
     bottom: auto;
-    padding: 40px;
+    padding: 10px 40px 14px 40px;
   }
 
   .signInText {
diff --git a/src/styles/signup.css b/src/styles/signup.css
index b253580..5e47dde 100644
--- a/src/styles/signup.css
+++ b/src/styles/signup.css
@@ -206,8 +206,8 @@
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     position: relative;
     bottom: auto;
-    padding: 20px;
-    margin: 20px;
+    padding: 10px 40px 14px 40px;
+    margin: 10px;
   }
 
   .signInText {
@@ -248,6 +248,7 @@
   .signInButton {
     width: 30%;
     /* padding: 15px; */
+    margin-bottom: 0;
     font-size: 16px;
   }
 
@@ -267,6 +268,8 @@
 
   .signUpText {
     font-size: 18px;
+    margin: 5px;
+    padding: 0;
   }
 }
 
@@ -285,7 +288,7 @@
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     position: relative;
     bottom: auto;
-    padding: 40px;
+    padding: 10px 40px 14px 40px;
   }
 
   .signInText {
@@ -320,7 +323,7 @@
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     position: relative;
     bottom: auto;
-    padding: 40px;
+    padding: 10px 40px 14px 40px;
   }
 
   .signInText {