diff --git a/public/index.html b/public/index.html
index 3504cfa..bf242dc 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,11 +4,606 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Notes & Todos</title>
-    <link rel="stylesheet" type="text/css" href="/css/styles.css">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap">
+    <style>
+        /* Base styles */
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
+        :root {
+            --primary-color: #3B82F6;
+            --background-color: #FAFAFA;
+            --card-background: #FFFFFF;
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            line-height: 1.5;
+            color: #111827;
+            background-color: var(--background-color);
+        }
+
+        /* Utility classes */
+        .hidden {
+            display: none !important;
+        }
+
+        .bg-white {
+            background-color: white;
+        }
+
+        .bg-gray-50 {
+            background-color: #F9FAFB;
+        }
+
+        .text-center {
+            text-align: center;
+        }
+
+        .font-bold {
+            font-weight: 700;
+        }
+
+        .font-medium {
+            font-weight: 500;
+        }
+
+        .text-2xl {
+            font-size: 1.5rem;
+        }
+
+        .text-xl {
+            font-size: 1.25rem;
+        }
+
+        .text-sm {
+            font-size: 0.875rem;
+        }
+
+        .mb-1 {
+            margin-bottom: 0.25rem;
+        }
+
+        .mb-4 {
+            margin-bottom: 1rem;
+        }
+
+        .mb-6 {
+            margin-bottom: 1.5rem;
+        }
+
+        .mb-8 {
+            margin-bottom: 2rem;
+        }
+
+        .ml-2 {
+            margin-left: 0.5rem;
+        }
+
+        .ml-4 {
+            margin-left: 1rem;
+        }
+
+        .ml-auto {
+            margin-left: auto;
+        }
+
+        .p-1 {
+            padding: 0.25rem;
+        }
+
+        .p-2 {
+            padding: 0.5rem;
+        }
+
+        .p-4 {
+            padding: 1rem;
+        }
+
+        .p-6 {
+            padding: 1.5rem;
+        }
+
+        .p-8 {
+            padding: 2rem;
+        }
+
+        .px-4 {
+            padding-left: 1rem;
+            padding-right: 1rem;
+        }
+
+        .py-2 {
+            padding-top: 0.5rem;
+            padding-bottom: 0.5rem;
+        }
+
+        .pt-4 {
+            padding-top: 1rem;
+        }
+
+        .rounded {
+            border-radius: 0.25rem;
+        }
+
+        .rounded-lg {
+            border-radius: 0.5rem;
+        }
+
+        .rounded-full {
+            border-radius: 9999px;
+        }
+
+        .border {
+            border: 1px solid #E5E7EB;
+        }
+
+        .border-t {
+            border-top: 1px solid #E5E7EB;
+        }
+
+        .border-r {
+            border-right: 1px solid #E5E7EB;
+        }
+
+        .shadow-md {
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+        }
+
+        .shadow-sm {
+            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+        }
+
+        .w-full {
+            width: 100%;
+        }
+
+        .w-96 {
+            width: 24rem;
+        }
+
+        .w-64 {
+            width: 16rem;
+        }
+
+        .w-4 {
+            width: 1rem;
+        }
+
+        .h-4 {
+            height: 1rem;
+        }
+
+        .min-h-screen {
+            min-height: 100vh;
+        }
+
+        .min-h-\[200px\] {
+            min-height: 200px;
+        }
+
+        .flex {
+            display: flex;
+        }
+
+        .grid {
+            display: grid;
+        }
+
+        .grid-cols-4 {
+            grid-template-columns: repeat(4, minmax(0, 1fr));
+        }
+
+        .gap-4 {
+            gap: 1rem;
+        }
+
+        .space-y-2 > * + * {
+            margin-top: 0.5rem;
+        }
+
+        .space-y-4 > * + * {
+            margin-top: 1rem;
+        }
+
+        .space-x-4 > * + * {
+            margin-left: 1rem;
+        }
+
+        .items-center {
+            align-items: center;
+        }
+
+        .justify-center {
+            justify-content: center;
+        }
+
+        .justify-between {
+            justify-content: space-between;
+        }
+
+        .fixed {
+            position: fixed;
+        }
+
+        .absolute {
+            position: absolute;
+        }
+
+        .relative {
+            position: relative;
+        }
+
+        .inset-0 {
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+        }
+
+        .left-0 {
+            left: 0;
+        }
+
+        .top-0 {
+            top: 0;
+        }
+
+        .left-2 {
+            left: 0.5rem;
+        }
+
+        .top-2\.5 {
+            top: 0.625rem;
+        }
+
+        .truncate {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        .overflow-y-auto {
+            overflow-y: auto;
+        }
+
+        .bg-opacity-50 {
+            --tw-bg-opacity: 0.5;
+        }
+
+        .text-gray-400 {
+            color: #9CA3AF;
+        }
+
+        .text-gray-500 {
+            color: #6B7280;
+        }
+
+        .text-gray-600 {
+            color: #4B5563;
+        }
+
+        .text-gray-900 {
+            color: #111827;
+        }
+
+        .text-white {
+            color: white;
+        }
+
+        .text-red-600 {
+            color: #DC2626;
+        }
+
+        .text-blue-600 {
+            color: #2563EB;
+        }
+
+        .hover\:bg-gray-100:hover {
+            background-color: #F3F4F6;
+        }
+
+        .hover\:text-gray-900:hover {
+            color: #111827;
+        }
+
+        .hover\:text-red-600:hover {
+            color: #DC2626;
+        }
+
+        .focus\:outline-none:focus {
+            outline: none;
+        }
+
+        /* Transitions */
+        .transition {
+            transition: all 200ms ease-in-out;
+        }
+
+        /* Form elements */
+        input[type="text"],
+        input[type="password"],
+        textarea {
+            width: 100%;
+            padding: 0.5rem 0.75rem;
+            border: 1px solid #E5E7EB;
+            border-radius: 0.375rem;
+            background-color: white;
+        }
+
+        input[type="text"]:focus,
+        input[type="password"]:focus,
+        textarea:focus {
+            outline: none;
+            border-color: var(--primary-color);
+            ring: 2px var(--primary-color);
+        }
+
+        /* Buttons */
+        button {
+            cursor: pointer;
+        }
+
+        .btn {
+            padding: 0.5rem 1rem;
+            border-radius: 0.375rem;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 200ms;
+        }
+
+        .btn-primary {
+            background-color: var(--primary-color);
+            color: white;
+        }
+
+        .btn-primary:hover {
+            background-color: #2563EB;
+        }
+
+        /* Note item in sidebar */
+        .note-item {
+            padding: 0.75rem;
+            border-radius: 0.375rem;
+            cursor: pointer;
+            transition: background-color 200ms;
+        }
+
+        .note-item:hover {
+            background-color: #F3F4F6;
+        }
+
+        .note-item.active {
+            background-color: #EFF6FF;
+            border-left: 3px solid var(--primary-color);
+        }
+
+        /* Todo items */
+        .todo-item {
+            display: flex;
+            align-items: center;
+            padding: 0.5rem;
+            border-radius: 0.375rem;
+            background-color: #F9FAFB;
+        }
+
+        .todo-item input[type="checkbox"] {
+            margin-right: 0.75rem;
+        }
+
+        .todo-item.completed {
+            text-decoration: line-through;
+            color: #6B7280;
+        }
+
+        /* Image thumbnails */
+        .image-thumbnail {
+            position: relative;
+            aspect-ratio: 1;
+            border-radius: 0.375rem;
+            overflow: hidden;
+        }
+
+        .image-thumbnail img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+
+        .image-thumbnail .delete-btn {
+            position: absolute;
+            top: 0.25rem;
+            right: 0.25rem;
+            padding: 0.25rem;
+            background-color: rgba(0, 0, 0, 0.5);
+            border-radius: 9999px;
+            color: white;
+            cursor: pointer;
+        }
+
+        /* Admin panel styles */
+        .user-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0.75rem;
+            background-color: #F9FAFB;
+            border-radius: 0.375rem;
+        }
+
+        .user-item .actions {
+            display: flex;
+            gap: 0.5rem;
+        }
+
+        /* Animations */
+        @keyframes fadeIn {
+            from { opacity: 0; }
+            to { opacity: 1; }
+        }
+
+        .fade-in {
+            animation: fadeIn 200ms ease-in-out;
+        }
+
+        /* Layout */
+        aside {
+            position: fixed;
+            left: 0;
+            top: 0;
+            height: 100%;
+            width: 16rem;
+            background-color: white;
+            border-right: 1px solid #E5E7EB;
+            overflow-y: auto;
+        }
+
+        main {
+            margin-left: 16rem;
+            padding: 2rem;
+        }
+
+        /* Responsive adjustments */
+        @media (max-width: 768px) {
+            aside {
+                width: 100%;
+                height: auto;
+                position: relative;
+            }
+
+            main {
+                margin-left: 0;
+            }
+
+            .note-editor {
+                margin: 1rem;
+            }
+        }
+    </style>
 </head>
 <body class="bg-gray-50">
-    <!-- Le reste du HTML reste inchangé -->
-    <!-- ... -->
+    <!-- Auth Container -->
+    <div id="auth-container" class="min-h-screen flex items-center justify-center">
+        <div class="bg-white p-8 rounded-lg shadow-md w-96">
+            <h1 class="text-2xl font-bold mb-6 text-center">Connexion</h1>
+            <form id="login-form" class="space-y-4">
+                <div>
+                    <label class="block text-sm font-medium mb-1">Nom d'utilisateur</label>
+                    <input type="text" id="username" class="w-full p-2 border rounded" required>
+                </div>
+                <div>
+                    <label class="block text-sm font-medium mb-1">Mot de passe</label>
+                    <input type="password" id="password" class="w-full p-2 border rounded" required>
+                </div>
+                <button type="submit" style="width: 100%; background-color: #3B82F6; color: white; padding: 0.5rem; border-radius: 0.375rem; font-weight: 500; transition: all 200ms;">
+                    Se connecter
+                </button>
+            </form>
+        </div>
+    </div>
+
+    <!-- Main App Container -->
+    <div id="app-container" class="hidden min-h-screen">
+        <!-- Sidebar -->
+        <aside class="fixed left-0 top-0 h-full w-64 bg-white border-r border-gray-200 overflow-y-auto">
+            <div class="p-4">
+                <div class="flex items-center justify-between mb-6">
+                    <h1 class="text-xl font-bold">Notes & Todos</h1>
+                    <button id="new-note-btn" class="p-2 rounded-full hover:bg-gray-100">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+                    </button>
+                </div>
+                <div class="relative mb-4">
+                    <input type="text" id="search-notes" placeholder="Rechercher..." 
+                           class="w-full pl-8 pr-3 py-2 border rounded bg-gray-50">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="absolute left-2 top-2.5 text-gray-400 w-4 h-4"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+                </div>
+                <div id="notes-list" class="space-y-2">
+                    <!-- Notes will be dynamically inserted here -->
+                </div>
+            </div>
+        </aside>
+
+        <!-- Main Content -->
+        <main class="ml-64 p-8">
+            <header class="flex justify-between items-center mb-8">
+                <div class="flex items-center space-x-4">
+                    <button id="archive-note-btn" class="text-gray-600 hover:text-gray-900">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-archive"><polyline points="21 8 21 21 3 21 3 8"></polyline><rect x="1" y="3" width="22" height="5"></rect><line x1="10" y1="12" x2="14" y2="12"></line></svg>
+                    </button>
+                    <button id="delete-note-btn" class="text-gray-600 hover:text-red-600">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
+                    </button>
+                </div>
+                <div class="flex items-center space-x-4">
+                    <span id="user-info" class="text-sm text-gray-600"></span>
+                    <button id="logout-btn" class="text-gray-600 hover:text-gray-900">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-log-out"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
+                    </button>
+                </div>
+            </header>
+
+            <div id="note-editor" class="bg-white rounded-lg shadow-sm p-6 max-w-4xl mx-auto">
+                <input type="text" id="note-title" placeholder="Titre" 
+                       class="w-full text-2xl font-bold mb-4 border-none focus:outline-none">
+                <div id="note-content" contenteditable="true" 
+                     class="min-h-[200px] mb-4 focus:outline-none"></div>
+                
+                <div class="border-t pt-4">
+                    <div class="flex items-center mb-4">
+                        <h3 class="font-medium">Todos</h3>
+                        <button id="add-todo-btn" class="ml-2 p-1 rounded-full hover:bg-gray-100">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
+                        </button>
+                    </div>
+                    <div id="todos-list" class="space-y-2">
+                        <!-- Todos will be dynamically inserted here -->
+                    </div>
+                </div>
+
+                <div class="border-t mt-4 pt-4">
+                    <div class="flex items-center mb-4">
+                        <h3 class="font-medium">Images</h3>
+                        <label for="image-upload" class="ml-2 p-1 rounded-full hover:bg-gray-100 cursor-pointer">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><polyline points="21 15 16 10 5 21"></polyline></svg>
+                        </label>
+                        <input type="file" id="image-upload" class="hidden" accept="image/*">
+                    </div>
+                    <div id="images-list" class="grid grid-cols-4 gap-4">
+                        <!-- Images will be dynamically inserted here -->
+                    </div>
+                </div>
+            </div>
+        </main>
+
+        <!-- Admin Panel -->
+        <div id="admin-panel" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
+            <div class="bg-white rounded-lg p-6 w-[600px]">
+                <div class="flex justify-between items-center mb-4">
+                    <h2 class="text-xl font-bold">Gestion des utilisateurs</h2>
+                    <button id="close-admin-btn" class="text-gray-600 hover:text-gray-900">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+                    </button>
+                </div>
+                <div class="mb-4">
+                    <button id="add-user-btn" style="background-color: #3B82F6; color: white; padding: 0.5rem 1rem; border-radius: 0.375rem;">
+                        Ajouter un utilisateur
+                    </button>
+                </div>
+                <div id="users-list" class="space-y-2">
+                    <!-- Users will be dynamically inserted here -->
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="/js/auth.js"></script>
+    <script src="/js/notes.js"></script>
+    <script src="/js/admin.js"></script>
+    <script src="/js/app.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/server.js b/server.js
index 2c8827a..8b737fb 100644
--- a/server.js
+++ b/server.js
@@ -42,15 +42,7 @@ app.use(helmet({
 }));
 app.use(cors());
 app.use(express.json());
-
-// Serve static files with correct MIME types
-app.use(express.static('public', {
-    setHeaders: (res, path) => {
-        if (path.endsWith('.css')) {
-            res.setHeader('Content-Type', 'text/css');
-        }
-    }
-}));
+app.use(express.static('public'));
 
 // Set JWT_SECRET environment variable if not set
 if (!process.env.JWT_SECRET) {