diff --git a/apps/client/src/pages/dashboard/dashboard.tsx b/apps/client/src/pages/dashboard/dashboard.tsx
index 9aa1501..9586ee6 100644
--- a/apps/client/src/pages/dashboard/dashboard.tsx
+++ b/apps/client/src/pages/dashboard/dashboard.tsx
@@ -1,6 +1,5 @@
 import { POP_UP_AREA_Z_INDEX } from '@/constants';
 import ModalPop from '@/shared/components/ui/modalPop/ModalPop';
-import { Header } from '@shared/components';
 import {
   BannerSection,
   BookmarkSection,
@@ -8,6 +7,7 @@ import {
 } from '@pages/dashboard/components';
 import { useDashboard } from '@pages/dashboard/hooks/useDashboard';
 import type { Category } from '@pages/dashboard/types/api';
+import { Header } from '@shared/components';
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
@@ -103,7 +103,7 @@ const Dashboard = () => {
     <div className="bg-background flex min-h-screen flex-col items-center">
       {isPopUpOpen && (
         <div
-          className={`absolute z-${POP_UP_AREA_Z_INDEX} flex h-[100dvh] w-full items-center justify-center bg-[#0000005b]`}
+          className={`absolute z-${POP_UP_AREA_Z_INDEX} z-100 flex h-[100dvh] w-full items-center justify-center bg-[#0000005b]`}
           onClick={() => setIsPopUpOpen(false)}
         >
           <div onClick={(e) => e.stopPropagation()}>
diff --git a/apps/client/src/shared/components/ui/layout/Header.tsx b/apps/client/src/shared/components/ui/layout/Header.tsx
index 6858df7..f5e317e 100644
--- a/apps/client/src/shared/components/ui/layout/Header.tsx
+++ b/apps/client/src/shared/components/ui/layout/Header.tsx
@@ -2,7 +2,7 @@ import logo from '@assets/brand/logo.svg';
 
 const Header = () => {
   return (
-    <header className="bg-background z-9999 fixed left-1/2 top-0 flex h-[7.4rem] w-[1440px] -translate-x-1/2 items-center px-[6rem] pb-[1.7rem] pt-[2.5rem]">
+    <header className="bg-background fixed left-1/2 top-0 z-50 flex h-[7.4rem] w-[1440px] -translate-x-1/2 items-center px-[6rem] pb-[1.7rem] pt-[2.5rem]">
       <img src={logo} className="h-[3.2rem] w-[12.4rem]" alt="로고" />
     </header>
   );
diff --git a/apps/client/src/shared/components/ui/modalPop/ModalPop.tsx b/apps/client/src/shared/components/ui/modalPop/ModalPop.tsx
index 49476d4..cd116e6 100644
--- a/apps/client/src/shared/components/ui/modalPop/ModalPop.tsx
+++ b/apps/client/src/shared/components/ui/modalPop/ModalPop.tsx
@@ -1,13 +1,14 @@
-import { useState } from 'react';
+import { POP_TEXTAREA_MAX_LENGTH } from '@constants/index';
 import {
   CategoryDropDown,
   CommonBtn,
   InfoBox,
   TextArea,
+  TextFieldPopup,
   TimePicker,
   ToggleButton,
 } from '@pinback/design-system/ui';
-import { POP_TEXTAREA_MAX_LENGTH } from '@constants/index';
+import { useState } from 'react';
 interface ModalPopProps {
   onClose: () => void;
 }
@@ -18,6 +19,12 @@ const ModalPop = ({ onClose }: ModalPopProps) => {
     time: '',
     timeError: '',
   });
+  const [categoryPopupMode, setCategoryPopupMode] = useState<
+    'edit' | 'add' | ''
+  >('');
+  const [selectedCategory, setSelectedCategory] = useState('');
+  const [categories, setCategories] = useState(['기획', '취미', '요리']);
+
   const handleFieldChange = (
     field: 'date' | 'time',
     value: string,
@@ -30,8 +37,39 @@ const ModalPop = ({ onClose }: ModalPopProps) => {
     }));
   };
 
+  const handleCategoryChange = (value: string) => {
+    if (value === 'edit') {
+      setCategoryPopupMode('edit');
+    } else if (value === 'create') {
+      setCategoryPopupMode('add');
+    } else {
+      setSelectedCategory(value);
+      setCategoryPopupMode('');
+    }
+  };
+
+  const handlePopupClose = () => {
+    setCategoryPopupMode('');
+  };
+
+  const handlePopupConfirm = (newCategory?: string) => {
+    if (!newCategory) {
+      return;
+    }
+    if (categoryPopupMode === 'add') {
+      setCategories((prev) => [...prev, newCategory]);
+      setSelectedCategory(newCategory);
+    } else if (categoryPopupMode === 'edit') {
+      setCategories((prev) =>
+        prev.map((cat) => (cat === selectedCategory ? newCategory : cat))
+      );
+      setSelectedCategory(newCategory);
+    }
+    handlePopupClose();
+  };
+
   return (
-    <div className="flex h-[64.2rem] w-[38.7rem] flex-col items-center justify-between rounded-[1rem] bg-white px-[3rem] py-[3rem]">
+    <div className="relative flex h-[64.2rem] w-[38.7rem] flex-col items-center justify-between rounded-[1rem] bg-white px-[3rem] py-[3rem]">
       <div className="flex flex-col gap-[1.6rem]">
         {/* TODO : 하드코딩 데이터 구간 */}
         <InfoBox
@@ -44,6 +82,7 @@ const ModalPop = ({ onClose }: ModalPopProps) => {
           <CategoryDropDown
             size="large"
             categories={['기획', '취미', '요리']}
+            onSelect={handleCategoryChange}
           />
         </section>
         <section>
@@ -95,6 +134,23 @@ const ModalPop = ({ onClose }: ModalPopProps) => {
         />
       </div>
       {/* TODO : 하드코딩 데이터 구간 */}
+
+      {categoryPopupMode && (
+        <TextFieldPopup
+          mode={categoryPopupMode}
+          value={categoryPopupMode === 'edit' ? selectedCategory : ''}
+          existingCategories={categories}
+          onCancel={handlePopupClose}
+          onConfirm={handlePopupConfirm}
+          onDelete={() => {
+            setCategories((prev) =>
+              prev.filter((cat) => cat !== selectedCategory)
+            );
+            setSelectedCategory('');
+            handlePopupClose();
+          }}
+        />
+      )}
     </div>
   );
 };
diff --git a/apps/extension/src/components/modalPop/ModalPop.tsx b/apps/extension/src/components/modalPop/ModalPop.tsx
index d766d21..cd49799 100644
--- a/apps/extension/src/components/modalPop/ModalPop.tsx
+++ b/apps/extension/src/components/modalPop/ModalPop.tsx
@@ -1,15 +1,15 @@
-import { useState } from 'react';
+import { POP_TEXTAREA_MAX_LENGTH } from '@constants/index';
 import {
   CategoryDropDown,
   CommonBtn,
   InfoBox,
   TextArea,
+  TextFieldPopup,
   TimePicker,
   ToggleButton,
 } from '@pinback/design-system/ui';
+import { useState } from 'react';
 import ModalHeader from './ModalHeader';
-import { POP_TEXTAREA_MAX_LENGTH } from '@constants/index';
-import { TextFieldPopup } from '@pinback/design-system/ui';
 
 interface ModalPopProps {
   urlInfo: string;
diff --git a/packages/design-system/src/components/InfoBox/InfoBox.tsx b/packages/design-system/src/components/InfoBox/InfoBox.tsx
index ff7544f..cf1305a 100644
--- a/packages/design-system/src/components/InfoBox/InfoBox.tsx
+++ b/packages/design-system/src/components/InfoBox/InfoBox.tsx
@@ -18,11 +18,13 @@ const InfoBox = ({ size = 'large', title, location, icon }: InfoBoxProps) => {
         src={icon}
       />
       <div className="flex flex-col">
-        <div className={`${isLarge ? 'sub5-sb' : 'caption2-sb'} text-black`}>
+        <div
+          className={`${isLarge ? 'sub5-sb' : 'caption2-sb'} truncate text-black`}
+        >
           {location}
         </div>
         <div
-          className={`${isLarge ? 'caption1-m' : 'caption2-m'} text-gray-400`}
+          className={`${isLarge ? 'caption1-m' : 'caption2-m'} truncate text-gray-400`}
         >
           {title}
         </div>
diff --git a/packages/design-system/src/components/textfieldPopup/TextfieldPopup.tsx b/packages/design-system/src/components/textfieldPopup/TextfieldPopup.tsx
index 5f763f9..63b179f 100644
--- a/packages/design-system/src/components/textfieldPopup/TextfieldPopup.tsx
+++ b/packages/design-system/src/components/textfieldPopup/TextfieldPopup.tsx
@@ -1,7 +1,6 @@
-import { useRef, useState } from 'react';
 import { Icon } from '@pinback/design-system/icons';
-import { CommonBtn } from '@pinback/design-system/ui';
-import { Input } from '@pinback/design-system/ui';
+import { CommonBtn, Input } from '@pinback/design-system/ui';
+import { useRef, useState } from 'react';
 
 type Mode = 'add' | 'edit' | 'delete';
 
@@ -159,7 +158,7 @@ const TextfieldPopup = ({
   };
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center">
+    <div className="absolute inset-0 z-50 flex items-center justify-center rounded-[10px] bg-[#00000063]">
       <div className="flex w-[26rem] flex-col rounded-xl bg-white p-[2rem] shadow-[6px_11px_20px_0_rgba(0,0,0,0.08)]">
         {renderContent()}
       </div>