diff --git a/svc/queries/product_performance.go b/svc/queries/product_performance.go
index a0e37cd..b7b5e27 100644
--- a/svc/queries/product_performance.go
+++ b/svc/queries/product_performance.go
@@ -3983,6 +3983,9 @@ func sanitizeProductPerformanceGroupLevels(levels []string) []string {
 	seen := map[string]bool{}
 	for _, level := range levels {
 		level = strings.TrimSpace(level)
+		if level == "color_code" || level == "yaka_kodu" {
+			level = "color_yaka"
+		}
 		if allowed[level] && !seen[level] {
 			out = append(out, level)
 			seen[level] = true
@@ -3998,19 +4001,19 @@ func defaultProductPerformanceGroupLevels(mode string) []string {
 	case "product_detail":
 		return []string{"urun_ana_grubu", "urun_alt_grubu", "product_code", "item_description", "color_yaka", "market_key"}
 	case "idle":
-		return []string{"urun_ilk_grubu", "askili_yan", "kategori", "urun_ana_grubu", "urun_alt_grubu", "product_code", "item_description", "color_code", "yaka_kodu"}
+		return []string{"urun_ilk_grubu", "askili_yan", "kategori", "urun_ana_grubu", "urun_alt_grubu", "product_code", "item_description", "color_yaka"}
 	case "sales_product_country_segment_market_customer":
-		return []string{"market_key", "customer_code", "customer_name", "urun_ilk_grubu", "askili_yan", "kategori", "urun_ana_grubu", "urun_alt_grubu", "product_code", "item_description", "color_code", "yaka_kodu"}
+		return []string{"market_key", "customer_code", "customer_name", "urun_ilk_grubu", "askili_yan", "kategori", "urun_ana_grubu", "urun_alt_grubu", "product_code", "item_description", "color_yaka"}
 	case "sales_market_customer_product":
-		return []string{"market_key", "customer_code", "customer_name", "urun_ilk_grubu", "askili_yan", "kategori", "urun_ana_grubu", "urun_alt_grubu", "product_code", "item_description", "color_code", "yaka_kodu"}
+		return []string{"market_key", "customer_code", "customer_name", "urun_ilk_grubu", "askili_yan", "kategori", "urun_ana_grubu", "urun_alt_grubu", "product_code", "item_description", "color_yaka"}
 	case "sales_country_segment_market_customer_product":
-		return []string{"market_key", "customer_code", "customer_name", "urun_ilk_grubu", "askili_yan", "kategori", "urun_ana_grubu", "urun_alt_grubu", "product_code", "item_description", "color_code", "yaka_kodu"}
+		return []string{"market_key", "customer_code", "customer_name", "urun_ilk_grubu", "askili_yan", "kategori", "urun_ana_grubu", "urun_alt_grubu", "product_code", "item_description", "color_yaka"}
 	case "order_product_customers":
-		return []string{"market_key", "customer_code", "customer_name", "urun_ilk_grubu", "askili_yan", "kategori", "urun_ana_grubu", "urun_alt_grubu", "product_code", "item_description", "color_code", "yaka_kodu"}
+		return []string{"market_key", "customer_code", "customer_name", "urun_ilk_grubu", "askili_yan", "kategori", "urun_ana_grubu", "urun_alt_grubu", "product_code", "item_description", "color_yaka"}
 	case "order_market_details":
-		return []string{"market_key", "customer_code", "customer_name", "urun_ilk_grubu", "askili_yan", "kategori", "urun_ana_grubu", "urun_alt_grubu", "product_code", "item_description", "color_code", "yaka_kodu"}
+		return []string{"market_key", "customer_code", "customer_name", "urun_ilk_grubu", "askili_yan", "kategori", "urun_ana_grubu", "urun_alt_grubu", "product_code", "item_description", "color_yaka"}
 	default:
-		return []string{"urun_ilk_grubu", "askili_yan", "kategori", "urun_ana_grubu", "urun_alt_grubu", "product_code", "item_description", "color_code", "yaka_kodu", "market_key"}
+		return []string{"urun_ilk_grubu", "askili_yan", "kategori", "urun_ana_grubu", "urun_alt_grubu", "product_code", "item_description", "color_yaka", "market_key"}
 	}
 }
 
diff --git a/ui/src/pages/ProductPerformanceProfitability.vue b/ui/src/pages/ProductPerformanceProfitability.vue
index f6683d6..9e6b309 100644
--- a/ui/src/pages/ProductPerformanceProfitability.vue
+++ b/ui/src/pages/ProductPerformanceProfitability.vue
@@ -337,7 +337,7 @@
         <q-tr
           v-if="props.row.__group"
           :props="props"
-          :class="['group-row', `group-row-level-${Math.min(Number(props.row.level || 0), 5)}`]"
+          :class="groupRowClasses(props.row)"
         >
           <q-td v-for="col in props.cols" :key="col.name" :props="props" :class="groupCellClass(col.name)">
             <template v-if="col.name === 'image' && groupShowsImage(props.row)">
@@ -509,7 +509,7 @@
         <q-tr
           v-if="props.row.__group"
           :props="props"
-          :class="['group-row', `group-row-level-${Math.min(Number(props.row.level || 0), 5)}`]"
+          :class="groupRowClasses(props.row)"
         >
           <q-td v-for="col in props.cols" :key="col.name" :props="props" :class="groupCellClass(col.name)">
             <div
@@ -636,7 +636,7 @@
         <q-tr
           v-if="props.row.__group"
           :props="props"
-          :class="['group-row', `group-row-level-${Math.min(Number(props.row.level || 0), 5)}`]"
+          :class="groupRowClasses(props.row)"
         >
           <q-td v-for="col in props.cols" :key="col.name" :props="props" :class="groupCellClass(col.name)">
             <template v-if="col.name === 'image' && groupShowsImage(props.row)">
@@ -823,7 +823,7 @@
         <q-tr
           v-if="props.row.__group"
           :props="props"
-          :class="['group-row', `group-row-level-${Math.min(Number(props.row.level || 0), 5)}`]"
+          :class="groupRowClasses(props.row)"
         >
           <q-td v-for="col in props.cols" :key="col.name" :props="props" :class="groupCellClass(col.name)">
             <template v-if="col.name === 'image' && groupShowsImage(props.row)">
@@ -1107,7 +1107,7 @@
         <q-tr
           v-if="props.row.__group"
           :props="props"
-          :class="['group-row', `group-row-level-${Math.min(Number(props.row.level || 0), 5)}`]"
+          :class="groupRowClasses(props.row)"
         >
           <q-td v-for="col in props.cols" :key="col.name" :props="props" :class="groupCellClass(col.name)">
             <div
@@ -2455,8 +2455,7 @@ const groupLevels = [
   { key: 'urun_ana_grubu', label: 'Ürün Ana Grubu' },
   { key: 'urun_alt_grubu', label: 'Ürün Alt Grubu' },
   { key: 'product_code', label: 'Ürün' },
-  { key: 'color_code', label: 'Renk' },
-  { key: 'yaka_kodu', label: 'Yaka' },
+  { key: 'color_yaka', label: 'Renk/Yaka' },
   { key: 'market_key', label: 'Piyasa' }
 ]
 
@@ -2489,8 +2488,7 @@ const tabGroupLevels = {
     { key: 'urun_ana_grubu', label: 'Ürün Ana Grubu' },
     { key: 'urun_alt_grubu', label: 'Ürün Alt Grubu' },
     { key: 'product_code', label: 'Ürün' },
-    { key: 'color_code', label: 'Renk' },
-    { key: 'yaka_kodu', label: 'Yaka' }
+    { key: 'color_yaka', label: 'Renk/Yaka' }
   ],
   sales_product_country_segment_market_customer: [
     { key: 'market_key', label: 'Piyasa' },
@@ -2502,8 +2500,7 @@ const tabGroupLevels = {
     { key: 'urun_ana_grubu', label: 'Ürün Ana Grubu' },
     { key: 'urun_alt_grubu', label: 'Ürün Alt Grubu' },
     { key: 'product_code', label: 'Ürün' },
-    { key: 'color_code', label: 'Renk' },
-    { key: 'yaka_kodu', label: 'Yaka' }
+    { key: 'color_yaka', label: 'Renk/Yaka' }
   ],
   sales_market_customer_product: [
     { key: 'market_key', label: 'Piyasa' },
@@ -2515,8 +2512,7 @@ const tabGroupLevels = {
     { key: 'urun_ana_grubu', label: 'Ürün Ana Grubu' },
     { key: 'urun_alt_grubu', label: 'Ürün Alt Grubu' },
     { key: 'product_code', label: 'Ürün' },
-    { key: 'color_code', label: 'Renk' },
-    { key: 'yaka_kodu', label: 'Yaka' }
+    { key: 'color_yaka', label: 'Renk/Yaka' }
   ],
   sales_country_segment_market_customer_product: [
     { key: 'market_key', label: 'Piyasa' },
@@ -2528,8 +2524,7 @@ const tabGroupLevels = {
     { key: 'urun_ana_grubu', label: 'Ürün Ana Grubu' },
     { key: 'urun_alt_grubu', label: 'Ürün Alt Grubu' },
     { key: 'product_code', label: 'Ürün' },
-    { key: 'color_code', label: 'Renk' },
-    { key: 'yaka_kodu', label: 'Yaka' }
+    { key: 'color_yaka', label: 'Renk/Yaka' }
   ],
   order_product_customers: [
     { key: 'market_key', label: 'Piyasa' },
@@ -2541,8 +2536,7 @@ const tabGroupLevels = {
     { key: 'urun_ana_grubu', label: 'Ürün Ana Grubu' },
     { key: 'urun_alt_grubu', label: 'Ürün Alt Grubu' },
     { key: 'product_code', label: 'Ürün' },
-    { key: 'color_code', label: 'Renk' },
-    { key: 'yaka_kodu', label: 'Yaka' }
+    { key: 'color_yaka', label: 'Renk/Yaka' }
   ],
   order_market_details: [
     { key: 'market_key', label: 'Piyasa' },
@@ -2554,8 +2548,7 @@ const tabGroupLevels = {
     { key: 'urun_ana_grubu', label: 'Ürün Ana Grubu' },
     { key: 'urun_alt_grubu', label: 'Ürün Alt Grubu' },
     { key: 'product_code', label: 'Ürün' },
-    { key: 'color_code', label: 'Renk' },
-    { key: 'yaka_kodu', label: 'Yaka' }
+    { key: 'color_yaka', label: 'Renk/Yaka' }
   ]
 }
 
@@ -3476,6 +3469,12 @@ function groupShowsImage (row) {
 
 const groupDimensionFields = new Set(dimensionColumnNames)
 
+function groupRowClasses (row) {
+  const level = Math.min(Number(row?.level || 0), 5)
+  const field = String(row?.group_field || 'unknown').replace(/[^a-z0-9_-]/gi, '-').toLowerCase()
+  return ['group-row', `group-row-level-${level}`, `group-row-field-${field}`]
+}
+
 function groupCellClass (colOrName) {
   const name = colOrName?.name || colOrName
   if (name === 'image') return 'product-image-cell'
@@ -3635,6 +3634,12 @@ function colorYakaValue (row) {
   const colorDescription = String(row?.image_color_description || row?.color_description || '').trim()
   const yaka = String(row?.image_yaka_kodu || row?.yaka_kodu || '').trim()
   const colorLabel = colorDisplayLabel(groupField === 'color_code' ? groupValue || color : color, colorDescription)
+  if (row?.__group && groupField === 'color_yaka') {
+    const parts = groupValue.split('/').map(part => part.trim()).filter(Boolean)
+    const groupColor = parts[0] || ''
+    const groupYaka = parts.slice(1).join('/')
+    return [colorDisplayLabel(groupColor, colorDescription), groupYaka].filter(value => value && value !== '-').join('/')
+  }
   if (row?.__group && groupField === 'color_code') return colorLabel
   if (row?.__group && groupField === 'yaka_kodu') {
     const parentColor = colorLabel && colorLabel !== '-' ? colorLabel : ''
@@ -4911,7 +4916,7 @@ onMounted(reload)
 }
 
 .product-breakdown-table :deep(.q-table) {
-  min-width: 3000px;
+  min-width: 3400px;
   table-layout: fixed;
 }
 
@@ -4933,14 +4938,14 @@ onMounted(reload)
 .product-breakdown-table :deep(.q-table th:nth-child(1)),
 .product-breakdown-table :deep(.q-table td:nth-child(1)) {
   left: 0;
-  width: 72px;
-  min-width: 72px;
-  max-width: 72px;
+  width: 420px;
+  min-width: 420px;
+  max-width: 420px;
 }
 
 .product-breakdown-table :deep(.q-table th:nth-child(2)),
 .product-breakdown-table :deep(.q-table td:nth-child(2)) {
-  left: 72px;
+  left: 420px;
   width: 140px;
   min-width: 140px;
   max-width: 140px;
@@ -4948,7 +4953,7 @@ onMounted(reload)
 
 .product-breakdown-table :deep(.q-table th:nth-child(3)),
 .product-breakdown-table :deep(.q-table td:nth-child(3)) {
-  left: 212px;
+  left: 560px;
   width: 110px;
   min-width: 110px;
   max-width: 110px;
@@ -4956,7 +4961,7 @@ onMounted(reload)
 
 .product-breakdown-table :deep(.q-table th:nth-child(4)),
 .product-breakdown-table :deep(.q-table td:nth-child(4)) {
-  left: 322px;
+  left: 670px;
   width: 150px;
   min-width: 150px;
   max-width: 150px;
@@ -4964,7 +4969,7 @@ onMounted(reload)
 
 .product-breakdown-table :deep(.q-table th:nth-child(5)),
 .product-breakdown-table :deep(.q-table td:nth-child(5)) {
-  left: 472px;
+  left: 820px;
   width: 170px;
   min-width: 170px;
   max-width: 170px;
@@ -4972,7 +4977,7 @@ onMounted(reload)
 
 .product-breakdown-table :deep(.q-table th:nth-child(6)),
 .product-breakdown-table :deep(.q-table td:nth-child(6)) {
-  left: 642px;
+  left: 990px;
   width: 150px;
   min-width: 150px;
   max-width: 150px;
@@ -4980,7 +4985,7 @@ onMounted(reload)
 
 .product-breakdown-table :deep(.q-table th:nth-child(7)),
 .product-breakdown-table :deep(.q-table td:nth-child(7)) {
-  left: 792px;
+  left: 1140px;
   width: 130px;
   min-width: 130px;
   max-width: 130px;
@@ -4988,7 +4993,7 @@ onMounted(reload)
 
 .product-breakdown-table :deep(.q-table th:nth-child(8)),
 .product-breakdown-table :deep(.q-table td:nth-child(8)) {
-  left: 922px;
+  left: 1270px;
   width: 90px;
   min-width: 90px;
   max-width: 90px;
@@ -4996,7 +5001,7 @@ onMounted(reload)
 
 .product-breakdown-table :deep(.q-table th:nth-child(9)),
 .product-breakdown-table :deep(.q-table td:nth-child(9)) {
-  left: 1012px;
+  left: 1360px;
   width: 80px;
   min-width: 80px;
   max-width: 80px;
@@ -5004,7 +5009,7 @@ onMounted(reload)
 
 .product-breakdown-table :deep(.q-table th:nth-child(10)),
 .product-breakdown-table :deep(.q-table td:nth-child(10)) {
-  left: 1092px;
+  left: 1440px;
   width: 130px;
   min-width: 130px;
   max-width: 130px;
@@ -5012,7 +5017,7 @@ onMounted(reload)
 }
 
 .product-breakdown-table.product-detail-table :deep(.q-table) {
-  min-width: 2500px;
+  min-width: 2850px;
 }
 
 .product-breakdown-table.product-detail-table :deep(.q-table td:nth-child(n+8)) {
@@ -5046,14 +5051,14 @@ onMounted(reload)
 .product-breakdown-table.product-detail-table :deep(.q-table th:nth-child(1)),
 .product-breakdown-table.product-detail-table :deep(.q-table td:nth-child(1)) {
   left: 0;
-  width: 72px;
-  min-width: 72px;
-  max-width: 72px;
+  width: 420px;
+  min-width: 420px;
+  max-width: 420px;
 }
 
 .product-breakdown-table.product-detail-table :deep(.q-table th:nth-child(2)),
 .product-breakdown-table.product-detail-table :deep(.q-table td:nth-child(2)) {
-  left: 72px;
+  left: 420px;
   width: 150px;
   min-width: 150px;
   max-width: 150px;
@@ -5061,7 +5066,7 @@ onMounted(reload)
 
 .product-breakdown-table.product-detail-table :deep(.q-table th:nth-child(3)),
 .product-breakdown-table.product-detail-table :deep(.q-table td:nth-child(3)) {
-  left: 222px;
+  left: 570px;
   width: 150px;
   min-width: 150px;
   max-width: 150px;
@@ -5069,7 +5074,7 @@ onMounted(reload)
 
 .product-breakdown-table.product-detail-table :deep(.q-table th:nth-child(4)),
 .product-breakdown-table.product-detail-table :deep(.q-table td:nth-child(4)) {
-  left: 372px;
+  left: 720px;
   width: 130px;
   min-width: 130px;
   max-width: 130px;
@@ -5077,7 +5082,7 @@ onMounted(reload)
 
 .product-breakdown-table.product-detail-table :deep(.q-table th:nth-child(5)),
 .product-breakdown-table.product-detail-table :deep(.q-table td:nth-child(5)) {
-  left: 502px;
+  left: 850px;
   width: 170px;
   min-width: 170px;
   max-width: 170px;
@@ -5085,7 +5090,7 @@ onMounted(reload)
 
 .product-breakdown-table.product-detail-table :deep(.q-table th:nth-child(6)),
 .product-breakdown-table.product-detail-table :deep(.q-table td:nth-child(6)) {
-  left: 672px;
+  left: 1020px;
   width: 170px;
   min-width: 170px;
   max-width: 190px;
@@ -5093,7 +5098,7 @@ onMounted(reload)
 
 .product-breakdown-table.product-detail-table :deep(.q-table th:nth-child(7)),
 .product-breakdown-table.product-detail-table :deep(.q-table td:nth-child(7)) {
-  left: 842px;
+  left: 1190px;
   width: 120px;
   min-width: 120px;
   max-width: 120px;
@@ -5432,6 +5437,28 @@ onMounted(reload)
   border-color: #c4c9d1;
 }
 
+.performance-table :deep(.q-table tbody tr.group-row.group-row-field-color_yaka td) {
+  background: #f7e3bf;
+  color: #1f2937;
+  border-top: 2px solid #c99032;
+  border-bottom: 2px solid #c99032;
+}
+
+.performance-table :deep(.q-table tbody tr.group-row.group-row-field-color_yaka td:first-child) {
+  border-left: 6px solid #b76a00;
+}
+
+.performance-table :deep(.q-table tbody tr.group-row.group-row-field-market_key td) {
+  background: #d9e8ff;
+  color: #132238;
+  border-top: 2px solid #7da9e6;
+  border-bottom: 2px solid #7da9e6;
+}
+
+.performance-table :deep(.q-table tbody tr.group-row.group-row-field-market_key td:first-child) {
+  border-left: 6px solid #2563b8;
+}
+
 .performance-table :deep(.q-table tbody tr.group-row td span),
 .performance-table :deep(.q-table tbody tr.group-row .group-title),
 .performance-table :deep(.q-table tbody tr.group-row .q-btn),
@@ -5467,32 +5494,38 @@ onMounted(reload)
 }
 
 .product-image-cell {
-  width: 64px;
-  min-width: 64px;
+  width: 420px;
+  min-width: 420px;
+  max-width: 420px;
+  padding: 10px !important;
+  text-align: center;
+  vertical-align: middle;
 }
 
 .product-thumb-button {
-  width: 54px;
-  height: 72px;
+  width: 400px;
+  height: 400px;
   border: 1px solid #d9dde3;
-  border-radius: 6px;
+  border-radius: 8px;
   background: #fff;
-  padding: 4px;
+  padding: 8px;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
+  overflow: hidden;
 }
 
 .product-thumb,
 .product-thumb-placeholder {
-  width: 46px;
-  height: 64px;
+  width: 384px;
+  height: 384px;
 }
 
 .product-thumb {
   display: block;
   object-fit: contain;
+  object-position: center;
 }
 
 .product-thumb-placeholder {