diff --git a/Cargo.lock b/Cargo.lock
index 195bd07..645a1e7 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -1314,6 +1314,7 @@ dependencies = [
  "icondata_cg",
  "icondata_core",
  "icondata_io",
+ "icondata_oc",
  "icondata_ri",
 ]
 
@@ -1359,6 +1360,15 @@ dependencies = [
  "icondata_core",
 ]
 
+[[package]]
+name = "icondata_oc"
+version = "0.0.8"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "667cb0b74516ec3d4ce357b9ec94189eab6e1bfe5a4a28b5e36579028a8075b1"
+dependencies = [
+ "icondata_core",
+]
+
 [[package]]
 name = "icondata_ri"
 version = "0.0.8"
diff --git a/Cargo.toml b/Cargo.toml
index d1a12df..509f87e 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -27,7 +27,9 @@ leptos_icons = { version = "0.1.0", default_features = false, features = [
   "CgTrash",
   "IoReturnUpBackSharp",
   "AiEyeFilled",
-  "AiEyeInvisibleFilled"
+  "AiEyeInvisibleFilled",
+  "OcHomeFillLg",
+  "AiSearchOutlined"
 ] }
 dotenv = { version = "0.15.0", optional = true }
 diesel = { version = "2.1.4", features = ["postgres", "r2d2", "time"], optional = true }
diff --git a/src/app.rs b/src/app.rs
index 85b00cc..45824e9 100644
--- a/src/app.rs
+++ b/src/app.rs
@@ -6,8 +6,7 @@ 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 {
@@ -36,16 +35,27 @@ pub fn App() -> impl IntoView {
     }
 }
 
+use crate::components::sidebar::*;
+use crate::components::dashboard::*;
+use crate::components::search::*;
+
 /// Renders the home page of your application.
 #[component]
 fn HomePage() -> impl IntoView {
     let mut play_status = PlayStatus::default();
     let play_status = create_rw_signal(play_status);
+    
+    let (dashboard_open, set_dashboard_open) = create_signal(true);
 
     view! {
         <div class="home-container">
-            <Sidebar />
-            <Dashboard />
+            <Sidebar setter=set_dashboard_open />
+            <Show 
+                when=move || {dashboard_open() == true}
+                fallback=move || view! { <Search /> }
+            >
+                <Dashboard />
+            </Show>
             <PlayBar status=play_status/>
             <Queue status=play_status/>
         </div>
diff --git a/src/components.rs b/src/components.rs
index bffdc50..e843333 100644
--- a/src/components.rs
+++ b/src/components.rs
@@ -1,2 +1,3 @@
 pub mod sidebar;
-pub mod dashboard;
\ No newline at end of file
+pub mod dashboard;
+pub mod search;
\ No newline at end of file
diff --git a/src/components/search.rs b/src/components/search.rs
new file mode 100644
index 0000000..ed11f5b
--- /dev/null
+++ b/src/components/search.rs
@@ -0,0 +1,11 @@
+use leptos::*;
+use leptos::leptos_dom::*;
+
+#[component]
+pub fn Search() -> impl IntoView {
+    view! {
+        <div class="search-container">
+            <h1>Searching...</h1>
+        </div>
+    }
+}
\ No newline at end of file
diff --git a/src/components/sidebar.rs b/src/components/sidebar.rs
index 5f4ace8..9872b44 100644
--- a/src/components/sidebar.rs
+++ b/src/components/sidebar.rs
@@ -1,22 +1,37 @@
 use leptos::*;
+use leptos::leptos_dom::*;
+use leptos_icons::AiIcon::*;
+use leptos_icons::OcIcon::*;
+use leptos_icons::*;
 
 #[component]
-pub fn Sidebar() -> impl IntoView {
+pub fn Sidebar(setter: WriteSignal<bool>) -> impl IntoView {
+    let open_dashboard = move |_| {
+        setter.update(|value| *value = true);
+        log!("open dashboard");
+    };
+    let open_search = move |_| {
+        setter.update(|value| *value = false);
+        log!("open search");
+    };
+
     view! {
         <div class="sidebar-container">
-            <Top />
+            <div class="sidebar-top-container">
+                <h2 class="header">LibreTunes</h2>
+                <div class="buttons" on:click=open_dashboard>
+                    <Icon icon=Icon::from(OcHomeFillLg) />
+                    <h1>Dashboard</h1>
+                </div>
+                <div class="buttons" on:click=open_search>
+                    <Icon icon=Icon::from(AiSearchOutlined) />
+                    <h1>Search</h1>
+                </div>
+            </div>
             <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/pages/signup.rs b/src/pages/signup.rs
index c2de8f8..503195e 100644
--- a/src/pages/signup.rs
+++ b/src/pages/signup.rs
@@ -1,6 +1,5 @@
 use crate::auth::signup;
 use crate::models::User;
-use leptos::ev::input;
 use leptos::leptos_dom::*;
 use leptos::*;
 use leptos_icons::AiIcon::*;
diff --git a/style/dashboard.scss b/style/dashboard.scss
index 7eb53c9..6d9946e 100644
--- a/style/dashboard.scss
+++ b/style/dashboard.scss
@@ -1,7 +1,7 @@
-@import 'theme.scss';
+@import "theme.scss";
 
 .dashboard-container {
-    width: 73%;
-    background: green;
-    height: 100vh;
-}
\ No newline at end of file
+  width: calc(100% - 22rem);
+  background: green;
+  height: 100vh;
+}
diff --git a/style/main.scss b/style/main.scss
index 557dd84..cdd8e9a 100644
--- a/style/main.scss
+++ b/style/main.scss
@@ -6,6 +6,7 @@
 @import "sidebar.scss";
 @import "dashboard.scss";
 @import 'home.scss';
+@import 'search.scss';
 
 body {
   font-family: sans-serif;
diff --git a/style/search.scss b/style/search.scss
new file mode 100644
index 0000000..07da063
--- /dev/null
+++ b/style/search.scss
@@ -0,0 +1,8 @@
+@import 'theme.scss';
+
+.search-container {
+    width: calc(100% - 22rem);
+    background: green;
+    height: 100vh;
+  }
+  
\ No newline at end of file
diff --git a/style/sidebar.scss b/style/sidebar.scss
index f1a7cd2..4051817 100644
--- a/style/sidebar.scss
+++ b/style/sidebar.scss
@@ -2,13 +2,40 @@
 
 .sidebar-container {
   background-color: red;
-  width: 27%;
+  width: 22rem;
   height: calc(100% - 75px);
 }
 
 .sidebar-top-container {
   border-radius: 1rem;
-  background-color: yellow;
-  height: 20%;
+  background-color: darkblue;
+  height: 10rem;
   margin: 5px;
+  padding: 0.2rem 1rem 1rem 1rem;
+}
+
+.sidebar-top-container .header {
+  font-size: 1.4rem;
+}
+.sidebar-top-container .buttons {
+  display: flex;
+  flex-direction: row;
+  font-size: 2rem;
+  align-items: center;
+  transition: all 0.5s;
+  cursor: pointer;
+  color: grey;
+}
+.sidebar-top-container .buttons:hover {
+  color: white;
+}
+
+.sidebar-top-container .buttons:last-child {
+  margin-left: 0.02rem;
+}
+
+.sidebar-top-container h1 {
+  font-size: 1.1rem;
+  margin-left: 0.8rem;
+  font-weight: 200;
 }