diff --git a/app/assets/stylesheets/base/main.scss b/app/assets/stylesheets/base/main.scss
index 592f89a91..344131e90 100644
--- a/app/assets/stylesheets/base/main.scss
+++ b/app/assets/stylesheets/base/main.scss
@@ -69,15 +69,28 @@ a {
 
   display: inline-flex;
   flex-shrink: 0;
-  align-self: stretch;
+  align-self: center;
   align-items: center;
   vertical-align: middle;
   color: var(--base-100);
   text-decoration: none;
-  letter-spacing: -0.01em;
-  line-height: var(--lh-tight);
+  letter-spacing: -0.02em;
+  line-height: 1;
+  outline: 0;
   overflow-wrap: anywhere;
 
+  &__img,
+  svg {
+    max-width: 100%;
+    max-height: calc(
+      var(--header-height) - var(--su-2) * 2
+    ); // making calculations instead of setting fixed value so should be smooth change if we ever decide to change header's height.
+    object-fit: contain;
+    vertical-align: middle;
+    display: inline-block;
+    outline: 0;
+  }
+
   @media (min-width: $breakpoint-s) {
     --max-width: 150px;
   }
@@ -95,14 +108,24 @@ a {
 
   &:hover {
     color: var(--base-80);
-    text-decoration: none;
+    text-decoration: underline;
   }
 
-  svg {
-    max-width: 100%;
-    width: auto;
-    height: calc(var(--header-height) - var(--su-2) * 2);
-    vertical-align: middle;
-    display: inline-block;
+  // Both focus declarations below are the same but we unfortunately can't
+  // combine them because Safari doesn't recognize it properly.
+  //  • First declaration is for all browsers that support :focus-visible
+  //    which is basically almost all of them
+  //  • Second declaration is for browsers that do not support :focus-visible
+  //    which basically is only Safari right now.
+  &:focus-visible {
+    z-index: var(--z-elevate);
+    box-shadow: var(--focus-ring);
+    text-decoration: underline;
+  }
+
+  .js-focus-visible &.focus-visible:focus {
+    z-index: var(--z-elevate);
+    box-shadow: var(--focus-ring);
+    text-decoration: underline;
   }
 }
diff --git a/app/views/layouts/_logo.html.erb b/app/views/layouts/_logo.html.erb
index 25860f482..be2cf8ff5 100644
--- a/app/views/layouts/_logo.html.erb
+++ b/app/views/layouts/_logo.html.erb
@@ -1,8 +1,8 @@
-<a href="/" class="<%= "site-logo" unless FeatureFlag.enabled?(:creator_onboarding) %>" aria-label="<%= t("views.main.aria_home") %>">
-  <% if Settings::General.logo_svg.present? %>
+<a href="<%= root_path %>" class="site-logo" aria-label="<%= t("views.main.aria_home", community: community_name) %>">
+  <% if FeatureFlag.enabled?(:creator_onboarding) %>
+    <img class="site-logo__img" src="<%= Settings::General.resized_logo %>" alt="<%= community_name %>">
+  <% elsif Settings::General.logo_svg.present? %>
     <%= logo_svg %>
-  <% elsif FeatureFlag.enabled?(:creator_onboarding) %>
-      <img class="site-logo" src="<%= Settings::General.resized_logo %>" alt="<%= community_name %>">
   <% else %>
     <span class="truncate-at-2">
       <%= community_name %>