diff --git a/frontend/index.html b/frontend/index.html
index 805ae6f..26805cf 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -4,7 +4,7 @@
 <head>
     <meta charset="UTF-8">
     <link rel="icon" href="/favicon.ico">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
     <title>Hutopy</title>
 </head>
 
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 6ae0f04..98cf3e8 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -21,22 +21,26 @@ import SideBar from "@/views/main/SideBar.vue";
 
 <style scoped>
 .shell-container {
-  @apply flex;
+  @apply flex flex-col lg:flex-row;
   @apply font-sans;
   @apply bg-hBackground text-hOnBackground;
-  @apply flex-col lg:flex-row;
+  @apply h-screen;
+  @apply bg-red-300;
 }
 
 .shell-side {
   @apply border border-[#3d3d3d];
-  @apply lg:min-h-screen;
+  @apply lg:h-screen;
   @apply lg:fixed;
   @apply border-b lg:border-b-0 lg:border-r;
+  @apply flex-shrink-0;
 }
 
 .shell-view {
+  @apply flex-grow;
   @apply flex justify-center items-center;
   @apply w-full;
   @apply lg:ml-64;
+  @apply bg-red-500;
 }
 </style>
diff --git a/frontend/src/views/LoginView.vue b/frontend/src/views/LoginView.vue
index 8e6243c..e1dcc49 100644
--- a/frontend/src/views/LoginView.vue
+++ b/frontend/src/views/LoginView.vue
@@ -23,8 +23,9 @@ async function googleCallback(token) {
 
 <template>
 
-  <div class="flex min-h-screen justify-center items-center p-10 w-full">
-    <div class="card justify-items-center ">
+  <div class="flex min-h-full justify-center items-center p-10 w-full">
+
+    <div class="card justify-items-center">
 
       <img alt="hutopy login"
            src="/images/hutopy-logo.png"/>
