diff --git a/src/ReplicatedStorage/ui/percentageBar.tsx b/src/ReplicatedStorage/ui/percentageBar.tsx
new file mode 100644
index 0000000..8f9f3d1
--- /dev/null
+++ b/src/ReplicatedStorage/ui/percentageBar.tsx
@@ -0,0 +1,64 @@
+import Hooks from "@rbxts/roact-hooks"
+import Roact from "@rbxts/roact"
+import Padding from "./padding"
+
+function colorBetween(startColor: Color3, endColor: Color3, degree: number): Color3 {
+    return startColor.Lerp(endColor, degree)
+}
+
+interface percentageBarProps extends Roact.JsxInstanceProperties<UIPadding> {
+	current: number
+    max: number
+    highColor: Color3
+    lowColor: Color3
+    bgColor: Color3
+    text?: string
+
+	Event?: Roact.JsxInstanceEvents<Frame>
+	Change?: Roact.JsxInstanceChangeEvents<Frame>
+}
+
+const percentageBar: Hooks.FC<percentageBarProps> = (props, _hooks) => {
+	const { current, max, highColor, lowColor, bgColor, text } = props
+
+	const spreadableProps = { ...props } as Partial<percentageBarProps>
+	delete spreadableProps.current
+	delete spreadableProps.max
+    delete spreadableProps.highColor
+    delete spreadableProps.lowColor
+    delete spreadableProps.bgColor
+    delete spreadableProps.text
+
+	return (
+		<frame BackgroundColor3={bgColor} BorderSizePixel={0} {...spreadableProps}>
+            <frame BackgroundTransparency={1} Size={new UDim2(current / max, 0, 1, 0)} ZIndex={1} BorderSizePixel={0}>
+                <frame BackgroundColor3={colorBetween(lowColor, highColor, current / max)} Size={new UDim2(1, 0, 1, 0)} BorderSizePixel={0}/>
+            </frame>
+            <frame Size={new UDim2(1, 0, 1, 0)} BackgroundTransparency={1}>
+                <Padding PaddingY={new UDim(.1, 0)} PaddingX={new UDim(0, 8)}/>
+                <textlabel
+                    BackgroundTransparency={1}
+					Text={`${math.floor(current)} / ${math.floor(max)}`}
+					ZIndex={2}
+					Size={new UDim2(1, 0, 1, 0)}
+					TextXAlignment={Enum.TextXAlignment.Right}
+					TextColor3={Color3.fromHex("#cdd6f4")}
+					TextScaled
+                />
+                {(text !== undefined) ? (
+					<textlabel
+						BackgroundTransparency={1}
+						Text={text}
+						ZIndex={2}
+						Size={new UDim2(1, 0, 1, 0)}
+						TextXAlignment={Enum.TextXAlignment.Left}
+						TextColor3={Color3.fromHex("#cdd6f4")}
+						TextScaled
+					/>
+				) : undefined}
+            </frame>
+        </frame>
+	)
+}
+
+export default new Hooks(Roact)(percentageBar)
\ No newline at end of file
diff --git a/src/StarterPlayer/StarterPlayerScripts/main.client.ts b/src/StarterPlayer/StarterPlayerScripts/main.client.ts
index 6d54254..376216b 100644
--- a/src/StarterPlayer/StarterPlayerScripts/main.client.ts
+++ b/src/StarterPlayer/StarterPlayerScripts/main.client.ts
@@ -1,6 +1,6 @@
 import { CharacterRigR6 } from "@rbxts/character-promise"
 import Log, { Logger } from "@rbxts/log"
-import { Players, StarterGui } from "@rbxts/services"
+import { Players } from "@rbxts/services"
 import { start } from "ReplicatedStorage/ecs"
 import { clientState } from "ReplicatedStorage/ecs/state"
 import { Host } from "ReplicatedStorage/hosts"
@@ -23,9 +23,6 @@ const ClientState = new clientState(
     clientLogger
 )
 
-// no fuck off
-StarterGui.SetCoreGuiEnabled(Enum.CoreGuiType.Backpack, false)
-
 const worldAndClientState = start(HOST, ClientState)
 showGUI(worldAndClientState[0], ClientState)
 setEnvironment(HOST)
\ No newline at end of file
diff --git a/src/StarterPlayer/StarterPlayerScripts/ui/hotbar/hotbar.tsx b/src/StarterPlayer/StarterPlayerScripts/ui/hotbar/hotbar.tsx
index 1bef1a6..ad20962 100644
--- a/src/StarterPlayer/StarterPlayerScripts/ui/hotbar/hotbar.tsx
+++ b/src/StarterPlayer/StarterPlayerScripts/ui/hotbar/hotbar.tsx
@@ -3,12 +3,16 @@ import Hooks from "@rbxts/roact-hooks"
 import Slot from "./slot"
 import { useWorldContext } from "../contexts/worldContext"
 import Padding from "ReplicatedStorage/ui/padding"
+import { StarterGui } from "@rbxts/services"
 
 interface hotbarProps extends Roact.JsxInstanceProperties<Frame> {
 	Event?: Roact.JsxInstanceEvents<Frame>
 	Change?: Roact.JsxInstanceChangeEvents<Frame>
 }
 
+// no fuck off
+StarterGui.SetCoreGuiEnabled(Enum.CoreGuiType.Backpack, false)
+
 const hotbar: Hooks.FC<hotbarProps> = (props, hooks) => {
     const spreadableProps = { ...props } as Partial<hotbarProps>
 
diff --git a/src/StarterPlayer/StarterPlayerScripts/ui/hotbar/slot.tsx b/src/StarterPlayer/StarterPlayerScripts/ui/hotbar/slot.tsx
index 3b38472..b9e790c 100644
--- a/src/StarterPlayer/StarterPlayerScripts/ui/hotbar/slot.tsx
+++ b/src/StarterPlayer/StarterPlayerScripts/ui/hotbar/slot.tsx
@@ -24,13 +24,13 @@ const slot: Hooks.FC<slotProps> = (props, hooks) => {
 
     const { clientState } = useWorldContext(hooks)
 
-    const handleActivated = (): void =>  {
+    const handleActivated = (): void => {
         tool.Parent !== clientState.character
             ? clientState.character.Humanoid.EquipTool(tool)
             : clientState.character.Humanoid.UnequipTools()
     }
 
-    // maybe opt this into our system for inputs?
+    // TODO: maybe opt this into our system for inputs?
     useEffect(() => {
         const guid = HttpService.GenerateGUID(false)
         ContextActionService.BindAction(