diff --git a/src/App.tsx b/src/App.tsx
index 6c93c8d..8282ba2 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { Kitty } from "./components/Kitty";
-import { AppProvider } from "./context/AppContext";
+import { AppProvider } from "./providers/AppProvider";
 import { Music } from "./components/Music";
 import { Nvim } from "./components/Nvim";
 
diff --git a/src/components/Kitty.tsx b/src/components/Kitty.tsx
index 722cbeb..2f4f9e8 100644
--- a/src/components/Kitty.tsx
+++ b/src/components/Kitty.tsx
@@ -6,8 +6,9 @@ import {
   useCallback,
   useId,
 } from "react";
-import { KittyContext, type KittyContextProps } from "../context/KittyContext";
-import { useApp } from "../context/AppContext";
+import { type KittyContextProps } from "~/context/KittyContext";
+import { useApp } from "~/hooks/useApp";
+import { KittyProvider } from "~/providers/KittyProvider";
 
 export const CHAR_WIDTH = 12;
 export const CHAR_HEIGHT = 26;
@@ -51,7 +52,7 @@ export const Kitty = (props: {
 
     setWidth(`${width}px`);
     setHeight(`${height}px`);
-    setContext(ctx => ({ ...(ctx ?? { active: false }), rows, cols }));
+    setContext((ctx) => ({ ...(ctx ?? { active: false }), rows, cols }));
   }, []);
 
   useEffect(() => {
@@ -76,9 +77,9 @@ export const Kitty = (props: {
           lineHeight: `${CHAR_HEIGHT}px`,
           ...(activeKitty === id
             ? {
-                borderColor: "#cdd6f4",
-                animationDuration: "200ms",
-              }
+              borderColor: "#cdd6f4",
+              animationDuration: "200ms",
+            }
             : {}),
         }}
         ref={container}
@@ -87,9 +88,7 @@ export const Kitty = (props: {
           className="whitespace-pre"
           style={{ backdropFilter: "blur(2px)", width, height }}
         >
-          <KittyContext.Provider value={context}>
-            {props.children}
-          </KittyContext.Provider>
+          <KittyProvider value={context}>{props.children}</KittyProvider>
         </div>
       </div>
     </div>
diff --git a/src/components/Music/Cava.tsx b/src/components/Music/Cava.tsx
index ba0ca73..dacfa84 100644
--- a/src/components/Music/Cava.tsx
+++ b/src/components/Music/Cava.tsx
@@ -5,8 +5,9 @@ import {
   useRef,
   useState,
 } from "react";
-import { type InnerKittyProps, useKitty } from "../../context/KittyContext";
+import { type InnerKittyProps } from "../../context/KittyContext";
 import { CHAR_WIDTH } from "../Kitty";
+import { useKitty } from "~/hooks/useKitty";
 
 export const Cava = (props: { audio: RefObject<HTMLAudioElement> }) => {
   const kitty = useKitty();
diff --git a/src/components/Music/SpotifyPlayer.tsx b/src/components/Music/SpotifyPlayer.tsx
index 752cb20..6daf0ae 100644
--- a/src/components/Music/SpotifyPlayer.tsx
+++ b/src/components/Music/SpotifyPlayer.tsx
@@ -2,7 +2,8 @@ import { useState } from "react";
 import { formatMMSS } from "../../utils/time";
 import { CharArray } from "../../utils/string";
 import { CHAR_HEIGHT, CHAR_WIDTH } from "../Kitty";
-import { type InnerKittyProps, useKitty } from "../../context/KittyContext";
+import { type InnerKittyProps } from "../../context/KittyContext";
+import { useKitty } from "~/hooks/useKitty";
 
 export const SpotifyPlayer = (props: {
   title: string;
diff --git a/src/components/Music/index.tsx b/src/components/Music/index.tsx
index a654533..1ec1585 100644
--- a/src/components/Music/index.tsx
+++ b/src/components/Music/index.tsx
@@ -30,9 +30,9 @@ export const Music = () => {
     if (metadata) return;
 
     void fetch(song)
-      .then(r => r.blob())
-      .then(b => parseBlob(b))
-      .then(m => {
+      .then((r) => r.blob())
+      .then((b) => parseBlob(b))
+      .then((m) => {
         if (!audio.current) return;
 
         setMetadata(m);
diff --git a/src/components/Waybar/Widgets/WaybarRAMWidget.tsx b/src/components/Waybar/Widgets/WaybarRAMWidget.tsx
index 884daf2..4d4e4f8 100644
--- a/src/components/Waybar/Widgets/WaybarRAMWidget.tsx
+++ b/src/components/Waybar/Widgets/WaybarRAMWidget.tsx
@@ -18,7 +18,7 @@ export const WaybarRAMWidget = (props: {
   useEffect(() => {
     const interval = setInterval(() => {
       const offset = randomMinMax(-props.variation, props.variation + 1);
-      setUsage(x => clamp(x + offset, props.min, props.max));
+      setUsage((x) => clamp(x + offset, props.min, props.max));
     }, props.frequency);
 
     return () => clearInterval(interval);
diff --git a/src/context/AppContext.tsx b/src/context/AppContext.tsx
index a63560b..b46f45e 100644
--- a/src/context/AppContext.tsx
+++ b/src/context/AppContext.tsx
@@ -1,22 +1,5 @@
-import { type ReactNode, createContext, useContext, useState } from "react";
+import { createContext } from "react";
 
 export const AppContext = createContext<
   { activeKitty: string; setActiveKitty: (value: string) => void } | undefined
 >(undefined);
-
-export const useApp = () => {
-  const app = useContext(AppContext);
-  if (!app) throw new Error("`useApp` used outside AppContext");
-
-  return app;
-};
-
-export const AppProvider = (props: { children?: ReactNode }) => {
-  const [activeKitty, setActiveKitty] = useState(":r0:");
-
-  return (
-    <AppContext.Provider value={{ activeKitty, setActiveKitty }}>
-      {props.children}
-    </AppContext.Provider>
-  );
-};
diff --git a/src/context/KittyContext.tsx b/src/context/KittyContext.tsx
index 4cd21e7..ff2c3c9 100644
--- a/src/context/KittyContext.tsx
+++ b/src/context/KittyContext.tsx
@@ -1,11 +1,9 @@
-import { createContext, useContext } from "react";
+import { createContext } from "react";
 
 export const KittyContext = createContext<KittyContextProps | undefined>(
   undefined,
 );
 
-export const useKitty = () => useContext(KittyContext);
-
 export type KittyContextProps = {
   rows: number;
   cols: number;
diff --git a/src/hooks/useApp.ts b/src/hooks/useApp.ts
new file mode 100644
index 0000000..7543e8f
--- /dev/null
+++ b/src/hooks/useApp.ts
@@ -0,0 +1,9 @@
+import { useContext } from "react";
+import { AppContext } from "~/context/AppContext";
+
+export const useApp = () => {
+  const app = useContext(AppContext);
+  if (!app) throw new Error("`useApp` used outside AppContext");
+
+  return app;
+};
diff --git a/src/hooks/useKitty.ts b/src/hooks/useKitty.ts
new file mode 100644
index 0000000..cd985d5
--- /dev/null
+++ b/src/hooks/useKitty.ts
@@ -0,0 +1,4 @@
+import { useContext } from "react";
+import { KittyContext } from "~/context/KittyContext";
+
+export const useKitty = () => useContext(KittyContext);
diff --git a/src/providers/AppProvider.tsx b/src/providers/AppProvider.tsx
new file mode 100644
index 0000000..796624e
--- /dev/null
+++ b/src/providers/AppProvider.tsx
@@ -0,0 +1,12 @@
+import { type ReactNode, useState } from "react";
+import { AppContext } from "~/context/AppContext";
+
+export const AppProvider = (props: { children?: ReactNode }) => {
+  const [activeKitty, setActiveKitty] = useState(":r0:");
+
+  return (
+    <AppContext.Provider value={{ activeKitty, setActiveKitty }}>
+      {props.children}
+    </AppContext.Provider>
+  );
+};
diff --git a/src/providers/KittyProvider.tsx b/src/providers/KittyProvider.tsx
new file mode 100644
index 0000000..4edab11
--- /dev/null
+++ b/src/providers/KittyProvider.tsx
@@ -0,0 +1,3 @@
+import { KittyContext } from "~/context/KittyContext";
+
+export const KittyProvider = KittyContext.Provider;
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 3011c77..f5e0a67 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -6,10 +6,10 @@ const config = {
   theme: {
     extend: {
       fontSize: {
-        "sm": "0.8rem",
-        "base": "1rem",
-        "lg": "1.25rem",
-        "xl": "1.25rem",
+        sm: "0.8rem",
+        base: "1rem",
+        lg: "1.25rem",
+        xl: "1.25rem",
         "2xl": "1.563rem",
         "3xl": "1.953rem",
         "4xl": "2.441rem",