diff --git a/assets/images/logotype-dark-blue.png b/assets/images/logotype-dark-blue.png
new file mode 100644
index 0000000..6a42303
Binary files /dev/null and b/assets/images/logotype-dark-blue.png differ
diff --git a/assets/images/slowtwitch-ball-dark-blue.png b/assets/images/slowtwitch-ball-dark-blue.png
new file mode 100644
index 0000000..453d6c2
Binary files /dev/null and b/assets/images/slowtwitch-ball-dark-blue.png differ
diff --git a/functions.php b/functions.php
index 7bea5d2..d917745 100644
--- a/functions.php
+++ b/functions.php
@@ -8,3 +8,8 @@ function twitchfront_enqueue_styles() {
 		get_stylesheet_uri()
 	);
 }
+
+
+function storefront_site_branding() {
+	echo '<a href="' . get_site_url( ) . '"><img class="st-masthead-logo" src="/wp-content/themes/twitchfront/assets/images/logotype-dark-blue.png" alt="Slowtwitch Logo" /></a>';
+}
\ No newline at end of file
diff --git a/style.css b/style.css
index 7d2493e..0776eb2 100644
--- a/style.css
+++ b/style.css
@@ -8,4 +8,32 @@
     width: 250px !important;
     object-fit: cover;
     aspect-ratio: 1 / 1;
- }
\ No newline at end of file
+ }
+
+ .st-masthead-logo {
+   margin-bottom: 2em;
+ }
+
+ @media (max-width: 768px) {
+   #masthead {
+      display: grid;
+      grid-template-columns: 1em minmax(250px, 600px) minmax(130px, 400px) 1em;
+      align-items: center;
+      justify-content: end;
+    }
+   
+    .st-masthead-logo {
+      grid-column: 2 / span 1;
+      margin-bottom: 0;
+      width: 100%;
+    }
+
+    .storefront-primary-navigation .col-full {
+      margin-right: 0;
+    }
+
+    .handheld-navigation {
+      text-align: right;
+    }
+ }
+