diff --git a/.storybook/preview.js b/.storybook/preview.js
index f3a39928e..3d7e8c522 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,6 +1,6 @@
 import React, { FC } from 'react'
 import { addDecorator, addParameters } from '@storybook/react';
-import { Title, Subtitle, Story, Stories, Props, Description } from '@storybook/addon-docs/blocks';
+import { Title, Subtitle, Source as DocsSource, Story, Stories, Props, Description } from '@storybook/addon-docs/blocks';
 import { DependenciesTable } from 'storybook-addon-deps/blocks';
 import { ControlsEditorsTable, ThemeProvider, Source } from '@component-controls/storybook';
 
@@ -26,6 +26,7 @@ export const DocsPage = ({
       <Description slot={descriptionSlot} />
       <Story id="." />
       <Source id="." />
+      <DocsSource id="." />
       <ControlsEditorsTable id="." />
       <Props slot={propsSlot} />
       <DependenciesTable titleDependencies='Dependencies' titleDependents='Dependents' />
diff --git a/core/editors/src/blocks/Source/Source.tsx b/core/editors/src/blocks/Source/Source.tsx
index e6fabf26d..f0969edf2 100644
--- a/core/editors/src/blocks/Source/Source.tsx
+++ b/core/editors/src/blocks/Source/Source.tsx
@@ -9,7 +9,7 @@ import dracula from 'prism-react-renderer/themes/dracula';
 import duotoneDark from 'prism-react-renderer/themes/duotoneDark';
 import duotoneLight from 'prism-react-renderer/themes/duotoneLight';
 import github from 'prism-react-renderer/themes/github';
-import nightOwl from 'prism-react-renderer/themes/nightOwl';
+import nightowl from 'prism-react-renderer/themes/nightOwl';
 import nightOwlLight from 'prism-react-renderer/themes/nightOwlLight';
 import oceanicNext from 'prism-react-renderer/themes/oceanicNext';
 import palenight from 'prism-react-renderer/themes/palenight';
@@ -24,17 +24,17 @@ import { BlockContainer } from '../BlockContainer/BlockContainer';
 const themes: {
   [key: string]: PrismTheme;
 } = {
-  nightOwlLight,
-  nightOwl,
+  'nightowl-light': nightOwlLight,
+  nightowl,
   github,
-  vsDark,
-  oceanicNext,
+  'vs-dark': vsDark,
+  'oceanic-next': oceanicNext,
   palenight,
   ultramin,
-  duotoneLight,
-  duotoneDark,
+  'duotone-light': duotoneLight,
+  'duotone-dark': duotoneDark,
   dracula,
-  shadesOfPurple,
+  'shades-of-purple': shadesOfPurple,
 };
 export interface SourceProps {
   children?: string;
@@ -45,7 +45,7 @@ export const Source: FC<SourceProps> = ({
   children = '',
   language = 'jsx',
 }) => {
-  const [themeName, setThemeName] = React.useState<string>('nightOwlLight');
+  const [themeName, setThemeName] = React.useState<string>('nightowl-light');
   let prismTheme = themes[themeName] || defaultProps.theme;
   const [copied, setCopied] = React.useState(false);