diff --git a/index.html b/index.html
index 99f583a..169b88b 100644
--- a/index.html
+++ b/index.html
@@ -6,6 +6,14 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Vite App</title>
   </head>
+  <style type="text/css">
+      #app
+      {
+          display: flex;
+          flex-direction: column;
+          min-height: 100vh;
+      }
+  </style>
   <body>
     <div id="app"></div>
     <script type="module" src="/src/main.js"></script>
diff --git a/src/App.vue b/src/App.vue
index 738910b..db8c8cb 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,6 @@
 <script setup>
-// import HelloWorld from './components/HelloWorld.vue'
-// import TheWelcome from './components/TheWelcome.vue'
 import Footer from './components/Footer.vue'
+import Toolbar from './components/Toolbar.vue'
 </script>
 
 <template>
@@ -19,10 +18,15 @@ import Footer from './components/Footer.vue'
 @import "node_modules/bootstrap/scss/_mixins.scss";
 
 #contentPane{
-
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
 }
 #content{
   position: relative;
+  flex:1;
+  width: 100%;
+  min-height: 100%;
 }
 
 @include media-breakpoint-between(xs, sm) {
diff --git a/src/components/Toolbar.vue b/src/components/Toolbar.vue
index 00a1ad1..020544a 100644
--- a/src/components/Toolbar.vue
+++ b/src/components/Toolbar.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="topbar">
     <img
-        class="toplogo"
+        id="toplogo"
         referrerpolicy="no-referrer"
         src="/toplogo.png"
     />
