diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx
index 01b73253..13464f45 100644
--- a/src/components/Settings.tsx
+++ b/src/components/Settings.tsx
@@ -24,7 +24,7 @@ const Settings: React.FC<SettingsProps> = ({ settings, onSave, onClose, isSaving
 
   return (
     <div className="settings-view">
-      <div className="settings-header">
+      <div className="settings-header-bar">
         <h2>Settings</h2>
         <IconButton
           icon={faTimes}
diff --git a/src/index.css b/src/index.css
index 2323e83b..b0c8bbc8 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1427,29 +1427,35 @@ body {
   flex-direction: column;
   height: 100%;
   overflow: hidden;
-  padding: 1.5rem;
+  padding: 0.75rem 1rem;
   text-align: left;
 }
 
-.settings-header {
+.settings-header-bar {
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  margin-bottom: 2rem;
-  text-align: left;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.75rem 1rem;
+  background: #1a1a1a;
+  border: 1px solid #333;
+  border-radius: 8px;
+  margin-bottom: 1rem;
 }
 
-.settings-header h2 {
+.settings-header-bar h2 {
   margin: 0;
-  font-size: 1.75rem;
+  font-size: 1.25rem;
+  font-weight: 600;
   text-align: left;
 }
 
 .settings-content {
   overflow-y: auto;
   flex: 1;
-  margin-bottom: 2rem;
+  margin-bottom: 1rem;
   text-align: left;
+  padding: 0 0.25rem;
 }
 
 .setting-group {