diff --git a/public/index.php b/public/index.php
index 0ed91d5..2d981f6 100644
--- a/public/index.php
+++ b/public/index.php
@@ -183,7 +183,7 @@ class CodePressCMS {
     
     private function generateDirectoryListing($dirPath, $urlPath) {
         $title = ucfirst(basename($dirPath));
-        $content = '<div class="list-group">';
+        $content = '<div class="row">';
         
         $items = scandir($dirPath);
         sort($items);
@@ -196,15 +196,36 @@ class CodePressCMS {
             $itemName = ucfirst(pathinfo($item, PATHINFO_FILENAME));
             
             if (is_dir($path)) {
-                $content .= '<a href="?page=' . $relativePath . '" class="list-group-item list-group-item-action">';
-                $content .= '<i class="bi bi-folder me-2"></i> ' . $itemName;
-                $content .= '</a>';
+                $content .= '<div class="col-md-6 mb-4">';
+                $content .= '<div class="card h-100 border-0 rounded-0 bg-light">';
+                $content .= '<div class="card-body">';
+                $content .= '<h3 class="h5 card-title"><a href="?page=' . $relativePath . '" class="text-decoration-none text-dark"><i class="bi bi-folder me-2"></i> ' . $itemName . '</a></h3>';
+                $content .= '</div></div></div>';
             } elseif (preg_match('/\.(md|php|html)$/', $item)) {
                 // Remove extension from URL for cleaner links
                 $cleanPath = preg_replace('/\.[^.]+$/', '', $relativePath);
-                $content .= '<a href="?page=' . $cleanPath . '" class="list-group-item list-group-item-action">';
-                $content .= '<i class="bi bi-file-text me-2"></i> ' . $itemName;
-                $content .= '</a>';
+                
+                // Get preview content
+                $preview = '';
+                $fileContent = file_get_contents($path);
+                
+                // Extract title if possible
+                $fileTitle = $itemName;
+                if (preg_match('/^#\s+(.+)$/m', $fileContent, $matches)) {
+                    $fileTitle = trim($matches[1]);
+                }
+                
+                // Extract preview text (first paragraph)
+                $fileContent = strip_tags($this->parseMarkdown($fileContent)['content']);
+                $preview = substr($fileContent, 0, 150) . '...';
+                
+                $content .= '<div class="col-md-6 mb-4">';
+                $content .= '<div class="card h-100 border rounded-0">';
+                $content .= '<div class="card-body">';
+                $content .= '<h3 class="h5 card-title"><a href="?page=' . $cleanPath . '" class="text-decoration-none text-primary">' . $fileTitle . '</a></h3>';
+                $content .= '<p class="card-text text-muted small">' . $preview . '</p>';
+                $content .= '<a href="?page=' . $cleanPath . '" class="btn btn-sm btn-outline-primary rounded-0">Lees meer</a>';
+                $content .= '</div></div></div>';
             }
         }