diff --git a/public/images/modify-pen.svg b/public/images/modify-pen.svg
new file mode 100644
index 0000000..0d89c27
--- /dev/null
+++ b/public/images/modify-pen.svg
@@ -0,0 +1,3 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.50481 25.6249C5.18471 25.6249 4.91639 25.5167 4.69984 25.3001C4.48328 25.0836 4.375 24.8152 4.375 24.4951V22.3293C4.375 22.0245 4.4335 21.7339 4.5505 21.4577C4.66748 21.1814 4.82853 20.9407 5.03366 20.7356L20.863 4.91347C21.052 4.74178 21.2607 4.60911 21.4891 4.51547C21.7175 4.42182 21.957 4.375 22.2077 4.375C22.4583 4.375 22.701 4.41948 22.936 4.50844C23.1709 4.59738 23.3789 4.73879 23.56 4.93269L25.0865 6.47834C25.2804 6.65943 25.4186 6.8678 25.5011 7.10347C25.5837 7.33912 25.6249 7.57476 25.6249 7.81041C25.6249 8.06176 25.582 8.30164 25.4962 8.53003C25.4103 8.75845 25.2738 8.96717 25.0865 9.15619L9.26434 24.9663C9.05922 25.1714 8.81853 25.3325 8.54228 25.4494C8.26601 25.5664 7.97546 25.6249 7.67062 25.6249H5.50481ZM21.9399 9.61775L23.75 7.81966L22.1803 6.24997L20.3822 8.06006L21.9399 9.61775Z" fill="white"/>
+</svg>
diff --git a/src/app/dashboard/[id]/page.tsx b/src/app/dashboard/[id]/page.tsx
index 0e79228..bb2a373 100644
--- a/src/app/dashboard/[id]/page.tsx
+++ b/src/app/dashboard/[id]/page.tsx
@@ -141,14 +141,14 @@ export default function DashboardID() {
     <>
       <div className="select-none">
         <div
-          className="flex min-h-[calc(100vh-100px)] mobile:flex-row tablet:flex-col"
+          className="flex min-h-[calc(100vh-100px)] mobile:flex-col tablet:flex-col"
           onTouchStart={handleTouchStart}
           onTouchMove={handleTouchMove}
           onTouchEnd={handleTouchEnd}
         >
           {columns?.map((column) => <Column key={column.id} column={column} />)}
-          <div className="BG-gray Border-column p-20">
-            <button className="BG-white Border-btn flex items-center gap-12 whitespace-nowrap rounded-8 px-85 pb-20 pt-24 text-18 font-bold">
+          <div className="BG-gray Border-column p-20 mobile:w-308 mobile:border-t-2 tablet:w-584 tablet:border-t-2">
+            <button className="BG-white Border-btn m flex justify-center gap-12 whitespace-nowrap rounded-8 px-85 pb-20 pt-24 text-18 font-bold mobile:flex mobile:w-full mobile:justify-center mobile:px-50 mobile:py-20 mobile:text-16 tablet:flex tablet:w-full tablet:items-center">
               <span>새로운 컬럼 추가하기</span>
               <div className="flex h-22 w-22 items-center justify-center rounded-4 bg-blue-100">
                 <Image
diff --git a/src/app/features/dashboard_Id/Card/Card.tsx b/src/app/features/dashboard_Id/Card/Card.tsx
index efb94f8..386a627 100644
--- a/src/app/features/dashboard_Id/Card/Card.tsx
+++ b/src/app/features/dashboard_Id/Card/Card.tsx
@@ -11,6 +11,7 @@ import ModifyCardForm from './cardFormModals/ModifyCardForm'
 import CardContent from './cardModal/CardContent'
 import CardModal from './cardModal/CardModal'
 import Tags from './Tags'
+import TagsInCard from './TagsInCard'
 
 export default function Card({
   card,
@@ -36,54 +37,58 @@ export default function Card({
       className="BG-white Border-section relative rounded-6 border-solid px-20 py-16"
       onClick={() => setOpenCard(true)}
     >
-      {imageUrl && (
-        <Image
-          src={imageUrl}
-          alt="카드 이미지"
-          width={400}
-          height={600}
-          className="mb-15 h-auto w-full rounded-6 object-contain"
-          priority
-          draggable="false"
-        />
-      )}
-
-      {/* 할 일 제목 */}
-      <h3 className="Text-black mb-10 text-16 font-medium leading-relaxed">
-        {title}
-      </h3>
-
-      {/* 태그 */}
-      {tags.length !== 0 && <Tags tags={tags} />}
-
-      {/* 마감일 & 담당자 */}
-      <div className="mt-8 flex content-around items-center">
-        {/* :마감일 */}
-        <div className="flex size-full items-center gap-6">
+      <div className="mobile:flex-col tablet:flex tablet:w-full tablet:items-center tablet:gap-20">
+        {imageUrl && (
           <Image
-            src={'/images/calendar.svg'}
-            alt="마감일"
-            width={18}
-            height={18}
+            src={imageUrl}
+            alt="카드 이미지"
+            width={400}
+            height={600}
+            className="mb-15 h-auto w-full rounded-6 object-contain mobile:mb-4 mobile:h-auto mobile:w-260 tablet:m-0 tablet:h-68 tablet:max-w-fit"
+            priority
+            draggable="false"
           />
-          {dueDate && (
-            <div className="Text-gray mt-4 text-12 font-medium leading-none">
-              {dueDate.split(' ')[0]}
+        )}
+        <div className="tablet:w-full">
+          {/* 할 일 제목 */}
+          <h3 className="Text-black mb-10 text-16 font-medium leading-relaxed mobile:mb-6">
+            {title}
+          </h3>
+
+          <div className="tablet:flex tablet:flex-wrap tablet:items-center">
+            {/* 태그 */}
+            {tags.length !== 0 && <Tags tags={tags} />}
+
+            {/* 마감일 & 담당자 */}
+            <div className="mt-8 flex content-around items-center mobile:mt-6 tablet:m-0 tablet:w-full tablet:justify-between">
+              {/* :마감일 */}
+              <div className="flex size-full items-center gap-6 tablet:mr-10 tablet:w-90">
+                <Image
+                  src={'/images/calendar.svg'}
+                  alt="마감일"
+                  width={18}
+                  height={18}
+                />
+                {dueDate && (
+                  <div className="Text-gray mt-4 text-12 font-medium leading-none">
+                    {dueDate.split(' ')[0]}
+                  </div>
+                )}
+              </div>
+              {/* :담당자 */}
+              {assignee && (
+                <div className="shrink-0">
+                  <Avatar
+                    size={24}
+                    name={assignee.nickname}
+                    imageUrl={assignee.profileImageUrl}
+                  />
+                </div>
+              )}
             </div>
-          )}
-        </div>
-        {/* :담당자 */}
-        {assignee && (
-          <div className="shrink-0">
-            <Avatar
-              size={24}
-              name={assignee.nickname}
-              imageUrl={assignee.profileImageUrl}
-            />
           </div>
-        )}
+        </div>
       </div>
-
       {/* 카드 모달 */}
       {openCard && (
         <CardModal>
diff --git a/src/app/features/dashboard_Id/Card/cardFormModals/AssigneeList.tsx b/src/app/features/dashboard_Id/Card/cardFormModals/AssigneeList.tsx
index d0f3f5a..9915e85 100644
--- a/src/app/features/dashboard_Id/Card/cardFormModals/AssigneeList.tsx
+++ b/src/app/features/dashboard_Id/Card/cardFormModals/AssigneeList.tsx
@@ -28,12 +28,13 @@ export default function AssigneeList({
   const assignees = getDashboardMembers(members)
 
   return (
-    <div className="BG-white Border-btn Text-gray absolute left-0 top-full z-10 mt-4 w-full rounded-6 text-14">
+    <div className="BG-white Text-gray absolute left-0 top-full z-10 mt-4 w-full rounded-6 border border-[#D9D9D9] text-14 dark:border-[#747474]">
       {assignees.map((assignee: Assignee, index: number) => (
         <div
           className={cn(
             'BG-Input-hovered w-full cursor-pointer px-16 py-11 pt-14 placeholder-gray-400 caret-transparent',
-            index !== 0 && 'border-t',
+            index !== 0 &&
+              'border-t border-[#D9D9D9] text-14 dark:border-[#747474]',
           )}
           key={assignee.id}
           onClick={() => {
diff --git a/src/app/features/dashboard_Id/Card/cardFormModals/ColumnList.tsx b/src/app/features/dashboard_Id/Card/cardFormModals/ColumnList.tsx
index 4f9c1ce..d5c0442 100644
--- a/src/app/features/dashboard_Id/Card/cardFormModals/ColumnList.tsx
+++ b/src/app/features/dashboard_Id/Card/cardFormModals/ColumnList.tsx
@@ -1,4 +1,4 @@
-import { ControllerRenderProps } from 'react-hook-form'
+import { ControllerRenderProps, UseFormSetValue } from 'react-hook-form'
 
 import { cn } from '@/app/shared/lib/cn'
 
diff --git a/src/app/features/dashboard_Id/Card/cardFormModals/CreateCardForm.tsx b/src/app/features/dashboard_Id/Card/cardFormModals/CreateCardForm.tsx
index d6f95fc..8e7e709 100644
--- a/src/app/features/dashboard_Id/Card/cardFormModals/CreateCardForm.tsx
+++ b/src/app/features/dashboard_Id/Card/cardFormModals/CreateCardForm.tsx
@@ -14,6 +14,7 @@ import { usePostCard } from '../../api/usePostCard'
 import { useUploadCardImage } from '../../api/useUploadCardImage'
 import { Assignee } from '../../type/Card.type'
 import type { CardFormData } from '../../type/CardFormData.type'
+import MyAssignee from '../MyAssignee'
 import TagsCanDelete from '../TagsCanDelete'
 // import AssigneeList, { Assignee } from './AssigneeList'
 import AssigneeList from './AssigneeList'
@@ -120,6 +121,11 @@ export default function CreateCardForm({
                 type="text"
                 placeholder="담당자를 선택해 주세요"
               />
+              {selectedAssignee && (
+                <div className="absolute left-16 top-1/2 -translate-y-1/2 bg-[#FFFFFF] dark:bg-[#3B3B3B]">
+                  <MyAssignee assignee={selectedAssignee} />
+                </div>
+              )}
               <Image
                 src="/images/arrow-dropdown.svg"
                 alt="화살표"
@@ -230,7 +236,7 @@ export default function CreateCardForm({
         {/* 이미지 미리보기 or 업로드 버튼 */}
         <label
           htmlFor="imageUrl"
-          className="flex size-76 items-center justify-center rounded-6 bg-[#F5F5F5]"
+          className="flex size-76 items-center justify-center overflow-hidden rounded-6 border-[#747474] bg-[#F5F5F5] dark:border dark:bg-[#3B3B3B]"
         >
           {preview ? (
             <Image
@@ -283,7 +289,7 @@ export default function CreateCardForm({
           취소
         </button>
         <button
-          className="BG-blue w-full rounded-8 border-solid py-14 text-16 font-medium text-[#FFFFFF]"
+          className="BG-blue w-full rounded-8 border-solid py-14 text-16 font-medium text-[#FFFFFF] disabled:bg-gray-300 dark:disabled:bg-[#464646]"
           type="submit"
           disabled={!isValid || isPending || isSubmitting}
         >
diff --git a/src/app/features/dashboard_Id/Card/cardFormModals/ModifyCardForm.tsx b/src/app/features/dashboard_Id/Card/cardFormModals/ModifyCardForm.tsx
index eb7b032..a20e716 100644
--- a/src/app/features/dashboard_Id/Card/cardFormModals/ModifyCardForm.tsx
+++ b/src/app/features/dashboard_Id/Card/cardFormModals/ModifyCardForm.tsx
@@ -3,7 +3,7 @@ import 'react-datepicker/dist/react-datepicker.css'
 import { format } from 'date-fns'
 import Image from 'next/image'
 import { useParams } from 'next/navigation'
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import DatePicker from 'react-datepicker'
 import { Controller, useForm } from 'react-hook-form'
 
@@ -36,7 +36,7 @@ export default function ModifyCardForm({
   card: Card
 }) {
   const [preview, setPreview] = useState<string | null>(card.imageUrl) // 이미지 URl 임시 저장
-  const [tags, setTags] = useState<string[]>(card.tags) // 태그 목록 임시 저장
+  const [tags, setTags] = useState<string[]>(card.tags) // 태그 목록 임시 저장]
   const [tagInput, setTagInput] = useState('') // 작성중인 태그
   const { mutate: uploadImage, isPending: isUploading } = useUploadCardImage()
 
@@ -77,7 +77,7 @@ export default function ModifyCardForm({
 
   // React Hook Form 과 tags 값 연결
   useEffect(() => {
-    setValue('tags', tags)
+    setValue('tags', tags, { shouldDirty: true })
   }, [tags, tags.length, setValue])
 
   // 상태(컬럼) 선택 시 / assignee 선택 시 드롭다운 닫기
@@ -111,7 +111,7 @@ export default function ModifyCardForm({
   function onSubmit(data: CardModifyFormData) {
     const payload: CardModifyFormData = {
       ...data,
-      columnId: columnId,
+      columnId: selectedColumn.columnId,
     }
 
     if (!data.dueDate) delete payload.dueDate
@@ -142,7 +142,6 @@ export default function ModifyCardForm({
                 <input
                   {...field}
                   onClick={() => setIsOpenColumn((prev) => !prev)}
-                  value={selectedColumn?.columnTitle ?? ''}
                   readOnly
                   className="Input-readOnly-217"
                   id="columnId"
@@ -185,14 +184,14 @@ export default function ModifyCardForm({
                 <input
                   {...field}
                   onClick={() => setIsOpen((prev) => !prev)}
-                  // value={selectedAssignee?.nickname ?? ''}
                   readOnly
                   className="Input-readOnly-217"
                   id="assigneeUserId"
                   type="text"
+                  placeholder={selectedAssignee ? '' : '담당자를 선택해 주세요'}
                 />
                 {selectedAssignee && (
-                  <div className="BG-white absolute left-16 top-1/2 -translate-y-1/2">
+                  <div className="absolute left-16 top-1/2 -translate-y-1/2 bg-[#FFFFFF] dark:bg-[#3B3B3B]">
                     <MyAssignee assignee={selectedAssignee} />
                   </div>
                 )}
@@ -304,42 +303,54 @@ export default function ModifyCardForm({
       <div>
         <h3 className="mb-8">이미지</h3>
         {/* 이미지 미리보기 or 업로드 버튼 */}
-        <label
-          htmlFor="imageUrl"
-          className="flex size-76 items-center justify-center rounded-6 bg-[#F5F5F5]"
-        >
-          {preview ? (
-            <Image
-              src={preview}
-              alt="미리보기"
-              width={76}
-              height={76}
-              className="size-full object-cover"
-            />
-          ) : (
-            <Image
-              src="/images/plus.svg"
-              width={28}
-              height={28}
-              alt="플러스 아이콘"
-            />
-          )}
-        </label>
-
-        {/* ❌ 이미지 제거 버튼 (이미지가 있을 경우만 표시) */}
-        {preview && (
-          <button
-            type="button"
-            className="mt-2 size-20 rounded-20 bg-blue-300 text-15 font-bold"
-            onClick={() => {
-              setPreview(null)
-              setValue('imageUrl', '') // 또는 null
-            }}
+        <div className="relative">
+          <label
+            htmlFor="imageUrl"
+            className="flex size-76 items-center justify-center overflow-hidden rounded-6 border-[#747474] bg-[#F5F5F5] dark:border dark:border-[#747474] dark:bg-[#3B3B3B]"
           >
-            X
-          </button>
-        )}
+            {preview ? (
+              <Image
+                src={preview}
+                alt="미리보기"
+                width={76}
+                height={76}
+                className="size-full object-cover"
+              />
+            ) : (
+              <Image
+                src="/images/plus.svg"
+                width={28}
+                height={28}
+                alt="플러스 아이콘"
+              />
+            )}
+          </label>
 
+          {/* ❌ 이미지 제거 버튼 (이미지가 있을 경우만 표시) */}
+          {preview && (
+            <button
+              type="button"
+              className="Text-gray absolute bottom-0 left-83 text-12 font-medium"
+              onClick={() => {
+                setPreview(null)
+                setValue('imageUrl', '') // 또는 null
+              }}
+            >
+              삭제
+            </button>
+          )}
+          {/* 이미지 수정 가능 표시  */}
+          {preview === card.imageUrl && (
+            <div className="pointer-events-none absolute left-0 top-0 flex size-76 items-center justify-center rounded-6 bg-black/60">
+              <Image
+                src="/images/modify-pen.svg"
+                width={30}
+                height={30}
+                alt="이미지 수정펜"
+              />
+            </div>
+          )}
+        </div>
         {/* 파일 입력 필드 (실제 input은 숨겨져 있음) */}
         <input
           id="imageUrl"
@@ -359,7 +370,7 @@ export default function ModifyCardForm({
           취소
         </button>
         <button
-          className="BG-blue w-full rounded-8 border-solid py-14 text-16 font-medium text-[#FFFFFF] disabled:bg-gray-300"
+          className="BG-blue w-full rounded-8 border-solid py-14 text-16 font-medium text-[#FFFFFF] disabled:bg-gray-300 dark:disabled:bg-[#464646]"
           type="submit"
           disabled={!isValid || !isDirty || isPending || isSubmitting}
         >
diff --git a/src/app/features/dashboard_Id/Card/cardModal/CardContent.tsx b/src/app/features/dashboard_Id/Card/cardModal/CardContent.tsx
index 20115e2..9156e92 100644
--- a/src/app/features/dashboard_Id/Card/cardModal/CardContent.tsx
+++ b/src/app/features/dashboard_Id/Card/cardModal/CardContent.tsx
@@ -1,4 +1,5 @@
 import Image from 'next/image'
+import { useTheme } from 'next-themes'
 import { useRef, useState } from 'react'
 
 import { Avatar } from '@/app/shared/components/common/Avatar'
@@ -29,6 +30,9 @@ export default function CardContent({
 
   const modalScrollRef = useRef<HTMLDivElement>(null)
 
+  const { resolvedTheme } = useTheme()
+  const isDark = resolvedTheme === 'dark'
+
   return (
     <div
       className="BG-white relative max-h-764 min-h-764 w-730 overflow-auto overflow-y-scroll rounded-16 px-18 py-30 shadow-lg [mask-image:radial-gradient(white_100%,transparent_100%)] mobile:w-327 mobile:p-16 tablet:w-678 tablet:px-32 tablet:py-24"
diff --git a/src/app/features/dashboard_Id/Card/cardModal/CardContentCopy.tsx b/src/app/features/dashboard_Id/Card/cardModal/CardContentCopy.tsx
deleted file mode 100644
index 933b48c..0000000
--- a/src/app/features/dashboard_Id/Card/cardModal/CardContentCopy.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-// import { useModalStore } from '@store/useModalStore'
-// import Image from 'next/image'
-// import { useState } from 'react'
-
-// import Dropdown from '@/app/shared/components/common/Dropdown/Dropdown'
-
-// import { Card } from '../../type/Card.type'
-// import { Column } from '../../type/Column.type'
-// import CreateCardModal from '../cardFormModals/CreateCardModal'
-// import ModifyCardForm from '../cardFormModals/ModifyCardForm'
-// import Tags from '../Tags'
-// interface CardContentProps {
-//   onClose: () => void
-//   card: Card
-//   column: Column
-// }
-// export default function CardContent({
-//   onClose,
-//   card,
-//   column,
-// }: CardContentProps) {
-//   const { id, imageUrl, title, tags, dueDate, assignee } = card
-//   const [openModifyCard, setOpenModifyCard] = useState(false)
-//   const { title: columnTitle, id: columnId } = column
-//   const currentColumn = { columnTitle, columnId }
-//   const { modalType, closeModal } = useModalStore()
-
-//   const handleBackdropClick = (e: React.MouseEvent<HTMLDivElement>) => {
-//     if (e.target === e.currentTarget) {
-//       closeModal()
-//     }
-//   }
-
-//   if (!modalType) return null
-
-//   return (
-//     <>
-//       <div
-//         className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
-//         onClick={handleBackdropClick}
-//       >
-//         <div className="BG-white h-auto w-584 rounded-16 p-32">
-//           <h2 className="Text-black mb-24 text-24 font-bold">초대하기</h2>
-
-//           <h2 className="Text-black bt-24 text-24 font-bold">{title}</h2>
-//           <div className="flex items-center gap-24">
-//             <Dropdown
-//               width="w-6"
-//               align="right"
-//               trigger={
-//                 <Image
-//                   src="/images/drop-more.svg"
-//                   alt="드롭 옵션 보기"
-//                   width={28}
-//                   height={28}
-//                 />
-//               }
-//             >
-//               {/* 드롭다운 내부 메뉴 아이템 */}
-//               <div
-//                 className="Text-black cursor-pointer whitespace-nowrap rounded-6 px-22 py-11 text-center text-14 font-medium hover:bg-[#dbf0ff] hover:text-[#228DFF] dark:hover:bg-[#02406d]"
-//                 onClick={() => setOpenModifyCard(true)}
-//               >
-//                 수정하기
-//               </div>
-//               <div className="Text-black cursor-pointer whitespace-nowrap rounded-6 px-22 py-11 text-center text-14 font-medium hover:bg-[#dbf0ff] hover:text-[#228DFF] dark:hover:bg-[#02406d]">
-//                 삭제하기
-//               </div>
-//             </Dropdown>
-//             <Image
-//               src={'/images/close.svg'}
-//               alt="카드 닫기"
-//               width={32}
-//               height={32}
-//               onClick={() => {
-//                 onClose()
-//                 console.log('sdfadfdsgreggsfds')
-//               }}
-//             />
-//           </div>
-
-//           <div>
-//             그리드로 관리하기 / 컬럼명은 따로 컴포넌트로 만들어 빼기
-//             <div>{column.title}</div>
-//             <Tags tags={tags} />
-//             <p>설명~~~~~~~~</p>
-//             <div>
-//               <div>{assignee.nickname}</div>
-//               <div>{dueDate}</div>
-//             </div>
-//           </div>
-//           <div> 이미지 있으면 이미지</div>
-//           <div>댓글 컴포넌트</div>
-
-//           {/* 카드 수정 모달 */}
-//           {openModifyCard && (
-//             <CreateCardModal>
-//               <ModifyCardForm
-//                 onClose={() => setOpenModifyCard(false)}
-//                 // columnId={column.id}
-//                 currentColumn={currentColumn}
-//                 card={card}
-//               />
-//             </CreateCardModal>
-//           )}
-//         </div>
-//       </div>
-//     </>
-//   )
-// }
diff --git a/src/app/features/dashboard_Id/Column/Column.tsx b/src/app/features/dashboard_Id/Column/Column.tsx
index 6f4076c..f099f7c 100644
--- a/src/app/features/dashboard_Id/Column/Column.tsx
+++ b/src/app/features/dashboard_Id/Column/Column.tsx
@@ -65,7 +65,7 @@ export default function Column({ column }: { column: ColumnType }) {
       }}
       data-column-id={id}
       className={cn(
-        'BG-gray Border-column flex w-354 shrink-0 flex-col gap-16 p-20 tablet:w-584',
+        'BG-gray Border-column flex w-354 shrink-0 flex-col gap-16 p-20 mobile:w-308 tablet:w-584',
         {
           'BG-drag-hovered': isDraggingover,
         },
diff --git a/src/app/shared/components/ThemeToggle.tsx b/src/app/shared/components/ThemeToggle.tsx
index d5d7ab5..53a68ab 100644
--- a/src/app/shared/components/ThemeToggle.tsx
+++ b/src/app/shared/components/ThemeToggle.tsx
@@ -15,7 +15,7 @@ export default function ThemeToggle() {
   return (
     <>
       <button
-        className="BG-ThemeToggle relative flex h-30 w-60 rounded-25 bg-[url('/images/darkmode.svg')] bg-center bg-no-repeat"
+        className="BG-ThemeToggle relative flex h-30 w-60 shrink-0 rounded-25 bg-[url('/images/darkmode.svg')] bg-center bg-no-repeat"
         onClick={() => setTheme(isDark ? 'light' : 'dark')}
       >
         <div