diff --git a/; b/;
new file mode 100644
index 0000000..4cc9b79
--- /dev/null
+++ b/;
@@ -0,0 +1,205 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+
+  let { data } = $props<{ data: { pork: Pork[]; PRICE_PER_LB: number } }>();
+  interface Pork {
+    pork: {
+      name: string;
+      cured: boolean;
+      tubed: boolean;
+      lb_package: boolean;
+      flavors: String[];
+      avg_weight: {
+        min: number;
+        max: number;
+      };
+    };
+  }
+
+  onMount(async () => {
+    const images = import.meta.glob("$lib/assests/*.jpg", {
+      eager: true,
+      query: { enhanced: true },
+    });
+    console.log(images);
+  });
+</script>
+
+<svelte:head>
+  <title>Sludge Farm Pork</title>
+  <meta
+    name="description"
+    content="Please buy some Pork, it tastes good I swear"
+  />
+</svelte:head>
+
+<section>
+  <h1><b>F</b>arm Raised Pork</h1>
+  <h5>this ain't your grocery store's pork</h5>
+  <h5>All priced at {data.PRICE_PER_LB}$/#</h5>
+  <div id="pork">
+    {#each data.pork as { name, src, cured, tubed, lb_package, flavors, avg_weight }}
+      <card id={name}>
+        <h3>{name}</h3>
+        {#if src != undefined}
+          <img {src} alt="A photo of {name}" />
+        {:else}
+          <hr />
+        {/if}
+        <div>
+          {#if cured}
+            <span>Cured!</span>
+          {/if}
+          {#if tubed}
+            <span>Tubed!</span>
+          {/if}
+          <p>
+            Weight:
+            {#if lb_package}
+              1 lb
+            {:else}
+              {avg_weight.min}~ {avg_weight.max} lbs
+            {/if}
+          </p>
+        </div>
+
+        {#if flavors != undefined}
+          <ul>
+            <li>Flavors:</li>
+            {#each flavors as flavor}
+              <li>
+                {flavor}
+              </li>
+            {/each}
+          </ul>
+        {/if}
+      </card>
+    {/each}
+    <!-- <img -->
+    <!--   src={`/pork/${selected.replace(" ", "_")}.jpg`} -->
+    <!--   alt={`Image of a ${selected}`} -->
+    <!-- /> -->
+  </div>
+</section>
+
+<style lang="scss">
+  b {
+    font-family: "Initials";
+    font-weight: 100;
+    color: var(--secondary-5);
+  }
+
+  section {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    h1 {
+      font-family: "Initials";
+      color: var(--secondary-3);
+      text-align: center;
+      font-size: 2.5rem;
+      font-weight: 500;
+      text-shadow: 3px 3px 3px var(--primary-8);
+    }
+    h5 {
+      font-size: 0.75rem;
+      color: var(--primary-8);
+    }
+
+    // img {
+    //   display: none;
+    // }
+  }
+  #pork {
+    display: flex;
+    flex-direction: column;
+    font-size: 1rem;
+    gap: 1rem;
+    width: 100%;
+    card {
+      background: var(--secondary-9);
+      border-radius: var(--br);
+      padding: 1rem;
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+      position: relative;
+      img {
+        width: 100%;
+        border-radius: var(--br);
+      }
+      hr {
+        height: 1rem;
+        color: var(--secondary-9);
+        width: 1rem;
+      }
+      div {
+        display: flex;
+        justify-content: space-around;
+        font-size: 0.75rem;
+      }
+      span {
+        // font-size: 0.75rem;
+        background: var(--primary-5);
+        color: var(--primary-10);
+        font-weight: 900;
+        width: fit-content;
+        border-radius: var(--br);
+        padding: 0.125rem 0.325rem;
+      }
+      h3 {
+        position: absolute;
+        background: var(--secondary-9);
+        border-radius: 0 0 var(--br) 0;
+        padding: 0.25rem 0.5rem;
+        top: 1rem;
+        text-transform: capitalize;
+        color: var(--primary-5);
+      }
+    }
+
+    ul {
+      font-size: 0.85rem;
+      width: 100%;
+      display: inherit;
+      flex-direction: column;
+      list-style: none;
+      li {
+        display: inherit;
+        gap: 1rem;
+        padding-left: 1rem;
+        text-transform: capitalize;
+        &:nth-child(even) {
+          background: var(--primary-8);
+        }
+        &:not(:first-child):hover {
+          background: var(--primary-10);
+        }
+      }
+    }
+  }
+
+  @media screen and (min-width: 640px) {
+    #pork {
+      flex-direction: row;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: space-around;
+      card {
+        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>
diff --git a/src/lib/assests/Bacon_(Original).jpg b/src/lib/assests/bacon.jpg
similarity index 100%
rename from src/lib/assests/Bacon_(Original).jpg
rename to src/lib/assests/bacon.jpg
diff --git a/src/lib/assests/Chop.jpg b/src/lib/assests/chops.jpg
similarity index 100%
rename from src/lib/assests/Chop.jpg
rename to src/lib/assests/chops.jpg
diff --git a/src/lib/assests/Ham_(Smoked).jpg b/src/lib/assests/hams.jpg
similarity index 100%
rename from src/lib/assests/Ham_(Smoked).jpg
rename to src/lib/assests/hams.jpg
diff --git a/src/lib/assests/Roast_(Loin).jpg b/src/lib/assests/loin-roast.jpg
similarity index 100%
rename from src/lib/assests/Roast_(Loin).jpg
rename to src/lib/assests/loin-roast.jpg
diff --git a/src/lib/assests/Roast.jpg b/src/lib/assests/roast.jpg
similarity index 100%
rename from src/lib/assests/Roast.jpg
rename to src/lib/assests/roast.jpg
diff --git a/src/lib/assests/Hocks_(Smoked).jpg b/src/lib/assests/smoked-hocks.jpg
similarity index 100%
rename from src/lib/assests/Hocks_(Smoked).jpg
rename to src/lib/assests/smoked-hocks.jpg
diff --git a/src/lib/assests/Ribs_(Spare).jpg b/src/lib/assests/spare-ribs.jpg
similarity index 100%
rename from src/lib/assests/Ribs_(Spare).jpg
rename to src/lib/assests/spare-ribs.jpg
diff --git a/src/lib/assests/Steak.jpg b/src/lib/assests/steak.jpg
similarity index 100%
rename from src/lib/assests/Steak.jpg
rename to src/lib/assests/steak.jpg
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 8a56922..ad82dc2 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -244,9 +244,10 @@
     padding: 1rem;
     gap: 1rem;
     justify-content: flex-end;
-    text-shadow: 3px 3px 3px var(--primary-9);
+    text-shadow: 3px 3px 3px var(--secondary-7);
     a {
       font-weight: 700;
+      color: var(--secondary-4);
       line-height: 2rem;
       font-size: 1.5rem;
       line-height: 1.5rem;
@@ -255,11 +256,11 @@
         margin-right: auto;
       }
       &:hover {
-        color: var(--primary-3);
+        color: var(--secondary-2);
       }
     }
     button {
-      background: var(--primary-8);
+      background: var(--secondary-4);
       border-radius: var(--br);
       border: none;
       width: fit-content;
@@ -270,9 +271,9 @@
       font-size: 1.5rem;
       line-height: 1.5rem;
       font-weight: 900;
-      color: var(--primary-100);
+      color: var(--secondary-5);
       &:hover {
-        background: var(--primary-1);
+        background: var(--secondary-6);
       }
     }
   }
@@ -283,7 +284,7 @@
     padding: 1rem;
   }
 
-  @media screen and (min-width: 600px) {
+  @media screen and (min-width: 640px) {
     nav {
       padding: 1rem 20%;
       flex-direction: row;
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 8987dca..a1fb092 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -42,10 +42,10 @@
       flex-direction: column;
       gap: 1rem;
       a:hover {
-        color: var(--primary-3);
+        color: var(--secondary-3);
       }
       div {
-        background: var(--primary-8);
+        background: var(--secondary-8);
         padding: 2rem 1.5rem;
         border-radius: var(--br);
         max-width: 40rem;
@@ -56,15 +56,17 @@
       font-size: 1.5rem;
       text-align: center;
       text-justify: center;
+      color: var(--secondary-4);
       b {
         font-family: Initials;
+        color: var(--secondary-3);
         font-weight: 500;
         font-size: 3.5rem;
         padding: 0.5rem;
       }
     }
     h3 {
-      color: var(--primary-9);
+      color: var(--secondary-4);
       font-size: 0.75rem;
     }
     h2 {
diff --git a/src/routes/fest/+page.svelte b/src/routes/fest/+page.svelte
index a78fa0e..c6af358 100644
--- a/src/routes/fest/+page.svelte
+++ b/src/routes/fest/+page.svelte
@@ -18,11 +18,18 @@
     text-align: center;
     padding-top: 2rem;
     text-shadow: 3px 3px 3px var(--primary-9);
+    a {
+      color: var(--secondary-4);
+      &:hover {
+        color: var(--secondary-2);
+      }
+    }
     h1 {
       font-size: 2rem;
+      color: var(--secondary-4);
     }
     hr {
-      background: var(--primary-4);
+      background: var(--secondary-4);
       border: none;
       height: 0.25rem;
       margin: 2rem 0;
@@ -30,6 +37,9 @@
     }
   }
 
-  @media screen and (min-width: 600px) {
+  @media screen and (min-width: 640px) {
+    section {
+      width: 100%;
+    }
   }
 </style>
diff --git a/src/routes/fest/apply/+page.svelte b/src/routes/fest/apply/+page.svelte
index 637d817..41349f6 100644
--- a/src/routes/fest/apply/+page.svelte
+++ b/src/routes/fest/apply/+page.svelte
@@ -242,15 +242,18 @@
 <style lang="scss">
   section {
     max-width: 50rem;
-    margin: 0 auto;
+    width: 100%;
+    margin: 0.5rem auto;
+    text-align: center;
     div {
+      margin: auto 0.5rem;
       h1 {
+        color: var(--secondary-3);
         font-size: 2rem;
         font-weight: 900;
       }
-      p,
-      li {
-        font-size: 1.15rem;
+      b {
+        color: var(--secondary-2);
       }
     }
     form {
@@ -294,6 +297,7 @@
       padding: 0 1rem 1rem 1rem;
       border-radius: var(--br);
       legend {
+        color: var(--secondary-3);
         font-weight: 900;
         font-size: 1.125rem;
         margin-left: 1rem;
@@ -305,21 +309,24 @@
       }
       label {
         display: flex;
-        gap: 1rem;
+        color: var(--secondary-2);
+        flex-direction: column;
+
         &:has(ul) {
-          flex-direction: column;
+          label {
+            flex-direction: row;
+          }
         }
         p {
-          flex-basis: 50%;
-          text-align: right;
+          color: var(--secondary-2);
         }
         input {
           height: 2rem;
           align-self: center;
+          width: 100%;
         }
         input,
         textarea {
-          flex-basis: 50%;
           background: linear-gradient(
             var(--gradient-degree),
             var(--primary-11),
@@ -343,4 +350,28 @@
       }
     }
   }
+  @media screen and (min-width: 640px) {
+    section {
+      text-align: left;
+      p,
+      li {
+        font-size: 1.15rem;
+      }
+      fieldset {
+        label {
+          flex-direction: row;
+          gap: 1rem;
+          &:has(ul) {
+            flex-direction: column;
+          }
+          p,
+          input,
+          textarea {
+            text-align: right;
+            flex-basis: 50%;
+          }
+        }
+      }
+    }
+  }
 </style>
diff --git a/src/routes/pork/+page.server.ts b/src/routes/pork/+page.server.ts
index 1ec9dcf..7fe4a10 100644
--- a/src/routes/pork/+page.server.ts
+++ b/src/routes/pork/+page.server.ts
@@ -21,7 +21,7 @@ const pork = [
   },
   {
     name: "bacon",
-    src: "/src/lib/assests/pork-links.jpg",
+    src: "/src/lib/assests/bacon.jpg",
     cured: true,
     tubed: false,
     lb_package: true,
@@ -35,7 +35,7 @@ const pork = [
   },
   {
     name: "bratwurst",
-    src: "/src/lib/assests/pork-links.jpg",
+    // src: "/src/lib/assests/bratwursts.jpg",
     cured: false,
     tubed: true,
     lb_package: true,
@@ -52,7 +52,7 @@ const pork = [
   },
   {
     name: "rings",
-    src: "/src/lib/assests/pork-links.jpg",
+    // src: "/src/lib/assests/rings.jpg",
     cured: false,
     tubed: true,
     lb_package: true,
@@ -63,7 +63,7 @@ const pork = [
   },
   {
     name: "patties",
-    src: "/src/lib/assests/pork-links.jpg",
+    // src: "/src/lib/assests/patties.jpg",
     cured: false,
     tubed: false,
     lb_package: true,
@@ -75,7 +75,7 @@ const pork = [
   },
   {
     name: "ham",
-    src: "/src/lib/assests/pork-links.jpg",
+    src: "/src/lib/assests/hams.jpg",
     cured: true,
     tubed: false,
     lb_package: false,
@@ -83,63 +83,63 @@ const pork = [
   },
   {
     name: "raw ham",
-    src: "/src/lib/assests/pork-links.jpg",
+    // src: "/src/lib/assests/pork-links.jpg",
     cured: false,
     tubed: false,
     avg_weight: { min: 7, max: 15 }
   },
   {
     name: "loin roast",
-    src: "/src/lib/assests/pork-links.jpg",
+    src: "/src/lib/assests/loin-roast.jpg",
     cured: false,
     tubed: false,
     avg_weight: { min: 3, max: 4 }
   },
   {
     name: "chop",
-    src: "/src/lib/assests/pork-links.jpg",
+    src: "/src/lib/assests/chops.jpg",
     cured: false,
     tubed: false,
     avg_weight: { min: 0.75, max: 1.5 }
   },
   {
     name: "steak",
-    src: "/src/lib/assests/pork-links.jpg",
+    src: "/src/lib/assests/steak.jpg",
     cured: false,
     tubed: false,
     avg_weight: { min: 1.5, max: 3 }
   },
   {
     name: "belly",
-    src: "/src/lib/assests/pork-links.jpg",
+    // src: "/src/lib/assests/pork-links.jpg",
     cured: false,
     tubed: false,
     avg_weight: { min: 7, max: 10 }
   },
   {
     name: "spare ribs",
-    src: "/src/lib/assests/pork-links.jpg",
+    src: "/src/lib/assests/spare-ribs.jpg",
     cured: false,
     tubed: false,
     avg_weight: { min: 2, max: 4 }
   },
   {
     name: "butt",
-    src: "/src/lib/assests/pork-links.jpg",
+    // src: "/src/lib/assests/pork-links.jpg",
     cured: false,
     tubed: false,
     avg_weight: { min: 3, max: 5 }
   },
   {
     name: "smoked hocks",
-    src: "/src/lib/assests/pork-links.jpg",
+    src: "/src/lib/assests/smoked-hocks.jpg",
     cured: true,
     tubed: false,
     avg_weight: { min: 1, max: 2 }
   },
   {
     name: "roast",
-    src: "/src/lib/assests/pork-links.jpg",
+    src: "/src/lib/assests/roast.jpg",
     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 b93aa46..88d10b1 100644
--- a/src/routes/pork/+page.svelte
+++ b/src/routes/pork/+page.svelte
@@ -41,7 +41,11 @@
     {#each data.pork as { name, src, cured, tubed, lb_package, flavors, avg_weight }}
       <card id={name}>
         <h3>{name}</h3>
-        <img {src} alt="A photo of {name}" />
+        {#if src != undefined}
+          <img {src} alt="A photo of {name}" />
+        {:else}
+          <hr />
+        {/if}
         <div>
           {#if cured}
             <span>Cured!</span>
@@ -82,6 +86,7 @@
   b {
     font-family: "Initials";
     font-weight: 100;
+    color: var(--secondary-5);
   }
 
   section {
@@ -92,6 +97,7 @@
     justify-content: center;
     h1 {
       font-family: "Initials";
+      color: var(--secondary-4);
       text-align: center;
       font-size: 2.5rem;
       font-weight: 500;
@@ -113,7 +119,7 @@
     gap: 1rem;
     width: 100%;
     card {
-      background: var(--primary-9);
+      background: var(--secondary-9);
       border-radius: var(--br);
       padding: 1rem;
       display: flex;
@@ -124,6 +130,12 @@
         width: 100%;
         border-radius: var(--br);
       }
+      hr {
+        height: 1rem;
+        color: var(--secondary-9);
+        border: none;
+        width: 1rem;
+      }
       div {
         display: flex;
         justify-content: space-around;
@@ -132,17 +144,20 @@
       span {
         // font-size: 0.75rem;
         background: var(--primary-5);
+        color: var(--primary-10);
+        font-weight: 900;
         width: fit-content;
         border-radius: var(--br);
         padding: 0.125rem 0.325rem;
       }
       h3 {
         position: absolute;
-        background: var(--primary-9);
+        background: var(--secondary-9);
         border-radius: 0 0 var(--br) 0;
-        padding: 0.125rem 0.325rem;
+        padding: 0.25rem 0.5rem;
         top: 1rem;
         text-transform: capitalize;
+        color: var(--primary-5);
       }
     }