diff --git a/web/app/guides/page.tsx b/web/app/guides/page.tsx
index 9e11084..1fd9c81 100644
--- a/web/app/guides/page.tsx
+++ b/web/app/guides/page.tsx
@@ -2,6 +2,7 @@ import fs from "fs"
 import path from "path"
 import matter from "gray-matter"
 import Link from "next/link"
+import Footer from "@/components/footer"
 
 const guidesDirectory = path.join(process.cwd(), "..", "guides")
 
@@ -45,7 +46,7 @@ export default function GuidesPage() {
   const guides = getGuides()
 
   return (
-    <div className="min-h-screen bg-gray-900 text-white">
+    <div className="min-h-screen bg-gray-900">
       <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>
@@ -54,10 +55,10 @@ export default function GuidesPage() {
             <Link
               key={guide.slug}
               href={`/guides/${guide.slug}`}
-              className="block p-6 bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-shadow"
+              className="block p-6 bg-white 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>
+              <h2 className="text-2xl font-semibold mb-2 text-gray-900">{guide.title}</h2>
+              <p className="text-gray-600">{guide.description}</p>
             </Link>
           ))}
         </div>