diff --git a/src/components/EC2InstanceDetailModal.vue b/src/components/EC2InstanceDetailModal.vue
index 61c4562..c9fed17 100644
--- a/src/components/EC2InstanceDetailModal.vue
+++ b/src/components/EC2InstanceDetailModal.vue
@@ -178,16 +178,22 @@
                     <div v-show="currentTab === 'memory'">
                         <div v-if="history && history.hasMemoryAgent" class="row g-4">
                             <div class="col-12">
-                                <div class="alert alert-success d-flex align-items-center">
-                                    <font-awesome-icon icon="check-circle" class="fa-2x me-3" />
+                                <div class="alert alert-success d-flex align-items-center mb-3">
+                                    <font-awesome-icon icon="check-circle" class="fa-2x me-3 text-success" />
                                     <div>
                                         <h6 class="mb-0 fw-bold">{{ $t("CloudWatch Memory Agent Active") }}</h6>
                                         <small>{{ $t("Receiving live OS memory utilization metrics from CWAgent/mem_used_percent.") }}</small>
                                     </div>
                                 </div>
-                                <div class="card shadow-sm">
-                                    <div class="card-header bg-transparent fw-semibold">
-                                        {{ $t("Memory Utilization Trend") }}
+                                <div class="card metric-card chart-panel shadow-sm">
+                                    <div class="card-header d-flex justify-content-between align-items-center">
+                                        <span class="fw-semibold text-white">
+                                            <font-awesome-icon icon="memory" class="text-success me-2" />
+                                            {{ $t("Memory Utilization Trend") }}
+                                        </span>
+                                        <span v-if="latestMem != null" class="badge memory-badge">
+                                            Current: {{ latestMem }}%
+                                        </span>
                                     </div>
                                     <div class="card-body">
                                         <div class="chart-container" style="height: 320px;">
@@ -517,17 +523,43 @@ sudo /opt/aws/amazon-cloudwatch-agent/bin/amazon-cloudwatch-agent-ctl \\
                     responsive: true,
                     maintainAspectRatio: false,
                     plugins: {
-                        legend: { display: datasets.length > 1, labels: { color: textColor } },
+                        legend: {
+                            display: datasets.length > 1,
+                            labels: {
+                                color: "#ffffff",
+                                font: { weight: "bold" },
+                            },
+                        },
+                        tooltip: {
+                            backgroundColor: "#18181b",
+                            titleColor: "#ffffff",
+                            bodyColor: "#f4f4f5",
+                            borderColor: "#3f3f46",
+                            borderWidth: 1,
+                            padding: 10,
+                            displayColors: true,
+                        },
                     },
                     scales: {
                         x: {
-                            grid: { color: gridColor },
-                            ticks: { color: textColor, maxTicksLimit: 7 },
+                            grid: {
+                                color: "rgba(255, 255, 255, 0.08)",
+                                borderColor: "#3f3f46",
+                            },
+                            ticks: {
+                                color: "#e4e4e7",
+                                maxTicksLimit: 8,
+                                font: { size: 11 },
+                            },
                         },
                         y: {
-                            grid: { color: gridColor },
+                            grid: {
+                                color: "rgba(255, 255, 255, 0.08)",
+                                borderColor: "#3f3f46",
+                            },
                             ticks: {
-                                color: textColor,
+                                color: "#e4e4e7",
+                                font: { size: 11 },
                                 callback: (v) => `${v}${yUnit}`,
                             },
                         },
@@ -575,11 +607,16 @@ sudo /opt/aws/amazon-cloudwatch-agent/bin/amazon-cloudwatch-agent-ctl \\
                             {
                                 label: "Memory %",
                                 data: values,
-                                borderColor: "#ffc107",
-                                backgroundColor: "rgba(255, 193, 7, 0.15)",
+                                borderColor: "#00e676",
+                                backgroundColor: "rgba(0, 230, 118, 0.18)",
                                 fill: true,
                                 tension: 0.25,
-                                pointRadius: values.length > 30 ? 0 : 2,
+                                borderWidth: 2.5,
+                                pointRadius: values.length > 30 ? 2 : 4,
+                                pointHoverRadius: 6,
+                                pointBackgroundColor: "#00e676",
+                                pointBorderColor: "#ffffff",
+                                pointBorderWidth: 1.5,
                             },
                         ],
                         "%"
@@ -601,11 +638,16 @@ sudo /opt/aws/amazon-cloudwatch-agent/bin/amazon-cloudwatch-agent-ctl \\
                             {
                                 label: "Memory %",
                                 data: values,
-                                borderColor: "#198754",
-                                backgroundColor: "rgba(25, 135, 84, 0.15)",
+                                borderColor: "#00e676",
+                                backgroundColor: "rgba(0, 230, 118, 0.2)",
                                 fill: true,
                                 tension: 0.25,
-                                pointRadius: 2,
+                                borderWidth: 2.5,
+                                pointRadius: 4,
+                                pointHoverRadius: 7,
+                                pointBackgroundColor: "#00e676",
+                                pointBorderColor: "#ffffff",
+                                pointBorderWidth: 1.5,
                             },
                         ],
                         "%"
@@ -846,4 +888,65 @@ sudo /opt/aws/amazon-cloudwatch-agent/bin/amazon-cloudwatch-agent-ctl \\
     border-radius: 4px !important;
     font-size: 0.82rem !important;
 }
+
+/* Force pure rectangle shapes without 50rem pills */
+.card,
+.metric-card,
+.chart-panel,
+.alert {
+    border-radius: 8px !important;
+}
+
+/* Black Screen for Metric and Chart Cards */
+.metric-card,
+.chart-panel {
+    background-color: #000000 !important;
+    border: 1px solid #27272a !important;
+    border-radius: 8px !important;
+    color: #ffffff !important;
+    overflow: hidden !important;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
+}
+
+.metric-card .card-header,
+.chart-panel .card-header {
+    background-color: #09090b !important;
+    border-bottom: 1px solid #27272a !important;
+    color: #ffffff !important;
+    font-weight: 600 !important;
+    padding: 0.85rem 1.15rem !important;
+    border-radius: 8px 8px 0 0 !important;
+}
+
+.metric-card .card-body,
+.chart-panel .card-body {
+    background-color: #000000 !important;
+    color: #ffffff !important;
+    padding: 1.15rem !important;
+    border-radius: 0 0 8px 8px !important;
+}
+
+/* Alert banner as a neat rectangle */
+.alert.alert-success {
+    background-color: #064e3b !important;
+    border: 1px solid #059669 !important;
+    color: #ecfdf5 !important;
+    border-radius: 8px !important;
+}
+
+.alert.alert-success h6 {
+    color: #ffffff !important;
+}
+
+.alert.alert-success small {
+    color: #a7f3d0 !important;
+}
+
+.memory-badge {
+    background-color: #00e676 !important;
+    color: #000000 !important;
+    font-weight: 700 !important;
+    padding: 4px 8px !important;
+    border-radius: 4px !important;
+}
 </style>
diff --git a/src/pages/EC2Dashboard.vue b/src/pages/EC2Dashboard.vue
index a0f17fb..c6f7900 100644
--- a/src/pages/EC2Dashboard.vue
+++ b/src/pages/EC2Dashboard.vue
@@ -833,8 +833,9 @@ export default {
     justify-content: center;
 }
 
+.filter-bar,
 .kpi-card {
-    border-radius: 14px;
+    border-radius: 10px !important;
     transition: transform 0.2s ease, box-shadow 0.2s ease;
 }