diff --git a/apps/web/src/appSettings.test.ts b/apps/web/src/appSettings.test.ts
index 7c9a48737..c4bbb5edd 100644
--- a/apps/web/src/appSettings.test.ts
+++ b/apps/web/src/appSettings.test.ts
@@ -1,7 +1,14 @@
 import * as Schema from "effect/Schema";
 import { describe, expect, it } from "vitest";
 
-import { AppSettingsSchema, DEFAULT_PR_REVIEW_REQUEST_CHANGES_TONE } from "./appSettings";
+import {
+  AppSettingsSchema,
+  DEFAULT_PR_REVIEW_REQUEST_CHANGES_TONE,
+  DEFAULT_SIDEBAR_FONT_SIZE,
+  DEFAULT_SIDEBAR_PROJECT_ROW_HEIGHT,
+  DEFAULT_SIDEBAR_SPACING,
+  DEFAULT_SIDEBAR_THREAD_ROW_HEIGHT,
+} from "./appSettings";
 
 describe("AppSettingsSchema", () => {
   it("defaults codeViewerAutosave to false", () => {
@@ -17,6 +24,15 @@ describe("AppSettingsSchema", () => {
     expect(settings.includeDiagnosticsTipsInCopy).toBe(false);
   });
 
+  it("defaults sidebar appearance controls", () => {
+    const settings = Schema.decodeUnknownSync(AppSettingsSchema)({});
+
+    expect(settings.sidebarProjectRowHeight).toBe(DEFAULT_SIDEBAR_PROJECT_ROW_HEIGHT);
+    expect(settings.sidebarThreadRowHeight).toBe(DEFAULT_SIDEBAR_THREAD_ROW_HEIGHT);
+    expect(settings.sidebarFontSize).toBe(DEFAULT_SIDEBAR_FONT_SIZE);
+    expect(settings.sidebarSpacing).toBe(DEFAULT_SIDEBAR_SPACING);
+  });
+
   it("preserves an explicit codeViewerAutosave setting", () => {
     const settings = Schema.decodeUnknownSync(AppSettingsSchema)({
       codeViewerAutosave: true,
diff --git a/apps/web/src/appSettings.ts b/apps/web/src/appSettings.ts
index f7d05f974..d72a06963 100644
--- a/apps/web/src/appSettings.ts
+++ b/apps/web/src/appSettings.ts
@@ -20,6 +20,18 @@ const MAX_CUSTOM_MODEL_COUNT = 32;
 export const MAX_CUSTOM_MODEL_LENGTH = 256;
 const BACKGROUND_IMAGE_KEY = "okcode:background-image";
 const BACKGROUND_OPACITY_KEY = "okcode:background-opacity";
+export const SIDEBAR_PROJECT_ROW_HEIGHT_MIN = 24;
+export const SIDEBAR_PROJECT_ROW_HEIGHT_MAX = 44;
+export const DEFAULT_SIDEBAR_PROJECT_ROW_HEIGHT = 28;
+export const SIDEBAR_THREAD_ROW_HEIGHT_MIN = 24;
+export const SIDEBAR_THREAD_ROW_HEIGHT_MAX = 44;
+export const DEFAULT_SIDEBAR_THREAD_ROW_HEIGHT = 28;
+export const SIDEBAR_FONT_SIZE_MIN = 10;
+export const SIDEBAR_FONT_SIZE_MAX = 16;
+export const DEFAULT_SIDEBAR_FONT_SIZE = 12;
+export const SIDEBAR_SPACING_MIN = 4;
+export const SIDEBAR_SPACING_MAX = 12;
+export const DEFAULT_SIDEBAR_SPACING = 8;
 
 export const TimestampFormat = Schema.Literals(["locale", "12-hour", "24-hour"]);
 export type TimestampFormat = typeof TimestampFormat.Type;
@@ -92,6 +104,12 @@ export const AppSettingsSchema = Schema.Struct({
   ),
   timestampFormat: TimestampFormat.pipe(withDefaults(() => DEFAULT_TIMESTAMP_FORMAT)),
   sidebarOpacity: Schema.Number.pipe(withDefaults(() => 1)),
+  sidebarProjectRowHeight: Schema.Number.pipe(
+    withDefaults(() => DEFAULT_SIDEBAR_PROJECT_ROW_HEIGHT),
+  ),
+  sidebarThreadRowHeight: Schema.Number.pipe(withDefaults(() => DEFAULT_SIDEBAR_THREAD_ROW_HEIGHT)),
+  sidebarFontSize: Schema.Number.pipe(withDefaults(() => DEFAULT_SIDEBAR_FONT_SIZE)),
+  sidebarSpacing: Schema.Number.pipe(withDefaults(() => DEFAULT_SIDEBAR_SPACING)),
   sidebarHideFiles: Schema.Boolean.pipe(withDefaults(() => false)),
   sidebarAccentProjectNames: Schema.Boolean.pipe(withDefaults(() => true)),
   sidebarAccentColorOverride: Schema.optional(Schema.String.check(Schema.isMaxLength(64))),
@@ -185,12 +203,36 @@ function clampBackgroundOpacity(value: number): number {
   return Math.max(0.05, Math.min(1, value));
 }
 
+function clampSidebarProjectRowHeight(value: number): number {
+  return Math.round(
+    Math.max(SIDEBAR_PROJECT_ROW_HEIGHT_MIN, Math.min(SIDEBAR_PROJECT_ROW_HEIGHT_MAX, value)),
+  );
+}
+
+function clampSidebarThreadRowHeight(value: number): number {
+  return Math.round(
+    Math.max(SIDEBAR_THREAD_ROW_HEIGHT_MIN, Math.min(SIDEBAR_THREAD_ROW_HEIGHT_MAX, value)),
+  );
+}
+
+function clampSidebarFontSize(value: number): number {
+  return Math.round(Math.max(SIDEBAR_FONT_SIZE_MIN, Math.min(SIDEBAR_FONT_SIZE_MAX, value)));
+}
+
+function clampSidebarSpacing(value: number): number {
+  return Math.round(Math.max(SIDEBAR_SPACING_MIN, Math.min(SIDEBAR_SPACING_MAX, value)));
+}
+
 function normalizeAppSettings(settings: AppSettings): AppSettings {
   return {
     ...settings,
     backgroundImageUrl: settings.backgroundImageUrl.trim(),
     backgroundImageOpacity: clampBackgroundOpacity(settings.backgroundImageOpacity),
     sidebarOpacity: clampOpacity(settings.sidebarOpacity),
+    sidebarProjectRowHeight: clampSidebarProjectRowHeight(settings.sidebarProjectRowHeight),
+    sidebarThreadRowHeight: clampSidebarThreadRowHeight(settings.sidebarThreadRowHeight),
+    sidebarFontSize: clampSidebarFontSize(settings.sidebarFontSize),
+    sidebarSpacing: clampSidebarSpacing(settings.sidebarSpacing),
     customCodexModels: normalizeCustomModelSlugs(settings.customCodexModels, "codex"),
     customClaudeModels: normalizeCustomModelSlugs(settings.customClaudeModels, "claudeAgent"),
     customOpenClawModels: normalizeCustomModelSlugs(settings.customOpenClawModels, "openclaw"),
diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx
index 7db4e0db8..70c56e84b 100644
--- a/apps/web/src/components/Sidebar.tsx
+++ b/apps/web/src/components/Sidebar.tsx
@@ -48,7 +48,16 @@ import {
   XIcon,
   XCircleIcon,
 } from "lucide-react";
-import { type MouseEvent, memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  type CSSProperties,
+  type MouseEvent,
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { CloneRepositoryDialog } from "~/components/CloneRepositoryDialog";
 import { EditableThreadTitle } from "~/components/EditableThreadTitle";
 import { useClientMode } from "~/hooks/useClientMode";
@@ -139,6 +148,48 @@ const SIDEBAR_THREAD_SORT_LABELS: Record<SidebarThreadSortOrder, string> = {
 };
 const EMPTY_THREADS: readonly Thread[] = [];
 const EMPTY_THREAD_IDS: readonly ThreadIdType[] = [];
+
+type SidebarDensityStyle = CSSProperties & {
+  "--ok-sidebar-project-row-height": string;
+  "--ok-sidebar-thread-row-height": string;
+  "--ok-sidebar-font-size": string;
+  "--ok-sidebar-spacing": string;
+};
+
+const SIDEBAR_PROJECT_HEADER_STYLE: CSSProperties = {
+  gap: "calc(var(--ok-sidebar-spacing) * 0.5)",
+};
+
+const SIDEBAR_PROJECT_ROW_STYLE: CSSProperties = {
+  minHeight: "var(--ok-sidebar-project-row-height)",
+  paddingInline: "var(--ok-sidebar-spacing)",
+  paddingBlock: "calc(var(--ok-sidebar-spacing) * 0.75)",
+  fontSize: "var(--ok-sidebar-font-size)",
+};
+
+const SIDEBAR_PROJECT_TITLE_STYLE: CSSProperties = {
+  fontSize: "var(--ok-sidebar-font-size)",
+};
+
+const SIDEBAR_THREAD_LIST_STYLE: CSSProperties = {
+  gap: "calc(var(--ok-sidebar-spacing) * 0.25)",
+  paddingInline: "calc(var(--ok-sidebar-spacing) * 0.5)",
+};
+
+const SIDEBAR_THREAD_ROW_STYLE: CSSProperties = {
+  minHeight: "var(--ok-sidebar-thread-row-height)",
+  paddingInline: "var(--ok-sidebar-spacing)",
+  paddingBlock: "calc(var(--ok-sidebar-spacing) * 0.5)",
+  gap: "calc(var(--ok-sidebar-spacing) * 0.5)",
+  fontSize: "var(--ok-sidebar-font-size)",
+};
+
+const SIDEBAR_COLLAPSE_TOGGLE_STYLE: CSSProperties = {
+  minHeight: "calc(var(--ok-sidebar-thread-row-height) - 4px)",
+  paddingInline: "var(--ok-sidebar-spacing)",
+  fontSize: "calc(var(--ok-sidebar-font-size) - 2px)",
+};
+
 interface PrStatusIndicator {
   label: "PR open" | "PR closed" | "PR merged";
   colorClass: string;
@@ -381,13 +432,14 @@ const MemoizedThreadRow = memo(
           size="sm"
           isActive={isActive}
           className={cn(
-            "h-auto min-h-7 translate-x-0 items-center gap-2 rounded-md px-2 py-1 text-left",
+            "h-auto translate-x-0 items-center rounded-md text-left",
             isActive
               ? "bg-accent/60 text-foreground"
               : isSelected
                 ? "bg-accent/40 text-foreground"
                 : "text-muted-foreground hover:bg-accent/40 hover:text-foreground",
           )}
+          style={SIDEBAR_THREAD_ROW_STYLE}
           onClick={(event) => {
             handleThreadClick(event, thread.id, orderedProjectThreadIds);
           }}
@@ -422,15 +474,15 @@ const MemoizedThreadRow = memo(
           }}
         >
           <ThreadIcon className={cn("size-3.5 shrink-0", threadIconColor)} />
-          <div className="flex min-w-0 flex-1 items-center gap-1.5 text-left">
+          <div className="flex min-w-0 flex-1 items-center text-left">
             <EditableThreadTitle
               title={thread.title}
               isEditing={editingThreadId === thread.id}
               draftTitle={editingThreadTitle}
               inputRef={bindInputRef}
               containerClassName="min-w-0 flex-1"
-              titleClassName="min-w-0 flex-1 truncate text-xs"
-              inputClassName="h-6 px-1 text-xs"
+              titleClassName="min-w-0 flex-1 truncate leading-tight"
+              inputClassName="h-auto min-h-0 px-1 text-[length:var(--ok-sidebar-font-size)] leading-tight"
               onStartEditing={() => {
                 startEditing({
                   threadId: thread.id,
@@ -610,6 +662,21 @@ export default function Sidebar() {
     () => sortThreadsByProjectIdForSidebar(sidebarThreads, appSettings.sidebarThreadSortOrder),
     [appSettings.sidebarThreadSortOrder, sidebarThreads],
   );
+  const sidebarDensityStyle = useMemo(
+    () =>
+      ({
+        "--ok-sidebar-project-row-height": `${appSettings.sidebarProjectRowHeight}px`,
+        "--ok-sidebar-thread-row-height": `${appSettings.sidebarThreadRowHeight}px`,
+        "--ok-sidebar-font-size": `${appSettings.sidebarFontSize}px`,
+        "--ok-sidebar-spacing": `${appSettings.sidebarSpacing}px`,
+      }) as SidebarDensityStyle,
+    [
+      appSettings.sidebarFontSize,
+      appSettings.sidebarProjectRowHeight,
+      appSettings.sidebarSpacing,
+      appSettings.sidebarThreadRowHeight,
+    ],
+  );
   const orderedThreadIdsByProjectId = useMemo(() => {
     const orderedThreadIds = new Map<ProjectId, ThreadIdType[]>();
     for (const [projectId, projectThreads] of sortedThreadsByProjectId) {
@@ -1366,16 +1433,20 @@ export default function Sidebar() {
     return (
       <Collapsible className="group/collapsible" open={shouldShowThreadPanel}>
         <div
-          className="group/project-header relative flex items-center gap-1 rounded-md"
-          style={{ backgroundColor: isDark ? pColor.bgDark : pColor.bg }}
+          className="group/project-header relative flex items-center rounded-md"
+          style={{
+            ...SIDEBAR_PROJECT_HEADER_STYLE,
+            backgroundColor: isDark ? pColor.bgDark : pColor.bg,
+          }}
         >
           <SidebarMenuButton
             ref={isManualProjectSorting ? dragHandleProps?.setActivatorNodeRef : undefined}
             size="sm"
             className={cn(
-              "min-w-0 flex-1 gap-0 rounded-md px-2 py-1.5 text-left hover:bg-transparent",
+              "h-auto min-w-0 flex-1 gap-0 rounded-md text-left hover:bg-transparent",
               isManualProjectSorting ? "cursor-grab active:cursor-grabbing" : "cursor-pointer",
             )}
+            style={SIDEBAR_PROJECT_ROW_STYLE}
             {...(isManualProjectSorting && dragHandleProps ? dragHandleProps.attributes : {})}
             {...(isManualProjectSorting && dragHandleProps ? dragHandleProps.listeners : {})}
             onPointerDownCapture={handleProjectTitlePointerDownCapture}
@@ -1394,7 +1465,8 @@ export default function Sidebar() {
                 ref={bindProjectInputRef}
                 type="text"
                 value={draftProjectTitle}
-                className="min-w-0 flex-1 rounded border border-primary/40 bg-background px-1 text-xs font-medium outline-none focus:border-primary"
+                className="min-w-0 flex-1 rounded border border-primary/40 bg-background px-1 font-medium outline-none focus:border-primary"
+                style={SIDEBAR_PROJECT_TITLE_STYLE}
                 onChange={(e) => setDraftProjectTitle(e.target.value)}
                 onKeyDown={(e) => {
                   if (e.key === "Enter") {
@@ -1412,15 +1484,16 @@ export default function Sidebar() {
               <span className="min-w-0 flex-1">
                 <span
                   className={cn(
-                    "block truncate text-xs font-semibold",
+                    "block truncate font-semibold leading-tight",
                     projectNameTone === "mutedStrong" && "text-muted-foreground/72",
                     projectNameTone === "mutedSoft" && "text-muted-foreground/48",
                   )}
-                  style={
-                    projectNameTone === "project"
+                  style={{
+                    ...SIDEBAR_PROJECT_TITLE_STYLE,
+                    ...(projectNameTone === "project"
                       ? { color: isDark ? pColor.textDark : pColor.text }
-                      : undefined
-                  }
+                      : {}),
+                  }}
                 >
                   {project.name}
                 </span>
@@ -1452,7 +1525,10 @@ export default function Sidebar() {
         </div>
 
         <CollapsibleContent>
-          <SidebarMenuSub className="relative mx-0 my-0 w-auto translate-x-0 gap-0 border-none bg-transparent px-1 py-0">
+          <SidebarMenuSub
+            className="relative mx-0 my-0 w-auto translate-x-0 border-none bg-transparent py-0"
+            style={SIDEBAR_THREAD_LIST_STYLE}
+          >
             {renderedThreads.map((thread) => (
               <MemoizedThreadRow
                 key={thread.id}
@@ -1486,7 +1562,8 @@ export default function Sidebar() {
                   render={<button type="button" />}
                   data-thread-selection-safe
                   size="sm"
-                  className="h-6 w-full translate-x-0 justify-start px-2 text-left text-[10px] text-muted-foreground/60 hover:bg-accent hover:text-muted-foreground/80"
+                  className="h-auto w-full translate-x-0 justify-start text-left text-muted-foreground/60 hover:bg-accent hover:text-muted-foreground/80"
+                  style={SIDEBAR_COLLAPSE_TOGGLE_STYLE}
                   onClick={() => {
                     expandThreadListForProject(project.id);
                   }}
@@ -1501,7 +1578,8 @@ export default function Sidebar() {
                   render={<button type="button" />}
                   data-thread-selection-safe
                   size="sm"
-                  className="h-6 w-full translate-x-0 justify-start px-2 text-left text-[10px] text-muted-foreground/60 hover:bg-accent hover:text-muted-foreground/80"
+                  className="h-auto w-full translate-x-0 justify-start text-left text-muted-foreground/60 hover:bg-accent hover:text-muted-foreground/80"
+                  style={SIDEBAR_COLLAPSE_TOGGLE_STYLE}
                   onClick={() => {
                     collapseThreadListForProject(project.id);
                   }}
@@ -1972,7 +2050,7 @@ export default function Sidebar() {
             </SidebarMenu>
           </SidebarGroup>
         ) : null}
-        <SidebarGroup className="px-2 py-2">
+        <SidebarGroup className="px-2 py-2" style={sidebarDensityStyle}>
           <div className="mb-1 flex items-center justify-between px-2">
             <span className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground/60">
               Projects
@@ -2159,7 +2237,7 @@ export default function Sidebar() {
               onDragEnd={handleProjectDragEnd}
               onDragCancel={handleProjectDragCancel}
             >
-              <SidebarMenu>
+              <SidebarMenu style={{ gap: "calc(var(--ok-sidebar-spacing) * 0.25)" }}>
                 <SortableContext
                   items={sortedProjects.map((project) => project.id)}
                   strategy={verticalListSortingStrategy}
@@ -2173,7 +2251,7 @@ export default function Sidebar() {
               </SidebarMenu>
             </DndContext>
           ) : (
-            <SidebarMenu className="gap-0.5">
+            <SidebarMenu style={{ gap: "calc(var(--ok-sidebar-spacing) * 0.25)" }}>
               {sortedProjects.map((project, index) => (
                 <SidebarMenuItem key={project.id} className="rounded-md">
                   {renderProjectItem(project, null, index)}
diff --git a/apps/web/src/routes/_chat.settings.tsx b/apps/web/src/routes/_chat.settings.tsx
index 82730defd..d97acea04 100644
--- a/apps/web/src/routes/_chat.settings.tsx
+++ b/apps/web/src/routes/_chat.settings.tsx
@@ -28,6 +28,10 @@ import {
 } from "@okcode/contracts";
 import { getModelOptions, normalizeModelSlug } from "@okcode/shared/model";
 import {
+  DEFAULT_SIDEBAR_FONT_SIZE,
+  DEFAULT_SIDEBAR_PROJECT_ROW_HEIGHT,
+  DEFAULT_SIDEBAR_SPACING,
+  DEFAULT_SIDEBAR_THREAD_ROW_HEIGHT,
   DEFAULT_PR_REVIEW_REQUEST_CHANGES_TONE,
   getAppModelOptions,
   getCustomModelsForProvider,
@@ -35,6 +39,14 @@ import {
   MODEL_PROVIDER_SETTINGS,
   patchCustomModels,
   PrReviewRequestChangesTone,
+  SIDEBAR_FONT_SIZE_MAX,
+  SIDEBAR_FONT_SIZE_MIN,
+  SIDEBAR_PROJECT_ROW_HEIGHT_MAX,
+  SIDEBAR_PROJECT_ROW_HEIGHT_MIN,
+  SIDEBAR_SPACING_MAX,
+  SIDEBAR_SPACING_MIN,
+  SIDEBAR_THREAD_ROW_HEIGHT_MAX,
+  SIDEBAR_THREAD_ROW_HEIGHT_MIN,
   useAppSettings,
 } from "../appSettings";
 import { APP_BUILD_INFO } from "../branding";
@@ -738,9 +750,18 @@ function SettingsRouteView() {
     ...(settings.backgroundImageOpacity !== defaults.backgroundImageOpacity
       ? ["Background opacity"]
       : []),
+    ...(settings.sidebarOpacity !== defaults.sidebarOpacity ? ["Sidebar opacity"] : []),
+    ...(settings.sidebarProjectRowHeight !== defaults.sidebarProjectRowHeight
+      ? ["Project height"]
+      : []),
+    ...(settings.sidebarThreadRowHeight !== defaults.sidebarThreadRowHeight
+      ? ["Thread height"]
+      : []),
+    ...(settings.sidebarFontSize !== defaults.sidebarFontSize ? ["Sidebar font size"] : []),
+    ...(settings.sidebarSpacing !== defaults.sidebarSpacing ? ["Sidebar spacing"] : []),
     ...(radiusOverride !== null ? ["Border radius"] : []),
     ...(fontOverride ? ["Font family"] : []),
-    ...(fontSizeOverride !== null ? ["Font size"] : []),
+    ...(fontSizeOverride !== null ? ["Code font size"] : []),
   ];
 
   const openKeybindingsFile = useCallback(() => {
@@ -1155,12 +1176,12 @@ function SettingsRouteView() {
                     />
 
                     <SettingsRow
-                      title="Font size"
+                      title="Code font size"
                       description="Adjust the font size for code editors and terminal."
                       resetAction={
                         fontSizeOverride !== null ? (
                           <SettingResetButton
-                            label="font size"
+                            label="code font size"
                             onClick={() => {
                               clearFontSizeOverride();
                               setFontSizeOverrideState(null);
@@ -1182,7 +1203,7 @@ function SettingsRouteView() {
                               setStoredFontSizeOverride(value);
                             }}
                             className="h-1.5 w-24 cursor-pointer appearance-none rounded-full bg-muted accent-foreground sm:w-28"
-                            aria-label="Font size"
+                            aria-label="Code font size"
                           />
                           <span className="w-12 text-right text-xs tabular-nums text-muted-foreground">
                             {fontSizeOverride ?? 12}px
@@ -1301,6 +1322,150 @@ function SettingsRouteView() {
                       }
                     />
 
+                    <SettingsRow
+                      title="Project height"
+                      description="Adjust the height of project rows in the sidebar."
+                      resetAction={
+                        settings.sidebarProjectRowHeight !== defaults.sidebarProjectRowHeight ? (
+                          <SettingResetButton
+                            label="project height"
+                            onClick={() =>
+                              updateSettings({
+                                sidebarProjectRowHeight: DEFAULT_SIDEBAR_PROJECT_ROW_HEIGHT,
+                              })
+                            }
+                          />
+                        ) : null
+                      }
+                      control={
+                        <div className="flex items-center gap-2">
+                          <input
+                            type="range"
+                            min={SIDEBAR_PROJECT_ROW_HEIGHT_MIN}
+                            max={SIDEBAR_PROJECT_ROW_HEIGHT_MAX}
+                            step={1}
+                            value={settings.sidebarProjectRowHeight}
+                            onChange={(e) => {
+                              updateSettings({
+                                sidebarProjectRowHeight: Number(e.target.value),
+                              });
+                            }}
+                            className="h-1.5 w-24 cursor-pointer appearance-none rounded-full bg-muted accent-foreground sm:w-28"
+                            aria-label="Project height"
+                          />
+                          <span className="w-12 text-right text-xs tabular-nums text-muted-foreground">
+                            {settings.sidebarProjectRowHeight}px
+                          </span>
+                        </div>
+                      }
+                    />
+
+                    <SettingsRow
+                      title="Thread height"
+                      description="Adjust the height of thread rows in the sidebar."
+                      resetAction={
+                        settings.sidebarThreadRowHeight !== defaults.sidebarThreadRowHeight ? (
+                          <SettingResetButton
+                            label="thread height"
+                            onClick={() =>
+                              updateSettings({
+                                sidebarThreadRowHeight: DEFAULT_SIDEBAR_THREAD_ROW_HEIGHT,
+                              })
+                            }
+                          />
+                        ) : null
+                      }
+                      control={
+                        <div className="flex items-center gap-2">
+                          <input
+                            type="range"
+                            min={SIDEBAR_THREAD_ROW_HEIGHT_MIN}
+                            max={SIDEBAR_THREAD_ROW_HEIGHT_MAX}
+                            step={1}
+                            value={settings.sidebarThreadRowHeight}
+                            onChange={(e) => {
+                              updateSettings({
+                                sidebarThreadRowHeight: Number(e.target.value),
+                              });
+                            }}
+                            className="h-1.5 w-24 cursor-pointer appearance-none rounded-full bg-muted accent-foreground sm:w-28"
+                            aria-label="Thread height"
+                          />
+                          <span className="w-12 text-right text-xs tabular-nums text-muted-foreground">
+                            {settings.sidebarThreadRowHeight}px
+                          </span>
+                        </div>
+                      }
+                    />
+
+                    <SettingsRow
+                      title="Sidebar font size"
+                      description="Adjust the size of project and thread names in the sidebar."
+                      resetAction={
+                        settings.sidebarFontSize !== defaults.sidebarFontSize ? (
+                          <SettingResetButton
+                            label="sidebar font size"
+                            onClick={() =>
+                              updateSettings({ sidebarFontSize: DEFAULT_SIDEBAR_FONT_SIZE })
+                            }
+                          />
+                        ) : null
+                      }
+                      control={
+                        <div className="flex items-center gap-2">
+                          <input
+                            type="range"
+                            min={SIDEBAR_FONT_SIZE_MIN}
+                            max={SIDEBAR_FONT_SIZE_MAX}
+                            step={1}
+                            value={settings.sidebarFontSize}
+                            onChange={(e) => {
+                              updateSettings({ sidebarFontSize: Number(e.target.value) });
+                            }}
+                            className="h-1.5 w-24 cursor-pointer appearance-none rounded-full bg-muted accent-foreground sm:w-28"
+                            aria-label="Sidebar font size"
+                          />
+                          <span className="w-12 text-right text-xs tabular-nums text-muted-foreground">
+                            {settings.sidebarFontSize}px
+                          </span>
+                        </div>
+                      }
+                    />
+
+                    <SettingsRow
+                      title="Sidebar spacing"
+                      description="Adjust padding and row spacing in the project and thread list."
+                      resetAction={
+                        settings.sidebarSpacing !== defaults.sidebarSpacing ? (
+                          <SettingResetButton
+                            label="sidebar spacing"
+                            onClick={() =>
+                              updateSettings({ sidebarSpacing: DEFAULT_SIDEBAR_SPACING })
+                            }
+                          />
+                        ) : null
+                      }
+                      control={
+                        <div className="flex items-center gap-2">
+                          <input
+                            type="range"
+                            min={SIDEBAR_SPACING_MIN}
+                            max={SIDEBAR_SPACING_MAX}
+                            step={1}
+                            value={settings.sidebarSpacing}
+                            onChange={(e) => {
+                              updateSettings({ sidebarSpacing: Number(e.target.value) });
+                            }}
+                            className="h-1.5 w-24 cursor-pointer appearance-none rounded-full bg-muted accent-foreground sm:w-28"
+                            aria-label="Sidebar spacing"
+                          />
+                          <span className="w-12 text-right text-xs tabular-nums text-muted-foreground">
+                            {settings.sidebarSpacing}px
+                          </span>
+                        </div>
+                      }
+                    />
+
                     <BackgroundImageSettings
                       backgroundImageOpacity={settings.backgroundImageOpacity}
                       backgroundImageUrl={settings.backgroundImageUrl}