diff --git a/app/routes/sketch+/components/header.tsx b/app/routes/sketch+/components/header.tsx
index bfb1d5ed..3c9bf2bc 100644
--- a/app/routes/sketch+/components/header.tsx
+++ b/app/routes/sketch+/components/header.tsx
@@ -11,7 +11,7 @@ export const Header = () => {
 		<DashboardHeader id="sketch-dashboard-header">
 			<DashboardTitle id="sketch-dashboard-title">
 				<Link prefetch="intent" to="/sketch">
-					Sketchy
+					Sketch
 				</Link>
 			</DashboardTitle>
 			<DashboardNav id="sketch-dashboard-nav">
diff --git a/app/routes/sketch+/projects+/$projectSlug_+/artboards+/$artboardSlug+/$branchSlug.$versionSlug.tsx b/app/routes/sketch+/projects+/$projectSlug_+/artboards+/$artboardSlug+/$branchSlug.$versionSlug.tsx
index 860afe40..2b5d6878 100644
--- a/app/routes/sketch+/projects+/$projectSlug_+/artboards+/$artboardSlug+/$branchSlug.$versionSlug.tsx
+++ b/app/routes/sketch+/projects+/$projectSlug_+/artboards+/$artboardSlug+/$branchSlug.$versionSlug.tsx
@@ -1,5 +1,9 @@
 import { invariantResponse } from '@epic-web/invariant'
-import { type LoaderFunctionArgs, json } from '@remix-run/node'
+import {
+	type LoaderFunctionArgs,
+	json,
+	type MetaFunction,
+} from '@remix-run/node'
 import { useLoaderData } from '@remix-run/react'
 import { GeneralErrorBoundary } from '#app/components/error-boundary'
 import {
@@ -14,14 +18,17 @@ import { getArtboardVersionWithDesignsAndLayers } from '#app/models/artboard-ver
 import { getUserBasic } from '#app/models/user/user.get.server'
 import { artboardVersionGeneratorBuildService } from '#app/services/artboard/version/generator/build.service'
 import { requireUserId } from '#app/utils/auth.server'
+import { routeLoaderMetaData } from '#app/utils/matches'
+import { projectLoaderRoute } from '../route'
+import { artboardBranchLoaderRoute } from './$branchSlug'
 import { CanvasContent } from './__components/canvas-content'
 import { ArtboardHeader } from './__components/header.artboard'
 import { SidebarLeft, SidebarRight } from './__components/sidebars'
+import { artboardLoaderRoute } from './route'
 
 export const artboardVersionLoaderRoute =
 	'routes/sketch+/projects+/$projectSlug_+/artboards+/$artboardSlug+/$branchSlug.$versionSlug'
 export async function loader({ params, request }: LoaderFunctionArgs) {
-	console.log('sketch+ projects slug artboards slug branch version route')
 	const userId = await requireUserId(request)
 	const owner = await getUserBasic({ where: { id: userId } })
 	invariantResponse(owner, 'Owner not found', { status: 404 })
@@ -57,8 +64,6 @@ export default function SketchProjectArtboardBranchVersionRoute() {
 	const data = useLoaderData<typeof loader>()
 	const { version, selectedLayer, generator } = data
 
-	console.log('reloaded')
-
 	// had to consider sidebar from project route level
 	// the component names might need re-thinking, but works
 	return (
@@ -77,6 +82,30 @@ export default function SketchProjectArtboardBranchVersionRoute() {
 	)
 }
 
+export const meta: MetaFunction<typeof loader> = ({ params, matches }) => {
+	const projectData = routeLoaderMetaData(matches, projectLoaderRoute)
+	const projectName = projectData?.project.name ?? params.projectSlug
+
+	const artboardData = routeLoaderMetaData(matches, artboardLoaderRoute)
+	const artboardName = artboardData?.artboard.name ?? params.artboardSlug
+
+	const branchData = routeLoaderMetaData(matches, artboardBranchLoaderRoute)
+	const branchName = branchData?.branch.name ?? params.branchSlug
+
+	const versionData = routeLoaderMetaData(matches, artboardVersionLoaderRoute)
+	const versionName = versionData?.version.name ?? params.versionSlug
+
+	return [
+		{
+			title: `${artboardName} | ${branchName} | ${versionName} | ${projectName} | Sketch | XYZ`,
+		},
+		{
+			name: 'description',
+			content: `Sketch dashboard for XYZ artboard project: ${artboardName} (${projectName})`,
+		},
+	]
+}
+
 export function ErrorBoundary() {
 	return (
 		<GeneralErrorBoundary
diff --git a/app/routes/sketch+/projects+/$projectSlug_+/artboards+/$artboardSlug+/$branchSlug._index.tsx b/app/routes/sketch+/projects+/$projectSlug_+/artboards+/$artboardSlug+/$branchSlug._index.tsx
index d05a084a..93c69da1 100644
--- a/app/routes/sketch+/projects+/$projectSlug_+/artboards+/$artboardSlug+/$branchSlug._index.tsx
+++ b/app/routes/sketch+/projects+/$projectSlug_+/artboards+/$artboardSlug+/$branchSlug._index.tsx
@@ -8,7 +8,6 @@ import { requireUserId } from '#app/utils/auth.server'
 export const artboardBranchLoaderRoute =
 	'routes/sketch+/projects+/$projectSlug_+/artboards+/$artboardSlug_+/$branchSlug_+/route'
 export async function loader({ params, request }: LoaderFunctionArgs) {
-	console.log('sketch+ projects slug artboards slug branch index route')
 	const userId = await requireUserId(request)
 	const owner = await getUserBasic({ where: { id: userId } })
 	invariantResponse(owner, 'Owner not found', { status: 404 })
diff --git a/app/routes/sketch+/projects+/$projectSlug_+/artboards+/$artboardSlug+/$branchSlug.tsx b/app/routes/sketch+/projects+/$projectSlug_+/artboards+/$artboardSlug+/$branchSlug.tsx
index c9696915..7941189d 100644
--- a/app/routes/sketch+/projects+/$projectSlug_+/artboards+/$artboardSlug+/$branchSlug.tsx
+++ b/app/routes/sketch+/projects+/$projectSlug_+/artboards+/$artboardSlug+/$branchSlug.tsx
@@ -1,15 +1,21 @@
 import { invariantResponse } from '@epic-web/invariant'
-import { type LoaderFunctionArgs, json } from '@remix-run/node'
+import {
+	type LoaderFunctionArgs,
+	json,
+	type MetaFunction,
+} from '@remix-run/node'
 import { GeneralErrorBoundary } from '#app/components/error-boundary'
 import { getArtboard } from '#app/models/artboard/artboard.get.server'
 import { getArtboardBranchWithVersions } from '#app/models/artboard-branch/artboard-branch.get.server'
 import { getUserBasic } from '#app/models/user/user.get.server'
 import { requireUserId } from '#app/utils/auth.server'
+import { routeLoaderMetaData } from '#app/utils/matches'
+import { projectLoaderRoute } from '../route'
+import { artboardLoaderRoute } from './route'
 
 export const artboardBranchLoaderRoute =
 	'routes/sketch+/projects+/$projectSlug_+/artboards+/$artboardSlug+/$branchSlug'
 export async function loader({ params, request }: LoaderFunctionArgs) {
-	console.log('sketch+ projects slug artboards slug branch route')
 	const userId = await requireUserId(request)
 	const owner = await getUserBasic({ where: { id: userId } })
 	invariantResponse(owner, 'Owner not found', { status: 404 })
@@ -30,6 +36,26 @@ export async function loader({ params, request }: LoaderFunctionArgs) {
 	return json({ branch })
 }
 
+export const meta: MetaFunction<typeof loader> = ({ params, matches }) => {
+	const projectData = routeLoaderMetaData(matches, projectLoaderRoute)
+	const projectName = projectData?.project.name ?? params.projectSlug
+
+	const artboardData = routeLoaderMetaData(matches, artboardLoaderRoute)
+	const artboardName = artboardData?.artboard.name ?? params.artboardSlug
+
+	const branchData = routeLoaderMetaData(matches, artboardBranchLoaderRoute)
+	const branchName = branchData?.branch.name ?? params.branchSlug
+	return [
+		{
+			title: `${artboardName} | ${branchName} | ${projectName} | Sketch | XYZ`,
+		},
+		{
+			name: 'description',
+			content: `Sketch dashboard for XYZ artboard project: ${artboardName} (${projectName})`,
+		},
+	]
+}
+
 export function ErrorBoundary() {
 	return (
 		<GeneralErrorBoundary
diff --git a/app/routes/sketch+/projects+/$projectSlug_+/artboards+/$artboardSlug+/_index.tsx b/app/routes/sketch+/projects+/$projectSlug_+/artboards+/$artboardSlug+/_index.tsx
index b842e061..53db3f4e 100644
--- a/app/routes/sketch+/projects+/$projectSlug_+/artboards+/$artboardSlug+/_index.tsx
+++ b/app/routes/sketch+/projects+/$projectSlug_+/artboards+/$artboardSlug+/_index.tsx
@@ -6,7 +6,6 @@ import { getUserBasic } from '#app/models/user/user.get.server'
 import { requireUserId } from '#app/utils/auth.server'
 
 export async function loader({ params, request }: LoaderFunctionArgs) {
-	console.log('sketch+ projects slug artboards slug index route')
 	const userId = await requireUserId(request)
 	const owner = await getUserBasic({ where: { id: userId } })
 	invariantResponse(owner, 'Owner not found', { status: 404 })
diff --git a/app/routes/sketch+/projects+/$projectSlug_+/artboards+/$artboardSlug+/route.tsx b/app/routes/sketch+/projects+/$projectSlug_+/artboards+/$artboardSlug+/route.tsx
index d2a9ca72..2787b7cc 100644
--- a/app/routes/sketch+/projects+/$projectSlug_+/artboards+/$artboardSlug+/route.tsx
+++ b/app/routes/sketch+/projects+/$projectSlug_+/artboards+/$artboardSlug+/route.tsx
@@ -1,9 +1,15 @@
 import { invariantResponse } from '@epic-web/invariant'
-import { type LoaderFunctionArgs, json } from '@remix-run/node'
+import {
+	type LoaderFunctionArgs,
+	json,
+	type MetaFunction,
+} from '@remix-run/node'
 import { GeneralErrorBoundary } from '#app/components/error-boundary'
 import { getArtboardWithBranchesAndVersions } from '#app/models/artboard/artboard.get.server'
 import { getUserBasic } from '#app/models/user/user.get.server'
 import { requireUserId } from '#app/utils/auth.server'
+import { routeLoaderMetaData } from '#app/utils/matches'
+import { projectLoaderRoute } from '../route'
 
 // starting the flat routes here in this directory
 // since the artboard will redirect to the branch and version route
@@ -20,7 +26,6 @@ import { requireUserId } from '#app/utils/auth.server'
 export const artboardLoaderRoute =
 	'routes/sketch+/projects+/$projectSlug_+/artboards+/$artboardSlug+/route'
 export async function loader({ params, request }: LoaderFunctionArgs) {
-	console.log('sketch+ projects slug artboards slug route')
 	const userId = await requireUserId(request)
 	const owner = await getUserBasic({ where: { id: userId } })
 	invariantResponse(owner, 'Owner not found', { status: 404 })
@@ -36,6 +41,21 @@ export async function loader({ params, request }: LoaderFunctionArgs) {
 	return json({ artboard })
 }
 
+export const meta: MetaFunction<typeof loader> = ({ params, matches }) => {
+	const projectData = routeLoaderMetaData(matches, projectLoaderRoute)
+	const projectName = projectData?.project.name ?? params.projectSlug
+
+	const artboardData = routeLoaderMetaData(matches, artboardLoaderRoute)
+	const artboardName = artboardData?.artboard.name ?? params.artboardSlug
+	return [
+		{ title: `${artboardName} | ${projectName} | Sketch | XYZ` },
+		{
+			name: 'description',
+			content: `Sketch dashboard for artboard project: ${artboardName} (${projectName})`,
+		},
+	]
+}
+
 export function ErrorBoundary() {
 	return (
 		<GeneralErrorBoundary
diff --git a/app/routes/sketch+/projects+/$projectSlug_+/artboards+/index.tsx b/app/routes/sketch+/projects+/$projectSlug_+/artboards+/index.tsx
index fa9cc620..3faa75e7 100644
--- a/app/routes/sketch+/projects+/$projectSlug_+/artboards+/index.tsx
+++ b/app/routes/sketch+/projects+/$projectSlug_+/artboards+/index.tsx
@@ -14,7 +14,6 @@ import { useUser } from '#app/utils/user'
 export const artboardstLoaderRoute =
 	'routes/sketch+/projects+/$projectSlug_+/artboards+/route'
 export async function loader({ params, request }: LoaderFunctionArgs) {
-	console.log('sketch+ projects slug artboards index route')
 	const userId = await requireUserId(request)
 	const owner = await getUserBasic({ where: { id: userId } })
 	invariantResponse(owner, 'Owner not found', { status: 404 })
@@ -39,7 +38,7 @@ export default function SketchProjectArtboardsIndexRoute() {
 			<DashboardContentHeading2>
 				<Link
 					prefetch="intent"
-					to={`/sketch/projects/${project.name}/artboards`}
+					to={`/sketch/projects/${project.slug}/artboards`}
 				>
 					Artboards
 				</Link>
@@ -48,9 +47,9 @@ export default function SketchProjectArtboardsIndexRoute() {
 				entities={project.artboards}
 				type="Artboard"
 				parent={project.name}
-				basePathNew={`/users/${user.username}/projects/${project.name}/artboards`}
+				basePathNew={`/users/${user.username}/projects/${project.slug}/artboards`}
 				basePathEditor={`/users/${user.username}/artboards`}
-				basePathView={`/sketch/projects/${project.name}/artboards`}
+				basePathView={`/sketch/projects/${project.slug}/artboards`}
 			/>
 		</div>
 	)
diff --git a/app/routes/sketch+/projects+/$projectSlug_+/artboards+/route.tsx b/app/routes/sketch+/projects+/$projectSlug_+/artboards+/route.tsx
index 099b4afb..8cc5b250 100644
--- a/app/routes/sketch+/projects+/$projectSlug_+/artboards+/route.tsx
+++ b/app/routes/sketch+/projects+/$projectSlug_+/artboards+/route.tsx
@@ -13,7 +13,6 @@ import { routeLoaderMetaData } from '#app/utils/matches'
 export const projectLoaderRoute =
 	'routes/sketch+/projects+/$projectSlug_+/route'
 export async function loader({ params, request }: LoaderFunctionArgs) {
-	console.log('sketch+ projects slug artboards route')
 	const userId = await requireUserId(request)
 	const owner = await getUserBasic({ where: { id: userId } })
 	invariantResponse(owner, 'Owner not found', { status: 404 })
@@ -35,10 +34,10 @@ export const meta: MetaFunction<typeof loader> = ({ params, matches }) => {
 	const projectData = routeLoaderMetaData(matches, projectLoaderRoute)
 	const projectName = projectData?.project.name ?? params.slug
 	return [
-		{ title: `Artboards | ${projectName} | Sketchy | XYZ` },
+		{ title: `Artboards | ${projectName} | Sketch | XYZ` },
 		{
 			name: 'description',
-			content: `Sketchy dashboard artboards for Project: ${projectName}`,
+			content: `Sketch dashboard for XYZ project artboards: ${projectName}`,
 		},
 	]
 }
diff --git a/app/routes/sketch+/projects+/$projectSlug_+/index.tsx b/app/routes/sketch+/projects+/$projectSlug_+/index.tsx
index 93fd99c9..7ca40323 100644
--- a/app/routes/sketch+/projects+/$projectSlug_+/index.tsx
+++ b/app/routes/sketch+/projects+/$projectSlug_+/index.tsx
@@ -15,7 +15,7 @@ export default function SketchProjectIndexRoute() {
 
 	return (
 		<div className="container">
-			<DashboardContentHeading1>{project.name}!</DashboardContentHeading1>
+			<DashboardContentHeading1>{project.name}</DashboardContentHeading1>
 			<DashboardContentHeading2>
 				<Link prefetch="intent" to="artboards">
 					Artboards
@@ -25,7 +25,7 @@ export default function SketchProjectIndexRoute() {
 				entities={project.artboards}
 				type="Artboard"
 				parent={project.name}
-				basePathNew={`/users/${user.username}/projects/${project.name}/artboards`}
+				basePathNew={`/users/${user.username}/projects/${project.slug}/artboards`}
 				basePathEditor={`/users/${user.username}/artboards`}
 				basePathView="artboards"
 			/>
diff --git a/app/routes/sketch+/projects+/$projectSlug_+/route.tsx b/app/routes/sketch+/projects+/$projectSlug_+/route.tsx
index 9c43e689..8e985fd7 100644
--- a/app/routes/sketch+/projects+/$projectSlug_+/route.tsx
+++ b/app/routes/sketch+/projects+/$projectSlug_+/route.tsx
@@ -14,7 +14,6 @@ import { routeLoaderMetaData } from '#app/utils/matches'
 export const projectLoaderRoute =
 	'routes/sketch+/projects+/$projectSlug_+/route'
 export async function loader({ params, request }: LoaderFunctionArgs) {
-	console.log('sketch+ projects $slug route')
 	const userId = await requireUserId(request)
 	const owner = await getUserBasic({ where: { id: userId } })
 	invariantResponse(owner, 'Owner not found', { status: 404 })
@@ -36,10 +35,10 @@ export const meta: MetaFunction<typeof loader> = ({ params, matches }) => {
 	const projectData = routeLoaderMetaData(matches, projectLoaderRoute)
 	const projectName = projectData?.project.name ?? params.slug
 	return [
-		{ title: `${projectName} | Sketchy | XYZ` },
+		{ title: `${projectName} | Sketch | XYZ` },
 		{
 			name: 'description',
-			content: `Sketchy dashboard for Project: ${projectName}`,
+			content: `Sketch dashboard for XYZ project: ${projectName}`,
 		},
 	]
 }
diff --git a/app/routes/sketch+/projects+/route.tsx b/app/routes/sketch+/projects+/route.tsx
index b262ee3f..fba9da3c 100644
--- a/app/routes/sketch+/projects+/route.tsx
+++ b/app/routes/sketch+/projects+/route.tsx
@@ -17,7 +17,6 @@ import { ProjectsSidebar } from './components/projects-sidebar'
 
 export const projectsLoaderRoute = 'routes/sketch+/projects+/route'
 export async function loader({ request }: LoaderFunctionArgs) {
-	console.log('sketch+ projects route')
 	const userId = await requireUserId(request)
 	const owner = await getUserBasic({ where: { id: userId } })
 	invariantResponse(owner, 'Owner not found', { status: 404 })
@@ -49,10 +48,10 @@ export default function SketchProjectsRoute() {
 
 export const meta: MetaFunction = () => {
 	return [
-		{ title: 'Projects | Sketchy | XYZ' },
+		{ title: 'Projects | Sketch | XYZ' },
 		{
 			name: 'description',
-			content: 'Sketchy dashboard for XYZ - Projects',
+			content: 'Sketch dashboard for XYZ - Projects',
 		},
 	]
 }
diff --git a/app/routes/sketch+/route.tsx b/app/routes/sketch+/route.tsx
index 1b3bd74d..c7ff1dee 100644
--- a/app/routes/sketch+/route.tsx
+++ b/app/routes/sketch+/route.tsx
@@ -9,7 +9,6 @@ import { requireUserId } from '#app/utils/auth.server'
 import { Header } from './components/header'
 
 export async function loader({ request }: LoaderFunctionArgs) {
-	console.log('sketch+ route')
 	await requireUserId(request)
 	return json({})
 }
@@ -25,10 +24,10 @@ export default function SketchRoute() {
 
 export const meta: MetaFunction = () => {
 	return [
-		{ title: 'Sketchy | XYZ' },
+		{ title: 'Sketch | XYZ' },
 		{
 			name: 'description',
-			content: 'Sketchy dashboard for XYZ',
+			content: 'Sketch dashboard for XYZ',
 		},
 	]
 }