diff --git a/index.html b/index.html
index e79b36a..d1cc3c6 100644
--- a/index.html
+++ b/index.html
@@ -1,76 +1,88 @@
+<?php
+session_start();
+?>
 <!DOCTYPE html>
-<html lang="en" class="bg-white">
-<head>
+<html id="html-tag" lang="en" class="py-[0%] my-[0%]">
+<head class="py-0 my-0 h-0">
     <meta charset="UTF-8">
     <title>Home</title>
   <link rel="stylesheet" href="output.css">
 </head>
-<body class="mx-[10%] bg-white">
-  <main class="m-10 h-auto w-auto dark:bg-white">
+<body class="w-full my-[0%] py-[0%] px-[10%] h-full bg-gray-300 dark:bg-black">
 
+  <main class="h-auto w-auto py-[5%]">
 	<?php include 'header.php'; ?>
 
-        <div class="flex lg:flex-row flex-col w-full mb-24 justify-center items-center">
-      <div class="h-96 lg:w-auto sm:w-full flex flex-col flex-grow">
-        <div class="w-full flex items-center justify-center mb-6 border-8 border-black">
-          <h1 class="text-4xl md:text-5xl lg:text-6xl">Create and share geo-restricted links</h1>
-        </div>
-        <div class="h-72 w-full flex items-center justify-center text-2xl border-8 border-black">
-          <p>
-            GLinkZip enables you to generate and distribute geo-restricted shortened URLs for private, secure access.
-          </p>
-        </div>
+      <div class="hero py-16 h-auto bg-[#5EDC70] dark:bg-gray-800 dark:brightness-60 brightness-125 rounded-lg my-8 shadow-lg shadow-gray-800">
+          <div class="hero-content flex-col-reverse lg:flex-row-reverse">
+              <div class="relative items-center w-auto h-auto sm:w-full flex-grow-0 mt-8 lg:mt-0 justify-center mx-auto">
+		 <video autoplay class="p-2 rounded-lg bg-yellow-500">
+			<source src="homepagevideo.mp4" type="video/mp4">
+		 </video>
+
+              </div>
+
+              <div>
+                  <h1 class="text-5xl font-bold text-[#C21EC0] dark:text-[#BF991D] brightness-125 font-serif tracking-wider leading-tight pl-8">Create and share geo-restricted links</h1>
+                  <p class="py-6 text-black dark:text-gray-300 pl-8 text-lg">GLinkZip enables you to generate and distribute geo-restricted URLs for private, secure access.</p>
+                  <div class="flex justify-center items-center">
+                  <a href="<?php if(!isset($_SESSION['user'])) { echo("signup.html"); } else { echo("form.html"); }?>"><button class="btn btn-success text-black bg-[#C21EC0] border-[#5A1475] border-4 hover:bg-[#C21EC0] hover:border-[#C21EC0] hover:border-none hover:shadow-black/50 dark:bg-[#BF991D] dark:border-black dark:border-4 dark:hover:bg-[#C2B100] dark:hover:border-black dark:hover:border-none text-xl hover:shadow-lg dark:hover:shadow-[#C2B100]/50">Get Started</button></a>
+                  </div>
+		</div>
+          </div>
       </div>
-      <video autoplay>
-	<source src="homepagevideo.mp4" type="video/mp4">
-      </video>
-    </div>
-    <div class="flex lg:flex-col h-auto flex-col w-full mb-24 border-8 border-black">
-      <div class="w-full justify-center items-center flex border-8 border-black">
-        <p class="text-4xl md:text-5xl lg:text-6xl">
+      <!-- New hero end -->
+      <!-- 3 column start -->
+
+    <div class="flex lg:flex-col flex-col w-full mb-24 bg-[#761ffe] brightness-125 dark:brightness-60 dark:bg-gray-800 rounded-lg shadow-lg shadow-gray-800">
+      <div class="w-full my-12 justify-center items-center flex">
+        <p class="text-4xl md:text-5xl lg:text-6xl text-emerald-400 font-bold font-serif brightness-125">
           How it works
         </p>
       </div>
-      <div class="flex lg:flex-row flex-col justify-between items-center h-auto w-auto mx-5 mb-5">
-        <div class="flex flex-col items-center h-full lg:w-1/3 w-full">
-          <img src="step1.png" alt="Picture of link creation" class="bg-black flex-grow m-5 w-full rounded">
-          <p class="text-xl">
+      <div class="flex lg:flex-row flex-col  items-start h-auto w-auto mx-5 mb-5">
+        <div class="flex flex-col items-center h-full lg:w-1/3 w-full pt-0 px-4">
+          <img src="step1.png" alt="pic2" class="bg-black flex-grow m-5 w-full rounded">
+          <h1 class="text-5xl text-success">
             Step 1
-          </p>
-	  <p class="text-xl">
-		Create the GLink. You can either create a regular link, or a geo-restricted one.
-	  </p>
+          </h1>
+            <p class="py-6 text-gray-300">Create the GLink. You can either create a regular shortened URL, or a geo-restricted one, in which case you can restrict it to a specific radius around your current location.</p>
         </div>
-        <div class="flex flex-col items-center h-full lg:w-1/3 w-full">
-          <img src="step2.png" alt="Picture of link distribution" class="bg-black flex-grow m-5 w-full rounded">
-          <p class="text-xl">
+        <div class="flex flex-col items-center h-full lg:w-1/3 w-full pt-0 px-4">
+          <img src="step2.png" alt="pic2" class="bg-black flex-grow m-5 w-full rounded">
+          <h1 class="text-5xl text-success">
             Step 2
-          </p>
-	  <p class="text-xl">
-		Distribute the GLink. If you created a regular link, then no additional configuration is needed.
-	  </p>
+          </h1>
+            <p class="py-6 text-gray-300">
+            Distribute the GLink. If you created a regular link i.e. with no restrictions, then the service works similar to other link shorteners, like TinyURL or Bitly.
+            </p>
         </div>
-        <div class="flex flex-col items-center h-full lg:w-1/3 w-full">
-          <img src="step3.png" alt="Picture of link access (authorized and unauthorized)" class="bg-black flex-grow m-5 w-full rounded">
-          <p class="text-xl">
+        <div class="flex flex-col items-center h-full lg:w-1/3 w-full pt-0 px-4 flex-grow flex-shrink-0">
+          <img src="step3.png" alt="pic2" class="bg-black flex-grow m-5 w-full rounded">
+          <h1 class="text-5xl text-success ">
             Step 3
-          </p>
-	  <p class="text-xl">
-		If the link is geo-restricted, then location co-ordinates will be used to determine access.
-	  </p>
+          </h1>
+            <p class="py-6 text-gray-300">
+            If the link is geo-restricted, then anyone who accesses it will have to provide their location co-ordinates for authorization.
+            </p>
         </div>
       </div>
     </div>
-    <div class="w-full border-8 border-black flex flex-col items-center justify-center">
-      <div class="border-4 border-black w-auto h-auto mt-8 text-4xl md:text-5xl lg:text-6xl flex flex-wrap">
-        Why?
+      <!-- 3 column end -->
+      <!-- why start -->
+    <div class="w-full flex bg-[#eab30e] flex-col items-center justify-center rounded-lg shadow-lg shadow-gray-800">
+      <div class=" h-auto mt-8 text-4xl md:text-5xl lg:text-6xl flex flex-wrap w-full justify-end pr-16">
+          <h1 class="font-serif font-bold underline">
+        Why GLink?
+          </h1>
       </div>
-      <div class="border-4 border-black h-auto mt-4 lg:mx-8 max-w-md sm:flex-grow-0 mb-4 ">
-        <p class="text-lg md:text-xl lg:text-2xl">
+      <div class="py-8 max-w-lg sm:flex-grow-0 flex pr-16 flex-wrap self-end justify-end ">
+        <p class="text-lg md:text-xl lg:text-2xl text-right">
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ab delectus dolor, dolorem dolorum et facilis, illum ipsam, natus nobis nulla quam repellat saepe! Aperiam doloremque harum laudantium repellendus tempora!
         </p>
       </div>
     </div>
+      <!-- Why end -->
   </main>
 </body>
 </html>
