diff --git a/src/extensions/App.jsx b/src/extensions/App.jsx
index 0c3fbf5..f3e47bf 100644
--- a/src/extensions/App.jsx
+++ b/src/extensions/App.jsx
@@ -4,7 +4,8 @@
  */
 
 import { useState, useEffect, useCallback } from '@wordpress/element';
-import { TabPanel, Notice } from '@wordpress/components';
+import { TabPanel, Notice, Button } from '@wordpress/components';
+import { cog } from '@wordpress/icons';
 import ChatContainer from './components/ChatContainer';
 import AbilityBrowser from './components/AbilityBrowser';
 import PluginAbilitiesPanel from './components/PluginAbilitiesPanel';
@@ -23,6 +24,7 @@ const App = () => {
 	const [ modelReady, setModelReady ] = useState( false );
 	const [ webGPUError, setWebGPUError ] = useState( null );
 	const [ isExecuting, setIsExecuting ] = useState( false );
+	const [ showSettings, setShowSettings ] = useState( false );
 	// Track initialization phase: 'checking' during initial checks, 'loading' when auto-loading, null when done
 	const [ initPhase, setInitPhase ] = useState( 'checking' );
 	const [ initMessage, setInitMessage ] = useState(
@@ -216,11 +218,6 @@ const App = () => {
 			title: 'Plugin Abilities',
 			className: 'wp-agentic-admin-tab',
 		},
-		{
-			name: 'settings',
-			title: 'Settings',
-			className: 'wp-agentic-admin-tab',
-		},
 		...( FEEDBACK_UPLOAD_ENABLED
 			? [
 					{
@@ -261,8 +258,6 @@ const App = () => {
 				return <AbilityBrowser />;
 			case 'plugin-abilities':
 				return <PluginAbilitiesPanel />;
-			case 'settings':
-				return <SettingsTab />;
 			case 'feedback':
 				return <FeedbackTab />;
 			default:
@@ -273,17 +268,38 @@ const App = () => {
 	return (
 		<div className="wp-agentic-admin-app">
 			<div className="wp-agentic-admin-main">
-				<TabPanel
-					className="wp-agentic-admin-tabs"
-					tabs={ tabs }
-					initialTabName="chat"
-				>
-					{ ( tab ) => (
-						<div className="wp-agentic-admin-tab-content">
-							{ renderTabContent( tab ) }
-						</div>
-					) }
-				</TabPanel>
+				<div className="wp-agentic-admin-tabs-wrapper">
+					<TabPanel
+						className="wp-agentic-admin-tabs"
+						tabs={ tabs }
+						initialTabName="chat"
+						onSelect={ () => setShowSettings( false ) }
+					>
+						{ ( tab ) => (
+							<div className="wp-agentic-admin-tab-content">
+								{ showSettings ? (
+									<SettingsTab />
+								) : (
+									renderTabContent( tab )
+								) }
+							</div>
+						) }
+					</TabPanel>
+					<Button
+						icon={ cog }
+						className={ `wp-agentic-admin-settings-toggle${
+							showSettings
+								? ' is-active'
+								: ''
+						}` }
+						onClick={ () =>
+							setShowSettings( ( prev ) => ! prev )
+						}
+						label="Settings"
+					>
+						Settings
+					</Button>
+				</div>
 			</div>
 
 			<ModelStatus
diff --git a/src/extensions/components/SettingsTab.jsx b/src/extensions/components/SettingsTab.jsx
index 61c422a..6c9fd9b 100644
--- a/src/extensions/components/SettingsTab.jsx
+++ b/src/extensions/components/SettingsTab.jsx
@@ -147,6 +147,14 @@ const SettingsTab = () => {
 
 	return (
 		<div className="wp-agentic-admin-settings-tab">
+			<div className="wp-agentic-admin-settings-tab__header">
+				<h3 className="wp-agentic-admin-settings-tab__title">
+					Settings
+				</h3>
+				<p className="wp-agentic-admin-settings-tab__intro">
+					Configure GPU, context windows, and model behavior.
+				</p>
+			</div>
 			<Card>
 				<CardHeader>
 					<h3 style={ { margin: 0 } }>GPU Information</h3>
diff --git a/src/extensions/styles/main.scss b/src/extensions/styles/main.scss
index c661f31..fb9956d 100644
--- a/src/extensions/styles/main.scss
+++ b/src/extensions/styles/main.scss
@@ -921,6 +921,45 @@
 }
 
 // Tabs
+.wp-agentic-admin-tabs-wrapper {
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	min-height: 0;
+	position: relative;
+}
+
+.wp-agentic-admin-settings-toggle {
+	position: absolute;
+	top: 0;
+	right: 0;
+	z-index: 1;
+	height: 48px;
+	padding: 0 16px;
+	gap: 6px;
+	border: none;
+	border-radius: 0;
+	background: transparent;
+	color: #50575e;
+	font-weight: 500;
+	font-size: 13px;
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	&:hover,
+	&:focus {
+		color: #2271b1;
+		background: #f0f0f1;
+	}
+
+	&.is-active {
+		color: #2271b1;
+		box-shadow: inset 0 -3px 0 0 #2271b1;
+	}
+}
+
 .wp-agentic-admin-tabs {
 	margin-bottom: 0;
 	display: flex;
@@ -932,6 +971,7 @@
 		border-bottom: 1px solid #c3c4c7;
 		margin-bottom: 0;
 		flex-shrink: 0;
+		padding-right: 110px; // Space for the settings gear icon + label
 	}
 
 	.components-tab-panel__tabs-item {
@@ -3474,7 +3514,25 @@
 
 /* Settings Tab */
 .wp-agentic-admin-settings-tab {
-	padding: 16px;
+	padding: 20px;
+	overflow-y: auto;
+
+	&__header {
+		margin-bottom: 24px;
+	}
+
+	&__title {
+		margin: 0 0 10px !important;
+		font-size: 18px !important;
+		font-weight: 600;
+		color: #1d2327;
+	}
+
+	&__intro {
+		margin: 0;
+		color: #50575e;
+		line-height: 1.6;
+	}
 
 	.components-card {
 		margin-bottom: 16px;