diff --git a/src/main/resources/static/css/dashboard.css b/src/main/resources/static/css/dashboard.css
index 0a4161c..b52893b 100644
--- a/src/main/resources/static/css/dashboard.css
+++ b/src/main/resources/static/css/dashboard.css
@@ -15,180 +15,111 @@ body {
 
 /* NAVBAR STYLING */
 .nav {
-    align-items: center;
-    display: grid;
-    grid-template-columns: 1fr auto 1fr;
-    padding: 1rem 1rem;
-    width: 100%;
-    left: 0;
-    margin: 0;
-
-    /* 1. Make it sticky at the top */
     position: fixed;
-    top: 0;
-    z-index: 1000;
-
-    /* 2. The Frosted Glass Effect */
-    background: rgba(250, 251, 252, 0.75); /* Semi-transparent white */
-    backdrop-filter: blur(12px); /* Blurs whatever is behind the nav */
-    -webkit-backdrop-filter: blur(12px); /* Safari support */
-
-    /* 3. A subtle border to define the edge */
-    border-bottom: 1px solid rgba(224, 224, 224, 0.5);
-    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
-}
-
-.nav a {
-    text-decoration: none;
-    color: #1a1a2e;
-    font-size: 0.92rem;
-    transition: color 0.3s ease;
-}
-
-.nav a:hover:not(#link-garden, #sign-up-btn) {
-    color: #3b82f6;
-}
-
-.nav #link-garden {
-    font-weight: bold;
-    font-size: 1.2rem;
-    color: #1a1a2e;
-}
-
-.nav-left, .nav-center, .nav-right {
+    top: env(safe-area-inset-top, 0);
+    left: 50%;
+    transform: translateX(-50%);
+    max-width: 80rem;
+    width: 80rem;
+    backdrop-filter: blur(12px) saturate(180%) contrast(200%);
+    background: rgba(0, 122, 255, 0.404);
+    border: 1px solid var(--glass-border);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
+    padding: 8px;
+    border-radius: 99rem;
     display: flex;
-    align-items: center;
-}
-
-.nav-left a {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.5rem;
-}
-
-.nav-left svg {
-    width: 30px;
-    height: 30px;
-    display: block;
-    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-}
-
-.nav-left a:hover svg {
-    transform: rotate(-10deg) scale(1.1);
-    color: #3b82f6 !important;
-}
-
-.nav-center {
     justify-content: center;
-    justify-self: center;
-    gap: 1rem;
+    gap: 6rem;
+    z-index: 50;
     align-items: center;
 }
 
-.nav-center a, .nav-center button {
-    font-size: 1.2rem;
-    position: relative;
-    text-decoration: none;
-}
-
-.nav-center a::after {
-    content: '';
+.nav::after {
+    content: "";
     position: absolute;
-    width: 0;
-    height: 2px;
-    bottom: -4px;
-    left: 0;
-    background: linear-gradient(90deg, #3b82f6, #0ea5e9);
-    transition: width 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
-}
-
-.nav-center a:hover::after {
-    width: 100%;
-}
-
-.nav button:hover {
-    color: #3b82f6;
+    inset: 0;
+    border-radius: inherit;
+    box-shadow:inset 2px 2px 5px -2px rgba(255, 255, 255, 0.4),inset -2px -2px 5px 2px rgba(255, 255, 255, 0.4),inset 0 -2px 0 rgba(255, 255, 255, 0.2);
+    pointer-events: none;
+    z-index: -1;
 }
 
-.nav-left {
-    justify-self: start;
-    margin-left: 10rem;
-}
-
-.nav-right {
-    justify-self: end;
-    gap: 0.75rem;
-    margin-right: 10rem;
-}
-
-.nav-right a {
-    display: inline-flex;
+.nav a ,.nav form, .nav form button{
+    display: flex;
+    flex-direction: column;
     align-items: center;
-    line-height: 1;
-    font-size: 1.2rem;
-    position: relative;
+    flex: 1 1 0;
+    min-width: 0;
+    color: #1a1a2e;
     text-decoration: none;
+    padding: 10px 6px;
+    border-radius: 999rem;
+    max-width: 15rem;
+    -webkit-tap-highlight-color: transparent;
+    transition:
+            background 0.18s var(--ease-spring),
+            color 0.18s var(--ease-spring),
+            transform 0.18s var(--ease-spring),
+            box-shadow 0.3s ease-in-out;
+}
+
+.nav a:hover:not(#logout:hover, #sign-up-btn), .nav form:hover {
+    transition:
+            background 0.18s var(--ease-spring),
+            color 0.18s var(--ease-spring),
+            transform 0.18s var(--ease-spring),
+            box-shadow 0.3s ease-in-out;
+    background-color: rgba(255, 255, 255, 30%);
+    box-shadow:
+            inset 2px 2px 5px -2px rgba(255, 255, 255, 0.4),
+            inset -2px -1px 5px 0 rgba(255, 255, 255, 0.4),
+            inset 0 -2px 0 rgba(255, 255, 255, 0.2);
+    transform: rotate(2.2);
+    color: rgba(0, 122, 255, 70%);
+}
+
+.nav form button:hover {
+    color: rgba(0, 122, 255, 70%);
+}
+
+.nav #logout:hover {
+    color: red;
+    text-decoration: underline;
 }
 
-.nav-right a:not(#sign-up-btn)::after {
-    content: '';
-    position: absolute;
-    width: 0;
-    height: 2px;
-    bottom: -4px;
-    left: 0;
-    background: linear-gradient(90deg, #3b82f6, #0ea5e9);
-    transition: width 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
+.nav svg {
+    width: 1.4rem;
+    font-size: 1.4rem;
 }
 
-.nav-right a:not(#sign-up-btn):hover::after {
-    width: 100%;
+.nav span, .nav form button {
+    font-size: 0.8rem;
+    font-weight: 600;
+    margin-top: 4px;
 }
 
-.nav-center button, .nav-right button {
+.nav form button {
+    background: transparent;
     border: none;
-    background: none;
-    padding: 0 0 3px 0;
-}
-
-.nav-center button:hover, .nav-right button:hover {
-    color: #3b82f6;
+    color: #1a1a2e;
     cursor: pointer;
-}
-
-.logout-form {
-    margin: 0;
     padding: 0;
-    display: flex;
+    font-family: inherit;
 }
 
-#logout-btn {
+.nav form button:hover {
     background: transparent;
-    color: #ef4444;
-    border: 1px solid #ef4444;
-    padding: 0.4rem 1rem;
-    border-radius: 0.5rem;
-    font-size: 1rem;
-    font-weight: 600;
-    cursor: pointer;
-    transition: all 0.3s ease;
+    border: none;
 }
 
-#logout-btn:hover {
-    background: #ef4444;
-    color: white;
-    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
-    transform: translateY(-2px);
+/* ACTIVE TAB CSS */
+.nav .active {
+    background: rgba(237, 237, 237, 0.6);
+    color: rgba(0, 122, 255, 0.9);
 }
 
-.nav-right button {
-    border: none;
-    background: none;
-    padding: 0 0 3px 0;
-}
-.nav-right button:hover {
-    color: #3b82f6;
-    cursor: pointer;
+.nav a:active {
+    transform: scale(0.98);
 }
 
 #sign-up-btn {
@@ -200,30 +131,42 @@ body {
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     position: relative;
     overflow: hidden;
+    max-width: 6rem;
+    max-height: 2rem;
 }
 
 #sign-up-btn::after {
     content: '';
     position: absolute;
     top: 0;
-    left: -100%;
+    left: -100%; /* Start completely off the left edge */
     width: 50%;
     height: 100%;
     background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
     transform: skewX(-25deg);
-    animation: shimmer-beam 5s infinite;
-}
-
-@keyframes shimmer-beam {
-    0%, 70% { left: -100%; }
-    100% { left: 200%; }
+    animation: shimmer-beam 5s infinite; /* Runs endlessly */
 }
 
 #sign-up-btn:hover {
     box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
     transform: translateY(-1px);
+    text-decoration: underline;
+}
+
+@keyframes shimmer-beam {
+    0%, 70% { left: -100%; } /* Wait off-screen for a few seconds */
+    100% { left: 200%; } /* Zoom across the button! */
+}
+
+#sign-up-btn span {
+    text-align: center;
+    font-size: 22px;
 }
 
 
@@ -270,7 +213,7 @@ p {
 }
 
 
-form {
+form:not(.nav form) {
     max-width: 760px;
     background: #ffffff;
     border: 1px solid #dbe8ff;
@@ -470,6 +413,7 @@ form {
 }
 
 .live-preview {
+    margin-top: 2rem;
     position: fixed;
     right: 40px;
     top: 70px;
diff --git a/src/main/resources/static/css/landing.css b/src/main/resources/static/css/landing.css
index 162b462..6ad1ba3 100644
--- a/src/main/resources/static/css/landing.css
+++ b/src/main/resources/static/css/landing.css
@@ -9,117 +9,115 @@ body {
 }
 
 
+
+
 /* NAVBAR STYLING */
-/* Update your existing .nav class */
 .nav {
-    align-items: center;
-    display: grid;
-    grid-template-columns: 1fr auto 1fr;
-    padding: 1rem 1rem;
-    width: 100%;
-    left: 0;
-    margin: 0;
-
-    /* 1. Make it sticky at the top */
     position: fixed;
-    top: 0;
-    z-index: 1000;
-
-    /* 2. The Frosted Glass Effect */
-    background: rgba(250, 251, 252, 0.75); /* Semi-transparent white */
-    backdrop-filter: blur(12px); /* Blurs whatever is behind the nav */
-    -webkit-backdrop-filter: blur(12px); /* Safari support */
-
-    /* 3. A subtle border to define the edge */
-    border-bottom: 1px solid rgba(224, 224, 224, 0.5);
-    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
-}
-
-/* Add this right below the .nav block to prevent your hero text from hiding under the fixed nav! */
-body {
-    padding-top: 80px;
-}
-
-.nav a {
-    text-decoration: none;
-    color: #1a1a2e;
-    font-size: 0.92rem;
-    transition: color 0.3s ease;
-}
-
-.nav a:hover:not(#link-garden, #sign-up-btn) {
-    color: #3b82f6;
-}
-
-.nav #link-garden {
-    font-weight: bold;
-    font-size: 1.2rem;
-    color: #1a1a2e;
-}
-
-.nav-left, .nav-center, .nav-right {
+    top: env(safe-area-inset-top, 0);
+    left: 50%;
+    transform: translateX(-50%);
+    max-width: 80rem;
+    width: 80rem;
+    backdrop-filter: blur(12px) saturate(180%) contrast(200%);
+    background: rgba(0, 122, 255, 0.404);
+    border: 1px solid var(--glass-border);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
+    padding: 8px;
+    border-radius: 99rem;
     display: flex;
+    justify-content: center;
+    gap: 6rem;
+    z-index: 50;
     align-items: center;
 }
 
-
-.nav-left a {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.5rem;
-}
-
-.nav-left svg {
-    width: 30px;
-    height: 30px;
-    display: block;
+.nav::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    box-shadow:inset 2px 2px 5px -2px rgba(255, 255, 255, 0.4),inset -2px -2px 5px 2px rgba(255, 255, 255, 0.4),inset 0 -2px 0 rgba(255, 255, 255, 0.2);
+    pointer-events: none;
+    z-index: -1;
 }
 
-.nav-center {
-    justify-content: center;
-    justify-self: center;
-    gap: 1rem;
+.nav a ,.nav form, .nav form button{
+    display: flex;
+    flex-direction: column;
     align-items: center;
+    flex: 1 1 0;
+    min-width: 0;
+    color: #1a1a2e;
+    text-decoration: none;
+    padding: 10px 6px;
+    border-radius: 999rem;
+    max-width: 15rem;
+    -webkit-tap-highlight-color: transparent;
+    transition:
+            background 0.18s var(--ease-spring),
+            color 0.18s var(--ease-spring),
+            transform 0.18s var(--ease-spring),
+            box-shadow 0.3s ease-in-out;
+}
+
+.nav a:hover:not(#logout:hover, #sign-up-btn), .nav form:hover {
+    transition:
+            background 0.18s var(--ease-spring),
+            color 0.18s var(--ease-spring),
+            transform 0.18s var(--ease-spring),
+            box-shadow 0.3s ease-in-out;
+    background-color: rgba(255, 255, 255, 30%);
+    box-shadow:
+            inset 2px 2px 5px -2px rgba(255, 255, 255, 0.4),
+            inset -2px -1px 5px 0 rgba(255, 255, 255, 0.4),
+            inset 0 -2px 0 rgba(255, 255, 255, 0.2);
+    transform: rotate(2.2);
+    color: rgba(0, 122, 255, 70%);
+}
+
+.nav form button:hover {
+    color: rgba(0, 122, 255, 70%);
+}
+
+.nav #logout:hover {
+    color: red;
+    text-decoration: underline;
 }
 
-.nav-center a, .nav-center button {
-    font-size: 1.2rem;
+.nav svg {
+    width: 1.4rem;
+    font-size: 1.4rem;
 }
 
-.nav button:hover {
-    color: #3b82f6;
+.nav span, .nav form button {
+    font-size: 0.8rem;
+    font-weight: 600;
+    margin-top: 4px;
 }
 
-.nav-left {
-    justify-self: start;
-    margin-left: 10rem;
+.nav form button {
+    background: transparent;
+    border: none;
+    color: #1a1a2e;
+    cursor: pointer;
+    padding: 0;
+    font-family: inherit;
 }
 
-.nav-right {
-    justify-self: end;
-    gap: 0.75rem;
-    margin-right: 10rem;
+.nav form button:hover {
+    background: transparent;
+    border: none;
 }
 
-.nav-right a {
-    display: inline-flex;
-    align-items: center;
-    line-height: 1;
-    font-size: 1.2rem;
+/* ACTIVE TAB CSS */
+.nav .active {
+    background: rgba(237, 237, 237, 0.6);
+    color: rgba(0, 122, 255, 0.9);
 }
 
-.nav-right #logout-link:hover {
-    text-decoration: underline;
-}
-
-.nav-center button, .nav-right button {
-    border: none;
-    background: none;
-    padding: 0;
-}
-.nav-center button:hover, .nav-right button:hover {
-    color: #3b82f6;
-    cursor: pointer;
+.nav a:active {
+    transform: scale(0.98);
 }
 
 #sign-up-btn {
@@ -131,13 +129,16 @@ body {
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
-
-    /* NEW: Setup for the shimmer */
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     position: relative;
     overflow: hidden;
+    max-width: 6rem;
+    max-height: 2rem;
 }
 
-/* Create the diagonal white beam */
 #sign-up-btn::after {
     content: '';
     position: absolute;
@@ -150,17 +151,24 @@ body {
     animation: shimmer-beam 5s infinite; /* Runs endlessly */
 }
 
+#sign-up-btn:hover {
+    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
+    transform: translateY(-1px);
+    text-decoration: underline;
+}
+
 @keyframes shimmer-beam {
     0%, 70% { left: -100%; } /* Wait off-screen for a few seconds */
     100% { left: 200%; } /* Zoom across the button! */
 }
 
-#sign-up-btn:hover {
-    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
-    transform: translateY(-1px);
+#sign-up-btn span {
+    text-align: center;
+    font-size: 22px;
 }
 
 
+
 /* INTRO STYLING */
 .hero {
     text-align: center;
diff --git a/src/main/resources/static/css/login.css b/src/main/resources/static/css/login.css
index 4dba971..902187b 100644
--- a/src/main/resources/static/css/login.css
+++ b/src/main/resources/static/css/login.css
@@ -11,145 +11,111 @@ body {
 
 /* NAVBAR STYLING */
 .nav {
-    align-items: center;
-    display: grid;
-    grid-template-columns: 1fr auto 1fr;
-    padding: 1rem 1rem;
-    width: 100%;
-    left: 0;
-    margin: 0;
-
-    /* 1. Make it sticky at the top */
     position: fixed;
-    top: 0;
-    z-index: 1000;
-
-    /* 2. The Frosted Glass Effect */
-    background: rgba(250, 251, 252, 0.75); /* Semi-transparent white */
-    backdrop-filter: blur(12px); /* Blurs whatever is behind the nav */
-    -webkit-backdrop-filter: blur(12px); /* Safari support */
-
-    /* 3. A subtle border to define the edge */
-    border-bottom: 1px solid rgba(224, 224, 224, 0.5);
-    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
-}
-
-.nav a {
-    text-decoration: none;
-    color: #1a1a2e;
-    font-size: 0.92rem;
-    transition: color 0.3s ease;
-}
-
-.nav a:hover:not(#link-garden, #sign-up-btn) {
-    color: #3b82f6;
-}
-
-.nav #link-garden {
-    font-weight: bold;
-    font-size: 1.2rem;
-    color: #1a1a2e;
-}
-
-.nav-left, .nav-center, .nav-right {
+    top: env(safe-area-inset-top, 0);
+    left: 50%;
+    transform: translateX(-50%);
+    max-width: 80rem;
+    width: 80rem;
+    backdrop-filter: blur(12px) saturate(180%) contrast(200%);
+    background: rgba(0, 122, 255, 0.404);
+    border: 1px solid var(--glass-border);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
+    padding: 8px;
+    border-radius: 99rem;
     display: flex;
-    align-items: center;
-}
-
-.nav-left a {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.5rem;
-}
-
-.nav-left svg {
-    width: 30px;
-    height: 30px;
-    display: block;
-    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-}
-
-.nav-left a:hover svg {
-    transform: rotate(-10deg) scale(1.1);
-    color: #3b82f6 !important;
-}
-
-.nav-center {
     justify-content: center;
-    justify-self: center;
-    gap: 1rem;
+    gap: 6rem;
+    z-index: 50;
     align-items: center;
 }
 
-.nav-center a, .nav-center button {
-    font-size: 1.2rem;
-    position: relative;
-    text-decoration: none;
-}
-
-.nav-center a::after {
-    content: '';
+.nav::after {
+    content: "";
     position: absolute;
-    width: 0;
-    height: 2px;
-    bottom: -4px;
-    left: 0;
-    background: linear-gradient(90deg, #3b82f6, #0ea5e9);
-    transition: width 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
+    inset: 0;
+    border-radius: inherit;
+    box-shadow:inset 2px 2px 5px -2px rgba(255, 255, 255, 0.4),inset -2px -2px 5px 2px rgba(255, 255, 255, 0.4),inset 0 -2px 0 rgba(255, 255, 255, 0.2);
+    pointer-events: none;
+    z-index: -1;
 }
 
-.nav-center a:hover::after {
-    width: 100%;
-}
-
-.nav button:hover {
-    color: #3b82f6;
+.nav a ,.nav form, .nav form button{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    flex: 1 1 0;
+    min-width: 0;
+    color: #1a1a2e;
+    text-decoration: none;
+    padding: 10px 6px;
+    border-radius: 999rem;
+    max-width: 15rem;
+    -webkit-tap-highlight-color: transparent;
+    transition:
+            background 0.18s var(--ease-spring),
+            color 0.18s var(--ease-spring),
+            transform 0.18s var(--ease-spring),
+            box-shadow 0.3s ease-in-out;
+}
+
+.nav a:hover:not(#logout:hover, #sign-up-btn), .nav form:hover {
+    transition:
+            background 0.18s var(--ease-spring),
+            color 0.18s var(--ease-spring),
+            transform 0.18s var(--ease-spring),
+            box-shadow 0.3s ease-in-out;
+    background-color: rgba(255, 255, 255, 30%);
+    box-shadow:
+            inset 2px 2px 5px -2px rgba(255, 255, 255, 0.4),
+            inset -2px -1px 5px 0 rgba(255, 255, 255, 0.4),
+            inset 0 -2px 0 rgba(255, 255, 255, 0.2);
+    transform: rotate(2.2);
+    color: rgba(0, 122, 255, 70%);
+}
+
+.nav form button:hover {
+    color: rgba(0, 122, 255, 70%);
+}
+
+.nav #logout:hover {
+    color: red;
+    text-decoration: underline;
 }
 
-.nav-left {
-    justify-self: start;
-    margin-left: 10rem;
+.nav svg {
+    width: 1.4rem;
+    font-size: 1.4rem;
 }
 
-.nav-right {
-    justify-self: end;
-    gap: 0.75rem;
-    margin-right: 10rem;
+.nav span, .nav form button {
+    font-size: 0.8rem;
+    font-weight: 600;
+    margin-top: 4px;
 }
 
-.nav-right a {
-    display: inline-flex;
-    align-items: center;
-    line-height: 1;
-    font-size: 1.2rem;
-    position: relative;
-    text-decoration: none;
-}
-
-.nav-right a:not(#sign-up-btn)::after {
-    content: '';
-    position: absolute;
-    width: 0;
-    height: 2px;
-    bottom: -4px;
-    left: 0;
-    background: linear-gradient(90deg, #3b82f6, #0ea5e9);
-    transition: width 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
+.nav form button {
+    background: transparent;
+    border: none;
+    color: #1a1a2e;
+    cursor: pointer;
+    padding: 0;
+    font-family: inherit;
 }
 
-.nav-right a:not(#sign-up-btn):hover::after {
-    width: 100%;
+.nav form button:hover {
+    background: transparent;
+    border: none;
 }
 
-.nav-center button, .nav-right button {
-    border: none;
-    background: none;
-    padding: 0 0 3px 0;
+/* ACTIVE TAB CSS */
+.nav .active {
+    background: rgba(237, 237, 237, 0.6);
+    color: rgba(0, 122, 255, 0.9);
 }
 
-.nav-center button:hover, .nav-right button:hover {
-    color: #3b82f6;
-    cursor: pointer;
+.nav a:active {
+    transform: scale(0.98);
 }
 
 #sign-up-btn {
@@ -161,30 +127,42 @@ body {
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     position: relative;
     overflow: hidden;
+    max-width: 6rem;
+    max-height: 2rem;
 }
 
 #sign-up-btn::after {
     content: '';
     position: absolute;
     top: 0;
-    left: -100%;
+    left: -100%; /* Start completely off the left edge */
     width: 50%;
     height: 100%;
     background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
     transform: skewX(-25deg);
-    animation: shimmer-beam 5s infinite;
-}
-
-@keyframes shimmer-beam {
-    0%, 70% { left: -100%; }
-    100% { left: 200%; }
+    animation: shimmer-beam 5s infinite; /* Runs endlessly */
 }
 
 #sign-up-btn:hover {
     box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
     transform: translateY(-1px);
+    text-decoration: underline;
+}
+
+@keyframes shimmer-beam {
+    0%, 70% { left: -100%; } /* Wait off-screen for a few seconds */
+    100% { left: 200%; } /* Zoom across the button! */
+}
+
+#sign-up-btn span {
+    text-align: center;
+    font-size: 22px;
 }
 
 /*Login CSS*/
@@ -201,7 +179,7 @@ body {
     flex-direction: column;
     align-items: center;
     text-align: center;
-    margin-top: 4rem;
+    margin-top: 2rem;
     flex: 1;
 }
 
diff --git a/src/main/resources/static/css/register.css b/src/main/resources/static/css/register.css
index c7769e5..2527ce2 100644
--- a/src/main/resources/static/css/register.css
+++ b/src/main/resources/static/css/register.css
@@ -23,145 +23,111 @@ footer {
 
 /* NAVBAR STYLING */
 .nav {
-    align-items: center;
-    display: grid;
-    grid-template-columns: 1fr auto 1fr;
-    padding: 1rem 1rem;
-    width: 100%;
-    left: 0;
-    margin: 0;
-
-    /* 1. Make it sticky at the top */
     position: fixed;
-    top: 0;
-    z-index: 1000;
-
-    /* 2. The Frosted Glass Effect */
-    background: rgba(250, 251, 252, 0.75); /* Semi-transparent white */
-    backdrop-filter: blur(12px); /* Blurs whatever is behind the nav */
-    -webkit-backdrop-filter: blur(12px); /* Safari support */
-
-    /* 3. A subtle border to define the edge */
-    border-bottom: 1px solid rgba(224, 224, 224, 0.5);
-    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
-}
-
-.nav a {
-    text-decoration: none;
-    color: #1a1a2e;
-    font-size: 0.92rem;
-    transition: color 0.3s ease;
-}
-
-.nav a:hover:not(#link-garden, #sign-up-btn) {
-    color: #3b82f6;
-}
-
-.nav #link-garden {
-    font-weight: bold;
-    font-size: 1.2rem;
-    color: #1a1a2e;
-}
-
-.nav-left, .nav-center, .nav-right {
+    top: env(safe-area-inset-top, 0);
+    left: 50%;
+    transform: translateX(-50%);
+    max-width: 80rem;
+    width: 80rem;
+    backdrop-filter: blur(12px) saturate(180%) contrast(200%);
+    background: rgba(0, 122, 255, 0.404);
+    border: 1px solid var(--glass-border);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
+    padding: 8px;
+    border-radius: 99rem;
     display: flex;
-    align-items: center;
-}
-
-.nav-left a {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.5rem;
-}
-
-.nav-left svg {
-    width: 30px;
-    height: 30px;
-    display: block;
-    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-}
-
-.nav-left a:hover svg {
-    transform: rotate(-10deg) scale(1.1);
-    color: #3b82f6 !important;
-}
-
-.nav-center {
     justify-content: center;
-    justify-self: center;
-    gap: 1rem;
+    gap: 6rem;
+    z-index: 50;
     align-items: center;
 }
 
-.nav-center a, .nav-center button {
-    font-size: 1.2rem;
-    position: relative;
-    text-decoration: none;
-}
-
-.nav-center a::after {
-    content: '';
+.nav::after {
+    content: "";
     position: absolute;
-    width: 0;
-    height: 2px;
-    bottom: -4px;
-    left: 0;
-    background: linear-gradient(90deg, #3b82f6, #0ea5e9);
-    transition: width 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
+    inset: 0;
+    border-radius: inherit;
+    box-shadow:inset 2px 2px 5px -2px rgba(255, 255, 255, 0.4),inset -2px -2px 5px 2px rgba(255, 255, 255, 0.4),inset 0 -2px 0 rgba(255, 255, 255, 0.2);
+    pointer-events: none;
+    z-index: -1;
 }
 
-.nav-center a:hover::after {
-    width: 100%;
-}
-
-.nav button:hover {
-    color: #3b82f6;
+.nav a ,.nav form, .nav form button{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    flex: 1 1 0;
+    min-width: 0;
+    color: #1a1a2e;
+    text-decoration: none;
+    padding: 10px 6px;
+    border-radius: 999rem;
+    max-width: 15rem;
+    -webkit-tap-highlight-color: transparent;
+    transition:
+            background 0.18s var(--ease-spring),
+            color 0.18s var(--ease-spring),
+            transform 0.18s var(--ease-spring),
+            box-shadow 0.3s ease-in-out;
+}
+
+.nav a:hover:not(#logout:hover, #sign-up-btn), .nav form:hover {
+    transition:
+            background 0.18s var(--ease-spring),
+            color 0.18s var(--ease-spring),
+            transform 0.18s var(--ease-spring),
+            box-shadow 0.3s ease-in-out;
+    background-color: rgba(255, 255, 255, 30%);
+    box-shadow:
+            inset 2px 2px 5px -2px rgba(255, 255, 255, 0.4),
+            inset -2px -1px 5px 0 rgba(255, 255, 255, 0.4),
+            inset 0 -2px 0 rgba(255, 255, 255, 0.2);
+    transform: rotate(2.2);
+    color: rgba(0, 122, 255, 70%);
+}
+
+.nav form button:hover {
+    color: rgba(0, 122, 255, 70%);
+}
+
+.nav #logout:hover {
+    color: red;
+    text-decoration: underline;
 }
 
-.nav-left {
-    justify-self: start;
-    margin-left: 10rem;
+.nav svg {
+    width: 1.4rem;
+    font-size: 1.4rem;
 }
 
-.nav-right {
-    justify-self: end;
-    gap: 0.75rem;
-    margin-right: 10rem;
+.nav span, .nav form button {
+    font-size: 0.8rem;
+    font-weight: 600;
+    margin-top: 4px;
 }
 
-.nav-right a {
-    display: inline-flex;
-    align-items: center;
-    line-height: 1;
-    font-size: 1.2rem;
-    position: relative;
-    text-decoration: none;
-}
-
-.nav-right a:not(#sign-up-btn)::after {
-    content: '';
-    position: absolute;
-    width: 0;
-    height: 2px;
-    bottom: -4px;
-    left: 0;
-    background: linear-gradient(90deg, #3b82f6, #0ea5e9);
-    transition: width 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
+.nav form button {
+    background: transparent;
+    border: none;
+    color: #1a1a2e;
+    cursor: pointer;
+    padding: 0;
+    font-family: inherit;
 }
 
-.nav-right a:not(#sign-up-btn):hover::after {
-    width: 100%;
+.nav form button:hover {
+    background: transparent;
+    border: none;
 }
 
-.nav-center button, .nav-right button {
-    border: none;
-    background: none;
-    padding: 0 0 3px 0;
+/* ACTIVE TAB CSS */
+.nav .active {
+    background: rgba(237, 237, 237, 0.6);
+    color: rgba(0, 122, 255, 0.9);
 }
 
-.nav-center button:hover, .nav-right button:hover {
-    color: #3b82f6;
-    cursor: pointer;
+.nav a:active {
+    transform: scale(0.98);
 }
 
 #sign-up-btn {
@@ -173,30 +139,42 @@ footer {
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     position: relative;
     overflow: hidden;
+    max-width: 6rem;
+    max-height: 2rem;
 }
 
 #sign-up-btn::after {
     content: '';
     position: absolute;
     top: 0;
-    left: -100%;
+    left: -100%; /* Start completely off the left edge */
     width: 50%;
     height: 100%;
     background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
     transform: skewX(-25deg);
-    animation: shimmer-beam 5s infinite;
-}
-
-@keyframes shimmer-beam {
-    0%, 70% { left: -100%; }
-    100% { left: 200%; }
+    animation: shimmer-beam 5s infinite; /* Runs endlessly */
 }
 
 #sign-up-btn:hover {
     box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
     transform: translateY(-1px);
+    text-decoration: underline;
+}
+
+@keyframes shimmer-beam {
+    0%, 70% { left: -100%; } /* Wait off-screen for a few seconds */
+    100% { left: 200%; } /* Zoom across the button! */
+}
+
+#sign-up-btn span {
+    text-align: center;
+    font-size: 22px;
 }
 
 /*Message Error CSS*/
@@ -226,7 +204,7 @@ footer {
     flex-direction: column;
     align-items: center;
     text-align: center;
-    margin-top: 4rem;
+    margin-top: 2rem;
     flex: 1;
 }
 
@@ -286,14 +264,40 @@ footer {
     box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
 }
 
+.signup-form input,
+.signup-form textarea,
 .signup-form select {
-    padding: 0.75rem;
-    width: 100%;
-    box-sizing: border-box;
     font-size: 1rem;
-    border: 1px solid #cbd5e1;
-    border-radius: .5rem;
-    background-color: #ffffff;
+    color: #8795a8;
+}
+
+.signup-form select{
+    -webkit-appearance: none; /* Chrome/Safari/Edge */
+    -moz-appearance: none;    /* Firefox */
+    appearance: none;         /* Standard */
+    /* Add custom styling here */
+    background: white;
+    height: 2rem;
+    color: #8795a8;
+    font-size: 1rem;
+    padding: .5rem;
+    border: .5px solid #000;
+}
+
+.signup-form select:focus {
+    outline: none;
+    border-color: #3bf6ed;
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
+}
+
+.signup-form select option {
+    background: transparent;
+    color: inherit;
+}
+
+/* When the select has no valid value (the placeholder/disabled option), show muted text */
+.signup-form select:invalid {
+    color: #6b7280; /* gray-500 */
 }
 
 .signup-form #signup-btn {
diff --git a/src/main/resources/static/css/templates.css b/src/main/resources/static/css/templates.css
index 0306a61..1c6fc2a 100644
--- a/src/main/resources/static/css/templates.css
+++ b/src/main/resources/static/css/templates.css
@@ -11,144 +11,111 @@ body {
 
 /* NAVBAR STYLING */
 .nav {
-    align-items: center;
-    display: grid;
-    grid-template-columns: 1fr auto 1fr;
-    padding: 1rem 1rem;
-    width: 100%;
-    left: 0;
-    margin: 0;
-
-    /* 1. Make it sticky at the top */
     position: fixed;
-    top: 0;
-    z-index: 1000;
-
-    /* 2. The Frosted Glass Effect */
-    background: rgba(250, 251, 252, 0.75); /* Semi-transparent white */
-    backdrop-filter: blur(12px); /* Blurs whatever is behind the nav */
-    -webkit-backdrop-filter: blur(12px); /* Safari support */
-
-    /* 3. A subtle border to define the edge */
-    border-bottom: 1px solid rgba(224, 224, 224, 0.5);
-    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
-}
-
-.nav a {
-    text-decoration: none;
-    color: #1a1a2e;
-    font-size: 0.92rem;
-    transition: color 0.3s ease;
-}
-
-.nav a:hover:not(#link-garden, #sign-up-btn) {
-    color: #3b82f6;
-}
-
-.nav #link-garden {
-    font-weight: bold;
-    font-size: 1.2rem;
-    color: #1a1a2e;
-}
-
-.nav-left, .nav-center, .nav-right {
+    top: env(safe-area-inset-top, 0);
+    left: 50%;
+    transform: translateX(-50%);
+    max-width: 80rem;
+    width: 80rem;
+    backdrop-filter: blur(12px) saturate(180%) contrast(200%);
+    background: rgba(0, 122, 255, 0.404);
+    border: 1px solid var(--glass-border);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
+    padding: 8px;
+    border-radius: 99rem;
     display: flex;
+    justify-content: center;
+    gap: 6rem;
+    z-index: 50;
     align-items: center;
 }
 
-.nav-left a {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.5rem;
-}
-
-.nav-left svg {
-    width: 30px;
-    height: 30px;
-    display: block;
-    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-}
-
-.nav-left a:hover svg {
-    transform: rotate(-10deg) scale(1.1);
-    color: #3b82f6 !important;
+.nav::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    box-shadow:inset 2px 2px 5px -2px rgba(255, 255, 255, 0.4),inset -2px -2px 5px 2px rgba(255, 255, 255, 0.4),inset 0 -2px 0 rgba(255, 255, 255, 0.2);
+    pointer-events: none;
+    z-index: -1;
 }
 
-.nav-center {
-    justify-content: center;
-    justify-self: center;
-    gap: 1rem;
+.nav a ,.nav form, .nav form button{
+    display: flex;
+    flex-direction: column;
     align-items: center;
-}
-
-.nav-center a, .nav-center button {
-    font-size: 1.2rem;
-    position: relative;
+    flex: 1 1 0;
+    min-width: 0;
+    color: #1a1a2e;
     text-decoration: none;
+    padding: 10px 6px;
+    border-radius: 999rem;
+    max-width: 15rem;
+    -webkit-tap-highlight-color: transparent;
+    transition:
+            background 0.18s var(--ease-spring),
+            color 0.18s var(--ease-spring),
+            transform 0.18s var(--ease-spring),
+            box-shadow 0.3s ease-in-out;
 }
 
-.nav-center a::after {
-    content: '';
-    position: absolute;
-    width: 0;
-    height: 2px;
-    bottom: -4px;
-    left: 0;
-    background: linear-gradient(90deg, #3b82f6, #0ea5e9);
-    transition: width 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
+.nav a:hover:not(#logout:hover, #sign-up-btn), .nav form:hover {
+    transition:
+            background 0.18s var(--ease-spring),
+            color 0.18s var(--ease-spring),
+            transform 0.18s var(--ease-spring),
+            box-shadow 0.3s ease-in-out;
+    background-color: rgba(255, 255, 255, 30%);
+    box-shadow:
+            inset 2px 2px 5px -2px rgba(255, 255, 255, 0.4),
+            inset -2px -1px 5px 0 rgba(255, 255, 255, 0.4),
+            inset 0 -2px 0 rgba(255, 255, 255, 0.2);
+    transform: rotate(2.2);
+    color: rgba(0, 122, 255, 70%);
 }
 
-.nav-center a:hover::after {
-    width: 100%;
+.nav form button:hover {
+    color: rgba(0, 122, 255, 70%);
 }
 
-.nav button:hover {
-    color: #3b82f6;
+.nav #logout:hover {
+    color: red;
+    text-decoration: underline;
 }
 
-.nav-left {
-    justify-self: start;
-    margin-left: 10rem;
+.nav svg {
+    width: 1.4rem;
+    font-size: 1.4rem;
 }
 
-.nav-right {
-    justify-self: end;
-    gap: 0.75rem;
-    margin-right: 10rem;
+.nav span, .nav form button {
+    font-size: 0.8rem;
+    font-weight: 600;
+    margin-top: 4px;
 }
 
-.nav-right a {
-    display: inline-flex;
-    align-items: center;
-    line-height: 1;
-    font-size: 1.2rem;
-    position: relative;
-    text-decoration: none;
+.nav form button {
+    background: transparent;
+    border: none;
+    color: #1a1a2e;
+    cursor: pointer;
+    padding: 0;
+    font-family: inherit;
 }
 
-.nav-right a:not(#sign-up-btn)::after {
-    content: '';
-    position: absolute;
-    width: 0;
-    height: 2px;
-    bottom: -4px;
-    left: 0;
-    background: linear-gradient(90deg, #3b82f6, #0ea5e9);
-    transition: width 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
+.nav form button:hover {
+    background: transparent;
+    border: none;
 }
 
-.nav-right a:not(#sign-up-btn):hover::after {
-    width: 100%;
+/* ACTIVE TAB CSS */
+.nav .active {
+    background: rgba(237, 237, 237, 0.6);
+    color: rgba(0, 122, 255, 0.9);
 }
 
-.nav-center button, .nav-right button {
-    border: none;
-    background: none;
-    padding: 0;
-}
-.nav-center button:hover, .nav-right button:hover {
-    color: #3b82f6;
-    cursor: pointer;
+.nav a:active {
+    transform: scale(0.98);
 }
 
 #sign-up-btn {
@@ -160,30 +127,42 @@ body {
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     position: relative;
     overflow: hidden;
+    max-width: 6rem;
+    max-height: 2rem;
 }
 
 #sign-up-btn::after {
     content: '';
     position: absolute;
     top: 0;
-    left: -100%;
+    left: -100%; /* Start completely off the left edge */
     width: 50%;
     height: 100%;
     background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
     transform: skewX(-25deg);
-    animation: shimmer-beam 5s infinite;
-}
-
-@keyframes shimmer-beam {
-    0%, 70% { left: -100%; }
-    100% { left: 200%; }
+    animation: shimmer-beam 5s infinite; /* Runs endlessly */
 }
 
 #sign-up-btn:hover {
     box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
     transform: translateY(-1px);
+    text-decoration: underline;
+}
+
+@keyframes shimmer-beam {
+    0%, 70% { left: -100%; } /* Wait off-screen for a few seconds */
+    100% { left: 200%; } /* Zoom across the button! */
+}
+
+#sign-up-btn span {
+    text-align: center;
+    font-size: 22px;
 }
 
 
diff --git a/src/main/resources/templates/auth/login.html b/src/main/resources/templates/auth/login.html
index de5b248..6c047bf 100644
--- a/src/main/resources/templates/auth/login.html
+++ b/src/main/resources/templates/auth/login.html
@@ -7,23 +7,51 @@
 </head>
 
 <body>
-<nav class="nav">
-    <div class="nav-left">
-        <a th:href="@{/}" id="link-garden">
-            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" viewBox="0 0 56 56" style="color: rgb(28, 32, 51);"><path fill="currentColor" d="M28 51.906c13.055 0 23.906-10.828 23.906-23.906c0-13.055-10.875-23.906-23.93-23.906C14.899 4.094 4.095 14.945 4.095 28c0 13.078 10.828 23.906 23.906 23.906m0-3.984C16.937 47.922 8.1 39.062 8.1 28c0-11.04 8.813-19.922 19.876-19.922c11.039 0 19.921 8.883 19.945 19.922c.023 11.063-8.883 19.922-19.922 19.922m10.078-30.469c-2.789-2.765-6.258-2.531-9.492.703l-3.328 3.328c-3.305 3.282-3.586 6.774-.774 9.563c.774.797 1.64 1.312 2.274 1.43c.633-.446 1.383-1.266 1.71-2.016q-1.51-.246-2.32-1.055c-1.734-1.758-1.476-4.078.82-6.328l3.212-3.234c2.18-2.18 4.5-2.438 6.234-.703c1.758 1.734 1.547 4.054-.68 6.234l-2.32 2.297c.352.844.375 2.133.023 3.234l3.985-3.937c3.21-3.258 3.469-6.703.656-9.516m-21 21.047c2.79 2.766 6.258 2.531 9.492-.703l3.328-3.328c3.305-3.282 3.586-6.774.774-9.563c-.774-.797-1.64-1.312-2.274-1.43c-.633.446-1.383 1.266-1.71 2.016q1.51.246 2.32 1.055c1.734 1.758 1.476 4.055-.82 6.305l-3.211 3.257c-2.18 2.18-4.5 2.438-6.235.703c-1.758-1.734-1.547-4.054.68-6.234l2.32-2.297c-.352-.867-.375-2.133-.023-3.234l-3.985 3.937c-3.21 3.258-3.469 6.703-.656 9.516"></path></svg>
-            HyperLink
-        </a>
-    </div>
+<div class="nav">
+
+    <!-- LOGO -->
+    <a th:href="@{/}" id="link-garden">
+        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" viewBox="0 0 56 56" style="color: rgb(28, 32, 51);"><path fill="currentColor" d="M28 51.906c13.055 0 23.906-10.828 23.906-23.906c0-13.055-10.875-23.906-23.93-23.906C14.899 4.094 4.095 14.945 4.095 28c0 13.078 10.828 23.906 23.906 23.906m0-3.984C16.937 47.922 8.1 39.062 8.1 28c0-11.04 8.813-19.922 19.876-19.922c11.039 0 19.921 8.883 19.945 19.922c.023 11.063-8.883 19.922-19.922 19.922m10.078-30.469c-2.789-2.765-6.258-2.531-9.492.703l-3.328 3.328c-3.305 3.282-3.586 6.774-.774 9.563c.774.797 1.64 1.312 2.274 1.43c.633-.446 1.383-1.266 1.71-2.016q-1.51-.246-2.32-1.055c-1.734-1.758-1.476-4.078.82-6.328l3.212-3.234c2.18-2.18 4.5-2.438 6.234-.703c1.758 1.734 1.547 4.054-.68 6.234l-2.32 2.297c.352.844.375 2.133.023 3.234l3.985-3.937c3.21-3.258 3.469-6.703.656-9.516m-21 21.047c2.79 2.766 6.258 2.531 9.492-.703l3.328-3.328c3.305-3.282 3.586-6.774.774-9.563c-.774-.797-1.64-1.312-2.274-1.43c-.633.446-1.383 1.266-1.71 2.016q1.51.246 2.32 1.055c1.734 1.758 1.476 4.055-.82 6.305l-3.211 3.257c-2.18 2.18-4.5 2.438-6.235.703c-1.758-1.734-1.547-4.054.68-6.234l2.32-2.297c-.352-.867-.375-2.133-.023-3.234l-3.985 3.937c-3.21 3.258-3.469 6.703-.656 9.516"></path></svg>
+        <span>HyperLink</span>
+    </a>
+
+    <!-- TEMPLATES -->
+    <a th:href="@{/templates}">
+        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" viewBox="0 0 14 14" style="color: rgb(28, 32, 51);"><g fill="none" fill-rule="evenodd" clip-rule="evenodd"><path fill="#000" d="M3.295.286c-.49 0-.961.066-1.395.137C1.44.5 1.072.8.824 1.165a2.76 2.76 0 0 0-.443 1.338C.336 3.132.296 3.788.296 4.462s.04 1.33.085 1.958c.037.5.193.97.443 1.338c.248.366.615.666 1.076.742c.434.071.906.137 1.395.137c.49 0 .962-.066 1.396-.137c.46-.076.828-.376 1.076-.742a2.75 2.75 0 0 0 .442-1.338c.046-.629.086-1.285.086-1.958s-.04-1.33-.086-1.959a2.75 2.75 0 0 0-.442-1.338C5.519.799 5.152.499 4.69.423A8.6 8.6 0 0 0 3.295.286M10.7 13.714c.49 0 .964-.066 1.398-.137c.461-.075.829-.375 1.078-.74c.25-.37.407-.838.443-1.339c.046-.628.086-1.284.086-1.957s-.04-1.329-.086-1.957a2.74 2.74 0 0 0-.443-1.338c-.25-.366-.617-.666-1.078-.741a9 9 0 0 0-1.398-.137c-.49 0-.964.066-1.398.137c-.461.075-.829.375-1.078.74a2.75 2.75 0 0 0-.443 1.339a27 27 0 0 0-.086 1.957c0 .673.04 1.329.086 1.957c.036.5.192.97.443 1.338c.25.366.617.666 1.078.741a9 9 0 0 0 1.398.137"></path><path fill="#000" d="M12.046 3.895c-.431.025-.883.048-1.347.048s-.916-.023-1.347-.048a2.35 2.35 0 0 1-.95-.25c-.254-.134-.54-.372-.614-.737a4 4 0 0 1-.094-.794a4 4 0 0 1 .094-.793c.074-.366.36-.603.614-.738c.27-.144.603-.228.95-.249c.431-.025.883-.048 1.347-.048s.916.023 1.347.048c.346.02.68.105.95.249c.254.135.54.372.614.738c.047.234.094.506.094.793s-.047.56-.094.794c-.074.365-.36.603-.614.738c-.27.143-.604.228-.95.249M1.95 10.105c.43-.025.881-.048 1.344-.048s.914.023 1.345.048c.346.021.678.106.948.25c.254.135.54.372.613.737c.047.234.094.506.094.794c0 .287-.047.559-.094.793c-.074.365-.359.602-.613.738a2.3 2.3 0 0 1-.948.249c-.43.025-.882.048-1.345.048s-.914-.023-1.344-.048a2.3 2.3 0 0 1-.948-.25c-.255-.135-.54-.372-.613-.737a4 4 0 0 1-.094-.793c0-.288.047-.56.094-.794c.073-.365.358-.602.613-.738c.27-.143.602-.228.948-.248"></path></g></svg>
+        <span>Templates</span>
+    </a>
+
+    <!-- DASHBOARD -->
+    <a th:if="${user != null}" th:href="@{/dashboard}">
+        <svg viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="35" y="35" width="442" height="442" rx="20" stroke="black" stroke-width="24"/><circle cx="256" cy="180" r="70" stroke="black" stroke-width="20"/><path d="M160 330 C 160 260, 352 260, 352 330" stroke="black" stroke-width="20" stroke-linecap="round"/><rect x="85" y="350" width="342" height="45" stroke="black" stroke-width="20"/><rect x="85" y="425" width="130" height="45" stroke="black" stroke-width="20"/><rect x="297" y="425" width="130" height="45" stroke="black" stroke-width="20"/><line x1="450" y1="120" x2="450" y2="150" stroke="black" stroke-width="12" stroke-linecap="round"/><line x1="450" y1="175" x2="450" y2="280" stroke="black" stroke-width="12" stroke-linecap="round"/></svg>
+        <span>Dashboard</span>
+    </a>
+
+    <!-- PROFILE -->
+    <form th:if="${user != null}" th:action="@{/profile}" method="get">
+        <input type="hidden" name="userName" th:value="${user.username}">
+        <button type="submit">
+            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" viewBox="0 0 24 24" style="color: rgb(28, 32, 51);"><g fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"><path d="M16 9a4 4 0 1 1-8 0a4 4 0 0 1 8 0m-2 0a2 2 0 1 1-4 0a2 2 0 0 1 4 0"></path><path d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11s11-4.925 11-11S18.075 1 12 1M3 12c0 2.09.713 4.014 1.908 5.542A8.99 8.99 0 0 1 12.065 14a8.98 8.98 0 0 1 7.092 3.458A9 9 0 1 0 3 12m9 9a8.96 8.96 0 0 1-5.672-2.012A6.99 6.99 0 0 1 12.065 16a6.99 6.99 0 0 1 5.689 2.92A8.96 8.96 0 0 1 12 21"></path></g></svg>
+            <span>Profile Page</span>
+        </button>
+    </form>
+
+    <!-- LOGIN -->
+    <a th:if="${user == null}" th:href="@{/login}" class="active">
+        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" viewBox="0 0 24 24" style="color: rgb(28, 32, 51);"><g fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"><path d="M16 9a4 4 0 1 1-8 0a4 4 0 0 1 8 0m-2 0a2 2 0 1 1-4 0a2 2 0 0 1 4 0"></path><path d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11s11-4.925 11-11S18.075 1 12 1M3 12c0 2.09.713 4.014 1.908 5.542A8.99 8.99 0 0 1 12.065 14a8.98 8.98 0 0 1 7.092 3.458A9 9 0 1 0 3 12m9 9a8.96 8.96 0 0 1-5.672-2.012A6.99 6.99 0 0 1 12.065 16a6.99 6.99 0 0 1 5.689 2.92A8.96 8.96 0 0 1 12 21"></path></g></svg>
+        <span>Login</span>
+    </a>
+
+    <!-- LOGOUT -->
+    <form th:if="${user != null}" th:action="@{/logout}" method="post" class="active">
+        <button type="submit" id="logout">
+            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" viewBox="0 0 48 48" style="color: red;"><g fill="none" stroke="red" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"><path d="M23.9917 6H6V42H24"></path><path d="M33 33L42 24L33 15"></path><path d="M16 23.9917H42"></path></g></svg>
+            <span>Logout</span>
+        </button>
+    </form>
+</div>
 
-    <div th:if="!${user}" class="nav-center">
-        <a th:href="@{/templates}">Templates</a>
-    </div>
 
-    <div th:if="!${user}" class="nav-right">
-        <a th:href="@{/login}">Sign In</a>
-        <a th:href="@{/register}" id="sign-up-btn">Sign Up</a>
-    </div>
-</nav>
 <main class="auth-page">
 <section class="login-section">
 
diff --git a/src/main/resources/templates/auth/register.html b/src/main/resources/templates/auth/register.html
index 6d5ebb6..2b9cdd4 100644
--- a/src/main/resources/templates/auth/register.html
+++ b/src/main/resources/templates/auth/register.html
@@ -7,23 +7,29 @@
 </head>
 
 <body>
-<nav class="nav">
-    <div class="nav-left">
-        <a th:href="@{/}" id="link-garden">
-            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" viewBox="0 0 56 56" style="color: rgb(28, 32, 51);"><path fill="currentColor" d="M28 51.906c13.055 0 23.906-10.828 23.906-23.906c0-13.055-10.875-23.906-23.93-23.906C14.899 4.094 4.095 14.945 4.095 28c0 13.078 10.828 23.906 23.906 23.906m0-3.984C16.937 47.922 8.1 39.062 8.1 28c0-11.04 8.813-19.922 19.876-19.922c11.039 0 19.921 8.883 19.945 19.922c.023 11.063-8.883 19.922-19.922 19.922m10.078-30.469c-2.789-2.765-6.258-2.531-9.492.703l-3.328 3.328c-3.305 3.282-3.586 6.774-.774 9.563c.774.797 1.64 1.312 2.274 1.43c.633-.446 1.383-1.266 1.71-2.016q-1.51-.246-2.32-1.055c-1.734-1.758-1.476-4.078.82-6.328l3.212-3.234c2.18-2.18 4.5-2.438 6.234-.703c1.758 1.734 1.547 4.054-.68 6.234l-2.32 2.297c.352.844.375 2.133.023 3.234l3.985-3.937c3.21-3.258 3.469-6.703.656-9.516m-21 21.047c2.79 2.766 6.258 2.531 9.492-.703l3.328-3.328c3.305-3.282 3.586-6.774.774-9.563c-.774-.797-1.64-1.312-2.274-1.43c-.633.446-1.383 1.266-1.71 2.016q1.51.246 2.32 1.055c1.734 1.758 1.476 4.055-.82 6.305l-3.211 3.257c-2.18 2.18-4.5 2.438-6.235.703c-1.758-1.734-1.547-4.054.68-6.234l2.32-2.297c-.352-.867-.375-2.133-.023-3.234l-3.985 3.937c-3.21 3.258-3.469 6.703-.656 9.516"></path></svg>
-            HyperLink
-        </a>
-    </div>
+<div class="nav">
+
+    <!-- LOGO -->
+    <a th:href="@{/}" id="link-garden">
+        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" viewBox="0 0 56 56" style="color: rgb(28, 32, 51);"><path fill="currentColor" d="M28 51.906c13.055 0 23.906-10.828 23.906-23.906c0-13.055-10.875-23.906-23.93-23.906C14.899 4.094 4.095 14.945 4.095 28c0 13.078 10.828 23.906 23.906 23.906m0-3.984C16.937 47.922 8.1 39.062 8.1 28c0-11.04 8.813-19.922 19.876-19.922c11.039 0 19.921 8.883 19.945 19.922c.023 11.063-8.883 19.922-19.922 19.922m10.078-30.469c-2.789-2.765-6.258-2.531-9.492.703l-3.328 3.328c-3.305 3.282-3.586 6.774-.774 9.563c.774.797 1.64 1.312 2.274 1.43c.633-.446 1.383-1.266 1.71-2.016q-1.51-.246-2.32-1.055c-1.734-1.758-1.476-4.078.82-6.328l3.212-3.234c2.18-2.18 4.5-2.438 6.234-.703c1.758 1.734 1.547 4.054-.68 6.234l-2.32 2.297c.352.844.375 2.133.023 3.234l3.985-3.937c3.21-3.258 3.469-6.703.656-9.516m-21 21.047c2.79 2.766 6.258 2.531 9.492-.703l3.328-3.328c3.305-3.282 3.586-6.774.774-9.563c-.774-.797-1.64-1.312-2.274-1.43c-.633.446-1.383 1.266-1.71 2.016q1.51.246 2.32 1.055c1.734 1.758 1.476 4.055-.82 6.305l-3.211 3.257c-2.18 2.18-4.5 2.438-6.235.703c-1.758-1.734-1.547-4.054.68-6.234l2.32-2.297c-.352-.867-.375-2.133-.023-3.234l-3.985 3.937c-3.21 3.258-3.469 6.703-.656 9.516"></path></svg>
+        <span>HyperLink</span>
+    </a>
+
+    <!-- TEMPLATES -->
+    <a th:href="@{/templates}">
+        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" viewBox="0 0 14 14" style="color: rgb(28, 32, 51);"><g fill="none" fill-rule="evenodd" clip-rule="evenodd"><path fill="#000" d="M3.295.286c-.49 0-.961.066-1.395.137C1.44.5 1.072.8.824 1.165a2.76 2.76 0 0 0-.443 1.338C.336 3.132.296 3.788.296 4.462s.04 1.33.085 1.958c.037.5.193.97.443 1.338c.248.366.615.666 1.076.742c.434.071.906.137 1.395.137c.49 0 .962-.066 1.396-.137c.46-.076.828-.376 1.076-.742a2.75 2.75 0 0 0 .442-1.338c.046-.629.086-1.285.086-1.958s-.04-1.33-.086-1.959a2.75 2.75 0 0 0-.442-1.338C5.519.799 5.152.499 4.69.423A8.6 8.6 0 0 0 3.295.286M10.7 13.714c.49 0 .964-.066 1.398-.137c.461-.075.829-.375 1.078-.74c.25-.37.407-.838.443-1.339c.046-.628.086-1.284.086-1.957s-.04-1.329-.086-1.957a2.74 2.74 0 0 0-.443-1.338c-.25-.366-.617-.666-1.078-.741a9 9 0 0 0-1.398-.137c-.49 0-.964.066-1.398.137c-.461.075-.829.375-1.078.74a2.75 2.75 0 0 0-.443 1.339a27 27 0 0 0-.086 1.957c0 .673.04 1.329.086 1.957c.036.5.192.97.443 1.338c.25.366.617.666 1.078.741a9 9 0 0 0 1.398.137"></path><path fill="#000" d="M12.046 3.895c-.431.025-.883.048-1.347.048s-.916-.023-1.347-.048a2.35 2.35 0 0 1-.95-.25c-.254-.134-.54-.372-.614-.737a4 4 0 0 1-.094-.794a4 4 0 0 1 .094-.793c.074-.366.36-.603.614-.738c.27-.144.603-.228.95-.249c.431-.025.883-.048 1.347-.048s.916.023 1.347.048c.346.02.68.105.95.249c.254.135.54.372.614.738c.047.234.094.506.094.793s-.047.56-.094.794c-.074.365-.36.603-.614.738c-.27.143-.604.228-.95.249M1.95 10.105c.43-.025.881-.048 1.344-.048s.914.023 1.345.048c.346.021.678.106.948.25c.254.135.54.372.613.737c.047.234.094.506.094.794c0 .287-.047.559-.094.793c-.074.365-.359.602-.613.738a2.3 2.3 0 0 1-.948.249c-.43.025-.882.048-1.345.048s-.914-.023-1.344-.048a2.3 2.3 0 0 1-.948-.25c-.255-.135-.54-.372-.613-.737a4 4 0 0 1-.094-.793c0-.288.047-.56.094-.794c.073-.365.358-.602.613-.738c.27-.143.602-.228.948-.248"></path></g></svg>
+        <span>Templates</span>
+    </a>
+
+    <!-- LOGIN -->
+    <a th:if="!${user == null}" th:href="@{/login}">
+        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" viewBox="0 0 24 24" style="color: rgb(28, 32, 51);"><g fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"><path d="M16 9a4 4 0 1 1-8 0a4 4 0 0 1 8 0m-2 0a2 2 0 1 1-4 0a2 2 0 0 1 4 0"></path><path d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11s11-4.925 11-11S18.075 1 12 1M3 12c0 2.09.713 4.014 1.908 5.542A8.99 8.99 0 0 1 12.065 14a8.98 8.98 0 0 1 7.092 3.458A9 9 0 1 0 3 12m9 9a8.96 8.96 0 0 1-5.672-2.012A6.99 6.99 0 0 1 12.065 16a6.99 6.99 0 0 1 5.689 2.92A8.96 8.96 0 0 1 12 21"></path></g></svg>
+        <span>Login</span>
+    </a>
+
+</div>
 
-    <div th:if="!${user}" class="nav-center">
-        <a th:href="@{/templates}">Templates</a>
-    </div>
 
-    <div th:if="!${user}" class="nav-right">
-        <a th:href="@{/login}">Sign In</a>
-        <a th:href="@{/register}" id="sign-up-btn">Sign Up</a>
-    </div>
-</nav>
 <main class="auth-page">
 
 <section class="signup-section">
diff --git a/src/main/resources/templates/dashboard.html b/src/main/resources/templates/dashboard.html
index ae07c6c..b0dcdfa 100644
--- a/src/main/resources/templates/dashboard.html
+++ b/src/main/resources/templates/dashboard.html
@@ -6,26 +6,56 @@
     <link rel="stylesheet" th:href="@{/css/dashboard.css}">
 </head>
 <body>
-<nav class="nav">
-    <div class="nav-left">
-        <a th:href="@{/}" id="link-garden">
-            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" viewBox="0 0 56 56" style="color: rgb(28, 32, 51);"><path fill="currentColor" d="M28 51.906c13.055 0 23.906-10.828 23.906-23.906c0-13.055-10.875-23.906-23.93-23.906C14.899 4.094 4.095 14.945 4.095 28c0 13.078 10.828 23.906 23.906 23.906m0-3.984C16.937 47.922 8.1 39.062 8.1 28c0-11.04 8.813-19.922 19.876-19.922c11.039 0 19.921 8.883 19.945 19.922c.023 11.063-8.883 19.922-19.922 19.922m10.078-30.469c-2.789-2.765-6.258-2.531-9.492.703l-3.328 3.328c-3.305 3.282-3.586 6.774-.774 9.563c.774.797 1.64 1.312 2.274 1.43c.633-.446 1.383-1.266 1.71-2.016q-1.51-.246-2.32-1.055c-1.734-1.758-1.476-4.078.82-6.328l3.212-3.234c2.18-2.18 4.5-2.438 6.234-.703c1.758 1.734 1.547 4.054-.68 6.234l-2.32 2.297c.352.844.375 2.133.023 3.234l3.985-3.937c3.21-3.258 3.469-6.703.656-9.516m-21 21.047c2.79 2.766 6.258 2.531 9.492-.703l3.328-3.328c3.305-3.282 3.586-6.774.774-9.563c-.774-.797-1.64-1.312-2.274-1.43c-.633.446-1.383 1.266-1.71 2.016q1.51.246 2.32 1.055c1.734 1.758 1.476 4.055-.82 6.305l-3.211 3.257c-2.18 2.18-4.5 2.438-6.235.703c-1.758-1.734-1.547-4.054.68-6.234l2.32-2.297c-.352-.867-.375-2.133-.023-3.234l-3.985 3.937c-3.21 3.258-3.469 6.703-.656 9.516"></path></svg>
-            HyperLink
-        </a>
-    </div>
+<div class="nav">
+
+    <!-- LOGO -->
+    <a th:href="@{/}" id="link-garden">
+        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" viewBox="0 0 56 56" style="color: rgb(28, 32, 51);"><path fill="currentColor" d="M28 51.906c13.055 0 23.906-10.828 23.906-23.906c0-13.055-10.875-23.906-23.93-23.906C14.899 4.094 4.095 14.945 4.095 28c0 13.078 10.828 23.906 23.906 23.906m0-3.984C16.937 47.922 8.1 39.062 8.1 28c0-11.04 8.813-19.922 19.876-19.922c11.039 0 19.921 8.883 19.945 19.922c.023 11.063-8.883 19.922-19.922 19.922m10.078-30.469c-2.789-2.765-6.258-2.531-9.492.703l-3.328 3.328c-3.305 3.282-3.586 6.774-.774 9.563c.774.797 1.64 1.312 2.274 1.43c.633-.446 1.383-1.266 1.71-2.016q-1.51-.246-2.32-1.055c-1.734-1.758-1.476-4.078.82-6.328l3.212-3.234c2.18-2.18 4.5-2.438 6.234-.703c1.758 1.734 1.547 4.054-.68 6.234l-2.32 2.297c.352.844.375 2.133.023 3.234l3.985-3.937c3.21-3.258 3.469-6.703.656-9.516m-21 21.047c2.79 2.766 6.258 2.531 9.492-.703l3.328-3.328c3.305-3.282 3.586-6.774.774-9.563c-.774-.797-1.64-1.312-2.274-1.43c-.633.446-1.383 1.266-1.71 2.016q1.51.246 2.32 1.055c1.734 1.758 1.476 4.055-.82 6.305l-3.211 3.257c-2.18 2.18-4.5 2.438-6.235.703c-1.758-1.734-1.547-4.054.68-6.234l2.32-2.297c-.352-.867-.375-2.133-.023-3.234l-3.985 3.937c-3.21 3.258-3.469 6.703-.656 9.516"></path></svg>
+        <span>HyperLink</span>
+    </a>
+
+    <!-- TEMPLATES -->
+    <a th:href="@{/templates}">
+        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" viewBox="0 0 14 14" style="color: rgb(28, 32, 51);"><g fill="none" fill-rule="evenodd" clip-rule="evenodd"><path fill="#000" d="M3.295.286c-.49 0-.961.066-1.395.137C1.44.5 1.072.8.824 1.165a2.76 2.76 0 0 0-.443 1.338C.336 3.132.296 3.788.296 4.462s.04 1.33.085 1.958c.037.5.193.97.443 1.338c.248.366.615.666 1.076.742c.434.071.906.137 1.395.137c.49 0 .962-.066 1.396-.137c.46-.076.828-.376 1.076-.742a2.75 2.75 0 0 0 .442-1.338c.046-.629.086-1.285.086-1.958s-.04-1.33-.086-1.959a2.75 2.75 0 0 0-.442-1.338C5.519.799 5.152.499 4.69.423A8.6 8.6 0 0 0 3.295.286M10.7 13.714c.49 0 .964-.066 1.398-.137c.461-.075.829-.375 1.078-.74c.25-.37.407-.838.443-1.339c.046-.628.086-1.284.086-1.957s-.04-1.329-.086-1.957a2.74 2.74 0 0 0-.443-1.338c-.25-.366-.617-.666-1.078-.741a9 9 0 0 0-1.398-.137c-.49 0-.964.066-1.398.137c-.461.075-.829.375-1.078.74a2.75 2.75 0 0 0-.443 1.339a27 27 0 0 0-.086 1.957c0 .673.04 1.329.086 1.957c.036.5.192.97.443 1.338c.25.366.617.666 1.078.741a9 9 0 0 0 1.398.137"></path><path fill="#000" d="M12.046 3.895c-.431.025-.883.048-1.347.048s-.916-.023-1.347-.048a2.35 2.35 0 0 1-.95-.25c-.254-.134-.54-.372-.614-.737a4 4 0 0 1-.094-.794a4 4 0 0 1 .094-.793c.074-.366.36-.603.614-.738c.27-.144.603-.228.95-.249c.431-.025.883-.048 1.347-.048s.916.023 1.347.048c.346.02.68.105.95.249c.254.135.54.372.614.738c.047.234.094.506.094.793s-.047.56-.094.794c-.074.365-.36.603-.614.738c-.27.143-.604.228-.95.249M1.95 10.105c.43-.025.881-.048 1.344-.048s.914.023 1.345.048c.346.021.678.106.948.25c.254.135.54.372.613.737c.047.234.094.506.094.794c0 .287-.047.559-.094.793c-.074.365-.359.602-.613.738a2.3 2.3 0 0 1-.948.249c-.43.025-.882.048-1.345.048s-.914-.023-1.344-.048a2.3 2.3 0 0 1-.948-.25c-.255-.135-.54-.372-.613-.737a4 4 0 0 1-.094-.793c0-.288.047-.56.094-.794c.073-.365.358-.602.613-.738c.27-.143.602-.228.948-.248"></path></g></svg>
+        <span>Templates</span>
+    </a>
+
+    <!-- DASHBOARD -->
+    <a th:if="${user != null}" th:href="@{/dashboard}" class="active">
+        <svg viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="35" y="35" width="442" height="442" rx="20" stroke="black" stroke-width="24"/><circle cx="256" cy="180" r="70" stroke="black" stroke-width="20"/><path d="M160 330 C 160 260, 352 260, 352 330" stroke="black" stroke-width="20" stroke-linecap="round"/><rect x="85" y="350" width="342" height="45" stroke="black" stroke-width="20"/><rect x="85" y="425" width="130" height="45" stroke="black" stroke-width="20"/><rect x="297" y="425" width="130" height="45" stroke="black" stroke-width="20"/><line x1="450" y1="120" x2="450" y2="150" stroke="black" stroke-width="12" stroke-linecap="round"/><line x1="450" y1="175" x2="450" y2="280" stroke="black" stroke-width="12" stroke-linecap="round"/></svg>
+        <span>Dashboard</span>
+    </a>
+
+    <!-- PROFILE -->
+    <form th:if="${user != null}" th:action="@{/profile}" method="get">
+        <input type="hidden" name="userName" th:value="${user.username}">
+        <button type="submit">
+            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" viewBox="0 0 24 24" style="color: rgb(28, 32, 51);"><g fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"><path d="M16 9a4 4 0 1 1-8 0a4 4 0 0 1 8 0m-2 0a2 2 0 1 1-4 0a2 2 0 0 1 4 0"></path><path d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11s11-4.925 11-11S18.075 1 12 1M3 12c0 2.09.713 4.014 1.908 5.542A8.99 8.99 0 0 1 12.065 14a8.98 8.98 0 0 1 7.092 3.458A9 9 0 1 0 3 12m9 9a8.96 8.96 0 0 1-5.672-2.012A6.99 6.99 0 0 1 12.065 16a6.99 6.99 0 0 1 5.689 2.92A8.96 8.96 0 0 1 12 21"></path></g></svg>
+            <span>Profile Page</span>
+        </button>
+    </form>
+
+    <!-- LOGIN -->
+    <a th:if="${user == null}" th:href="@{/login}">
+        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" viewBox="0 0 24 24" style="color: rgb(28, 32, 51);"><g fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"><path d="M16 9a4 4 0 1 1-8 0a4 4 0 0 1 8 0m-2 0a2 2 0 1 1-4 0a2 2 0 0 1 4 0"></path><path d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11s11-4.925 11-11S18.075 1 12 1M3 12c0 2.09.713 4.014 1.908 5.542A8.99 8.99 0 0 1 12.065 14a8.98 8.98 0 0 1 7.092 3.458A9 9 0 1 0 3 12m9 9a8.96 8.96 0 0 1-5.672-2.012A6.99 6.99 0 0 1 12.065 16a6.99 6.99 0 0 1 5.689 2.92A8.96 8.96 0 0 1 12 21"></path></g></svg>
+        <span>Login</span>
+    </a>
+
+    <!-- REGISTER -->
+    <a th:if="${user == null}" th:href="@{/register}" id="sign-up-btn">
+        <span>Sign Up</span>
+    </a>
+
+    <!-- LOGOUT -->
+    <form th:if="${user != null}" th:action="@{/logout}" method="post">
+        <button type="submit" id="logout">
+            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" viewBox="0 0 48 48" style="color: red;"><g fill="none" stroke="red" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"><path d="M23.9917 6H6V42H24"></path><path d="M33 33L42 24L33 15"></path><path d="M16 23.9917H42"></path></g></svg>
+            <span>Logout</span>
+        </button>
+    </form>
+</div>
 
-    <div th:if="${user}" class="nav-center">
-        <a th:href="@{/templates}">Templates</a>
-        <a th:href="@{/profile}">Profile</a>
-        <a th:href="@{/dashboard}">Dashboard</a>
-    </div>
 
-    <div th:if="${user}" class="nav-right">
-        <form th:action="@{/logout}" method="post" class="logout-form">
-            <button type="submit" id="logout-btn">Log Out</button>
-        </form>
-    </div>
-</nav>
 <div class="share-box-container">
     <h3>Share Your Profile</h3>
     <p>Copy your unique link below and share it with your friends!</p>
diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html
index 78db2f0..859f307 100644
--- a/src/main/resources/templates/index.html
+++ b/src/main/resources/templates/index.html
@@ -7,33 +7,55 @@
     <link rel="stylesheet" th:href="@{/css/landing.css}">
 </head>
 <body>
-<nav class="nav">
-    <div class="nav-left">
-        <a th:href="@{/}" id="link-garden">
-            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="65" height="65" viewBox="0 0 56 56" style="color: rgb(28, 32, 51);"><path fill="currentColor" d="M28 51.906c13.055 0 23.906-10.828 23.906-23.906c0-13.055-10.875-23.906-23.93-23.906C14.899 4.094 4.095 14.945 4.095 28c0 13.078 10.828 23.906 23.906 23.906m0-3.984C16.937 47.922 8.1 39.062 8.1 28c0-11.04 8.813-19.922 19.876-19.922c11.039 0 19.921 8.883 19.945 19.922c.023 11.063-8.883 19.922-19.922 19.922m10.078-30.469c-2.789-2.765-6.258-2.531-9.492.703l-3.328 3.328c-3.305 3.282-3.586 6.774-.774 9.563c.774.797 1.64 1.312 2.274 1.43c.633-.446 1.383-1.266 1.71-2.016q-1.51-.246-2.32-1.055c-1.734-1.758-1.476-4.078.82-6.328l3.212-3.234c2.18-2.18 4.5-2.438 6.234-.703c1.758 1.734 1.547 4.054-.68 6.234l-2.32 2.297c.352.844.375 2.133.023 3.234l3.985-3.937c3.21-3.258 3.469-6.703.656-9.516m-21 21.047c2.79 2.766 6.258 2.531 9.492-.703l3.328-3.328c3.305-3.282 3.586-6.774.774-9.563c-.774-.797-1.64-1.312-2.274-1.43c-.633.446-1.383 1.266-1.71 2.016q1.51.246 2.32 1.055c1.734 1.758 1.476 4.055-.82 6.305l-3.211 3.257c-2.18 2.18-4.5 2.438-6.235.703c-1.758-1.734-1.547-4.054.68-6.234l2.32-2.297c-.352-.867-.375-2.133-.023-3.234l-3.985 3.937c-3.21 3.258-3.469 6.703-.656 9.516"></path></svg>
-            HyperLink
+    <div class="nav">
+
+        <!-- LOGO -->
+        <a th:href="@{/}" id="link-garden" class="active">
+            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" viewBox="0 0 56 56" style="color: rgb(28, 32, 51);"><path fill="currentColor" d="M28 51.906c13.055 0 23.906-10.828 23.906-23.906c0-13.055-10.875-23.906-23.93-23.906C14.899 4.094 4.095 14.945 4.095 28c0 13.078 10.828 23.906 23.906 23.906m0-3.984C16.937 47.922 8.1 39.062 8.1 28c0-11.04 8.813-19.922 19.876-19.922c11.039 0 19.921 8.883 19.945 19.922c.023 11.063-8.883 19.922-19.922 19.922m10.078-30.469c-2.789-2.765-6.258-2.531-9.492.703l-3.328 3.328c-3.305 3.282-3.586 6.774-.774 9.563c.774.797 1.64 1.312 2.274 1.43c.633-.446 1.383-1.266 1.71-2.016q-1.51-.246-2.32-1.055c-1.734-1.758-1.476-4.078.82-6.328l3.212-3.234c2.18-2.18 4.5-2.438 6.234-.703c1.758 1.734 1.547 4.054-.68 6.234l-2.32 2.297c.352.844.375 2.133.023 3.234l3.985-3.937c3.21-3.258 3.469-6.703.656-9.516m-21 21.047c2.79 2.766 6.258 2.531 9.492-.703l3.328-3.328c3.305-3.282 3.586-6.774.774-9.563c-.774-.797-1.64-1.312-2.274-1.43c-.633.446-1.383 1.266-1.71 2.016q1.51.246 2.32 1.055c1.734 1.758 1.476 4.055-.82 6.305l-3.211 3.257c-2.18 2.18-4.5 2.438-6.235.703c-1.758-1.734-1.547-4.054.68-6.234l2.32-2.297c-.352-.867-.375-2.133-.023-3.234l-3.985 3.937c-3.21 3.258-3.469 6.703-.656 9.516"></path></svg>
+            <span>HyperLink</span>
         </a>
-    </div>
 
-    <div th:if="!${user}" class="nav-center">
-        <a th:href="@{/templates}">Templates</a>
-    </div>
-    <div th:if="${user}" class="nav-center">
-        <a th:href="@{/templates}">Templates</a>
-        <a th:href="@{/profile}">Profile</a>
-        <a th:href="@{/dashboard}">Dashboard</a>
-    </div>
+        <!-- TEMPLATES -->
+        <a th:href="@{/templates}">
+            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" viewBox="0 0 14 14" style="color: rgb(28, 32, 51);"><g fill="none" fill-rule="evenodd" clip-rule="evenodd"><path fill="#000" d="M3.295.286c-.49 0-.961.066-1.395.137C1.44.5 1.072.8.824 1.165a2.76 2.76 0 0 0-.443 1.338C.336 3.132.296 3.788.296 4.462s.04 1.33.085 1.958c.037.5.193.97.443 1.338c.248.366.615.666 1.076.742c.434.071.906.137 1.395.137c.49 0 .962-.066 1.396-.137c.46-.076.828-.376 1.076-.742a2.75 2.75 0 0 0 .442-1.338c.046-.629.086-1.285.086-1.958s-.04-1.33-.086-1.959a2.75 2.75 0 0 0-.442-1.338C5.519.799 5.152.499 4.69.423A8.6 8.6 0 0 0 3.295.286M10.7 13.714c.49 0 .964-.066 1.398-.137c.461-.075.829-.375 1.078-.74c.25-.37.407-.838.443-1.339c.046-.628.086-1.284.086-1.957s-.04-1.329-.086-1.957a2.74 2.74 0 0 0-.443-1.338c-.25-.366-.617-.666-1.078-.741a9 9 0 0 0-1.398-.137c-.49 0-.964.066-1.398.137c-.461.075-.829.375-1.078.74a2.75 2.75 0 0 0-.443 1.339a27 27 0 0 0-.086 1.957c0 .673.04 1.329.086 1.957c.036.5.192.97.443 1.338c.25.366.617.666 1.078.741a9 9 0 0 0 1.398.137"></path><path fill="#000" d="M12.046 3.895c-.431.025-.883.048-1.347.048s-.916-.023-1.347-.048a2.35 2.35 0 0 1-.95-.25c-.254-.134-.54-.372-.614-.737a4 4 0 0 1-.094-.794a4 4 0 0 1 .094-.793c.074-.366.36-.603.614-.738c.27-.144.603-.228.95-.249c.431-.025.883-.048 1.347-.048s.916.023 1.347.048c.346.02.68.105.95.249c.254.135.54.372.614.738c.047.234.094.506.094.793s-.047.56-.094.794c-.074.365-.36.603-.614.738c-.27.143-.604.228-.95.249M1.95 10.105c.43-.025.881-.048 1.344-.048s.914.023 1.345.048c.346.021.678.106.948.25c.254.135.54.372.613.737c.047.234.094.506.094.794c0 .287-.047.559-.094.793c-.074.365-.359.602-.613.738a2.3 2.3 0 0 1-.948.249c-.43.025-.882.048-1.345.048s-.914-.023-1.344-.048a2.3 2.3 0 0 1-.948-.25c-.255-.135-.54-.372-.613-.737a4 4 0 0 1-.094-.793c0-.288.047-.56.094-.794c.073-.365.358-.602.613-.738c.27-.143.602-.228.948-.248"></path></g></svg>
+            <span>Templates</span>
+        </a>
 
-    <div th:if="!${user}" class="nav-right">
-        <a th:href="@{/login}">Sign In</a>
-        <a th:href="@{/register}" id="sign-up-btn">Sign Up</a>
-    </div>
-    <div th:if="${user}" class="nav-right">
-        <form th:action="@{/logout}" method="post" class="logout-form">
-            <button type="submit" id="logout-btn">Log Out</button>
+        <!-- DASHBOARD -->
+        <a th:if="${user != null}" th:href="@{/dashboard}">
+            <svg viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="35" y="35" width="442" height="442" rx="20" stroke="black" stroke-width="24"/><circle cx="256" cy="180" r="70" stroke="black" stroke-width="20"/><path d="M160 330 C 160 260, 352 260, 352 330" stroke="black" stroke-width="20" stroke-linecap="round"/><rect x="85" y="350" width="342" height="45" stroke="black" stroke-width="20"/><rect x="85" y="425" width="130" height="45" stroke="black" stroke-width="20"/><rect x="297" y="425" width="130" height="45" stroke="black" stroke-width="20"/><line x1="450" y1="120" x2="450" y2="150" stroke="black" stroke-width="12" stroke-linecap="round"/><line x1="450" y1="175" x2="450" y2="280" stroke="black" stroke-width="12" stroke-linecap="round"/></svg>
+            <span>Dashboard</span>
+        </a>
+
+        <!-- PROFILE -->
+        <form th:if="${user != null}" th:action="@{/profile}" method="get">
+            <input type="hidden" name="userName" th:value="${user.username}">
+            <button type="submit">
+                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" viewBox="0 0 24 24" style="color: rgb(28, 32, 51);"><g fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"><path d="M16 9a4 4 0 1 1-8 0a4 4 0 0 1 8 0m-2 0a2 2 0 1 1-4 0a2 2 0 0 1 4 0"></path><path d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11s11-4.925 11-11S18.075 1 12 1M3 12c0 2.09.713 4.014 1.908 5.542A8.99 8.99 0 0 1 12.065 14a8.98 8.98 0 0 1 7.092 3.458A9 9 0 1 0 3 12m9 9a8.96 8.96 0 0 1-5.672-2.012A6.99 6.99 0 0 1 12.065 16a6.99 6.99 0 0 1 5.689 2.92A8.96 8.96 0 0 1 12 21"></path></g></svg>
+                <span>Profile Page</span>
+            </button>
+        </form>
+
+        <!-- LOGIN -->
+        <a th:if="${user == null}" th:href="@{/login}">
+            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" viewBox="0 0 24 24" style="color: rgb(28, 32, 51);"><g fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"><path d="M16 9a4 4 0 1 1-8 0a4 4 0 0 1 8 0m-2 0a2 2 0 1 1-4 0a2 2 0 0 1 4 0"></path><path d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11s11-4.925 11-11S18.075 1 12 1M3 12c0 2.09.713 4.014 1.908 5.542A8.99 8.99 0 0 1 12.065 14a8.98 8.98 0 0 1 7.092 3.458A9 9 0 1 0 3 12m9 9a8.96 8.96 0 0 1-5.672-2.012A6.99 6.99 0 0 1 12.065 16a6.99 6.99 0 0 1 5.689 2.92A8.96 8.96 0 0 1 12 21"></path></g></svg>
+            <span>Login</span>
+        </a>
+
+        <!-- REGISTER -->
+        <a th:if="${user == null}" th:href="@{/register}" id="sign-up-btn">
+            <span>Sign Up</span>
+        </a>
+
+        <!-- LOGOUT -->
+        <form th:if="${user != null}" th:action="@{/logout}" method="post">
+            <button type="submit" id="logout">
+                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" viewBox="0 0 48 48" style="color: red;"><g fill="none" stroke="red" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"><path d="M23.9917 6H6V42H24"></path><path d="M33 33L42 24L33 15"></path><path d="M16 23.9917H42"></path></g></svg>
+                <span>Logout</span>
+            </button>
         </form>
     </div>
-</nav>
+
 
 <section class="hero">
     <div class="network-bg" aria-hidden="true">
@@ -115,6 +137,7 @@ <h2>Choose from a variety of templates to match your style</h2>
                         <div class="line short"></div>
                         <div class="line long"></div>
                         <div class="line long"></div>
+                        <div class="line long"></div>
                     </div>
                 </div>
                 <div class="card-body">
@@ -131,6 +154,8 @@ <h2>Choose from a variety of templates to match your style</h2>
                         <div class="avatar minimal-avatar"></div>
                         <div class="line short"></div>
                         <div class="line long"></div>
+                        <div class="line long"></div>
+                        <div class="line long"></div>
                     </div>
                 </div>
                 <div class="card-body">
diff --git a/src/main/resources/templates/templates.html b/src/main/resources/templates/templates.html
index 112851e..2f5a01c 100644
--- a/src/main/resources/templates/templates.html
+++ b/src/main/resources/templates/templates.html
@@ -8,30 +8,54 @@
 </head>
 
 <body>
-<nav class="nav">
-  <div class="nav-left">
-    <a th:href="@{/}" id="link-garden">
-      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" viewBox="0 0 56 56" style="color: rgb(28, 32, 51);"><path fill="currentColor" d="M28 51.906c13.055 0 23.906-10.828 23.906-23.906c0-13.055-10.875-23.906-23.93-23.906C14.899 4.094 4.095 14.945 4.095 28c0 13.078 10.828 23.906 23.906 23.906m0-3.984C16.937 47.922 8.1 39.062 8.1 28c0-11.04 8.813-19.922 19.876-19.922c11.039 0 19.921 8.883 19.945 19.922c.023 11.063-8.883 19.922-19.922 19.922m10.078-30.469c-2.789-2.765-6.258-2.531-9.492.703l-3.328 3.328c-3.305 3.282-3.586 6.774-.774 9.563c.774.797 1.64 1.312 2.274 1.43c.633-.446 1.383-1.266 1.71-2.016q-1.51-.246-2.32-1.055c-1.734-1.758-1.476-4.078.82-6.328l3.212-3.234c2.18-2.18 4.5-2.438 6.234-.703c1.758 1.734 1.547 4.054-.68 6.234l-2.32 2.297c.352.844.375 2.133.023 3.234l3.985-3.937c3.21-3.258 3.469-6.703.656-9.516m-21 21.047c2.79 2.766 6.258 2.531 9.492-.703l3.328-3.328c3.305-3.282 3.586-6.774.774-9.563c-.774-.797-1.64-1.312-2.274-1.43c-.633.446-1.383 1.266-1.71 2.016q1.51.246 2.32 1.055c1.734 1.758 1.476 4.055-.82 6.305l-3.211 3.257c-2.18 2.18-4.5 2.438-6.235.703c-1.758-1.734-1.547-4.054.68-6.234l2.32-2.297c-.352-.867-.375-2.133-.023-3.234l-3.985 3.937c-3.21 3.258-3.469 6.703-.656 9.516"></path></svg>
-      HyperLink
-    </a>
-  </div>
-  <div th:if="!${user}" class="nav-center"></div>
-  <div th:if="${user}" class="nav-center">
-    <a th:href="@{/templates}">Templates</a>
-    <a th:href="@{/profile}">Profile</a>
-    <a th:href="@{/dashboard}">Dashboard</a>
-  </div>
+<div class="nav">
 
-  <div th:if="!${user}" class="nav-right">
-    <a th:href="@{/login}">Sign In</a>
-    <a th:href="@{/register}" id="sign-up-btn">Sign Up</a>
-  </div>
-  <div th:if="${user}" class="nav-right">
-    <form th:action="@{/logout}" method="post" class="logout-form">
-      <button type="submit" id="logout-btn">Log Out</button>
-    </form>
-  </div>
-</nav>
+  <!-- LOGO -->
+  <a th:href="@{/}" id="link-garden">
+    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" viewBox="0 0 56 56" style="color: rgb(28, 32, 51);"><path fill="currentColor" d="M28 51.906c13.055 0 23.906-10.828 23.906-23.906c0-13.055-10.875-23.906-23.93-23.906C14.899 4.094 4.095 14.945 4.095 28c0 13.078 10.828 23.906 23.906 23.906m0-3.984C16.937 47.922 8.1 39.062 8.1 28c0-11.04 8.813-19.922 19.876-19.922c11.039 0 19.921 8.883 19.945 19.922c.023 11.063-8.883 19.922-19.922 19.922m10.078-30.469c-2.789-2.765-6.258-2.531-9.492.703l-3.328 3.328c-3.305 3.282-3.586 6.774-.774 9.563c.774.797 1.64 1.312 2.274 1.43c.633-.446 1.383-1.266 1.71-2.016q-1.51-.246-2.32-1.055c-1.734-1.758-1.476-4.078.82-6.328l3.212-3.234c2.18-2.18 4.5-2.438 6.234-.703c1.758 1.734 1.547 4.054-.68 6.234l-2.32 2.297c.352.844.375 2.133.023 3.234l3.985-3.937c3.21-3.258 3.469-6.703.656-9.516m-21 21.047c2.79 2.766 6.258 2.531 9.492-.703l3.328-3.328c3.305-3.282 3.586-6.774.774-9.563c-.774-.797-1.64-1.312-2.274-1.43c-.633.446-1.383 1.266-1.71 2.016q1.51.246 2.32 1.055c1.734 1.758 1.476 4.055-.82 6.305l-3.211 3.257c-2.18 2.18-4.5 2.438-6.235.703c-1.758-1.734-1.547-4.054.68-6.234l2.32-2.297c-.352-.867-.375-2.133-.023-3.234l-3.985 3.937c-3.21 3.258-3.469 6.703-.656 9.516"></path></svg>
+    <span>HyperLink</span>
+  </a>
+
+  <!-- TEMPLATES -->
+  <a th:href="@{/templates}" class="active">
+    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" viewBox="0 0 14 14" style="color: rgb(28, 32, 51);"><g fill="none" fill-rule="evenodd" clip-rule="evenodd"><path fill="#000" d="M3.295.286c-.49 0-.961.066-1.395.137C1.44.5 1.072.8.824 1.165a2.76 2.76 0 0 0-.443 1.338C.336 3.132.296 3.788.296 4.462s.04 1.33.085 1.958c.037.5.193.97.443 1.338c.248.366.615.666 1.076.742c.434.071.906.137 1.395.137c.49 0 .962-.066 1.396-.137c.46-.076.828-.376 1.076-.742a2.75 2.75 0 0 0 .442-1.338c.046-.629.086-1.285.086-1.958s-.04-1.33-.086-1.959a2.75 2.75 0 0 0-.442-1.338C5.519.799 5.152.499 4.69.423A8.6 8.6 0 0 0 3.295.286M10.7 13.714c.49 0 .964-.066 1.398-.137c.461-.075.829-.375 1.078-.74c.25-.37.407-.838.443-1.339c.046-.628.086-1.284.086-1.957s-.04-1.329-.086-1.957a2.74 2.74 0 0 0-.443-1.338c-.25-.366-.617-.666-1.078-.741a9 9 0 0 0-1.398-.137c-.49 0-.964.066-1.398.137c-.461.075-.829.375-1.078.74a2.75 2.75 0 0 0-.443 1.339a27 27 0 0 0-.086 1.957c0 .673.04 1.329.086 1.957c.036.5.192.97.443 1.338c.25.366.617.666 1.078.741a9 9 0 0 0 1.398.137"></path><path fill="#000" d="M12.046 3.895c-.431.025-.883.048-1.347.048s-.916-.023-1.347-.048a2.35 2.35 0 0 1-.95-.25c-.254-.134-.54-.372-.614-.737a4 4 0 0 1-.094-.794a4 4 0 0 1 .094-.793c.074-.366.36-.603.614-.738c.27-.144.603-.228.95-.249c.431-.025.883-.048 1.347-.048s.916.023 1.347.048c.346.02.68.105.95.249c.254.135.54.372.614.738c.047.234.094.506.094.793s-.047.56-.094.794c-.074.365-.36.603-.614.738c-.27.143-.604.228-.95.249M1.95 10.105c.43-.025.881-.048 1.344-.048s.914.023 1.345.048c.346.021.678.106.948.25c.254.135.54.372.613.737c.047.234.094.506.094.794c0 .287-.047.559-.094.793c-.074.365-.359.602-.613.738a2.3 2.3 0 0 1-.948.249c-.43.025-.882.048-1.345.048s-.914-.023-1.344-.048a2.3 2.3 0 0 1-.948-.25c-.255-.135-.54-.372-.613-.737a4 4 0 0 1-.094-.793c0-.288.047-.56.094-.794c.073-.365.358-.602.613-.738c.27-.143.602-.228.948-.248"></path></g></svg>
+    <span>Templates</span>
+  </a>
+
+  <!-- DASHBOARD -->
+  <a th:if="${user != null}" th:href="@{/dashboard}">
+    <svg viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="35" y="35" width="442" height="442" rx="20" stroke="black" stroke-width="24"/><circle cx="256" cy="180" r="70" stroke="black" stroke-width="20"/><path d="M160 330 C 160 260, 352 260, 352 330" stroke="black" stroke-width="20" stroke-linecap="round"/><rect x="85" y="350" width="342" height="45" stroke="black" stroke-width="20"/><rect x="85" y="425" width="130" height="45" stroke="black" stroke-width="20"/><rect x="297" y="425" width="130" height="45" stroke="black" stroke-width="20"/><line x1="450" y1="120" x2="450" y2="150" stroke="black" stroke-width="12" stroke-linecap="round"/><line x1="450" y1="175" x2="450" y2="280" stroke="black" stroke-width="12" stroke-linecap="round"/></svg>
+    <span>Dashboard</span>
+  </a>
+
+  <!-- PROFILE -->
+  <form th:if="${user != null}" th:action="@{/profile}" method="get">
+    <input type="hidden" name="userName" th:value="${user.username}">
+    <button type="submit">
+      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" viewBox="0 0 24 24" style="color: rgb(28, 32, 51);"><g fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"><path d="M16 9a4 4 0 1 1-8 0a4 4 0 0 1 8 0m-2 0a2 2 0 1 1-4 0a2 2 0 0 1 4 0"></path><path d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11s11-4.925 11-11S18.075 1 12 1M3 12c0 2.09.713 4.014 1.908 5.542A8.99 8.99 0 0 1 12.065 14a8.98 8.98 0 0 1 7.092 3.458A9 9 0 1 0 3 12m9 9a8.96 8.96 0 0 1-5.672-2.012A6.99 6.99 0 0 1 12.065 16a6.99 6.99 0 0 1 5.689 2.92A8.96 8.96 0 0 1 12 21"></path></g></svg>
+      <span>Profile Page</span>
+    </button>
+  </form>
+
+  <!-- LOGIN -->
+  <a th:if="${user == null}" th:href="@{/login}">
+    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" viewBox="0 0 24 24" style="color: rgb(28, 32, 51);"><g fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"><path d="M16 9a4 4 0 1 1-8 0a4 4 0 0 1 8 0m-2 0a2 2 0 1 1-4 0a2 2 0 0 1 4 0"></path><path d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11s11-4.925 11-11S18.075 1 12 1M3 12c0 2.09.713 4.014 1.908 5.542A8.99 8.99 0 0 1 12.065 14a8.98 8.98 0 0 1 7.092 3.458A9 9 0 1 0 3 12m9 9a8.96 8.96 0 0 1-5.672-2.012A6.99 6.99 0 0 1 12.065 16a6.99 6.99 0 0 1 5.689 2.92A8.96 8.96 0 0 1 12 21"></path></g></svg>
+    <span>Login</span>
+  </a>
+
+  <!-- REGISTER -->
+  <a th:if="${user == null}" th:href="@{/register}" id="sign-up-btn">
+    <span>Sign Up</span>
+  </a>
+
+  <!-- LOGOUT -->
+  <form th:if="${user != null}" th:action="@{/logout}" method="post">
+    <button type="submit" id="logout">
+      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" viewBox="0 0 48 48" style="color: red;"><g fill="none" stroke="red" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"><path d="M23.9917 6H6V42H24"></path><path d="M33 33L42 24L33 15"></path><path d="M16 23.9917H42"></path></g></svg>
+      <span>Logout</span>
+    </button>
+  </form>
+</div>
 
 <div class="intro">
   <h1 style="text-align: center; margin-top: 2rem;">See What You Can Create</h1>