diff --git a/package-lock.json b/package-lock.json
index f34582281..b2f1fabc3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,7 @@
         "@tanstack/react-query": "^4.28.0",
         "classnames": "^2.3.2",
         "luxon": "^3.3.0",
-        "seamapi": "^8.10.1",
+        "seamapi": "^8.11.0",
         "uuid": "^9.0.0"
       },
       "devDependencies": {
@@ -21692,9 +21692,9 @@
       }
     },
     "node_modules/seamapi": {
-      "version": "8.10.2",
-      "resolved": "https://registry.npmjs.org/seamapi/-/seamapi-8.10.2.tgz",
-      "integrity": "sha512-r1VJnXEwQ5VPM59iecjnee+oLhTg/1sCK4XgLmkrnSoZvfmWq8QS6CiO+hubhfmfJpBSGI9x1PRP434QN7J+0A==",
+      "version": "8.11.0",
+      "resolved": "https://registry.npmjs.org/seamapi/-/seamapi-8.11.0.tgz",
+      "integrity": "sha512-DjG8Cg5aE+Qu2OhqbBkLooANQJ2l+AHGqKLFOiYDFt8iPIpx6c0T9EnL5mbpEFPgGEn8766tT6rMgMH/AkQokg==",
       "dependencies": {
         "axios": "0.25.0",
         "axios-retry": "3.2.5",
diff --git a/package.json b/package.json
index 9f5ed48ca..5ba806801 100644
--- a/package.json
+++ b/package.json
@@ -123,7 +123,7 @@
     "@tanstack/react-query": "^4.28.0",
     "classnames": "^2.3.2",
     "luxon": "^3.3.0",
-    "seamapi": "^8.10.1",
+    "seamapi": "^8.11.0",
     "uuid": "^9.0.0"
   },
   "devDependencies": {
diff --git a/src/lib/ui/thermostat/ClimateModeMenu.stories.tsx b/src/lib/ui/thermostat/ClimateModeMenu.stories.tsx
new file mode 100644
index 000000000..67b7c2422
--- /dev/null
+++ b/src/lib/ui/thermostat/ClimateModeMenu.stories.tsx
@@ -0,0 +1,32 @@
+import { Box } from '@mui/material'
+import { useArgs } from '@storybook/preview-api'
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { ClimateModeMenu } from './ClimateModeMenu.js'
+
+const meta: Meta<typeof ClimateModeMenu> = {
+  title: 'Library/ClimateModeMenu',
+  tags: ['autodocs'],
+  component: ClimateModeMenu,
+}
+
+type Story = StoryObj<typeof ClimateModeMenu>
+
+export const Content: Story = {
+  render: (props) => {
+    const [, setArgs] = useArgs()
+
+    return (
+      <Box height={190}>
+        <ClimateModeMenu
+          mode={props.mode ?? 'heat'}
+          onChange={(mode) => {
+            setArgs({ mode })
+          }}
+        />
+      </Box>
+    )
+  },
+}
+
+export default meta
diff --git a/src/lib/ui/thermostat/ClimateModeMenu.tsx b/src/lib/ui/thermostat/ClimateModeMenu.tsx
new file mode 100644
index 000000000..d8474e196
--- /dev/null
+++ b/src/lib/ui/thermostat/ClimateModeMenu.tsx
@@ -0,0 +1,71 @@
+import type { HvacModeSetting } from 'seamapi'
+
+import { ChevronDownIcon } from 'lib/icons/ChevronDown.js'
+import { OffIcon } from 'lib/icons/Off.js'
+import { ThermostatCoolIcon } from 'lib/icons/ThermostatCool.js'
+import { ThermostatHeatIcon } from 'lib/icons/ThermostatHeat.js'
+import { ThermostatHeatCoolIcon } from 'lib/icons/ThermostatHeatCool.js'
+import { Menu } from 'lib/ui/Menu/Menu.js'
+import { ThermoModeMenuOption } from 'lib/ui/thermostat/ThermoModeMenuOption.js'
+
+const modes: HvacModeSetting[] = ['heat', 'cool', 'heat_cool', 'off']
+
+interface ClimateModeMenuProps {
+  mode: HvacModeSetting
+  onChange: (mode: HvacModeSetting) => void
+}
+
+export function ClimateModeMenu({
+  mode,
+  onChange,
+}: ClimateModeMenuProps): JSX.Element {
+  return (
+    <Menu
+      renderButton={({ onOpen }) => (
+        <button onClick={onOpen} className='seam-climate-mode-menu-button'>
+          <div className='seam-climate-mode-menu-button-icon'>
+            {ModeIcon(mode)}
+          </div>
+          <ChevronDownIcon />
+        </button>
+      )}
+      verticalOffset={-180}
+      horizontalOffset={-32}
+      backgroundProps={{
+        className: 'seam-thermo-mode-menu',
+      }}
+    >
+      {modes.map((m) => (
+        <ThermoModeMenuOption
+          key={m}
+          label={t[m]}
+          icon={ModeIcon(m)}
+          isSelected={mode === m}
+          onClick={() => {
+            onChange(m)
+          }}
+        />
+      ))}
+    </Menu>
+  )
+}
+
+function ModeIcon(mode: HvacModeSetting): JSX.Element {
+  switch (mode) {
+    case 'heat':
+      return <ThermostatHeatIcon />
+    case 'cool':
+      return <ThermostatCoolIcon />
+    case 'heat_cool':
+      return <ThermostatHeatCoolIcon />
+    case 'off':
+      return <OffIcon />
+  }
+}
+
+const t = {
+  heat: 'Heat',
+  cool: 'Cool',
+  heat_cool: 'Heat & Cool',
+  off: 'Off',
+}
diff --git a/src/lib/ui/thermostat/FanModeMenu.tsx b/src/lib/ui/thermostat/FanModeMenu.tsx
index 67ef386e9..2bacbc3a1 100644
--- a/src/lib/ui/thermostat/FanModeMenu.tsx
+++ b/src/lib/ui/thermostat/FanModeMenu.tsx
@@ -1,15 +1,16 @@
-import { CheckBlackIcon } from 'lib/icons/CheckBlack.js'
+import type { FanModeSetting } from 'seamapi'
+
 import { ChevronDownIcon } from 'lib/icons/ChevronDown.js'
 import { FanIcon } from 'lib/icons/Fan.js'
 import { FanOutlineIcon } from 'lib/icons/FanOutline.js'
 import { Menu } from 'lib/ui/Menu/Menu.js'
-import { MenuItem } from 'lib/ui/Menu/MenuItem.js'
+import { ThermoModeMenuOption } from 'lib/ui/thermostat/ThermoModeMenuOption.js'
 
-type Mode = 'auto' | 'on'
+const modes: FanModeSetting[] = ['auto', 'on']
 
 interface FanModeMenuProps {
-  mode: Mode
-  onChange: (mode: Mode) => void
+  mode: FanModeSetting
+  onChange: (mode: FanModeSetting) => void
 }
 
 export function FanModeMenu({ mode, onChange }: FanModeMenuProps): JSX.Element {
@@ -29,49 +30,24 @@ export function FanModeMenu({ mode, onChange }: FanModeMenuProps): JSX.Element {
       verticalOffset={-180}
       horizontalOffset={-32}
       backgroundProps={{
-        className: 'seam-fan-mode-menu-bg',
+        className: 'seam-thermo-mode-menu',
       }}
     >
-      <Option
-        mode='auto'
-        isSelected={mode === 'auto'}
-        onClick={() => {
-          onChange('auto')
-        }}
-      />
-      <Option
-        mode='on'
-        isSelected={mode === 'on'}
-        onClick={() => {
-          onChange('on')
-        }}
-      />
+      {modes.map((m) => (
+        <ThermoModeMenuOption
+          key={m}
+          label={t[m]}
+          icon={<FanIcon />}
+          isSelected={mode === m}
+          onClick={() => {
+            onChange(m)
+          }}
+        />
+      ))}
     </Menu>
   )
 }
 
-interface OptionProps {
-  mode: Mode
-  onClick: () => void
-  isSelected: boolean
-}
-
-function Option({ mode, isSelected, onClick }: OptionProps): JSX.Element {
-  return (
-    <MenuItem onClick={onClick}>
-      <div className='seam-fan-mode-menu-item'>
-        <div className='seam-fan-mode-menu-item-block'>
-          <FanIcon />
-          <span>{mode === 'auto' ? t.auto : t.on}</span>
-        </div>
-        <div className='seam-fan-mode-menu-item-block'>
-          {isSelected && <CheckBlackIcon />}
-        </div>
-      </div>
-    </MenuItem>
-  )
-}
-
 const t = {
   auto: 'Auto',
   on: 'On',
diff --git a/src/lib/ui/thermostat/ThermoModeMenuOption.tsx b/src/lib/ui/thermostat/ThermoModeMenuOption.tsx
new file mode 100644
index 000000000..f0bde9918
--- /dev/null
+++ b/src/lib/ui/thermostat/ThermoModeMenuOption.tsx
@@ -0,0 +1,30 @@
+import { CheckBlackIcon } from 'lib/icons/CheckBlack.js'
+import { MenuItem } from 'lib/ui/Menu/MenuItem.js'
+
+interface ThermoModeMenuOptionProps {
+  label: string
+  icon: JSX.Element
+  onClick: () => void
+  isSelected: boolean
+}
+
+export function ThermoModeMenuOption({
+  label,
+  icon,
+  isSelected,
+  onClick,
+}: ThermoModeMenuOptionProps): JSX.Element {
+  return (
+    <MenuItem onClick={onClick}>
+      <div className='seam-thermo-mode-menu-item'>
+        <div className='seam-thermo-mode-menu-item-block'>
+          <div className='seam-thermo-mode-menu-icon'>{icon}</div>
+          <span>{label}</span>
+        </div>
+        <div className='seam-thermo-mode-menu-item-block'>
+          {isSelected && <CheckBlackIcon />}
+        </div>
+      </div>
+    </MenuItem>
+  )
+}
diff --git a/src/styles/_thermostat.scss b/src/styles/_thermostat.scss
index 834c86b47..21718cf3a 100644
--- a/src/styles/_thermostat.scss
+++ b/src/styles/_thermostat.scss
@@ -559,16 +559,42 @@
   }
 }
 
-@mixin fan-mode-menu {
-  .seam-fan-mode-menu-bg {
+@mixin mode-menu-common {
+  .seam-thermo-mode-menu {
     .seam-menu-content {
       max-width: 180px;
       box-shadow:
         0 2px 16px 2px rgb(15 22 28 / 15%),
         0 0 1px 0 rgb(0 0 0 / 30%);
     }
+
+    .seam-thermo-mode-menu-item {
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      flex-direction: row;
+    }
+
+    .seam-thermo-mode-menu-item-block {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: row;
+      gap: 12px;
+    }
+  }
+
+  .seam-thermo-mode-menu-icon {
+    width: 18px;
+    height: 18px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
   }
+}
 
+@mixin fan-mode-menu {
   .seam-fan-mode-menu-button {
     width: 130px;
     height: 32px;
@@ -607,21 +633,43 @@
       line-height: 120%;
     }
   }
+}
 
-  .seam-fan-mode-menu-item {
-    width: 100%;
+@mixin climate-mode-menu {
+  .seam-climate-mode-menu-button {
+    width: 72px;
+    height: 32px;
+    padding: 4px 8px;
+    border-radius: 6px;
+    border: 1px solid colors.$text-gray-3;
+    background: colors.$white;
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-direction: row;
+    cursor: pointer;
+    transition: 0.2s ease;
+
+    &:hover {
+      border-color: colors.$text-gray-2;
+    }
+
+    &:focus {
+      outline-color: colors.$text-gray-2;
+    }
+
+    &:active {
+      background-color: colors.$bg-c;
+      border-color: colors.$text-gray-2;
+    }
   }
 
-  .seam-fan-mode-menu-item-block {
+  .seam-climate-mode-menu-button-icon {
+    width: 22px;
+    height: 22px;
     display: flex;
     justify-content: center;
     align-items: center;
-    flex-direction: row;
-    gap: 12px;
   }
 }
 
@@ -629,5 +677,7 @@
   @include temperature-control;
   @include climate-setting-status;
   @include thermostat-card;
+  @include mode-menu-common;
   @include fan-mode-menu;
+  @include climate-mode-menu;
 }