diff --git a/assets/scss/layout.scss b/assets/scss/layout.scss
index d1083f3..62eacbe 100644
--- a/assets/scss/layout.scss
+++ b/assets/scss/layout.scss
@@ -1,7 +1,13 @@
 body {
+    @include font-size(2rem);
+
     min-height: 100vh;
     background-color: unset;
 
+    @include media-breakpoint-up(xxl) {
+        @include font-size(4rem);
+    }
+
     .app-component {
         display: flex;
         height: 100vh;
diff --git a/components/layout/AppHeader.vue b/components/layout/AppHeader.vue
index d3be501..f95d29a 100644
--- a/components/layout/AppHeader.vue
+++ b/components/layout/AppHeader.vue
@@ -1,7 +1,7 @@
 
 <template>
   <nav id="top-navbar" class="navbar navbar-expand-lg bg-body-tertiary shadow-sm">
-    <div class="container align-items-start">
+    <div class="container-fluid align-items-start">
       <div class="navbar-brand mx-auto">
         <NuxtLink
           to="/"
@@ -71,11 +71,16 @@ export default defineComponent({
 @import "flag-icons/sass/flag-icons.scss";
 </style>
 
-<style lang="scss">
+<style lang="scss" scoped>
+@import "bootstrap/scss/vendor/rfs";
 #top-navbar {
   .main-logo {
-    max-height: 20rem;
+    @include rfs(30rem, max-height);
     height: 20vh;
   }
+  .fi {
+    @include rfs(8rem, line-height);
+    @include rfs(10rem, width);
+  }
 }
 </style>