diff --git a/website/src/repl/components/ReplEditor.jsx b/website/src/repl/components/ReplEditor.jsx
index 96db909b..23288d18 100644
--- a/website/src/repl/components/ReplEditor.jsx
+++ b/website/src/repl/components/ReplEditor.jsx
@@ -4,30 +4,56 @@ import { Code } from '@src/repl/components/Code';
 import UserFacingErrorMessage from '@src/repl/components/UserFacingErrorMessage';
 import { Header } from './Header';
 import { useSettings, settingsMap } from '@src/settings.mjs';
-import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
-import { useCallback } from 'react';
+import { useRef } from 'react';
 
-// Resize handle component with visual feedback
-function ResizeHandle({ direction = 'horizontal' }) {
+// Resize handle component
+function ResizeHandle({ direction, containerRef, settingKey }) {
   const isHorizontal = direction === 'horizontal';
+  const isDragging = useRef(false);
+
+  const handlePointerDown = (e) => {
+    isDragging.current = true;
+    e.target.setPointerCapture(e.pointerId);
+  };
+
+  const handlePointerMove = (e) => {
+    if (!isDragging.current || !containerRef.current) return;
+
+    const container = containerRef.current;
+    const size = isHorizontal ? container.offsetHeight : container.offsetWidth;
+    const movement = isHorizontal ? -e.movementY : -e.movementX;
+    const deltaPercent = (movement / size) * 100;
+
+    const currentSize = Number(settingsMap.get()[settingKey]) || (isHorizontal ? 35 : 30);
+    const newSize = Math.max(20, Math.min(50, currentSize + deltaPercent));
+    settingsMap.setKey(settingKey, newSize);
+  };
+
+  const handlePointerUp = (e) => {
+    isDragging.current = false;
+    e.target.releasePointerCapture(e.pointerId);
+  };
+
   return (
-    <PanelResizeHandle
+    <div
       className={`
-        group relative flex items-center justify-center
-        ${isHorizontal ? 'h-2 cursor-row-resize' : 'w-2 cursor-col-resize'}
-        bg-transparent hover:bg-foreground/10 active:bg-foreground/20
-        transition-colors duration-150
+        group flex items-center justify-center shrink-0
+        ${isHorizontal ? 'h-2 cursor-row-resize w-full' : 'w-2 cursor-col-resize h-full'}
+        hover:bg-foreground/10 active:bg-foreground/20
       `}
+      style={{ touchAction: 'none' }}
+      onPointerDown={handlePointerDown}
+      onPointerMove={handlePointerMove}
+      onPointerUp={handlePointerUp}
     >
-      {/* Visual indicator */}
       <div
         className={`
           ${isHorizontal ? 'w-12 h-1' : 'w-1 h-12'}
-          bg-foreground/20 group-hover:bg-foreground/40 group-active:bg-foreground/60
-          rounded-full transition-colors duration-150
+          bg-foreground/20 group-hover:bg-foreground/40
+          rounded-full
         `}
       />
-    </PanelResizeHandle>
+    </div>
   );
 }
 
@@ -37,86 +63,35 @@ export default function ReplEditor(Props) {
   const settings = useSettings();
   const { panelPosition, isZen, isPanelOpen, panelSizeBottom, panelSizeRight } = settings;
 
-  // Handler for saving panel sizes to localStorage
-  const handleLayoutChange = useCallback((sizes) => {
-    if (panelPosition === 'bottom' && sizes.length === 2) {
-      // sizes[1] is the bottom panel size in percentage
-      settingsMap.setKey('panelSizeBottom', sizes[1]);
-    } else if (panelPosition === 'right' && sizes.length === 2) {
-      // sizes[1] is the right panel size in percentage
-      settingsMap.setKey('panelSizeRight', sizes[1]);
-    }
-  }, [panelPosition]);
+  const containerElRef = useRef(null);
 
-  // Zen mode - no panels
-  if (isZen) {
-    return (
-      <div className="h-full flex flex-col relative" {...editorProps}>
-        <Loader active={pending} />
-        <Header context={context} />
-        <div className="grow flex relative overflow-hidden">
-          <Code containerRef={containerRef} editorRef={editorRef} init={init} />
-        </div>
-        <UserFacingErrorMessage error={error} />
-      </div>
-    );
-  }
+  const showRightPanel = !isZen && panelPosition === 'right';
+  const showBottomPanel = !isZen && panelPosition === 'bottom';
 
-  // Right panel layout
-  if (panelPosition === 'right') {
-    return (
-      <div className="h-full flex flex-col relative" {...editorProps}>
-        <Loader active={pending} />
-        <Header context={context} />
-        <PanelGroup
-          direction="horizontal"
-          onLayout={handleLayoutChange}
-          className="grow overflow-hidden"
-        >
-          <Panel defaultSize={100 - (isPanelOpen ? panelSizeRight : 3)} minSize={30}>
-            <Code containerRef={containerRef} editorRef={editorRef} init={init} />
-          </Panel>
-          {isPanelOpen && <ResizeHandle direction="vertical" />}
-          <Panel
-            defaultSize={isPanelOpen ? panelSizeRight : 3}
-            minSize={isPanelOpen ? 15 : 3}
-            maxSize={isPanelOpen ? 60 : 3}
-            collapsible={true}
-          >
-            <VerticalPanel context={context} />
-          </Panel>
-        </PanelGroup>
-        <UserFacingErrorMessage error={error} />
-      </div>
-    );
-  }
-
-  // Bottom panel layout
   return (
-    <div className="h-full flex flex-col relative" {...editorProps}>
+    <div ref={containerElRef} className="h-full flex flex-col relative" {...editorProps}>
       <Loader active={pending} />
       <Header context={context} />
-      <PanelGroup
-        direction="vertical"
-        onLayout={handleLayoutChange}
-        className="grow overflow-hidden"
-      >
-        <Panel defaultSize={100 - (isPanelOpen ? panelSizeBottom : 5)} minSize={30}>
-          <div className="h-full flex relative overflow-hidden">
-            <Code containerRef={containerRef} editorRef={editorRef} init={init} />
+      <div className="grow flex relative overflow-hidden">
+        <Code containerRef={containerRef} editorRef={editorRef} init={init} />
+        {showRightPanel && isPanelOpen && (
+          <ResizeHandle direction="vertical" containerRef={containerElRef} settingKey="panelSizeRight" />
+        )}
+        {showRightPanel && (
+          <div className="shrink-0 overflow-hidden h-full" style={{ width: isPanelOpen ? `${panelSizeRight}%` : '48px' }}>
+            <VerticalPanel context={context} />
           </div>
-        </Panel>
-        {isPanelOpen && <ResizeHandle direction="horizontal" />}
-        <Panel
-          defaultSize={isPanelOpen ? panelSizeBottom : 5}
-          minSize={isPanelOpen ? 15 : 5}
-          maxSize={isPanelOpen ? 70 : 5}
-          collapsible={true}
-        >
-          <HorizontalPanel context={context} />
-        </Panel>
-      </PanelGroup>
+        )}
+      </div>
       <UserFacingErrorMessage error={error} />
+      {showBottomPanel && isPanelOpen && (
+        <ResizeHandle direction="horizontal" containerRef={containerElRef} settingKey="panelSizeBottom" />
+      )}
+      {showBottomPanel && (
+        <div className="shrink-0 overflow-hidden" style={{ height: isPanelOpen ? `${panelSizeBottom}%` : '48px' }}>
+          <HorizontalPanel context={context} />
+        </div>
+      )}
     </div>
   );
 }
diff --git a/website/src/repl/components/panel/ChatTab.jsx b/website/src/repl/components/panel/ChatTab.jsx
index 92e05f5f..efa6434e 100644
--- a/website/src/repl/components/panel/ChatTab.jsx
+++ b/website/src/repl/components/panel/ChatTab.jsx
@@ -85,10 +85,8 @@ async function fetchModels(provider, apiKey) {
  * Models are fetched dynamically from provider APIs
  * Adapts layout for bottom panel (horizontal) vs right panel (vertical)
  */
-function SettingsPanel({ onClose }) {
+function SettingsPanel({ onClose, isBottomPanel }) {
   const settings = useSettings();
-  const { panelPosition } = settings;
-  const isBottomPanel = panelPosition === 'bottom';
   const [openaiKey, setOpenaiKey] = useState(settings.openaiApiKey || '');
   const [anthropicKey, setAnthropicKey] = useState(settings.anthropicApiKey || '');
   const [geminiKey, setGeminiKey] = useState(settings.geminiApiKey || '');
@@ -194,95 +192,65 @@ function SettingsPanel({ onClose }) {
   const isLoadingCurrentModels = loadingModels[provider];
 
   return (
-    <div className={cx(
-      'p-3 text-foreground overflow-y-auto overflow-x-hidden',
-      isBottomPanel ? 'h-full flex flex-row gap-4' : 'space-y-3'
-    )}>
-      {/* Left column (or top section for vertical panel) */}
-      <div className={cx(isBottomPanel ? 'flex-1 min-w-0 space-y-2' : 'space-y-3')}>
-        <h3 className="text-base font-medium">Настройки AI</h3>
-
-        {/* Provider & Model row */}
-        <div className={cx(isBottomPanel ? 'flex gap-2' : 'space-y-2')}>
-          {/* Provider */}
-          <div className={cx('grid gap-1', isBottomPanel ? 'flex-1' : '')}>
-            <label className="text-xs font-medium">Провайдер</label>
+    <div className="p-3 text-foreground overflow-y-auto overflow-x-hidden space-y-3">
+      <h3 className="text-base font-medium">Настройки AI</h3>
+
+      {/* Provider & Model - horizontal */}
+      <div className="flex gap-2 flex-wrap">
+        <div className="grid gap-1 min-w-[140px] flex-1">
+          <label className="text-xs font-medium">Провайдер</label>
+          <select
+            value={provider}
+            onChange={(e) => {
+              const newProvider = e.target.value;
+              setProvider(newProvider);
+              const newModels = models[newProvider] || FALLBACK_MODELS[newProvider];
+              if (newModels.length > 0) {
+                setModel(newModels[0].value);
+              }
+            }}
+            className={cx(selectClass, 'text-sm py-1.5')}
+          >
+            <option value="openai">OpenAI {openaiKey ? '✓' : ''}</option>
+            <option value="anthropic">Anthropic {anthropicKey ? '✓' : ''}</option>
+            <option value="gemini">Gemini {geminiKey ? '✓' : ''}</option>
+          </select>
+        </div>
+
+        <div className="grid gap-1 min-w-[180px] flex-1">
+          <label className="text-xs flex items-center gap-1">
+            Модель
+            {isLoadingCurrentModels && <span className="opacity-50">...</span>}
+          </label>
+          <div className="flex gap-1">
             <select
-              value={provider}
-              onChange={(e) => {
-                const newProvider = e.target.value;
-                setProvider(newProvider);
-                const newModels = models[newProvider] || FALLBACK_MODELS[newProvider];
-                if (newModels.length > 0) {
-                  setModel(newModels[0].value);
-                }
-              }}
-              className={cx(selectClass, 'text-sm py-1.5')}
+              value={model}
+              onChange={(e) => setModel(e.target.value)}
+              className={cx(selectClass, 'flex-1 text-sm py-1.5')}
+              disabled={isLoadingCurrentModels}
             >
-              <option value="openai">OpenAI {openaiKey ? '✓' : ''}</option>
-              <option value="anthropic">Anthropic {anthropicKey ? '✓' : ''}</option>
-              <option value="gemini">Gemini {geminiKey ? '✓' : ''}</option>
+              {currentModels.map((m) => (
+                <option key={m.value} value={m.value}>{m.label}</option>
+              ))}
             </select>
-          </div>
-
-          {/* Model */}
-          <div className={cx('grid gap-1', isBottomPanel ? 'flex-1' : '')}>
-            <label className="text-xs flex items-center gap-1">
-              Модель
-              {isLoadingCurrentModels && <span className="opacity-50">...</span>}
-            </label>
-            <div className="flex gap-1">
-              <select
-                value={model}
-                onChange={(e) => setModel(e.target.value)}
-                className={cx(selectClass, 'flex-1 text-sm py-1.5')}
-                disabled={isLoadingCurrentModels}
-              >
-                {currentModels.map((m) => (
-                  <option key={m.value} value={m.value}>{m.label}</option>
-                ))}
-              </select>
-              <button
-                type="button"
-                onClick={() => loadModelsForProvider(provider, getKeyForProvider(provider))}
-                disabled={isLoadingCurrentModels || !currentProviderHasKey()}
-                className="px-2 text-sm rounded border border-foreground/30 hover:bg-lineBackground disabled:opacity-30"
-                title="Обновить"
-              >
-                ↻
-              </button>
-            </div>
-          </div>
-        </div>
-
-        {/* Links & Save (for bottom panel, shown here) */}
-        {isBottomPanel && (
-          <div className="flex items-center gap-3 pt-1">
             <button
-              onClick={handleSave}
-              disabled={!currentProviderHasKey()}
-              className={cx(buttonClass, 'text-sm py-1.5')}
+              type="button"
+              onClick={() => loadModelsForProvider(provider, getKeyForProvider(provider))}
+              disabled={isLoadingCurrentModels || !currentProviderHasKey()}
+              className="px-2 text-sm rounded border border-foreground/30 hover:bg-lineBackground disabled:opacity-30"
+              title="Обновить"
             >
-              {currentProviderHasKey() ? 'Сохранить' : 'Введите ключ'}
+              ↻
             </button>
-            <div className="text-xs opacity-70 flex gap-2">
-              <a href="https://platform.openai.com/api-keys" target="_blank" rel="noopener" className="underline hover:opacity-50">OpenAI</a>
-              <a href="https://console.anthropic.com/" target="_blank" rel="noopener" className="underline hover:opacity-50">Anthropic</a>
-              <a href="https://aistudio.google.com/apikey" target="_blank" rel="noopener" className="underline hover:opacity-50">Gemini</a>
-            </div>
           </div>
-        )}
+        </div>
       </div>
 
-      {/* Right column (or bottom section for vertical panel) - API Keys */}
-      <div className={cx(
-        isBottomPanel ? 'flex-1 min-w-0 border-l border-foreground/20 pl-4' : 'border-t border-foreground/20 pt-2'
-      )}>
-        <h4 className="text-xs font-medium mb-2">API Ключи</h4>
-
-        <div className={cx(isBottomPanel ? 'flex gap-2' : 'space-y-2')}>
-          {/* OpenAI Key */}
-          <div className={cx('grid gap-1', isBottomPanel ? 'flex-1' : '')}>
+      {/* API Keys */}
+      <div className="space-y-1">
+        <h4 className="text-xs font-medium">API Ключи</h4>
+        <div className={isBottomPanel ? 'flex gap-2 flex-wrap' : 'space-y-2'}>
+          <div className={cx('grid gap-1', isBottomPanel && 'min-w-[120px] flex-1')}>
             <label className="text-xs flex items-center gap-1">
               OpenAI {openaiKey && <span className="text-green-400">✓</span>}
             </label>
@@ -294,9 +262,7 @@ function SettingsPanel({ onClose }) {
               className={cx(inputClass, 'text-sm py-1')}
             />
           </div>
-
-          {/* Anthropic Key */}
-          <div className={cx('grid gap-1', isBottomPanel ? 'flex-1' : '')}>
+          <div className={cx('grid gap-1', isBottomPanel && 'min-w-[120px] flex-1')}>
             <label className="text-xs flex items-center gap-1">
               Anthropic {anthropicKey && <span className="text-green-400">✓</span>}
             </label>
@@ -308,9 +274,7 @@ function SettingsPanel({ onClose }) {
               className={cx(inputClass, 'text-sm py-1')}
             />
           </div>
-
-          {/* Gemini Key */}
-          <div className={cx('grid gap-1', isBottomPanel ? 'flex-1' : '')}>
+          <div className={cx('grid gap-1', isBottomPanel && 'min-w-[120px] flex-1')}>
             <label className="text-xs flex items-center gap-1">
               Gemini {geminiKey && <span className="text-green-400">✓</span>}
             </label>
@@ -323,28 +287,25 @@ function SettingsPanel({ onClose }) {
             />
           </div>
         </div>
-
-        <p className="text-xs opacity-50 mt-1">Ключи хранятся локально</p>
+        <p className="text-xs opacity-50">Ключи хранятся локально</p>
       </div>
 
-      {/* Save button & Links (for vertical/right panel) */}
-      {!isBottomPanel && (
-        <div className="space-y-2 pt-1">
-          <div className="text-xs opacity-70 flex flex-wrap gap-2">
-            <span>Получить:</span>
-            <a href="https://platform.openai.com/api-keys" target="_blank" rel="noopener" className="underline hover:opacity-50">OpenAI</a>
-            <a href="https://console.anthropic.com/" target="_blank" rel="noopener" className="underline hover:opacity-50">Anthropic</a>
-            <a href="https://aistudio.google.com/apikey" target="_blank" rel="noopener" className="underline hover:opacity-50">Gemini</a>
-          </div>
-          <button
-            onClick={handleSave}
-            disabled={!currentProviderHasKey()}
-            className={cx(buttonClass, 'w-full')}
-          >
-            {currentProviderHasKey() ? 'Сохранить' : `Введите ключ для ${provider}`}
-          </button>
+      {/* Save & Links */}
+      <div className="flex items-center gap-3 flex-wrap">
+        <button
+          onClick={handleSave}
+          disabled={!currentProviderHasKey()}
+          className={cx(buttonClass, 'text-sm py-1.5')}
+        >
+          {currentProviderHasKey() ? 'Сохранить' : 'Введите ключ'}
+        </button>
+        <div className="text-xs opacity-70 flex gap-2">
+          <span>Получить:</span>
+          <a href="https://platform.openai.com/api-keys" target="_blank" rel="noopener" className="underline hover:opacity-50">OpenAI</a>
+          <a href="https://console.anthropic.com/" target="_blank" rel="noopener" className="underline hover:opacity-50">Anthropic</a>
+          <a href="https://aistudio.google.com/apikey" target="_blank" rel="noopener" className="underline hover:opacity-50">Gemini</a>
         </div>
-      )}
+      </div>
     </div>
   );
 }
@@ -449,7 +410,7 @@ function Message({ message }) {
 /**
  * Main ChatTab component
  */
-export function ChatTab({ context }) {
+export function ChatTab({ context, isBottomPanel }) {
   const messagesEndRef = useRef(null);
   const chat = useChatContext(context);
   const [showSettings, setShowSettings] = useState(false);
@@ -489,7 +450,7 @@ export function ChatTab({ context }) {
             </button>
           )}
         </div>
-        <SettingsPanel onClose={() => setShowSettings(false)} />
+        <SettingsPanel onClose={() => setShowSettings(false)} isBottomPanel={isBottomPanel} />
       </div>
     );
   }
diff --git a/website/src/repl/components/panel/Panel.jsx b/website/src/repl/components/panel/Panel.jsx
index b7aae6f7..0285158d 100644
--- a/website/src/repl/components/panel/Panel.jsx
+++ b/website/src/repl/components/panel/Panel.jsx
@@ -25,7 +25,7 @@ export function HorizontalPanel({ context }) {
       {isPanelOpen ? (
         <>
           <div className="flex grow overflow-auto pr-10">
-            <PanelContent context={context} tab={tab} />
+            <PanelContent context={context} tab={tab} isBottomPanel={true} />
           </div>
 
           <div className="absolute right-4 top-4">
@@ -70,7 +70,7 @@ export function VerticalPanel({ context }) {
           </div>
 
           <div className="overflow-auto grow">
-            <PanelContent context={context} tab={tab} />
+            <PanelContent context={context} tab={tab} isBottomPanel={false} />
           </div>
         </div>
       ) : (
@@ -131,11 +131,11 @@ function PanelNav({ children, className, settings, ...props }) {
   );
 }
 
-function PanelContent({ context, tab }) {
+function PanelContent({ context, tab, isBottomPanel }) {
   useLogger();
   switch (tab) {
     case 'chat':
-      return <ChatTab context={context} />;
+      return <ChatTab context={context} isBottomPanel={isBottomPanel} />;
     case 'patterns':
       return <PatternsTab context={context} />;
     case 'console':
diff --git a/website/src/settings.mjs b/website/src/settings.mjs
index 94eb28bb..f3730b61 100644
--- a/website/src/settings.mjs
+++ b/website/src/settings.mjs
@@ -134,6 +134,8 @@ export function useSettings() {
         ? true
         : parseBoolean(state.patternAutoStart),
     masterVolume: Number(state.masterVolume) ?? 1,
+    panelSizeBottom: Number(state.panelSizeBottom) || 35,
+    panelSizeRight: Number(state.panelSizeRight) || 30,
   };
 }