diff --git a/.storybook/storybook.css b/.storybook/storybook.css
index a9d35510e0..8b6eae3dae 100644
--- a/.storybook/storybook.css
+++ b/.storybook/storybook.css
@@ -1,4 +1,7 @@
 @import 'tailwindcss';
+@import 'codemirror/lib/codemirror.css';
+@import 'codemirror/theme/material.css';
+@import '../resources/css/vendors/codemirror.css';
 @import '../resources/css/ui.css';
 @import '../resources/css/core/utilities.css';
 @import '../resources/css/elements/tables.css';
diff --git a/resources/js/stories/CodeEditor.stories.ts b/resources/js/stories/CodeEditor.stories.ts
index 41ab66be73..1f7d531152 100644
--- a/resources/js/stories/CodeEditor.stories.ts
+++ b/resources/js/stories/CodeEditor.stories.ts
@@ -120,7 +120,7 @@ export const _ModeSelection: Story = {
             const mode = ref('javascript');
             return { code, mode };
         },
-        template: `<CodeEditor v-model="code" :mode="mode" allow-mode-selection @update:mode="mode = $event" /><PortalTargets />`,
+        template: `<CodeEditor v-model="code" :mode="mode" :allow-mode-selection="false" @update:mode="mode = $event" /><PortalTargets />`,
     }),
 };
 
diff --git a/resources/js/stories/docs/CodeEditor.mdx b/resources/js/stories/docs/CodeEditor.mdx
index 234de1c4b4..d2cc77da16 100644
--- a/resources/js/stories/docs/CodeEditor.mdx
+++ b/resources/js/stories/docs/CodeEditor.mdx
@@ -6,10 +6,6 @@ import * as CodeEditorStories from '../CodeEditor.stories';
 # CodeEditor
 A powerful code editor component powered by CodeMirror. Supports syntax highlighting for multiple languages, line numbers, line wrapping, and keyboard shortcuts.
 
-Docs coming soon.
-
-{/* Todo
-
 <Canvas of={CodeEditorStories._DocsIntro} sourceState={'shown'} />
 
 ## Modes
@@ -25,6 +21,4 @@ Disable line numbers by setting the `line-numbers` prop to `false`. This can be
 <Canvas of={CodeEditorStories._NoLineNumbers} sourceState={'shown'} />
 
 ## Arguments
-<ArgTypes of={CodeEditorStories} />
-
-*/}
+<ArgTypes of={CodeEditorStories} />
\ No newline at end of file