diff --git a/app/components/external-link.tsx b/app/components/external-link.tsx
index 3be39ea..b6c9010 100644
--- a/app/components/external-link.tsx
+++ b/app/components/external-link.tsx
@@ -1,20 +1,26 @@
+import { cn } from '#app/utils/misc.js'
+
 interface ExternalLinkProps
 	extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
 	href: string
 	children: React.ReactNode
 	className?: string
+	applyBaseClassName?: boolean
 }
 
+const baseClassName =
+	'ring-offset-background transition-colors outline-none focus-visible:ring-2 focus-within:ring-2 ring-ring ring-offset-2'
 export default function ExternalLink({
 	href,
 	children,
 	className = 'underlined text-foreground/70',
+	applyBaseClassName = true,
 	...props
 }: ExternalLinkProps) {
 	return (
 		<a
 			href={href}
-			className={className}
+			className={cn(applyBaseClassName && baseClassName, className)}
 			target="_blank"
 			rel="noreferrer"
 			{...props}
diff --git a/app/components/header.tsx b/app/components/header.tsx
index a2d6528..796853b 100644
--- a/app/components/header.tsx
+++ b/app/components/header.tsx
@@ -170,7 +170,7 @@ export function Header({
 				>
 					<div className="flex items-center justify-between gap-4 md:gap-8">
 						<a
-							className="absolute -top-96 left-0 z-50 m-3 bg-primary p-3 opacity-0 transition-opacity duration-200 ease-in-out focus:top-0 focus:opacity-100"
+							className="absolute -top-96 left-0 z-50 m-3 bg-primary p-3 opacity-0 outline-none ring-ring ring-offset-2 ring-offset-background transition-all duration-200 ease-in-out focus-within:ring-2 focus:top-0 focus:opacity-100 focus-visible:ring-2"
 							// eslint-disable-next-line remix-react-routes/use-link-for-routes -- Needed because Link doesn't work here
 							href="#main"
 						>
@@ -178,7 +178,7 @@ export function Header({
 						</a>
 						<Link
 							to="/"
-							className="group z-10 flex items-center gap-4 overflow-clip"
+							className="group z-10 flex items-center gap-4 overflow-clip outline-none ring-ring ring-offset-2 ring-offset-background transition-colors focus-within:ring-2 focus-visible:ring-2"
 						>
 							<Logo className="z-10">
 								<LogoCircle />
@@ -186,7 +186,7 @@ export function Header({
 								<LogoImage />
 							</Logo>
 							<motion.span
-								className="underlined text-h2"
+								className="underlined xs:text-h2 text-h3"
 								style={{
 									opacity: textOpacity,
 									x: textX,
@@ -198,7 +198,10 @@ export function Header({
 						</Link>
 						<ul className="hidden items-center gap-4 md:flex md:gap-8">
 							<li>
-								<ExternalLink href="https://blog.arpitdalal.dev">
+								<ExternalLink
+									href="https://blog.arpitdalal.dev"
+									applyBaseClassName={false}
+								>
 									Blog
 								</ExternalLink>
 							</li>
diff --git a/app/components/hero-highlight.tsx b/app/components/hero-highlight.tsx
index 66c9da9..61fe942 100644
--- a/app/components/hero-highlight.tsx
+++ b/app/components/hero-highlight.tsx
@@ -27,7 +27,7 @@ export const HeroHighlight = ({
 	}
 
 	return (
-		<div
+		<section
 			className={cn(
 				'group relative flex w-full items-center justify-center py-20',
 				containerClassName,
@@ -65,7 +65,7 @@ export const HeroHighlight = ({
 			<div className={cn('relative z-20', className)}>
 				<>{children}</>
 			</div>
-		</div>
+		</section>
 	)
 }
 
diff --git a/app/components/ui/badge.tsx b/app/components/ui/badge.tsx
new file mode 100644
index 0000000..11a49f3
--- /dev/null
+++ b/app/components/ui/badge.tsx
@@ -0,0 +1,36 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+import * as React from 'react'
+
+import { cn } from '#app/utils/misc.tsx'
+
+const badgeVariants = cva(
+	'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+	{
+		variants: {
+			variant: {
+				default:
+					'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
+				secondary:
+					'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+				destructive:
+					'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
+				outline: 'text-foreground',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+		},
+	},
+)
+
+export interface BadgeProps
+	extends React.HTMLAttributes<HTMLDivElement>,
+		VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+	return (
+		<div className={cn(badgeVariants({ variant }), className)} {...props} />
+	)
+}
+
+export { Badge, badgeVariants }
diff --git a/app/components/ui/icons/name.d.ts b/app/components/ui/icons/name.d.ts
index 3d61ba0..c091fc0 100644
--- a/app/components/ui/icons/name.d.ts
+++ b/app/components/ui/icons/name.d.ts
@@ -2,6 +2,8 @@
 
 export type IconName =
 	| 'arrow-left-outline'
+	| 'arrow-up-outline'
+	| 'arrow-up-right-outline'
 	| 'brand-github-outline'
 	| 'brand-linkedin-outline'
 	| 'brand-x-outline'
diff --git a/app/components/ui/icons/sprite.svg b/app/components/ui/icons/sprite.svg
index 94a437e..83c8bb2 100644
--- a/app/components/ui/icons/sprite.svg
+++ b/app/components/ui/icons/sprite.svg
@@ -7,6 +7,15 @@
   <path d="M5 12l6 6" ></path>
   <path d="M5 12l6 -6" ></path>
 </symbol>
+<symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" id="arrow-up-outline">
+  <path d="M12 5l0 14" ></path>
+  <path d="M18 11l-6 -6" ></path>
+  <path d="M6 11l6 -6" ></path>
+</symbol>
+<symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" id="arrow-up-right-outline">
+  <path d="M17 7l-10 10" ></path>
+  <path d="M8 7l9 0l0 9" ></path>
+</symbol>
 <symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" id="brand-github-outline">
   <path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" ></path>
 </symbol>
diff --git a/app/components/work-experience.tsx b/app/components/work-experience.tsx
new file mode 100644
index 0000000..35045f3
--- /dev/null
+++ b/app/components/work-experience.tsx
@@ -0,0 +1,103 @@
+import ExternalLink from '#app/components/external-link.js'
+import { Badge } from '#app/components/ui/badge.js'
+import { Icon } from '#app/components/ui/icon.js'
+
+export type WorkExperienceCardProps = {
+	title: string
+	previousTitles?: string[]
+	link: string
+	company: string
+	location: string
+	description: string
+	startDate: string
+	endDate: string
+	technologies: string[]
+}
+export function WorkExperienceCard({
+	title,
+	previousTitles,
+	link,
+	company,
+	location,
+	description,
+	startDate,
+	endDate,
+	technologies,
+}: WorkExperienceCardProps) {
+	return (
+		<li>
+			<article className="group relative grid py-8 transition-all sm:grid-cols-8 sm:gap-8 md:gap-4 lg:hover:!opacity-100 lg:group-hover/ol:opacity-50">
+				<div
+					className="absolute -inset-x-4 -inset-y-4 z-0 hidden rounded-md transition motion-reduce:transition-none lg:-inset-x-6 lg:block lg:group-hover:bg-accent/60 lg:group-hover:shadow-[inset_0_1px_0_0_rgba(148,163,184,0.1)] lg:group-hover:drop-shadow-lg"
+					aria-hidden
+				/>
+				<div
+					className="absolute inset-0 mr-4 hidden grid-cols-8 sm:grid"
+					aria-hidden
+				>
+					<div className="col-span-2 border-r-2" />
+					<div className="relative">
+						<div className="absolute -left-[9px] top-10 size-4 rounded-full bg-primary" />
+					</div>
+				</div>
+				<header
+					className="z-10 mb-2 mt-1 font-semibold uppercase tracking-wide text-foreground/70 sm:col-span-2 sm:pr-3 sm:text-right"
+					aria-label={`${startDate} ${endDate.toLowerCase() === 'present' ? 'till' : 'to'} ${endDate}`}
+				>
+					<time>
+						{startDate} - {endDate}
+					</time>
+				</header>
+				<div className="z-10 sm:col-span-6 sm:pl-3">
+					<h3 className="font-medium">
+						<ExternalLink
+							href={link}
+							className="group/link inline-flex items-baseline font-medium leading-tight"
+							aria-label={`${title} at ${company} (opens in a new tab)`}
+						>
+							<span
+								className="absolute -inset-x-4 -inset-y-2.5 hidden rounded md:-inset-x-6 md:-inset-y-4 lg:block"
+								aria-hidden
+							></span>
+							<span>
+								{title} ·{' '}
+								<span className="inline-block">
+									{company}
+									<Icon
+										name="arrow-up-right-outline"
+										className="ml-1 translate-y-px transition-transform group-hover/link:-translate-y-1 group-hover/link:translate-x-1 group-focus-visible/link:-translate-y-1 group-focus-visible/link:translate-x-1 motion-reduce:transition-none"
+										aria-hidden
+									/>
+								</span>
+							</span>
+						</ExternalLink>
+					</h3>
+					{previousTitles && previousTitles.length > 0 && (
+						<ol aria-label="Previous titles">
+							{previousTitles.map(previousTitle => (
+								<li key={previousTitle} className="text-sm text-foreground/90">
+									<Icon
+										name="arrow-up-outline"
+										arial-label={`Previous title: ${previousTitle}`}
+									>
+										{previousTitle}
+									</Icon>
+								</li>
+							))}
+						</ol>
+					)}
+					<p className="mt-1 text-foreground/70">{location}</p>
+					<p className="mt-2 leading-normal">{description}</p>
+					<ul
+						className="mt-4 flex flex-wrap space-x-2"
+						aria-label="Technologies used"
+					>
+						{technologies.map(technology => (
+							<Badge key={technology}>{technology}</Badge>
+						))}
+					</ul>
+				</div>
+			</article>
+		</li>
+	)
+}
diff --git a/app/root.tsx b/app/root.tsx
index 54b8e10..81350ef 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -17,6 +17,7 @@ import {
 import { withSentry } from '@sentry/remix'
 import { ClientOnly } from 'remix-utils/client-only'
 import { HoneypotProvider } from 'remix-utils/honeypot/react'
+import ExternalLink from '#app/components/external-link.js'
 import { Header, ClientHeader } from '#app/components/header.tsx'
 import {
 	Logo,
@@ -190,7 +191,10 @@ function Footer() {
 	return (
 		<footer className="border-t border-foreground/40">
 			<div className="container flex flex-wrap justify-between gap-10 py-5">
-				<Link to="/" className="group z-10 flex items-center gap-4">
+				<Link
+					to="/"
+					className="group z-10 flex items-center gap-4 outline-none ring-ring ring-offset-2 ring-offset-background transition-colors focus-within:ring-2 focus-visible:ring-2"
+				>
 					<Logo>
 						<LogoCircle />
 						<LogoSpinner />
@@ -209,12 +213,12 @@ function Footer() {
 							</Link>
 						</li>
 						<li>
-							<a
-								className="underlined text-foreground/70"
+							<ExternalLink
 								href="https://blog.arpitdalal.dev"
+								applyBaseClassName={false}
 							>
 								Blog
-							</a>
+							</ExternalLink>
 						</li>
 						{Object.entries(headerAndFooterCommonLinks).map(([key, value]) => (
 							<li key={key}>
diff --git a/app/routes/_marketing+/__data.ts b/app/routes/_marketing+/__data.ts
new file mode 100644
index 0000000..5ff92f6
--- /dev/null
+++ b/app/routes/_marketing+/__data.ts
@@ -0,0 +1,102 @@
+import { type IconName } from '#app/components/ui/icon'
+import { type WorkExperienceCardProps } from '#app/components/work-experience.js'
+
+type SocialLink = {
+	name: string
+	href: string
+	icon: IconName
+}
+export const socialLinks = [
+	{
+		name: 'Twitter',
+		href: 'https://arpit.im/x',
+		icon: 'brand-x-outline',
+	},
+	{
+		name: 'GitHub',
+		href: 'https://arpit.im/gh',
+		icon: 'brand-github-outline',
+	},
+	{
+		name: 'Youtube',
+		href: 'https://arpit.im/yt',
+		icon: 'brand-youtube-outline',
+	},
+	{
+		name: 'LinkedIn',
+		href: 'https://arpit.im/in',
+		icon: 'brand-linkedin-outline',
+	},
+] satisfies SocialLink[]
+
+export const workExperience = [
+	{
+		title: 'Web Developer Product Specialist',
+		link: 'https://points.com',
+		company: 'Points',
+		location: 'ON, Canada',
+		description:
+			'Develop production-ready storefronts for millions of users, collaborating with multiple stakeholders to formulate comprehensive plans for product development, testing, and launch.',
+		startDate: 'Aug 2021',
+		endDate: 'Present',
+		technologies: ['React', 'JavaScript', 'Typescript', 'Node.js', 'PHP'],
+	},
+	{
+		title: 'Web Developer',
+		link: 'https://reddingdesigns.com',
+		company: 'Redding Designs',
+		location: 'ON, Canada',
+		description:
+			'Work collaboratively with clients and in-house teams to provide fast, secure, responsive and client-acclaimed full-stack web applications for user-optimized experiences.',
+		startDate: 'Aug 2020',
+		endDate: 'Jul 2021',
+		technologies: [
+			'React',
+			'Typescript',
+			'Bootstrap',
+			'Node.js',
+			'PHP',
+			'WordPress',
+		],
+	},
+	{
+		title: 'Full Stack Web Developer',
+		link: 'https://revolution.ca',
+		company: 'Revolution Media',
+		location: 'PE, Canada',
+		description:
+			'Create robust full-stack web solutions tailored to client needs, leveraging the most suitable technology stack for optimal performance and accessibility.',
+		startDate: 'Jul 2019',
+		endDate: 'Apr 2020',
+		technologies: [
+			'React',
+			'Typescript',
+			'Tailwind CSS',
+			'Node.js',
+			'PHP',
+			'WordPress',
+		],
+	},
+	{
+		title: 'Full Stack Developer',
+		link: 'https://bigsurge.ca/',
+		company: 'Big Surge',
+		location: 'PE, Canada',
+		description:
+			'Collaborate within a dynamic team, contributing to multiple codebases in a fast-paced startup. Utilize React, Next.js, Redux, and TypeScript to craft highly responsive user interfaces.',
+		startDate: 'Feb 2019',
+		endDate: 'Jun 2019',
+		technologies: ['React', 'Next.js', 'Typescript', 'Node.js'],
+	},
+	{
+		title: 'Junior Developer',
+		link: 'https://www.linkedin.com/company/auberon-canada-inc/',
+		company: 'Auberon',
+		location: 'Remote, Canada',
+		description:
+			'Gained valuable experience and proficiency in HTML, CSS, React, JavaScript, and Node.js, contributing actively to projects and accelerating learning curve.',
+		startDate: 'Feb 2017',
+		endDate: 'May 2018',
+		technologies: ['JavaScript', 'Node.js', 'React', 'HTML', 'CSS'],
+	},
+] satisfies WorkExperienceCardProps[]
diff --git a/app/routes/_marketing+/index.tsx b/app/routes/_marketing+/index.tsx
index f086812..0c95599 100644
--- a/app/routes/_marketing+/index.tsx
+++ b/app/routes/_marketing+/index.tsx
@@ -1,11 +1,10 @@
-import { type MetaFunction } from '@remix-run/node'
 import { Link } from '@remix-run/react'
 import ExternalLink from '#app/components/external-link.tsx'
 import { HeroHighlight } from '#app/components/hero-highlight.js'
 import { Button } from '#app/components/ui/button.tsx'
 import { Icon } from '#app/components/ui/icon.tsx'
-
-export const meta: MetaFunction = () => [{ title: 'Epic Notes' }]
+import { WorkExperienceCard } from '#app/components/work-experience.js'
+import { socialLinks, workExperience } from '#app/routes/_marketing+/__data.js'
 
 export default function Index() {
 	return (
@@ -21,12 +20,14 @@ export default function Index() {
 							<span className="first-letter:text-primary">Dalal</span>
 						</span>
 					</h1>
-					<p className="delay-400 max-w-[60ch] text-center text-lg motion-safe:animate-reveal-up sm:text-xl">
-						I'm a software engineer and a full-stack developer living in the
-						Greater Toronto Area. I have a passion for building web applications
-						and have a strong background in front-end development.
+					<p className="max-w-[60ch] px-8 text-center text-lg motion-safe:animate-reveal-up sm:text-xl">
+						I'm a <HighlightUnderline>software engineer</HighlightUnderline> and
+						a <HighlightUnderline>full-stack developer</HighlightUnderline>{' '}
+						living in the Greater Toronto Area. I have a passion for building
+						web applications and have a strong background in{' '}
+						<HighlightUnderline>front-end development</HighlightUnderline>.
 					</p>
-					<div className="flex gap-5 delay-700 motion-safe:animate-reveal-up">
+					<div className="flex gap-5 motion-safe:animate-reveal-up">
 						<Button variant="outline" asChild>
 							<Link to="contact">Contact me</Link>
 						</Button>
@@ -42,50 +43,41 @@ export default function Index() {
 							</Link>
 						</Button>
 					</div>
-					<div className="mt-2 flex gap-5 delay-1000 motion-safe:animate-reveal-up">
-						<Button
-							variant="outline"
-							size="icon"
-							className="rounded-full"
-							asChild
-						>
-							<ExternalLink href="https://arpit.im/x" aria-label="Twitter">
-								<Icon name="brand-x-outline" className="size-4" />
-							</ExternalLink>
-						</Button>
-						<Button
-							variant="outline"
-							size="icon"
-							className="rounded-full"
-							asChild
-						>
-							<ExternalLink href="https://arpit.im/gh" aria-label="GitHub">
-								<Icon name="brand-github-outline" className="size-4" />
-							</ExternalLink>
-						</Button>
-						<Button
-							variant="outline"
-							size="icon"
-							className="rounded-full"
-							asChild
-						>
-							<ExternalLink href="https://arpit.im/yt" aria-label="Youtube">
-								<Icon name="brand-youtube-outline" className="size-4" />
-							</ExternalLink>
-						</Button>
-						<Button
-							variant="outline"
-							size="icon"
-							className="rounded-full"
-							asChild
-						>
-							<ExternalLink href="https://arpit.im/in" aria-label="LinkedIn">
-								<Icon name="brand-linkedin-outline" className="size-4" />
-							</ExternalLink>
-						</Button>
+					<div className="mt-2 flex gap-5 motion-safe:animate-reveal-up">
+						{socialLinks.map(({ href, name, icon }) => (
+							<Button
+								key={href}
+								variant="outline"
+								size="icon"
+								className="rounded-full"
+								asChild
+							>
+								<ExternalLink href={href} aria-label={name}>
+									<Icon name={icon} className="size-4" />
+								</ExternalLink>
+							</Button>
+						))}
 					</div>
 				</div>
 			</HeroHighlight>
+			<section className="container relative py-12" id="work">
+				<h2>
+					<HighlightUnderline>Work Experience</HighlightUnderline>
+				</h2>
+				<ol className="group/ol mt-8">
+					{workExperience.map(props => (
+						<WorkExperienceCard key={props.title} {...props} />
+					))}
+				</ol>
+			</section>
 		</>
 	)
 }
+
+function HighlightUnderline({ children }: { children: React.ReactNode }) {
+	return (
+		<span className="underline decoration-primary decoration-wavy">
+			{children}
+		</span>
+	)
+}
diff --git a/app/styles/tailwind.css b/app/styles/tailwind.css
index a8fcee4..0868755 100644
--- a/app/styles/tailwind.css
+++ b/app/styles/tailwind.css
@@ -51,6 +51,23 @@
   }
 }
 
+@layer base {
+  h1 {
+		@apply text-3xl font-bold lg:text-4xl;
+	}
+
+	h2 {
+		@apply text-2xl font-bold lg:text-3xl;
+	}
+
+	h3 {
+		@apply text-xl lg:text-2xl;
+	}
+
+	a {
+		@apply transition-colors;
+	}
+}
 
 @layer utilities {
 	.underlined {
@@ -60,7 +77,7 @@
 	}
 
   .active.underlined {
-    color: currentColor;
+    color: hsl(var(--primary));
   }
 
 	.underlined:focus {
@@ -84,7 +101,7 @@
 	.underlined:hover:after,
 	.underlined:focus:after,
 	.active.underlined:after {
-		background-color: currentColor;
+		background-color: hsl(var(--primary));
 		transform: scaleX(1);
 	}
 
diff --git a/other/svg-icons/arrow-up-outline.svg b/other/svg-icons/arrow-up-outline.svg
new file mode 100644
index 0000000..47df09e
--- /dev/null
+++ b/other/svg-icons/arrow-up-outline.svg
@@ -0,0 +1,26 @@
+<!-- Downloaded from tabler-icons -->
+<!-- License https://github.com/tabler/tabler-icons/blob/main/LICENSE -->
+<!-- https://github.com/tabler/tabler-icons/blob/main/icons/outline/arrow-up.svg -->
+<!-- tabler-icons -->
+<!-- https://github.com/tabler/tabler-icons/blob/main/LICENSE -->
+<!--
+tags: [top, point]
+category: Arrows
+version: "1.0"
+unicode: "ea25"
+-->
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M12 5l0 14" />
+  <path d="M18 11l-6 -6" />
+  <path d="M6 11l6 -6" />
+</svg>
diff --git a/other/svg-icons/arrow-up-right-outline.svg b/other/svg-icons/arrow-up-right-outline.svg
new file mode 100644
index 0000000..fc627c4
--- /dev/null
+++ b/other/svg-icons/arrow-up-right-outline.svg
@@ -0,0 +1,25 @@
+<!-- Downloaded from tabler-icons -->
+<!-- License https://github.com/tabler/tabler-icons/blob/main/LICENSE -->
+<!-- https://github.com/tabler/tabler-icons/blob/main/icons/outline/arrow-up-right.svg -->
+<!-- tabler-icons -->
+<!-- https://github.com/tabler/tabler-icons/blob/main/LICENSE -->
+<!--
+tags: [top, corner, point]
+category: Arrows
+version: "1.0"
+unicode: "ea24"
+-->
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M17 7l-10 10" />
+  <path d="M8 7l9 0l0 9" />
+</svg>