diff --git a/public/css/output.css b/public/css/output.css
index 73abaac..9e5554f 100644
--- a/public/css/output.css
+++ b/public/css/output.css
@@ -708,52 +708,11 @@ select {
   position: sticky;
 }
 
-.-inset-4 {
-  inset: -1rem;
-}
-
-.-inset-24 {
-  inset: -6rem;
-}
-
-.inset-52 {
-  inset: 13rem;
-}
-
-.inset-56 {
-  inset: 14rem;
-}
-
 .inset-y-0 {
   top: 0px;
   bottom: 0px;
 }
 
-.inset-x-0 {
-  left: 0px;
-  right: 0px;
-}
-
-.-inset-x-4 {
-  left: -1rem;
-  right: -1rem;
-}
-
-.inset-x-full {
-  left: 100%;
-  right: 100%;
-}
-
-.-inset-x-full {
-  left: -100%;
-  right: -100%;
-}
-
-.inset-x-0\.5 {
-  left: 0.125rem;
-  right: 0.125rem;
-}
-
 .right-0 {
   right: 0px;
 }
@@ -774,6 +733,11 @@ select {
   margin: auto;
 }
 
+.mx-8 {
+  margin-left: 2rem;
+  margin-right: 2rem;
+}
+
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -784,6 +748,34 @@ select {
   margin-bottom: 1rem;
 }
 
+.mx-2 {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+
+.mx-4 {
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+
+.mx-10 {
+  margin-left: 2.5rem;
+  margin-right: 2.5rem;
+}
+
+.mx-5 {
+  margin-left: 1.25rem;
+  margin-right: 1.25rem;
+}
+
+.mb-3 {
+  margin-bottom: 0.75rem;
+}
+
+.mb-8 {
+  margin-bottom: 2rem;
+}
+
 .ml-2 {
   margin-left: 0.5rem;
 }
@@ -820,12 +812,12 @@ select {
   margin-top: 1rem;
 }
 
-.mr-8 {
-  margin-right: 2rem;
+.ml-5 {
+  margin-left: 1.25rem;
 }
 
-.mr-10 {
-  margin-right: 2.5rem;
+.mb-1 {
+  margin-bottom: 0.25rem;
 }
 
 .block {
@@ -844,10 +836,18 @@ select {
   display: none;
 }
 
+.h-1 {
+  height: 0.25rem;
+}
+
 .h-10 {
   height: 2.5rem;
 }
 
+.h-20 {
+  height: 5rem;
+}
+
 .h-3 {
   height: 0.75rem;
 }
@@ -864,10 +864,42 @@ select {
   height: 100%;
 }
 
+.h-auto {
+  height: auto;
+}
+
+.h-0 {
+  height: 0px;
+}
+
+.h-0\.5 {
+  height: 0.125rem;
+}
+
+.h-1\/6 {
+  height: 16.666667%;
+}
+
+.h-1\/2 {
+  height: 50%;
+}
+
 .min-h-full {
   min-height: 100%;
 }
 
+.w-10 {
+  width: 2.5rem;
+}
+
+.w-11\/12 {
+  width: 91.666667%;
+}
+
+.w-20 {
+  width: 5rem;
+}
+
 .w-3 {
   width: 0.75rem;
 }
@@ -888,12 +920,12 @@ select {
   width: 100%;
 }
 
-.w-10\/12 {
-  width: 83.333333%;
+.w-5 {
+  width: 1.25rem;
 }
 
-.w-11\/12 {
-  width: 91.666667%;
+.w-7 {
+  width: 1.75rem;
 }
 
 .max-w-sm {
@@ -908,6 +940,45 @@ select {
   flex-grow: 1;
 }
 
+.origin-center {
+  transform-origin: center;
+}
+
+.-translate-y-1 {
+  --tw-translate-y: -0.25rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.-translate-y-1\.5 {
+  --tw-translate-y: -0.375rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.translate-y-1 {
+  --tw-translate-y: 0.25rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.translate-y-1\.5 {
+  --tw-translate-y: 0.375rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.translate-y-2 {
+  --tw-translate-y: 0.5rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.-rotate-45 {
+  --tw-rotate: -45deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.rotate-45 {
+  --tw-rotate: 45deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .scale-125 {
   --tw-scale-x: 1.25;
   --tw-scale-y: 1.25;
@@ -918,6 +989,14 @@ select {
   cursor: pointer;
 }
 
+.list-decimal {
+  list-style-type: decimal;
+}
+
+.flex-row {
+  flex-direction: row;
+}
+
 .flex-col {
   flex-direction: column;
 }
@@ -926,10 +1005,6 @@ select {
   flex-wrap: wrap;
 }
 
-.content-center {
-  align-content: center;
-}
-
 .items-center {
   align-items: center;
 }
@@ -942,12 +1017,42 @@ select {
   justify-content: space-between;
 }
 
+.space-y-2 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
+}
+
 .space-y-6 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
 }
 
+.space-x-2 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.space-x-4 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(1rem * var(--tw-space-x-reverse));
+  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.space-y-1 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
+}
+
+.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
+}
+
 .self-center {
   align-self: center;
 }
@@ -956,6 +1061,10 @@ select {
   border-radius: 0.25rem;
 }
 
+.rounded-3xl {
+  border-radius: 1.5rem;
+}
+
 .rounded-full {
   border-radius: 9999px;
 }
@@ -968,11 +1077,6 @@ select {
   border-radius: 0.375rem;
 }
 
-.rounded-l-md {
-  border-top-left-radius: 0.375rem;
-  border-bottom-left-radius: 0.375rem;
-}
-
 .rounded-r-md {
   border-top-right-radius: 0.375rem;
   border-bottom-right-radius: 0.375rem;
@@ -1021,29 +1125,38 @@ select {
   background-color: rgb(79 70 229 / var(--tw-bg-opacity));
 }
 
+.bg-slate-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(100 116 139 / var(--tw-bg-opacity));
+}
+
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
-.bg-amber-200 {
+.bg-transparent {
+  background-color: transparent;
+}
+
+.bg-teal-200 {
   --tw-bg-opacity: 1;
-  background-color: rgb(253 230 138 / var(--tw-bg-opacity));
+  background-color: rgb(153 246 228 / var(--tw-bg-opacity));
 }
 
-.bg-sky-800 {
+.bg-gray-300 {
   --tw-bg-opacity: 1;
-  background-color: rgb(7 89 133 / var(--tw-bg-opacity));
+  background-color: rgb(209 213 219 / var(--tw-bg-opacity));
 }
 
-.bg-teal-200 {
+.bg-gray-400 {
   --tw-bg-opacity: 1;
-  background-color: rgb(153 246 228 / var(--tw-bg-opacity));
+  background-color: rgb(156 163 175 / var(--tw-bg-opacity));
 }
 
-.bg-red-500 {
+.bg-gray-600 {
   --tw-bg-opacity: 1;
-  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+  background-color: rgb(75 85 99 / var(--tw-bg-opacity));
 }
 
 .bg-gradient-to-r {
@@ -1094,6 +1207,11 @@ select {
   padding: 1.5rem;
 }
 
+.px-1 {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
+
 .px-3 {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
@@ -1129,47 +1247,28 @@ select {
   padding-bottom: 0.5rem;
 }
 
-.px-1 {
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
-}
-
-.pr-3 {
-  padding-right: 0.75rem;
-}
-
-.pl-3 {
-  padding-left: 0.75rem;
-}
-
-.pl-10 {
-  padding-left: 2.5rem;
+.py-2\.5 {
+  padding-top: 0.625rem;
+  padding-bottom: 0.625rem;
 }
 
-.pr-1 {
-  padding-right: 0.25rem;
+.py-\[0\.4375rem\] {
+  padding-top: 0.4375rem;
+  padding-bottom: 0.4375rem;
 }
 
-.pr-2 {
-  padding-right: 0.5rem;
-}
-
-.pr-10 {
-  padding-right: 2.5rem;
-}
-
-.pr-1\.5 {
-  padding-right: 0.375rem;
-}
-
-.pr-0 {
-  padding-right: 0px;
+.text-left {
+  text-align: left;
 }
 
 .text-center {
   text-align: center;
 }
 
+.align-middle {
+  vertical-align: middle;
+}
+
 .font-fingerpaint {
   font-family: FingerPaint, sans-serif;
 }
@@ -1278,8 +1377,8 @@ select {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-.caret-amber-200 {
-  caret-color: #fde68a;
+.opacity-100 {
+  opacity: 1;
 }
 
 .shadow-lg {
@@ -1337,6 +1436,22 @@ select {
   transition-duration: 150ms;
 }
 
+.transition-transform {
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.transition-opacity {
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.duration-200 {
+  transition-duration: 200ms;
+}
+
 .ease-in-out {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -1501,11 +1616,26 @@ input.valid {
   background-color: rgb(99 102 241 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-slate-200:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(226 232 240 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-white:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-slate-400:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(148 163 184 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-slate-500:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(100 116 139 / var(--tw-bg-opacity));
+}
+
 .hover\:from-cyan-400:hover {
   --tw-gradient-from: #22d3ee var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(34 211 238 / 0) var(--tw-gradient-to-position);
@@ -1604,6 +1734,98 @@ input.valid {
   outline-color: #4f46e5;
 }
 
+.group:active .group-active\:visible {
+  visibility: visible;
+}
+
+.group:active .group-active\:block {
+  display: block;
+}
+
+.group:active .group-active\:hidden {
+  display: none;
+}
+
+.group:active .group-active\:w-10 {
+  width: 2.5rem;
+}
+
+.group:active .group-active\:-translate-y-1 {
+  --tw-translate-y: -0.25rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.group:active .group-active\:-translate-y-1\.5 {
+  --tw-translate-y: -0.375rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.group:active .group-active\:translate-y-1 {
+  --tw-translate-y: 0.25rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.group:active .group-active\:translate-y-1\.5 {
+  --tw-translate-y: 0.375rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.group:active .group-active\:translate-y-0 {
+  --tw-translate-y: 0px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.group:active .group-active\:-rotate-45 {
+  --tw-rotate: -45deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.group:active .group-active\:rotate-45 {
+  --tw-rotate: 45deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.group:active .group-active\:-rotate-90 {
+  --tw-rotate: -90deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.group:active .group-active\:-rotate-0 {
+  --tw-rotate: -0deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.group:active .group-active\:rotate-0 {
+  --tw-rotate: 0deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.group:active .group-active\:transition-transform {
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.group:active .group-active\:delay-500 {
+  transition-delay: 500ms;
+}
+
+.group:active .group-active\:delay-1000 {
+  transition-delay: 1000ms;
+}
+
+.group:active .group-active\:delay-0 {
+  transition-delay: 0s;
+}
+
+.group:active .group-active\:duration-200 {
+  transition-duration: 200ms;
+}
+
+.group:active .group-active\:ease-in-out {
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
 .peer:checked ~ .peer-checked\:visible {
   visibility: visible;
 }
@@ -1622,6 +1844,14 @@ input.valid {
     max-width: 24rem;
   }
 
+  .sm\:flex-1 {
+    flex: 1 1 0%;
+  }
+
+  .sm\:justify-center {
+    justify-content: center;
+  }
+
   .sm\:text-sm {
     font-size: 0.875rem;
     line-height: 1.25rem;
@@ -1653,10 +1883,18 @@ input.valid {
     display: none;
   }
 
+  .lg\:w-1\/2 {
+    width: 50%;
+  }
+
   .lg\:w-auto {
     width: auto;
   }
 
+  .lg\:flex-none {
+    flex: none;
+  }
+
   .lg\:flex-grow {
     flex-grow: 1;
   }
@@ -1665,6 +1903,10 @@ input.valid {
     align-items: center;
   }
 
+  .lg\:justify-between {
+    justify-content: space-between;
+  }
+
   .lg\:px-8 {
     padding-left: 2rem;
     padding-right: 2rem;
diff --git a/public/src/index.js b/public/src/index.js
index 6352cf7..8de5651 100644
--- a/public/src/index.js
+++ b/public/src/index.js
@@ -76,7 +76,7 @@ function validate() {
     //     /* Flag */
     // }
     let valid = true;
-    const domainExp = new RegExp("^http(s)*:\\/\\/[a-zA-Z0-9\\-]+(\\.[a-zA-Z0-9\\-]+)+$");
+    const domainExp = new RegExp("^http(s)*:\\/\\/[a-zA-Z0-9\\-]+(\\.[a-zA-Z0-9\\-]+)+[\\/_#a-zA-Z0-9\\-]*$");
     const filepathExp = new RegExp("^[a-zA-Z]+$");
     const glinkExp = new RegExp("^[a-zA-Z]*$");
     let glinkStr = glink.value;
diff --git a/result.js b/result.js
index d0ff4a0..02479bf 100644
--- a/result.js
+++ b/result.js
@@ -464,4 +464,7 @@ app.listen(port, function(){
 	console.log("server listening on port 63342");
 })
 /** Validate url and glink on client side as well */
-/** Validate to make sure request is a file before sending it */
\ No newline at end of file
+/** Validate to make sure request is a file before sending it */
+/** Make sure zip it stays behind using z-index*/
+/** Position all elements*/
+/** Work on home page */
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index 10bd2e7..d40bcb3 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,6 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ["public/**/*.{html,js}"],
+  content: ["public/**/*.{html,js}", "views/pages/index.ejs"],
   theme: {
       extend: {
           fontFamily: {
@@ -9,6 +9,24 @@ module.exports = {
               fingerpaint: ['FingerPaint', 'sans-serif'],
               narrow: ['PTSansNarrow', 'sans-serif'],
           },
+          animation: {
+              type: 'type 1.8s ease-out .8s 1 normal both',
+          },
+          keyframes: {
+              type: {
+                  '0%': { width: '0ch' },
+                  '5%, 10%': { width: '1ch' },
+                  '15%, 20%': { width: '2ch' },
+                  '25%, 30%': { width: '3ch' },
+                  '35%, 40%': { width: '4ch' },
+                  '45%, 50%': { width: '5ch' },
+                  '55%, 60%': { width: '6ch' },
+                  '65%, 70%': { width: '7ch' },
+                  '75%, 80%': { width: '8ch' },
+                  '85%, 90%': { width: '9ch' },
+                  '95%': { width: '10ch' },
+              },
+          }
       },
   },
   variants: {
diff --git a/views/pages/index.ejs b/views/pages/index.ejs
index e617394..a733497 100644
--- a/views/pages/index.ejs
+++ b/views/pages/index.ejs
@@ -11,17 +11,26 @@
 <p class="ml-4 font-fingerpaint">Hello There!</p>
 
 
-<nav class="flex items-center justify-between flex-wrap bg-gray-500 p-6 shadow-lg shadow-black/50 sticky top-0"> <!--dark:bg-black-->
-    <div class="flex items-center flex-shrink-0 text-white mr-6">
-        <svg id="logo" class="fill-current h-8 w-8 mr-2" width="54" height="54" viewBox="0 0 54 54" xmlns="http://www.w3.org/2000/svg"><path d="M13.5 22.1c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05zM0 38.3c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05z"/></svg>
-        <span class="font-semibold text-xl tracking-tight">G-Link</span>
+<nav class="flex items-center lg:justify-between sm:justify-center flex-wrap bg-gray-500 p-6 shadow-lg shadow-black/50 sticky top-0 opacity-100"> <!--dark:bg-black-->
+    <div class="block lg:hidden cursor-pointer flex:none mr-4" id="HamburgerInactive">
+        <button id="btn" class="flex flex-col items-center px-3 py-[0.4375rem] border rounded text-teal-200 border-teal-400">
+            <span class="block h-0.5 w-5 mb-1 origin-center rounded-full bg-teal-200"></span>
+            <span class="block h-0.5 w-5 mb-1 origin-center rounded-full bg-teal-200"></span>
+            <span class="block h-0.5 w-5 origin-center rounded-full bg-teal-200"></span>
+        </button>
     </div>
-    <div class="block lg:hidden">
-        <button id="hamburger-menu" class="flex items-center px-3 py-2 border rounded text-teal-200 border-teal-400 hover:text-white hover:border-white">
-            <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
+    <div id="HamburgerActive" class="hidden lg:hidden flex:none cursor-pointer mr-4 block">
+        <button class="space-y-2 px-3 py-2 border rounded text-teal-200 border-teal-400" >
+            <span class="block h-0.5 w-5 origin-center rounded-full bg-teal-200 translate-y-1.5 rotate-45"></span>
+            <span class="block h-0.5 w-5 origin-center rounded-full bg-teal-200 -translate-y-1 -rotate-45"></span>
+            <span class="hidden h-0.5 w-5 origin-center rounded-full bg-white"></span>
         </button>
     </div>
-    <div id="menu-options" class="w-full lg:block flex-grow lg:flex lg:items-center lg:w-auto hidden">
+    <div class="flex items-center flex-shrink-0 text-white mr-6 sm:flex-1 lg:flex-none sm:justify-center">
+        <svg id="logo" class="fill-current h-8 w-8 mr-2" width="54" height="54" viewBox="0 0 54 54" xmlns="http://www.w3.org/2000/svg"><path d="M13.5 22.1c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05zM0 38.3c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05z"/></svg>
+        <span class="font-semibold text-xl tracking-tight">G-Link</span>
+    </div>
+    <div id="menu-options" class="bg-gray-500 w-full lg:block flex-grow lg:flex lg:items-center lg:w-auto hidden">
         <div class="text-sm lg:flex-grow">
             <a href="#head" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-black mr-4 hover:bg-gray-200 hover:border hover:border-gray-200 hover:rounded text-teal-200 py-1 px-3">
                 A
@@ -32,7 +41,7 @@
             <a href="#head" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-black mr-4 hover:bg-gray-200 hover:border hover:border-gray-200 hover:rounded text-teal-200 py-1 px-3">
                 C
             </a>
-            <a href="index.html" class="block mt-4 lg:inline-block lg:mt-0 bg-blue-600 brightness-125 border border-blue-500 rounded text-teal-200 hover:text-black py-1 px-3">
+            <a href="/" class="block mt-4 lg:inline-block lg:mt-0 bg-blue-600 brightness-125 border border-blue-500 rounded text-teal-200 hover:text-black py-1 px-3">
                 Products (Form)
             </a>
         </div>
@@ -49,62 +58,81 @@
         </div>
     </div>
     <script>
-        menu = document.querySelector("#hamburger-menu");
-        options = document.querySelector("#menu-options");
-        menu.addEventListener("click", () => {
+        let active = document.getElementById("HamburgerActive");
+        let inactive = document.getElementById("HamburgerInactive");
+        let options = document.querySelector("#menu-options");
+        active.addEventListener("click", ()=>{
+            active.classList.add("hidden");
+            inactive.classList.remove("hidden");
             options.classList.toggle("hidden");
         })
-
+        inactive.addEventListener("mouseup", ()=>{
+            inactive.classList.add("hidden");
+            active.classList.remove("hidden");
+            options.classList.toggle("hidden");
+        });
     </script>
 </nav>
 
 
-<div id="root">
-    <form id="form" action="/__add" method="post" onsubmit="return validate()">
-        <div class="flex flex-wrap">
-            <label for="URL" class="text-2xl ml-4 font-rubik self-center">URL</label>
-            <span class="mandatory font-rubik self-center text-2xl">*</span>
-            <span class="font-rubik self-center m-1 text-2xl">:</span>
-            <div class="p-0.5 m-4 rounded-lg max-w-sm bg-gradient-to-r from-cyan-500 to-cyan-500 focus-within:from-rose-400 focus-within:via-fuchsia-500 focus-within:to-indigo-500 focus-within:caret-gray-600 focus-within:p-[3.2px]">
-                <input type="text" name="url" id="URL" placeholder="https://example.com" required class="p-2 w-full rounded-lg focus:outline-none focus:shadow-lg focus:focus:shadow-black/50 text-center text-lg text-black font-bold">
+<div id="root" class="mt-4 w-full">
+    <div id="formspace" class="flex flex-wrap flex-row w-full">
+        <form id="form" class="lg:w-1/2 sm:w-full justify-center" action="/__add" method="post" onsubmit="return validate()">
+            <div class="flex flex-wrap">
+                <label for="URL" class="text-2xl ml-4 font-rubik self-center">URL</label>
+                <span class="mandatory font-rubik self-center text-2xl">*</span>
+                <span class="font-rubik self-center m-1 text-2xl">:</span>
+                <div class="p-0.5 m-4 rounded-lg max-w-sm bg-gradient-to-r from-cyan-500 to-cyan-500 focus-within:from-rose-400 focus-within:via-fuchsia-500 focus-within:to-indigo-500 focus-within:caret-gray-600 focus-within:p-[3.2px]">
+                    <input type="text" name="url" id="URL" placeholder="https://example.com" required class="p-2 w-full rounded-lg focus:outline-none focus:shadow-lg focus:focus:shadow-black/50 text-center text-lg text-black font-bold">
+                </div>
             </div>
-        </div>
 
-        <div class="flex flex-wrap">
-            <label for="labels" class="text-2xl ml-4 font-rubik self-center">GLink</label>
-            <span class="mandatory font-rubik text-2xl self-center">*</span>
-            <span class="font-rubik self-center m-1 text-2xl">:</span>
-            <label for="GLink" id="labels" class=" ml-2 glink text-center text-xl self-center">glink.zip/</label>
-            <div class="p-0.5 ml-2 mr-4 my-4 rounded-lg max-w-sm bg-gradient-to-r from-cyan-500 to-cyan-500 focus-within:from-rose-400 focus-within:via-fuchsia-500 focus-within:to-indigo-500 focus-within:caret-gray-600 focus-within:p-[3.2px]">
-                <input type="text" name="glink" id="GLink" class="glink p-2 w-full rounded-lg focus:outline-none focus:shadow-lg focus:focus:shadow-black/50 text-center text-lg text-black font-bold" placeholder="exampleWebsite">
+            <div class="flex flex-wrap">
+                <label for="labels" class="text-2xl ml-4 font-rubik self-center">GLink</label>
+                <span class="mandatory font-rubik text-2xl self-center">*</span>
+                <span class="font-rubik self-center m-1 text-2xl">:</span>
+                <label for="GLink" id="labels" class=" ml-2 glink text-center text-xl self-center">glink.zip/</label>
+                <div class="p-0.5 ml-2 mr-4 my-4 rounded-lg max-w-sm bg-gradient-to-r from-cyan-500 to-cyan-500 focus-within:from-rose-400 focus-within:via-fuchsia-500 focus-within:to-indigo-500 focus-within:caret-gray-600 focus-within:p-[3.2px]">
+                    <input type="text" name="glink" id="GLink" class="glink p-2 w-full rounded-lg focus:outline-none focus:shadow-lg focus:focus:shadow-black/50 text-center text-lg text-black font-bold" placeholder="exampleWebsite">
+                </div>
             </div>
-        </div>
 
-        <label for="restricted" class="ml-4 self-center text-2xl font-rubik">Geo-restricted? : </label><input type="checkbox" name="restricted" id="restricted" class="ml-2 mr-4 my-4 text-center font-rubik ease-soft rounded-1.4 w-6 h-6 cursor-pointer checked:accent-blue-700 shadow-lg shadow-black/50 peer"><span id="loadingText" class="font-rubik self-center text-center text-xl" style="position: relative; left: 20px;"></span>
+            <label for="restricted" class="ml-4 self-center text-2xl font-rubik">Geo-restricted? : </label><input type="checkbox" name="restricted" id="restricted" class="ml-2 mr-4 my-4 text-center font-rubik ease-soft rounded-1.4 w-6 h-6 cursor-pointer checked:accent-blue-700 shadow-lg shadow-black/50 peer"><span id="loadingText" class="font-rubik self-center text-center text-xl" style="position: relative; left: 20px;"></span>
 
-        <span class="flex flex-wrap invisible peer-checked:visible" id="js-enabled">
-            <label for="radiusSelect" id="radiusLabel" class="ml-4 font-rubik text-2xl self-center">Radius</label><span id="mandatory-radius" class="mandatory font-rubik text-2xl self-center">*</span><span class="font-rubik self-center m-1 text-2xl">:</span>
-            <div class="p-0.5 ml-2 mr-4 my-4 rounded-lg max-w-sm bg-gradient-to-r from-cyan-500 to-cyan-500 focus-within:from-rose-400 focus-within:via-fuchsia-500 focus-within:to-indigo-500 focus-within:p-[3.2px]">
-                <select name="radiusSelect" id="radiusSelect" class="cursor-pointer text-lg p-2 w-full rounded-lg focus:outline-none invalid:text-gray-400 font-bold">
-                    <option value="" selected disabled hidden>Choose a radius for your geo link</option>
-                    <option value="5">5 mi</option>
-                    <option value="10">10 mi</option>
-                    <option value="15">15 mi</option>
-                    <option value="20">20 mi</option>
-                </select>
-            </div>
-        </span>
-        <noscript>
-            <style>
-                #js-enabled {display: none;}
-            </style>
-        </noscript>
-        <span role="alert" class="m-4 font-rubik" id="error" aria-hidden="true">Invalid entry</span>
-        <input type="submit" id="button" value="Zip It!" class="scale-125 brightness-125 ml-20 font-rubik bg-gradient-to-r from-cyan-500 to-blue-500 hover:from-cyan-400 hover:to-blue-400 hover:shadow-lg hover:shadow-black/50 transition hover:-translate-y-1 hover:scale-150 duration-600 ease-in-out rounded-full cursor-pointer">
-        <input type="hidden" name="latitude" id="latitude">
-        <input type="hidden" name="longitude" id="longitude">
+            <span class="flex flex-wrap invisible peer-checked:visible" id="js-enabled">
+                <label for="radiusSelect" id="radiusLabel" class="ml-4 font-rubik text-2xl self-center">Radius</label><span id="mandatory-radius" class="mandatory font-rubik text-2xl self-center">*</span><span class="font-rubik self-center m-1 text-2xl">:</span>
+                <div class="p-0.5 ml-2 mr-4 my-4 rounded-lg max-w-sm bg-gradient-to-r from-cyan-500 to-cyan-500 focus-within:from-rose-400 focus-within:via-fuchsia-500 focus-within:to-indigo-500 focus-within:p-[3.2px]">
+                    <select name="radiusSelect" id="radiusSelect" class="cursor-pointer text-lg p-2 w-full rounded-lg focus:outline-none invalid:text-gray-400 font-bold">
+                        <option value="" selected disabled hidden>Choose a radius for your geo link</option>
+                        <option value="5">5 mi</option>
+                        <option value="10">10 mi</option>
+                        <option value="15">15 mi</option>
+                        <option value="20">20 mi</option>
+                    </select>
+                </div>
+            </span>
+            <noscript>
+                <style>
+                    #js-enabled {display: none;}
+                </style>
+            </noscript>
+            <span role="alert" class="m-4 font-rubik" id="error" aria-hidden="true">Invalid entry</span>
+            <input type="submit" id="button" value="Zip It!" class="scale-125 brightness-125 ml-20 font-rubik bg-gradient-to-r from-cyan-500 to-blue-500 hover:from-cyan-400 hover:to-blue-400 hover:shadow-lg hover:shadow-black/50 transition hover:-translate-y-1 hover:scale-150 duration-600 ease-in-out rounded-full cursor-pointer">
+            <input type="hidden" name="latitude" id="latitude">
+            <input type="hidden" name="longitude" id="longitude">
 
-    </form>
+        </form>
+        <div class="lg:w-1/2 sm:w-full mt-4">
+            <ul class="list-decimal text-left flex flex-col flex-wrap text-lg mx-8 mb-8">
+                <li class="mb-3">Enter the URL</li>
+                <li class="mb-3">Enter the GLink - a keyword used to identify your URL. This is optional, and if left blank, a random GLink will be generated for you.</li>
+                <li class="mb-3">The GLink that you enter will be appended to the URL, like so: glink.zip/example</li>
+                <li class="mb-3">If you don't want to geo-restrict it, you're good to go! Skip to step 6.</li>
+                <li class="mb-3">If you want to geo-restrict the link, select the checkbox, and provide a radius to use as a 'containment zone'. Only those individuals who are within that radius from your current location will be able to access the Glink.</li>
+                <li>Click 'Zip it!' to generate your custom URL.</li>
+            </ul>
+        </div>
+    </div>
     <hr>
     <img src="images/cat.gif">
     <p id="footer" class="object-none object-bottom">Insert Footer Here</p>