diff --git a/frontend/src/pages/TargetsPage.jsx b/frontend/src/pages/TargetsPage.jsx
index 345e668..9bbcc31 100644
--- a/frontend/src/pages/TargetsPage.jsx
+++ b/frontend/src/pages/TargetsPage.jsx
@@ -61,11 +61,15 @@ export function TargetsPage() {
   };
 
   return (
-    <div>
+    <div className="targets-page">
       <h2>Targets Management</h2>
       {error && <div className="card error">{error}</div>}
       {canManage && (
-        <form className="card grid two" onSubmit={createTarget}>
+        <form className="card target-form grid two" onSubmit={createTarget}>
+          <div className="target-form-header">
+            <h3>Neues Target</h3>
+            <p>Verbindungsdaten fuer eine PostgreSQL-Instanz.</p>
+          </div>
           <div className="field">
             <label>Name</label>
             <input placeholder="z.B. Prod-DB" value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} required />
@@ -109,7 +113,7 @@ export function TargetsPage() {
           </div>
           <div className="field">
             <label>&nbsp;</label>
-            <button>Target anlegen</button>
+            <button className="primary-btn">Target anlegen</button>
           </div>
         </form>
       )}
@@ -127,7 +131,7 @@ export function TargetsPage() {
           </p>
         </div>
       )}
-      <div className="card">
+      <div className="card targets-table">
         {loading ? (
           <p>Lade Targets...</p>
         ) : (
@@ -147,8 +151,8 @@ export function TargetsPage() {
                   <td>{t.host}:{t.port}</td>
                   <td>{t.dbname}</td>
                   <td>
-                    <Link to={`/targets/${t.id}`}>Details</Link>{" "}
-                    {canManage && <button onClick={() => deleteTarget(t.id)}>Delete</button>}
+                    <Link className="table-link" to={`/targets/${t.id}`}>Details</Link>{" "}
+                    {canManage && <button className="danger-btn" onClick={() => deleteTarget(t.id)}>Delete</button>}
                   </td>
                 </tr>
               ))}
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 5a5210d..23753c4 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -189,6 +189,62 @@ button {
   color: #bfd0ea;
 }
 
+.targets-page h2 {
+  margin-top: 4px;
+  margin-bottom: 16px;
+}
+
+.target-form {
+  position: relative;
+  padding-top: 56px;
+}
+
+.target-form-header {
+  position: absolute;
+  top: 14px;
+  left: 16px;
+}
+
+.target-form-header h3 {
+  margin: 0;
+  font-size: 16px;
+}
+
+.target-form-header p {
+  margin: 2px 0 0 0;
+  color: #92a7cc;
+  font-size: 12px;
+}
+
+.primary-btn {
+  font-weight: 700;
+  border-color: #3e73d4;
+  background: linear-gradient(90deg, #2e7cd4, #265fb4);
+}
+
+.primary-btn:hover {
+  border-color: #6aa8ff;
+  filter: brightness(1.05);
+}
+
+.targets-table table tbody tr:hover {
+  background: #13234880;
+}
+
+.table-link {
+  font-weight: 600;
+}
+
+.danger-btn {
+  margin-left: 8px;
+  border-color: #7a2e43;
+  background: linear-gradient(180deg, #3a1724, #2b1019);
+}
+
+.danger-btn:hover {
+  border-color: #be3f63;
+}
+
 button {
   cursor: pointer;
 }
@@ -317,6 +373,16 @@ td {
   transition: background-color 9999s ease-out 0s;
 }
 
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+textarea:-webkit-autofill,
+select:-webkit-autofill {
+  -webkit-text-fill-color: #e5edf7;
+  -webkit-box-shadow: 0 0 0px 1000px #0f1933 inset;
+  transition: background-color 9999s ease-out 0s;
+}
+
 @keyframes loginEnter {
   from {
     opacity: 0;