diff --git a/Resources/Private/Language/de.locallang.xlf b/Resources/Private/Language/de.locallang.xlf
index a81859c905d7f938835af016213030e107787409..d3327a7ad756c1410b57b710ef32594547a43c1f 100644
--- a/Resources/Private/Language/de.locallang.xlf
+++ b/Resources/Private/Language/de.locallang.xlf
@@ -105,6 +105,14 @@
 				<source><![CDATA[Standard Resolution]]></source>
 				<target><![CDATA[Standard-Auflösung]]></target>
 			</trans-unit>
+			<trans-unit id="frontend.readMore" approved="yes">
+				<source><![CDATA[Read more]]></source>
+				<target><![CDATA[Mehr]]></target>
+			</trans-unit>
+			<trans-unit id="frontend.readLess" approved="yes">
+				<source><![CDATA[Read less]]></source>
+				<target><![CDATA[Weniger]]></target>
+			</trans-unit>
 			<trans-unit id="settings" approved="yes">
 				<source><![CDATA[Settings]]></source>
 				<target><![CDATA[Einstellungen]]></target>
diff --git a/Resources/Private/Language/locallang.xlf b/Resources/Private/Language/locallang.xlf
index 692a40211039c6a0b7a251f797c7058b5f90e268..f4ee5cdcad0fa925683199de8d7183b120625229 100644
--- a/Resources/Private/Language/locallang.xlf
+++ b/Resources/Private/Language/locallang.xlf
@@ -80,6 +80,12 @@
 			<trans-unit id="flexform.thumbnailType.standard">
 				<source><![CDATA[Standard Resolution]]></source>
 			</trans-unit>
+			<trans-unit id="frontend.readMore">
+				<source><![CDATA[Read more]]></source>
+			</trans-unit>
+			<trans-unit id="frontend.readLess">
+				<source><![CDATA[Read less]]></source>
+			</trans-unit>
 			<trans-unit id="settings">
 				<source><![CDATA[Settings]]></source>
 			</trans-unit>
diff --git a/Resources/Private/Templates/Youtube/Index.html b/Resources/Private/Templates/Youtube/Index.html
index 0355ad6ef82af3b596db9fdc7b52f28c18705331..561ac653e92880c209ab0a77afa54765e8802202 100644
--- a/Resources/Private/Templates/Youtube/Index.html
+++ b/Resources/Private/Templates/Youtube/Index.html
@@ -1,3 +1,5 @@
+{namespace sg=SGalinski\ProjectTheme\ViewHelpers}
+
 <f:layout name="Default"/>
 
 <f:section name="main">
@@ -5,117 +7,152 @@
 		{debugOutput -> f:format.raw()}
 	</f:if>
 
-	<f:if condition="{response.kind} == 'youtube#playlistItemListResponse' && {feed -> f:count() > 0}">
-		<f:then>
-			<div class="sg-youtube-playlist">
-				<f:if condition="{feed -> f:count()} === 1">
+	<f:variable name="feedCount" value="{feed -> f:count()}"/>
+
+	<f:comment><!--Handle the container classes--></f:comment>
+	<f:variable name="classes">
+		<f:if condition="{feedCount} > 4">
+			<f:then>
+				sg-video--default
+			</f:then>
+			<f:else>
+				<f:switch expression="{settings.layout}">
+					<f:case value="rows">
+						sg-video--rows
+					</f:case>
+					<f:case value="playlist">
+						sg-video--playlist sg-video--{feedCount} row
+					</f:case>
+					<f:defaultCase>
+						sg-video--default
+					</f:defaultCase>
+				</f:switch>
+			</f:else>
+		</f:if>
+	</f:variable>
+
+	{sg:structuredVideoData(videoArray: '{feed}', arrayType: 'youtube')}
+
+	<f:comment><!--Set the layout to single if there is only one item.--></f:comment>
+	<div class="sg-video {f:if(condition: '{feedCount} > 1', then: '{classes}', else: 'sg-video--single')}">
+		<f:if condition="{feedCount} < 2">
+			<f:then>
+				<f:render section="youtubeItem" arguments="{
+					feedItem: feed.0,
+					titleChars: 1000,
+					descChars: 1000
+				}"/>
+			</f:then>
+			<f:else>
+				<f:if condition="{feedCount} > 4">
 					<f:then>
-						<ul class="sg-youtube">
-							<li class="sg-youtube-item-container sg-youtube-item-single">
-								<a class="sg-youtube-item sg-card-shadow" href="{feed.0.url}&list={settings.id}" data-disable-lightbox="{settings.disableLightbox}" data-disable-lightbox-mobile="{settings.disableLightboxMobile}">
-									<f:if condition="{feed.0.thumbnail}">
-										<div class="sg-youtube-image">
-											<img src="{feed.0.thumbnail}" alt="{feed.0.title}" loading="lazy" />
-										</div>
-									</f:if>
-									<f:if condition="{feed.0.title}">
-										<div class="sg-youtube-title">
-											<h3 class="h3">
-												<f:format.htmlentitiesDecode>{feed.0.title}</f:format.htmlentitiesDecode>
-											</h3>
-										</div>
-									</f:if>
-									<f:if condition="{showDescription} && {feed.0.description}">
-										<div class="sg-youtube-text">
-											<f:format.htmlentitiesDecode><f:format.crop maxCharacters="200">{feed.0.description}</f:format.crop></f:format.htmlentitiesDecode>
-										</div>
-									</f:if>
-								</a>
-							</li>
-						</ul>
+						<f:render section="list" arguments="{_all}"/>
 					</f:then>
 					<f:else>
-						<div class="sg-youtube">
-							<div class="sg-youtube-item-container">
-								<a class="sg-youtube-item sg-card-shadow" href="{feed.0.url}&list={settings.id}" data-disable-lightbox="{settings.disableLightbox}" data-disable-lightbox-mobile="{settings.disableLightboxMobile}">
-									<f:if condition="{feed.0.thumbnail}">
-										<div class="sg-youtube-image">
-											<img src="{feed.0.thumbnail}" alt="{feed.0.title}" loading="lazy" />
-										</div>
-									</f:if>
-									<f:if condition="{showTitle} && {feed.0.title}">
-										<div class="sg-youtube-title">
-											<h3 class="h3">
-												<f:format.htmlentitiesDecode>{feed.0.title}</f:format.htmlentitiesDecode>
-											</h3>
-										</div>
-									</f:if>
-									<f:if condition="{showDescription} && {feed.0.description}">
-										<div class="sg-youtube-text">
-											<f:format.htmlentitiesDecode><f:format.crop maxCharacters="200">{feed.0.description}</f:format.crop></f:format.htmlentitiesDecode>
-										</div>
-									</f:if>
-								</a>
-							</div>
-						</div>
-						<ul class="sg-youtube">
-							<f:for each="{feed}" as="feedItem" iteration="feedIterator">
-								<f:if condition="!{feedIterator.isFirst}">
-									<li class="sg-youtube-item-container sg-youtube-item-list">
-										<a class="sg-youtube-item sg-card-shadow" href="{feedItem.url}&list={settings.id}" data-disable-lightbox="{settings.disableLightbox}" data-disable-lightbox-mobile="{settings.disableLightboxMobile}">
-											<f:if condition="{feedItem.thumbnail}">
-												<div class="sg-youtube-image">
-													<picture>
-														<source media="(max-width: 600px)"
-																srcset="{f:uri.image(src: '{feedItem.thumbnail}', width: '600c')}">
-														<source media="(max-width: 992px)"
-																srcset="{f:uri.image(src: '{feedItem.thumbnail}', width: '992c')}">
-														<f:image src="{feedItem.thumbnail}" alt="{feedItem.title}" class="sg-video__image" width="1140" loading="lazy"/>
-													</picture>
-												</div>
-											</f:if>
-											<f:if condition="{showTitle} && {feedItem.title}">
-												<div class="sg-youtube-title">
-													<h3 class="h3">
-														<f:format.htmlentitiesDecode>{feedItem.title}</f:format.htmlentitiesDecode>
-													</h3>
-												</div>
-											</f:if>
-										</a>
-									</li>
-								</f:if>
-							</f:for>
-						</ul>
+						<f:switch expression="{settings.layout}">
+							<f:case value="playlist">
+								<f:render section="list-playlist" arguments="{_all}"/>
+							</f:case>
+							<f:defaultCase>
+								<f:render section="list" arguments="{_all}"/>
+							</f:defaultCase>
+						</f:switch>
 					</f:else>
 				</f:if>
+			</f:else>
+		</f:if>
+	</div>
+</f:section>
+
+<f:section name="list">
+	<ul class="sg-video__list sg-video__list--{f:if(condition: '{settings.layout} === \'rows\'', then: 'rows', else: 'default')}">
+		<f:for each="{feed}" as="feedItem" iteration="feedIterator">
+			<li class="sg-video__list-item">
+				<f:render section="youtubeItem" arguments="{
+					feed: feed,
+					feedItem: feedItem,
+					titleChars: 500,
+					descChars: 1000,
+					expand: 1
+				}"/>
+			</li>
+		</f:for>
+	</ul>
+</f:section>
+
+<f:section name="list-playlist">
+	<f:variable name="highlightClasses">
+		<f:switch expression="{feedCount}">
+			<f:case value="3">col-lg-8</f:case>
+			<f:case value="4">col-lg-6</f:case>
+			<f:defaultCase>col-md-6</f:defaultCase>
+		</f:switch>
+	</f:variable>
+
+	<f:variable name="listClasses">
+		<f:switch expression="{feedCount}">
+			<f:case value="3">col-lg-4</f:case>
+			<f:case value="4">col-lg-6</f:case>
+			<f:defaultCase>col-md-6</f:defaultCase>
+		</f:switch>
+	</f:variable>
+
+	<div class="sg-video__highlight {highlightClasses}">
+		<f:render section="youtubeItem" arguments="{
+			feedItem: feed.0,
+			titleChars: 200,
+			descChars: 320
+		}"/>
+	</div>
+	<ul class="sg-video__list sg-video__list--playlist {listClasses}">
+		<f:for each="{feed}" as="feedItem" iteration="feedIterator">
+			<f:if condition="!{feedIterator.isFirst}">
+				<li class="sg-video__list-item {f:if(condition: '{feedCount} === 4', then: 'sg-video__list-item--alt')}">
+					<f:render section="youtubeItem" arguments="{
+						feed: feed,
+						feedItem: feedItem,
+						titleChars: 100,
+						descChars: \" {f:if(condition: '{feedCount} < 3', then: '300', else: '90')}\"}" />
+				</li>
+			</f:if>
+		</f:for>
+	</ul>
+</f:section>
+
+<f:section name="youtubeItem">
+	<div class="sg-video__item">
+		<f:if condition="{feedItem.thumbnail}">
+			<a class="sg-video__image-container sg-youtube-item" href="{feedItem.url}"
+			   data-disable-lightbox="{settings.disableLightbox}" target="_blank"
+			   data-disable-lightbox-mobile="{settings.disableLightboxMobile}">
+				<img class="sg-video__image" src="{feedItem.thumbnail}" alt="{feedItem.title}"/>
+			</a>
+		</f:if>
+		<f:if condition="{settings.showTitle} || {settings.showDescription}">
+			<div class="sg-video__bodytext">
+				<f:if condition="{settings.showTitle} && {feedItem.title}">
+					<h3 class="h3">
+						<f:format.crop maxCharacters="{titleChars}"><f:format.htmlentitiesDecode>{feedItem.title}</f:format.htmlentitiesDecode></f:format.crop>
+					</h3>
+				</f:if>
+				<f:if condition="{settings.showDescription} && {feedItem.description}">
+					<span class="sg-video__description">
+						<f:format.crop maxCharacters="{descChars}"><f:format.htmlentitiesDecode>{feedItem.description}</f:format.htmlentitiesDecode></f:format.crop>
+					</span>
+				</f:if>
+				<f:if condition="{expand} && {settings.layout} == 'rows'">
+					<f:render section="readMoreButton" />
+				</f:if>
 			</div>
-		</f:then>
-		<f:else>
-			<ul class="sg-youtube sg-youtube-default">
-				<f:for each="{feed}" as="feedItem" iteration="feedIterator">
-					<li class="sg-youtube-item-container{f:if(condition: '{feedIterator.total} < 2', then: ' sg-youtube-item-single')}">
-						<a class="sg-youtube-item sg-card-shadow" href="{feedItem.url}" target="_blank" data-disable-lightbox="{settings.disableLightbox}" data-disable-lightbox-mobile="{settings.disableLightboxMobile}">
-							<f:if condition="{feedItem.thumbnail}">
-								<div class="sg-youtube-image">
-									<img src="{feedItem.thumbnail}" alt="{feedItem.title}" loading="lazy"/>
-								</div>
-							</f:if>
-							<f:if condition="{showTitle} && {feedItem.title}">
-								<div class="sg-youtube-title">
-									<h3 class="h3">
-										<f:format.htmlentitiesDecode>{feedItem.title}</f:format.htmlentitiesDecode>
-									</h3>
-								</div>
-							</f:if>
-							<f:if condition="{showDescription} && {feedItem.description}">
-								<div class="sg-youtube-text">
-									<f:format.htmlentitiesDecode><f:format.crop maxCharacters="200">{feedItem.description}</f:format.crop></f:format.htmlentitiesDecode>
-								</div>
-							</f:if>
-						</a>
-					</li>
-				</f:for>
-			</ul>
-		</f:else>
-	</f:if>
+			<f:if condition="{expand} && {settings.layout} == 'default'">
+				<f:render section="readMoreButton" />
+			</f:if>
+		</f:if>
+	</div>
+</f:section>
+
+<f:section name="readMoreButton">
+	<button type="button" class="sg-video__read-more"
+			data-button-open-text="{f:translate(key: 'frontend.readMore', extensionName: 'sg_youtube')}"
+			data-button-close-text="{f:translate(key: 'frontend.readLess', extensionName: 'sg_youtube')}">{f:translate(key: 'frontend.readMore', extensionName: 'sg_youtube')}</button>
 </f:section>