src/Vinlottis.vue

@@ -2,6 +2,7 @@
   <div class="app-container">
     <banner :routes="routes"/>
     <router-view />
+    <WineFooter />
     <UpdateToast
       v-if="showToast"
       :text="toastText"
@@ -14,11 +15,12 @@
 <script>
 import ServiceWorkerMixin from "@/mixins/ServiceWorkerMixin";
 import banner from "@/ui/Banner";
+import WineFooter from "@/ui/WineFooter";
 import UpdateToast from "@/ui/UpdateToast";
 
 export default {
   name: "vinlottis",
-  components: { banner, UpdateToast },
+  components: { banner, UpdateToast, WineFooter },
   props: {},
   data() {
     return {

src/ui/Highscore.vue

@@ -61,7 +61,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../styles/media-queries.scss";
 @import "../styles/variables.scss";
 .heading {
   display: flex;
@@ -93,29 +92,29 @@ ol {
   gap: 5%;
 
   .single-winner {
+    box-sizing: border-box;
     width: 100%;
     background: $primary;
     display: grid;
-    grid-template: 1fr .3fr / 1fr 1fr 1fr;
+    grid-template-columns: 1fr 1fr 1fr;
     align-items: center;
+    padding: 1em; 
 
     i {
       font-size: 3em;
+      width: max-content;
+      justify-self: end;
     }
 
     .placement {
       grid-row: 1;
       grid-column: 1 / 3;
       font-size: 3em;
-      margin-left: 5px;
-      padding: .2em 0 0 5px;
     }
 
     .winner-name {
       grid-row: 2;
       grid-column: 1 / -1;
-      margin-left: 5px;
-      padding-left: 5px;
     }
 
 

src/ui/WineFooter.vue

@@ -0,0 +1,32 @@
+<template>
+  <footer>
+    <router-link to="/" class="company-logo">
+      <img src="/public/assets/images/knowit.svg" alt="knowit logo">
+    </router-link>
+  </footer>
+</template>
+
+<script>
+export default {
+  name: 'WineFooter'
+}
+</script>
+
+<style lang="scss" scoped>
+
+footer {
+  width: 100%;
+  height: 100px;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  background: #f4f4f4;
+  .company-logo{
+    padding: 0 5em 0 0;
+    img{
+      width: 100px;
+    }
+  }
+}
+
+</style>