diff --git a/app/root.tsx b/app/root.tsx
index a9b9e9f..105a354 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -29,7 +29,7 @@ export const meta: MetaFunction = () => ({
 export async function loader({ request }: LoaderArgs) {
   return {
     ENV: {
-      API_URL: process.env.API_URL,
+      PUBLIC_API_URL: process.env.PUBLIC_API_URL,
     },
   };
 }
diff --git a/app/routes/index.tsx b/app/routes/index.tsx
index dea97b4..d1d02c7 100644
--- a/app/routes/index.tsx
+++ b/app/routes/index.tsx
@@ -10,7 +10,7 @@ export const loader: LoaderFunction = async ({ context, request }) => {
   const { data } = await getVideos(API_KEY);
   const withVideoThumbs = data.map((d) => ({
     ...d,
-    resolved_thumb_url: `http://localhost:8000${d.vid_thumb_url}`,
+    resolved_thumb_url: `${process.env.PUBLIC_API_URL}${d.vid_thumb_url}`,
   }));
 
   return withVideoThumbs;