diff --git a/app/today/views.py b/app/today/views.py
index 40d10d4..2467128 100644
--- a/app/today/views.py
+++ b/app/today/views.py
@@ -1,8 +1,12 @@
-from django.shortcuts import render
+from typing import Optional
+
+from rest_framework.request import Request
+from rest_framework.response import Response
 from rest_framework import viewsets
 from rest_framework.decorators import action
 from rest_framework.response import Response
-from rest_framework import status
+from django.utils import dateparse
+from django.core import paginator
 
 from today.models import Video
 from today.serializers import VideoDetailsSerializer
@@ -18,9 +22,72 @@ class VideoDetailsViewSet(viewsets.ModelViewSet):
     serializer_class = VideoDetailsSerializer
 
     @action(detail=False, methods=["get"], url_path="latest")
-    def latest_video(self, request):
+    def latest_video(self, request: Request) -> Response:
+        """
+        Fetches the most recently uploaded video
+        :param request: the HTTP request - unused param
+        :return: A JSON response with the latest video metadata and a 200 status code if successful, else 404 if no
+        videos are available
+        """
         recent_video = self.get_queryset().order_by("-upload_time").first()
         if recent_video is not None:
             serializer = self.get_serializer(recent_video)
             return Response(serializer.data)
         return Response({"detail": "No videos available"}, status=404)
+
+    @action(detail=False, methods=["get"], url_path="paginated-videos")
+    def paginated_videos(self, request: Request) -> Response:
+        """
+        Fetches videos within a specified date range and paginates the results.
+
+        Query Parameters:
+            - start_date (str, optional): Filter videos uploaded on or after this date (YYYY-MM-DD).
+            - end_date (str, optional): Filter videos uploaded on or before this date (YYYY-MM-DD).
+            - page_num (int, optional): The page number to fetch (default is 1).
+            - limit (int, optional): The number of videos per page (default is 7).
+
+        :param request: The HTTP request containing query parameters.
+        :return: A JSON response containing paginated video data and metadata
+        """
+        start_date = request.query_params.get("start_date")
+        end_date = request.query_params.get("end_date")
+        page_num = request.query_params.get("page_num", 1)
+        limit = request.query_params.get("limit", 7)
+
+        queryset = self.get_queryset()
+        if start_date is not None:
+            start_date_parsed = dateparse.parse_date(start_date)
+            if start_date_parsed is not None:
+                queryset = queryset.filter(upload_time__gte=start_date_parsed)
+        if end_date is not None:
+            end_date_parsed = dateparse.parse_date(end_date)
+            if end_date_parsed is not None:
+                queryset = queryset.filter(upload_time__lte=end_date_parsed)
+
+        queryset = queryset.order_by("-upload_time")
+
+        pages = paginator.Paginator(queryset, limit)
+        try:
+            videos_page = pages.page(page_num)
+        except paginator.PageNotAnInteger:
+            return Response({"detail": "Page number must be an integer"}, status=400)
+        except paginator.EmptyPage:
+            return Response({
+                "videos": [],
+                "detail": "Page number out of range - it's likely that no older videos are available",
+                "total_videos": pages.count,
+                "total_pages": pages.num_pages,
+                "current_page": page_num,
+                "has_next": False,
+                "has_previous": False,
+            }, status=200)
+
+        serializer = self.get_serializer(videos_page, many=True)
+        return Response({
+            "videos": serializer.data,
+            "total_videos": pages.count,
+            "total_pages": pages.num_pages,
+            "current_page": videos_page.number,
+            "has_next": videos_page.has_next(),
+            "has_previous": videos_page.has_previous(),
+        })
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index b7359b3..6bc12af 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -8,6 +8,9 @@
       "name": "frontend",
       "version": "0.1.0",
       "dependencies": {
+        "@fortawesome/fontawesome-svg-core": "^6.7.2",
+        "@fortawesome/free-solid-svg-icons": "^6.7.2",
+        "@fortawesome/vue-fontawesome": "^3.0.8",
         "axios": "^1.7.7",
         "core-js": "^3.8.3",
         "vue": "^3.2.13",
@@ -1846,6 +1849,49 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "6.7.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.7.2.tgz",
+      "integrity": "sha512-Zs+YeHUC5fkt7Mg1l6XTniei3k4bwG/yo3iFUtZWd/pMx9g3fdvkSK9E0FOC+++phXOka78uJcYb8JaFkW52Xg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "6.7.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.7.2.tgz",
+      "integrity": "sha512-yxtOBWDrdi5DD5o1pmVdq3WMCvnobT0LU6R8RyyVXPvFRd2o79/0NCuQoCjNTeZz9EzA9xS3JxNWfv54RIHFEA==",
+      "license": "MIT",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.7.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "6.7.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.7.2.tgz",
+      "integrity": "sha512-GsBrnOzU8uj0LECDfD5zomZJIjrPhIlWU82AHwa2s40FKH+kcxQaBvBo3Z4TxyZHIyX8XTDxsyA33/Vx9eFuQA==",
+      "license": "(CC-BY-4.0 AND MIT)",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.7.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/vue-fontawesome": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-3.0.8.tgz",
+      "integrity": "sha512-yyHHAj4G8pQIDfaIsMvQpwKMboIZtcHTUvPqXjOHyldh1O1vZfH4W03VDPv5RvI9P6DLTzJQlmVgj9wCf7c2Fw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+        "vue": ">= 3.0.0 < 4"
+      }
+    },
     "node_modules/@hapi/hoek": {
       "version": "9.3.0",
       "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 535fdff..0dc0288 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -8,6 +8,9 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
+    "@fortawesome/vue-fontawesome": "^3.0.8",
     "axios": "^1.7.7",
     "core-js": "^3.8.3",
     "vue": "^3.2.13",
diff --git a/frontend/src/components/LatestVideo.vue b/frontend/src/components/LatestVideo.vue
index a8919f4..370e916 100644
--- a/frontend/src/components/LatestVideo.vue
+++ b/frontend/src/components/LatestVideo.vue
@@ -2,95 +2,159 @@
   <div class="background-container">
     <div class="top-content">
       <h1>Spanish Word of the Day</h1>
-      <h2 v-if="video.upload_time">{{ video.upload_time }}</h2>
+      <h2 v-if="currentVideo.upload_time">{{ currentVideo.upload_time }}</h2>
     </div>
 
-    <div v-if="video.video_id" class="video-container">
-      <iframe
-        :src="`https://www.youtube.com/embed/${video.video_id}`"
-        width="315"
-        height="560"
-        frameborder="0"
-        allowfullscreen
-      ></iframe>
-
-      <div :class="['flip-button', { flipped }]" @click="flipButton">
-        <div class="front">Word of the Day!</div>
-        <div class="back">{{ video.word }}</div>
-      </div>
-
-      <div class="sentence-container">
-        <div class="sentence-title">
-          <strong>Example Usage</strong>
-        </div>
+    <div class="carousel-container">
+      <button 
+        class="nav-button prev" 
+        @click="previousVideo" 
+        :disabled="currentIndex === videos.length - 1"
+        v-show="currentIndex < videos.length - 1"
+      >
+        ‹
+      </button>
+
+      <div class="videos-container" ref="videosContainer">
         <div 
-        :class="['sentence spanish-sentence', {hovered: revealed.sentenceSpanish }]"
-        @click="revealSentence('sentenceSpanish')">
-
-        <div v-if="!revealed.sentenceSpanish" class="front">See an example in Spanish</div>
-        <div v-if="revealed.sentenceSpanish" class="back">{{ video.sentence }}</div>
-        </div>
-        <div
-          :class="['sentence english-sentence', { hovered: revealed.sentenceEnglish }]"
-          @click="revealSentence('sentenceEnglish')"
+          v-for="(video, index) in videos" 
+          :key="video.video_id"
+          :class="['video-wrapper', {
+            'current': index === currentIndex,
+            'prev': index === currentIndex + 1, 
+            'next': index === currentIndex - 1  
+          }]"
         >
-          <div v-if="!revealed.sentenceEnglish" class="front">Reveal the English translation</div>
-          <div v-if="revealed.sentenceEnglish" class="back">{{ video.translated_sentence }}</div>
+        <div class="video-content">
+            <div 
+              v-if="index !== currentIndex" 
+              class="video-overlay"
+              aria-hidden="true"
+            ></div>
+            
+            <iframe
+              :src="`https://www.youtube.com/embed/${video.video_id}?rel=0`"
+              width="315"
+              height="560"
+              frameborder="0"
+              allowfullscreen
+            ></iframe>
+
+            <div 
+              v-if="index === currentIndex" 
+              class="interactive-elements"
+            >
+              <div 
+                :class="['flip-button', { flipped: flippedStates[index] }]" 
+                @click="flipButton(index)"
+              >
+                <div class="front">Word of the Day!</div>
+                <div class="back">{{ video.word }}</div>
+              </div>
+
+              <div class="sentence-container">
+                <div class="sentence-title">
+                  <strong>Example Usage</strong>
+                </div>
+                <div 
+                  :class="['sentence spanish-sentence', { hovered: revealedStates[index]?.sentenceSpanish }]"
+                  @click="revealSentence(index, 'sentenceSpanish')"
+                >
+                  <div v-if="!revealedStates[index]?.sentenceSpanish" class="front">See an example in Spanish</div>
+                  <div v-if="revealedStates[index]?.sentenceSpanish" class="back">{{ video.sentence }}</div>
+                </div>
+                <div
+                  :class="['sentence english-sentence', { hovered: revealedStates[index]?.sentenceEnglish }]"
+                  @click="revealSentence(index, 'sentenceEnglish')"
+                >
+                  <div v-if="!revealedStates[index]?.sentenceEnglish" class="front">Reveal the English translation</div>
+                  <div v-if="revealedStates[index]?.sentenceEnglish" class="back">{{ video.translated_sentence }}</div>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
+
+      <button 
+        class="nav-button next" 
+        @click="nextVideo" 
+        :disabled="currentIndex === 0"
+        v-show="currentIndex > 0"
+      >
+        ›
+      </button>
     </div>
-    <p v-else>Loading videos...</p>
+    <p v-if="loading">Loading videos...</p>
   </div>
 </template>
 
-
-
 <script setup>
-
-import { ref, reactive, onMounted } from "vue";
+import { ref, reactive, onMounted, computed } from "vue";
 import axios from "axios";
 
-const video = reactive({
-  video_id: "",
-  title: "",
-  word: "",
-  sentence: "",
-  translated_sentence: "",
-  upload_time: "",
-});
+const videos = ref([]);
+const currentIndex = ref(0);
+const loading = ref(true);
+const flippedStates = ref({});
+const revealedStates = ref({});
 
-const flipped = ref(false);
-const revealed = reactive({
-  sentenceSpanish: false,
-  sentenceEnglish: false,
-})
+const currentVideo = computed(() => {
+  return videos.value[currentIndex.value] || {};
+});
 
 async function fetchVideos() {
   try {
     const apiBaseUrl = process.env.VUE_APP_API_BASE_URL;
-    const response = await axios.get(`${apiBaseUrl}today/videos/latest/`);
-
-    if (response.data) {
-      video.video_id = response.data.video_id || "";
-      video.title = response.data.title || "";
-      video.word = response.data.word || "";
-      video.sentence = response.data.sentence || "";
-      video.translated_sentence = response.data.translated_sentence || "";
-      video.upload_time = formatDate(new Date(response.data.upload_time)) || "";
-    } else {
-      console.error("Error: No data received from API.");
+    const response = await axios.get(`${apiBaseUrl}today/videos/paginated-videos/`, {
+      params: {
+        limit: 7,
+        page_num: 1
+      }
+    });
+
+    if (response.data?.videos) {
+      videos.value = response.data.videos.map(video => ({
+        ...video,
+        upload_time: formatDate(new Date(video.upload_time))
+      }));
+      
+      videos.value.forEach((_, index) => {
+        flippedStates.value[index] = false;
+        revealedStates.value[index] = {
+          sentenceSpanish: false,
+          sentenceEnglish: false
+        };
+      });
     }
   } catch (error) {
-    console.error("Error fetching video details:", error);
+    console.error("Error fetching videos:", error);
+  } finally {
+    loading.value = false;
+  }
+}
+
+function nextVideo() {
+  if (currentIndex.value > 0) {
+    currentIndex.value--;
+  }
+}
+
+function previousVideo() {
+  if (currentIndex.value < videos.value.length - 1) {
+    currentIndex.value++;
   }
 }
 
-function flipButton() {
-  flipped.value = !flipped.value;
+function flipButton(index) {
+  flippedStates.value[index] = !flippedStates.value[index];
 }
 
-function revealSentence(sentenceName) {
-  revealed[sentenceName] = !revealed[sentenceName];
+function revealSentence(index, sentenceName) {
+  if (!revealedStates.value[index]) {
+    revealedStates.value[index] = {};
+  }
+  revealedStates.value[index][sentenceName] = !revealedStates.value[index][sentenceName];
 }
 
 function formatDate(date) {
@@ -111,8 +175,100 @@ function formatDate(date) {
 onMounted(fetchVideos);
 </script>
 
-
 <style scoped>
+.carousel-container {
+  position: relative;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.videos-container {
+  display: flex;
+  position: relative;
+  width: 315px;
+  height: 900px;
+  overflow: visible;
+}
+
+.video-wrapper {
+  position: absolute;
+  width: 100%;
+  transition: all 0.5s ease;
+  opacity: 0;
+  transform: translateX(100%); 
+}
+
+.video-wrapper.current {
+  opacity: 1;
+  transform: translateX(0);
+  z-index: 2;
+}
+
+.video-wrapper.prev {
+  opacity: 0.2;
+  transform: translateX(-90%); 
+  z-index: 1;
+}
+
+.video-wrapper.next {
+  opacity: 0.2;
+  transform: translateX(90%); 
+  z-index: 1;
+}
+
+.nav-button {
+  position: absolute;
+  top: 280px; 
+  background: rgba(229, 160, 13, 0.8);
+  border: none;
+  color: white;
+  padding: 20px 15px;
+  cursor: pointer;
+  border-radius: 25px;
+  font-size: 24px;
+  z-index: 3;
+  transition: all 0.3s ease;
+}
+
+.nav-button:hover {
+  background: rgba(229, 160, 13, 1);
+}
+
+.nav-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.nav-button.prev {
+  left: 10px;
+}
+
+.nav-button.next {
+  right: 10px;
+}
+
+.interactive-elements {
+  margin-top: 10px;
+  min-height: 300px
+}
+
+.video-content {
+  position: relative; 
+}
+
+.video-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 560px; 
+  background: transparent;
+  z-index: 10; 
+  cursor: default;
+}
 
 .background-container {
   background-image: linear-gradient(to right, #3b3933 , rgb(66, 46, 1));
@@ -123,11 +279,9 @@ onMounted(fetchVideos);
 }
 
 .top-content {
-  /* background: #333; */
   color: #ffffff;              
   padding: 20px;              
   margin-bottom: 20px;        
-  /* border-radius: 10px;  */
   text-align: center;         
   width: 100%;                
   box-sizing: border-box;     
@@ -353,6 +507,4 @@ onMounted(fetchVideos);
 .flip-button .front:hover {
   display: ruby-text-container;
 }
-
-
-</style>
+</style>
\ No newline at end of file