diff --git a/dist/extension.zip b/dist/extension.zip
index 21abee3..a55ca9f 100644
Binary files a/dist/extension.zip and b/dist/extension.zip differ
diff --git a/dist/extension/birb.js b/dist/extension/birb.js
index ee81ae3..062135a 100644
--- a/dist/extension/birb.js
+++ b/dist/extension/birb.js
@@ -499,20 +499,21 @@
 
 		/**
 		 * @param {CanvasRenderingContext2D} ctx
-		 * @param {BirdType} [species]
-		* @param {number} direction
+		 * @param {number} direction
 		 * @param {number} canvasPixelSize
+		 * @param {{ [key: string]: string }} colorScheme
+		 * @param {string[]} tags
 		 */
-		draw(ctx, direction, canvasPixelSize, species) {
+		draw(ctx, direction, canvasPixelSize, colorScheme, tags) {
 			// Clear the canvas before drawing the new frame
 			ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
 			
-			const pixels = this.getPixels(species?.tags[0]);
+			const pixels = this.getPixels(tags[0]);
 			for (let y = 0; y < pixels.length; y++) {
 				const row = pixels[y];
 				for (let x = 0; x < pixels[y].length; x++) {
 					const cell = direction === Directions.LEFT ? row[x] : row[pixels[y].length - x - 1];
-					ctx.fillStyle = species?.colors[cell] ?? cell;
+					ctx.fillStyle = colorScheme[cell] ?? cell;
 					ctx.fillRect(x * canvasPixelSize, y * canvasPixelSize, canvasPixelSize, canvasPixelSize);
 				}		}	}
 	}
@@ -575,10 +576,11 @@
 		 * @param {number} direction
 		 * @param {number} timeStart The start time of the animation in milliseconds
 		 * @param {number} canvasPixelSize The size of a canvas pixel in pixels
-		 * @param {BirdType} [species] The species to use for the animation
+		 * @param {{ [key: string]: string }} colorScheme The color scheme to use for the animation
+		 * @param {string[]} tags The tags to use for the animation
 		 * @returns {boolean} Whether the animation is complete
 		 */
-		draw(ctx, direction, timeStart, canvasPixelSize, species) {
+		draw(ctx, direction, timeStart, canvasPixelSize, colorScheme, tags) {
 			// Reset cache if animation was restarted
 			if (this.lastTimeStart !== timeStart) {
 				this.#clearCache();
@@ -595,7 +597,7 @@
 			const currentFrameIndex = this.getCurrentFrameIndex(time);
 			
 			if (this.#shouldRedraw(currentFrameIndex, direction)) {
-				this.frames[currentFrameIndex].draw(ctx, direction, canvasPixelSize, species);
+				this.frames[currentFrameIndex].draw(ctx, direction, canvasPixelSize, colorScheme, tags);
 				this.lastFrameIndex = currentFrameIndex;
 				this.lastDirection = direction;
 			}
@@ -699,7 +701,7 @@
 				}
 			}
 		}
-		return new Layer(paddedHatPixels);
+		return new Layer(paddedHatPixels, hatName);
 	}
 
 	/**
@@ -823,12 +825,13 @@
 
 		/**
 		 * Draw the current animation frame
-		 * @param {BirdType} species The species color data
+		 * @param {BirdType} species The species data
+		 * @param {string} [hat] The name of the current hat
 		 * @returns {boolean} Whether the animation has completed (for non-looping animations)
 		 */
-		draw(species) {
+		draw(species, hat) {
 			const anim = this.animations[this.currentAnimation];
-			return anim.draw(this.ctx, this.direction, this.animStart, this.canvasPixelSize, species);
+			return anim.draw(this.ctx, this.direction, this.animStart, this.canvasPixelSize, species.colors, [...species.tags, hat || '']);
 		}
 
 
@@ -2023,6 +2026,7 @@
 		let petStack = [];
 		let currentSpecies = DEFAULT_BIRD;
 		let unlockedSpecies = [DEFAULT_BIRD];
+		let currentHat = HAT.TOP_HAT;
 		// let visible = true;
 		let lastPetTimestamp = 0;
 		/** @type {StickyNote[]} */
@@ -2243,7 +2247,7 @@
 				flySomewhere();
 			}
 
-			if (birb.draw(SPECIES[currentSpecies])) {
+			if (birb.draw(SPECIES[currentSpecies], currentHat)) {
 				birb.setAnimation(Animations.STILL);
 			}
 
@@ -2332,7 +2336,7 @@
 			if (!featherCtx) {
 				return;
 			}
-			FEATHER_ANIMATIONS.feather.draw(featherCtx, Directions.LEFT, Date.now(), CANVAS_PIXEL_SIZE, type);
+			FEATHER_ANIMATIONS.feather.draw(featherCtx, Directions.LEFT, Date.now(), CANVAS_PIXEL_SIZE, type.colors, type.tags);
 			document.body.appendChild(featherCanvas);
 			onClick(featherCanvas, () => {
 				unlockBird(birdType);
@@ -2478,7 +2482,7 @@
 				if (!speciesCtx) {
 					return;
 				}
-				birb.getFrames().base.draw(speciesCtx, Directions.RIGHT, CANVAS_PIXEL_SIZE, type);
+				birb.getFrames().base.draw(speciesCtx, Directions.RIGHT, CANVAS_PIXEL_SIZE, type.colors, type.tags);
 				speciesElement.appendChild(speciesCanvas);
 				content.appendChild(speciesElement);
 				if (unlocked) {
diff --git a/dist/obsidian/main.js b/dist/obsidian/main.js
index ac84a97..e41a871 100644
--- a/dist/obsidian/main.js
+++ b/dist/obsidian/main.js
@@ -504,20 +504,21 @@ module.exports = class PocketBird extends Plugin {
 
 		/**
 		 * @param {CanvasRenderingContext2D} ctx
-		 * @param {BirdType} [species]
-		* @param {number} direction
+		 * @param {number} direction
 		 * @param {number} canvasPixelSize
+		 * @param {{ [key: string]: string }} colorScheme
+		 * @param {string[]} tags
 		 */
-		draw(ctx, direction, canvasPixelSize, species) {
+		draw(ctx, direction, canvasPixelSize, colorScheme, tags) {
 			// Clear the canvas before drawing the new frame
 			ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
 			
-			const pixels = this.getPixels(species?.tags[0]);
+			const pixels = this.getPixels(tags[0]);
 			for (let y = 0; y < pixels.length; y++) {
 				const row = pixels[y];
 				for (let x = 0; x < pixels[y].length; x++) {
 					const cell = direction === Directions.LEFT ? row[x] : row[pixels[y].length - x - 1];
-					ctx.fillStyle = species?.colors[cell] ?? cell;
+					ctx.fillStyle = colorScheme[cell] ?? cell;
 					ctx.fillRect(x * canvasPixelSize, y * canvasPixelSize, canvasPixelSize, canvasPixelSize);
 				}		}	}
 	}
@@ -580,10 +581,11 @@ module.exports = class PocketBird extends Plugin {
 		 * @param {number} direction
 		 * @param {number} timeStart The start time of the animation in milliseconds
 		 * @param {number} canvasPixelSize The size of a canvas pixel in pixels
-		 * @param {BirdType} [species] The species to use for the animation
+		 * @param {{ [key: string]: string }} colorScheme The color scheme to use for the animation
+		 * @param {string[]} tags The tags to use for the animation
 		 * @returns {boolean} Whether the animation is complete
 		 */
-		draw(ctx, direction, timeStart, canvasPixelSize, species) {
+		draw(ctx, direction, timeStart, canvasPixelSize, colorScheme, tags) {
 			// Reset cache if animation was restarted
 			if (this.lastTimeStart !== timeStart) {
 				this.#clearCache();
@@ -600,7 +602,7 @@ module.exports = class PocketBird extends Plugin {
 			const currentFrameIndex = this.getCurrentFrameIndex(time);
 			
 			if (this.#shouldRedraw(currentFrameIndex, direction)) {
-				this.frames[currentFrameIndex].draw(ctx, direction, canvasPixelSize, species);
+				this.frames[currentFrameIndex].draw(ctx, direction, canvasPixelSize, colorScheme, tags);
 				this.lastFrameIndex = currentFrameIndex;
 				this.lastDirection = direction;
 			}
@@ -704,7 +706,7 @@ module.exports = class PocketBird extends Plugin {
 				}
 			}
 		}
-		return new Layer(paddedHatPixels);
+		return new Layer(paddedHatPixels, hatName);
 	}
 
 	/**
@@ -828,12 +830,13 @@ module.exports = class PocketBird extends Plugin {
 
 		/**
 		 * Draw the current animation frame
-		 * @param {BirdType} species The species color data
+		 * @param {BirdType} species The species data
+		 * @param {string} [hat] The name of the current hat
 		 * @returns {boolean} Whether the animation has completed (for non-looping animations)
 		 */
-		draw(species) {
+		draw(species, hat) {
 			const anim = this.animations[this.currentAnimation];
-			return anim.draw(this.ctx, this.direction, this.animStart, this.canvasPixelSize, species);
+			return anim.draw(this.ctx, this.direction, this.animStart, this.canvasPixelSize, species.colors, [...species.tags, hat || '']);
 		}
 
 
@@ -2066,6 +2069,7 @@ module.exports = class PocketBird extends Plugin {
 		let petStack = [];
 		let currentSpecies = DEFAULT_BIRD;
 		let unlockedSpecies = [DEFAULT_BIRD];
+		let currentHat = HAT.TOP_HAT;
 		// let visible = true;
 		let lastPetTimestamp = 0;
 		/** @type {StickyNote[]} */
@@ -2286,7 +2290,7 @@ module.exports = class PocketBird extends Plugin {
 				flySomewhere();
 			}
 
-			if (birb.draw(SPECIES[currentSpecies])) {
+			if (birb.draw(SPECIES[currentSpecies], currentHat)) {
 				birb.setAnimation(Animations.STILL);
 			}
 
@@ -2375,7 +2379,7 @@ module.exports = class PocketBird extends Plugin {
 			if (!featherCtx) {
 				return;
 			}
-			FEATHER_ANIMATIONS.feather.draw(featherCtx, Directions.LEFT, Date.now(), CANVAS_PIXEL_SIZE, type);
+			FEATHER_ANIMATIONS.feather.draw(featherCtx, Directions.LEFT, Date.now(), CANVAS_PIXEL_SIZE, type.colors, type.tags);
 			document.body.appendChild(featherCanvas);
 			onClick(featherCanvas, () => {
 				unlockBird(birdType);
@@ -2521,7 +2525,7 @@ module.exports = class PocketBird extends Plugin {
 				if (!speciesCtx) {
 					return;
 				}
-				birb.getFrames().base.draw(speciesCtx, Directions.RIGHT, CANVAS_PIXEL_SIZE, type);
+				birb.getFrames().base.draw(speciesCtx, Directions.RIGHT, CANVAS_PIXEL_SIZE, type.colors, type.tags);
 				speciesElement.appendChild(speciesCanvas);
 				content.appendChild(speciesElement);
 				if (unlocked) {
diff --git a/dist/userscript/birb.user.js b/dist/userscript/birb.user.js
index 33cce0c..39bc16f 100644
--- a/dist/userscript/birb.user.js
+++ b/dist/userscript/birb.user.js
@@ -513,20 +513,21 @@
 
 		/**
 		 * @param {CanvasRenderingContext2D} ctx
-		 * @param {BirdType} [species]
-		* @param {number} direction
+		 * @param {number} direction
 		 * @param {number} canvasPixelSize
+		 * @param {{ [key: string]: string }} colorScheme
+		 * @param {string[]} tags
 		 */
-		draw(ctx, direction, canvasPixelSize, species) {
+		draw(ctx, direction, canvasPixelSize, colorScheme, tags) {
 			// Clear the canvas before drawing the new frame
 			ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
 			
-			const pixels = this.getPixels(species?.tags[0]);
+			const pixels = this.getPixels(tags[0]);
 			for (let y = 0; y < pixels.length; y++) {
 				const row = pixels[y];
 				for (let x = 0; x < pixels[y].length; x++) {
 					const cell = direction === Directions.LEFT ? row[x] : row[pixels[y].length - x - 1];
-					ctx.fillStyle = species?.colors[cell] ?? cell;
+					ctx.fillStyle = colorScheme[cell] ?? cell;
 					ctx.fillRect(x * canvasPixelSize, y * canvasPixelSize, canvasPixelSize, canvasPixelSize);
 				}		}	}
 	}
@@ -589,10 +590,11 @@
 		 * @param {number} direction
 		 * @param {number} timeStart The start time of the animation in milliseconds
 		 * @param {number} canvasPixelSize The size of a canvas pixel in pixels
-		 * @param {BirdType} [species] The species to use for the animation
+		 * @param {{ [key: string]: string }} colorScheme The color scheme to use for the animation
+		 * @param {string[]} tags The tags to use for the animation
 		 * @returns {boolean} Whether the animation is complete
 		 */
-		draw(ctx, direction, timeStart, canvasPixelSize, species) {
+		draw(ctx, direction, timeStart, canvasPixelSize, colorScheme, tags) {
 			// Reset cache if animation was restarted
 			if (this.lastTimeStart !== timeStart) {
 				this.#clearCache();
@@ -609,7 +611,7 @@
 			const currentFrameIndex = this.getCurrentFrameIndex(time);
 			
 			if (this.#shouldRedraw(currentFrameIndex, direction)) {
-				this.frames[currentFrameIndex].draw(ctx, direction, canvasPixelSize, species);
+				this.frames[currentFrameIndex].draw(ctx, direction, canvasPixelSize, colorScheme, tags);
 				this.lastFrameIndex = currentFrameIndex;
 				this.lastDirection = direction;
 			}
@@ -713,7 +715,7 @@
 				}
 			}
 		}
-		return new Layer(paddedHatPixels);
+		return new Layer(paddedHatPixels, hatName);
 	}
 
 	/**
@@ -837,12 +839,13 @@
 
 		/**
 		 * Draw the current animation frame
-		 * @param {BirdType} species The species color data
+		 * @param {BirdType} species The species data
+		 * @param {string} [hat] The name of the current hat
 		 * @returns {boolean} Whether the animation has completed (for non-looping animations)
 		 */
-		draw(species) {
+		draw(species, hat) {
 			const anim = this.animations[this.currentAnimation];
-			return anim.draw(this.ctx, this.direction, this.animStart, this.canvasPixelSize, species);
+			return anim.draw(this.ctx, this.direction, this.animStart, this.canvasPixelSize, species.colors, [...species.tags, hat || '']);
 		}
 
 
@@ -2028,6 +2031,7 @@
 		let petStack = [];
 		let currentSpecies = DEFAULT_BIRD;
 		let unlockedSpecies = [DEFAULT_BIRD];
+		let currentHat = HAT.TOP_HAT;
 		// let visible = true;
 		let lastPetTimestamp = 0;
 		/** @type {StickyNote[]} */
@@ -2248,7 +2252,7 @@
 				flySomewhere();
 			}
 
-			if (birb.draw(SPECIES[currentSpecies])) {
+			if (birb.draw(SPECIES[currentSpecies], currentHat)) {
 				birb.setAnimation(Animations.STILL);
 			}
 
@@ -2337,7 +2341,7 @@
 			if (!featherCtx) {
 				return;
 			}
-			FEATHER_ANIMATIONS.feather.draw(featherCtx, Directions.LEFT, Date.now(), CANVAS_PIXEL_SIZE, type);
+			FEATHER_ANIMATIONS.feather.draw(featherCtx, Directions.LEFT, Date.now(), CANVAS_PIXEL_SIZE, type.colors, type.tags);
 			document.body.appendChild(featherCanvas);
 			onClick(featherCanvas, () => {
 				unlockBird(birdType);
@@ -2483,7 +2487,7 @@
 				if (!speciesCtx) {
 					return;
 				}
-				birb.getFrames().base.draw(speciesCtx, Directions.RIGHT, CANVAS_PIXEL_SIZE, type);
+				birb.getFrames().base.draw(speciesCtx, Directions.RIGHT, CANVAS_PIXEL_SIZE, type.colors, type.tags);
 				speciesElement.appendChild(speciesCanvas);
 				content.appendChild(speciesElement);
 				if (unlocked) {
diff --git a/dist/web/birb.embed.js b/dist/web/birb.embed.js
index 2f15ba2..3fe2a00 100644
--- a/dist/web/birb.embed.js
+++ b/dist/web/birb.embed.js
@@ -499,20 +499,21 @@
 
 		/**
 		 * @param {CanvasRenderingContext2D} ctx
-		 * @param {BirdType} [species]
-		* @param {number} direction
+		 * @param {number} direction
 		 * @param {number} canvasPixelSize
+		 * @param {{ [key: string]: string }} colorScheme
+		 * @param {string[]} tags
 		 */
-		draw(ctx, direction, canvasPixelSize, species) {
+		draw(ctx, direction, canvasPixelSize, colorScheme, tags) {
 			// Clear the canvas before drawing the new frame
 			ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
 			
-			const pixels = this.getPixels(species?.tags[0]);
+			const pixels = this.getPixels(tags[0]);
 			for (let y = 0; y < pixels.length; y++) {
 				const row = pixels[y];
 				for (let x = 0; x < pixels[y].length; x++) {
 					const cell = direction === Directions.LEFT ? row[x] : row[pixels[y].length - x - 1];
-					ctx.fillStyle = species?.colors[cell] ?? cell;
+					ctx.fillStyle = colorScheme[cell] ?? cell;
 					ctx.fillRect(x * canvasPixelSize, y * canvasPixelSize, canvasPixelSize, canvasPixelSize);
 				}		}	}
 	}
@@ -575,10 +576,11 @@
 		 * @param {number} direction
 		 * @param {number} timeStart The start time of the animation in milliseconds
 		 * @param {number} canvasPixelSize The size of a canvas pixel in pixels
-		 * @param {BirdType} [species] The species to use for the animation
+		 * @param {{ [key: string]: string }} colorScheme The color scheme to use for the animation
+		 * @param {string[]} tags The tags to use for the animation
 		 * @returns {boolean} Whether the animation is complete
 		 */
-		draw(ctx, direction, timeStart, canvasPixelSize, species) {
+		draw(ctx, direction, timeStart, canvasPixelSize, colorScheme, tags) {
 			// Reset cache if animation was restarted
 			if (this.lastTimeStart !== timeStart) {
 				this.#clearCache();
@@ -595,7 +597,7 @@
 			const currentFrameIndex = this.getCurrentFrameIndex(time);
 			
 			if (this.#shouldRedraw(currentFrameIndex, direction)) {
-				this.frames[currentFrameIndex].draw(ctx, direction, canvasPixelSize, species);
+				this.frames[currentFrameIndex].draw(ctx, direction, canvasPixelSize, colorScheme, tags);
 				this.lastFrameIndex = currentFrameIndex;
 				this.lastDirection = direction;
 			}
@@ -699,7 +701,7 @@
 				}
 			}
 		}
-		return new Layer(paddedHatPixels);
+		return new Layer(paddedHatPixels, hatName);
 	}
 
 	/**
@@ -823,12 +825,13 @@
 
 		/**
 		 * Draw the current animation frame
-		 * @param {BirdType} species The species color data
+		 * @param {BirdType} species The species data
+		 * @param {string} [hat] The name of the current hat
 		 * @returns {boolean} Whether the animation has completed (for non-looping animations)
 		 */
-		draw(species) {
+		draw(species, hat) {
 			const anim = this.animations[this.currentAnimation];
-			return anim.draw(this.ctx, this.direction, this.animStart, this.canvasPixelSize, species);
+			return anim.draw(this.ctx, this.direction, this.animStart, this.canvasPixelSize, species.colors, [...species.tags, hat || '']);
 		}
 
 
@@ -2008,6 +2011,7 @@
 		let petStack = [];
 		let currentSpecies = DEFAULT_BIRD;
 		let unlockedSpecies = [DEFAULT_BIRD];
+		let currentHat = HAT.TOP_HAT;
 		// let visible = true;
 		let lastPetTimestamp = 0;
 		/** @type {StickyNote[]} */
@@ -2228,7 +2232,7 @@
 				flySomewhere();
 			}
 
-			if (birb.draw(SPECIES[currentSpecies])) {
+			if (birb.draw(SPECIES[currentSpecies], currentHat)) {
 				birb.setAnimation(Animations.STILL);
 			}
 
@@ -2317,7 +2321,7 @@
 			if (!featherCtx) {
 				return;
 			}
-			FEATHER_ANIMATIONS.feather.draw(featherCtx, Directions.LEFT, Date.now(), CANVAS_PIXEL_SIZE, type);
+			FEATHER_ANIMATIONS.feather.draw(featherCtx, Directions.LEFT, Date.now(), CANVAS_PIXEL_SIZE, type.colors, type.tags);
 			document.body.appendChild(featherCanvas);
 			onClick(featherCanvas, () => {
 				unlockBird(birdType);
@@ -2463,7 +2467,7 @@
 				if (!speciesCtx) {
 					return;
 				}
-				birb.getFrames().base.draw(speciesCtx, Directions.RIGHT, CANVAS_PIXEL_SIZE, type);
+				birb.getFrames().base.draw(speciesCtx, Directions.RIGHT, CANVAS_PIXEL_SIZE, type.colors, type.tags);
 				speciesElement.appendChild(speciesCanvas);
 				content.appendChild(speciesElement);
 				if (unlocked) {
diff --git a/dist/web/birb.js b/dist/web/birb.js
index 2f15ba2..3fe2a00 100644
--- a/dist/web/birb.js
+++ b/dist/web/birb.js
@@ -499,20 +499,21 @@
 
 		/**
 		 * @param {CanvasRenderingContext2D} ctx
-		 * @param {BirdType} [species]
-		* @param {number} direction
+		 * @param {number} direction
 		 * @param {number} canvasPixelSize
+		 * @param {{ [key: string]: string }} colorScheme
+		 * @param {string[]} tags
 		 */
-		draw(ctx, direction, canvasPixelSize, species) {
+		draw(ctx, direction, canvasPixelSize, colorScheme, tags) {
 			// Clear the canvas before drawing the new frame
 			ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
 			
-			const pixels = this.getPixels(species?.tags[0]);
+			const pixels = this.getPixels(tags[0]);
 			for (let y = 0; y < pixels.length; y++) {
 				const row = pixels[y];
 				for (let x = 0; x < pixels[y].length; x++) {
 					const cell = direction === Directions.LEFT ? row[x] : row[pixels[y].length - x - 1];
-					ctx.fillStyle = species?.colors[cell] ?? cell;
+					ctx.fillStyle = colorScheme[cell] ?? cell;
 					ctx.fillRect(x * canvasPixelSize, y * canvasPixelSize, canvasPixelSize, canvasPixelSize);
 				}		}	}
 	}
@@ -575,10 +576,11 @@
 		 * @param {number} direction
 		 * @param {number} timeStart The start time of the animation in milliseconds
 		 * @param {number} canvasPixelSize The size of a canvas pixel in pixels
-		 * @param {BirdType} [species] The species to use for the animation
+		 * @param {{ [key: string]: string }} colorScheme The color scheme to use for the animation
+		 * @param {string[]} tags The tags to use for the animation
 		 * @returns {boolean} Whether the animation is complete
 		 */
-		draw(ctx, direction, timeStart, canvasPixelSize, species) {
+		draw(ctx, direction, timeStart, canvasPixelSize, colorScheme, tags) {
 			// Reset cache if animation was restarted
 			if (this.lastTimeStart !== timeStart) {
 				this.#clearCache();
@@ -595,7 +597,7 @@
 			const currentFrameIndex = this.getCurrentFrameIndex(time);
 			
 			if (this.#shouldRedraw(currentFrameIndex, direction)) {
-				this.frames[currentFrameIndex].draw(ctx, direction, canvasPixelSize, species);
+				this.frames[currentFrameIndex].draw(ctx, direction, canvasPixelSize, colorScheme, tags);
 				this.lastFrameIndex = currentFrameIndex;
 				this.lastDirection = direction;
 			}
@@ -699,7 +701,7 @@
 				}
 			}
 		}
-		return new Layer(paddedHatPixels);
+		return new Layer(paddedHatPixels, hatName);
 	}
 
 	/**
@@ -823,12 +825,13 @@
 
 		/**
 		 * Draw the current animation frame
-		 * @param {BirdType} species The species color data
+		 * @param {BirdType} species The species data
+		 * @param {string} [hat] The name of the current hat
 		 * @returns {boolean} Whether the animation has completed (for non-looping animations)
 		 */
-		draw(species) {
+		draw(species, hat) {
 			const anim = this.animations[this.currentAnimation];
-			return anim.draw(this.ctx, this.direction, this.animStart, this.canvasPixelSize, species);
+			return anim.draw(this.ctx, this.direction, this.animStart, this.canvasPixelSize, species.colors, [...species.tags, hat || '']);
 		}
 
 
@@ -2008,6 +2011,7 @@
 		let petStack = [];
 		let currentSpecies = DEFAULT_BIRD;
 		let unlockedSpecies = [DEFAULT_BIRD];
+		let currentHat = HAT.TOP_HAT;
 		// let visible = true;
 		let lastPetTimestamp = 0;
 		/** @type {StickyNote[]} */
@@ -2228,7 +2232,7 @@
 				flySomewhere();
 			}
 
-			if (birb.draw(SPECIES[currentSpecies])) {
+			if (birb.draw(SPECIES[currentSpecies], currentHat)) {
 				birb.setAnimation(Animations.STILL);
 			}
 
@@ -2317,7 +2321,7 @@
 			if (!featherCtx) {
 				return;
 			}
-			FEATHER_ANIMATIONS.feather.draw(featherCtx, Directions.LEFT, Date.now(), CANVAS_PIXEL_SIZE, type);
+			FEATHER_ANIMATIONS.feather.draw(featherCtx, Directions.LEFT, Date.now(), CANVAS_PIXEL_SIZE, type.colors, type.tags);
 			document.body.appendChild(featherCanvas);
 			onClick(featherCanvas, () => {
 				unlockBird(birdType);
@@ -2463,7 +2467,7 @@
 				if (!speciesCtx) {
 					return;
 				}
-				birb.getFrames().base.draw(speciesCtx, Directions.RIGHT, CANVAS_PIXEL_SIZE, type);
+				birb.getFrames().base.draw(speciesCtx, Directions.RIGHT, CANVAS_PIXEL_SIZE, type.colors, type.tags);
 				speciesElement.appendChild(speciesCanvas);
 				content.appendChild(speciesElement);
 				if (unlocked) {
diff --git a/src/animation/anim.js b/src/animation/anim.js
index abdfad0..c41d5db 100644
--- a/src/animation/anim.js
+++ b/src/animation/anim.js
@@ -59,10 +59,11 @@ class Anim {
 	 * @param {number} direction
 	 * @param {number} timeStart The start time of the animation in milliseconds
 	 * @param {number} canvasPixelSize The size of a canvas pixel in pixels
-	 * @param {BirdType} [species] The species to use for the animation
+	 * @param {{ [key: string]: string }} colorScheme The color scheme to use for the animation
+	 * @param {string[]} tags The tags to use for the animation
 	 * @returns {boolean} Whether the animation is complete
 	 */
-	draw(ctx, direction, timeStart, canvasPixelSize, species) {
+	draw(ctx, direction, timeStart, canvasPixelSize, colorScheme, tags) {
 		// Reset cache if animation was restarted
 		if (this.lastTimeStart !== timeStart) {
 			this.#clearCache();
@@ -79,7 +80,7 @@ class Anim {
 		const currentFrameIndex = this.getCurrentFrameIndex(time);
 		
 		if (this.#shouldRedraw(currentFrameIndex, direction)) {
-			this.frames[currentFrameIndex].draw(ctx, direction, canvasPixelSize, species);
+			this.frames[currentFrameIndex].draw(ctx, direction, canvasPixelSize, colorScheme, tags);
 			this.lastFrameIndex = currentFrameIndex;
 			this.lastDirection = direction;
 		}
diff --git a/src/animation/frame.js b/src/animation/frame.js
index b623e41..5f75869 100644
--- a/src/animation/frame.js
+++ b/src/animation/frame.js
@@ -53,20 +53,21 @@ class Frame {
 
 	/**
 	 * @param {CanvasRenderingContext2D} ctx
-	 * @param {BirdType} [species]
-	* @param {number} direction
+	 * @param {number} direction
 	 * @param {number} canvasPixelSize
+	 * @param {{ [key: string]: string }} colorScheme
+	 * @param {string[]} tags
 	 */
-	draw(ctx, direction, canvasPixelSize, species) {
+	draw(ctx, direction, canvasPixelSize, colorScheme, tags) {
 		// Clear the canvas before drawing the new frame
 		ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
 		
-		const pixels = this.getPixels(species?.tags[0]);
+		const pixels = this.getPixels(tags[0]);
 		for (let y = 0; y < pixels.length; y++) {
 			const row = pixels[y];
 			for (let x = 0; x < pixels[y].length; x++) {
 				const cell = direction === Directions.LEFT ? row[x] : row[pixels[y].length - x - 1];
-				ctx.fillStyle = species?.colors[cell] ?? cell;
+				ctx.fillStyle = colorScheme[cell] ?? cell;
 				ctx.fillRect(x * canvasPixelSize, y * canvasPixelSize, canvasPixelSize, canvasPixelSize);
 			};
 		};
diff --git a/src/application.js b/src/application.js
index 713e79b..5b4ad56 100644
--- a/src/application.js
+++ b/src/application.js
@@ -43,6 +43,7 @@ import {
 	switchMenuItems,
 	MENU_EXIT_ID
 } from './menu.js';
+import { HAT } from './hats.js';
 
 
 /**
@@ -236,6 +237,7 @@ function startApplication(birbPixels, featherPixels, hatsPixels) {
 	let petStack = [];
 	let currentSpecies = DEFAULT_BIRD;
 	let unlockedSpecies = [DEFAULT_BIRD];
+	let currentHat = HAT.TOP_HAT;
 	// let visible = true;
 	let lastPetTimestamp = 0;
 	/** @type {StickyNote[]} */
@@ -456,7 +458,7 @@ function startApplication(birbPixels, featherPixels, hatsPixels) {
 			flySomewhere();
 		}
 
-		if (birb.draw(SPECIES[currentSpecies])) {
+		if (birb.draw(SPECIES[currentSpecies], currentHat)) {
 			birb.setAnimation(Animations.STILL);
 		}
 
@@ -548,7 +550,7 @@ function startApplication(birbPixels, featherPixels, hatsPixels) {
 		if (!featherCtx) {
 			return;
 		}
-		FEATHER_ANIMATIONS.feather.draw(featherCtx, Directions.LEFT, Date.now(), CANVAS_PIXEL_SIZE, type);
+		FEATHER_ANIMATIONS.feather.draw(featherCtx, Directions.LEFT, Date.now(), CANVAS_PIXEL_SIZE, type.colors, type.tags);
 		document.body.appendChild(featherCanvas);
 		onClick(featherCanvas, () => {
 			unlockBird(birdType);
@@ -695,7 +697,7 @@ function startApplication(birbPixels, featherPixels, hatsPixels) {
 			if (!speciesCtx) {
 				return;
 			}
-			birb.getFrames().base.draw(speciesCtx, Directions.RIGHT, CANVAS_PIXEL_SIZE, type);
+			birb.getFrames().base.draw(speciesCtx, Directions.RIGHT, CANVAS_PIXEL_SIZE, type.colors, type.tags);
 			speciesElement.appendChild(speciesCanvas);
 			content.appendChild(speciesElement);
 			if (unlocked) {
diff --git a/src/birb.js b/src/birb.js
index 83f1490..cfc2c65 100644
--- a/src/birb.js
+++ b/src/birb.js
@@ -126,12 +126,13 @@ export class Birb {
 
 	/**
 	 * Draw the current animation frame
-	 * @param {BirdType} species The species color data
+	 * @param {BirdType} species The species data
+	 * @param {string} [hat] The name of the current hat
 	 * @returns {boolean} Whether the animation has completed (for non-looping animations)
 	 */
-	draw(species) {
+	draw(species, hat) {
 		const anim = this.animations[this.currentAnimation];
-		return anim.draw(this.ctx, this.direction, this.animStart, this.canvasPixelSize, species);
+		return anim.draw(this.ctx, this.direction, this.animStart, this.canvasPixelSize, species.colors, [...species.tags, hat || '']);
 	}
 
 
diff --git a/src/hats.js b/src/hats.js
index 8d01392..c5526a6 100644
--- a/src/hats.js
+++ b/src/hats.js
@@ -2,7 +2,7 @@ import Layer from "./animation/layer.js";
 import { PALETTE } from "./animation/sprites.js";
 import { getLayerPixels } from "./shared.js";
 
-const HAT = {
+export const HAT = {
 	TOP_HAT: 'top-hat'
 };
 
@@ -96,5 +96,5 @@ function buildHatLayer(spriteSheet, hatName, outlineBottom = false, yOffset = 0)
 			}
 		}
 	}
-	return new Layer(paddedHatPixels);
+	return new Layer(paddedHatPixels, hatName);
 }
\ No newline at end of file