diff --git a/src/app/person/desktop.tsx b/src/app/person/desktop.tsx
new file mode 100644
index 0000000..9876b99
--- /dev/null
+++ b/src/app/person/desktop.tsx
@@ -0,0 +1,7 @@
+export default function PersonDesktop() {
+  return (
+    <div>
+      <h1>Person</h1>
+    </div>
+  );
+}
diff --git a/src/app/person/mobile.tsx b/src/app/person/mobile.tsx
new file mode 100644
index 0000000..060d567
--- /dev/null
+++ b/src/app/person/mobile.tsx
@@ -0,0 +1,7 @@
+export default function PersonMobile() {
+  return (
+    <div>
+      <h1>Person</h1>
+    </div>
+  );
+}
diff --git a/src/app/person/page.tsx b/src/app/person/page.tsx
new file mode 100644
index 0000000..576e77b
--- /dev/null
+++ b/src/app/person/page.tsx
@@ -0,0 +1,31 @@
+import { authClient } from "@/utils/auth-client";
+import PersonMobile from "./mobile";
+import PersonDesktop from "./desktop";
+
+export default function PersonPage() {
+  const { data: session, isPending, error, refetch } = authClient.useSession();
+
+  // Handle session states
+  if (isPending) {
+    return <div>Loading...</div>;
+  }
+  if (error) {
+    return <div>Error: {error.message}</div>;
+  }
+
+  // Get window width for responsive design
+  const width = typeof window !== "undefined" ? window.innerWidth : 0;
+  if (width === 0) {
+    return <div>Loading...</div>;
+  }
+
+  // Render the mobile component if the window width is less than 768
+  if (!isPending && session && width < 768) {
+    return <PersonMobile />;
+  }
+
+  // Render the desktop component if the window width is greater than or equal to 768
+  if (!isPending && session && width >= 768) {
+    return <PersonDesktop />;
+  }
+}