diff --git a/media/FyrreMagazine-Desktop-2-1920x1080.jpg b/media/FyrreMagazine-Desktop-2-1920x1080.jpg
new file mode 100644
index 0000000..741df57
Binary files /dev/null and b/media/FyrreMagazine-Desktop-2-1920x1080.jpg differ
diff --git a/media/FyrreMagazine-Desktop-2-400x300.jpg b/media/FyrreMagazine-Desktop-2-400x300.jpg
new file mode 100644
index 0000000..5f715de
Binary files /dev/null and b/media/FyrreMagazine-Desktop-2-400x300.jpg differ
diff --git a/media/FyrreMagazine-Desktop-2-768x1024.jpg b/media/FyrreMagazine-Desktop-2-768x1024.jpg
new file mode 100644
index 0000000..8c64eaf
Binary files /dev/null and b/media/FyrreMagazine-Desktop-2-768x1024.jpg differ
diff --git a/media/FyrreMagazine-Desktop-2.jpg b/media/FyrreMagazine-Desktop-2.jpg
new file mode 100644
index 0000000..a46c5de
Binary files /dev/null and b/media/FyrreMagazine-Desktop-2.jpg differ
diff --git a/media/FyrreMagazine-Desktop-3-1920x1080.jpg b/media/FyrreMagazine-Desktop-3-1920x1080.jpg
new file mode 100644
index 0000000..a8c0d2f
Binary files /dev/null and b/media/FyrreMagazine-Desktop-3-1920x1080.jpg differ
diff --git a/media/FyrreMagazine-Desktop-3-400x300.jpg b/media/FyrreMagazine-Desktop-3-400x300.jpg
new file mode 100644
index 0000000..751742b
Binary files /dev/null and b/media/FyrreMagazine-Desktop-3-400x300.jpg differ
diff --git a/media/FyrreMagazine-Desktop-3-768x1024.jpg b/media/FyrreMagazine-Desktop-3-768x1024.jpg
new file mode 100644
index 0000000..95dde38
Binary files /dev/null and b/media/FyrreMagazine-Desktop-3-768x1024.jpg differ
diff --git a/media/FyrreMagazine-Desktop-3.jpg b/media/FyrreMagazine-Desktop-3.jpg
new file mode 100644
index 0000000..9b11399
Binary files /dev/null and b/media/FyrreMagazine-Desktop-3.jpg differ
diff --git a/media/FyrreMagazine-Desktop-4-1920x1080.jpg b/media/FyrreMagazine-Desktop-4-1920x1080.jpg
new file mode 100644
index 0000000..9ed2248
Binary files /dev/null and b/media/FyrreMagazine-Desktop-4-1920x1080.jpg differ
diff --git a/media/FyrreMagazine-Desktop-4-400x300.jpg b/media/FyrreMagazine-Desktop-4-400x300.jpg
new file mode 100644
index 0000000..b05d233
Binary files /dev/null and b/media/FyrreMagazine-Desktop-4-400x300.jpg differ
diff --git a/media/FyrreMagazine-Desktop-4-768x1024.jpg b/media/FyrreMagazine-Desktop-4-768x1024.jpg
new file mode 100644
index 0000000..20d6e62
Binary files /dev/null and b/media/FyrreMagazine-Desktop-4-768x1024.jpg differ
diff --git a/media/FyrreMagazine-Desktop-4.jpg b/media/FyrreMagazine-Desktop-4.jpg
new file mode 100644
index 0000000..22f222a
Binary files /dev/null and b/media/FyrreMagazine-Desktop-4.jpg differ
diff --git a/media/FyrreMagazine-Desktop-5-1920x1080.jpg b/media/FyrreMagazine-Desktop-5-1920x1080.jpg
new file mode 100644
index 0000000..c24e2d0
Binary files /dev/null and b/media/FyrreMagazine-Desktop-5-1920x1080.jpg differ
diff --git a/media/FyrreMagazine-Desktop-5-400x300.jpg b/media/FyrreMagazine-Desktop-5-400x300.jpg
new file mode 100644
index 0000000..aad142f
Binary files /dev/null and b/media/FyrreMagazine-Desktop-5-400x300.jpg differ
diff --git a/media/FyrreMagazine-Desktop-5-768x1024.jpg b/media/FyrreMagazine-Desktop-5-768x1024.jpg
new file mode 100644
index 0000000..0c12524
Binary files /dev/null and b/media/FyrreMagazine-Desktop-5-768x1024.jpg differ
diff --git a/media/FyrreMagazine-Desktop-5.jpg b/media/FyrreMagazine-Desktop-5.jpg
new file mode 100644
index 0000000..e2c2f84
Binary files /dev/null and b/media/FyrreMagazine-Desktop-5.jpg differ
diff --git a/media/FyrreMagazine-Desktop-6-1920x1080.jpg b/media/FyrreMagazine-Desktop-6-1920x1080.jpg
new file mode 100644
index 0000000..23c34a8
Binary files /dev/null and b/media/FyrreMagazine-Desktop-6-1920x1080.jpg differ
diff --git a/media/FyrreMagazine-Desktop-6-400x300.jpg b/media/FyrreMagazine-Desktop-6-400x300.jpg
new file mode 100644
index 0000000..b217e96
Binary files /dev/null and b/media/FyrreMagazine-Desktop-6-400x300.jpg differ
diff --git a/media/FyrreMagazine-Desktop-6-768x1024.jpg b/media/FyrreMagazine-Desktop-6-768x1024.jpg
new file mode 100644
index 0000000..b08a7da
Binary files /dev/null and b/media/FyrreMagazine-Desktop-6-768x1024.jpg differ
diff --git a/media/FyrreMagazine-Desktop-6.jpg b/media/FyrreMagazine-Desktop-6.jpg
new file mode 100644
index 0000000..917d433
Binary files /dev/null and b/media/FyrreMagazine-Desktop-6.jpg differ
diff --git a/media/FyrreMagazine-Desktop-7-1920x1080.jpg b/media/FyrreMagazine-Desktop-7-1920x1080.jpg
new file mode 100644
index 0000000..872b252
Binary files /dev/null and b/media/FyrreMagazine-Desktop-7-1920x1080.jpg differ
diff --git a/media/FyrreMagazine-Desktop-7-400x300.jpg b/media/FyrreMagazine-Desktop-7-400x300.jpg
new file mode 100644
index 0000000..5a40851
Binary files /dev/null and b/media/FyrreMagazine-Desktop-7-400x300.jpg differ
diff --git a/media/FyrreMagazine-Desktop-7-768x1024.jpg b/media/FyrreMagazine-Desktop-7-768x1024.jpg
new file mode 100644
index 0000000..2feb274
Binary files /dev/null and b/media/FyrreMagazine-Desktop-7-768x1024.jpg differ
diff --git a/media/FyrreMagazine-Desktop-7.jpg b/media/FyrreMagazine-Desktop-7.jpg
new file mode 100644
index 0000000..f206299
Binary files /dev/null and b/media/FyrreMagazine-Desktop-7.jpg differ
diff --git a/payload-types.ts b/payload-types.ts
index 3f732a7..dda100d 100644
--- a/payload-types.ts
+++ b/payload-types.ts
@@ -113,6 +113,31 @@ export interface Page {
   };
   layout?:
     | (
+        | {
+            about?:
+              | {
+                  date?: string | null;
+                  position?: string | null;
+                  company?: string | null;
+                  stacks?:
+                    | {
+                        stack?: string | null;
+                        id?: string | null;
+                      }[]
+                    | null;
+                  responsibilities?:
+                    | {
+                        responsibility?: string | null;
+                        id?: string | null;
+                      }[]
+                    | null;
+                  id?: string | null;
+                }[]
+              | null;
+            id?: string | null;
+            blockName?: string | null;
+            blockType: 'about-block';
+          }
         | {
             accolade?:
               | {
@@ -289,43 +314,16 @@ export interface Project {
         blockType: 'content-block';
       }[]
     | null;
-  slug?: string | null;
   typeface?:
     | {
-        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;
-        } | null;
-        id?: string | null;
-        blockName?: string | null;
-        blockType: 'content-block';
-      }[]
-    | null;
-  layout?:
-    | {
-        title?: string | null;
-        items?:
-          | {
-              item?: string | null;
-              id?: string | null;
-            }[]
-          | null;
+        typeface?: string | null;
+        image?: (string | null) | Media;
         id?: string | null;
         blockName?: string | null;
-        blockType: 'list-block';
+        blockType: 'typeface';
       }[]
     | null;
+  slug?: string | null;
   showcase?:
     | {
         images?:
@@ -443,6 +441,32 @@ export interface PagesSelect<T extends boolean = true> {
   layout?:
     | T
     | {
+        'about-block'?:
+          | T
+          | {
+              about?:
+                | T
+                | {
+                    date?: T;
+                    position?: T;
+                    company?: T;
+                    stacks?:
+                      | T
+                      | {
+                          stack?: T;
+                          id?: T;
+                        };
+                    responsibilities?:
+                      | T
+                      | {
+                          responsibility?: T;
+                          id?: T;
+                        };
+                    id?: T;
+                  };
+              id?: T;
+              blockName?: T;
+            };
         'accolades-block'?:
           | T
           | {
@@ -558,35 +582,19 @@ export interface ProjectsSelect<T extends boolean = true> {
               blockName?: T;
             };
       };
-  slug?: T;
   typeface?:
     | T
     | {
-        'content-block'?:
-          | T
-          | {
-              Content?: T;
-              id?: T;
-              blockName?: T;
-            };
-      };
-  layout?:
-    | T
-    | {
-        'list-block'?:
+        typeface?:
           | T
           | {
-              title?: T;
-              items?:
-                | T
-                | {
-                    item?: T;
-                    id?: T;
-                  };
+              typeface?: T;
+              image?: T;
               id?: T;
               blockName?: T;
             };
       };
+  slug?: T;
   showcase?:
     | T
     | {
diff --git a/public/AmanSinghBhogal-Brand-Manifesto.pdf b/public/AmanSinghBhogal-Brand-Manifesto.pdf
deleted file mode 100644
index 55f1bba..0000000
Binary files a/public/AmanSinghBhogal-Brand-Manifesto.pdf and /dev/null differ
diff --git a/src/app/(frontend)/about/page.tsx b/src/app/(frontend)/about/page.tsx
index 9611faa..bec6d13 100644
--- a/src/app/(frontend)/about/page.tsx
+++ b/src/app/(frontend)/about/page.tsx
@@ -1,7 +1,9 @@
 import { Metadata } from 'next';
-import config from '@payload-config';
 import React from 'react';
 import { getPayload } from 'payload';
+import { RichText } from '@/src/components/typography';
+import configPromise from '@payload-config';
+import { AboutBlock } from '@/src/components/blocks';
 
 export const metadata: Metadata = {
   description: 'About Aman Singh Bhogal',
@@ -9,26 +11,28 @@ export const metadata: Metadata = {
 };
 
 export default async function Page() {
-  // const { about: aboutData } = await getAboutData();
-
   const payload = await getPayload({
-    config,
+    config: configPromise,
+  });
+
+  const data = await payload.find({
+    collection: 'pages',
+    where: {
+      title: {
+        equals: 'About',
+      },
+    },
   });
 
-  const data = await payload
-    .find({
-      collection: 'pages',
-    })
-    .then((results) => results.docs[2]);
+  const { docs } = data;
 
-  // eslint-disable-next-line no-console
-  console.log(data);
   return (
-    <React.Fragment>
-      <p>About</p>
-      {/*  <AboutCover />
-      <AboutSection aboutData={aboutData} />
-      <CTA /> */}
-    </React.Fragment>
+    <div>
+      <h1>{docs[0].title}</h1>
+      {/* @ts-expect-error resolve type mismatch */}
+      <RichText content={docs[0]?.layout?.[0].Content || []} />
+      {/* @ts-expect-error resolve type mismatch */}
+      <AboutBlock history={docs[0]?.layout?.[1].about} />
+    </div>
   );
 }
diff --git a/src/app/(frontend)/work/[slug]/page.tsx b/src/app/(frontend)/work/[slug]/page.tsx
index d2482f3..5fac2a2 100644
--- a/src/app/(frontend)/work/[slug]/page.tsx
+++ b/src/app/(frontend)/work/[slug]/page.tsx
@@ -2,8 +2,9 @@ import { getPayload, PaginatedDocs } from 'payload';
 import configPromise from '@payload-config';
 import { Metadata, ResolvingMetadata } from 'next';
 import Image from 'next/image';
-import { ListBlock } from '@/src/components/blocks';
+import { ListBlock, ProjectShowcaseBlock, TypefaceBlock } from '@/src/components/blocks';
 import { RichText } from '@/src/components/typography';
+import { ArrowDown } from '@/src/components/graphics';
 import styles from './styles.module.scss';
 
 interface Props {
@@ -49,21 +50,29 @@ export default async function Page({ params }: Props) {
     },
   });
 
+  const { docs } = data;
+
   return (
     <div>
       <div className={styles.imageContainer}>
         <Image
           className={styles.image}
-          width={data.docs[0].heroImage.width as number}
-          height={data.docs[0].heroImage.height as number}
-          src={data.docs[0].heroImage.url as string}
-          alt={data.docs[0].heroImage.altText as string}
+          width={docs[0].heroImage.width as number}
+          height={docs[0].heroImage.height as number}
+          src={docs[0].heroImage.url as string}
+          alt={docs[0].heroImage.altText as string}
           priority
         />
       </div>
-      <h1 className={styles.title}>{data.docs[0].title}</h1>
-      <ListBlock stacks={data.docs[0].stacks} />
-      <RichText content={data.docs[0].description.Content} />
+      <h1 className={styles.title}>{docs[0].title}</h1>
+      <ListBlock
+        className={styles.stacksList}
+        stacks={docs[0].stacks}
+      />
+      <RichText content={docs[0].description[0].Content} />
+      <ArrowDown className={styles.arrowDown} />
+      <TypefaceBlock typeface={docs[0].typeface} />
+      <ProjectShowcaseBlock images={docs[0].showcase} />
     </div>
   );
 }
diff --git a/src/app/(frontend)/work/[slug]/styles.module.scss b/src/app/(frontend)/work/[slug]/styles.module.scss
index 8c79f12..b381148 100644
--- a/src/app/(frontend)/work/[slug]/styles.module.scss
+++ b/src/app/(frontend)/work/[slug]/styles.module.scss
@@ -12,4 +12,22 @@
 
 .title {
   text-align: center;
+}
+
+.stacksList {
+  margin-bottom: 4.6875rem;
+
+  @media only screen and (width <=48rem) {
+    margin-bottom: 1.25rem;
+  }
+}
+
+.arrowDown {
+  height: 22.25rem;
+  margin: 0 auto;
+  width: 100%;
+
+  @media only screen and (width <=48rem) {
+    height: 9.375rem;
+  }
 }
\ No newline at end of file
diff --git a/src/app/(frontend)/work/[slug]/styles.module.scss.d.ts b/src/app/(frontend)/work/[slug]/styles.module.scss.d.ts
index b5784f6..e7ffaed 100644
--- a/src/app/(frontend)/work/[slug]/styles.module.scss.d.ts
+++ b/src/app/(frontend)/work/[slug]/styles.module.scss.d.ts
@@ -1,3 +1,5 @@
+export declare const arrowDown: string;
 export declare const image: string;
 export declare const imageContainer: string;
+export declare const stacksList: string;
 export declare const title: string;
diff --git a/src/components/blocks/AboutBlock/index.tsx b/src/components/blocks/AboutBlock/index.tsx
new file mode 100644
index 0000000..e95c4be
--- /dev/null
+++ b/src/components/blocks/AboutBlock/index.tsx
@@ -0,0 +1,51 @@
+import { Page } from '@/payload-types';
+import dayjs from 'dayjs';
+import styles from './styles.module.scss';
+
+type AboutBlock = Extract<NonNullable<Page['layout']>[number], { blockType: 'about-block' }>;
+
+interface Props {
+  history: AboutBlock['about'];
+}
+
+export const AboutBlock = ({ history }: Props) => (
+  <ul className={styles.containerOuter}>
+    {history?.map((event) => (
+      <li
+        className={styles.container}
+        key={event.id}
+      >
+        <div className={styles.containerInner}>
+          <p className={styles.date}>{dayjs(event.date).format('MMM YYYY')}</p>
+          <p className={styles.position}>
+            {event.position}
+          </p>
+          <p className={styles.company}>{event.company}</p>
+        </div>
+        <div className={styles.containerInner}>
+          <ul className={styles.stacks}>
+            {event?.stacks?.map((stack) => (
+              <li
+                className={styles.stack}
+                key={stack.id}
+              >
+                {stack.stack}
+              </li>
+            ))}
+          </ul>
+          <ul className={styles.responsibilities}>
+            {event?.responsibilities?.map((responsibility) => (
+              <li
+                className={styles.responsibility}
+                key={responsibility.id}
+              >
+                {responsibility.responsibility}
+              </li>
+            ))}
+          </ul>
+        </div>
+
+      </li>
+    ))}
+  </ul>
+);
diff --git a/src/components/blocks/AboutBlock/styles.module.scss b/src/components/blocks/AboutBlock/styles.module.scss
new file mode 100644
index 0000000..1633472
--- /dev/null
+++ b/src/components/blocks/AboutBlock/styles.module.scss
@@ -0,0 +1,73 @@
+@use "../../../styles/index.scss" as *;
+
+.container {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: row;
+  gap: 3.75rem;
+  list-style-type: none;
+
+  &:not(:last-child) {
+    margin-bottom: 3.75rem;
+  }
+}
+
+.containerInner {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: .9375rem;
+}
+
+.containerOuter {
+  margin: 0 auto;
+  max-width: 71rem;
+  width: 100%;
+}
+
+.position {
+  color: $Khaki;
+  font-family: Cardillac, serif;
+  font-size: 2.5rem;
+  text-transform: uppercase;
+}
+
+.company,
+.responsibility {
+  color: $Argent;
+  font-family: Newsreader, serif;
+  font-size: 1.5rem;
+  text-transform: lowercase;
+}
+
+.stacks {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  list-style-type: none;
+}
+
+.responsibilities {
+  display: flex;
+  flex-direction: column;
+  list-style: disc;
+  margin-left: 1.25rem;
+}
+
+.stack,
+.date {
+  color: $Argent;
+  font-family: Cardillac, serif;
+  font-size: 1.5rem;
+  text-transform: uppercase;
+}
+
+.stack {
+  &:not(:last-child) {
+    &::after {
+      content: ',';
+    }
+
+    margin-right: .625rem;
+  }
+}
\ No newline at end of file
diff --git a/src/components/blocks/AboutBlock/styles.module.scss.d.ts b/src/components/blocks/AboutBlock/styles.module.scss.d.ts
new file mode 100644
index 0000000..1ff3913
--- /dev/null
+++ b/src/components/blocks/AboutBlock/styles.module.scss.d.ts
@@ -0,0 +1,10 @@
+export declare const company: string;
+export declare const container: string;
+export declare const containerInner: string;
+export declare const containerOuter: string;
+export declare const date: string;
+export declare const position: string;
+export declare const responsibilities: string;
+export declare const responsibility: string;
+export declare const stack: string;
+export declare const stacks: string;
diff --git a/src/components/blocks/AccoladesBlock/index.tsx b/src/components/blocks/AccoladesBlock/index.tsx
index 40cd642..d379349 100644
--- a/src/components/blocks/AccoladesBlock/index.tsx
+++ b/src/components/blocks/AccoladesBlock/index.tsx
@@ -11,14 +11,15 @@ interface Props {
 
 export const AccoladesBlock = ({ accolades }: Props) => (
   <ul className={styles.container}>
-    {accolades?.map((accolade, index) => (
+    {accolades?.map((accolade) => (
       <React.Fragment key={accolade.id}>
-        <li>
-          <p className={styles.date}>{dayjs(accolade.date).format('MMM YY')}</p>
-          <p className={styles.body}>{accolade.awardingBody}</p>
-          <p className={styles.award}>{accolade.award}</p>
+        <li className={styles.li}>
+          <div>
+            <p className={styles.date}>{dayjs(accolade.date).format('MMM YY')}</p>
+            <p className={styles.body}>{accolade.awardingBody}</p>
+            <p className={styles.award}>{accolade.award}</p>
+          </div>
         </li>
-        {index < accolades.length - 1 && (<span className={styles.separator} />)}
       </React.Fragment>
     ))}
   </ul>
diff --git a/src/components/blocks/AccoladesBlock/styles.module.scss b/src/components/blocks/AccoladesBlock/styles.module.scss
index 36e2013..1b8596f 100644
--- a/src/components/blocks/AccoladesBlock/styles.module.scss
+++ b/src/components/blocks/AccoladesBlock/styles.module.scss
@@ -47,4 +47,18 @@
   font-family: Cardillac, Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
   font-size: 2.5rem;
   text-transform: uppercase;
+}
+
+.li {
+  align-items: center;
+  display: flex;
+
+  &:not(:last-child) {
+    &::after {
+      color: $Khaki;
+      content: '⋅';
+      font-size: 3rem;
+      margin-left: 3.75rem;
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/components/blocks/AccoladesBlock/styles.module.scss.d.ts b/src/components/blocks/AccoladesBlock/styles.module.scss.d.ts
index 7c89517..5141f73 100644
--- a/src/components/blocks/AccoladesBlock/styles.module.scss.d.ts
+++ b/src/components/blocks/AccoladesBlock/styles.module.scss.d.ts
@@ -2,4 +2,5 @@ export declare const award: string;
 export declare const body: string;
 export declare const container: string;
 export declare const date: string;
+export declare const li: string;
 export declare const separator: string;
diff --git a/src/components/blocks/ListBlock/index.tsx b/src/components/blocks/ListBlock/index.tsx
index 3881e1d..afc0935 100644
--- a/src/components/blocks/ListBlock/index.tsx
+++ b/src/components/blocks/ListBlock/index.tsx
@@ -3,18 +3,18 @@ import React from 'react';
 import styles from './styles.module.scss';
 
 interface Props {
+  className?: string;
   stacks: Project['stacks'];
 }
 
-export const ListBlock = ({ stacks }: Props) => (
-  <ul className={styles.ul}>
+export const ListBlock = ({ className, stacks }: Props) => (
+  <ul className={`${styles.ul} ${className}`}>
     {stacks?.map((stack) => (
       stack?.items?.map((item) => (
         <React.Fragment key={stack.id}>
           <li className={styles.li}>
             {item.item}
           </li>
-          {stack?.items && stack?.items?.length > 1 && <span className={styles.separator} />}
         </React.Fragment>
       ))
     ))}
diff --git a/src/components/blocks/ListBlock/styles.module.scss b/src/components/blocks/ListBlock/styles.module.scss
index a0c507b..cc7c296 100644
--- a/src/components/blocks/ListBlock/styles.module.scss
+++ b/src/components/blocks/ListBlock/styles.module.scss
@@ -5,26 +5,33 @@
   display: flex;
   flex-wrap: wrap;
   gap: 1.25rem;
+  justify-content: center;
   list-style-type: none;
   margin: 0;
   padding: 0;
 
   @media only screen and (max-width: 48rem) {
+    gap: 0.5rem;
     justify-content: center;
   }
 }
 
 .li {
+  align-items: center;
   color: $Argent;
+  display: flex;
+  flex-direction: row;
   font-family: Cardillac, Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
-  font-size: 2.25rem;
+  font-size: clamp(1.5rem, 1.35rem + 0.75vw, 2.25rem);
   font-weight: 300;
   text-transform: uppercase;
-}
 
-.separator {
-  background-color: $Khaki;
-  border-radius: 50%;
-  height: .3125rem;
-  width: .3125rem;
+  &:not(:last-child) {
+    &::after {
+      color: $Khaki;
+      content: '⋅';
+      font-size: 3rem;
+      margin-left: 1.25rem;
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/components/blocks/ListBlock/styles.module.scss.d.ts b/src/components/blocks/ListBlock/styles.module.scss.d.ts
index 16a1182..5df7766 100644
--- a/src/components/blocks/ListBlock/styles.module.scss.d.ts
+++ b/src/components/blocks/ListBlock/styles.module.scss.d.ts
@@ -1,3 +1,2 @@
 export declare const li: string;
-export declare const separator: string;
 export declare const ul: string;
diff --git a/src/components/blocks/ProjectShowcaseBlock/index.tsx b/src/components/blocks/ProjectShowcaseBlock/index.tsx
new file mode 100644
index 0000000..a6f3aa2
--- /dev/null
+++ b/src/components/blocks/ProjectShowcaseBlock/index.tsx
@@ -0,0 +1,34 @@
+'use client';
+
+/* @ts-expect-error missing declaration files */
+import { Splide, SplideSlide } from '@splidejs/react-splide';
+import { Media } from '@/payload-types';
+import Image from 'next/image';
+import styles from './styles.module.scss';
+import '@splidejs/react-splide/css';
+
+interface Props {
+  images: Media[];
+}
+export const ProjectShowcaseBlock = ({ images }: Props) => (
+  <Splide options={{
+    autoplay: true,
+  }}
+  >
+    {images?.map((image) => (
+      <SplideSlide
+        className={styles.splideSlide}
+        key={image.id}
+      >
+        <Image
+          className={styles.image}
+          aria-label={image.text ?? ''}
+          src={image.url ?? ''}
+          alt={image.altText ?? ''}
+          width={676}
+          height={900}
+        />
+      </SplideSlide>
+    ))}
+  </Splide>
+);
diff --git a/src/components/blocks/ProjectShowcaseBlock/styles.module.scss b/src/components/blocks/ProjectShowcaseBlock/styles.module.scss
new file mode 100644
index 0000000..3f3696e
--- /dev/null
+++ b/src/components/blocks/ProjectShowcaseBlock/styles.module.scss
@@ -0,0 +1,9 @@
+.splideSlide {
+  height: 100%;
+  width: 100%;
+}
+
+.image {
+  object-fit: cover;
+  width: 100%;
+}
\ No newline at end of file
diff --git a/src/components/blocks/ProjectShowcaseBlock/styles.module.scss.d.ts b/src/components/blocks/ProjectShowcaseBlock/styles.module.scss.d.ts
new file mode 100644
index 0000000..f112a02
--- /dev/null
+++ b/src/components/blocks/ProjectShowcaseBlock/styles.module.scss.d.ts
@@ -0,0 +1,2 @@
+export declare const image: string;
+export declare const splideSlide: string;
diff --git a/src/components/blocks/SliderBlock/index.tsx b/src/components/blocks/SliderBlock/index.tsx
index ce88631..cf286bc 100644
--- a/src/components/blocks/SliderBlock/index.tsx
+++ b/src/components/blocks/SliderBlock/index.tsx
@@ -9,7 +9,6 @@ import '@splidejs/react-splide/css';
 
 type SliderBlock = Extract<NonNullable<Page['layout']>[number], { blockType: 'slider-block' }>;
 
-
 interface Props {
   items: SliderBlock;
 }
diff --git a/src/components/blocks/TypefaceBlock/index.tsx b/src/components/blocks/TypefaceBlock/index.tsx
new file mode 100644
index 0000000..a1ab5f7
--- /dev/null
+++ b/src/components/blocks/TypefaceBlock/index.tsx
@@ -0,0 +1,27 @@
+import { Project } from '@/payload-types';
+import { Subheading } from '../../typography';
+import styles from './styles.module.scss';
+
+interface Props {
+  typeface: Project['typeface'];
+}
+
+export const TypefaceBlock = ({ typeface }: Props) => (
+  <div className={styles.container}>
+    <Subheading subheading="typeface" />
+    {typeface && typeface[0]?.typeface && (
+      <img
+        src={
+          typeof typeface[0].image === 'string'
+            ? typeface[0].image
+            : typeface[0].image?.url || ''
+        }
+        alt={
+          typeof typeface[0].image === 'string'
+            ? ''
+            : typeface[0].image?.altText || ''
+        }
+      />
+    )}
+  </div>
+);
diff --git a/src/components/blocks/TypefaceBlock/styles.module.scss b/src/components/blocks/TypefaceBlock/styles.module.scss
new file mode 100644
index 0000000..261614d
--- /dev/null
+++ b/src/components/blocks/TypefaceBlock/styles.module.scss
@@ -0,0 +1,7 @@
+.container {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: 2.25rem;
+  justify-content: center;
+}
\ No newline at end of file
diff --git a/src/components/blocks/TypefaceBlock/styles.module.scss.d.ts b/src/components/blocks/TypefaceBlock/styles.module.scss.d.ts
new file mode 100644
index 0000000..cc226d6
--- /dev/null
+++ b/src/components/blocks/TypefaceBlock/styles.module.scss.d.ts
@@ -0,0 +1 @@
+export declare const container: string;
diff --git a/src/components/blocks/index.ts b/src/components/blocks/index.ts
index 9ac2bee..05a2c6e 100644
--- a/src/components/blocks/index.ts
+++ b/src/components/blocks/index.ts
@@ -1,3 +1,6 @@
+export * from './AboutBlock';
 export * from './AccoladesBlock';
 export * from './ListBlock';
+export * from './ProjectShowcaseBlock';
 export * from './SliderBlock';
+export * from './TypefaceBlock';
diff --git a/src/components/typography/RichText/styles.scss b/src/components/typography/RichText/styles.scss
index 50724d8..12a642d 100644
--- a/src/components/typography/RichText/styles.scss
+++ b/src/components/typography/RichText/styles.scss
@@ -30,21 +30,25 @@
   gap: .625rem;
   height: 100dvh;
   margin-left: auto;
-  max-width: 30.3125rem;
+  max-width: 38.75rem;
   width: 100%;
+
+  @media only screen and (width <=48rem) {
+    height: auto;
+  }
 }
 
 .RichTextSpan {
   color: $Argent;
   font-family: Newsreader, Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
-  font-size: 3rem;
+  font-size: clamp(1.5rem, 1.275rem + 1.125vw, 2.625rem);
   text-transform: lowercase !important;
 }
 
 .RichTextParagraph {
   color: $Argent;
   font-family: Cardillac, Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
-  font-size: 2.625rem;
+  font-size: clamp(1.5rem, 1.275rem + 1.125vw, 2.625rem);
   line-height: normal;
   text-align: justify;
   text-transform: uppercase;
diff --git a/src/payload/blocks/about.ts b/src/payload/blocks/about.ts
new file mode 100644
index 0000000..446bd69
--- /dev/null
+++ b/src/payload/blocks/about.ts
@@ -0,0 +1,45 @@
+import { Block } from 'payload';
+
+export const AboutBlock: Block = {
+  fields: [
+    {
+      fields: [
+        {
+          name: 'date',
+          type: 'date',
+        },
+        {
+          name: 'position',
+          type: 'text',
+        },
+        {
+          name: 'company',
+          type: 'text',
+        },
+        {
+          fields: [
+            {
+              name: 'stack',
+              type: 'text',
+            },
+          ],
+          name: 'stacks',
+          type: 'array',
+        },
+        {
+          fields: [
+            {
+              name: 'responsibility',
+              type: 'text',
+            },
+          ],
+          name: 'responsibilities',
+          type: 'array',
+        },
+      ],
+      name: 'about',
+      type: 'array',
+    },
+  ],
+  slug: 'about-block',
+};
diff --git a/src/payload/blocks/typeface.ts b/src/payload/blocks/typeface.ts
new file mode 100644
index 0000000..6f590a9
--- /dev/null
+++ b/src/payload/blocks/typeface.ts
@@ -0,0 +1,16 @@
+import { Block } from 'payload';
+
+export const TypefaceBlock: Block = {
+  fields: [
+    {
+      name: 'typeface',
+      type: 'text',
+    },
+    {
+      name: 'image',
+      relationTo: 'media',
+      type: 'upload',
+    },
+  ],
+  slug: 'typeface',
+};
diff --git a/src/payload/collections/pages.ts b/src/payload/collections/pages.ts
index 9674116..fca5200 100644
--- a/src/payload/collections/pages.ts
+++ b/src/payload/collections/pages.ts
@@ -5,6 +5,7 @@ import { SliderBlock } from '../blocks/slider';
 import { AccoladesBlock } from '../blocks/accolades';
 import { SectionBlock } from '../blocks/section';
 import { ImageGridBlock } from '../blocks/image-grid';
+import { AboutBlock } from '../blocks/about';
 
 export const Pages: CollectionConfig = {
   admin: {
@@ -38,6 +39,7 @@ export const Pages: CollectionConfig = {
     },
     {
       blocks: [
+        AboutBlock,
         AccoladesBlock,
         ContentBlock,
         SectionBlock,
diff --git a/src/payload/collections/projects.ts b/src/payload/collections/projects.ts
index 4b5af31..e71572e 100644
--- a/src/payload/collections/projects.ts
+++ b/src/payload/collections/projects.ts
@@ -2,6 +2,7 @@ import { CollectionConfig } from 'payload';
 import { ListBlock } from '../blocks/list';
 import { ContentBlock } from '../blocks/content';
 import { ImageGridBlock } from '../blocks/image-grid';
+import { TypefaceBlock } from '../blocks/typeface';
 
 export const Projects: CollectionConfig = {
   access: {
@@ -32,6 +33,11 @@ export const Projects: CollectionConfig = {
       name: 'description',
       type: 'blocks',
     },
+    {
+      blocks: [TypefaceBlock],
+      name: 'typeface',
+      type: 'blocks',
+    },
     {
       admin: {
         position: 'sidebar',
@@ -40,16 +46,6 @@ export const Projects: CollectionConfig = {
       name: 'slug',
       type: 'text',
     },
-    {
-      blocks: [ContentBlock],
-      name: 'typeface',
-      type: 'blocks',
-    },
-    {
-      blocks: [ListBlock],
-      name: 'layout',
-      type: 'blocks',
-    },
     {
       blocks: [ImageGridBlock],
       name: 'showcase',
diff --git a/src/styles/globals/globals.scss b/src/styles/globals/globals.scss
index 5b9e18f..c99d504 100644
--- a/src/styles/globals/globals.scss
+++ b/src/styles/globals/globals.scss
@@ -44,4 +44,13 @@ h2 {
   position: absolute;
   white-space: nowrap;
   width: .0625rem;
+}
+
+p,
+span,
+ul,
+ol,
+li {
+  color: $Argent;
+  line-height: 1.2;
 }
\ No newline at end of file