diff --git a/doc/src/components/features.jsx b/doc/src/components/features.jsx
index 9066b78..d2bbd5b 100644
--- a/doc/src/components/features.jsx
+++ b/doc/src/components/features.jsx
@@ -2,7 +2,7 @@ import Typography from "./general/typography";
 
 const Features = () => {
   return (
-    <div className="p-6 bg-gray-900 shadow-lg rounded-lg md:p-8 lg:p-10">
+    <div className="p-6 bg-black shadow-lg rounded-lg md:p-8 lg:p-10">
       <Typography
         variant="h4"
         className="mb-6 text-gray-100 text-center md:text-left font-bold"
diff --git a/doc/src/components/helloWorld.jsx b/doc/src/components/helloWorld.jsx
index b76283f..5469a15 100644
--- a/doc/src/components/helloWorld.jsx
+++ b/doc/src/components/helloWorld.jsx
@@ -3,7 +3,7 @@ import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { dracula } from 'react-syntax-highlighter/dist/esm/styles/prism';
 const HelloWorld = () => {
   return (
-    <div className="p-6 bg-gray-900 shadow-lg rounded-lg md:p-8 lg:p-10">
+    <div className="p-6 bg-black shadow-lg rounded-lg md:p-8 lg:p-10">
       <h3 className="mb-6 text-gray-100">Hello World with Hasty Server</h3>
       <p className="mb-6 text-gray-300 leading-relaxed">
         Hasty Server allows you to quickly set up a web server.
diff --git a/doc/src/components/installation.jsx b/doc/src/components/installation.jsx
index d29a865..cff0266 100644
--- a/doc/src/components/installation.jsx
+++ b/doc/src/components/installation.jsx
@@ -4,7 +4,7 @@ import { dracula } from "react-syntax-highlighter/dist/esm/styles/prism"; // Use
 
 const Installation = () => {
   return (
-    <div className="p-6 bg-gray-900 shadow-lg rounded-lg md:p-8 lg:p-10">
+    <div className="p-6 bg-black shadow-lg rounded-lg md:p-8 lg:p-10">
       <Typography
         variant="h4"
         className="mb-6 text-gray-100 text-center md:text-left"
diff --git a/doc/src/components/introduction.jsx b/doc/src/components/introduction.jsx
index 9d51458..d6fa99f 100644
--- a/doc/src/components/introduction.jsx
+++ b/doc/src/components/introduction.jsx
@@ -1,7 +1,7 @@
 
 const Introduction = () => {
   return (
-    <div className="p-6 bg-gray-900 shadow-lg rounded-lg md:p-8 lg:p-10">
+    <div className="p-6 bg-black shadow-lg rounded-lg md:p-8 lg:p-10">
       <h3 className="mb-6 text-gray-100">Introduction</h3>
       <p className="mb-6 text-gray-300 leading-relaxed">
         Hasty Server is a lightweight, fast, and easy-to-use web server written entirely in 
diff --git a/doc/src/components/quick-start.jsx b/doc/src/components/quick-start.jsx
index b98e997..21d98fa 100644
--- a/doc/src/components/quick-start.jsx
+++ b/doc/src/components/quick-start.jsx
@@ -5,7 +5,7 @@ import { coy } from "react-syntax-highlighter/dist/esm/styles/prism";
 
 const QuickStart = () => {
   return (
-    <div className="p-6 bg-gray-900 shadow-lg rounded-lg md:p-8 lg:p-10">
+    <div className="p-6 bg-black shadow-lg rounded-lg md:p-8 lg:p-10">
       <Typography variant="h4" className="mb-6 text-gray-100">
         Quick Start
       </Typography>
diff --git a/doc/src/layout.jsx b/doc/src/layout.jsx
index d61237a..9be0e11 100644
--- a/doc/src/layout.jsx
+++ b/doc/src/layout.jsx
@@ -12,7 +12,7 @@ const Layout = ({ children }) => {
       <Header />
       <div className="flex flex-1">
         <nav
-          className={`w-48 bg-gray-900 p-4 ${
+          className={`w-48 bg-black p-4 ${
             isNavOpen ? "block" : "hidden"
           } md:block`}
         >