diff --git a/app/carnet/page.tsx b/app/carnet/page.tsx
index 54c7997d..23f080e9 100644
--- a/app/carnet/page.tsx
+++ b/app/carnet/page.tsx
@@ -10,6 +10,7 @@ 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";
+import { ContactDetails } from '@/components/carnet/contact-details';
 
 // Layout modes
 export enum PaneLayout {
@@ -495,24 +496,28 @@ export default function CarnetPage() {
 
           {/* Editor Panel */}
           <div className="flex-1 overflow-hidden">
-            <Editor 
-              note={selectedNote} 
-              onSave={handleNoteSave}
-              currentFolder={selectedFolder}
-              onRefresh={() => {
-                // Refresh the notes list
-                fetch(`/api/nextcloud/files?folder=${selectedFolder}`)
-                  .then(response => response.json())
-                  .then(updatedNotes => {
-                    if (selectedFolder === 'Contacts') {
-                      setContacts(updatedNotes);
-                    } else {
-                      setNotes(updatedNotes);
-                    }
-                  })
-                  .catch(error => console.error('Error refreshing data:', error));
-              }}
-            />
+            {selectedFolder === 'Contacts' || selectedFolder.endsWith('.vcf') ? (
+              <ContactDetails contact={selectedContact} />
+            ) : (
+              <Editor 
+                note={selectedNote} 
+                onSave={handleNoteSave}
+                currentFolder={selectedFolder}
+                onRefresh={() => {
+                  // Refresh the notes list
+                  fetch(`/api/nextcloud/files?folder=${selectedFolder}`)
+                    .then(response => response.json())
+                    .then(updatedNotes => {
+                      if (selectedFolder === 'Contacts') {
+                        setContacts(updatedNotes);
+                      } else {
+                        setNotes(updatedNotes);
+                      }
+                    })
+                    .catch(error => console.error('Error refreshing data:', error));
+                }}
+              />
+            )}
           </div>
 
           {/* Mobile Navigation Toggle */}
diff --git a/components/carnet/contact-details.tsx b/components/carnet/contact-details.tsx
new file mode 100644
index 00000000..2ea250bf
--- /dev/null
+++ b/components/carnet/contact-details.tsx
@@ -0,0 +1,112 @@
+"use client";
+
+import React from 'react';
+import { User, Mail, Phone, Building, MapPin } from 'lucide-react';
+
+interface Contact {
+  id: string;
+  fullName?: string;
+  email?: string;
+  phone?: string;
+  organization?: string;
+  address?: string;
+  notes?: string;
+  group?: string;
+}
+
+interface ContactDetailsProps {
+  contact: Contact | null;
+}
+
+export const ContactDetails: React.FC<ContactDetailsProps> = ({ contact }) => {
+  if (!contact) {
+    return (
+      <div className="flex flex-col h-full bg-carnet-bg items-center justify-center text-carnet-text-muted">
+        <User className="h-16 w-16 mb-4 opacity-20" />
+        <p>Sélectionnez un contact pour voir les détails</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col h-full bg-carnet-bg p-6">
+      <div className="space-y-6">
+        {/* Contact Header */}
+        <div className="flex items-center space-x-4">
+          <div className="h-16 w-16 rounded-full bg-primary/10 flex items-center justify-center">
+            <User className="h-8 w-8 text-primary" />
+          </div>
+          <div>
+            <h2 className="text-xl font-semibold text-carnet-text-primary">
+              {contact.fullName || contact.email || 'Sans nom'}
+            </h2>
+            {contact.organization && (
+              <p className="text-sm text-carnet-text-muted">
+                {contact.organization}
+              </p>
+            )}
+          </div>
+        </div>
+
+        {/* Contact Information */}
+        <div className="space-y-4">
+          {contact.email && (
+            <div className="flex items-center space-x-3">
+              <div className="h-8 w-8 rounded-full bg-blue-50 flex items-center justify-center">
+                <Mail className="h-4 w-4 text-blue-500" />
+              </div>
+              <div>
+                <p className="text-xs text-carnet-text-muted">Email</p>
+                <p className="text-sm text-carnet-text-primary">{contact.email}</p>
+              </div>
+            </div>
+          )}
+
+          {contact.phone && (
+            <div className="flex items-center space-x-3">
+              <div className="h-8 w-8 rounded-full bg-green-50 flex items-center justify-center">
+                <Phone className="h-4 w-4 text-green-500" />
+              </div>
+              <div>
+                <p className="text-xs text-carnet-text-muted">Téléphone</p>
+                <p className="text-sm text-carnet-text-primary">{contact.phone}</p>
+              </div>
+            </div>
+          )}
+
+          {contact.organization && (
+            <div className="flex items-center space-x-3">
+              <div className="h-8 w-8 rounded-full bg-purple-50 flex items-center justify-center">
+                <Building className="h-4 w-4 text-purple-500" />
+              </div>
+              <div>
+                <p className="text-xs text-carnet-text-muted">Organisation</p>
+                <p className="text-sm text-carnet-text-primary">{contact.organization}</p>
+              </div>
+            </div>
+          )}
+
+          {contact.address && (
+            <div className="flex items-center space-x-3">
+              <div className="h-8 w-8 rounded-full bg-orange-50 flex items-center justify-center">
+                <MapPin className="h-4 w-4 text-orange-500" />
+              </div>
+              <div>
+                <p className="text-xs text-carnet-text-muted">Adresse</p>
+                <p className="text-sm text-carnet-text-primary">{contact.address}</p>
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Notes Section */}
+        {contact.notes && (
+          <div className="mt-6">
+            <h3 className="text-sm font-medium text-carnet-text-primary mb-2">Notes</h3>
+            <p className="text-sm text-carnet-text-muted whitespace-pre-wrap">{contact.notes}</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}; 
\ No newline at end of file
diff --git a/components/carnet/contacts-view.tsx b/components/carnet/contacts-view.tsx
index 9cff5c76..d1ef2c9e 100644
--- a/components/carnet/contacts-view.tsx
+++ b/components/carnet/contacts-view.tsx
@@ -91,56 +91,6 @@ export const ContactsView: React.FC<ContactsViewProps> = ({
           </ul>
         )}
       </div>
-
-      {/* Contact Details */}
-      {selectedContact && (
-        <div className="p-4 border-t border-carnet-border">
-          <div className="space-y-4">
-            <div className="flex items-center space-x-3">
-              <div className="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center">
-                <User className="h-6 w-6 text-primary" />
-              </div>
-              <div>
-                <h3 className="text-lg font-semibold text-carnet-text-primary">
-                  {selectedContact.fullName}
-                </h3>
-                {selectedContact.organization && (
-                  <p className="text-sm text-carnet-text-muted">
-                    {selectedContact.organization}
-                  </p>
-                )}
-              </div>
-            </div>
-
-            <div className="space-y-3">
-              {selectedContact.email && (
-                <div className="flex items-center space-x-2">
-                  <Mail className="h-4 w-4 text-carnet-text-muted" />
-                  <span className="text-sm text-carnet-text-primary">{selectedContact.email}</span>
-                </div>
-              )}
-              {selectedContact.phone && (
-                <div className="flex items-center space-x-2">
-                  <Phone className="h-4 w-4 text-carnet-text-muted" />
-                  <span className="text-sm text-carnet-text-primary">{selectedContact.phone}</span>
-                </div>
-              )}
-              {selectedContact.address && (
-                <div className="flex items-center space-x-2">
-                  <MapPin className="h-4 w-4 text-carnet-text-muted" />
-                  <span className="text-sm text-carnet-text-primary">{selectedContact.address}</span>
-                </div>
-              )}
-              {selectedContact.notes && (
-                <div className="mt-4">
-                  <h4 className="text-sm font-medium text-carnet-text-primary mb-2">Notes</h4>
-                  <p className="text-sm text-carnet-text-muted">{selectedContact.notes}</p>
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
-      )}
     </div>
   );
 }; 
\ No newline at end of file