diff --git a/frontend/src/components/App.svelte b/frontend/src/components/App.svelte
index c8fd8dc..8992b7e 100644
--- a/frontend/src/components/App.svelte
+++ b/frontend/src/components/App.svelte
@@ -1,5 +1,5 @@
 <script>
-    import Main from "./pages/main/Main.svelte";
+    import Main from "./Main.svelte";
 </script>
 
 <Main />
diff --git a/frontend/src/components/pages/main/ChannelTopBar.svelte b/frontend/src/components/ChannelTopBar.svelte
similarity index 100%
rename from frontend/src/components/pages/main/ChannelTopBar.svelte
rename to frontend/src/components/ChannelTopBar.svelte
diff --git a/frontend/src/components/pages/main/ChannelView.svelte b/frontend/src/components/ChannelView.svelte
similarity index 100%
rename from frontend/src/components/pages/main/ChannelView.svelte
rename to frontend/src/components/ChannelView.svelte
diff --git a/frontend/src/components/pages/main/Main.svelte b/frontend/src/components/Main.svelte
similarity index 85%
rename from frontend/src/components/pages/main/Main.svelte
rename to frontend/src/components/Main.svelte
index 0e810bf..309d564 100644
--- a/frontend/src/components/pages/main/Main.svelte
+++ b/frontend/src/components/Main.svelte
@@ -1,8 +1,8 @@
 <script>
     import { CloudIcon } from "svelte-feather-icons";
-    import { gatewayStatus, selectedChannel } from "../../../stores";
+    import { gatewayStatus, selectedChannel } from "../stores";
     import ChannelView from "./ChannelView.svelte";
-    import OverlayProvider from "./OverlayProvider.svelte";
+    import OverlayProvider from "./overlays/OverlayProvider.svelte";
     import Sidebar from "./Sidebar.svelte";
 </script>
 
diff --git a/frontend/src/components/pages/main/Message.svelte b/frontend/src/components/Message.svelte
similarity index 100%
rename from frontend/src/components/pages/main/Message.svelte
rename to frontend/src/components/Message.svelte
diff --git a/frontend/src/components/pages/main/MessageInput.svelte b/frontend/src/components/MessageInput.svelte
similarity index 91%
rename from frontend/src/components/pages/main/MessageInput.svelte
rename to frontend/src/components/MessageInput.svelte
index bad452f..2dfb09b 100644
--- a/frontend/src/components/pages/main/MessageInput.svelte
+++ b/frontend/src/components/MessageInput.svelte
@@ -1,7 +1,7 @@
 <script>
-    import request from "../../../request";
-    import { apiRoute } from "../../../storage";
-    import { messagesStoreProvider, userInfoStore } from "../../../stores";
+    import request from "../request";
+    import { apiRoute } from "../storage";
+    import { messagesStoreProvider, userInfoStore } from "../stores";
 
     export let channel;
     let messageInput = "";
diff --git a/frontend/src/components/pages/main/Messages.svelte b/frontend/src/components/Messages.svelte
similarity index 97%
rename from frontend/src/components/pages/main/Messages.svelte
rename to frontend/src/components/Messages.svelte
index fdd2efc..5cbfb48 100644
--- a/frontend/src/components/pages/main/Messages.svelte
+++ b/frontend/src/components/Messages.svelte
@@ -1,6 +1,6 @@
 <script>
     import { afterUpdate, beforeUpdate, onMount } from "svelte";
-    import { messagesStoreProvider } from "../../../stores.js";
+    import { messagesStoreProvider } from "../stores.js";
     import Message from "./Message.svelte";
 
     export let channelId;
diff --git a/frontend/src/components/pages/main/Sidebar.svelte b/frontend/src/components/Sidebar.svelte
similarity index 99%
rename from frontend/src/components/pages/main/Sidebar.svelte
rename to frontend/src/components/Sidebar.svelte
index 718b7b2..80ed9d1 100644
--- a/frontend/src/components/pages/main/Sidebar.svelte
+++ b/frontend/src/components/Sidebar.svelte
@@ -1,6 +1,6 @@
 <script>
     import { HashIcon, PlusIcon, MoreVerticalIcon } from "svelte-feather-icons";
-    import { channels, overlayStore, selectedChannel } from "../../../stores";
+    import { channels, overlayStore, selectedChannel } from "../stores";
     import UserTopBar from "./UserTopBar.svelte";
 </script>
 
diff --git a/frontend/src/components/pages/main/UserTopBar.svelte b/frontend/src/components/UserTopBar.svelte
similarity index 78%
rename from frontend/src/components/pages/main/UserTopBar.svelte
rename to frontend/src/components/UserTopBar.svelte
index 380c444..52881ca 100644
--- a/frontend/src/components/pages/main/UserTopBar.svelte
+++ b/frontend/src/components/UserTopBar.svelte
@@ -1,6 +1,6 @@
 <script>
     import { AtSignIcon } from "svelte-feather-icons";
-    import { userInfoStore } from "../../../stores";
+    import { userInfoStore } from "../stores";
 </script>
 
 <div class="top-bar">
diff --git a/frontend/src/components/modals/CreateChannel.svelte b/frontend/src/components/overlays/CreateChannel.svelte
similarity index 100%
rename from frontend/src/components/modals/CreateChannel.svelte
rename to frontend/src/components/overlays/CreateChannel.svelte
diff --git a/frontend/src/components/modals/EditChannel.svelte b/frontend/src/components/overlays/EditChannel.svelte
similarity index 100%
rename from frontend/src/components/modals/EditChannel.svelte
rename to frontend/src/components/overlays/EditChannel.svelte
diff --git a/frontend/src/components/pages/main/OverlayProvider.svelte b/frontend/src/components/overlays/OverlayProvider.svelte
similarity index 53%
rename from frontend/src/components/pages/main/OverlayProvider.svelte
rename to frontend/src/components/overlays/OverlayProvider.svelte
index 732ba7c..a08b5a6 100644
--- a/frontend/src/components/pages/main/OverlayProvider.svelte
+++ b/frontend/src/components/overlays/OverlayProvider.svelte
@@ -1,7 +1,7 @@
 <script>
-    import { overlayStore } from "../../../stores";
-    import EditChannel from "../../modals/EditChannel.svelte";
-    import CreateChannel from "../../modals/CreateChannel.svelte";
+    import { overlayStore } from "../../stores";
+    import EditChannel from "./EditChannel.svelte";
+    import CreateChannel from "./CreateChannel.svelte";
 </script>
 
 {#if $overlayStore.createChannel}