diff --git a/src/Layout.tsx b/src/Layout.tsx
index c957b9b..c643256 100644
--- a/src/Layout.tsx
+++ b/src/Layout.tsx
@@ -58,11 +58,13 @@ function Shell({ children }: { children: React.ReactNode }) {
       <div className="text-bg bg-white dark:text-white dark:bg-bg font-fancy w-screen h-screen overflow-y-scroll scrollbar-thumb-pink-400 scrollbar-thin">
         <div className="w-full h-full relative z-10 flex flex-col">
           {/* mobile */}
-          <header className="flex md:hidden h-20 bg-light dark:bg-dark drop-shadow-md">
-            <div className="max-w-7xl mx-auto h-full flex flex-row p-4 gap-4 items-center">
-              <h1 className="text-xl cursor-pointer md:text-2xl hover:text-gray-500 transition duration-150 ease-in-out">
-                <NavLink to={{ pathname: "/" }}><strong>Katelynn & Thomas</strong></NavLink>
-              </h1>
+          <header className="flex shrink-0 md:hidden h-16 mb-2 bg-light dark:bg-dark drop-shadow-md">
+            <div className="max-w-7xl w-full h-full flex flex-row justify-center items-center p-4 gap-4">
+              <NavLink to={{ pathname: "/" }}>
+                <h1 className="text-2xl font-script font-bold cursor-pointer md:text-2xl hover:text-gray-500 transition duration-150 ease-in-out">
+                  Katelynn & Thomas
+                </h1>
+              </NavLink>
               <div className="justify-end ml-auto" />
               <div className="justify-end h-full">
                 <BurgerIcon
@@ -70,21 +72,13 @@ function Shell({ children }: { children: React.ReactNode }) {
                   onClick={() => setMenu(!menu)}
                 />
               </div>
-              <div className="flex justify-end h-full">
-                <button onClick={toggleTheme}>
-                  <MoonIcon
-                    className="h-2/3 cursor-pointer hover:fill-gray-500 transition duration-150 ease-in-out"
-                    fill={dark ? "white" : "black"}
-                  />
-                </button>
-              </div>
             </div>
           </header>
 
           {/* desktop */}
           <div className="flex flex-col justify-center">
-            <NavLink to={{ pathname: "/" }}>
-              <img src="/public/flowers-from-site.webp" className="w-full" />
+            <NavLink to={{ pathname: "/" }} className="flex flex-col items-center">
+              <img src="/public/flowers-from-site.webp?quality=60?size=1920" className="w-full object-scale-down" width={1920} height={1080} fetchPriority="high" />
               <h1 className="text-6xl text-center font-bold font-script my-4">Katelynn & Thomas</h1>
             </NavLink>
             <h4 className="text-2xl text-center">March 6, 2027 · Anchorage, AK</h4>
@@ -112,7 +106,7 @@ function Shell({ children }: { children: React.ReactNode }) {
 
         {/* mobile menu */}
         <div
-          className={`fixed w-full top-20 left-0 right-0 bottom-0 z-50 bg-light dark:bg-dark transition-all duration-300 ease-in-out ${
+          className={`fixed w-full top-16 left-0 right-0 bottom-0 z-50 bg-light dark:bg-dark transition-all duration-300 ease-in-out ${
             menu ? "opacity-100 translate-y-0" : "opacity-0 -translate-y-4 pointer-events-none"
           }`}
         >
diff --git a/src/Photos/Photos.tsx b/src/Photos/Photos.tsx
index 1cc656c..b1e081d 100644
--- a/src/Photos/Photos.tsx
+++ b/src/Photos/Photos.tsx
@@ -20,7 +20,7 @@ export function Photos() {
   const { count } = useLoaderData();
   let imgs = [];
   for (let i = 1; i < count + 1; i++) {
-    const name = "/public/us/img_" + i.toString().padStart(3, '0') + ".jpg";
+    const name = "/public/us/img_" + i.toString().padStart(3, '0') + ".jpg?quality=60?size=1024";
     const className = Math.floor(Math.random() * 3) ? "md:col-span-1" : "md:col-span-2";
     imgs.push((
       <div key={name} className={`${className} col-span-3 relative group h-100`}>
@@ -30,7 +30,10 @@ export function Photos() {
                      transition-all duration-150 ease-in-out
                      md:group-hover:scale-120 md:group-hover:z-50 md:group-hover:drop-shadow-2xl
                      relative md:group-hover:absolute md:group-hover:inset-0"
-          src={name} />
+          src={name}
+          height={1024}
+          width={1024}
+        />
       </div>
     ))
   }
diff --git a/src/ThingsToDo/ThingsToDo.tsx b/src/ThingsToDo/ThingsToDo.tsx
index 6cefb73..da314e3 100644
--- a/src/ThingsToDo/ThingsToDo.tsx
+++ b/src/ThingsToDo/ThingsToDo.tsx
@@ -30,13 +30,13 @@ export function ThingsToDo() {
             <p className="text-lg italic">~5 mins from downtown Anchorage</p>
             <div className="flex flex-row gap-4">
               <div className="h-50">
-                <img className="w-full h-full object-cover" src="/public/kincaid1.jpg" />
+                <img className="w-full h-full object-cover" width={1024} height={1024} src="/public/kincaid1.jpg?size=1024?quality=60" />
               </div>
               <div className="h-50">
-                <img className="w-full h-full object-cover" src="/public/kincaid2.jpg" />
+                <img className="w-full h-full object-cover" width={1024} height={1024} src="/public/kincaid2.jpg?size=1024?quality=60" />
               </div>
               <div className="h-50">
-                <img className="w-full h-full object-cover" src="/public/kincaid3.jpg" />
+                <img className="w-full h-full object-cover" width={1024} height={1024} src="/public/kincaid3.jpg?size=1024?quality=60" />
               </div>
             </div>
             <p className="text-lg">
@@ -50,7 +50,7 @@ export function ThingsToDo() {
             <p className="text-lg italic">~10 mins from downtown Anchorage</p>
             <div className="flex flex-row gap-4">
               <div className="h-50">
-                <img className="w-full h-full object-cover" src="/public/marsh1.jpg" />
+                <img className="w-full h-full object-cover" width={1024} height={1024} src="/public/marsh1.jpg?size=1024?quality=60" />
               </div>
             </div>
             <p className="text-lg">
@@ -63,10 +63,10 @@ export function ThingsToDo() {
             <p className="text-lg italic">~15 mins from downtown Anchorage</p>
             <div className="flex flex-row gap-4">
               <div className="h-50">
-                <img className="w-full h-full object-cover" src="/public/glenalps1.jpg" />
+                <img className="w-full h-full object-cover" width={1024} height={1024} src="/public/glenalps1.jpg?size=1024?quality=60" />
               </div>
               <div className="h-50">
-                <img className="w-full h-full object-cover" src="/public/glenalps2.jpg" />
+                <img className="w-full h-full object-cover" width={1024} height={1024} src="/public/glenalps2.jpg?size=1024?quality=60" />
               </div>
             </div>
             <p className="text-lg">
@@ -81,13 +81,13 @@ export function ThingsToDo() {
             <p className="text-lg italic">~20 mins from downtown Anchorage</p>
             <div className="flex flex-row gap-4">
               <div className="h-50">
-                <img className="w-full h-full object-cover" src="/public/belugapoint1.jpg" />
+                <img className="w-full h-full object-cover" width={1024} height={1024} src="/public/belugapoint1.jpg?size=1024?quality=60" />
               </div>
               <div className="h-50">
-                <img className="w-full h-full object-cover" src="/public/belugapoint2.jpg" />
+                <img className="w-full h-full object-cover" width={1024} height={1024} src="/public/belugapoint2.jpg?size=1024?quality=60" />
               </div>
               <div className="h-50">
-                <img className="w-full h-full object-cover" src="/public/belugapoint3.jpg" />
+                <img className="w-full h-full object-cover" width={1024} height={1024} src="/public/belugapoint3.jpg?size=1024?quality=60" />
               </div>
             </div>
             <p className="text-lg">
@@ -109,13 +109,13 @@ export function ThingsToDo() {
             <p className="text-lg italic">~45 mins from downtown Anchorage</p>
             <div className="flex flex-row gap-4">
               <div className="h-50">
-                <img className="w-full h-full object-cover" src="/public/girdwood1.jpg" />
+                <img className="w-full h-full object-cover" width={1024} height={1024} src="/public/girdwood1.jpg?size=1024?quality=60" />
               </div>
               <div className="h-50">
-                <img className="w-full h-full object-cover" src="/public/girdwood2.jpg" />
+                <img className="w-full h-full object-cover" width={1024} height={1024} src="/public/girdwood2.jpg?size=1024?quality=60" />
               </div>
               <div className="h-50">
-                <img className="w-full h-full object-cover" src="/public/girdwood3.jpg" />
+                <img className="w-full h-full object-cover" width={1024} height={1024} src="/public/girdwood3.jpg?size=1024?quality=60" />
               </div>
             </div>
             <p className="text-lg">
@@ -129,13 +129,13 @@ export function ThingsToDo() {
             <p className="text-lg italic">~1 hour from downtown Anchorage</p>
             <div className="flex flex-row gap-4">
               <div className="h-50">
-                <img className="w-full h-full object-cover" src="/public/awcc1.jpg" />
+                <img className="w-full h-full object-cover" width={1024} height={1024} src="/public/awcc1.jpg?size=1024?quality=60" />
               </div>
               <div className="h-50">
-                <img className="w-full h-full object-cover" src="/public/awcc2.jpg" />
+                <img className="w-full h-full object-cover" width={1024} height={1024} src="/public/awcc2.jpg?size=1024?quality=60" />
               </div>
               <div className="h-50">
-                <img className="w-full h-full object-cover" src="/public/awcc3.jpg" />
+                <img className="w-full h-full object-cover" width={1024} height={1024} src="/public/awcc3.jpg?size=1024?quality=60" />
               </div>
             </div>
             <p className="text-lg">
@@ -149,13 +149,13 @@ export function ThingsToDo() {
             <p className="text-lg italic">~1 hour from downtown Anchorage</p>
             <div className="flex flex-row gap-4">
               <div className="h-50">
-                <img className="w-full h-full object-cover" src="/public/eklutna1.jpg" />
+                <img className="w-full h-full object-cover" width={1024} height={1024} src="/public/eklutna1.jpg?size=1024?quality=60" />
               </div>
               <div className="h-50">
-                <img className="w-full h-full object-cover" src="/public/eklutna2.jpg" />
+                <img className="w-full h-full object-cover" width={1024} height={1024} src="/public/eklutna2.jpg?size=1024?quality=60" />
               </div>
               <div className="h-50">
-                <img className="w-full h-full object-cover" src="/public/eklutna3.jpg" />
+                <img className="w-full h-full object-cover" width={1024} height={1024} src="/public/eklutna3.jpg?size=1024?quality=60" />
               </div>
             </div>
             <p className="text-lg">
@@ -180,13 +180,13 @@ export function ThingsToDo() {
             <p className="text-lg italic">~1.25 hours from Anchorage</p>
             <div className="flex flex-row gap-4">
               <div className="h-50">
-                <img className="w-full h-full object-cover" src="/public/whittier1.jpg" />
+                <img className="w-full h-full object-cover" width={1024} height={1024} src="/public/whittier1.jpg?size=1024?quality=60" />
               </div>
               <div className="h-50">
-                <img className="w-full h-full object-cover" src="/public/whittier2.jpg" />
+                <img className="w-full h-full object-cover" width={1024} height={1024} src="/public/whittier2.jpg?size=1024?quality=60" />
               </div>
               <div className="h-50">
-                <img className="w-full h-full object-cover" src="/public/whittier3.jpg" />
+                <img className="w-full h-full object-cover" width={1024} height={1024} src="/public/whittier3.jpg?size=1024?quality=60" />
               </div>
             </div>
             <p className="text-lg">
@@ -205,13 +205,13 @@ export function ThingsToDo() {
             <p className="text-lg italic">~1.25 hours from Anchorage</p>
             <div className="flex flex-row gap-4">
               <div className="h-50">
-                <img className="w-full h-full object-cover" src="/public/hatcher1.jpg" />
+                <img className="w-full h-full object-cover" width={1024} height={1024} src="/public/hatcher1.jpg?size=1024?quality=60" />
               </div>
               <div className="h-50">
-                <img className="w-full h-full object-cover" src="/public/hatcher2.jpg" />
+                <img className="w-full h-full object-cover" width={1024} height={1024} src="/public/hatcher2.jpg?size=1024?quality=60" />
               </div>
               <div className="h-50">
-                <img className="w-full h-full object-cover" src="/public/hatcher3.jpg" />
+                <img className="w-full h-full object-cover" width={1024} height={1024} src="/public/hatcher3.jpg?size=1024?quality=60" />
               </div>
             </div>
             <p className="text-lg">
@@ -231,13 +231,13 @@ export function ThingsToDo() {
             <p className="text-lg italic">~1.5 hours from Anchorage</p>
             <div className="flex flex-row gap-4">
               <div className="h-50">
-                <img className="w-full h-full object-cover" src="/public/glenalps1.jpg" />
+                <img className="w-full h-full object-cover" width={1024} height={1024} src="/public/glenalps1.jpg?size=1024?quality=60" />
               </div>
               <div className="h-50">
-                <img className="w-full h-full object-cover" src="/public/glenalps2.jpg" />
+                <img className="w-full h-full object-cover" width={1024} height={1024} src="/public/glenalps2.jpg?size=1024?quality=60" />
               </div>
               <div className="h-50">
-                <img className="w-full h-full object-cover" src="/public/glenalps3.jpg" />
+                <img className="w-full h-full object-cover" width={1024} height={1024} src="/public/glenalps3.jpg?size=1024?quality=60" />
               </div>
             </div>
             <p className="text-lg">
@@ -255,13 +255,13 @@ export function ThingsToDo() {
             <p className="text-lg italic">~2 hours from Anchorage</p>
             <div className="flex flex-row gap-4">
               <div className="h-50">
-                <img className="w-full h-full object-cover" src="/public/talkeetna1.jpg" />
+                <img className="w-full h-full object-cover" width={1024} height={1024} src="/public/talkeetna1.jpg?size=1024?quality=60" />
               </div>
               <div className="h-50">
-                <img className="w-full h-full object-cover" src="/public/talkeetna2.jpg" />
+                <img className="w-full h-full object-cover" width={1024} height={1024} src="/public/talkeetna2.jpg?size=1024?quality=60" />
               </div>
               <div className="h-50">
-                <img className="w-full h-full object-cover" src="/public/talkeetna3.jpg" />
+                <img className="w-full h-full object-cover" width={1024} height={1024} src="/public/talkeetna3.jpg?size=1024?quality=60" />
               </div>
             </div>
             <p className="text-lg">
@@ -282,13 +282,13 @@ export function ThingsToDo() {
             <p className="text-lg italic">~2.5 hours from Anchorage</p>
             <div className="flex flex-row gap-4">
               <div className="h-50">
-                <img className="w-full h-full object-cover" src="/public/seward1.jpg" />
+                <img className="w-full h-full object-cover" width={1024} height={1024} src="/public/seward1.jpg?size=1024?quality=60" />
               </div>
               <div className="h-50">
-                <img className="w-full h-full object-cover" src="/public/seward2.jpg" />
+                <img className="w-full h-full object-cover" width={1024} height={1024} src="/public/seward2.jpg?size=1024?quality=60" />
               </div>
               <div className="h-50">
-                <img className="w-full h-full object-cover" src="/public/seward3.jpg" />
+                <img className="w-full h-full object-cover" width={1024} height={1024} src="/public/seward3.jpg?size=1024?quality=60" />
               </div>
             </div>
             <p className="text-lg">
@@ -310,13 +310,13 @@ export function ThingsToDo() {
             <p className="text-lg italic">~4 hours from Anchorage</p>
             <div className="flex flex-row gap-4">
               <div className="h-50">
-                <img className="w-full h-full object-cover" src="/public/denali1.jpg" />
+                <img className="w-full h-full object-cover" width={1024} height={1024} src="/public/denali1.jpg?size=1024?quality=60" />
               </div>
               <div className="h-50">
-                <img className="w-full h-full object-cover" src="/public/denali2.jpg" />
+                <img className="w-full h-full object-cover" width={1024} height={1024} src="/public/denali2.jpg?size=1024?quality=60" />
               </div>
               <div className="h-50">
-                <img className="w-full h-full object-cover" src="/public/denali3.jpg" />
+                <img className="w-full h-full object-cover" width={1024} height={1024} src="/public/denali3.jpg?size=1024?quality=60" />
               </div>
             </div>
             <p className="text-lg">
diff --git a/src/Travel/Travel.tsx b/src/Travel/Travel.tsx
index 1ba81fc..ed455d6 100644
--- a/src/Travel/Travel.tsx
+++ b/src/Travel/Travel.tsx
@@ -18,7 +18,7 @@ export function Travel() {
               Servicing Anchorage is <strong>Ted Stevens International Airport</strong>,
               which has frequent flights from major US-based airlines.
             </p>
-            <img src="/public/travel.svg"/>
+            <img src="/public/travel.svg?raw=1"/>
           </div>
 
           <div className="flex flex-col gap-2">
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 4532f62..774fccd 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -1,7 +1,7 @@
 export function Sidebar() {
 	return (
 		<div className="hidden md:flex flex-col bg-light dark:bg-dark rounded-2xl drop-shadow-2xl col-span-1 p-6 gap-4 overflow-y-auto overflow-x-hidden">
-			<img src="/public/cherry-blossom.png" />
+			<img src="/public/cherry-blossom.png?size=180" />
 			<div className="flex flex-col">
 				<h4 className="text-3xl lg:text-4xl font-fancy text-center">MARCH</h4>
 				<h4 className="text-5xl lg:text-6xl font-fancy text-center"><strong>6</strong><sup className="text-sm italic align-[2em]">th</sup></h4>
diff --git a/src/index.ts b/src/index.ts
index 5c6801f..07da443 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -8,18 +8,24 @@ const server = serve({
       const url = new URL(req.url);
       const filePath = `./${url.pathname}`;
 
+      const raw = parseInt(url.searchParams.get("raw") ?? "0", 10);
+      const size = parseInt(url.searchParams.get("size") ?? "0", 10);
+      const quality = parseInt(url.searchParams.get("quality") ?? "0", 10);
+
       const file = Bun.file(filePath);
       const exists = await file.exists();
-
       if (exists) {
-        return new Response(
-          await file.image()
-            .resize(1024)
-            .webp({ quality: 80 })
-            .blob());
-      }
+        if (raw > 0)
+          return new Response(file);
 
-      return Response.json({ error: 'File not found' }, { status: 404 });
+        const img = file.image();
+        if (size > 0)
+          img.resize(size)
+        if (quality > 0)
+          img.webp({ quality })
+        return new Response(await img.blob());
+      }
+      return Response.json({ error: "File not found" }, { status: 404 });
     },
 
     "/api/getpics": async (req) => {