diff --git a/apps/vr-tests-react-components/package.json b/apps/vr-tests-react-components/package.json
index eb581fcc1bd98..c54158c26cfdd 100644
--- a/apps/vr-tests-react-components/package.json
+++ b/apps/vr-tests-react-components/package.json
@@ -27,6 +27,7 @@
     "@fluentui/react-card": "^9.0.4",
     "@fluentui/react-checkbox": "^9.1.6",
     "@fluentui/react-combobox": "^9.2.6",
+    "@fluentui/react-datepicker-compat": "0.0.0-alpha.0",
     "@fluentui/react-dialog": "^9.4.2",
     "@fluentui/react-divider": "^9.2.6",
     "@fluentui/react-field": "9.0.0-alpha.28",
diff --git a/apps/vr-tests-react-components/src/stories/DatePickerCompat.stories.tsx b/apps/vr-tests-react-components/src/stories/DatePickerCompat.stories.tsx
new file mode 100644
index 0000000000000..a6dcf7050d579
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/DatePickerCompat.stories.tsx
@@ -0,0 +1,80 @@
+import * as React from 'react';
+import { Steps, StoryWright } from 'storywright';
+import { DatePicker as DatePickerBase, DateRangeType } from '@fluentui/react-datepicker-compat';
+import { storiesOf } from '@storybook/react';
+import { TestWrapperDecorator } from '../utilities/TestWrapperDecorator';
+import type { DatePickerProps } from '@fluentui/react-datepicker-compat';
+
+const DatePicker = (props: DatePickerProps) => {
+  const today = new Date('3/15/2023');
+  return (
+    <div style={{ width: '500px', height: '330px', padding: '10px' }}>
+      <DatePickerBase value={today} today={today} {...props} />
+    </div>
+  );
+};
+
+storiesOf('DatePicker Compat', module)
+  .addDecorator(TestWrapperDecorator)
+  .addDecorator(story => (
+    <StoryWright
+      steps={new Steps()
+        .snapshot('rest', { cropTo: '.testWrapper' })
+        .click('.datepicker-input')
+        .snapshot('opened', { cropTo: '.testWrapper' })
+        .end()}
+    >
+      {story()}
+    </StoryWright>
+  ))
+  .addStory('default', () => <DatePicker input={{ className: 'datepicker-input' }} />, {
+    includeHighContrast: true,
+    includeDarkMode: true,
+  });
+
+storiesOf('DatePicker Compat', module)
+  .addDecorator(TestWrapperDecorator)
+  .addDecorator(story => (
+    <StoryWright steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>{story()}</StoryWright>
+  ))
+  .addStory('DateRange: day', () => (
+    <DatePicker calendar={{ dateRangeType: DateRangeType.Day }} popover={{ open: true }} />
+  ))
+  .addStory('DateRange: week', () => (
+    <DatePicker calendar={{ dateRangeType: DateRangeType.Week }} popover={{ open: true }} />
+  ))
+  .addStory('DateRange: work week', () => (
+    <DatePicker calendar={{ dateRangeType: DateRangeType.WorkWeek }} popover={{ open: true }} />
+  ))
+  .addStory(
+    'DateRange: month',
+    () => <DatePicker calendar={{ dateRangeType: DateRangeType.Month }} popover={{ open: true }} />,
+    {
+      includeDarkMode: true,
+      includeHighContrast: true,
+    },
+  )
+  .addStory(
+    'marked dates',
+    () => (
+      <DatePicker
+        calendar={{
+          calendarDayProps: { getMarkedDays: (start, end) => [new Date('3/15/2023'), new Date('3/10/2023')] },
+        }}
+        popover={{ open: true }}
+      />
+    ),
+    {
+      includeDarkMode: true,
+      includeHighContrast: true,
+    },
+  )
+  .addStory('showWeekNumbers', () => <DatePicker showWeekNumbers popover={{ open: true }} />, {
+    includeDarkMode: true,
+    includeHighContrast: true,
+  })
+  .addStory('allowTextInput', () => <DatePicker allowTextInput />)
+  .addStory('Required', () => <DatePicker isRequired />)
+  .addStory('Underlined', () => <DatePicker underlined />)
+  .addStory('Underlined and required', () => <DatePicker underlined isRequired />)
+  .addStory('With label', () => <DatePicker label="Select a date" />);
diff --git a/packages/react-components/react-datepicker-compat/bundle-size/DatePicker.fixture.js b/packages/react-components/react-datepicker-compat/bundle-size/DatePicker.fixture.js
new file mode 100644
index 0000000000000..43471fd2a0a59
--- /dev/null
+++ b/packages/react-components/react-datepicker-compat/bundle-size/DatePicker.fixture.js
@@ -0,0 +1,7 @@
+import { DatePicker } from '@fluentui/react-datepicker-compat';
+
+console.log(DatePicker);
+
+export default {
+  name: 'DatePicker Compat',
+};
diff --git a/packages/react-components/react-datepicker-compat/package.json b/packages/react-components/react-datepicker-compat/package.json
index c3784d4583397..863901a7fead2 100644
--- a/packages/react-components/react-datepicker-compat/package.json
+++ b/packages/react-components/react-datepicker-compat/package.json
@@ -14,6 +14,7 @@
   "license": "MIT",
   "scripts": {
     "build": "just-scripts build",
+    "bundle-size": "bundle-size measure",
     "clean": "just-scripts clean",
     "code-style": "just-scripts code-style",
     "e2e": "cypress run --component",
diff --git a/packages/react-components/react-datepicker-compat/src/components/CalendarDayGrid/useCalendarDayGridStyles.ts b/packages/react-components/react-datepicker-compat/src/components/CalendarDayGrid/useCalendarDayGridStyles.ts
index 1404ba5aa7677..d7f9c5f10dc62 100644
--- a/packages/react-components/react-datepicker-compat/src/components/CalendarDayGrid/useCalendarDayGridStyles.ts
+++ b/packages/react-components/react-datepicker-compat/src/components/CalendarDayGrid/useCalendarDayGridStyles.ts
@@ -73,7 +73,7 @@ const useTableStyles = makeStyles({
 
 const useDayCellStyles = makeStyles({
   base: {
-    color: tokens.colorNeutralForeground3,
+    color: tokens.colorNeutralForeground1,
     cursor: 'pointer',
     fontSize: tokens.fontSizeBase200,
     fontWeight: tokens.fontWeightRegular,
@@ -175,7 +175,7 @@ const useWeekNumberCellStyles = makeStyles({
     ...shorthands.borderColor(tokens.colorNeutralStroke2),
     ...shorthands.borderRight('1px', 'solid'),
     boxSizing: 'border-box',
-    color: tokens.colorNeutralBackgroundStatic,
+    color: tokens.colorNeutralForeground4,
     fontSize: tokens.fontSizeBase200,
     fontWeight: tokens.fontWeightRegular,
     height: '28px',