diff --git a/src/engine/internal/drawing.ts b/src/engine/internal/drawing.ts
index d90add5..f403491 100644
--- a/src/engine/internal/drawing.ts
+++ b/src/engine/internal/drawing.ts
@@ -56,8 +56,8 @@ class Drawing {
     ctx.strokeRect(
       Math.floor(position.x) + 0.5,
       Math.floor(position.y) + 0.5,
-      Math.floor(size.w),
-      Math.floor(size.h)
+      Math.floor(size.w) - 1,
+      Math.floor(size.h) - 1
     )
   }
 
diff --git a/src/game.ts b/src/game.ts
index d7e8d43..06bab3b 100644
--- a/src/game.ts
+++ b/src/game.ts
@@ -2,8 +2,9 @@ import {BG_OUTER} from "./colors.ts";
 import {D, I} from "./engine/public.ts";
 import {IGame, Point, Size} from "./engine/datatypes.ts";
 import {HuntMode} from "./huntmode.ts";
-import {getPageLocation, getPartLocation, Page, UIPart} from "./layout.ts";
+import {getPageLocation, Page, withCamera} from "./layout.ts";
 import {getHud} from "./hud.ts";
+import {getHotbar} from "./hotbar.ts";
 
 class MenuCamera {
   // measured in whole screens
@@ -77,24 +78,20 @@ export class Game implements IGame {
     }
   }
 
-  #withCamera(part: UIPart, cb: () => void) {
-    let region = getPartLocation(part);
-
-    D.withCamera(D.camera.offset(region.top.negate()), cb)
-  }
-
   updateGameplay() {
-    this.#withCamera("Gameplay", () => {
+    withCamera("Gameplay", () => {
       this.huntMode.update();
     });
-    this.#withCamera("HUD", () => { getHud().update() })
+    withCamera("HUD", () => { getHud().update() })
+    withCamera("Hotbar", () => { getHotbar().update() })
   }
 
   drawGameplay() {
-    this.#withCamera("Gameplay", () => {
+    withCamera("Gameplay", () => {
       this.huntMode.draw();
     });
-    this.#withCamera("HUD", () => { getHud().draw() })
+    withCamera("HUD", () => { getHud().draw() })
+    withCamera("Hotbar", () => { getHotbar().draw() })
   }
 }
 
diff --git a/src/hotbar.ts b/src/hotbar.ts
new file mode 100644
index 0000000..5bcf148
--- /dev/null
+++ b/src/hotbar.ts
@@ -0,0 +1,93 @@
+import {AlignX, AlignY, Point, Rect, Size} from "./engine/datatypes.ts";
+import {D} from "./engine/public.ts";
+import {BG_INSET, FG_BOLD, FG_TEXT} from "./colors.ts";
+import {DrawPile} from "./drawpile.ts";
+
+type Button = {
+  label: string,
+  cbClick: () => void,
+}
+
+export class Hotbar {
+  #drawpile: DrawPile;
+  constructor() {
+    this.#drawpile = new DrawPile();
+  }
+
+  get #cellSize(): Size {
+    return new Size(96, 32);
+}
+
+  get size(): Size {
+    let {w: cellW, h: cellH} = this.#cellSize;
+    let w = this.#computeButtons().length * cellW;
+    return new Size(w, cellH)
+  }
+
+  #computeButtons(): Button[] {
+    let buttons: Button[] = [];
+    buttons.push({
+      label: "Skills",
+      cbClick: () => alert("beep"),
+    })
+    /*
+    buttons.push({
+      label: "Thralls"
+    })
+     */
+    return buttons;
+  }
+
+  update() {
+    this.#drawpile.clear();
+
+    let buttons = this.#computeButtons();
+
+    let cellSize = this.#cellSize;
+
+    let x = 0;
+    let padding = 2;
+    for (let b of buttons.values()) {
+      let topLeft = new Point(x, 0);
+      let topLeftPadded = topLeft.offset(new Point(padding, padding));
+      let sizePadded = new Size(cellSize.w - padding * 2, cellSize.h - padding * 2);
+      let center = topLeft.offset(new Point(cellSize.w / 2, cellSize.h / 2));
+
+      this.#drawpile.addClickable(
+        0,
+        (hover) => {
+          let [bg, fg, fgLabel] = [BG_INSET, FG_TEXT, FG_BOLD];
+          if (hover) {
+            [bg, fg, fgLabel] = [FG_TEXT, BG_INSET, BG_INSET];
+          }
+          D.fillRect(
+            topLeftPadded.offset(new Point(-1, -1)),
+            sizePadded.add(new Size(2, 2)),
+            bg
+          );
+          D.drawRect(topLeftPadded, sizePadded, fg);
+          D.drawText(b.label, center, fgLabel, {
+            alignX: AlignX.Center,
+            alignY: AlignY.Middle,
+          })
+        },
+        new Rect(topLeftPadded, sizePadded),
+        true,
+        b.cbClick,
+      );
+      x += cellSize.w;
+    }
+    this.#drawpile.executeOnClick();
+
+  }
+
+  draw() {
+    // D.fillRect(new Point(-4, -4), this.size.add(new Size(8, 8)), BG_INSET);
+    this.#drawpile.draw();
+  }
+}
+
+let active = new Hotbar();
+export function getHotbar(): Hotbar {
+  return active;
+}
\ No newline at end of file
diff --git a/src/hud.ts b/src/hud.ts
index 8c3e8c6..21347ca 100644
--- a/src/hud.ts
+++ b/src/hud.ts
@@ -31,6 +31,6 @@ export class Hud {
 }
 
 let active = new Hud();
-export function getHud() : Hud {
+export function getHud(): Hud {
   return active;
 }
\ No newline at end of file
diff --git a/src/layout.ts b/src/layout.ts
index d7a458e..06c0591 100644
--- a/src/layout.ts
+++ b/src/layout.ts
@@ -1,6 +1,7 @@
 import {AlignX, AlignY, Point, Rect, Size} from "./engine/datatypes.ts";
 import {D} from "./engine/public.ts";
 import {getHud} from "./hud.ts";
+import {getHotbar} from "./hotbar.ts";
 
 // general
 let margin = 8;
@@ -46,12 +47,19 @@ export function getLayoutRect(
   )
 }
 
+export function withCamera(part: UIPart, cb: () => void) {
+  let region = getPartLocation(part);
+
+  D.withCamera(D.camera.offset(region.top.negate()), cb)
+}
+
 // specific
 export type Page = "Gameplay" | "Thralls";
-export type UIPart = "HUD" | "Gameplay" | "Thralls";
+export type UIPart = "Hotbar" | "HUD" | "Gameplay" | "Thralls";
 
 export function getPartPage(part: UIPart): Page {
   switch (part) {
+    case "Hotbar":
     case "HUD":
     case "Gameplay":
       return "Gameplay";
@@ -92,6 +100,11 @@ export function internalGetPartLayoutRect(part: UIPart) {
     case "Gameplay":
     case "Thralls":
       return getLayoutRect(new Size(384, 384));
+    case "Hotbar":
+      return getLayoutRect(getHotbar().size, {
+        alignX: AlignX.Center,
+        alignY: AlignY.Bottom,
+      })
     case "HUD":
       return getLayoutRect(getHud().size, {
         alignX: AlignX.Left,