diff --git a/prisma/migrations/20240202163217_add_completed_field_to_video_progress/migration.sql b/prisma/migrations/20240202163217_add_completed_field_to_video_progress/migration.sql
new file mode 100644
index 000000000..0ceda1103
--- /dev/null
+++ b/prisma/migrations/20240202163217_add_completed_field_to_video_progress/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "VideoProgress" ADD COLUMN     "markAsCompleted" BOOLEAN NOT NULL DEFAULT false;
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index cf486f1cc..fa3303c72 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -144,6 +144,7 @@ model VideoProgress {
   currentTimestamp Int
   user             User    @relation(fields: [userId], references: [id], onDelete: Cascade)
   content          Content @relation(fields: [contentId], references: [id], onDelete: Cascade)
+  markAsCompleted  Boolean @default(false)
 
   @@unique([contentId, userId])
 }
diff --git a/src/app/api/course/videoProgress/markAsCompleted/route.ts b/src/app/api/course/videoProgress/markAsCompleted/route.ts
new file mode 100644
index 000000000..43ec76b94
--- /dev/null
+++ b/src/app/api/course/videoProgress/markAsCompleted/route.ts
@@ -0,0 +1,32 @@
+import { NextRequest, NextResponse } from 'next/server';
+import db from '@/db';
+import { getServerSession } from 'next-auth';
+import { authOptions } from '@/lib/auth';
+
+export async function POST(req: NextRequest) {
+  const { contentId, markAsCompleted } = await req.json();
+  const session = await getServerSession(authOptions);
+  if (!session || !session?.user) {
+    return NextResponse.json({}, { status: 401 });
+  }
+
+  const updatedRecord = await db.videoProgress.upsert({
+    where: {
+      contentId_userId: {
+        contentId: Number(contentId),
+        userId: session.user.id,
+      },
+    },
+    create: {
+      contentId: Number(contentId),
+      userId: session.user.id,
+      currentTimestamp: 0,
+      markAsCompleted,
+    },
+    update: {
+      markAsCompleted,
+    },
+  });
+
+  return NextResponse.json(updatedRecord);
+}
diff --git a/src/app/api/course/videoProgress/route.ts b/src/app/api/course/videoProgress/route.ts
index 59c5001f6..aa2b643b9 100644
--- a/src/app/api/course/videoProgress/route.ts
+++ b/src/app/api/course/videoProgress/route.ts
@@ -21,15 +21,31 @@ export async function GET(req: NextRequest) {
   });
   return NextResponse.json({
     progress: currentProgress?.currentTimestamp ?? 0,
+    markAsCompleted: currentProgress?.markAsCompleted ?? false,
   });
 }
 
-export async function POST() {
+export async function POST(req: NextRequest) {
+  const { contentId, currentTimestamp } = await req.json();
   const session = await getServerSession(authOptions);
-
   if (!session || !session?.user) {
     return NextResponse.json({}, { status: 401 });
   }
-
-  return NextResponse.json({});
+  const updatedRecord = await db.videoProgress.upsert({
+    where: {
+      contentId_userId: {
+        contentId: Number(contentId),
+        userId: session.user.id,
+      },
+    },
+    create: {
+      contentId: Number(contentId),
+      userId: session.user.id,
+      currentTimestamp,
+    },
+    update: {
+      currentTimestamp,
+    },
+  });
+  return NextResponse.json(updatedRecord);
 }
diff --git a/src/components/ContentCard.tsx b/src/components/ContentCard.tsx
index ba36abaf6..4da8c2962 100644
--- a/src/components/ContentCard.tsx
+++ b/src/components/ContentCard.tsx
@@ -1,14 +1,33 @@
+import { CheckCircle2 } from 'lucide-react';
+import PercentageComplete from './PercentageComplete';
+
 export const ContentCard = ({
   image,
   title,
   onClick,
+  markAsCompleted,
+  percentComplete,
 }: {
+  contentId?: number
   image: string
   title: string
   onClick: () => void
+  markAsCompleted?: boolean
+  percentComplete?: number | null
 }) => {
   return (
-    <div onClick={onClick} className="hover:scale-105 ease-in duration-200">
+    <div
+      onClick={onClick}
+      className="relative hover:scale-105 ease-in duration-200"
+    >
+      {percentComplete !== null && percentComplete !== undefined && (
+        <PercentageComplete percent={percentComplete} />
+      )}
+      {markAsCompleted && (
+        <div className="absolute top-2 right-2">
+          <CheckCircle2 color="green" size={20} />
+        </div>
+      )}
       <img src={image} alt={title} className="rounded-md" />
       <div className="flex justify-between mt-2 text-gray-900 dark:text-white">
         <div>{title}</div>
diff --git a/src/components/CourseCard.tsx b/src/components/CourseCard.tsx
index 01cc2ae42..f35a97a15 100644
--- a/src/components/CourseCard.tsx
+++ b/src/components/CourseCard.tsx
@@ -1,5 +1,6 @@
 'use client';
 import { Course } from '@/store/atoms';
+import PercentageComplete from './PercentageComplete';
 import { Button } from './ui/button';
 import { ChevronRight } from 'lucide-react';
 
@@ -17,6 +18,17 @@ export const CourseCard = ({
         onClick();
       }}
     >
+      <div className="relative">
+        {course.totalVideos !== undefined &&
+          course.totalVideosWatched !== undefined && (
+          <PercentageComplete
+            percent={Math.ceil(
+              (course.totalVideosWatched / course.totalVideos) * 100,
+            )}
+          />
+        )}
+        <img src={course.imageUrl} alt={course.title} className="rounded-md" />
+      </div>
       <div className="p-2">
         <img
           src={course.imageUrl}
diff --git a/src/components/CourseView.tsx b/src/components/CourseView.tsx
index e9d224cbf..133be9974 100644
--- a/src/components/CourseView.tsx
+++ b/src/components/CourseView.tsx
@@ -3,6 +3,7 @@ import { ContentRenderer } from './admin/ContentRenderer';
 import { FolderView } from './FolderView';
 import { Sidebar } from './Sidebar';
 import { NotionRenderer } from './NotionRenderer';
+import { getFolderPercentCompleted } from '@/lib/utils';
 
 export const CourseView = ({
   rest,
@@ -37,6 +38,9 @@ export const CourseView = ({
                   title: courseContent[0]?.title || '',
                   type: contentType || 'video',
                   description: courseContent[0]?.description || '',
+                  markAsCompleted:
+                    courseContent[0]?.videoProgress[0]?.markAsCompleted ||
+                    false,
                 }}
               />
             ) : null}
@@ -47,6 +51,9 @@ export const CourseView = ({
                   title: x?.title || '',
                   image: x?.thumbnail || '',
                   id: x?.id || 0,
+                  markAsCompleted:
+                    x?.videoProgress[0]?.markAsCompleted || false,
+                  percentComplete: getFolderPercentCompleted(x?.children),
                 }))}
                 courseId={parseInt(course.id, 10)}
               />
diff --git a/src/components/FolderView.tsx b/src/components/FolderView.tsx
index 0795c517f..bb418e4e5 100644
--- a/src/components/FolderView.tsx
+++ b/src/components/FolderView.tsx
@@ -13,6 +13,8 @@ export const FolderView = ({
     title: string
     image: string
     id: number
+    markAsCompleted: boolean
+    percentComplete: number | null
   }[]
 }) => {
   const router = useRouter();
@@ -34,18 +36,18 @@ export const FolderView = ({
     <div>
       <div></div>
       <div className="max-w-screen-xl justify-between mx-auto p-4 cursor-pointer grid grid-cols-1 gap-5 md:grid-cols-3">
-        {courseContent.map(
-          (content: { image: string; id: number; title: string }) => (
-            <ContentCard
-              key={content.id}
-              title={content.title}
-              image={content.image || ''}
-              onClick={() => {
-                router.push(`${updatedRoute}/${content.id}`);
-              }}
-            />
-          ),
-        )}
+        {courseContent.map((content) => (
+          <ContentCard
+            key={content.id}
+            title={content.title}
+            image={content.image || ''}
+            onClick={() => {
+              router.push(`${updatedRoute}/${content.id}`);
+            }}
+            markAsCompleted={content.markAsCompleted}
+            percentComplete={content.percentComplete}
+          />
+        ))}
       </div>
     </div>
   );
diff --git a/src/components/PercentageComplete.tsx b/src/components/PercentageComplete.tsx
new file mode 100644
index 000000000..30acf4f9d
--- /dev/null
+++ b/src/components/PercentageComplete.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+const PercentageComplete = ({ percent }: { percent: number }) => {
+  return (
+    <div className="text-xs absolute top-2 right-2 text-[#1D4ED8] border-[#1D4ED8] border py-1 px-2 rounded-full font-bold">
+      <div>{`${percent}% completed`}</div>
+    </div>
+  );
+};
+
+export default PercentageComplete;
diff --git a/src/components/VideoContentChapters.tsx b/src/components/VideoContentChapters.tsx
index 425c3a1fa..7430eef27 100644
--- a/src/components/VideoContentChapters.tsx
+++ b/src/components/VideoContentChapters.tsx
@@ -40,7 +40,7 @@ const VideoContentChapters = ({
         <X onClick={onCancel} className="cursor-pointer" />
       </div>
       <div className="max-h-[70vh] overflow-auto">
-        {(segments as Segment[]).map(({ start, end, title }, index) => {
+        {(segments as Segment[])?.map(({ start, end, title }, index) => {
           return (
             <>
               <div
diff --git a/src/components/VideoPlayer2.tsx b/src/components/VideoPlayer2.tsx
index e0c2f12a9..851fde495 100644
--- a/src/components/VideoPlayer2.tsx
+++ b/src/components/VideoPlayer2.tsx
@@ -7,6 +7,7 @@ import 'videojs-contrib-eme';
 import 'videojs-mobile-ui/dist/videojs-mobile-ui.css';
 import 'videojs-mobile-ui';
 import 'videojs-sprite-thumbnails';
+import { handleMarkAsCompleted } from '@/lib/utils';
 
 // todo correct types
 interface VideoPlayerProps {
@@ -14,6 +15,7 @@ interface VideoPlayerProps {
   onReady?: (player: Player) => void
   subtitles?: string
   contentId: number
+  onVideoEnd: () => void
 }
 
 const PLAYBACK_RATES: number[] = [0.5, 1, 1.25, 1.5, 1.75, 2];
@@ -24,6 +26,7 @@ export const VideoPlayer: FunctionComponent<VideoPlayerProps> = ({
   contentId,
   onReady,
   subtitles,
+  onVideoEnd,
 }) => {
   const videoRef = useRef<HTMLDivElement>(null);
   const playerRef = useRef<Player | null>(null);
@@ -140,23 +143,46 @@ export const VideoPlayer: FunctionComponent<VideoPlayerProps> = ({
   }, [player]);
 
   useEffect(() => {
-    const interval = window.setInterval(async () => {
-      const currentTime = player.currentTime();
-      if (currentTime <= 20) {
+    if (!player) {
+      return;
+    }
+    let interval = 0;
+
+    const handleVideoProgress = () => {
+      if (!player) {
         return;
       }
-      await fetch('/api/course/videoProgress', {
-        body: JSON.stringify({
-          currentTimestamp: currentTime,
-          contentId,
-        }),
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
+      interval = window.setInterval(
+        async () => {
+          if (player?.paused()) {
+            return;
+          }
+          const currentTime = player.currentTime();
+          if (currentTime <= 20) {
+            return;
+          }
+          await fetch('/api/course/videoProgress', {
+            body: JSON.stringify({
+              currentTimestamp: currentTime,
+              contentId,
+            }),
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+          });
         },
-      });
-    }, 10 * 1000);
+        Math.ceil((10 * 1000) / player.playbackRate()),
+      );
+    };
+    const handleVideoEnded = (interval: number) => {
+      handleMarkAsCompleted(true, contentId);
+      window.clearInterval(interval);
+      onVideoEnd();
+    };
 
+    player.on('play', handleVideoProgress);
+    player.on('ended', () => handleVideoEnded(interval));
     return () => {
       window.clearInterval(interval);
     };
diff --git a/src/components/VideoPlayerSegment.tsx b/src/components/VideoPlayerSegment.tsx
index 22530787b..a545a5b7e 100644
--- a/src/components/VideoPlayerSegment.tsx
+++ b/src/components/VideoPlayerSegment.tsx
@@ -23,6 +23,7 @@ interface VideoProps {
   subtitles: string
   videoJsOptions: any
   contentId: number
+  onVideoEnd: () => void
 }
 
 export const VideoPlayerSegment: FunctionComponent<VideoProps> = ({
@@ -30,6 +31,7 @@ export const VideoPlayerSegment: FunctionComponent<VideoProps> = ({
   subtitles,
   segments,
   videoJsOptions,
+  onVideoEnd,
 }) => {
   const playerRef = useRef<Player | null>(null);
   const thumbnailPreviewRef = useRef<HTMLDivElement>(null);
@@ -95,6 +97,7 @@ export const VideoPlayerSegment: FunctionComponent<VideoProps> = ({
           subtitles={subtitles}
           options={videoJsOptions}
           onReady={handlePlayerReady}
+          onVideoEnd={onVideoEnd}
         />
       </div>
     </div>
diff --git a/src/components/admin/ContentRenderer.tsx b/src/components/admin/ContentRenderer.tsx
index 62a990b2d..9f47a0ee7 100644
--- a/src/components/admin/ContentRenderer.tsx
+++ b/src/components/admin/ContentRenderer.tsx
@@ -75,6 +75,7 @@ export const ContentRenderer = async ({
     description: string
     thumbnail: string
     slides?: string
+    markAsCompleted: boolean
   }
 }) => {
   const metadata = await getMetadata(content.id);
diff --git a/src/components/admin/ContentRendererClient.tsx b/src/components/admin/ContentRendererClient.tsx
index 3226fa8d2..6125a4de5 100644
--- a/src/components/admin/ContentRendererClient.tsx
+++ b/src/components/admin/ContentRendererClient.tsx
@@ -1,10 +1,10 @@
 'use client';
-import { useSearchParams } from 'next/navigation';
+import { useSearchParams, useRouter } from 'next/navigation';
 import { QualitySelector } from '../QualitySelector';
 import { VideoPlayerSegment } from '@/components/VideoPlayerSegment';
-import { useRouter } from 'next/navigation';
 import VideoContentChapters from '../VideoContentChapters';
 import { useState } from 'react';
+import { handleMarkAsCompleted } from '@/lib/utils';
 
 export const ContentRendererClient = ({
   metadata,
@@ -23,8 +23,13 @@ export const ContentRendererClient = ({
     title: string
     thumbnail: string
     description: string
+    markAsCompleted: boolean
   }
 }) => {
+  const [contentCompleted, setContentCompleted] = useState(
+    content.markAsCompleted,
+  );
+  const [loadingMarkAs, setLoadingMarkAs] = useState(false);
   const [showChapters, setShowChapters] = useState(
     metadata?.segments?.length > 0,
   );
@@ -70,9 +75,19 @@ export const ContentRendererClient = ({
     setShowChapters((prev) => !prev);
   };
 
+  const handleMarkCompleted = async () => {
+    setLoadingMarkAs(true);
+    const data: any = await handleMarkAsCompleted(!contentCompleted, content.id);
+
+    if (data.contentId) {
+      setContentCompleted((prev) => !prev);
+    }
+    setLoadingMarkAs(false);
+  };
+
   return (
     <div className="flex gap-2 items-start flex-col lg:flex-row">
-      <div className="flex-1">
+      <div className="flex-1 w-full">
         <VideoPlayerSegment
           contentId={content.id}
           subtitles={metadata.subtitles}
@@ -96,12 +111,26 @@ export const ContentRendererClient = ({
             responsive: true,
             sources: [source],
           }}
+          onVideoEnd={() => {
+            setContentCompleted(true);
+          }}
         />
         <br />
         <div className="flex justify-between mb-2">
-          <div className="text-gray-900 dark:text-white font-bold text-2xl">
-            {content.title}
+          <div>
+            <div className="text-gray-900 dark:text-white font-bold text-2xl">
+              {content.title}
+            </div>
+
+            <button
+              className="bg-blue-500 hover:bg-blue-700 text-white font-bold rounded p-2 my-4"
+              disabled={loadingMarkAs}
+              onClick={handleMarkCompleted}
+            >
+              {contentCompleted ? 'Mark as Incomplete' : 'Mark as completed'}
+            </button>
           </div>
+
           <div>
             <QualitySelector />
             <br />
@@ -120,7 +149,7 @@ export const ContentRendererClient = ({
                 </a>
               </div>
             ) : null}
-            {!showChapters && (
+            {!showChapters && metadata.segments?.length > 0 && (
               <button
                 className="bg-blue-500 hover:bg-blue-700 text-white font-bold rounded p-2"
                 onClick={() => {
diff --git a/src/components/admin/CourseContent.tsx b/src/components/admin/CourseContent.tsx
index a7ea09c14..dab84088b 100644
--- a/src/components/admin/CourseContent.tsx
+++ b/src/components/admin/CourseContent.tsx
@@ -27,6 +27,7 @@ export const AdminCourseContent = ({
               onClick={() => {
                 router.push(`/admin/content/${courseId}/${content.id}`);
               }}
+              key={content.id}
             />
           ),
         )}
diff --git a/src/components/admin/SelectCourse.tsx b/src/components/admin/SelectCourse.tsx
index 56c6aa1ba..fc930a6a0 100644
--- a/src/components/admin/SelectCourse.tsx
+++ b/src/components/admin/SelectCourse.tsx
@@ -14,6 +14,7 @@ export const SelectCourse = ({ courses }: { courses: Course[] }) => {
           onClick={() => {
             router.push(`/admin/content/${course.id}`);
           }}
+          key={course.id}
         />
       ))}
     </div>
diff --git a/src/db/course.ts b/src/db/course.ts
index 831e340d5..074d30974 100644
--- a/src/db/course.ts
+++ b/src/db/course.ts
@@ -81,7 +81,11 @@ async function getAllContent() {
   if (value) {
     return value;
   }
-  const allContent = await db.content.findMany({});
+  const allContent = await db.content.findMany({
+    include: {
+      videoProgress: true,
+    },
+  });
 
   Cache.getInstance().set('getAllContent', [], allContent);
 
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 93ecccc9c..feb0c930f 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -143,3 +143,34 @@ export const getCurrentSegmentName = (
   );
   return currentSegment ? currentSegment.title : '';
 };
+
+export const handleMarkAsCompleted = async (
+  markAsCompleted: boolean,
+  contentId: number,
+) => {
+  const response = await fetch('/api/course/videoProgress/markAsCompleted', {
+    body: JSON.stringify({
+      markAsCompleted,
+      contentId,
+    }),
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+  return await response.json();
+};
+
+export const getFolderPercentCompleted = (childrenContent: any) => {
+  if (childrenContent && childrenContent.length > 0) {
+    const videos = childrenContent.filter(
+      (content: any) => content.type === 'video',
+    );
+    const totalVideosWatched = videos.filter(
+      ({ videoProgress }: any) =>
+        videoProgress && videoProgress[0]?.markAsCompleted,
+    ).length;
+    return Math.ceil((totalVideosWatched / videos.length) * 100);
+  }
+  return null;
+};
diff --git a/src/store/atoms/courses.ts b/src/store/atoms/courses.ts
index 4ff1b584e..f0ba17431 100644
--- a/src/store/atoms/courses.ts
+++ b/src/store/atoms/courses.ts
@@ -10,6 +10,8 @@ export type Course = {
   appxCourseId: number
   discordRoleId: string
   openToEveryone: boolean
+  totalVideos?: number
+  totalVideosWatched?: number
 }
 
 const coursesSelector = selector({
diff --git a/src/utiles/appx.ts b/src/utiles/appx.ts
index 9b8e71fc2..45c2c51d8 100644
--- a/src/utiles/appx.ts
+++ b/src/utiles/appx.ts
@@ -7,7 +7,43 @@ const APPX_BASE_API = process.env.APPX_BASE_API;
 const LOCAL_CMS_PROVIDER = process.env.LOCAL_CMS_PROVIDER;
 
 export async function getPurchases(email: string) {
-  const courses = await db.course.findMany({});
+  const _courses = await db.course.findMany({
+    include: {
+      content: {
+        select: {
+          content: {
+            select: {
+              children: {
+                where: {
+                  type: 'video',
+                },
+                select: {
+                  videoProgress: true,
+                },
+              },
+            },
+          },
+        },
+      },
+    },
+  });
+  const courses = _courses.map((course) => {
+    const { content } = course;
+    let totalVideos = 0;
+    let totalVideosWatched = 0;
+    content.forEach(({ content: { children } }) => {
+      totalVideos += children.length;
+      totalVideosWatched += children.filter(
+        ({ videoProgress }) =>
+          videoProgress && videoProgress[0]?.markAsCompleted,
+      ).length;
+    });
+    return {
+      ...course,
+      ...(content.length > 0 && { totalVideos, totalVideosWatched }),
+    };
+  });
+
   if (LOCAL_CMS_PROVIDER) {
     return courses;
   }