diff --git a/components/arcade/prizes.js b/components/arcade/prizes.js
new file mode 100644
index 00000000..029d5cc1
--- /dev/null
+++ b/components/arcade/prizes.js
@@ -0,0 +1,74 @@
+import React, { useState, useRef, useEffect } from 'react'
+import { Box, Button, Text, Flex, Grid, Card, Link } from 'theme-ui'
+import Balancer from 'react-wrap-balancer'
+
+/** @jsxImportSource theme-ui */
+const Prizes = ({
+  img,
+  text,
+  subtext,
+  cost,
+  polaroidRotation,
+  ticketRotation,
+  link,
+  ...props
+}) => {
+  return (
+    <Link href={link ? link : ""} target="_blank" sx={{ textDecoration: 'none' }}>
+      <Flex
+        sx={{
+          background: '#09AFB4',
+          borderRadius: '10px',
+          flexDirection: 'column',
+          padding: '20px',
+          position: 'relative',
+          transform: `rotate(${polaroidRotation}deg)`,
+          transitionDuration: '0.5s',
+          '&:hover': {
+            transform: 'scale(1.1)'
+          }
+        }}
+        {...props}
+      >
+        <Flex
+          sx={{
+            background: '#FFEEC6',
+            height: '250px',
+            justifyContent: 'center',
+            alignItems: 'center'
+          }}
+        >
+          <img src={img} sx={{ width: '100%', height: 'auto' }} />
+        </Flex>
+        <Text className="slackey" variant="headline" sx={{ color: '#FFEEC6' }}>
+          {text}
+        </Text>
+        <Text className="" variant="subtitle" sx={{ color: '#FFEEC6' }}>
+          {text}
+        </Text>
+        <Balancer>
+          <Text variant="caption" sx={{ color: '#FFEEC6' }}>
+            {subtext}
+          </Text>
+        </Balancer>
+        <Text
+          sx={{
+            background: '#FF8C37',
+            px: '20px',
+            color: '#FFEEC6',
+            position: 'absolute',
+            top: '-10px',
+            right: '-12px',
+            transform: `rotate(${ticketRotation}deg)`
+          }}
+          variant="headline"
+          className="gaegu"
+        >
+          {cost} {cost == 1 ? 'ticket' : 'tickets'}
+        </Text>
+      </Flex>
+    </Link>
+  )
+}
+
+export default Prizes
diff --git a/pages/arcade/shop.js b/pages/arcade/shop.js
index 22950715..f8860883 100644
--- a/pages/arcade/shop.js
+++ b/pages/arcade/shop.js
@@ -1,69 +1,67 @@
-import { inventoryParts } from "../api/arcade/inventory"
-import { Box } from 'theme-ui'
+import { inventoryParts } from '../api/arcade/inventory'
+import { Box, Grid } from 'theme-ui'
+import Prizes from '../../components/arcade/prizes'
+const styled = `
+@import url('https://fonts.googleapis.com/css2?family=Slackey&family=Emblema+One&family=Gaegu&display=swap');
 
+.slackey {
+  font-family: "Slackey", sans-serif;
+ }
+
+ .gaegu {
+  font-family: "Gaegu", sans-serif;
+}
+
+`
 /** @jsxImportSource theme-ui */
 
-const ShopPage = ({parts}) => {
+const ShopPage = ({ parts }) => {
   return (
-    <div>
-      
-        <h1 sx={
-          {textAlign: 'center',
-            fontSize: 5,
-            color: 'primary'
-          }
-        }>Shop</h1>
-
-        <ul>
-
-          <Box sx={
-            {display: 'flex',
-              flexDirection: 'row',
-              flexWrap: 'wrap',
-              alignItems: 'center',
-            }
-          }>
-          
-          {parts.map(part => (
-
-                    <Box sx={
-              {maxWidth: '800px',
-                mx: 'auto',
-                minHeight: '300px',
-                justifyContent: 'space-around',
-                width: '230px',
+    <div
+      sx={{
+        backgroundColor: '#FAEFD6'
+      }}
+    >
+      <h1
+        sx={{
+          textAlign: 'center',
+          fontSize: 5,
+          color: '#FF8C37',
+          mt: 0,
+          pt: 5
+        }}
+        className="slackey"
+      >
+        Shop
+      </h1>
 
+        <Grid
+          sx={{
+            pt: '50px',
+            gridTemplateColumns: ['1fr', '1fr 1fr', '1fr 1fr', '1fr 1fr 1fr'],
+            gap: '50px',
+            maxWidth: '1000px',
+            width: '90vw',
+            margin: 'auto'
+          }}
+        >
+          {parts.map((part, i) => (
+            <Prizes
+              img={part.fields['Image URL']}
+              text={part.fields['Name']}
+              subtext={part.fields['Name Small Text']}
+              cost={part.fields['Hours']}
+              polaroidRotation={
+                (2 + Math.random() * 4) * (i % 2 === 0 ? 1 : -1)
               }
-          }>
-            <li key={part.id}>
-              <h2>{part.fields['Name']}</h2>
-              <p sx={
-                {position: 'relative',
-                  top: '-1rem',
-                  fontSize: 2,
-                  color: 'secondary',
-                mt: '0',
-                mb: '-10px',}
-              }>{part.fields['Name Small Text']}</p>
-              <p sx={
-                {mt: '0',
-                  fontSize: 1,
-                  color: 'primary',}
-              }>Hours: {part.fields['Hours']}</p>
-              <img src={part.fields['Image URL']} alt={part.fields['Name']} sx={
-                {
-                  width: 100,
-                  height: 100,
-                }
-              }/>
-            </li>
-          </Box>
-
+              ticketRotation={
+                (12 + Math.random() * 14) * (Math.random() > 0.5 ? 1 : -1)
+              }
+              key={part.id}
+            />
           ))}
-          
-          </Box>
-        </ul>
-      
+        </Grid>
+      <style>{styled}</style>
     </div>
   )
 }
@@ -79,4 +77,4 @@ export async function getStaticProps() {
       parts
     }
   }
-}
\ No newline at end of file
+}
diff --git a/pages/arcade/shop/[slackID].js b/pages/arcade/shop/[slackID].js
index 13d578cc..35e1823f 100644
--- a/pages/arcade/shop/[slackID].js
+++ b/pages/arcade/shop/[slackID].js
@@ -1,32 +1,69 @@
-import { Image, Link } from 'theme-ui'
-
+import { Image, Link, Text } from 'theme-ui'
 import { inventoryParts } from '../../api/arcade/inventory'
 import { useRouter } from 'next/router'
-
+import { Box, Grid } from 'theme-ui'
+import Prizes from '../../../components/arcade/prizes'
 /** @jsxImportSource theme-ui */
 
+const styled = `
+@import url('https://fonts.googleapis.com/css2?family=Slackey&family=Emblema+One&family=Gaegu&display=swap');
+
+.slackey {
+  font-family: "Slackey", sans-serif;
+ }
+
+ .gaegu {
+  font-family: "Gaegu", sans-serif;
+}
+
+body {
+  background-color: #FAEFD6;
+}
+
+`
 
 function orderLink(slackID, url) {
   return url + '&slackID=' + slackID
 }
 
-
-const ShopPage = ({parts, ...props}) => {
+const ShopPage = ({ parts, ...props }) => {
   const router = useRouter()
   const { slackID } = router.query
 
   return (
-    <div>
-      <h1 sx={
-        {textAlign: 'center',
+    <div sx={{
+      pb: 6,
+      
+    }}>
+      <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>
-      <span>Click on the part name to order it.</span>
-      <ul>
-        {parts.map(part => (
+          color: '#FF8C37',
+          mt: 0,
+          pt: 5
+        }}
+        className="slackey"
+      >
+        Shop
+      </h1>
+      <Text sx={{ display: 'block', textAlign: 'center', color: '#35290F' }} className='gaegu' variant='subtitle'>
+        This link is your own! Don't share it with others. Slack ID: {slackID}
+      </Text>
+      <Text sx={{ display: 'block', textAlign: 'center', fontWeight: 'bold', color: '#35290F' }} className='gaegu' variant='subtitle'>
+        Click on the part to order it.
+      </Text>
+      <Grid
+        sx={{
+          pt: '50px',
+          gridTemplateColumns: ['1fr', '1fr 1fr', '1fr 1fr', '1fr 1fr 1fr'],
+          gap: '50px',
+          maxWidth: '1000px',
+          width: '90vw',
+          margin: 'auto'
+        }}
+      >
+        {/* {parts.map(part => (
           <li key={part.id}>
             <h2>
               <Link href={orderLink(slackID, part.fields['Order Form URL'])} target="_blank">
@@ -37,8 +74,23 @@ const ShopPage = ({parts, ...props}) => {
             <p>{part.fields['Hours']}</p>
             <Image src={part.fields['Image URL']} alt={part.fields['Name']} />
           </li>
+        ))} */}
+        {parts.map((part, i) => (
+          <Prizes
+            img={part.fields['Image URL']}
+            text={part.fields['Name']}
+            subtext={part.fields['Name Small Text']}
+            cost={part.fields['Hours']}
+            polaroidRotation={(2 + Math.random() * 4) * (i % 2 === 0 ? 1 : -1)}
+            ticketRotation={
+              (12 + Math.random() * 14) * (Math.random() > 0.5 ? 1 : -1)
+            }
+            link={orderLink(slackID, part.fields['Order Form URL'])}
+            key={part.id}
+          />
         ))}
-      </ul>
+      </Grid>
+      <style>{styled}</style>
     </div>
   )
 }
@@ -57,8 +109,8 @@ export async function getStaticProps() {
 }
 
 export async function getStaticPaths() {
-  return ({
+  return {
     paths: [],
     fallback: 'blocking'
-  })
+  }
 }