diff --git a/index.html b/index.html
index 5fc9763..505e06e 100644
--- a/index.html
+++ b/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>sheet-music-trainer</title>
   </head>
diff --git a/public/favicon.svg b/public/favicon.svg
new file mode 100644
index 0000000..141ae08
--- /dev/null
+++ b/public/favicon.svg
@@ -0,0 +1,17 @@
+<svg width="64" height="64" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M 2 18 Q 15 -5 28 18"
+    fill="none"
+    stroke="black"
+    stroke-width="3"
+    stroke-linecap="round"
+  />
+  <circle cx="15" cy="18" r="4" fill="black" />
+  
+  <style>
+    @media (prefers-color-scheme: dark) {
+      path { stroke: white; }
+      circle { fill: white; }
+    }
+  </style>
+</svg>
diff --git a/src/App.tsx b/src/App.tsx
index c415013..c2085ef 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -420,13 +420,6 @@ function App() {
               </button>
             </div>
 
-            <button
-              className="icon-button"
-              onClick={() => setIsSettingsOpen(true)}
-              title="Settings"
-            >
-              <Settings size={24} />
-            </button>
             <button
               className="icon-button"
               onClick={() => setShowHelp(true)}
@@ -434,6 +427,13 @@ function App() {
             >
               <HelpCircle size={24} />
             </button>
+            <button
+              className="icon-button"
+              onClick={() => setIsSettingsOpen(true)}
+              title="Settings"
+            >
+              <Settings size={24} />
+            </button>
           </div>
         </header>
       )}
diff --git a/src/components/Logo.tsx b/src/components/Logo.tsx
index 6893674..9f46726 100644
--- a/src/components/Logo.tsx
+++ b/src/components/Logo.tsx
@@ -3,9 +3,9 @@ import React from 'react';
 export const Logo: React.FC<{ className?: string }> = ({ className }) => {
     return (
         <svg
-            width="250"
+            width="260"
             height="40"
-            viewBox="0 0 250 40"
+            viewBox="0 0 260 40"
             xmlns="http://www.w3.org/2000/svg"
             className={className}
             aria-label="sight-reading.de logo"
@@ -18,7 +18,7 @@ export const Logo: React.FC<{ className?: string }> = ({ className }) => {
             </defs>
 
             {/* Icon: Stylized Fermata (Eye) */}
-            <g transform="translate(10, 8) scale(0.8)">
+            <g transform="translate(5, 5) scale(1.1)">
                 {/* The Arc (Eyelid) */}
                 <path
                     d="M 2 18 Q 15 -5 28 18"
@@ -33,8 +33,8 @@ export const Logo: React.FC<{ className?: string }> = ({ className }) => {
 
             {/* Text */}
             <text
-                x="45"
-                y="25"
+                x="48"
+                y="28"
                 fontFamily='"Inter", system-ui, -apple-system, sans-serif'
                 fontSize="20"
                 fill="currentColor"
