diff --git a/static/main/css/colors.css b/static/main/css/colors.css
index 5d10809..44e061f 100644
--- a/static/main/css/colors.css
+++ b/static/main/css/colors.css
@@ -59,6 +59,6 @@
 
     --color-text-link: var(--color-accent-fg);
 
-    font-size: 16px;
     font-family: "Roboto", arial, sans-serif;
+    font-size: 16px;
 }
diff --git a/static/main/css/index.css b/static/main/css/index.css
index f3a9598..9b72fc0 100644
--- a/static/main/css/index.css
+++ b/static/main/css/index.css
@@ -21,7 +21,7 @@
     top: 30%;
 }
 img {
-    width: 40%;
+    width: clamp(20rem, 50%, 70rem);
 }
 
 .text {
@@ -34,7 +34,6 @@ img {
     display: flex;
     justify-content: center;
     text-align: center;
-    width: 20%;
     margin: 3rem auto 0 auto;
 }
 
@@ -45,11 +44,12 @@ img {
 .social-link > i {
     display: grid;
     place-items: center;
-    color: var(--color-fg-default);
-    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='100' ry='100' stroke='%23EEF5FCFF' stroke-width='4' stroke-dasharray='24' stroke-dashoffset='8' stroke-linecap='square'/%3e%3c/svg%3e");
-    border-radius: 100px;
-    margin: auto 0.5rem 1rem 0.5rem;
     font-size: 2rem;
+    color: var(--color-fg-default);
+    /* background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='100' ry='100' stroke='%23EEF5FCFF' stroke-width='4' stroke-dasharray='24' stroke-dashoffset='8' stroke-linecap='square'/%3e%3c/svg%3e"); */
+    border: 0.1rem solid var(--color-fg-default);
+    border-radius: 100%;
+    margin: 0 0.5rem 1rem 0.5rem;
     width: 3rem;
     aspect-ratio: 1;
 }
@@ -63,16 +63,19 @@ img {
     border: 2px solid var(--color-mail);
     background-image: none;
 }
+
 .telegram:hover > i {
     color: var(--color-telegram);
     border: 2px solid var(--color-telegram);
     background-image: none;
 }
+
 .linkedin:hover > i {
     color: var(--color-linkedin);
     border: 2px solid var(--color-linkedin);
     background-image: none;
 }
+
 .github:hover > i {
     color: var(--color-github);
     border: 2px solid var(--color-github);
diff --git a/static/main/css/layout.css b/static/main/css/layout.css
index 5e4ef53..ee7119c 100644
--- a/static/main/css/layout.css
+++ b/static/main/css/layout.css
@@ -29,7 +29,7 @@ body {
 .logo {
     margin: 1rem;
     padding: 1rem;
-    width: 3rem;
+    max-width: 2.5rem;
     aspect-ratio: 1;
 }
 
@@ -51,10 +51,11 @@ body {
 
 .primary-navigation a {
     color: var(--color-fg-default);
+    font-size: 2rem;
     text-decoration: none;
 }
 .primary-navigation a:hover {
-    color: var(--color-fg-muted);
+    color: var(--color-text-hover);
 }
 
 .primary-navigation a > [aria-hidden="true"] {
@@ -68,7 +69,7 @@ body {
 
         position: fixed;
         z-index: 1000;
-        inset: 0 0 0 20%;
+        inset: 0 0 0 40%;
 
         flex-direction: column;
         padding: min(30vh, 10rem) 2rem;
@@ -89,7 +90,7 @@ body {
 @media (min-width: 35em) {
     .primary-navigation {
         --gap: clamp(1.5rem, 5vw, 3rem);
-        padding-block: 16px;
+        padding-block: 1rem;
         padding-inline: clamp(3rem, 8vw, 10rem);
         background-color: var(--color-header-bg-default);
     }
diff --git a/static/main/css/navigation_button.css b/static/main/css/navigation_button.css
index 1a8cd4d..fda6bd0 100644
--- a/static/main/css/navigation_button.css
+++ b/static/main/css/navigation_button.css
@@ -25,7 +25,7 @@
 .mobile-nav-toggle__line {
     width: var(--line-width);
     height: var(--line-height);
-    background: var(--color-fg-default);
+    background-color: var(--color-fg-default);
     border-radius: var(--line-border-radius);
     transition: all 0.5s ease-in-out;
 }
@@ -36,10 +36,17 @@
     position: absolute;
     width: var(--line-width);
     height: var(--line-height);
-    background: var(--color-fg-default);
+    background-color: var(--color-fg-default);
     border-radius: var(--line-border-radius);
     transition: all 0.5s ease-in-out;
 }
+
+.mobile-nav-toggle:hover > *,
+.mobile-nav-toggle:hover > *::before,
+.mobile-nav-toggle:hover > ::after {
+    background-color: var(--color-text-hover);
+}
+
 .mobile-nav-toggle__line::before {
     transform: translateY(-16px);
 }
diff --git a/templates/layout.html b/templates/layout.html
index 4202bab..4e625a6 100644
--- a/templates/layout.html
+++ b/templates/layout.html
@@ -4,6 +4,7 @@
     <head>
         <meta charset="UTF-8">
         <meta name="color-scheme" content="dark light">
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
         <link rel="icon" href="{% static 'main/img/icons/logo.svg' %}" />
         <link rel="preconnect" href="https://fonts.googleapis.com">
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>