diff --git a/BREAKING.md b/BREAKING.md
index 0d14761f82..725bcdf409 100644
--- a/BREAKING.md
+++ b/BREAKING.md
@@ -16,6 +16,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver
 - [Browser and Platform Support](#version-8x-browser-platform-support)
 - [Components](#version-8x-components)
   - [Content](#version-8x-content)
+  - [Datetime](#version-8x-datetime)
 
 <h2 id="version-8x-browser-platform-support">Browser and Platform Support</h2>
 
@@ -46,4 +47,16 @@ This section details the desktop browser, JavaScript framework, and mobile platf
 
 <h4 id="version-8x-content">Content</h4>
 
-- Content no longer sets the `--background` custom property when the `.outer-content` class is set on the host.
\ No newline at end of file
+- Content no longer sets the `--background` custom property when the `.outer-content` class is set on the host.
+
+<h4 id="version-8x-datetime">Datetime</h4>
+
+- The CSS shadow part for `month-year-button` has been changed to target a `button` element instead of `ion-item`. Developers should verify their UI renders as expected for the month/year toggle button inside of `ion-datetime`.
+   - Developers using the CSS variables available on `ion-item` will need to migrate their CSS to use CSS properties. For example:
+      ```diff
+      ion-datetime::part(month-year-button) {
+      -  --background: red;
+
+      +  background: red;
+      }
+      ```
\ No newline at end of file
diff --git a/core/src/components/datetime/datetime.ios.scss b/core/src/components/datetime/datetime.ios.scss
index 145053d2f7..54a5db6539 100644
--- a/core/src/components/datetime/datetime.ios.scss
+++ b/core/src/components/datetime/datetime.ios.scss
@@ -34,16 +34,24 @@
 
 // Calendar / Header / Action Buttons
 // -----------------------------------
-:host .calendar-action-buttons ion-item {
-  --padding-start: #{$datetime-ios-padding};
-  --background-hover: transparent;
-  --background-activated: transparent;
+.calendar-month-year-toggle {
+  @include padding(0px, 16px, 0px, #{$datetime-ios-padding});
+
+  min-height: 44px;
 
   font-size: dynamic-font-max(16px, 1.6);
   font-weight: 600;
+
+  &.ion-focused::after {
+    opacity: 0.15;
+  }
 }
 
-:host .calendar-action-buttons ion-item ion-icon,
+.calendar-month-year-toggle #toggle-wrapper {
+  @include margin(10px, 8px, 10px, 0);
+}
+
+:host .calendar-action-buttons .calendar-month-year-toggle ion-icon,
 :host .calendar-action-buttons ion-buttons ion-button {
   color: current-color(base);
 }
diff --git a/core/src/components/datetime/datetime.md.scss b/core/src/components/datetime/datetime.md.scss
index a900eeecbb..0e25f96784 100644
--- a/core/src/components/datetime/datetime.md.scss
+++ b/core/src/components/datetime/datetime.md.scss
@@ -30,15 +30,41 @@
 
 // Calendar / Header / Action Buttons
 // -----------------------------------
-:host .datetime-calendar .calendar-action-buttons ion-item {
-  --padding-start: #{$datetime-md-header-padding};
-}
 
-:host .calendar-action-buttons ion-item,
 :host .calendar-action-buttons ion-button {
   --color: #{$text-color-step-350};
 }
 
+.calendar-month-year-toggle {
+  @include padding(12px, 16px, 12px, #{$datetime-md-header-padding});
+
+  min-height: 48px;
+
+  background: transparent;
+
+  color: #{$text-color-step-350};
+
+  z-index: 1;
+
+  &.ion-focused::after {
+    opacity: 0.04;
+  }
+}
+
+.calendar-month-year-toggle ion-ripple-effect {
+  color: currentColor;
+}
+
+@media (any-hover: hover) {
+  .calendar-month-year-toggle.ion-activatable:not(.ion-focused):hover {
+    &::after {
+      background: currentColor;
+
+      opacity: 0.04;
+    }
+  }
+}
+
 // Calendar / Header / Days of Week
 // -----------------------------------
 :host .calendar-days-of-week {
@@ -64,7 +90,6 @@
    * if necessary.
    */
   grid-template-rows: repeat(6, 1fr);
-
 }
 
 // Individual day button in month
diff --git a/core/src/components/datetime/datetime.scss b/core/src/components/datetime/datetime.scss
index 39449279d4..5d6d65b512 100644
--- a/core/src/components/datetime/datetime.scss
+++ b/core/src/components/datetime/datetime.scss
@@ -48,7 +48,7 @@ ion-picker-column-internal {
 }
 
 /**
- * This ensures that the picker is apppropriately
+ * This ensures that the picker is appropriately
  * sized and never truncates the text.
  */
 :host(.datetime-size-fixed.datetime-prefer-wheel) {
@@ -267,19 +267,8 @@ ion-picker-column-internal {
   justify-content: space-between;
 }
 
-:host .calendar-action-buttons ion-item,
 :host .calendar-action-buttons ion-button {
-  --background: translucent;
-}
-
-:host .calendar-action-buttons ion-item ion-label {
-  display: flex;
-
-  align-items: center;
-}
-
-:host .calendar-action-buttons ion-item ion-icon {
-  @include padding(0, 0, 0, 4px);
+  --background: transparent;
 }
 
 // Calendar / Header / Days of Week
@@ -488,6 +477,55 @@ ion-picker-column-internal {
 
 // Year Picker
 // -----------------------------------
-:host(.show-month-and-year) .calendar-action-buttons ion-item {
-  --color: #{current-color(base)};
+:host(.show-month-and-year) .calendar-action-buttons .calendar-month-year-toggle {
+  color: #{current-color(base)};
+}
+
+.calendar-month-year {
+  min-width: 0;
+}
+
+.calendar-month-year-toggle {
+  @include text-inherit();
+
+  position: relative;
+
+  border: 0;
+
+  outline: none;
+
+  background: transparent;
+
+  cursor: pointer;
+
+  z-index: 1;
+
+  &::after {
+    @include button-state();
+
+    transition: opacity 15ms linear, background-color 15ms linear;
+
+    z-index: -1;
+  }
+
+  &.ion-focused::after {
+    background: currentColor;
+  }
+
+  &:disabled {
+    opacity: 0.3;
+    pointer-events: none;
+  }
+}
+
+.calendar-month-year-toggle ion-icon {
+  @include padding(0, 0, 0, 4px);
+
+  flex-shrink: 0;
+}
+
+.calendar-month-year-toggle #toggle-wrapper {
+  display: inline-flex;
+
+  align-items: center;
 }
diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx
index cdf3859715..53d1ee6cd8 100644
--- a/core/src/components/datetime/datetime.tsx
+++ b/core/src/components/datetime/datetime.tsx
@@ -104,7 +104,6 @@ import {
 export class Datetime implements ComponentInterface {
   private inputId = `ion-dt-${datetimeIds++}`;
   private calendarBodyRef?: HTMLElement;
-  private monthYearToggleItemRef?: HTMLIonItemElement;
   private popoverRef?: HTMLIonPopoverElement;
   private clearFocusVisible?: () => void;
   private parsedMinuteValues?: number[];
@@ -2000,35 +1999,18 @@ export class Datetime implements ComponentInterface {
       <div class="calendar-header">
         <div class="calendar-action-buttons">
           <div class="calendar-month-year">
-            <ion-item
-              part="month-year-button"
-              ref={(el) => (this.monthYearToggleItemRef = el)}
-              button
-              aria-label="Show year picker"
-              detail={false}
-              lines="none"
-              disabled={disabled}
-              onClick={() => {
-                this.toggleMonthAndYearView();
-                /**
-                 * TODO: FW-3547
-                 *
-                 * Currently there is not a way to set the aria-label on the inner button
-                 * on the `ion-item` and have it be reactive to changes. This is a workaround
-                 * until we either refactor `ion-item` to a button or Stencil adds a way to
-                 * have reactive props for built-in properties, such as `aria-label`.
-                 */
-                const { monthYearToggleItemRef } = this;
-                if (monthYearToggleItemRef) {
-                  const btn = monthYearToggleItemRef.shadowRoot?.querySelector('.item-native');
-                  if (btn) {
-                    const monthYearAriaLabel = this.showMonthAndYear ? 'Hide year picker' : 'Show year picker';
-                    btn.setAttribute('aria-label', monthYearAriaLabel);
-                  }
-                }
+            <button
+              class={{
+                'calendar-month-year-toggle': true,
+                'ion-activatable': true,
+                'ion-focusable': true,
               }}
+              part="month-year-button"
+              disabled={disabled}
+              aria-label={this.showMonthAndYear ? 'Hide year picker' : 'Show year picker'}
+              onClick={() => this.toggleMonthAndYearView()}
             >
-              <ion-label>
+              <span id="toggle-wrapper">
                 {getMonthAndYear(this.locale, this.workingParts)}
                 <ion-icon
                   aria-hidden="true"
@@ -2036,8 +2018,9 @@ export class Datetime implements ComponentInterface {
                   lazy={false}
                   flipRtl={true}
                 ></ion-icon>
-              </ion-label>
-            </ion-item>
+              </span>
+              {mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
+            </button>
           </div>
 
           <div class="calendar-next-prev">
diff --git a/core/src/components/datetime/test/a11y/datetime.e2e.ts b/core/src/components/datetime/test/a11y/datetime.e2e.ts
index 5f4e5ff9e3..79deb85e23 100644
--- a/core/src/components/datetime/test/a11y/datetime.e2e.ts
+++ b/core/src/components/datetime/test/a11y/datetime.e2e.ts
@@ -47,7 +47,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
 
       const datetime = page.locator('ion-datetime');
-      const monthYearButton = page.locator('.calendar-month-year ion-item');
+      const monthYearButton = page.locator('.calendar-month-year-toggle');
       const prevButton = page.locator('.calendar-next-prev ion-button:nth-child(1)');
       const nextButton = page.locator('.calendar-next-prev ion-button:nth-child(2)');
 
diff --git a/core/src/components/datetime/test/a11y/datetime.e2e.ts-snapshots/datetime-scale-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/a11y/datetime.e2e.ts-snapshots/datetime-scale-ios-ltr-Mobile-Safari-linux.png
index 73cce357b5..e5882704c2 100644
Binary files a/core/src/components/datetime/test/a11y/datetime.e2e.ts-snapshots/datetime-scale-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/a11y/datetime.e2e.ts-snapshots/datetime-scale-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/a11y/datetime.e2e.ts-snapshots/datetime-scale-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/a11y/datetime.e2e.ts-snapshots/datetime-scale-md-ltr-Mobile-Chrome-linux.png
index 0abfde48b3..03b83c4caa 100644
Binary files a/core/src/components/datetime/test/a11y/datetime.e2e.ts-snapshots/datetime-scale-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/a11y/datetime.e2e.ts-snapshots/datetime-scale-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/a11y/datetime.e2e.ts-snapshots/datetime-scale-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/a11y/datetime.e2e.ts-snapshots/datetime-scale-md-ltr-Mobile-Firefox-linux.png
index 6da39531c7..6cb37f608e 100644
Binary files a/core/src/components/datetime/test/a11y/datetime.e2e.ts-snapshots/datetime-scale-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/a11y/datetime.e2e.ts-snapshots/datetime-scale-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/a11y/datetime.e2e.ts-snapshots/datetime-scale-md-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/a11y/datetime.e2e.ts-snapshots/datetime-scale-md-ltr-Mobile-Safari-linux.png
index 73c4dd97c4..c41195ba1a 100644
Binary files a/core/src/components/datetime/test/a11y/datetime.e2e.ts-snapshots/datetime-scale-md-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/a11y/datetime.e2e.ts-snapshots/datetime-scale-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/a11y/datetime.spec.ts b/core/src/components/datetime/test/a11y/datetime.spec.ts
index 619efd425c..545e3675f0 100644
--- a/core/src/components/datetime/test/a11y/datetime.spec.ts
+++ b/core/src/components/datetime/test/a11y/datetime.spec.ts
@@ -1,7 +1,6 @@
 import type { SpecPage } from '@stencil/core/testing';
 import { newSpecPage } from '@stencil/core/testing';
 
-import { Item } from '../../../item/item';
 import { Datetime } from '../../datetime';
 
 describe('datetime', () => {
@@ -20,15 +19,14 @@ describe('datetime', () => {
 
     beforeEach(async () => {
       page = await newSpecPage({
-        components: [Datetime, Item],
+        components: [Datetime],
         html: `<ion-datetime></ion-datetime>`,
       });
     });
 
     it('should have aria-label "Show year picker" when collapsed', async () => {
       const datetime = page.body.querySelector('ion-datetime')!;
-      const item = datetime.shadowRoot!.querySelector('.calendar-month-year ion-item');
-      const monthYearToggleBtn = item!.shadowRoot!.querySelector('button');
+      const monthYearToggleBtn = datetime.shadowRoot!.querySelector('.calendar-month-year .calendar-month-year-toggle');
       const ariaLabel = monthYearToggleBtn!.getAttribute('aria-label');
 
       expect(ariaLabel).toContain('Show year picker');
@@ -36,15 +34,18 @@ describe('datetime', () => {
 
     it('should have aria-label "Hide year picker" when expanded', async () => {
       const datetime = page.body.querySelector('ion-datetime')!;
-      const item = datetime.shadowRoot!.querySelector<HTMLIonItemElement>('.calendar-month-year ion-item');
+      const monthYearToggleBtn = datetime.shadowRoot!.querySelector<HTMLButtonElement>(
+        '.calendar-month-year .calendar-month-year-toggle'
+      );
 
-      item!.click();
+      monthYearToggleBtn!.click();
 
       await page.waitForChanges();
 
-      const itemAfter = datetime.shadowRoot!.querySelector<HTMLIonItemElement>('.calendar-month-year ion-item');
-      const monthYearToggleBtn = itemAfter!.shadowRoot!.querySelector<HTMLElement>('button');
-      const ariaLabel = monthYearToggleBtn!.getAttribute('aria-label');
+      const monthYearToggleBtnAfter = datetime.shadowRoot!.querySelector<HTMLButtonElement>(
+        '.calendar-month-year .calendar-month-year-toggle'
+      );
+      const ariaLabel = monthYearToggleBtnAfter!.getAttribute('aria-label');
 
       expect(ariaLabel).toContain('Hide year picker');
     });
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts b/core/src/components/datetime/test/basic/datetime.e2e.ts
index c0ef49adf6..349d6bf66a 100644
--- a/core/src/components/datetime/test/basic/datetime.e2e.ts
+++ b/core/src/components/datetime/test/basic/datetime.e2e.ts
@@ -526,4 +526,20 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
       await expect(datetime).toHaveScreenshot(screenshot(`datetime-focus-calendar-day`));
     });
   });
+
+  test.describe(title('datetime: calendar month toggle'), () => {
+    test('should have focus styles', async ({ page }) => {
+      await page.setContent('<ion-datetime value="2021-01-01"></ion-datetime>', config);
+
+      const datetime = page.locator('ion-datetime');
+
+      await page.waitForSelector('.datetime-ready');
+
+      const monthYearToggle = datetime.locator('.calendar-month-year-toggle');
+
+      monthYearToggle.evaluate((el: HTMLElement) => el.classList.add('ion-focused'));
+
+      await expect(datetime).toHaveScreenshot(screenshot(`date-month-toggle-focused`));
+    });
+  });
 });
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/date-month-toggle-focused-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/date-month-toggle-focused-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..41fea5ba2a
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/date-month-toggle-focused-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/date-month-toggle-focused-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/date-month-toggle-focused-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..d24b446925
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/date-month-toggle-focused-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/date-month-toggle-focused-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/date-month-toggle-focused-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..f79702e324
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/date-month-toggle-focused-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/date-month-toggle-focused-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/date-month-toggle-focused-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..c2ee0f2c15
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/date-month-toggle-focused-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/date-month-toggle-focused-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/date-month-toggle-focused-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..a5b08ff405
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/date-month-toggle-focused-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/date-month-toggle-focused-md-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/date-month-toggle-focused-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..4348a96e6d
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/date-month-toggle-focused-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/month-year-picker/datetime.e2e.ts b/core/src/components/datetime/test/month-year-picker/datetime.e2e.ts
index 9b42177723..f894b0a0fe 100644
--- a/core/src/components/datetime/test/month-year-picker/datetime.e2e.ts
+++ b/core/src/components/datetime/test/month-year-picker/datetime.e2e.ts
@@ -15,7 +15,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       const datetimeFooter = page.locator('#date-time .datetime-footer');
       await expect(datetimeFooter).toBeVisible();
 
-      const pickerButton = page.locator('#date-time .calendar-month-year > ion-item');
+      const pickerButton = page.locator('#date-time .calendar-month-year > .calendar-month-year-toggle');
       await pickerButton.click();
       await page.waitForChanges();
       await expect(datetimeFooter).not.toBeVisible();
diff --git a/core/src/components/datetime/test/readonly/datetime.e2e.ts b/core/src/components/datetime/test/readonly/datetime.e2e.ts
index f157bd36e3..1a1c3c8553 100644
--- a/core/src/components/datetime/test/readonly/datetime.e2e.ts
+++ b/core/src/components/datetime/test/readonly/datetime.e2e.ts
@@ -68,7 +68,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, scree
 
       await page.waitForSelector('.datetime-ready');
       const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
-      const monthYearButton = page.locator('.calendar-month-year ion-item');
+      const monthYearButton = page.locator('.calendar-month-year-toggle');
       await expect(calendarMonthYear).toHaveText('February 2022');
 
       await page.keyboard.press(tabKey);
@@ -114,7 +114,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, scree
       const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
 
       const datetime = page.locator('ion-datetime');
-      const monthYearButton = page.locator('.calendar-month-year ion-item');
+      const monthYearButton = page.locator('.calendar-month-year-toggle');
       const prevButton = page.locator('.calendar-next-prev ion-button:nth-child(1)');
       const nextButton = page.locator('.calendar-next-prev ion-button:nth-child(2)');
       const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');