diff --git a/src/components/DeveloperCard.jsx b/src/components/DeveloperCard.jsx
new file mode 100644
index 0000000..a36a86b
--- /dev/null
+++ b/src/components/DeveloperCard.jsx
@@ -0,0 +1,19 @@
+import { FaLinkedin, FaGithub } from 'react-icons/fa';
+
+export function DeveloperCard({ name, githubLink, linkedinLink }) {
+	return (
+		<div>
+			<ul>
+				<li className="flex flex-row align-middle">
+					{name}{' '}
+					<a className="p-2" href={githubLink}>
+						<FaGithub className="hover:text-accent" />
+					</a>{' '}
+					<a className="p-2" href={linkedinLink}>
+						<FaLinkedin className="hover:text-accent" />
+					</a>{' '}
+				</li>
+			</ul>
+		</div>
+	);
+}
diff --git a/src/components/ListItem.jsx b/src/components/ListItem.jsx
index b834453..729d761 100644
--- a/src/components/ListItem.jsx
+++ b/src/components/ListItem.jsx
@@ -52,7 +52,7 @@ export function ListItem({
 						checked={isChecked}
 						onChange={onCheck}
 						disabled={isChecked}
-						className="form-checkbox h-4 w-4 lg:h-5 lg:w-5"
+						className="form-checkbox h-4 w-4 lg:h-5 lg:w-5 cursor-pointer"
 					/>
 					<div className="flex items-center space-x-1">
 						<FaCartShopping className="hidden md:block md:ml-2" />
@@ -61,7 +61,7 @@ export function ListItem({
 				</label>
 				<div className="flex items-center space-x-2">
 					<span
-						className={`px-2 p-1 text-xs font-bold rounded-lg uppercase ${categoryColor[category]}`}
+						className={`px-1.5 py-[3px] text-xs font-light rounded-md uppercase ${categoryColor[category]}`}
 						style={{ color: categoryColor[category] }}
 					>
 						{category}
diff --git a/src/views/About.jsx b/src/views/About.jsx
index be2e9bb..14fe4d1 100644
--- a/src/views/About.jsx
+++ b/src/views/About.jsx
@@ -1,17 +1,115 @@
+import { FaGithub, FaShareAlt, FaHome } from 'react-icons/fa';
+import { DeveloperCard } from '../components/DeveloperCard';
+import { NavLink } from 'react-router-dom';
+
 export function About() {
 	return (
-		<>
-			<h2>This is the About page</h2>
-			<p>We want to add following info here:</p>
-			<ul>
-				<li>introduction to the app - what does it do</li>
-				<li>how to use the app</li>
-				<li>info/link to collab lab</li>
-				<li>github link to the app repo</li>
-				<li>
-					info/github links to dev team - <i>optional</i>
-				</li>
-			</ul>
-		</>
+		<div className="flex flex-col h-dvh">
+			<section className="mb-4 text-center">
+				<h1 className="subheading">About this application</h1>
+				<p>
+					Shop&apos;n Go is a smart shopping list application that enables users
+					to level up their shopping experience. Create specialized lists, share
+					them with your friends, and keep track of your shopping with ease!
+				</p>
+			</section>
+			<section className="m-4">
+				<h3 className="subheading">How does it work?</h3>
+				<ol className="list-decimal pl-5">
+					<li>Sign in with your Gmail account</li>
+					<li>
+						Create a List (if you don&apos;t already have one), click on an
+						existing one or manage your lists in{' '}
+						<NavLink
+							to="/"
+							className="inline-flex items-center font-semibold hover:text-accent hover:underline underline-offset-2 decoration-[2px]"
+						>
+							<FaHome className="mr-1" /> Home
+						</NavLink>
+					</li>
+					<li>
+						Inside your list, add a new item and select how soon you will need
+						to buy it
+					</li>
+					<li>
+						Once you have bought your item, check it off and wait to be reminded
+						when you need it again
+					</li>
+					<li>
+						Share your list with friends, family, colleagues or whomever you
+						wish. Just click on{' '}
+						<NavLink
+							to="/manage-list"
+							className="inline-flex items-center font-semibold hover:text-accent hover:underline underline-offset-2 decoration-[2px]"
+						>
+							{' '}
+							<FaShareAlt className="mr-1" /> Share
+						</NavLink>
+					</li>
+				</ol>
+			</section>
+			<section className="m-5 text-center">
+				<h3 className="subheading mb-4">This application was developed by:</h3>
+				<section className="flex justify-items-center grid grid-cols-1 sm:grid-cols-2 gap-4 mt-2 max-w-4xl">
+					<DeveloperCard
+						name="Rebeca Taboada"
+						githubLink={'https://github.com/GrannyYetta'}
+						linkedinLink={'https://www.linkedin.com/in/rebecataboada/'}
+					/>
+					<DeveloperCard
+						name="Didem Aydin Cakir"
+						githubLink={'https://github.com/didemydn'}
+						linkedinLink={'https://linkedin.com/in/didem-aydin-cakir'}
+					/>
+
+					<DeveloperCard
+						name="Eva Langerova"
+						githubLink={'https://github.com/eva-lng'}
+						linkedinLink={'https://linkedin.com/in/eva-langerova-61059027a'}
+					/>
+					<DeveloperCard
+						name="Tataw Clarkson"
+						githubLink={'https://github.com/tataw-cl'}
+						linkedinLink={'https://www.linkedin.com/in/tataw-clarkson-tech/'}
+					/>
+				</section>
+				<p className="m-4">
+					Get in touch with us, we&apos;d love to hear from you!
+				</p>
+				<p className="m-2 inline-flex items-center justify-center">
+					You can find the repository to this application on GitHub{' '}
+					<a href="https://github.com/the-collab-lab/tcl-78-smart-shopping-list">
+						<FaGithub className="ml-1 hover:text-accent" />
+					</a>
+				</p>
+			</section>
+			<section className="m-5 text-center">
+				<p className="items-center justify-center">
+					Special thanks to our Mentors{' '}
+					<a
+						className="font-semibold hover:text-accent hover:underline underline-offset-2 decoration-[2px]"
+						href="https://www.linkedin.com/in/chiamakaumeh/"
+					>
+						Chiamaka Umeh
+					</a>{' '}
+					and{' '}
+					<a
+						className="font-semibold hover:text-accent hover:underline underline-offset-2 decoration-[2px]"
+						href="https://www.linkedin.com/in/viviana-yanez/"
+					>
+						Viviana Yanez{' '}
+					</a>
+					and{' '}
+					<a
+						className="font-semibold hover:text-accent hover:underline underline-offset-2 decoration-[2px]"
+						href="https://the-collab-lab.codes/"
+					>
+						The Collab Lab&apos;s
+					</a>{' '}
+					Program. Check out their website to learn more about their awesome
+					work!
+				</p>
+			</section>
+		</div>
 	);
 }
diff --git a/src/views/Layout.jsx b/src/views/Layout.jsx
index cbd5b6e..7fb7d84 100644
--- a/src/views/Layout.jsx
+++ b/src/views/Layout.jsx
@@ -13,7 +13,7 @@ export function Layout() {
 	return (
 		<>
 			<div className="flex flex-col h-dvh">
-				<header className="mb-4">
+				<header className="lg:mb-4">
 					<div className="container mx-auto flex justify-between items-center p-2">
 						<Link to="/">
 							<h1 className="logo">
@@ -36,7 +36,7 @@ export function Layout() {
 				<main className="mx-auto w-full max-w-[600px] p-5 pb-16 md:pb-20">
 					<Outlet />
 				</main>
-				<nav className="bottom-0 fixed w-full p-2 md:py-0">
+				<nav className="bottom-0 fixed w-full p-2 md:py-0 bg-base dark:bg-secondary">
 					<div className="container mx-auto flex flex-row justify-evenly">
 						<NavLink to="/" className="nav-link">
 							<FaHome />