diff --git a/src/App.vue b/src/App.vue
index ec2a28a..c98adc3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -8,29 +8,32 @@ import Footer from '@/components/Footer/Footer.vue'
     <n-message-provider>
       <n-dialog-provider>
         <n-notification-provider>
-          <NavBar />
+          <div class="app-layout">
+            <NavBar />
+            <div class="main-content">
+              <n-grid
+                responsive="screen"
+                item-responsive
+                cols="24"
+                :x-gap="16"
+                :y-gap="16"
+                class="shift"
+              >
+                <n-gi span="xs:1 s:1 m:2 l:2 xl:3 xxl:3" />
 
-          <n-grid
-            responsive="screen"
-            item-responsive
-            cols="24"
-            :x-gap="16"
-            :y-gap="16"
-            class="shift"
-          >
-            <n-gi span="xs:1 s:1 m:2 l:2 xl:3 xxl:3" />
+                <n-gi span="xs:22 s:22 m:20 l:20 xl:18 xxl:18">
+                  <router-view />
+                </n-gi>
 
-            <n-gi span="xs:22 s:22 m:20 l:20 xl:18 xxl:18">
-              <router-view />
-            </n-gi>
-
-            <n-gi span="xs:1 s:1 m:2 l:2 xl:3 xxl:3" />
-          </n-grid>
+                <n-gi span="xs:1 s:1 m:2 l:2 xl:3 xxl:3" />
+              </n-grid>
+            </div>
+            <Footer />
+          </div>
         </n-notification-provider>
       </n-dialog-provider>
     </n-message-provider>
   </n-config-provider>
-  <Footer />
 </template>
 
 <style scoped>
diff --git a/src/components/Footer/Footer.vue b/src/components/Footer/Footer.vue
index 9fdc12e..480b6c3 100644
--- a/src/components/Footer/Footer.vue
+++ b/src/components/Footer/Footer.vue
@@ -1,5 +1,4 @@
 <script setup>
-
 </script>
 
 <template>
diff --git a/src/styles/styles.css b/src/styles/styles.css
index 5c4660b..72e6629 100644
--- a/src/styles/styles.css
+++ b/src/styles/styles.css
@@ -120,3 +120,20 @@
 .link-like-text {
   cursor: pointer;
 }
+
+html,
+body,
+#app {
+  height: 100%;
+  margin: 0;
+}
+
+.app-layout {
+  display: flex;
+  flex-direction: column;
+  min-height: 100dvh;
+}
+
+.main-content {
+  flex: 1;
+}