diff --git a/src/app.rs b/src/app.rs
index 8d1c582..85b00cc 100644
--- a/src/app.rs
+++ b/src/app.rs
@@ -6,6 +6,8 @@ use leptos_meta::*;
 use leptos_router::*;
 use crate::pages::login::*;
 use crate::pages::signup::*;
+use crate::components::sidebar::*;
+use crate::components::dashboard::*;
 
 #[component]
 pub fn App() -> impl IntoView {
@@ -41,8 +43,12 @@ fn HomePage() -> impl IntoView {
     let play_status = create_rw_signal(play_status);
 
     view! {
-        <PlayBar status=play_status/>
-        <Queue status=play_status/>
+        <div class="home-container">
+            <Sidebar />
+            <Dashboard />
+            <PlayBar status=play_status/>
+            <Queue status=play_status/>
+        </div>
     }
 }
 
diff --git a/src/components.rs b/src/components.rs
new file mode 100644
index 0000000..bffdc50
--- /dev/null
+++ b/src/components.rs
@@ -0,0 +1,2 @@
+pub mod sidebar;
+pub mod dashboard;
\ No newline at end of file
diff --git a/src/components/dashboard.rs b/src/components/dashboard.rs
new file mode 100644
index 0000000..a6b871d
--- /dev/null
+++ b/src/components/dashboard.rs
@@ -0,0 +1,10 @@
+use leptos::*;
+
+#[component]
+pub fn Dashboard() -> impl IntoView {
+    view! {
+        <div class="dashboard-container">
+            <h1>Dashboard</h1>
+        </div>
+    }
+}
\ No newline at end of file
diff --git a/src/components/sidebar.rs b/src/components/sidebar.rs
new file mode 100644
index 0000000..5f4ace8
--- /dev/null
+++ b/src/components/sidebar.rs
@@ -0,0 +1,22 @@
+use leptos::*;
+
+#[component]
+pub fn Sidebar() -> impl IntoView {
+    view! {
+        <div class="sidebar-container">
+            <Top />
+            <div class="sidebar-header">
+                <h1>LibreTunes</h1>
+            </div>
+            
+        </div>
+    }
+}
+#[component]
+pub fn Top() -> impl IntoView {
+    view! {
+        <div class="sidebar-top-container">
+            <h1>Hello</h1>
+        </div>
+    }
+}
diff --git a/src/lib.rs b/src/lib.rs
index 95ab806..0a3d657 100644
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -8,6 +8,7 @@ pub mod queue;
 pub mod song;
 pub mod models;
 pub mod pages;
+pub mod components;
 pub mod users;
 pub mod search;
 use cfg_if::cfg_if;
diff --git a/style/dashboard.scss b/style/dashboard.scss
new file mode 100644
index 0000000..7eb53c9
--- /dev/null
+++ b/style/dashboard.scss
@@ -0,0 +1,7 @@
+@import 'theme.scss';
+
+.dashboard-container {
+    width: 73%;
+    background: green;
+    height: 100vh;
+}
\ No newline at end of file
diff --git a/style/home.scss b/style/home.scss
new file mode 100644
index 0000000..76536f0
--- /dev/null
+++ b/style/home.scss
@@ -0,0 +1,9 @@
+@import "theme.scss";
+
+.home-container {
+  margin-top: 0;
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  flex-direction: row;
+}
diff --git a/style/main.scss b/style/main.scss
index 6706ef1..557dd84 100644
--- a/style/main.scss
+++ b/style/main.scss
@@ -1,13 +1,16 @@
-@import 'playbar.scss';
-@import 'theme.scss';
-@import 'queue.scss';
-@import 'login.scss';
-@import 'signup.scss';
+@import "playbar.scss";
+@import "theme.scss";
+@import "queue.scss";
+@import "login.scss";
+@import "signup.scss";
+@import "sidebar.scss";
+@import "dashboard.scss";
+@import 'home.scss';
 
 body {
-	font-family: sans-serif;
-	background-color: $background-color;
-	color: $text-controls-color;
-	margin: 0;
-	padding: 0;
+  font-family: sans-serif;
+  background-color: $background-color;
+  color: $text-controls-color;
+  margin: 0;
+  padding: 0;
 }
diff --git a/style/sidebar.scss b/style/sidebar.scss
new file mode 100644
index 0000000..f1a7cd2
--- /dev/null
+++ b/style/sidebar.scss
@@ -0,0 +1,14 @@
+@import "theme.scss";
+
+.sidebar-container {
+  background-color: red;
+  width: 27%;
+  height: calc(100% - 75px);
+}
+
+.sidebar-top-container {
+  border-radius: 1rem;
+  background-color: yellow;
+  height: 20%;
+  margin: 5px;
+}