diff --git a/new-webapp/src/App.js b/new-webapp/src/App.js
index ea5fa472..e2ca7bca 100644
--- a/new-webapp/src/App.js
+++ b/new-webapp/src/App.js
@@ -5,34 +5,16 @@ import SignIn from "./pages/SignIn"
 import Browse from "./pages/Browse"
 
 function App(){
-
-    
 return (
     <> 
-   
-    
    <Router>
     <Routes>
         <Route path="/SignIn" exact element={<SignIn/>}/>
         <Route path="/browse" exact element={<Browse/>}   /> 
         <Route path="/NetflixClone" exact element={<Signup/>}/>
-
     </Routes>
    </Router>
-   
 </>
-
 )
 }
-
 export default App;
-
-
-
-
-{/* <div className="app-container">
-      <div className="background-container">
-        <Header />
-        <Signup/>
-      </div>
-    </div> */}
\ No newline at end of file
diff --git a/new-webapp/src/Header.js b/new-webapp/src/Header.js
index 7209923c..3decff18 100644
--- a/new-webapp/src/Header.js
+++ b/new-webapp/src/Header.js
@@ -1,7 +1,7 @@
 import logo from './LogoIcons&Images/Logos-Readability-Netflix-logo.png';
 import langIcon from './LogoIcons&Images/language_icon.png'
 import { useNavigate } from "react-router-dom";
-function Header(){
+function Header({ showButtons = true }){
   let navigate=useNavigate();
   function HandleSignIn(){
       navigate("/SignIn")
@@ -12,12 +12,15 @@ return (
 <div style={{flex:1, display:'flex'}} >
     <div style={{marginLeft:'6%'}}>
 <img src={logo} alt="Logo" width={"40%"} style={{'marginRight':'35%'}}/></div>
+{showButtons && (
+    <>
 <div className="language-container" style={{flex:1,'margin-top':'2%','marginLeft':'26%'}}>
     <button type="button" className="text" style={{'fontSize':'15px','background':'transparent', border: 'solid white', borderWidth: 'thin',borderRadius:'3px',padding:'8%',width: '100px'}}>English</button>
 </div>
 <div className="signUp-container" style={{flex:1,'margin-right':'13%','margin-top':'2%'}}>
 <button type="button" onClick={HandleSignIn} style={{background:'rgb(229, 9, 20)','fontSize':'15px',color:'white',border:'thick',borderRadius:'3px',padding:'8%',width: '100px'}}>Sign In</button>
 </div>
+</>)}
 </div>
 </div>
 </div>
diff --git a/new-webapp/src/pages/SignIn.css b/new-webapp/src/pages/SignIn.css
index bea0aeda..6725d6db 100644
--- a/new-webapp/src/pages/SignIn.css
+++ b/new-webapp/src/pages/SignIn.css
@@ -10,7 +10,7 @@
     top: 0;
     left: 0;
 
-    display: flex;
+display: flex;
     justify-content: center;
     align-content: center;
     align-items: center;
diff --git a/new-webapp/src/pages/SignIn.js b/new-webapp/src/pages/SignIn.js
index 1aa57804..cf6066c2 100644
--- a/new-webapp/src/pages/SignIn.js
+++ b/new-webapp/src/pages/SignIn.js
@@ -1,97 +1,52 @@
-
-
 import React, { useState } from "react";
-import { BrowserRouter, Route, Link } from "react-router-dom";
-
 import "./SignIn.css"
 import {useNavigate} from "react-router-dom";
+import Header from '../Header';
 
 
 function SignIn(){
-
     let navigate = useNavigate();
-
-
     const [name,setName]= useState("");
     const [password, setPassword]= useState("");
-
-
     function nameChange(event){
         setName(event.target.value)
-      
-
-
     }
     function passChange(event){
         setPassword(event.target.value)
-        
-
     }
-
     function handleSignIn(e){
         e.preventDefault();
         console.log(e.target.name);
         console.log(e.target.password);
-
-       
-       
         console.log("I'm here")
         console.log(name);
         console.log(password);
         navigate('/browse');
-
-
     }
     
     return(
-        
-
-      
-    
-    <div className="base" >
-
-    <div className="net">Netflix</div>
-    
-
-   <div className="SignInContainer">
-
-   <h1 className="signintext">Sign In</h1>
-
-<form className="op" onSubmit={handleSignIn}>
-   <div className="inputs">
-   <input className="backGrey" onChange={nameChange} type="text" placeholder="Email or phone number" value={name} ></input>
-   <input  className="backGrey" onChange={passChange} type="text" placeholder="Password" value={password}  ></input>
-   <input type="submit"  className="redcol" value="Sign In"></input>
-   </div>
-
-  <div className="entLine"> 
-  
-   <input type="checkbox"></input>
-   <p>Remember me</p>
-   
-   <p className="help">Need help?</p>
-   </div>
-
-   <div className="NewNetf"> 
-
-   <p> New to Netflix? Sign Up now!</p>
-   <p>This page is protected by Google reCAPTCHA to ensure you're not a bot. Learn more.</p>
-</div>
-
-</form>
-
-
-
-
-
-   </div>
-
-
-    </div>);
-
-
-
-}
-
+    <div className="base">
+     <Header showButtons={false}/>
+     <div className="SignInContainer">
+     <h1 className="signintext">Sign In</h1>
+     <form className="op" onSubmit={handleSignIn}>
+     <div className="inputs">
+      <input className="backGrey" onChange={nameChange} type="text" placeholder="Email or phone number" value={name} ></input>
+      <input  className="backGrey" onChange={passChange} type="text" placeholder="Password" value={password}  ></input>
+      <input type="submit"  className="redcol" value="Sign In"></input>
+     </div>
+     <div className="entLine"> 
+     <input type="checkbox"></input>
+     <p>Remember me</p>
+     <p className="help">Need help?</p>
+     </div>
+     <div className="NewNetf"> 
+     <p> New to Netflix? Sign Up now!</p>
+     <p>This page is protected by Google reCAPTCHA to ensure you're not a bot. Learn more.</p>
+     </div>
+    </form>
+    </div>
+   </div>);
+ }
 
 export default SignIn;
\ No newline at end of file