diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 3314e47..f891149 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -16,7 +16,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={`${inter.className} bg-[#1D1F1D]`}>{children}</body>
     </html>
   );
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
index b221635..ff56f3f 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -5,9 +5,9 @@ import { cn } from "../lib/utils";
 
 export default function Home() {
   return (
-    <main className="flex min-h-screen flex-col px-20 bg-[#F9F6EE]">
+    <main className="flex min-h-screen flex-col px-20 bg-[#1D1F1D]">
       {/* Title */}
-      <div className="text-4xl w-full justify-center text-center items-center flex py-12 font-medium text-gray-600">
+      <div className="text-4xl w-full justify-center text-center items-center flex py-12 font-medium text-orange-600">
         <span>Kevo&#39;s Attire</span>
       </div>
 
diff --git a/src/components/ui/MenuCard/MenuCard.tsx b/src/components/ui/MenuCard/MenuCard.tsx
index 8d3cf1f..c2717c9 100644
--- a/src/components/ui/MenuCard/MenuCard.tsx
+++ b/src/components/ui/MenuCard/MenuCard.tsx
@@ -18,12 +18,12 @@ const inter = Inter({ subsets: ["latin"] });
 
 const MenuCard = ({ Menu }: any) => {
   return (
-    <div className="grid desktop:grid-cols-5 tablet:grid-cols-3 md:grid-cols-2 grid-cols-1 grid-flow-row gap-y-6 md:gap-x-6">
+    <div className="grid desktop:grid-cols-5 tablet:grid-cols-3 md:grid-cols-2 grid-cols-1 grid-flow-row gap-y-6 md:gap-x-6 ">
       {Menu.map((menu_item: any) => {
         return (
           <Card
             key={menu_item.id}
-            className="flex-1 flex-col max-w-[325px] h-[452px] relative shadow-xl rounded-xl overflow-hidden bg-slate-500"
+            className="flex-1 flex-col max-w-[325px] h-[452px] relative overflow-hidden bg-slate-600 border-slate-600"
           >
             <div className="w-full h-[68%]">
               <div className="h-full relative w-full">
@@ -44,11 +44,11 @@ const MenuCard = ({ Menu }: any) => {
                 {/* title and photo */}
                 <div className="inline-block">
                   <h4
-                    className={`pt-2 float-left ${extraBold.className} flex-wrap w-3/4`}
+                    className={`pt-2 float-left ${extraBold.className} flex-wrap w-3/4 text-emerald-500`}
                   >
                     <strong>{menu_item.name}</strong>
                   </h4>
-                  <div className="right-4 absolute h-[25px] flex flex-row w-1/4 mt-2">
+                  <div className="right-4 absolute h-[25px] flex flex-row w-1/4 mt-2 text-orange-500">
                     {menu_item.inStock === "yes" ? (
                       <span>In Stock!</span>
                     ) : (
@@ -75,7 +75,7 @@ const MenuCard = ({ Menu }: any) => {
                 {/* description text */}
                 <div className="inline-block text-left pt-2">
                   <p
-                    className={`max-w-[75ch] ${inter.className} leading-tight font-[12px] text-gray-400 `}
+                    className={`max-w-[75ch] ${inter.className} leading-tight font-[12px] text-blue-400 `}
                   >
                     {menu_item.description}
                   </p>
