diff --git a/Makefile b/Makefile
new file mode 100644
index 0000000..b55a3bf
--- /dev/null
+++ b/Makefile
@@ -0,0 +1,81 @@
+DOCKER=docker
+SRC_DATA=data/
+SRC_COMPOSE=srcs/
+OUT_DATA=$(HOME)/inception_data # TODO to change
+
+.ONESHELL :
+.SHELLFLAGS = -eu -c
+.PHONY : all run re data_install data_remove data_reinstall help
+
+### pretty logs ####
+
+_ECHO = echoo(){ \
+	if [ -t 1 ]; then \
+		echo "\e[30;47;1m$$*\e[0m"; \
+	else \
+		echo "$$*"; \
+	fi; \
+}
+
+
+### rules ###
+
+
+## Run the compose, installing the necessary data if necessary.
+all : data_install run
+
+
+## Run the compose.
+run :
+	@$(_ECHO)
+
+	echoo "Running '$(SRC_COMPOSE)'..."
+	echo "$ cd -- $(SRC_COMPOSE)"
+	cd -- $(SRC_COMPOSE)
+	echo "$ DATA=$(OUT_DATA) docker compose up --build"
+	DATA=$(OUT_DATA) docker compose up --build
+
+
+## Reinstall the data then run it again.
+re : data_reinstall run
+
+
+## Install the necessary data if the directory doesn't exist yet.
+data_install :
+	@$(_ECHO)
+
+	echoo "Copy '$(SRC_DATA)' to '$(OUT_DATA)'..."
+	if [ -d $(OUT_DATA) ]; then
+		echo "'$(OUT_DATA)' already exists."
+	else
+		echo "$ cp -r -- $(SRC_DATA) $(OUT_DATA)"
+		cp -r -- $(SRC_DATA) $(OUT_DATA)
+		echo "$ chmod -R 0777 -- $(OUT_DATA)"
+		chmod -R 0777 -- $(OUT_DATA)
+	fi
+
+
+## Remove the necessary data..
+data_remove :
+	@$(_ECHO)
+
+	echoo "Remove '$(OUT_DATA)'..."
+	echo "$ rm -rf -- $(OUT_DATA)"
+	rm -rf -- $(OUT_DATA)
+
+
+## Remove then reinstall the necessary data.
+data_reinstall : data_remove data_install
+
+
+## Show help
+help :
+	@$(_ECHO)
+
+	echo "all             Run the compose, installing the necessary data if necessary."
+	echo "run             Run the compose."
+	echo "re              Reinstall the data then run it again."
+	echo "data_install    Install the necessary data."
+	echo "data_remove     Remove the compose data."
+	echo "data_reinstall  Remove then reinstall the necessary data."
+	echo "help            this lol"
diff --git a/data/nginx/www/VarelaRound.ttf b/data/nginx/www/VarelaRound.ttf
new file mode 100644
index 0000000..9d01812
Binary files /dev/null and b/data/nginx/www/VarelaRound.ttf differ
diff --git a/data/nginx/www/index.html b/data/nginx/www/index.html
new file mode 100644
index 0000000..b2e6085
--- /dev/null
+++ b/data/nginx/www/index.html
@@ -0,0 +1,144 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>yippee</title>
+	<style>
+
+		* {
+			animation-play-state: paused;
+		}
+
+		@font-face
+		{
+			font-family: "Varela Round";
+			src: url("/VarelaRound.ttf");
+		}
+
+		html {
+			height: 100%;
+		}
+		body {
+			height: 100%;
+			margin: 0;
+			padding: 0;
+			background: #000000;
+		}
+
+		.yippee {
+			font-size: 3em;
+			font-family: "Varela Round";
+			font-weight: bold;
+		}
+
+		@keyframes rotationoeoeoe {
+			0% { transform: rotate(0); }
+			100% { transform: rotate(360deg); }
+		}
+
+		@keyframes pulseyayaya {
+			0% { transform: scale(1); }
+			50% { transform: scale(1.4); }
+			100% { transform: scale(1); }
+		}
+/*
+		@keyframes rainbow {
+			0% { color: #f00; }
+			33% { color: #0f0; }
+			67% { color: #00f; }
+			100% { color: #f00; }
+		}*/
+
+		@keyframes rainbow {
+			0% { color: #f00; }
+			17% { color: #ff0; }
+			33% { color: #0f0; }
+			50% { color: #0ff; }
+			67% { color: #00f; }
+			83% { color: #f0f; }
+			100% { color: #f00; }
+		}
+
+		.yippee {
+			animation-name: rotationoeoeoe;
+			animation-duration: 1s;
+			animation-timing-function: linear;
+			animation-iteration-count: infinite;
+		}
+
+		.yippee > .yippeeinner {
+			animation-name: pulseyayaya;
+			animation-duration: .8s;
+			animation-timing-function: ease-in-out;
+			animation-iteration-count: infinite;
+		}
+
+		#one, #two, #three {
+			width: 100%;
+			height: 100%;
+			position: absolute;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			animation-name: rainbow;
+			animation-duration: 1s;
+			animation-iteration-count: infinite;
+		}
+
+		#one {
+			z-index: 3;
+			color: #f00;
+			animation-delay: .0s;
+		}
+
+		#one > .yippee {
+			animation-delay: .0s;
+		}
+
+		#one > .yippee > .yippeeinner {
+			animation-delay: .0s;
+		}
+
+		#two {
+			z-index: 2;
+			color: #0f0;
+			opacity: .50;
+			animation-delay: .1s;
+		}
+
+		#two > .yippee {
+			animation-delay: .05s;
+		}
+
+		#two > .yippee > .yippeeinner {
+			animation-delay: .05s;
+		}
+
+		#three {
+			z-index: 1;
+			color: #00f;
+			opacity: .33;
+			animation-delay: .2s;
+		}
+
+		#three > .yippee {
+			animation-delay: .1s;
+		}
+
+		#three > .yippee > .yippeeinner {
+			animation-delay: .1s;
+		}
+
+		* {
+			animation-play-state: running;
+		}
+
+	</style>
+</head>
+<body>
+	<div id="one"><div class="yippee"><div class="yippeeinner">yippee</div></div></div>
+	<div id="two"><div class="yippee"><div class="yippeeinner">yippee</div></div></div>
+	<div id="three"><div class="yippee"><div class="yippeeinner">yippee</div></div></div>
+</body>
+</html>
diff --git a/srcs/compose.yaml b/srcs/compose.yaml
index 403a393..6fa4403 100644
--- a/srcs/compose.yaml
+++ b/srcs/compose.yaml
@@ -6,6 +6,8 @@ services:
     image: nginx:latest
     ports:
       - 8080:80
+    volumes:
+      - ${DATA:?error}/nginx/www/:/usr/share/nginx/html:ro
 
 ### services ###
 # image:
