diff --git a/pyscriptjs/src/App.svelte b/pyscriptjs/src/App.svelte
index 2721968..45b343b 100644
--- a/pyscriptjs/src/App.svelte
+++ b/pyscriptjs/src/App.svelte
@@ -1,11 +1,14 @@
 <script lang="ts">
   // import Button from "./Button.svelte";
   // import Logo from "./Logo.svelte";
-  import Main from "./Main.svelte";
-  import Header from "./Header.svelte";
+  // import Main from "./OldMain.svelte";
+  // import Header from "./OldHeader.svelte";
   import Tailwind from "./Tailwind.svelte";
   import { loadInterpreter } from './interpreter';
-  import { pyodideLoaded, loadedEnvironments } from './stores';
+  import { pyodideLoaded, loadedEnvironments, navBarOpen } from './stores';
+  import Main from "./Main.svelte";
+  import Header from "./Header.svelte";
+  import SideNav from "./SideNav.svelte";
 
   let pyodideReadyPromise
   const initializePyodide = () =>{
@@ -24,6 +27,11 @@
     });
     // let environments = loadedEnvironments;
     // debugger
+    let showNavBar = false;
+    let main = document.querySelector("#main");
+    navBarOpen.subscribe(value => {
+        showNavBar = value;
+    });
   }
 
 </script>
@@ -46,9 +54,13 @@
 
 <Tailwind />
 
-<div class="min-h-full">
-  <Header />
 
-  <Main />
+<div class="flex flex-wrap bg-grey-light min-h-screen">
+  <SideNav />
+
+  <div id="main" class="w-full min-h-full absolute pin-r flex flex-col">
+    <Header />
+    <Main />
+  </div>
 
 </div>
\ No newline at end of file
diff --git a/pyscriptjs/src/Header.svelte b/pyscriptjs/src/Header.svelte
index 0353908..29b2533 100644
--- a/pyscriptjs/src/Header.svelte
+++ b/pyscriptjs/src/Header.svelte
@@ -1,165 +1,106 @@
 <script lang="ts">
-  import Fa from 'svelte-fa'
-  import { faCog } from '@fortawesome/free-solid-svg-icons'
-  import { loadedEnvironments } from './stores';
+    import Fa from 'svelte-fa';
+    import { faCog, faBars, faPlay, faTimes } from '@fortawesome/free-solid-svg-icons'
+    import { pyodideLoaded, loadedEnvironments, navBarOpen } from './stores';
 
-  export let name = "PyScript";
-  export let editMode = true;
+    export let name = "PyScript";
 
-  $: modeLabel = (editMode == true) ? "edit" : "run";
+    let showNavBar = false;
+    navBarOpen.subscribe(value => {
+        showNavBar = value;
 
-  function toggleMode() {
-      editMode = ! editMode;
-	}
+        console.log(showNavBar);
+        toggleSidebar();
+    });
 
-  function addScript(evt){
-    // get the main element
-    const mainEl = document.getElementById("dashboard");
-    const p = document.createElement("py-script");
-    mainEl.appendChild(p);
-  }
-
-  function addInterpreter(evt){
-    console.log("add interpreter");
-  }
-
-  function showSettings(evt){
-    console.log($loadedEnvironments);
-  }
-
-
-  let open = true;
+    function toggleNavBar(evt){
+        navBarOpen.set(!$navBarOpen);
+    }
   
+
+    function toggleSidebar() {
+        let menuSwitch = document.querySelector("#menu-switch"),
+        sidebar = document.querySelector("#sidebar"),
+        main = document.querySelector("#main");
+
+        let classesToApplyForSidebar = {
+            active: [],
+            inactive: ["sidebar-inactive"]
+        },
+        classesToApplyForMain = {
+            active: ["sm:w-2/3", "lg:w-3/4", 'main-squeezed'],
+            inactive: []
+        },
+        classesToApplyForMenuButton = {
+            active: ["fa-times-circle", "text-red-light"],
+            inactive: ["fa-bars"]
+        };
+
+        // let isMenuActive = menuSwitch.getAttribute("data-menu-active") === "true";
+
+        if (!menuSwitch){
+            return;
+        }
+        if (!showNavBar) {
+            // menuSwitch.setAttribute("data-menu-active", null);
+
+            menuSwitch.children[0].classList.remove(
+            ...classesToApplyForMenuButton.active
+        );
+            menuSwitch.children[0].classList.add(
+                ...classesToApplyForMenuButton.inactive
+        );
+
+        sidebar.classList.remove(...classesToApplyForSidebar.active);
+        sidebar.classList.add(...classesToApplyForSidebar.inactive);
+
+        main.classList.remove(...classesToApplyForMain.active);
+        main.classList.add(...classesToApplyForMain.inactive);
+        } else {
+        // menuSwitch.setAttribute("data-menu-active", true);
+
+        menuSwitch.children[0].classList.add(
+            ...classesToApplyForMenuButton.active
+        );
+        menuSwitch.children[0].classList.remove(
+            ...classesToApplyForMenuButton.inactive
+        );
+
+        sidebar.classList.add(...classesToApplyForSidebar.active);
+        sidebar.classList.remove(...classesToApplyForSidebar.inactive);
+
+        main.classList.add(...classesToApplyForMain.active);
+        main.classList.remove(...classesToApplyForMain.inactive);
+        }
+    }
 </script>
 
-<nav class="bg-gray-800">
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-      <div class="flex items-center justify-between h-16">
-        <div class="flex items-center">
-          <div class="flex-shrink-0">
-            <!-- <img class="h-8 w-8" src="https://tailwindui.com/img/logos/workflow-mark-indigo-500.svg" alt="Workflow"> -->
-            <label class="text-gray-300">{name}</label>
-          </div>
-          <div class="hidden md:block">
-            <div class="ml-10 flex items-baseline space-x-4">
-              <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
-              <a class="bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-medium" aria-current="page">Dashboard</a>
+<style>
+    :global(div.main-squeezed) {
+        transform: translateX(33.3333%);
+    }
 
-              <a class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium" on:click={addScript}>+ Script</a>
+    :global(.logo-title){
+        font-family: FreeMono, monospace;
+    }
+</style>
 
-              <a class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium" on:click={addInterpreter}>+ Interpreter</a>
-
-              <!-- <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Calendar</a> 
-
-              <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Reports</a> -->
-            </div>
-          </div>
+<aside id="navbar" class="flex flex-column w-full text-lg p-6 bg-grey-lighter shadow-md slow-moves">
+    <button id="menu-switch" class="focus:outline-none" on:click={toggleNavBar}>
+        <div class:hidden={showNavBar}>
+            <Fa icon={faBars} />
         </div>
-        <div class="hidden md:block">
-          <div class="ml-4 flex items-center md:ml-6">
-
-            <label class="text-gray-300" on:click={toggleMode}>Mode: { modeLabel }</label>
-            
-
-            <!-- Profile dropdown -->
-            <div class="ml-3 relative">
-              <button type="button" on:click={showSettings} class="bg-gray-800 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
-                <span class="sr-only">View notifications</span>
-                <!-- Settings Icon -->
-                <Fa icon={faCog} />
-              </button>
-
-              <!-- <div>
-                <button type="button" class="max-w-xs bg-gray-800 rounded-full flex items-center text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
-                  <span class="sr-only">Open user menu</span>
-                  <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
-                </button>
-              </div> -->
-
-              <!--
-                Dropdown menu, show/hide based on menu state.
-
-                Entering: "transition ease-out duration-100"
-                  From: "transform opacity-0 scale-95"
-                  To: "transform opacity-100 scale-100"
-                Leaving: "transition ease-in duration-75"
-                  From: "transform opacity-100 scale-100"
-                  To: "transform opacity-0 scale-95"
-              -->
-              <!-- <div class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1"> -->
-                <!-- Active: "bg-gray-100", Not Active: "" -->
-                <!-- <a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-0">Your Profile</a>
-
-                <a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-1">Settings</a>
-
-                <a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-2">Sign out</a>
-              </div> -->
-            </div>
-          </div>
+        <div class:hidden={!showNavBar}>
+            <Fa icon={faTimes} color="red" />
         </div>
-        <div class="-mr-2 flex md:hidden">
-          <!-- Mobile menu button -->
-          <button type="button" class="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
-            <span class="sr-only">Open main menu</span>
-            <!--
-              Heroicon name: outline/menu
-
-              Menu open: "hidden", Menu closed: "block"
-            -->
-            <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
-            </svg>
-            <!--
-              Heroicon name: outline/x
-
-              Menu open: "block", Menu closed: "hidden"
-            -->
-            <svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-            </svg>
-          </button>
-        </div>
-      </div>
+    </button>
+    <p class="w-full logo-title text-center">{name}</p>
+    <div class="flex flex-column">
+        <button class="mr-6">
+            <Fa icon={faPlay} color="black" />
+        </button>
+        <button class="">
+            <Fa icon={faCog} color="black" />
+        </button>
     </div>
-
-    <!-- Mobile menu, show/hide based on menu state. -->
-    <div class="md:hidden" id="mobile-menu">
-      <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
-        <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
-        <a href="#" class="bg-gray-900 text-white block px-3 py-2 rounded-md text-base font-medium" aria-current="page">Dashboard</a>
-
-        <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">+ Script</a>
-
-        <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">+ Interpreter</a>
-
-        <!-- <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Calendar</a>
-
-        <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Reports</a> -->
-      </div>
-      <div class="pt-4 pb-3 border-t border-gray-700">
-        <div class="flex items-center px-5">
-          <!-- <div class="flex-shrink-0">
-            <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
-          </div>
-          <div class="ml-3">
-            <div class="text-base font-medium leading-none text-white">Tom Cook</div>
-            <div class="text-sm font-medium leading-none text-gray-400">tom@example.com</div>
-          </div> -->
-          <button type="button" class="ml-auto bg-gray-800 flex-shrink-0 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
-            <span class="sr-only">View notifications</span>
-            <!-- Heroicon name: outline/bell -->
-            <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
-            </svg>
-          </button>
-        </div>
-        <!-- <div class="mt-3 px-2 space-y-1">
-          <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Your Profile</a>
-
-          <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Settings</a>
-
-          <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Sign out</a>
-        </div> -->
-      </div>
-    </div>
-  </nav>
\ No newline at end of file
+</aside>
\ No newline at end of file
diff --git a/pyscriptjs/src/Main.svelte b/pyscriptjs/src/Main.svelte
index 799cda0..c6d1268 100644
--- a/pyscriptjs/src/Main.svelte
+++ b/pyscriptjs/src/Main.svelte
@@ -1,33 +1,28 @@
 <script lang="ts">
-  import {EditorState, EditorView , basicSetup} from "@codemirror/basic-setup"
-
-  import { python } from "@codemirror/lang-python"
-  import { keymap } from "@codemirror/view";
-  import { defaultKeymap } from "@codemirror/commands";
-  import { oneDarkTheme } from "@codemirror/theme-one-dark";
 
+    import Fa from 'svelte-fa';
+    import { faWandMagic, faInfoCircle } from '@fortawesome/free-solid-svg-icons'
 
 </script>
-  <header class="bg-white shadow">
-    <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
-      <h1 class="text-3xl font-bold text-gray-900">Dashboard</h1>
-    </div>
-  </header>
-  <main>
-    <div  class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
-      <!-- Replace with your content -->
-      <div class="px-4 py-6 sm:px-0">
-        <div id="dashboard" class="border-4 border-dashed border-gray-200 rounded-lg h-96">
-          <py-repl>
-            <py-script auto-generate target="page:mydiv" source='./mycode.py'>
-              sum([1, 2, 3, 4, 5])
-            </py-script>
-          </py-repl>
-        </div>
+
+<div class="flex content-between flex-wrap min-h-full flex-grow">
+    <main class="w-full p-6">
+
+      <div role="alert" class="w-full p-2 rounded-full bg-teal-light text-teal-darker text-lg">
+        <py-script auto-generate target="page:mydiv" source='./mycode.py'>
+            sum([1, 2, 3, 4, 5])
+          </py-script>
       </div>
 
-      
+    </main>
+    <footer class="w-full p-6 bg-black text-white flex space-between">
+        <p class="logo-title text-center">PyScript</p>
+        <p class="w-full ml-6 text-center sm:text-left">Copyright &copy; 2019</p>
 
-      <!-- /End replace -->
-    </div>
-  </main>
\ No newline at end of file
+          <aside class="w-full sm:w-auto text-center sm:text-right">
+            <a href="https://github.com/SlawomirChabowski" title="My Github page" class="text-white block">
+                <Fa icon={faInfoCircle} style="transform: scale(2);"/>
+            </a>
+          </aside>
+    </footer>
+</div>
\ No newline at end of file
diff --git a/pyscriptjs/src/SideNav.svelte b/pyscriptjs/src/SideNav.svelte
new file mode 100644
index 0000000..eb253be
--- /dev/null
+++ b/pyscriptjs/src/SideNav.svelte
@@ -0,0 +1,66 @@
+
+<script lang="ts">
+  import { pyodideLoaded, loadedEnvironments, navBarOpen } from './stores';
+
+  
+//   let menuSwitch = document.querySelector("#menu-switch"),
+// sidebar = document.querySelector("#sidebar"),
+// main = document.querySelector("#main");
+    let showNavBar = false;
+  navBarOpen.subscribe(value => {
+    showNavBar = value;
+
+    console.log(showNavBar);
+});
+console.log("showNav");
+console.log(showNavBar);
+</script>
+
+<style>
+    :global(div.slow-moves) {
+        transition: 0.3s;
+    }
+
+    .sidebar-inactive {
+        transform: translateX(-100%);
+    }
+
+</style>
+
+<nav id="sidebar" class="fixed z-10 pin-y bg-grey-lightest shadow-md w-full slow-moves sm:w-1/3 lg:w-1/4" class:sidebar-inactive="{ !showNavBar }">
+
+    <h1 class="text-lg p-6 bg-grey-lighter border-grey-light border-b text-grey-darkest">Components Catalog</h1>
+
+    <ul class="list-reset">
+      <li class="hover:bg-teal">
+        <a href="#" class="block px-6 py-4 w-full text-grey-darkest font-bold hover:text-white text-left text-sm no-underline">
+          <span class="fa fa-grip-horizontal"></span>
+          REPL
+        </a>
+      </li>
+      <li class="hover:bg-teal">
+        <a href="#" class="block px-6 py-4 w-full text-grey-darkest font-bold hover:text-white text-left text-sm no-underline">
+          <span class="fa fa-newspaper"></span>
+          Script
+        </a>
+      </li>
+      <li class="hover:bg-teal">
+        <a href="#" class="block px-6 py-4 w-full text-grey-darkest font-bold hover:text-white text-left text-sm no-underline">
+          <span class="fa fa-ellipsis-h"></span>
+          Console
+        </a>
+      </li>
+      <li class="hover:bg-teal">
+        <a href="#" class="block px-6 py-4 w-full text-grey-darkest font-bold hover:text-white text-left text-sm no-underline">
+          <span class="fa fa-envelope"></span>
+          Div
+        </a>
+      </li>
+      <li class="hover:bg-teal">
+        <a href="#" class="block px-6 py-4 w-full text-grey-darkest font-bold hover:text-white text-left text-sm no-underline">
+          <span class="fa fa-cogs"></span>
+          Settings
+        </a>
+      </li>
+    </ul>
+  </nav>
\ No newline at end of file
diff --git a/pyscriptjs/src/stores.ts b/pyscriptjs/src/stores.ts
index a2e549e..0089970 100644
--- a/pyscriptjs/src/stores.ts
+++ b/pyscriptjs/src/stores.ts
@@ -15,4 +15,6 @@ export const pyodideReadyPromise = promisable(
     loadInterpreter,
     // shouldRefreshPromise, // optional, but recommended
   );
+
+export const navBarOpen = writable(false);
   
\ No newline at end of file