diff --git a/components/carnet/navigation.tsx b/components/carnet/navigation.tsx
index 6c3e3f34..d07fe53a 100644
--- a/components/carnet/navigation.tsx
+++ b/components/carnet/navigation.tsx
@@ -1,13 +1,28 @@
 "use client";
 
 import React, { useState } from 'react';
-import { Search, FileText, Calendar, Heart, Users, ChevronRight, Folder } from 'lucide-react';
+import { Search, BookOpen, Tag, Trash2, Star, Archive, X, Folder, FileText, Calendar, Heart, Users, LucideIcon, ChevronRight } from 'lucide-react';
 
 interface NavigationProps {
   nextcloudFolders: string[];
   onFolderSelect: (folder: string) => void;
 }
 
+type FolderType = 'Notes' | 'Diary' | 'Health' | 'Contacts';
+
+interface FolderConfig {
+  icon: LucideIcon;
+  order: number;
+}
+
+// Define folder order and icons
+const FOLDER_CONFIG: Record<FolderType, FolderConfig> = {
+  'Notes': { icon: FileText, order: 1 },
+  'Diary': { icon: Calendar, order: 2 },
+  'Health': { icon: Heart, order: 3 },
+  'Contacts': { icon: Users, order: 4 }
+};
+
 interface ContactGroup {
   name: string;
   contacts: string[];
@@ -48,82 +63,88 @@ export default function Navigation({ nextcloudFolders, onFolderSelect }: Navigat
     }
   };
 
+  // Sort folders according to the specified order
+  const sortedFolders = [...nextcloudFolders].sort((a, b) => {
+    const orderA = (FOLDER_CONFIG[a as FolderType]?.order) || 999;
+    const orderB = (FOLDER_CONFIG[b as FolderType]?.order) || 999;
+    return orderA - orderB;
+  });
+
   return (
-    <div className="flex flex-col h-full bg-carnet-bg border-r border-carnet-border">
-      {/* Search Bar */}
-      <div className="p-4 border-b border-carnet-border">
+    <div className="flex flex-col h-full bg-carnet-sidebar">
+      {/* Search */}
+      <div className="p-4">
         <div className="relative">
           <input
             type="text"
             value={searchQuery}
             onChange={(e) => setSearchQuery(e.target.value)}
-            placeholder="Rechercher..."
+            placeholder="Recherché..."
             className="w-full pl-9 pr-4 py-2 bg-white border border-carnet-border rounded-md text-sm text-carnet-text-primary placeholder-carnet-text-muted focus:outline-none focus:ring-1 focus:ring-primary"
           />
           <Search className="absolute left-3 top-2.5 h-4 w-4 text-carnet-text-muted" />
+          {searchQuery && (
+            <button
+              onClick={() => setSearchQuery('')}
+              className="absolute right-3 top-2.5 text-carnet-text-muted hover:text-carnet-text-primary"
+            >
+              <X className="h-4 w-4" />
+            </button>
+          )}
         </div>
       </div>
 
-      {/* Folders List */}
-      <div className="flex-1 overflow-y-auto">
-        <ul className="py-2">
-          {nextcloudFolders.map((folder) => (
-            <li key={folder}>
-              {folder === 'Contacts' ? (
-                <>
-                  <button
-                    onClick={() => onFolderSelect(folder)}
-                    className="w-full flex items-center px-4 py-2 text-sm text-carnet-text-primary hover:bg-carnet-hover"
-                  >
-                    <Users className="h-4 w-4 mr-2" />
-                    <span>{folder}</span>
-                  </button>
-                  {/* Contact Groups */}
-                  <ul className="ml-6">
+      {/* Folders */}
+      <div className="flex-1 overflow-y-auto p-4">
+        <div className="space-y-1">
+          {sortedFolders.map((folder) => {
+            const Icon = getFolderIcon(folder);
+            return (
+              <div key={folder}>
+                <button
+                  onClick={() => onFolderSelect(folder)}
+                  className="w-full flex items-center space-x-2 px-3 py-2 text-sm rounded-md text-carnet-text-primary hover:bg-carnet-hover"
+                >
+                  <Icon className="h-4 w-4" />
+                  <span>{folder}</span>
+                </button>
+                {folder === 'Contacts' && (
+                  <div className="ml-4 mt-1 space-y-1">
                     {contactGroups.map((group) => (
-                      <li key={group.name}>
+                      <div key={group.name}>
                         <button
                           onClick={() => toggleGroup(group.name)}
-                          className="w-full flex items-center px-4 py-2 text-sm text-carnet-text-primary hover:bg-carnet-hover"
+                          className="w-full flex items-center space-x-2 px-3 py-2 text-sm rounded-md text-carnet-text-primary hover:bg-carnet-hover"
                         >
                           <ChevronRight 
-                            className={`h-4 w-4 mr-2 transition-transform ${
+                            className={`h-4 w-4 transition-transform ${
                               expandedGroups.has(group.name) ? 'transform rotate-90' : ''
                             }`}
                           />
-                          <Folder className="h-4 w-4 mr-2" />
+                          <Folder className="h-4 w-4" />
                           <span>{group.name}</span>
                         </button>
                         {expandedGroups.has(group.name) && (
-                          <ul className="ml-4">
+                          <div className="ml-4 space-y-1">
                             {group.contacts.map((contact) => (
-                              <li key={contact}>
-                                <button
-                                  onClick={() => onFolderSelect(`${folder}/${group.name}/${contact}`)}
-                                  className="w-full flex items-center px-4 py-2 text-sm text-carnet-text-muted hover:bg-carnet-hover"
-                                >
-                                  <span className="ml-6">{contact}</span>
-                                </button>
-                              </li>
+                              <button
+                                key={contact}
+                                onClick={() => onFolderSelect(`${folder}/${group.name}/${contact}`)}
+                                className="w-full flex items-center space-x-2 px-3 py-2 text-sm rounded-md text-carnet-text-muted hover:bg-carnet-hover"
+                              >
+                                <span>{contact}</span>
+                              </button>
                             ))}
-                          </ul>
+                          </div>
                         )}
-                      </li>
+                      </div>
                     ))}
-                  </ul>
-                </>
-              ) : (
-                <button
-                  onClick={() => onFolderSelect(folder)}
-                  className="w-full flex items-center px-4 py-2 text-sm text-carnet-text-primary hover:bg-carnet-hover"
-                >
-                  {React.createElement(getFolderIcon(folder), { className: "h-4 w-4 mr-2" })}
-                  <span>{folder}</span>
-                </button>
-              )}
-            </li>
-          ))}
-        </ul>
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </div>
       </div>
     </div>
   );