diff --git a/client/components/videos-ui/index.jsx b/client/components/videos-ui/index.jsx
index d892055337197..1eaf1828d6291 100644
--- a/client/components/videos-ui/index.jsx
+++ b/client/components/videos-ui/index.jsx
@@ -1,16 +1,14 @@
 import { Button, Gridicon } from '@automattic/components';
 import { useTranslate } from 'i18n-calypso';
 import { useEffect, useState, useRef } from 'react';
-import { useSelector } from 'react-redux';
 import useCourseQuery from 'calypso/data/courses/use-course-query';
 import { recordTracksEvent } from 'calypso/lib/analytics/tracks';
-import getSelectedSiteSlug from 'calypso/state/ui/selectors/get-selected-site-slug';
+import VideoLinksBar from './video-links-bar';
 import VideoPlayer from './video-player';
 import './style.scss';
 
 const VideosUi = ( { shouldDisplayTopLinks = false, onBackClick = () => {} } ) => {
 	const translate = useTranslate();
-	const siteSlug = useSelector( getSelectedSiteSlug );
 	const { data: course } = useCourseQuery( 'blogging-quick-start', { retry: false } );
 	const [ selectedVideoIndex, setSelectedVideoIndex ] = useState( null );
 
@@ -85,28 +83,13 @@ const VideosUi = ( { shouldDisplayTopLinks = false, onBackClick = () => {} } ) =
 	return (
 		<div className="videos-ui">
 			<div className="videos-ui__header">
-				<div className="videos-ui__header-links">
-					<div>
-						<Gridicon icon="my-sites" size={ 24 } />
-						{ shouldDisplayTopLinks && (
-							<a href="/" className="videos-ui__back-link" onClick={ onBackClick }>
-								<Gridicon icon="chevron-left" size={ 24 } />
-								<span>{ translate( 'Back' ) }</span>
-							</a>
-						) }
-					</div>
-					<div>
-						{ shouldDisplayTopLinks && (
-							<a
-								href={ `/post/${ siteSlug }` }
-								className="videos-ui__skip-link"
-								onClick={ skipClickHandler }
-							>
-								{ translate( 'Draft your first post' ) }
-							</a>
-						) }
-					</div>
-				</div>
+				<VideoLinksBar
+					displayIcon={ true }
+					displayLinks={ shouldDisplayTopLinks }
+					isFooter={ false }
+					onBackClick={ onBackClick }
+					skipClickHandler={ skipClickHandler }
+				/>
 				<div className="videos-ui__header-content">
 					<div className="videos-ui__titles">
 						<h2>{ translate( 'Watch five videos.' ) }</h2>
@@ -194,6 +177,13 @@ const VideosUi = ( { shouldDisplayTopLinks = false, onBackClick = () => {} } ) =
 					</div>
 				</div>
 			</div>
+			<VideoLinksBar
+				displayIcon={ false }
+				displayLinks={ shouldDisplayTopLinks }
+				isFooter={ true }
+				onBackClick={ onBackClick }
+				skipClickHandler={ skipClickHandler }
+			/>
 		</div>
 	);
 };
diff --git a/client/components/videos-ui/style-video-links-bar.scss b/client/components/videos-ui/style-video-links-bar.scss
new file mode 100644
index 0000000000000..f95948b7a6f24
--- /dev/null
+++ b/client/components/videos-ui/style-video-links-bar.scss
@@ -0,0 +1,52 @@
+@import '@wordpress/base-styles/breakpoints';
+@import '@wordpress/base-styles/mixins';
+
+.videos-ui__header-links {
+    padding: 24px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    font-size: $font-body-small;
+
+    &.videos-ui__is-footer {
+        border-top: 1px solid rgba( 255, 255, 255, 0.1 );
+        margin-top: auto;
+    }
+    .videos-ui__bar {
+        &.desktop {
+            display: none;
+        }
+    }
+
+    div,
+    a {
+        display: flex;
+        color: #fff;
+        align-items: center;
+    }
+
+    .videos-ui__back-link {
+        margin-left: 24px;
+    }
+
+    .videos-ui__bar {
+        display: flex;
+        justify-content: space-between;
+        width: 100%;
+
+        .videos-ui__bar-skip-link {
+            text-decoration: underline;
+        }
+    }
+	@include break-small {
+        .videos-ui__bar {
+            &.desktop {
+                display: flex;
+            }
+            &.mobile {
+                display: none;
+            }
+        }
+	}
+}
\ No newline at end of file
diff --git a/client/components/videos-ui/style.scss b/client/components/videos-ui/style.scss
index b0bde8920b60f..3e0cbc97dc1ce 100644
--- a/client/components/videos-ui/style.scss
+++ b/client/components/videos-ui/style.scss
@@ -6,31 +6,13 @@
 .videos-ui {
 	background: #101517;
 	color: #fff;
+	display: flex;
+	flex-direction: column;
+
 	.videos-ui__header {
 		background: #151b1e;
 		border-bottom: 1px solid rgba( 255, 255, 255, 0.1 );
 
-		.videos-ui__header-links {
-			padding: 24px;
-			display: flex;
-			flex-direction: row;
-			align-items: center;
-			justify-content: space-between;
-			font-size: $font-body-small;
-			div,
-			a {
-				display: flex;
-				color: #fff;
-				align-items: center;
-			}
-			.videos-ui__back-link {
-				margin-left: 24px;
-			}
-			.videos-ui__skip-link {
-				text-decoration: underline;
-			}
-		}
-
 		.videos-ui__header-content {
 			display: flex;
 			flex-direction: column;
@@ -60,7 +42,7 @@
 
 	.videos-ui__body {
 		max-width: 1280px;
-		margin: auto;
+		margin: 0 auto;
 
 		h3 {
 			font-size: $font-title-medium;
diff --git a/client/components/videos-ui/video-links-bar.jsx b/client/components/videos-ui/video-links-bar.jsx
new file mode 100644
index 0000000000000..225f256af7f82
--- /dev/null
+++ b/client/components/videos-ui/video-links-bar.jsx
@@ -0,0 +1,52 @@
+import { Gridicon } from '@automattic/components';
+import classNames from 'classnames';
+import { useTranslate } from 'i18n-calypso';
+import { useSelector } from 'react-redux';
+import getSelectedSiteSlug from 'calypso/state/ui/selectors/get-selected-site-slug';
+
+import './style-video-links-bar.scss';
+
+const VideoLinksBar = ( {
+	displayIcon,
+	displayLinks,
+	isFooter = false,
+	onBackClick = () => {},
+	skipClickHandler = () => {},
+} ) => {
+	const translate = useTranslate();
+	const siteSlug = useSelector( getSelectedSiteSlug );
+	const classes = classNames( 'videos-ui__bar', isFooter ? 'mobile' : 'desktop' );
+
+	return (
+		<div
+			className={ classNames( 'videos-ui__header-links', {
+				'videos-ui__is-footer': isFooter,
+			} ) }
+		>
+			{ displayIcon && <Gridicon icon="my-sites" size={ 24 } /> }
+			{ displayLinks && (
+				<div className={ classes }>
+					<div>
+						<a
+							href="/"
+							className={ classNames( {
+								'videos-ui__back-link': displayIcon,
+							} ) }
+							onClick={ onBackClick }
+						>
+							<Gridicon icon="chevron-left" size={ 24 } />
+							<span>{ translate( 'Back' ) }</span>
+						</a>
+					</div>
+					<div className="videos-ui__bar-skip-link">
+						<a href={ `/post/${ siteSlug }` } onClick={ skipClickHandler }>
+							{ translate( 'Draft your first post' ) }
+						</a>
+					</div>
+				</div>
+			) }
+		</div>
+	);
+};
+
+export default VideoLinksBar;