diff --git a/src/App.vue b/src/App.vue
index 6c0f399fe..dec28560a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -120,4 +120,30 @@ export default defineComponent({
 
 <style lang="scss">
 @import '@/styles/global.scss';
+</style>
+
+<style lang="scss" scoped>
+.offline {
+  background: url('@/assets/llama-nightscape.jpg') no-repeat center;
+  background-size: cover;
+  height: 100vh;
+
+  .offline-message {
+    text-align: center;
+    position: absolute;
+    width: 100vw;
+    bottom: 5vh;
+    color: $white;
+    padding: 0 1rem;
+
+    h1 {
+      font-weight: bold;
+      font-size: 1.5rem;
+      text-align: center;
+      color: $white;
+      font-weight: 700 !important;
+      font-size: 1.5rem;
+    }
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/styles/theme/_index.scss b/src/styles/theme/_index.scss
index 8f4f5b3df..43bacb892 100644
--- a/src/styles/theme/_index.scss
+++ b/src/styles/theme/_index.scss
@@ -8,6 +8,5 @@
 @import "loading";
 @import "navigation";
 @import "notification";
-@import "offline";
 @import "update-notification";
 @import "background";
\ No newline at end of file
diff --git a/src/styles/theme/offline.scss b/src/styles/theme/offline.scss
deleted file mode 100644
index 037e3db0a..000000000
--- a/src/styles/theme/offline.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-.offline {
-  background: url('@/assets/llama-nightscape.jpg') no-repeat center;
-  background-size: cover;
-  height: 100vh;
-
-  .offline-message {
-    text-align: center;
-    position: absolute;
-    width: 100vw;
-    bottom: 5vh;
-    color: $white;
-    padding: 0 1rem;
-
-    h1 {
-      font-weight: bold;
-      font-size: 1.5rem;
-      text-align: center;
-      color: $white;
-      font-weight: 700 !important;
-      font-size: 1.5rem;
-    }
-  }
-}