diff --git a/public/css/output.css b/public/css/output.css
index 9e5554f..6f99092 100644
--- a/public/css/output.css
+++ b/public/css/output.css
@@ -688,6 +688,10 @@ select {
   --tw-backdrop-sepia:  ;
 }
 
+.pointer-events-none {
+  pointer-events: none;
+}
+
 .visible {
   visibility: visible;
 }
@@ -713,6 +717,10 @@ select {
   bottom: 0px;
 }
 
+.left-auto {
+  left: auto;
+}
+
 .right-0 {
   right: 0px;
 }
@@ -721,10 +729,46 @@ select {
   top: 0px;
 }
 
+.top-1\/2 {
+  top: 50%;
+}
+
+.top-14 {
+  top: 3.5rem;
+}
+
+.top-4 {
+  top: 1rem;
+}
+
+.top-8 {
+  top: 2rem;
+}
+
+.top-6 {
+  top: 1.5rem;
+}
+
+.z-10 {
+  z-index: 10;
+}
+
+.clear-both {
+  clear: both;
+}
+
+.m-0 {
+  margin: 0px;
+}
+
 .m-1 {
   margin: 0.25rem;
 }
 
+.m-10 {
+  margin: 2.5rem;
+}
+
 .m-4 {
   margin: 1rem;
 }
@@ -748,24 +792,12 @@ 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;
+.-mr-4 {
+  margin-right: -1rem;
 }
 
-.mx-5 {
-  margin-left: 1.25rem;
-  margin-right: 1.25rem;
+.mb-1 {
+  margin-bottom: 0.25rem;
 }
 
 .mb-3 {
@@ -792,6 +824,10 @@ select {
   margin-right: 0.5rem;
 }
 
+.mr-3 {
+  margin-right: 0.75rem;
+}
+
 .mr-4 {
   margin-right: 1rem;
 }
@@ -812,12 +848,24 @@ select {
   margin-top: 1rem;
 }
 
-.ml-5 {
-  margin-left: 1.25rem;
+.mb-4 {
+  margin-bottom: 1rem;
 }
 
-.mb-1 {
-  margin-bottom: 0.25rem;
+.mb-20 {
+  margin-bottom: 5rem;
+}
+
+.mb-24 {
+  margin-bottom: 6rem;
+}
+
+.mb-6 {
+  margin-bottom: 1.5rem;
+}
+
+.mb-10 {
+  margin-bottom: 2.5rem;
 }
 
 .block {
@@ -836,18 +884,18 @@ select {
   display: none;
 }
 
-.h-1 {
-  height: 0.25rem;
+.h-0 {
+  height: 0px;
+}
+
+.h-0\.5 {
+  height: 0.125rem;
 }
 
 .h-10 {
   height: 2.5rem;
 }
 
-.h-20 {
-  height: 5rem;
-}
-
 .h-3 {
   height: 0.75rem;
 }
@@ -860,28 +908,24 @@ select {
   height: 2rem;
 }
 
-.h-full {
-  height: 100%;
-}
-
-.h-auto {
-  height: auto;
+.h-9 {
+  height: 2.25rem;
 }
 
-.h-0 {
-  height: 0px;
+.h-full {
+  height: 100%;
 }
 
-.h-0\.5 {
-  height: 0.125rem;
+.h-96 {
+  height: 24rem;
 }
 
-.h-1\/6 {
-  height: 16.666667%;
+.h-24 {
+  height: 6rem;
 }
 
-.h-1\/2 {
-  height: 50%;
+.h-72 {
+  height: 18rem;
 }
 
 .min-h-full {
@@ -896,14 +940,14 @@ select {
   width: 91.666667%;
 }
 
-.w-20 {
-  width: 5rem;
-}
-
 .w-3 {
   width: 0.75rem;
 }
 
+.w-5 {
+  width: 1.25rem;
+}
+
 .w-6 {
   width: 1.5rem;
 }
@@ -912,6 +956,10 @@ select {
   width: 2rem;
 }
 
+.w-9 {
+  width: 2.25rem;
+}
+
 .w-auto {
   width: auto;
 }
@@ -920,18 +968,26 @@ select {
   width: 100%;
 }
 
-.w-5 {
-  width: 1.25rem;
+.w-1\/2 {
+  width: 50%;
 }
 
-.w-7 {
-  width: 1.75rem;
+.w-12 {
+  width: 3rem;
+}
+
+.w-44 {
+  width: 11rem;
 }
 
 .max-w-sm {
   max-width: 24rem;
 }
 
+.flex-1 {
+  flex: 1 1 0%;
+}
+
 .flex-shrink-0 {
   flex-shrink: 0;
 }
@@ -940,6 +996,10 @@ select {
   flex-grow: 1;
 }
 
+.flex-grow-0 {
+  flex-grow: 0;
+}
+
 .origin-center {
   transform-origin: center;
 }
@@ -949,11 +1009,6 @@ select {
   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));
@@ -964,11 +1019,6 @@ select {
   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));
@@ -993,6 +1043,10 @@ select {
   list-style-type: decimal;
 }
 
+.list-none {
+  list-style-type: none;
+}
+
 .flex-row {
   flex-direction: row;
 }
@@ -1029,40 +1083,16 @@ select {
   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;
 }
 
-.rounded {
-  border-radius: 0.25rem;
+.whitespace-nowrap {
+  white-space: nowrap;
 }
 
-.rounded-3xl {
-  border-radius: 1.5rem;
+.rounded {
+  border-radius: 0.25rem;
 }
 
 .rounded-full {
@@ -1090,6 +1120,18 @@ select {
   border-width: 0px;
 }
 
+.border-2 {
+  border-width: 2px;
+}
+
+.border-8 {
+  border-width: 8px;
+}
+
+.border-solid {
+  border-style: solid;
+}
+
 .border-blue-500 {
   --tw-border-opacity: 1;
   border-color: rgb(59 130 246 / var(--tw-border-opacity));
@@ -1100,16 +1142,30 @@ select {
   border-color: rgb(45 212 191 / var(--tw-border-opacity));
 }
 
+.border-transparent {
+  border-color: transparent;
+}
+
 .border-white {
   --tw-border-opacity: 1;
   border-color: rgb(255 255 255 / var(--tw-border-opacity));
 }
 
+.border-black {
+  --tw-border-opacity: 1;
+  border-color: rgb(0 0 0 / var(--tw-border-opacity));
+}
+
 .bg-blue-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(37 99 235 / var(--tw-bg-opacity));
 }
 
+.bg-emerald-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(6 95 70 / var(--tw-bg-opacity));
+}
+
 .bg-gray-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
@@ -1120,55 +1176,60 @@ select {
   background-color: rgb(107 114 128 / var(--tw-bg-opacity));
 }
 
-.bg-indigo-600 {
+.bg-green-600 {
   --tw-bg-opacity: 1;
-  background-color: rgb(79 70 229 / var(--tw-bg-opacity));
+  background-color: rgb(22 163 74 / var(--tw-bg-opacity));
 }
 
-.bg-slate-500 {
+.bg-indigo-600 {
   --tw-bg-opacity: 1;
-  background-color: rgb(100 116 139 / var(--tw-bg-opacity));
+  background-color: rgb(79 70 229 / var(--tw-bg-opacity));
 }
 
-.bg-white {
+.bg-teal-200 {
   --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  background-color: rgb(153 246 228 / var(--tw-bg-opacity));
 }
 
 .bg-transparent {
   background-color: transparent;
 }
 
-.bg-teal-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(153 246 228 / var(--tw-bg-opacity));
-}
-
-.bg-gray-300 {
+.bg-white {
   --tw-bg-opacity: 1;
-  background-color: rgb(209 213 219 / var(--tw-bg-opacity));
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
-.bg-gray-400 {
+.bg-yellow-50 {
   --tw-bg-opacity: 1;
-  background-color: rgb(156 163 175 / var(--tw-bg-opacity));
+  background-color: rgb(254 252 232 / var(--tw-bg-opacity));
 }
 
-.bg-gray-600 {
+.bg-yellow-500 {
   --tw-bg-opacity: 1;
-  background-color: rgb(75 85 99 / var(--tw-bg-opacity));
+  background-color: rgb(234 179 8 / var(--tw-bg-opacity));
 }
 
 .bg-gradient-to-r {
   background-image: linear-gradient(to right, var(--tw-gradient-stops));
 }
 
+.bg-gradient-to-tl {
+  background-image: linear-gradient(to top left, var(--tw-gradient-stops));
+}
+
 .from-cyan-500 {
   --tw-gradient-from: #06b6d4 var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(6 182 212 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
+.from-purple-700 {
+  --tw-gradient-from: #7e22ce var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(126 34 206 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
 .to-blue-500 {
   --tw-gradient-to: #3b82f6 var(--tw-gradient-to-position);
 }
@@ -1177,6 +1238,14 @@ select {
   --tw-gradient-to: #06b6d4 var(--tw-gradient-to-position);
 }
 
+.to-pink-500 {
+  --tw-gradient-to: #ec4899 var(--tw-gradient-to-position);
+}
+
+.bg-clip-padding {
+  background-clip: padding-box;
+}
+
 .fill-current {
   fill: currentColor;
 }
@@ -1207,6 +1276,11 @@ select {
   padding: 1.5rem;
 }
 
+.px-0 {
+  padding-left: 0px;
+  padding-right: 0px;
+}
+
 .px-1 {
   padding-left: 0.25rem;
   padding-right: 0.25rem;
@@ -1247,9 +1321,9 @@ select {
   padding-bottom: 0.5rem;
 }
 
-.py-2\.5 {
-  padding-top: 0.625rem;
-  padding-bottom: 0.625rem;
+.py-3 {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
 }
 
 .py-\[0\.4375rem\] {
@@ -1311,6 +1385,11 @@ select {
   line-height: 1rem;
 }
 
+.text-4xl {
+  font-size: 2.25rem;
+  line-height: 2.5rem;
+}
+
 .font-bold {
   font-weight: 700;
 }
@@ -1319,6 +1398,10 @@ select {
   font-weight: 500;
 }
 
+.font-normal {
+  font-weight: 400;
+}
+
 .font-semibold {
   font-weight: 600;
 }
@@ -1367,6 +1450,11 @@ select {
   color: rgb(153 27 27 / var(--tw-text-opacity));
 }
 
+.text-slate-500 {
+  --tw-text-opacity: 1;
+  color: rgb(100 116 139 / var(--tw-text-opacity));
+}
+
 .text-teal-200 {
   --tw-text-opacity: 1;
   color: rgb(153 246 228 / var(--tw-text-opacity));
@@ -1377,6 +1465,10 @@ select {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.opacity-0 {
+  opacity: 0;
+}
+
 .opacity-100 {
   opacity: 1;
 }
@@ -1398,6 +1490,30 @@ select {
   --tw-shadow: var(--tw-shadow-colored);
 }
 
+.outline {
+  outline-style: solid;
+}
+
+.outline-4 {
+  outline-width: 4px;
+}
+
+.outline-8 {
+  outline-width: 8px;
+}
+
+.outline-offset-2 {
+  outline-offset: 2px;
+}
+
+.outline-white {
+  outline-color: #fff;
+}
+
+.outline-black {
+  outline-color: #000;
+}
+
 .ring-1 {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -1436,22 +1552,12 @@ select {
   transition-duration: 150ms;
 }
 
-.transition-transform {
-  transition-property: transform;
+.transition-all {
+  transition-property: all;
   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);
 }
@@ -1541,6 +1647,49 @@ input.valid {
   color: rgb(156 163 175 / var(--tw-text-opacity));
 }
 
+.before\:absolute::before {
+  content: var(--tw-content);
+  position: absolute;
+}
+
+.before\:left-auto::before {
+  content: var(--tw-content);
+  left: auto;
+}
+
+.before\:right-7::before {
+  content: var(--tw-content);
+  right: 1.75rem;
+}
+
+.before\:top-0::before {
+  content: var(--tw-content);
+  top: 0px;
+}
+
+.before\:z-40::before {
+  content: var(--tw-content);
+  z-index: 40;
+}
+
+.before\:text-white::before {
+  content: var(--tw-content);
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.before\:transition-all::before {
+  content: var(--tw-content);
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.before\:content-\[\'\\f0d8\'\]::before {
+  --tw-content: '\f0d8';
+  content: var(--tw-content);
+}
+
 .checked\:accent-blue-700:checked {
   accent-color: #1d4ed8;
 }
@@ -1606,6 +1755,11 @@ input.valid {
   border-color: rgb(255 255 255 / var(--tw-border-opacity));
 }
 
+.hover\:bg-emerald-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(4 120 87 / var(--tw-bg-opacity));
+}
+
 .hover\:bg-gray-200:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));
@@ -1616,26 +1770,11 @@ 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);
@@ -1656,6 +1795,11 @@ input.valid {
   color: rgb(99 102 241 / var(--tw-text-opacity));
 }
 
+.hover\:text-slate-700:hover {
+  --tw-text-opacity: 1;
+  color: rgb(51 65 85 / var(--tw-text-opacity));
+}
+
 .hover\:text-teal-500:hover {
   --tw-text-opacity: 1;
   color: rgb(20 184 166 / var(--tw-text-opacity));
@@ -1734,100 +1878,24 @@ input.valid {
   outline-color: #4f46e5;
 }
 
-.group:active .group-active\:visible {
+.peer:checked ~ .peer-checked\: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;
-}
+@media (prefers-color-scheme: dark) {
+  .dark\:text-white {
+    --tw-text-opacity: 1;
+    color: rgb(255 255 255 / var(--tw-text-opacity));
+  }
 
-.group:active .group-active\:ease-in-out {
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-}
+  .dark\:hover\:bg-gray-200\/80:hover {
+    background-color: rgb(229 231 235 / 0.8);
+  }
 
-.peer:checked ~ .peer-checked\:visible {
-  visibility: visible;
+  .dark\:hover\:text-slate-700:hover {
+    --tw-text-opacity: 1;
+    color: rgb(51 65 85 / var(--tw-text-opacity));
+  }
 }
 
 @media (min-width: 640px) {
@@ -1844,8 +1912,8 @@ input.valid {
     max-width: 24rem;
   }
 
-  .sm\:flex-1 {
-    flex: 1 1 0%;
+  .sm\:flex-col {
+    flex-direction: column;
   }
 
   .sm\:justify-center {
@@ -1862,6 +1930,17 @@ input.valid {
   }
 }
 
+@media (min-width: 768px) {
+  .md\:flex-row {
+    flex-direction: row;
+  }
+
+  .md\:text-5xl {
+    font-size: 3rem;
+    line-height: 1;
+  }
+}
+
 @media (min-width: 1024px) {
   .lg\:mt-0 {
     margin-top: 0px;
@@ -1899,6 +1978,14 @@ input.valid {
     flex-grow: 1;
   }
 
+  .lg\:flex-row {
+    flex-direction: row;
+  }
+
+  .lg\:flex-col {
+    flex-direction: column;
+  }
+
   .lg\:items-center {
     align-items: center;
   }
@@ -1911,4 +1998,19 @@ input.valid {
     padding-left: 2rem;
     padding-right: 2rem;
   }
+
+  .lg\:text-6xl {
+    font-size: 3.75rem;
+    line-height: 1;
+  }
+
+  .lg\:transition-colors {
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+  }
+
+  .lg\:duration-300 {
+    transition-duration: 300ms;
+  }
 }
diff --git a/public/home.html b/public/home.html
new file mode 100644
index 0000000..4324d7e
--- /dev/null
+++ b/public/home.html
@@ -0,0 +1,134 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Home</title>
+  <link rel="stylesheet" href="css/output.css">
+</head>
+<body>
+  <main class="m-10 h-96">
+    <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-4 opacity-100 mb-24"> <!--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 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 class="flex items-center flex-shrink-0 text-white mr-6 w-full lg:w-auto flex-1 lg:flex-none 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 mr-4">
+        <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
+          </a>
+          <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">
+            B
+          </a>
+          <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="/" 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>
+
+        <div>
+          <a href="signup.html" class="inline-block <%= signup %> text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal-500 hover:bg-white mt-4 lg:mt-0 mr-4">
+            signup
+          </a>
+        </div>
+        <div>
+          <a href="<%= loc %>" class="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal-500 hover:bg-white mt-4 lg:mt-0">
+            <%= tagline %>
+          </a>
+        </div>
+      </div>
+      <div class="w-9 h-9 rounded-full bg-emerald-800 cursor-pointer outline outline-offset-2 outline-4 outline-white hover:bg-emerald-700">
+        <button class="w-full h-full bg-white rounded-full" id="dropdownDefaultButton" data-dropdown-toggle="dropdown">
+
+        </button>
+      </div>
+      <div class="relative">
+        <button dropdown-trigger aria-expanded="false" type="button" class="inline-block px-6 py-3 mr-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-gradient-to-tl from-purple-700 to-pink-500 leading-pro text-sm ease-soft-in tracking-tight-soft shadow-soft-md bg-150 bg-x-25 hover:scale-102 active:opacity-85 hover:shadow-soft-xs">Dropdown</button>
+        <p class="hidden transform-dropdown-show"></p>
+        <ul dropdown-menu class="z-10 text-sm lg:shadow-soft-3xl duration-250 before:duration-350 before:font-awesome before:ease-soft min-w-44 before:text-5.5 transform-dropdown pointer-events-none absolute left-auto top-1/2 m-0 -mr-4 mt-2 list-none rounded-lg border-0 border-solid border-transparent bg-white bg-clip-padding px-0 py-2 text-left text-slate-500 opacity-0 transition-all before:absolute before:right-7 before:left-auto before:top-0 before:z-40 before:text-white before:transition-all before:content-['\f0d8']">
+          <li>
+            <a class="py-1.2 lg:ease-soft clear-both block w-full whitespace-nowrap border-0 bg-transparent px-4 text-left font-normal text-slate-500 hover:bg-gray-200 hover:text-slate-700 dark:text-white dark:hover:bg-gray-200/80 dark:hover:text-slate-700 lg:transition-colors lg:duration-300" href="javascript:;">Action</a>
+          </li>
+          <li>
+            <a class="py-1.2 lg:ease-soft clear-both block w-full whitespace-nowrap border-0 bg-transparent px-4 text-left font-normal text-slate-500 hover:bg-gray-200 hover:text-slate-700 dark:text-white dark:hover:bg-gray-200/80 dark:hover:text-slate-700 lg:transition-colors lg:duration-300" href="javascript:;">Another action</a>
+          </li>
+          <li>
+            <a class="py-1.2 lg:ease-soft clear-both block w-full whitespace-nowrap border-0 bg-transparent px-4 text-left font-normal text-slate-500 hover:bg-gray-200 hover:text-slate-700 dark:text-white dark:hover:bg-gray-200/80 dark:hover:text-slate-700 lg:transition-colors lg:duration-300" href="javascript:;">Something else here</a>
+          </li>
+        </ul>
+      </div>
+      <script>
+        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 class="flex lg:flex-row flex-col w-full mb-24">
+      <div class="h-96 w-auto 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">Lorem ipsum dolor</h1>
+        </div>
+        <div class="h-72 w-full flex items-center justify-center text-2xl border-8 border-black">
+          <p>
+            Insert description or whatever ...
+          </p>
+        </div>
+      </div>
+      <img class="w-auto flex-grow-0 h-96" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTGpfMagCsgrJkELG_GOjtxqssEPXd-3vr2PmPdaB-0Y5Rp-bv1VOouyoXmG2QxZWHpdYI&usqp=CAU">
+    </div>
+    <div class="flex lg:flex-col h-96 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">
+          How it works
+        </p>
+      </div>
+      <div class="flex flex-row justify-between items-center">
+        <div class="flex flex-col items-center">
+          <img src="data:image/jpeg;base64,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">
+          <p class="text-xl">
+            Dayot Upamecano
+          </p>
+        </div>
+        <div class="flex flex-col items-center">
+          <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSmfgnNPa-FtkXqsELf4lqPYV8Fio0edSSiSA&usqp=CAU">
+          <p class="text-xl">
+            Sadio Mane
+          </p>
+        </div>
+        <div class="flex flex-col items-center">
+        <img src="data:image/jpeg;base64,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">
+        <p class="text-xl">
+          Eric Maxim Choupo Moting
+        </p>
+        </div>
+      </div>
+    </div>
+  </main>
+</body>
+</html>
\ No newline at end of file
diff --git a/views/pages/index.ejs b/views/pages/index.ejs
index a733497..e6c1ba6 100644
--- a/views/pages/index.ejs
+++ b/views/pages/index.ejs
@@ -6,12 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="css/output.css">
 </head>
-<body class="bg-gray-50">
-<h1 id="head" class="ml-4 text-5xl font-narrow">Link Shortener</h1>
-<p class="ml-4 font-fingerpaint">Hello There!</p>
-
-
-<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-->
+<body class="bg-gray-50 m-10">
+<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-4 opacity-100 mb-4"> <!--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>
@@ -26,11 +22,11 @@
             <span class="hidden h-0.5 w-5 origin-center rounded-full bg-white"></span>
         </button>
     </div>
-    <div class="flex items-center flex-shrink-0 text-white mr-6 sm:flex-1 lg:flex-none sm:justify-center">
+    <div class="flex items-center flex-shrink-0 text-white mr-6 w-full lg:w-auto flex-1 lg:flex-none 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 id="menu-options" class="bg-gray-500 w-full lg:block flex-grow lg:flex lg:items-center lg:w-auto hidden mr-4">
         <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
@@ -57,6 +53,26 @@
             </a>
         </div>
     </div>
+    <div class="w-9 h-9 rounded-full bg-emerald-800 cursor-pointer outline outline-offset-2 outline-4 outline-white hover:bg-emerald-700">
+        <button class="w-full h-full bg-white rounded-full" id="dropdownDefaultButton" data-dropdown-toggle="dropdown">
+
+        </button>
+    </div>
+    <div class="relative">
+        <button dropdown-trigger aria-expanded="false" type="button" class="inline-block px-6 py-3 mr-3 font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer bg-gradient-to-tl from-purple-700 to-pink-500 leading-pro text-sm ease-soft-in tracking-tight-soft shadow-soft-md bg-150 bg-x-25 hover:scale-102 active:opacity-85 hover:shadow-soft-xs">Dropdown</button>
+        <p class="hidden transform-dropdown-show"></p>
+        <ul dropdown-menu class="z-10 text-sm lg:shadow-soft-3xl duration-250 before:duration-350 before:font-awesome before:ease-soft min-w-44 before:text-5.5 transform-dropdown pointer-events-none absolute left-auto top-1/2 m-0 -mr-4 mt-2 list-none rounded-lg border-0 border-solid border-transparent bg-white bg-clip-padding px-0 py-2 text-left text-slate-500 opacity-0 transition-all before:absolute before:right-7 before:left-auto before:top-0 before:z-40 before:text-white before:transition-all before:content-['\f0d8']">
+            <li>
+                <a class="py-1.2 lg:ease-soft clear-both block w-full whitespace-nowrap border-0 bg-transparent px-4 text-left font-normal text-slate-500 hover:bg-gray-200 hover:text-slate-700 dark:text-white dark:hover:bg-gray-200/80 dark:hover:text-slate-700 lg:transition-colors lg:duration-300" href="javascript:;">Action</a>
+            </li>
+            <li>
+                <a class="py-1.2 lg:ease-soft clear-both block w-full whitespace-nowrap border-0 bg-transparent px-4 text-left font-normal text-slate-500 hover:bg-gray-200 hover:text-slate-700 dark:text-white dark:hover:bg-gray-200/80 dark:hover:text-slate-700 lg:transition-colors lg:duration-300" href="javascript:;">Another action</a>
+            </li>
+            <li>
+                <a class="py-1.2 lg:ease-soft clear-both block w-full whitespace-nowrap border-0 bg-transparent px-4 text-left font-normal text-slate-500 hover:bg-gray-200 hover:text-slate-700 dark:text-white dark:hover:bg-gray-200/80 dark:hover:text-slate-700 lg:transition-colors lg:duration-300" href="javascript:;">Something else here</a>
+            </li>
+        </ul>
+    </div>
     <script>
         let active = document.getElementById("HamburgerActive");
         let inactive = document.getElementById("HamburgerInactive");
@@ -73,6 +89,8 @@
         });
     </script>
 </nav>
+<h1 id="head" class="ml-4 text-5xl font-narrow">Create a GLink!</h1>
+<!--<p class="ml-4 font-fingerpaint">Hello There!</p>-->
 
 
 <div id="root" class="mt-4 w-full">