diff --git a/apps/cs/app/(with-base-layout)/loading.tsx b/apps/cs/app/(with-base-layout)/loading.tsx
new file mode 100644
index 000000000..3a3b15932
--- /dev/null
+++ b/apps/cs/app/(with-base-layout)/loading.tsx
@@ -0,0 +1,2 @@
+import { SkeletonPage } from "@/shared/ui/skeleton-page";
+export default SkeletonPage;
diff --git a/apps/cs/src/pages/image/ui/image-form.tsx b/apps/cs/src/pages/image/ui/image-form.tsx
index 58ecdd1b1..9ed24c218 100644
--- a/apps/cs/src/pages/image/ui/image-form.tsx
+++ b/apps/cs/src/pages/image/ui/image-form.tsx
@@ -215,8 +215,8 @@ function ImageForm({ form, imgSn, handleSave, handleDelete }: ImageFormProps) {
                                 customPreview={
                                   <>
                                     <Label htmlFor="atflCd">
-                                      <div className="relative h-[27rem] w-[48rem] rounded-sm border border-border">
-                                        <p className="absolute left-0 top-0 p-2 text-base leading-none">
+                                      <div className="relative h-[27rem] w-[48rem] overflow-hidden rounded-sm border border-border bg-accent">
+                                        <p className="absolute bottom-3 left-0 p-2 text-base leading-none">
                                           {(upload?.file as File)?.name}
                                         </p>
                                         <div></div>
diff --git a/apps/cs/src/shared/ui/skeleton-page.tsx b/apps/cs/src/shared/ui/skeleton-page.tsx
new file mode 100644
index 000000000..fca5c8e76
--- /dev/null
+++ b/apps/cs/src/shared/ui/skeleton-page.tsx
@@ -0,0 +1,12 @@
+import { Skeleton } from "@common/components/ui/skeleton";
+
+function SkeletonPage() {
+  return (
+    <div className="flex flex-col gap-4 p-6">
+      <Skeleton className="h-[6rem] rounded-xl" />
+      <Skeleton className="h-[60rem] rounded-xl" />
+    </div>
+  );
+}
+
+export { SkeletonPage };
diff --git a/packages/common/components/src/ui/skeleton/index.tsx b/packages/common/components/src/ui/skeleton/index.tsx
index 6e10fe239..f10066415 100644
--- a/packages/common/components/src/ui/skeleton/index.tsx
+++ b/packages/common/components/src/ui/skeleton/index.tsx
@@ -6,7 +6,7 @@ function Skeleton({
 }: React.HTMLAttributes<HTMLDivElement>) {
   return (
     <div
-      className={cn("animate-pulse rounded-md bg-muted", className)}
+      className={cn("animate-pulse rounded-md bg-[rgba(0,0,0,0.1)]", className)}
       {...props}
     />
   );