diff --git a/start_page/src/Header.js b/start_page/src/Header.js
index 62d1ec9..b690b88 100644
--- a/start_page/src/Header.js
+++ b/start_page/src/Header.js
@@ -55,7 +55,7 @@ const Header = () => {
       <header className='Header'>
         <Link to='/' style={{color:'black'}}><h1 className='RecordIt'>RecordIt</h1></Link>
 
-        {isMobileOrTablet && !auth?.user && !dashboardRego() &&
+        {isMobileOrTablet  && !auth?.user && !dashboardRego() &&
           <div className="dropDownContainer">
             <Dropdown id='dropdown' align="end">
             <Dropdown.Toggle variant="warning" id="dropdown-basic">
@@ -116,13 +116,13 @@ const Header = () => {
         </div>
         }
 
-        {isLaptop && dashboardRego() && 
+        {isLaptop && !isMobileOrTablet && dashboardRego() && 
         <>
           <Button variant="warning" id='LogOut' onClick={signOut}>Logout</Button> 
           <Button variant="warning" id='About' onClick={()=>navigate("About")}>About</Button>
         </>
         }
-        {isLaptop &&!auth?.user && !dashboardRego() &&
+        {isLaptop && !isMobileOrTablet &&!auth?.user && !dashboardRego() &&
           <>
           <Button variant="warning" id='LogIn' onClick={()=>navigate("LogIn")}>LogIn</Button>
           <Button variant="warning" id='SignUp' onClick={()=>navigate("Register")}>SignUp</Button>
@@ -130,7 +130,7 @@ const Header = () => {
           </>
         }
 
-        {isLaptop &&auth?.user && !dashboardRego() &&
+        {isLaptop  && !isMobileOrTablet &&auth?.user && !dashboardRego() &&
           <>
             <Button variant="warning" id='dashboard' onClick={()=>navigate(-1)}>Dashboard</Button>
             <Button variant="warning" id='About' onClick={()=>navigate("About")}>About</Button>
diff --git a/start_page/src/index.css b/start_page/src/index.css
index 938bca1..a6d737b 100644
--- a/start_page/src/index.css
+++ b/start_page/src/index.css
@@ -142,6 +142,63 @@ button:active {
 }
 
 
+@media screen 
+  and (min-device-width: 2560px) 
+  and (-webkit-min-device-pixel-ratio: 1) { 
+
+    .Header h1{
+      position: relative;
+      left: 2vw;
+      top: 1vh;
+     
+    }
+
+    #LogIn,#SignUp,#About{
+  
+      position: relative;
+     
+      top: -6vh;
+      height: 5vh;
+     
+      
+    }
+    
+    #LogOut{
+      position: relative;
+      top: -6vh;
+      left: 90vw;
+      height: 5vh;
+     
+    }
+    
+    
+
+
+}
+
+@media screen 
+and (min-device-width: 1200px) 
+and (max-device-width: 1600px) 
+and (-webkit-min-device-pixel-ratio: 1){
+
+  #LogIn,#SignUp,#About{
+    
+    width: 6vw;
+   
+    
+  }
+  
+  #LogOut{
+    
+    width: 6vw;
+   
+  }
+
+  
+  
+}
+
+
 @media all and (min-width:1024px) {
 
 
@@ -197,68 +254,86 @@ button:active {
 
 }
 
-@media all and (max-width:400px){
-  .Header h1{
-    
-    position: absolute;
-    left: 2vw;
-    top: 1vh;
+
+@media only screen 
+  and (min-device-width: 320px) 
+  and (max-device-width: 480px)
+  and (-webkit-min-device-pixel-ratio: 2) {
+
+    .Header h1{
     
-    font-family: 'Allerta Stencil', sans-serif;
-    font-weight: 400;
-    font-size: 150%;
-    line-height: 61px;
+      position: absolute;
+      left: 2vw;
+      top: 1vh;
+      
+      font-family: 'Allerta Stencil', sans-serif;
+      font-weight: 400;
+      font-size: 8vw;
+      line-height: 61px;
+      
+      color: #000000;
     
-    color: #000000;
+    }
   
-  }
-
-  .SignUp{
-  
-    position: absolute;
-    width: 8vw;
-    right: 20.5vw;
-    top: 2.5vh;
-    margin-left: 1vw;
-  
-  
-  }
-  
-  .LogIn,.Account{
-   
-    position: absolute;
-  
-    width: 8vw;
-   
-    right: 30.5vw;
-    top: 2.5vh;
-    margin-left: 2vw;
-  
-  }
-  
-  .About{
-    position: absolute;
-    width: 8vw;
-    right: 4vw;
-    top: 2.5vh;
-    margin-left: 5vw;
-  }
-  
-  #LogOut{
-    position: absolute;
-    width: fit-content; 
-    height: 4.5vh;
-    right: 14vw;
-    top: 2.5vh;
-    margin: auto;
+    .SignUp{
+    
+      position: absolute;
+      width: 8vw;
+      right: 20.5vw;
+      top: 2.5vh;
+      margin-left: 1vw;
+    
+    
+    }
+    
+    .LogIn,.Account{
+     
+      position: absolute;
+    
+      width: 8vw;
+     
+      right: 30.5vw;
+      top: 2.5vh;
+      margin-left: 2vw;
+    
+    }
+    
+    .About{
+      position: absolute;
+      width: 8vw;
+      right: 4vw;
+      top: 2.5vh;
+      margin-left: 5vw;
+    }
+    
+    #LogOut{
+      position: absolute;
+      width: fit-content; 
+      height: 4.5vh;
+      right: 14vw;
+      top: 2.5vh;
+      margin: auto;
+    
+      font-family: 'Inter', sans-serif;
+      font-size: 100%;
+      color: #000000;
+      text-align: center;
+     
+    }
+
+    .dropDownContainer{
+ 
+      position: absolute;
+      left: 75vw;
+      top: 2.5vh;
+      
+    
+      width: 5vw;
+      height: 9vh;
+      
+    }
+    
   
-    font-family: 'Inter', sans-serif;
-    font-size: 100%;
-    color: #000000;
-    text-align: center;
-   
-  }
-
 
 }
   
diff --git a/start_page/src/start_page/StartPage.css b/start_page/src/start_page/StartPage.css
index 912f14a..11cc2d9 100644
--- a/start_page/src/start_page/StartPage.css
+++ b/start_page/src/start_page/StartPage.css
@@ -211,6 +211,149 @@ br{
   top: 8vh;
 }
 
+@media screen 
+and (min-device-width: 1200px) 
+and (max-device-width: 1600px) 
+and (-webkit-min-device-pixel-ratio: 1){
+
+  #welcome{
+    font-size: 3.5vw;
+   
+  }
+
+  #start{
+ 
+    position: absolute;
+    top:35vh;
+    left: 4vw;
+
+  }
+
+  .RegisterNow{
+    position: absolute;
+    width: 10vw;
+    height: 5vh;
+    top: 42vh;
+    left: 14vw;
+    
+    font-family: 'Inter', sans-serif;
+    font-weight: 700;
+    text-align: center;
+    
+    color: #000000; 
+     
+  }
+  
+
+  .RegisterNow>Button{
+    width: 100%;
+    height: 100%;
+    font-size: 1.2vw;
+  }
+
+  #imgcontainers{
+    position: absolute;
+    top: 3vh;
+    width: 3vw;
+    height: 5vh;
+   
+  }
+
+  #stitle{
+    font-size: 2vw;
+    position: relative;
+    top: 8vh;
+  }
+
+  #small {
+
+   
+    font-size: 1.5vw;
+    
+  }
+  
+
+ 
+
+  
+  
+
+  
+}
+
+
+@media screen 
+  and (min-device-width: 2560px) 
+  and (-webkit-min-device-pixel-ratio: 1) { 
+
+    #imgcontainers{
+      width: 4vw;
+      height: 8vh;
+      position: absolute;
+      left: 14.8vw;
+      
+    }
+
+    #small {
+ 
+      position: relative;
+      top: 8vh;
+ 
+      font-size: 1.5vw;
+     
+      
+      width: 20vw;
+      text-align: center;
+    
+  
+    
+     
+    }
+
+    #stitle{
+  
+      top: 9vh;
+    }
+
+    .RegisterNow>Button{
+      font-size: 1.3vw;
+    }
+
+      
+  #start{
+  
+    position: absolute;
+    top:32vh;
+    left: 4vw;
+    width: 30vw;
+    
+
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 2vw;
+    line-height: 36px;
+    text-align: center;
+
+    color: #000000;
+      
+  }
+
+  #imageContainer{
+    position: absolute;
+    
+    left: 35vw;
+    top: 3vh;
+    height: 50vh;
+    width: 30vw;
+  }
+
+
+  
+
+}
+
+
 
 
 
@@ -330,8 +473,13 @@ br{
 
 
 
-@media all and (max-width:450px){
 
+@media only screen 
+  and (min-device-width: 375px) 
+  and (max-device-width: 667px) 
+  and (-webkit-min-device-pixel-ratio: 2) { 
+
+    
   .MainSection {
  
     position: relative;
@@ -376,14 +524,204 @@ br{
    
     position: absolute;
     top:32vh;
+    left: 10vw;
+    width: 50vw;
+  
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 4vw;
+   
+    text-align: center;
+  
+    color: #000000;
+      
+  }
+
+  .RegisterNow{
+    
+    position: absolute;
+    width: 20vw;
+    height: 5vh;
+    top: 38vh;
+    left: 25vw;
+    
+    font-family: 'Inter', sans-serif;
+    font-weight: 700;
+    text-align: center;
+    
+    color: #000000; 
+     
+  }
+  
+  .RegisterNow>Button{
+    
+    width: 100%;
+    height: 100%;
+    font-size: 70%;
+  }
+
+  .BottomSection{
+    
+    position: relative;
+    width: 100%;
+    min-height: 40vh;
+    height: fit-content;
+    top: 30vh;
+    display: flex;
+    justify-content: space-evenly;
+    background: #FDF4C9;
+  }
+
+  .bottomh1{
+    left: 0;
+   
+    position: absolute;
+    width: 100vw;
+    height: 33.33%;
+  }
+  .bottomh2{
+   
+    left: 0;
+    top: 33.33%;
+    position: absolute;
+    width: 100vw;
+    height: 33.33%;
+  }
+  .bottomh3{
+   
+    left: 0;
+    top: 66.33%;
+    position: absolute;
+    width: 100vw;
+    height: 33.33%;
+  }
+
+  #imgcontainers{
+   
+    width: 10vw;
+    height: 5vh;
+    left: 4vw;
+   
+    position: absolute;
+    top: 3vh;
+  }
+  
+
+  #small {
+    
+    position: absolute;
+
+    top: 4vh;
+    left: 15vw;
+    margin: auto;
+    height: fit-content;
+  
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 400;
+  
+    font-size: 0.8rem;
+    line-height: 1.5em;
+    
+    width: 80vw;
+    text-align: center;
+  
+    color: #000000;
+  
+   
+  }
+  
+  #stitle{
+   
+    width: 100%;
+    font-size: 1.0rem;
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 600;
+    text-align: center;
+    position: absolute;
+
+    top: 0vh;
+  }
+
+  .Footer{
+    
+    position: relative;
+    width: 100%;
+    height: 3vh;
+    top: 30vh;
+    background: #FFFFFF;
+  
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 15px;
+    line-height: 18px;
+    text-align: center;
+    
+  }
+
+
+}
+
+@media only screen 
+  and (min-device-width: 375px) 
+  and (max-device-width: 812px) 
+  and (-webkit-min-device-pixel-ratio: 3) { 
+
+    
+  .MainSection {
+ 
+    position: relative;
+    width: 70vw;
+    height: 45vh;
+    left: 14vw;
+    top: 20vh;
+    
+    display: block;
+  
+    background: #FDF4C9;
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    border-radius: 20px; 
+  }
+
+  #welcome{
+   
+    position: absolute;
+    top: 4vh;
     left: 15vw;
     width: 40vw;
+    height: fit-content;
+    font-family: 'Allerta Stencil', sans-serif;
+    font-weight: 800;
+    font-size: 5vw;
+    text-align: center;
+    color: #000000;
+  }
+
+  #imageContainer{
+   
+    position: absolute;
+    left: 15vw;
+    top: 12vh;
+    height: 20vh;
+    width: 40vw;
+  }
+
+  
+  #start{
+    
+   
+    position: absolute;
+    top:32vh;
+    left: 10vw;
+    width: 50vw;
   
     font-family: 'Inter';
     font-style: normal;
     font-weight: 400;
     font-size: 4vw;
-    line-height: 36px;
     text-align: center;
   
     color: #000000;
@@ -395,7 +733,7 @@ br{
     position: absolute;
     width: 20vw;
     height: 5vh;
-    top: 36vh;
+    top: 38vh;
     left: 25vw;
     
     font-family: 'Inter', sans-serif;
@@ -453,7 +791,7 @@ br{
    
     width: 10vw;
     height: 5vh;
-    left: 1vw;
+    left: 3vw;
    
     position: absolute;
     top: 3vh;
@@ -465,7 +803,7 @@ br{
     position: absolute;
 
     top: 4vh;
-    left: 13vw;
+    left: 15vw;
     margin: auto;
     height: fit-content;