diff --git a/src/App.js b/src/App.js
index 4005acd..d12c500 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1354,7 +1354,7 @@ function App() {
             <p className="text-lg font-medium text-gray-800">{session.profile.name}</p>
             <p className="text-gray-500 text-sm">Profil-ID: {session.profile.id}</p>
           </div>
-          <div className="flex flex-wrap gap-2">
+          <div className="flex flex-wrap gap-2 items-center">
             <button
               onClick={() => refreshStoresAndConfig({ block: false })}
               className="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors"
@@ -1367,6 +1367,30 @@ function App() {
             >
               Logout
             </button>
+            <button
+              type="button"
+              onClick={() => setNotificationPanelOpen((prev) => !prev)}
+              className={`flex items-center justify-center w-11 h-11 rounded-full border ${
+                notificationPanelOpen ? 'border-blue-500 text-blue-600' : 'border-gray-300 text-gray-600'
+              } hover:text-blue-700 hover:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-400 transition`}
+              title="Benachrichtigungen konfigurieren"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M11.25 4.5l.75-2.25.75 2.25a2.25 2.25 0 002.12 1.462l2.25.088-1.77 1.287a2.25 2.25 0 00-.81 2.38l.6 2.138-1.92-1.08a2.25 2.25 0 00-2.19 0l-1.92 1.08.6-2.138a2.25 2.25 0 00-.81-2.38L6.63 6.05l2.25-.088A2.25 2.25 0 0011.25 4.5z"
+                />
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M12 15.75l.75-2.25.75 2.25a2.25 2.25 0 002.12 1.462l2.25.088-1.77 1.287a2.25 2.25 0 00-.81 2.38l.6 2.138-1.92-1.08a2.25 2.25 0 00-2.19 0l-1.92 1.08.6-2.138a2.25 2.25 0 00-.81-2.38l-1.77-1.287 2.25-.088A2.25 2.25 0 0012 15.75z"
+                />
+              </svg>
+            </button>
+            {notificationLoading && <span className="text-sm text-gray-500 ml-1">Lade…</span>}
           </div>
         </div>
       </div>
@@ -1435,40 +1459,19 @@ function App() {
         )}
       </div>
 
+      {notificationPanelOpen && (
       <div className="mb-6 border border-gray-200 rounded-lg p-4 bg-gray-50">
-        <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
-              <div className="flex items-center gap-3">
-                <div>
-                  <h2 className="text-xl font-semibold text-gray-800">Benachrichtigungen</h2>
-                  <p className="text-sm text-gray-600">
-                    Erhalte Hinweise über ntfy oder Telegram, sobald Slots gefunden oder gebucht wurden.
-                  </p>
-                </div>
-                <button
-                  type="button"
-                  onClick={() => setNotificationPanelOpen((prev) => !prev)}
-                  className="flex items-center justify-center w-8 h-8 rounded-full border border-gray-300 text-gray-600 hover:text-gray-900 hover:border-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-400 transition"
-                  title="Einstellungen anzeigen"
-                >
-                  <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11.25 4.5l.75-2.25.75 2.25a2.25 2.25 0 002.12 1.462l2.25.088-1.77 1.287a2.25 2.25 0 00-.81 2.38l.6 2.138-1.92-1.08a2.25 2.25 0 00-2.19 0l-1.92 1.08.6-2.138a2.25 2.25 0 00-.81-2.38L6.63 6.05l2.25-.088A2.25 2.25 0 0011.25 4.5z" />
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15.75l.75-2.25.75 2.25a2.25 2.25 0 002.12 1.462l2.25.088-1.77 1.287a2.25 2.25 0 00-.81 2.38l.6 2.138-1.92-1.08a2.25 2.25 0 00-2.19 0l-1.92 1.08.6-2.138a2.25 2.25 0 00-.81-2.38l-1.77-1.287 2.25-.088A2.25 2.25 0 0012 15.75z" />
-                  </svg>
-                </button>
-              </div>
-              {notificationLoading && <span className="text-sm text-gray-500">Lade Einstellungen…</span>}
-            </div>
         {notificationError && (
-          <div className="mt-4 bg-red-100 border border-red-300 text-red-700 px-4 py-2 rounded">
+          <div className="mb-4 bg-red-100 border border-red-300 text-red-700 px-4 py-2 rounded">
             {notificationError}
           </div>
         )}
         {notificationMessage && (
-          <div className="mt-4 bg-green-100 border border-green-300 text-green-700 px-4 py-2 rounded">
+          <div className="mb-4 bg-green-100 border border-green-300 text-green-700 px-4 py-2 rounded">
             {notificationMessage}
           </div>
         )}
-        <div className="grid md:grid-cols-2 gap-4 mt-4">
+        <div className="grid md:grid-cols-2 gap-4">
           <div className="bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
             <div className="flex items-center justify-between mb-3">
               <div>
@@ -1505,24 +1508,16 @@ function App() {
                     disabled={!notificationSettings.ntfy.enabled}
                   />
                 </div>
-                <div>
-                  <label className="block text-xs font-semibold text-gray-600 mb-1">
-                    Eigener Server (optional)
-                  </label>
-                  <input
-                    type="text"
-                    value={notificationSettings.ntfy.serverUrl}
-                    onChange={(e) => handleNotificationFieldChange('ntfy', 'serverUrl', e.target.value)}
-                    placeholder={notificationCapabilities.ntfy.serverUrl || 'https://ntfy.sh'}
-                    className="border rounded p-2 w-full focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-                    disabled={!notificationSettings.ntfy.enabled}
-                  />
-                  {notificationCapabilities.ntfy.topicPrefix && (
-                    <p className="text-xs text-gray-500 mt-1">
-                      Vom Admin vorgegebenes Präfix: {notificationCapabilities.ntfy.topicPrefix}
-                    </p>
-                  )}
-                </div>
+                {notificationCapabilities.ntfy.serverUrl && (
+                  <p className="text-xs text-gray-500">
+                    Server: {notificationCapabilities.ntfy.serverUrl} (vom Admin festgelegt)
+                  </p>
+                )}
+                {notificationCapabilities.ntfy.topicPrefix && (
+                  <p className="text-xs text-gray-500">
+                    Präfix: {notificationCapabilities.ntfy.topicPrefix} (Bindestrich wird automatisch ergänzt)
+                  </p>
+                )}
                 <button
                   type="button"
                   onClick={() => sendNotificationTest('ntfy')}
@@ -1586,14 +1581,6 @@ function App() {
             )}
           </div>
         </div>
-
-        {!notificationPanelOpen && (
-          <div className="mt-4 text-sm text-gray-500">
-            Benachrichtigungen sind aktuell {notificationSettings.ntfy.enabled || notificationSettings.telegram.enabled ? 'aktiviert' : 'deaktiviert'}. Klicke auf das Zahnrad, um Details anzuzeigen.
-          </div>
-        )}
-        }
-
         <div className="flex items-center justify-end mt-4 gap-3">
           <button
             type="button"
@@ -1613,6 +1600,7 @@ function App() {
           </button>
         </div>
       </div>
+      )}
 
       <div className="flex justify-center mb-4 space-x-4">
         <a