diff --git a/src/routes/pork/+page.server.ts b/src/routes/pork/+page.server.ts
index 4993870..a3e4a39 100644
--- a/src/routes/pork/+page.server.ts
+++ b/src/routes/pork/+page.server.ts
@@ -1,8 +1,132 @@
-import { get_all_pork } from '$lib/db';
-
 export async function load() {
   return {
-    pork: get_all_pork()
+    pork,
+    PRICE_PER_LB
   }
 }
 
+const PRICE_PER_LB = 6
+
+const pork = [
+  {
+    name: "pork links",
+    cured: false,
+    tubed: true,
+    lb_package: true,
+    flavors: [
+      "blueberry",
+      "original"
+    ]
+  },
+  {
+    name: "bacon",
+    cured: true,
+    tubed: false,
+    lb_package: true,
+    flavors: [
+      "blackberry",
+      "original",
+      "raspberry chipotle",
+      "three pepper"
+    ]
+
+  },
+  {
+    name: "bratwurst",
+    cured: false,
+    tubed: true,
+    lb_package: true,
+    flavors: [
+      "italian",
+      "keilbasa",
+      "andouille",
+      "cranberry",
+      "mushroom & swiss",
+      "philly cheese steak",
+      "swedish potato",
+      "~~jalapeno~~"
+    ]
+  },
+  {
+    name: "rings",
+    cured: false,
+    tubed: true,
+    lb_package: true,
+    flavors: [
+      "italian",
+      "keilbasa",
+    ]
+  },
+  {
+    name: "patties",
+    cured: false,
+    tubed: false,
+    lb_package: true,
+    flavors: [
+      "bratwurst",
+      "original",
+    ]
+
+  },
+  {
+    name: "ham",
+    cured: true,
+    tubed: false,
+    lb_package: false,
+    avg_weight: { min: 7, max: 15 }
+  },
+  {
+    name: "raw ham",
+    cured: false,
+    tubed: false,
+    avg_weight: { min: 7, max: 15 }
+  },
+  {
+    name: "loin roast",
+    cured: false,
+    tubed: false,
+    avg_weight: { min: 3, max: 4 }
+  },
+  {
+    name: "chop",
+    cured: false,
+    tubed: false,
+    avg_weight: { min: 0.75, max: 1.5 }
+  },
+  {
+    name: "steak",
+    cured: false,
+    tubed: false,
+    avg_weight: { min: 1.5, max: 3 }
+  },
+  {
+    name: "belly",
+    cured: false,
+    tubed: false,
+    avg_weight: { min: 7, max: 10 }
+  },
+  {
+    name: "spare ribs",
+    cured: false,
+    tubed: false,
+    avg_weight: { min: 2, max: 4 }
+  },
+  {
+    name: "butt",
+    cured: false,
+    tubed: false,
+    avg_weight: { min: 3, max: 5 }
+  },
+  {
+    name: "smoked hocks",
+    cured: true,
+    tubed: false,
+    avg_weight: { min: 1, max: 2 }
+  },
+  {
+    name: "roast",
+    cured: false,
+    tubed: false,
+    avg_weight: { min: 4, max: 7 }
+  }
+]
diff --git a/src/routes/pork/+page.svelte b/src/routes/pork/+page.svelte
index 0aff0da..63bb974 100644
--- a/src/routes/pork/+page.svelte
+++ b/src/routes/pork/+page.svelte
@@ -1,26 +1,27 @@
 <script lang="ts">
   import type { MouseEventHandler } from "svelte/elements";
-  let { data } = $props<{ data: { pork: Pork[] } }>();
+  let { data } = $props<{ data: { pork: Pork[]; PRICE_PER_LB: number } }>();
   interface Pork {
     pork: {
       name: string;
-      min_weight: number;
-      max_weight: number;
-      stock: number;
-      raw_cut: boolean;
-      id: number;
-      preweighed: boolean;
+      cured: boolean;
+      tubed: boolean;
+      lb_package: boolean;
+      flavors: String[];
+      avg_weight: {
+        min: number;
+        max: number;
+      };
     };
   }
 
   let selected = $state("Chop");
-  const PRICE_PER_LB = 6;
 
   const change_photo: MouseEventHandler<HTMLLIElement> = ({
     currentTarget: { id },
   }) => {
-    console.log(id);
-    selected = id;
+    // console.log(id);
+    // selected = id;
   };
 </script>
 
@@ -35,28 +36,37 @@
 <section>
   <h1><b>F</b>arm Raised Pork</h1>
   <h5>this ain't your grocery store's pork</h5>
-  <h5>All priced at {PRICE_PER_LB}$/#</h5>
-  <div id="tui">
-    <ol>
-      <li>
-        <span>Cut</span>
-        <span>Weight</span>
-      </li>
-      {#each data.pork as { name, preweighed, min_weight, max_weight }}
-        <li onmouseenter={change_photo} id={name}>
-          <span>{name}</span>
-          {#if preweighed}
-            <span>{min_weight} lb</span>
-          {:else}
-            <span>{min_weight} ~ {max_weight} lbs</span>
-          {/if}
-        </li>
-      {/each}
-    </ol>
-    <img
-      src={`/pork/${selected.replace(" ", "_")}.jpg`}
-      alt={`Image of a ${selected}`}
-    />
+  <h5>All priced at {data.PRICE_PER_LB}$/#</h5>
+  <div id="pork">
+    {#each data.pork as { name, cured, tubed, lb_package, flavors, avg_weight }}
+      <div onmouseenter={change_photo} id={name}>
+        <h3>{name}</h3>
+        {#if lb_package}
+          <p>1 lb</p>
+        {:else}
+          <p>{avg_weight.min}~ {avg_weight.max} lbs</p>
+        {/if}
+        {#if cured}
+          <span>Cured!</span>
+        {/if}
+        {#if tubed}
+          <span>Tubed!</span>
+        {/if}
+        {#if flavors != undefined}
+          <ul>
+            {#each flavors as flavor}
+              <li>
+                {flavor}
+              </li>
+            {/each}
+          </ul>
+        {/if}
+      </div>
+    {/each}
+    <!-- <img -->
+    <!--   src={`/pork/${selected.replace(" ", "_")}.jpg`} -->
+    <!--   alt={`Image of a ${selected}`} -->
+    <!-- /> -->
   </div>
 </section>
 
@@ -84,53 +94,65 @@
       color: var(--primary-8);
     }
 
-    img {
-      display: none;
+    // img {
+    //   display: none;
+    // }
+  }
+  #pork {
+    display: flex;
+    flex-direction: column;
+    font-size: 1rem;
+    gap: 1rem;
+    width: 100%;
+    div {
+      background: var(--primary-9);
+      border-radius: var(--br);
+      padding: 1rem;
+      display: flex;
+      flex-direction: column;
+    }
+    h3 {
+      text-transform: capitalize;
     }
 
-    #tui {
-      display: flex;
-      width: 90%;
-      font-size: 1rem;
-      gap: 1rem;
-
-      ol {
-        width: 100%;
+    ul {
+      width: 100%;
+      display: inherit;
+      flex-direction: column;
+      list-style: none;
+      li {
         display: inherit;
-        flex-direction: column;
-        list-style: none;
-        li {
-          display: inherit;
-          gap: 1rem;
-          padding-left: 1rem;
-          span {
-            flex-basis: 50%;
-            text-align: center;
-            text-shadow: 3px 3px 3px var(--primary-7);
-            &:first-child {
-              text-align: left;
-            }
-          }
-          &:nth-child(2n) {
-            background: var(--primary-8);
-          }
-          &:not(:first-child):hover {
-            background: var(--primary-10);
-          }
+        gap: 1rem;
+        padding-left: 1rem;
+        &:nth-child(even) {
+          background: var(--primary-8);
+        }
+        &:not(:first-child):hover {
+          background: var(--primary-10);
         }
       }
     }
   }
 
   @media screen and (min-width: 640px) {
-    img {
-      display: unset !important;
-      width: 50%;
-      height: fit-content;
-      border-radius: 0.375rem;
-      text-align: center;
-      align-self: center;
+    #pork {
+      flex-direction: row;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: space-around;
+      div {
+        flex-basis: 20rem;
+        // align-items: center;
+        justify-content: center;
+      }
     }
+    // img {
+    //   display: unset !important;
+    //   width: 50%;
+    //   height: fit-content;
+    //   border-radius: 0.375rem;
+    //   text-align: center;
+    //   align-self: center;
+    // }
   }
 </style>
-