diff --git a/frontend/components/screen/InteractiveDataTable.tsx b/frontend/components/screen/InteractiveDataTable.tsx
index 9ca617e3..f6b38cb4 100644
--- a/frontend/components/screen/InteractiveDataTable.tsx
+++ b/frontend/components/screen/InteractiveDataTable.tsx
@@ -1852,7 +1852,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
                     </TableRow>
                   ) : data.length > 0 ? (
                     data.map((row, rowIndex) => (
-                        <TableRow key={rowIndex} className="hover:bg-gradient-to-r hover:from-blue-50/50 hover:to-indigo-50/30 transition-all duration-200">
+                        <TableRow key={rowIndex} className="hover:bg-orange-100 transition-all duration-200">
                         {/* 체크박스 셀 (삭제 기능이 활성화된 경우) */}
                         {component.enableDelete && (
                           <TableCell className="w-12 px-4">
diff --git a/frontend/components/screen/InteractiveScreenViewer.tsx b/frontend/components/screen/InteractiveScreenViewer.tsx
index aeadcc1f..264a384a 100644
--- a/frontend/components/screen/InteractiveScreenViewer.tsx
+++ b/frontend/components/screen/InteractiveScreenViewer.tsx
@@ -1696,7 +1696,7 @@ export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = (
   // 라벨 표시 여부 계산
   const shouldShowLabel =
     !hideLabel && // hideLabel이 true면 라벨 숨김
-    component.style?.labelDisplay !== false &&
+    (component.style?.labelDisplay ?? true) &&
     (component.label || component.style?.labelText) &&
     !templateTypes.includes(component.type); // 템플릿 컴포넌트는 라벨 표시 안함
 
diff --git a/frontend/components/screen/panels/ComponentsPanel.tsx b/frontend/components/screen/panels/ComponentsPanel.tsx
index 747bf9eb..68f44705 100644
--- a/frontend/components/screen/panels/ComponentsPanel.tsx
+++ b/frontend/components/screen/panels/ComponentsPanel.tsx
@@ -185,6 +185,14 @@ export function ComponentsPanel({ className }: ComponentsPanelProps) {
             </TabsTrigger>
           </TabsList>
 
+          {/* 주황색 강조 영역 */}
+          <div className="mt-4 mb-4 p-4 bg-gradient-to-r from-orange-50 to-amber-50 border border-orange-200 rounded-lg">
+            <div className="flex items-center space-x-2">
+              <div className="w-2 h-2 bg-orange-500 rounded-full"></div>
+              <span className="text-sm font-medium text-orange-800">컴포넌트를 드래그하여 화면에 추가하세요</span>
+            </div>
+          </div>
+
           {/* 컴포넌트 목록 */}
           <div className="mt-6">
             <TabsContent value={selectedCategory} className="space-y-3">
@@ -205,7 +213,7 @@ export function ComponentsPanel({ className }: ComponentsPanelProps) {
                         e.currentTarget.style.opacity = '1';
                         e.currentTarget.style.transform = 'none';
                       }}
-                      className="group cursor-grab rounded-lg border border-gray-200/40 bg-white/90 backdrop-blur-sm p-5 shadow-sm transition-all duration-300 hover:bg-white hover:shadow-lg hover:shadow-purple-500/15 hover:scale-[1.02] hover:border-purple-300/60 hover:-translate-y-1 active:cursor-grabbing active:scale-[0.98] active:translate-y-0"
+                      className="group cursor-grab rounded-lg border border-gray-200/40 bg-white/90 backdrop-blur-sm p-6 shadow-sm transition-all duration-300 hover:bg-white hover:shadow-lg hover:shadow-purple-500/15 hover:scale-[1.02] hover:border-purple-300/60 hover:-translate-y-1 active:cursor-grabbing active:scale-[0.98] active:translate-y-0"
                       title={component.description}
                     >
                       <div className="flex items-start space-x-4">
diff --git a/frontend/components/screen/panels/PropertiesPanel.tsx b/frontend/components/screen/panels/PropertiesPanel.tsx
index 18d8944e..e36191a8 100644
--- a/frontend/components/screen/panels/PropertiesPanel.tsx
+++ b/frontend/components/screen/panels/PropertiesPanel.tsx
@@ -207,7 +207,7 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
     labelMarginBottom: selectedComponent?.style?.labelMarginBottom || "4px",
     required: (selectedComponent?.type === "widget" ? (selectedComponent as WidgetComponent).required : false) || false,
     readonly: (selectedComponent?.type === "widget" ? (selectedComponent as WidgetComponent).readonly : false) || false,
-    labelDisplay: selectedComponent?.style?.labelDisplay !== false,
+    labelDisplay: selectedComponent?.style?.labelDisplay ?? true,
     // widgetType도 로컬 상태로 관리
     widgetType:
       (selectedComponent?.type === "widget" ? (selectedComponent as WidgetComponent).widgetType : "text") || "text",
@@ -265,7 +265,7 @@ const PropertiesPanelComponent: React.FC<PropertiesPanelProps> = ({
           labelMarginBottom: selectedComponent?.style?.labelMarginBottom || "4px",
           required: widget?.required || false,
           readonly: widget?.readonly || false,
-          labelDisplay: selectedComponent.style?.labelDisplay !== false,
+          labelDisplay: selectedComponent.style?.labelDisplay ?? true,
           // widgetType 동기화
           widgetType: widget?.widgetType || "text",
         });
diff --git a/frontend/components/screen/panels/TemplatesPanel.tsx b/frontend/components/screen/panels/TemplatesPanel.tsx
index 464450d5..49c7b974 100644
--- a/frontend/components/screen/panels/TemplatesPanel.tsx
+++ b/frontend/components/screen/panels/TemplatesPanel.tsx
@@ -573,7 +573,7 @@ export const TemplatesPanel: React.FC<TemplatesPanelProps> = ({ onDragStart }) =
                 e.currentTarget.style.opacity = '1';
                 e.currentTarget.style.transform = 'none';
               }}
-              className="group cursor-grab rounded-lg border border-gray-200/40 bg-white/90 backdrop-blur-sm p-5 shadow-sm transition-all duration-300 hover:bg-white hover:shadow-lg hover:shadow-blue-500/15 hover:scale-[1.02] hover:border-blue-300/60 hover:-translate-y-1 active:cursor-grabbing active:scale-[0.98] active:translate-y-0"
+              className="group cursor-grab rounded-lg border border-gray-200/40 bg-white/90 backdrop-blur-sm p-6 shadow-sm transition-all duration-300 hover:bg-white hover:shadow-lg hover:shadow-blue-500/15 hover:scale-[1.02] hover:border-blue-300/60 hover:-translate-y-1 active:cursor-grabbing active:scale-[0.98] active:translate-y-0"
             >
               <div className="flex items-start space-x-4">
                 <div className="flex h-14 w-14 items-center justify-center rounded-xl bg-gradient-to-br from-blue-500 to-blue-600 text-white shadow-md group-hover:shadow-lg group-hover:scale-110 transition-all duration-300">
diff --git a/frontend/components/ui/select.tsx b/frontend/components/ui/select.tsx
index b4b2d24c..ee5d504d 100644
--- a/frontend/components/ui/select.tsx
+++ b/frontend/components/ui/select.tsx
@@ -31,7 +31,7 @@ function SelectTrigger({
       data-slot="select-trigger"
       data-size={size}
       className={cn(
-        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-48 items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}
diff --git a/frontend/lib/registry/components/card-display/CardDisplayComponent.tsx b/frontend/lib/registry/components/card-display/CardDisplayComponent.tsx
index 8d39aa1b..25a50213 100644
--- a/frontend/lib/registry/components/card-display/CardDisplayComponent.tsx
+++ b/frontend/lib/registry/components/card-display/CardDisplayComponent.tsx
@@ -261,7 +261,7 @@ export const CardDisplayComponent: React.FC<CardDisplayComponentProps> = ({
   // 카드 스타일 - 통일된 디자인 시스템 적용
   const cardStyle: React.CSSProperties = {
     backgroundColor: "white",
-    border: "1px solid #e2e8f0", // 더 부드러운 보더 색상
+    border: "2px solid #e5e7eb", // 더 명확한 테두리
     borderRadius: "12px", // 통일된 라운드 처리
     padding: "24px", // 더 여유로운 패딩
     boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)", // 더 깊은 그림자
@@ -276,6 +276,7 @@ export const CardDisplayComponent: React.FC<CardDisplayComponentProps> = ({
     "&:hover": {
       transform: "translateY(-2px)",
       boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
+      borderColor: "#f59e0b", // 호버 시 오렌지 테두리
     }
   };
 
diff --git a/frontend/lib/registry/components/checkbox-basic/CheckboxBasicComponent.tsx b/frontend/lib/registry/components/checkbox-basic/CheckboxBasicComponent.tsx
index 04802a64..24b6bc00 100644
--- a/frontend/lib/registry/components/checkbox-basic/CheckboxBasicComponent.tsx
+++ b/frontend/lib/registry/components/checkbox-basic/CheckboxBasicComponent.tsx
@@ -77,7 +77,7 @@ export const CheckboxBasicComponent: React.FC<CheckboxBasicComponentProps> = ({
   return (
     <div style={componentStyle} className={className} {...domProps}>
       {/* 라벨 렌더링 */}
-      {component.label && component.style?.labelDisplay !== false && (
+      {component.label && (component.style?.labelDisplay ?? true) && (
         <label
           style={{
             position: "absolute",
diff --git a/frontend/lib/registry/components/file-upload/FileUploadComponent.tsx b/frontend/lib/registry/components/file-upload/FileUploadComponent.tsx
index 86bb406d..39884272 100644
--- a/frontend/lib/registry/components/file-upload/FileUploadComponent.tsx
+++ b/frontend/lib/registry/components/file-upload/FileUploadComponent.tsx
@@ -920,8 +920,8 @@ const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
       )} */}
 
       <div
-        className="w-full h-full flex flex-col space-y-2" 
-        style={{ minHeight: '120px' }}
+        className="w-full h-full flex flex-col space-y-3 p-4 border border-gray-200 rounded-lg bg-gradient-to-br from-gray-50 to-white shadow-sm hover:shadow-md transition-all duration-200" 
+        style={{ minHeight: '140px' }}
       >
         {/* 파일 업로드 영역 - 주석처리 */}
         {/* {!isDesignMode && (
@@ -985,7 +985,8 @@ const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
           <div className="flex-1 overflow-y-auto">
             <div className="space-y-2">
               <div className="flex items-center justify-between">
-                <h4 className="text-sm font-medium text-gray-700" style={{ textShadow: 'none', boxShadow: 'none' }}>
+                <h4 className="text-base font-semibold text-gray-800 flex items-center gap-2">
+                  <File className="w-5 h-5 text-blue-500" />
                   업로드된 파일 ({uploadedFiles.length})
                 </h4>
                 <div className="flex items-center space-x-2">
diff --git a/frontend/lib/registry/components/image-display/ImageDisplayComponent.tsx b/frontend/lib/registry/components/image-display/ImageDisplayComponent.tsx
index 5ba7e37c..b4cb444b 100644
--- a/frontend/lib/registry/components/image-display/ImageDisplayComponent.tsx
+++ b/frontend/lib/registry/components/image-display/ImageDisplayComponent.tsx
@@ -74,7 +74,7 @@ export const ImageDisplayComponent: React.FC<ImageDisplayComponentProps> = ({
   return (
     <div style={componentStyle} className={className} {...domProps}>
       {/* 라벨 렌더링 */}
-      {component.label && component.style?.labelDisplay !== false && (
+      {component.label && (component.style?.labelDisplay ?? true) && (
         <label
           style={{
             position: "absolute",
diff --git a/frontend/lib/registry/components/select-basic/SelectBasicComponent.tsx b/frontend/lib/registry/components/select-basic/SelectBasicComponent.tsx
index 23001fd2..851a212c 100644
--- a/frontend/lib/registry/components/select-basic/SelectBasicComponent.tsx
+++ b/frontend/lib/registry/components/select-basic/SelectBasicComponent.tsx
@@ -309,7 +309,7 @@ const SelectBasicComponent: React.FC<SelectBasicComponentProps> = ({
       {...safeDomProps}
     >
       {/* 라벨 렌더링 */}
-      {component.label && component.style?.labelDisplay !== false && (
+      {component.label && (component.style?.labelDisplay ?? true) && (
         <label
           style={{
             position: "absolute",
diff --git a/frontend/lib/registry/components/table-list/SingleTableWithSticky.tsx b/frontend/lib/registry/components/table-list/SingleTableWithSticky.tsx
index 1b88672e..23c8964d 100644
--- a/frontend/lib/registry/components/table-list/SingleTableWithSticky.tsx
+++ b/frontend/lib/registry/components/table-list/SingleTableWithSticky.tsx
@@ -87,7 +87,7 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
                       ? "h-12 border-0 px-4 py-3 text-center align-middle"
                       : "h-12 cursor-pointer border-0 px-4 py-3 text-left align-middle font-semibold whitespace-nowrap text-slate-700 select-none transition-all duration-200",
                     `text-${column.align}`,
-                    column.sortable && "hover:bg-blue-50/50 hover:text-blue-700",
+                    column.sortable && "hover:bg-orange-50 hover:text-orange-700",
                     // 고정 컬럼 스타일
                     column.fixed === "left" && "sticky z-10 border-r border-gray-200/60 bg-gradient-to-r from-slate-50 to-blue-50/30 shadow-sm",
                     column.fixed === "right" && "sticky z-10 border-l border-gray-200/60 bg-gradient-to-r from-slate-50 to-blue-50/30 shadow-sm",
@@ -117,16 +117,12 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
                         <span className="flex-1 truncate">
                           {columnLabels[column.columnName] || column.displayName || column.columnName}
                         </span>
-                        {column.sortable && (
+                        {column.sortable && sortColumn === column.columnName && (
                           <span className="ml-2 flex h-5 w-5 items-center justify-center rounded-md bg-white/50 shadow-sm">
-                            {sortColumn === column.columnName ? (
-                              sortDirection === "asc" ? (
-                                <ArrowUp className="h-3.5 w-3.5 text-blue-600" />
-                              ) : (
-                                <ArrowDown className="h-3.5 w-3.5 text-blue-600" />
-                              )
+                            {sortDirection === "asc" ? (
+                              <ArrowUp className="h-3.5 w-3.5 text-blue-600" />
                             ) : (
-                              <ArrowUpDown className="h-3.5 w-3.5 text-gray-400" />
+                              <ArrowDown className="h-3.5 w-3.5 text-blue-600" />
                             )}
                           </span>
                         )}
diff --git a/frontend/lib/registry/components/table-list/TableListComponent.tsx b/frontend/lib/registry/components/table-list/TableListComponent.tsx
index 6d0067c1..2ecff732 100644
--- a/frontend/lib/registry/components/table-list/TableListComponent.tsx
+++ b/frontend/lib/registry/components/table-list/TableListComponent.tsx
@@ -1324,7 +1324,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
       {/* 헤더 */}
       {tableConfig.showHeader && (
         <div
-          className="flex items-center justify-between border-b border-gray-200 bg-gray-100/80 px-6 py-4"
+          className="flex items-center justify-between border-b border-gray-200 bg-gray-100 px-6 py-4"
           style={{
             width: "100%",
             maxWidth: "100%",
@@ -1532,16 +1532,12 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                       ) : (
                         <div className="flex items-center space-x-2">
                           <span>{columnLabels[column.columnName] || column.displayName}</span>
-                          {column.sortable && (
+                          {column.sortable && sortColumn === column.columnName && (
                             <div className="flex flex-col">
-                              {sortColumn === column.columnName ? (
-                                sortDirection === "asc" ? (
-                                  <ArrowUp className="h-3 w-3 text-blue-600" />
-                                ) : (
-                                  <ArrowDown className="h-3 w-3 text-blue-600" />
-                                )
+                              {sortDirection === "asc" ? (
+                                <ArrowUp className="h-3 w-3 text-blue-600" />
                               ) : (
-                                <ArrowUpDown className="h-3 w-3 text-gray-400" />
+                                <ArrowDown className="h-3 w-3 text-blue-600" />
                               )}
                             </div>
                           )}
diff --git a/frontend/lib/registry/components/text-display/TextDisplayComponent.tsx b/frontend/lib/registry/components/text-display/TextDisplayComponent.tsx
index 08da69f1..f6e61551 100644
--- a/frontend/lib/registry/components/text-display/TextDisplayComponent.tsx
+++ b/frontend/lib/registry/components/text-display/TextDisplayComponent.tsx
@@ -95,7 +95,7 @@ export const TextDisplayComponent: React.FC<TextDisplayComponentProps> = ({
   return (
     <div style={componentStyle} className={className} {...domProps}>
       {/* 라벨 렌더링 */}
-      {component.label && component.style?.labelDisplay !== false && (
+      {component.label && (component.style?.labelDisplay ?? true) && (
         <label
           style={{
             position: "absolute",