diff --git a/web/app/guides/page.tsx b/web/app/guides/page.tsx
index a6d20ed..9e11084 100644
--- a/web/app/guides/page.tsx
+++ b/web/app/guides/page.tsx
@@ -45,20 +45,22 @@ export default function GuidesPage() {
   const guides = getGuides()
 
   return (
-    <div className="container mx-auto px-4 py-16">
-      <h1 className="text-4xl font-bold mb-8">ProxMenux Guides</h1>
-      <p className="text-xl mb-8">Complementary guides to make the most of your Proxmox VE.</p>
-      <div className="grid md:grid-cols-2 gap-6">
-        {guides.map((guide) => (
-          <Link
-            key={guide.slug}
-            href={`/guides/${guide.slug}`}
-            className="block p-6 bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow"
-          >
-            <h2 className="text-2xl font-semibold mb-2 text-gray-900">{guide.title}</h2>
-            <p className="text-gray-600">{guide.description}</p>
-          </Link>
-        ))}
+    <div className="min-h-screen bg-gray-900 text-white">
+      <div className="container mx-auto px-4 py-16">
+        <h1 className="text-4xl font-bold mb-8">ProxMenux Guides</h1>
+        <p className="text-xl mb-8">Complementary guides to make the most of your Proxmox VE.</p>
+        <div className="grid md:grid-cols-2 gap-6">
+          {guides.map((guide) => (
+            <Link
+              key={guide.slug}
+              href={`/guides/${guide.slug}`}
+              className="block p-6 bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-shadow"
+            >
+              <h2 className="text-2xl font-semibold mb-2 text-white">{guide.title}</h2>
+              <p className="text-gray-300">{guide.description}</p>
+            </Link>
+          ))}
+        </div>
       </div>
     </div>
   )