diff --git a/components/submit-button.js b/components/submit-button.js
index 5f33601..ae0903c 100644
--- a/components/submit-button.js
+++ b/components/submit-button.js
@@ -3,9 +3,9 @@ import styled from "styled-components";
 const StyledInput = styled.input`
 	border: 1px solid ${(props) => props.theme.colors.primary};
 	border-radius: 2px;
-	margin: 10px 0;
 	padding: 10px;
 	display: block;
+	float: right;
 `;
 
 const SubmitButton = styled(StyledInput)`
diff --git a/components/thumbnail-image.js b/components/thumbnail-image.js
new file mode 100644
index 0000000..f4620fe
--- /dev/null
+++ b/components/thumbnail-image.js
@@ -0,0 +1,14 @@
+import styled from "styled-components";
+
+const ThumbnailImage = styled.img`
+	display: block;
+	margin-bottom: 10px;
+
+	width: 100%;
+	height: 300px;
+	object-fit: contain;
+
+	image-rendering: pixelated;
+`;
+
+export default ThumbnailImage;
diff --git a/pages/projects.js b/pages/projects.js
index f3eabfe..a26fbf5 100644
--- a/pages/projects.js
+++ b/pages/projects.js
@@ -3,16 +3,20 @@ import Router from "next/router";
 import styled from "styled-components";
 import { useEffect, useState } from "react";
 import { PageTitle } from "../lib/common-style";
-import { makeApiRequest } from "../lib/api";
+import { makeApiRequest, API_BASE } from "../lib/api";
 import SubmitButton from "../components/submit-button";
+import ThumbnailImage from "../components/thumbnail-image";
 
 const ProjectsContainer = styled.div`
 	display: grid;
-	grid-template-columns: repeat(3, 1fr);
+	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 	gap: 10px;
 `;
 
 const ProjectCard = styled.div`
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
 	padding: 12px;
 	font-size: 1.1em;
 
@@ -20,20 +24,28 @@ const ProjectCard = styled.div`
 	border-radius: 8px;
 `;
 
+const ProjectDetails = styled.div`
+	width: 50%;
+	float: left;
+	margin-top: auto;
+`;
+
 class MembershipStatus {
-	static Joining = new MembershipStatus("Joining...");
-	static Joined = new MembershipStatus("Joined");
-	static Leaving = new MembershipStatus("Leaving...");
-	static NotJoined = new MembershipStatus("Not Joined");
-	static Unknown = new MembershipStatus("Unknown");
+	static Joining = new MembershipStatus("Joining...", "🔃");
+	static Joined = new MembershipStatus("Joined", "✅");
+	static Leaving = new MembershipStatus("Leaving...", "🔃");
+	static NotJoined = new MembershipStatus("Not Joined", "❌");
+	static Unknown = new MembershipStatus("Unknown", "❔");
 
-	constructor(text) {
+	constructor(text, emoji) {
 		this.text = text;
+		this.emoji = emoji;
 	}
 }
 
 const ProjectPreview = ({ project }) => {
 
+
 	const initialMembershipStatus = () => {
 		if (typeof project.joined === "boolean") {
 			return project.joined ? MembershipStatus.Joined : MembershipStatus.NotJoined;
@@ -80,27 +92,41 @@ const ProjectPreview = ({ project }) => {
 		}
 	}
 
+	const [removeImage, setRemoveImage] = useState(false);
+
 	return (
 		<ProjectCard>
 			<h3>{project.name || "Unnamed Project"}</h3>
-			{typeof membershipStatus === "object" && (
-				<p>Membership Status: {`${membershipStatus.text}`}</p>
-			)}
-			{typeof project.members === "number" && (
-				<p>{project.members} members</p>
-			)}
-			{typeof membershipStatus !== MembershipStatus.Unknown && (
-				<form onSubmit={membershipStatus === MembershipStatus.Joined ? leaveProject : joinProject}>
-					<SubmitButton
-						type="submit"
-						value={
-							membershipStatus === MembershipStatus.Joined ? "Leave" :
-							membershipStatus === MembershipStatus.NotJoined ? "Join" :
-							"Error"
-						}
-					/>
-				</form>
+			{!removeImage && (
+				<ThumbnailImage
+					src={`${API_BASE}/y22/projects/${project.uuid}/bitmap`}
+					onError={() => setRemoveImage(true)}
+				/>
 			)}
+			<div>
+				<ProjectDetails>
+					{typeof membershipStatus !== MembershipStatus.Unknown && (
+						<p>Joined: {`${membershipStatus.emoji}`}</p>
+					)}
+					{typeof project.members === "number" && (
+						<p>{project.members} members</p>
+					)}
+				</ProjectDetails>
+				{typeof membershipStatus !== MembershipStatus.Unknown && (
+					<form onSubmit={membershipStatus === MembershipStatus.Joined ? leaveProject : joinProject}>
+						<SubmitButton
+							type="submit"
+							value={
+								membershipStatus === MembershipStatus.Joined ? "➖ Leave" :
+								membershipStatus === MembershipStatus.Joining ? "➕ Joining..." :
+								membershipStatus === MembershipStatus.NotJoined ? "➕ Join" :
+								membershipStatus === MembershipStatus.Leaving ? "➖ Leaving..." :
+								"Error"
+							}
+						/>
+					</form>
+				)}
+			</div>
 		</ProjectCard>
 	);
 };