diff --git a/.changeset/proud-numbers-exist.md b/.changeset/proud-numbers-exist.md
new file mode 100644
index 00000000000..55b19aed52d
--- /dev/null
+++ b/.changeset/proud-numbers-exist.md
@@ -0,0 +1,6 @@
+---
+"@wso2is/features": patch
+"@wso2is/console": patch
+---
+
+Refactor branding page layout
diff --git a/features/admin.branding.v1/components/branding-page-layout.tsx b/features/admin.branding.v1/components/branding-page-layout.tsx
new file mode 100644
index 00000000000..6c47cf3bc11
--- /dev/null
+++ b/features/admin.branding.v1/components/branding-page-layout.tsx
@@ -0,0 +1,73 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { IdentifiableComponentInterface } from "@wso2is/core/models";
+import { DocumentationLink, PageLayout, useDocumentation } from "@wso2is/react-components";
+import React, { FunctionComponent, ReactElement } from "react";
+import { useTranslation } from "react-i18next";
+import BrandingCore from "./branding-core";
+
+type BrandingPageLayoutInterface = IdentifiableComponentInterface;
+
+const BrandingPageLayout: FunctionComponent<BrandingPageLayoutInterface> = (
+    props: BrandingPageLayoutInterface
+): ReactElement => {
+
+    const { getLink } = useDocumentation();
+    const { t } = useTranslation();
+    const {
+        ["data-componentid"]: componentId
+    } = props;
+
+    return (
+        <PageLayout
+            pageTitle={ t("extensions:develop.branding.pageHeader.title") }
+            bottomMargin={ false }
+            title={ (
+                <div className="title-container">
+                    <div className="title-container-heading">
+                        { t("extensions:develop.branding.pageHeader.title") }
+                    </div>
+                </div>
+            ) }
+            description={ (
+                <div className="with-label">
+                    { t("extensions:develop.branding.pageHeader.description") }
+                    <DocumentationLink
+                        link={ getLink("develop.branding.learnMore") }
+                    >
+                        { t("common:learnMore") }
+                    </DocumentationLink>
+                </div>
+            ) }
+            data-componentid={ `${ componentId }-layout` }
+            className="branding-page"
+        >
+            <BrandingCore />
+        </PageLayout>
+    );
+};
+
+/**
+ * Default props for the component.
+ */
+BrandingPageLayout.defaultProps = {
+    "data-componentid": "branding-page"
+};
+
+export default BrandingPageLayout;
diff --git a/features/admin.branding.v1/pages/branding.tsx b/features/admin.branding.v1/pages/branding.tsx
index 3bea90c3635..449c702c1d0 100644
--- a/features/admin.branding.v1/pages/branding.tsx
+++ b/features/admin.branding.v1/pages/branding.tsx
@@ -17,10 +17,8 @@
  */
 
 import { IdentifiableComponentInterface } from "@wso2is/core/models";
-import { DocumentationLink, PageLayout, useDocumentation } from "@wso2is/react-components";
 import React, { FunctionComponent, ReactElement } from "react";
-import { useTranslation } from "react-i18next";
-import BrandingCore from "../components/branding-core";
+import BrandingPageLayout from "../components/branding-page-layout";
 import BrandingPreferenceProvider from "../providers/branding-preference-provider";
 
 /**
@@ -31,57 +29,16 @@ type BrandingPageInterface = IdentifiableComponentInterface;
 /**
  * Branding page.
  *
- * @param props - Props injected to the component.
  * @returns Branding page component.
  */
 const BrandingPage: FunctionComponent<BrandingPageInterface> = (
-    props: BrandingPageInterface
 ): ReactElement => {
 
-    const { getLink } = useDocumentation();
-
-    const {
-        ["data-componentid"]: componentId
-    } = props;
-
-    const { t } = useTranslation();
-
     return (
         <BrandingPreferenceProvider>
-            <PageLayout
-                pageTitle={ t("extensions:develop.branding.pageHeader.title") }
-                bottomMargin={ false }
-                title={ (
-                    <div className="title-container">
-                        <div className="title-container-heading">
-                            { t("extensions:develop.branding.pageHeader.title") }
-                        </div>
-                    </div>
-                ) }
-                description={ (
-                    <div className="with-label">
-                        { t("extensions:develop.branding.pageHeader.description") }
-                        <DocumentationLink
-                            link={ getLink("develop.branding.learnMore") }
-                        >
-                            { t("common:learnMore") }
-                        </DocumentationLink>
-                    </div>
-                ) }
-                data-componentid={ `${ componentId }-layout` }
-                className="branding-page"
-            >
-                <BrandingCore />
-            </PageLayout>
+            <BrandingPageLayout />
         </BrandingPreferenceProvider>
     );
 };
 
-/**
- * Default props for the component.
- */
-BrandingPage.defaultProps = {
-    "data-componentid": "branding-page"
-};
-
 export default BrandingPage;