diff --git a/src/Router.tsx b/src/Router.tsx
index dd6e533..73428f7 100644
--- a/src/Router.tsx
+++ b/src/Router.tsx
@@ -7,7 +7,7 @@ import { ROUTES } from "./constants/router";
 const SignupPage = lazy(() => import("@/pages/SignupPage"));
 const SigninPage = lazy(() => import("@/pages/SigninPage"));
 
-const ProfilePage = lazy(() => import("@/pages/ProfilePage"));
+const ProfilePage = lazy(() => import("@/pages/ProfilePage/ProfilePage"));
 const ProfileRegisterPage = lazy(() => import("@/pages/ProfileRegisterPage"));
 const ProfileEditPage = lazy(() => import("@/pages/ProfileEditPage"));
 
diff --git a/src/components/EmptyStateCard.tsx b/src/components/EmptyStateCard.tsx
new file mode 100644
index 0000000..e7bb1bb
--- /dev/null
+++ b/src/components/EmptyStateCard.tsx
@@ -0,0 +1,29 @@
+import { MouseEvent } from "react";
+
+import Button from "@/components/Button";
+
+interface EmptyStateCardProps {
+  description?: string;
+  buttonName: string;
+  onClick: (e: MouseEvent<HTMLButtonElement>) => void;
+}
+
+function EmptyStateCard({
+  description,
+  buttonName,
+  onClick,
+}: EmptyStateCardProps) {
+  return (
+    <div className="flex flex-col items-center gap-4 md:gap-6 w-full py-[3.75rem] border-[1px] border-gray-20 rounded-xl text-black">
+      <p className="leading-[1.625rem] text-sm md:text-[1rem]">{description}</p>
+      <Button
+        onClick={onClick}
+        className="py-2.5 px-5 md:py-3.5 md:px-[6.875rem] text-sm md:text-[1rem] cursor-pointer"
+      >
+        {buttonName}
+      </Button>
+    </div>
+  );
+}
+
+export default EmptyStateCard;
diff --git a/src/pages/ProfilePage.tsx b/src/pages/ProfilePage/ProfilePage.tsx
similarity index 100%
rename from src/pages/ProfilePage.tsx
rename to src/pages/ProfilePage/ProfilePage.tsx