diff --git a/app/friends/page.tsx b/app/friends/page.tsx
index b8689f4..1bbdb72 100644
--- a/app/friends/page.tsx
+++ b/app/friends/page.tsx
@@ -1,5 +1,41 @@
+import avatarPoccur from 'assets/images/avatar-poccur.webp';
+import clsx from 'clsx';
+import FriendCard from 'components/pages/friends/friend-card';
+import { StaticImageData } from 'next/image';
+
+export type Friend = {
+  id: number;
+  name: string;
+  avatar: StaticImageData;
+  link: string;
+  desc: string;
+};
+
+const friends = [
+  {
+    id: 0,
+    name: 'Poccur',
+    avatar: avatarPoccur,
+    link: 'https://poccur.top',
+    desc: '',
+  },
+];
+
 const Page = () => {
-  return <>test</>;
+  return (
+    <>
+      <div
+        className={clsx(
+          'grid grid-cols-1 lg:grid-cols-3',
+          'md:grid-cols-2 gap-5',
+        )}
+      >
+        {friends.map((f) => (
+          <FriendCard friend={f} key={f.id} />
+        ))}
+      </div>
+    </>
+  );
 };
 
 export default Page;
diff --git a/assets/images/avatar-poccur.webp b/assets/images/avatar-poccur.webp
new file mode 100644
index 0000000..6a65e16
Binary files /dev/null and b/assets/images/avatar-poccur.webp differ
diff --git a/components/pages/friends/friend-card.tsx b/components/pages/friends/friend-card.tsx
new file mode 100644
index 0000000..1ae9b46
--- /dev/null
+++ b/components/pages/friends/friend-card.tsx
@@ -0,0 +1,37 @@
+import { Friend } from 'app/friends/page';
+import clsx from 'clsx';
+import Image from 'next/image';
+
+const FriendCard = ({ friend }: { friend: Friend }) => {
+  return (
+    <a href={friend.link} target="_blank">
+      <div
+        className={clsx(
+          'py-3 px-4 rounded-xl bg-slate-100',
+          'hover:bg-slate-200',
+          'transition-all duration-300',
+          'flex items-center cursor-pointer',
+          'justify-between dark:bg-rua-gray-800',
+          'hover:dark:bg-rua-gray-700',
+          'shadow-card',
+        )}
+      >
+        <div>
+          <h2 className={clsx('text-xl font-semibold')}>{friend.name}</h2>
+          <div className="text-sm text-subtext0">{friend.link}</div>
+        </div>
+        <div className="overflow-hidden rounded-lg w-14 h-14">
+          <Image
+            src={friend.avatar}
+            alt="avatar"
+            width={56}
+            height={56}
+            objectFit="contain"
+          />
+        </div>
+      </div>
+    </a>
+  );
+};
+
+export default FriendCard;
diff --git a/components/pages/projects/project-card.tsx b/components/pages/projects/project-card.tsx
index 64f3e9f..b434e67 100644
--- a/components/pages/projects/project-card.tsx
+++ b/components/pages/projects/project-card.tsx
@@ -26,6 +26,7 @@ const ProjectCard = ({ project, icon }: ProjectCardProps) => {
           'flex items-center cursor-pointer',
           'justify-between dark:bg-rua-gray-800',
           'hover:dark:bg-rua-gray-700',
+          'shadow-card',
         )}
       >
         {Icon ? Icon : <VscGithubInverted className="w-8 h-8" />}
diff --git a/styles/globals.css b/styles/globals.css
index c18a8b2..a319d06 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -146,7 +146,7 @@ pre {
   @apply p-4 rounded-lg;
   margin: 0.5em 0;
   overflow: auto;
-  @apply bg-white dark:bg-rua-gray-800;
+  @apply bg-white dark:bg-rua-gray-700;
   /* font-family: 'Fira Code', 'Fira Mono', Menlo, Consolas, 'DejaVu Sans Mono',
       monospace; */
   direction: ltr;
diff --git a/tailwind.config.js b/tailwind.config.js
index d145935..0068bd3 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -38,6 +38,9 @@ module.exports = {
         outline: '0 0 0 3px rgba(83, 220, 246, 0.6)',
         underline: 'inset 0px -2px 0px 0px rgb(85 200 188 / 70%)',
         throughline: 'inset 0px -0.5em 0px 0px rgb(85 200 188 / 70%)',
+        // card
+        // l2
+        card: '0px 10px 20px rgba(0, 0, 0, 0.04), 0px 2px 6px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04)',
       },
       backgroundImage: {
         underline: 'linear-gradient(rgb(240 240 240),rgb(240 240 240))',