From 7dd991724947c7669c1c38d7f0313d320dcea0d9 Mon Sep 17 00:00:00 2001
From: Muhammad Afnan Mohd Sallehuddin
 <muhammadafnanmohdsallehuddin@Muhammads-MBP-2.realtek>
Date: Fri, 15 Aug 2025 09:22:35 +0800
Subject: [PATCH 1/6] add contact use template, docs and fix ms translation

---
 .../docs/develop/(template)/contact-us.mdx    | 472 +++++++++++++++---
 .../docs/develop/(template)/contact-us.ms.mdx | 399 +++++++++++++++
 .../develop/(template)/forgot-password.ms.mdx |   4 +-
 .../docs/develop/(template)/login.ms.mdx      |   2 +-
 apps/docs/templates/contact-us.tsx            | 146 ++++++
 5 files changed, 944 insertions(+), 79 deletions(-)
 create mode 100644 apps/docs/content/docs/develop/(template)/contact-us.ms.mdx
 create mode 100644 apps/docs/templates/contact-us.tsx

diff --git a/apps/docs/content/docs/develop/(template)/contact-us.mdx b/apps/docs/content/docs/develop/(template)/contact-us.mdx
index 0494f516..d8685b50 100644
--- a/apps/docs/content/docs/develop/(template)/contact-us.mdx
+++ b/apps/docs/content/docs/develop/(template)/contact-us.mdx
@@ -1,80 +1,400 @@
 ---
-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: Contact us
+description: A responsive, accessible contact us screen template with MYDS components.
 ---
 
-## Automated Testing Tools
-
-Automated accessibility testing tools help catch issues early in the development process. While they can't replace manual testing, they provide a first line of defense against common accessibility problems.
-
-
-### ESLint Plugin: jsx-a11y
-The jsx-a11y ESLint plugin provides static analysis for accessibility rules on JSX elements, catching issues before your code even runs.
-
-**Key Features**
-- Static AST checking for accessibility rules
-- Integrated into our ESLint configuration
-- Enforces best practices at development time
-
-**Implementation**
-
-```jsx
-// In your ESLint configuration
-module.exports = {
-  extends: [
-    // ... other extensions
-    'plugin:jsx-a11y/recommended', // [!code highlight]
-  ],
-  plugins: [
-    // ... other plugins
-    'jsx-a11y', // [!code highlight]
-  ],
-  rules: {
-    // You can customize specific rules
-    'jsx-a11y/aria-role': 'error',
-    'jsx-a11y/img-redundant-alt': 'warn',
-  }
-};
+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 className="px-4 bg-bg-gray-50" />
+    </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 min-h-screen">
+            <div className="max-w-full px-6 py-10 border-b border-outline-200 text-center">
+                <h1 className="font-boldtext-center font-poppins text-[2rem]/10 font-semibold sm:text-hmd">Contact Us</h1>
+            </div>
+
+            <div className="max-w-4xl px-4 mx-auto py-16 grid grid-cols-1 lg:grid-cols-[40%_60%] gap-12 items-start justify-center">
+                <div className="space-y-4.5 lg:py-10">
+                    <p className="text-sm font-semibold uppercase tracking-[0.2em] text-foreground-primary text-blue-600">
+                        Office
+                    </p>
+                    <h2 className="py-2 text-xl font-semibold">Ministry of Digital</h2>
+                    <p className="text-sm text-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 className="flex flex-wrap gap-3 mt-6 ">
+                        <Button
+                            variant="default-outline"
+                            size="medium"
+                            className="rounded-full "
+                            asChild
+                        >
+                            <a
+                                href="https://goo.gl/maps"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                            >
+                                <PinIcon className="mr-2 text-blue-600" />
+                                <p className="text-blue-600">Google Maps</p>
+                            </a>
+                        </Button>
+                        <Button
+                            variant="default-outline"
+                            size="medium"
+                            className="rounded-full"
+                            asChild
+                        >
+                            <a
+                                href="https://waze.com/ul"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                            >
+                                <PinIcon className="mr-2 text-blue-600" />
+                                <p className="text-blue-600">Waze</p>
+                            </a>
+                        </Button>
+                    </div>
+                </div>
+                <div className="rounded-2xl overflow-hidden border border-outline-200 shadow-lg">
+                    <iframe
+                        title="Google Map"
+                        className="rounded-lg border border-outline-200 shadow-md w-full aspect-video"
+                        loading="lazy"
+                        allowFullScreen
+                        referrerPolicy="no-referrer-when-downgrade"
+                        src={`https://maps.google.com/maps?width=800&height=450&hl=en&q=${encodeURIComponent(
+                            "4, Lebuh Bestari, Presint 2, 62100 Putrajaya, Wilayah Persekutuan Putrajaya"
+                        )}&t=&z=14&ie=UTF8&iwloc=B&output=embed`}
+                    />
+                </div>
+            </div>
+
+            <div className="bg-surface-white border-t border-outline-200 py-8">
+                <div className="max-w-7xl mx-auto flex flex-wrap justify-center gap-12">
+                    <div className="grid grid-cols-1 lg:grid-cols-[1fr_1fr_auto] lg:items-stretch divide-y lg:divide-y-0 lg:divide-x divide-washed-100 border-washed-100 lg:border-x">
+                        <a
+                            href="tel:+603-8000 example"
+                            className="flex items-center gap-4.5 px-6 py-8 min-h-[96px]"
+                        >
+                            <div className="flex size-[42px] items-center justify-center rounded-full bg-brand-50 p-[9px] text-foreground-primary bg-blue-50">
+                                <PhoneIcon className="text-blue-600" />
+                            </div>
+                            <div className="space-y-1 font-semibold">
+                                <p className="text-sm font-semibold uppercase tracking-[0.2em] text-blue-500">
+                                    Telephone
+                                </p>
+                                <p className="text-lg text-foreground font-bold">+603-8000 example</p>
+                            </div>
+                        </a>
+
+                        <a
+                            href="mailto:example@digital.gov.my"
+                            className="flex items-center gap-4.5 px-6 py-8 min-h-[96px]"
+                        >
+                            <div className="flex size-[42px] items-center justify-center rounded-full bg-brand-50 p-[9px] text-foreground-primary bg-blue-50">
+                                <EmailIcon className="text-blue-600" />
+                            </div>
+                            <div className="space-y-1 font-semibold">
+                                <p className="text-sm font-semibold uppercase tracking-[0.2em] text-blue-500">
+                                    E-mail
+                                </p>
+                                <p className="text-lg text-foreground font-bold">
+                                    example@digital.gov.my
+                                </p>
+                            </div>
+                        </a>
+
+                        <div className="grid grid-cols-4 divide-x divide-washed-100">
+                            {[
+                                { icon: <FacebookIcon className="text-blue-600" />, label: "Facebook", url: "#" },
+                                { icon: <InstagramIcon className="text-blue-600" />, label: "Instagram", url: "#" },
+                                { icon: <TwitterXIcon className="text-blue-600" />, label: "X", url: "#" },
+                                { icon: <TiktokIcon className="text-blue-600" />, label: "Tiktok", url: "#" },
+                            ].map((s, i) => (
+                                <a
+                                    key={i}
+                                    href={s.url}
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    className="flex flex-col items-center justify-center gap-2 py-6 md:gap-3"
+                                >
+                                    <div className="flex size-[42px] items-center justify-center rounded-full bg-blue-50">
+                                        {s.icon}
+                                    </div>
+                                    <span className="text-sm text-black-700">{s.label}</span>
+                                </a>
+                            ))}
+                        </div>
+
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+  ```
+  </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 min-h-screen">
+            <div className="max-w-full px-6 py-10 border-b border-outline-200 text-center">
+                <h1 className="font-boldtext-center font-poppins text-[2rem]/10 font-semibold sm:text-hmd">Contact Us</h1>
+            </div>
+
+            <div className="max-w-4xl px-4 mx-auto py-16 grid grid-cols-1 lg:grid-cols-[40%_60%] gap-12 items-start justify-center">
+                <div className="space-y-4.5 lg:py-10">
+                    <p className="text-sm font-semibold uppercase tracking-[0.2em] text-foreground-primary text-blue-600">
+                        Office
+                    </p>
+                    <h2 className="py-2 text-xl font-semibold">Ministry of Digital</h2>
+                    <p className="text-sm text-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 className="flex flex-wrap gap-3 mt-6 ">
+                        <Button
+                            variant="default-outline"
+                            size="medium"
+                            className="rounded-full "
+                            asChild
+                        >
+                            <a
+                                href="https://goo.gl/maps"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                            >
+                                <PinIcon className="mr-2 text-blue-600" />
+                                <p className="text-blue-600">Google Maps</p>
+                            </a>
+                        </Button>
+                        <Button
+                            variant="default-outline"
+                            size="medium"
+                            className="rounded-full"
+                            asChild
+                        >
+                            <a
+                                href="https://waze.com/ul"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                            >
+                                <PinIcon className="mr-2 text-blue-600" />
+                                <p className="text-blue-600">Waze</p>
+                            </a>
+                        </Button>
+                    </div>
+                </div>
+                <div className="rounded-2xl overflow-hidden border border-outline-200 shadow-lg">
+                    <iframe
+                        title="Google Map"
+                        className="rounded-lg border border-outline-200 shadow-md w-full aspect-video"
+                        loading="lazy"
+                        allowFullScreen
+                        referrerPolicy="no-referrer-when-downgrade"
+                        src={`https://maps.google.com/maps?width=800&height=450&hl=en&q=${encodeURIComponent(
+                            "4, Lebuh Bestari, Presint 2, 62100 Putrajaya, Wilayah Persekutuan Putrajaya"
+                        )}&t=&z=14&ie=UTF8&iwloc=B&output=embed`}
+                    />
+                </div>
+            </div>
+
+            <div className="bg-surface-white border-t border-outline-200 py-8">
+                <div className="max-w-7xl mx-auto flex flex-wrap justify-center gap-12">
+                    <div className="grid grid-cols-1 lg:grid-cols-[1fr_1fr_auto] lg:items-stretch divide-y lg:divide-y-0 lg:divide-x divide-washed-100 border-washed-100 lg:border-x">
+                        <a
+                            href="tel:+603-8000 example"
+                            className="flex items-center gap-4.5 px-6 py-8 min-h-[96px]"
+                        >
+                            <div className="flex size-[42px] items-center justify-center rounded-full bg-brand-50 p-[9px] text-foreground-primary bg-blue-50">
+                                <PhoneIcon className="text-blue-600" />
+                            </div>
+                            <div className="space-y-1 font-semibold">
+                                <p className="text-sm font-semibold uppercase tracking-[0.2em] text-blue-500">
+                                    Telephone
+                                </p>
+                                <p className="text-lg text-foreground font-bold">+603-8000 example</p>
+                            </div>
+                        </a>
+
+                        <a
+                            href="mailto:example@digital.gov.my"
+                            className="flex items-center gap-4.5 px-6 py-8 min-h-[96px]"
+                        >
+                            <div className="flex size-[42px] items-center justify-center rounded-full bg-brand-50 p-[9px] text-foreground-primary bg-blue-50">
+                                <EmailIcon className="text-blue-600" />
+                            </div>
+                            <div className="space-y-1 font-semibold">
+                                <p className="text-sm font-semibold uppercase tracking-[0.2em] text-blue-500">
+                                    E-mail
+                                </p>
+                                <p className="text-lg text-foreground font-bold">
+                                    example@digital.gov.my
+                                </p>
+                            </div>
+                        </a>
+
+                        <div className="grid grid-cols-4 divide-x divide-washed-100">
+                            {[
+                                { icon: <FacebookIcon className="text-blue-600" />, label: "Facebook", url: "#" },
+                                { icon: <InstagramIcon className="text-blue-600" />, label: "Instagram", url: "#" },
+                                { icon: <TwitterXIcon className="text-blue-600" />, label: "X", url: "#" },
+                                { icon: <TiktokIcon className="text-blue-600" />, label: "Tiktok", url: "#" },
+                            ].map((s, i) => (
+                                <a
+                                    key={i}
+                                    href={s.url}
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    className="flex flex-col items-center justify-center gap-2 py-6 md:gap-3"
+                                >
+                                    <div className="flex size-[42px] items-center justify-center rounded-full bg-blue-50">
+                                        {s.icon}
+                                    </div>
+                                    <span className="text-sm text-black-700">{s.label}</span>
+                                </a>
+                            ))}
+                        </div>
+
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
 ```
-### Storybook: a11y-addon
-
-For documented components, we use Storybook's accessibility addon to perform runtime accessibility testing.
-
-**Key Features**
-- Integrates axe-core for comprehensive testing
-- Provides visual feedback in the Storybook UI
-- Tests components in different states and variants
-
-### VS Code: axe Accessibility Linter
-
-The axe Accessibility Linter extension for VS Code helps identify accessibility issues during development with real-time feedback.
-
-**Key Features**
-- Provides real-time feedback in your editor
-- Highlights accessibility issues with detailed explanations
-- Complements ESLint with more detailed guidance
-
-**Testing Tips**
-- Install the extension via VS Code marketplace
-- Look for highlighted issues in your JSX/TSX files
-- Hover over issues for detailed explanations and fix suggestions
-
-## Resource & References
-
-<Cards>
-  <Card
-    href="https://github.com/jsx-eslint/eslint-plugin-jsx-a11y?tab=readme-ov-file#supported-rules"
-    title="jsx-a11y"
-    description="Repository and supported rules"
-  />
-  <Card
-    href="https://storybook.js.org/docs/writing-tests/accessibility-testing"
-    title="Storybook accessibility testing"
-    description="Quick start and configuration on storybook accessibility testing"
-  />
-  <Card
-    href="https://marketplace.visualstudio.com/items?itemName=deque-systems.vscode-axe-linter"
-    title="axe Accessibility Linter"
-    description="Download link and guide for installation"
-  />
-</Cards>
\ No newline at end of file
+
+## 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!
diff --git a/apps/docs/content/docs/develop/(template)/contact-us.ms.mdx b/apps/docs/content/docs/develop/(template)/contact-us.ms.mdx
new file mode 100644
index 00000000..688e0ce0
--- /dev/null
+++ b/apps/docs/content/docs/develop/(template)/contact-us.ms.mdx
@@ -0,0 +1,399 @@
+---
+title: Hubungi Kami
+description: Templat skrin hubungi kami yang responsif dan mesra kebolehcapaian dengan komponen MYDS.
+---
+
+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 className="px-4 bg-bg-gray-50" />
+    </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 min-h-screen">
+            <div className="max-w-full px-6 py-10 border-b border-outline-200 text-center">
+                <h1 className="font-boldtext-center font-poppins text-[2rem]/10 font-semibold sm:text-hmd">Contact Us</h1>
+            </div>
+
+            <div className="max-w-4xl px-4 mx-auto py-16 grid grid-cols-1 lg:grid-cols-[40%_60%] gap-12 items-start justify-center">
+                <div className="space-y-4.5 lg:py-10">
+                    <p className="text-sm font-semibold uppercase tracking-[0.2em] text-foreground-primary text-blue-600">
+                        Office
+                    </p>
+                    <h2 className="py-2 text-xl font-semibold">Ministry of Digital</h2>
+                    <p className="text-sm text-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 className="flex flex-wrap gap-3 mt-6 ">
+                        <Button
+                            variant="default-outline"
+                            size="medium"
+                            className="rounded-full "
+                            asChild
+                        >
+                            <a
+                                href="https://goo.gl/maps"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                            >
+                                <PinIcon className="mr-2 text-blue-600" />
+                                <p className="text-blue-600">Google Maps</p>
+                            </a>
+                        </Button>
+                        <Button
+                            variant="default-outline"
+                            size="medium"
+                            className="rounded-full"
+                            asChild
+                        >
+                            <a
+                                href="https://waze.com/ul"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                            >
+                                <PinIcon className="mr-2 text-blue-600" />
+                                <p className="text-blue-600">Waze</p>
+                            </a>
+                        </Button>
+                    </div>
+                </div>
+                <div className="rounded-2xl overflow-hidden border border-outline-200 shadow-lg">
+                    <iframe
+                        title="Google Map"
+                        className="rounded-lg border border-outline-200 shadow-md w-full aspect-video"
+                        loading="lazy"
+                        allowFullScreen
+                        referrerPolicy="no-referrer-when-downgrade"
+                        src={`https://maps.google.com/maps?width=800&height=450&hl=en&q=${encodeURIComponent(
+                            "4, Lebuh Bestari, Presint 2, 62100 Putrajaya, Wilayah Persekutuan Putrajaya"
+                        )}&t=&z=14&ie=UTF8&iwloc=B&output=embed`}
+                    />
+                </div>
+            </div>
+
+            <div className="bg-surface-white border-t border-outline-200 py-8">
+                <div className="max-w-7xl mx-auto flex flex-wrap justify-center gap-12">
+                    <div className="grid grid-cols-1 lg:grid-cols-[1fr_1fr_auto] lg:items-stretch divide-y lg:divide-y-0 lg:divide-x divide-washed-100 border-washed-100 lg:border-x">
+                        <a
+                            href="tel:+603-8000 example"
+                            className="flex items-center gap-4.5 px-6 py-8 min-h-[96px]"
+                        >
+                            <div className="flex size-[42px] items-center justify-center rounded-full bg-brand-50 p-[9px] text-foreground-primary bg-blue-50">
+                                <PhoneIcon className="text-blue-600" />
+                            </div>
+                            <div className="space-y-1 font-semibold">
+                                <p className="text-sm font-semibold uppercase tracking-[0.2em] text-blue-500">
+                                    Telephone
+                                </p>
+                                <p className="text-lg text-foreground font-bold">+603-8000 example</p>
+                            </div>
+                        </a>
+
+                        <a
+                            href="mailto:example@digital.gov.my"
+                            className="flex items-center gap-4.5 px-6 py-8 min-h-[96px]"
+                        >
+                            <div className="flex size-[42px] items-center justify-center rounded-full bg-brand-50 p-[9px] text-foreground-primary bg-blue-50">
+                                <EmailIcon className="text-blue-600" />
+                            </div>
+                            <div className="space-y-1 font-semibold">
+                                <p className="text-sm font-semibold uppercase tracking-[0.2em] text-blue-500">
+                                    E-mail
+                                </p>
+                                <p className="text-lg text-foreground font-bold">
+                                    example@digital.gov.my
+                                </p>
+                            </div>
+                        </a>
+
+                        <div className="grid grid-cols-4 divide-x divide-washed-100">
+                            {[
+                                { icon: <FacebookIcon className="text-blue-600" />, label: "Facebook", url: "#" },
+                                { icon: <InstagramIcon className="text-blue-600" />, label: "Instagram", url: "#" },
+                                { icon: <TwitterXIcon className="text-blue-600" />, label: "X", url: "#" },
+                                { icon: <TiktokIcon className="text-blue-600" />, label: "Tiktok", url: "#" },
+                            ].map((s, i) => (
+                                <a
+                                    key={i}
+                                    href={s.url}
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    className="flex flex-col items-center justify-center gap-2 py-6 md:gap-3"
+                                >
+                                    <div className="flex size-[42px] items-center justify-center rounded-full bg-blue-50">
+                                        {s.icon}
+                                    </div>
+                                    <span className="text-sm text-black-700">{s.label}</span>
+                                </a>
+                            ))}
+                        </div>
+
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+  ```
+  </Tab>
+</Tabs>
+
+
+## Ringkasan Umum
+
+Komponen `ContactUsTemplate` menyediakan contoh UI untuk skrin lupa kata laluan 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
+> 
+> You are expected to implement such logic based on your own system needs.
+
+## 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 min-h-screen">
+            <div className="max-w-full px-6 py-10 border-b border-outline-200 text-center">
+                <h1 className="font-boldtext-center font-poppins text-[2rem]/10 font-semibold sm:text-hmd">Contact Us</h1>
+            </div>
+
+            <div className="max-w-4xl px-4 mx-auto py-16 grid grid-cols-1 lg:grid-cols-[40%_60%] gap-12 items-start justify-center">
+                <div className="space-y-4.5 lg:py-10">
+                    <p className="text-sm font-semibold uppercase tracking-[0.2em] text-foreground-primary text-blue-600">
+                        Office
+                    </p>
+                    <h2 className="py-2 text-xl font-semibold">Ministry of Digital</h2>
+                    <p className="text-sm text-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 className="flex flex-wrap gap-3 mt-6 ">
+                        <Button
+                            variant="default-outline"
+                            size="medium"
+                            className="rounded-full "
+                            asChild
+                        >
+                            <a
+                                href="https://goo.gl/maps"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                            >
+                                <PinIcon className="mr-2 text-blue-600" />
+                                <p className="text-blue-600">Google Maps</p>
+                            </a>
+                        </Button>
+                        <Button
+                            variant="default-outline"
+                            size="medium"
+                            className="rounded-full"
+                            asChild
+                        >
+                            <a
+                                href="https://waze.com/ul"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                            >
+                                <PinIcon className="mr-2 text-blue-600" />
+                                <p className="text-blue-600">Waze</p>
+                            </a>
+                        </Button>
+                    </div>
+                </div>
+                <div className="rounded-2xl overflow-hidden border border-outline-200 shadow-lg">
+                    <iframe
+                        title="Google Map"
+                        className="rounded-lg border border-outline-200 shadow-md w-full aspect-video"
+                        loading="lazy"
+                        allowFullScreen
+                        referrerPolicy="no-referrer-when-downgrade"
+                        src={`https://maps.google.com/maps?width=800&height=450&hl=en&q=${encodeURIComponent(
+                            "4, Lebuh Bestari, Presint 2, 62100 Putrajaya, Wilayah Persekutuan Putrajaya"
+                        )}&t=&z=14&ie=UTF8&iwloc=B&output=embed`}
+                    />
+                </div>
+            </div>
+
+            <div className="bg-surface-white border-t border-outline-200 py-8">
+                <div className="max-w-7xl mx-auto flex flex-wrap justify-center gap-12">
+                    <div className="grid grid-cols-1 lg:grid-cols-[1fr_1fr_auto] lg:items-stretch divide-y lg:divide-y-0 lg:divide-x divide-washed-100 border-washed-100 lg:border-x">
+                        <a
+                            href="tel:+603-8000 example"
+                            className="flex items-center gap-4.5 px-6 py-8 min-h-[96px]"
+                        >
+                            <div className="flex size-[42px] items-center justify-center rounded-full bg-brand-50 p-[9px] text-foreground-primary bg-blue-50">
+                                <PhoneIcon className="text-blue-600" />
+                            </div>
+                            <div className="space-y-1 font-semibold">
+                                <p className="text-sm font-semibold uppercase tracking-[0.2em] text-blue-500">
+                                    Telephone
+                                </p>
+                                <p className="text-lg text-foreground font-bold">+603-8000 example</p>
+                            </div>
+                        </a>
+
+                        <a
+                            href="mailto:example@digital.gov.my"
+                            className="flex items-center gap-4.5 px-6 py-8 min-h-[96px]"
+                        >
+                            <div className="flex size-[42px] items-center justify-center rounded-full bg-brand-50 p-[9px] text-foreground-primary bg-blue-50">
+                                <EmailIcon className="text-blue-600" />
+                            </div>
+                            <div className="space-y-1 font-semibold">
+                                <p className="text-sm font-semibold uppercase tracking-[0.2em] text-blue-500">
+                                    E-mail
+                                </p>
+                                <p className="text-lg text-foreground font-bold">
+                                    example@digital.gov.my
+                                </p>
+                            </div>
+                        </a>
+
+                        <div className="grid grid-cols-4 divide-x divide-washed-100">
+                            {[
+                                { icon: <FacebookIcon className="text-blue-600" />, label: "Facebook", url: "#" },
+                                { icon: <InstagramIcon className="text-blue-600" />, label: "Instagram", url: "#" },
+                                { icon: <TwitterXIcon className="text-blue-600" />, label: "X", url: "#" },
+                                { icon: <TiktokIcon className="text-blue-600" />, label: "Tiktok", url: "#" },
+                            ].map((s, i) => (
+                                <a
+                                    key={i}
+                                    href={s.url}
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    className="flex flex-col items-center justify-center gap-2 py-6 md:gap-3"
+                                >
+                                    <div className="flex size-[42px] items-center justify-center rounded-full bg-blue-50">
+                                        {s.icon}
+                                    </div>
+                                    <span className="text-sm text-black-700">{s.label}</span>
+                                </a>
+                            ))}
+                        </div>
+
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+```
+
+## 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..467f4a91
--- /dev/null
+++ b/apps/docs/templates/contact-us.tsx
@@ -0,0 +1,146 @@
+"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="bg-bg-gray-50 min-h-screen">
+            <div className="max-w-full px-6 py-10 border-b border-outline-200 text-center">
+                <h1 className="font-boldtext-center font-poppins text-[2rem]/10 font-semibold sm:text-hmd">Contact Us</h1>
+            </div>
+
+            <div className="max-w-4xl px-4 mx-auto py-16 grid grid-cols-1 lg:grid-cols-[40%_60%] gap-12 items-start justify-center">
+                <div className="space-y-4.5 lg:py-10">
+                    <p className="text-sm font-semibold uppercase tracking-[0.2em] text-foreground-primary text-blue-600">
+                        Office
+                    </p>
+                    <h2 className="py-2 text-xl font-semibold">Ministry of Digital</h2>
+                    <p className="text-sm text-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 className="flex flex-wrap gap-3 mt-6 ">
+                        <Button
+                            variant="default-outline"
+                            size="medium"
+                            className="rounded-full "
+                            asChild
+                        >
+                            <a
+                                href="https://goo.gl/maps"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                            >
+                                <PinIcon className="mr-2 text-blue-600" />
+                                <p className="text-blue-600">Google Maps</p>
+                            </a>
+                        </Button>
+                        <Button
+                            variant="default-outline"
+                            size="medium"
+                            className="rounded-full"
+                            asChild
+                        >
+                            <a
+                                href="https://waze.com/ul"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                            >
+                                <PinIcon className="mr-2 text-blue-600" />
+                                <p className="text-blue-600">Waze</p>
+                            </a>
+                        </Button>
+                    </div>
+                </div>
+                <div className="rounded-2xl overflow-hidden border border-outline-200 shadow-lg">
+                    <iframe
+                        title="Google Map"
+                        className="rounded-lg border border-outline-200 shadow-md w-full aspect-video"
+                        loading="lazy"
+                        allowFullScreen
+                        referrerPolicy="no-referrer-when-downgrade"
+                        src={`https://maps.google.com/maps?width=800&height=450&hl=en&q=${encodeURIComponent(
+                            "4, Lebuh Bestari, Presint 2, 62100 Putrajaya, Wilayah Persekutuan Putrajaya"
+                        )}&t=&z=14&ie=UTF8&iwloc=B&output=embed`}
+                    />
+                </div>
+            </div>
+
+            <div className="bg-surface-white border-t border-outline-200 py-8">
+                <div className="max-w-7xl mx-auto flex flex-wrap justify-center gap-12">
+                    <div className="grid grid-cols-1 lg:grid-cols-[1fr_1fr_auto] lg:items-stretch divide-y lg:divide-y-0 lg:divide-x divide-washed-100 border-washed-100 lg:border-x">
+                        <a
+                            href="tel:+603-8000 example"
+                            className="flex items-center gap-4.5 px-6 py-8 min-h-[96px]"
+                        >
+                            <div className="flex size-[42px] items-center justify-center rounded-full bg-brand-50 p-[9px] text-foreground-primary bg-blue-50">
+                                <PhoneIcon className="text-blue-600" />
+                            </div>
+                            <div className="space-y-1 font-semibold">
+                                <p className="text-sm font-semibold uppercase tracking-[0.2em] text-blue-500">
+                                    Telephone
+                                </p>
+                                <p className="text-lg text-foreground font-bold">+603-8000 example</p>
+                            </div>
+                        </a>
+
+                        <a
+                            href="mailto:example@digital.gov.my"
+                            className="flex items-center gap-4.5 px-6 py-8 min-h-[96px]"
+                        >
+                            <div className="flex size-[42px] items-center justify-center rounded-full bg-brand-50 p-[9px] text-foreground-primary bg-blue-50">
+                                <EmailIcon className="text-blue-600" />
+                            </div>
+                            <div className="space-y-1 font-semibold">
+                                <p className="text-sm font-semibold uppercase tracking-[0.2em] text-blue-500">
+                                    E-mail
+                                </p>
+                                <p className="text-lg text-foreground font-bold">
+                                    example@digital.gov.my
+                                </p>
+                            </div>
+                        </a>
+
+                        <div className="grid grid-cols-4 divide-x divide-washed-100">
+                            {[
+                                { icon: <FacebookIcon className="text-blue-600" />, label: "Facebook", url: "#" },
+                                { icon: <InstagramIcon className="text-blue-600" />, label: "Instagram", url: "#" },
+                                { icon: <TwitterXIcon className="text-blue-600" />, label: "X", url: "#" },
+                                { icon: <TiktokIcon className="text-blue-600" />, label: "Tiktok", url: "#" },
+                            ].map((s, i) => (
+                                <a
+                                    key={i}
+                                    href={s.url}
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    className="flex flex-col items-center justify-center gap-2 py-6 md:gap-3"
+                                >
+                                    <div className="flex size-[42px] items-center justify-center rounded-full bg-blue-50">
+                                        {s.icon}
+                                    </div>
+                                    <span className="text-sm text-black-700">{s.label}</span>
+                                </a>
+                            ))}
+                        </div>
+
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}

From 0d32215a266adcbc36ad9194171b5534525ee9f2 Mon Sep 17 00:00:00 2001
From: Muhammad Afnan Mohd Sallehuddin
 <muhammadafnanmohdsallehuddin@Muhammads-MBP-2.realtek>
Date: Fri, 15 Aug 2025 09:47:09 +0800
Subject: [PATCH 2/6] update contact us template lg to xl column div, update ms
 translation

---
 .../docs/develop/(template)/contact-us.mdx    | 80 +++++++++++--------
 apps/docs/templates/contact-us.tsx            | 36 ++++-----
 2 files changed, 63 insertions(+), 53 deletions(-)

diff --git a/apps/docs/content/docs/develop/(template)/contact-us.mdx b/apps/docs/content/docs/develop/(template)/contact-us.mdx
index d8685b50..641d4c7d 100644
--- a/apps/docs/content/docs/develop/(template)/contact-us.mdx
+++ b/apps/docs/content/docs/develop/(template)/contact-us.mdx
@@ -1,5 +1,5 @@
 ---
-title: Contact us
+title: Contact Us
 description: A responsive, accessible contact us screen template with MYDS components.
 ---
 
@@ -54,7 +54,7 @@ export default function ContactUsTemplate() {
 
             <div className="max-w-4xl px-4 mx-auto py-16 grid grid-cols-1 lg:grid-cols-[40%_60%] gap-12 items-start justify-center">
                 <div className="space-y-4.5 lg:py-10">
-                    <p className="text-sm font-semibold uppercase tracking-[0.2em] text-foreground-primary text-blue-600">
+                    <p className="text-sm font-semibold uppercase tracking-[0.2em] text-foreground-primary text-txt-primary">
                         Office
                     </p>
                     <h2 className="py-2 text-xl font-semibold">Ministry of Digital</h2>
@@ -80,8 +80,8 @@ export default function ContactUsTemplate() {
                                 target="_blank"
                                 rel="noopener noreferrer"
                             >
-                                <PinIcon className="mr-2 text-blue-600" />
-                                <p className="text-blue-600">Google Maps</p>
+                                <PinIcon className="mr-2 text-txt-primary" />
+                                <p className="text-txt-primary">Google Maps</p>
                             </a>
                         </Button>
                         <Button
@@ -95,8 +95,8 @@ export default function ContactUsTemplate() {
                                 target="_blank"
                                 rel="noopener noreferrer"
                             >
-                                <PinIcon className="mr-2 text-blue-600" />
-                                <p className="text-blue-600">Waze</p>
+                                <PinIcon className="mr-2 text-txt-primary" />
+                                <p className="text-txt-primary">Waze</p>
                             </a>
                         </Button>
                     </div>
@@ -122,11 +122,11 @@ export default function ContactUsTemplate() {
                             href="tel:+603-8000 example"
                             className="flex items-center gap-4.5 px-6 py-8 min-h-[96px]"
                         >
-                            <div className="flex size-[42px] items-center justify-center rounded-full bg-brand-50 p-[9px] text-foreground-primary bg-blue-50">
-                                <PhoneIcon className="text-blue-600" />
+                            <div className="flex size-[42px] items-center justify-center rounded-full bg-brand-50 p-[9px] text-foreground-primary bg-bg-washed">
+                                <PhoneIcon className="text-txt-primary" />
                             </div>
                             <div className="space-y-1 font-semibold">
-                                <p className="text-sm font-semibold uppercase tracking-[0.2em] text-blue-500">
+                                <p className="text-sm font-semibold uppercase tracking-[0.2em] text-txt-primary">
                                     Telephone
                                 </p>
                                 <p className="text-lg text-foreground font-bold">+603-8000 example</p>
@@ -137,11 +137,11 @@ export default function ContactUsTemplate() {
                             href="mailto:example@digital.gov.my"
                             className="flex items-center gap-4.5 px-6 py-8 min-h-[96px]"
                         >
-                            <div className="flex size-[42px] items-center justify-center rounded-full bg-brand-50 p-[9px] text-foreground-primary bg-blue-50">
-                                <EmailIcon className="text-blue-600" />
+                            <div className="flex size-[42px] items-center justify-center rounded-full bg-brand-50 p-[9px] text-foreground-primary bg-bg-washed">
+                                <EmailIcon className="text-txt-primary" />
                             </div>
                             <div className="space-y-1 font-semibold">
-                                <p className="text-sm font-semibold uppercase tracking-[0.2em] text-blue-500">
+                                <p className="text-sm font-semibold uppercase tracking-[0.2em] text-txt-primary">
                                     E-mail
                                 </p>
                                 <p className="text-lg text-foreground font-bold">
@@ -152,10 +152,10 @@ export default function ContactUsTemplate() {
 
                         <div className="grid grid-cols-4 divide-x divide-washed-100">
                             {[
-                                { icon: <FacebookIcon className="text-blue-600" />, label: "Facebook", url: "#" },
-                                { icon: <InstagramIcon className="text-blue-600" />, label: "Instagram", url: "#" },
-                                { icon: <TwitterXIcon className="text-blue-600" />, label: "X", url: "#" },
-                                { icon: <TiktokIcon className="text-blue-600" />, label: "Tiktok", url: "#" },
+                                { icon: <FacebookIcon className="text-txt-primary" />, label: "Facebook", url: "#" },
+                                { icon: <InstagramIcon className="text-txt-primary" />, label: "Instagram", url: "#" },
+                                { icon: <TwitterXIcon className="text-txt-primary" />, label: "X", url: "#" },
+                                { icon: <TiktokIcon className="text-txt-primary" />, label: "Tiktok", url: "#" },
                             ].map((s, i) => (
                                 <a
                                     key={i}
@@ -164,7 +164,7 @@ export default function ContactUsTemplate() {
                                     rel="noopener noreferrer"
                                     className="flex flex-col items-center justify-center gap-2 py-6 md:gap-3"
                                 >
-                                    <div className="flex size-[42px] items-center justify-center rounded-full bg-blue-50">
+                                    <div className="flex size-[42px] items-center justify-center rounded-full bg-bg-washed">
                                         {s.icon}
                                     </div>
                                     <span className="text-sm text-black-700">{s.label}</span>
@@ -183,8 +183,6 @@ export default function ContactUsTemplate() {
 </Tabs>
 
 
-
-
 ## Overview
 
 The `ContactUsTemplate` component provides a sample UI contact us screen using [MYDS](https://github.com/govtechmy/myds) components. It includes:
@@ -227,7 +225,7 @@ export default function ContactUsTemplate() {
 
             <div className="max-w-4xl px-4 mx-auto py-16 grid grid-cols-1 lg:grid-cols-[40%_60%] gap-12 items-start justify-center">
                 <div className="space-y-4.5 lg:py-10">
-                    <p className="text-sm font-semibold uppercase tracking-[0.2em] text-foreground-primary text-blue-600">
+                    <p className="text-sm font-semibold uppercase tracking-[0.2em] text-foreground-primary text-txt-primary">
                         Office
                     </p>
                     <h2 className="py-2 text-xl font-semibold">Ministry of Digital</h2>
@@ -253,8 +251,8 @@ export default function ContactUsTemplate() {
                                 target="_blank"
                                 rel="noopener noreferrer"
                             >
-                                <PinIcon className="mr-2 text-blue-600" />
-                                <p className="text-blue-600">Google Maps</p>
+                                <PinIcon className="mr-2 text-txt-primary" />
+                                <p className="text-txt-primary">Google Maps</p>
                             </a>
                         </Button>
                         <Button
@@ -268,8 +266,8 @@ export default function ContactUsTemplate() {
                                 target="_blank"
                                 rel="noopener noreferrer"
                             >
-                                <PinIcon className="mr-2 text-blue-600" />
-                                <p className="text-blue-600">Waze</p>
+                                <PinIcon className="mr-2 text-txt-primary" />
+                                <p className="text-txt-primary">Waze</p>
                             </a>
                         </Button>
                     </div>
@@ -295,11 +293,11 @@ export default function ContactUsTemplate() {
                             href="tel:+603-8000 example"
                             className="flex items-center gap-4.5 px-6 py-8 min-h-[96px]"
                         >
-                            <div className="flex size-[42px] items-center justify-center rounded-full bg-brand-50 p-[9px] text-foreground-primary bg-blue-50">
-                                <PhoneIcon className="text-blue-600" />
+                            <div className="flex size-[42px] items-center justify-center rounded-full bg-brand-50 p-[9px] text-foreground-primary bg-bg-washed">
+                                <PhoneIcon className="text-txt-primary" />
                             </div>
                             <div className="space-y-1 font-semibold">
-                                <p className="text-sm font-semibold uppercase tracking-[0.2em] text-blue-500">
+                                <p className="text-sm font-semibold uppercase tracking-[0.2em] text-txt-primary">
                                     Telephone
                                 </p>
                                 <p className="text-lg text-foreground font-bold">+603-8000 example</p>
@@ -310,11 +308,11 @@ export default function ContactUsTemplate() {
                             href="mailto:example@digital.gov.my"
                             className="flex items-center gap-4.5 px-6 py-8 min-h-[96px]"
                         >
-                            <div className="flex size-[42px] items-center justify-center rounded-full bg-brand-50 p-[9px] text-foreground-primary bg-blue-50">
-                                <EmailIcon className="text-blue-600" />
+                            <div className="flex size-[42px] items-center justify-center rounded-full bg-brand-50 p-[9px] text-foreground-primary bg-bg-washed">
+                                <EmailIcon className="text-txt-primary" />
                             </div>
                             <div className="space-y-1 font-semibold">
-                                <p className="text-sm font-semibold uppercase tracking-[0.2em] text-blue-500">
+                                <p className="text-sm font-semibold uppercase tracking-[0.2em] text-txt-primary">
                                     E-mail
                                 </p>
                                 <p className="text-lg text-foreground font-bold">
@@ -325,10 +323,10 @@ export default function ContactUsTemplate() {
 
                         <div className="grid grid-cols-4 divide-x divide-washed-100">
                             {[
-                                { icon: <FacebookIcon className="text-blue-600" />, label: "Facebook", url: "#" },
-                                { icon: <InstagramIcon className="text-blue-600" />, label: "Instagram", url: "#" },
-                                { icon: <TwitterXIcon className="text-blue-600" />, label: "X", url: "#" },
-                                { icon: <TiktokIcon className="text-blue-600" />, label: "Tiktok", url: "#" },
+                                { icon: <FacebookIcon className="text-txt-primary" />, label: "Facebook", url: "#" },
+                                { icon: <InstagramIcon className="text-txt-primary" />, label: "Instagram", url: "#" },
+                                { icon: <TwitterXIcon className="text-txt-primary" />, label: "X", url: "#" },
+                                { icon: <TiktokIcon className="text-txt-primary" />, label: "Tiktok", url: "#" },
                             ].map((s, i) => (
                                 <a
                                     key={i}
@@ -337,7 +335,7 @@ export default function ContactUsTemplate() {
                                     rel="noopener noreferrer"
                                     className="flex flex-col items-center justify-center gap-2 py-6 md:gap-3"
                                 >
-                                    <div className="flex size-[42px] items-center justify-center rounded-full bg-blue-50">
+                                    <div className="flex size-[42px] items-center justify-center rounded-full bg-bg-washed">
                                         {s.icon}
                                     </div>
                                     <span className="text-sm text-black-700">{s.label}</span>
@@ -398,3 +396,15 @@ It’s built to help you get started quickly with a contact us UI and is meant t
 
 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!
+
+## 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:
+
+- `HeaderLogin` – Edit untuk menukar logo dan mengintegrasi komponen berfungsi (togol/dropdown)
+- `BodyLogin` – Edit untuk mengendalikan logik log masuk
+- `FooterLogin` – Edit untuk menukar logo, info, dan pautan
+
+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/templates/contact-us.tsx b/apps/docs/templates/contact-us.tsx
index 467f4a91..4b4f4fc5 100644
--- a/apps/docs/templates/contact-us.tsx
+++ b/apps/docs/templates/contact-us.tsx
@@ -18,9 +18,9 @@ export default function ContactUsTemplate() {
                 <h1 className="font-boldtext-center font-poppins text-[2rem]/10 font-semibold sm:text-hmd">Contact Us</h1>
             </div>
 
-            <div className="max-w-4xl px-4 mx-auto py-16 grid grid-cols-1 lg:grid-cols-[40%_60%] gap-12 items-start justify-center">
+            <div className="max-w-4xl px-4 mx-auto py-16 grid grid-cols-1 xl:grid-cols-[40%_60%] gap-12 items-start justify-center">
                 <div className="space-y-4.5 lg:py-10">
-                    <p className="text-sm font-semibold uppercase tracking-[0.2em] text-foreground-primary text-blue-600">
+                    <p className="text-sm font-semibold uppercase tracking-[0.2em] text-foreground-primary text-txt-primary">
                         Office
                     </p>
                     <h2 className="py-2 text-xl font-semibold">Ministry of Digital</h2>
@@ -46,8 +46,8 @@ export default function ContactUsTemplate() {
                                 target="_blank"
                                 rel="noopener noreferrer"
                             >
-                                <PinIcon className="mr-2 text-blue-600" />
-                                <p className="text-blue-600">Google Maps</p>
+                                <PinIcon className="mr-2 text-txt-primary" />
+                                <p className="text-txt-primary">Google Maps</p>
                             </a>
                         </Button>
                         <Button
@@ -61,8 +61,8 @@ export default function ContactUsTemplate() {
                                 target="_blank"
                                 rel="noopener noreferrer"
                             >
-                                <PinIcon className="mr-2 text-blue-600" />
-                                <p className="text-blue-600">Waze</p>
+                                <PinIcon className="mr-2 text-txt-primary" />
+                                <p className="text-txt-primary">Waze</p>
                             </a>
                         </Button>
                     </div>
@@ -83,16 +83,16 @@ export default function ContactUsTemplate() {
 
             <div className="bg-surface-white border-t border-outline-200 py-8">
                 <div className="max-w-7xl mx-auto flex flex-wrap justify-center gap-12">
-                    <div className="grid grid-cols-1 lg:grid-cols-[1fr_1fr_auto] lg:items-stretch divide-y lg:divide-y-0 lg:divide-x divide-washed-100 border-washed-100 lg:border-x">
+                    <div className="grid grid-cols-1 xl:grid-cols-[1fr_1fr_auto] xl:items-stretch divide-y xl:divide-y-0 xl:divide-x divide-washed-100 border-washed-100 xl:border-x">
                         <a
                             href="tel:+603-8000 example"
                             className="flex items-center gap-4.5 px-6 py-8 min-h-[96px]"
                         >
-                            <div className="flex size-[42px] items-center justify-center rounded-full bg-brand-50 p-[9px] text-foreground-primary bg-blue-50">
-                                <PhoneIcon className="text-blue-600" />
+                            <div className="flex size-[42px] items-center justify-center rounded-full bg-brand-50 p-[9px] text-foreground-primary bg-bg-washed">
+                                <PhoneIcon className="text-txt-primary" />
                             </div>
                             <div className="space-y-1 font-semibold">
-                                <p className="text-sm font-semibold uppercase tracking-[0.2em] text-blue-500">
+                                <p className="text-sm font-semibold uppercase tracking-[0.2em] text-txt-primary">
                                     Telephone
                                 </p>
                                 <p className="text-lg text-foreground font-bold">+603-8000 example</p>
@@ -103,11 +103,11 @@ export default function ContactUsTemplate() {
                             href="mailto:example@digital.gov.my"
                             className="flex items-center gap-4.5 px-6 py-8 min-h-[96px]"
                         >
-                            <div className="flex size-[42px] items-center justify-center rounded-full bg-brand-50 p-[9px] text-foreground-primary bg-blue-50">
-                                <EmailIcon className="text-blue-600" />
+                            <div className="flex size-[42px] items-center justify-center rounded-full bg-brand-50 p-[9px] text-foreground-primary bg-bg-washed">
+                                <EmailIcon className="text-txt-primary" />
                             </div>
                             <div className="space-y-1 font-semibold">
-                                <p className="text-sm font-semibold uppercase tracking-[0.2em] text-blue-500">
+                                <p className="text-sm font-semibold uppercase tracking-[0.2em] text-txt-primary">
                                     E-mail
                                 </p>
                                 <p className="text-lg text-foreground font-bold">
@@ -118,10 +118,10 @@ export default function ContactUsTemplate() {
 
                         <div className="grid grid-cols-4 divide-x divide-washed-100">
                             {[
-                                { icon: <FacebookIcon className="text-blue-600" />, label: "Facebook", url: "#" },
-                                { icon: <InstagramIcon className="text-blue-600" />, label: "Instagram", url: "#" },
-                                { icon: <TwitterXIcon className="text-blue-600" />, label: "X", url: "#" },
-                                { icon: <TiktokIcon className="text-blue-600" />, label: "Tiktok", url: "#" },
+                                { icon: <FacebookIcon className="text-txt-primary" />, label: "Facebook", url: "#" },
+                                { icon: <InstagramIcon className="text-txt-primary" />, label: "Instagram", url: "#" },
+                                { icon: <TwitterXIcon className="text-txt-primary" />, label: "X", url: "#" },
+                                { icon: <TiktokIcon className="text-txt-primary" />, label: "Tiktok", url: "#" },
                             ].map((s, i) => (
                                 <a
                                     key={i}
@@ -130,7 +130,7 @@ export default function ContactUsTemplate() {
                                     rel="noopener noreferrer"
                                     className="flex flex-col items-center justify-center gap-2 py-6 md:gap-3"
                                 >
-                                    <div className="flex size-[42px] items-center justify-center rounded-full bg-blue-50">
+                                    <div className="flex size-[42px] items-center justify-center rounded-full bg-bg-washed">
                                         {s.icon}
                                     </div>
                                     <span className="text-sm text-black-700">{s.label}</span>

From 60a116627683bfe0c0dbbe660a8dd87d02728fb8 Mon Sep 17 00:00:00 2001
From: Muhammad Afnan Mohd Sallehuddin
 <muhammadafnanmohdsallehuddin@Muhammads-MBP-2.realtek>
Date: Fri, 15 Aug 2025 10:23:26 +0800
Subject: [PATCH 3/6] style: remove some text

---
 .../content/docs/develop/(template)/contact-us.mdx | 14 +-------------
 1 file changed, 1 insertion(+), 13 deletions(-)

diff --git a/apps/docs/content/docs/develop/(template)/contact-us.mdx b/apps/docs/content/docs/develop/(template)/contact-us.mdx
index 641d4c7d..2f69cbc9 100644
--- a/apps/docs/content/docs/develop/(template)/contact-us.mdx
+++ b/apps/docs/content/docs/develop/(template)/contact-us.mdx
@@ -395,16 +395,4 @@ It’s built to help you get started quickly with a contact us UI and is meant t
 -  `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!
-
-## 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:
-
-- `HeaderLogin` – Edit untuk menukar logo dan mengintegrasi komponen berfungsi (togol/dropdown)
-- `BodyLogin` – Edit untuk mengendalikan logik log masuk
-- `FooterLogin` – Edit untuk menukar logo, info, dan pautan
-
-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
+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

From 5bf832df5d6065f95ef54809ee4fff5573ce224c Mon Sep 17 00:00:00 2001
From: muhd afnan <afnan@mydigital.gov.my>
Date: Fri, 13 Feb 2026 10:42:10 +0800
Subject: [PATCH 4/6] update contact us template

---
 .../docs/develop/(template)/contact-us.mdx    | 514 +++++++++---------
 .../docs/develop/(template)/contact-us.ms.mdx | 514 +++++++++---------
 apps/docs/templates/contact-us.tsx            | 253 +++++----
 3 files changed, 678 insertions(+), 603 deletions(-)

diff --git a/apps/docs/content/docs/develop/(template)/contact-us.mdx b/apps/docs/content/docs/develop/(template)/contact-us.mdx
index 2f69cbc9..c7662a9f 100644
--- a/apps/docs/content/docs/develop/(template)/contact-us.mdx
+++ b/apps/docs/content/docs/develop/(template)/contact-us.mdx
@@ -47,135 +47,150 @@ import {
 
 export default function ContactUsTemplate() {
     return (
-        <div className="bg-bg-gray-50 min-h-screen">
-            <div className="max-w-full px-6 py-10 border-b border-outline-200 text-center">
-                <h1 className="font-boldtext-center font-poppins text-[2rem]/10 font-semibold sm:text-hmd">Contact Us</h1>
-            </div>
-
-            <div className="max-w-4xl px-4 mx-auto py-16 grid grid-cols-1 lg:grid-cols-[40%_60%] gap-12 items-start justify-center">
-                <div className="space-y-4.5 lg:py-10">
-                    <p className="text-sm font-semibold uppercase tracking-[0.2em] text-foreground-primary text-txt-primary">
-                        Office
-                    </p>
-                    <h2 className="py-2 text-xl font-semibold">Ministry of Digital</h2>
-                    <p className="text-sm text-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 className="flex flex-wrap gap-3 mt-6 ">
-                        <Button
-                            variant="default-outline"
-                            size="medium"
-                            className="rounded-full "
-                            asChild
-                        >
-                            <a
-                                href="https://goo.gl/maps"
-                                target="_blank"
-                                rel="noopener noreferrer"
-                            >
-                                <PinIcon className="mr-2 text-txt-primary" />
-                                <p className="text-txt-primary">Google Maps</p>
-                            </a>
-                        </Button>
-                        <Button
-                            variant="default-outline"
-                            size="medium"
-                            className="rounded-full"
-                            asChild
-                        >
-                            <a
-                                href="https://waze.com/ul"
-                                target="_blank"
-                                rel="noopener noreferrer"
-                            >
-                                <PinIcon className="mr-2 text-txt-primary" />
-                                <p className="text-txt-primary">Waze</p>
-                            </a>
-                        </Button>
-                    </div>
-                </div>
-                <div className="rounded-2xl overflow-hidden border border-outline-200 shadow-lg">
-                    <iframe
-                        title="Google Map"
-                        className="rounded-lg border border-outline-200 shadow-md w-full aspect-video"
-                        loading="lazy"
-                        allowFullScreen
-                        referrerPolicy="no-referrer-when-downgrade"
-                        src={`https://maps.google.com/maps?width=800&height=450&hl=en&q=${encodeURIComponent(
-                            "4, Lebuh Bestari, Presint 2, 62100 Putrajaya, Wilayah Persekutuan Putrajaya"
-                        )}&t=&z=14&ie=UTF8&iwloc=B&output=embed`}
-                    />
+        <>
+            <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>
 
-            <div className="bg-surface-white border-t border-outline-200 py-8">
-                <div className="max-w-7xl mx-auto flex flex-wrap justify-center gap-12">
-                    <div className="grid grid-cols-1 lg:grid-cols-[1fr_1fr_auto] lg:items-stretch divide-y lg:divide-y-0 lg:divide-x divide-washed-100 border-washed-100 lg:border-x">
-                        <a
-                            href="tel:+603-8000 example"
-                            className="flex items-center gap-4.5 px-6 py-8 min-h-[96px]"
-                        >
-                            <div className="flex size-[42px] items-center justify-center rounded-full bg-brand-50 p-[9px] text-foreground-primary bg-bg-washed">
-                                <PhoneIcon className="text-txt-primary" />
-                            </div>
-                            <div className="space-y-1 font-semibold">
-                                <p className="text-sm font-semibold uppercase tracking-[0.2em] text-txt-primary">
-                                    Telephone
-                                </p>
-                                <p className="text-lg text-foreground font-bold">+603-8000 example</p>
+            <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>
-                        </a>
-
-                        <a
-                            href="mailto:example@digital.gov.my"
-                            className="flex items-center gap-4.5 px-6 py-8 min-h-[96px]"
-                        >
-                            <div className="flex size-[42px] items-center justify-center rounded-full bg-brand-50 p-[9px] text-foreground-primary bg-bg-washed">
-                                <EmailIcon className="text-txt-primary" />
+                        </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="space-y-1 font-semibold">
-                                <p className="text-sm font-semibold uppercase tracking-[0.2em] text-txt-primary">
-                                    E-mail
-                                </p>
-                                <p className="text-lg text-foreground font-bold">
-                                    example@digital.gov.my
-                                </p>
+
+                            <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>
-                        </a>
-
-                        <div className="grid grid-cols-4 divide-x divide-washed-100">
-                            {[
-                                { icon: <FacebookIcon className="text-txt-primary" />, label: "Facebook", url: "#" },
-                                { icon: <InstagramIcon className="text-txt-primary" />, label: "Instagram", url: "#" },
-                                { icon: <TwitterXIcon className="text-txt-primary" />, label: "X", url: "#" },
-                                { icon: <TiktokIcon className="text-txt-primary" />, label: "Tiktok", url: "#" },
-                            ].map((s, i) => (
-                                <a
-                                    key={i}
-                                    href={s.url}
-                                    target="_blank"
-                                    rel="noopener noreferrer"
-                                    className="flex flex-col items-center justify-center gap-2 py-6 md:gap-3"
-                                >
-                                    <div className="flex size-[42px] items-center justify-center rounded-full bg-bg-washed">
-                                        {s.icon}
-                                    </div>
-                                    <span className="text-sm text-black-700">{s.label}</span>
-                                </a>
-                            ))}
                         </div>
-
                     </div>
-                </div>
-            </div>
-        </div>
+                </section>
+            </main>
+        </>
     );
 }
   ```
@@ -218,135 +233,150 @@ import {
 
 export default function ContactUsTemplate() {
     return (
-        <div className="bg-bg-gray-50 min-h-screen">
-            <div className="max-w-full px-6 py-10 border-b border-outline-200 text-center">
-                <h1 className="font-boldtext-center font-poppins text-[2rem]/10 font-semibold sm:text-hmd">Contact Us</h1>
-            </div>
-
-            <div className="max-w-4xl px-4 mx-auto py-16 grid grid-cols-1 lg:grid-cols-[40%_60%] gap-12 items-start justify-center">
-                <div className="space-y-4.5 lg:py-10">
-                    <p className="text-sm font-semibold uppercase tracking-[0.2em] text-foreground-primary text-txt-primary">
-                        Office
-                    </p>
-                    <h2 className="py-2 text-xl font-semibold">Ministry of Digital</h2>
-                    <p className="text-sm text-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 className="flex flex-wrap gap-3 mt-6 ">
-                        <Button
-                            variant="default-outline"
-                            size="medium"
-                            className="rounded-full "
-                            asChild
-                        >
-                            <a
-                                href="https://goo.gl/maps"
-                                target="_blank"
-                                rel="noopener noreferrer"
-                            >
-                                <PinIcon className="mr-2 text-txt-primary" />
-                                <p className="text-txt-primary">Google Maps</p>
-                            </a>
-                        </Button>
-                        <Button
-                            variant="default-outline"
-                            size="medium"
-                            className="rounded-full"
-                            asChild
-                        >
-                            <a
-                                href="https://waze.com/ul"
-                                target="_blank"
-                                rel="noopener noreferrer"
-                            >
-                                <PinIcon className="mr-2 text-txt-primary" />
-                                <p className="text-txt-primary">Waze</p>
-                            </a>
-                        </Button>
-                    </div>
-                </div>
-                <div className="rounded-2xl overflow-hidden border border-outline-200 shadow-lg">
-                    <iframe
-                        title="Google Map"
-                        className="rounded-lg border border-outline-200 shadow-md w-full aspect-video"
-                        loading="lazy"
-                        allowFullScreen
-                        referrerPolicy="no-referrer-when-downgrade"
-                        src={`https://maps.google.com/maps?width=800&height=450&hl=en&q=${encodeURIComponent(
-                            "4, Lebuh Bestari, Presint 2, 62100 Putrajaya, Wilayah Persekutuan Putrajaya"
-                        )}&t=&z=14&ie=UTF8&iwloc=B&output=embed`}
-                    />
+        <>
+            <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>
 
-            <div className="bg-surface-white border-t border-outline-200 py-8">
-                <div className="max-w-7xl mx-auto flex flex-wrap justify-center gap-12">
-                    <div className="grid grid-cols-1 lg:grid-cols-[1fr_1fr_auto] lg:items-stretch divide-y lg:divide-y-0 lg:divide-x divide-washed-100 border-washed-100 lg:border-x">
-                        <a
-                            href="tel:+603-8000 example"
-                            className="flex items-center gap-4.5 px-6 py-8 min-h-[96px]"
-                        >
-                            <div className="flex size-[42px] items-center justify-center rounded-full bg-brand-50 p-[9px] text-foreground-primary bg-bg-washed">
-                                <PhoneIcon className="text-txt-primary" />
-                            </div>
-                            <div className="space-y-1 font-semibold">
-                                <p className="text-sm font-semibold uppercase tracking-[0.2em] text-txt-primary">
-                                    Telephone
-                                </p>
-                                <p className="text-lg text-foreground font-bold">+603-8000 example</p>
+            <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>
-                        </a>
-
-                        <a
-                            href="mailto:example@digital.gov.my"
-                            className="flex items-center gap-4.5 px-6 py-8 min-h-[96px]"
-                        >
-                            <div className="flex size-[42px] items-center justify-center rounded-full bg-brand-50 p-[9px] text-foreground-primary bg-bg-washed">
-                                <EmailIcon className="text-txt-primary" />
+                        </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="space-y-1 font-semibold">
-                                <p className="text-sm font-semibold uppercase tracking-[0.2em] text-txt-primary">
-                                    E-mail
-                                </p>
-                                <p className="text-lg text-foreground font-bold">
-                                    example@digital.gov.my
-                                </p>
+
+                            <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>
-                        </a>
-
-                        <div className="grid grid-cols-4 divide-x divide-washed-100">
-                            {[
-                                { icon: <FacebookIcon className="text-txt-primary" />, label: "Facebook", url: "#" },
-                                { icon: <InstagramIcon className="text-txt-primary" />, label: "Instagram", url: "#" },
-                                { icon: <TwitterXIcon className="text-txt-primary" />, label: "X", url: "#" },
-                                { icon: <TiktokIcon className="text-txt-primary" />, label: "Tiktok", url: "#" },
-                            ].map((s, i) => (
-                                <a
-                                    key={i}
-                                    href={s.url}
-                                    target="_blank"
-                                    rel="noopener noreferrer"
-                                    className="flex flex-col items-center justify-center gap-2 py-6 md:gap-3"
-                                >
-                                    <div className="flex size-[42px] items-center justify-center rounded-full bg-bg-washed">
-                                        {s.icon}
-                                    </div>
-                                    <span className="text-sm text-black-700">{s.label}</span>
-                                </a>
-                            ))}
                         </div>
-
                     </div>
-                </div>
-            </div>
-        </div>
+                </section>
+            </main>
+        </>
     );
 }
 ```
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 688e0ce0..c1665f0c 100644
--- a/apps/docs/content/docs/develop/(template)/contact-us.ms.mdx
+++ b/apps/docs/content/docs/develop/(template)/contact-us.ms.mdx
@@ -47,135 +47,150 @@ import {
 
 export default function ContactUsTemplate() {
     return (
-        <div className="bg-bg-gray-50 min-h-screen">
-            <div className="max-w-full px-6 py-10 border-b border-outline-200 text-center">
-                <h1 className="font-boldtext-center font-poppins text-[2rem]/10 font-semibold sm:text-hmd">Contact Us</h1>
-            </div>
-
-            <div className="max-w-4xl px-4 mx-auto py-16 grid grid-cols-1 lg:grid-cols-[40%_60%] gap-12 items-start justify-center">
-                <div className="space-y-4.5 lg:py-10">
-                    <p className="text-sm font-semibold uppercase tracking-[0.2em] text-foreground-primary text-blue-600">
-                        Office
-                    </p>
-                    <h2 className="py-2 text-xl font-semibold">Ministry of Digital</h2>
-                    <p className="text-sm text-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 className="flex flex-wrap gap-3 mt-6 ">
-                        <Button
-                            variant="default-outline"
-                            size="medium"
-                            className="rounded-full "
-                            asChild
-                        >
-                            <a
-                                href="https://goo.gl/maps"
-                                target="_blank"
-                                rel="noopener noreferrer"
-                            >
-                                <PinIcon className="mr-2 text-blue-600" />
-                                <p className="text-blue-600">Google Maps</p>
-                            </a>
-                        </Button>
-                        <Button
-                            variant="default-outline"
-                            size="medium"
-                            className="rounded-full"
-                            asChild
-                        >
-                            <a
-                                href="https://waze.com/ul"
-                                target="_blank"
-                                rel="noopener noreferrer"
-                            >
-                                <PinIcon className="mr-2 text-blue-600" />
-                                <p className="text-blue-600">Waze</p>
-                            </a>
-                        </Button>
-                    </div>
-                </div>
-                <div className="rounded-2xl overflow-hidden border border-outline-200 shadow-lg">
-                    <iframe
-                        title="Google Map"
-                        className="rounded-lg border border-outline-200 shadow-md w-full aspect-video"
-                        loading="lazy"
-                        allowFullScreen
-                        referrerPolicy="no-referrer-when-downgrade"
-                        src={`https://maps.google.com/maps?width=800&height=450&hl=en&q=${encodeURIComponent(
-                            "4, Lebuh Bestari, Presint 2, 62100 Putrajaya, Wilayah Persekutuan Putrajaya"
-                        )}&t=&z=14&ie=UTF8&iwloc=B&output=embed`}
-                    />
+        <>
+            <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>
 
-            <div className="bg-surface-white border-t border-outline-200 py-8">
-                <div className="max-w-7xl mx-auto flex flex-wrap justify-center gap-12">
-                    <div className="grid grid-cols-1 lg:grid-cols-[1fr_1fr_auto] lg:items-stretch divide-y lg:divide-y-0 lg:divide-x divide-washed-100 border-washed-100 lg:border-x">
-                        <a
-                            href="tel:+603-8000 example"
-                            className="flex items-center gap-4.5 px-6 py-8 min-h-[96px]"
-                        >
-                            <div className="flex size-[42px] items-center justify-center rounded-full bg-brand-50 p-[9px] text-foreground-primary bg-blue-50">
-                                <PhoneIcon className="text-blue-600" />
-                            </div>
-                            <div className="space-y-1 font-semibold">
-                                <p className="text-sm font-semibold uppercase tracking-[0.2em] text-blue-500">
-                                    Telephone
-                                </p>
-                                <p className="text-lg text-foreground font-bold">+603-8000 example</p>
+            <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>
-                        </a>
-
-                        <a
-                            href="mailto:example@digital.gov.my"
-                            className="flex items-center gap-4.5 px-6 py-8 min-h-[96px]"
-                        >
-                            <div className="flex size-[42px] items-center justify-center rounded-full bg-brand-50 p-[9px] text-foreground-primary bg-blue-50">
-                                <EmailIcon className="text-blue-600" />
+                        </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="space-y-1 font-semibold">
-                                <p className="text-sm font-semibold uppercase tracking-[0.2em] text-blue-500">
-                                    E-mail
-                                </p>
-                                <p className="text-lg text-foreground font-bold">
-                                    example@digital.gov.my
-                                </p>
+
+                            <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>
-                        </a>
-
-                        <div className="grid grid-cols-4 divide-x divide-washed-100">
-                            {[
-                                { icon: <FacebookIcon className="text-blue-600" />, label: "Facebook", url: "#" },
-                                { icon: <InstagramIcon className="text-blue-600" />, label: "Instagram", url: "#" },
-                                { icon: <TwitterXIcon className="text-blue-600" />, label: "X", url: "#" },
-                                { icon: <TiktokIcon className="text-blue-600" />, label: "Tiktok", url: "#" },
-                            ].map((s, i) => (
-                                <a
-                                    key={i}
-                                    href={s.url}
-                                    target="_blank"
-                                    rel="noopener noreferrer"
-                                    className="flex flex-col items-center justify-center gap-2 py-6 md:gap-3"
-                                >
-                                    <div className="flex size-[42px] items-center justify-center rounded-full bg-blue-50">
-                                        {s.icon}
-                                    </div>
-                                    <span className="text-sm text-black-700">{s.label}</span>
-                                </a>
-                            ))}
                         </div>
-
                     </div>
-                </div>
-            </div>
-        </div>
+                </section>
+            </main>
+        </>
     );
 }
   ```
@@ -217,135 +232,150 @@ import {
 
 export default function ContactUsTemplate() {
     return (
-        <div className="bg-bg-gray-50 min-h-screen">
-            <div className="max-w-full px-6 py-10 border-b border-outline-200 text-center">
-                <h1 className="font-boldtext-center font-poppins text-[2rem]/10 font-semibold sm:text-hmd">Contact Us</h1>
-            </div>
-
-            <div className="max-w-4xl px-4 mx-auto py-16 grid grid-cols-1 lg:grid-cols-[40%_60%] gap-12 items-start justify-center">
-                <div className="space-y-4.5 lg:py-10">
-                    <p className="text-sm font-semibold uppercase tracking-[0.2em] text-foreground-primary text-blue-600">
-                        Office
-                    </p>
-                    <h2 className="py-2 text-xl font-semibold">Ministry of Digital</h2>
-                    <p className="text-sm text-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 className="flex flex-wrap gap-3 mt-6 ">
-                        <Button
-                            variant="default-outline"
-                            size="medium"
-                            className="rounded-full "
-                            asChild
-                        >
-                            <a
-                                href="https://goo.gl/maps"
-                                target="_blank"
-                                rel="noopener noreferrer"
-                            >
-                                <PinIcon className="mr-2 text-blue-600" />
-                                <p className="text-blue-600">Google Maps</p>
-                            </a>
-                        </Button>
-                        <Button
-                            variant="default-outline"
-                            size="medium"
-                            className="rounded-full"
-                            asChild
-                        >
-                            <a
-                                href="https://waze.com/ul"
-                                target="_blank"
-                                rel="noopener noreferrer"
-                            >
-                                <PinIcon className="mr-2 text-blue-600" />
-                                <p className="text-blue-600">Waze</p>
-                            </a>
-                        </Button>
-                    </div>
-                </div>
-                <div className="rounded-2xl overflow-hidden border border-outline-200 shadow-lg">
-                    <iframe
-                        title="Google Map"
-                        className="rounded-lg border border-outline-200 shadow-md w-full aspect-video"
-                        loading="lazy"
-                        allowFullScreen
-                        referrerPolicy="no-referrer-when-downgrade"
-                        src={`https://maps.google.com/maps?width=800&height=450&hl=en&q=${encodeURIComponent(
-                            "4, Lebuh Bestari, Presint 2, 62100 Putrajaya, Wilayah Persekutuan Putrajaya"
-                        )}&t=&z=14&ie=UTF8&iwloc=B&output=embed`}
-                    />
+        <>
+            <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>
 
-            <div className="bg-surface-white border-t border-outline-200 py-8">
-                <div className="max-w-7xl mx-auto flex flex-wrap justify-center gap-12">
-                    <div className="grid grid-cols-1 lg:grid-cols-[1fr_1fr_auto] lg:items-stretch divide-y lg:divide-y-0 lg:divide-x divide-washed-100 border-washed-100 lg:border-x">
-                        <a
-                            href="tel:+603-8000 example"
-                            className="flex items-center gap-4.5 px-6 py-8 min-h-[96px]"
-                        >
-                            <div className="flex size-[42px] items-center justify-center rounded-full bg-brand-50 p-[9px] text-foreground-primary bg-blue-50">
-                                <PhoneIcon className="text-blue-600" />
-                            </div>
-                            <div className="space-y-1 font-semibold">
-                                <p className="text-sm font-semibold uppercase tracking-[0.2em] text-blue-500">
-                                    Telephone
-                                </p>
-                                <p className="text-lg text-foreground font-bold">+603-8000 example</p>
+            <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>
-                        </a>
-
-                        <a
-                            href="mailto:example@digital.gov.my"
-                            className="flex items-center gap-4.5 px-6 py-8 min-h-[96px]"
-                        >
-                            <div className="flex size-[42px] items-center justify-center rounded-full bg-brand-50 p-[9px] text-foreground-primary bg-blue-50">
-                                <EmailIcon className="text-blue-600" />
+                        </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="space-y-1 font-semibold">
-                                <p className="text-sm font-semibold uppercase tracking-[0.2em] text-blue-500">
-                                    E-mail
-                                </p>
-                                <p className="text-lg text-foreground font-bold">
-                                    example@digital.gov.my
-                                </p>
+
+                            <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>
-                        </a>
-
-                        <div className="grid grid-cols-4 divide-x divide-washed-100">
-                            {[
-                                { icon: <FacebookIcon className="text-blue-600" />, label: "Facebook", url: "#" },
-                                { icon: <InstagramIcon className="text-blue-600" />, label: "Instagram", url: "#" },
-                                { icon: <TwitterXIcon className="text-blue-600" />, label: "X", url: "#" },
-                                { icon: <TiktokIcon className="text-blue-600" />, label: "Tiktok", url: "#" },
-                            ].map((s, i) => (
-                                <a
-                                    key={i}
-                                    href={s.url}
-                                    target="_blank"
-                                    rel="noopener noreferrer"
-                                    className="flex flex-col items-center justify-center gap-2 py-6 md:gap-3"
-                                >
-                                    <div className="flex size-[42px] items-center justify-center rounded-full bg-blue-50">
-                                        {s.icon}
-                                    </div>
-                                    <span className="text-sm text-black-700">{s.label}</span>
-                                </a>
-                            ))}
                         </div>
-
                     </div>
-                </div>
-            </div>
-        </div>
+                </section>
+            </main>
+        </>
     );
 }
 ```
diff --git a/apps/docs/templates/contact-us.tsx b/apps/docs/templates/contact-us.tsx
index 4b4f4fc5..768e8e63 100644
--- a/apps/docs/templates/contact-us.tsx
+++ b/apps/docs/templates/contact-us.tsx
@@ -13,134 +13,149 @@ import {
 
 export default function ContactUsTemplate() {
     return (
-        <div className="bg-bg-gray-50 min-h-screen">
-            <div className="max-w-full px-6 py-10 border-b border-outline-200 text-center">
-                <h1 className="font-boldtext-center font-poppins text-[2rem]/10 font-semibold sm:text-hmd">Contact Us</h1>
+        <>
+            <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>
 
-            <div className="max-w-4xl px-4 mx-auto py-16 grid grid-cols-1 xl:grid-cols-[40%_60%] gap-12 items-start justify-center">
-                <div className="space-y-4.5 lg:py-10">
-                    <p className="text-sm font-semibold uppercase tracking-[0.2em] text-foreground-primary text-txt-primary">
-                        Office
-                    </p>
-                    <h2 className="py-2 text-xl font-semibold">Ministry of Digital</h2>
-                    <p className="text-sm text-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>
+            <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="flex flex-wrap gap-3 mt-6 ">
-                        <Button
-                            variant="default-outline"
-                            size="medium"
-                            className="rounded-full "
-                            asChild
-                        >
-                            <a
-                                href="https://goo.gl/maps"
-                                target="_blank"
-                                rel="noopener noreferrer"
-                            >
-                                <PinIcon className="mr-2 text-txt-primary" />
-                                <p className="text-txt-primary">Google Maps</p>
-                            </a>
-                        </Button>
-                        <Button
-                            variant="default-outline"
-                            size="medium"
-                            className="rounded-full"
-                            asChild
-                        >
-                            <a
-                                href="https://waze.com/ul"
-                                target="_blank"
-                                rel="noopener noreferrer"
-                            >
-                                <PinIcon className="mr-2 text-txt-primary" />
-                                <p className="text-txt-primary">Waze</p>
-                            </a>
-                        </Button>
-                    </div>
-                </div>
-                <div className="rounded-2xl overflow-hidden border border-outline-200 shadow-lg">
-                    <iframe
-                        title="Google Map"
-                        className="rounded-lg border border-outline-200 shadow-md w-full aspect-video"
-                        loading="lazy"
-                        allowFullScreen
-                        referrerPolicy="no-referrer-when-downgrade"
-                        src={`https://maps.google.com/maps?width=800&height=450&hl=en&q=${encodeURIComponent(
-                            "4, Lebuh Bestari, Presint 2, 62100 Putrajaya, Wilayah Persekutuan Putrajaya"
-                        )}&t=&z=14&ie=UTF8&iwloc=B&output=embed`}
-                    />
-                </div>
-            </div>
+                                    <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="bg-surface-white border-t border-outline-200 py-8">
-                <div className="max-w-7xl mx-auto flex flex-wrap justify-center gap-12">
-                    <div className="grid grid-cols-1 xl:grid-cols-[1fr_1fr_auto] xl:items-stretch divide-y xl:divide-y-0 xl:divide-x divide-washed-100 border-washed-100 xl:border-x">
-                        <a
-                            href="tel:+603-8000 example"
-                            className="flex items-center gap-4.5 px-6 py-8 min-h-[96px]"
-                        >
-                            <div className="flex size-[42px] items-center justify-center rounded-full bg-brand-50 p-[9px] text-foreground-primary bg-bg-washed">
-                                <PhoneIcon className="text-txt-primary" />
-                            </div>
-                            <div className="space-y-1 font-semibold">
-                                <p className="text-sm font-semibold uppercase tracking-[0.2em] text-txt-primary">
-                                    Telephone
-                                </p>
-                                <p className="text-lg text-foreground font-bold">+603-8000 example</p>
-                            </div>
-                        </a>
+                                    <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>
 
-                        <a
-                            href="mailto:example@digital.gov.my"
-                            className="flex items-center gap-4.5 px-6 py-8 min-h-[96px]"
-                        >
-                            <div className="flex size-[42px] items-center justify-center rounded-full bg-brand-50 p-[9px] text-foreground-primary bg-bg-washed">
-                                <EmailIcon className="text-txt-primary" />
+                                <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 className="space-y-1 font-semibold">
-                                <p className="text-sm font-semibold uppercase tracking-[0.2em] text-txt-primary">
-                                    E-mail
-                                </p>
-                                <p className="text-lg text-foreground font-bold">
-                                    example@digital.gov.my
-                                </p>
+                        </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>
-                        </a>
 
-                        <div className="grid grid-cols-4 divide-x divide-washed-100">
-                            {[
-                                { icon: <FacebookIcon className="text-txt-primary" />, label: "Facebook", url: "#" },
-                                { icon: <InstagramIcon className="text-txt-primary" />, label: "Instagram", url: "#" },
-                                { icon: <TwitterXIcon className="text-txt-primary" />, label: "X", url: "#" },
-                                { icon: <TiktokIcon className="text-txt-primary" />, label: "Tiktok", url: "#" },
-                            ].map((s, i) => (
-                                <a
-                                    key={i}
-                                    href={s.url}
-                                    target="_blank"
-                                    rel="noopener noreferrer"
-                                    className="flex flex-col items-center justify-center gap-2 py-6 md:gap-3"
-                                >
-                                    <div className="flex size-[42px] items-center justify-center rounded-full bg-bg-washed">
-                                        {s.icon}
-                                    </div>
-                                    <span className="text-sm text-black-700">{s.label}</span>
-                                </a>
-                            ))}
+                            <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>
-                </div>
-            </div>
-        </div>
+                </section>
+            </main>
+        </>
     );
 }

From 6c9f65b5319afe89359ed8addaf239fffe064fae Mon Sep 17 00:00:00 2001
From: muhd afnan <afnan@mydigital.gov.my>
Date: Fri, 13 Feb 2026 10:54:13 +0800
Subject: [PATCH 5/6] add pull request template

---
 .github/pull_request_template.md | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)
 create mode 100644 .github/pull_request_template.md

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

From dae3bf7a1463bdd168930fa8a1693943fe5bee38 Mon Sep 17 00:00:00 2001
From: muhd afnan <afnan@mydigital.gov.my>
Date: Fri, 13 Feb 2026 12:32:08 +0800
Subject: [PATCH 6/6] update contact us mdx us and ms

---
 apps/docs/content/docs/develop/(template)/contact-us.mdx    | 6 +++---
 apps/docs/content/docs/develop/(template)/contact-us.ms.mdx | 6 +++---
 apps/docs/templates/contact-us.tsx                          | 6 +++---
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/apps/docs/content/docs/develop/(template)/contact-us.mdx b/apps/docs/content/docs/develop/(template)/contact-us.mdx
index c7662a9f..30f072b9 100644
--- a/apps/docs/content/docs/develop/(template)/contact-us.mdx
+++ b/apps/docs/content/docs/develop/(template)/contact-us.mdx
@@ -29,7 +29,7 @@ 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 className="px-4 bg-bg-gray-50" />
+        <ContactUsTemplate/>
     </div>
   </Tab>
   <Tab value="Code">
@@ -202,14 +202,14 @@ export default function ContactUsTemplate() {
 
 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.
+- 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 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.
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 c1665f0c..9ce7b5ce 100644
--- a/apps/docs/content/docs/develop/(template)/contact-us.ms.mdx
+++ b/apps/docs/content/docs/develop/(template)/contact-us.ms.mdx
@@ -29,7 +29,7 @@ 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 className="px-4 bg-bg-gray-50" />
+        <ContactUsTemplate/>
     </div>
   </Tab>
   <Tab value="Code">
@@ -200,7 +200,7 @@ export default function ContactUsTemplate() {
 
 ## Ringkasan Umum
 
-Komponen `ContactUsTemplate` menyediakan contoh UI untuk skrin lupa kata laluan menggunakan komponen [MYDS](https://github.com/govtechmy/myds) Ia merangkumi:
+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.
@@ -212,7 +212,7 @@ Templat halaman hubungi kami ini dibina untuk **pembangunan yang pantas** dan **
 > - Butiran hubungan yang berfungsi untuk bingkai peta Google, nombor telefon dan e-mel
 > - Pautan media sosial yang berfungsi
 > 
-> You are expected to implement such logic based on your own system needs.
+> Anda dijangka melaksanakan logik tersebut berdasarkan keperluan sistem anda sendiri.
 
 ## Penggunaan
 
diff --git a/apps/docs/templates/contact-us.tsx b/apps/docs/templates/contact-us.tsx
index 768e8e63..1a41a8a6 100644
--- a/apps/docs/templates/contact-us.tsx
+++ b/apps/docs/templates/contact-us.tsx
@@ -14,7 +14,7 @@ import {
 export default function ContactUsTemplate() {
     return (
         <>
-            <div className="bg-bg-gray-50 border-b border-outline-200">
+            <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
@@ -23,7 +23,7 @@ export default function ContactUsTemplate() {
             </div>
 
             <main className="divide-y divide-washed-100">
-                <section className="bg-bg-gray-50">
+                <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">
@@ -129,7 +129,7 @@ export default function ContactUsTemplate() {
                                 ))}
                             </div>
 
-                            <div className="grid flex-none grid-flow-row grid-cols-4 divide-x divide-washed-100 px-0 max-md:divide-y">
+                            <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: "#" },