diff --git a/public/css/main_page_style.css b/public/css/main_page_style.css
index e634ddb..73127c7 100644
--- a/public/css/main_page_style.css
+++ b/public/css/main_page_style.css
@@ -1,252 +1,196 @@
-* {
-    box-sizing: border-box;
-}
 
-body {
+  * {
     margin: 0;
     padding: 0;
-    background-color: var(--primary-color);
-}
-
-/* header styling  */
+    font-family: sans-serif;
+  }
+  
+  /* header styling */
+  .banner {
+    width: 100%;
+    height: 100vh;
+    background-image: linear-gradient(rgba(8, 23, 82, 0.75), rgba(30, 2, 30, 0.75)), url('../images/calm.jpg');
+    background-size: cover;
+    background-position: center;
+  }
+  
+  .logo {
+    width: 270px;
+    cursor: pointer;
+    margin-left: 5px; /* Reduced margin */
+    margin-right: 5px; /* Reduced margin */
+  }
 
-.head {
+  .search-bar {
     display: flex;
-    justify-content: space-between;
     align-items: center;
-    flex-wrap: wrap;
-    padding: 12px;
-    background-color: rgb(43 43 43);
-}
-
-
-
-#icon{
-    width: 30px;
-    cursor: pointer;
-    position: absolute;
-    top: 30px; 
-    right: 90px;
+    margin-top: 5px;
   }
-
-  body h2{
-    color: var(--secondary-color);
+  
+  .search-bar input {
+    width: 22vw;
+    padding: 5px;
+    font-size: 16px;
+    border: none;
+    border-radius: 5px;
+    outline: none;
+    margin-right: 5px;
+    background-color: rgba(255, 255, 255, 0.2); /* Transparent background */
+    color: white; /* Text color */
   }
-
-  .text{
-    color: var(--secondary-color);
+  
+  .search-bar input::placeholder {
+    color: rgba(255, 255, 255, 0.6); /* Placeholder text color */
   }
-  :root{
-    --primary-color: #eeeded;
-    --secondary-color: #0e0e0e;
+  .search-bar input:hover{
+    border: 1.5px solid #009688;
   }
   
-  .dark-theme{
-    --primary-color: #0e0e0e;
-    --secondary-color: #fff;
+  .search-bar button {
+    padding: 5px 10px;
+    font-size: 16px;
+    border-radius: 25px;
+    background: transparent;
+    border: 1.5px solid #009688;
+    
+    color: white;
+    cursor: pointer;
   }
 
-
-.head div:last-child {
-    padding: 0px 40px 0px 0px;
-}
-
-@media (max-width:310px) {
-    .head {
-        flex-direction: column;
-    }
-
-    .head div:last-child {
-        padding: 30px;
-    }
-}
-
-/* navbar styling */
-nav {
+  .search-bar button:hover {
+    background-color: #009688; /* Slightly darker on hover */
+  }
+  
+  
+  /* navbar styling */
+  .nav {
+    width: 95%; /* Increased width to minimize side margins */
+    margin: auto;
+    padding: 5px 0; /* Reduced padding */
     display: flex;
-    justify-content: space-between;
-    padding: 8px 10px;
-    font-size: 18px;
-    background-color: rgb(195, 195, 210);
     align-items: center;
-    flex-wrap: wrap;
-}
-
-.navbar {
-    display: flex;
-    padding: 8px 20px;
     justify-content: space-between;
-    align-items: center;
-}
+  }
+  
+  .h2 {
+    cursor: pointer;
+    color: white;
+  }
 
-.nav-items {
-    padding: 0px 26px;
-    font-size: 20px;
-}
 
-.nav-items a {
+  
+  .nav ul li {
+    list-style: none;
+    display: inline-block;
+    margin: 5px 8px; /* Reduced margin */
+    position: relative;
+  }
+  
+  .nav ul li a {
     text-decoration: none;
-    color: black;
-}
-
-.nav-items:nth-child(1) input {
-    padding: 11px;
-    border-radius: 20px;
-    width: 18vw;
-}
-
-.nav-items:nth-child(2) {
-    background-color: rgb(121, 121, 163);
-    padding: 10px;
-    border-radius: 10px;
-    transition: all 0.8s ease-in-out;
-}
-
-.nav-items:nth-child(2):hover {
-    background-color: rgb(133, 133, 186);
-}
-
-@media (max-width:860px) {
-    .nav-items:nth-child(1) input {
-        width: 26vw;
-    }
-}
-
-@media (max-width:764px) {
-    #result {
-        display: none;
-    }
-
-    #heading {
-        display: none;
-    }
-
-    .nav-items:nth-child(1) input {
-        width: 38vw;
-    }
-
-    nav {
-        justify-content: center;
-    }
-
-    .navbar {
-        justify-content: center;
-        padding: 8px 0px;
-    }
-
-    .nav-items {
-        padding: 10px 15px;
-    }
-}
-
-@media (max-width:565px) {
-    .navbar {
-        flex-wrap: wrap;
-    }
-
-    .nav-items:nth-child(1) input {
-        width: 68vw;
-    }
-
-    .nav-items {
-        padding: 30px 20px;
-    }
-
-    .logo img {
-        width: 40vw;
-    }
-}
-
-/* upload section styling */
-
-.first_main {
-    background: rgb(43, 83, 94);
-    background: radial-gradient(circle, rgba(43, 83, 94, 1) 23%, rgba(32, 44, 47, 1) 100%);
-}
-
-.upload_sec {
+    color: #fff;
+    font-size: 25px;
+    cursor: pointer;
+  }
+  
+  .nav ul li::after {
+    content: '';
+    height: 3px;
+    width: 0;
+    background: #009688;
+    position: absolute;
+    left: 0;
+    bottom: -10px;
+    transition: 0.5s;
+  }
+  
+  .nav ul li:hover::after {
+    width: 100%;
+  }
+  
+  
+  .content{
+    width: 100%;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-100%);
     text-align: center;
-    position: relative;
-    /* background-color: rgb(17, 16, 16); */
-    background: rgb(22, 40, 46);
-    background: radial-gradient(circle, rgba(22, 40, 46, 1) 23%, rgba(38, 51, 55, 1) 100%);
-    height: 80vh;
-    border-radius: 0% 00% 90% 0%;
-    border-right: 7px solid red;
-    border-bottom: 3px solid red;
-}
-
-.upload_sec div {
+    color: #ffff;
+  }
+  
+  .content h1{
+    margin-top: 20px;
+  }
+  
+  .content p{
+    margin: 10px auto;
+    font-weight: 100;
+    line-height: 25px;
+  }
+  
+  .content2{
+    width: 100%;
     position: absolute;
-    top: 20%;
-    width: 42vw;
-    font-size: 20px;
-}
-
-.upload_sec div a {
+    top: 50%;
+    transform: translateY(70%);
+    text-align: center;
+    color: #ffff;
+  }
+  a{
     text-decoration: none;
-    padding: 12px 20px;
-    margin: 10px 30px;
-    display: inline-block;
-    color: white;
-    border-radius: 24px;
-    font-size: 19px;
-}
-
-#view_papers {
-    background-color: rgb(213, 213, 250);
-    color: black;
-    transition: background-color 0.5s ease-in-out;
-}
+    color: #ffff;
+  }
+  
+  .content2 p{
+    margin: 10px auto;
+    font-weight: 100;
+    line-height: 25px;
+  }
+  .button{
+    margin-top: 20px;
+  }
+  .btn{
+    width: 200px;
+    padding: 10px 10px;
+    text-align: center;
+    margin: 20px 10px;
+    border-radius: 25px;
+    font-weight: bold;
+    border: 1.5px solid #009688;
+    background: transparent;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  
+  
+  .btn:hover{
+    border: none;
+    background: #009688;
+    transition: 0.5s;
+  }
+  
+  
 
-#view_papers:hover {
-    background-color: rgb(173, 173, 250);
-}
 
-#upload {
-    background-color: rgb(34, 137, 34);
-}
 
-#upload:hover {
-    transform: scale(1.04);
-}
 
-/* ai generating section styling  */
 
-#templates {
-    background-color: rgb(26, 26, 209);
-    padding: 12px 6px 12px 17px;
-    border-radius: 18px;
-}
+  .text{
+    color: var(--secondary-color);
+  }
+  :root{
+    --primary-color: #eeeded;
+    --secondary-color: #0e0e0e;
+  }
+  
+  .dark-theme{
+    --primary-color: #0e0e0e;
+    --secondary-color: #fff;
+  }
 
-.temp_sec {
-    border-top: 3px solid red;
-    border-right: 7px solid red;
-    border-bottom: none;
-    border-radius: 0% 60% 0% 0%;
-    text-align: center;
-    position: relative;
-    background: rgb(22, 40, 46);
-    background: radial-gradient(circle, rgba(22, 40, 46, 1) 23%, rgba(38, 51, 55, 1) 100%);
-    height: 80vh;
-}
 
-.temp_sec div {
-    position: absolute;
-    top: 20%;
-    width: 42vw;
-    font-size: 20px;
-}
 
-.temp_sec a {
-    text-decoration: none;
-    padding: 12px 20px;
-    margin: 10px 30px;
-    display: inline-block;
-    color: white;
-    border-radius: 24px;
-    font-size: 19px;
-}
 
 /* generate template section styling  */
 
@@ -556,4 +500,4 @@ ul {
     .footer-col {
         width: 100%;
     }
-}
+}
\ No newline at end of file
diff --git a/public/images/calm.jpg b/public/images/calm.jpg
new file mode 100644
index 0000000..96ea655
Binary files /dev/null and b/public/images/calm.jpg differ
diff --git a/public/main_page.html b/public/main_page.html
index 49defc2..8c89658 100644
--- a/public/main_page.html
+++ b/public/main_page.html
@@ -10,13 +10,13 @@
 </head>
 
 <body>
-    <header>
+    <!-- <header>
         <div class="head">
             <div class="logo"><img src="images/logo.png" alt="" width="160px"></div>
             <div id="heading" style="font-size: 34px;color: white;">Research Nexas</div>
             <div>
                 <a href="dashboard.html" title="View Profile"><i class="fa-solid fa-user"
-                        style="font-size: 30px;padding: 12px 13px;border:3px solid white;border-radius:50%;color:white"></i></a>
+                        style="font-size: 30px;padding: 8px 8px;border:3px solid white;border-radius:50%;color:white"></i></a>
             </div>
         </div>
         <nav>
@@ -34,8 +34,9 @@
                             class="fa-solid fa-bell" style="padding: 0px 8px;display:none;"></i></a></div>
             </div>
         </nav>
-    </header>
-    <main class="first_main">
+    </header> -->
+
+    <!-- <main class="first_main">
         <section class="upload_sec" style="margin: 0px 0px 2px 0px;">
             <i class="fa-solid fa-cloud-arrow-up"
                 style="text-align:center;font-size:26vw;opacity: 0.3;display: inline;color: rgb(161, 161, 196);"></i>
@@ -63,7 +64,52 @@ <h2 style="padding: 10px;font-size: 44px;color: rgb(202, 60, 60);">Explore Resea
                 <a id="templates" href="">Explore<i class="fa-solid fa-arrow-right" style="padding: 0px 14px;"></i></a>
             </div>
         </section>
-    </main>
+    </main> -->
+
+    <div class="banner">
+       
+        <div class="nav">
+          <img class="logo" src="images/logo.png" alt="">
+          <form class="search-bar">
+            <input type="text" placeholder="Search...">
+            <button type="submit">Search</button>
+          </form>
+          <ul>
+             <li><a href="">Home</a></li>
+             <li><a href="">About</a></li>
+             <li><a href="">Add Topic</a></li>
+             <li onmouseover="show()" onmouseout="hide()"><a href=""
+                 title="View Notifications"><i id="firsticon" class="fa-sharp fa-regular fa-bell"
+                     style="padding: 0px 8px;display: inline-block;"></i><i id="secondicon"
+                     class="fa-solid fa-bell" style="padding: 0px 8px;display:none;"></i></a></li>
+             <li><a href="dashboard.html" title="View Profile"><i class="fa-solid fa-user" style="border: 1px solid #ffff; border-radius: 50%; padding: 6px 6px;"></i></a></li>
+          </ul>
+        </div>
+ 
+        <div class="content">
+         <h1>Upload Papers</h1>
+         <p> Recusandae reiciendis qui dicta nostrum iure
+             deleniti labore, repudiandae a? <br>Ut non earum magni neque deleniti! Veniam non ipsam culpa mollitia
+             quidem.</p>
+         <div class="button">
+             <a class="btn" id="view_papers" href=""> View Papers</a>
+             <a class="btn" id="upload" href="upload_file.html">Upload Papers</a>
+         </div>
+        </div>
+        <div class="content2">
+         <h1>Explore Research Papers</h1>
+         <p> Recusandae reiciendis qui dicta nostrum iure
+             deleniti labore, repudiandae a? <br>Ut non earum magni neque deleniti! Veniam non ipsam culpa mollitia
+             quidem.</p>
+ 
+             <div class="button">
+                 <a class="btn" id="templates" href="">Explore <i class="fa-solid fa-arrow-right" style="padding: 0px 14px;"></i></a>
+                 
+             </div>
+        </div>
+ 
+     </div>
+     
     <h2>Generate Research templates</h2>
     <section class="generate_sec">
         <div class="generate_sec_para">