diff --git a/examples/default-provider/app/(default)/custom-theme/page.tsx b/examples/default-provider/app/(default)/custom-theme/page.tsx
index 2c79522..583bb96 100644
--- a/examples/default-provider/app/(default)/custom-theme/page.tsx
+++ b/examples/default-provider/app/(default)/custom-theme/page.tsx
@@ -1,6 +1,6 @@
 import { Metadata } from 'next';
 import Video from 'next-video';
-import Sutro from 'player.style/sutro/react';
+import Instaplay from 'player.style/instaplay/react';
 import getStarted from '/videos/get-started.mp4?thumbnailTime=0';
 
 export const metadata: Metadata = {
@@ -11,7 +11,7 @@ export default function Page() {
   return (
     <>
       <section>
-        <Video src={getStarted} theme={Sutro}>
+        <Video src={getStarted} theme={Instaplay}>
           <track kind="captions" src="/get-started.vtt" srcLang="en" label="English" default />
         </Video>
       </section>
diff --git a/package-lock.json b/package-lock.json
index 1567ab5..81da1cc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,6 +21,7 @@
         "chokidar": "^3.6.0",
         "magicast": "^0.3.4",
         "media-chrome": "^4.2.3",
+        "player.style": "^0.0.12",
         "resolve": "^1.22.8",
         "symlink-dir": "^5.2.1",
         "undici": "^5.28.4",
@@ -4419,6 +4420,22 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/player.style": {
+      "version": "0.0.12",
+      "resolved": "https://registry.npmjs.org/player.style/-/player.style-0.0.12.tgz",
+      "integrity": "sha512-vYOa9LJGkaEhlq9648f9FFhvQP8UwzmoBWnazKpxgqGjEyH4HSSKPc3Nx2+k+cSX6AXKtjAuN08dKjP3YC1Htg==",
+      "license": "MIT",
+      "workspaces": [
+        ".",
+        "site",
+        "examples/*",
+        "scripts/*",
+        "themes/*"
+      ],
+      "dependencies": {
+        "media-chrome": "^4.2.2"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.4.31",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
diff --git a/package.json b/package.json
index 67d2854..4ce1ceb 100644
--- a/package.json
+++ b/package.json
@@ -100,8 +100,9 @@
     "chalk": "^4.1.2",
     "chokidar": "^3.6.0",
     "magicast": "^0.3.4",
-    "resolve": "^1.22.8",
     "media-chrome": "^4.2.3",
+    "player.style": "^0.0.12",
+    "resolve": "^1.22.8",
     "symlink-dir": "^5.2.1",
     "undici": "^5.28.4",
     "yargs": "^17.7.2"
diff --git a/src/components/players/default-player.tsx b/src/components/players/default-player.tsx
index 7f598f0..b5bb35a 100644
--- a/src/components/players/default-player.tsx
+++ b/src/components/players/default-player.tsx
@@ -1,10 +1,10 @@
 'use client';
 
 import { forwardRef, Suspense, lazy, Children, isValidElement } from 'react';
+import Sutro from 'player.style/sutro/react';
 import { getPlaybackId, getPosterURLFromPlaybackId } from '../../providers/mux/transformer.js';
 import { getUrlExtension, svgBlurImage } from '../utils.js';
 
-import DefaultTheme from './default-theme.js';
 import type { Props as MuxVideoProps } from './mux-video-react.js';
 import type { PlayerProps } from '../types.js';
 
@@ -20,7 +20,7 @@ const DefaultPlayer = forwardRef((allProps: DefaultPlayerProps, forwardedRef: an
     controls,
     poster,
     blurDataURL,
-    theme: Theme = DefaultTheme,
+    theme: Theme = Sutro,
     ...rest
   } = allProps;
 
diff --git a/src/components/players/default-theme.tsx b/src/components/players/default-theme.tsx
deleted file mode 100644
index ed005ca..0000000
--- a/src/components/players/default-theme.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-'use client';
-
-import {
-  MediaController,
-  MediaControlBar,
-  MediaTimeRange,
-  MediaTimeDisplay,
-  MediaPlayButton,
-  MediaMuteButton,
-  MediaPipButton,
-  MediaFullscreenButton,
-} from 'media-chrome/react';
-
-import {
-  MediaSettingsMenuButton,
-  MediaSettingsMenu,
-  MediaSettingsMenuItem,
-  MediaPlaybackRateMenu,
-  MediaRenditionMenu,
-  MediaCaptionsMenu,
-  MediaAudioTrackMenu,
-} from 'media-chrome/react/menu';
-
-type DefaultThemeProps = {
-  style?: React.CSSProperties;
-  children: React.ReactNode;
-  [k: string]: any;
-};
-
-function DefaultTheme({ children, ...props }: DefaultThemeProps) {
-  return (
-    <>
-      <style
-        dangerouslySetInnerHTML={{
-          __html: /* css */ `
-            media-settings-menu-item[aria-haspopup]:is(
-              :not([submenusize]),
-              [submenusize="0"],
-              [submenusize="1"]
-            ) {
-              display: none;
-            }
-          `,
-        }}
-      />
-      <MediaController {...props}>
-        {children}
-        <MediaControlBar>
-          <MediaPlayButton />
-          <MediaMuteButton />
-          <MediaTimeDisplay />
-          <MediaTimeRange />
-          <MediaSettingsMenuButton />
-          <MediaSettingsMenu hidden anchor="auto">
-            <MediaSettingsMenuItem>
-              Speed
-              <MediaPlaybackRateMenu slot="submenu" hidden>
-                <div slot="title">Speed</div>
-              </MediaPlaybackRateMenu>
-            </MediaSettingsMenuItem>
-            <MediaSettingsMenuItem>
-              Quality
-              <MediaRenditionMenu slot="submenu" hidden>
-                <div slot="title">Quality</div>
-              </MediaRenditionMenu>
-            </MediaSettingsMenuItem>
-            <MediaSettingsMenuItem>
-              Captions
-              <MediaCaptionsMenu slot="submenu" hidden>
-                <div slot="title">Captions</div>
-              </MediaCaptionsMenu>
-            </MediaSettingsMenuItem>
-            <MediaSettingsMenuItem>
-              Audio
-              <MediaAudioTrackMenu slot="submenu" hidden>
-                <div slot="title">Audio</div>
-              </MediaAudioTrackMenu>
-            </MediaSettingsMenuItem>
-          </MediaSettingsMenu>
-          <MediaPipButton />
-          <MediaFullscreenButton />
-        </MediaControlBar>
-      </MediaController>
-    </>
-  );
-}
-
-export default DefaultTheme;
diff --git a/tests/components/video.test.tsx b/tests/components/video.test.tsx
index 8161024..0bf4eeb 100644
--- a/tests/components/video.test.tsx
+++ b/tests/components/video.test.tsx
@@ -42,9 +42,9 @@ test('renders media-controller and mux-video', async () => {
 
   const wrapper = create(<Video src={asset} />);
   await setTimeout(50);
-  console.log(JSON.stringify(wrapper.toJSON()));
-  assert.equal(wrapper.toJSON().children[2].type, 'media-controller');
-  assert.equal(wrapper.toJSON().children[2].children[1].type, 'mux-video');
+
+  assert.equal(wrapper.toJSON().children[1].type, 'media-theme-sutro');
+  assert.equal(wrapper.toJSON().children[1].children[1].type, 'mux-video');
   assert.equal(
     wrapper.root.findByType('mux-video').parent.props.playbackId,
     'zNYmqdvJ61gt5uip02zPid01rYIPyyzVRVKQChgSgJlaY'