diff --git a/src/calendar/stories/CalendarStyled.component.tsx b/src/calendar/stories/CalendarStyled.component.tsx
index f8a9fcb38..6b764427f 100644
--- a/src/calendar/stories/CalendarStyled.component.tsx
+++ b/src/calendar/stories/CalendarStyled.component.tsx
@@ -22,6 +22,8 @@ import {
 
 import { ChevronLeft, ChevronRight } from "./Utils.component";
 
+import "./CalendarStyled.css";
+
 export type CalendarStyledProps = Omit<
   CalendarBaseStateProps,
   "locale" | "createCalendar"
@@ -34,26 +36,14 @@ export const CalendarStyled: React.FC<CalendarStyledProps> = props => {
   const calendar = useCalendarState({ ...props, state });
 
   return (
-    <Calendar
-      state={calendar}
-      className="p-3 bg-white rounded-md shadow-lg styled-datepicker calendar w-max"
-    >
-      <div className="flex justify-between">
-        <CalendarPreviousButton
-          state={calendar}
-          className="text-gray-700 px-2 py-1 rounded-md focus:outline-none focus:ring-2 focus:ring-border-400"
-        >
-          <ChevronLeft className="flex-shrink-0 w-4" />
+    <Calendar state={calendar} className="calendar">
+      <div className="calendar--wrapper">
+        <CalendarPreviousButton state={calendar} className="calendar__button">
+          <ChevronLeft className="calendar__button_chevron" />
         </CalendarPreviousButton>
-        <CalendarTitle
-          state={calendar}
-          className="text-sm font-bold text-gray-700 px-2 py-1"
-        />
-        <CalendarNextButton
-          state={calendar}
-          className="text-gray-700 px-2 py-1 rounded-md focus:outline-none focus:ring-2 focus:ring-border-400"
-        >
-          <ChevronRight className="flex-shrink-0 w-4" />
+        <CalendarTitle state={calendar} className="calendar__title" />
+        <CalendarNextButton state={calendar} className="calendar__button">
+          <ChevronRight className="calendar__button_chevron" />
         </CalendarNextButton>
       </div>
       <CalendarGridComp state={state} />
diff --git a/src/calendar/stories/CalendarStyled.css b/src/calendar/stories/CalendarStyled.css
new file mode 100644
index 000000000..97d09c950
--- /dev/null
+++ b/src/calendar/stories/CalendarStyled.css
@@ -0,0 +1,82 @@
+.calendar {
+  padding: 1rem;
+  background-color: #ffffff;
+  width: max-content;
+  border-radius: 0.375rem;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
+    0 4px 6px -2px rgba(0, 0, 0, 0.05);
+}
+
+.calendar--wrapper {
+  display: flex;
+  justify-content: space-between;
+}
+
+.calendar__button {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  color: #374151;
+  background-color: #ffffff !important;
+  border-radius: 0.375rem;
+  border: none !important;
+}
+
+.calendar__button:focus {
+  cursor: pointer;
+  outline: none;
+}
+
+.calendar__button_chevron {
+  flex-shrink: 0;
+  width: 1rem;
+  cursor: pointer;
+}
+
+.calendar__title {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  color: #374151;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 700;
+}
+
+.dates {
+  padding: 0.75rem;
+}
+
+.calendar [data-weekend] {
+  color: #dc2626;
+}
+
+.calendar [aria-selected="true"] {
+  color: #ffffff;
+  background-color: #3b82f6;
+}
+
+.calendar [aria-selected="true"] {
+  color: #ffffff;
+  background-color: #3b82f6;
+}
+
+.calendar [aria-selected]:focus-within {
+  background-color: #f3f4f6;
+}
+
+.calendar [aria-selected="true"]:focus-within {
+  color: #ffffff;
+  background-color: #3b82f6;
+}
+
+.calendar [aria-disabled="true"] {
+  color: #6b7280;
+}
+
+.calendar span {
+  outline: none;
+  cursor: pointer;
+}
diff --git a/src/calendar/stories/CalendarStyled.stories.tsx b/src/calendar/stories/CalendarStyled.stories.tsx
index 0fce93a1f..91d475acd 100644
--- a/src/calendar/stories/CalendarStyled.stories.tsx
+++ b/src/calendar/stories/CalendarStyled.stories.tsx
@@ -9,8 +9,6 @@ import jsUtils from "./templates/UtilsJsx";
 import tsUtils from "./templates/UtilsTsx";
 import { CalendarStyled } from "./CalendarStyled.component";
 
-import "./tailwind.css";
-
 type Meta = ComponentMeta<typeof CalendarStyled>;
 // type Story = ComponentStoryObj<typeof CalendarStyled>;
 
@@ -21,12 +19,6 @@ export default {
     layout: "centered",
     preview: createPreviewTabs({ js, ts, jsUtils, tsUtils }),
   },
-  decorators: [
-    Story => {
-      document.body.id = "tailwind";
-      return <Story />;
-    },
-  ],
 } as Meta;
 
 export const Default = () => {
diff --git a/src/calendar/stories/tailwind.css b/src/calendar/stories/tailwind.css
deleted file mode 100644
index a7de9a2d9..000000000
--- a/src/calendar/stories/tailwind.css
+++ /dev/null
@@ -1,53 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer components {
-  .styled-datepicker .calendar__cell {
-    height: 32px;
-    width: 32px;
-    max-height: 32px;
-    max-width: 32px;
-    @apply text-sm text-center rounded-lg;
-  }
-  .styled-datepicker .calendar__cell[data-is-range-selection] {
-    @apply bg-blue-100 rounded-none text-gray-800 !important;
-  }
-  .styled-datepicker .calendar__cell[data-is-selection-start] {
-    @apply bg-blue-500 rounded-l-lg text-white !important;
-  }
-  .styled-datepicker .calendar__cell[data-is-selection-end] {
-    @apply bg-blue-500 rounded-r-lg text-white !important;
-  }
-
-  .styled-datepicker .calendar__cell[data-is-range-selection]:focus-within {
-    @apply bg-blue-400 text-white !important;
-  }
-  .styled-datepicker .calendar__cell:focus-within {
-    @apply bg-gray-100;
-  }
-
-  .styled-datepicker.calendar [data-weekend] {
-    @apply text-red-600;
-  }
-
-  .styled-datepicker.calendar [aria-selected="true"] {
-    @apply text-white bg-blue-500;
-  }
-
-  .styled-datepicker.calendar [aria-selected]:focus-within {
-    @apply bg-gray-100;
-  }
-
-  .styled-datepicker.calendar [aria-selected="true"]:focus-within {
-    @apply text-white bg-blue-400;
-  }
-
-  .styled-datepicker.calendar [aria-disabled="true"] {
-    @apply text-gray-500;
-  }
-
-  .styled-datepicker.calendar span {
-    outline: none;
-  }
-}