diff --git a/docker/dev/docker-compose.backend.mac.yml b/docker/dev/docker-compose.backend.mac.yml
index 48e1fa09..63d2e3ed 100644
--- a/docker/dev/docker-compose.backend.mac.yml
+++ b/docker/dev/docker-compose.backend.mac.yml
@@ -1,3 +1,5 @@
+name: vexplor_rps
+
 services:
   # Node.js 백엔드
   backend:
diff --git a/docker/dev/docker-compose.frontend.mac.yml b/docker/dev/docker-compose.frontend.mac.yml
index 4103d2ca..cf7dd3bc 100644
--- a/docker/dev/docker-compose.frontend.mac.yml
+++ b/docker/dev/docker-compose.frontend.mac.yml
@@ -1,3 +1,5 @@
+name: vexplor_rps
+
 services:
   # Next.js 프론트엔드만
   frontend:
diff --git a/frontend/app/(main)/admin/menu/page.tsx b/frontend/app/(main)/admin/menu/page.tsx
index a07da807..db89394f 100644
--- a/frontend/app/(main)/admin/menu/page.tsx
+++ b/frontend/app/(main)/admin/menu/page.tsx
@@ -873,17 +873,18 @@ export default function MenuPage() {
   }
 
   return (
-    <div className="flex min-h-screen flex-col bg-background">
-      <div className="space-y-6 p-6">
-        {/* 페이지 헤더 */}
-        <div className="space-y-2 border-b pb-4">
-          <h1 className="text-3xl font-bold tracking-tight">메뉴 관리</h1>
-          <p className="text-sm text-muted-foreground">시스템 메뉴를 관리하고 화면을 할당합니다</p>
+    <div className="flex h-full min-h-0 flex-col overflow-hidden bg-background">
+      <div className="flex h-full min-h-0 flex-col gap-4 p-4">
+        {/* 페이지 헤더 — 고정 */}
+        <div className="flex-shrink-0 space-y-1 border-b pb-3">
+          <h1 className="text-xl font-bold tracking-tight">메뉴 관리</h1>
+          <p className="text-xs text-muted-foreground">시스템 메뉴를 관리하고 화면을 할당합니다</p>
         </div>
 
-        {/* 메인 컨텐츠 */}
+        {/* 메인 컨텐츠 — 남는 공간 차지 */}
+        <div className="flex flex-1 min-h-0 flex-col">
         <LoadingOverlay isLoading={deleting} text={getUITextSync("button.delete.processing")}>
-          <div className="flex h-full gap-6">
+          <div className="flex h-full min-h-0 gap-4">
             {/* 좌측 사이드바 - 메뉴 타입 선택 (20%) */}
             <div className="w-[20%] border-r pr-6">
               <div className="space-y-4">
@@ -933,8 +934,8 @@ export default function MenuPage() {
             </div>
 
             {/* 우측 메인 영역 - 메뉴 목록 (80%) */}
-            <div className="w-[80%] pl-0">
-              <div className="flex h-full flex-col space-y-4">
+            <div className="flex w-[80%] min-h-0 flex-col pl-0">
+              <div className="flex h-full min-h-0 flex-col space-y-4">
                 {/* 상단 헤더: 제목 + 검색 + 버튼 */}
                 <div className="relative flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
                   {/* 왼쪽: 제목 */}
@@ -1104,6 +1105,7 @@ export default function MenuPage() {
             </div>
           </div>
         </LoadingOverlay>
+        </div>
 
         <MenuFormModal
           isOpen={formModalOpen}
diff --git a/frontend/app/(main)/admin/systemMng/tableMngList/page.tsx b/frontend/app/(main)/admin/systemMng/tableMngList/page.tsx
index 8803504a..5e15c239 100644
--- a/frontend/app/(main)/admin/systemMng/tableMngList/page.tsx
+++ b/frontend/app/(main)/admin/systemMng/tableMngList/page.tsx
@@ -1276,12 +1276,12 @@ export default function TableManagementPage() {
   };
 
   return (
-    <div className="bg-background flex h-screen flex-col overflow-hidden">
-      {/* 컴팩트 탑바 (52px) */}
-      <div className="flex h-[52px] flex-shrink-0 items-center justify-between border-b px-5">
-        <div className="flex items-center gap-3">
-          <Database className="h-4.5 w-4.5 text-muted-foreground" />
-          <h1 className="text-[15px] font-bold tracking-tight">
+    <div className="bg-background flex h-full min-h-0 flex-col overflow-hidden">
+      {/* 컴팩트 탑바 (40px) */}
+      <div className="flex h-10 flex-shrink-0 items-center justify-between border-b px-3">
+        <div className="flex items-center gap-2">
+          <Database className="h-4 w-4 text-muted-foreground" />
+          <h1 className="text-[13px] font-bold tracking-tight">
             {getTextFromUI(TABLE_MANAGEMENT_KEYS.PAGE_TITLE, "테이블 타입 관리")}
           </h1>
           <Badge variant="secondary" className="text-[10px] font-bold">
@@ -1298,7 +1298,7 @@ export default function TableManagementPage() {
                   setCreateTableModalOpen(true);
                 }}
                 size="sm"
-                className="h-8 gap-1.5 text-xs"
+                className="h-7 gap-1 px-2 text-[11px]"
               >
                 <Plus className="h-3.5 w-3.5" />
                 새 테이블
@@ -1317,7 +1317,7 @@ export default function TableManagementPage() {
                 variant="outline"
                 size="sm"
                 disabled={selectedTableIds.size !== 1}
-                className="h-8 gap-1.5 text-xs"
+                className="h-7 gap-1 px-2 text-[11px]"
               >
                 <Copy className="h-3.5 w-3.5" />
                 복제
@@ -1327,7 +1327,7 @@ export default function TableManagementPage() {
                   onClick={() => setAddColumnModalOpen(true)}
                   variant="outline"
                   size="sm"
-                  className="h-8 gap-1.5 text-xs"
+                  className="h-7 gap-1 px-2 text-[11px]"
                 >
                   <Plus className="h-3.5 w-3.5" />
                   컬럼 추가
@@ -1337,7 +1337,7 @@ export default function TableManagementPage() {
                 onClick={() => setDdlLogViewerOpen(true)}
                 variant="ghost"
                 size="sm"
-                className="h-8 gap-1.5 text-xs"
+                className="h-7 gap-1 px-2 text-[11px]"
               >
                 <Activity className="h-3.5 w-3.5" />
                 DDL
@@ -1358,21 +1358,21 @@ export default function TableManagementPage() {
 
       {/* 3패널 메인 */}
       <div className="flex flex-1 overflow-hidden">
-        {/* 좌측: 테이블 목록 (240px) */}
-        <div className="bg-card flex w-[280px] min-w-[280px] flex-shrink-0 flex-col border-r">
+        {/* 좌측: 테이블 목록 (컴팩트 240px) */}
+        <div className="bg-card flex w-[240px] min-w-[240px] flex-shrink-0 flex-col border-r">
           {/* 검색 */}
-          <div className="flex-shrink-0 p-3 pb-0">
+          <div className="flex-shrink-0 p-2 pb-0">
             <div className="relative">
-              <Search className="text-muted-foreground absolute top-1/2 left-2.5 h-3.5 w-3.5 -translate-y-1/2" />
+              <Search className="text-muted-foreground absolute top-1/2 left-2 h-3 w-3 -translate-y-1/2" />
               <Input
                 placeholder={getTextFromUI(TABLE_MANAGEMENT_KEYS.SEARCH_PLACEHOLDER, "테이블 검색...")}
                 value={searchTerm}
                 onChange={(e) => setSearchTerm(e.target.value)}
-                className="bg-background h-[34px] pl-8 text-xs"
+                className="bg-background h-7 pl-7 text-[11px]"
               />
             </div>
             {isSuperAdmin && (
-              <div className="mt-2 flex items-center justify-between border-b pb-2">
+              <div className="mt-1.5 flex items-center justify-between border-b pb-1.5">
                 <div className="flex items-center gap-1.5">
                   <Checkbox
                     checked={
@@ -1381,7 +1381,7 @@ export default function TableManagementPage() {
                     }
                     onCheckedChange={handleSelectAll}
                     aria-label="전체 선택"
-                    className="h-3.5 w-3.5"
+                    className="h-3 w-3"
                   />
                   <span className="text-muted-foreground text-[10px]">
                     {selectedTableIds.size > 0 ? `${selectedTableIds.size}개` : "전체"}
@@ -1392,9 +1392,9 @@ export default function TableManagementPage() {
                     variant="destructive"
                     size="sm"
                     onClick={handleBulkDeleteClick}
-                    className="h-6 gap-1 px-2 text-[10px]"
+                    className="h-5 gap-1 px-1.5 text-[10px]"
                   >
-                    <Trash2 className="h-3 w-3" />
+                    <Trash2 className="h-2.5 w-2.5" />
                     삭제
                   </Button>
                 )}
@@ -1423,13 +1423,13 @@ export default function TableManagementPage() {
                 return (
                   <div key={table.tableName}>
                     {showDivider && (
-                      <div className="text-muted-foreground/60 mt-2 mb-1 px-2 text-[9px] font-bold uppercase tracking-widest">
+                      <div className="text-muted-foreground/60 mt-1.5 mb-0.5 px-1.5 text-[9px] font-bold uppercase tracking-widest">
                         {isKo ? "한글" : "ENGLISH"}
                       </div>
                     )}
                     <div
                       className={cn(
-                        "group relative flex items-center gap-2 rounded-md px-2.5 py-[7px] transition-colors",
+                        "group relative flex items-center gap-1.5 rounded-md px-2 py-1 transition-colors",
                         isActive
                           ? "bg-accent text-foreground"
                           : "text-foreground/80 hover:bg-accent/50",
@@ -1445,32 +1445,32 @@ export default function TableManagementPage() {
                       }}
                     >
                       {isActive && (
-                        <div className="bg-primary absolute top-1.5 bottom-1.5 left-0 w-[3px] rounded-r" />
+                        <div className="bg-primary absolute top-1 bottom-1 left-0 w-[2px] rounded-r" />
                       )}
                       {isSuperAdmin && (
                         <Checkbox
                           checked={selectedTableIds.has(table.tableName)}
                           onCheckedChange={(checked) => handleTableCheck(table.tableName, checked as boolean)}
                           aria-label={`${table.displayName || table.tableName} 선택`}
-                          className="h-3.5 w-3.5 flex-shrink-0"
+                          className="h-3 w-3 flex-shrink-0"
                           onClick={(e) => e.stopPropagation()}
                         />
                       )}
                       <div className="min-w-0 flex-1">
                         <div className="flex items-baseline gap-1">
                           <span className={cn(
-                            "truncate text-[16px] leading-tight",
+                            "truncate text-[12px] leading-tight",
                             isActive ? "font-bold" : "font-medium",
                           )}>
                             {table.displayName || table.tableName}
                           </span>
                         </div>
-                        <div className="text-muted-foreground truncate font-mono text-[12px] leading-tight tracking-tight">
+                        <div className="text-muted-foreground truncate font-mono text-[10px] leading-tight tracking-tight">
                           {table.tableName}
                         </div>
                       </div>
                       <span className={cn(
-                        "flex-shrink-0 rounded-full px-1.5 py-0.5 font-mono text-[10px] font-bold leading-none",
+                        "flex-shrink-0 rounded-full px-1 py-0.5 font-mono text-[9px] font-bold leading-none",
                         isActive
                           ? "bg-primary/15 text-primary"
                           : "text-muted-foreground",
@@ -1485,7 +1485,7 @@ export default function TableManagementPage() {
           </div>
 
           {/* 하단 정보 */}
-          <div className="text-muted-foreground flex-shrink-0 border-t px-3 py-2 text-[10px] font-medium">
+          <div className="text-muted-foreground flex-shrink-0 border-t px-2 py-1 text-[9px] font-medium">
             {filteredTables.length} / {tables.length} 테이블
           </div>
         </div>
@@ -1501,42 +1501,42 @@ export default function TableManagementPage() {
             </div>
           ) : (
             <>
-              {/* 중앙 헤더: 테이블명 + 라벨 입력 + 저장 */}
-              <div className="bg-card flex flex-shrink-0 items-center gap-3 border-b px-5 py-3">
-                <div className="min-w-0 flex-shrink-0">
-                  <div className="text-[15px] font-bold tracking-tight">
+              {/* 중앙 헤더: 테이블명 + 표시명/설명 + 저장 — 한 줄 컴팩트 */}
+              <div className="bg-card flex flex-shrink-0 items-center gap-2 border-b px-3 py-1.5">
+                <div className="min-w-0 flex-shrink-0 border-r pr-2">
+                  <div className="text-[12px] font-bold tracking-tight leading-tight">
                     {tableLabel || selectedTable}
                   </div>
-                  <div className="text-muted-foreground font-mono text-[11px] tracking-tight">
+                  <div className="text-muted-foreground font-mono text-[10px] tracking-tight leading-tight">
                     {selectedTable}
                   </div>
                 </div>
-                <div className="flex min-w-0 flex-1 items-center gap-2">
+                <div className="grid min-w-0 flex-1 grid-cols-[160px_1fr] items-center gap-2">
                   <Input
                     value={tableLabel}
                     onChange={(e) => setTableLabel(e.target.value)}
                     placeholder="표시명"
-                    className="h-8 max-w-[160px] text-xs"
+                    className="h-7 text-[11px]"
                   />
                   <Input
                     value={tableDescription}
                     onChange={(e) => setTableDescription(e.target.value)}
                     placeholder="설명"
-                    className="h-8 max-w-[200px] text-xs"
+                    className="h-7 text-[11px]"
                   />
                 </div>
                 <Button
                   onClick={saveAllSettings}
                   disabled={!selectedTable || columns.length === 0 || isSaving}
                   size="sm"
-                  className="h-8 gap-1.5 text-xs"
+                  className="h-7 gap-1 px-2.5 text-[11px]"
                 >
                   {isSaving ? (
-                    <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                    <Loader2 className="h-3 w-3 animate-spin" />
                   ) : (
-                    <Save className="h-3.5 w-3.5" />
+                    <Save className="h-3 w-3" />
                   )}
-                  {isSaving ? "저장 중..." : "전체 설정 저장"}
+                  {isSaving ? "저장 중..." : "저장"}
                 </Button>
               </div>
 
diff --git a/frontend/components/admin/MenuTable.tsx b/frontend/components/admin/MenuTable.tsx
index 644c84f3..11077e69 100644
--- a/frontend/components/admin/MenuTable.tsx
+++ b/frontend/components/admin/MenuTable.tsx
@@ -148,10 +148,10 @@ export const MenuTable: React.FC<MenuTableProps> = ({
   };
 
   return (
-    <div className="space-y-4">
-      {title && <h3 className="text-lg font-semibold">{title}</h3>}
-      <div className="bg-card">
-        <div className="max-h-[calc(100vh-350px)] overflow-auto">
+    <div className="flex h-full min-h-0 flex-col gap-2">
+      {title && <h3 className="flex-shrink-0 text-lg font-semibold">{title}</h3>}
+      <div className="flex flex-1 min-h-0 flex-col rounded-md border bg-card">
+        <div className="flex-1 min-h-0 overflow-auto">
           <Table noWrapper>
             <TableHeader className="sticky top-0 z-20 bg-background">
               <TableRow>
diff --git a/frontend/components/admin/table-type/ColumnGrid.tsx b/frontend/components/admin/table-type/ColumnGrid.tsx
index 825dbd36..3f04263c 100644
--- a/frontend/components/admin/table-type/ColumnGrid.tsx
+++ b/frontend/components/admin/table-type/ColumnGrid.tsx
@@ -80,21 +80,24 @@ export function ColumnGrid({
   const totalFiltered =
     filteredAndGrouped.basic.length + filteredAndGrouped.reference.length + filteredAndGrouped.meta.length;
 
+  const GRID_TEMPLATE = "3px minmax(180px,1fr) minmax(160px,1.4fr) 90px 124px 28px";
+
   return (
-    <div className="flex flex-1 flex-col overflow-hidden">
+    <div className="flex flex-1 min-h-0 flex-col overflow-hidden">
+      {/* 컬럼 헤더 — 컴팩트 */}
       <div
-        className="grid flex-shrink-0 items-center border-b bg-muted/50 px-4 py-2 text-xs font-semibold text-foreground"
-        style={{ gridTemplateColumns: "4px 140px 1fr 100px 160px 40px" }}
+        className="grid flex-shrink-0 items-center gap-2 border-b bg-muted/50 px-3 py-1 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground"
+        style={{ gridTemplateColumns: GRID_TEMPLATE }}
       >
         <span />
         <span>라벨 · 컬럼명</span>
-        <span>참조/설정</span>
+        <span>참조 / 기본값</span>
         <span>타입</span>
-        <span className="text-center">PK / NN / IDX / UQ</span>
+        <span className="text-center">PK · NN · IDX · UQ</span>
         <span />
       </div>
 
-      <div className="flex-1 overflow-y-auto">
+      <div className="flex-1 min-h-0 overflow-y-auto">
         {totalFiltered === 0 ? (
           <div className="flex items-center justify-center py-12 text-sm text-muted-foreground">
             {typeFilter ? "해당 타입의 컬럼이 없습니다." : "컬럼이 없습니다."}
@@ -105,16 +108,18 @@ export function ColumnGrid({
             if (list.length === 0) return null;
             const { icon: Icon, label } = GROUP_LABELS[groupKey];
             return (
-              <div key={groupKey} className="space-y-1 py-2">
-                <div className="flex items-center gap-2 border-b border-border/60 px-4 pb-1.5">
-                  <Icon className="h-4 w-4 text-muted-foreground" />
-                  <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+              <div key={groupKey} className="py-1">
+                {/* 그룹 헤더 — 한 줄 컴팩트 */}
+                <div className="sticky top-0 z-10 flex items-center gap-1.5 border-b border-border/50 bg-background/95 px-3 py-1 backdrop-blur">
+                  <Icon className="h-3 w-3 text-muted-foreground" />
+                  <span className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
                     {label}
                   </span>
-                  <Badge variant="secondary" className="text-xs">
+                  <Badge variant="secondary" className="h-4 px-1 text-[10px]">
                     {list.length}
                   </Badge>
                 </div>
+                <div className="divide-y divide-border/40">
                 {list.map((column) => {
                   const typeConf = INPUT_TYPE_COLORS[column.inputType || "text"] || INPUT_TYPE_COLORS.text;
                   const idxState = getIdxState(column.columnName);
@@ -133,31 +138,40 @@ export function ColumnGrid({
                         }
                       }}
                       className={cn(
-                        "grid min-h-12 cursor-pointer items-center gap-2 rounded-md border px-4 py-2 transition-colors",
-                        "grid-cols-[4px_140px_1fr_100px_160px_40px]",
-                        "bg-card border-transparent hover:border-border hover:shadow-sm",
-                        isSelected && "border-primary/30 bg-primary/5 shadow-sm",
+                        "group grid h-9 cursor-pointer items-center gap-2 px-3 transition-colors",
+                        "hover:bg-muted/40",
+                        isSelected && "bg-primary/5 ring-1 ring-inset ring-primary/30",
                       )}
+                      style={{ gridTemplateColumns: GRID_TEMPLATE }}
                     >
-                      {/* 4px 색상바 (타입별 진한 색) */}
-                      <div className={cn("h-full min-h-8 w-1 rounded-full", typeConf.barColor)} />
+                      {/* 3px 색상바 (타입별 진한 색) */}
+                      <div className={cn("h-5 w-[3px] rounded-full", typeConf.barColor)} />
 
-                      {/* 라벨 + 컬럼명 (한글라벨 (영어명) 동시 표시) */}
-                      <div className="min-w-0">
-                        <div className="truncate text-sm font-medium">
-                          {column.displayName && column.displayName !== column.columnName
-                            ? `${column.displayName} (${column.columnName})`
-                            : column.columnName}
-                        </div>
+                      {/* 라벨 + 컬럼명 — 한글 라벨이 우선, 영문명은 옆에 모노폰트 */}
+                      <div className="flex min-w-0 items-baseline gap-1.5">
+                        {column.displayName && column.displayName !== column.columnName ? (
+                          <>
+                            <span className="truncate text-[12px] font-medium leading-tight">
+                              {column.displayName}
+                            </span>
+                            <span className="truncate font-mono text-[10px] text-muted-foreground leading-tight">
+                              {column.columnName}
+                            </span>
+                          </>
+                        ) : (
+                          <span className="truncate font-mono text-[12px] font-medium leading-tight">
+                            {column.columnName}
+                          </span>
+                        )}
                       </div>
 
-                      {/* 참조/설정 칩 */}
-                      <div className="flex min-w-0 flex-wrap gap-1">
-                        {column.inputType === "entity" && column.referenceTable && column.referenceTable !== "none" && (
+                      {/* 참조/설정 칩 — 한 줄 nowrap, 넘치면 잘림 */}
+                      <div className="flex min-w-0 items-center gap-1 overflow-hidden text-[11px]">
+                        {column.inputType === "entity" && column.referenceTable && column.referenceTable !== "none" ? (
                           <>
                             <Badge
                               variant="outline"
-                              className="text-xs font-normal"
+                              className="h-4 truncate px-1 text-[10px] font-normal"
                               title={
                                 tables
                                   ? (() => {
@@ -171,10 +185,10 @@ export function ColumnGrid({
                             >
                               {column.referenceTable}
                             </Badge>
-                            <span className="text-muted-foreground text-xs">→</span>
+                            <span className="text-muted-foreground text-[10px]">→</span>
                             <Badge
                               variant="outline"
-                              className="text-xs font-normal"
+                              className="h-4 truncate px-1 text-[10px] font-normal"
                               title={
                                 referenceTableColumns?.[column.referenceTable]
                                   ? (() => {
@@ -190,42 +204,36 @@ export function ColumnGrid({
                               {column.referenceColumn || "—"}
                             </Badge>
                           </>
-                        )}
-                        {column.inputType === "code" && (
-                          <span className="text-muted-foreground truncate text-xs">
-                            {column.codeCategory ?? "—"} · {column.defaultValue ?? ""}
+                        ) : column.inputType === "code" ? (
+                          <span className="truncate text-muted-foreground">
+                            {column.codeCategory ?? "—"}{column.defaultValue ? ` · ${column.defaultValue}` : ""}
                           </span>
-                        )}
-                        {column.inputType === "numbering" && column.numberingRuleId && (
-                          <Badge variant="outline" className="text-xs font-normal">
+                        ) : column.inputType === "numbering" && column.numberingRuleId ? (
+                          <Badge variant="outline" className="h-4 truncate px-1 text-[10px] font-normal">
                             {column.numberingRuleId}
                           </Badge>
+                        ) : column.defaultValue ? (
+                          <span className="truncate text-muted-foreground">{column.defaultValue}</span>
+                        ) : (
+                          <span className="text-muted-foreground/40">—</span>
                         )}
-                        {column.inputType !== "entity" &&
-                          column.inputType !== "code" &&
-                          column.inputType !== "numbering" &&
-                          (column.defaultValue ? (
-                            <span className="text-muted-foreground truncate text-xs">{column.defaultValue}</span>
-                          ) : (
-                            <span className="text-muted-foreground/60 text-xs">—</span>
-                          ))}
                       </div>
 
-                      {/* 타입 뱃지 */}
-                      <div className={cn("rounded-md border px-2 py-0.5 text-xs", typeConf.bgColor, typeConf.color)}>
-                        <span className="mr-1 inline-block h-1.5 w-1.5 rounded-full bg-current opacity-70" />
+                      {/* 타입 뱃지 — 컴팩트 */}
+                      <div className={cn("inline-flex h-5 items-center gap-1 self-center justify-self-start rounded border px-1.5 text-[10px]", typeConf.bgColor, typeConf.color)}>
+                        <span className="inline-block h-1 w-1 rounded-full bg-current opacity-70" />
                         {typeConf.label}
                       </div>
 
-                      {/* PK / NN / IDX / UQ (클릭 토글) */}
-                      <div className="flex flex-wrap items-center justify-center gap-1">
+                      {/* PK / NN / IDX / UQ (클릭 토글) — 한 줄 nowrap */}
+                      <div className="flex flex-nowrap items-center justify-center gap-0.5">
                         <button
                           type="button"
                           className={cn(
-                            "rounded border px-1.5 py-0.5 text-[10px] font-bold transition-colors",
+                            "h-5 w-7 rounded border text-[9px] font-bold transition-colors",
                             idxState.isPk
                               ? "border-blue-200 bg-blue-50 text-blue-600"
-                              : "border-border text-muted-foreground/40 hover:border-blue-200 hover:text-blue-400",
+                              : "border-border/50 text-muted-foreground/40 hover:border-blue-200 hover:text-blue-400",
                           )}
                           onClick={(e) => {
                             e.stopPropagation();
@@ -238,10 +246,10 @@ export function ColumnGrid({
                         <button
                           type="button"
                           className={cn(
-                            "rounded border px-1.5 py-0.5 text-[10px] font-bold transition-colors",
+                            "h-5 w-7 rounded border text-[9px] font-bold transition-colors",
                             column.isNullable === "NO"
                               ? "border-amber-200 bg-amber-50 text-amber-600"
-                              : "border-border text-muted-foreground/40 hover:border-amber-200 hover:text-amber-400",
+                              : "border-border/50 text-muted-foreground/40 hover:border-amber-200 hover:text-amber-400",
                           )}
                           onClick={(e) => {
                             e.stopPropagation();
@@ -254,10 +262,10 @@ export function ColumnGrid({
                         <button
                           type="button"
                           className={cn(
-                            "rounded border px-1.5 py-0.5 text-[10px] font-bold transition-colors",
+                            "h-5 w-7 rounded border text-[9px] font-bold transition-colors",
                             idxState.hasIndex
                               ? "border-emerald-200 bg-emerald-50 text-emerald-600"
-                              : "border-border text-muted-foreground/40 hover:border-emerald-200 hover:text-emerald-400",
+                              : "border-border/50 text-muted-foreground/40 hover:border-emerald-200 hover:text-emerald-400",
                           )}
                           onClick={(e) => {
                             e.stopPropagation();
@@ -270,10 +278,10 @@ export function ColumnGrid({
                         <button
                           type="button"
                           className={cn(
-                            "rounded border px-1.5 py-0.5 text-[10px] font-bold transition-colors",
+                            "h-5 w-7 rounded border text-[9px] font-bold transition-colors",
                             column.isUnique === "YES"
                               ? "border-violet-200 bg-violet-50 text-violet-600"
-                              : "border-border text-muted-foreground/40 hover:border-violet-200 hover:text-violet-400",
+                              : "border-border/50 text-muted-foreground/40 hover:border-violet-200 hover:text-violet-400",
                           )}
                           onClick={(e) => {
                             e.stopPropagation();
@@ -290,19 +298,20 @@ export function ColumnGrid({
                           type="button"
                           variant="ghost"
                           size="icon"
-                          className="h-8 w-8"
+                          className="h-6 w-6 opacity-0 transition-opacity group-hover:opacity-100"
                           onClick={(e) => {
                             e.stopPropagation();
                             onSelectColumn(column.columnName);
                           }}
                           aria-label="상세 설정"
                         >
-                          <MoreHorizontal className="h-4 w-4" />
+                          <MoreHorizontal className="h-3.5 w-3.5" />
                         </Button>
                       </div>
                     </div>
                   );
                 })}
+                </div>
               </div>
             );
           })