diff --git a/project/client/src/App.js b/project/client/src/App.js
index b8ecdbf8..325261c4 100644
--- a/project/client/src/App.js
+++ b/project/client/src/App.js
@@ -2,6 +2,7 @@ import React from 'react';
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 import SignUp from './pages/SignUp/SignUp';
 import Login from './pages/SignUp/Login';
+import ForgotPassword from './pages/SignUp/ForgotPassword';
 import MainPage from './pages/Main/MainPage'; // Adjust the path according to your project structure
 
 
@@ -11,6 +12,7 @@ function App() {
       <Routes>
         <Route path="/signup" element={<SignUp />} />
         <Route path="/login" element={<Login />} />
+        <Route path="/forgotPassword" element={<ForgotPassword />} /> 
         <Route path="/" element={<SignUp />} /> {/* Default route to SignUp */}
         <Route path="/main-page" element={<MainPage />} /> 
       </Routes>
diff --git a/project/client/src/pages/Main/MainPage.css b/project/client/src/pages/Main/MainPage.css
index f098430d..0eaf0b8a 100644
--- a/project/client/src/pages/Main/MainPage.css
+++ b/project/client/src/pages/Main/MainPage.css
@@ -11,20 +11,10 @@
   box-sizing: border-box;
 }
 
-/* Styling for navigation bar */
-.navbar {
-  background-color: #333; /* Assuming a dark navbar */
-  color: white;
-  padding: 1rem 2rem; /* Adjust padding as needed */
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
 /* Utility classes for layout */
 .container {
   width: 90%;
-  max-width: 1200px;
+  max-width: 900px;
   margin: auto;
 }
 
@@ -42,4 +32,192 @@
   /* Add your search bar styling */
 }
 
-/* More styles will be based on the individual components */
+
+/* FilmList Styles */
+.film-list {
+  /* should be in the center */
+  margin: 2rem auto;
+  max-width: 1000px;
+  padding: 1rem;
+}
+
+.film-list .title {
+  font-size: 1.5rem;
+  margin-bottom: 1rem;
+  color: #333;
+}
+
+.film-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 1rem;
+}
+
+.movie-item {
+  width: 100%;
+  height: 200px;
+  overflow: hidden;
+  position: relative;
+  border-radius: 8px;
+  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+  cursor: pointer;
+}
+
+.movie-item img {
+  width: 100%;
+  height: auto;
+  border-radius: 8px; 
+  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+}
+
+/* Adjustments for responsiveness */
+@media (max-width: 768px) {
+  .film-container {
+    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  }
+
+  .navbar {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .navbar .search-bar {
+    width: 100%;
+    margin-top: 1rem;
+  }
+}
+
+/* NavBar Styles */
+.navbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  background-color: #312f60; 
+  padding: 0.5rem 2rem; 
+}
+
+.navbar .logo {
+  height: 40px; 
+}
+
+.nav-links {
+  display: flex;
+  width: 70%;
+  justify-content: flex-end; 
+  align-items: center;
+  gap: 1rem; 
+}
+
+.nav-links a {
+  text-decoration: none;
+  color: white; 
+  font-size: 1rem; 
+  line-height: 30px; 
+  font-weight: bold;
+}
+
+.search-container {
+  position: relative;
+}
+
+.search-container input {
+  padding: 0.5rem;
+  border-radius: 20px; 
+  border: none;
+  outline: none;
+  height: 30px
+}
+
+.search-container button {
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  border: none;
+  background-color: transparent;
+  color: white; 
+  padding: 0.5rem;
+  cursor: pointer;
+}
+/* RecentPosts Styles */
+.recent-posts {
+  max-width: 1000px;
+  background: #312f60;
+  border-radius: 8px;
+  margin: 2rem auto;
+  padding: 1rem;
+  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+}
+
+.recent-post-item {
+  /* display: flex; */
+  align-items: center;
+  margin-bottom: 1rem;
+  border-bottom: 1px solid #222; /* A light bottom border for separation */
+  padding-bottom: 1rem;
+  color: white
+}
+
+.recent-post-item:last-child {
+  border-bottom: none;
+}
+
+.recent-post-item img {
+  width: 50px; 
+  height: 50px; 
+  border-radius: 50%;
+  margin-right: 1rem;
+}
+
+.recent-post-item .content {
+  flex-grow: 1;
+}
+
+.recent-post-item .rating {
+  /* Styling for the rating, possibly stars */
+
+}
+
+/* styles/global.css */
+
+body, html {
+  margin: 0;
+  padding: 0;
+  font-family: 'Arial', sans-serif; 
+}
+
+.container {
+  width: 80%;
+  margin: auto;
+  max-width: 1200px;
+}
+
+.header {
+  background-color: #20232a; 
+  color: white;
+  padding: 20px 0;
+  text-align: center;
+}
+
+.movie-poster {
+  width: 100px; 
+  height: auto;
+  border-radius: 8px;
+  margin-right: 15px;
+}
+
+.movie-list {
+  display: flex;
+  overflow-x: auto;
+  padding: 20px 0;
+}
+
+.movie-item {
+  min-width: 100px; 
+  margin-right: 15px; 
+}
+
+.clearfix {
+  clear: both;
+}
+
diff --git a/project/client/src/pages/Main/components/FilmList.js b/project/client/src/pages/Main/components/FilmList.js
index 7232d2fe..d5821513 100644
--- a/project/client/src/pages/Main/components/FilmList.js
+++ b/project/client/src/pages/Main/components/FilmList.js
@@ -1,16 +1,16 @@
 // components/FilmList.js
 
 import React from 'react';
-import './FilmList.css'; // Your CSS for the FilmList
+import '../MainPage'; // Your CSS for the FilmList
 
 function FilmList({ title, films }) {
     return (
       <section className="film-list">
-        <h2>{title}</h2>
+        <h2 style={{marginBottom: 10, color:"white"}}>{title}</h2>
         <div className="film-container">
           {films.map(film => (
             <div key={film.id} className="movie-item">
-              <img src={film.poster} alt={film.title} />
+              <img src={film.poster} /* alt={film.title} */ />
               <span>{film.title}</span>
             </div>
           ))}
diff --git a/project/client/src/pages/Main/components/NavBar.js b/project/client/src/pages/Main/components/NavBar.js
index c79e671d..27b95be8 100644
--- a/project/client/src/pages/Main/components/NavBar.js
+++ b/project/client/src/pages/Main/components/NavBar.js
@@ -1,6 +1,6 @@
 // NavBar.js
 import React from 'react';
-import './NavBar.css'; // Make sure the path to your CSS file is correct
+import '../MainPage.css'; // Make sure the path to your CSS file is correct
 
 function NavBar() {
   return (
diff --git a/project/client/src/pages/Main/components/RecentPosts.js b/project/client/src/pages/Main/components/RecentPosts.js
index 3b8cc796..ebfdd48b 100644
--- a/project/client/src/pages/Main/components/RecentPosts.js
+++ b/project/client/src/pages/Main/components/RecentPosts.js
@@ -1,12 +1,12 @@
 // components/RecentPosts.js
 
 import React from 'react';
-import './RecentPosts.css'; // Your CSS for the RecentPosts
+import '../MainPage.css'; // Your CSS for the RecentPosts
 
 function RecentPosts({ posts }) {
     return (
       <div className="recent-posts">
-        <h2>Recent Posts</h2>
+        <h2 style={{color: "white"}}>Recent Posts</h2>
         {posts.map(post => (
           <div key={post.id} className="recent-post-item">
             <h3>{post.title}</h3>
diff --git a/project/client/src/pages/SignUp/ForgotPassword.css b/project/client/src/pages/SignUp/ForgotPassword.css
new file mode 100644
index 00000000..5c713cec
--- /dev/null
+++ b/project/client/src/pages/SignUp/ForgotPassword.css
@@ -0,0 +1,56 @@
+.forgotPassword-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background-color: #312f60; /* Adjust the color to match your design */
+  }
+  
+  .forgotPassword-form {
+    background-color: #8899f9;
+    padding: 20px;
+    border-radius: 20px;
+    width: 300px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    text-align: center;
+  }
+  
+  .forgotPassword-form input {
+    display: block;
+    width: 80%;
+    margin: 10px auto;
+    padding: 10px;
+    border: none;
+    border-radius: 20px;
+  }
+  
+  .input-item {
+    color: #c4a6dd;
+    background-color: #c4a6dd; 
+  }
+  
+  .forgotPassword-form button {
+    margin-top: 20px;
+    padding: 10px 20px;
+    background-color: #c4a6dd;
+    color: black;
+    border: none;
+    border-radius: 20px;
+    cursor: pointer;
+  }
+  .forgotPassword-header h1 {
+    margin-bottom: 20px;
+    color: white;
+    font-size: 16px;
+  }
+
+  .logo {
+    max-width: 150px; 
+    height: auto; 
+    border-radius: 20px;
+  }
+  
+  .forgot-password-epxlanation{
+    font-size: 6px;
+  }
+  
\ No newline at end of file
diff --git a/project/client/src/pages/SignUp/ForgotPassword.js b/project/client/src/pages/SignUp/ForgotPassword.js
new file mode 100644
index 00000000..806f8a7e
--- /dev/null
+++ b/project/client/src/pages/SignUp/ForgotPassword.js
@@ -0,0 +1,38 @@
+import React, { useState } from 'react';
+import './ForgotPassword.css'; // Similar styling as SignUp
+
+function Login() {
+  const [email, setemail] = useState('');
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    // Handle the login logic here, typically sending a request to backend
+    console.log('Logging in', { email});
+  };
+
+  return (
+    <div className="forgotPassword-container">
+      <div className="forgotPassword-form">
+        <div className="forgotPassword-header">
+            <img src="/logo.png" alt="Logo" className="logo" />
+          <h1>Forgot Password</h1>
+        </div>
+        <div className = "forgot-password-epxlanation">
+            <h1>Type your email so that we can send you a verification code to reset your password</h1>
+        </div>
+        <form onSubmit={handleSubmit}>
+          <input
+            type="text"
+            placeholder="email"
+            value={email}
+            onChange={(e) => setemail(e.target.value)}
+            className="input-item"
+          />
+        <button type="submit">Send Verification</button>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+export default Login;
diff --git a/project/client/src/pages/SignUp/Login.js b/project/client/src/pages/SignUp/Login.js
index 718c0a6a..eb04003b 100644
--- a/project/client/src/pages/SignUp/Login.js
+++ b/project/client/src/pages/SignUp/Login.js
@@ -39,7 +39,7 @@ function Login() {
             className="input-item"
           />
           <div className="login-footer">
-            <span><a href="/">Forgot your password?</a></span>
+            <span><a href="/forgotPassword">Forgot your password?</a></span>
           </div>
           <button type="submit">Login</button>
         </form>