diff --git a/packages/docs/docusaurus.config.ts b/packages/docs/docusaurus.config.ts
index 3643e93a3eb..ceec0513024 100644
--- a/packages/docs/docusaurus.config.ts
+++ b/packages/docs/docusaurus.config.ts
@@ -166,10 +166,6 @@ const config: Config = {
 							label: 'Lambda',
 							to: '/lambda',
 						},
-						{
-							label: 'Learn',
-							to: '/learn',
-						},
 						{
 							label: 'Convert a video',
 							to: 'https://convert.remotion.dev',
@@ -183,7 +179,11 @@ const config: Config = {
 							href: 'https://github.com/remotion-dev/remotion',
 						},
 						{
-							label: 'License + Pricing',
+							label: 'Changelog',
+							href: 'https://remotion.dev/changelog',
+						},
+						{
+							label: 'License & Pricing',
 							to: '/docs/license/pricing',
 						},
 					],
@@ -199,6 +199,10 @@ const config: Config = {
 							label: 'Showcase',
 							to: 'showcase',
 						},
+						{
+							label: 'Success Stories',
+							to: 'success-stories',
+						},
 						{
 							label: 'Experts',
 							to: 'experts',
@@ -230,61 +234,63 @@ const config: Config = {
 					],
 				},
 				{
-					title: 'More',
+					title: 'Company',
 					items: [
 						{
-							label: 'About us',
+							label: 'About Us',
 							to: 'about',
 						},
 						{
-							label: 'Contact us',
+							label: 'Contact Us',
 							to: 'contact',
 						},
 						{
-							label: 'Blog',
-							to: 'blog',
-						},
-						{
-							label: 'Success Stories',
-							to: 'success-stories',
-						},
-						{
-							label: 'Support',
-							to: '/docs/support',
+							label: 'Brand',
+							href: 'https://remotion.dev/brand',
 						},
+					],
+				},
+				{
+					title: 'Legal & Trust',
+					items: [
 						{
-							label: 'Changelog',
-							href: 'https://remotion.dev/changelog',
+							label: 'Terms and Conditions',
+							to: '/docs/license/terms',
 						},
 						{
-							label: 'Acknowledgements',
-							href: 'https://remotion.dev/acknowledgements',
+							label: 'Privacy Policy',
+							to: '/docs/license/privacy',
 						},
 						{
-							label: 'License',
-							href: 'https://remotion.dev/license',
+							label: 'DPA Statement',
+							to: '/docs/license/dpa',
 						},
 						{
-							label: 'Terms and Conditions',
-							href: 'https://remotion.dev/docs/license/terms',
+							label: 'DPIA Statement',
+							to: '/docs/license/dpia',
 						},
 						{
-							label: 'Privacy Policy',
-							href: 'https://remotion.dev/docs/license/privacy',
+							label: 'Accessibility',
+							to: '/docs/accessibility',
 						},
 						{
-							label: 'DPA Statement',
-							href: 'https://www.remotion.dev/docs/license/dpa',
+							label: 'Acknowledgments',
+							to: '/docs/acknowledgements',
 						},
+					],
+				},
+				{
+					title: 'More',
+					items: [
 						{
-							label: 'DPIA Statement',
-							href: 'https://www.remotion.dev/docs/license/dpia',
+							label: 'Blog',
+							to: 'blog',
 						},
 						{
-							label: 'Brand',
-							href: 'https://remotion.dev/brand',
+							label: 'Support',
+							to: '/docs/support',
 						},
-					].filter(Boolean),
+					],
 				},
 			],
 		},
diff --git a/packages/docs/src/css/custom.css b/packages/docs/src/css/custom.css
index 07ac4d1ef35..7d1cd91aa6a 100644
--- a/packages/docs/src/css/custom.css
+++ b/packages/docs/src/css/custom.css
@@ -299,3 +299,59 @@ code {
 		display: none !important;
 	}
 }
+
+.remotion-footer__links {
+	display: grid;
+	grid-template-columns: minmax(12rem, 1.35fr) minmax(0, 5fr);
+	gap: 2.5rem;
+	align-items: start;
+}
+
+.remotion-footer__brand {
+	min-width: 0;
+}
+
+.remotion-footer__logo {
+	display: block;
+	height: 32px;
+	margin-bottom: 20px;
+}
+
+.remotion-footer__copyright {
+	margin: 0;
+	color: var(--ifm-footer-link-color);
+	font-size: 0.8em;
+}
+
+.remotion-footer__categories {
+	display: grid;
+	grid-template-columns: repeat(5, minmax(0, 1fr));
+	gap: 2rem clamp(1rem, 2.5vw, 3rem);
+	min-width: 0;
+}
+
+.remotion-footer__column {
+	min-width: 0;
+	margin-bottom: 0;
+}
+
+@media screen and (max-width: 1199px) {
+	.remotion-footer__links {
+		grid-template-columns: 1fr;
+	}
+
+	.remotion-footer__categories {
+		grid-template-columns: repeat(3, minmax(0, 1fr));
+	}
+}
+
+@media screen and (max-width: 767px) {
+	.remotion-footer__links {
+		gap: 2rem;
+	}
+
+	.remotion-footer__categories {
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+		gap: 2rem 1.25rem;
+	}
+}
diff --git a/packages/docs/src/theme/Footer/Links/MultiColumn/index.tsx b/packages/docs/src/theme/Footer/Links/MultiColumn/index.tsx
index f262caad9b6..c3f32240dff 100644
--- a/packages/docs/src/theme/Footer/Links/MultiColumn/index.tsx
+++ b/packages/docs/src/theme/Footer/Links/MultiColumn/index.tsx
@@ -24,7 +24,7 @@ const ColumnLinkItem = ({item}) => {
 
 const Column = ({column}) => {
 	return (
-		<div className="col footer__col">
+		<div className="footer__col remotion-footer__column">
 			<div style={footerTitle} className="footer__title">
 				{column.title}
 			</div>
@@ -38,14 +38,6 @@ const Column = ({column}) => {
 	);
 };
 
-const copyright: React.CSSProperties = {
-	textAlign: 'left',
-	color: 'var(--ifm-footer-link-color)',
-	fontSize: '0.8em',
-	marginTop: 15,
-	marginRight: 38,
-};
-
 export default ({columns}) => {
 	const {colorMode} = useColorMode();
 	const [src, setSrc] = useState('/img/new-logo.png');
@@ -59,30 +51,25 @@ export default ({columns}) => {
 	}, [colorMode]);
 
 	return (
-		<div className="row footer__links">
-			<div
-				style={{
-					padding: '0 var(--ifm-spacing-horizontal)',
-					marginBottom: 20,
-				}}
-			>
+		<div className="footer__links remotion-footer__links">
+			<div className="remotion-footer__brand">
 				<img
 					key={colorMode}
 					src={src}
-					style={{
-						height: 32,
-						marginRight: 80,
-					}}
+					alt="Remotion"
+					className="remotion-footer__logo"
 				/>
-				<p style={copyright}>
+				<p className="remotion-footer__copyright">
 					© Copyright {new Date().getFullYear()} Remotion AG. <br /> Website
 					created with Docusaurus.
 				</p>
 			</div>
-			{columns.map((column, i) => (
-				// eslint-disable-next-line react/no-array-index-key
-				<Column key={i} column={column} />
-			))}
+			<div className="remotion-footer__categories">
+				{columns.map((column, i) => (
+					// eslint-disable-next-line react/no-array-index-key
+					<Column key={i} column={column} />
+				))}
+			</div>
 		</div>
 	);
 };