diff --git a/docs-site/src/components/Examples/style.scss b/docs-site/src/components/Examples/style.scss
index 9f3fa0528..f716791d2 100644
--- a/docs-site/src/components/Examples/style.scss
+++ b/docs-site/src/components/Examples/style.scss
@@ -113,3 +113,16 @@ input {
 .text-success {
   color: green;
 }
+
+.react-datepicker__day {
+  &.highlighted-day {
+    background-color: #ccc;
+    color: #000;
+    border-radius: 0.3rem;
+
+    &:not([aria-disabled="true"]):hover {
+      background-color: #aaa;
+      color: #000;
+    }
+  }
+}
diff --git a/docs-site/src/examples/ts/customDayClassName.tsx b/docs-site/src/examples/ts/customDayClassName.tsx
index 12c307b6b..1d5835874 100644
--- a/docs-site/src/examples/ts/customDayClassName.tsx
+++ b/docs-site/src/examples/ts/customDayClassName.tsx
@@ -2,7 +2,7 @@ const CustomDayClassName = () => {
   const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
   const getDayClassName = (date: Date): string => {
-    return date.getDate() === 1 ? "text-success" : "";
+    return date.getDate() === 1 ? "highlighted-day" : "";
   };
 
   return (