diff --git a/out/index.html b/out/index.html
index f57edd4..baad434 100644
--- a/out/index.html
+++ b/out/index.html
@@ -8,6 +8,13 @@
 	</head>
 	<body>
 		<main>
+			<div class="silly-little-images">
+				<!-- todo setting dimensions manually is bad but there's no good
+				way to scale an image up by a percentage in css so we just hope
+				that we never use a pixel scale other than 2 -->
+				<img src="https://i.eritbh.me/temp/umbreon.png" width="48" height="58" alt="an umbreon getting ready to pounce">
+				<img src="https://i.eritbh.me/temp/kate.png" width="54" height="86" alt="the female protagonist of Pokemon Ranger: Shadows of Almia doing her ranger pose">
+			</div>
 			<div class="textbox textbox--simple textbox--yellow">
 				<div class="textbox__text">
 					Welcome to <span class="color color--red">webring.umbreon.online</span>!
diff --git a/out/style.css b/out/style.css
index 242ce96..9458392 100644
--- a/out/style.css
+++ b/out/style.css
@@ -192,12 +192,14 @@ ul {
   list-style-type: "·   ";
 }
 
-.theme-options-grid {
+.silly-little-images {
   display: flex;
-  flex-wrap: wrap;
-  width: 186rem;
-  gap: 8rem 6rem;
-  padding: 4rem 3rem;
+  justify-content: center;
+  align-items: flex-end;
+  margin-bottom: 1em;
+}
+.silly-little-images img {
+  image-rendering: crisp-edges;
 }
 
 /*# sourceMappingURL=style.css.map */
diff --git a/out/style.css.map b/out/style.css.map
index 576b9dc..6fc2a0c 100644
--- a/out/style.css.map
+++ b/out/style.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../style.scss"],"names":[],"mappings":";AACA;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EAEC;EAGA;EAIA;AAAA;AAAA;AAAA;AAAA;AAAA;;;AASD;EACC;EACA,aACC;;;AAMF;EACC;EACA;EACA;EACA;EAEA;EACA;EACA;;;AAGD;EACC;EACA;;;AAID;EAKC;EAEA;EACA;;AAIA;EAEC;EACA;EAIA;EAGA;EACA;EAGA;;AAGA;EAEC;EACA;EACA;EACA;EACA;EACA;EAIA;EAMA;EAGA,YAEA;;AAqBD;EACC;EACA;EACA;;AAED;EACC;EACA;EACA;;AAKD;EACC;;AAEA;EACC;;AAED;EACC;;AAGD;EACC;EACA;;AAMH;EACC;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;;AAOD;EAGC;EAIA;EACA;EACA;EAGA,YACQ;EAOR;EAGA;EAGA;EAEA;;AAUE;EACF;EACM;EACA;EAEN;EACM;EACA;EACA;EACA;EACA;EACA,YAGI;;AAkCV;EACC;IACC;;EAED;IACC;;EAED;IACC;;EAED;IACC;;EAED;IACC;;;AAGF;EAjEE;IAkED;;;;AASF;EACC;EACA;;AAGD;EACC;EACA;;;AAKF;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;;;AAID;EACC;EACA;EACA;EACA;EACA","file":"style.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../style.scss"],"names":[],"mappings":";AACA;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EAEC;EAGA;EAIA;AAAA;AAAA;AAAA;AAAA;AAAA;;;AASD;EACC;EACA,aACC;;;AAMF;EACC;EACA;EACA;EACA;EAEA;EACA;EACA;;;AAGD;EACC;EACA;;;AAID;EAKC;EAEA;EACA;;AAIA;EAEC;EACA;EAIA;EAGA;EACA;EAGA;;AAGA;EAEC;EACA;EACA;EACA;EACA;EACA;EAIA;EAMA;EAGA,YAEA;;AAqBD;EACC;EACA;EACA;;AAED;EACC;EACA;EACA;;AAKD;EACC;;AAEA;EACC;;AAED;EACC;;AAGD;EACC;EACA;;AAMH;EACC;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;;AAOD;EAGC;EAIA;EACA;EACA;EAGA,YACQ;EAOR;EAGA;EAGA;EAEA;;AAUE;EACF;EACM;EACA;EAEN;EACM;EACA;EACA;EACA;EACA;EACA,YAGI;;AAkCV;EACC;IACC;;EAED;IACC;;EAED;IACC;;EAED;IACC;;EAED;IACC;;;AAGF;EAjEE;IAkED;;;;AASF;EACC;EACA;;AAGD;EACC;EACA;;;AAKF;EACC;EACA;EACA;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;;AAEA;EACC","file":"style.css"}
\ No newline at end of file
diff --git a/style.scss b/style.scss
index 63c309b..7a2cb89 100644
--- a/style.scss
+++ b/style.scss
@@ -338,11 +338,15 @@ ul {
 	list-style-type: "·   ";
 }
 
-// misc shit
-.theme-options-grid {
+.silly-little-images {
 	display: flex;
-	flex-wrap: wrap;
-	width: 186rem;
-	gap: 8rem 6rem;
-	padding: 4rem 3rem;
+	justify-content: center;
+	align-items: flex-end;
+	margin-bottom: 1em;
+
+	img {
+		image-rendering: crisp-edges;
+		// transform: scale(calc(100% * var(--pixel-scale)));
+		// transform-origin: bottom;
+	}
 }