diff --git a/apps/design-system/__registry__/default/block/chart-composed-states.tsx b/apps/design-system/__registry__/default/block/chart-composed-states.tsx
index c4e25d545c2..2d3657cca2c 100644
--- a/apps/design-system/__registry__/default/block/chart-composed-states.tsx
+++ b/apps/design-system/__registry__/default/block/chart-composed-states.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { BarChart2, ExternalLink } from 'lucide-react'
-import { Badge } from 'ui'
+import { Badge, CriticalIcon } from 'ui'
 import {
   Chart,
   ChartActions,
@@ -44,6 +44,35 @@ export default function ChartComposedStates() {
         </ChartCard>
       </Chart>
 
+      <Chart isErrored={true}>
+        <ChartCard>
+          <ChartHeader>
+            <ChartTitle tooltip="This is a tooltip">Response Errors</ChartTitle>
+            <ChartActions actions={actions} />
+          </ChartHeader>
+          <ChartContent
+            isEmpty={true}
+            errorState={
+              <ChartEmptyState
+                icon={<CriticalIcon />}
+                title="Some error happened"
+                description="Error happened why trying to fetch data. Please try again later."
+              />
+            }
+            emptyState={
+              <ChartEmptyState
+                icon={<BarChart2 size={20} />}
+                title="No data to show"
+                description="It may take up to 24 hours for data to refresh"
+              />
+            }
+            loadingState={<ChartLoadingState />}
+          >
+            My chart here...
+          </ChartContent>
+        </ChartCard>
+      </Chart>
+
       <Chart>
         <ChartCard>
           <ChartHeader>
diff --git a/apps/design-system/__registry__/index.tsx b/apps/design-system/__registry__/index.tsx
index 0e0dce2ff27..1ea214369aa 100644
--- a/apps/design-system/__registry__/index.tsx
+++ b/apps/design-system/__registry__/index.tsx
@@ -621,6 +621,17 @@ export const Index: Record<string, any> = {
       subcategory: "undefined",
       chunks: []
     },
+    "calendar-disabled-days-demo": {
+      name: "calendar-disabled-days-demo",
+      type: "components:example",
+      registryDependencies: ["calendar","form","popover"],
+      component: React.lazy(() => import("@/registry/default/example/calendar-disabled-days-demo")),
+      source: "",
+      files: ["registry/default/example/calendar-disabled-days-demo.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
     "single-value-field-array-demo": {
       name: "single-value-field-array-demo",
       type: "components:example",
diff --git a/apps/design-system/content/docs/components/calendar.mdx b/apps/design-system/content/docs/components/calendar.mdx
index 9b1d4187cbb..dff3e95d183 100644
--- a/apps/design-system/content/docs/components/calendar.mdx
+++ b/apps/design-system/content/docs/components/calendar.mdx
@@ -79,3 +79,9 @@ You can use the `<Calendar>` component to build a date picker. See the [Date Pic
 ### Form
 
 <ComponentPreview name="calendar-form" />
+
+### Calendar with disabled days
+
+Shows a calendar with disabled days for selection. The current month starts mid week.
+
+<ComponentPreview name="calendar-disabled-days-demo" />
diff --git a/apps/design-system/registry/default/example/calendar-disabled-days-demo.tsx b/apps/design-system/registry/default/example/calendar-disabled-days-demo.tsx
new file mode 100644
index 00000000000..f428f871cb2
--- /dev/null
+++ b/apps/design-system/registry/default/example/calendar-disabled-days-demo.tsx
@@ -0,0 +1,25 @@
+'use client'
+
+import * as React from 'react'
+import { Calendar } from 'ui'
+
+// The dates are specifically chosen to show a month which starts mid week.
+const latestDate = new Date(2026, 6, 10)
+const earliestDate = new Date(2026, 6, 7)
+
+export default function CalendarMidWeekDemo() {
+  const [date, setDate] = React.useState<Date | undefined>(earliestDate)
+
+  return (
+    <Calendar
+      mode="single"
+      required={true}
+      selected={date}
+      onSelect={setDate}
+      defaultMonth={latestDate}
+      startMonth={earliestDate}
+      endMonth={latestDate}
+      disabled={[{ before: earliestDate }, { after: latestDate }]}
+    />
+  )
+}
diff --git a/apps/design-system/registry/examples.ts b/apps/design-system/registry/examples.ts
index 161841ca9ca..7e05ca4755f 100644
--- a/apps/design-system/registry/examples.ts
+++ b/apps/design-system/registry/examples.ts
@@ -277,6 +277,12 @@ export const examples: Registry = [
     registryDependencies: ['calendar', 'form', 'popover'],
     files: ['example/calendar-form.tsx'],
   },
+  {
+    name: 'calendar-disabled-days-demo',
+    type: 'components:example',
+    registryDependencies: ['calendar', 'form', 'popover'],
+    files: ['example/calendar-disabled-days-demo.tsx'],
+  },
   {
     name: 'single-value-field-array-demo',
     type: 'components:example',
diff --git a/apps/studio/components/interfaces/Database/Backups/PITR/PITRForm.tsx b/apps/studio/components/interfaces/Database/Backups/PITR/PITRForm.tsx
index 2d5943c2461..7ec3086fc3d 100644
--- a/apps/studio/components/interfaces/Database/Backups/PITR/PITRForm.tsx
+++ b/apps/studio/components/interfaces/Database/Backups/PITR/PITRForm.tsx
@@ -143,6 +143,7 @@ export function PITRForm({
                   '[&:not(:has(:disabled))]:border [&:not(:has(:disabled))]:border-stronger not-last:border-r-0 [&:not(:has(:disabled))]:bg-overlay-hover',
                   'rounded-none'
                 ),
+                day_button: 'w-full rounded-none',
                 selected: 'bg-brand-500!',
               }}
             />
diff --git a/packages/ui/src/components/shadcn/ui/calendar.tsx b/packages/ui/src/components/shadcn/ui/calendar.tsx
index ff2d8dda136..ced618435f5 100644
--- a/packages/ui/src/components/shadcn/ui/calendar.tsx
+++ b/packages/ui/src/components/shadcn/ui/calendar.tsx
@@ -71,6 +71,7 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }: C
         day: cn(
           'text-center text-sm p-0 relative [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md',
           'last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20',
+          'w-9 box-border',
           day
         ),
         day_button: cn(