diff --git a/apps/client/src/pages/jobPins/JobPins.tsx b/apps/client/src/pages/jobPins/JobPins.tsx
index 326b7f9f..74347057 100644
--- a/apps/client/src/pages/jobPins/JobPins.tsx
+++ b/apps/client/src/pages/jobPins/JobPins.tsx
@@ -1,36 +1,44 @@
-import { Icon } from '@pinback/design-system/icons';
-import { Balloon } from '@shared/components/balloon/Balloon';
+import { Card } from '@pinback/design-system/ui';
+import Footer from '@pages/myBookmark/components/footer/Footer';
+
+const MOCK_JOB_PINS = Array.from({ length: 30 }, (_, index) => ({
+  id: index + 1,
+  title: '텍스트텍스트텍스트텍스트텍스트텍스트텍스트',
+  content: '서브텍스트입니다서브텍스트입니다서브텍스트입니다서브텍스트입니다',
+  category: '카테고리명',
+  categoryColor: 'COLOR7' as const,
+  variant: 'save' as const,
+  nickname: index % 3 === 0 ? '구글닉네임명' : '',
+}));
 
 const JobPins = () => {
   return (
-    <div>
-      {' '}
-      <Balloon variant="main" side="bottom">
-        <div className="text-lg font-semibold">치삐가 방금</div>
-
-        <div className="text-sm opacity-90">도토리 1개를 모았어요!</div>
-      </Balloon>
-      <Balloon variant="gray" side="left" onClose={() => alert('닫힘')}>
-        <div className="text-lg font-semibold">치삐가 방금</div>
+    <div className="flex h-screen flex-col pl-[8rem] pr-[5rem] pt-[5.2rem]">
+      <div className="flex items-center gap-[1.2rem]">
+        <p className="head3">관심 직무 핀</p>
+        <p className="head3 text-main500">기획자</p>
+      </div>
+      <p className="body3-r text-font-gray-3 mt-[0.8rem]">
+        같은 직무의 사람들이 저장한 아티클을 살펴봐요. 선택한 직무를 기준으로
+        최신 핀이 업데이트 돼요!
+      </p>
 
-        <div className="text-sm opacity-90">도토리 1개를 모았어요!</div>
-      </Balloon>
-      <Balloon variant="gray" side="left">
-        <Icon name="ic_info" size={16} />
-        <div className="text-sm opacity-90">도토리 1개를 모았어요!</div>
-      </Balloon>
-      <Balloon variant="main" side="bottom">
-        <div className="flex items-center gap-3">
-          {/* 캐릭터 이미지 */}
-          <Icon name="chippi_profile" size={40} />
+      <div className="scrollbar-hide mt-[2.6rem] flex h-screen flex-wrap content-start gap-[1.6rem] overflow-y-auto scroll-smooth">
+        {MOCK_JOB_PINS.map((pin) => (
+          <Card
+            key={pin.id}
+            type="bookmark"
+            variant={pin.variant}
+            title={pin.title}
+            content={pin.content}
+            category={pin.category}
+            categoryColor={pin.categoryColor}
+            nickname={pin.nickname}
+          />
+        ))}
+      </div>
 
-          {/* 텍스트 영역 */}
-          <div className="flex flex-col">
-            <div className="text-[18px] font-semibold">치삐가 방금</div>
-            <div className="text-[16px]">도토리 1개를 모았어요!</div>
-          </div>
-        </div>
-      </Balloon>
+      <Footer />
     </div>
   );
 };
diff --git a/packages/design-system/src/components/card/Card.stories.tsx b/packages/design-system/src/components/card/Card.stories.tsx
index f6668132..e8e48eda 100644
--- a/packages/design-system/src/components/card/Card.stories.tsx
+++ b/packages/design-system/src/components/card/Card.stories.tsx
@@ -33,6 +33,15 @@ const meta: Meta<typeof Card> = {
       control: 'text',
       if: { arg: 'type', eq: 'bookmark' },
     },
+    variant: {
+      control: 'inline-radio',
+      options: ['default', 'save'],
+      if: { arg: 'type', eq: 'bookmark' },
+    },
+    nickname: {
+      control: 'text',
+      if: { arg: 'variant', eq: 'save' },
+    },
   },
 };
 
@@ -56,6 +65,7 @@ export const BookMark: Story = {
   name: 'type: bookmark',
   args: {
     type: 'bookmark',
+    variant: 'default',
     title: '북마크 카드 타이틀',
     content: '북마크 컨텐츠 내용입니다.',
     category: '디자인',
@@ -65,6 +75,20 @@ export const BookMark: Story = {
   },
 };
 
+export const BookMarkSave: Story = {
+  name: 'type: bookmark (save)',
+  args: {
+    type: 'bookmark',
+    variant: 'save',
+    title: '북마크 카드 타이틀',
+    content: '북마크 컨텐츠 내용입니다.',
+    category: '디자인',
+    nickname: '하비',
+    imageUrl:
+      'https://images.unsplash.com/photo-1555949963-ff9fe0c870eb?q=80&w=2070&auto=format&fit=crop',
+  },
+};
+
 export const LongTextSideBySide: Story = {
   name: 'case: Long Text',
   render: () => (
@@ -79,6 +103,7 @@ export const LongTextSideBySide: Story = {
       />
       <Card
         type="bookmark"
+        variant="default"
         title="두 줄로 표시되는 긴 북마크 카드 타이틀입니다. 제한 길이를 넘어가면 ... 처리가 됩니다."
         content="여기에 두 줄 이상으로 늘어나는 북마크 컨텐츠 내용이 들어갑니다. 길이를 확인해보세요."
         category="마케팅"
@@ -102,6 +127,7 @@ export const NoImageSideBySide: Story = {
       />
       <Card
         type="bookmark"
+        variant="default"
         title="두 줄로 표시되는 긴 북마크 카드 타이틀입니다. 제한 길이를 넘어가면 ... 처리가 됩니다."
         content="여기에 두 줄 이상으로 늘어나는 북마크 컨텐츠 내용이 들어갑니다. 길이를 확인해보세요."
         category="마케팅"
@@ -115,6 +141,7 @@ export const NoCategoryBookmark: Story = {
   name: 'case: No category (bookmark)',
   args: {
     type: 'bookmark',
+    variant: 'default',
     title: '북마크 카드 타이틀',
     content: '북마크 컨텐츠 내용입니다.',
     date: '2025.08.26',
diff --git a/packages/design-system/src/components/card/Card.tsx b/packages/design-system/src/components/card/Card.tsx
index 836ebd66..4cfdb28d 100644
--- a/packages/design-system/src/components/card/Card.tsx
+++ b/packages/design-system/src/components/card/Card.tsx
@@ -17,13 +17,23 @@ type RemindProps = BaseProps & {
   date?: never;
 };
 
-type BookmarkProps = BaseProps & {
+type BookmarkDefaultProps = BaseProps & {
   type: 'bookmark';
+  variant?: 'default';
   date: string;
+  nickname?: never;
   timeRemaining?: never;
 };
 
-export type CardProps = RemindProps | BookmarkProps;
+type BookmarkSaveProps = BaseProps & {
+  type: 'bookmark';
+  variant: 'save';
+  nickname: string;
+  date?: never;
+  timeRemaining?: never;
+};
+
+export type CardProps = RemindProps | BookmarkDefaultProps | BookmarkSaveProps;
 
 const Card = (
   props: CardProps & {
diff --git a/packages/design-system/src/components/card/MyBookmarkCard.tsx b/packages/design-system/src/components/card/MyBookmarkCard.tsx
index ae0e5061..22a37867 100644
--- a/packages/design-system/src/components/card/MyBookmarkCard.tsx
+++ b/packages/design-system/src/components/card/MyBookmarkCard.tsx
@@ -1,6 +1,7 @@
 import chippiNoImage from '../../assets/chippi_no_image.svg';
 import { Icon } from '../../icons';
 import Chip, { ChipColor } from '../chip/Chip';
+
 import BaseCard from './BaseCard';
 
 interface MyBookmarkCardProps {
@@ -9,7 +10,9 @@ interface MyBookmarkCardProps {
   category?: string;
   categoryColor?: string;
   imageUrl?: string;
-  date: string;
+  variant?: 'default' | 'save';
+  date?: string;
+  nickname?: string;
   onClick?: () => void;
   onOptionsClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
 }
@@ -20,10 +23,15 @@ const MyBookmarkCard = ({
   category,
   categoryColor,
   imageUrl,
+  variant = 'default',
   date,
+  nickname,
   onClick,
   onOptionsClick,
 }: MyBookmarkCardProps) => {
+  const displayNickname =
+    nickname && nickname.trim().length > 0 ? nickname : '도토리';
+
   return (
     <BaseCard onClick={onClick} className="h-[33.8rem]">
       <div className="flex h-[12rem] w-full items-center justify-center overflow-hidden bg-[#F8F8FA]">
@@ -41,17 +49,19 @@ const MyBookmarkCard = ({
       <div className="px-[1.6rem] py-[2.4rem]">
         <div className="mb-[0.8rem] flex h-[5.6rem] justify-between gap-[0.8rem]">
           <h3 className="head6 line-clamp-2">{title}</h3>
-          <button
-            type="button"
-            aria-label="카테고리 상세"
-            className="cursor-pointer self-start"
-            onClick={(e) => {
-              e.stopPropagation();
-              onOptionsClick?.(e);
-            }}
-          >
-            <Icon name="ic_details_category" />
-          </button>
+          {variant !== 'save' && (
+            <button
+              type="button"
+              aria-label="카테고리 상세"
+              className="cursor-pointer self-start"
+              onClick={(e) => {
+                e.stopPropagation();
+                onOptionsClick?.(e);
+              }}
+            >
+              <Icon name="ic_details_category" />
+            </button>
+          )}
         </div>
 
         <p className="body3-r text-font-gray-2 mb-[1.2rem] line-clamp-2 h-[4.2rem]">
@@ -62,7 +72,16 @@ const MyBookmarkCard = ({
           <Chip category={category} color={categoryColor as ChipColor} />
         )}
 
-        <p className="caption2-m text-font-ltgray-4 mt-[1.2rem]">{date}</p>
+        {variant === 'save' ? (
+          <div className="mt-[1.2rem] flex items-center justify-between">
+            <p className="caption2-m text-font-ltgray-4">
+              {`(${displayNickname})님의 핀`}
+            </p>
+            <Icon name="ic_memo" size={24} className="shrink-0" />
+          </div>
+        ) : (
+          <p className="caption2-m text-font-ltgray-4 mt-[1.2rem]">{date}</p>
+        )}
       </div>
     </BaseCard>
   );
diff --git a/packages/design-system/src/icons/iconNames.ts b/packages/design-system/src/icons/iconNames.ts
index 894a3353..df18bf77 100644
--- a/packages/design-system/src/icons/iconNames.ts
+++ b/packages/design-system/src/icons/iconNames.ts
@@ -18,6 +18,7 @@ export const iconNames = [
   'ic_details_disable',
   'ic_extension',
   'ic_info',
+  'ic_memo',
   'ic_pin',
   'ic_pin_active',
   'ic_pin_disable',
diff --git a/packages/design-system/src/icons/source/ic_memo.svg b/packages/design-system/src/icons/source/ic_memo.svg
new file mode 100644
index 00000000..3fab4c71
--- /dev/null
+++ b/packages/design-system/src/icons/source/ic_memo.svg
@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.714 3.42896H6.85686C6.40221 3.42896 5.96617 3.60957 5.64468 3.93106C5.32319 4.25255 5.14258 4.68858 5.14258 5.14324V18.8575C5.14258 19.3122 5.32319 19.7482 5.64468 20.0697C5.96617 20.3912 6.40221 20.5718 6.85686 20.5718H17.1426C17.5972 20.5718 18.0333 20.3912 18.3548 20.0697C18.6763 19.7482 18.8569 19.3122 18.8569 18.8575V8.57181L13.714 3.42896Z" stroke="#5C5C64" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.7144 3.42896V8.57181H18.8572" stroke="#5C5C64" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.4289 12.8567H8.57178" stroke="#5C5C64" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.4289 16.2855H8.57178" stroke="#5C5C64" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.2861 9.42896H9.42892H8.57178" stroke="#5C5C64" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>