diff --git a/src/components/EC2InstanceDetailModal.vue b/src/components/EC2InstanceDetailModal.vue
index 991c1aa..61c4562 100644
--- a/src/components/EC2InstanceDetailModal.vue
+++ b/src/components/EC2InstanceDetailModal.vue
@@ -198,50 +198,66 @@
                             </div>
                         </div>
 
-                        <div v-else class="p-2">
-                            <div class="card border-warning mb-4">
-                                <div class="card-body">
-                                    <h5 class="card-title fw-bold text-warning mb-2">
-                                        <font-awesome-icon icon="exclamation-triangle" class="me-2" />
+                        <div v-else class="p-1">
+                            <div class="instruction-box mb-4">
+                                <div class="d-flex align-items-center mb-3">
+                                    <font-awesome-icon icon="exclamation-triangle" class="text-warning fa-lg me-2" />
+                                    <h5 class="fw-bold mb-0 text-white">
                                         {{ $t("How to Enable EC2 Memory Usage Monitoring") }}
                                     </h5>
-                                    <p class="text-muted">
-                                        AWS CloudWatch only reports hypervisor-level metrics (like CPU and Network) by default. To monitor RAM/Memory usage, AWS provides the free <strong>Amazon CloudWatch Agent</strong>.
-                                    </p>
+                                </div>
+                                <p class="instruction-intro mb-4">
+                                    AWS CloudWatch only reports hypervisor-level metrics (such as CPU and Network) by default. To monitor OS-level RAM / Memory usage, AWS provides the free <strong>Amazon CloudWatch Agent</strong>.
+                                </p>
 
-                                    <h6 class="fw-bold mt-4">{{ $t("Step 1: Install CloudWatch Agent (Amazon Linux, Ubuntu, Debian)") }}</h6>
-                                    <pre class="bg-dark text-light p-3 rounded font-monospace small"><code># On Amazon Linux / RHEL / CentOS:
-sudo yum install -y amazon-cloudwatch-agent
+                                <!-- Step 1 -->
+                                <div class="step-card mb-4">
+                                    <div class="d-flex justify-content-between align-items-center mb-2">
+                                        <div class="fw-bold text-white step-title">
+                                            <span class="step-number me-2">1</span>
+                                            {{ $t("Install CloudWatch Agent") }}
+                                        </div>
+                                        <button
+                                            type="button"
+                                            class="btn btn-sm copy-btn"
+                                            @click="copyCode(step1Code, 'step1')"
+                                        >
+                                            <font-awesome-icon :icon="copiedStep === 'step1' ? 'check' : 'copy'" class="me-1" />
+                                            {{ copiedStep === 'step1' ? $t("Copied!") : $t("Copy") }}
+                                        </button>
+                                    </div>
+                                    <pre class="instruction-code"><code>{{ step1Code }}</code></pre>
+                                </div>
 
-# On Ubuntu / Debian:
-wget https://amazoncloudwatch-agent.s3.amazonaws.com/ubuntu/amd64/latest/amazon-cloudwatch-agent.deb
-sudo dpkg -i -E ./amazon-cloudwatch-agent.deb</code></pre>
+                                <!-- Step 2 -->
+                                <div class="step-card mb-4">
+                                    <div class="d-flex justify-content-between align-items-center mb-2">
+                                        <div class="fw-bold text-white step-title">
+                                            <span class="step-number me-2">2</span>
+                                            {{ $t("Configure & Start CloudWatch Agent") }}
+                                        </div>
+                                        <button
+                                            type="button"
+                                            class="btn btn-sm copy-btn"
+                                            @click="copyCode(step2Code, 'step2')"
+                                        >
+                                            <font-awesome-icon :icon="copiedStep === 'step2' ? 'check' : 'copy'" class="me-1" />
+                                            {{ copiedStep === 'step2' ? $t("Copied!") : $t("Copy") }}
+                                        </button>
+                                    </div>
+                                    <pre class="instruction-code"><code>{{ step2Code }}</code></pre>
+                                </div>
 
-                                    <h6 class="fw-bold mt-4">{{ $t("Step 2: Start Agent with Memory Metrics Configuration") }}</h6>
-                                    <pre class="bg-dark text-light p-3 rounded font-monospace small"><code># Save config file /opt/aws/amazon-cloudwatch-agent/etc/amazon-cloudwatch-agent.json:
-sudo tee /opt/aws/amazon-cloudwatch-agent/etc/amazon-cloudwatch-agent.json &lt;&lt; 'EOF'
-{
-  "metrics": {
-    "metrics_collected": {
-      "mem": {
-        "measurement": ["mem_used_percent"],
-        "metrics_collection_interval": 60
-      }
-    },
-    "append_dimensions": {
-      "InstanceId": "${aws:InstanceId}"
-    }
-  }
-}
-EOF
-
-# Start the agent:
-sudo /opt/aws/amazon-cloudwatch-agent/bin/amazon-cloudwatch-agent-ctl \
-  -a fetch-config -m ec2 -s -c file:/opt/aws/amazon-cloudwatch-agent/etc/amazon-cloudwatch-agent.json</code></pre>
-
-                                    <div class="alert alert-info mt-3 mb-0 small">
-                                        <font-awesome-icon icon="info-circle" class="me-1" />
-                                        <strong>IAM Permission:</strong> Ensure the EC2 instance has an IAM Role with the <code>CloudWatchAgentServerPolicy</code> policy attached so it can send metrics to CloudWatch.
+                                <!-- IAM Info -->
+                                <div class="instruction-iam-box p-3 rounded">
+                                    <div class="d-flex align-items-start">
+                                        <font-awesome-icon icon="info-circle" class="text-info fa-lg me-2 mt-1" />
+                                        <div>
+                                            <strong class="text-white">{{ $t("IAM Permission Required") }}:</strong>
+                                            <span class="text-white-50 ms-1">
+                                                Ensure the EC2 instance has an IAM Role with the <code class="iam-policy-badge">CloudWatchAgentServerPolicy</code> policy attached so it is authorized to publish metrics to CloudWatch.
+                                            </span>
+                                        </div>
                                     </div>
                                 </div>
                             </div>
@@ -374,6 +390,42 @@ export default {
             hours: 1,
             loading: false,
             history: null,
+            copiedStep: null,
+            step1Code: `# On Amazon Linux / RHEL / CentOS:
+sudo yum install -y amazon-cloudwatch-agent
+
+# On Ubuntu / Debian (x86_64 / amd64):
+wget https://amazoncloudwatch-agent.s3.amazonaws.com/ubuntu/amd64/latest/amazon-cloudwatch-agent.deb
+sudo dpkg -i -E ./amazon-cloudwatch-agent.deb
+
+# On Ubuntu / Debian (Graviton / arm64):
+wget https://amazoncloudwatch-agent.s3.amazonaws.com/ubuntu/arm64/latest/amazon-cloudwatch-agent.deb
+sudo dpkg -i -E ./amazon-cloudwatch-agent.deb`,
+            step2Code: `# Save config file /opt/aws/amazon-cloudwatch-agent/etc/amazon-cloudwatch-agent.json:
+sudo tee /opt/aws/amazon-cloudwatch-agent/etc/amazon-cloudwatch-agent.json << 'EOF'
+{
+  "agent": {
+    "metrics_collection_interval": 60,
+    "run_as_user": "root"
+  },
+  "metrics": {
+    "namespace": "CWAgent",
+    "metrics_collected": {
+      "mem": {
+        "measurement": ["mem_used_percent"],
+        "metrics_collection_interval": 60
+      }
+    },
+    "append_dimensions": {
+      "InstanceId": "\${aws:InstanceId}"
+    }
+  }
+}
+EOF
+
+# Start and enable the CloudWatch Agent:
+sudo /opt/aws/amazon-cloudwatch-agent/bin/amazon-cloudwatch-agent-ctl \\
+  -a fetch-config -m ec2 -s -c file:/opt/aws/amazon-cloudwatch-agent/etc/amazon-cloudwatch-agent.json`,
             charts: {
                 cpu: null,
                 mem: null,
@@ -659,6 +711,18 @@ export default {
             if (val >= 60) return "bg-warning text-dark";
             return "bg-info text-dark";
         },
+
+        copyCode(text, stepId) {
+            if (navigator && navigator.clipboard) {
+                navigator.clipboard.writeText(text);
+                this.copiedStep = stepId;
+                setTimeout(() => {
+                    if (this.copiedStep === stepId) {
+                        this.copiedStep = null;
+                    }
+                }, 2000);
+            }
+        },
     },
 };
 </script>
@@ -696,4 +760,90 @@ export default {
 .font-monospace {
     font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
+
+.instruction-box {
+    background-color: #000000 !important;
+    color: #ffffff !important;
+    border: 1px solid #27272a !important;
+    border-radius: 12px !important;
+    padding: 24px !important;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
+}
+
+.instruction-intro {
+    color: #e4e4e7 !important;
+    font-size: 0.95rem;
+    line-height: 1.6;
+}
+
+.step-card {
+    background: transparent !important;
+}
+
+.step-number {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 22px;
+    height: 22px;
+    background-color: #3b82f6;
+    color: #ffffff;
+    font-size: 0.75rem;
+    font-weight: 700;
+    border-radius: 50%;
+}
+
+.step-title {
+    font-size: 0.95rem;
+    color: #ffffff !important;
+}
+
+.copy-btn {
+    font-size: 0.78rem;
+    padding: 3px 10px;
+    border: 1px solid #52525b !important;
+    color: #f4f4f5 !important;
+    background-color: #18181b !important;
+    border-radius: 6px;
+    transition: all 0.15s ease-in-out;
+}
+
+.copy-btn:hover {
+    background-color: #27272a !important;
+    color: #ffffff !important;
+    border-color: #a1a1aa !important;
+}
+
+.instruction-code {
+    background-color: #050505 !important;
+    color: #ffffff !important;
+    border: 1px solid #27272a !important;
+    border-radius: 8px !important;
+    padding: 16px 18px !important;
+    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
+    font-size: 0.85rem !important;
+    line-height: 1.55 !important;
+    white-space: pre !important;
+    overflow-x: auto !important;
+    margin-bottom: 0 !important;
+}
+
+.instruction-code code {
+    color: #ffffff !important;
+    background-color: transparent !important;
+}
+
+.instruction-iam-box {
+    background-color: #09090b !important;
+    border: 1px solid #27272a !important;
+}
+
+.iam-policy-badge {
+    background-color: #18181b !important;
+    color: #67e8f9 !important;
+    border: 1px solid rgba(34, 211, 238, 0.3) !important;
+    padding: 2px 7px !important;
+    border-radius: 4px !important;
+    font-size: 0.82rem !important;
+}
 </style>