diff --git a/src/components/Modal/ColumnModifyModal.tsx b/src/components/Modal/ColumnModifyModal.tsx
deleted file mode 100644
index 51c33691..00000000
--- a/src/components/Modal/ColumnModifyModal.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { useState } from 'react';
-
-import ModalActionButton from '@/components/Button/ModalActionButton';
-import ModalCancelButton from '@/components/Button/ModalCancelButton';
-import useModal from '@/hooks/useModal';
-import { putColumn } from '@/services/putService';
-import { ColumnModifyModalProps } from '@/types/Modal.interface';
-
-export default function ColumnModifyModal({ modalProps }: { modalProps: ColumnModifyModalProps }) {
-  const id = modalProps?.columnId;
-  const [title, setTitle] = useState(modalProps?.columnTitle || '');
-  const { openModal, closeModal } = useModal();
-
-  const handleModifyButton = async () => {
-    try {
-      await putColumn(id, { title });
-      openModal({ type: 'textModal', modalProps: { text: '컬럼이 성공적으로 변경되었습니다.' } });
-    } catch {
-      openModal({ type: 'textModal', modalProps: { text: '컬럼이 변경되지 않았습니다.' } });
-    }
-  };
-
-  return (
-    <div className='flex h-[274px] w-[327px] flex-col justify-between rounded-[8px] bg-white px-[18px] py-[32px] md:h-[276px] md:w-[540px]'>
-      <h1 className='text-[20px] font-bold text-black-33 md:text-[24px]'>컬럼 관리</h1>
-      <div className='flex flex-col'>
-        <label className='mb-[10px] text-[16px] text-black-33 md:text-[18px]'>이름</label>
-        <input
-          className={`h-[42px] rounded-[6px] border border-gray-d9 px-[15px] text-[14px] md:h-[48px] md:text-[16px] ${!title?.length ? 'border-2 border-red' : ''}`}
-          type='text'
-          placeholder='변경될 컬럼 이름을 입력해주세요.'
-          value={title}
-          onChange={(e) => {
-            setTitle(e.target.value);
-          }}
-        />
-      </div>
-
-      <div className='flex flex-col justify-between md:flex-row'>
-        <div className='mb-[10px] flex md:mb-0 md:items-end'>
-          <button
-            className='text-[14px] text-gray-9f underline hover:font-bold'
-            onClick={() => {
-              openModal({ type: 'columnDeleteConfirm', modalProps: { columnId: id } });
-            }}
-          >
-            삭제하기
-          </button>
-        </div>
-        <div className='flex justify-between md:justify-end md:gap-[15px]'>
-          <ModalCancelButton onClick={closeModal}>취소</ModalCancelButton>
-          <ModalActionButton disabled={!(title?.length > 0)} onClick={handleModifyButton}>
-            변경
-          </ModalActionButton>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/components/Modal/ModifyColumnModal.tsx b/src/components/Modal/ModifyColumnModal.tsx
new file mode 100644
index 00000000..e7807638
--- /dev/null
+++ b/src/components/Modal/ModifyColumnModal.tsx
@@ -0,0 +1,105 @@
+import { useQueryClient } from '@tanstack/react-query';
+import { AxiosError } from 'axios';
+import { useRouter } from 'next/router';
+import { useState } from 'react';
+
+import ModalActionButton from '@/components/Button/ModalActionButton';
+import ModalCancelButton from '@/components/Button/ModalCancelButton';
+import useModal from '@/hooks/useModal';
+import { deleteColumn } from '@/services/deleteService';
+import { putColumn } from '@/services/putService';
+import { ModifyColumnModalProps } from '@/types/Modal.interface';
+
+export default function ModifyColumnModal({ columnId, columnTitle = '', columns }: ModifyColumnModalProps) {
+  const { openModal, closeModal } = useModal();
+  const queryClient = useQueryClient();
+
+  const router = useRouter();
+  const { id: dashboardId } = router.query;
+  const [title, setTitle] = useState(columnTitle);
+  const [errorMessage, setErrorMessage] = useState('');
+  const columnNames = columns.map((column) => column.title);
+
+  const handleValidCheck = () => {
+    if (!title) {
+      setErrorMessage('이름을 입력해주세요');
+    } else if (title.length > 10) {
+      setErrorMessage('10자 이내로 입력해주세요');
+    } else if (columnNames.includes(title)) {
+      setErrorMessage('중복된 컬럼 이름입니다');
+    } else {
+      setErrorMessage('');
+    }
+  };
+
+  const handleModifyClick = async () => {
+    try {
+      await putColumn(columnId, { title });
+      queryClient.invalidateQueries({ queryKey: ['columns', dashboardId] });
+      openModal({ type: 'notification', modalProps: { text: '컬럼이 성공적으로 변경되었습니다.' } });
+    } catch (error) {
+      if (error instanceof AxiosError) {
+        setErrorMessage(error.response?.data.message || '컬럼 변경을 실패하였습니다.');
+      } else {
+        setErrorMessage('컬럼 변경을 실패하였습니다.');
+        console.log(error);
+      }
+    }
+  };
+
+  const handleDeleteClick = async () => {
+    try {
+      await deleteColumn(columnId);
+      queryClient.invalidateQueries({ queryKey: ['columns', dashboardId] });
+      openModal({ type: 'notification', modalProps: { text: '컬럼이 삭제되었습니다.' } });
+    } catch (error) {
+      if (error instanceof AxiosError && error.response?.data.message) {
+        openModal({ type: 'notification', modalProps: { text: error.response.data.message } });
+      } else {
+        openModal({ type: 'notification', modalProps: { text: '컬럼이 삭제에 실패했습니다.' } });
+        console.log(error);
+      }
+    }
+  };
+
+  return (
+    <div className='modal w-[327px] md:w-[540px]'>
+      <h2 className='section-title'>컬럼 관리</h2>
+
+      <div className='my-6 md:mb-7 md:mt-8'>
+        <label className='label'>이름</label>
+        <input
+          type='text'
+          className={`input mt-[10px] ${errorMessage ? 'border-2 border-red' : ''}`}
+          placeholder='변경될 컬럼 이름을 입력해 주세요'
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+          onBlur={handleValidCheck}
+        />
+        {errorMessage && <p className='mt-2 text-sm text-red'>{errorMessage}</p>}
+      </div>
+
+      <div className='flex flex-col gap-4 md:flex-row md:items-end md:justify-between'>
+        <button
+          className='text-left text-sm text-gray-9f underline hover:font-bold active:text-gray-78'
+          onClick={() => {
+            openModal({
+              type: 'confirm',
+              modalProps: { text: '컬럼의 모든 카드가 삭제됩니다.', onActionClick: handleDeleteClick },
+            });
+          }}
+        >
+          삭제하기
+        </button>
+        <div className='flex justify-between md:justify-end md:gap-3'>
+          <ModalCancelButton type='button' onClick={closeModal}>
+            취소
+          </ModalCancelButton>
+          <ModalActionButton type='button' onClick={handleModifyClick} disabled={!!errorMessage}>
+            변경
+          </ModalActionButton>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Modal/NewColumnModal.tsx b/src/components/Modal/NewColumnModal.tsx
index 98dce7ed..8ddaaa05 100644
--- a/src/components/Modal/NewColumnModal.tsx
+++ b/src/components/Modal/NewColumnModal.tsx
@@ -23,6 +23,8 @@ export default function NewColumnModal({ columns }: NewColumnModalProps) {
   const handleValidCheck = () => {
     if (!name) {
       setErrorMessage('이름을 입력해주세요');
+    } else if (name.length > 10) {
+      setErrorMessage('10자 이내로 입력해주세요');
     } else if (columnNames.includes(name)) {
       setErrorMessage('중복된 컬럼 이름입니다');
     } else {
@@ -36,10 +38,10 @@ export default function NewColumnModal({ columns }: NewColumnModalProps) {
       queryClient.invalidateQueries({ queryKey: ['columns', id] });
       openModal({ type: 'notification', modalProps: { text: '새로운 컬럼이 생성되었습니다!' } });
     } catch (error) {
-      if (error instanceof AxiosError && error.response?.data.message) {
-        openModal({ type: 'notification', modalProps: { text: error.response.data.message } });
+      if (error instanceof AxiosError) {
+        setErrorMessage(error.response?.data.message || '컬럼 생성을 실패하였습니다.');
       } else {
-        openModal({ type: 'notification', modalProps: { text: '컬럼 생성을 실패하였습니다.' } });
+        setErrorMessage('컬럼 생성을 실패하였습니다.');
         console.log(error);
       }
     }
@@ -64,7 +66,7 @@ export default function NewColumnModal({ columns }: NewColumnModalProps) {
         <ModalCancelButton type='button' onClick={closeModal}>
           취소
         </ModalCancelButton>
-        <ModalActionButton type='button' onClick={handlePostNewColumn} disabled={!!errorMessage}>
+        <ModalActionButton type='button' onClick={handlePostNewColumn} disabled={!(name && !errorMessage)}>
           생성
         </ModalActionButton>
       </div>
diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx
index 89b8f309..1ce1f205 100644
--- a/src/components/Modal/index.tsx
+++ b/src/components/Modal/index.tsx
@@ -1,9 +1,9 @@
 import { useEffect } from 'react';
 import { useSelector } from 'react-redux';
 
-import ColumnModifyModal from './ColumnModifyModal';
 import ConfirmModal from './ConfirmModal';
 import InviteMemberModal from './InviteMemberModal';
+import ModifyColumnModal from './ModifyColumnModal';
 import NewColumnModal from './NewColumnModal';
 import NewDashboardModal from './NewDashboardModal';
 import NotificationModal from './NotificationModal';
@@ -11,7 +11,7 @@ import NotificationModal from './NotificationModal';
 import useModal from '@/hooks/useModal';
 import { modalSelector } from '@/store/reducers/modalSlice';
 import {
-  ColumnModifyModalProps,
+  ModifyColumnModalProps,
   ConfirmModalProps,
   InviteMemberModalProps,
   NewColumnModalProps,
@@ -59,8 +59,8 @@ export default function Modal() {
       case 'inviteMember':
         return modalProps ? <InviteMemberModal modalProps={modalProps as InviteMemberModalProps} /> : null;
 
-      case 'columnModify':
-        return modalProps ? <ColumnModifyModal modalProps={modalProps as ColumnModifyModalProps} /> : null;
+      case 'modifyColumn':
+        return modalProps ? <ModifyColumnModal {...(modalProps as ModifyColumnModalProps)} /> : null;
 
       default:
         return <NotificationModal text='' />;
diff --git a/src/containers/dashboard/Column.tsx b/src/containers/dashboard/Column.tsx
index 6379b236..90368290 100644
--- a/src/containers/dashboard/Column.tsx
+++ b/src/containers/dashboard/Column.tsx
@@ -1,5 +1,4 @@
 import Image from 'next/image';
-import React from 'react';
 
 import Card from './Card';
 
@@ -11,9 +10,10 @@ import { Column as ColumnType } from '@/types/Column.interface';
 
 interface ColumnProps {
   column: ColumnType;
+  columns: ColumnType[];
 }
 
-function Column({ column }: ColumnProps) {
+function Column({ column, columns }: ColumnProps) {
   const { openModal } = useModal();
   const {
     data: cardList,
@@ -43,9 +43,12 @@ function Column({ column }: ColumnProps) {
           </div>
           {/* Column Edit Button */}
           <button
-            className='duration-400 transition ease-in-out hover:rotate-90'
+            className='transition duration-300 ease-in-out hover:rotate-90'
             onClick={() => {
-              openModal({ type: 'columnModify', modalProps: { columnId: column.id, columnTitle: column.title } });
+              openModal({
+                type: 'modifyColumn',
+                modalProps: { columnId: column.id, columnTitle: column.title, columns },
+              });
             }}
           >
             <Image src='/icons/gear.svg' width={24} height={24} alt='톱니바퀴 아이콘' />
diff --git a/src/containers/dashboard/ColumnsSection.tsx b/src/containers/dashboard/ColumnsSection.tsx
index 4cfe6fd3..1526e9e3 100644
--- a/src/containers/dashboard/ColumnsSection.tsx
+++ b/src/containers/dashboard/ColumnsSection.tsx
@@ -31,7 +31,8 @@ export default function ColumnsSection({ id }: ColumnsSectionProps) {
     <section>
       <div className='block lg:flex lg:h-[calc(100dvh-70px)] lg:w-[calc(100dvw-270px)] lg:overflow-x-auto'>
         <ul className='block lg:flex'>
-          {columns?.data && columns.data.map((column) => <Column key={column.id} column={column} />)}
+          {columns?.data &&
+            columns.data.map((column) => <Column key={column.id} column={column} columns={columns.data} />)}
           {columns?.data.length === 0 && <p>컬럼이 없습니다.</p>}
         </ul>
         <div className='p-5'>
diff --git a/src/types/Modal.interface.ts b/src/types/Modal.interface.ts
index ea8300dd..717f4473 100644
--- a/src/types/Modal.interface.ts
+++ b/src/types/Modal.interface.ts
@@ -26,7 +26,8 @@ export interface NewColumnModalProps extends ModalProps {
   columns: Column[];
 }
 
-export interface ColumnModifyModalProps {
+export interface ModifyColumnModalProps extends ModalProps {
+  columns: Column[];
   columnTitle: string;
   columnId: number;
 }