diff --git a/.env.development b/.env.development
new file mode 100644
index 0000000..7affb16
--- /dev/null
+++ b/.env.development
@@ -0,0 +1,2 @@
+VITE_AUTH_URL="http://localhost:8080"
+VITE_ASSIGNMENT_URL="http://localhost:8082"
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index a547bf3..838b852 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,6 +7,7 @@ yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 
+*.env
 node_modules
 dist
 dist-ssr
@@ -22,3 +23,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
diff --git a/src/pages/AssignmentPage.jsx b/src/pages/AssignmentPage.jsx
index a5de99c..f66dbff 100644
--- a/src/pages/AssignmentPage.jsx
+++ b/src/pages/AssignmentPage.jsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
-import "../scss/components/_assignment.scss";
-import {useNavigate } from "react-router-dom";
+import "../scss/page/_assignment.scss";
+import { useNavigate } from "react-router-dom";
 
 const AssignmentPage = () => {
   const [assignmentId, setAssignmentId] = useState("");
@@ -30,7 +30,6 @@ const AssignmentPage = () => {
   useEffect(() => {
     document.title = "Assignment";
     fetchAssignments();
-  
   }, []);
 
   useEffect(() => {
@@ -137,7 +136,7 @@ const AssignmentPage = () => {
 
   const handleEditClick = (qrCodeNumber) => {
     console.log("Navigating to editor with QR Code Number:", qrCodeNumber);
-    navigate('/editor', { state: { qrCodeNumber: qrCodeNumber } });
+    navigate("/editor", { state: { qrCodeNumber: qrCodeNumber } });
   };
 
   const handleSubmit = async (e) => {
@@ -370,23 +369,35 @@ const AssignmentPage = () => {
 
               <div>
                 <label>File Upload (optional)</label>
-                <input type="file" onChange={(e) => setFile(e.target.files[0])} />
+                <input
+                  type="file"
+                  onChange={(e) => setFile(e.target.files[0])}
+                />
               </div>
 
-              {loading && (
-                <div className="spinner-container">
-                  <div className="spinner"></div>
-                  <p>Uploading...</p>
-                </div>
-              )}
+              <div className="modal-footer">
+                {loading && (
+                  <div className="spinner-container">
+                    <div className="spinner"></div>
+                    <span>Uploading...</span>
+                  </div>
+                )}
 
-              <div className="modal-buttons">
-                <button type="submit" disabled={loading}>
-                  {editingIndex !== null ? "Update" : "Submit"}
-                </button>
-                <button type="button" onClick={() => { resetForm(); setShowModal(false); }} disabled={loading}>
-                  Cancel
-                </button>
+                <div className="modal-buttons">
+                  <button type="submit" disabled={loading}>
+                    {editingIndex !== null ? "Update" : "Submit"}
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => {
+                      resetForm();
+                      setShowModal(false);
+                    }}
+                    disabled={loading}
+                  >
+                    Cancel
+                  </button>
+                </div>
               </div>
             </form>
           </div>
@@ -400,7 +411,7 @@ const AssignmentPage = () => {
               if (!searchTerm.trim()) return true;
               const regex = new RegExp(searchTerm, "i");
               return (
-                regex.test(project.studentname ||  project.studentName || "") ||
+                regex.test(project.studentname || project.studentName || "") ||
                 regex.test(project.campid || project.campID || "") ||
                 regex.test(project.programid || project.programID || "") ||
                 regex.test(project.title || "") ||
@@ -414,18 +425,35 @@ const AssignmentPage = () => {
             .map((project, index) => (
               <div key={index} className="project-item">
                 <div className="project-meta">
-                  <p><strong>Student Name:</strong> {project.studentname || project.studentName}</p>
-                  <p><strong>QR Number:</strong> {project.qrcodenumber || project.qrCodeNumber}</p>
-                  <p><strong>App Name:</strong> {project.appname || project.appName}</p>
-                  <p><strong>Game Snake ID:</strong> {project.snakegameid || project.snakeGameId}</p>
-                  <p><strong>URL:</strong> <a href={project.assignmenturl}>{project.assignmenturl || project.assignmentUrl}</a></p>
+                  <p>
+                    <strong>Student Name:</strong>{" "}
+                    {project.studentname || project.studentName}
+                  </p>
+                  <p>
+                    <strong>QR Number:</strong>{" "}
+                    {project.qrcodenumber || project.qrCodeNumber}
+                  </p>
+                  <p>
+                    <strong>App Name:</strong>{" "}
+                    {project.appname || project.appName}
+                  </p>
+                  <p>
+                    <strong>Game Snake ID:</strong>{" "}
+                    {project.snakegameid || project.snakeGameId}
+                  </p>
+                  <p>
+                    <strong>URL:</strong>{" "}
+                    <a href={project.assignmenturl}>
+                      {project.assignmenturl || project.assignmentUrl}
+                    </a>
+                  </p>
                 </div>
 
-              {/* {project.title && <h4>{project.title}</h4>}
+                {/* {project.title && <h4>{project.title}</h4>}
               {project.description && <p>{project.description}</p>}
               {project.fileName && <p><strong>Uploaded File:</strong> {project.fileName}</p>} */}
 
-              {/* {project.assignmenturl && (
+                {/* {project.assignmenturl && (
                 <p>
                   <a
                     href={project.assignmenturl}
@@ -436,39 +464,42 @@ const AssignmentPage = () => {
                   </a>
                 </p>
               )} */}
-              {project.originalfile && (
-                <p>
-                  <a
-                    href={project.originalfile}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    Original File
-                  </a>{" "}
-                  |{" "}
-                  <a
-                    href={project.editablefile}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    Editable File
-                  </a>
-                </p>
-              )}
+                {project.originalfile && (
+                  <p>
+                    <a
+                      href={project.originalfile}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      Original File
+                    </a>{" "}
+                    |{" "}
+                    <a
+                      href={project.editablefile}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      Editable File
+                    </a>
+                  </p>
+                )}
 
-              <div className="action-buttons">
-                <button onClick={() => handleEdit(index)}>✏️ Edit</button>
-                <button onClick={() => handleDelete(index)}>🗑️ Delete</button>
-                <button key={project.qrcodenumber} onClick={() => handleEditClick(project.qrcodenumber)}>
-                  📎 Editor
-                </button>
+                <div className="action-buttons">
+                  <button onClick={() => handleEdit(index)}>✏️ Edit</button>
+                  <button onClick={() => handleDelete(index)}>🗑️ Delete</button>
+                  <button
+                    key={project.qrcodenumber}
+                    onClick={() => handleEditClick(project.qrcodenumber)}
+                  >
+                    📎 Editor
+                  </button>
+                </div>
               </div>
-            </div>
-          ))}
+            ))}
         </div>
       )}
     </div>
   );
 };
 
-export default AssignmentPage;
\ No newline at end of file
+export default AssignmentPage;
diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
index 67a4c2c..8ff1953 100644
--- a/src/pages/HomePage.jsx
+++ b/src/pages/HomePage.jsx
@@ -1,24 +1,18 @@
 // Page - Home
 import { useEffect } from "react";
+import Hero from "../components/Hero";
+import Services from "../components/Services";
 
 const PageHome = () => {
   useEffect(() => {
     document.title = "Home";
   }, []);
-  const [user, setUser] = useState(null);
 
   return (
     <div className="homepage-container">
       <main>
-        <section>
-          <h2>Home Page</h2>
-          <p>
-            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit
-            porro, dolorem, quod facere enim voluptate provident quo labore vero
-            repellat nemo animi ad exercitationem rem quos, possimus libero
-            deleniti laudantium?
-          </p>
-        </section>
+        <Hero />
+        <Services />
       </main>
     </div>
   );
diff --git a/src/routers/AppRouter.jsx b/src/routers/AppRouter.jsx
index 6ecc508..9230fff 100644
--- a/src/routers/AppRouter.jsx
+++ b/src/routers/AppRouter.jsx
@@ -26,10 +26,7 @@ const AppRouter = () => {
           <Route
             path="/"
             element={
-              <>
-                <Hero />
-                <Services />
-              </>
+              <HomePage/>
             }
           />
             <Route
diff --git a/src/scss/base/_main.scss b/src/scss/base/_main.scss
index e416556..4753151 100644
--- a/src/scss/base/_main.scss
+++ b/src/scss/base/_main.scss
@@ -2,6 +2,175 @@
 
 @use '../base/settings' as *;
 
+$neon-pink: #ff2a6d;
+$neon-blue: #05d9e8;
+$neon-purple: #d300c5;
+$neon-yellow: #f7f500;
+$dark-bg: #0d0221;
+$cyber-black: #1a1a1a;
+
 main {
     padding: $section-padding;
 }
+
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  background: $dark-bg;
+  background-image: linear-gradient(rgba($dark-bg, 0.1), rgba($dark-bg, 0.1)),
+    url("/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;
+  flex-direction: column;
+  font-family: "Montserrat", sans-serif;
+  height: 100vh;
+  margin: 0;
+  overflow-x: hidden;
+}
+
+h1 {
+  font-weight: bold;
+  margin: 0;
+  color: $neon-blue;
+  text-shadow: 0 0 8px rgba($neon-blue, 0.7), 0 0 15px rgba($neon-blue, 0.5);
+  letter-spacing: 2px;
+}
+
+h2 {
+  text-align: center;
+  color: $neon-pink;
+  text-shadow: 0 0 10px rgba($neon-pink, 0.7), 0 0 20px rgba($neon-pink, 0.5);
+  letter-spacing: 3px;
+  text-transform: uppercase;
+  font-size: 2rem;
+}
+
+p {
+  font-size: 14px;
+  font-weight: 100;
+  line-height: 20px;
+  letter-spacing: 0.5px;
+  margin: 20px 0 30px;
+}
+
+span {
+  font-size: 12px;
+}
+
+a {
+  color: #333;
+  font-size: 14px;
+  text-decoration: none;
+  margin: 15px 0;
+}
+
+button {
+  position: relative;
+  border-radius: 4px;
+  border: 2px solid $neon-pink;
+  background-color: rgba($dark-bg, 0.7);
+  color: $neon-pink;
+  font-size: 12px;
+  font-weight: bold;
+  padding: 12px 45px;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  transition: all 0.3s ease;
+  overflow: hidden;
+  box-shadow: 0 0 8px rgba($neon-pink, 0.5);
+  text-shadow: 0 0 5px rgba($neon-pink, 0.8);
+  cursor: pointer;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+      90deg,
+      transparent,
+      rgba($neon-pink, 0.3),
+      transparent
+    );
+    transition: 0.5s;
+  }
+
+  &:hover {
+    background-color: rgba($neon-pink, 0.2);
+    color: white;
+    box-shadow: 0 0 15px rgba($neon-pink, 0.8);
+
+    &::before {
+      left: 100%;
+    }
+  }
+
+  &:active {
+    transform: scale(0.95);
+  }
+
+  &:focus {
+    outline: none;
+  }
+}
+
+button.ghost {
+  background-color: transparent;
+  border: 2px solid $neon-blue;
+  color: $neon-blue;
+  box-shadow: 0 0 8px rgba($neon-blue, 0.5);
+  text-shadow: 0 0 5px rgba($neon-blue, 0.8);
+
+  &:hover {
+    background-color: rgba($neon-blue, 0.2);
+    color: white;
+    box-shadow: 0 0 15px rgba($neon-blue, 0.8);
+  }
+}
+
+form {
+  background-color: $dark-bg;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  padding: 0 50px;
+  height: 100%;
+  text-align: center;
+  border-left: 1px solid rgba($neon-pink, 0.3);
+  border-right: 1px solid rgba($neon-pink, 0.3);
+  box-shadow: inset 0 0 20px rgba($neon-blue, 0.2);
+  backdrop-filter: blur(5px);
+}
+
+input {
+  background-color: rgba($dark-bg, 0.7);
+  border: 1px solid $neon-blue;
+  border-radius: 4px;
+  padding: 12px 15px;
+  margin: 12px 0;
+  width: 100%;
+  color: white;
+  box-shadow: 0 0 5px rgba($neon-blue, 0.3);
+  transition: all 0.3s ease;
+
+  &:focus {
+    outline: none;
+    border-color: $neon-pink;
+    box-shadow: 0 0 10px rgba($neon-pink, 0.5);
+  }
+
+  &::placeholder {
+    color: rgba(255, 255, 255, 0.5);
+  }
+}
\ No newline at end of file
diff --git a/src/scss/base/_reset.scss b/src/scss/base/_reset.scss
index 40e49bf..9dd3ac5 100644
--- a/src/scss/base/_reset.scss
+++ b/src/scss/base/_reset.scss
@@ -18,4 +18,15 @@ img {
 table {
 	border-collapse: collapse;
 	border-spacing: 0;
+}
+
+.wrapper {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+}
+
+div{
+  margin: 0;
+  padding: 0;
 }
\ No newline at end of file
diff --git a/src/scss/components/ProtectedRoute.jsx b/src/scss/components/ProtectedRoute.jsx
deleted file mode 100644
index 0f5769c..0000000
--- a/src/scss/components/ProtectedRoute.jsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from "react";
-import { Navigate } from "react-router-dom";
-import { useAuth } from "../hooks/useAuth"; // 예시 훅: 너의 프로젝트에 맞게 수정!
-
-const ProtectedRoute = ({ children, role }) => {
-  const { user, isLoading } = useAuth();
-
-  if (isLoading) {
-    return <div>loading...</div>;
-  }
-
-  if (!user) {
-    return <Navigate to="/login" replace />;
-  }
-
-  if (role && user.role !== role) {
-    return <Navigate to="/" replace />;
-  }
-
-  return children;
-};
-
-export default ProtectedRoute;
diff --git a/src/scss/components/_assignment.scss b/src/scss/components/_assignment.scss
deleted file mode 100644
index 44c9184..0000000
--- a/src/scss/components/_assignment.scss
+++ /dev/null
@@ -1,421 +0,0 @@
-.assignment-page {
-  max-width: 100%;
-  padding: 20px;
-  margin-top: 50rem;
-  overflow-x: hidden;
-  overflow-y: auto;
-  min-height: 100vh;
-  box-sizing: border-box;
-
-  form {
-    margin-bottom: 20px;
-
-    div {
-      margin-bottom: 15px;
-
-      label {
-        display: block;
-        font-weight: bold;
-        margin-bottom: 5px;
-      }
-
-      input[type="text"],
-      textarea,
-      input[type="file"] {
-        width: 100%;
-        padding: 8px;
-        border: 1px solid #ccc;
-        border-radius: 4px;
-      }
-
-      textarea {
-        height: 80px;
-        resize: vertical;
-      }
-    }
-
-    button {
-      padding: 8px 16px;
-      background-color: #4285f4;
-      color: white;
-      border: none;
-      border-radius: 4px;
-      cursor: pointer;
-
-      &:hover {
-        background-color: #3367d6;
-      }
-    }
-  }
-
-  
-  .assignment-links a {
-    color: white !important;
-  }
-  
-
-  .project-list {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 1.5rem;
-    margin-top: 2rem;
-    padding-bottom: 7rem;
-  
-    .project-item {
-      background: #0f0f1a;
-      border-radius: 12px;
-      padding: 1.5rem;
-      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
-      transition: transform 0.2s ease, box-shadow 0.2s ease;
-      overflow-wrap: break-word;
-      // box-shadow: rgb(211, 0, 197) 0px 0px 15px, rgb(255, 42, 109) 0px 0px 25px;
-      border: 2px solid rgb(75 187 236);
-
-      .project-meta {
-        margin-bottom: 0.75rem;
-        color: lightgray;
-  
-        strong {
-          color: #00bfff;
-          font-weight: bold;
-        }
-      }
-  
-      h4 {
-        margin: 0.5rem 0;
-        font-size: 1.2rem;
-        color: white;
-      }
-  
-      p {
-        margin: 1rem 0;
-        color: white;
-        line-height: 1.4;
-        font-size: 15px;
-        // margin-bottom: 10px;
-  
-        strong {
-          color: #00bfff;
-          font-weight: bold;
-        }
-      }
-  
-      .action-buttons {
-        display: flex;
-        gap: 0.5rem;
-        margin-top: 0.75rem;
-  
-        button {
-          background-color: #000000;
-          border: 2px solid #00bfff;
-          border-radius: 6px;
-          padding: 0.4rem 0.8rem;
-          cursor: pointer;
-          font-size: 0.9rem;
-  
-          &:hover {
-            background-color: #E4E4E4;
-            border: 2px solid #E4E4E4;
-          }
-  
-          &:nth-child(1) {
-            color: #007fff;
-          }
-  
-          &:nth-child(2) {
-            color: #c0392b;
-          }
-  
-          &:nth-child(3) {
-            color: #16a085;
-          }
-        }
-      }
-    }
-  }
-  
-  
-
-  .modal-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.6);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 1000;
-    overflow: hidden;
-  }
-  
-  .modal {
-    background: #f3f3f3;
-    padding: 2rem;
-    border-radius: 12px;
-    max-width: 500px;
-    width: 100%;
-    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
-    animation: fadeIn 0.3s ease;
-    overflow: auto;
-  }
-  
-  .modal form {
-    background-color: #f3f3f3;
-  }
-
-  .modal h3 {
-    margin-bottom: 1rem;
-    font-size: 1.5rem;
-    font-weight: 600;
-    color: #333;
-  }
-  
-  .modal form > div {
-    margin-bottom: 1rem;
-  }
-  
-  .modal label {
-    display: block;
-    font-size: 0.9rem;
-    font-weight: 500;
-    margin-bottom: 0.4rem;
-    color: black
-  }
-  
-  .modal input[type="text"],
-  .modal input[type="password"],
-  .modal input[type="file"],
-  .modal textarea {
-    width: 100%;
-    padding: 0.6rem 0.8rem;
-    border: 1px solid #BBBBBB;
-    border-radius: 6px;
-    font-size: 0.95rem;
-    transition: border-color 0.2s ease;
-    background-color: white;
-  
-    &:focus {
-      border-color: #007bff;
-      outline: none;
-    }
-  }
-  
-  .modal textarea {
-    resize: vertical;
-    min-height: 80px;
-  }
-  
-  .modal-buttons {
-    display: flex;
-    justify-content: flex-end;
-    gap: 1rem;
-    margin-top: 1.5rem;
-  }
-  
-  .modal-buttons button {
-    padding: 0.6rem 1.2rem;
-    font-size: 0.95rem;
-    border: none;
-    border-radius: 6px;
-    cursor: pointer;
-    transition: background 0.2s ease;
-  }
-  
-  .modal-buttons button[type="submit"] {
-    background-color: #ff4b2b;
-    color: #fff;
-  
-    &:hover {
-      background-color: #FF2600;
-    }
-  }
-  
-  .modal-buttons button[type="button"] {
-    background-color: #d3d3d3;
-    color: #333;
-  
-    &:hover {
-      background-color: #cfcfcf;
-    }
-  }
-  
-  @keyframes fadeIn {
-    from {
-      opacity: 0;
-      transform: translateY(-10px);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
-}
-
-.assignment-header-box {
-  background: #0f0f1a;
-  border: 2px solid #00bfff;
-  border-radius: 12px;
-  padding: 50px 100px;
-  text-align: center;
-  margin-bottom: 2rem;
-  // box-shadow: 0 0 20px #00bfff;
-  box-shadow: rgb(211, 0, 197) 0px 0px 15px, rgb(255, 42, 109) 0px 0px 25px;
-    border: 1px solid rgb(211, 0, 197);
-  animation: pulseNeonBlue 2s infinite alternate;
-
-  h2 {
-    color: #00bfff;
-    margin-bottom: 1rem;
-    font-weight: bold;
-    // text-shadow: rgb(5, 217, 232) 0px 0px 5px;
-  }
-
-  button {
-    background-color: #000;
-    border: 2px solid #00bfff;
-    color: #00bfff;
-    padding: 10px 20px;
-    border-radius: 8px;
-    cursor: pointer;
-    font-size: 1rem;
-    font-weight: bold;
-    transition: all 0.3s ease;
-
-    &:hover {
-      background-color: #00bfff;
-      color: #000;
-    }
-  }
-}
-
-// @keyframes pulseNeonBlue {
-//   from {
-//     box-shadow: 0 0 10px #00bfff, 0 0 20px #00bfff;
-//   }
-//   to {
-//     box-shadow: 0 0 25px #00bfff, 0 0 40px #00bfff;
-//   }
-// }
-
-@keyframes pulseNeonHybrid {
-  from {
-    box-shadow: 
-      0 0 10px rgba(211, 0, 197, 0.7),
-      0 0 20px rgba(255, 42, 109, 0.7),
-      0 0 10px rgba(0, 191, 255, 0.7);
-  }
-  to {
-    box-shadow: 
-      0 0 25px rgba(211, 0, 197, 0.9),
-      0 0 40px rgba(255, 42, 109, 0.9),
-      0 0 30px rgba(0, 191, 255, 0.9);
-  }
-}
-
-
-.assignment-list-box {
-  margin-top: 40px;
-
-  h3 {
-    font-size: 1.5rem;
-    margin-bottom: 20px;
-  }
-
-  .assignment-cards {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-    gap: 20px;
-  }
-
-  .assignment-card {
-    background: #f5f5f5;
-    padding: 20px;
-    border-radius: 12px;
-    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
-    transition: all 0.3s ease;
-
-    p {
-      margin: 6px 0;
-    }
-
-    a {
-      color: #2c7be5;
-      text-decoration: underline;
-      word-break: break-word;
-    }
-
-    &:hover {
-      transform: translateY(-4px);
-      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
-    }
-  }
-}
-
-// Search Bar Styling
-.assignment-search-box {
-  margin: 1rem 0;
-  input {
-    width: 100%;
-    // padding: 0.5rem;
-    font-size: 1rem;
-    border-radius: 8px;
-    border: 1px solid #ccc;
-    background-color: #1a1a2b;
-    color: #fefefe;
-    box-shadow: rgb(211, 0, 197) 0px 0px 15px, rgb(255, 42, 109) 0px 0px 25px;
-
-    &::placeholder {
-      color: #aaa;
-    }
-
-    &:focus {
-      outline: none;
-      border-color: rgb(211, 0, 197);
-    }
-  }
-}
-
-.password-field {
-  .input-wrapper {
-    position: relative;
-
-    input {
-      width: 100%;
-      padding-right: 2.5rem; 
-    }
-
-    .eye-icon {
-      position: absolute;
-      top: 50%;
-      right: 0.75rem;
-      transform: translateY(-50%);
-      cursor: pointer;
-      color: #555;
-      user-select: none;
-    }
-  }
-}
-
-.spinner-container {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  margin: 10px 0;
-}
-
-.spinner {
-  width: 16px;
-  height: 16px;
-  border: 3px solid rgba(0, 0, 0, 0.2);
-  border-top: 3px solid #333;
-  border-radius: 50%;
-  animation: spin 0.6s linear infinite;
-}
-
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
diff --git a/src/scss/components/_hero.scss b/src/scss/components/_hero.scss
index 2250ee0..2981987 100644
--- a/src/scss/components/_hero.scss
+++ b/src/scss/components/_hero.scss
@@ -87,10 +87,9 @@ $cyber-black: #1a1a1a;
   display: flex;
   justify-content: center;
   align-items: center;
-  //min-height: 100vh;
+  min-height: 95vh;
   width: 100%;
-  padding-top: 1100px; /* Adjust padding-top to account for navbar height */
-  margin-top: 60px; /* Add margin-top to account for navbar height */
+  // margin-top: 70px; /* Add margin-top to account for navbar height */
   background-color: $dark-bg;
   overflow: hidden;
 
diff --git a/src/scss/login.scss b/src/scss/login.scss
deleted file mode 100644
index d2c183f..0000000
--- a/src/scss/login.scss
+++ /dev/null
@@ -1,88 +0,0 @@
-.login-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-height: 100vh;
-  background-color: #f5f5f5;
-
-  .login-card {
-    width: 100%;
-    max-width: 400px;
-    padding: 2rem;
-    background-color: white;
-    border-radius: 8px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-
-    h2 {
-      text-align: center;
-      margin-bottom: 1.5rem;
-      color: #333;
-    }
-
-    .error-message {
-      background-color: #ffecec;
-      color: #d63031;
-      padding: 0.75rem;
-      border-radius: 4px;
-      margin-bottom: 1rem;
-      text-align: center;
-    }
-
-    .form-group {
-      margin-bottom: 1rem;
-
-      label {
-        display: block;
-        margin-bottom: 0.5rem;
-        font-weight: 500;
-      }
-
-      input {
-        width: 100%;
-        padding: 0.75rem;
-        border: 1px solid #ddd;
-        border-radius: 4px;
-        font-size: 1rem;
-
-        &:focus {
-          outline: none;
-          border-color: #4a90e2;
-        }
-      }
-    }
-
-    .login-button {
-      width: 100%;
-      padding: 0.75rem;
-      background-color: #4a90e2;
-      color: white;
-      border: none;
-      border-radius: 4px;
-      font-size: 1rem;
-      cursor: pointer;
-      transition: background-color 0.3s;
-
-      &:hover {
-        background-color: #3a7bc8;
-      }
-    }
-
-    .login-footer {
-      margin-top: 1.5rem;
-      text-align: center;
-
-      p {
-        margin-bottom: 0.5rem;
-      }
-
-      a {
-        color: #4a90e2;
-        text-decoration: none;
-
-        &:hover {
-          text-decoration: underline;
-        }
-      }
-    }
-  }
-}
diff --git a/src/scss/page/_assignment.scss b/src/scss/page/_assignment.scss
index 0cea9de..c3c75b6 100644
--- a/src/scss/page/_assignment.scss
+++ b/src/scss/page/_assignment.scss
@@ -1,17 +1,22 @@
-// Assignment Page Styling
-body {
-  justify-content: flex-starts;
+body.modal-open {
+  overflow: hidden;
 }
 
 .assignment-page {
-  position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
+  justify-content: center;
+  max-width: 100%;
+  padding: 20px;
+  margin: 200px 0 150px;
+  overflow: hidden;
+  min-height: 100vh;
+  box-sizing: border-box;
 
   a {
     text-decoration: none;
-    color: #AAC5E5;
+    color: #aac5e5;
   }
 
   section {
@@ -19,10 +24,16 @@ body {
     max-width: 900px;
   }
 
-  .assignment-header {
+  .assignment-header-box {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
     margin-bottom: 2rem;
-    border-bottom: 1px solid #e0e0e0;
-    padding-bottom: 1rem;
+    border-radius: 8px;
+    border: 1px solid lab(73.33 30.65 -21.82);
+    box-shadow: 0 0 20px lab(51.3 74.34 -37.13);
+    padding: 1rem;
 
     h2 {
       font-size: 3rem;
@@ -36,171 +47,273 @@ body {
     }
   }
 
-  .assignment-container {
-    background-color: #fff;
-    border-radius: 8px;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-    padding: 2rem;
+  form {
+    margin-bottom: 20px;
 
-    .assignment-info {
-      margin-bottom: 2rem;
+    div {
+      // margin-bottom: 15px;
+      width: 100%;
 
-      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;
+      label {
+        display: block;
+        font-weight: bold;
+        margin-bottom: 5px;
+        text-align: start;
       }
     }
 
-    .file-upload-section {
-      margin-bottom: 2rem;
+    button {
+      padding: 8px 16px;
+      background-color: #4285f4;
+      color: white;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
 
-      .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;
-              }
-            }
-          }
-        }
+      &:hover {
+        background-color: #3367d6;
       }
     }
+  }
 
-    .comments-section {
-      margin-bottom: 2rem;
+  .assignment-links a {
+    color: white !important;
+  }
+
+  .project-list {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 1.5rem;
+    margin-top: 2rem;
+    padding-bottom: 7rem;
+
+    .project-item {
+      background: #0f0f1a;
+      border-radius: 12px;
+      padding: 1.5rem;
+      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
+      transition: transform 0.2s ease, box-shadow 0.2s ease;
+      overflow-wrap: break-word;
+      border: 2px solid rgb(75 187 236);
+
+      .project-meta {
+        margin-bottom: 0.75rem;
+        color: lightgray;
+
+        strong {
+          color: #00bfff;
+          font-weight: bold;
+        }
+      }
 
       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;
+        margin: 0.5rem 0;
+        font-size: 1.2rem;
         color: white;
-        border: none;
+      }
 
-        &:hover {
-          background-color: #3a7bc8;
-        }
+      p {
+        margin: 1rem 0;
+        color: white;
+        line-height: 1.4;
+        font-size: 15px;
 
-        &:disabled {
-          background-color: #a0c3e8;
-          cursor: not-allowed;
+        strong {
+          color: #00bfff;
+          font-weight: bold;
         }
       }
 
-      .cancel-btn {
-        background-color: transparent;
-        border: 1px solid #ddd;
-        color: #666;
+      .action-buttons {
+        display: flex;
+        gap: 0.5rem;
+        margin-top: 0.75rem;
 
-        &:hover {
-          background-color: #f5f5f5;
+        button {
+          background-color: #000;
+          border: 2px solid #00bfff;
+          border-radius: 6px;
+          padding: 0.4rem 0.8rem;
+          cursor: pointer;
+          font-size: 0.9rem;
+
+          &:nth-child(1) {
+            color: #007fff;
+          }
+
+          &:nth-child(2) {
+            color: #c0392b;
+          }
+
+          &:nth-child(3) {
+            color: #16a085;
+          }
         }
       }
     }
   }
+
+  .modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    min-height: 100%;
+    background: rgba(0, 0, 0, 0.6);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+    overflow: hidden;
+  }
+
+  .modal {
+    display: flex;
+    flex-direction: column;
+    background-color: #09021f;
+    padding: 2rem;
+    border-radius: 12px;
+    max-width: 500px;
+    width: 100%;
+    max-height: 100vh;
+    overflow-y: auto;
+    border: #aac5e5 solid 1px;
+    box-shadow: 0 30px 35px rgb(13 58 154);
+    animation: fadeIn 0.3s ease;
+  }
+
+  .input-wrapper {
+    position: relative;
+    margin-bottom: 1.5rem;
+
+    .eye-icon {
+      position: absolute;
+      right: 10px;
+      top: 50%;
+      transform: translateY(-50%);
+      cursor: pointer;
+      color: #e3dfdf;
+      font-size: 0.8rem;
+    }
+  }
+
+  .modal form {
+    border-radius: 12px;
+  }
+
+  .modal h3 {
+    margin-bottom: 1rem;
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: #e3dfdf;
+  }
+
+  .modal label {
+    display: block;
+    font-size: 0.9rem;
+    font-weight: 500;
+    color: #e3dfdf;
+  }
+
+  .modal input,
+  .modal textarea {
+    width: 100%;
+    border: 1px solid #bbbbbb;
+    border-radius: 6px;
+    font-size: 0.95rem;
+    transition: border-color 0.2s ease;
+    background: #00000000;
+    color: #e3dfdf;
+
+    &:focus {
+      border-color: #007bff;
+      box-shadow: 0 4px 4px rgba(13 58 154 / 0.54);
+      animation: fadeIn 0.3s ease;
+      outline: none;
+    }
+  }
+
+  .modal textarea {
+    resize: vertical;
+    min-height: 80px;
+  }
+
+  .modal-buttons {
+    display: flex;
+    justify-content: flex-end;
+    gap: .5rem;
+  }
+
+  .modal-buttons button {
+    font-size: 0.8rem;
+    border: none;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: background 0.2s ease;
+  }
+
+  .modal-buttons button[type="submit"] {
+    background-color: #ff4b2b;
+    color: #fff;
+
+    &:hover {
+      background-color: #ff2600;
+    }
+  }
+
+  .modal-footer {
+    display: flex;
+    align-items: center;
+    margin: 1rem;
+  }
+
+  .modal-buttons button[type="button"] {
+    background-color: #d3d3d3;
+    color: #333;
+
+    &:hover {
+      background-color: #cfcfcf;
+    }
+  }
+
+  .spinner-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    min-height: 20px;
+    gap: .5rem;
+
+    .spinner {
+      width: 20px;
+      height: 20px;
+      border: 5px solid #aac5e5;
+      border-top: 5px solid #4285f4;
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+    }
+
+    span {
+      color: #aac5e5;
+      font-size: .8rem;
+      margin: 0;
+      letter-spacing: 0.02em;
+    }
+  }
+
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+      transform: translateY(-10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
 }
diff --git a/src/scss/page/_home.scss b/src/scss/page/_home.scss
index f3c032c..89a97ba 100644
--- a/src/scss/page/_home.scss
+++ b/src/scss/page/_home.scss
@@ -1,31 +1,7 @@
 // Homepage styling
 
 .homepage-container {
-  // background-image: url("../../../public/images/grid-background.jpg");
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-attachment: fixed;
-  min-height: 100vh;
-  width: 100%;
-  padding: 2rem;
-
-  main {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 2rem;
-    background-color: rgba(255, 255, 255, 0.9);
-    border-radius: 10px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  }
-
-  h2 {
-    color: #333;
-    margin-bottom: 1.5rem;
-  }
-
-  p {
-    color: #555;
-    line-height: 1.6;
-  }
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
 }
diff --git a/src/scss/page/_login.scss b/src/scss/page/_login.scss
index f88cc08..924fcce 100644
--- a/src/scss/page/_login.scss
+++ b/src/scss/page/_login.scss
@@ -72,165 +72,12 @@ $cyber-black: #1a1a1a;
   }
 }
 
-* {
-  box-sizing: border-box;
-}
-
-body {
-  background: $dark-bg;
-  background-image: linear-gradient(rgba($dark-bg, 0.1), rgba($dark-bg, 0.1)),
-    url("/images/grid-background.jpg");
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-attachment: fixed;
+.login-page{
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
-  flex-direction: column;
-  font-family: "Montserrat", sans-serif;
-  height: 100vh;
-  margin: 0;
-  overflow-x: hidden;
-}
-
-h1 {
-  font-weight: bold;
-  margin: 0;
-  color: $neon-blue;
-  text-shadow: 0 0 8px rgba($neon-blue, 0.7), 0 0 15px rgba($neon-blue, 0.5);
-  letter-spacing: 2px;
-}
-
-h2 {
-  text-align: center;
-  color: $neon-pink;
-  text-shadow: 0 0 10px rgba($neon-pink, 0.7), 0 0 20px rgba($neon-pink, 0.5);
-  letter-spacing: 3px;
-  text-transform: uppercase;
-  font-size: 2rem;
-}
-
-p {
-  font-size: 14px;
-  font-weight: 100;
-  line-height: 20px;
-  letter-spacing: 0.5px;
-  margin: 20px 0 30px;
-}
-
-span {
-  font-size: 12px;
-}
-
-a {
-  color: #333;
-  font-size: 14px;
-  text-decoration: none;
-  margin: 15px 0;
-}
-
-button {
-  position: relative;
-  border-radius: 4px;
-  border: 2px solid $neon-pink;
-  background-color: rgba($dark-bg, 0.7);
-  color: $neon-pink;
-  font-size: 12px;
-  font-weight: bold;
-  padding: 12px 45px;
-  letter-spacing: 2px;
-  text-transform: uppercase;
-  transition: all 0.3s ease;
-  overflow: hidden;
-  box-shadow: 0 0 8px rgba($neon-pink, 0.5);
-  text-shadow: 0 0 5px rgba($neon-pink, 0.8);
-  cursor: pointer;
-
-  &::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: -100%;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(
-      90deg,
-      transparent,
-      rgba($neon-pink, 0.3),
-      transparent
-    );
-    transition: 0.5s;
-  }
-
-  &:hover {
-    background-color: rgba($neon-pink, 0.2);
-    color: white;
-    box-shadow: 0 0 15px rgba($neon-pink, 0.8);
-
-    &::before {
-      left: 100%;
-    }
-  }
-
-  &:active {
-    transform: scale(0.95);
-  }
-
-  &:focus {
-    outline: none;
-  }
-}
-
-button.ghost {
-  background-color: transparent;
-  border: 2px solid $neon-blue;
-  color: $neon-blue;
-  box-shadow: 0 0 8px rgba($neon-blue, 0.5);
-  text-shadow: 0 0 5px rgba($neon-blue, 0.8);
-
-  &:hover {
-    background-color: rgba($neon-blue, 0.2);
-    color: white;
-    box-shadow: 0 0 15px rgba($neon-blue, 0.8);
-  }
-}
-
-form {
-  background-color: $dark-bg;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  padding: 0 50px;
-  height: 100%;
-  text-align: center;
-  border-left: 1px solid rgba($neon-pink, 0.3);
-  border-right: 1px solid rgba($neon-pink, 0.3);
-  box-shadow: inset 0 0 20px rgba($neon-blue, 0.2);
-  backdrop-filter: blur(5px);
-}
-
-input {
-  background-color: rgba($dark-bg, 0.7);
-  border: 1px solid $neon-blue;
-  border-radius: 4px;
-  padding: 12px 15px;
-  margin: 12px 0;
-  width: 100%;
-  color: white;
-  box-shadow: 0 0 5px rgba($neon-blue, 0.3);
-  transition: all 0.3s ease;
-
-  &:focus {
-    outline: none;
-    border-color: $neon-pink;
-    box-shadow: 0 0 10px rgba($neon-pink, 0.5);
-  }
-
-  &::placeholder {
-    color: rgba(255, 255, 255, 0.5);
-  }
+  min-height: 100vh;
 }
 
 .container {
@@ -517,3 +364,93 @@ footer a {
   color: #3c97bf;
   text-decoration: none;
 }
+
+
+.login-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  background-color: #f5f5f5;
+
+  .login-card {
+    width: 100%;
+    max-width: 400px;
+    padding: 2rem;
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+
+    h2 {
+      text-align: center;
+      margin-bottom: 1.5rem;
+      color: #333;
+    }
+
+    .error-message {
+      background-color: #ffecec;
+      color: #d63031;
+      padding: 0.75rem;
+      border-radius: 4px;
+      margin-bottom: 1rem;
+      text-align: center;
+    }
+
+    .form-group {
+      margin-bottom: 1rem;
+
+      label {
+        display: block;
+        margin-bottom: 0.5rem;
+        font-weight: 500;
+      }
+
+      input {
+        width: 100%;
+        padding: 0.75rem;
+        border: 1px solid #ddd;
+        border-radius: 4px;
+        font-size: 1rem;
+
+        &:focus {
+          outline: none;
+          border-color: #4a90e2;
+        }
+      }
+    }
+
+    .login-button {
+      width: 100%;
+      padding: 0.75rem;
+      background-color: #4a90e2;
+      color: white;
+      border: none;
+      border-radius: 4px;
+      font-size: 1rem;
+      cursor: pointer;
+      transition: background-color 0.3s;
+
+      &:hover {
+        background-color: #3a7bc8;
+      }
+    }
+
+    .login-footer {
+      margin-top: 1.5rem;
+      text-align: center;
+
+      p {
+        margin-bottom: 0.5rem;
+      }
+
+      a {
+        color: #4a90e2;
+        text-decoration: none;
+
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/scss/page/assignment123.scss b/src/scss/page/assignment123.scss
deleted file mode 100644
index 04c9baf..0000000
--- a/src/scss/page/assignment123.scss
+++ /dev/null
@@ -1,198 +0,0 @@
-// 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;
-        }
-      }
-    }
-  }
-}