diff --git a/src/lib/components/ProjectCard.svelte b/src/lib/components/ProjectCard.svelte
new file mode 100644
index 0000000..e69de29
diff --git a/src/lib/components/ProjectCardList.svelte b/src/lib/components/ProjectCardList.svelte
new file mode 100644
index 0000000..0fbba99
--- /dev/null
+++ b/src/lib/components/ProjectCardList.svelte
@@ -0,0 +1,2 @@
+<script lang="ts">
+</script>
diff --git a/src/lib/components/layout/nav.svelte b/src/lib/components/layout/nav.svelte
index 7c75dcb..0123ee7 100644
--- a/src/lib/components/layout/nav.svelte
+++ b/src/lib/components/layout/nav.svelte
@@ -20,6 +20,10 @@
 		{
 			path: '/code-of-conduct',
 			name: 'Code of Conduct'
+		},
+		{
+			path: '/projects',
+			name: 'Projects'
 		}
 	];
 
@@ -93,6 +97,12 @@
 							>Code of Conduct</a
 						>
 					</li>
+					<li class="mb-6">
+						<a
+							href="/projects"
+							class=" text-lg font-normal font-body hover:text-white hover:underline">Projects</a
+						>
+					</li>
 					<li class="mb-6">
 						<a
 							href="https://github.com/Learn-Build-Teach"
diff --git a/src/routes/admin/+page.svelte b/src/routes/admin/+page.svelte
index bcf6951..4a4e2a7 100644
--- a/src/routes/admin/+page.svelte
+++ b/src/routes/admin/+page.svelte
@@ -22,7 +22,8 @@
 	<button
 		class="bg-white text-primary rounded py-2 px-4 text-lg font-bold w-full"
 		on:click={handleLoadMore}
-    >
-        Load More
-    </button>
+	>
+		Load More
+	</button>
+	<!-- Need to add here link to go to the review project page /projects/review -->
 </article>
diff --git a/src/routes/projects/+page.svelte b/src/routes/projects/+page.svelte
new file mode 100644
index 0000000..f3a064b
--- /dev/null
+++ b/src/routes/projects/+page.svelte
@@ -0,0 +1,153 @@
+<script lang="ts">
+	// Fetching projects with status "accepted" from the database, after admin review.
+</script>
+
+<article class="flex flex-col gap-y-8 align-start justify-start">
+	<h1 class="text-5xl text-center">
+		Here are the amazing projects built by the community members!
+	</h1>
+
+	<!-- Creating a button to add your own project -->
+	<a href="/projects/submit" class="mx-auto">
+		<button
+			class="rounded-md border border-white py-2 px-3 hover:font-bold hover:border-secondary transition-all ease-out duration-500"
+			><span class="text-xl font-bold mr-1">+</span>Add your own project</button
+		></a
+	>
+
+	<!-- Creating a grid to display the projects that need to be reviewd-->
+	<section class="grid max-sm:grid-cols-1 max-lg:grid-cols-2 grid-cols-3 gap-x-8 gap-y-8 my-8">
+		<div
+			class="flex flex-col mb-auto items-start justify-start hover:scale-105 border border-primary hover:border hover:border-secondary rounded-md transition-all ease-out duration-500"
+		>
+			<div class="w-full rounded-t-md block">
+				<img
+					src="https://images.unsplash.com/photo-1590283603385-17ffb3a7f29f?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c3RvY2slMjBtYXJrZXR8ZW58MHx8MHx8fDA%3D"
+					alt="Project cover"
+					class="object-cover"
+				/>
+			</div>
+			<div
+				class="py-4 px-3 flex flex-col items-start justify-start gap-y-2 bg-primary rounded-b-md w-full"
+			>
+				<h1 class="font-bold text-xl">Easy CSV</h1>
+				<p class="font-light text-slate-300">Christophe Anfry</p>
+				<p>A web application that display your csv data into a table.</p>
+				<p class="text-slate-400 italic font-bold">Typescript</p>
+				<div class="flex items-center justify-between w-full">
+					<a
+						href="https://easy-csv.netlify.app"
+						target="_blank"
+						rel="noreferrer"
+						class="hover:text-secondary text-slate-300">Project ></a
+					>
+					<a
+						href="https://github.com/Canfry/easy-csv"
+						target="_blank"
+						rel="noreferrer"
+						class="hover:text-secondary text-slate-300">Source code ></a
+					>
+				</div>
+			</div>
+		</div>
+		<div
+			class="flex flex-col mb-auto items-start justify-start hover:scale-105 border border-primary hover:border hover:border-secondary rounded-md transition-all ease-out duration-500"
+		>
+			<div class="w-full rounded-t-md block">
+				<img
+					src="https://images.unsplash.com/photo-1590283603385-17ffb3a7f29f?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c3RvY2slMjBtYXJrZXR8ZW58MHx8MHx8fDA%3D"
+					alt="Project cover"
+					class="object-cover"
+				/>
+			</div>
+			<div
+				class="py-4 px-3 flex flex-col items-start justify-start gap-y-2 bg-primary rounded-b-md w-full"
+			>
+				<h1 class="font-bold text-xl">Easy CSV</h1>
+				<p class="font-light text-slate-300">Christophe Anfry</p>
+				<p>A web application that display your csv data into a table.</p>
+				<p class="text-slate-400 italic font-bold">Typescript</p>
+				<div class="flex items-center justify-between w-full">
+					<a
+						href="https://easy-csv.netlify.app"
+						target="_blank"
+						rel="noreferrer"
+						class="hover:text-secondary text-slate-300">Project ></a
+					>
+					<a
+						href="https://github.com/Canfry/easy-csv"
+						target="_blank"
+						rel="noreferrer"
+						class="hover:text-secondary text-slate-300">Source code ></a
+					>
+				</div>
+			</div>
+		</div>
+		<div
+			class="flex flex-col mb-auto items-start justify-start hover:scale-105 border border-primary hover:border hover:border-secondary rounded-md transition-all ease-out duration-500"
+		>
+			<div class="w-full rounded-t-md block">
+				<img
+					src="https://images.unsplash.com/photo-1590283603385-17ffb3a7f29f?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c3RvY2slMjBtYXJrZXR8ZW58MHx8MHx8fDA%3D"
+					alt="Project cover"
+					class="object-cover"
+				/>
+			</div>
+			<div
+				class="py-4 px-3 flex flex-col items-start justify-start gap-y-2 bg-primary rounded-b-md w-full"
+			>
+				<h1 class="font-bold text-xl">Easy CSV</h1>
+				<p class="font-light text-slate-300">Christophe Anfry</p>
+				<p>A web application that display your csv data into a table.</p>
+				<p class="text-slate-400 italic font-bold">Typescript</p>
+				<div class="flex items-center justify-between w-full">
+					<a
+						href="https://easy-csv.netlify.app"
+						target="_blank"
+						rel="noreferrer"
+						class="hover:text-secondary text-slate-300">Project ></a
+					>
+					<a
+						href="https://github.com/Canfry/easy-csv"
+						target="_blank"
+						rel="noreferrer"
+						class="hover:text-secondary text-slate-300">Source code ></a
+					>
+				</div>
+			</div>
+		</div>
+		<div
+			class="flex flex-col mb-auto items-start justify-start hover:scale-105 border border-primary hover:border hover:border-secondary rounded-md transition-all ease-out duration-500"
+		>
+			<div class="w-full rounded-t-md block">
+				<img
+					src="https://images.unsplash.com/photo-1590283603385-17ffb3a7f29f?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c3RvY2slMjBtYXJrZXR8ZW58MHx8MHx8fDA%3D"
+					alt="Project cover"
+					class="object-cover"
+				/>
+			</div>
+			<div
+				class="py-4 px-3 flex flex-col items-start justify-start gap-y-2 bg-primary rounded-b-md w-full"
+			>
+				<h1 class="font-bold text-xl">Easy CSV</h1>
+				<p class="font-light text-slate-300">Christophe Anfry</p>
+				<p>A web application that display your csv data into a table.</p>
+				<p class="text-slate-400 italic font-bold">Typescript</p>
+				<div class="flex items-center justify-between w-full">
+					<a
+						href="https://easy-csv.netlify.app"
+						target="_blank"
+						rel="noreferrer"
+						class="hover:text-secondary text-slate-300">Project ></a
+					>
+					<a
+						href="https://github.com/Canfry/easy-csv"
+						target="_blank"
+						rel="noreferrer"
+						class="hover:text-secondary text-slate-300">Source code ></a
+					>
+				</div>
+			</div>
+		</div>
+	</section>
+</article>
diff --git a/src/routes/projects/review/+page.svelte b/src/routes/projects/review/+page.svelte
new file mode 100644
index 0000000..266a639
--- /dev/null
+++ b/src/routes/projects/review/+page.svelte
@@ -0,0 +1,162 @@
+<script lang="ts">
+	// Will be a protected route for admin only.
+	// Fetching projects with status "pending" from the database.
+	// If project rejected, it will be deleted from the database.
+</script>
+
+<h1 class="text-3xl">Projects submitted</h1>
+<section class="grid max-sm:grid-cols-1 max-lg:grid-cols-2 grid-cols-3 gap-x-8 gap-y-8 my-8">
+	<div
+		class="flex flex-col mb-auto items-start justify-start hover:scale-105 border border-primary hover:border hover:border-secondary rounded-md transition-all ease-out duration-500"
+	>
+		<div class="w-full rounded-t-md block">
+			<img
+				src="https://images.unsplash.com/photo-1590283603385-17ffb3a7f29f?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c3RvY2slMjBtYXJrZXR8ZW58MHx8MHx8fDA%3D"
+				alt="Project cover"
+				class="object-cover"
+			/>
+		</div>
+		<div
+			class="py-4 px-3 flex flex-col items-start justify-start gap-y-2 bg-primary rounded-b-md w-full"
+		>
+			<h1 class="font-bold text-xl">Easy CSV</h1>
+			<p class="font-light text-slate-300">Christophe Anfry</p>
+			<p>
+				A web application that display your csv data into a table.A web application that display
+				your csv data into a table.A web application that display your csv data into a table.A web
+				application that display your csv data into a table.A web application that display your csv
+				data into a table.
+			</p>
+			<p class="text-slate-400 italic font-bold">Typescript</p>
+			<div class="flex items-center justify-between w-full">
+				<a
+					href="https://easy-csv.netlify.app"
+					target="_blank"
+					rel="noreferrer"
+					class="hover:text-secondary text-slate-300">Project ></a
+				>
+				<a
+					href="https://github.com/Canfry/easy-csv"
+					target="_blank"
+					rel="noreferrer"
+					class="hover:text-secondary text-slate-300">Source code ></a
+				>
+			</div>
+			<div class="flex items-center justify-between w-full">
+				<button class="py-1 px-2 bg-slate-300 text-primary rounded-md mt-4">Approve</button>
+				<button class="py-1 px-2 bg-secondary text-white rounded-md mt-4">Reject</button>
+			</div>
+		</div>
+	</div>
+	<div
+		class="flex flex-col mb-auto items-start justify-start hover:scale-105 border border-primary hover:border hover:border-secondary rounded-md transition-all ease-out duration-500"
+	>
+		<div class="w-full rounded-t-md block">
+			<img
+				src="https://images.unsplash.com/photo-1590283603385-17ffb3a7f29f?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c3RvY2slMjBtYXJrZXR8ZW58MHx8MHx8fDA%3D"
+				alt="Project cover"
+				class="object-cover"
+			/>
+		</div>
+		<div
+			class="py-4 px-3 flex flex-col items-start justify-start gap-y-2 bg-primary rounded-b-md w-full"
+		>
+			<h1 class="font-bold text-xl">Easy CSV</h1>
+			<p class="font-light text-slate-300">Christophe Anfry</p>
+			<p>A web application that display your csv data into a table.</p>
+			<p class="text-slate-400 italic font-bold">Typescript</p>
+			<div class="flex items-center justify-between w-full">
+				<a
+					href="https://easy-csv.netlify.app"
+					target="_blank"
+					rel="noreferrer"
+					class="hover:text-secondary text-slate-300">Project ></a
+				>
+				<a
+					href="https://github.com/Canfry/easy-csv"
+					target="_blank"
+					rel="noreferrer"
+					class="hover:text-secondary text-slate-300">Source code ></a
+				>
+			</div>
+			<div class="flex items-center justify-between w-full">
+				<button class="py-1 px-2 bg-slate-300 text-primary rounded-md mt-4">Approve</button>
+				<button class="py-1 px-2 bg-secondary text-white rounded-md mt-4">Reject</button>
+			</div>
+		</div>
+	</div>
+	<div
+		class="flex flex-col mb-auto items-start justify-start hover:scale-105 border border-primary hover:border hover:border-secondary rounded-md transition-all ease-out duration-500"
+	>
+		<div class="w-full rounded-t-md block">
+			<img
+				src="https://images.unsplash.com/photo-1590283603385-17ffb3a7f29f?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c3RvY2slMjBtYXJrZXR8ZW58MHx8MHx8fDA%3D"
+				alt="Project cover"
+				class="object-cover"
+			/>
+		</div>
+		<div
+			class="py-4 px-3 flex flex-col items-start justify-start gap-y-2 bg-primary rounded-b-md w-full"
+		>
+			<h1 class="font-bold text-xl">Easy CSV</h1>
+			<p class="font-light text-slate-300">Christophe Anfry</p>
+			<p>A web application that display your csv data into a table.</p>
+			<p class="text-slate-400 italic font-bold">Typescript</p>
+			<div class="flex items-center justify-between w-full">
+				<a
+					href="https://easy-csv.netlify.app"
+					target="_blank"
+					rel="noreferrer"
+					class="hover:text-secondary text-slate-300">Project ></a
+				>
+				<a
+					href="https://github.com/Canfry/easy-csv"
+					target="_blank"
+					rel="noreferrer"
+					class="hover:text-secondary text-slate-300">Source code ></a
+				>
+			</div>
+			<div class="flex items-center justify-between w-full">
+				<button class="py-1 px-2 bg-slate-300 text-primary rounded-md mt-4">Approve</button>
+				<button class="py-1 px-2 bg-secondary text-white rounded-md mt-4">Reject</button>
+			</div>
+		</div>
+	</div>
+	<div
+		class="flex flex-col mb-auto items-start justify-start hover:scale-105 border border-primary hover:border hover:border-secondary rounded-md transition-all ease-out duration-500"
+	>
+		<div class="w-full rounded-t-md block">
+			<img
+				src="https://images.unsplash.com/photo-1590283603385-17ffb3a7f29f?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8c3RvY2slMjBtYXJrZXR8ZW58MHx8MHx8fDA%3D"
+				alt="Project cover"
+				class="object-cover"
+			/>
+		</div>
+		<div
+			class="py-4 px-3 flex flex-col items-start justify-start gap-y-2 bg-primary rounded-b-md w-full"
+		>
+			<h1 class="font-bold text-xl">Easy CSV</h1>
+			<p class="font-light text-slate-300">Christophe Anfry</p>
+			<p>A web application that display your csv data into a table.</p>
+			<p class="text-slate-400 italic font-bold">Typescript</p>
+			<div class="flex items-center justify-between w-full">
+				<a
+					href="https://easy-csv.netlify.app"
+					target="_blank"
+					rel="noreferrer"
+					class="hover:text-secondary text-slate-300">Project ></a
+				>
+				<a
+					href="https://github.com/Canfry/easy-csv"
+					target="_blank"
+					rel="noreferrer"
+					class="hover:text-secondary text-slate-300">Source code ></a
+				>
+			</div>
+			<div class="flex items-center justify-between w-full">
+				<button class="py-1 px-2 bg-slate-300 text-primary rounded-md mt-4">Approve</button>
+				<button class="py-1 px-2 bg-secondary text-white rounded-md mt-4">Reject</button>
+			</div>
+		</div>
+	</div>
+</section>
diff --git a/src/routes/projects/submit/+page.svelte b/src/routes/projects/submit/+page.svelte
new file mode 100644
index 0000000..4e0dece
--- /dev/null
+++ b/src/routes/projects/submit/+page.svelte
@@ -0,0 +1,73 @@
+<script lang="ts">
+	// Projects submitted here will have a default status of "pending" to be reviewed by admin
+</script>
+
+<main class="flex flex-col align-center justify-center h-screen">
+	<div class="text-left mb-6 w-[50%] mx-auto">
+		<h1 class="text-4xl font-bold leading-none mb-2">Submit your project.</h1>
+		<p class="text-slate-300">Note: will be reviewed before being published on the website.</p>
+	</div>
+	<form method="POST" class="w-[50%] mx-auto">
+		<div class="flex flex-col align-center mb-6 gap-y-1">
+			<label for="title" class="font-bold text-slate-300">Title:</label>
+			<input
+				name="title"
+				type="text"
+				class="w-[90%] py-2 px-3 rounded-md opacity-90"
+				placeholder="Title"
+			/>
+		</div>
+		<div class="flex flex-col align-start mb-6 gap-y-1">
+			<label for="cover_image" class="font-bold text-slate-300">Cover Image:</label>
+			<input name="cover_image" type="file" class="cursor-pointer" />
+		</div>
+		<div class="flex flex-col align-start mb-6 gap-y-1">
+			<label for="description" class="font-bold text-slate-300">Description:</label>
+			<textarea
+				name="description"
+				class="py-2 px-3 rounded-md opacity-90 w-[90%]"
+				placeholder="Description"
+			/>
+		</div>
+		<div class="flex flex-col align-start mb-6 gap-y-1">
+			<label for="author" class="font-bold text-slate-300">Discord username: (Optional)</label>
+			<input
+				name="author"
+				type="text"
+				class="w-[90%] py-2 px-3 rounded-md opacity-90"
+				placeholder="Discord username"
+			/>
+		</div>
+		<div class="flex flex-col align-start mb-6 gap-y-1">
+			<label for="language" class="font-bold text-slate-300">Programming language used:</label>
+			<input
+				name="language"
+				type="text"
+				class="w-[90%] py-2 px-3 rounded-md opacity-90"
+				placeholder="i.e. JavaScript, Python, etc."
+			/>
+		</div>
+		<div class="flex flex-col align-start mb-6 gap-y-1">
+			<label for="site_url" class="font-bold text-slate-300">Site URL:</label>
+			<input
+				name="site_url"
+				type="text"
+				class="w-[90%] py-2 px-3 rounded-md opacity-90"
+				placeholder="https://example.com"
+			/>
+		</div>
+		<div class="flex flex-col align-start mb-6 gap-y-1">
+			<label for="repo_url" class="font-bold text-slate-300">Repository URL:</label>
+			<input
+				name="repo_url"
+				type="text"
+				class="w-[90%] py-2 px-3 rounded-md opacity-90"
+				placeholder="https://github.com/username/myrepo"
+			/>
+		</div>
+		<button
+			class="rounded-md bg-primary text-white border border-primary hover:bg-secondary hover:font-bold mt-4 py-2 px-3 w-[40%] transition-all ease-out duration-500"
+			>Submit</button
+		>
+	</form>
+</main>
diff --git a/src/types/supabase.ts b/src/types/supabase.ts
index 00e6588..0ac6f36 100644
--- a/src/types/supabase.ts
+++ b/src/types/supabase.ts
@@ -165,3 +165,25 @@ export interface Leader {
 	teachPoints: number;
 	id: string;
 }
+
+export enum Status {
+	PENDING = "pending",
+	ACCEPTED = "accepted",
+}
+
+export interface Project {
+	id: string;
+	username: string;
+	title: string;
+	description: string;
+	cover_image: string;
+	status: Status.PENDING | Status.ACCEPTED;
+	language: string;
+	website: string;
+	repo: string;
+}
+
+
+
+
+