diff --git a/app/web/src/components/IdeConsole/IdeConsole.js b/app/web/src/components/IdeConsole/IdeConsole.js
index 70a94f5..5b8e581 100644
--- a/app/web/src/components/IdeConsole/IdeConsole.js
+++ b/app/web/src/components/IdeConsole/IdeConsole.js
@@ -1,6 +1,7 @@
 import { useContext, useEffect } from 'react'
 import { IdeContext } from 'src/components/IdeToolbarNew'
 import { matchEditorVsDarkTheme } from 'src/components/IdeEditor'
+import PanelToolbar from 'src/components/PanelToolbar'
 
 const IdeConsole = () => {
   const { state } = useContext(IdeContext)
@@ -12,27 +13,28 @@ const IdeConsole = () => {
   }, [state.consoleMessages])
 
   return (
-    <div className="p-2 px-4 min-h-full" style={matchEditorVsDarkTheme.Bg}>
-      <div>
-        {state.consoleMessages?.map(({ type, message, time }, index) => (
-          <pre
-            className="font-mono text-sm"
-            style={matchEditorVsDarkTheme.Text}
-            key={message + index}
-          >
-            <div
-              className="text-xs font-bold pt-2"
-              style={matchEditorVsDarkTheme.TextBrown}
+      <div className="p-2 px-8 pt-14 min-h-full relative" style={matchEditorVsDarkTheme.Bg}>
+        <PanelToolbar panelName="console" />
+        <div>
+          {state.consoleMessages?.map(({ type, message, time }, index) => (
+            <pre
+              className="font-mono text-sm"
+              style={matchEditorVsDarkTheme.Text}
+              key={message + index}
             >
-              {time?.toLocaleString()}
-            </div>
-            <div className={(type === 'error' ? 'text-red-400' : '') + ' pl-4'}>
-              {message}
-            </div>
-          </pre>
-        ))}
+              <div
+                className="text-xs font-bold pt-2"
+                style={matchEditorVsDarkTheme.TextBrown}
+              >
+                {time?.toLocaleString()}
+              </div>
+              <div className={(type === 'error' ? 'text-red-400' : '') + ' pl-4'}>
+                {message}
+              </div>
+            </pre>
+          ))}
+        </div>
       </div>
-    </div>
   )
 }
 
diff --git a/app/web/src/components/IdeContainer/IdeContainer.js b/app/web/src/components/IdeContainer/IdeContainer.js
index 08948c9..5fd802b 100644
--- a/app/web/src/components/IdeContainer/IdeContainer.js
+++ b/app/web/src/components/IdeContainer/IdeContainer.js
@@ -2,7 +2,7 @@ import { useContext, useRef, useEffect } from 'react'
 import { Mosaic, MosaicWindow } from 'react-mosaic-component'
 import { IdeContext } from 'src/components/IdeToolbarNew'
 import { requestRender } from 'src/helpers/hooks/useIdeState'
-import IdeEditor, { matchEditorVsDarkTheme } from 'src/components/IdeEditor'
+import IdeEditor from 'src/components/IdeEditor'
 import IdeViewer from 'src/components/IdeViewer'
 import IdeConsole from 'src/components/IdeConsole'
 import 'react-mosaic-component/react-mosaic-component.css'
@@ -64,15 +64,7 @@ const IdeContainer = () => {
           return (
             <MosaicWindow
               path={path}
-              renderToolbar={() => (
-                <div
-                  className="text-xs text-gray-400 pl-4 w-full py-px font-bold leading-loose border-b border-gray-700"
-                  style={matchEditorVsDarkTheme.lighterBg}
-                >
-                  {id}
-                  {id === 'Editor' && ` (${state.ideType})`}
-                </div>
-              )}
+              renderToolbar={() => <div/>} // needs an empty element, otherwise it adds it's own toolbar
               className={`${id.toLowerCase()} ${id.toLowerCase()}-tile`}
             >
               {id === 'Viewer' ? (
diff --git a/app/web/src/components/IdeEditor/IdeEditor.js b/app/web/src/components/IdeEditor/IdeEditor.js
index 93932d6..9b33fb3 100644
--- a/app/web/src/components/IdeEditor/IdeEditor.js
+++ b/app/web/src/components/IdeEditor/IdeEditor.js
@@ -7,7 +7,6 @@ const Editor = lazy(() => import('@monaco-editor/react'))
 export const matchEditorVsDarkTheme = {
   // Some colors to roughly match the vs-dark editor theme
   Bg: { backgroundColor: 'rgb(30,30,30)' },
-  lighterBg: { backgroundColor: 'rgb(55,55,55)' },
   Text: { color: 'rgb(212,212,212)' },
   TextBrown: { color: 'rgb(206,144,120)' },
 }
diff --git a/app/web/src/components/IdeViewer/IdeViewer.js b/app/web/src/components/IdeViewer/IdeViewer.js
index d3fa40d..8c70094 100644
--- a/app/web/src/components/IdeViewer/IdeViewer.js
+++ b/app/web/src/components/IdeViewer/IdeViewer.js
@@ -10,6 +10,7 @@ import {
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
 import { Vector3 } from 'three'
 import { requestRender } from 'src/helpers/hooks/useIdeState'
+import PanelToolbar from 'src/components/PanelToolbar'
 
 extend({ OrbitControls })
 
@@ -227,6 +228,7 @@ const IdeViewer = () => {
           <div className="h-16 w-16 bg-pink-600 rounded-full animate-ping"></div>
         </div>
       )}
+      <PanelToolbar panelName="3d-view" />
     </div>
   )
 }
diff --git a/app/web/src/components/PanelToolbar/PanelToolbar.tsx b/app/web/src/components/PanelToolbar/PanelToolbar.tsx
new file mode 100644
index 0000000..2c2f1e3
--- /dev/null
+++ b/app/web/src/components/PanelToolbar/PanelToolbar.tsx
@@ -0,0 +1,21 @@
+import { useContext } from 'react'
+import { MosaicWindowContext } from 'react-mosaic-component'
+import Svg from 'src/components/Svg/Svg'
+
+const PanelToolbar = ({ panelName }: { panelName : string }) => {
+  const {mosaicWindowActions} = useContext(MosaicWindowContext)
+  return (
+    <div className="absolute top-0 left-0 flex items-center h-9">
+      {mosaicWindowActions.connectDragSource(
+        <div className=" text-gray-500 bg-gray-300 cursor-grab px-2 h-full flex items-center">
+          <Svg name='drag-grid' className="w-4 p-px" />
+        </div>
+      )}
+      <button className="bg-gray-500 text-gray-300 px-3 rounded-br-lg h-full" aria-label={`${panelName} settings`}>
+        <Svg name='gear' className="w-7 p-px" />
+      </button>
+    </div>
+  )
+}
+
+export default PanelToolbar
diff --git a/app/web/src/components/Svg/Svg.js b/app/web/src/components/Svg/Svg.js
index 47bbb76..90f1913 100644
--- a/app/web/src/components/Svg/Svg.js
+++ b/app/web/src/components/Svg/Svg.js
@@ -1,4 +1,4 @@
-const Svg = ({ name, className: className2, strokeWidth = 2 }) => {
+const Svg = ({ name, className: className2 = '', strokeWidth = 2 }) => {
   const svgs = {
     'arrow-down': (
       <svg
@@ -94,6 +94,16 @@ const Svg = ({ name, className: className2, strokeWidth = 2 }) => {
         />
       </svg>
     ),
+    'drag-grid': (
+      <svg viewBox="0 0 11 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          fill="currentColor"
+          d="M2.22314 0C1.11858 0 0.223145 0.895431 0.223145 2C0.223145 3.10457 1.11858 4 2.22314 4C3.32771 4 4.22314 3.10457 4.22314 2C4.22314 0.895431 3.32771 0 2.22314 0ZM8.77686 0C7.67229 0 6.77686 0.895431 6.77686 2C6.77686 3.10457 7.67229 4 8.77686 4C9.88142 4 10.7769 3.10457 10.7769 2C10.7769 0.895431 9.88142 0 8.77686 0ZM0.223145 9C0.223145 7.89543 1.11858 7 2.22314 7C3.32771 7 4.22314 7.89543 4.22314 9C4.22314 10.1046 3.32771 11 2.22314 11C1.11858 11 0.223145 10.1046 0.223145 9ZM8.77686 7C7.67229 7 6.77686 7.89543 6.77686 9C6.77686 10.1046 7.67229 11 8.77686 11C9.88142 11 10.7769 10.1046 10.7769 9C10.7769 7.89543 9.88142 7 8.77686 7ZM0.223145 16C0.223145 14.8954 1.11858 14 2.22314 14C3.32771 14 4.22314 14.8954 4.22314 16C4.22314 17.1046 3.32771 18 2.22314 18C1.11858 18 0.223145 17.1046 0.223145 16ZM8.77686 14C7.67229 14 6.77686 14.8954 6.77686 16C6.77686 17.1046 7.67229 18 8.77686 18C9.88142 18 10.7769 17.1046 10.7769 16C10.7769 14.8954 9.88142 14 8.77686 14Z"
+        />
+      </svg>
+    ),
     'exclamation-circle': (
       <svg
         xmlns="http://www.w3.org/2000/svg"
@@ -236,6 +246,16 @@ const Svg = ({ name, className: className2, strokeWidth = 2 }) => {
         />
       </svg>
     ),
+    gear: (
+      <svg viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          fill="currentColor"
+          d="M8.86193 0.104004H10.1383L10.964 2.58138L11.506 2.87613L13.2571 1.19177L14.3466 1.85664L13.761 4.40148L14.174 4.69029L16.7384 4.1958L17.3641 5.30824L15.4304 7.10054L15.5487 7.49835L18.0261 8.32463V9.601L15.5487 10.4267L15.4304 10.836L17.3641 12.617L16.7384 13.7294L14.174 13.2349L13.761 13.5237L14.3466 16.0686L13.2571 16.7335L11.506 15.1591L10.964 15.4188L10.1383 17.8962H8.86193L8.03564 15.4187L7.51868 15.1591L5.74267 16.7335L4.65315 16.0686L5.23879 13.5237L4.82575 13.2349L2.2614 13.7294L1.63562 12.617L3.57334 10.836L3.45101 10.4267L0.973633 9.601V8.32463L3.45107 7.49835L3.57334 7.10054L1.63562 5.30824L2.2614 4.1958L4.82575 4.69029L5.23879 4.40148L4.65315 1.85664L5.74267 1.19177L7.51868 2.87613L8.03564 2.58144L8.86193 0.104004ZM9.49979 11.7199C11.0019 11.7199 12.2195 10.5022 12.2195 9.00009C12.2195 7.49801 11.0019 6.28033 9.49979 6.28033C7.99771 6.28033 6.78003 7.49801 6.78003 9.00009C6.78003 10.5022 7.99771 11.7199 9.49979 11.7199Z"
+        />
+      </svg>
+    ),
     lightbulb: (
       <svg
         xmlns="http://www.w3.org/2000/svg"
diff --git a/app/web/tailwind.config.js b/app/web/tailwind.config.js
index ccc766c..7fc88b7 100644
--- a/app/web/tailwind.config.js
+++ b/app/web/tailwind.config.js
@@ -10,6 +10,9 @@ module.exports = {
         'bounce-sm-slow': 'bounce-sm 5s linear infinite',
         'twist-sm-slow': 'twist-sm 10s infinite',
       },
+      cursor: {
+        grab: 'grab'
+      },
       keyframes: {
         'bounce-sm': {
           '0%, 100%': {