diff --git a/components/Editor/Console.tsx b/components/Editor/Console.tsx
index 5c73ab7..051d97d 100644
--- a/components/Editor/Console.tsx
+++ b/components/Editor/Console.tsx
@@ -20,8 +20,11 @@ const Console = () => {
   return (
     <div
       ref={container}
-      className="px-4 pb-2 leading-5 font-mono text-tiny text-gray-400 dark:text-gray-500"
+      className="px-4 py-4 leading-5 font-mono text-tiny text-gray-400 dark:text-gray-500"
     >
+      <div className="text-gray-500 dark:text-gray-400 uppercase text-[11px]">
+        Console
+      </div>
       {consoleLog.map((log, index) => (
         <pre key={toKeyIndex('line', index)}>
           {log.type === LogType.Error && (
diff --git a/components/Editor/EditorFooter.tsx b/components/Editor/EditorFooter.tsx
index 2901109..96b3cb4 100644
--- a/components/Editor/EditorFooter.tsx
+++ b/components/Editor/EditorFooter.tsx
@@ -15,7 +15,7 @@ function EditorFooter() {
   return (
     <div
       className={cn(
-        'px-5 bg-gray-100 dark:bg-black-700 border-t border-gray-200 dark:border-black-500 text-xs h-[42px] items-center text-gray-600 ml-auto flex justify-between',
+        'px-4 bg-gray-100 dark:bg-black-700 border-t border-gray-200 dark:border-black-500 text-xs h-[42px] items-center text-gray-600 ml-auto flex justify-between',
         !isFullScreen && 'rounded-b-lg',
       )}
     >
diff --git a/components/Editor/ExtraColumn.tsx b/components/Editor/ExtraColumn.tsx
index f36a355..e614e04 100644
--- a/components/Editor/ExtraColumn.tsx
+++ b/components/Editor/ExtraColumn.tsx
@@ -38,7 +38,7 @@ const ExtraColumn = ({
   } = useContext(CairoVMApiContext)
 
   return (
-    <div className="w-full md:w-1/3 flex flex-col">
+    <div className="w-full md:w-1/2 flex flex-col">
       <div className="border-b border-gray-200 dark:border-black-500 flex items-center pl-6 pr-2 h-14 md:border-r flex-none">
         <Header
           codeType={codeType}
diff --git a/components/Editor/index.tsx b/components/Editor/index.tsx
index 2bf5b96..0be42ea 100644
--- a/components/Editor/index.tsx
+++ b/components/Editor/index.tsx
@@ -33,6 +33,7 @@ import { AppUiContext, CodeType, LogType } from '../../context/appUiContext'
 
 import { ArgumentsHelperModal } from './ArgumentsHelperModal'
 import { registerCairoLanguageSupport } from './cairoLangConfig'
+import Console from './Console'
 import EditorControls from './EditorControls'
 import EditorFooter from './EditorFooter'
 import ExtraColumn from './ExtraColumn'
@@ -317,90 +318,101 @@ const Editor = ({ readOnly = false }: Props) => {
         >
           <div
             className={cn(
-              'w-full md:w-1/2 flex flex-col',
-              isThreeColumnLayout && 'md:w-1/3',
+              'w-1/2 flex flex-col',
+              isThreeColumnLayout && 'md:w-2/3',
             )}
           >
-            <div className="border-b border-gray-200 dark:border-black-500 flex items-center pl-6 pr-2 h-14 flex-none md:border-r justify-between">
-              <Header
-                codeType={codeType}
-                onCodeTypeChange={({ value }) => setCodeType(value)}
-                withLogo={isFullScreen}
-              />
-            </div>
+            <div className="flex" style={{ height: 'calc(100% - 22vh)' }}>
+              <div
+                className={cn(
+                  'w-full flex flex-col',
+                  isThreeColumnLayout && 'md:w-1/2',
+                )}
+              >
+                <div className="border-b border-gray-200 dark:border-black-500 flex items-center pl-4 pr-2 h-14 flex-none md:border-r justify-between">
+                  <Header
+                    codeType={codeType}
+                    onCodeTypeChange={({ value }) => setCodeType(value)}
+                    withLogo={isFullScreen}
+                  />
+                </div>
 
-            <div className="relative pane grow pane-light overflow-auto md:border-r bg-gray-50 dark:bg-black-600 border-gray-200 dark:border-black-500">
-              {codeType === CodeType.CASM ? (
-                <InstructionsTable
-                  instructions={casmInstructions}
-                  codeType={codeType}
-                  activeIndexes={[activeCasmInstructionIndex]}
-                  errorIndexes={[errorCasmInstructionIndex]}
-                  variables={{}}
-                />
-              ) : codeType === CodeType.Sierra ? (
-                <InstructionsTable
-                  instructions={sierraStatements}
-                  codeType={codeType}
-                  activeIndexes={
-                    casmToSierraProgramMap[activeCasmInstructionIndex] ?? []
-                  }
-                  errorIndexes={
-                    casmToSierraProgramMap[errorCasmInstructionIndex] ?? []
+                <div className="relative pane grow pane-light overflow-auto md:border-r bg-gray-50 dark:bg-black-600 border-gray-200 dark:border-black-500">
+                  {codeType === CodeType.CASM ? (
+                    <InstructionsTable
+                      instructions={casmInstructions}
+                      codeType={codeType}
+                      activeIndexes={[activeCasmInstructionIndex]}
+                      errorIndexes={[errorCasmInstructionIndex]}
+                      variables={{}}
+                    />
+                  ) : codeType === CodeType.Sierra ? (
+                    <InstructionsTable
+                      instructions={sierraStatements}
+                      codeType={codeType}
+                      activeIndexes={
+                        casmToSierraProgramMap[activeCasmInstructionIndex] ?? []
+                      }
+                      errorIndexes={
+                        casmToSierraProgramMap[errorCasmInstructionIndex] ?? []
+                      }
+                      variables={currentSierraVariables || {}}
+                    />
+                  ) : (
+                    <div className="h-full overflow-auto pane pane-light">
+                      <MonacoEditor
+                        // @ts-ignore: SCEditor is not TS-friendly
+
+                        onMount={handleEditorDidMount}
+                        options={{
+                          minimap: { enabled: false },
+                          wordBreak: 'keepAll',
+                          wordWrap: 'on',
+                          readOnly: readOnly,
+                        }}
+                        value={codeType === CodeType.Cairo ? cairoCode : ''}
+                        onChange={handleCairoCodeChange}
+                        language={'cairo'}
+                        className={cn(
+                          'code-editor whitespace-pre-wrap overflow-hidden',
+                          {
+                            'with-numbers': !isBytecode,
+                          },
+                        )}
+                      />
+                    </div>
+                  )}
+                </div>
+
+                <EditorControls
+                  isCompileDisabled={isCompileDisabled}
+                  programArguments={programArguments}
+                  areProgramArgumentsValid={areProgramArgumentsValid}
+                  onCopyPermalink={handleCopyPermalink}
+                  onProgramArgumentsUpdate={handleProgramArgumentsUpdate}
+                  onCompileRun={handleCompileRun}
+                  onShowArgumentsHelper={() => setShowArgumentsHelper(true)}
+                  handleChangeExampleOption={(newExample) =>
+                    newExample !== null
+                      ? setExampleOption(newExample.value)
+                      : setExampleOption(0)
                   }
-                  variables={currentSierraVariables || {}}
                 />
-              ) : (
-                <div className="h-full overflow-auto pane pane-light">
-                  <MonacoEditor
-                    // @ts-ignore: SCEditor is not TS-friendly
-
-                    onMount={handleEditorDidMount}
-                    options={{
-                      minimap: { enabled: false },
-                      wordBreak: 'keepAll',
-                      wordWrap: 'on',
-                      readOnly: readOnly,
-                    }}
-                    value={codeType === CodeType.Cairo ? cairoCode : ''}
-                    onChange={handleCairoCodeChange}
-                    language={'cairo'}
-                    className={cn(
-                      'code-editor whitespace-pre-wrap overflow-hidden',
-                      {
-                        'with-numbers': !isBytecode,
-                      },
-                    )}
-                  />
-                </div>
+              </div>
+
+              {isThreeColumnLayout && (
+                <ExtraColumn
+                  cairoCode={cairoCode}
+                  handleCairoCodeChange={handleCairoCodeChange}
+                  handleEditorDidMount={handleEditorDidMount}
+                  isBytecode={isBytecode}
+                />
               )}
             </div>
-
-            <EditorControls
-              isCompileDisabled={isCompileDisabled}
-              programArguments={programArguments}
-              areProgramArgumentsValid={areProgramArgumentsValid}
-              onCopyPermalink={handleCopyPermalink}
-              onProgramArgumentsUpdate={handleProgramArgumentsUpdate}
-              onCompileRun={handleCompileRun}
-              onShowArgumentsHelper={() => setShowArgumentsHelper(true)}
-              handleChangeExampleOption={(newExample) =>
-                newExample !== null
-                  ? setExampleOption(newExample.value)
-                  : setExampleOption(0)
-              }
-            />
+            <div className="h-[22vh] w-full overflow-auto border-t border-r border-gray-200 dark:border-black-500 pane pane-light">
+              <Console />
+            </div>
           </div>
-
-          {isThreeColumnLayout && (
-            <ExtraColumn
-              cairoCode={cairoCode}
-              handleCairoCodeChange={handleCairoCodeChange}
-              handleEditorDidMount={handleEditorDidMount}
-              isBytecode={isBytecode}
-            />
-          )}
-
           <div
             className={cn(
               'w-full md:w-1/2 flex flex-col justify-between',
diff --git a/components/Tracer/index.tsx b/components/Tracer/index.tsx
index a2a2ea2..f7285af 100644
--- a/components/Tracer/index.tsx
+++ b/components/Tracer/index.tsx
@@ -1,14 +1,6 @@
-import {
-  useContext,
-  useEffect,
-  useState,
-  useRef,
-  useReducer,
-  memo,
-} from 'react'
+import { useContext, useEffect, useRef, useReducer, memo } from 'react'
 
 import cn from 'classnames'
-import { Priority, useRegisterActions } from 'kbar'
 import { TableVirtuoso, TableVirtuosoHandle } from 'react-virtuoso'
 
 import {
@@ -17,8 +9,6 @@ import {
   ProgramExecutionState,
 } from 'context/cairoVMApiContext'
 
-import Console from '../Editor/Console'
-
 import ExecutionStatus from './ExecutionStatus'
 
 export interface Instruction {
@@ -59,11 +49,6 @@ export interface TracerData {
   entryToSierraVarsMap: { [key: string]: SierraVariables }
 }
 
-enum IConsoleTab {
-  Console = 'debug-console',
-  DebugInfo = 'output',
-}
-
 export const Tracer = () => {
   const {
     executionState,
@@ -84,10 +69,6 @@ export const Tracer = () => {
       : null
   const currentCallstackEntry = tracerData?.callstack[executionTraceStepNumber]
 
-  const [selectedConsoleTab, setSelectedConsoleTab] = useState<IConsoleTab>(
-    IConsoleTab.Console,
-  )
-
   const [currentFocus, setCurrentFocus] = useReducer(
     (state: any, newIdx: number) => {
       state = {
@@ -154,35 +135,6 @@ export const Tracer = () => {
     }
   }
 
-  const actions = [
-    {
-      id: 'debugInfo',
-      name: 'Debug Info',
-      shortcut: ['d'],
-      keywords: 'Debug info',
-      section: 'Execution',
-      perform: () => {
-        setSelectedConsoleTab(IConsoleTab.DebugInfo)
-      },
-      subtitle: 'Switch to Debug Info',
-      priority: Priority.HIGH,
-    },
-    {
-      id: 'console',
-      name: 'Console',
-      shortcut: ['e'],
-      keywords: 'Console',
-      section: 'Execution',
-      perform: () => {
-        setSelectedConsoleTab(IConsoleTab.Console)
-      },
-      subtitle: 'Switch to Console',
-      priority: Priority.HIGH,
-    },
-  ]
-
-  useRegisterActions(actions, [setSelectedConsoleTab])
-
   return (
     <>
       <div className="border-t md:border-t-0 border-b border-gray-200 dark:border-black-500 flex items-center pl-4 pr-6 h-14 flex-none">
@@ -216,49 +168,15 @@ export const Tracer = () => {
         </div>
       )}
 
-      <div className="border-gray-200 border-t dark:border-black-500 flex-none overflow-hidden mb-[10px] h-[22vh]">
-        <div className="px-4">
-          <nav className="-mb-px uppercase flex space-x-8" aria-label="Tabs">
-            <button
-              className={`hover:text-gray-700 whitespace-nowrap border-b py-1 mt-2 mb-4 text-xs font-thin ${cn(
-                {
-                  'border-indigo-600 text-gray-700':
-                    selectedConsoleTab === IConsoleTab.DebugInfo,
-                  'border-transparent text-gray-500':
-                    selectedConsoleTab !== IConsoleTab.DebugInfo,
-                },
-              )}`}
-              onClick={() => setSelectedConsoleTab(IConsoleTab.DebugInfo)}
-            >
-              Debug Info [d]
-            </button>
-            <button
-              onClick={() => setSelectedConsoleTab(IConsoleTab.Console)}
-              className={`hover:text-gray-700 whitespace-nowrap border-b py-1 mt-2 mb-4 text-xs font-thin ${cn(
-                {
-                  'border-indigo-600 text-gray-700':
-                    selectedConsoleTab === IConsoleTab.Console,
-                  'border-transparent text-gray-500':
-                    selectedConsoleTab !== IConsoleTab.Console,
-                },
-              )}`}
-            >
-              Console [e]
-            </button>
-          </nav>
-        </div>
-        <div className="pane pane-light overflow-auto pb-4 grow h-[90%]">
-          {selectedConsoleTab === IConsoleTab.Console && <Console />}
-
-          {selectedConsoleTab === IConsoleTab.DebugInfo && (
-            <DebugInfoTab
-              trace={trace}
-              currentTraceEntry={currentTraceEntry}
-              executionTraceStepNumber={executionTraceStepNumber}
-              currentCallstackEntry={currentCallstackEntry}
-              handleRegisterPointerClick={handleRegisterPointerClick}
-            />
-          )}
+      <div className="border-gray-200 border-t dark:border-black-500 flex-none overflow-hidden h-[22vh]">
+        <div className="pane pane-light overflow-auto pb-4 grow h-full">
+          <DebugInfoTab
+            trace={trace}
+            currentTraceEntry={currentTraceEntry}
+            executionTraceStepNumber={executionTraceStepNumber}
+            currentCallstackEntry={currentCallstackEntry}
+            handleRegisterPointerClick={handleRegisterPointerClick}
+          />
         </div>
       </div>
     </>
@@ -279,7 +197,7 @@ function DebugInfoTab({
   handleRegisterPointerClick: (num: number) => void
 }) {
   return (
-    <div className="px-4 pb-4">
+    <div className="px-4 py-4">
       {trace === undefined ? (
         <p className="text-mono text-tiny text-gray-400 dark:text-gray-500">
           Run the app to get debug info
@@ -337,7 +255,7 @@ function DebugInfoTab({
             <dd className="font-mono mb-2">
               <table className="w-full font-mono text-tiny border border-gray-300 dark:border-black-500">
                 <thead>
-                  <tr className="text-left sticky top-0 bg-gray-50 dark:bg-black-600 text-gray-400 dark:text-gray-600 border-b border-gray-300 dark:border-black-500">
+                  <tr className="text-left sticky top-0 bg-gray-50 dark:bg-black-600 text-gray-400 dark:text-gray-600 border-b border-gray-300 dark:border-black-500 z-10">
                     <th className="py-1 px-2 font-thin">FP</th>
                     <th className="py-1 px-2 font-thin">CALL PC</th>
                     <th className="py-1 px-2 font-thin">RET PC</th>