diff --git a/desktop-client/src-tauri/src/lib.rs b/desktop-client/src-tauri/src/lib.rs
index 469b629..2751410 100644
--- a/desktop-client/src-tauri/src/lib.rs
+++ b/desktop-client/src-tauri/src/lib.rs
@@ -213,6 +213,24 @@ fn load_state(app: AppHandle, state: State<'_, AppState>) -> Result<Option<Enrol
     Ok(loaded.map(|value| value.enrollment))
 }
 
+#[tauri::command]
+fn clear_session(app: AppHandle, state: State<'_, AppState>) -> Result<(), String> {
+    let app_dir = ensure_app_dir(&app)?;
+    let session_path = app_dir.join("session.json");
+    let profile_path = app_dir.join(format!("{}.conf", PROFILE_NAME));
+
+    if session_path.exists() {
+        fs::remove_file(&session_path).map_err(|err| format!("Unable to remove session state: {}", err))?;
+    }
+    if profile_path.exists() {
+        fs::remove_file(&profile_path).map_err(|err| format!("Unable to remove profile: {}", err))?;
+    }
+
+    let mut session = state.session.lock().map_err(|_| "Unable to clear client state".to_string())?;
+    *session = None;
+    Ok(())
+}
+
 #[tauri::command]
 async fn sync_profile(app: AppHandle, state: State<'_, AppState>) -> Result<EnrollmentResult, String> {
     let existing = {
@@ -417,7 +435,7 @@ pub fn run() {
             }
             _ => {}
         })
-        .invoke_handler(tauri::generate_handler![load_state, enroll_device, sync_profile, connect_tunnel, disconnect_tunnel])
+        .invoke_handler(tauri::generate_handler![load_state, clear_session, enroll_device, sync_profile, connect_tunnel, disconnect_tunnel])
         .run(tauri::generate_context!())
         .expect("error while running tauri application");
 }
diff --git a/desktop-client/src/App.tsx b/desktop-client/src/App.tsx
index cdc58b2..61b7f3f 100644
--- a/desktop-client/src/App.tsx
+++ b/desktop-client/src/App.tsx
@@ -103,6 +103,17 @@ export function App() {
     }
   }
 
+  async function resetEnrollment() {
+    try {
+      await invoke("clear_session");
+      setConnected(false);
+      setState(null);
+      setError(null);
+    } catch (err) {
+      setError(formatInvokeError(err, "Unable to clear local profile"));
+    }
+  }
+
   return (
     <div className="client-shell">
       <div className="app-frame">
@@ -111,14 +122,19 @@ export function App() {
             <img src="/icon.png" alt="NexaVPN" />
             <div className="brand-copy">
               <p className="eyebrow">NexaVPN</p>
-              <h1>Desktop Access Client</h1>
-              <p>Provisioned WireGuard access with profile sync and one-click reconnect.</p>
+              <h1>VPN Client</h1>
+              <p>{state ? profileLabel : "Sign in to provision this device"}</p>
             </div>
           </div>
           <div className="top-actions">
             {state ? (
               <button className="shell-button-secondary" disabled={syncing} onClick={onSyncProfile} type="button">
-                {syncing ? "Syncing..." : "Sync profile"}
+                {syncing ? "Syncing..." : "Sync"}
+              </button>
+            ) : null}
+            {state ? (
+              <button className="shell-button-secondary" onClick={resetEnrollment} type="button">
+                Logout
               </button>
             ) : null}
             <button className="shell-button" disabled={!state} onClick={toggleConnection} type="button">
@@ -127,34 +143,13 @@ export function App() {
           </div>
         </div>
 
-        <section className="hero-surface">
-          <div className="hero-copy">
-            <p className="eyebrow">Managed Tunnel</p>
-            <h2>Private access with fewer moving parts.</h2>
-            <p>
-              NexaVPN signs you in, enrolls the device, stores the WireGuard profile locally, and lets you resync the
-              assigned access profile after policy changes.
-            </p>
-          </div>
-          <div className="hero-meta">
-            <div className="meta-tile">
-              <span className="eyebrow">Current profile</span>
-              <strong>{profileLabel}</strong>
-            </div>
-            <div className="meta-tile">
-              <span className="eyebrow">Last sync</span>
-              <strong>{state?.lastSyncTime ?? "Not synced yet"}</strong>
-            </div>
-          </div>
-        </section>
-
         <div className="body-grid">
           {!state ? (
             <section className="login-panel">
               <div className="surface-header">
                 <div>
-                  <p className="eyebrow">Onboarding</p>
-                  <h3>Sign in and provision this device</h3>
+                  <p className="eyebrow">Sign in</p>
+                  <h3>Provision device</h3>
                 </div>
               </div>
               <form onSubmit={onSubmit}>
@@ -182,11 +177,11 @@ export function App() {
             <section className="status-panel">
               <div className="status-top">
                 <div>
-                  <p className="eyebrow">Connection</p>
+                  <p className="eyebrow">Status</p>
                   <h3>{connected ? "Connected" : "Disconnected"}</h3>
                   <div className="status-state">
                     <span className={`status-dot ${connected ? "online" : ""}`} />
-                    {connected ? "Tunnel active" : "Ready to connect"}
+                    {connected ? "Tunnel active" : "Ready"}
                   </div>
                 </div>
               </div>
@@ -194,8 +189,8 @@ export function App() {
               <div className="surface">
                 <div className="surface-header">
                   <div>
-                    <p className="eyebrow">Session</p>
-                    <h4>Provisioned device state</h4>
+                    <p className="eyebrow">Connection</p>
+                    <h4>Current profile</h4>
                   </div>
                 </div>
                 <div className="status-grid">
@@ -208,8 +203,8 @@ export function App() {
                     <strong>{state.gatewayEndpoint}</strong>
                   </div>
                   <div className="detail-card">
-                    <span>Profile revision</span>
-                    <strong>{state.profileRevision}</strong>
+                    <span>Profile</span>
+                    <strong>{profileLabel}</strong>
                   </div>
                   <div className="detail-card">
                     <span>Last sync</span>
@@ -221,8 +216,8 @@ export function App() {
               <div className="surface">
                 <div className="surface-header">
                   <div>
-                    <p className="eyebrow">Profile</p>
-                    <h4>Assigned access profile</h4>
+                    <p className="eyebrow">Local</p>
+                    <h4>Stored config</h4>
                   </div>
                 </div>
                 <div className="profile-grid">
@@ -231,8 +226,8 @@ export function App() {
                     <strong>{state.profilePath}</strong>
                   </div>
                   <div className="profile-card">
-                    <span>Tunnel strategy</span>
-                    <strong>{state.tunnelStrategy}</strong>
+                    <span>Revision</span>
+                    <strong>{state.profileRevision}</strong>
                   </div>
                 </div>
               </div>
@@ -244,19 +239,21 @@ export function App() {
           <aside className="status-panel">
             <div className="surface-header">
               <div>
-                <p className="eyebrow">Resources</p>
-                <h4>Allowed destinations</h4>
+                <p className="eyebrow">Access</p>
+                <h4>Resources</h4>
               </div>
             </div>
-            <p>
-              The current backend issues one effective profile per device. After policy changes, use <strong>Sync
-              profile</strong> to pull the latest assigned access.
-            </p>
+            <p>After policy changes, press <strong>Sync</strong> to refresh this device profile.</p>
             <ul className="resource-list">
               {(state?.resources ?? ["No resources assigned yet"]).map((resource) => (
                 <li key={resource}>{resource}</li>
               ))}
             </ul>
+            {state ? (
+              <button className="shell-button-secondary" onClick={resetEnrollment} type="button">
+                Neu einbinden
+              </button>
+            ) : null}
           </aside>
         </div>
       </div>
diff --git a/desktop-client/src/styles.css b/desktop-client/src/styles.css
index c8ebc81..81e5cdd 100644
--- a/desktop-client/src/styles.css
+++ b/desktop-client/src/styles.css
@@ -35,7 +35,7 @@ input {
   width: min(1120px, 100%);
   margin: 0 auto;
   display: grid;
-  gap: 22px;
+  gap: 18px;
 }
 
 .top-strip {
@@ -72,7 +72,6 @@ input {
 }
 
 .brand-copy h1,
-.hero-copy h2,
 .status-panel h3 {
   margin: 0;
 }
@@ -120,7 +119,6 @@ input {
   cursor: default;
 }
 
-.hero-surface,
 .surface,
 .status-panel,
 .login-panel {
@@ -130,50 +128,6 @@ input {
   backdrop-filter: blur(18px);
 }
 
-.hero-surface {
-  border-radius: 30px;
-  padding: 28px;
-  display: grid;
-  grid-template-columns: 1.2fr 0.8fr;
-  gap: 20px;
-  align-items: center;
-}
-
-.hero-copy {
-  display: grid;
-  gap: 14px;
-}
-
-.hero-copy h2 {
-  font-size: clamp(2rem, 4vw, 3.6rem);
-  line-height: 1.04;
-  max-width: 10ch;
-}
-
-.hero-copy p {
-  max-width: 56ch;
-  font-size: 1.03rem;
-  line-height: 1.6;
-}
-
-.hero-meta {
-  display: grid;
-  gap: 14px;
-}
-
-.meta-tile {
-  padding: 18px;
-  border-radius: 22px;
-  background: linear-gradient(180deg, rgba(117, 227, 186, 0.08), rgba(117, 227, 186, 0.02));
-  border: 1px solid rgba(117, 227, 186, 0.16);
-}
-
-.meta-tile strong {
-  display: block;
-  margin-top: 8px;
-  font-size: 1.1rem;
-}
-
 .body-grid {
   display: grid;
   grid-template-columns: 1.3fr 0.7fr;
@@ -188,6 +142,12 @@ input {
   gap: 20px;
 }
 
+.status-panel > p {
+  margin: 0;
+  color: #9eb1d1;
+  line-height: 1.5;
+}
+
 .status-top {
   display: flex;
   align-items: center;
@@ -310,7 +270,6 @@ input {
 }
 
 @media (max-width: 960px) {
-  .hero-surface,
   .body-grid {
     grid-template-columns: 1fr;
   }