diff --git a/web/images/cat-0.png b/web/images/cat-0.png
new file mode 100644
index 0000000..c19734f
Binary files /dev/null and b/web/images/cat-0.png differ
diff --git a/web/images/cat-1.png b/web/images/cat-1.png
new file mode 100644
index 0000000..7df8327
Binary files /dev/null and b/web/images/cat-1.png differ
diff --git a/web/images/cat-2.png b/web/images/cat-2.png
new file mode 100644
index 0000000..b436b6b
Binary files /dev/null and b/web/images/cat-2.png differ
diff --git a/web/images/cat-3.png b/web/images/cat-3.png
new file mode 100644
index 0000000..a961192
Binary files /dev/null and b/web/images/cat-3.png differ
diff --git a/web/images/eeping-cat.png b/web/images/eeping-cat.png
new file mode 100644
index 0000000..a792cc4
Binary files /dev/null and b/web/images/eeping-cat.png differ
diff --git a/web/index.html b/web/index.html
index d98131b..77d218d 100644
--- a/web/index.html
+++ b/web/index.html
@@ -5,13 +5,17 @@
 		<link rel="stylesheet" href="/style.css">
 	</head>
 	<body>
-		<main class="container">
-			<h1 class="header">infinifi</h1>
-			<h2>infinite lo-fi music in the background</h2>
-			<div class="button-container">
-				<button id="play-btn" class="button">play</button>
-			</div>
-		</main>
+		<div class="container">
+			<main>
+				<h1 class="header">infinifi</h1>
+				<h2>infinite lo-fi music in the background</h2>
+				<div class="button-container">
+					<button id="play-btn" class="button">play</button>
+				</div>
+			</main>
+			<img class="cat" src="/images/cat-0.png" />
+			<img class="eeping-cat" src="/images/eeping-cat.png" />
+		</div>
 		<script type="text/javascript" src="/script.js"></script>
 	</body>
 </html>
diff --git a/web/style.css b/web/style.css
index 611f00e..dda5d7c 100644
--- a/web/style.css
+++ b/web/style.css
@@ -1,6 +1,8 @@
 :root {
   font-family: monospace;
   --text: #4c4f69;
+  --surface0: #ccd0da;
+  --surface1: #bcc0cc;
   --base: #eff1f5;
   --background-color: #f0f0f0;
 }
@@ -8,6 +10,7 @@
 @media (prefers-color-scheme: dark) {
   :root {
     --text: #cdd6f4;
+    --surface1: #45475a;
     --base: #1e1e2e;
   }
 }
@@ -18,27 +21,18 @@ body {
 }
 
 body {
-  height: 100vh;
+  width: calc(100% - 4rem - 1px);
+  height: calc(100vh - 4rem - 1px);
+  padding: 2rem;
   margin: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: #f0f0f0;
+  background-color: var(--base);
   opacity: 1;
-  background-image: radial-gradient(#000000 0.5px, #f0f0f0 0.5px);
+  background-image: radial-gradient(var(--surface1) 1px, var(--base) 1px);
+  background-opacity: 0.8;
   background-size: 10px 10px;
   color: var(--text);
 }
 
-@media (prefers-color-scheme: dark) {
-  body {
-    background-color: #1e1e2e;
-    opacity: 1;
-    background-image: radial-gradient(#585b70 0.5px, #1e1e2e 0.5px);
-    background-size: 10px 10px;
-  }
-}
-
 h1,
 h2,
 h3,
@@ -49,25 +43,53 @@ h6 {
   font-weight: 400;
 }
 
+main {
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  margin: 4rem;
+}
+
+.container {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: end;
+  justify-content: start;
+  border: 1px solid var(--text);
+  border-radius: 2px;
+}
+
 .header {
   font-weight: 800;
   margin-bottom: 1rem;
 }
 
-.container {
-  display: flex;
-  flex-direction: column;
-  align-items: start;
+.cat {
+  position: absolute;
+  bottom: 0px;
+  right: 10%;
+  image-rendering: pixelated;
+  height: 30px;
+}
+
+.eeping-cat {
+  position: absolute;
+  image-rendering: pixelated;
+  top: -16px;
+  right: 50%;
+  height: 15px;
 }
 
 @media (min-width: 768px) {
-  .container {
+  main {
     width: 80%;
   }
 }
 
 @media (min-width: 1024px) {
-  .container {
+  main {
     width: 50%;
   }
 }
