diff --git a/src/features/cameras/components/CameraGrid.tsx b/src/features/cameras/components/CameraGrid.tsx
index 0551d11..e31ff39 100644
--- a/src/features/cameras/components/CameraGrid.tsx
+++ b/src/features/cameras/components/CameraGrid.tsx
@@ -9,10 +9,16 @@ const CameraGrid = () => {
   const [tabIndex, setTabIndex] = useState(0);
 
   return (
-    <div className="flex flex-col gap-4 p-4 md:grid md:grid-cols-5 md:grid-rows-5 md:max-h-screen md:gap-0 md:p-0">
-      <VideoFeedGridPainter />
+    <div className="grid grid-cols-1 md:grid-cols-3 gap-4 p-4 h-screen max-h-screen overflow-hidden">
+      <div className="col-span-2 flex flex-col gap-4">
+        <div className="shrink-0">
+          <VideoFeedGridPainter />
+        </div>
+        <div className="flex-1 overflow-hidden">
+          <PlatePatch />
+        </div>
+      </div>
       <CameraSettings tabIndex={tabIndex} setTabIndex={setTabIndex} />
-      <PlatePatch />
     </div>
   );
 };
diff --git a/src/features/cameras/components/CameraSettings/CameraSettings.tsx b/src/features/cameras/components/CameraSettings/CameraSettings.tsx
index b6fdaab..9a5b80a 100644
--- a/src/features/cameras/components/CameraSettings/CameraSettings.tsx
+++ b/src/features/cameras/components/CameraSettings/CameraSettings.tsx
@@ -10,7 +10,7 @@ type CameraSettingsProps = {
 
 const CameraSettings = ({ tabIndex, setTabIndex }: CameraSettingsProps) => {
   return (
-    <Card className="p-4 w-full overflow-auto md:col-span-2 md:row-span-5 md:col-start-4 md:row-start-1">
+    <Card className="p-4 w-full h-full max-h-screen ">
       <Tabs
         selectedTabClassName="bg-gray-300 text-gray-900 font-semibold border-none rounded-sm mb-1"
         className="react-tabs"
diff --git a/src/features/cameras/components/CameraSettings/RegionSelector.tsx b/src/features/cameras/components/CameraSettings/RegionSelector.tsx
index f850e08..d91b41a 100644
--- a/src/features/cameras/components/CameraSettings/RegionSelector.tsx
+++ b/src/features/cameras/components/CameraSettings/RegionSelector.tsx
@@ -106,99 +106,105 @@ const RegionSelector = ({ regions, selectedRegionIndex, mode, cameraFeedID }: Re
   };
 
   return (
-    <div className="grid grid-cols-1 md:grid-cols-2 md:grid-rows-2 gap-4">
-      <div className="p-2 border border-gray-600 rounded-lg flex flex-col">
-        <h2 className="text-2xl mb-2">Tools</h2>
-        <div className="flex flex-col">
-          <label
-            htmlFor="paintMode"
-            className={`p-4 border rounded-lg  mb-2
+    <div className="flex flex-col gap-4 max-h-[50%]">
+      <div className="flex flex-row gap-3">
+        <div className="p-2 border border-gray-600 rounded-lg flex flex-col h-50 w-full">
+          <h2 className="text-2xl mb-2">Tools</h2>
+          <div className="flex flex-col">
+            <label
+              htmlFor="paintMode"
+              className={`p-4 border rounded-lg  mb-2
             ${mode === "painter" ? "border-gray-400 bg-[#202b36]" : "bg-[#253445] border-gray-700"}
             hover:bg-[#202b36] hover:cursor-pointer`}
-          >
-            <input
-              id="paintMode"
-              type="radio"
-              onChange={handleChange}
-              checked={mode === "painter"}
-              value="painter"
-              className="sr-only"
-            />
-            <span className="text-xl">Paint mode</span>
-          </label>
-          <label
-            htmlFor="eraseMode"
-            className={`p-4 border rounded-lg  mb-2
+            >
+              <input
+                id="paintMode"
+                type="radio"
+                onChange={handleChange}
+                checked={mode === "painter"}
+                value="painter"
+                className="sr-only"
+              />
+              <span className="text-xl">Paint mode</span>
+            </label>
+            <label
+              htmlFor="eraseMode"
+              className={`p-4 border rounded-lg  mb-2
             ${mode === "eraser" ? "border-gray-400 bg-[#202b36]" : "bg-[#253445] border-gray-700"}
             hover:bg-[#202b36] hover:cursor-pointer`}
-          >
-            <input
-              id="eraseMode"
-              type="radio"
-              onChange={handleChange}
-              checked={mode === "eraser"}
-              value={"eraser"}
-              className="sr-only"
-            />
-            <span className="text-xl">Erase mode</span>
-          </label>
+            >
+              <input
+                id="eraseMode"
+                type="radio"
+                onChange={handleChange}
+                checked={mode === "eraser"}
+                value={"eraser"}
+                className="sr-only"
+              />
+              <span className="text-xl">Erase mode</span>
+            </label>
+          </div>
         </div>
-      </div>
-      <div className="p-2 border border-gray-600 rounded-lg flex flex-col">
-        <h2 className="text-2xl mb-2">Bay Select</h2>
-        <>
-          {regions?.map((region, idx) => {
-            const isSelected = selectedRegionIndex === idx;
-            const inputId = `region-${idx}`;
-            return (
-              <label
-                htmlFor={inputId}
-                key={region.name}
-                className={`items-center p-4 m-1 rounded-xl border flex flex-row justify-between
+
+        <div className="p-2 border border-gray-600 rounded-lg flex flex-col w-full">
+          <h2 className="text-2xl mb-2">Bay Select</h2>
+          <>
+            {regions?.map((region, idx) => {
+              const isSelected = selectedRegionIndex === idx;
+              const inputId = `region-${idx}`;
+              return (
+                <label
+                  htmlFor={inputId}
+                  key={region.name}
+                  className={`items-center p-4 m-1 rounded-xl border flex flex-row justify-between
                   ${isSelected ? "border-gray-400 bg-[#202b36]" : "bg-[#253445] border-gray-700"} hover:bg-[#202b36] hover:cursor-pointer`}
-              >
-                <div className="flex flex-row gap-4 items-center">
-                  <input
-                    type="radio"
-                    checked={isSelected}
-                    id={inputId}
-                    name="region"
-                    className="sr-only"
-                    onChange={() => {
-                      handleModeChange("painter");
-                      handleRegionSelect(idx);
-                    }}
+                >
+                  <div className="flex flex-row gap-4 items-center">
+                    <input
+                      type="radio"
+                      checked={isSelected}
+                      id={inputId}
+                      name="region"
+                      className="sr-only"
+                      onChange={() => {
+                        handleModeChange("painter");
+                        handleRegionSelect(idx);
+                      }}
+                    />
+                    <span className="text-xl">{region.name}</span>
+                  </div>
+                  <ColourPicker
+                    colour={region.brushColour}
+                    setColour={(c: string) => handleRegionColourChange(idx, c)}
                   />
-                  <span className="text-xl">{region.name}</span>
-                </div>
-                <ColourPicker colour={region.brushColour} setColour={(c: string) => handleRegionColourChange(idx, c)} />
-                <div></div>
-              </label>
-            );
-          })}
-        </>
-        <div className="flex flex-col gap-4  mt-4">
-          <button className="border border-blue-900 bg-blue-700 px-4 py-1 rounded-md" onClick={handleAddRegionClick}>
-            Add Bay
-          </button>
-          <button className="border border-red-900 bg-red-700 px-4 py-1 rounded-md" onClick={handleRemoveClick}>
-            Remove Bay
-          </button>
+                  <div></div>
+                </label>
+              );
+            })}
+          </>
+          <div className="flex flex-col gap-4  mt-4">
+            <button className="border border-blue-900 bg-blue-700 px-4 py-1 rounded-md" onClick={handleAddRegionClick}>
+              Add Bay
+            </button>
+            <button className="border border-red-900 bg-red-700 px-4 py-1 rounded-md" onClick={handleRemoveClick}>
+              Remove Bay
+            </button>
+          </div>
         </div>
       </div>
 
-      <div className="p-2 border border-gray-600 rounded-lg flex flex-col md:col-span-2 h-50">
-        <div className="flex flex-col">
-          <h2 className="text-2xl mb-2">Actions</h2>
+      <div className="p-2 border border-gray-600 rounded-lg flex flex-col w-full">
+        <h2 className="text-2xl mb-2">Actions</h2>
+        <div className="flex flex-col md:flex-row mx-auto gap-4 justify-center">
           <button
             onClick={handleSaveclick}
-            className="mt-2 px-4 py-2 border border-blue-600 rounded-md text-white bg-blue-600 w-full md:w-[40%] hover:bg-blue-700 hover:cursor-pointer"
+            className="mt-2 px-4 py-2 border border-blue-600 rounded-md text-white bg-blue-600 w-full md:w-full hover:bg-blue-700 hover:cursor-pointer"
           >
             Save Region
           </button>
           <button
             onClick={handleResetRegion}
-            className="mt-2 px-4 py-2 border border-red-600 rounded-md text-white bg-red-600 w-full md:w-[40%] hover:bg-red-700 hover:cursor-pointer"
+            className="mt-2 px-4 py-2 border border-red-600 rounded-md text-white bg-red-600 w-full md:w-full hover:bg-red-700 hover:cursor-pointer"
           >
             Reset Region
           </button>
diff --git a/src/features/cameras/components/PlatePatch/SightingPatch.tsx b/src/features/cameras/components/PlatePatch/SightingPatch.tsx
index 38685e8..31b037d 100644
--- a/src/features/cameras/components/PlatePatch/SightingPatch.tsx
+++ b/src/features/cameras/components/PlatePatch/SightingPatch.tsx
@@ -6,9 +6,9 @@ import SightingExitTable from "./SightingExitTable";
 
 const PlatePatch = () => {
   return (
-    <Card className="p-4 w-full md:w-[95%] md:row-start-4 md:col-span-3 md:h-[190%]">
+    <Card className="p-4 w-full max-h-[600px] overflow-hidden flex flex-col">
       <CardHeader title="Entry / Exit" />
-      <Tabs defaultIndex={1}>
+      <Tabs defaultIndex={1} className="flex-1 overflow-hidden flex flex-col">
         <TabList>
           <Tab>Entry Sightings</Tab>
           <Tab>Exit Sightings</Tab>
diff --git a/src/features/cameras/components/Video/VideoFeedGridPainter.tsx b/src/features/cameras/components/Video/VideoFeedGridPainter.tsx
index 3300d2e..3a566dc 100644
--- a/src/features/cameras/components/Video/VideoFeedGridPainter.tsx
+++ b/src/features/cameras/components/Video/VideoFeedGridPainter.tsx
@@ -93,7 +93,7 @@ const VideoFeedGridPainter = () => {
       const width = window.innerWidth;
 
       const aspectRatio = BACKEND_WIDTH / BACKEND_HEIGHT;
-      const newWidth = width * 0.55;
+      const newWidth = width * 0.6;
       const newHeight = newWidth / aspectRatio;
       setStageSize({ width: newWidth, height: newHeight });
     };
diff --git a/src/features/dashboard/components/DashboardGrid.tsx b/src/features/dashboard/components/DashboardGrid.tsx
index 11fa94b..c5c5635 100644
--- a/src/features/dashboard/components/DashboardGrid.tsx
+++ b/src/features/dashboard/components/DashboardGrid.tsx
@@ -35,7 +35,7 @@ const DashboardGrid = () => {
   const categoryC = statusCategories?.channelC ?? [];
 
   return (
-    <div className="grid grid-cols-1 md:grid-rows-2 md:grid-cols-2">
+    <div className="grid grid-cols-1 md:grid-rows-2 md:grid-cols-2 gap-4">
       <SystemStatusCard />
       <SystemHealthCard
         startTime={startTime}
@@ -46,7 +46,7 @@ const DashboardGrid = () => {
         dateUpdatedAt={dateUpdatedAt}
         refetch={refetch}
       />
-      <div className="grid grid-cols-1 md:col-span-2 md:grid-cols-3">
+      <div className="grid grid-cols-1 md:col-span-2 md:grid-cols-3 gap-x-4">
         <CameraStatus title="Camera A" category={categoryA} isError={isError} />
         <CameraStatus title="Camera B" category={categoryB} isError={isError} />
         <CameraStatus title="Camera C" category={categoryC} isError={isError} />
diff --git a/src/ui/Card.tsx b/src/ui/Card.tsx
index bf2316c..11c0fa1 100644
--- a/src/ui/Card.tsx
+++ b/src/ui/Card.tsx
@@ -10,7 +10,7 @@ const Card = ({ children, className }: CardProps) => {
   return (
     <div
       className={clsx(
-        "bg-[#253445] rounded-lg mt-4 mx-2 shadow-2xl overflow-x-hidden md:row-span-1 px-2 border border-gray-600 ",
+        "bg-[#253445] rounded-lg mt-4  shadow-2xl overflow-x-hidden md:row-span-1 px-2 border border-gray-600 ",
         className,
       )}
     >