diff --git a/src/components/Container.tsx b/src/components/Container.tsx
index 3df46aa..59b8961 100644
--- a/src/components/Container.tsx
+++ b/src/components/Container.tsx
@@ -33,7 +33,7 @@ const Container: React.FC<{
 	const mobile = useMediaQuery("(max-width: 50rem)");
 
 	const logoContainer = useRef<HTMLButtonElement>(null);
-	const highlightCircle = useRef<HTMLSpanElement>(null);
+	const highlightCircle = useRef<HTMLButtonElement>(null);
 	const containerChild = useRef<HTMLDivElement>(null);
 	const nextBtn = useRef<HTMLButtonElement>(null);
 
@@ -138,13 +138,35 @@ const Container: React.FC<{
 		<div
 			className={css`
 				background: var(--background-colour);
-				padding: 15rem calc(100vw / 8) 8rem calc(100vw / 8);
+				padding-block-start: 15rem;
+				padding-block-end: 8rem;
+				padding-inline: calc(100vw / 8);
 				overflow-x: hidden;
 				min-height: 100vh;
 				position: relative;
 			`}>
+			<div
+				className={cx(
+					"fog",
+					css`
+						position: fixed;
+						width: 100vw;
+						left: 0;
+						bottom: 0;
+						height: 10rem;
+						background: rgb(0, 0, 0);
+						background: linear-gradient(
+							180deg,
+							rgba(0, 0, 0, 0) 0%,
+							rgba(0, 0, 0, 1) 100%
+						);
+						z-index: 1000;
+						pointer-events: none;
+					`,
+				)}
+			/>
 			{!hideNav && (
-				<button
+				<span
 					ref={logoContainer}
 					className={css`
 						position: absolute;
@@ -156,7 +178,7 @@ const Container: React.FC<{
 					`}
 					onMouseOver={() => !mobile && setShowMenu(true)}
 					onMouseOut={() => !mobile && setShowMenu(false)}>
-					<span
+					<button
 						ref={highlightCircle}
 						className={cx(
 							css`
@@ -165,7 +187,9 @@ const Container: React.FC<{
 								height: 5rem;
 								width: 5rem;
 								border-radius: 100%;
-								box-shadow: 0px 0px 50px 0px rgba(100, 100, 100, 0.65);
+								border: 0;
+								background: none;
+								box-shadow: 0 0 1rem 0 rgba(100, 100, 100, 0.5);
 								cursor: pointer;
 
 								& > svg {
@@ -174,11 +198,13 @@ const Container: React.FC<{
 									position: absolute;
 									inset: 0;
 									z-index: 1;
+									outline: 0;
 								}
 
 								&::before {
 									content: "";
 									position: absolute;
+									top: 0.5rem;
 									left: -0.1rem;
 									width: 5rem;
 									height: 5rem;
@@ -196,11 +222,13 @@ const Container: React.FC<{
 									opacity: 1;
 								}
 
-								&:hover::before {
+								&:hover::before,
+								&:focus::before {
 									width: 5.2rem;
 									height: 5.2rem;
-									top: -0.05rem;
+									top: -0.1rem;
 									left: -0.1rem;
+									outline: none;
 								}
 
 								&.highlight::before {
@@ -215,9 +243,9 @@ const Container: React.FC<{
 							viewBox="0 0 264 264"
 							onClick={() => (mobile ? setShowMenu(true) : navigate("/"))}
 						/>
-					</span>
+					</button>
 					<Menu show={showMenu} setShowMenu={setShowMenu} />
-				</button>
+				</span>
 			)}
 			{next && (
 				<button
@@ -258,7 +286,7 @@ const Container: React.FC<{
 				className={cx(
 					css`
 						width: 100%;
-						max-width: 60rem;
+						max-width: 62rem;
 						min-height: 100%;
 						margin: auto;
 
diff --git a/src/components/Menu.tsx b/src/components/Menu.tsx
index eb8af57..b4cfbd1 100644
--- a/src/components/Menu.tsx
+++ b/src/components/Menu.tsx
@@ -44,6 +44,11 @@ const menuList = css`
 	& > li {
 		margin-left: 1rem;
 	}
+
+	& :focus-within {
+		opacity: 1 !important;
+		outline: none;
+	}
 `;
 
 const mobileMenu = css`
diff --git a/src/components/Timeline.tsx b/src/components/Timeline.tsx
index 7736504..0705afd 100644
--- a/src/components/Timeline.tsx
+++ b/src/components/Timeline.tsx
@@ -20,7 +20,7 @@ const unit = css`
 	font-size: inherit;
 	text-align: inherit;
 	font-weight: inherit;
-	max-width: 400px;
+	max-width: 20rem;
 	transition: 100ms all;
 	text-decoration: none;
 	position: relative;
diff --git a/src/index.css b/src/index.css
index 38abc3f..3b5ada4 100644
--- a/src/index.css
+++ b/src/index.css
@@ -5,7 +5,7 @@
 	--card-tags-hover: rgb(25, 25, 25);
 	--primary-colour: rgb(255, 85, 85);
 	--text-colour: rgb(211, 207, 201);
-	--text-subdued: rgb(163, 163, 163);
+	--text-subdued: rgb(150, 150, 150);
 	font-weight: 500;
 	font-size: max(16px, 0.8vw);
 }
@@ -77,6 +77,9 @@ h4 {
 a {
 	color: var(--text-colour);
 	text-decoration: none;
+	font-family: Inter;
+	font-weight: 800;
+	transition: all 200ms;
 }
 
 a:hover {
diff --git a/src/pages/main/Contact.tsx b/src/pages/main/Contact.tsx
index b0d27f4..86a7958 100644
--- a/src/pages/main/Contact.tsx
+++ b/src/pages/main/Contact.tsx
@@ -16,9 +16,9 @@ type Contact = {
 };
 
 const CONTACT: Contact = {
-	Twitter: { value: "MKRhere", link: "https://twitter.com/MKRhere" },
-	GitHub: { value: "MKRhere", link: "https://github.com/MKRhere" },
-	Email: {
+	"Twitter/𝕏": { value: "MKRhere", link: "https://twitter.com/MKRhere" },
+	"GitHub": { value: "MKRhere", link: "https://github.com/MKRhere" },
+	"Email": {
 		value: "mυthυkυmαr@thεfεαthεrs.in",
 		link: "mailto:mυthυkυmαr@thεfεαthεrs.in",
 		replacer: {
@@ -27,7 +27,7 @@ const CONTACT: Contact = {
 			α: "a",
 		},
 	},
-	Phone: {
+	"Phone": {
 		value: "+9Ι Γ8Δ5 Γ9 8Δ88",
 		link: "tel:+91Γ8Δ5Γ98Δ88",
 		replacer: {
@@ -89,13 +89,28 @@ const Home: React.FC = () => {
 				className={css`
 					margin-top: auto;
 					display: flex;
+					flex-shrink: 1;
+					gap: 1rem;
 
 					ul {
 						padding: 0;
-						margin-left: 1rem;
+						display: flex;
+						flex-direction: column;
+						gap: 0.5rem;
+						max-width: 50vw;
 
 						li {
 							list-style: none;
+							min-width: 5rem;
+							max-width: 100%;
+						}
+
+						li a {
+							display: block;
+							max-width: 100%;
+							white-space: nowrap;
+							text-overflow: ellipsis;
+							overflow: hidden;
 						}
 					}
 				`}>
diff --git a/src/pages/main/Exp.tsx b/src/pages/main/Exp.tsx
index 3e21416..e29079f 100644
--- a/src/pages/main/Exp.tsx
+++ b/src/pages/main/Exp.tsx
@@ -4,19 +4,32 @@ import Container from "../../components/Container";
 
 const exp = [
 	{
+		title: "The Feathers",
+		location: "Chennai (formerly Tirunelveli and Ooty)",
+		position: "Founder",
+		year: "2011-19",
+	},
+	{
+		title: "StudioFlicks",
+		location: "Remote (Coimbatore)",
+		position: "Co-founder & Creative Head",
+		year: "2013-15",
+	},
+	{
 		title: "Vinzas",
 		location: "Chennai",
 		position: "Architectural Intern",
 		year: "2014",
 	},
 	{
-		title: "BlueCube",
+		title: "Blue Cube",
 		location: "Chennai",
 		position: "Architectural Intern",
 		year: "2015",
 	},
 	{
 		title: "OutFocus Magazine",
+		location: "Ooty",
 		position: "Editor / developer",
 		year: "2014-17",
 	},
@@ -40,14 +53,14 @@ const exp = [
 	},
 	{
 		title: "Hugo's Way",
-		location: "Remote",
+		location: "Remote (Dublin)",
 		position: "Full stack developer",
 		year: "2018-19",
 	},
 	{
 		title: "Navana Tech",
-		location: "Remote",
-		position: "Lead web & architect",
+		location: "Remote (Mumbai)",
+		position: "Lead webdev & architect",
 		year: "2021-22",
 	},
 	{
@@ -56,7 +69,7 @@ const exp = [
 		position: "Chief Maker",
 		year: "2019-present",
 	},
-];
+].reverse();
 
 const Circle: React.FC = () => (
 	<div>
@@ -67,7 +80,9 @@ const Circle: React.FC = () => (
 				background: #333333;
 				left: -50vw;
 				position: absolute;
-				top: calc(-2rem + 0.25rem / 2 - 0.5px);
+				top: calc(2rem + 0.25rem / 2);
+				/* centre it to the circle */
+				transform: translateY(-50%);
 				z-index: 0;
 			`}></div>
 		<div
@@ -77,7 +92,7 @@ const Circle: React.FC = () => (
 				background: #ffffff;
 				border-radius: 100%;
 				position: absolute;
-				top: -2rem;
+				top: 2rem;
 				left: 0;
 				z-index: 100;
 			`}></div>
@@ -96,22 +111,36 @@ const ExpUnit: React.FC<Experience> = ({ title, location, position, year }) => {
 		<div
 			className={css`
 				position: relative;
+				display: flex;
+				flex-direction: column;
+				gap: 0.6rem;
+				& * {
+					line-height: 1em;
+				}
+				& h5 {
+					color: var(--text-subdued);
+					font-weight: 400;
+					font-size: 0.9rem;
+				}
 			`}>
 			<Circle />
-			<h4>{[title, location].filter(Boolean).join(", ")}</h4>
-			<span
-				className={css`
-					color: #bdbdbd;
-				`}>
-				{position}
-			</span>
-			{" . "}
-			<span
-				className={css`
-					font-weight: 300;
-				`}>
-				{year}
-			</span>
+			<h4>{title}</h4>
+			<div>
+				<span
+					className={css`
+						color: var(--text-colour);
+					`}>
+					{position}
+				</span>
+				{" . "}
+				<span
+					className={css`
+						font-weight: 300;
+					`}>
+					{year}
+				</span>
+			</div>
+			<h5>{location}</h5>
 		</div>
 	);
 };
@@ -131,22 +160,32 @@ const age = getAge("27 May 1995");
 const Exp: React.FC = () => {
 	return (
 		<Container next="/projects">
-			<h2>I’m a {age} year old developer from Chennai, India.</h2>
+			<h2>
+				I’m a {age} year old developer from
+				<br />
+				Chennai, India.
+			</h2>
 			<p>
-				Here are some places I’ve worked at, in reverse chronological order:
+				Here are some places I’ve worked at{" "}
+				<span
+					className={css`
+						/* font-size: 0.8rem; */
+						color: var(--text-subdued);
+					`}>
+					(recent first)
+				</span>
+				:
 			</p>
 			<div
 				className={css`
-					display: flex;
-					flex-direction: row-reverse;
 					width: 100%;
-					flex-wrap: wrap-reverse;
+
+					display: grid;
+					grid-template-columns: repeat(auto-fit, 20rem);
+					gap: 1rem;
 
 					& > * {
-						flex-basis: 15rem;
-						flex-grow: 1;
-						margin-top: 4rem;
-						margin-right: 3%;
+						padding-top: 4rem;
 					}
 				`}>
 				{exp.map(unit => (