diff --git a/src/blueapi/BlueapiComponents.tsx b/src/blueapi/BlueapiComponents.tsx
index 0e40b1d..32ef508 100644
--- a/src/blueapi/BlueapiComponents.tsx
+++ b/src/blueapi/BlueapiComponents.tsx
@@ -13,6 +13,7 @@ import { parseInstrumentSession, readVisitFromPv } from "./visit";
 type SeverityLevel = "success" | "info" | "warning" | "error";
 type VariantChoice = "outlined" | "contained";
 type ButtonSize = "small" | "medium" | "large";
+type ButtonColor = "primary" | "secondary" | "custom";
 
 type RunPlanButtonProps = {
   btnLabel: string;
@@ -21,6 +22,11 @@ type RunPlanButtonProps = {
   title?: string;
   btnVariant?: VariantChoice;
   btnSize?: ButtonSize;
+  btnColor?: ButtonColor;
+  disabled?: boolean;
+  sx?: object;
+  tooltipSx?: object;
+  typographySx?: object;
 };
 
 // @{todo} Ideally we should be able to set up the stylings for
@@ -47,6 +53,10 @@ export function RunPlanButton(props: RunPlanButtonProps) {
   const params = props.planParams ? props.planParams : {};
   const variant = props.btnVariant ? props.btnVariant : "outlined";
   const size = props.btnSize ? props.btnSize : "medium";
+  const color = props.btnColor ? props.btnColor : "primary";
+  const disabled = props.disabled ? props.disabled : false;
+  const sx = props.sx ? props.sx : {}; // Style for the button component which is the most likely to be customised
+  const tooltipSx = props.tooltipSx ? props.tooltipSx : {};
 
   const handleClick = () => {
     setOpenSnackbar(true);
@@ -85,18 +95,21 @@ export function RunPlanButton(props: RunPlanButtonProps) {
 
   return (
     <div>
-      <Tooltip title={props.title ? props.title : ""} placement="bottom">
+      <Tooltip
+        title={props.title ? props.title : ""}
+        placement="bottom"
+        sx={tooltipSx}
+        arrow
+      >
         <Button
           variant={variant}
-          color="custom"
+          color={color}
           size={size}
+          disabled={disabled}
           onClick={handleClick}
+          sx={sx}
         >
-          <Typography
-            variant="button"
-            fontWeight="fontWeightBold"
-            sx={{ display: "block" }}
-          >
+          <Typography variant="button" fontWeight="fontWeightBold">
             {props.btnLabel}
           </Typography>
         </Button>
diff --git a/src/screens/OavMover.tsx b/src/screens/OavMover.tsx
index b7bb9cd..d602a4d 100644
--- a/src/screens/OavMover.tsx
+++ b/src/screens/OavMover.tsx
@@ -261,13 +261,13 @@ export function CoordinateSystem() {
     setOpen(false);
   };
 
-  // const buttonStyle = {
-  //   color: "white",
-  //   padding: "12px",
-  //   backgroundColor: "#1c2025",
-  //   width: "100%",
-  //   height: "85%",
-  // };
+  const buttonStyle = {
+    color: "white",
+    padding: "12px",
+    backgroundColor: "#1c2025",
+    width: "90%",
+    height: "85%",
+  };
 
   return (
     <>
@@ -287,6 +287,8 @@ export function CoordinateSystem() {
               title="Go to Fiducial 0"
               btnVariant="contained"
               btnSize="large"
+              sx={buttonStyle}
+              tooltipSx={{ color: "green" }}
             />
           </Grid2>
           <Grid2 size={4}>
@@ -297,6 +299,7 @@ export function CoordinateSystem() {
               title="Go to Fiducial 1"
               btnVariant="contained"
               btnSize="large"
+              sx={buttonStyle}
             />
           </Grid2>
           <Grid2 size={4}>
@@ -307,6 +310,7 @@ export function CoordinateSystem() {
               title="Go to Fiducial 2"
               btnVariant="contained"
               btnSize="large"
+              sx={buttonStyle}
             />
           </Grid2>
           <Grid2 size={4}>
@@ -315,6 +319,7 @@ export function CoordinateSystem() {
               planName="gui_set_fiducial_0"
               title="Set Fiducial 0"
               btnVariant="contained"
+              sx={buttonStyle}
             />
           </Grid2>
           <Grid2 size={4}>
@@ -324,6 +329,7 @@ export function CoordinateSystem() {
               planParams={{ point: "1" }}
               title="Set Fiducial 1"
               btnVariant="contained"
+              sx={buttonStyle}
             />
           </Grid2>
           <Grid2 size={4}>
@@ -333,6 +339,7 @@ export function CoordinateSystem() {
               planParams={{ point: "2" }}
               title="Set Fiducial 2"
               btnVariant="contained"
+              sx={buttonStyle}
             />
           </Grid2>
           <Grid2 size={6}>
@@ -341,6 +348,7 @@ export function CoordinateSystem() {
               planName="cs_maker"
               title="Create the coordinate system on the pmac."
               btnVariant="contained"
+              sx={buttonStyle}
             />
           </Grid2>
           <Grid2 size={6}>
@@ -349,6 +357,7 @@ export function CoordinateSystem() {
               planName="block_check"
               title="Check the coordinate system was set up correctly."
               btnVariant="contained"
+              sx={buttonStyle}
             />
           </Grid2>
         </Grid2>