diff --git a/app/assets/stylesheets/pet_types/show.sass b/app/assets/stylesheets/pet_types/show.sass
new file mode 100644
index 000000000..613fde4a8
--- /dev/null
+++ b/app/assets/stylesheets/pet_types/show.sass
@@ -0,0 +1,26 @@
+@import "../partials/clean/constants"
+
+.pet-states
+    list-style-type: none
+    display: flex
+    flex-wrap: wrap
+    justify-content: center
+    gap: .5em
+
+    > li
+        width: 200px
+        max-width: calc(50% - .25em)
+        min-width: 150px
+        padding: .5em
+        box-sizing: border-box
+        text-align: center
+
+    outfit-viewer
+        width: 100%
+        height: auto
+        aspect-ratio: 1 / 1
+        z-index: -1
+        margin-bottom: -1em
+
+    .name
+        background: white
diff --git a/app/views/pet_states/_pet_state.html.haml b/app/views/pet_states/_pet_state.html.haml
index 71af1c2e6..7a6a5e5d0 100644
--- a/app/views/pet_states/_pet_state.html.haml
+++ b/app/views/pet_states/_pet_state.html.haml
@@ -1,6 +1,5 @@
 %li
 	= outfit_viewer pet_state:
-	= pose_name pet_state.pose
-	(#{pet_state.id})
+	%span.name= pose_name pet_state.pose
 	- if pet_state.glitched?
 		👾
diff --git a/app/views/pet_types/show.html.haml b/app/views/pet_types/show.html.haml
index d04ef9931..15d56129f 100644
--- a/app/views/pet_types/show.html.haml
+++ b/app/views/pet_types/show.html.haml
@@ -1,18 +1,19 @@
 - title "#{@pet_type.human_name}"
 - use_responsive_design
 
-%ul
+%ul.pet-states
 	= render @pet_states[:canonical]
 
 - if @pet_states[:other].present?
 	%details
 		%summary Other
-		%ul
+		%ul.pet-states
 			= render @pet_states[:other]
 
 - content_for :stylesheets do
 	= stylesheet_link_tag "application/hanger-spinner"
 	= stylesheet_link_tag "application/outfit-viewer"
+	= stylesheet_link_tag "pet_types/show"
 
 - content_for :javascripts do
 	= javascript_include_tag "outfit-viewer", async: true