diff --git a/src/renderer/components/hotbar/hotbar-selector.tsx b/src/renderer/components/hotbar/hotbar-selector.tsx
index 15a38ef14c..d4919d7f0b 100644
--- a/src/renderer/components/hotbar/hotbar-selector.tsx
+++ b/src/renderer/components/hotbar/hotbar-selector.tsx
@@ -2,7 +2,7 @@ import "./hotbar-selector.scss";
 import React from "react";
 import { Icon } from "../icon";
 import { Badge } from "../badge";
-import { Tooltip } from "@material-ui/core";
+import { makeStyles, Tooltip } from "@material-ui/core";
 import { Hotbar, HotbarStore } from "../../../common/hotbar-store";
 import { CommandOverlay } from "../command-palette";
 import { HotbarSwitchCommand } from "./hotbar-switch-command";
@@ -11,15 +11,27 @@ interface Props {
   hotbar: Hotbar;
 }
 
+const useStyles = makeStyles(() => ({
+  arrow: {
+    color: "#222",
+  },
+  tooltip: {
+    fontSize: 12,
+    backgroundColor: "#222",
+  },
+}));
+
+
 export function HotbarSelector({ hotbar }: Props) {
   const store = HotbarStore.getInstance();
   const activeIndexDisplay = store.activeHotbarIndex + 1;
+  const classes = useStyles();
 
   return (
     <div className="HotbarSelector flex align-center">
       <Icon material="play_arrow" className="previous box" onClick={() => store.switchToPrevious()} />
       <div className="box grow flex align-center">
-        <Tooltip arrow title={hotbar.name}>
+        <Tooltip arrow title={hotbar.name} classes={classes}>
           <Badge
             id="hotbarIndex"
             small