diff --git a/app/carnet/page.tsx b/app/carnet/page.tsx
index b835aa49..947b3675 100644
--- a/app/carnet/page.tsx
+++ b/app/carnet/page.tsx
@@ -9,6 +9,7 @@ import { Editor } from "@/components/carnet/editor";
 import { PanelResizer } from "@/components/carnet/panel-resizer";
 import { useMediaQuery } from "@/hooks/use-media-query";
 import { ContactsView } from '@/components/carnet/contacts-view';
+import { X, Menu } from "lucide-react";
 
 // Layout modes
 export enum PaneLayout {
@@ -139,10 +140,29 @@ export default function CarnetPage() {
           throw new Error('Failed to fetch notes');
         }
         const data = await response.json();
-        setNotes(data);
+        if (selectedFolder === 'Contacts') {
+          // For contacts, parse the VCF files
+          const parsedContacts = await Promise.all(
+            data.map(async (file: any) => {
+              const contentResponse = await fetch(`/api/nextcloud/files/content?id=${file.filename}`);
+              if (contentResponse.ok) {
+                const content = await contentResponse.text();
+                return parseVCard(content);
+              }
+              return null;
+            })
+          );
+          setContacts(parsedContacts.filter(Boolean));
+        } else {
+          setNotes(data);
+        }
       } catch (error) {
-        console.error('Error fetching notes:', error);
-        setNotes([]);
+        console.error('Error fetching data:', error);
+        if (selectedFolder === 'Contacts') {
+          setContacts([]);
+        } else {
+          setNotes([]);
+        }
       } finally {
         setIsLoadingNotes(false);
       }
@@ -343,17 +363,12 @@ export default function CarnetPage() {
           {/* Navigation Panel */}
           {showNav && (
             <>
-              <div 
-                className="flex flex-col h-full bg-carnet-sidebar"
-                style={{ width: `${navWidth}px` }}
-              >
+              <div className="flex-none" style={{ width: navWidth }}>
                 <Navigation 
-                  nextcloudFolders={nextcloudFolders}
+                  nextcloudFolders={nextcloudFolders} 
                   onFolderSelect={handleFolderSelect}
                 />
               </div>
-
-              {/* Navigation Resizer */}
               <PanelResizer
                 isDragging={isDraggingNav}
                 onDragStart={() => setIsDraggingNav(true)}
@@ -363,7 +378,7 @@ export default function CarnetPage() {
             </>
           )}
 
-          {/* Notes Panel */}
+          {/* Notes/Contacts Panel */}
           {showNotes && (
             <>
               <div className="flex-1 overflow-hidden">
@@ -372,7 +387,7 @@ export default function CarnetPage() {
                     contacts={contacts}
                     onContactSelect={setSelectedContact}
                     selectedContact={selectedContact}
-                    loading={isLoadingContacts}
+                    loading={isLoadingNotes}
                   />
                 ) : (
                   <NotesView 
@@ -406,28 +421,26 @@ export default function CarnetPage() {
                 // Refresh the notes list
                 fetch(`/api/nextcloud/files?folder=${selectedFolder}`)
                   .then(response => response.json())
-                  .then(updatedNotes => setNotes(updatedNotes))
-                  .catch(error => console.error('Error refreshing notes:', error));
+                  .then(updatedNotes => {
+                    if (selectedFolder === 'Contacts') {
+                      setContacts(updatedNotes);
+                    } else {
+                      setNotes(updatedNotes);
+                    }
+                  })
+                  .catch(error => console.error('Error refreshing data:', error));
               }}
             />
           </div>
 
           {/* Mobile Navigation Toggle */}
           {isMobile && (
-            <div className="fixed bottom-4 right-4 flex space-x-2">
-              <button
-                className="p-2 rounded-full bg-primary text-white"
-                onClick={() => setShowNav(!showNav)}
-              >
-                {showNav ? 'Hide Nav' : 'Show Nav'}
-              </button>
-              <button
-                className="p-2 rounded-full bg-primary text-white"
-                onClick={() => setShowNotes(!showNotes)}
-              >
-                {showNotes ? 'Hide Notes' : 'Show Notes'}
-              </button>
-            </div>
+            <button
+              onClick={() => setShowNav(!showNav)}
+              className="fixed bottom-4 right-4 bg-primary text-white p-3 rounded-full shadow-lg"
+            >
+              {showNav ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
+            </button>
           )}
         </div>
       </div>