diff --git a/public/images/grid-background.jpg b/public/images/grid-background.jpg
new file mode 100644
index 0000000..e6f0e84
Binary files /dev/null and b/public/images/grid-background.jpg differ
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index deb40e6..e456c92 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -17,6 +17,9 @@ const Header = () => {
           <li>
             <Link to="/login">Login</Link>
           </li>
+          <li>
+            <Link to="/assignment">Assignment</Link>
+          </li>
         </ul>
       </nav>
     </header>
diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx
index d23c456..8eb0022 100644
--- a/src/components/Hero.jsx
+++ b/src/components/Hero.jsx
@@ -6,10 +6,10 @@ function Hero() {
   return (
     <section className="hero">
       <div className="hero-text">
-        <p className="intro">Welcome to BattleSnake!!!</p>
+        <p className="intro">Welcome to Bytecamp!!!</p>
         <h1>Play for Fun!</h1>
         <p className="desc">
-          A competitive game where your code is the controller. All you need is
+          A competitive game where your code is the controller.<br /> All you need is
           a web server that responds to the Battlesnake API.
         </p>
         <button className="cta">Start Battle</button>
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index a705b7e..7b94987 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -1,19 +1,41 @@
-import React from 'react'
-import '../scss/styles.scss'
-import '../scss/components/_navbar.scss'
+import React from "react";
+import "../scss/styles.scss";
+import "../scss/components/_navbar.scss";
+import { Link } from "react-router-dom";
 
 const Navbar = () => {
   return (
     <nav className="navbar">
       <div className="navbar__logo">MyApp</div>
       <ul className="navbar__links">
-        <li><a href="/" className="navbar__link">Home</a></li>
-        <li><a href="/notebook" className="navbar__link">NoteBook</a></li>
-        <li><a href="/assignment" className="navbar__link">Assignment</a></li>
-        <li><a href="/editor" className="navbar__link">Editor</a></li>
+        <li>
+          <Link to="/" className="navbar__link">
+            Home
+          </Link>
+        </li>
+        <li>
+          <Link to="/notebook" className="navbar__link">
+            NoteBook
+          </Link>
+        </li>
+        <li>
+          <Link to="/assignment" className="navbar__link">
+            Assignment
+          </Link>
+        </li>
+        <li>
+          <Link to="/editor" className="navbar__link">
+            Editor
+          </Link>
+        </li>
+        <li>
+          <Link to="/login" className="navbar__link">
+            Login
+          </Link>
+        </li>
       </ul>
     </nav>
-  )
-}
+  );
+};
 
-export default Navbar
\ No newline at end of file
+export default Navbar;
diff --git a/src/main.jsx b/src/main.jsx
index b80fa22..f7abc3f 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -5,11 +5,10 @@ import "./scss/styles.scss";
 import Navbar from "./components/Navbar";
 import Hero from "./components/Hero";
 import Services from "./components/Services";
+import Header from "./components/Header";
 
 createRoot(document.getElementById("root")).render(
   <StrictMode>
-    
     <AppRouter />
-    
   </StrictMode>
 );
diff --git a/src/pages/AssignmentPage.jsx b/src/pages/AssignmentPage.jsx
new file mode 100644
index 0000000..ede6235
--- /dev/null
+++ b/src/pages/AssignmentPage.jsx
@@ -0,0 +1,107 @@
+// Page - Assignment
+import { useEffect, useState } from 'react';
+import '../scss/styles.scss';
+
+const AssignmentPage = () => {
+    const [files, setFiles] = useState([]);
+    
+    useEffect(() => {
+        document.title = 'Assignment';
+    }, []);
+
+    const handleFileChange = (e) => {
+        if (e.target.files) {
+            const newFiles = Array.from(e.target.files);
+            setFiles(prevFiles => [...prevFiles, ...newFiles]);
+        }
+    };
+
+    const handleRemoveFile = (index) => {
+        setFiles(prevFiles => prevFiles.filter((_, i) => i !== index));
+    };
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        // Here you would typically send the files to a server
+        console.log('Files to submit:', files);
+        alert('Assignment submitted successfully!');
+    };
+
+    return (
+        <main className="assignment-page">
+            <section>
+                <div className="assignment-header">
+                    <h2>Assignment Submission</h2>
+                    <div className="due-date">
+                        <p>Due on Jan 16, 2025 11:59 PM</p>
+                    </div>
+                </div>
+                
+                <div className="assignment-container">
+                    <div className="assignment-info">
+                        <h3>Submit Assignment</h3>
+                        <p className="files-count">({files.length}) file(s) to submit</p>
+                        <p className="submission-note">After uploading, you must click Submit to complete the submission.</p>
+                    </div>
+                    
+                    <div className="file-upload-section">
+                        <div className="upload-buttons">
+                            <label className="file-upload-btn">
+                                <input 
+                                    type="file" 
+                                    multiple 
+                                    onChange={handleFileChange} 
+                                    style={{ display: 'none' }}
+                                />
+                                Add a File
+                            </label>
+                            <button className="record-audio-btn">Record Audio</button>
+                            <button className="record-video-btn">Record Video</button>
+                        </div>
+                        
+                        {files.length > 0 && (
+                            <div className="files-list">
+                                <h4>Selected Files:</h4>
+                                <ul>
+                                    {files.map((file, index) => (
+                                        <li key={index} className="file-item">
+                                            <span className="file-name">{file.name}</span>
+                                            <span className="file-size">({(file.size / 1024).toFixed(2)} KB)</span>
+                                            <button 
+                                                className="remove-file-btn"
+                                                onClick={() => handleRemoveFile(index)}
+                                            >
+                                                Remove
+                                            </button>
+                                        </li>
+                                    ))}
+                                </ul>
+                            </div>
+                        )}
+                    </div>
+                    
+                    <div className="comments-section">
+                        <h4>Comments</h4>
+                        <textarea 
+                            placeholder="Add a comment (optional)"
+                            rows="4"
+                        ></textarea>
+                    </div>
+                    
+                    <div className="submission-buttons">
+                        <button 
+                            className="submit-btn"
+                            onClick={handleSubmit}
+                            disabled={files.length === 0}
+                        >
+                            Submit
+                        </button>
+                        <button className="cancel-btn">Cancel</button>
+                    </div>
+                </div>
+            </section>
+        </main>
+    );
+};
+
+export default AssignmentPage;
diff --git a/src/pages/LoginPage.jsx b/src/pages/LoginPage.jsx
index e7b1385..e3b4712 100644
--- a/src/pages/LoginPage.jsx
+++ b/src/pages/LoginPage.jsx
@@ -8,7 +8,7 @@ const LoginPage = () => {
   const [type, setType] = useState("signIn");
 
   useEffect(() => {
-    document.title = "Login / Sign Up";
+    document.title = "Login / Instructor";
   }, []);
 
   const handleOnClick = (text) => {
@@ -23,7 +23,7 @@ const LoginPage = () => {
   return (
     <main className="login-page">
       <section>
-        <h2>Sign In/Sign Up</h2>
+        <h2>Student/Instructor</h2>
         <div className={containerClass} id="container">
           <SignUpForm />
           <SignInForm />
@@ -31,26 +31,24 @@ const LoginPage = () => {
             <div className="overlay">
               <div className="overlay-panel overlay-left">
                 <h1>Welcome Back!</h1>
-                <p>
-                  To keep connected with us please login with your personal info
-                </p>
+                <p>Please login with your personal info</p>
                 <button
                   className="ghost"
                   id="signIn"
                   onClick={() => handleOnClick("signIn")}
                 >
-                  Sign In
+                  Student
                 </button>
               </div>
               <div className="overlay-panel overlay-right">
-                <h1>Hello, Friend!</h1>
-                <p>Enter your personal details and start journey with us</p>
+                <h1>Hello, Instructor!</h1>
+                <p>Please enter your personal details here</p>
                 <button
                   className="ghost"
                   id="signUp"
                   onClick={() => handleOnClick("signUp")}
                 >
-                  Sign Up
+                  Instructor
                 </button>
               </div>
             </div>
diff --git a/src/pages/SignIn.jsx b/src/pages/SignIn.jsx
index b6a203a..9976eb5 100644
--- a/src/pages/SignIn.jsx
+++ b/src/pages/SignIn.jsx
@@ -31,22 +31,16 @@ function SignInForm() {
   return (
     <div className="form-container sign-in-container">
       <form onSubmit={handleOnSubmit}>
-        <h1>Sign in</h1>
-        <div className="social-container">
-          <a href="#" className="social">
-            <i className="fab fa-facebook-f" />
-          </a>
+        <h1>Student</h1>
+        {/* <div className="social-container">
           <a href="#" className="social">
             <i className="fab fa-google-plus-g" />
           </a>
-          <a href="#" className="social">
-            <i className="fab fa-linkedin-in" />
-          </a>
-        </div>
-        <span>or use your account</span>
+        </div> */}
+
         <input
           type="email"
-          placeholder="Email"
+          placeholder="Student Name"
           name="email"
           value={state.email}
           onChange={handleChange}
@@ -58,7 +52,7 @@ function SignInForm() {
           value={state.password}
           onChange={handleChange}
         />
-        <a href="#">Forgot your password?</a>
+
         <button>Sign In</button>
       </form>
     </div>
diff --git a/src/pages/SignUp.jsx b/src/pages/SignUp.jsx
index 64d9042..cba2444 100644
--- a/src/pages/SignUp.jsx
+++ b/src/pages/SignUp.jsx
@@ -18,7 +18,7 @@ function SignUpForm() {
 
     const { name, email, password } = state;
     alert(
-      `You are sign up with name: ${name} email: ${email} and password: ${password}`
+      `You are signed in with name: ${name} email: ${email} and password: ${password}`
     );
 
     for (const key in state) {
@@ -32,17 +32,11 @@ function SignUpForm() {
   return (
     <div className="form-container sign-up-container">
       <form onSubmit={handleOnSubmit}>
-        <h1>Create Account</h1>
+        <h1>Instructor</h1>
         <div className="social-container">
-          <a href="#" className="social">
-            <i className="fab fa-facebook-f" />
-          </a>
           <a href="#" className="social">
             <i className="fab fa-google-plus-g" />
           </a>
-          <a href="#" className="social">
-            <i className="fab fa-linkedin-in" />
-          </a>
         </div>
         <span>or use your email for registration</span>
         <input
@@ -66,7 +60,7 @@ function SignUpForm() {
           onChange={handleChange}
           placeholder="Password"
         />
-        <button>Sign Up</button>
+        <button>Sign in</button>
       </form>
     </div>
   );
diff --git a/src/routers/AppRouter.jsx b/src/routers/AppRouter.jsx
index cff1ce3..c4ff117 100644
--- a/src/routers/AppRouter.jsx
+++ b/src/routers/AppRouter.jsx
@@ -11,6 +11,7 @@ import HomePage from "../pages/HomePage";
 import LoginPage from "../pages/LoginPage";
 import PageCodeEditor from "../pages/CodeEditor";
 import PageNotFound from "../pages/PageNotFound";
+import AssignmentPage from "../pages/AssignmentPage";
 import Hero from "../components/Hero";
 import Navbar from "../components/Navbar";
 import Services from "../components/Services";
@@ -19,32 +20,30 @@ const AppRouter = () => {
   return (
     <BrowserRouter>
       <div className="wrapper">
-        {/* <Header /> */}
         <Navbar />
         <Routes>
           <Route
             path="/"
             element={
-              // <ProtectedRoute>
-
-              <Hero />
-
-              // </ProtectedRoute>
+              <>
+                <Hero />
+                <Services />
+              </>
             }
           />
-          {/* <Services /> */}
-          <Route path="login" element={<LoginPage />} />
+          <Route path="/login" element={<LoginPage />} />
           <Route
-            path="editor"
+            path="/editor"
             element={
               <ProtectedRoute>
                 <PageCodeEditor />
               </ProtectedRoute>
             }
           />
+          <Route path="/assignment" element={<AssignmentPage />} />
           <Route path="*" element={<PageNotFound />} />
         </Routes>
-        <Services />
+
         <Footer />
       </div>
     </BrowserRouter>
diff --git a/src/scss/components/Hero.scss b/src/scss/components/Hero.scss
index b1cec79..3d2ab1c 100644
--- a/src/scss/components/Hero.scss
+++ b/src/scss/components/Hero.scss
@@ -4,9 +4,12 @@
     align-items: center;
     padding: 4rem 3rem;
     background-color: #f9f5f2;
+    padding-top: 40rem;
+    
   
     .hero-text {
       max-width: 50%;
+      margin-left: 3rem;
     //   font-family: "Limelight", sans-serif;
   
       .intro {
diff --git a/src/scss/components/_navbar.scss b/src/scss/components/_navbar.scss
index b68ac54..73679f9 100644
--- a/src/scss/components/_navbar.scss
+++ b/src/scss/components/_navbar.scss
@@ -6,6 +6,11 @@
     padding: 1rem 2rem;
     color: white;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1000;
+    width: 100%;
   
     &__logo {
       font-size: 1.5rem;
diff --git a/src/scss/page/_login.scss b/src/scss/page/_login.scss
index d80b2f5..145d026 100644
--- a/src/scss/page/_login.scss
+++ b/src/scss/page/_login.scss
@@ -1,3 +1,21 @@
+// .login-page {
+//   min-height: 100vh;
+//   display: flex;
+//   justify-content: center;
+//   align-items: center;
+
+//   background-image: url("../../../public/images/grid-background.png");
+//   background-size: cover;
+//   background-position: center;
+//   background-repeat: no-repeat;
+//   background-attachment: fixed;
+
+//   section {
+//     width: 100%;
+//     max-width: 800px;
+//     padding: 20px;
+//   }
+// }
 .App {
   font-family: sans-serif;
   text-align: center;
@@ -10,7 +28,12 @@
 }
 
 body {
-  background: #f6f5f7;
+  background: transparent;
+  background-image: url("../../../public/images/grid-background.jpg");
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-attachment: fixed;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -27,6 +50,8 @@ h1 {
 
 h2 {
   text-align: center;
+  color: #fff;
+  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
 }
 
 p {
@@ -227,8 +252,8 @@ input {
   justify-content: center;
   align-items: center;
   margin: 0 5px;
-  height: 40px;
-  width: 40px;
+  height: 60px;
+  width: 60px;
 }
 
 footer {
diff --git a/src/scss/page/assignment.scss b/src/scss/page/assignment.scss
new file mode 100644
index 0000000..04c9baf
--- /dev/null
+++ b/src/scss/page/assignment.scss
@@ -0,0 +1,198 @@
+// Assignment Page Styling
+
+.assignment-page {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 2rem;
+
+  section {
+    width: 100%;
+    max-width: 900px;
+  }
+
+  .assignment-header {
+    margin-bottom: 2rem;
+    border-bottom: 1px solid #e0e0e0;
+    padding-bottom: 1rem;
+
+    h2 {
+      font-size: 3rem;
+      margin-bottom: 1rem;
+      color: #ffffff;
+    }
+
+    .due-date {
+      color: #c6c6c6;
+      font-size: 1.2rem;
+    }
+  }
+
+  .assignment-container {
+    background-color: #fff;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    padding: 2rem;
+
+    .assignment-info {
+      margin-bottom: 2rem;
+
+      h3 {
+        font-size: 1.4rem;
+        margin-bottom: 0.5rem;
+        color: #333;
+      }
+
+      .files-count {
+        font-size: 1rem;
+        margin-bottom: 0.5rem;
+      }
+
+      .submission-note {
+        font-size: 0.9rem;
+        color: #666;
+      }
+    }
+
+    .file-upload-section {
+      margin-bottom: 2rem;
+
+      .upload-buttons {
+        display: flex;
+        gap: 1rem;
+        margin-bottom: 1.5rem;
+        flex-wrap: wrap;
+
+        .file-upload-btn,
+        .record-audio-btn,
+        .record-video-btn {
+          background-color: #f5f5f5;
+          border: 1px solid #ddd;
+          border-radius: 4px;
+          padding: 0.6rem 1rem;
+          cursor: pointer;
+          font-size: 0.9rem;
+          transition: all 0.2s ease;
+          color: #333;
+
+          &:hover {
+            background-color: #e9e9e9;
+          }
+        }
+      }
+
+      .files-list {
+        background-color: #f9f9f9;
+        border-radius: 6px;
+        padding: 1rem;
+
+        h4 {
+          margin-bottom: 0.8rem;
+          font-size: 1rem;
+        }
+
+        ul {
+          list-style: none;
+          padding: 0;
+
+          .file-item {
+            display: flex;
+            align-items: center;
+            padding: 0.5rem 0;
+            border-bottom: 1px solid #eee;
+
+            &:last-child {
+              border-bottom: none;
+            }
+
+            .file-name {
+              flex-grow: 1;
+              font-weight: 500;
+            }
+
+            .file-size {
+              color: #777;
+              margin: 0 1rem;
+              font-size: 0.8rem;
+            }
+
+            .remove-file-btn {
+              background-color: transparent;
+              border: none;
+              color: #ff5252;
+              cursor: pointer;
+              font-size: 0.8rem;
+              padding: 0.3rem 0.6rem;
+
+              &:hover {
+                text-decoration: underline;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .comments-section {
+      margin-bottom: 2rem;
+
+      h4 {
+        margin-bottom: 0.8rem;
+        font-size: 1rem;
+      }
+
+      textarea {
+        width: 100%;
+        border: 1px solid #ddd;
+        border-radius: 4px;
+        padding: 0.8rem;
+        font-family: inherit;
+        resize: vertical;
+
+        &:focus {
+          outline: none;
+          border-color: #4a90e2;
+        }
+      }
+    }
+
+    .submission-buttons {
+      display: flex;
+      gap: 1rem;
+
+      .submit-btn,
+      .cancel-btn {
+        padding: 0.7rem 1.5rem;
+        border-radius: 4px;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.2s ease;
+      }
+
+      .submit-btn {
+        background-color: #4a90e2;
+        color: white;
+        border: none;
+
+        &:hover {
+          background-color: #3a7bc8;
+        }
+
+        &:disabled {
+          background-color: #a0c3e8;
+          cursor: not-allowed;
+        }
+      }
+
+      .cancel-btn {
+        background-color: transparent;
+        border: 1px solid #ddd;
+        color: #666;
+
+        &:hover {
+          background-color: #f5f5f5;
+        }
+      }
+    }
+  }
+}
diff --git a/src/scss/styles.scss b/src/scss/styles.scss
index 6379fda..aeb88bb 100644
--- a/src/scss/styles.scss
+++ b/src/scss/styles.scss
@@ -13,6 +13,7 @@
 @use "./page//home";
 @use "./page//login";
 @use "./page/code_editor";
+@use "./page/assignment";
 
 // Utilities
 @use "./utilities/utility-classes";