diff --git a/src/app/history/loading.tsx b/src/app/history/loading.tsx
index 467c3a68b..049fe2cbc 100644
--- a/src/app/history/loading.tsx
+++ b/src/app/history/loading.tsx
@@ -1,11 +1,29 @@
-import { CourseSkeleton } from '@/components/CourseCard';
+import { Fragment } from 'react';
 
 export default function Loading() {
   return (
-    <div className="max-w-screen-xl justify-between mx-auto p-4 cursor-pointer grid grid-cols-1 gap-5 md:grid-cols-3">
-      {[1, 2, 3].map((v) => (
-        <CourseSkeleton key={v} />
-      ))}
+    <div className="px-4 md:px-20 py-5">
+      <div className="rounded bg-slate-50 dark:bg-slate-900 h-8 w-40"></div>
+      <div className="flex flex-col gap-4 my-4 sm:my-8 max-w-full">
+        {[1, 2].map((_, index) => {
+          return (
+            <Fragment key={index}>
+              <div className="rounded bg-slate-50 dark:bg-slate-900 h-6 w-20"></div>
+              <div className="flex items-center gap-6">
+                {[1, 2, 3, 4].map((_, index) => (
+                  <div>
+                    <div
+                      className="w-[260px] h-36 bg-slate-50 dark:bg-slate-900 rounded-md"
+                      key={index}
+                    />
+                    <div className="rounded my-4 bg-slate-50 dark:bg-slate-900 h-4 w-full"></div>
+                  </div>
+                ))}
+              </div>
+            </Fragment>
+          );
+        })}
+      </div>
     </div>
   );
 }