diff --git a/.github/workflows/Check-Lint-Format.yml b/.github/workflows/Check-Lint-Format.yml
index 3d1b52b..fb8f745 100644
--- a/.github/workflows/Check-Lint-Format.yml
+++ b/.github/workflows/Check-Lint-Format.yml
@@ -26,7 +26,6 @@ jobs:
       - name: Setup PNPM
         uses: pnpm/action-setup@v6
         with:
-          version: latest
           run_install: false
 
       - name: Install dependencies
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index bdfdd2b..2985b1e 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -36,7 +36,7 @@ jobs:
       - name: Setup pnpm
         uses: pnpm/action-setup@v6
         with:
-          version: latest
+          run-install: false
 
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
diff --git a/AGENTS.md b/AGENTS.md
index 31b853a..e308c05 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -38,4 +38,4 @@ This file provides short, actionable instructions for AI coding agents working i
 
 ## About the project
 
-Go look in readme.md for more about the project.
+Go look in readme.md for more about the project. Also please prefer pnpm.
diff --git a/app/FramesList/FramesList.tsx b/app/FramesList/FramesList.tsx
index 5b3948b..70f1424 100644
--- a/app/FramesList/FramesList.tsx
+++ b/app/FramesList/FramesList.tsx
@@ -43,9 +43,9 @@ export function FramesList({
 		<section className="mx-auto w-full max-w-6xl px-4 py-8 sm:px-6 lg:px-8">
 			<div className="mb-6 flex flex-col gap-3 border-b border-gray-200 pb-5 dark:border-gray-800 sm:flex-row sm:items-end sm:justify-between">
 				<div>
-					<p className="text-sm font-medium text-blue-600 dark:text-blue-400">Source library</p>
+					<p className="text-sm font-medium text-blue-600 dark:text-blue-400">Apps library</p>
 					<h2 className="mt-1 text-2xl font-semibold tracking-tight text-gray-950 dark:text-white">
-						Frames ready to explore
+						Apps ready to use
 					</h2>
 				</div>
 				<p className="text-sm text-gray-600 dark:text-gray-400">{filtered.length} results</p>
diff --git a/app/Header.tsx b/app/Header.tsx
index 398e8e8..dfb25fa 100644
--- a/app/Header.tsx
+++ b/app/Header.tsx
@@ -24,12 +24,12 @@ export function Header({
 				<div className="flex items-center gap-3">
 					<Link to="/" className="text-lg font-semibold text-gray-900 dark:text-white">
 						<span className="inline-block mr-2 text-blue-600">◧</span>
-						Source Frames
+						Skibidi Math
 					</Link>
 				</div>
 
 				<div className="flex flex-1 items-center">
-					<label className="sr-only">Search sources</label>
+					<label className="sr-only">Search Apps</label>
 					<input
 						value={query}
 						onChange={(e) => setQuery(e.target.value)}
diff --git a/app/root.tsx b/app/root.tsx
index 50f5338..b01a65e 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -53,7 +53,9 @@ export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
 	if (isRouteErrorResponse(error)) {
 		message = error.status === 404 ? "404" : "Error";
 		details =
-			error.status === 404 ? "The requested page could not be found." : error.statusText || details;
+			error.status === 404
+				? "The requested page could not be found. This can be because the website is broken, or because of issues with github pages or cloudflare pages, you should try another mirror to test."
+				: error.statusText || details;
 	} else if (import.meta.env.DEV && error && error instanceof Error) {
 		details = error.message;
 		stack = error.stack;
@@ -61,8 +63,8 @@ export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
 
 	return (
 		<main className="pt-16 p-4 container mx-auto">
-			<h1>{message}</h1>
-			<p>{details}</p>
+			<h1 className="text-xl font-bold">{message}</h1>
+			<p className="text-lg">{details}</p>
 			{stack && (
 				<pre className="w-full p-4 overflow-x-auto">
 					<code>{stack}</code>
diff --git a/app/routes.ts b/app/routes.ts
index 388cd40..6879ef1 100644
--- a/app/routes.ts
+++ b/app/routes.ts
@@ -1,3 +1,6 @@
-import { type RouteConfig, index } from "@react-router/dev/routes";
+import { type RouteConfig, index, route } from "@react-router/dev/routes";
 
-export default [index("routes/home.tsx")] satisfies RouteConfig;
+export default [
+	index("./routes/home.tsx"),
+	route("settings", "./routes/settings.tsx"),
+] satisfies RouteConfig;
diff --git a/app/routes/home.tsx b/app/routes/home.tsx
index b170530..00e2ec5 100644
--- a/app/routes/home.tsx
+++ b/app/routes/home.tsx
@@ -68,7 +68,7 @@ export default function Home() {
 
 			<main className="min-h-screen bg-gray-50 text-gray-950 dark:bg-gray-950 dark:text-white pt-6">
 				<div className="mx-auto w-full max-w-6xl px-4 pt-6 sm:px-6 lg:px-8">
-					<h1 className="sr-only">Source Frames</h1>
+					<h1 className="sr-only">Skibidi Math</h1>
 				</div>
 
 				<FramesList
diff --git a/package.json b/package.json
index a1c61cf..9928e16 100644
--- a/package.json
+++ b/package.json
@@ -30,5 +30,6 @@
 		"tailwindcss": "^4.3.0",
 		"typescript": "^6.0.3",
 		"vite": "^8.0.16"
-	}
+	},
+	"packageManager": "pnpm@11.5.2"
 }
diff --git a/vite.config.ts b/vite.config.ts
index f9d2a0d..505da65 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -5,6 +5,17 @@ import { defineConfig } from "vite";
 export default defineConfig({
 	base: "./", // IMPORTANT for Github Pages because it looks at the base of your pages (e.g., https://username.github.io/) to find stuff from index.html.
 	plugins: [tailwindcss(), reactRouter()],
+	optimizeDeps: {
+		// Prevent Vite's dep optimizer from treating our app route modules as external deps.
+		// Some environments (Codespaces/remote) can cause the optimizer to rewrite
+		// imports like `app/routes/home.tsx` into node_modules/.vite/deps which 404s.
+		exclude: [
+			"app/routes/home.tsx",
+			"./app/routes/home.tsx",
+			"app/routes/settings.tsx",
+			"./app/routes/settings.tsx",
+		],
+	},
 	resolve: {
 		tsconfigPaths: true,
 	},