diff --git a/index.html b/index.html
index 06dd08f..8214280 100644
--- a/index.html
+++ b/index.html
@@ -1,92 +1,893 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>MNotes</title>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>MNotes</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-components-web/14.0.0/material-components-web.min.css">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,1,0">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&display=swap">
+  <style>
+    :root {
+      /* Material 3 (You/Expressive) Colors - Light Theme */
+      --primary-color: #006A6A;
+      --on-primary-color: #FFFFFF;
+      --primary-container-color: #6FF7F7;
+      --on-primary-container-color: #002020;
+      --secondary-color: #4A6363;
+      --on-secondary-color: #FFFFFF;
+      --secondary-container-color: #CCE8E7;
+      --on-secondary-container-color: #051F1F;
+      --tertiary-color: #4B607C;
+      --on-tertiary-color: #FFFFFF;
+      --tertiary-container-color: #D3E4FF;
+      --on-tertiary-container-color: #041C35;
+      --error-color: #BA1A1A;
+      --on-error-color: #FFFFFF;
+      --error-container-color: #FFDAD6;
+      --on-error-container-color: #410002;
+      --surface-color: #FAFDFC;
+      --on-surface-color: #191C1C;
+      --surface-variant-color: #DAE5E3;
+      --on-surface-variant-color: #3F4948;
+      --outline-color: #6F7978;
+      --background-color: #FAFDFC;
+      --on-background-color: #191C1C;
+      --elevation-level-1: 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
+      --elevation-level-2: 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
+      --elevation-level-3: 0px 4px 8px 3px rgba(0, 0, 0, 0.15);
+      --surface-tint-color: #006A6A;
+    }
 
-    <!-- Material Symbols -->
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
+    .theme-dark {
+      /* Material 3 (You/Expressive) Colors - Dark Theme */
+      --primary-color: #4CDADA;
+      --on-primary-color: #003737;
+      --primary-container-color: #004F4F;
+      --on-primary-container-color: #6FF7F7;
+      --secondary-color: #B0CCCC;
+      --on-secondary-color: #1B3534;
+      --secondary-container-color: #324B4B;
+      --on-secondary-container-color: #CCE8E7;
+      --tertiary-color: #B4C8E9;
+      --on-tertiary-color: #1C314B;
+      --tertiary-container-color: #334863;
+      --on-tertiary-container-color: #D3E4FF;
+      --error-color: #FFB4AB;
+      --on-error-color: #690005;
+      --error-container-color: #93000A;
+      --on-error-container-color: #FFDAD6;
+      --surface-color: #191C1C;
+      --on-surface-color: #E0E3E2;
+      --surface-variant-color: #3F4948;
+      --on-surface-variant-color: #BEC9C7;
+      --outline-color: #899392;
+      --background-color: #191C1C;
+      --on-background-color: #E0E3E2;
+      --elevation-level-1: 0px 1px 3px 1px rgba(0, 0, 0, 0.35);
+      --elevation-level-2: 0px 2px 6px 2px rgba(0, 0, 0, 0.35);
+      --elevation-level-3: 0px 4px 8px 3px rgba(0, 0, 0, 0.35);
+      --surface-tint-color: #4CDADA;
+    }
 
-    <!-- Roboto Font -->
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
+    .theme-sepia {
+      /* Material 3 (You/Expressive) Colors - Sepia Theme */
+      --primary-color: #8B5000;
+      --on-primary-color: #FFFFFF;
+      --primary-container-color: #FFDDB7;
+      --on-primary-container-color: #2C1700;
+      --secondary-color: #735A41;
+      --on-secondary-color: #FFFFFF;
+      --secondary-container-color: #FFDDBD;
+      --on-secondary-container-color: #291805;
+      --tertiary-color: #5B6237;
+      --on-tertiary-color: #FFFFFF;
+      --tertiary-container-color: #DFE8B2;
+      --on-tertiary-container-color: #181E00;
+      --error-color: #BA1A1A;
+      --on-error-color: #FFFFFF;
+      --error-container-color: #FFDAD6;
+      --on-error-container-color: #410002;
+      --surface-color: #FFFBFF;
+      --on-surface-color: #201B16;
+      --surface-variant-color: #F0E0CF;
+      --on-surface-variant-color: #4E4539;
+      --outline-color: #7F7667;
+      --background-color: #FFF8F3;
+      --on-background-color: #201B16;
+      --elevation-level-1: 0px 1px 3px 1px rgba(139, 80, 0, 0.15);
+      --elevation-level-2: 0px 2px 6px 2px rgba(139, 80, 0, 0.15);
+      --elevation-level-3: 0px 4px 8px 3px rgba(139, 80, 0, 0.15);
+      --surface-tint-color: #8B5000;
+    }
 
-    <link rel="stylesheet" href="style.css">
+    body {
+      font-family: 'Google Sans', 'Roboto', sans-serif;
+      margin: 0;
+      padding: 0;
+      background-color: var(--background-color);
+      color: var(--on-background-color);
+      transition: all 0.3s ease;
+      display: flex;
+      flex-direction: column;
+      height: 100vh;
+      overflow: hidden;
+    }
 
-    <!-- CRITICAL FIX: Expanded Import Map for resolving bare module specifiers -->
-    <!-- Switched ALL CDN links to unpkg.com for better path resolution -->
-    <script type="importmap">
-      {
-        "imports": {
-          "tslib": "https://unpkg.com/tslib@2.6.2/tslib.js",  <-- CHANGED THIS LINE
-          "@material/web/": "https://unpkg.com/@material/web@1.4.1/",
-          "lit": "https://unpkg.com/lit@3.1.2/index.js",
-          "lit/decorators.js": "https://unpkg.com/lit@3.1.2/decorators.js",
-          "lit/directives/class-map.js": "https://unpkg.com/lit@3.1.2/directives/class-map.js",
-          "lit/directives/when.js": "https://unpkg.com/lit@3.1.2/directives/when.js",
-          "lit/html.js": "https://unpkg.com/lit@3.1.2/html.js",
-          "lit/preact-render-to-string.js": "https://unpkg.com/lit@3.1.2/preact-render-to-string.js",
-          "lit/reactive-element.js": "https://unpkg.com/lit@3.1.2/reactive-element.js",
-          "@lit/reactive-element/": "https://unpkg.com/@lit/reactive-element@3.1.2/"
-        }
+    .header {
+      background-color: var(--primary-color);
+      color: var(--on-primary-color);
+      padding: 16px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      box-shadow: var(--elevation-level-2);
+      z-index: 10;
+    }
+
+    .app-title {
+      font-size: 1.5rem;
+      font-weight: 500;
+      margin: 0;
+      font-family: 'Google Sans', sans-serif;
+    }
+
+    .main-container {
+      display: flex;
+      flex: 1;
+      overflow: hidden;
+    }
+
+    .sidebar {
+      width: 280px;
+      background-color: var(--surface-color);
+      border-right: 1px solid var(--outline-color);
+      display: flex;
+      flex-direction: column;
+      overflow-y: auto;
+      box-shadow: var(--elevation-level-1);
+    }
+
+    .sidebar-header {
+      padding: 16px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      border-bottom: 1px solid var(--outline-color);
+      background-color: var(--surface-variant-color);
+      color: var(--on-surface-variant-color);
+    }
+
+    .note-list {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+      flex-grow: 1;
+      overflow-y: auto;
+    }
+
+    .note-item {
+      padding: 16px;
+      cursor: pointer;
+      border-bottom: 1px solid var(--outline-color);
+      transition: background-color 0.2s, transform 0.1s;
+      border-radius: 12px;
+      margin: 8px;
+    }
+
+    .note-item:hover {
+      background-color: var(--surface-variant-color);
+      transform: translateY(-2px);
+    }
+
+    .note-item.active {
+      background-color: var(--primary-container-color);
+      color: var(--on-primary-container-color);
+      box-shadow: var(--elevation-level-1);
+    }
+
+    .note-item-title {
+      font-weight: 500;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      margin-bottom: 4px;
+    }
+
+    .note-item-preview {
+      font-size: 0.85rem;
+      opacity: 0.75;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .editor-container {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      overflow: hidden;
+    }
+
+    .toolbar {
+      background-color: var(--surface-color);
+      border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+      padding: 8px 16px;
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 8px;
+    }
+
+    .editor {
+      flex: 1;
+      padding: 16px;
+      overflow-y: auto;
+      outline: none;
+      font-size: 1rem;
+      line-height: 1.6;
+      border: none;
+      background-color: var(--surface-color);
+      color: var(--on-surface-color);
+      resize: none;
+    }
+
+    .button {
+      background-color: var(--primary-container-color);
+      color: var(--on-primary-container-color);
+      border: none;
+      border-radius: 20px;
+      padding: 10px 16px;
+      font-family: 'Google Sans', sans-serif;
+      font-size: 0.875rem;
+      font-weight: 500;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      transition: all 0.2s ease;
+      box-shadow: var(--elevation-level-1);
+    }
+
+    .button:hover {
+      background-color: var(--primary-container-color);
+      opacity: 0.9;
+      box-shadow: var(--elevation-level-2);
+    }
+
+    .button-icon {
+      font-size: 1.25rem;
+    }
+
+    .theme-selector {
+      margin-left: auto;
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 8px;
+      background-color: var(--surface-variant-color);
+      border-radius: 24px;
+    }
+
+    .theme-button {
+      width: 32px;
+      height: 32px;
+      border-radius: 50%;
+      border: 2px solid transparent;
+      cursor: pointer;
+      transition: transform 0.2s, border-color 0.2s;
+    }
+
+    .theme-button.active {
+      border-color: var(--primary-color);
+      transform: scale(1.2);
+    }
+
+    .theme-light {
+      background-color: #FFFBFE;
+    }
+
+    .theme-dark {
+      background-color: #1C1B1F;
+    }
+
+    .theme-sepia {
+      background-color: #F5F5DC;
+    }
+
+    .status-bar {
+      padding: 8px 16px;
+      font-size: 0.75rem;
+      background-color: var(--surface-color);
+      border-top: 1px solid rgba(0, 0, 0, 0.12);
+      display: flex;
+      justify-content: space-between;
+    }
+
+    .modal {
+      display: none;
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: rgba(0, 0, 0, 0.5);
+      justify-content: center;
+      align-items: center;
+      z-index: 1000;
+    }
+
+    .modal-content {
+      background-color: var(--surface-color);
+      padding: 32px;
+      border-radius: 28px;
+      width: 100%;
+      max-width: 400px;
+      box-shadow: var(--elevation-level-3);
+    }
+
+    .modal-title {
+      font-size: 1.5rem;
+      font-weight: 500;
+      margin-top: 0;
+      margin-bottom: 24px;
+      color: var(--on-surface-color);
+      font-family: 'Google Sans', sans-serif;
+    }
+
+    .form-field {
+      margin-bottom: 24px;
+    }
+
+    .input-field {
+      width: 100%;
+      padding: 16px;
+      font-family: 'Google Sans', 'Roboto', sans-serif;
+      font-size: 1rem;
+      border: 2px solid var(--outline-color);
+      border-radius: 16px;
+      background-color: var(--surface-color);
+      color: var(--on-surface-color);
+      transition: border-color 0.2s;
+    }
+
+    .input-field:focus {
+      border-color: var(--primary-color);
+      outline: none;
+    }
+
+    .modal-actions {
+      display: flex;
+      justify-content: flex-end;
+      gap: 8px;
+    }
+
+    .info-message {
+      background-color: var(--container-color);
+      color: var(--on-container-color);
+      padding: 8px 16px;
+      margin: 8px 0;
+      border-radius: 4px;
+      display: none;
+    }
+
+    @media (max-width: 768px) {
+      .sidebar {
+        position: absolute;
+        left: -250px;
+        height: 100%;
+        transition: left 0.3s ease;
+        z-index: 100;
       }
-    </script>
 
-    <!-- Material Web Components (MWC) - This MUST come AFTER the importmap -->
-    <!-- Switched to unpkg.com -->
-    <script type="module" src="https://unpkg.com/@material/web@1.4.1/all.js"></script>
+      .sidebar.open {
+        left: 0;
+      }
 
-    <style>
-        body {
-            font-family: 'Roboto', sans-serif;
-            margin: 0;
-            background-color: #fff; /* Fallback */
-            color: #000; /* Fallback */
-            opacity: 0; /* Hidden by default to prevent FOUC */
-            transition: opacity 0.3s ease-in-out;
-        }
-        body.loaded {
-            opacity: 1; /* Shown when MWC and app script are ready */
-        }
-        /* Hide dialog by default to prevent flash of unstyled content */
-        md-dialog:not([open]) {
-            display: none !important;
-        }
-    </style>
+      .toggle-sidebar {
+        display: block;
+      }
+    }
+
+    .hidden {
+      display: none;
+    }
+
+    .material-symbols-outlined {
+      font-size: 24px;
+    }
+  </style>
 </head>
 <body>
-    <div class="container">
-        <header>
-            <h1 id="appTitle">MNotes</h1>
-            <md-icon-button id="themeToggleBtn" aria-label="Toggle theme">
-                <md-icon>dark_mode</md-icon>
-            </md-icon-button>
-        </header>
+  <div class="header">
+    <div class="left-section">
+      <button id="toggleSidebar" class="button">
+        <span class="material-symbols-rounded">menu</span>
+      </button>
+      <h1 class="app-title">MNotes</h1>
+    </div>
+    <div class="theme-selector">
+      <button class="theme-button theme-light active" data-theme="light" title="Light theme"></button>
+      <button class="theme-button theme-dark" data-theme="dark" title="Dark theme"></button>
+      <button class="theme-button theme-sepia" data-theme="sepia" title="Sepia theme"></button>
+    </div>
+  </div>
 
-        <div id="notesList">
-            <!-- Notes will be rendered here -->
-        </div>
-
-        <md-fab aria-label="Add Note" id="addNoteFab" variant="primary">
-            <md-icon slot="icon">add</md-icon>
-        </md-fab>
+  <div class="main-container">
+    <div class="sidebar" id="sidebar">
+      <div class="sidebar-header">
+        <h2>Notes</h2>
+        <button id="newNoteBtn" class="button">
+          <span class="material-symbols-rounded">add</span>
+        </button>
+      </div>
+      <ul class="note-list" id="noteList">
+        <!-- Note items will be added here -->
+      </ul>
     </div>
 
-    <md-dialog id="noteDialog">
-        <div slot="headline">Add/Edit Note</div>
-        <form slot="content" id="noteForm" method="dialog">
-            <input type="hidden" id="noteIdInput">
-            <md-filled-text-field label="Title" id="noteTitleInput" required style="width: 100%; margin-bottom: 16px;"></md-filled-text-field>
-            <md-outlined-text-field label="Content" id="noteContentInput" type="textarea" rows="5" required style="width: 100%; margin-bottom: 16px;"></md-outlined-text-field>
-        </form>
-        <div slot="actions">
-            <md-text-button form="noteForm" value="cancel">Cancel</md-text-button>
-            <md-filled-button form="noteForm" value="save" type="submit">Save</md-filled-button>
-        </div>
-    </md-dialog>
+    <div class="editor-container">
+      <div class="toolbar">
+        <button id="saveNote" class="button">
+          <span class="material-symbols-rounded">save</span>
+          Save
+        </button>
+        <button id="downloadNote" class="button">
+          <span class="material-symbols-rounded">download</span>
+          Download
+        </button>
+        <button id="githubSave" class="button">
+          <span class="material-symbols-rounded">cloud_upload</span>
+          Save to GitHub
+        </button>
+        <button id="deleteNote" class="button">
+          <span class="material-symbols-rounded">delete</span>
+          Delete
+        </button>
+      </div>
+      <textarea id="editor" class="editor" placeholder="Start typing your note here..."></textarea>
+      <div class="status-bar">
+        <span id="wordCount">0 words</span>
+        <span id="lastSaved">Not saved yet</span>
+      </div>
+    </div>
+  </div>
 
-    <script src="script.js"></script>
+  <!-- GitHub Auth Modal -->
+  <div class="modal" id="githubModal">
+    <div class="modal-content">
+      <h2 class="modal-title">GitHub Authentication</h2>
+      <div class="form-field">
+        <input type="text" id="githubUsername" class="input-field" placeholder="GitHub Username">
+      </div>
+      <div class="form-field">
+        <input type="password" id="githubToken" class="input-field" placeholder="Personal Access Token">
+      </div>
+      <div class="form-field">
+        <input type="text" id="githubRepo" class="input-field" placeholder="Repository Name">
+      </div>
+      <div class="info-message" id="githubMessage"></div>
+      <div class="modal-actions">
+        <button id="cancelGithubAuth" class="button">Cancel</button>
+        <button id="confirmGithubAuth" class="button">Connect</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- New Note Modal -->
+  <div class="modal" id="newNoteModal">
+    <div class="modal-content">
+      <h2 class="modal-title">Create New Note</h2>
+      <div class="form-field">
+        <input type="text" id="newNoteTitle" class="input-field" placeholder="Note Title">
+      </div>
+      <div class="modal-actions">
+        <button id="cancelNewNote" class="button">Cancel</button>
+        <button id="confirmNewNote" class="button">Create</button>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    // Main app logic
+    document.addEventListener('DOMContentLoaded', function() {
+      // State variables
+      let notes = [];
+      let currentNoteId = null;
+      let githubAuth = {
+        username: '',
+        token: '',
+        repo: ''
+      };
+
+      // DOM elements
+      const editor = document.getElementById('editor');
+      const noteList = document.getElementById('noteList');
+      const wordCount = document.getElementById('wordCount');
+      const lastSaved = document.getElementById('lastSaved');
+      const toggleSidebarBtn = document.getElementById('toggleSidebar');
+      const sidebar = document.getElementById('sidebar');
+      const newNoteBtn = document.getElementById('newNoteBtn');
+      const saveNoteBtn = document.getElementById('saveNote');
+      const downloadNoteBtn = document.getElementById('downloadNote');
+      const githubSaveBtn = document.getElementById('githubSave');
+      const deleteNoteBtn = document.getElementById('deleteNote');
+      const themeButtons = document.querySelectorAll('.theme-button');
+      
+      // Modals
+      const githubModal = document.getElementById('githubModal');
+      const githubUsername = document.getElementById('githubUsername');
+      const githubToken = document.getElementById('githubToken');
+      const githubRepo = document.getElementById('githubRepo');
+      const githubMessage = document.getElementById('githubMessage');
+      const confirmGithubAuth = document.getElementById('confirmGithubAuth');
+      const cancelGithubAuth = document.getElementById('cancelGithubAuth');
+      
+      const newNoteModal = document.getElementById('newNoteModal');
+      const newNoteTitle = document.getElementById('newNoteTitle');
+      const confirmNewNote = document.getElementById('confirmNewNote');
+      const cancelNewNote = document.getElementById('cancelNewNote');
+
+      // Load data from localStorage
+      function loadFromLocalStorage() {
+        // Load notes
+        const savedNotes = localStorage.getItem('notes');
+        if (savedNotes) {
+          notes = JSON.parse(savedNotes);
+          renderNoteList();
+        }
+
+        // Load theme
+        const savedTheme = localStorage.getItem('theme');
+        if (savedTheme) {
+          setTheme(savedTheme);
+        }
+
+        // Load GitHub auth
+        const savedGithubAuth = localStorage.getItem('githubAuth');
+        if (savedGithubAuth) {
+          githubAuth = JSON.parse(savedGithubAuth);
+        }
+      }
+
+      // Create a new note
+      function createNewNote(title) {
+        const newNote = {
+          id: Date.now().toString(),
+          title: title || 'Untitled Note',
+          content: '',
+          createdAt: new Date().toISOString(),
+          updatedAt: new Date().toISOString()
+        };
+        
+        notes.push(newNote);
+        saveNotesToLocalStorage();
+        renderNoteList();
+        openNote(newNote.id);
+      }
+
+      // Open a note
+      function openNote(noteId) {
+        const note = notes.find(n => n.id === noteId);
+        if (!note) return;
+
+        currentNoteId = noteId;
+        editor.value = note.content;
+        updateWordCount();
+        updateLastSaved(note.updatedAt);
+        
+        // Update active state in note list
+        const noteItems = document.querySelectorAll('.note-item');
+        noteItems.forEach(item => {
+          if (item.dataset.id === noteId) {
+            item.classList.add('active');
+          } else {
+            item.classList.remove('active');
+          }
+        });
+      }
+
+      // Save the current note
+      function saveCurrentNote() {
+        if (!currentNoteId) return;
+        
+        const noteIndex = notes.findIndex(n => n.id === currentNoteId);
+        if (noteIndex === -1) return;
+        
+        notes[noteIndex].content = editor.value;
+        notes[noteIndex].updatedAt = new Date().toISOString();
+        
+        saveNotesToLocalStorage();
+        updateLastSaved(notes[noteIndex].updatedAt);
+        renderNoteList();
+      }
+
+      // Delete the current note
+      function deleteCurrentNote() {
+        if (!currentNoteId) return;
+        
+        const confirmDelete = confirm('Are you sure you want to delete this note?');
+        if (!confirmDelete) return;
+        
+        notes = notes.filter(n => n.id !== currentNoteId);
+        saveNotesToLocalStorage();
+        renderNoteList();
+        
+        if (notes.length > 0) {
+          openNote(notes[0].id);
+        } else {
+          currentNoteId = null;
+          editor.value = '';
+          updateWordCount();
+          updateLastSaved(null);
+        }
+      }
+
+      // Download the current note as Markdown
+      function downloadNoteAsMarkdown() {
+        if (!currentNoteId) return;
+        
+        const note = notes.find(n => n.id === currentNoteId);
+        if (!note) return;
+        
+        const filename = `${note.title.replace(/[^a-z0-9]/gi, '_').toLowerCase()}.md`;
+        const content = note.content;
+        
+        const blob = new Blob([content], { type: 'text/markdown' });
+        const url = URL.createObjectURL(blob);
+        
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = filename;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+      }
+
+      // Save to GitHub
+      async function saveToGithub() {
+        if (!currentNoteId || !githubAuth.username || !githubAuth.token || !githubAuth.repo) {
+          showGithubModal();
+          return;
+        }
+        
+        const note = notes.find(n => n.id === currentNoteId);
+        if (!note) return;
+        
+        const filename = `notes/${note.title.replace(/[^a-z0-9]/gi, '_').toLowerCase()}.md`;
+        const content = note.content;
+        
+        try {
+          // First, try to get the file to see if it exists
+          let sha;
+          try {
+            const getResponse = await fetch(`https://api.github.com/repos/${githubAuth.username}/${githubAuth.repo}/contents/${filename}`, {
+              headers: {
+                'Authorization': `token ${githubAuth.token}`
+              }
+            });
+            
+            if (getResponse.status === 200) {
+              const fileData = await getResponse.json();
+              sha = fileData.sha;
+            }
+          } catch (error) {
+            // File doesn't exist, that's fine
+          }
+          
+          // Now create or update the file
+          const response = await fetch(`https://api.github.com/repos/${githubAuth.username}/${githubAuth.repo}/contents/${filename}`, {
+            method: 'PUT',
+            headers: {
+              'Authorization': `token ${githubAuth.token}`,
+              'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+              message: `Update note: ${note.title}`,
+              content: btoa(unescape(encodeURIComponent(content))),
+              sha: sha
+            })
+          });
+          
+          if (response.status === 200 || response.status === 201) {
+            alert('Note saved to GitHub successfully!');
+          } else {
+            const error = await response.json();
+            throw new Error(error.message);
+          }
+        } catch (error) {
+          alert(`Error saving to GitHub: ${error.message}`);
+        }
+      }
+
+      // Show GitHub modal
+      function showGithubModal() {
+        githubUsername.value = githubAuth.username || '';
+        githubToken.value = githubAuth.token || '';
+        githubRepo.value = githubAuth.repo || '';
+        githubModal.style.display = 'flex';
+      }
+
+      // Hide GitHub modal
+      function hideGithubModal() {
+        githubModal.style.display = 'none';
+      }
+
+      // Show new note modal
+      function showNewNoteModal() {
+        newNoteTitle.value = '';
+        newNoteModal.style.display = 'flex';
+        newNoteTitle.focus();
+      }
+
+      // Hide new note modal
+      function hideNewNoteModal() {
+        newNoteModal.style.display = 'none';
+      }
+
+      // Save GitHub auth
+      function saveGithubAuth() {
+        githubAuth.username = githubUsername.value.trim();
+        githubAuth.token = githubToken.value.trim();
+        githubAuth.repo = githubRepo.value.trim();
+        
+        if (!githubAuth.username || !githubAuth.token || !githubAuth.repo) {
+          githubMessage.textContent = 'All fields are required';
+          githubMessage.style.display = 'block';
+          return;
+        }
+        
+        localStorage.setItem('githubAuth', JSON.stringify(githubAuth));
+        hideGithubModal();
+        
+        // Try to save the current note to GitHub
+        if (currentNoteId) {
+          saveToGithub();
+        }
+      }
+
+      // Save notes to localStorage
+      function saveNotesToLocalStorage() {
+        localStorage.setItem('notes', JSON.stringify(notes));
+      }
+
+      // Render the note list
+      function renderNoteList() {
+        noteList.innerHTML = '';
+        
+        if (notes.length === 0) {
+          const emptyItem = document.createElement('li');
+          emptyItem.className = 'note-item';
+          emptyItem.textContent = 'No notes yet';
+          noteList.appendChild(emptyItem);
+          return;
+        }
+        
+        // Sort notes by updated date (newest first)
+        const sortedNotes = [...notes].sort((a, b) => {
+          return new Date(b.updatedAt) - new Date(a.updatedAt);
+        });
+        
+        sortedNotes.forEach(note => {
+          const noteItem = document.createElement('li');
+          noteItem.className = 'note-item';
+          if (note.id === currentNoteId) {
+            noteItem.classList.add('active');
+          }
+          noteItem.dataset.id = note.id;
+          
+          const titleElement = document.createElement('div');
+          titleElement.className = 'note-item-title';
+          titleElement.textContent = note.title;
+          
+          const previewElement = document.createElement('div');
+          previewElement.className = 'note-item-preview';
+          previewElement.textContent = note.content.substring(0, 50) || 'Empty note';
+          
+          noteItem.appendChild(titleElement);
+          noteItem.appendChild(previewElement);
+          
+          noteItem.addEventListener('click', () => {
+            openNote(note.id);
+          });
+          
+          noteList.appendChild(noteItem);
+        });
+      }
+
+      // Update word count
+      function updateWordCount() {
+        const text = editor.value.trim();
+        const words = text ? text.split(/\s+/).length : 0;
+        wordCount.textContent = `${words} word${words === 1 ? '' : 's'}`;
+      }
+
+      // Update last saved timestamp
+      function updateLastSaved(timestamp) {
+        if (!timestamp) {
+          lastSaved.textContent = 'Not saved yet';
+          return;
+        }
+        
+        const date = new Date(timestamp);
+        lastSaved.textContent = `Last saved: ${date.toLocaleString()}`;
+      }
+
+      // Set theme
+      function setTheme(theme) {
+        document.body.className = '';
+        if (theme !== 'light') {
+          document.body.classList.add(`theme-${theme}`);
+        }
+        
+        themeButtons.forEach(button => {
+          if (button.dataset.theme === theme) {
+            button.classList.add('active');
+          } else {
+            button.classList.remove('active');
+          }
+        });
+        
+        localStorage.setItem('theme', theme);
+      }
+
+      // Toggle sidebar (for mobile)
+      function toggleSidebar() {
+        sidebar.classList.toggle('open');
+      }
+
+      // Event listeners
+      editor.addEventListener('input', () => {
+        updateWordCount();
+      });
+
+      toggleSidebarBtn.addEventListener('click', toggleSidebar);
+      
+      saveNoteBtn.addEventListener('click', saveCurrentNote);
+      downloadNoteBtn.addEventListener('click', downloadNoteAsMarkdown);
+      githubSaveBtn.addEventListener('click', saveToGithub);
+      deleteNoteBtn.addEventListener('click', deleteCurrentNote);
+      
+      newNoteBtn.addEventListener('click', showNewNoteModal);
+      
+      confirmGithubAuth.addEventListener('click', saveGithubAuth);
+      cancelGithubAuth.addEventListener('click', hideGithubModal);
+      
+      confirmNewNote.addEventListener('click', () => {
+        const title = newNoteTitle.value.trim() || 'Untitled Note';
+        createNewNote(title);
+        hideNewNoteModal();
+      });
+      
+      cancelNewNote.addEventListener('click', hideNewNoteModal);
+      
+      // Theme selection
+      themeButtons.forEach(button => {
+        button.addEventListener('click', () => {
+          setTheme(button.dataset.theme);
+        });
+      });
+
+      // Auto-save timer (every 30 seconds)
+      setInterval(() => {
+        if (currentNoteId && editor.value) {
+          saveCurrentNote();
+        }
+      }, 30000);
+
+      // Initialize
+      loadFromLocalStorage();
+      
+      // Create first note if none exist
+      if (notes.length === 0) {
+        createNewNote('Welcome Note');
+      } else {
+        openNote(notes[0].id);
+      }
+    });
+  </script>
 </body>
 </html>
