diff --git a/docs/manifest.json b/docs/manifest.json
index 8ecee97b4649e..3369ab5d7afad 100644
--- a/docs/manifest.json
+++ b/docs/manifest.json
@@ -731,6 +731,12 @@
 		"markdown_source": "../packages/components/src/card/card-header/README.md",
 		"parent": "components"
 	},
+	{
+		"title": "CardMedia",
+		"slug": "card-media",
+		"markdown_source": "../packages/components/src/card/card-media/README.md",
+		"parent": "components"
+	},
 	{
 		"title": "Card",
 		"slug": "card",
diff --git a/packages/components/src/card/docs/media.md b/packages/components/src/card/card-media/README.md
similarity index 100%
rename from packages/components/src/card/docs/media.md
rename to packages/components/src/card/card-media/README.md
diff --git a/packages/components/src/card/media.js b/packages/components/src/card/card-media/index.js
similarity index 90%
rename from packages/components/src/card/media.js
rename to packages/components/src/card/card-media/index.js
index 41bd93635af30..4458d74cda351 100644
--- a/packages/components/src/card/media.js
+++ b/packages/components/src/card/card-media/index.js
@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * Internal dependencies
  */
-import { MediaUI } from './styles';
+import { MediaUI } from '../styles';
 
 export function CardMedia( props ) {
 	const { className, ...additionalProps } = props;
diff --git a/packages/components/src/card/index.js b/packages/components/src/card/index.js
index 8aa9df111b072..7101c549e9bce 100644
--- a/packages/components/src/card/index.js
+++ b/packages/components/src/card/index.js
@@ -3,3 +3,4 @@ export { default as CardBody } from './card-body';
 export { default as CardDivider } from './card-divider';
 export { default as CardFooter } from './card-footer';
 export { default as CardHeader } from './card-header';
+export { default as CardMedia } from './card-media';
diff --git a/packages/components/src/card/stories/media.js b/packages/components/src/card/stories/media.js
index 25e492f132fd7..db7597d9c6b57 100644
--- a/packages/components/src/card/stories/media.js
+++ b/packages/components/src/card/stories/media.js
@@ -7,8 +7,7 @@ import styled from '@emotion/styled';
 /**
  * Internal dependencies
  */
-import { Card, CardBody, CardFooter, CardHeader } from '../';
-import CardMedia from '../media';
+import { Card, CardBody, CardFooter, CardHeader, CardMedia } from '../';
 import { getCardStoryProps } from './_utils';
 
 export default { title: 'Components/Card/Media', component: CardMedia };
diff --git a/packages/components/src/card/test/index.js b/packages/components/src/card/test/index.js
index 414a7c96a172c..8c02bd19a28b9 100644
--- a/packages/components/src/card/test/index.js
+++ b/packages/components/src/card/test/index.js
@@ -6,8 +6,7 @@ import { mount, shallow } from 'enzyme';
 /**
  * Internal dependencies
  */
-import { Card, CardBody, CardDivider, CardFooter, CardHeader } from '../';
-import CardMedia from '../media';
+import { Card, CardBody, CardDivider, CardFooter, CardHeader, CardMedia } from '../';
 
 describe( 'Card', () => {
 	describe( 'basic rendering', () => {
diff --git a/packages/components/src/card/test/media.js b/packages/components/src/card/test/media.js
index 935134d281dc2..c9e118f68e6df 100644
--- a/packages/components/src/card/test/media.js
+++ b/packages/components/src/card/test/media.js
@@ -6,7 +6,7 @@ import { shallow } from 'enzyme';
 /**
  * Internal dependencies
  */
-import CardMedia from '../media';
+import { CardMedia } from '../';
 
 describe( 'CardMedia', () => {
 	describe( 'basic rendering', () => {
diff --git a/packages/components/src/index.js b/packages/components/src/index.js
index f30be528a1707..5ba892d12348b 100644
--- a/packages/components/src/index.js
+++ b/packages/components/src/index.js
@@ -25,8 +25,7 @@ export { default as BaseControl } from './base-control';
 export { default as __experimentalBoxControl } from './box-control';
 export { default as Button } from './button';
 export { default as ButtonGroup } from './button-group';
-export { Card, CardBody, CardDivider, CardFooter, CardHeader } from './card';
-export { default as CardMedia } from './card/media';
+export { Card, CardBody, CardDivider, CardFooter, CardHeader, CardMedia } from './card';
 export { default as CheckboxControl } from './checkbox-control';
 export { default as ClipboardButton } from './clipboard-button';
 export { default as __experimentalColorEdit } from './color-edit';