diff --git a/src/components/PageTitle.astro b/src/components/PageTitle.astro
index bc75757..b9e9860 100644
--- a/src/components/PageTitle.astro
+++ b/src/components/PageTitle.astro
@@ -3,7 +3,7 @@ import Title from './Title.astro';
 
 export interface Props {
 	class?: string;
-	grid?: 'wide' | 'narrow';
+	grid?: 'fullsize' | 'wide' | 'narrow';
 	innerGrid?: boolean;
 }
 
@@ -14,6 +14,7 @@ const { class: className, grid = 'narrow', innerGrid } = Astro.props;
 	class:list={[
 		'col-start-2 col-end-18 !mbe-0',
 		{
+			'col-start-1 col-end-18': grid === 'fullsize',
 			'md:col-start-3 md:col-end-17': grid === 'wide',
 			'md:col-start-3 md:col-end-15 xl:col-end-14 3xl:col-end-13': grid === 'narrow',
 			'!col-start-1 row-start-1': innerGrid,
diff --git a/src/components/ProjectContainer.astro b/src/components/ProjectContainer.astro
index 93a2a09..4beec34 100644
--- a/src/components/ProjectContainer.astro
+++ b/src/components/ProjectContainer.astro
@@ -19,11 +19,11 @@ const {
 <article class:list={['col-start-1 col-end-19 grid grid-cols-18', className]}>
 	{
 		format === '50-start' && (
-			<figure class="col-start-2 col-end-18 m-0 grid grid-cols-2 items-center gap-x-gap gap-y-halfgap">
-				<div class="col-start-1 col-end-3 row-start-1 md:col-start-1 md:col-end-2 md:row-start-1">
+			<figure class="col-start-1 col-end-19 m-0 grid grid-cols-2 items-center gap-x-gap gap-y-halfgap">
+				<div class="col-start-1 col-end-3 row-start-1 xl:col-start-1 xl:col-end-2 xl:row-start-1">
 					<ProjectImage project={project} />
 				</div>
-				<figcaption class="col-start-1 col-end-3 row-start-2 text-start md:col-start-2 md:row-start-1">
+				<figcaption class="col-start-1 col-end-3 row-start-2 text-start xl:col-start-2 xl:row-start-1">
 					<ProjectContent project={project} />
 				</figcaption>
 			</figure>
@@ -31,11 +31,11 @@ const {
 	}
 	{
 		format === '50-end' && (
-			<figure class="col-start-2 col-end-18 m-0 grid grid-cols-2 items-center gap-x-gap gap-y-halfgap">
-				<div class="col-start-1 col-end-3 row-start-1 md:col-start-2 md:row-start-1">
+			<figure class="col-start-1 col-end-19 m-0 grid grid-cols-2 items-center gap-x-gap gap-y-halfgap">
+				<div class="col-start-1 col-end-3 row-start-1 xl:col-start-2 xl:row-start-1">
 					<ProjectImage project={project} />
 				</div>
-				<figcaption class="col-start-1 col-end-3 row-start-2 text-start md:col-start-1 md:col-end-2 md:row-start-1">
+				<figcaption class="col-start-1 col-end-3 row-start-2 text-start xl:col-start-1 xl:col-end-2 xl:row-start-1">
 					<ProjectContent project={project} />
 				</figcaption>
 			</figure>
@@ -44,10 +44,10 @@ const {
 	{
 		format === '70-start' && (
 			<figure class="col-start-1 col-end-19 grid grid-cols-18 items-center gap-y-halfgap">
-				<div class="col-start-1 col-end-19 xl:col-end-13">
+				<div class="col-start-1 col-end-19 xl:col-end-11">
 					<ProjectImage project={project} />
 				</div>
-				<figcaption class="col-start-2 col-end-18 md:col-start-10 xl:col-start-14 xl:col-end-18">
+				<figcaption class="col-start-1 col-end-19 xl:col-start-12">
 					<ProjectContent project={project} />
 				</figcaption>
 			</figure>
@@ -56,10 +56,10 @@ const {
 	{
 		format === '70-end' && (
 			<figure class="col-start-1 col-end-19 grid grid-cols-18 items-center gap-y-halfgap">
-				<div class="col-start-1 col-end-19 grid xl:col-start-7">
+				<div class="col-start-1 col-end-19 grid xl:col-start-9">
 					<ProjectImage project={project} />
 				</div>
-				<figcaption class="col-start-2 col-end-18 md:col-end-10 xl:col-end-6 xl:row-start-1">
+				<figcaption class="col-start-1 col-end-19 xl:col-end-8 xl:row-start-1">
 					<ProjectContent project={project} />
 				</figcaption>
 			</figure>
@@ -71,7 +71,7 @@ const {
 				<div class="col-start-1 col-end-19 row-start-1">
 					<ProjectImage project={project} />
 				</div>
-				<figcaption class="col-start-2 col-end-18 md:col-end-13 xl:col-end-10">
+				<figcaption class="col-start-1 col-end-19 xl:col-end-13">
 					<ProjectContent project={project} />
 				</figcaption>
 			</figure>
@@ -83,7 +83,7 @@ const {
 				<div class="col-start-1 col-end-19 row-start-1">
 					<ProjectImage project={project} />
 				</div>
-				<figcaption class="col-start-2 col-end-18 md:col-start-8 md:col-end-18 xl:col-start-10 xl:col-end-18">
+				<figcaption class="col-start-1 col-end-19 xl:col-start-7">
 					<ProjectContent project={project} />
 				</figcaption>
 			</figure>
diff --git a/src/pages/projects.astro b/src/pages/projects.astro
index 3ab93b9..34a3499 100644
--- a/src/pages/projects.astro
+++ b/src/pages/projects.astro
@@ -20,21 +20,8 @@ const description =
 	'I’m a Frontend Developer by profession. I worked in Design, Editing, and 3D Animation. These are  projects I created over the last years.';
 ---
 
-<GridLayout
-	title={title}
-	description={description}
-	grid="fullsize"
-	class="grid"
-	backLink="/"
-	innerGrid
->
-	<PageTitle
-		grid="wide"
-		innerGrid
-		class="!col-start-2 !col-end-18 md:!col-start-3 md:!col-end-17"
-	>
-		Projects
-	</PageTitle>
+<GridLayout title={title} description={description} grid="wide" class="grid" backLink="/" innerGrid>
+	<PageTitle grid="fullsize" innerGrid class=""> Projects </PageTitle>
 
 	<article class="col-start-2 col-end-18 md:col-start-6 md:col-end-14">
 		<Intro components={mapping} />
diff --git a/src/pages/projects/[...slug].astro b/src/pages/projects/[...slug].astro
index cee2ce6..8f85d48 100644
--- a/src/pages/projects/[...slug].astro
+++ b/src/pages/projects/[...slug].astro
@@ -41,7 +41,7 @@ const title = entry.data.title;
 const description = entry.data.intro || `The detail for project "${entry.data.title}"`;
 ---
 
-<GridLayout title={title} description={description} grid="wide" innerGrid backLink="/projects/">
+<GridLayout title={title} description={description} grid="narrow" innerGrid backLink="/projects/">
 	<PageTitle slot="title">
 		{entry.data.title}
 	</PageTitle>