diff --git a/Components/Common/PageLoading/PageSpinner.tsx b/Components/Common/PageLoading/PageSpinner.tsx
new file mode 100644
index 0000000..d5a4627
--- /dev/null
+++ b/Components/Common/PageLoading/PageSpinner.tsx
@@ -0,0 +1,10 @@
+'use client';
+
+import React from 'react';
+import { Spinner } from '@material-tailwind/react';
+
+const PageSpinner = () => {
+	return <Spinner color="pink" className="w-8 h-8" />;
+};
+
+export default PageSpinner;
diff --git a/Components/Common/PageLoading/ProgressBar.tsx b/Components/Common/PageLoading/ProgressBar.tsx
index 6baf93e..f198da3 100644
--- a/Components/Common/PageLoading/ProgressBar.tsx
+++ b/Components/Common/PageLoading/ProgressBar.tsx
@@ -11,18 +11,18 @@ const ProgressBar = () => {
 			setValue((oldValue) => {
 				const newValue = oldValue + 10;
 
-				if (newValue === 100) {
+				if (newValue >= 100) {
 					clearInterval(interval);
 				}
 
 				return newValue;
 			});
 		}, 600);
-	});
+	}, []);
 
 	return (
 		<>
-			<Progress value={value} color="red" />
+			<Progress value={value} size="sm" color="pink" className="h-1" />
 		</>
 	);
 };
diff --git a/app/loading.tsx b/app/loading.tsx
index 463219f..4970ac2 100644
--- a/app/loading.tsx
+++ b/app/loading.tsx
@@ -1,7 +1,28 @@
+import ProgressBar from '@/Components/Common/PageLoading/ProgressBar';
 import React from 'react';
+import icon_cat from '@/public/icon_cat.svg';
+import Image from 'next/image';
+import PageSpinner from '@/Components/Common/PageLoading/PageSpinner';
 
 const Loading = () => {
-	return <div>Loading</div>;
+	return (
+		<div className=" bg-secondary w-full h-full">
+			<ProgressBar />
+			<div className="w-full h-full flex flex-col items-center justify-center bg-secondary">
+				<Image
+					src={icon_cat}
+					alt="cat"
+					width={100}
+					height={100}
+					className="w-32 h-32"
+				/>
+				<div className=" w-56 h-20 flex flex-col items-center justify-center rounded-md bg-white">
+					<PageSpinner />
+					<h1>Loading...</h1>
+				</div>
+			</div>
+		</div>
+	);
 };
 
 export default Loading;
diff --git a/app/test/page.tsx b/app/test/page.tsx
deleted file mode 100644
index e76aa6a..0000000
--- a/app/test/page.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import ProgressBar from '@/Components/Common/PageLoading/ProgressBar';
-import React from 'react';
-
-const Loading = () => {
-	return (
-		<div>
-			<ProgressBar />
-		</div>
-	);
-};
-
-export default Loading;