diff --git a/src/components/CourseView.tsx b/src/components/CourseView.tsx
index 675c9c361..5133719b6 100644
--- a/src/components/CourseView.tsx
+++ b/src/components/CourseView.tsx
@@ -43,6 +43,7 @@ export const CourseView = ({
 
       {contentType === 'video' ? (
         <ContentRenderer
+          courseId={course.id}
           nextContent={nextContent}
           content={{
             thumbnail: courseContent[0]?.thumbnail || '',
diff --git a/src/components/admin/ContentRenderer.tsx b/src/components/admin/ContentRenderer.tsx
index e42be8808..3da39c8f1 100644
--- a/src/components/admin/ContentRenderer.tsx
+++ b/src/components/admin/ContentRenderer.tsx
@@ -3,6 +3,7 @@ import { getServerSession } from 'next-auth';
 import { authOptions } from '@/lib/auth';
 import { ContentRendererClient } from './ContentRendererClient';
 import { Bookmark } from '@prisma/client';
+import { getNextPrevUrls } from '@/db/course';
 
 export const getMetadata = async (contentId: number) => {
   const session = await getServerSession(authOptions);
@@ -61,6 +62,7 @@ export const getMetadata = async (contentId: number) => {
 export const ContentRenderer = async ({
   content,
   nextContent,
+  courseId,
 }: {
   nextContent: {
     id: number;
@@ -77,11 +79,13 @@ export const ContentRenderer = async ({
     markAsCompleted: boolean;
     bookmark: Bookmark | null;
   };
+  courseId: number;
 }) => {
   const metadata = await getMetadata(content.id);
-
+  const prevNextUrls = await getNextPrevUrls(content.id, courseId);
   return (
     <ContentRendererClient
+      prevNextUrls={prevNextUrls}
       nextContent={nextContent}
       metadata={metadata}
       content={content}
diff --git a/src/components/admin/ContentRendererClient.tsx b/src/components/admin/ContentRendererClient.tsx
index 46344a3f7..3d42c826e 100644
--- a/src/components/admin/ContentRendererClient.tsx
+++ b/src/components/admin/ContentRendererClient.tsx
@@ -10,6 +10,7 @@ export const ContentRendererClient = ({
   metadata,
   content,
   nextContent,
+  prevNextUrls,
 }: {
   nextContent: {
     id: number;
@@ -25,6 +26,10 @@ export const ContentRendererClient = ({
     description: string;
     markAsCompleted: boolean;
   };
+  prevNextUrls: {
+    nextContentUrl: string | null;
+    prevContentUrl: string | null;
+  };
 }) => {
   const [contentCompleted, setContentCompleted] = useState(
     content.markAsCompleted,
@@ -34,7 +39,6 @@ export const ContentRendererClient = ({
     metadata?.segments?.length > 0,
   );
   const searchParams = useSearchParams();
-
   const router = useRouter();
 
   //@ts-ignore
@@ -150,6 +154,26 @@ export const ContentRendererClient = ({
                 </a>
               </div>
             ) : null}
+            <div className="flex">
+              <button
+                className="bg-blue-500 hover:bg-blue-700 text-white font-bold rounded p-2 m-4"
+                disabled={!prevNextUrls.prevContentUrl}
+                onClick={() => {
+                  router.push(prevNextUrls.prevContentUrl!);
+                }}
+              >
+                Prev
+              </button>
+              <button
+                className="bg-blue-500 hover:bg-blue-700 text-white font-bold rounded p-2 my-4"
+                disabled={!prevNextUrls.nextContentUrl}
+                onClick={() => {
+                  router.push(prevNextUrls.nextContentUrl!);
+                }}
+              >
+                Next
+              </button>
+            </div>
             {!showChapters && metadata.segments?.length > 0 && (
               <button
                 className="bg-blue-500 hover:bg-blue-700 text-white font-bold rounded my-4 p-2"
diff --git a/src/db/course.ts b/src/db/course.ts
index 1a42feb2d..98c446688 100644
--- a/src/db/course.ts
+++ b/src/db/course.ts
@@ -183,6 +183,11 @@ async function getAllContent() {
       hidden: false,
     },
     include: {
+      courses: {
+        select: {
+          courseId: true,
+        },
+      },
       VideoMetadata: {
         select: {
           duration: true,
@@ -190,6 +195,9 @@ async function getAllContent() {
       },
       bookmark: true,
     },
+    orderBy: {
+      id: 'asc',
+    },
   });
   Cache.getInstance().set('getAllContent', [], allContent);
 
@@ -378,3 +386,54 @@ export const getCurrentContentType = async (
 
   return content.type;
 };
+
+export const getNextPrevUrls = async (contentId: number, courseId: number) => {
+  const content = await getAllContent();
+
+  const nextContentIdx = content.findIndex(
+    (x: any) =>
+      x.type === 'video' &&
+      x.id > contentId &&
+      x.courses[0]?.courseId === courseId,
+  );
+  const nextContent =
+    nextContentIdx !== -1 ? content[nextContentIdx] : undefined;
+  let prevContent = null;
+  for (
+    let i = nextContentIdx !== -1 ? nextContentIdx - 1 : content.length - 1;
+    i >= 0;
+    i--
+  ) {
+    if (
+      content[i].type === 'video' &&
+      content[i].id < contentId &&
+      content[i].courses[0]?.courseId === courseId
+    ) {
+      prevContent = content[i];
+      break;
+    }
+  }
+
+  let nextContentUrl = null;
+  if (nextContent) {
+    if (nextContent.parentId) {
+      nextContentUrl = `/courses/${courseId}/${nextContent.parentId}/${nextContent.id}`;
+    } else {
+      nextContentUrl = `/courses/${courseId}/${nextContent.id}`;
+    }
+  }
+
+  let prevContentUrl = null;
+  if (prevContent) {
+    if (prevContent.parentId) {
+      prevContentUrl = `/courses/${courseId}/${prevContent.parentId}/${prevContent.id}`;
+    } else {
+      prevContentUrl = `/courses/${courseId}/${prevContent.id}`;
+    }
+  }
+
+  return {
+    nextContentUrl,
+    prevContentUrl,
+  };
+};