diff --git a/src/images/round-portrait.png b/src/images/round-portrait.png
new file mode 100644
index 0000000..0ea5526
Binary files /dev/null and b/src/images/round-portrait.png differ
diff --git a/src/pages/home.tsx b/src/pages/home.tsx
index 1458ee9..fbf60c8 100644
--- a/src/pages/home.tsx
+++ b/src/pages/home.tsx
@@ -1,59 +1,52 @@
 import MainTemplate from "@/templates/MainTemplate"
 import PostListing from "@/containers/PostListing"
 import { usePosts } from "@/hooks/usePosts"
+import roundedPortrait from "../images/round-portrait.png"
 import { Card, CardHeader, CardContent, CardFooter } from "@/components/ui/card"
 import { Button } from "@/components/ui/button"
 import { Link } from "react-router"
 
 const HomePage = () => {
-  const { posts } = usePosts()
-  return (
-    <MainTemplate>
-      <div className="mb-7 border border-foreground py-7 px-6 dark:bg-sidebar">
-        <h1 className="scroll-m-20 text-left text-2xl font-semibold">
-          Another software engineer with a blog
-        </h1>
-        <p className="leading-[1.7] [&:not(:first-child)]:mt-5">
-          I'm a self-taught software engineer currently working at ITV,
-          previously at the BBC. This blog is a technical scrapbook and digital
-          garden.
-        </p>
-      </div>
-      {/*
-		 <Card className="mb-8 rounded-none">
-        <CardHeader>
-          <h1 className="scroll-m-20 text-left text-2xl font-semibold">
-            Another software engineer with a blog!
-          </h1>
-        </CardHeader>
-        <CardContent>
-          <p className="leading-[1.7] [&:not(:first-child)]:mt-7">
-            I'm a self-taught software engineer currently working at ITV,
-            previously at the BBC. This blog is a technical scrapbook and
-            digital garden.
-          </p>
-        </CardContent>
-        <CardFooter>
-          <Button asChild>
-            <Link to="/about">About</Link>
-          </Button>
-        </CardFooter>
-      </Card>
-  <Button asChild>
-        <Link to="/about">About</Link>
-      </Button>
+	const { posts } = usePosts()
+	return (
+		<MainTemplate>
+			<div className="mb-7 border border-foreground py-8 px-8 dark:bg-sidebar">
+				<div className="flex flex-col items-center md:flex-row md:items-start gap-4 md:gap-8 md:flex-row-reverse">
+					{/* Image - centers on mobile, left-aligned on desktop */}
+					<div className="flex-shrink-0">
+						<img
+							src={roundedPortrait}
+							alt="Profile picture"
+							className="rounded-image w-36 h-36 md:w-38 md:h-38 object-contain"
+						/>
+					</div>
 
+					{/* Text content */}
+					<div className="text-center md:text-left flex-1">
+						<h1 className="scroll-m-20 text-2xl font-semibold">
+							Another software engineer with a blog
+						</h1>
+						<p className="leading-[1.7] mt-5">
+							I'm a self-taught software engineer currently working at ITV,
+							previously at the BBC. This blog is a technical scrapbook and
+							digital garden.
+						</p>
+					</div>
+				</div>
+			</div>
+			{/*
+		 
 
 
 		*/}
 
-      <PostListing
-        title="Recent posts"
-        posts={posts.slice(0, 5)}
-        showAllButton
-      />
-    </MainTemplate>
-  )
+			<PostListing
+				title="Recent posts"
+				posts={posts.slice(0, 5)}
+				showAllButton
+			/>
+		</MainTemplate>
+	)
 }
 
 export { HomePage }
diff --git a/src/styles/shadcn-overrides.css b/src/styles/shadcn-overrides.css
index dd8fe9d..eab1f04 100644
--- a/src/styles/shadcn-overrides.css
+++ b/src/styles/shadcn-overrides.css
@@ -43,3 +43,8 @@ img {
 	max-width: 600px;
 	min-width: 300px;
 }
+
+img.rounded-image {
+	max-width: auto;
+	min-width: auto;
+}
\ No newline at end of file