diff --git a/.env.example b/.env.example
index 61532469..60f786e8 100644
--- a/.env.example
+++ b/.env.example
@@ -9,6 +9,10 @@
 # When adding additional environment variables, the schema in "/src/env.mjs"
 # should be updated accordingly.
 
+# next.js base path
+# https://nextjs.org/docs/app/api-reference/next-config-js/basePath
+BASE_PATH="/"
+
 # Prisma
 # https://www.prisma.io/docs/reference/database-reference/connection-urls#env
 # DATABASE_URL="mysql://root@localhost:9999/modslist?schema=public"
@@ -23,7 +27,8 @@ SEED_RANDOM_DATA="false"
 # https://next-auth.js.org/configuration/options#secret
 # For local development, you can just keyboard-smash a longish string as your secret
 NEXTAUTH_SECRET=""
-NEXTAUTH_URL="http://localhost:3000"
+# URL for NextAuth's Auth endpoint. Must be full path.
+NEXTAUTH_URL="http://localhost:3000/auth"
 
 # Next Auth Discord Provider
 DISCORD_CLIENT_ID=""
diff --git a/next.config.mjs b/next.config.mjs
index 842a0ffe..a17980e2 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -6,6 +6,7 @@
 
 /** @type {import("next").NextConfig} */
 const config = {
+  basePath: process.env.BASE_PATH,
   reactStrictMode: true,
   images: {    //TODO!: figure out how to fix crash on next.config.mjs change
     remotePatterns: [
diff --git a/src/components/layout/header.tsx b/src/components/layout/header.tsx
index cc0797f2..14cbcc5f 100644
--- a/src/components/layout/header.tsx
+++ b/src/components/layout/header.tsx
@@ -1,5 +1,6 @@
 import { Flex, createStyles, Title, Box } from "@mantine/core";
 import Image from "next/image";
+import cmlLogo from "~/../public/images/logo/cml_logo.png";
 
 
 
@@ -33,13 +34,13 @@ export const Header = () => {
             <Flex className={classes.header}>
                 <Image
                     priority
-                    src="/images/logo/cml_logo.png"
+                    src={cmlLogo}
                     height={height}
                     width={width}
                     alt="CML Logo"
                 />
                 <Title className={classes.siteTitle} order={1}>Celeste Mods List</Title>
-                <Box w={width}/>
+                <Box w={width} />
             </Flex>
         </header>
     );
diff --git a/src/components/layout/layout.tsx b/src/components/layout/layout.tsx
index c800c4b8..35d76c78 100644
--- a/src/components/layout/layout.tsx
+++ b/src/components/layout/layout.tsx
@@ -75,7 +75,7 @@ export const Layout = ({
                 />
             </Head>
             <BackgroundImage
-                src="/images/cml_background1.png"
+                src={`${process.env.BASE_PATH}/images/cml_background1.png`}
                 className={classes.backgroundImage}
             >
                 <Grid gutter="0">
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 0240b528..f66171df 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -17,7 +17,7 @@ const MyApp: AppType<{ session: Session | null; }> = ({
   pageProps: { session, ...pageProps },
 }) => {
   return (
-    <SessionProvider session={session}>
+    <SessionProvider session={session} basePath={process.env.BASE_PATH}>
       <MantineProvider
         emotionCache={emotionCache}
         withGlobalStyles