diff --git a/Chirp/src/Chirp.Web/Pages/Shared/Components/CheepList/Default.cshtml b/Chirp/src/Chirp.Web/Pages/Shared/Components/CheepList/Default.cshtml
index cbc3d9dd..e9ae64b4 100644
--- a/Chirp/src/Chirp.Web/Pages/Shared/Components/CheepList/Default.cshtml
+++ b/Chirp/src/Chirp.Web/Pages/Shared/Components/CheepList/Default.cshtml
@@ -14,25 +14,13 @@ private
     }
 }
 
-<script type="text/javascript">
-    function showPopup() {
-        document.getElementById('popup').style.display = 'flex';
-    }
-
-    function cancelPopup() {
-        document.getElementById('popup').style.display = 'none';
-    }
-
-    function goToSpecificCheep(cheepId) {
-        window.location.href = `/SpecificCheep?cheepId=${cheepId}`;
-    }
-
-</script>
+@await Component.InvokeAsync("SideVideo", new {isLeft = true})
+@await Component.InvokeAsync("SideVideo", new {isLeft = false})
 
 <ul id="messagelist" class="cheeps">
     @foreach (var cheep in cheeps)
     {
-        <li style ="word-wrap: break-word;">
+        <li style="word-wrap: break-word;">
             <p>
                 <strong>
                     <a href="/@cheep.Author">@cheep.Author</a>
@@ -61,3 +49,18 @@ private
         </li>
     }
 </ul>
+
+<script type="text/javascript">
+    function showPopup() {
+        document.getElementById('popup').style.display = 'flex';
+    }
+
+    function cancelPopup() {
+        document.getElementById('popup').style.display = 'none';
+    }
+
+    function goToSpecificCheep(cheepId) {
+        window.location.href = `/SpecificCheep?cheepId=${cheepId}`;
+    }
+
+</script>
\ No newline at end of file
diff --git a/Chirp/src/Chirp.Web/Pages/Shared/Components/SideVideo/Default.cshtml b/Chirp/src/Chirp.Web/Pages/Shared/Components/SideVideo/Default.cshtml
new file mode 100644
index 00000000..73e6980f
--- /dev/null
+++ b/Chirp/src/Chirp.Web/Pages/Shared/Components/SideVideo/Default.cshtml
@@ -0,0 +1,42 @@
+
+@{
+    var videoList = ViewBag.VideoList as List<string>;
+    var isLeft = ViewBag.IsLeft;
+}
+
+@if (isLeft)
+{
+    <div id="videoLeftContainer" class="video-container">
+        <video id="leftVideo" autoplay muted disablePictureInPicture>
+            <source src="@videoList?[0]" type="video/mp4">
+            Your browser does not support the video tag.
+        </video>
+    </div>
+}
+else
+{
+    <div id="videoRightContainer" class="video-container">
+        <video id="rightVideo" autoplay muted disablePictureInPicture>
+            <source src="@videoList?[0]" type="video/mp4">
+            Your browser does not support the video tag.
+        </video>
+    </div>
+}
+
+<script type="module">
+    import VideoController from '/js/videoController.js';
+
+    const videoList = @Html.Raw(Json.Serialize(videoList));
+    const isLeft = @Html.Raw(Json.Serialize(isLeft));
+    
+    if(isLeft)
+    {
+        const leftVideoElement = document.getElementById('leftVideo');
+        new VideoController(leftVideoElement, videoList);
+    }
+    else
+    {
+        const rightVideoElement = document.getElementById('rightVideo');
+        new VideoController(rightVideoElement, videoList);
+    }
+</script>
\ No newline at end of file
diff --git a/Chirp/src/Chirp.Web/Pages/Shared/_Layout.cshtml b/Chirp/src/Chirp.Web/Pages/Shared/_Layout.cshtml
index 4659468c..556b96a4 100644
--- a/Chirp/src/Chirp.Web/Pages/Shared/_Layout.cshtml
+++ b/Chirp/src/Chirp.Web/Pages/Shared/_Layout.cshtml
@@ -31,6 +31,8 @@
 </div>
 
 <script src="/js/follow.js"></script>
+@* this is used for the video css to now how to size them *@
+<script src="/js/updateWindowWidth.js"></script>
 @await RenderSectionAsync("Scripts", required: false)
 </body>
 </html>
\ No newline at end of file
diff --git a/Chirp/src/Chirp.Web/Pages/SpecificCheep.cshtml b/Chirp/src/Chirp.Web/Pages/SpecificCheep.cshtml
index 98f8b697..f9442fae 100644
--- a/Chirp/src/Chirp.Web/Pages/SpecificCheep.cshtml
+++ b/Chirp/src/Chirp.Web/Pages/SpecificCheep.cshtml
@@ -8,6 +8,9 @@
     var comments = Model.Comments;
 }
 
+@await Component.InvokeAsync("SideVideo", new {isLeft = true})
+@await Component.InvokeAsync("SideVideo", new {isLeft = false})
+
 <div style="padding: 10px;">
     <strong>
         <a href="/@cheep.Author">@cheep.Author</a>
diff --git a/Chirp/src/Chirp.Web/ViewComponents/CheepListViewComponent.cs b/Chirp/src/Chirp.Web/ViewComponents/CheepListViewComponent.cs
index 9b80a317..944cfdfe 100644
--- a/Chirp/src/Chirp.Web/ViewComponents/CheepListViewComponent.cs
+++ b/Chirp/src/Chirp.Web/ViewComponents/CheepListViewComponent.cs
@@ -5,10 +5,11 @@ namespace Chirp.Web.ViewComponents;
 
 public class CheepListViewComponent : ViewComponent
 {
-    public IViewComponentResult Invoke(IEnumerable<CheepDTO> cheeps, String targetPage)
+    public IViewComponentResult Invoke(IEnumerable<CheepDTO> cheeps, string targetPage)
     {
         ViewBag.TargetPage = targetPage;
         ViewBag.Cheeps = cheeps;
+        
         return View("Default");
     }
 }
\ No newline at end of file
diff --git a/Chirp/src/Chirp.Web/ViewComponents/SideVideoViewComponent.cs b/Chirp/src/Chirp.Web/ViewComponents/SideVideoViewComponent.cs
new file mode 100644
index 00000000..70b049eb
--- /dev/null
+++ b/Chirp/src/Chirp.Web/ViewComponents/SideVideoViewComponent.cs
@@ -0,0 +1,29 @@
+using Microsoft.AspNetCore.Mvc;
+
+namespace Chirp.Web.ViewComponents;
+
+public class SideVideoViewComponent : ViewComponent
+{
+    private readonly List<string> _videoNames =
+    [
+        "~/videos/Kittens.mp4",
+        "~/videos/SubwaySurfers_1.mp4",
+        "~/videos/SubwaySurfers_2.mp4",
+        "~/videos/TempleRun.mp4"
+    ];
+    
+    public IViewComponentResult Invoke(bool isLeft)
+    {
+        ViewBag.IsLeft = isLeft;
+        ViewBag.VideoList = GetVideos();
+
+        return View("Default");
+    }
+    
+    public List<string> GetVideos()
+    {
+        var random = new Random();
+        var videos = _videoNames.OrderBy(x => random.Next()).ToList();
+        return videos.Select(v =>Url.Content(v)).ToList();
+    }
+}
\ No newline at end of file
diff --git a/Chirp/src/Chirp.Web/wwwroot/css/style.css b/Chirp/src/Chirp.Web/wwwroot/css/style.css
index a6d053c8..4d7f050d 100644
--- a/Chirp/src/Chirp.Web/wwwroot/css/style.css
+++ b/Chirp/src/Chirp.Web/wwwroot/css/style.css
@@ -1,16 +1,21 @@
+:root {
+    --window-width: 0px; /* Default value */
+}
+
 body {
-  background: #eccaca;
-  font-family: 'Trebuchet MS', sans-serif;
-  font-size: 14px;
+    background: #eccaca;
+    font-family: 'Trebuchet MS', sans-serif;
+    font-size: 14px;
 }
 
 a {
-  color: #26776F;
+    color: #26776F;
 }
 
 a:hover {
-  color: #333;
+    color: #333;
 }
+
 input[type="username"],
 input[type="email"],
 input[type="text"],
@@ -28,53 +33,53 @@ input[type="password"] {
 }
 
 input[type="submit"] {
-  background: #571010;
-  border: 1px solid #3b0707;
-  padding: 1px 3px;
-  font-family: 'Trebuchet MS', sans-serif;
-  font-size: 14px;
-  font-weight: bold;
-  border-radius: 2px;
-  -moz-border-radius: 2px;
-  -webkit-border-radius: 2px;
-  color: white;
+    background: #571010;
+    border: 1px solid #3b0707;
+    padding: 1px 3px;
+    font-family: 'Trebuchet MS', sans-serif;
+    font-size: 14px;
+    font-weight: bold;
+    border-radius: 2px;
+    -moz-border-radius: 2px;
+    -webkit-border-radius: 2px;
+    color: white;
 }
 
 div.page {
-  background: white;
-  border: 1px solid #cc6e6e;
-  width: 700px;
-  margin: 30px auto;
+    background: white;
+    border: 1px solid #cc6e6e;
+    width: 700px;
+    margin: 30px auto;
 }
 
 div.page > h1 {
-  background: #cc6e6e;
-  margin: 0;
-  padding: 10px 14px;
-  color: white;
-  letter-spacing: 1px;
-  text-shadow: 0 0 3px #772424;
-  font-weight: normal;
-  font-size: 80px;
+    background: #cc6e6e;
+    margin: 0;
+    padding: 10px 14px;
+    color: white;
+    letter-spacing: 1px;
+    text-shadow: 0 0 3px #772424;
+    font-weight: normal;
+    font-size: 80px;
 }
 
 div.page h1 img {
-  height: 1em;
+    height: 1em;
 }
 
 div.page div.navigation {
-  background: #DEE9E8;
-  padding: 4px 10px;
-  border-top: 1px solid #ccc;
-  border-bottom: 1px solid #eee;
-  color: #888;
-  font-size: 12px;
-  letter-spacing: 0.5px;
+    background: #DEE9E8;
+    padding: 4px 10px;
+    border-top: 1px solid #ccc;
+    border-bottom: 1px solid #eee;
+    color: #888;
+    font-size: 12px;
+    letter-spacing: 0.5px;
 }
 
 div.page div.navigation a {
-  color: #444;
-  font-weight: bold;
+    color: #444;
+    font-weight: bold;
 }
 
 div.page div.navigation form {
@@ -95,155 +100,183 @@ div.page div.navigation form button {
 }
 
 div.page h2 {
-  margin: 0 0 15px 0;
-  color: #571010;
-  text-shadow: 0 1px 2px #ccc;
+    margin: 0 0 15px 0;
+    color: #571010;
+    text-shadow: 0 1px 2px #ccc;
 }
 
 div.page div.body {
-  padding: 10px;
+    padding: 10px;
 }
 
 div.page div.footer {
-  background: #eee;
-  color: #888;
-  padding: 5px 10px;
-  font-size: 12px;
+    background: #eee;
+    color: #888;
+    padding: 5px 10px;
+    font-size: 12px;
 }
 
 div.page div.followstatus {
-  border: 1px solid #ccc;
-  background: #E3EBEA;
-  border-radius: 2px;
-  -moz-border-radius: 2px;
-  -webkit-border-radius: 2px;
-  padding: 3px;
-  font-size: 13px;
+    border: 1px solid #ccc;
+    background: #E3EBEA;
+    border-radius: 2px;
+    -moz-border-radius: 2px;
+    -webkit-border-radius: 2px;
+    padding: 3px;
+    font-size: 13px;
 }
 
+/*cheep list*/
 div.page ul.cheeps {
-  list-style: none;
-  margin: 0;
-  padding: 0;
+    list-style: none;
+    padding: 0;
+    margin: 0;
 }
 
+/*cheeps*/
 div.page ul.cheeps li {
-  margin: 10px 0;
-  padding: 5px;
-  background: #F0FAF9;
-  border: 1px solid #DBF3F1;
-  border-radius: 2px;
-  -moz-border-radius: 5px;
-  -webkit-border-radius: 5px;
-  min-height: 48px;
+    margin: 10px 0;
+    padding: 5px;
+    background: #F0FAF9;
+    border: 1px solid #DBF3F1;
+    border-radius: 2px;
+    -moz-border-radius: 5px;
+    -webkit-border-radius: 5px;
+    min-height: 48px;
+}
+
+/* Video Containers */
+#videoLeftContainer,
+#videoRightContainer {
+    position: fixed;
+    top: 50%;
+    transform: translateY(-50%);
+    /*-700 is from the page size, and the 30 is just margin*/
+    width: calc(calc(var(--window-width) - 730px)/2);
+}
+
+#videoLeftContainer {
+    left: 0;
+}
+
+#videoRightContainer {
+    right: 0;
+}
+
+/* Videos */
+#videoLeftContainer video,
+#videoRightContainer video {
+    width: 100%;
+    height: auto;
+    object-fit: contain;
 }
 
 div.page ul.cheeps p {
-  margin: 0;
+    margin: 0;
 }
 
 div.page ul.cheeps li img {
-  float: left;
-  padding: 0 10px 0 0;
+    float: left;
+    padding: 0 10px 0 0;
 }
 
 div.page ul.cheeps li small {
-  font-size: 0.9em;
-  color: #888;
+    font-size: 0.9em;
+    color: #888;
 }
 
 div.page div.cheepbox {
-  margin: 10px 0;
-  padding: 5px;
-  background: #F0FAF9;
-  border: 1px solid #e29494;
-  border-radius: 2px;
-  -moz-border-radius: 5px;
-  -webkit-border-radius: 5px;
+    margin: 10px 0;
+    padding: 5px;
+    background: #F0FAF9;
+    border: 1px solid #e29494;
+    border-radius: 2px;
+    -moz-border-radius: 5px;
+    -webkit-border-radius: 5px;
 }
 
 div.page div.cheepbox h3 {
-  margin: 0;
-  font-size: 1em;
-  color: #7e2c2c;
+    margin: 0;
+    font-size: 1em;
+    color: #7e2c2c;
 }
 
 div.page div.cheepbox p {
-  margin: 0;
+    margin: 0;
 }
 
 div.page div.cheepbox input[type="text"] {
-  width: 585px;
+    width: 585px;
 }
 
 div.page div.cheepbox input[type="submit"] {
-  width: 70px;
-  margin-left: 5px;
+    width: 70px;
+    margin-left: 5px;
 }
 
 div.message {
-  list-style: none;
-  margin: 10px 10px 0 10px;
+    list-style: none;
+    margin: 10px 10px 0 10px;
 
-  background: #f3b9b9;
-  border: 1px solid #ce8181;
-  border-radius: 2px;
-  -moz-border-radius: 2px;
-  -webkit-border-radius: 2px;
-  padding: 4px;
-  font-size: 13px;
+    background: #f3b9b9;
+    border: 1px solid #ce8181;
+    border-radius: 2px;
+    -moz-border-radius: 2px;
+    -webkit-border-radius: 2px;
+    padding: 4px;
+    font-size: 13px;
 }
 
 ul.message li {
-  background: #f3b9b9;
-  border: 1px solid #ce8181;
-  border-radius: 2px;
-  -moz-border-radius: 2px;
-  -webkit-border-radius: 2px;
-  padding: 4px;
-  font-size: 13px;
+    background: #f3b9b9;
+    border: 1px solid #ce8181;
+    border-radius: 2px;
+    -moz-border-radius: 2px;
+    -webkit-border-radius: 2px;
+    padding: 4px;
+    font-size: 13px;
 }
 
 div.error {
-  margin: 10px 0;
-  background: #FAE4E4;
-  border: 1px solid #DD6F6F;
-  border-radius: 2px;
-  -moz-border-radius: 2px;
-  -webkit-border-radius: 2px;
-  padding: 4px;
-  font-size: 13px;
+    margin: 10px 0;
+    background: #FAE4E4;
+    border: 1px solid #DD6F6F;
+    border-radius: 2px;
+    -moz-border-radius: 2px;
+    -webkit-border-radius: 2px;
+    padding: 4px;
+    font-size: 13px;
 }
 
 div.topics {
-  width: 180px;
-  height: 250px;
-  background: #ffffff;
-  border: 1px solid #e29494;
-  border-radius: 2px;
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  margin-left: 460px;
-  padding: 10px;
+    width: 180px;
+    height: 250px;
+    background: #ffffff;
+    border: 1px solid #e29494;
+    border-radius: 2px;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    margin-left: 460px;
+    padding: 10px;
 }
 
 ul.topic {
-  list-style: none;
-  margin: 0;
-  padding: 0;
+    list-style: none;
+    margin: 0;
+    padding: 0;
 }
 
 li.topic {
-  margin: 10px 0;
-  padding: 5px;
-  background: #F0FAF9;
-  border: 1px solid #DBF3F1;
-  border-radius: 2px;
-  -moz-border-radius: 5px;
-  -webkit-border-radius: 5px;
-  min-height: 20px;
+    margin: 10px 0;
+    padding: 5px;
+    background: #F0FAF9;
+    border: 1px solid #DBF3F1;
+    border-radius: 2px;
+    -moz-border-radius: 5px;
+    -webkit-border-radius: 5px;
+    min-height: 20px;
 }
 
 form * {
diff --git a/Chirp/src/Chirp.Web/wwwroot/js/updateWindowWidth.js b/Chirp/src/Chirp.Web/wwwroot/js/updateWindowWidth.js
new file mode 100644
index 00000000..0424e914
--- /dev/null
+++ b/Chirp/src/Chirp.Web/wwwroot/js/updateWindowWidth.js
@@ -0,0 +1,11 @@
+function updateWindowWidth() {
+    document.documentElement.style.setProperty('--window-width', `${window.innerWidth}px`);
+}
+
+// Run the function once when the page loads
+updateWindowWidth();
+
+document.addEventListener('DOMContentLoaded', function() {
+    updateWindowWidth();
+    window.addEventListener('resize', updateWindowWidth);
+});
\ No newline at end of file
diff --git a/Chirp/src/Chirp.Web/wwwroot/js/videoController.js b/Chirp/src/Chirp.Web/wwwroot/js/videoController.js
new file mode 100644
index 00000000..1895df79
--- /dev/null
+++ b/Chirp/src/Chirp.Web/wwwroot/js/videoController.js
@@ -0,0 +1,45 @@
+//Even tho it says "export default" is unused, it is needed to work, 
+//since it used for import in default.cshtml, for cheepList
+export default class VideoController {
+    constructor(videoElement, videoList) {
+        this.video = videoElement;
+
+        this.videoList = videoList;
+
+        this.videoIndex = 0;
+
+        this.init();
+    }
+
+    init() {
+        this.setupVideoListeners(this.video, this.videoList);
+
+        this.disableContextMenu(this.video);
+    }
+
+    setupVideoListeners(videoElement, videoList) {
+        videoElement.addEventListener('ended', () => {
+            this.playNextVideo(videoElement, videoList);
+        });
+
+        videoElement.addEventListener('loadeddata', () => {
+            videoElement.play();
+        });
+        
+        videoElement.addEventListener('contextmenu', (event) => {
+            event.preventDefault();
+        });
+    }
+
+    playNextVideo(videoElement, videoList) {
+        this.videoIndex = (this.videoIndex + 1) % videoList.length;
+        videoElement.src = videoList[this.videoIndex];
+        videoElement.load();
+    }
+
+    disableContextMenu(videoElement) {
+        videoElement.addEventListener('contextmenu', (event) => {
+            event.preventDefault();
+        });
+    }
+}
\ No newline at end of file
diff --git a/Chirp/src/Chirp.Web/wwwroot/videos/Kittens.mp4 b/Chirp/src/Chirp.Web/wwwroot/videos/Kittens.mp4
new file mode 100644
index 00000000..34b30acf
Binary files /dev/null and b/Chirp/src/Chirp.Web/wwwroot/videos/Kittens.mp4 differ
diff --git a/Chirp/src/Chirp.Web/wwwroot/videos/SubwaySurfers_1.mp4 b/Chirp/src/Chirp.Web/wwwroot/videos/SubwaySurfers_1.mp4
new file mode 100644
index 00000000..b76b0bfe
Binary files /dev/null and b/Chirp/src/Chirp.Web/wwwroot/videos/SubwaySurfers_1.mp4 differ
diff --git a/Chirp/src/Chirp.Web/wwwroot/videos/SubwaySurfers_2.mp4 b/Chirp/src/Chirp.Web/wwwroot/videos/SubwaySurfers_2.mp4
new file mode 100644
index 00000000..831ca305
Binary files /dev/null and b/Chirp/src/Chirp.Web/wwwroot/videos/SubwaySurfers_2.mp4 differ
diff --git a/Chirp/src/Chirp.Web/wwwroot/videos/TempleRun.mp4 b/Chirp/src/Chirp.Web/wwwroot/videos/TempleRun.mp4
new file mode 100644
index 00000000..3fbff65c
Binary files /dev/null and b/Chirp/src/Chirp.Web/wwwroot/videos/TempleRun.mp4 differ