diff --git a/src/frontend/src/assets/douzone.css b/src/frontend/src/assets/douzone.css
index 0ec86a88..1f732905 100644
--- a/src/frontend/src/assets/douzone.css
+++ b/src/frontend/src/assets/douzone.css
@@ -1,4 +1,4 @@
-/* Douzone ERP Soft Navy Theme for Vue 3 SPA */
+/* Douzone ERP & Enterprise Premium Design System for Vue 3 SPA */
 
 :root {
   --douzone-navy: #2C3E50;
@@ -24,67 +24,165 @@
   --focus-box-shadow: 0 0 0 3px rgba(41, 128, 185, 0.25);
 }
 
+* {
+  box-sizing: border-box;
+}
+
 body {
   margin: 0;
   padding: 0;
   background-color: var(--douzone-bg);
   color: var(--douzone-navy);
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
+  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
   font-size: 13px;
   line-height: 1.4;
   height: 100vh;
   overflow: hidden;
 }
 
-.douzone-app-container {
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
+/* Base Layout Utilities */
+.flex { display: flex; }
+.flex-col { display: flex; flex-direction: column; }
+.flex-row { display: flex; flex-direction: row; }
+.flex-1 { flex: 1 1 0%; }
+.flex-wrap { flex-wrap: wrap; }
+.items-center { align-items: center; }
+.items-start { align-items: flex-start; }
+.items-end { align-items: flex-end; }
+.justify-between { justify-content: space-between; }
+.justify-center { justify-content: center; }
+.justify-end { justify-content: flex-end; }
+
+.grid { display: grid; }
+.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+
+.gap-1 { gap: 4px; }
+.gap-2 { gap: 8px; }
+.gap-3 { gap: 12px; }
+.gap-4 { gap: 16px; }
+
+.p-1 { padding: 4px; }
+.p-2 { padding: 8px; }
+.p-3 { padding: 12px; }
+.p-4 { padding: 16px; }
+.p-6 { padding: 24px; }
+
+.px-2 { padding-left: 8px; padding-right: 8px; }
+.px-3 { padding-left: 12px; padding-right: 12px; }
+.px-4 { padding-left: 16px; padding-right: 16px; }
+.py-1 { padding-top: 4px; padding-bottom: 4px; }
+.py-2 { padding-top: 8px; padding-bottom: 8px; }
+
+.m-0 { margin: 0; }
+.mt-1 { margin-top: 4px; }
+.mt-2 { margin-top: 8px; }
+.mb-1 { margin-bottom: 4px; }
+.mb-2 { margin-bottom: 8px; }
+
+.w-full { width: 100%; }
+.h-full { height: 100%; }
+.min-h-full { min-height: 100%; }
+.min-h-0 { min-height: 0; }
+.overflow-hidden { overflow: hidden; }
+.overflow-y-auto { overflow-y: auto; }
+.overflow-x-auto { overflow-x: auto; }
+.sticky { position: sticky; }
+.bottom-0 { bottom: 0; }
+
+/* Colors & Backgrounds */
+.bg-white { background-color: #FFFFFF; }
+.bg-slate-50 { background-color: #F8FAFC; }
+.bg-slate-100 { background-color: #F1F5F9; }
+.bg-slate-200 { background-color: #E2E8F0; }
+.bg-slate-800 { background-color: #1E293B; }
+.bg-slate-900 { background-color: #0F172A; }
+.bg-blue-50 { background-color: #EFF6FF; }
+.bg-blue-100 { background-color: #DBEAFE; }
+.bg-blue-600 { background-color: #2563EB; }
+.bg-blue-700 { background-color: #1D4ED8; }
+.bg-emerald-50 { background-color: #ECFDF5; }
+.bg-emerald-100 { background-color: #D1FAE5; }
+.bg-emerald-600 { background-color: #059669; }
+.bg-amber-50 { background-color: #FFFBEB; }
+.bg-amber-100 { background-color: #FEF3C7; }
+.bg-rose-50 { background-color: #FFF1F2; }
+.bg-rose-100 { background-color: #FFE4E6; }
+.bg-rose-600 { background-color: #E11D48; }
+
+/* Text Styles */
+.text-xs { font-size: 12px; }
+.text-sm { font-size: 14px; }
+.text-base { font-size: 16px; }
+.text-xl { font-size: 20px; }
+.font-bold { font-weight: 700; }
+.font-semibold { font-weight: 600; }
+.font-medium { font-weight: 500; }
+.font-mono { font-family: monospace; }
+.text-right { text-align: right; }
+.text-center { text-align: center; }
+
+.text-white { color: #FFFFFF; }
+.text-slate-400 { color: #94A3B8; }
+.text-slate-500 { color: #64748B; }
+.text-slate-600 { color: #475569; }
+.text-slate-700 { color: #334155; }
+.text-slate-800 { color: #1E293B; }
+.text-slate-900 { color: #0F172A; }
+.text-blue-600 { color: #2563EB; }
+.text-blue-700 { color: #1D4ED8; }
+.text-blue-800 { color: #1E40AF; }
+.text-emerald-600 { color: #059669; }
+.text-emerald-700 { color: #047857; }
+.text-amber-800 { color: #92400E; }
+.text-rose-700 { color: #BE123C; }
+.text-rose-800 { color: #9F1239; }
+
+/* Borders & Shadows */
+.border { border-width: 1px; border-style: solid; }
+.border-b { border-bottom-width: 1px; border-bottom-style: solid; }
+.border-t { border-top-width: 1px; border-top-style: solid; }
+.border-r { border-right-width: 1px; border-right-style: solid; }
+.border-slate-200 { border-color: #E2E8F0; }
+.border-slate-300 { border-color: #CBD5E1; }
+.border-blue-200 { border-color: #BFDBFE; }
+.border-blue-300 { border-color: #93C5FD; }
+.border-amber-200 { border-color: #FDE68A; }
+.border-rose-200 { border-color: #FECDD3; }
+
+.rounded { border-radius: 4px; }
+.rounded-md { border-radius: 6px; }
+.rounded-lg { border-radius: 8px; }
+.rounded-full { border-radius: 9999px; }
+
+.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
+.shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }
+.transition { transition: all 0.15s ease-in-out; }
+
+/* AG Grid Enterprise High-Density Theme Override */
+.ag-theme-alpine {
+  width: 100%;
+  height: 100%;
+  min-height: 400px;
+  --ag-header-background-color: #F8FAFC;
+  --ag-header-foreground-color: #1E293B;
+  --ag-selected-row-background-color: rgba(37, 99, 235, 0.12);
+  --ag-row-hover-color: rgba(226, 232, 240, 0.6);
+  --ag-font-size: 12px;
+  --ag-font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --ag-border-color: #E2E8F0;
+  --ag-row-height: 36px;
+  --ag-header-height: 38px;
 }
 
-.douzone-header-toolbar {
-  background-color: var(--douzone-navy);
-  color: #FFFFFF;
-  padding: 10px 16px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  border-bottom: 2px solid #1A252F;
+.ag-root-wrapper {
+  border-radius: 6px;
+  border: 1px solid #CBD5E1 !important;
 }
 
-.douzone-header-toolbar .btn-douzone-action {
-  background-color: #34495E;
-  color: #FFFFFF;
-  border: 1px solid #4A6572;
-  padding: 4px 12px;
-  font-size: 12px;
-  font-weight: 600;
-  border-radius: 3px;
-  margin-left: 4px;
-  cursor: pointer;
-}
-
-.douzone-header-toolbar .btn-douzone-action:hover {
-  background-color: #415B76;
-}
-
-.douzone-summary-footer {
-  background-color: var(--douzone-slate);
-  color: #ECF0F1;
-  padding: 6px 16px;
-  font-size: 12px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  border-top: 1px solid #2C3E50;
-}
-
-.hotkey-badge {
-  background-color: #2C3E50;
-  color: #F1C40F;
-  padding: 2px 6px;
-  border-radius: 3px;
-  font-weight: bold;
-  font-family: monospace;
-  margin-right: 4px;
+.ag-header-cell-label {
+  font-weight: 700 !important;
+  color: #1E293B !important;
 }
diff --git a/src/frontend/src/components/QuantDataGrid.vue b/src/frontend/src/components/QuantDataGrid.vue
index 5c00db03..24050163 100644
--- a/src/frontend/src/components/QuantDataGrid.vue
+++ b/src/frontend/src/components/QuantDataGrid.vue
@@ -98,9 +98,9 @@ defineExpose({ exportToExcel: exportToCsv, resetGridState, autoSizeColumns, grid
     />
 
     <!-- AG Grid Container (Auto-Fit Columns & Compact High-Density View) -->
-    <div class="flex-1 ag-theme-alpine w-full">
+    <div class="flex-1 ag-theme-alpine w-full grid-wrapper">
       <ag-grid-vue
-        class="h-full w-full"
+        class="h-full w-full quant-ag-grid-instance"
         theme="legacy"
         :columnDefs="columnDefs"
         :rowData="rowData"
@@ -126,6 +126,23 @@ defineExpose({ exportToExcel: exportToCsv, resetGridState, autoSizeColumns, grid
 </template>
 
 <style scoped>
+.quant-grid-masterpiece-container {
+  min-height: 480px;
+}
+
+.grid-wrapper {
+  height: calc(100% - 44px);
+  min-height: 440px;
+  display: flex;
+  flex-direction: column;
+}
+
+.quant-ag-grid-instance {
+  height: 100% !important;
+  min-height: 440px !important;
+  flex: 1;
+}
+
 .ag-theme-alpine {
   --ag-header-background-color: #F8FAFC;
   --ag-header-foreground-color: #1E293B;
diff --git a/src/frontend/src/views/templates/TplList01View.vue b/src/frontend/src/views/templates/TplList01View.vue
index 271d7e59..6391e5e0 100644
--- a/src/frontend/src/views/templates/TplList01View.vue
+++ b/src/frontend/src/views/templates/TplList01View.vue
@@ -33,7 +33,7 @@
     </div>
 
     <!-- Main Data Grid Component Integration -->
-    <div class="flex-1 min-h-0 bg-white rounded-md border border-slate-200 overflow-hidden shadow-sm">
+    <div class="flex-1 min-h-[520px] bg-white rounded-md border border-slate-200 overflow-hidden shadow-sm">
       <QuantDataGrid
         :columnDefs="columnDefs"
         :rowData="rowData"