diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx
index 5d2a1923..2d3ccf07 100644
--- a/src/components/Settings.tsx
+++ b/src/components/Settings.tsx
@@ -46,120 +46,132 @@ const Settings: React.FC<SettingsProps> = ({ settings, onSave, onClose, isSaving
       </div>
 
       <div className="settings-content">
-          <div className="setting-group">
-            <label htmlFor="collapseOnArticleOpen" className="checkbox-label">
-              <input
-                id="collapseOnArticleOpen"
-                type="checkbox"
-                checked={localSettings.collapseOnArticleOpen !== false}
-                onChange={(e) => setLocalSettings({ ...localSettings, collapseOnArticleOpen: e.target.checked })}
-                className="setting-checkbox"
-              />
-              <span>Collapse bookmark bar when opening an article</span>
-            </label>
-          </div>
+          <div className="settings-section">
+            <h3 className="section-title">Reading & Display</h3>
+            
+            <div className="setting-group">
+              <label htmlFor="readingFont">Reading Font</label>
+              <select
+                id="readingFont"
+                value={localSettings.readingFont || 'system'}
+                onChange={(e) => setLocalSettings({ ...localSettings, readingFont: e.target.value })}
+                className="setting-select"
+              >
+                <option value="system">System Default</option>
+                <option value="inter">Inter</option>
+                <option value="lora">Lora</option>
+                <option value="merriweather">Merriweather</option>
+                <option value="open-sans">Open Sans</option>
+                <option value="roboto">Roboto</option>
+                <option value="source-serif-4">Source Serif 4</option>
+                <option value="crimson-text">Crimson Text</option>
+                <option value="libre-baskerville">Libre Baskerville</option>
+                <option value="pt-serif">PT Serif</option>
+              </select>
+            </div>
 
-          <div className="setting-group setting-inline">
-            <label>Default View Mode</label>
-            <div className="setting-buttons">
-              <IconButton
-                icon={faList}
-                onClick={() => setLocalSettings({ ...localSettings, defaultViewMode: 'compact' })}
-                title="Compact list view"
-                ariaLabel="Compact list view"
-                variant={(localSettings.defaultViewMode || 'compact') === 'compact' ? 'primary' : 'ghost'}
-              />
-              <IconButton
-                icon={faThLarge}
-                onClick={() => setLocalSettings({ ...localSettings, defaultViewMode: 'cards' })}
-                title="Cards view"
-                ariaLabel="Cards view"
-                variant={localSettings.defaultViewMode === 'cards' ? 'primary' : 'ghost'}
-              />
-              <IconButton
-                icon={faImage}
-                onClick={() => setLocalSettings({ ...localSettings, defaultViewMode: 'large' })}
-                title="Large preview view"
-                ariaLabel="Large preview view"
-                variant={localSettings.defaultViewMode === 'large' ? 'primary' : 'ghost'}
-              />
+            <div className="setting-group">
+              <label htmlFor="showUnderlines" className="checkbox-label">
+                <input
+                  id="showUnderlines"
+                  type="checkbox"
+                  checked={localSettings.showUnderlines !== false}
+                  onChange={(e) => setLocalSettings({ ...localSettings, showUnderlines: e.target.checked })}
+                  className="setting-checkbox"
+                />
+                <span>Show highlight underlines</span>
+              </label>
+            </div>
+
+            <div className="setting-preview">
+              <div className="preview-label">Preview</div>
+              <div 
+                className="preview-content" 
+                style={{ fontFamily: previewFontFamily }}
+              >
+                <h3>The Quick Brown Fox</h3>
+                <p>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span className={localSettings.showUnderlines !== false ? "content-highlight" : ""}>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                </p>
+                <p>
+                  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                </p>
+              </div>
             </div>
           </div>
 
-          <div className="setting-group">
-            <label htmlFor="readingFont">Reading Font</label>
-            <select
-              id="readingFont"
-              value={localSettings.readingFont || 'system'}
-              onChange={(e) => setLocalSettings({ ...localSettings, readingFont: e.target.value })}
-              className="setting-select"
-            >
-              <option value="system">System Default</option>
-              <option value="inter">Inter</option>
-              <option value="lora">Lora</option>
-              <option value="merriweather">Merriweather</option>
-              <option value="open-sans">Open Sans</option>
-              <option value="roboto">Roboto</option>
-              <option value="source-serif-4">Source Serif 4</option>
-              <option value="crimson-text">Crimson Text</option>
-              <option value="libre-baskerville">Libre Baskerville</option>
-              <option value="pt-serif">PT Serif</option>
-            </select>
-          </div>
+          <div className="settings-section">
+            <h3 className="section-title">Layout & Navigation</h3>
+            
+            <div className="setting-group setting-inline">
+              <label>Default View Mode</label>
+              <div className="setting-buttons">
+                <IconButton
+                  icon={faList}
+                  onClick={() => setLocalSettings({ ...localSettings, defaultViewMode: 'compact' })}
+                  title="Compact list view"
+                  ariaLabel="Compact list view"
+                  variant={(localSettings.defaultViewMode || 'compact') === 'compact' ? 'primary' : 'ghost'}
+                />
+                <IconButton
+                  icon={faThLarge}
+                  onClick={() => setLocalSettings({ ...localSettings, defaultViewMode: 'cards' })}
+                  title="Cards view"
+                  ariaLabel="Cards view"
+                  variant={localSettings.defaultViewMode === 'cards' ? 'primary' : 'ghost'}
+                />
+                <IconButton
+                  icon={faImage}
+                  onClick={() => setLocalSettings({ ...localSettings, defaultViewMode: 'large' })}
+                  title="Large preview view"
+                  ariaLabel="Large preview view"
+                  variant={localSettings.defaultViewMode === 'large' ? 'primary' : 'ghost'}
+                />
+              </div>
+            </div>
 
-          <div className="setting-preview">
-            <div className="preview-label">Preview</div>
-            <div 
-              className="preview-content" 
-              style={{ fontFamily: previewFontFamily }}
-            >
-              <h3>The Quick Brown Fox</h3>
-              <p>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span className={localSettings.showUnderlines !== false ? "content-highlight" : ""}>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-              </p>
-              <p>
-                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-              </p>
+            <div className="setting-group">
+              <label htmlFor="collapseOnArticleOpen" className="checkbox-label">
+                <input
+                  id="collapseOnArticleOpen"
+                  type="checkbox"
+                  checked={localSettings.collapseOnArticleOpen !== false}
+                  onChange={(e) => setLocalSettings({ ...localSettings, collapseOnArticleOpen: e.target.checked })}
+                  className="setting-checkbox"
+                />
+                <span>Collapse bookmark bar when opening an article</span>
+              </label>
             </div>
           </div>
 
-          <div className="setting-group">
-            <label htmlFor="showUnderlines" className="checkbox-label">
-              <input
-                id="showUnderlines"
-                type="checkbox"
-                checked={localSettings.showUnderlines !== false}
-                onChange={(e) => setLocalSettings({ ...localSettings, showUnderlines: e.target.checked })}
-                className="setting-checkbox"
-              />
-              <span>Show highlight underlines</span>
-            </label>
-          </div>
+          <div className="settings-section">
+            <h3 className="section-title">Startup Preferences</h3>
+            
+            <div className="setting-group">
+              <label htmlFor="sidebarCollapsed" className="checkbox-label">
+                <input
+                  id="sidebarCollapsed"
+                  type="checkbox"
+                  checked={localSettings.sidebarCollapsed === true}
+                  onChange={(e) => setLocalSettings({ ...localSettings, sidebarCollapsed: e.target.checked })}
+                  className="setting-checkbox"
+                />
+                <span>Start with bookmarks sidebar collapsed</span>
+              </label>
+            </div>
 
-          <div className="setting-group">
-            <label htmlFor="sidebarCollapsed" className="checkbox-label">
-              <input
-                id="sidebarCollapsed"
-                type="checkbox"
-                checked={localSettings.sidebarCollapsed === true}
-                onChange={(e) => setLocalSettings({ ...localSettings, sidebarCollapsed: e.target.checked })}
-                className="setting-checkbox"
-              />
-              <span>Start with bookmarks sidebar collapsed</span>
-            </label>
-          </div>
-
-          <div className="setting-group">
-            <label htmlFor="highlightsCollapsed" className="checkbox-label">
-              <input
-                id="highlightsCollapsed"
-                type="checkbox"
-                checked={localSettings.highlightsCollapsed === true}
-                onChange={(e) => setLocalSettings({ ...localSettings, highlightsCollapsed: e.target.checked })}
-                className="setting-checkbox"
-              />
-              <span>Start with highlights panel collapsed</span>
-            </label>
+            <div className="setting-group">
+              <label htmlFor="highlightsCollapsed" className="checkbox-label">
+                <input
+                  id="highlightsCollapsed"
+                  type="checkbox"
+                  checked={localSettings.highlightsCollapsed === true}
+                  onChange={(e) => setLocalSettings({ ...localSettings, highlightsCollapsed: e.target.checked })}
+                  className="setting-checkbox"
+                />
+                <span>Start with highlights panel collapsed</span>
+              </label>
+            </div>
           </div>
       </div>
 
diff --git a/src/index.css b/src/index.css
index 92710264..d92ee808 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1458,6 +1458,25 @@ body {
   padding: 0 0.25rem;
 }
 
+.settings-section {
+  margin-bottom: 2.5rem;
+}
+
+.settings-section:last-child {
+  margin-bottom: 0;
+}
+
+.section-title {
+  font-size: 1rem;
+  font-weight: 600;
+  color: #fff;
+  margin: 0 0 1rem 0;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid #333;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
 .setting-group {
   margin-bottom: 1.5rem;
   text-align: left;