diff --git a/public/user-card/edit-icon.svg b/public/user-card/edit-icon.svg
new file mode 100644
index 00000000..7a4c631f
--- /dev/null
+++ b/public/user-card/edit-icon.svg
@@ -0,0 +1,23 @@
+<svg width="59" height="58" viewBox="0 0 59 58" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_2061_16796)">
+<circle cx="29.5" cy="28" r="25" fill="#EB9096"/>
+</g>
+<mask id="mask0_2061_16796" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="17" y="16" width="25" height="24">
+<rect x="17.5" y="16" width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_2061_16796)">
+<path d="M19.5004 40V36H39.5004V40H19.5004ZM21.5004 34V29.75L32.7004 18.575C32.8837 18.3917 33.0962 18.25 33.3379 18.15C33.5795 18.05 33.8337 18 34.1004 18C34.367 18 34.6254 18.05 34.8754 18.15C35.1254 18.25 35.3504 18.4 35.5504 18.6L36.9254 20C37.1254 20.1833 37.2712 20.4 37.3629 20.65C37.4545 20.9 37.5004 21.1583 37.5004 21.425C37.5004 21.675 37.4545 21.9208 37.3629 22.1625C37.2712 22.4042 37.1254 22.625 36.9254 22.825L25.7504 34H21.5004ZM34.1004 22.8L35.5004 21.4L34.1004 20L32.7004 21.4L34.1004 22.8Z" fill="#414643"/>
+</g>
+<defs>
+<filter id="filter0_d_2061_16796" x="0.5" y="0" width="58" height="58" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2061_16796"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2061_16796" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/public/user-card/tv.png b/public/user-card/tv.png
new file mode 100644
index 00000000..cb7c5469
Binary files /dev/null and b/public/user-card/tv.png differ
diff --git a/src/app/dev/page.tsx b/src/app/dev/page.tsx
new file mode 100644
index 00000000..7aeb2c12
--- /dev/null
+++ b/src/app/dev/page.tsx
@@ -0,0 +1,31 @@
+'use client';
+
+import Border from '@/components/Border';
+import { Suspense } from 'react';
+import UserCard from '@/components/UserCard';
+
+// For dev (delete soon)
+export default function page() {
+  return (
+    <Suspense>
+      <Login />
+    </Suspense>
+  );
+}
+
+function Login() {
+  return (
+    <Border variant="dark-pink">
+      <UserCard />
+
+      <div className="w-4/5 h-4/5 ">
+        <UserCard />
+      </div>
+
+      {/* Break if the size is too small because the texts' sizes */}
+      <div className="w-1/2 h-1/2">
+        <UserCard />
+      </div>
+    </Border>
+  );
+}
diff --git a/src/components/UserCard.tsx b/src/components/UserCard.tsx
new file mode 100644
index 00000000..e0726aa7
--- /dev/null
+++ b/src/components/UserCard.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import TV from '@public/user-card/tv.png';
+import EditIcon from '@public/user-card/edit-icon.svg';
+import Image from 'next/image';
+import { useAuth } from '@/context/AuthContext';
+import { useRouter } from 'next/navigation';
+
+const UserCard = () => {
+  const router = useRouter();
+  const { user } = useAuth();
+  const name = `${user?.firstname} ${user?.lastname}`;
+  const studentId = user?.email.split('@')[0];
+  const photo_url = user?.photo_url;
+
+  return (
+    <div className="relative w-full h-full flex justify-center items-center p-4">
+      <Image
+        src={TV}
+        alt="tv"
+        className="w-full h-auto object-cover"
+      />
+      <div className="absolute top-[15%] left-[9%] w-[65%] h-[65%] flex flex-col items-center justify-center p-4 bg-blue-900 rounded-lg">
+        <div className="w-[35%] h-[50%] overflow-hidden rounded-full">
+          {photo_url && (
+            <img
+              src={photo_url}
+              alt="user-picture"
+              className="w-full h-full object-cover"
+            />
+          )}
+        </div>
+        <div className="text-center">
+          <h2 className="text-sm text-yellow-400 font-bold mt-2">{name}</h2>
+          <p className="text-xs text-white">รหัสนิสิต {studentId}</p>
+        </div>
+      </div>
+      <div
+        className="absolute top-[5%] right-[2%] w-[20%]"
+        onClick={() => router.push('/edit')}
+      >
+        <Image
+          src={EditIcon}
+          alt="edit-icon"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default UserCard;