diff --git a/client/sanity.config.ts b/client/sanity.config.ts
index 6f4765e80..1f085072c 100644
--- a/client/sanity.config.ts
+++ b/client/sanity.config.ts
@@ -43,7 +43,8 @@ export default defineConfig({
             ),
 
             // Regular document types
-            S.documentTypeListItem("about-item").title("About Item")
+            S.documentTypeListItem("about-item").title("About Item"),
+            S.documentTypeListItem("contact-detail").title("Contact Detail")
           ])
     }),
     // Vision is a tool that lets you query your content with GROQ in the studio
diff --git a/client/sanity/schema.ts b/client/sanity/schema.ts
index 916fcbef5..6142c9701 100644
--- a/client/sanity/schema.ts
+++ b/client/sanity/schema.ts
@@ -1,7 +1,8 @@
 import { AboutItemSchema } from "@/models/sanity/AboutItem/Schema"
+import { ContactDetailSchema } from "@/models/sanity/ContactDetail/Schema"
 import { HomePageSchema } from "@/models/sanity/HomePage/Schema"
 import { type SchemaTypeDefinition } from "sanity"
 
 export const schema: { types: SchemaTypeDefinition[] } = {
-  types: [AboutItemSchema, HomePageSchema]
+  types: [AboutItemSchema, HomePageSchema, ContactDetailSchema]
 }
diff --git a/client/src/app/contact/page.tsx b/client/src/app/contact/page.tsx
new file mode 100644
index 000000000..71722e31f
--- /dev/null
+++ b/client/src/app/contact/page.tsx
@@ -0,0 +1,21 @@
+import Contact from "@/components/composite/Contact/Contact"
+import { sanityQuery } from "../../../sanity/lib/utils"
+import {
+  CONTACT_DETAIL_GROQ_QUERY,
+  ContactDetailItem
+} from "@/models/sanity/ContactDetail/Utils"
+import { Metadata } from "next"
+
+export const metadata: Metadata = {
+  title: "Contact UASC",
+  description: "Information about how to reach UASC"
+}
+
+const Page = async () => {
+  const contactDetails = await sanityQuery<ContactDetailItem[]>(
+    CONTACT_DETAIL_GROQ_QUERY
+  )
+  return <Contact items={contactDetails} />
+}
+
+export default Page
diff --git a/client/src/components/composite/Contact/Contact.story.tsx b/client/src/components/composite/Contact/Contact.story.tsx
new file mode 100644
index 000000000..5d3829659
--- /dev/null
+++ b/client/src/components/composite/Contact/Contact.story.tsx
@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import Contact from "./Contact"
+
+const meta: Meta<typeof Contact> = {
+  component: Contact
+}
+
+export default meta
+
+type Story = StoryObj<typeof Contact>
+
+export const Default: Story = {
+  args: {
+    items: [
+      {
+        title: "bookings",
+        email: "bookings@gmail.com"
+      },
+      {
+        title: "bookings",
+        description: "for guest bookings, reservations etc",
+        email: "bookings@gmail.com"
+      },
+      {
+        title: "bookings",
+        description: "for guest bookings, reservations etc",
+        email: "bookings@gmail.com"
+      }
+    ]
+  }
+}
diff --git a/client/src/components/composite/Contact/Contact.tsx b/client/src/components/composite/Contact/Contact.tsx
new file mode 100644
index 000000000..1814a98fa
--- /dev/null
+++ b/client/src/components/composite/Contact/Contact.tsx
@@ -0,0 +1,23 @@
+import FullPageBackgroundImage from "@/components/generic/FullPageBackgroundImage/FullPageBackgroundImage"
+import ContactDetailPanel, {
+  IContactDetailPanel
+} from "./ContactDetailPanel/ContactDetailPanel"
+import { Footer } from "@/components/generic/Footer/Footer"
+
+interface IContact extends IContactDetailPanel {}
+
+const Contact = ({ items }: IContact) => {
+  return (
+    <>
+      <FullPageBackgroundImage>
+        <div className="flex w-full max-w-[800px] flex-col gap-4 py-4">
+          <h2 className="text-dark-blue-100 italic">Contact Us</h2>
+          <ContactDetailPanel items={items} />
+        </div>
+      </FullPageBackgroundImage>
+      <Footer />
+    </>
+  )
+}
+
+export default Contact
diff --git a/client/src/components/composite/Contact/ContactDetailPanel/ContactDetailPanel.story.tsx b/client/src/components/composite/Contact/ContactDetailPanel/ContactDetailPanel.story.tsx
new file mode 100644
index 000000000..3b00c3120
--- /dev/null
+++ b/client/src/components/composite/Contact/ContactDetailPanel/ContactDetailPanel.story.tsx
@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import ContactDetailPanel from "./ContactDetailPanel"
+
+const meta: Meta<typeof ContactDetailPanel> = {
+  component: ContactDetailPanel
+}
+
+export default meta
+
+type Story = StoryObj<typeof ContactDetailPanel>
+
+export const Default: Story = {
+  decorators: [
+    (Story) => (
+      <div className="bg-gray-2 p-4">
+        <Story />
+      </div>
+    )
+  ],
+  args: {
+    items: [
+      {
+        title: "bookings",
+        email: "bookings@gmail.com"
+      },
+      {
+        title: "bookings",
+        description: "for guest bookings, reservations etc",
+        email: "bookings@gmail.com"
+      },
+      {
+        title: "bookings",
+        description: "for guest bookings, reservations etc",
+        email: "bookings@gmail.com"
+      }
+    ]
+  }
+}
diff --git a/client/src/components/composite/Contact/ContactDetailPanel/ContactDetailPanel.tsx b/client/src/components/composite/Contact/ContactDetailPanel/ContactDetailPanel.tsx
new file mode 100644
index 000000000..f896ea297
--- /dev/null
+++ b/client/src/components/composite/Contact/ContactDetailPanel/ContactDetailPanel.tsx
@@ -0,0 +1,27 @@
+import ContactDetail, {
+  IContactDetail
+} from "@/components/generic/ContactDetail/ContactDetail"
+
+export interface IContactDetailPanel {
+  items: IContactDetail[]
+}
+
+const ContactDetailPanel = ({ items }: IContactDetailPanel) => {
+  return (
+    <div className="flex w-full flex-col gap-2 rounded-md border border-black bg-white p-4">
+      {items.map((item) => {
+        return (
+          <span key={item.email}>
+            <ContactDetail
+              title={item.title}
+              description={item.description}
+              email={item.email}
+            />
+          </span>
+        )
+      })}
+    </div>
+  )
+}
+
+export default ContactDetailPanel
diff --git a/client/src/components/generic/ContactDetail/ContactDetail.story.tsx b/client/src/components/generic/ContactDetail/ContactDetail.story.tsx
new file mode 100644
index 000000000..b4a950409
--- /dev/null
+++ b/client/src/components/generic/ContactDetail/ContactDetail.story.tsx
@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import ContactDetail from "./ContactDetail"
+
+const meta: Meta<typeof ContactDetail> = {
+  component: ContactDetail
+}
+
+export default meta
+
+type Story = StoryObj<typeof ContactDetail>
+
+export const Default: Story = {
+  args: {
+    title: "bookings",
+    description: "for guest bookings, reservations etc",
+    email: "bookings@gmail.com"
+  }
+}
diff --git a/client/src/components/generic/ContactDetail/ContactDetail.tsx b/client/src/components/generic/ContactDetail/ContactDetail.tsx
new file mode 100644
index 000000000..54720a96e
--- /dev/null
+++ b/client/src/components/generic/ContactDetail/ContactDetail.tsx
@@ -0,0 +1,19 @@
+export interface IContactDetail {
+  title: string
+  description?: string
+  email?: string
+}
+
+const ContactDetail = ({ title, description, email }: IContactDetail) => {
+  return (
+    <div className="flex flex-col gap-2">
+      <h3>{title}</h3>
+      <h5 className="opacity-90">{description}</h5>
+      <h5 className="text-light-blue-100 font-bold">
+        <a href={`mailto:${email}`}>{email}</a>
+      </h5>
+    </div>
+  )
+}
+
+export default ContactDetail
diff --git a/client/src/components/generic/Footer/Footer.tsx b/client/src/components/generic/Footer/Footer.tsx
index 13fe052d3..f0d06775b 100644
--- a/client/src/components/generic/Footer/Footer.tsx
+++ b/client/src/components/generic/Footer/Footer.tsx
@@ -48,6 +48,12 @@ export const Footer = () => {
         <Link href="/about">
           <h5 className="uppercase">about</h5>
         </Link>
+
+        <HorizontalDivider />
+
+        <Link href="/contact">
+          <h5 className="uppercase">contact</h5>
+        </Link>
       </div>
 
       <div className="flex items-center justify-center gap-6 px-4 lg:ml-auto">
diff --git a/client/src/models/sanity/ContactDetail/Schema.ts b/client/src/models/sanity/ContactDetail/Schema.ts
new file mode 100644
index 000000000..cd45e6000
--- /dev/null
+++ b/client/src/models/sanity/ContactDetail/Schema.ts
@@ -0,0 +1,27 @@
+import { SchemaTypeDefinition, defineField } from "sanity"
+
+export const ContactDetailSchema: SchemaTypeDefinition = {
+  name: "contact-detail",
+  title: "Contact Detail",
+  description:
+    "Who users should contact for additional queries - Will be displayed on a contact page",
+  type: "document",
+  fields: [
+    defineField({
+      name: "title",
+      description: "what the contact details are for - i.e bookings",
+      type: "string",
+      validation: (v) => v.required()
+    }),
+    defineField({
+      name: "description",
+      description:
+        "Extra information that the users may need to know - i.e For guest bookings",
+      type: "text"
+    }),
+    defineField({
+      name: "email",
+      type: "email"
+    })
+  ]
+}
diff --git a/client/src/models/sanity/ContactDetail/Utils.ts b/client/src/models/sanity/ContactDetail/Utils.ts
new file mode 100644
index 000000000..846a7ce21
--- /dev/null
+++ b/client/src/models/sanity/ContactDetail/Utils.ts
@@ -0,0 +1,7 @@
+export const CONTACT_DETAIL_GROQ_QUERY = `*[_type == "contact-detail"]` as const
+
+export type ContactDetailItem = {
+  title: string
+  description?: string
+  email?: string
+}