diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
new file mode 100644
index 00000000..0d525ea0
--- /dev/null
+++ b/.github/pull_request_template.md
@@ -0,0 +1,18 @@
+## Summarise the feature
+Issue ticket # (issue)
+
+Description:
+
+## Type of change
+- [ ] Bug fix (non-breaking change which fixes an issue)
+- [ ] New feature (non-breaking change which adds functionality)
+- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
+- [ ] This change requires a documentation update
+
+## Checklist
+- [ ] My code follows the style guidelines of this project
+- [ ] I have performed a self-review of my code
+- [ ] I have commented my code, particularly in hard-to-understand areas
+- [ ] I have made corresponding changes to the documentation
+- [ ] My changes generate no new warnings
+- [ ] I have added tests that prove my fix is effective or that my feature works
diff --git a/apps/docs/content/docs/develop/(template)/contact-us.mdx b/apps/docs/content/docs/develop/(template)/contact-us.mdx
index ea64d244..30f072b9 100644
--- a/apps/docs/content/docs/develop/(template)/contact-us.mdx
+++ b/apps/docs/content/docs/develop/(template)/contact-us.mdx
@@ -1,6 +1,428 @@
 ---
 title: Contact Us
-description: Explore the integrated accessibility testing tools in our development environment that help identify and resolve accessibility issues during development. These tools work together to ensure our components meet WCAG standards and provide a better experience for all users.
+description: A responsive, accessible contact us screen template with MYDS components.
 ---
 
-## Work In Progress
\ No newline at end of file
+import { Button } from "@/components/myds";
+import { Input } from "@/components/myds";
+import {
+  GlobeIcon,
+  GoogleIcon,
+  JataNegaraIcon,
+} from "@govtechmy/myds-react/icon";
+import { Navbar, NavbarLogo } from "@/components/myds";
+import {
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem,
+} from "@/components/myds";
+import { ThemeSwitch } from "@/components/myds";
+import { Link } from "@govtechmy/myds-react/link";
+import { clx } from "@govtechmy/myds-react/utils";
+import ContactUsTemplate from "@/templates/contact-us.tsx";
+import Preview from "@/components/preview";
+import { Tab, Tabs } from "fumadocs-ui/components/tabs";
+
+
+<Tabs items={["Preview", "Code"]} defaultValue="Preview">
+  <Tab value="Preview" className="not-prose p-0 m-0">
+    <div className="relative isolate w-full min-h-[90vh] overflow-hidden rounded-md border shadow">
+        <ContactUsTemplate/>
+    </div>
+  </Tab>
+  <Tab value="Code">
+  ```tsx
+import { Button } from "@govtechmy/myds-react/button";
+import {
+    PhoneIcon,
+    EmailIcon,
+    FacebookIcon,
+    InstagramIcon,
+    PinIcon,
+    TwitterXIcon,
+    TiktokIcon,
+} from "@govtechmy/myds-react/icon";
+
+export default function ContactUsTemplate() {
+    return (
+        <>
+            <div className="bg-bg-gray-50 border-b border-outline-200">
+                <div className="max-w-full px-6 py-10 text-center">
+                    <h1 className="text-center font-poppins text-[2rem] font-semibold sm:text-hmd">
+                        Contact Us
+                    </h1>
+                </div>
+            </div>
+
+            <main className="divide-y divide-washed-100">
+                <section className="bg-bg-gray-50">
+                    <div className="gap-6 border-washed-100 py-12 lg:py-[84px] xl:mx-auto xl:max-w-7xl xl:grid xl:grid-cols-12 xl:border-x">
+                        <div className="col-span-10 col-start-2 flex items-center justify-center">
+                            <div className="flex flex-col gap-12 sm:flex-row px-4 sm:px-0">
+                                <div className="space-y-4.5 sm:w-1/3 lg:py-16">
+                                    <p className="text-sm font-semibold uppercase tracking-[0.2em] text-txt-primary">
+                                        Office
+                                    </p>
+
+                                    <div className="space-y-2">
+                                        <p className="text-xl font-semibold">Ministry of Digital</p>
+                                        <p className="text-sm text-txt-black-700">
+                                            Aras 13, 14 &amp; 15, Blok Menara, Menara Usahawan
+                                            <br />
+                                            No. 18, Persiaran Perdana, Presint 2
+                                            <br />
+                                            Pusat Pentadbiran Kerajaan Persekutuan
+                                            <br />
+                                            62000 Putrajaya, Malaysia
+                                        </p>
+                                    </div>
+
+                                    <div className="flex gap-2 pt-3">
+                                        {[
+                                            {
+                                                name: "Google Maps",
+                                                href: "https://www.google.com/maps/dir//Menara+Usahawan",
+                                            },
+                                            {
+                                                name: "Waze",
+                                                href: "https://www.waze.com/en/live-map/directions/menara-usahawan-persiaran-perdana-18-putrajaya",
+                                            },
+                                        ].map(({ name, href }) => (
+                                            <Button
+                                                key={name}
+                                                variant="default-outline"
+                                                size="medium"
+                                                className="rounded-full"
+                                                asChild
+                                            >
+                                                <a
+                                                    href={href}
+                                                    target="_blank"
+                                                    rel="noopener noreferrer"
+                                                >
+                                                    <PinIcon className="mr-2" />
+                                                    <span className="font-medium">{name}</span>
+                                                </a>
+                                            </Button>
+                                        ))}
+                                    </div>
+                                </div>
+
+                                <iframe
+                                    title="Google Map"
+                                    className="rounded-[32px] border border-outline-200 shadow-[0_30px_100px_-10px_#4C53614D] max-sm:aspect-square sm:w-2/3"
+                                    loading="lazy"
+                                    allowFullScreen
+                                    referrerPolicy="no-referrer-when-downgrade"
+                                    src={`https://maps.google.com/maps?width=800&height=450&hl=en&q=${encodeURIComponent(
+                                        "Menara Usahawan, Persiaran Perdana, Presint 2, 62100 Putrajaya"
+                                    )}&t=&z=14&ie=UTF8&iwloc=B&output=embed`}
+                                />
+                            </div>
+                        </div>
+                    </div>
+                </section>
+
+                <section className="bg-surface-white">
+                    <div className="xl:mx-auto xl:max-w-7xl">
+                        <div className="flex w-full flex-col divide-washed-100 border-washed-100">
+                            <div className="grid w-full flex-auto grid-cols-2 divide-washed-100 px-0 max-md:divide-y md:divide-x">
+                                {[
+                                    {
+                                        icon: <PhoneIcon className="size-6" />,
+                                        title: "Telephone",
+                                        desc: "+603-8000 example",
+                                        href: "tel:+603-8000 example",
+                                    },
+                                    {
+                                        icon: <EmailIcon className="size-6" />,
+                                        title: "E-mail",
+                                        desc: "example@digital.gov.my",
+                                        href: "mailto:example@digital.gov.my",
+                                    },
+                                ].map(({ icon, title, desc, href }) => (
+                                    <a
+                                        key={title}
+                                        href={href}
+                                        className="group flex gap-4.5 border-washed-100 px-6 py-8 max-md:col-span-2 md:py-[34px]"
+                                    >
+                                        <div className="size-[42px] rounded-full bg-brand-50 p-[9px] text-foreground-primary">
+                                            {icon}
+                                        </div>
+                                        <div className="space-y-1 font-semibold">
+                                            <p className="text-sm font-semibold uppercase tracking-[0.2em] text-txt-primary">
+                                                {title}
+                                            </p>
+                                            <p className="text-lg text-foreground group-hover:underline">
+                                                {desc}
+                                            </p>
+                                        </div>
+                                    </a>
+                                ))}
+                            </div>
+
+                            <div className="grid flex-none grid-flow-row grid-cols-4 divide-x divide-washed-100 px-0 max-md:divide-y">
+                                {[
+                                    { icon: <FacebookIcon className="size-6" />, label: "Facebook", url: "#" },
+                                    { icon: <InstagramIcon className="size-6" />, label: "Instagram", url: "#" },
+                                    { icon: <TwitterXIcon className="size-6" />, label: "X", url: "#" },
+                                    { icon: <TiktokIcon className="size-6" />, label: "Tiktok", url: "#" },
+                                ].map((social) => (
+                                    <a
+                                        key={social.label}
+                                        href={social.url}
+                                        target="_blank"
+                                        rel="noopener noreferrer"
+                                        className="text-sm text-txt-black-700 hover:text-foreground hover:underline max-md:col-span-2"
+                                    >
+                                        <div className="col-span-1 flex flex-none flex-col items-center gap-2 py-6 md:gap-3 xl:w-[100px]">
+                                            <div className="flex size-[42px] items-center justify-center rounded-full bg-brand-50 text-foreground-primary">
+                                                {social.icon}
+                                            </div>
+                                            {social.label}
+                                        </div>
+                                    </a>
+                                ))}
+                            </div>
+                        </div>
+                    </div>
+                </section>
+            </main>
+        </>
+    );
+}
+  ```
+  </Tab>
+</Tabs>
+
+
+## Overview
+
+The `ContactUsTemplate` component provides a sample UI contact us screen using [MYDS](https://github.com/govtechmy/myds) components. It includes:
+
+- Responsive contact details section with Google Map frame, telephone and email.
+- Social media links with icons styled according to the MYDS design guidelines.
+- A mobile-friendly layout that adapts from stacked sections to a single row on large screens.
+
+This contact us page template is built for **rapid development** and **easy integration**. It is designed to help teams get started faster by providing a layout that adheres to the **MYDS design system**, eliminating the need to piece together individual components manually.
+
+> ⚠️ **Note**: This is a **design-only template**. It does **not** include any functional logic such as:
+> - Working contact details for Google Map frame, telephone and email
+> - Working Social media links
+> 
+> You are expected to implement such logic based on your own system needs.
+
+
+## Usage
+
+Copy the whole code below to get started!
+
+```tsx copy title="Template"
+import { Button } from "@govtechmy/myds-react/button";
+import {
+    PhoneIcon,
+    EmailIcon,
+    FacebookIcon,
+    InstagramIcon,
+    PinIcon,
+    TwitterXIcon,
+    TiktokIcon,
+} from "@govtechmy/myds-react/icon";
+
+export default function ContactUsTemplate() {
+    return (
+        <>
+            <div className="bg-bg-gray-50 border-b border-outline-200">
+                <div className="max-w-full px-6 py-10 text-center">
+                    <h1 className="text-center font-poppins text-[2rem] font-semibold sm:text-hmd">
+                        Contact Us
+                    </h1>
+                </div>
+            </div>
+
+            <main className="divide-y divide-washed-100">
+                <section className="bg-bg-gray-50">
+                    <div className="gap-6 border-washed-100 py-12 lg:py-[84px] xl:mx-auto xl:max-w-7xl xl:grid xl:grid-cols-12 xl:border-x">
+                        <div className="col-span-10 col-start-2 flex items-center justify-center">
+                            <div className="flex flex-col gap-12 sm:flex-row px-4 sm:px-0">
+                                <div className="space-y-4.5 sm:w-1/3 lg:py-16">
+                                    <p className="text-sm font-semibold uppercase tracking-[0.2em] text-txt-primary">
+                                        Office
+                                    </p>
+
+                                    <div className="space-y-2">
+                                        <p className="text-xl font-semibold">Ministry of Digital</p>
+                                        <p className="text-sm text-txt-black-700">
+                                            Aras 13, 14 &amp; 15, Blok Menara, Menara Usahawan
+                                            <br />
+                                            No. 18, Persiaran Perdana, Presint 2
+                                            <br />
+                                            Pusat Pentadbiran Kerajaan Persekutuan
+                                            <br />
+                                            62000 Putrajaya, Malaysia
+                                        </p>
+                                    </div>
+
+                                    <div className="flex gap-2 pt-3">
+                                        {[
+                                            {
+                                                name: "Google Maps",
+                                                href: "https://www.google.com/maps/dir//Menara+Usahawan",
+                                            },
+                                            {
+                                                name: "Waze",
+                                                href: "https://www.waze.com/en/live-map/directions/menara-usahawan-persiaran-perdana-18-putrajaya",
+                                            },
+                                        ].map(({ name, href }) => (
+                                            <Button
+                                                key={name}
+                                                variant="default-outline"
+                                                size="medium"
+                                                className="rounded-full"
+                                                asChild
+                                            >
+                                                <a
+                                                    href={href}
+                                                    target="_blank"
+                                                    rel="noopener noreferrer"
+                                                >
+                                                    <PinIcon className="mr-2" />
+                                                    <span className="font-medium">{name}</span>
+                                                </a>
+                                            </Button>
+                                        ))}
+                                    </div>
+                                </div>
+
+                                <iframe
+                                    title="Google Map"
+                                    className="rounded-[32px] border border-outline-200 shadow-[0_30px_100px_-10px_#4C53614D] max-sm:aspect-square sm:w-2/3"
+                                    loading="lazy"
+                                    allowFullScreen
+                                    referrerPolicy="no-referrer-when-downgrade"
+                                    src={`https://maps.google.com/maps?width=800&height=450&hl=en&q=${encodeURIComponent(
+                                        "Menara Usahawan, Persiaran Perdana, Presint 2, 62100 Putrajaya"
+                                    )}&t=&z=14&ie=UTF8&iwloc=B&output=embed`}
+                                />
+                            </div>
+                        </div>
+                    </div>
+                </section>
+
+                <section className="bg-surface-white">
+                    <div className="xl:mx-auto xl:max-w-7xl">
+                        <div className="flex w-full flex-col divide-washed-100 border-washed-100">
+                            <div className="grid w-full flex-auto grid-cols-2 divide-washed-100 px-0 max-md:divide-y md:divide-x">
+                                {[
+                                    {
+                                        icon: <PhoneIcon className="size-6" />,
+                                        title: "Telephone",
+                                        desc: "+603-8000 example",
+                                        href: "tel:+603-8000 example",
+                                    },
+                                    {
+                                        icon: <EmailIcon className="size-6" />,
+                                        title: "E-mail",
+                                        desc: "example@digital.gov.my",
+                                        href: "mailto:example@digital.gov.my",
+                                    },
+                                ].map(({ icon, title, desc, href }) => (
+                                    <a
+                                        key={title}
+                                        href={href}
+                                        className="group flex gap-4.5 border-washed-100 px-6 py-8 max-md:col-span-2 md:py-[34px]"
+                                    >
+                                        <div className="size-[42px] rounded-full bg-brand-50 p-[9px] text-foreground-primary">
+                                            {icon}
+                                        </div>
+                                        <div className="space-y-1 font-semibold">
+                                            <p className="text-sm font-semibold uppercase tracking-[0.2em] text-txt-primary">
+                                                {title}
+                                            </p>
+                                            <p className="text-lg text-foreground group-hover:underline">
+                                                {desc}
+                                            </p>
+                                        </div>
+                                    </a>
+                                ))}
+                            </div>
+
+                            <div className="grid flex-none grid-flow-row grid-cols-4 divide-x divide-washed-100 px-0 max-md:divide-y">
+                                {[
+                                    { icon: <FacebookIcon className="size-6" />, label: "Facebook", url: "#" },
+                                    { icon: <InstagramIcon className="size-6" />, label: "Instagram", url: "#" },
+                                    { icon: <TwitterXIcon className="size-6" />, label: "X", url: "#" },
+                                    { icon: <TiktokIcon className="size-6" />, label: "Tiktok", url: "#" },
+                                ].map((social) => (
+                                    <a
+                                        key={social.label}
+                                        href={social.url}
+                                        target="_blank"
+                                        rel="noopener noreferrer"
+                                        className="text-sm text-txt-black-700 hover:text-foreground hover:underline max-md:col-span-2"
+                                    >
+                                        <div className="col-span-1 flex flex-none flex-col items-center gap-2 py-6 md:gap-3 xl:w-[100px]">
+                                            <div className="flex size-[42px] items-center justify-center rounded-full bg-brand-50 text-foreground-primary">
+                                                {social.icon}
+                                            </div>
+                                            {social.label}
+                                        </div>
+                                    </a>
+                                ))}
+                            </div>
+                        </div>
+                    </div>
+                </section>
+            </main>
+        </>
+    );
+}
+```
+
+## Anatomy
+
+```
+<ContactUs />
+├── Header
+│   └── PageTitle ("Contact Us")
+├── Body
+│   ├── InfoSection
+│   │   ├── OfficeLabel ("Office")
+│   │   ├── OfficeName ("Ministry of Digital")
+│   │   ├── OfficeAddress (multiline)
+│   │   ├── MapButtons
+│   │   │   ├── Google Maps Button (PinIcon)
+│   │   │   └── Waze Button (PinIcon)
+│   └── MapSection
+│       └── GoogleMapIframe
+└── Footer
+    ├── ContactMethods
+    │   ├── Telephone (PhoneIcon)
+    │   └── Email (EmailIcon)
+    └── SocialLinks
+        ├── Facebook
+        ├── Instagram
+        ├── X (Twitter)
+        └── Tiktok
+
+```
+
+## Features
+
+- Fully responsive layout with adaptive grid for small to large screens.
+- Integrated Google Maps iframe for location display.
+- Mobile-friendly social links arranged in grid format.
+
+## Customization
+
+You can edit anything inside the code, its fully customizable!
+It’s built to help you get started quickly with a contact us UI and is meant to be adapted however you like. The template is made up of three main parts:
+
+-  `Header` - Edit to change the title, add branding, or integrate functional components (toggle/dropdown)
+-  `Body` - Edit to adjust the office details, map embed, and contact action buttons
+-  `Footer` -  Edit to change contact info, add/remove links, and update social media icons
+
+Think of this as a flexible UI starting point, where you can change anything, add anything, and make it your own!
+Previously, using just MYDS components meant you still had to design and style entire pages from scratch. Now, with the new templates, you don’t have to worry about CSS or layout design. They come with ready-made, mobile-friendly UIs to speed up your development!
\ No newline at end of file
diff --git a/apps/docs/content/docs/develop/(template)/contact-us.ms.mdx b/apps/docs/content/docs/develop/(template)/contact-us.ms.mdx
index ea64d244..9ce7b5ce 100644
--- a/apps/docs/content/docs/develop/(template)/contact-us.ms.mdx
+++ b/apps/docs/content/docs/develop/(template)/contact-us.ms.mdx
@@ -1,6 +1,429 @@
 ---
-title: Contact Us
-description: Explore the integrated accessibility testing tools in our development environment that help identify and resolve accessibility issues during development. These tools work together to ensure our components meet WCAG standards and provide a better experience for all users.
+title: Hubungi Kami
+description: Templat skrin hubungi kami yang responsif dan mesra kebolehcapaian dengan komponen MYDS.
 ---
 
-## Work In Progress
\ No newline at end of file
+import { Button } from "@/components/myds";
+import { Input } from "@/components/myds";
+import {
+  GlobeIcon,
+  GoogleIcon,
+  JataNegaraIcon,
+} from "@govtechmy/myds-react/icon";
+import { Navbar, NavbarLogo } from "@/components/myds";
+import {
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem,
+} from "@/components/myds";
+import { ThemeSwitch } from "@/components/myds";
+import { Link } from "@govtechmy/myds-react/link";
+import { clx } from "@govtechmy/myds-react/utils";
+import ContactUsTemplate from "@/templates/contact-us.tsx";
+import Preview from "@/components/preview";
+import { Tab, Tabs } from "fumadocs-ui/components/tabs";
+
+
+<Tabs items={["Preview", "Code"]} defaultValue="Preview">
+  <Tab value="Preview" className="not-prose p-0 m-0">
+    <div className="relative isolate w-full min-h-[90vh] overflow-hidden rounded-md border shadow">
+        <ContactUsTemplate/>
+    </div>
+  </Tab>
+  <Tab value="Code">
+  ```tsx
+import { Button } from "@govtechmy/myds-react/button";
+import {
+    PhoneIcon,
+    EmailIcon,
+    FacebookIcon,
+    InstagramIcon,
+    PinIcon,
+    TwitterXIcon,
+    TiktokIcon,
+} from "@govtechmy/myds-react/icon";
+
+export default function ContactUsTemplate() {
+    return (
+        <>
+            <div className="bg-bg-gray-50 border-b border-outline-200">
+                <div className="max-w-full px-6 py-10 text-center">
+                    <h1 className="text-center font-poppins text-[2rem] font-semibold sm:text-hmd">
+                        Contact Us
+                    </h1>
+                </div>
+            </div>
+
+            <main className="divide-y divide-washed-100">
+                <section className="bg-bg-gray-50">
+                    <div className="gap-6 border-washed-100 py-12 lg:py-[84px] xl:mx-auto xl:max-w-7xl xl:grid xl:grid-cols-12 xl:border-x">
+                        <div className="col-span-10 col-start-2 flex items-center justify-center">
+                            <div className="flex flex-col gap-12 sm:flex-row px-4 sm:px-0">
+                                <div className="space-y-4.5 sm:w-1/3 lg:py-16">
+                                    <p className="text-sm font-semibold uppercase tracking-[0.2em] text-txt-primary">
+                                        Office
+                                    </p>
+
+                                    <div className="space-y-2">
+                                        <p className="text-xl font-semibold">Ministry of Digital</p>
+                                        <p className="text-sm text-txt-black-700">
+                                            Aras 13, 14 &amp; 15, Blok Menara, Menara Usahawan
+                                            <br />
+                                            No. 18, Persiaran Perdana, Presint 2
+                                            <br />
+                                            Pusat Pentadbiran Kerajaan Persekutuan
+                                            <br />
+                                            62000 Putrajaya, Malaysia
+                                        </p>
+                                    </div>
+
+                                    <div className="flex gap-2 pt-3">
+                                        {[
+                                            {
+                                                name: "Google Maps",
+                                                href: "https://www.google.com/maps/dir//Menara+Usahawan",
+                                            },
+                                            {
+                                                name: "Waze",
+                                                href: "https://www.waze.com/en/live-map/directions/menara-usahawan-persiaran-perdana-18-putrajaya",
+                                            },
+                                        ].map(({ name, href }) => (
+                                            <Button
+                                                key={name}
+                                                variant="default-outline"
+                                                size="medium"
+                                                className="rounded-full"
+                                                asChild
+                                            >
+                                                <a
+                                                    href={href}
+                                                    target="_blank"
+                                                    rel="noopener noreferrer"
+                                                >
+                                                    <PinIcon className="mr-2" />
+                                                    <span className="font-medium">{name}</span>
+                                                </a>
+                                            </Button>
+                                        ))}
+                                    </div>
+                                </div>
+
+                                <iframe
+                                    title="Google Map"
+                                    className="rounded-[32px] border border-outline-200 shadow-[0_30px_100px_-10px_#4C53614D] max-sm:aspect-square sm:w-2/3"
+                                    loading="lazy"
+                                    allowFullScreen
+                                    referrerPolicy="no-referrer-when-downgrade"
+                                    src={`https://maps.google.com/maps?width=800&height=450&hl=en&q=${encodeURIComponent(
+                                        "Menara Usahawan, Persiaran Perdana, Presint 2, 62100 Putrajaya"
+                                    )}&t=&z=14&ie=UTF8&iwloc=B&output=embed`}
+                                />
+                            </div>
+                        </div>
+                    </div>
+                </section>
+
+                <section className="bg-surface-white">
+                    <div className="xl:mx-auto xl:max-w-7xl">
+                        <div className="flex w-full flex-col divide-washed-100 border-washed-100">
+                            <div className="grid w-full flex-auto grid-cols-2 divide-washed-100 px-0 max-md:divide-y md:divide-x">
+                                {[
+                                    {
+                                        icon: <PhoneIcon className="size-6" />,
+                                        title: "Telephone",
+                                        desc: "+603-8000 example",
+                                        href: "tel:+603-8000 example",
+                                    },
+                                    {
+                                        icon: <EmailIcon className="size-6" />,
+                                        title: "E-mail",
+                                        desc: "example@digital.gov.my",
+                                        href: "mailto:example@digital.gov.my",
+                                    },
+                                ].map(({ icon, title, desc, href }) => (
+                                    <a
+                                        key={title}
+                                        href={href}
+                                        className="group flex gap-4.5 border-washed-100 px-6 py-8 max-md:col-span-2 md:py-[34px]"
+                                    >
+                                        <div className="size-[42px] rounded-full bg-brand-50 p-[9px] text-foreground-primary">
+                                            {icon}
+                                        </div>
+                                        <div className="space-y-1 font-semibold">
+                                            <p className="text-sm font-semibold uppercase tracking-[0.2em] text-txt-primary">
+                                                {title}
+                                            </p>
+                                            <p className="text-lg text-foreground group-hover:underline">
+                                                {desc}
+                                            </p>
+                                        </div>
+                                    </a>
+                                ))}
+                            </div>
+
+                            <div className="grid flex-none grid-flow-row grid-cols-4 divide-x divide-washed-100 px-0 max-md:divide-y">
+                                {[
+                                    { icon: <FacebookIcon className="size-6" />, label: "Facebook", url: "#" },
+                                    { icon: <InstagramIcon className="size-6" />, label: "Instagram", url: "#" },
+                                    { icon: <TwitterXIcon className="size-6" />, label: "X", url: "#" },
+                                    { icon: <TiktokIcon className="size-6" />, label: "Tiktok", url: "#" },
+                                ].map((social) => (
+                                    <a
+                                        key={social.label}
+                                        href={social.url}
+                                        target="_blank"
+                                        rel="noopener noreferrer"
+                                        className="text-sm text-txt-black-700 hover:text-foreground hover:underline max-md:col-span-2"
+                                    >
+                                        <div className="col-span-1 flex flex-none flex-col items-center gap-2 py-6 md:gap-3 xl:w-[100px]">
+                                            <div className="flex size-[42px] items-center justify-center rounded-full bg-brand-50 text-foreground-primary">
+                                                {social.icon}
+                                            </div>
+                                            {social.label}
+                                        </div>
+                                    </a>
+                                ))}
+                            </div>
+                        </div>
+                    </div>
+                </section>
+            </main>
+        </>
+    );
+}
+  ```
+  </Tab>
+</Tabs>
+
+
+## Ringkasan Umum
+
+Komponen `ContactUsTemplate` menyediakan contoh UI untuk skrin hubungi kami menggunakan komponen [MYDS](https://github.com/govtechmy/myds) Ia merangkumi:
+
+- Bahagian butiran hubungan yang responsif dengan bingkai peta Google, nombor telefon dan e-mel.
+- Pautan media sosial dengan ikon yang digayakan mengikut garis panduan reka bentuk MYDS.
+- Reka bentuk mesra peranti mudah alih yang menyesuaikan susun atur daripada format bertindan kepada satu baris pada skrin bersaiz besar.
+
+Templat halaman hubungi kami ini dibina untuk **pembangunan yang pantas** dan **integrasi yang mudah**. Ia direka bentuk untuk membantu pasukan memulakan dengan lebih cepat melalui susun atur yang mematuhi **sistem reka bentuk MYDS**, tanpa perlu menyusun komponen secara manual.
+
+> ⚠️ **Nota**: Ini ialah **templat reka bentuk sahaja**. Ia **tidak** merangkumi sebarang logik fungsi seperti:
+> - Butiran hubungan yang berfungsi untuk bingkai peta Google, nombor telefon dan e-mel
+> - Pautan media sosial yang berfungsi
+> 
+> Anda dijangka melaksanakan logik tersebut berdasarkan keperluan sistem anda sendiri.
+
+## Penggunaan
+
+Salin keseluruhan kod di bawah untuk mula!
+
+```tsx copy title="Templat"
+import { Button } from "@govtechmy/myds-react/button";
+import {
+    PhoneIcon,
+    EmailIcon,
+    FacebookIcon,
+    InstagramIcon,
+    PinIcon,
+    TwitterXIcon,
+    TiktokIcon,
+} from "@govtechmy/myds-react/icon";
+
+export default function ContactUsTemplate() {
+    return (
+        <>
+            <div className="bg-bg-gray-50 border-b border-outline-200">
+                <div className="max-w-full px-6 py-10 text-center">
+                    <h1 className="text-center font-poppins text-[2rem] font-semibold sm:text-hmd">
+                        Contact Us
+                    </h1>
+                </div>
+            </div>
+
+            <main className="divide-y divide-washed-100">
+                <section className="bg-bg-gray-50">
+                    <div className="gap-6 border-washed-100 py-12 lg:py-[84px] xl:mx-auto xl:max-w-7xl xl:grid xl:grid-cols-12 xl:border-x">
+                        <div className="col-span-10 col-start-2 flex items-center justify-center">
+                            <div className="flex flex-col gap-12 sm:flex-row px-4 sm:px-0">
+                                <div className="space-y-4.5 sm:w-1/3 lg:py-16">
+                                    <p className="text-sm font-semibold uppercase tracking-[0.2em] text-txt-primary">
+                                        Office
+                                    </p>
+
+                                    <div className="space-y-2">
+                                        <p className="text-xl font-semibold">Ministry of Digital</p>
+                                        <p className="text-sm text-txt-black-700">
+                                            Aras 13, 14 &amp; 15, Blok Menara, Menara Usahawan
+                                            <br />
+                                            No. 18, Persiaran Perdana, Presint 2
+                                            <br />
+                                            Pusat Pentadbiran Kerajaan Persekutuan
+                                            <br />
+                                            62000 Putrajaya, Malaysia
+                                        </p>
+                                    </div>
+
+                                    <div className="flex gap-2 pt-3">
+                                        {[
+                                            {
+                                                name: "Google Maps",
+                                                href: "https://www.google.com/maps/dir//Menara+Usahawan",
+                                            },
+                                            {
+                                                name: "Waze",
+                                                href: "https://www.waze.com/en/live-map/directions/menara-usahawan-persiaran-perdana-18-putrajaya",
+                                            },
+                                        ].map(({ name, href }) => (
+                                            <Button
+                                                key={name}
+                                                variant="default-outline"
+                                                size="medium"
+                                                className="rounded-full"
+                                                asChild
+                                            >
+                                                <a
+                                                    href={href}
+                                                    target="_blank"
+                                                    rel="noopener noreferrer"
+                                                >
+                                                    <PinIcon className="mr-2" />
+                                                    <span className="font-medium">{name}</span>
+                                                </a>
+                                            </Button>
+                                        ))}
+                                    </div>
+                                </div>
+
+                                <iframe
+                                    title="Google Map"
+                                    className="rounded-[32px] border border-outline-200 shadow-[0_30px_100px_-10px_#4C53614D] max-sm:aspect-square sm:w-2/3"
+                                    loading="lazy"
+                                    allowFullScreen
+                                    referrerPolicy="no-referrer-when-downgrade"
+                                    src={`https://maps.google.com/maps?width=800&height=450&hl=en&q=${encodeURIComponent(
+                                        "Menara Usahawan, Persiaran Perdana, Presint 2, 62100 Putrajaya"
+                                    )}&t=&z=14&ie=UTF8&iwloc=B&output=embed`}
+                                />
+                            </div>
+                        </div>
+                    </div>
+                </section>
+
+                <section className="bg-surface-white">
+                    <div className="xl:mx-auto xl:max-w-7xl">
+                        <div className="flex w-full flex-col divide-washed-100 border-washed-100">
+                            <div className="grid w-full flex-auto grid-cols-2 divide-washed-100 px-0 max-md:divide-y md:divide-x">
+                                {[
+                                    {
+                                        icon: <PhoneIcon className="size-6" />,
+                                        title: "Telephone",
+                                        desc: "+603-8000 example",
+                                        href: "tel:+603-8000 example",
+                                    },
+                                    {
+                                        icon: <EmailIcon className="size-6" />,
+                                        title: "E-mail",
+                                        desc: "example@digital.gov.my",
+                                        href: "mailto:example@digital.gov.my",
+                                    },
+                                ].map(({ icon, title, desc, href }) => (
+                                    <a
+                                        key={title}
+                                        href={href}
+                                        className="group flex gap-4.5 border-washed-100 px-6 py-8 max-md:col-span-2 md:py-[34px]"
+                                    >
+                                        <div className="size-[42px] rounded-full bg-brand-50 p-[9px] text-foreground-primary">
+                                            {icon}
+                                        </div>
+                                        <div className="space-y-1 font-semibold">
+                                            <p className="text-sm font-semibold uppercase tracking-[0.2em] text-txt-primary">
+                                                {title}
+                                            </p>
+                                            <p className="text-lg text-foreground group-hover:underline">
+                                                {desc}
+                                            </p>
+                                        </div>
+                                    </a>
+                                ))}
+                            </div>
+
+                            <div className="grid flex-none grid-flow-row grid-cols-4 divide-x divide-washed-100 px-0 max-md:divide-y">
+                                {[
+                                    { icon: <FacebookIcon className="size-6" />, label: "Facebook", url: "#" },
+                                    { icon: <InstagramIcon className="size-6" />, label: "Instagram", url: "#" },
+                                    { icon: <TwitterXIcon className="size-6" />, label: "X", url: "#" },
+                                    { icon: <TiktokIcon className="size-6" />, label: "Tiktok", url: "#" },
+                                ].map((social) => (
+                                    <a
+                                        key={social.label}
+                                        href={social.url}
+                                        target="_blank"
+                                        rel="noopener noreferrer"
+                                        className="text-sm text-txt-black-700 hover:text-foreground hover:underline max-md:col-span-2"
+                                    >
+                                        <div className="col-span-1 flex flex-none flex-col items-center gap-2 py-6 md:gap-3 xl:w-[100px]">
+                                            <div className="flex size-[42px] items-center justify-center rounded-full bg-brand-50 text-foreground-primary">
+                                                {social.icon}
+                                            </div>
+                                            {social.label}
+                                        </div>
+                                    </a>
+                                ))}
+                            </div>
+                        </div>
+                    </div>
+                </section>
+            </main>
+        </>
+    );
+}
+```
+
+## Anatomi
+
+```
+<ContactUs />
+├── Pengepala
+│   └── TajukHalaman ("Hubungi Kami")
+├── Badan
+│   ├── SeksyenMaklumat
+│   │   ├── LabelPejabat ("Pejabat")
+│   │   ├── NamaPejabat ("Kementerian Digital")
+│   │   ├── AlamatPejabat (berbilang baris)
+│   │   ├── ButangPeta
+│   │   │   ├── Butang Google Maps (PinIcon)
+│   │   │   └── Butang Waze (PinIcon)
+│   └── SeksyenPeta
+│       └── GoogleMapIframe
+└── KakiHalaman
+    ├── KaedahHubungan
+    │   ├── Telefon (PhoneIcon)
+    │   └── E-mel (EmailIcon)
+    └── PautanMediaSosial
+        ├── Facebook
+        ├── Instagram
+        ├── X (Twitter)
+        └── Tiktok
+```
+
+## Ciri-ciri
+
+- Susun atur responsif sepenuhnya dengan grid adaptif untuk skrin kecil hingga besar.
+
+- Iframe Google Maps terbina bagi paparan lokasi.
+- Pautan media sosial mesra peranti mudah alih disusun dalam format grid.
+
+## Customization
+
+## Penyesuaian
+
+Anda boleh mengedit apa sahaja dalam kod ini — ia boleh disesuaikan sepenuhnya!
+Ia dibina untuk membantu anda bermula dengan cepat dengan antara muka hubungi kami, dan direka bentuk untuk disesuaikan mengikut keperluan anda. Templat ini terdiri daripada tiga bahagian utama:
+
+- `Header` – Sunting untuk menukar tajuk, menambah penjenamaan, atau mengintegrasikan komponen fungsi (togol/jatuh turun).
+- `Body` – Sunting untuk mengubah butiran pejabat, peta terbenam, dan butang tindakan hubungi.
+- `Footer` – Sunting untuk menukar maklumat hubungan, menambah/membuang pautan, dan mengemas kini ikon media sosial.
+
+Anggap ini sebagai titik permulaan UI yang fleksibel. Anda boleh ubah apa sahaja, tambah apa sahaja, dan jadikannya milik anda sepenuhnya!
+Anda tak perlu lagi design kod css secara sepenuhnya dari awal!
\ No newline at end of file
diff --git a/apps/docs/content/docs/develop/(template)/forgot-password.ms.mdx b/apps/docs/content/docs/develop/(template)/forgot-password.ms.mdx
index a2015937..63b1884e 100644
--- a/apps/docs/content/docs/develop/(template)/forgot-password.ms.mdx
+++ b/apps/docs/content/docs/develop/(template)/forgot-password.ms.mdx
@@ -1,6 +1,6 @@
 ---
 title: Lupa Kata Laluan
-description: Templat skrin terlupa kata laluan yang responsif dan mesra kebolehcapaian dengan komponen MYDS.
+description: Templat skrin lupa kata laluan yang responsif dan mesra kebolehcapaian dengan komponen MYDS.
 ---
 
 import { Button } from "@/components/myds";
@@ -334,7 +334,7 @@ Templat halaman lupa kata laluan ini dibina untuk **pembangunan yang pantas** da
 ## Penyesuaian
 
 Anda boleh mengubah suai apa sahaja dalam kod ini — ia sepenuhnya boleh diubah suai!
-Ia dibina untuk membantu anda bermula dengan cepat dengan UI log masuk, dan direka untuk diadaptasi mengikut citarasa anda.
+Ia dibina untuk membantu anda bermula dengan cepat dengan UI lupa kata laluan, dan direka untuk diadaptasi mengikut citarasa anda.
 Anggaplah ini sebagai titik permulaan UI yang fleksibel, di mana anda boleh mengubah, menambah, dan menjadikannya milik anda sepenuhnya!
 
 Sebelum ini, menggunakan komponen MYDS sahaja bermaksud anda masih perlu mereka bentuk dan menyusun gaya halaman sepenuhnya dari awal.
diff --git a/apps/docs/content/docs/develop/(template)/login.ms.mdx b/apps/docs/content/docs/develop/(template)/login.ms.mdx
index a569a307..4a9b4b65 100644
--- a/apps/docs/content/docs/develop/(template)/login.ms.mdx
+++ b/apps/docs/content/docs/develop/(template)/login.ms.mdx
@@ -1,5 +1,5 @@
 ---
-title: Login
+title: Log Masuk
 description: Templat skrin log masuk yang responsif dan menggunakan komponen MYDS.
 ---
 
diff --git a/apps/docs/templates/contact-us.tsx b/apps/docs/templates/contact-us.tsx
new file mode 100644
index 00000000..1a41a8a6
--- /dev/null
+++ b/apps/docs/templates/contact-us.tsx
@@ -0,0 +1,161 @@
+"use client";
+
+import { Button } from "@govtechmy/myds-react/button";
+import {
+    PhoneIcon,
+    EmailIcon,
+    FacebookIcon,
+    InstagramIcon,
+    PinIcon,
+    TwitterXIcon,
+    TiktokIcon,
+} from "@govtechmy/myds-react/icon";
+
+export default function ContactUsTemplate() {
+    return (
+        <>
+            <div className="border-b border-outline-200">
+                <div className="max-w-full px-6 py-10 text-center">
+                    <h1 className="text-center font-poppins text-[2rem] font-semibold sm:text-hmd">
+                        Contact Us
+                    </h1>
+                </div>
+            </div>
+
+            <main className="divide-y divide-washed-100">
+                <section className="">
+                    <div className="gap-6 border-washed-100 py-12 lg:py-[84px] xl:mx-auto xl:max-w-7xl xl:grid xl:grid-cols-12 xl:border-x">
+                        <div className="col-span-10 col-start-2 flex items-center justify-center">
+                            <div className="flex flex-col gap-12 sm:flex-row px-4 sm:px-0">
+                                <div className="space-y-4.5 sm:w-1/3 lg:py-16">
+                                    <p className="text-sm font-semibold uppercase tracking-[0.2em] text-txt-primary">
+                                        Office
+                                    </p>
+
+                                    <div className="space-y-2">
+                                        <p className="text-xl font-semibold">Ministry of Digital</p>
+                                        <p className="text-sm text-txt-black-700">
+                                            Aras 13, 14 &amp; 15, Blok Menara, Menara Usahawan
+                                            <br />
+                                            No. 18, Persiaran Perdana, Presint 2
+                                            <br />
+                                            Pusat Pentadbiran Kerajaan Persekutuan
+                                            <br />
+                                            62000 Putrajaya, Malaysia
+                                        </p>
+                                    </div>
+
+                                    <div className="flex gap-2 pt-3">
+                                        {[
+                                            {
+                                                name: "Google Maps",
+                                                href: "https://www.google.com/maps/dir//Menara+Usahawan",
+                                            },
+                                            {
+                                                name: "Waze",
+                                                href: "https://www.waze.com/en/live-map/directions/menara-usahawan-persiaran-perdana-18-putrajaya",
+                                            },
+                                        ].map(({ name, href }) => (
+                                            <Button
+                                                key={name}
+                                                variant="default-outline"
+                                                size="medium"
+                                                className="rounded-full"
+                                                asChild
+                                            >
+                                                <a
+                                                    href={href}
+                                                    target="_blank"
+                                                    rel="noopener noreferrer"
+                                                >
+                                                    <PinIcon className="mr-2" />
+                                                    <span className="font-medium">{name}</span>
+                                                </a>
+                                            </Button>
+                                        ))}
+                                    </div>
+                                </div>
+
+                                <iframe
+                                    title="Google Map"
+                                    className="rounded-[32px] border border-outline-200 shadow-[0_30px_100px_-10px_#4C53614D] max-sm:aspect-square sm:w-2/3"
+                                    loading="lazy"
+                                    allowFullScreen
+                                    referrerPolicy="no-referrer-when-downgrade"
+                                    src={`https://maps.google.com/maps?width=800&height=450&hl=en&q=${encodeURIComponent(
+                                        "Menara Usahawan, Persiaran Perdana, Presint 2, 62100 Putrajaya"
+                                    )}&t=&z=14&ie=UTF8&iwloc=B&output=embed`}
+                                />
+                            </div>
+                        </div>
+                    </div>
+                </section>
+
+                <section className="bg-surface-white">
+                    <div className="xl:mx-auto xl:max-w-7xl">
+                        <div className="flex w-full flex-col divide-washed-100 border-washed-100">
+                            <div className="grid w-full flex-auto grid-cols-2 divide-washed-100 px-0 max-md:divide-y md:divide-x">
+                                {[
+                                    {
+                                        icon: <PhoneIcon className="size-6" />,
+                                        title: "Telephone",
+                                        desc: "+603-8000 example",
+                                        href: "tel:+603-8000 example",
+                                    },
+                                    {
+                                        icon: <EmailIcon className="size-6" />,
+                                        title: "E-mail",
+                                        desc: "example@digital.gov.my",
+                                        href: "mailto:example@digital.gov.my",
+                                    },
+                                ].map(({ icon, title, desc, href }) => (
+                                    <a
+                                        key={title}
+                                        href={href}
+                                        className="group flex gap-4.5 border-washed-100 px-6 py-8 max-md:col-span-2 md:py-[34px]"
+                                    >
+                                        <div className="size-[42px] rounded-full bg-brand-50 p-[9px] text-foreground-primary">
+                                            {icon}
+                                        </div>
+                                        <div className="space-y-1 font-semibold">
+                                            <p className="text-sm font-semibold uppercase tracking-[0.2em] text-txt-primary">
+                                                {title}
+                                            </p>
+                                            <p className="text-lg text-foreground group-hover:underline">
+                                                {desc}
+                                            </p>
+                                        </div>
+                                    </a>
+                                ))}
+                            </div>
+
+                            <div className="grid flex-none grid-flow-row grid-cols-4 divide-x divide-washed-100 border-t border-washed-100 px-0 max-md:divide-y">
+                                {[
+                                    { icon: <FacebookIcon className="size-6" />, label: "Facebook", url: "#" },
+                                    { icon: <InstagramIcon className="size-6" />, label: "Instagram", url: "#" },
+                                    { icon: <TwitterXIcon className="size-6" />, label: "X", url: "#" },
+                                    { icon: <TiktokIcon className="size-6" />, label: "Tiktok", url: "#" },
+                                ].map((social) => (
+                                    <a
+                                        key={social.label}
+                                        href={social.url}
+                                        target="_blank"
+                                        rel="noopener noreferrer"
+                                        className="text-sm text-txt-black-700 hover:text-foreground hover:underline max-md:col-span-2"
+                                    >
+                                        <div className="col-span-1 flex flex-none flex-col items-center gap-2 py-6 md:gap-3 xl:w-[100px]">
+                                            <div className="flex size-[42px] items-center justify-center rounded-full bg-brand-50 text-foreground-primary">
+                                                {social.icon}
+                                            </div>
+                                            {social.label}
+                                        </div>
+                                    </a>
+                                ))}
+                            </div>
+                        </div>
+                    </div>
+                </section>
+            </main>
+        </>
+    );
+}