diff --git a/src/routes/dashboard/+page.svelte b/src/routes/dashboard/+page.svelte
index 7a915fd..9e70559 100755
--- a/src/routes/dashboard/+page.svelte
+++ b/src/routes/dashboard/+page.svelte
@@ -18,12 +18,10 @@
 	</form>
 
 	<code>{data.data}</code> -->
-	<div class="w-full h-full bg-gray-950/40 flex gap-3 rounded-md p-3 border border-gray-500/60">
+	<section class="w-full h-full flex border-gray-500/60">
 		<Sidebar accounts={data.accounts} bind:selectedAccount />
 		<div class="flex flex-col flex-grow gap-3">
-			<div
-				class="p-4 border w-full rounded-md bg-gray-950/60 border-gray-500/20 flex flex-col h-min transition-all"
-			>
+			<section>
 				<h1 class="text-2xl">
 					{selectedAccount ? selectedAccount.address : 'dashboard'}
 				</h1>
@@ -33,21 +31,19 @@
 						? `Net Worth: ${selectedAccount.balance} USD`
 						: 'please select an account'}
 				</span>
-			</div>
+			</section>
 			<div class="flex gap-3 h-full">
-				<div
-					class="p-4 border w-3/4 rounded-md bg-gray-950/60 border-gray-500/20 transition-all justify-center items-center"
-				>
+				<section class="w-3/4">
 					{#if selectedAccount}
 						<Graph class="w-full" token={data.token} path={`worth/${selectedAccount.id}`} />
 					{:else}
 						<h1 class="subtext">please select an account!</h1>
 					{/if}
-				</div>
-				<div class="p-4 border w-1/4 rounded-md bg-gray-950/60 border-gray-500/20 transition-all">
+				</section>
+				<section class="w-1/4">
 					<h1 class="text-xl">bot controls</h1>
-				</div>
+				</section>
 			</div>
 		</div>
-	</div>
+	</section>
 </main>
diff --git a/src/routes/dashboard/Sidebar.svelte b/src/routes/dashboard/Sidebar.svelte
index d69d202..b2fa9a2 100644
--- a/src/routes/dashboard/Sidebar.svelte
+++ b/src/routes/dashboard/Sidebar.svelte
@@ -14,14 +14,16 @@
 </script>
 
 <div
-	class={`w-1/5 flex flex-col ${showMenu === true ? 'gap-3' : 'gap-0'}`}
-	style="transition:all 1000ms cubic-bezier(0.83, 0, 0.17, 1);"
+	class={`w-1/5 flex flex-col ${
+		showMenu === true ? 'gap-3' : 'gap-0'
+	} transition-all duration-1000`}
+	style="transition-timing-function: cubic-bezier(0.83, 0.0, 0.17, 1.0)"
 >
 	<section
-		class={`w-full pl-5 pr-5
-		${showMenu === true ? 'p-5 max-h-96 border' : 'p-0 max-h-0'}
-		rounded-md border-gray-500/30 bg-gray-950/40 bottom-0 left-0 backdrop-blur-xl overflow-hidden`}
-		style="transition:all 1000ms cubic-bezier(0.83, 0, 0.17, 1);"
+		class={`pl-5 pr-5
+		${showMenu === true ? 'p-5 max-h-96 border' : 'p-0 max-h-0 border-none'}
+		bg-gray-950/40 overflow-hidden transition-all duration-1000`}
+		style="transition-timing-function: cubic-bezier(0.83, 0.0, 0.17, 1.0)"
 	>
 		<h1 class="text-2xl">Add a bot</h1>
 		<form method="post" class="flex flex-col gap-2" use:enhance>
@@ -48,10 +50,8 @@
 		</form>
 	</section>
 
-	<section
-		class="border border-gray-500/30 bg-gray-950/40 rounded-md p-3 flex flex-col gap-2 relative"
-	>
-		<div class="flex gap-2">
+	<section class="bg-gray-950/40 flex flex-col relative">
+		<div class="flex">
 			<input type="text" class="w-full" placeholder="search" />
 			<button
 				on:click={() => (showMenu = !showMenu)}
diff --git a/src/routes/styles.css b/src/routes/styles.css
index 428ee0b..3b599c5 100755
--- a/src/routes/styles.css
+++ b/src/routes/styles.css
@@ -35,15 +35,23 @@ body {
 
 	button,
 	input {
-		@apply border border-gray-500/40 rounded-md;
+		@apply bg-gray-950/40 border border-gray-500/40 rounded-md;
 	}
 
 	button {
-		@apply bg-gray-950/70 p-4;
+		@apply p-4;
 	}
 
 	input {
-		@apply bg-gray-950/40 p-3;
+		@apply p-3;
+	}
+
+	section {
+		@apply gap-3 p-4 border rounded-md bg-gray-950/60 border-gray-500/20;
+	}
+
+	section * {
+		@apply gap-2;
 	}
 
 	.subtext {