diff --git a/frontend/src/pages/DashboardPage.jsx b/frontend/src/pages/DashboardPage.jsx
index c88f2ac..03cbc03 100644
--- a/frontend/src/pages/DashboardPage.jsx
+++ b/frontend/src/pages/DashboardPage.jsx
@@ -35,22 +35,26 @@ export function DashboardPage() {
   return (
     <div className="dashboard-page">
       <h2>Dashboard Overview</h2>
+      <p className="dashboard-subtitle">Real-time snapshot of monitored PostgreSQL targets.</p>
       <div className="grid three dashboard-kpis">
         <div className="card stat kpi-card">
+          <div className="kpi-orb blue" />
           <strong>{targets.length}</strong>
-          <span>Total Targets</span>
+          <span className="kpi-label">Total Targets</span>
         </div>
         <div className="card stat kpi-card ok">
+          <div className="kpi-orb green" />
           <strong>{okCount}</strong>
-          <span>Status OK</span>
+          <span className="kpi-label">Status OK</span>
         </div>
         <div className="card stat kpi-card alert">
+          <div className="kpi-orb amber" />
           <strong>{alerts}</strong>
-          <span>Alerts</span>
+          <span className="kpi-label">Alerts</span>
         </div>
       </div>
 
-      <div className="card">
+      <div className="card dashboard-targets-card">
         <div className="dashboard-targets-head">
           <h3>Targets</h3>
           <span>{targets.length} registered</span>
@@ -72,7 +76,7 @@ export function DashboardPage() {
                   <p><strong>DB:</strong> {t.dbname}</p>
                 </div>
                 <div className="target-actions">
-                  <Link className="details-btn" to={`/targets/${t.id}`}>Details</Link>
+                  <Link className="details-btn" to={`/targets/${t.id}`}>Details <span aria-hidden="true">→</span></Link>
                 </div>
               </article>
             );
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 77f4395..558626d 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -253,8 +253,32 @@ button {
   color: #bfd0ea;
 }
 
+.dashboard-page h2 {
+  margin-bottom: 4px;
+}
+
+.dashboard-subtitle {
+  margin: 0 0 14px 0;
+  color: #a8c2df;
+  font-size: 14px;
+}
+
 .dashboard-kpis .kpi-card {
   border-left: 4px solid #2f7eca;
+  position: relative;
+  overflow: hidden;
+  box-shadow: 0 12px 30px #0416344d;
+}
+
+.dashboard-kpis .kpi-card::after {
+  content: "";
+  position: absolute;
+  right: -30px;
+  top: -30px;
+  width: 120px;
+  height: 120px;
+  border-radius: 50%;
+  background: radial-gradient(circle, #5bc2ff33, transparent 70%);
 }
 
 .dashboard-kpis .kpi-card.ok {
@@ -281,9 +305,40 @@ button {
   font-size: 13px;
 }
 
+.kpi-orb {
+  position: absolute;
+  right: 14px;
+  top: 14px;
+  width: 12px;
+  height: 12px;
+  border-radius: 999px;
+  box-shadow: 0 0 0 5px #ffffff0c;
+}
+
+.kpi-orb.blue {
+  background: #33b5ff;
+}
+
+.kpi-orb.green {
+  background: #33d986;
+}
+
+.kpi-orb.amber {
+  background: #f2a43a;
+}
+
+.kpi-label {
+  color: #b9d2ed;
+  font-weight: 500;
+}
+
 .dashboard-target-list {
   display: grid;
-  gap: 12px;
+  gap: 14px;
+}
+
+.dashboard-targets-card {
+  box-shadow: 0 14px 34px #04163444;
 }
 
 .dashboard-target-card {
@@ -293,19 +348,29 @@ button {
   align-items: center;
   border: 1px solid #2b5b8f;
   border-radius: 12px;
-  padding: 14px;
-  background: linear-gradient(180deg, #132c58, #102549);
+  padding: 16px;
+  background: linear-gradient(180deg, #143462, #102a4f);
+  box-shadow: inset 0 1px 0 #6fc5ff1a;
+  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
+}
+
+.dashboard-target-card:hover {
+  transform: translateY(-1px);
+  border-color: #3d84c8;
+  box-shadow: 0 10px 22px #071a3960;
 }
 
 .target-main h4 {
   margin: 0;
-  font-size: 20px;
+  font-size: 24px;
   font-weight: 800;
+  letter-spacing: 0.01em;
 }
 
 .target-main p {
-  margin: 5px 0 0 0;
+  margin: 6px 0 0 0;
   color: #d5e7ff;
+  font-size: 17px;
 }
 
 .target-title-row {
@@ -337,16 +402,18 @@ button {
 
 .details-btn {
   display: inline-block;
-  padding: 8px 14px;
+  padding: 10px 14px;
   border-radius: 10px;
   font-weight: 700;
-  border: 1px solid #2d9adb;
-  background: linear-gradient(180deg, #1c6aab, #17568c);
+  border: 1px solid #4db8f1;
+  background: linear-gradient(180deg, #2284c8, #1a67a1);
   color: #eaf5ff;
+  box-shadow: 0 8px 16px #081d3d66;
 }
 
 .details-btn:hover {
-  border-color: #6ed2ff;
+  border-color: #85e4ff;
+  filter: brightness(1.05);
 }
 
 .query-insights-page .query-toolbar {