diff --git a/components/carnet/navigation.tsx b/components/carnet/navigation.tsx
index d6ed16f4..3e770720 100644
--- a/components/carnet/navigation.tsx
+++ b/components/carnet/navigation.tsx
@@ -2,6 +2,7 @@
 
 import React, { useState, useEffect } from 'react';
 import { Search, BookOpen, Tag, Trash2, Star, Archive, X, Folder, FileText, Calendar, Heart, Users, LucideIcon, ChevronRight } from 'lucide-react';
+import { Card } from '@/components/ui/card';
 
 interface NavigationProps {
   nextcloudFolders: string[];
@@ -163,31 +164,33 @@ export default function Navigation({ nextcloudFolders, onFolderSelect }: Navigat
 
   return (
     <div className="flex flex-col h-full bg-carnet-sidebar">
-      {/* Search */}
-      <div className="p-4">
-        <div className="flex items-center gap-2 mb-2">
-          <FileText className="h-4 w-4 text-carnet-text-primary" />
-          <span className="text-sm font-semibold text-carnet-text-primary">PAGES</span>
+      <Card className="p-4">
+        {/* Search */}
+        <div className="space-y-4">
+          <div className="flex items-center gap-2">
+            <FileText className="h-4 w-4 text-carnet-text-primary" />
+            <span className="text-sm font-semibold text-carnet-text-primary">PAGES</span>
+          </div>
+          <div className="relative">
+            <input
+              type="text"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              placeholder="Recherche..."
+              className="w-full pl-8 pr-4 py-1.5 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-2 top-1.5 h-3.5 w-3.5 text-carnet-text-muted" />
+            {searchQuery && (
+              <button
+                onClick={() => setSearchQuery('')}
+                className="absolute right-2 top-1.5 text-carnet-text-muted hover:text-carnet-text-primary"
+              >
+                <X className="h-3.5 w-3.5" />
+              </button>
+            )}
+          </div>
         </div>
-        <div className="relative">
-          <input
-            type="text"
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-            placeholder="Recherche..."
-            className="w-full pl-8 pr-4 py-1.5 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-2 top-1.5 h-3.5 w-3.5 text-carnet-text-muted" />
-          {searchQuery && (
-            <button
-              onClick={() => setSearchQuery('')}
-              className="absolute right-2 top-1.5 text-carnet-text-muted hover:text-carnet-text-primary"
-            >
-              <X className="h-3.5 w-3.5" />
-            </button>
-          )}
-        </div>
-      </div>
+      </Card>
 
       {/* Folders */}
       <div className="flex-1 overflow-y-auto p-4">