diff --git a/src/components/DataControls.tsx b/src/components/DataControls.tsx
index 320fbdda..7b859457 100644
--- a/src/components/DataControls.tsx
+++ b/src/components/DataControls.tsx
@@ -12,9 +12,18 @@ interface DataControlsProps {
 
 export default function DataControls(props: DataControlsProps) {
     return (
-        <Box sx={{ display: "flex", flexDirection: "row", justifyContent: "space-between" }}>
+        <Box
+            sx={{
+                display: "flex",
+                flexDirection: "row",
+                justifyContent: "space-between",
+                // 5px margin makes this bar match the PlaybackControls height
+                // because that component uses primary buttons, which hava a 5px margin
+                margin: "5px",
+            }}
+        >
             {/* TODO: make this do something */}
-            <ButtonIcon sdsIcon="infoCircle" sdsSize="large" sdsType="secondary" />
+            <ButtonIcon sdsIcon="infoCircle" sdsSize="medium" sdsType="secondary" />
 
             <ButtonIcon
                 sdsIcon="share"
@@ -25,7 +34,7 @@ export default function DataControls(props: DataControlsProps) {
             />
 
             {/* TODO: make this do something */}
-            <ButtonIcon sdsIcon="globeBasic" sdsSize="large" sdsType="secondary" />
+            <ButtonIcon sdsIcon="globeBasic" sdsSize="medium" sdsType="secondary" />
         </Box>
     );
 }