diff --git a/src/components/footer.vue b/src/components/footer.vue
index 620c6cd..5265329 100644
--- a/src/components/footer.vue
+++ b/src/components/footer.vue
@@ -11,10 +11,20 @@
 export default {}
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .footer {
   width: 100%;
   height: 64px;
   border-top: 1px solid var(--color-plain-2);
 }
+@media screen and (max-width: 1024px) {
+  .footer {
+    .wrapper {
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+    }
+  }
+}
 </style>
diff --git a/src/components/topbar.vue b/src/components/topbar.vue
index 2f2d3bd..4d08fde 100644
--- a/src/components/topbar.vue
+++ b/src/components/topbar.vue
@@ -53,4 +53,14 @@ export default {
     }
   }
 }
+
+@media screen and (max-width: 1024px) {
+  .topbar {
+    padding: 0 16px;
+  }
+
+  .wrapper {
+    width: 100%;
+  }
+}
 </style>
diff --git a/src/views/home.vue b/src/views/home.vue
index fb8dbcb..ee974f0 100644
--- a/src/views/home.vue
+++ b/src/views/home.vue
@@ -670,7 +670,6 @@ export default {
 }
 
 @media screen and (max-width: 1024px) {
-  .topbar,
   .main {
     padding: 0 16px;
   }
@@ -678,13 +677,5 @@ export default {
   .wrapper {
     width: 100%;
   }
-
-  .footer {
-    .wrapper {
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-    }
-  }
 }
 </style>