diff --git a/frontend/public/global.css b/frontend/public/global.css
index 52d8da5..f405db5 100644
--- a/frontend/public/global.css
+++ b/frontend/public/global.css
@@ -1,4 +1,10 @@
 body {
 	padding: 0;
 	margin: 0;
-}
\ No newline at end of file
+}
+
+*,
+::before,
+::after {
+	box-sizing: border-box;
+}
diff --git a/frontend/src/components/App.svelte b/frontend/src/components/App.svelte
index 36f177f..aa7eea5 100644
--- a/frontend/src/components/App.svelte
+++ b/frontend/src/components/App.svelte
@@ -1,5 +1,6 @@
 <script>
-	let count = 0;
+import ChannelView from "./Main.svelte";
+
 </script>
 
-<button on:click="{() => { count++ }}">{ count }</button>
\ No newline at end of file
+<ChannelView />
diff --git a/frontend/src/components/ChannelView.svelte b/frontend/src/components/ChannelView.svelte
new file mode 100644
index 0000000..f2e9f76
--- /dev/null
+++ b/frontend/src/components/ChannelView.svelte
@@ -0,0 +1,40 @@
+<style>
+    .main-container {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        height: 100%;
+    }
+
+    .top-bar {
+        height: 3.4rem;
+        width: 100%;
+        padding: 6px;
+        background-color: papayawhip;
+    }
+
+    .messages-container {
+        height: 100%;
+        width: 100%;
+        background-color: mediumseagreen;
+    }
+
+    .message-input-container {
+        height: 3.4rem;
+        width: 100%;
+        padding: 6px;
+        background-color: antiquewhite;
+    }
+</style>
+
+<div class="main-container">
+    <div class="top-bar">
+
+    </div>
+    <div class="messages-container">
+
+    </div>
+    <div class="message-input-container">
+
+    </div>
+</div>
diff --git a/frontend/src/components/Main.svelte b/frontend/src/components/Main.svelte
new file mode 100644
index 0000000..23db29a
--- /dev/null
+++ b/frontend/src/components/Main.svelte
@@ -0,0 +1,19 @@
+<script>
+import ChannelView from "./ChannelView.svelte";
+import Sidebar from "./Sidebar.svelte";
+
+</script>
+<style>
+    .flex-container {
+        width: 100vw;
+        height: 100vh;
+        display: flex;
+        flex-direction: row;
+    }    
+</style>
+
+
+<div class="flex-container">
+    <Sidebar />
+    <ChannelView />
+</div>
diff --git a/frontend/src/components/Sidebar.svelte b/frontend/src/components/Sidebar.svelte
new file mode 100644
index 0000000..2e2afc1
--- /dev/null
+++ b/frontend/src/components/Sidebar.svelte
@@ -0,0 +1,12 @@
+<style>
+    .sidebar {
+        height: 100%;
+        width: 255px;
+        background-color: black;
+    }
+</style>
+
+
+<div class="sidebar">
+
+</div>