diff --git a/media/images/project_inzight.png b/media/images/project_inzight.png
new file mode 100644
index 0000000..b399406
Binary files /dev/null and b/media/images/project_inzight.png differ
diff --git a/media/images/project_matau.png b/media/images/project_matau.png
new file mode 100644
index 0000000..e7cbdb7
Binary files /dev/null and b/media/images/project_matau.png differ
diff --git a/payload-types.ts b/payload-types.ts
index 08585cc..fbe7b7f 100644
--- a/payload-types.ts
+++ b/payload-types.ts
@@ -159,6 +159,7 @@ export interface Project {
    * Show this project on the homepage.
    */
   featured?: boolean | null;
+  banner?: (number | null) | Image;
   links?:
     | {
         link: string;
@@ -173,36 +174,6 @@ export interface Project {
   updatedAt: string;
   createdAt: string;
 }
-/**
- * This interface was referenced by `Config`'s JSON-Schema
- * via the `definition` "news".
- */
-export interface News {
-  id: number;
-  title: string;
-  /**
-   * The slug is used to identify the news item in the URL.
-   */
-  slug: string;
-  content: {
-    root: {
-      type: string;
-      children: {
-        type: string;
-        version: number;
-        [k: string]: unknown;
-      }[];
-      direction: ('ltr' | 'rtl') | null;
-      format: 'left' | 'start' | 'center' | 'right' | 'end' | 'justify' | '';
-      indent: number;
-      version: number;
-    };
-    [k: string]: unknown;
-  };
-  updatedAt: string;
-  createdAt: string;
-  _status?: ('draft' | 'published') | null;
-}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "images".
@@ -249,6 +220,36 @@ export interface Image {
     };
   };
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "news".
+ */
+export interface News {
+  id: number;
+  title: string;
+  /**
+   * The slug is used to identify the news item in the URL.
+   */
+  slug: string;
+  content: {
+    root: {
+      type: string;
+      children: {
+        type: string;
+        version: number;
+        [k: string]: unknown;
+      }[];
+      direction: ('ltr' | 'rtl') | null;
+      format: 'left' | 'start' | 'center' | 'right' | 'end' | 'justify' | '';
+      indent: number;
+      version: number;
+    };
+    [k: string]: unknown;
+  };
+  updatedAt: string;
+  createdAt: string;
+  _status?: ('draft' | 'published') | null;
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "documents".
@@ -389,6 +390,7 @@ export interface ProjectsSelect<T extends boolean = true> {
   slug?: T;
   content?: T;
   featured?: T;
+  banner?: T;
   links?:
     | T
     | {
diff --git a/src/app/(website)/components/Home/Hero/02-data.tsx b/src/app/(website)/components/Home/Hero/02-data.tsx
index 2d556ea..b3713b4 100644
--- a/src/app/(website)/components/Home/Hero/02-data.tsx
+++ b/src/app/(website)/components/Home/Hero/02-data.tsx
@@ -72,7 +72,7 @@ const Item = ({
   return (
     <div
       ref={containerRef}
-      className="w-full h-screen max-w-6xl p-12 grid grid-rows-2 lg:grid-cols-2 gap-12 z-10 items-center text-white"
+      className="w-full h-screen max-w-6xl p-12 grid grid-rows-2 lg:grid-cols-2 lg:grid-rows-1 gap-12 z-10 items-center text-white"
     >
       <motion.div
         style={{ opacity }}
diff --git a/src/app/(website)/components/Home/Projects/index.tsx b/src/app/(website)/components/Home/Projects/index.tsx
index 792a329..7e83b93 100644
--- a/src/app/(website)/components/Home/Projects/index.tsx
+++ b/src/app/(website)/components/Home/Projects/index.tsx
@@ -1,9 +1,13 @@
 "use client";
 
+import useWindow from "@/app/(website)/hooks/useWindow";
 import { HomeProject, Project } from "@payload-types";
 import { RichText } from "@payloadcms/richtext-lexical/react";
 import { motion, useScroll, useTransform } from "motion/react";
-import { useRef } from "react";
+import Image from "next/image";
+import Link from "next/link";
+import { useRef, useState } from "react";
+import PayloadImage from "../../PayloadImage";
 
 export default function Projects({
   text,
@@ -22,10 +26,14 @@ export default function Projects({
   const headerOpacity = useTransform(scrollYProgress, [0.8, 1], [0, 1]);
   const textOpacity = useTransform(scrollYProgress, [0.9, 1], [0, 1]);
 
+  const [active, setActive] = useState(1);
+  const { width } = useWindow();
+  const largeScreen = width >= 1024;
+
   return (
     <section
       ref={containerRef}
-      className="bg-black flex flex-col items-center justify-center pb-48"
+      className="bg-black flex flex-col items-center justify-center lg:pb-48"
     >
       <div className="flex flex-col items-center justify-center h-screen relative">
         <div className="max-w-6xl w-full flex flex-col justify-center relative z-10">
@@ -54,20 +62,84 @@ export default function Projects({
           </div>
         </div>
       </div>
-      <div className="w-full max-w-4xl flex flex-col items-center gap-48 relative">
+      <div className="w-full px-12 flex flex-col lg:items-stretch gap-12 relative pb-12 lg:flex-row py-12 lg:h-screen">
         {[...projects, ...projects].map((project, i) => (
-          <div
+          <motion.div
             key={i}
-            className=" bg-accent-700 w-full px-8 py-12 gap-12 flex flex-col"
+            className="w-full lg:w-auto bg-white text-black gap-8 lg:gap-8 flex flex-col lg:cursor-pointer relative"
+            animate={{
+              flex: largeScreen && active === i ? 5 : 1,
+            }}
+            onClick={() => setActive(i)}
           >
-            <h1 className="text-4xl font-display">{project.title}</h1>
+            {project.banner && typeof project.banner !== "number" && (
+              <motion.div
+                className="absolute h-full w-full"
+                animate={
+                  {
+                    // opacity: largeScreen ? (active === i ? 0.5 : 1) : 0.3,
+                  }
+                }
+              >
+                <PayloadImage
+                  img={project.banner}
+                  className="h-full w-full object-cover z-0"
+                />
+              </motion.div>
+            )}
+            {(!largeScreen || active === i) && (
+              <motion.div
+                style={{
+                  opacity: 0,
+                  y: -10,
+                }}
+                animate={{
+                  opacity: 1,
+                  y: 0,
+                }}
+                transition={{
+                  delay: 0.3,
+                  duration: 1,
+                }}
+                className="p-8 lg:p-12 z-10"
+              >
+                <div className="p-2 lg:p-4 flex flex-col gap-6 lg:gap-12 bg-white/50 backdrop-blur-lg shadow-lg rounded">
+                  <h1 className="text-2xl lg:text-4xl font-display">
+                    {project.title}
+                  </h1>
 
-            <div className="line-clamp-6 overflow-ellipsis text-xl">
-              <RichText data={project.content} />
-            </div>
-          </div>
+                  <motion.div
+                    style={{
+                      opacity: 0,
+                      y: 30,
+                    }}
+                    animate={{
+                      opacity: 1,
+                      y: 0,
+                    }}
+                    transition={{
+                      delay: 0.6,
+                      duration: 0.5,
+                    }}
+                    className="line-clamp-6 overflow-ellipsis text-lg lg:text-2xl"
+                  >
+                    <RichText data={project.content} />
+                  </motion.div>
+                </div>
+              </motion.div>
+            )}
+          </motion.div>
         ))}
       </div>
+
+      <div className="w-full flex flex-col items-center justify-center pb-48">
+        <div className=" h-1/2 bg-white text-accent-600 w-full flex flex-col items-center justify-center gap-8 py-24">
+          <h4 className="text-4xl font-display">Have a project idea?</h4>
+          <Link href="">
+            <p className="text-xl font-bold">Get in touch &gt;</p>
+          </Link>
+        </div>
+      </div>
     </section>
   );
 }
diff --git a/src/app/(website)/components/PayloadImage.tsx b/src/app/(website)/components/PayloadImage.tsx
new file mode 100644
index 0000000..2d000f8
--- /dev/null
+++ b/src/app/(website)/components/PayloadImage.tsx
@@ -0,0 +1,28 @@
+import type { Image as PImage } from "@payload-types";
+import Image from "next/image";
+
+export default function PayloadImage({
+  img,
+  className,
+}: {
+  img: PImage;
+  className: string;
+}) {
+  const url = img.url;
+  const width = img.width;
+  const height = img.height;
+
+  if (!url || !width || !height) return <></>;
+
+  console.log("URL: ", url);
+
+  return (
+    <Image
+      src={img.url ?? ""}
+      alt={img.alt ?? ""}
+      className={className}
+      width={width}
+      height={height}
+    />
+  );
+}
diff --git a/src/app/(website)/globals.css b/src/app/(website)/globals.css
index ef4dcaa..e8eb517 100644
--- a/src/app/(website)/globals.css
+++ b/src/app/(website)/globals.css
@@ -35,3 +35,7 @@
   /* Other vars */
   --header-height: 100px;
 }
+
+.payload-richtext p {
+  @apply mb-2;
+}
diff --git a/src/app/(website)/page.tsx b/src/app/(website)/page.tsx
index f2c79c4..fe1cf42 100644
--- a/src/app/(website)/page.tsx
+++ b/src/app/(website)/page.tsx
@@ -7,7 +7,6 @@ import HeroData from "./components/Home/Hero/02-data";
 import bgImage from "./bg.jpg";
 import Image from "next/image";
 import Projects from "./components/Home/Projects";
-import Link from "next/link";
 
 export default async function Home() {
   const payload = await getPayload({ config });
@@ -47,15 +46,6 @@ export default async function Home() {
         />
         <HeroData items={heroGroup.heroItems} />
         <Projects text={projectsText} projects={projects.docs} />
-
-        <div className="flex flex-col items-center justify-center pb-48">
-          <div className="max-w-4xl h-1/2 bg-white text-accent-600 w-full flex flex-col items-center justify-center gap-8 py-24">
-            <h4 className="text-4xl font-display">Have a project idea?</h4>
-            <Link href="">
-              <p className="text-xl font-bold">Get in touch &gt;</p>
-            </Link>
-          </div>
-        </div>
       </div>
     </SmoothScroll>
   );
diff --git a/src/collections/Projects.ts b/src/collections/Projects.ts
index 6b98ea9..e33a595 100644
--- a/src/collections/Projects.ts
+++ b/src/collections/Projects.ts
@@ -2,83 +2,86 @@ import { formatSlug } from "@/lib/slugs";
 import { CollectionConfig } from "payload";
 
 export const Projects: CollectionConfig = {
-    slug: 'projects',
-    fields: [
+  slug: "projects",
+  fields: [
+    {
+      name: "title",
+      label: "Title",
+      type: "text",
+      required: true,
+    },
+    {
+      name: "slug",
+      label: "Slug",
+      type: "text",
+      required: true,
+      unique: true,
+      admin: {
+        position: "sidebar",
+        description: "The slug is used to identify the news item in the URL.",
+        // readOnly: true,
+      },
+      hooks: {
+        beforeValidate: [formatSlug("title")],
+      },
+    },
+    {
+      name: "content",
+      label: "Content",
+      type: "richText",
+      required: true,
+    },
+    // list of files
+    // gallery
+    // keywords
+    // is featured?
+    {
+      name: "featured",
+      label: "Featured",
+      type: "checkbox",
+      defaultValue: false,
+      admin: {
+        position: "sidebar",
+        description: "Show this project on the homepage.",
+      },
+    },
+    {
+      name: "banner",
+      label: "Banner",
+      type: "upload",
+      relationTo: "images",
+    },
+    // links
+    {
+      name: "links",
+      label: "Links",
+      type: "array",
+      fields: [
         {
-            name: 'title',
-            label: 'Title',
-            type: 'text',
-            required: true,
+          name: "link",
+          label: "Link",
+          type: "text",
+          required: true,
         },
         {
-            name: 'slug',
-            label: 'Slug',
-            type: 'text',
-            required: true,
-            unique: true,
-            admin: {
-                position: 'sidebar',
-                description: 'The slug is used to identify the news item in the URL.',
-                // readOnly: true,
-            },
-            hooks: {
-                beforeValidate: [
-                    formatSlug('title'),
-                ]
-            }
+          name: "description",
+          label: "Description",
+          type: "text",
+          required: false,
         },
         {
-            name: 'content',
-            label: 'Content',
-            type: 'richText',
-            required: true,
+          name: "group",
+          label: "Group",
+          type: "text",
+          required: false,
+          admin: {
+            description: "Optional: organise link under this heading",
+          },
         },
-        // list of files
-        // gallery
-        // keywords
-        // is featured?
-        {
-            name: 'featured',
-            label: 'Featured',
-            type: 'checkbox',
-            defaultValue: false,
-            admin: {
-                position: 'sidebar',
-                description: 'Show this project on the homepage.',
-            }
-        },
-        // links
-        {
-            name: 'links',
-            label: 'Links',
-            type: 'array',
-            fields: [
-                {
-                    name: 'link',
-                    label: 'Link',
-                    type: 'text',
-                    required: true,
-                },
-                {
-                    name: 'description',
-                    label: 'Description',
-                    type: 'text',
-                    required: false,
-                },
-                {
-                    name: 'group',
-                    label: 'Group',
-                    type: 'text',
-                    required: false,
-                    admin: {
-                        description: 'Optional: organise link under this heading',
-                    },
-                }
-            ],
-            admin: {
-                position: 'sidebar',
-
-            }
-        },
-    ]
-}
+      ],
+      admin: {
+        position: "sidebar",
+      },
+    },
+  ],
+};
diff --git a/src/collections/media/Images.ts b/src/collections/media/Images.ts
index 7094f60..8c0f6b7 100644
--- a/src/collections/media/Images.ts
+++ b/src/collections/media/Images.ts
@@ -1,45 +1,49 @@
 import type { CollectionConfig } from "payload";
 
 export const Images: CollectionConfig = {
-    slug: 'images',
-    upload: {
-        staticDir: 'media/images',
-        imageSizes: [
-            {
-                name: 'thumbnail',
-                width: 400,
-                height: 300,
-                position: 'centre',
-            },
-            {
-                name: 'card',
-                width: 768,
-                height: 1024,
-                position: 'centre',
-            },
-            {
-                name: 'tablet',
-                width: 1024,
-                height: undefined,
-                position: 'centre',
-            }
-        ],
-        adminThumbnail: 'thumbnail',
-        mimeTypes: ['image/*'],
-    },
-    fields: [
-        {
-            name: 'alt',
-            label: 'Alt Text',
-            type: 'text',
-        },
-        {
-            name: 'description',
-            label: 'Description',
-            type: 'textarea',
-        }
+  slug: "images",
+  access: {
+    // TODO: fix this
+    read: () => true,
+  },
+  upload: {
+    staticDir: "media/images",
+    imageSizes: [
+      {
+        name: "thumbnail",
+        width: 400,
+        height: 300,
+        position: "centre",
+      },
+      {
+        name: "card",
+        width: 768,
+        height: 1024,
+        position: "centre",
+      },
+      {
+        name: "tablet",
+        width: 1024,
+        height: undefined,
+        position: "centre",
+      },
     ],
-    admin: {
-        group: 'Media',
-    }
-}
+    adminThumbnail: "thumbnail",
+    mimeTypes: ["image/*"],
+  },
+  fields: [
+    {
+      name: "alt",
+      label: "Alt Text",
+      type: "text",
+    },
+    {
+      name: "description",
+      label: "Description",
+      type: "textarea",
+    },
+  ],
+  admin: {
+    group: "Media",
+  },
+};
diff --git a/src/globals/Home/Projects.ts b/src/globals/Home/Projects.ts
index 39c7eb1..74a5fa3 100644
--- a/src/globals/Home/Projects.ts
+++ b/src/globals/Home/Projects.ts
@@ -1,22 +1,22 @@
 import { GlobalConfig } from "payload";
 
 export const HomeProjects: GlobalConfig = {
-    slug: 'homeProjects',
-    label: 'Projects',
-    fields: [
-        {
-            name: 'projectsTitle',
-            label: 'Projects Title',
-            type: 'text',
-            defaultValue: 'We do data differently'
-        },
-        {
-            name: 'projectsDescription',
-            label: 'Projects Description',
-            type: 'richText'
-        }
-    ],
-    admin: {
-        group: 'Home page'
-    }
+  slug: "homeProjects",
+  label: "Projects",
+  fields: [
+    {
+      name: "projectsTitle",
+      label: "Projects Title",
+      type: "text",
+      defaultValue: "We do data differently",
+    },
+    {
+      name: "projectsDescription",
+      label: "Projects Description",
+      type: "richText",
+    },
+  ],
+  admin: {
+    group: "Home page",
+  },
 };