diff --git a/src/components/ChatInput.tsx b/src/components/ChatInput.tsx
index 6ec09c3b6..9f076d6c8 100644
--- a/src/components/ChatInput.tsx
+++ b/src/components/ChatInput.tsx
@@ -7,7 +7,8 @@ import { createCommandToast, createErrorToast } from "./ChatInputToasts";
 import { parseCommand } from "@/utils/slashCommands/parser";
 import { usePersistedState, updatePersistedState } from "@/hooks/usePersistedState";
 import { useMode } from "@/contexts/ModeContext";
-import { ChatToggles } from "./ChatToggles";
+import { ThinkingSliderComponent } from "./ThinkingSlider";
+import { Context1MCheckbox } from "./Context1MCheckbox";
 import { useSendMessageOptions } from "@/hooks/useSendMessageOptions";
 import { getModelKey, getInputKey } from "@/constants/storage";
 import {
@@ -746,37 +747,48 @@ export const ChatInput: React.FC<ChatInputProps> = ({
             Editing message ({formatKeybind(KEYBINDS.CANCEL_EDIT)} to cancel)
           </div>
         )}
-        <div className="flex items-center">
-          <ChatToggles modelString={preferredModel}>
-            <div className="mr-3 flex items-center gap-1.5">
-              <ModelSelector
-                ref={modelSelectorRef}
-                value={preferredModel}
-                onChange={setPreferredModel}
-                recentModels={recentModels}
-                onComplete={() => inputRef.current?.focus()}
-              />
-              <TooltipWrapper inline>
-                <HelpIndicator>?</HelpIndicator>
-                <Tooltip className="tooltip" align="left" width="wide">
-                  <strong>Click to edit</strong> or use{" "}
-                  {formatKeybind(KEYBINDS.OPEN_MODEL_SELECTOR)}
-                  <br />
-                  <br />
-                  <strong>Abbreviations:</strong>
-                  <br />• <code>/model opus</code> - Claude Opus 4.1
-                  <br />• <code>/model sonnet</code> - Claude Sonnet 4.5
-                  <br />
-                  <br />
-                  <strong>Full format:</strong>
-                  <br />
-                  <code>/model provider:model-name</code>
-                  <br />
-                  (e.g., <code>/model anthropic:claude-sonnet-4-5</code>)
-                </Tooltip>
-              </TooltipWrapper>
-            </div>
-          </ChatToggles>
+        <div className="flex flex-wrap items-center gap-x-3 gap-y-2">
+          {/* Model Selector - always visible */}
+          <div className="flex items-center" data-component="ModelSelectorGroup">
+            <ModelSelector
+              ref={modelSelectorRef}
+              value={preferredModel}
+              onChange={setPreferredModel}
+              recentModels={recentModels}
+              onComplete={() => inputRef.current?.focus()}
+            />
+            <TooltipWrapper inline>
+              <HelpIndicator>?</HelpIndicator>
+              <Tooltip className="tooltip" align="left" width="wide">
+                <strong>Click to edit</strong> or use {formatKeybind(KEYBINDS.OPEN_MODEL_SELECTOR)}
+                <br />
+                <br />
+                <strong>Abbreviations:</strong>
+                <br />• <code>/model opus</code> - Claude Opus 4.1
+                <br />• <code>/model sonnet</code> - Claude Sonnet 4.5
+                <br />
+                <br />
+                <strong>Full format:</strong>
+                <br />
+                <code>/model provider:model-name</code>
+                <br />
+                (e.g., <code>/model anthropic:claude-sonnet-4-5</code>)
+              </Tooltip>
+            </TooltipWrapper>
+          </div>
+
+          {/* Thinking Slider - hide on small viewports */}
+          <div
+            className="max-@[600px]:hidden flex items-center"
+            data-component="ThinkingSliderGroup"
+          >
+            <ThinkingSliderComponent modelString={preferredModel} />
+          </div>
+
+          {/* Context 1M Checkbox - hide on smaller viewports */}
+          <div className="max-@[500px]:hidden flex items-center" data-component="Context1MGroup">
+            <Context1MCheckbox modelString={preferredModel} />
+          </div>
           <div className="max-@[700px]:hidden ml-auto flex items-center gap-1.5">
             <div
               className={cn(
diff --git a/src/components/Context1MCheckbox.tsx b/src/components/Context1MCheckbox.tsx
index acaf9f266..37e6290b3 100644
--- a/src/components/Context1MCheckbox.tsx
+++ b/src/components/Context1MCheckbox.tsx
@@ -16,7 +16,7 @@ export const Context1MCheckbox: React.FC<Context1MCheckboxProps> = ({ modelStrin
   }
 
   return (
-    <div className="ml-2 flex items-center gap-1.5">
+    <div className="flex items-center gap-1.5">
       <label className="text-foreground flex cursor-pointer items-center gap-1 truncate text-[10px] select-none hover:text-white">
         <input type="checkbox" checked={use1M} onChange={(e) => setUse1M(e.target.checked)} />
         1M Context
diff --git a/src/components/ThinkingSlider.tsx b/src/components/ThinkingSlider.tsx
index d3b4447f9..56b9bc412 100644
--- a/src/components/ThinkingSlider.tsx
+++ b/src/components/ThinkingSlider.tsx
@@ -95,8 +95,7 @@ export const ThinkingSliderComponent: React.FC<ThinkingControlProps> = ({ modelS
 
     return (
       <TooltipWrapper>
-        <div className="ml-5 flex items-center gap-2">
-          <label className="text-subdued text-[10px] select-none">Thinking:</label>
+        <div className="flex items-center gap-2">
           <span
             className="min-w-11 uppercase transition-all duration-200 select-none"
             style={textStyle}
@@ -127,10 +126,7 @@ export const ThinkingSliderComponent: React.FC<ThinkingControlProps> = ({ modelS
 
   return (
     <TooltipWrapper>
-      <div className="ml-5 flex items-center gap-2">
-        <label htmlFor={sliderId} className="text-subdued text-[10px] select-none">
-          Thinking:
-        </label>
+      <div className="flex items-center gap-2">
         <input
           type="range"
           min="0"
@@ -148,6 +144,7 @@ export const ThinkingSliderComponent: React.FC<ThinkingControlProps> = ({ modelS
           aria-valuemax={3}
           aria-valuenow={value}
           aria-valuetext={thinkingLevel}
+          aria-label="Thinking level"
           className="thinking-slider"
           style={
             {
@@ -165,7 +162,9 @@ export const ThinkingSliderComponent: React.FC<ThinkingControlProps> = ({ modelS
           {thinkingLevel}
         </span>
       </div>
-      <Tooltip align="center">{formatKeybind(KEYBINDS.TOGGLE_THINKING)} to toggle</Tooltip>
+      <Tooltip align="center">
+        Thinking: {formatKeybind(KEYBINDS.TOGGLE_THINKING)} to toggle
+      </Tooltip>
     </TooltipWrapper>
   );
 };
diff --git a/tests/e2e/utils/ui.ts b/tests/e2e/utils/ui.ts
index 3c504fbb8..a44ae0e46 100644
--- a/tests/e2e/utils/ui.ts
+++ b/tests/e2e/utils/ui.ts
@@ -57,7 +57,7 @@ function sanitizeMode(mode: ChatMode): ChatMode {
 }
 
 function sliderLocator(page: Page): Locator {
-  return page.getByRole("slider", { name: "Thinking:" });
+  return page.getByRole("slider", { name: "Thinking level" });
 }
 
 function transcriptLocator(page: Page): Locator {