diff --git a/src/components/EnterpriseInstallReminder.js b/src/components/EnterpriseInstallReminder.js
index c932c8ece..7949cf3f7 100644
--- a/src/components/EnterpriseInstallReminder.js
+++ b/src/components/EnterpriseInstallReminder.js
@@ -1,19 +1,29 @@
 import React from "react";
 import Link from "@docusaurus/Link";
+import {useColorMode} from "@docusaurus/theme-common";
 
 export default function EnterpriseInstallReminder() {
+  const {colorMode} = useColorMode();
+  const isDark = colorMode === "dark";
+
+  const containerStyle = {
+    padding: "1rem",
+    border: isDark ? "1px solid #333" : "1px solid #eee",
+    borderRadius: "10px",
+    background: isDark ? "#23272f" : "#fff8f5",
+    margin: "2rem 0",
+    color: isDark ? "#fff" : "#222",
+    boxShadow: isDark
+      ? "0 2px 10px rgba(0,0,0,0.6)"
+      : "0 2px 6px rgba(0, 0, 0, 0.08)",
+  };
+
   return (
     <div
-      style={{
-        padding: "1rem",
-        border: "1px solid #eee",
-        borderRadius: "10px",
-        background: "#fff8f5",
-        margin: "2rem 0",
-      }}
+      style={containerStyle}
     >
-      <h3>Don’t have Keploy installed yet?</h3>
-      <p>
+      <h3 style={{marginTop: 0, color: isDark ? "#fff" : "#222"}}>Don’t have Keploy installed yet?</h3>
+      <p style={{color: isDark ? "#ccc" : undefined}}>
         Before running this sample, make sure Keploy Enterprise version is
         installed on your system.
       </p>
diff --git a/src/components/InstallReminder.js b/src/components/InstallReminder.js
index 5643dbe6f..f878133b1 100644
--- a/src/components/InstallReminder.js
+++ b/src/components/InstallReminder.js
@@ -1,19 +1,29 @@
 import React from "react";
 import Link from "@docusaurus/Link";
+import {useColorMode} from "@docusaurus/theme-common";
 
 export default function InstallReminder() {
+  const {colorMode} = useColorMode();
+  const isDark = colorMode === "dark";
+
+  const containerStyle = {
+    padding: "1rem",
+    border: isDark ? "1px solid #333" : "1px solid #eee",
+    borderRadius: "10px",
+    background: isDark ? "#23272f" : "#fff8f5",
+    margin: "2rem 0",
+    color: isDark ? "#fff" : "#222",
+    boxShadow: isDark
+      ? "0 2px 10px rgba(0,0,0,0.6)"
+      : "0 2px 6px rgba(0, 0, 0, 0.08)",
+  };
+
   return (
     <div
-      style={{
-        padding: "1rem",
-        border: "1px solid #eee",
-        borderRadius: "10px",
-        background: "#fff8f5",
-        margin: "2rem 0",
-      }}
+      style={containerStyle}
     >
-      <h3>Don’t have Keploy installed yet?</h3>
-      <p>
+      <h3 style={{marginTop: 0, color: isDark ? "#fff" : "#222"}}>Don’t have Keploy installed yet?</h3>
+      <p style={{color: isDark ? "#ccc" : undefined}}>
         Before running this sample, make sure Keploy is installed on your
         system.
       </p>