diff --git a/src/App.svelte b/src/App.svelte
index 0f3cfb05..666c880f 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,11 +1,83 @@
 <script>
- 
+
+  import {onMount} from 'svelte';
+  let pages=[];
+  let currentPageIndex=0;
+   let title ='';
+ let note='';
+
+ onMount(()=>{
+  
+  const savedPages=localStorage.getItem("pages");
+  if(savedPages){
+    pages=JSON.parse(savedPages);
+    title=pages[currentPageIndex];
+    note=localStorage.getItem(title);
+  }
+  else{
+    addpage();
+
+  }
+
+ });
+
+ function saveNote()
+ {
+  const storePageName=pages[currentPageIndex];
+  if(storePageName!=title){
+    localStorage.removeItem(storePageName);
+    pages[currentPageIndex]=title;
+  }
+  
+  localStorage.setItem(title,note);
+  localStorage.setItem("pages",JSON.stringify(pages));
+
+ }
+function addpage()
+{
+  pages.push("New Page");
+  selectPage(pages.length ? pages.length-1 : 0);
+}
+function selectPage(index)
+{
+  currentPageIndex=index;
+  title=pages[currentPageIndex];
+  note=localStorage.getItem(title);
+
+}
 </script>
+<aside  class="fixed top-0 left-0 z-40 w-60 h-screen">
+  <div class="bg-light-gray overflow-y-auto  py-5 px-3 h-full border-r border-gray-200">
+    <ul class="space-y-2">
+      {#each pages as pase,index}
+      <li>
+       
+        <button  on:click={()=>(selectPage(index))} class="{index==currentPageIndex ? 'bg-dark-gray':''} py-2 px-3 text-gray-900 rounded-lg">{title || "New Page"}</button>
+        
+      </li>
+      {/each}
+      <li class="text-center"><button on:click={addpage} class="font-medium">+Add page </button></li>
+    </ul>
 
-<main>
-  Hello World
+  </div>
+</aside>
+
+<main class="p-4 ml-60 h-auto">
+  <div class="grid grid grid-cols-2 items-center mb-3">
+    <h1 class="text-3xl font-bold" contenteditable bind:textContent={title}></h1>
+    <button class ="ml-auto bg-gray-800 text-white px-5 py-2.5 rounded-lg font-medium text-sm mt-3 hover:bg-gray-900"on:click={saveNote}>Save</button>
+  </div>
+   <hr/>
+  <textarea class="mt-3 block w-full bg-gray-50 border border-gray-300 rounded-lg text-gray-900  p-2.5" bind:value={note}></textarea>
 </main>
 
 <style>
+ .bg-light-gray{
+  background: #FBFBFB;
+ }
+
+ .bg-drak-gray{
 
+  background: #EFEFEF;
+ }
 </style>
\ No newline at end of file