diff --git a/packages/nuxt-typo3-theme/.storybook/preview-head.html b/packages/nuxt-typo3-theme/.storybook/preview-head.html
index 05c268d..7873f0c 100644
--- a/packages/nuxt-typo3-theme/.storybook/preview-head.html
+++ b/packages/nuxt-typo3-theme/.storybook/preview-head.html
@@ -1,2 +1,2 @@
 <!-- .storybook/preview-head.html -->
-<link href="https://fonts.googleapis.com/css2?family=Jost&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Rubik&display=swap" rel="stylesheet">
diff --git a/packages/nuxt-typo3-theme/src/components/CwFooter/CwFooter.vue b/packages/nuxt-typo3-theme/src/components/CwFooter/CwFooter.vue
index 06ebb5e..802856f 100644
--- a/packages/nuxt-typo3-theme/src/components/CwFooter/CwFooter.vue
+++ b/packages/nuxt-typo3-theme/src/components/CwFooter/CwFooter.vue
@@ -2,10 +2,10 @@
   <footer class="cw-footer">
     <UiContainer class="cw-footer__container">
       <UiRow>
-        <UiCol col="lg">
-          <UiLogo :width="250" invert />
+        <UiCol col="sm">
+          <UiLogo />
         </UiCol>
-        <UiCol v-if="footerNavigation" col="lg">
+        <UiCol v-if="footerNavigation" col="8">
           <UiLinksList :links="footerNavigation" />
         </UiCol>
         <UiCol v-if="footerContactData" col="lg">
@@ -50,7 +50,7 @@ export default CwFooterTheme as typeof CwFooterTheme
 
 .cw-footer {
   padding: var(--space-6) 0;
-  background: var(--color-bg-primary);
+  background: var(--color-bg-secondary);
 
   &__text {
     .t3-ce-header {
@@ -60,10 +60,6 @@ export default CwFooterTheme as typeof CwFooterTheme
     }
   }
 
-  @include media-query(lg) {
-    background: var(--color-bg-secondary);
-  }
-
   .col {
     margin-top: var(--space-2);
   }
diff --git a/packages/nuxt-typo3-theme/src/components/UiGrid/UiCol/UiCol.vue b/packages/nuxt-typo3-theme/src/components/UiGrid/UiCol/UiCol.vue
index 05ecd87..dd51e54 100644
--- a/packages/nuxt-typo3-theme/src/components/UiGrid/UiCol/UiCol.vue
+++ b/packages/nuxt-typo3-theme/src/components/UiGrid/UiCol/UiCol.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="col-12" :class="[colClasses]">
+  <div :class="[colClasses]">
     <slot />
     <UiOffset v-if="offset" />
     <UiOrder v-if="order" />
diff --git a/packages/nuxt-typo3-theme/src/components/UiLogo/UiLogo.vue b/packages/nuxt-typo3-theme/src/components/UiLogo/UiLogo.vue
index 2fc3482..b2d5914 100644
--- a/packages/nuxt-typo3-theme/src/components/UiLogo/UiLogo.vue
+++ b/packages/nuxt-typo3-theme/src/components/UiLogo/UiLogo.vue
@@ -1,11 +1,11 @@
 <template>
   <T3NavLink class="ui-logo" to="/">
     <img
-      :style="{ filter: invert ? 'invert(1)' : 'none' }"
-      :width="width"
+      :style="{ filter: invert ? 'invert(1)' : 'none', width: `${width}px` }"
       :src="src"
-      :alt="alt"/>
-    </T3NavLink>
+      :alt="alt"
+    />
+  </T3NavLink>
 </template>
 <script lang="ts">
 import { defineComponent } from '@vue/composition-api'
diff --git a/packages/nuxt-typo3-theme/src/components/UiNavbar/UiNavbar.vue b/packages/nuxt-typo3-theme/src/components/UiNavbar/UiNavbar.vue
index c05983b..c897068 100644
--- a/packages/nuxt-typo3-theme/src/components/UiNavbar/UiNavbar.vue
+++ b/packages/nuxt-typo3-theme/src/components/UiNavbar/UiNavbar.vue
@@ -129,7 +129,6 @@ export default defineComponent({
   z-index: $z-index-over;
   width: 100%;
   background: var(--ui-navbar-bg);
-  border-bottom: 1px solid transparent;
   box-shadow: var(--box-shadow-base);
 
   @include media-query($ui-navbar-break-on) {
@@ -149,7 +148,7 @@ export default defineComponent({
   }
 
   &__logo {
-    flex: 1;
+    flex: 0 1 200px;
   }
 
   &__nav {
diff --git a/packages/nuxt-typo3-theme/src/components/UiNavigation/UiNavigationList/UiNavigationList.vue b/packages/nuxt-typo3-theme/src/components/UiNavigation/UiNavigationList/UiNavigationList.vue
index 5494e27..019e564 100644
--- a/packages/nuxt-typo3-theme/src/components/UiNavigation/UiNavigationList/UiNavigationList.vue
+++ b/packages/nuxt-typo3-theme/src/components/UiNavigation/UiNavigationList/UiNavigationList.vue
@@ -116,7 +116,7 @@ export default defineComponent({
       flex-direction: column;
       min-width: 100%;
       white-space: nowrap;
-      background: white;
+      background: var(--ui-navbar-bg);
       border: 1px solid var(--color-border);
       border-top: 0;
 
diff --git a/packages/nuxt-typo3-theme/src/nuxt/module.ts b/packages/nuxt-typo3-theme/src/nuxt/module.ts
index 342094d..8a563c6 100644
--- a/packages/nuxt-typo3-theme/src/nuxt/module.ts
+++ b/packages/nuxt-typo3-theme/src/nuxt/module.ts
@@ -30,7 +30,7 @@ const NuxtTypo3Theme: Module = async function (options: TYPO3ThemeOptions) {
       '@nuxtjs/google-fonts',
       this.nuxt.options.googleFonts || {
         families: {
-          'Open Sans': {
+          Rubik: {
             wght: [300, 400, 500, 700]
           }
         }
diff --git a/packages/nuxt-typo3-theme/src/styles/shared/_variables.scss b/packages/nuxt-typo3-theme/src/styles/shared/_variables.scss
index 53e6a63..7d6118a 100644
--- a/packages/nuxt-typo3-theme/src/styles/shared/_variables.scss
+++ b/packages/nuxt-typo3-theme/src/styles/shared/_variables.scss
@@ -2,7 +2,7 @@
 // ==========
 // Setup family fallback when primary is not available yet
 $font-family-fallback: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif' !default;
-$font-family-primary: "Open Sans", #{$font-family-fallback} !default;
+$font-family-primary: "Rubik", #{$font-family-fallback} !default;
 
 // Main copy font-size - body tag and all inherited elements
 $font-size-2xs: 0.75rem !default;