diff --git a/frontend/src/controls/Attachments.tsx b/frontend/src/controls/Attachments.tsx
index 47a7c29e440..9835f7681ad 100644
--- a/frontend/src/controls/Attachments.tsx
+++ b/frontend/src/controls/Attachments.tsx
@@ -2,9 +2,10 @@ import {
     RobotAttributeClass,
     useRobotAttributeQuery,
 } from "../api";
-import {Box, Grid, Paper, Typography, ToggleButton, ToggleButtonGroup} from "@mui/material";
+import {Grid, Typography, ToggleButton, ToggleButtonGroup} from "@mui/material";
 import React from "react";
-import LoadingFade from "../components/LoadingFade";
+import ControlsCard from "./ControlsCard";
+import {Extension} from "@mui/icons-material";
 
 const Attachments = (): React.ReactElement | null => {
     const {
@@ -31,44 +32,32 @@ const Attachments = (): React.ReactElement | null => {
         }
 
         return (
-            <ToggleButtonGroup size="small" fullWidth>
-                {attachments.map(({ type, attached }) => {
-                    return (
-                        <ToggleButton disabled selected={attached} key={type} value={type} fullWidth>
-                            {type}
-                        </ToggleButton>
-                    );
-                })}
-            </ToggleButtonGroup>
+            <Grid container direction="row" alignItems="center" pt={1}>
+                <Grid item sx={{flexGrow: 1}}>
+                    <ToggleButtonGroup size="small" fullWidth>
+                        {attachments.map(({ type, attached }) => {
+                            return (
+                                <ToggleButton disabled selected={attached} key={type} value={type} fullWidth>
+                                    {type}
+                                </ToggleButton>
+                            );
+                        })}
+                    </ToggleButtonGroup>
+                </Grid>
+            </Grid>
         );
     }, [attachments, isAttachmentError]);
 
     return (
-        <Grid item>
-            <Paper>
-                <Grid container direction="column">
-                    <Box px={2} pt={1}>
-                        <Grid item container alignItems="center" spacing={1}>
-                            <Grid item>
-                                <Typography variant="subtitle1">
-                                    Attachments
-                                </Typography>
-                            </Grid>
-                            <Grid item>
-                                <LoadingFade
-                                    in={isAttachmentPending}
-                                    transitionDelay={isAttachmentPending ? "500ms" : "0ms"}
-                                    size={20}
-                                />
-                            </Grid>
-                        </Grid>
-                        <Grid container direction="row" sx={{paddingBottom: "8px", paddingTop: "8px", maxHeight: "4em"}}>
-                            {attachmentDetails}
-                        </Grid>
-                    </Box>
-                </Grid>
-            </Paper>
-        </Grid>
+        <ControlsCard
+            icon={Extension}
+            title="Attachments"
+            isLoading={isAttachmentPending}
+        >
+            <Grid container direction="row" sx={{maxHeight: "4em"}}>
+                {attachmentDetails}
+            </Grid>
+        </ControlsCard>
     );
 };
 
diff --git a/frontend/src/controls/BasicControls.tsx b/frontend/src/controls/BasicControls.tsx
index fe974fc6c5e..6b23c287898 100644
--- a/frontend/src/controls/BasicControls.tsx
+++ b/frontend/src/controls/BasicControls.tsx
@@ -5,6 +5,7 @@ import {
     DialogContentText,
     Grid,
     Paper,
+    Skeleton,
     Typography,
 } from "@mui/material";
 import {
@@ -21,7 +22,6 @@ import {
     SvgIconComponent,
 } from "@mui/icons-material";
 import React from "react";
-import LoadingFade from "../components/LoadingFade";
 import ConfirmationDialog from "../components/ConfirmationDialog";
 import {usePendingMapAction} from "../map/Map";
 
@@ -62,7 +62,7 @@ const BasicControls = (): React.ReactElement => {
             <Grid item>
                 <Paper>
                     <Box p={1}>
-                        <LoadingFade/>
+                        <Skeleton height="4rem" />
                     </Box>
                 </Paper>
             </Grid>
@@ -114,7 +114,7 @@ const BasicControls = (): React.ReactElement => {
         <>
             <Grid item>
                 <Paper>
-                    <Box p={1}>
+                    <Box p={1.5}>
                         <Grid item container direction="column">
                             <Grid item>
                                 <ButtonGroup
diff --git a/frontend/src/controls/ControlsBody.tsx b/frontend/src/controls/ControlsBody.tsx
index cf2d4f8fed7..8e2de8968ac 100644
--- a/frontend/src/controls/ControlsBody.tsx
+++ b/frontend/src/controls/ControlsBody.tsx
@@ -41,7 +41,7 @@ const ControlsBody = (): React.ReactElement => {
 
 
     return (
-        <Grid container spacing={2} direction="column" sx={{userSelect: "none"}}>
+        <Grid container spacing={1.5} direction="column" sx={{userSelect: "none"}}>
             {basicControls && <BasicControls />}
 
             <RobotStatus />
diff --git a/frontend/src/controls/ControlsCard.tsx b/frontend/src/controls/ControlsCard.tsx
new file mode 100644
index 00000000000..5c6a8ceb3db
--- /dev/null
+++ b/frontend/src/controls/ControlsCard.tsx
@@ -0,0 +1,40 @@
+import {Box, Grid, Paper, Skeleton, SvgIconProps, Typography} from "@mui/material";
+import React, {ReactNode} from "react";
+
+
+interface ControlsCardProps {
+    icon: React.ComponentType<SvgIconProps>;
+    title: string;
+    children: ReactNode;
+    isLoading?: boolean
+}
+
+const ControlsCard: React.FC<ControlsCardProps> = ({ icon: Icon, title, children, isLoading }) => (
+    <Grid item>
+        <Paper>
+            <Grid container direction="column">
+                <Box px={1.5} py={1.5}>
+                    <Grid item container alignItems="center" spacing={1}>
+                        <Grid item><Icon fontSize="small" /></Grid>
+                        <Grid item style={{paddingTop: 0}}>
+                            <Typography variant="subtitle1">
+                                {title}
+                            </Typography>
+                        </Grid>
+                    </Grid>
+                    <Grid item>
+                        {
+                            isLoading ? (
+                                <Skeleton height="4rem" />
+                            ) : (
+                                children
+                            )
+                        }
+                    </Grid>
+                </Box>
+            </Grid>
+        </Paper>
+    </Grid>
+);
+
+export default ControlsCard;
diff --git a/frontend/src/controls/CurrentStatistics.tsx b/frontend/src/controls/CurrentStatistics.tsx
index 51f9ecf4c17..3f5a8ac55b6 100644
--- a/frontend/src/controls/CurrentStatistics.tsx
+++ b/frontend/src/controls/CurrentStatistics.tsx
@@ -2,8 +2,8 @@ import {useCurrentStatisticsQuery} from "../api";
 import {Box, CircularProgress, Grid, Paper, Typography} from "@mui/material";
 import {Equalizer as StatisticsIcon} from "@mui/icons-material";
 import React from "react";
-import LoadingFade from "../components/LoadingFade";
 import {getFriendlyStatName, getHumanReadableStatValue} from "../utils";
+import ControlsCard from "./ControlsCard";
 
 const CurrentStatistics = (): React.ReactElement => {
     const {
@@ -50,32 +50,11 @@ const CurrentStatistics = (): React.ReactElement => {
     ]);
 
     return (
-        <Grid item>
-            <Paper>
-                <Grid container direction="column">
-                    <Box px={2} pt={1}>
-                        <Grid item container alignItems="center" spacing={1}>
-                            <Grid item><StatisticsIcon/></Grid>
-                            <Grid item>
-                                <Typography variant="subtitle1">
-                                    Current Statistics
-                                </Typography>
-                            </Grid>
-                            <Grid item>
-                                <LoadingFade
-                                    in={statisticsPending}
-                                    transitionDelay={statisticsPending ? "500ms" : "0ms"}
-                                    size={20}
-                                />
-                            </Grid>
-                        </Grid>
-                        <Grid container direction="row" sx={{paddingBottom: "8px", paddingTop: "8px", maxHeight: "4em"}}>
-                            {body}
-                        </Grid>
-                    </Box>
-                </Grid>
-            </Paper>
-        </Grid>
+        <ControlsCard icon={StatisticsIcon} title="Current Statistics" isLoading={statisticsPending}>
+            <Grid container direction="row">
+                {body}
+            </Grid>
+        </ControlsCard>
     );
 };
 
diff --git a/frontend/src/controls/Dock.tsx b/frontend/src/controls/Dock.tsx
index bfe1a8aed4e..c555509bacd 100644
--- a/frontend/src/controls/Dock.tsx
+++ b/frontend/src/controls/Dock.tsx
@@ -8,14 +8,15 @@ import {
     useRobotStatusQuery
 } from "../api";
 import {useCapabilitiesSupported} from "../CapabilitiesProvider";
-import {Box, Button, Grid, Icon, Paper, styled, Typography} from "@mui/material";
+import {Button, Grid, Icon, styled, Typography} from "@mui/material";
 import {
     RestoreFromTrash as EmptyIcon,
+    Villa as DockIcon,
     Water as CleanMopIcon,
     WindPower as DryMopIcon,
 } from "@mui/icons-material";
 import React from "react";
-import LoadingFade from "../components/LoadingFade";
+import ControlsCard from "./ControlsCard";
 
 const Dock = (): React.ReactElement => {
     const { data: robotStatus, isPending: isRobotStatusPending } = useRobotStatusQuery();
@@ -60,108 +61,111 @@ const Dock = (): React.ReactElement => {
     } = useMopDockDryManualTriggerMutation();
 
 
-    const dockStatusIsRelevant = mopDockCleanTriggerSupported || mopDockDryTriggerSupported;
-    const commandIsExecuting = emptyIsExecuting || mopDockCleanCommandExecuting || mopDockDryCommandExecuting;
-    const mopAttachmentAttached = attachments?.find(a => {
-        return a.type === "mop";
-    })?.attached === true;
+    const body = React.useMemo(() => {
+        const dockStatusIsRelevant = mopDockCleanTriggerSupported || mopDockDryTriggerSupported;
+        const commandIsExecuting = emptyIsExecuting || mopDockCleanCommandExecuting || mopDockDryCommandExecuting;
+        const mopAttachmentAttached = attachments?.find(a => {
+            return a.type === "mop";
+        })?.attached === true;
 
-    if (isPending) {
-        return (
-            <Grid item>
-                <Paper>
-                    <Box p={1}>
-                        <LoadingFade/>
-                    </Box>
-                </Paper>
-            </Grid>
-        );
-    }
+        if (isPending) {
+            return <></>;
+        }
+
+        if (robotStatus === undefined || (dockStatusIsRelevant && dockStatus?.length !== 1)) {
+            return (
+                <Typography color="error">Error loading dock controls</Typography>
+            );
+        }
+
+        const { value: robotState } = robotStatus;
+        const { value: dockState } = dockStatus?.[0] ?? {value: "idle"};
 
-    if (robotStatus === undefined || (dockStatusIsRelevant && dockStatus?.length !== 1)) {
         return (
-            <Grid item>
-                <Paper>
-                    <Box p={1}>
-                        <Typography color="error">Error loading dock controls</Typography>
-                    </Box>
-                </Paper>
+            <Grid container direction="row" alignItems="center" spacing={1} pt={1}>
+                {
+                    mopDockCleanTriggerSupported &&
+                    <Grid item xs>
+                        <Button
+                            disabled={commandIsExecuting || !["idle", "cleaning", "pause"].includes(dockState) || robotState !== "docked" || !mopAttachmentAttached}
+                            variant="outlined"
+                            size="medium"
+                            color="inherit"
+                            onClick={() => {
+                                const command = dockState === "cleaning" ? "stop" : "start";
+
+                                triggerMopDockCleanCommand(command);
+                            }}
+                            sx={{width: "100%"}}
+                        >
+                            <StyledIcon as={CleanMopIcon} /> { dockState === "cleaning" ? "Stop" : "Clean" }
+                        </Button>
+                    </Grid>
+                }
+                {
+                    mopDockDryTriggerSupported &&
+                    <Grid item xs>
+                        <Button
+                            disabled={commandIsExecuting || !["idle", "drying", "pause"].includes(dockState) || robotState !== "docked" || !mopAttachmentAttached}
+                            variant="outlined"
+                            size="medium"
+                            color="inherit"
+                            onClick={() => {
+                                const command = dockState === "drying" ? "stop" : "start";
+
+                                triggerMopDockDryCommand(command);
+                            }}
+                            sx={{width: "100%"}}
+                        >
+                            <StyledIcon as={DryMopIcon} /> { dockState === "drying" ? "Stop" : "Dry" }
+                        </Button>
+                    </Grid>
+                }
+                {
+                    triggerEmptySupported &&
+                    <Grid item xs>
+                        <Button
+                            disabled={commandIsExecuting || robotState !== "docked"}
+                            variant="outlined"
+                            size="medium"
+                            color="inherit"
+                            onClick={() => {
+                                triggerDockEmpty();
+                            }}
+                            sx={{width: "100%"}}
+                        >
+                            <StyledIcon as={EmptyIcon} /> Empty
+                        </Button>
+                    </Grid>
+                }
             </Grid>
         );
-    }
+    }, [
+        StyledIcon,
+        attachments,
+        dockStatus,
+        emptyIsExecuting,
+        isPending,
+        mopDockCleanCommandExecuting,
+        mopDockCleanTriggerSupported,
+        mopDockDryCommandExecuting,
+        mopDockDryTriggerSupported,
+        robotStatus,
+        triggerDockEmpty,
+        triggerEmptySupported,
+        triggerMopDockCleanCommand,
+        triggerMopDockDryCommand
+    ]);
 
-    const { value: robotState } = robotStatus;
-    const { value: dockState } = dockStatus?.[0] ?? {value: "idle"};
 
     return (
-        <Grid item>
-            <Paper>
-                <Box px={2} py={1}>
-                    <Grid container direction="column">
-                        <Grid item>
-                            <Typography variant="subtitle1">Dock</Typography>
-                        </Grid>
-                        <Grid container direction="row" alignItems="center" spacing={1} sx={{paddingTop: "8px"}}>
-                            {
-                                mopDockCleanTriggerSupported &&
-                                <Grid item xs>
-                                    <Button
-                                        disabled={commandIsExecuting || !["idle", "cleaning", "pause"].includes(dockState) || robotState !== "docked" || !mopAttachmentAttached}
-                                        variant="outlined"
-                                        size="medium"
-                                        color="inherit"
-                                        onClick={() => {
-                                            const command = dockState === "cleaning" ? "stop" : "start";
-
-                                            triggerMopDockCleanCommand(command);
-                                        }}
-                                        sx={{width: "100%"}}
-                                    >
-                                        <StyledIcon as={CleanMopIcon} /> { dockState === "cleaning" ? "Stop" : "Clean" }
-                                    </Button>
-                                </Grid>
-                            }
-                            {
-                                mopDockDryTriggerSupported &&
-                                <Grid item xs>
-                                    <Button
-                                        disabled={commandIsExecuting || !["idle", "drying", "pause"].includes(dockState) || robotState !== "docked" || !mopAttachmentAttached}
-                                        variant="outlined"
-                                        size="medium"
-                                        color="inherit"
-                                        onClick={() => {
-                                            const command = dockState === "drying" ? "stop" : "start";
-
-                                            triggerMopDockDryCommand(command);
-                                        }}
-                                        sx={{width: "100%"}}
-                                    >
-                                        <StyledIcon as={DryMopIcon} /> { dockState === "drying" ? "Stop" : "Dry" }
-                                    </Button>
-                                </Grid>
-                            }
-                            {
-                                triggerEmptySupported &&
-                                <Grid item xs>
-                                    <Button
-                                        disabled={commandIsExecuting || robotState !== "docked"}
-                                        variant="outlined"
-                                        size="medium"
-                                        color="inherit"
-                                        onClick={() => {
-                                            triggerDockEmpty();
-                                        }}
-                                        sx={{width: "100%"}}
-                                    >
-                                        <StyledIcon as={EmptyIcon} /> Empty
-                                    </Button>
-                                </Grid>
-                            }
-                        </Grid>
-                    </Grid>
-                </Box>
-            </Paper>
-        </Grid>
+        <ControlsCard
+            title="Dock"
+            icon={DockIcon}
+            isLoading={isPending}
+        >
+            {body}
+        </ControlsCard>
     );
 };
 
diff --git a/frontend/src/controls/PresetSelection.tsx b/frontend/src/controls/PresetSelection.tsx
index d59bd403c93..b1a2fb473c3 100644
--- a/frontend/src/controls/PresetSelection.tsx
+++ b/frontend/src/controls/PresetSelection.tsx
@@ -146,7 +146,7 @@ const PresetSelectionControl = (props: PresetSelectionProps): React.ReactElement
         <Grid item>
             <Paper sx={{minHeight: "2.5em"}}>
                 <Grid container direction="column">
-                    <Box px={2} pt={1}>
+                    <Box px={1.5} pt={1}>
                         <Grid
                             item
                             container
diff --git a/frontend/src/controls/RobotStatus.tsx b/frontend/src/controls/RobotStatus.tsx
index 67bac1e34aa..09b1ab2c14e 100644
--- a/frontend/src/controls/RobotStatus.tsx
+++ b/frontend/src/controls/RobotStatus.tsx
@@ -1,10 +1,7 @@
 import {
-    Box,
-    CircularProgress,
     Grid,
     LinearProgress,
     linearProgressClasses,
-    Paper,
     styled,
     Typography,
 } from "@mui/material";
@@ -15,6 +12,8 @@ import {
     useRobotAttributeQuery,
     useRobotStatusQuery,
 } from "../api";
+import {RobotMonochromeIcon} from "../components/CustomIcons";
+import ControlsCard from "./ControlsCard";
 
 const batteryLevelColors = {
     red: red[500],
@@ -66,25 +65,17 @@ const RobotStatus = (): React.ReactElement => {
             return <Typography color="error">Error loading robot state</Typography>;
         }
 
-        if (isPending) {
-            return (
-                <Grid item>
-                    <CircularProgress color="inherit" size="1rem" />
-                </Grid>
-            );
-        }
-
         if (status === undefined) {
             return null;
         }
 
         return (
-            <Typography variant="overline" color="textSecondary">
+            <Typography variant="overline">
                 {status.value}
                 {status.flag !== "none" ? <> &ndash; {status.flag}</> : ""}
             </Typography>
         );
-    }, [isStatusError, status, isPending]);
+    }, [isStatusError, status]);
 
     const batteriesDetails = React.useMemo(() => {
         if (isBatteryError) {
@@ -101,24 +92,19 @@ const RobotStatus = (): React.ReactElement => {
 
         return batteries.map((battery, index) => {
             return (
-                <Grid container key={index.toString()} direction="column" spacing={1}>
-                    <Grid item container spacing={1}>
-
-                    </Grid>
+                <Grid item container direction="column" key={index}>
                     <Grid item>
-                        <Box display="flex" alignItems="center">
-                            <Box width="100%" mr={1}>
-                                <BatteryProgress value={battery.level} variant="determinate" />
-                            </Box>
-                            <Typography
-                                variant="overline"
-                                style={{
-                                    color: batteryLevelColors[getBatteryColor(battery.level)],
-                                }}
-                            >
-                                {Math.round(battery.level)}%
-                            </Typography>
-                        </Box>
+                        <Typography
+                            variant="overline"
+                            style={{
+                                color: batteryLevelColors[getBatteryColor(battery.level)],
+                            }}
+                        >
+                            Battery{batteries.length > 1 ? ` ${index+1}`: ""}: {Math.round(battery.level)}%
+                        </Typography>
+                    </Grid>
+                    <Grid item sx={{ flexGrow: 1, minHeight: "1rem"}}>
+                        <BatteryProgress value={battery.level} variant="determinate" />
                     </Grid>
                 </Grid>
             );
@@ -126,39 +112,24 @@ const RobotStatus = (): React.ReactElement => {
     }, [batteries, isBatteryError]);
 
     return (
-        <Grid item>
-            <Paper>
-                <Box p={1}>
-                    <Grid container spacing={2} direction="column">
-                        <Grid item container>
-                            <Grid item xs container direction="column" sx={{paddingLeft:"8px"}}>
-                                <Grid item>
-                                    <Typography variant="subtitle2">State</Typography>
-                                </Grid>
-                                <Grid
-                                    item
-                                    style={{
-                                        maxHeight: "2rem",
-                                        overflow: "hidden",
-                                        wordBreak: "break-all"
-                                    }}
-                                >
-                                    {stateDetails}
-                                </Grid>
-                            </Grid>
-                            {batteries !== undefined && batteries.length > 0 && (
-                                <Grid item xs container direction="column" sx={{paddingRight:"8px"}}>
-                                    <Grid item>
-                                        <Typography variant="subtitle2">Battery</Typography>
-                                    </Grid>
-                                    <Grid item>{batteriesDetails}</Grid>
-                                </Grid>
-                            )}
-                        </Grid>
+        <ControlsCard
+            icon={RobotMonochromeIcon}
+            title="Robot"
+            isLoading={isPending}
+        >
+            <Grid container direction="column">
+                <Grid item container direction="row">
+                    <Grid item>
+                        {stateDetails}
+                    </Grid>
+                </Grid>
+                {batteries !== undefined && batteries.length > 0 && (
+                    <Grid item container direction="row" width="100%">
+                        {batteriesDetails}
                     </Grid>
-                </Box>
-            </Paper>
-        </Grid>
+                )}
+            </Grid>
+        </ControlsCard>
     );
 };