made it look slightly nicer but not that nice

pages/arcade/shop.js

@@ -1,19 +1,45 @@
 import { inventoryParts } from "../api/arcade/inventory"
+import { Box } from 'theme-ui'
+
+/** @jsxImportSource theme-ui */
 
 const ShopPage = ({parts}) => {
   return (
     <div>
-      <h1>Shop</h1>
-      <ul>
-        {parts.map(part => (
-          <li key={part.id}>
-            <h2>{part.fields['Name']}</h2>
-            <p>{part.fields['Name Small Text']}</p>
-            <p>{part.fields['Hours']}</p>
-            <img src={part.fields['Image URL']} alt={part.fields['Name']} />
-          </li>
-        ))}
-      </ul>
+      <Box sx={
+        {maxWidth: '800px',
+          mx: 'auto',
+          px: 3,
+          py: 4
+        }
+      }>
+        <h1 sx={
+          {textAlign: 'center',
+            fontSize: 5,
+            color: 'primary'
+          }
+        }>Shop</h1>
+        <ul>
+          {parts.map(part => (
+            <li key={part.id}>
+              <h2>{part.fields['Name']}</h2>
+              <p sx={
+                {position: 'relative',
+                  top: '-1rem',
+                  fontSize: 3,
+                  color: 'secondary'}
+              }>{part.fields['Name Small Text']}</p>
+              <p>Hours: {part.fields['Hours']}</p>
+              <img src={part.fields['Image URL']} alt={part.fields['Name']} sx={
+                {
+                  width: 100,
+                  height: 100,
+                }
+              }/>
+            </li>
+          ))}
+        </ul>
+      </Box>
     </div>
   )
 }

pages/arcade/shop/[slackID].js

@@ -3,6 +3,8 @@ import { Image, Link } from 'theme-ui'
 import { inventoryParts } from '../../api/arcade/inventory'
 import { useRouter } from 'next/router'
 
+/** @jsxImportSource theme-ui */
+
 
 function orderLink(slackID, url) {
   return url + '&slackID=' + slackID
@@ -15,7 +17,12 @@ const ShopPage = ({parts, ...props}) => {
 
   return (
     <div>
-      <h1>Shop</h1>
+      <h1 sx={
+        {textAlign: 'center',
+          fontSize: 5,
+          color: 'primary'
+        }
+      }>Shop</h1>
       <span>This link is your own! Don't share it with others. Slack ID: {slackID}</span>
       <ul>
         {parts.map(part => (