diff --git a/docusaurus.config.js b/docusaurus.config.js
index 2a88b63..f99231c 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -4,6 +4,8 @@
 const lightCodeTheme = require('prism-react-renderer/themes/github');
 const darkCodeTheme = require('prism-react-renderer/themes/dracula');
 const defaultLocale = 'en';
+const footerConfig = require('./footer.json');
+
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
@@ -131,66 +133,68 @@ const config = {
           },
         ],
       },
-      footer: {
-        style: 'dark',
-        copyright:
-          'The content is available under the <a href="https://docs.joomla.org/JEDL">Joomla! EDL</a> license, unless otherwise stated.',
-        links: [
-          {
-            title: 'Docs',
-            items: [
-              {
-                label: 'TBD',
-                to: 'docs',
-              },
-            ],
-          },
-          {
-            title: 'Community',
-            items: [
-              {
-                label: 'Community Portal',
-                href: 'https://community.joomla.org/',
-              },
-              {
-                label: 'Twitter',
-                href: 'https://twitter.com/joomla',
-              },
-            ],
-          },
-          {
-            title: 'More',
-            items: [
-              {
-                label: 'Blog',
-                href: 'https://community.joomla.org/blogs.html',
-              },
-              {
-                label: 'Magazine',
-                href: 'https://magazine.joomla.org/',
-              },
-            ],
-          },
-          {
-            title: 'Legal',
-            items: [
-              {
-                label: 'Privacy',
-                href: 'https://www.joomla.org/privacy-policy.html',
-              },
-              {
-                label: 'Terms',
-                href: 'https://tm.joomla.org',
-              },
-            ],
-          },
-        ],
-      },
+      // footer: {
+      //   style: 'dark',
+      //   copyright:
+      //     'The content is available under the <a href="https://docs.joomla.org/JEDL">Joomla! EDL</a> license, unless otherwise stated.',
+      //   links: [
+      //     {
+      //       title: 'Docs',
+      //       items: [
+      //         {
+      //           label: 'TBD',
+      //           to: 'docs',
+      //         },
+      //       ],
+      //     },
+      //     {
+      //       title: 'Community',
+      //       items: [
+      //         {
+      //           label: 'Community Portal',
+      //           href: 'https://community.joomla.org/',
+      //         },
+      //         {
+      //           label: 'Twitter',
+      //           href: 'https://twitter.com/joomla',
+      //         },
+      //       ],
+      //     },
+      //     {
+      //       title: 'More',
+      //       items: [
+      //         {
+      //           label: 'Blog',
+      //           href: 'https://community.joomla.org/blogs.html',
+      //         },
+      //         {
+      //           label: 'Magazine',
+      //           href: 'https://magazine.joomla.org/',
+      //         },
+      //       ],
+      //     },
+      //     {
+      //       title: 'Legal',
+      //       items: [
+      //         {
+      //           label: 'Privacy',
+      //           href: 'https://www.joomla.org/privacy-policy.html',
+      //         },
+      //         {
+      //           label: 'Terms',
+      //           href: 'https://tm.joomla.org',
+      //         },
+      //       ],
+      //     },
+      //   ],
+      // },
+      footer: footerConfig,
       prism: {
         theme: lightCodeTheme,
         darkTheme: darkCodeTheme,
         additionalLanguages: ['php', 'ini'],
       },
+     
     }),
 
   plugins: [
diff --git a/footer.json b/footer.json
new file mode 100644
index 0000000..7f76101
--- /dev/null
+++ b/footer.json
@@ -0,0 +1,84 @@
+{
+  "style": ["dark"],
+  "links": [
+    {
+      "title": "Joomla!",
+      "items": [
+        {
+          "label": "Home",
+          "to": "https://www.joomla.org"
+        },
+        {
+          "label": "About",
+          "to": "https://www.joomla.org/about-joomla.html"
+        },
+        {
+          "label": "Community",
+          "to": "https://community.joomla.org"
+        },
+        {
+          "label": "Forum",
+          "to": "https://forum.joomla.org"
+        },
+        {
+          "label": "Extensions",
+          "to": "https://extensions.joomla.org"
+        },
+        {
+          "label": "Accessibility Statement",
+          "to": "https://www.joomla.org/accessibility-statement.html"
+        },
+        {
+          "label": "Privacy Policy",
+          "to": "https://www.joomla.org/privacy-policy.html"
+        },
+        {
+          "label": "Cookie Policy",
+          "to": "https://www.joomla.org/cookie-policy.html"
+        },
+        {
+          "label": "Sponsor Joomla! with $5",
+          "to": "https://www.joomla.org/sponsor-joomla.html"
+        }
+      ]
+    },
+    {
+      "title": "Connect",
+      "items": [
+        {
+          "label": "Twitter",
+          "to": "https://twitter.com/joomla"
+        },
+        {
+          "label": "Facebook",
+          "to": "https://www.facebook.com/joomla"
+        },
+        {
+          "label": "YouTube",
+          "to": "https://www.youtube.com/user/joomla"
+        },
+        {
+          "label": "LinkedIn",
+          "to": "https://www.linkedin.com/company/joomla"
+        },
+        {
+          "label": "Pinterest",
+          "to": "https://www.pinterest.com/joomla"
+        },
+        {
+          "label": "Instagram",
+          "to": "https://www.instagram.com/joomlaofficial/"
+        },
+        {
+          "label": "GitHub",
+          "to": "https://github.com/joomla"
+        }
+      ]
+    }
+  ],
+  "style": "dark",
+"copyright":
+  "The content is available under the <a href=\"https://docs.joomla.org/JEDL\">Joomla! EDL</a> license, unless otherwise stated."
+
+  
+}
diff --git a/src/components/footer.js b/src/components/footer.js
new file mode 100644
index 0000000..8db73e0
--- /dev/null
+++ b/src/components/footer.js
@@ -0,0 +1,138 @@
+const React = require('react');
+
+class Footer extends React.Component {
+  render() {<footer><div className="social">
+  <ul className="soc">
+    <li>
+      <a
+        href="https://twitter.com/joomla"
+        target="_blank"
+        rel="noopener"
+        className="icon-twitter2"
+        title="Joomla! on Twitter"
+      >
+        <span className="element-invisible">Joomla! on Twitter</span>
+      </a>
+    </li>
+    <li>
+      <a
+        href="https://www.facebook.com/joomla"
+        target="_blank"
+        rel="noopener"
+        className="icon-facebook2"
+        title="Joomla! on Facebook"
+      >
+        <span className="element-invisible">Joomla! on Facebook</span>
+      </a>
+    </li>
+    <li>
+      <a
+        href="https://www.youtube.com/user/joomla"
+        target="_blank"
+        rel="noopener"
+        className="icon-youtube3"
+        title="Joomla! on YouTube"
+      >
+        <span className="element-invisible">Joomla! on YouTube</span>
+      </a>
+    </li>
+    <li>
+      <a
+        href="https://www.linkedin.com/company/joomla"
+        target="_blank"
+        rel="noopener"
+        className="icon-linkedin"
+        title="Joomla! on LinkedIn"
+      >
+        <span className="element-invisible">Joomla! on LinkedIn</span>
+      </a>
+    </li>
+    <li>
+      <a
+        href="https://www.pinterest.com/joomla"
+        target="_blank"
+        rel="noopener"
+        className="icon-pinterest2"
+        title="Joomla! on Pinterest"
+      >
+        <span className="element-invisible">Joomla! on Pinterest</span>
+      </a>
+    </li>
+    <li>
+      <a
+        href="https://www.instagram.com/joomlaofficial/"
+        target="_blank"
+        rel="noopener"
+        className="icon-instagram"
+        title="Joomla! on Instagram"
+      >
+        <span className="element-invisible">Joomla! on Instagram</span>
+      </a>
+    </li>
+    <li>
+      <a
+        href="https://github.com/joomla"
+        target="_blank"
+        rel="noopener"
+        className="icon-github3"
+        title="Joomla! on GitHub"
+      >
+        <span className="element-invisible">Joomla! on GitHub</span>
+      </a>
+    </li>
+  </ul>
+</div>
+
+<div className="footer-menu">
+  <ul className="nav-inline">
+    <li>
+      <a href="https://www.joomla.org">
+        <span>Home</span>
+      </a>
+    </li>
+    <li>
+      <a href="https://www.joomla.org/about-joomla.html">
+        <span>About</span>
+      </a>
+    </li>
+    <li>
+      <a href="https://community.joomla.org">
+        <span>Community</span>
+      </a>
+    </li>
+    <li>
+      <a href="https://forum.joomla.org">
+        <span>Forum</span>
+      </a>
+    </li>
+    <li>
+      <a href="https://extensions.joomla.org">
+        <span>Extensions</span>
+      </a>
+    </li>
+    <li>
+      <a href="https://community.joomla.org/service-providers-directory.html">
+        <span>Services</span>
+      </a>
+    </li>
+    <li>
+      <a href="https://docs.joomla.org">
+<span>Documentation</span>
+</a>
+</li>
+<li>
+<a href="https://magazine.joomla.org">
+<span>Magazine</span>
+</a>
+</li>
+<li>
+<a href="https://volunteers.joomla.org">
+<span>Volunteers</span>
+</a>
+</li>
+
+  </ul>
+</div></footer>}
+}
+
+module.exports = Footer