diff --git a/index.html b/index.html
index 30b915c..8cf8f18 100644
--- a/index.html
+++ b/index.html
@@ -6,154 +6,140 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="stylesheet" href="./src/pages/nav/nav.css">
   <script src="https://cdn.tailwindcss.com"></script>
-  <title>Home</title>
+  <link rel="stylesheet" href="style1.css">
+  <title>Hacktoberfest 2023</title>
+  <style>
+    :root {
+      --accent-color: #f97316;
+    }
+
+    .heading {
+      text-align: center;
+      padding: 1rem 0;
+      font-size: 2.5rem; 
+      color: #000000;
+    }
+
+    .heading span {
+      background-color: var(--accent-color);
+      color: #ffffff;
+      display: inline-block;
+      padding: 0.1rem 2rem;
+      clip-path: polygon(100% 0, 93% 50%, 100% 99%, 0% 100%, 7% 50%, 0% 0%);
+    }
+
+    .content-text {
+      font-size: 1.25rem;
+    }
+
+    .list-item {
+      font-size: 1.25rem;
+    }
+  </style>
 </head>
 
-<body>
-  <navbar class="flex justify-around items-center overflow-auto max-sm:flex-col">
-    <brand-name class="text-xl font-bold max-sm:text-lg">Open Source IIIT Ranchi</brand-name>
-    <ul id="mobile_ui" class="flex text-lg max-sm:text-base font-medium">
-      <li class="hover:bg-orange-500 p-4 max-sm:p-1 cursor-pointer">
-        <a href="/index.html">Home</a>
-      </li>
-      <li class="hover:bg-orange-500 p-4 max-sm:p-1 cursor-pointer">
-        <a href="src/pages/freshers.html">Fresher</a>
-      </li>
-      <li class="hover:bg-orange-500 p-4 max-sm:p-1 cursor-pointer">
-        <a href="src/pages/sophomore.html">Sophomore</a>
-      </li>
-      <li class="hover:bg-orange-500 p-4 max-sm:p-1 cursor-pointer">
-        <a href="src/pages/third-year.html">Third Year</a>
-      </li>
-      <li class="hover:bg-orange-500 p-4 max-sm:p-1 cursor-pointer">
-        <a href="src/pages/senior.html">Senior</a>
-      </li>
+<body class="bg-gray-100">
+  <navbar class="flex justify-between items-center p-6 bg-white shadow-lg">
+    <brand-name class="text-2xl font-bold text-gray-800">Open Source Celebration</brand-name>
+    <ul id="mobile_ui" class="hidden md:flex space-x-6 text-lg font-medium text-gray-600">
+      <li class="hover:bg-orange-500 p-2 rounded transition"><a href="/index.html">Home</a></li>
+      <li class="hover:bg-orange-500 p-2 rounded transition"><a href="src/pages/freshers.html">Fresher</a></li>
+      <li class="hover:bg-orange-500 p-2 rounded transition"><a href="src/pages/sophomore.html">Sophomore</a></li>
+      <li class="hover:bg-orange-500 p-2 rounded transition"><a href="src/pages/third-year.html">Third Year</a></li>
+      <li class="hover:bg-orange-500 p-2 rounded transition"><a href="src/pages/senior.html">Senior</a></li>
     </ul>
-    <ul class="flex text-lg max-sm:text-base font-medium">
-      <li id="dropdown" class="hover:bg-orange-500 p-4 max-sm:p-1 cursor-pointer">
-        <div class="dropdown">
-          <button class="dropbtn">Dropdown
-            <i class="fa fa-caret-down"></i>
-          </button>
-          <div class="dropdown-content">
-            <a href="/index.html">Home</a>
-            <a href="src/pages/freshers.html">Fresher</a>
-            <a href="src/pages/sophomore.html">Sophomore</a>
-            <a href="src/pages/third-year.html">Third Year</a>
-            <a href="src/pages/senior.html">Senior</a>
-          </div>
+    <ul class="md:hidden flex items-center space-x-4">
+      <li id="dropdown" class="relative">
+        <button class="bg-orange-500 text-white p-2 rounded-md">Menu <i class="fa fa-caret-down"></i></button>
+        <div class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg hidden group-hover:block">
+          <ul class="py-1">
+            <li class="hover:bg-orange-500 p-2"><a href="/index.html">Home</a></li>
+            <li class="hover:bg-orange-500 p-2"><a href="src/pages/freshers.html">Fresher</a></li>
+            <li class="hover:bg-orange-500 p-2"><a href="src/pages/sophomore.html">Sophomore</a></li>
+            <li class="hover:bg-orange-500 p-2"><a href="src/pages/third-year.html">Third Year</a></li>
+            <li class="hover:bg-orange-500 p-2"><a href="src/pages/senior.html">Senior</a></li>
+          </ul>
         </div>
       </li>
     </ul>
-
   </navbar>
 
-  </navbar>
-  <div class="w-full bg-orange-500 h-4"></div>
+  <div class="w-full bg-orange-500 h-1"></div>
 
-  <div class="container py-16 max-sm:py-5">
-    <h1 class="text-6xl ml-20 max-sm:ml-5 max-sm:text-3xl">
-      Welcome to
-      <span class="text-orange-500 font-semibold">IIIT Ranchi</span> <br />
-      Hacktoberfest 2023
+  <div class="container mx-auto py-16 bg-white rounded-lg shadow-lg">
+    <h1 class="heading">
+      Welcome to <span>Hacktoberfest 2023</span>
     </h1>
 
-    <p class="text-xl ml-20 my-6 max-sm:ml-5 w-1/2 max-sm:w-[90%]">
-      Are you ready to dive into the world of open source? The unofficial IIIT
-      Ranchi Hacktoberfest 2023 website is your gateway to an exciting
-      opportunity to contribute, collaborate, and grow as a developer.
+    <p class="content-text text-center my-6 text-gray-600">
+      Ready to dive into the world of open source? Join us for an exciting opportunity to contribute, collaborate, and grow as a developer!
     </p>
-    <button class="text-lg ml-20 max-sm:ml-6  bg-orange-500 rounded-md p-2 font-medium hover:ring-2 hover:ring-black"><a
-        href="https://github.com/aialok/open-source-IIIT-Ranchi" target="_blank">Contribute on Github</a></button>
-
+    <div class="text-center">
+      <button class="bg-orange-500 text-white rounded-md p-3 font-medium hover:ring-2 hover:ring-black transition shadow hover:shadow-lg">
+        <a href="https://github.com/aialok/open-source-IIIT-Ranchi" target="_blank">Contribute on Github</a>
+      </button>
+    </div>
   </div>
-  <div class="container py-8 max-sm:py-5">
-    <h1 class="text-5xl ml-20 max-sm:ml-5 max-sm:text-3xl">
-  What is
-  <a  href="https://hacktoberfest.com/" target="_blank" class="text-orange-500 font-semibold hover:cursor-pointer hover:underline">Hacktoberfest</a>
-  ?
-</h1>
-
-
 
-
-    <h2 class="text-xl ml-20 my-2 max-sm:ml-5 max-sm:w-[90%]">
-      Hacktoberfest is an annual celebration of open source during the month
-      of October. It's a fantastic opportunity for you to:
+  <div class="container mx-auto py-8 bg-gray-50 rounded-lg shadow">
+    <h2 class="heading">
+      What is <a href="https://hacktoberfest.com/" target="_blank" class="text-orange-500"><span>Hacktoberfest</span></a>?
     </h2>
+    <h3 class="content-text text-center my-4 text-gray-600">An annual celebration of open source during October. Here’s what you can do:</h3>
 
-    <ul class="text-xl ml-20 my-6 max-sm:ml-8 w-1/2 list-disc max-sm:w-[90%] max-sm:text-lg">
-      <li>🌐 Contribute to open source projects.</li>
-      <li>🤝 Collaborate with developers from around the world.</li>
-      <li>🚀 Enhance your coding skills.</li>
+    <ul class="content-text mx-auto my-6 list-disc text-gray-600 w-3/4">
+      <li class="list-item">🌐 Contribute to open source projects.</li>
+      <li class="list-item">🤝 Collaborate with developers from around the world.</li>
+      <li class="list-item">🚀 Enhance your coding skills.</li>
     </ul>
   </div>
 
-  <div class="container py-8 max-sm:py-5">
-    <h1 class="text-5xl ml-20 max-sm:ml-5 max-sm:text-4xl">
-      How to get <span class="text-orange-500 font-medium">started</span> ?
-    </h1>
+  <div class="container mx-auto py-8 bg-white rounded-lg shadow">
+    <h2 class="heading">
+      How to get <span>started</span>?
+    </h2>
 
-    <ul class="text-xl ml-20 my-6 max-sm:ml-8 w-1/2 list-disc max-sm:w-[90%] max-sm:text-lg">
-      <li>
-        <span class="font-semibold">Create Your Portfolio :</span> Build a
-        personal portfolio website that highlights your projects, skills, and
-        experiences.
-      </li>
-      <li>
-        <span class="font-semibold">Contribute :</span> Add your portfolio to
-        the this website repository. It's as simple as a pull
-        request!
-      </li>
-      <li>
-        <span class="font-semibold">Connect :</span> Join our community of
-        IIIT Ranchi students who are sharing their portfolios. Explore their
-        work and get inspired.
-      </li>
-      <li>
-        <span class="font-semibold">Celebrate :</span> Be recognized for your
-        hard work and creativity.
-      </li>
+    <ul class="content-text mx-auto my-6 list-disc text-gray-600 w-3/4">
+      <li class="list-item"><span class="font-semibold">Create Your Portfolio:</span> Build a personal portfolio website to showcase your skills.</li>
+      <li class="list-item"><span class="font-semibold">Contribute:</span> Add your portfolio to our repository with a simple pull request!</li>
+      <li class="list-item"><span class="font-semibold">Connect:</span> Join our community of students sharing portfolios.</li>
+      <li class="list-item"><span class="font-semibold">Celebrate:</span> Be recognized for your hard work and creativity.</li>
     </ul>
   </div>
-  <div class="container py-8 max-sm:py-4">
-    <h1 class="text-5xl ml-20 max-sm:ml-5 max-sm:text-4xl">
-      Featured <span class="text-orange-500 font-medium">Portfolio</span>
-    </h1>
-    <p class="text-xl ml-20 my-2 max-sm:ml-5 max-sm:text-lg">
-      Here are some impressive portfolios created by your peers:
-    </p>
-    <ul class="text-xl ml-20 my-6 max-sm:ml-10 w-1/2 list-disc max-sm:w-[90%]">
-      <li class="p-4 max-sm:p-1">
-        <a href="src/pages/freshers.html">Fresher</a>
+
+  <div class="container mx-auto py-8 bg-gray-50 rounded-lg shadow">
+    <h2 class="heading">
+      Featured <span>Portfolios</span>
+    </h2>
+    <p class="content-text text-center my-2 text-gray-600">Check out impressive portfolios created by your peers:</p>
+    <ul class="content-text mx-auto my-6 list-disc text-gray-600 w-3/4 space-y-4">
+      <li class="bg-white p-4 rounded-lg shadow hover:shadow-md transition">
+        <a href="src/pages/freshers.html" class="hover:text-orange-500">Fresher</a>
       </li>
-      <li class=" p-4 max-sm:p-1">
-        <a href="src/pages/sophomore.html">Sophomore</a>
+      <li class="bg-white p-4 rounded-lg shadow hover:shadow-md transition">
+        <a href="src/pages/sophomore.html" class="hover:text-orange-500">Sophomore</a>
       </li>
-      <li class=" p-4 max-sm:p-1">
-        <a href="src/pages/third-year.html">Third Year</a>
+      <li class="bg-white p-4 rounded-lg shadow hover:shadow-md transition">
+        <a href="src/pages/third-year.html" class="hover:text-orange-500">Third Year</a>
       </li>
-      <li class=" p-4 max-sm:p-1">
-        <a href="src/pages/senior.html">Senior</a>
+      <li class="bg-white p-4 rounded-lg shadow hover:shadow-md transition">
+        <a href="src/pages/senior.html" class="hover:text-orange-500">Senior</a>
       </li>
     </ul>
   </div>
 
-  <div class="container py-4 max-sm:py-4">
-    <h1 class="text-5xl ml-20 max-sm:ml-5 max-sm:text-4xl">
-      Join the <span class="text-orange-500 font-medium">Celebration</span>
-    </h1>
-    <p class="text-xl ml-20 my-2 max-sm:ml-5 w-1/2 max-sm:w-[90%] max-sm:text-lg">
-      Let's celebrate your achievements and the spirit of Hacktoberfest 2023! Create your portfolio and contribute it to
-      the main unofficial website. Start showcasing your work to the world.
-    </p>
-
+  <div class="container mx-auto py-8 bg-white rounded-lg shadow">
+    <h2 class="heading">
+      Join the <span>Celebration</span>
+    </h2>
+    <p class="content-text text-center my-2 text-gray-600">Celebrate your achievements and the spirit of Hacktoberfest 2023! Create your portfolio and showcase your work to the world.</p>
   </div>
+
   <footer class="bg-gray-800 text-white py-6">
     <div class="container mx-auto text-center">
-      <p>&copy; 2023 IIIT Ranchi Hacktoberfest. All rights reserved.</p>
+      <p>&copy; 2023 Hacktoberfest Celebration. All rights reserved.</p>
       <p>Empowering Students to Innovate and Contribute to Open Source</p>
-      <p>Made in IIIT Ranchi with ❤️ by Alok Gupta</p>
+      <p>Made with ❤️ by the Community</p>
     </div>
   </footer>
 
