diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..d203ca4
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,10 @@
+{
+  "useTabs": false,
+  "jsxSingleQuote": true,
+  "printWidth": 180,
+  "semi": false,
+  "singleQuote": true,
+  "svelteBracketNewLine": false,
+  "arrowParens": "avoid",
+  "trailingComma": "none"
+}
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 2e54784..0f56bea 100644
--- a/src/index.js
+++ b/src/index.js
@@ -10,7 +10,7 @@ function createWindow () {
   mainWindow = new BrowserWindow({
     width: 1600,
     height: 900,
-    backgroundColor: '#2e2c29',
+    backgroundColor: '#191c20',
     autoHideMenuBar: true,
     experimentalFeatures: true,
     webPreferences: {
diff --git a/src/renderer/index.html b/src/renderer/index.html
index 043a19c..be6c2c8 100644
--- a/src/renderer/index.html
+++ b/src/renderer/index.html
@@ -4,17 +4,18 @@
 <head>
   <meta charset='utf-8'>
   <meta name='viewport' content='width=device-width,initial-scale=1'>
+  <meta name="theme-color" content="#191c20">
   <title>Miru</title>
 
   <link rel='icon' href='/favicon.ico'>
   <link href='/lib/halfmoon.css' rel='stylesheet'>
   <link href="/lib/Material-Icons.css" rel="stylesheet">
 
-  <script defer src='/lib/halfmoon.js'></script>
-  <script defer type="module" src="/src/main.js"></script>
+  <script src='/lib/halfmoon.js'></script>
 </head>
 
-<body class='with-custom-webkit-scrollbars with-custom-css-scrollbars dark-mode bg-very-dark'>
+<body class="dark-mode with-custom-webkit-scrollbars with-custom-css-scrollbars" data-sidebar-shortcut-enabled="true">
 </body>
+<script type="module" src="/src/main.js"></script>
 
 </html>
\ No newline at end of file
diff --git a/src/renderer/src/App.svelte b/src/renderer/src/App.svelte
index a8ff0bb..c98ce65 100644
--- a/src/renderer/src/App.svelte
+++ b/src/renderer/src/App.svelte
@@ -1,9 +1,56 @@
 <script>
+  import Sidebar from './lib/Sidebar.svelte'
   // import anitomyscript from 'anitomyscript'
   // const WebTorrent = require('webtorrent')
   // const wt = new WebTorrent()
   // console.log(wt)
   // anitomyscript('[GJM] Irozuku Sekai no Ashita kara - 08 [F0C587E8].mkv').then(console.log)
 </script>
+
+<div class="page-wrapper with-sidebar" data-sidebar-type="full-height overlayed-sm-and-down" data-sidebar-hidden="hidden">
+  <div class="sticky-alerts" />
+  <div class="sidebar-overlay" onclick="halfmoon.toggleSidebar()" />
+  <Sidebar />
+</div>
+
 <style>
+  :root {
+    --accent-color: #e5204c;
+    --dm-link-text-color: var(--dm-muted-text-color) !important;
+    --dm-link-text-color-hover: var(--dm-text-color) !important;
+    --base-html-font-size: 50%;
+    --base-html-font-size-1600: 62.5%;
+    --base-html-font-size-1920: 70%;
+    --tooltip-width: 17rem;
+    --card-border-width: 0;
+    --sidebar-border-width: 0;
+    --input-border-width: 0;
+  }
+  :global(.pointer) {
+    cursor: pointer;
+  }
+
+  /* sidebar patches */
+  .page-wrapper.with-sidebar[data-sidebar-hidden] {
+    --sidebar-width: var(--sidebar-minimised);
+  }
+
+  @media (max-width: 768px) {
+    .page-wrapper.with-sidebar[data-sidebar-type~='overlayed-sm-and-down'] > :global(.content-wrapper) {
+      left: var(--sidebar-minimised);
+      width: calc(100% - var(--sidebar-minimised));
+    }
+  }
+
+  .page-wrapper.with-sidebar[data-sidebar-hidden] > :global(.content-wrapper) {
+    left: var(--sidebar-width);
+    width: calc(100% - var(--sidebar-width));
+  }
+  .page-wrapper.with-sidebar[data-sidebar-hidden] > :global(.sidebar) {
+    left: 0;
+  }
+
+  .page-wrapper.with-sidebar[data-sidebar-hidden] :global(.text) {
+    opacity: 0;
+  }
 </style>
diff --git a/src/renderer/src/assets/svelte.png b/src/renderer/src/assets/svelte.png
deleted file mode 100644
index e673c91..0000000
Binary files a/src/renderer/src/assets/svelte.png and /dev/null differ
diff --git a/src/renderer/src/lib/Sidebar.svelte b/src/renderer/src/lib/Sidebar.svelte
index e69de29..775a553 100644
--- a/src/renderer/src/lib/Sidebar.svelte
+++ b/src/renderer/src/lib/Sidebar.svelte
@@ -0,0 +1,170 @@
+<script>
+  $: links = [
+    {
+      click: halfmoon.toggleSidebar.bind(halfmoon),
+      image: 'logo_cut.png',
+      icon: 'menu',
+      text: 'Open Menu'
+    },
+    {
+      click: () => {},
+      icon: 'home',
+      text: 'Home Page'
+    },
+    {
+      click: () => {},
+      icon: 'schedule',
+      text: 'Airing Schedule'
+    },
+    {
+      click: () => {},
+      icon: 'queue_music',
+      text: 'Now Playing'
+    },
+    {
+      click: () => {},
+      icon: 'tune',
+      text: 'Settings'
+    },
+    {
+      click: () => {
+        'https://anilist.co/api/v2/oauth/authorize?client_id=4254&response_type=token'
+      },
+      icon: 'login',
+      text: 'Login With AniList'
+    }
+  ]
+</script>
+
+<div class="sidebar">
+  <div class="sidebar-menu h-full d-flex flex-column m-0 pb-5">
+    {#each links as { click, icon, text, image }, i (i)}
+      <div
+        class="sidebar-link sidebar-link-with-icon pointer"
+        class:brand={i === 0}
+        data-toggle="tooltip"
+        data-placement="right"
+        data-title={text}
+        on:click={click}
+        class:mt-auto={i === links.length - 2}>
+        <span class="text-nowrap d-flex align-items-center" class:justify-content-between={image}>
+          {#if image}
+            <img src={image} alt="logo" class="text" />
+            <span class="material-icons menu">{icon}</span>
+          {:else}
+            <span class="material-icons">{icon}</span>
+            <span class="text">{text}</span>
+          {/if}
+        </span>
+      </div>
+    {/each}
+  </div>
+</div>
+
+<style>
+  /* sidebar */
+  :root {
+    --sidebar-minimised: 7rem;
+    --sidebar-width: 22rem;
+  }
+
+  .sidebar [data-toggle='tooltip']::before,
+  .page-wrapper:not(.with-sidebar[data-sidebar-hidden]) .sidebar [data-toggle='tooltip']::after {
+    display: none;
+  }
+
+  .text {
+    opacity: 1;
+    transition: opacity 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
+    margin-left: 1rem;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    font-weight: bold;
+  }
+
+  .sidebar-link > span {
+    transition: background 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
+    color: #fff;
+    border-radius: 0.3rem;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+  }
+
+  .sidebar-link:not(.brand):hover > span {
+    background: #fff;
+    color: var(--dark-color);
+  }
+
+  .sidebar-link {
+    width: 100%;
+    font-size: 1.4rem;
+    padding: 0.75rem 1.5rem;
+    height: 5.5rem;
+  }
+
+  .material-icons {
+    font-size: 2.2rem;
+    min-width: 4rem;
+    width: 4rem;
+    height: 4rem;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  :not(.brand) :global(img) {
+    font-size: 2.2rem;
+    width: 3rem;
+    height: 3rem;
+    margin: 0.5rem;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .menu {
+    right: 1.5rem;
+    position: absolute;
+  }
+
+  img {
+    height: 3rem;
+    margin-right: var(--sidebar-brand-image-margin-right);
+  }
+
+  .brand {
+    height: 8rem;
+  }
+
+  .sidebar {
+    transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), left 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
+    will-change: width;
+    overflow: visible;
+  }
+
+  .nav-hidden > .sidebar {
+    left: calc(-1 * var(--sidebar-width)) !important;
+  }
+
+  .nav-hidden > .content-wrapper {
+    left: 0 !important;
+    width: 100% !important;
+  }
+
+  [data-toggle='tooltip']:not([data-target-breakpoint])::after,
+  [data-toggle='tooltip']:not([data-target-breakpoint])::after {
+    transition: opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), top 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+    top: 0;
+    opacity: 0;
+    font-weight: bold;
+    box-shadow: var(--dm-shadow) !important;
+  }
+
+  [data-toggle='tooltip']:not([data-target-breakpoint]):hover::after,
+  [data-toggle='tooltip']:not([data-target-breakpoint]):focus::after {
+    opacity: 1;
+    top: 50%;
+  }
+</style>
diff --git a/vite.config.js b/vite.config.js
index 93d994b..f373a9a 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,18 +1,18 @@
 import path from 'path'
 import process from 'process'
 import { defineConfig } from 'vite'
-import builtinModules from 'builtin-modules'
+// import builtinModules from 'builtin-modules'
 import { svelte } from '@sveltejs/vite-plugin-svelte'
 import commonjsExternals from 'vite-plugin-commonjs-externals'
 
 const commonjsPackages = [
-  'electron',
-  'electron/main',
-  'electron/common',
-  'electron/renderer',
-  'original-fs',
-  'webtorrent',
-  ...builtinModules
+  // 'electron',
+  // 'electron/main',
+  // 'electron/common',
+  // 'electron/renderer',
+  // 'original-fs',
+  'webtorrent'
+  // ...builtinModules
 ]
 
 // https://vitejs.dev/config/
