diff --git a/gcs/src/components/params/paramsToolbar.jsx b/gcs/src/components/params/paramsToolbar.jsx
index 84a455e84..d5bcddaf6 100644
--- a/gcs/src/components/params/paramsToolbar.jsx
+++ b/gcs/src/components/params/paramsToolbar.jsx
@@ -7,15 +7,7 @@ rebooting the autopilot
 
 // 3rd party imports
 import { Button, TextInput, Tooltip } from "@mantine/core"
-import {
-  IconDownload,
-  IconEye,
-  IconPencil,
-  IconPower,
-  IconRefresh,
-  IconTool,
-  IconUpload,
-} from "@tabler/icons-react"
+import { IconEye, IconTool } from "@tabler/icons-react"
 
 // Styling imports
 import resolveConfig from "tailwindcss/resolveConfig"
@@ -25,68 +17,21 @@ const tailwindColors = resolveConfig(tailwindConfig).theme.colors
 // Redux
 import { useDispatch, useSelector } from "react-redux"
 import {
-  emitExportParamsToFile,
-  emitRebootAutopilot,
-  emitRefreshParams,
-  emitSetMultipleParams,
-  resetParamState,
   selectModifiedParams,
   selectParamSearchValue,
   selectShowModifiedParams,
-  setAutoPilotRebootModalOpen,
-  setFetchingVars,
-  setModifiedParams,
-  setParams,
   setParamSearchValue,
-  setShownParams,
   toggleShowModifiedParams,
 } from "../../redux/slices/paramsSlice.js"
 
-export default function ParamsToolbar({ loadParamsFromFile }) {
+export default function ParamsToolbar() {
   const dispatch = useDispatch()
+  const searchValue = useSelector(selectParamSearchValue)
   const modifiedParams = useSelector(selectModifiedParams)
   const showModifiedParams = useSelector(selectShowModifiedParams)
-  const searchValue = useSelector(selectParamSearchValue)
-
-  function refreshCallback() {
-    dispatch(setParams([]))
-    dispatch(setModifiedParams([]))
-    dispatch(setShownParams([]))
-    dispatch(emitRefreshParams())
-    dispatch(setFetchingVars(true))
-  }
-
-  function rebootCallback() {
-    dispatch(emitRebootAutopilot())
-    dispatch(setAutoPilotRebootModalOpen(true))
-    dispatch(resetParamState())
-  }
-
-  async function saveParamsToFile() {
-    const options = {
-      title: "Save parameters to a file",
-      filters: [
-        { name: "Param File", extensions: ["param"] },
-        { name: "All Files", extensions: ["*"] },
-      ],
-    }
-
-    const result = await window.ipcRenderer.invoke(
-      "app:get-save-file-path",
-      options,
-    )
-
-    if (!result.canceled) {
-      dispatch(
-        emitExportParamsToFile({
-          filePath: result.filePath,
-        }),
-      )
-    }
-  }
 
   return (
-    <div className="flex justify-center space-x-4">
+    <div className="flex items-center gap-4 m-4">
       <Tooltip
         label={showModifiedParams ? "Show all params" : "Show modified params"}
         position="bottom"
@@ -95,11 +40,11 @@ export default function ParamsToolbar({ loadParamsFromFile }) {
           size="sm"
           onClick={() => dispatch(toggleShowModifiedParams())}
           color={tailwindColors.orange[600]}
+          disabled={modifiedParams.length === 0}
         >
           {showModifiedParams ? <IconEye size={14} /> : <IconTool size={14} />}
         </Button>
       </Tooltip>
-
       <TextInput
         className="w-1/3"
         placeholder="Search by parameter name"
@@ -108,52 +53,6 @@ export default function ParamsToolbar({ loadParamsFromFile }) {
           dispatch(setParamSearchValue(event.currentTarget.value))
         }
       />
-
-      <Button
-        size="sm"
-        rightSection={<IconPencil size={14} />}
-        disabled={!modifiedParams.length}
-        onClick={() => dispatch(emitSetMultipleParams(modifiedParams))}
-        color={tailwindColors.green[600]}
-      >
-        Write params
-      </Button>
-
-      <Button
-        size="sm"
-        rightSection={<IconRefresh size={14} />}
-        onClick={refreshCallback}
-        color={tailwindColors.blue[600]}
-      >
-        Refresh params
-      </Button>
-
-      <Button
-        size="sm"
-        rightSection={<IconPower size={14} />}
-        onClick={rebootCallback}
-        color={tailwindColors.red[600]}
-      >
-        Reboot FC
-      </Button>
-
-      <Button
-        size="sm"
-        rightSection={<IconDownload size={14} />}
-        onClick={saveParamsToFile}
-        color={tailwindColors.blue[600]}
-      >
-        Save params to file
-      </Button>
-
-      <Button
-        size="sm"
-        rightSection={<IconUpload size={14} />}
-        onClick={loadParamsFromFile}
-        color={tailwindColors.blue[600]}
-      >
-        Load params from file
-      </Button>
     </div>
   )
 }
diff --git a/gcs/src/components/params/rowItem.jsx b/gcs/src/components/params/rowItem.jsx
index 256fe3ac1..aa15263a4 100644
--- a/gcs/src/components/params/rowItem.jsx
+++ b/gcs/src/components/params/rowItem.jsx
@@ -59,15 +59,17 @@ const RowItem = memo(({ index, style }) => {
   }, [aircraftType, param])
 
   return (
-    <div style={style} className="flex flex-row items-center space-x-4">
-      <div className="flex flex-row w-2/12 gap-x-2">
+    <div
+      style={style}
+      className="flex items-center px-8 gap-6 border-t border-neutral-700"
+    >
+      <div className="flex items-center w-2/12 gap-x-2">
         <Tooltip label={paramDef?.DisplayName ?? null} position="top-start">
           <p>{param.param_id}</p>
         </Tooltip>
 
         {paramDef?.Values && paramDef?.Range && (
           <Tooltip
-            className="self-center"
             label={
               <div className="text-wrap max-w-80">
                 {Object.keys(paramDef?.Values).map((key) => {
diff --git a/gcs/src/components/params/valueInput.jsx b/gcs/src/components/params/valueInput.jsx
index 1b8bfa7fc..5ebba3e20 100644
--- a/gcs/src/components/params/valueInput.jsx
+++ b/gcs/src/components/params/valueInput.jsx
@@ -76,12 +76,14 @@ export default function ValueInput({ index, paramDef, className }) {
     } else {
       // Otherwise add it to modified params
       dispatch(
-        appendModifiedParams({
-          param_id: param.param_id,
-          param_value: value,
-          param_type: param.param_type,
-          initial_value: param.param_value,
-        }),
+        appendModifiedParams([
+          {
+            param_id: param.param_id,
+            param_value: value,
+            param_type: param.param_type,
+            initial_value: param.param_value,
+          },
+        ]),
       )
     }
   }
diff --git a/gcs/src/params.jsx b/gcs/src/params.jsx
index 99544d848..dc90c4b88 100644
--- a/gcs/src/params.jsx
+++ b/gcs/src/params.jsx
@@ -8,11 +8,17 @@
 import { useEffect } from "react"
 
 // 3rd Party Imports
-import { Button, Progress } from "@mantine/core"
+import { Button, Divider, Progress } from "@mantine/core"
 import { useDebouncedValue } from "@mantine/hooks"
+import { ResizableBox } from "react-resizable"
 import AutoSizer from "react-virtualized-auto-sizer"
 import { FixedSizeList } from "react-window"
 
+// Styling imports
+import resolveConfig from "tailwindcss/resolveConfig"
+import tailwindConfig from "../tailwind.config.js"
+const tailwindColors = resolveConfig(tailwindConfig).theme.colors
+
 // Custom components, helpers, and data
 import Layout from "./components/layout.jsx"
 import NoDroneConnected from "./components/noDroneConnected.jsx"
@@ -27,7 +33,10 @@ import { EXCLUDE_PARAMS_LOAD } from "./helpers/mavlinkConstants.js"
 import { showErrorNotification } from "./helpers/notification.js"
 import { selectConnectedToDrone } from "./redux/slices/droneConnectionSlice.js"
 import {
+  emitExportParamsToFile,
+  emitRebootAutopilot,
   emitRefreshParams,
+  emitSetMultipleParams,
   resetParamState,
   selectFetchingVars,
   selectFetchingVarsProgress,
@@ -37,11 +46,14 @@ import {
   selectParamSearchValue,
   selectShowModifiedParams,
   selectShownParams,
+  setAutoPilotRebootModalOpen,
   setFetchingVars,
   setHasFetchedOnce,
   setLoadedFileName,
   setLoadedParams,
   setLoadParamsFileModalOpen,
+  setModifiedParams,
+  setParams,
   setShownParams,
 } from "./redux/slices/paramsSlice.js"
 
@@ -105,6 +117,43 @@ export default function Params() {
     dispatch(setHasFetchedOnce(true))
   }
 
+  function refreshCallback() {
+    dispatch(setParams([]))
+    dispatch(setModifiedParams([]))
+    dispatch(setShownParams([]))
+    dispatch(emitRefreshParams())
+    dispatch(setFetchingVars(true))
+  }
+
+  function rebootCallback() {
+    dispatch(emitRebootAutopilot())
+    dispatch(setAutoPilotRebootModalOpen(true))
+    dispatch(resetParamState())
+  }
+
+  async function saveParamsToFile() {
+    const options = {
+      title: "Save parameters to a file",
+      filters: [
+        { name: "Param File", extensions: ["param"] },
+        { name: "All Files", extensions: ["*"] },
+      ],
+    }
+
+    const result = await window.ipcRenderer.invoke(
+      "app:get-save-file-path",
+      options,
+    )
+
+    if (!result.canceled) {
+      dispatch(
+        emitExportParamsToFile({
+          filePath: result.filePath,
+        }),
+      )
+    }
+  }
+
   async function loadParamsFromFile() {
     const result = await window.ipcRenderer.invoke(
       "params:load-params-from-file",
@@ -163,51 +212,106 @@ export default function Params() {
       <LoadParamsFileModal />
 
       {connected ? (
-        <>
-          {fetchingVars && (
-            <div className="my-auto">
-              {fetchingVarsProgress.param_id && (
-                <p className="text-center my-4">
-                  Fetched {fetchingVarsProgress.param_id}
-                </p>
-              )}
-              <Progress
-                radius="xs"
-                value={fetchingVarsProgress.progress}
-                className="w-1/3 mx-auto my-auto"
-              />
-            </div>
-          )}
-
-          {Object.keys(params).length > 0 && !fetchingVars && (
-            <div className="w-full h-full contents">
-              <ParamsToolbar loadParamsFromFile={loadParamsFromFile} />
-
-              <div className="h-full w-2/3 mx-auto">
-                <AutoSizer>
-                  {({ height, width }) => (
-                    <FixedSizeList
-                      height={height}
-                      width={width}
-                      itemSize={120}
-                      itemCount={shownParams.length}
+        <div className="flex flex-col h-screen overflow-hidden">
+          <div className="flex flex-1 overflow-hidden">
+            {!fetchingVars && (
+              <ResizableBox
+                width={225}
+                height={Infinity}
+                minConstraints={[225, Infinity]}
+                maxConstraints={[600, Infinity]}
+                resizeHandles={["e"]}
+                axis="x"
+                handle={
+                  <div className="w-2 h-full bg-falcongrey-900 hover:bg-falconred-500 cursor-col-resize absolute right-0 top-0 z-10"></div>
+                }
+                className="relative bg-falcongrey-800 overflow-y-auto"
+              >
+                <div className="flex flex-col gap-4 p-4">
+                  <div className="flex flex-col gap-4">
+                    <Button onClick={refreshCallback} className="grow">
+                      Refresh params
+                    </Button>
+                    <Button
+                      disabled={!modifiedParams.length}
+                      onClick={() =>
+                        dispatch(emitSetMultipleParams(modifiedParams))
+                      }
+                      className="grow"
+                    >
+                      Write params
+                    </Button>
+                  </div>
+                  <Divider />
+                  <div className="flex flex-col gap-4">
+                    <Button onClick={saveParamsToFile} className="grow">
+                      Save to file
+                    </Button>
+                    <Button onClick={loadParamsFromFile} className="grow">
+                      Load from file
+                    </Button>
+                  </div>
+                  <Divider />
+                  <div className="flex flex-col gap-4">
+                    <Button
+                      onClick={rebootCallback}
+                      color={tailwindColors.red[600]}
                     >
-                      {Row}
-                    </FixedSizeList>
+                      Reboot FC
+                    </Button>
+                  </div>
+                </div>
+              </ResizableBox>
+            )}
+
+            {/* Main content area */}
+            <div className="flex-1 flex flex-col overflow-hidden">
+              {fetchingVars && (
+                <div className="my-auto">
+                  {fetchingVarsProgress.param_id && (
+                    <p className="text-center my-4">
+                      Fetched {fetchingVarsProgress.param_id}
+                    </p>
                   )}
-                </AutoSizer>
-              </div>
-            </div>
-          )}
-          {Object.keys(params).length === 0 && !fetchingVars && (
-            <div className="flex flex-col my-auto mx-auto">
-              <p className="text-center my-4">
-                No parameters found, try fetching them again.
-              </p>
-              <Button onClick={() => fetchParams()}>Fetch Params</Button>
+                  <Progress
+                    radius="xs"
+                    value={fetchingVarsProgress.progress}
+                    className="w-1/3 mx-auto my-auto"
+                  />
+                </div>
+              )}
+
+              {Object.keys(params).length > 0 && !fetchingVars && (
+                <div className="h-full contents">
+                  <ParamsToolbar />
+
+                  <div className="h-full">
+                    <AutoSizer>
+                      {({ height, width }) => (
+                        <FixedSizeList
+                          height={height}
+                          width={width}
+                          itemSize={120}
+                          itemCount={shownParams.length}
+                        >
+                          {Row}
+                        </FixedSizeList>
+                      )}
+                    </AutoSizer>
+                  </div>
+                </div>
+              )}
+              {Object.keys(params).length === 0 && !fetchingVars && (
+                <div className="flex flex-col my-auto mx-auto">
+                  <p className="text-center my-4">
+                    No parameters found, try fetching them again.
+                  </p>
+                  <Button onClick={() => fetchParams()}>Fetch Params</Button>
+                </div>
+              )}
             </div>
-          )}
-        </>
+          </div>
+        </div>
       ) : (
         <NoDroneConnected tab="params" />
       )}