diff --git a/public/locales/bg/common.json b/public/locales/bg/common.json
index 9d892fcdc..77ccfdcd4 100644
--- a/public/locales/bg/common.json
+++ b/public/locales/bg/common.json
@@ -56,17 +56,22 @@
   "link": "Линк",
   "components": {
     "footer": {
-      "about-us": "За доброволците",
+      "donatе": "Дарете",
+      "about-us": "За нас",
+      "resources": "Ресурси",
+      "others": "Други",
+      "all-campaigns": "Всички кампании",
+      "suggest-campaign": "Предложете кампания",
+      "who-are-we": "Кои сме ние?",
       "about-project": "За проекта",
-      "docs": "Документация",
-      "dev-docs": "Техническа  Документация",
-      "support": "Станете доброволец",
+      "support-us": "Подкрепете ни",
+      "become-a-volunteer": "Станете доброволец",
+      "reports": "Отчети",
       "contact": "Контакти",
+      "faq": "Често задавани въпроси",
       "privacy-policy": "Защита на лични данни",
       "terms-of-service": "Общи условия",
-      "hosting-partner": "Хостинг партньор:",
-      "copyrights": "Podkrepi.bg ©2022 Всички права запазени.",
-      "version": "Версия"
+      "copyrights": "Podkrepi.bg ©2022 Всички права запазени."
     }
   },
   "or": "или",
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index 13d10913c..221140550 100644
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@@ -2,7 +2,7 @@
   "nav": {
     "home": "Home",
     "about": {
-      "about-project": "The Project",
+      "about-project": "The project",
       "about-us": "About us",
       "who-are-we": "Who are we?",
       "support_us": "Support us",
@@ -14,7 +14,7 @@
       "index": "Campaigns",
       "all-campaigns": "All campaigns",
       "create": "Suggest a campaign",
-      "faq": "Frequently Asked Questions"
+      "faq": "Frequently asked questions"
     },
     "admin": {
       "index": "Administration",
@@ -56,17 +56,22 @@
   "support": "Donate",
   "components": {
     "footer": {
+      "donatе": "Donate",
       "about-us": "About us",
-      "about-project": "The project",
-      "docs": "Documentation",
-      "dev-docs": "Technical Documentation",
-      "support": "Support us",
+      "resources": "Resources",
+      "others": "Others",
+      "all-campaigns": "All campaigns",
+      "who-are-we": "Who are we?",
+      "suggest-campaign": "Suggest a campaign",
+      "about-project": "About the project",
+      "support-us": "Support us",
+      "become-a-volunteer": "Become a volunteer",
+      "reports": "Reports",
       "contact": "Contact",
+      "faq": "Frequently asked questions",
       "privacy-policy": "Privacy Policy",
-      "terms-of-service": "Terms of service",
-      "hosting-partner": "Hosting partner:",
-      "copyrights": "Podkrepi.bg ©2022 All rights reserved.",
-      "version": "Version"
+      "terms-of-service": "Terms of Service",
+      "copyrights": "Podkrepi.bg ©2022 All rights reserved."
     }
   },
   "or": "or",
diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
deleted file mode 100644
index ae1894652..000000000
--- a/src/components/layout/Footer.tsx
+++ /dev/null
@@ -1,156 +0,0 @@
-import { Grid, Container, lighten, useTheme, useMediaQuery } from '@mui/material'
-import Link from 'next/link'
-import { useRouter } from 'next/router'
-import { useTranslation } from 'next-i18next'
-import { Facebook, Instagram, LinkedIn, YouTube } from '@mui/icons-material'
-import PodkrepiLogo from 'components/brand/PodkrepiLogo'
-import ExternalLink from 'components/common/ExternalLink'
-import { routes, socialUrls, staticUrls } from 'common/routes'
-
-type FooterLink = {
-  label: string
-  href: string
-  external?: boolean
-}
-const footerItems: FooterLink[][] = [
-  [
-    { label: 'components.footer.about-us', href: routes.about },
-    { label: 'components.footer.about-project', href: routes.aboutProject },
-    { label: 'components.footer.support', href: routes.support },
-    { label: 'components.footer.contact', href: routes.contact },
-    { external: true, label: 'nav.blog', href: staticUrls.blog },
-  ],
-  [
-    { external: true, label: 'GitHub', href: staticUrls.github },
-    { external: true, label: 'components.footer.docs', href: staticUrls.projectDocs },
-    { external: true, label: 'components.footer.dev-docs', href: staticUrls.devDocs },
-  ],
-  [
-    { label: 'components.footer.privacy-policy', href: routes.privacyPolicy },
-    { label: 'components.footer.terms-of-service', href: routes.termsOfService },
-  ],
-]
-
-export default function Footer() {
-  return (
-    <Container
-      component="footer"
-      maxWidth={false}
-      disableGutters
-      sx={(theme) => ({
-        backgroundColor: theme.palette.primary.dark,
-        color: lighten(theme.palette.primary.main, 0.75),
-        '& a': {
-          color: lighten(theme.palette.primary.main, 0.75),
-          '&:hover': {
-            color: lighten(theme.palette.primary.main, 0.55),
-          },
-        },
-      })}>
-      <Container maxWidth="lg" disableGutters>
-        <Grid
-          container
-          sx={(theme) => ({
-            xs: {
-              textAlign: 'center',
-              padding: theme.spacing(5, 0),
-            },
-            textAlign: 'left',
-            padding: theme.spacing(5),
-          })}>
-          <Grid item xs={12} sm={8} md={5}>
-            <InfoGrid />
-          </Grid>
-          <Grid item xs={12} sm={4} md={7}>
-            <FooterLinks />
-          </Grid>
-        </Grid>
-      </Container>
-    </Container>
-  )
-}
-
-const InfoGrid = () => {
-  const { t } = useTranslation()
-  const { locale } = useRouter()
-
-  return (
-    <Grid container direction="column" spacing={2} sx={{ sm: { pb: 3 } }}>
-      <Grid item>
-        <Link href={routes.index}>
-          <a>
-            <PodkrepiLogo locale={locale} size="large" variant="fixed" />
-          </a>
-        </Link>
-      </Grid>
-      <Grid item>
-        <SocialIcons />
-      </Grid>
-      <Grid item>{t('components.footer.copyrights')}</Grid>
-      <Grid item>
-        {t('components.footer.hosting-partner')}{' '}
-        <ExternalLink href={staticUrls.hostingProvider}>
-          <strong>SuperHosting.BG</strong>
-        </ExternalLink>
-      </Grid>
-      {process.env.APP_VERSION && (
-        <Grid item>
-          {t('components.footer.version')} {process.env.APP_VERSION}
-        </Grid>
-      )}
-    </Grid>
-  )
-}
-
-const SocialIcons = () => {
-  const theme = useTheme()
-  const sm = useMediaQuery(theme.breakpoints.up('sm'))
-  return (
-    <Grid direction="row" container spacing={2} justifyContent={sm ? 'flex-start' : 'center'}>
-      <Grid item>
-        <ExternalLink href={socialUrls.facebook}>
-          <Facebook />
-        </ExternalLink>
-      </Grid>
-      <Grid item>
-        <ExternalLink href={socialUrls.linkedin}>
-          <LinkedIn />
-        </ExternalLink>
-      </Grid>
-      <Grid item>
-        <ExternalLink href={socialUrls.youtube}>
-          <YouTube />
-        </ExternalLink>
-      </Grid>
-      <Grid item>
-        <ExternalLink href={socialUrls.instagram}>
-          <Instagram />
-        </ExternalLink>
-      </Grid>
-    </Grid>
-  )
-}
-const FooterLinks = () => {
-  const { t } = useTranslation()
-  return (
-    <Grid container spacing={3}>
-      {footerItems.map((links, column) => (
-        <Grid key={column} item xs={12} md={4}>
-          <Grid container direction="column" spacing={1}>
-            {links.map(({ label, href, external }, row) => (
-              <Grid key={`${column}-${row}`} item>
-                {external ? (
-                  <ExternalLink href={href}>{t(label)}</ExternalLink>
-                ) : (
-                  <Link href={href}>
-                    <a>{t(label)}</a>
-                  </Link>
-                )}
-              </Grid>
-            ))}
-          </Grid>
-        </Grid>
-      ))}
-    </Grid>
-  )
-}
diff --git a/src/components/layout/Footer/Footer.styled.tsx b/src/components/layout/Footer/Footer.styled.tsx
new file mode 100644
index 000000000..fff0a7ef8
--- /dev/null
+++ b/src/components/layout/Footer/Footer.styled.tsx
@@ -0,0 +1,61 @@
+import { Container, Grid, lighten, Typography } from '@mui/material'
+import { styled } from '@mui/system'
+
+import theme from 'common/theme'
+
+export const Root = styled(Container)(() => ({
+  display: 'flex',
+  justifyContent: 'center',
+  textAlign: 'left',
+  backgroundColor: theme.palette.primary.dark,
+  color: lighten(theme.palette.primary.main, 0.75),
+
+  '& a': {
+    color: lighten(theme.palette.primary.main, 0.75),
+
+    '&:hover': {
+      color: lighten(theme.palette.primary.main, 0.55),
+    },
+  },
+}))
+
+export const FooterWrapper = styled(Grid)(() => ({
+  margin: theme.spacing(5),
+}))
+
+export const FooterLinksWrapper = styled(Grid)(() => ({
+  margin: theme.spacing(6, 0, 3, 0),
+
+  [theme.breakpoints.up('sm')]: {
+    marginTop: 0,
+  },
+
+  [theme.breakpoints.up('md')]: {
+    display: 'inline-flex',
+    gap: theme.spacing(1),
+  },
+}))
+
+export const FooterLinkTitle = styled(Typography)(() => ({
+  fontWeight: 600,
+  fontSize: theme.typography.pxToRem(16),
+  marginBottom: theme.spacing(1),
+  paddingBottom: theme.spacing(0.5),
+  width: 'fit-content',
+  borderBottom: `2px solid ${lighten(theme.palette.primary.main, 0.4)}`,
+}))
+
+export const FooterLink = styled(Grid)(() => ({
+  padding: theme.spacing(0.5, 0),
+}))
+
+export const Copyright = styled(Grid)(() => ({
+  borderTop: `2px solid ${lighten(theme.palette.primary.main, 0.4)}`,
+  paddingTop: theme.spacing(3),
+}))
+
+export const SocialIconsWrapper = styled(Grid)(() => ({
+  display: 'flex',
+  gap: theme.spacing(1),
+  marginTop: theme.spacing(2),
+}))
diff --git a/src/components/layout/Footer/Footer.tsx b/src/components/layout/Footer/Footer.tsx
new file mode 100644
index 000000000..f997e9c7f
--- /dev/null
+++ b/src/components/layout/Footer/Footer.tsx
@@ -0,0 +1,22 @@
+import { useTranslation } from 'next-i18next'
+
+import { LogoSocialIcons } from './LogoSocialIcons'
+import { FooterLinks } from './FooterLinks'
+
+import { Copyright, FooterWrapper, Root } from './Footer.styled'
+
+export default function Footer() {
+  const { t } = useTranslation()
+
+  return (
+    <Root maxWidth={false} disableGutters>
+      <FooterWrapper container maxWidth="xl">
+        <LogoSocialIcons />
+        <FooterLinks />
+        <Copyright item xs={12}>
+          {t('components.footer.copyrights')}
+        </Copyright>
+      </FooterWrapper>
+    </Root>
+  )
+}
diff --git a/src/components/layout/Footer/FooterLinks.tsx b/src/components/layout/Footer/FooterLinks.tsx
new file mode 100644
index 000000000..fa6bff6d2
--- /dev/null
+++ b/src/components/layout/Footer/FooterLinks.tsx
@@ -0,0 +1,34 @@
+import { useTranslation } from 'next-i18next'
+import Link from 'next/link'
+
+import { Grid } from '@mui/material'
+
+import ExternalLink from 'components/common/ExternalLink'
+import { footerLinks } from './helpers/FooterData'
+
+import { FooterLink, FooterLinksWrapper, FooterLinkTitle } from './Footer.styled'
+
+export const FooterLinks = () => {
+  const { t } = useTranslation()
+
+  return (
+    <FooterLinksWrapper item xs={12} sm={4} md={7}>
+      {footerLinks.map((data, index) => (
+        <Grid container key={index} item xs={12} md={3} direction="column" mb={3}>
+          <FooterLinkTitle>{t(data.title)}</FooterLinkTitle>
+          {data.links.map(({ label, href, external }, linkIndex) => (
+            <FooterLink key={linkIndex}>
+              {external ? (
+                <ExternalLink href={href}>{t(label)}</ExternalLink>
+              ) : (
+                <Link href={href}>
+                  <a>{t(label)}</a>
+                </Link>
+              )}
+            </FooterLink>
+          ))}
+        </Grid>
+      ))}
+    </FooterLinksWrapper>
+  )
+}
diff --git a/src/components/layout/Footer/LogoSocialIcons.tsx b/src/components/layout/Footer/LogoSocialIcons.tsx
new file mode 100644
index 000000000..98c9108fb
--- /dev/null
+++ b/src/components/layout/Footer/LogoSocialIcons.tsx
@@ -0,0 +1,25 @@
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+
+import { Grid } from '@mui/material'
+
+import { routes } from 'common/routes'
+import PodkrepiLogo from 'components/brand/PodkrepiLogo'
+import { SocialIcons } from './SocialIcons'
+
+export const LogoSocialIcons = () => {
+  const { locale } = useRouter()
+
+  return (
+    <Grid item xs={12} sm={8} md={5} container direction="column">
+      <Grid item>
+        <Link href={routes.index}>
+          <a>
+            <PodkrepiLogo locale={locale} size="large" variant="fixed" />
+          </a>
+        </Link>
+      </Grid>
+      <SocialIcons />
+    </Grid>
+  )
+}
diff --git a/src/components/layout/Footer/SocialIcons.tsx b/src/components/layout/Footer/SocialIcons.tsx
new file mode 100644
index 000000000..5c5c2b097
--- /dev/null
+++ b/src/components/layout/Footer/SocialIcons.tsx
@@ -0,0 +1,25 @@
+import { Facebook, LinkedIn, YouTube, Instagram } from '@mui/icons-material'
+
+import { socialUrls } from 'common/routes'
+import ExternalLink from 'components/common/ExternalLink'
+
+import { SocialIconsWrapper } from './Footer.styled'
+
+export const SocialIcons = () => {
+  return (
+    <SocialIconsWrapper container direction="row">
+      <ExternalLink href={socialUrls.facebook}>
+        <Facebook />
+      </ExternalLink>
+      <ExternalLink href={socialUrls.linkedin}>
+        <LinkedIn />
+      </ExternalLink>
+      <ExternalLink href={socialUrls.youtube}>
+        <YouTube />
+      </ExternalLink>
+      <ExternalLink href={socialUrls.instagram}>
+        <Instagram />
+      </ExternalLink>
+    </SocialIconsWrapper>
+  )
+}
diff --git a/src/components/layout/Footer/helpers/FooterData.tsx b/src/components/layout/Footer/helpers/FooterData.tsx
new file mode 100644
index 000000000..76fd74115
--- /dev/null
+++ b/src/components/layout/Footer/helpers/FooterData.tsx
@@ -0,0 +1,48 @@
+import { routes, staticUrls } from 'common/routes'
+
+export type FooterLink = {
+  label: string
+  href: string
+  external?: boolean
+}
+
+type FooterSection = {
+  title: string
+  links: FooterLink[]
+}
+
+export const footerLinks: FooterSection[] = [
+  {
+    title: 'components.footer.donatе',
+    links: [
+      { label: 'components.footer.all-campaigns', href: routes.campaigns.index },
+      { label: 'components.footer.suggest-campaign', href: routes.campaigns.create },
+    ],
+  },
+  {
+    title: 'components.footer.about-us',
+    links: [
+      { label: 'components.footer.who-are-we', href: routes.about },
+      { label: 'components.footer.about-project', href: routes.aboutProject },
+      { label: 'components.footer.support-us', href: routes.support_us },
+      { label: 'components.footer.become-a-volunteer', href: routes.support },
+      { label: 'components.footer.reports', href: routes.reports },
+    ],
+  },
+  {
+    title: 'components.footer.resources',
+    links: [
+      { external: true, label: 'nav.blog', href: staticUrls.blog },
+      { label: 'components.footer.contact', href: routes.contact },
+      { label: 'components.footer.faq', href: routes.faq },
+    ],
+  },
+  {
+    title: 'components.footer.others',
+    links: [
+      { label: 'components.footer.privacy-policy', href: routes.privacyPolicy },
+      { label: 'components.footer.terms-of-service', href: routes.termsOfService },
+      { external: true, label: 'GitHub', href: staticUrls.github },
+    ],
+  },
+]
diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx
index a2a3db914..50cd4bfdb 100644
--- a/src/components/layout/Layout.tsx
+++ b/src/components/layout/Layout.tsx
@@ -3,7 +3,7 @@ import { useMemo, useState } from 'react'
 import { useTranslation } from 'next-i18next'
 import { Box, BoxProps, Container, ContainerProps, Typography } from '@mui/material'
 
-import Footer from 'components/layout/Footer'
+import Footer from 'components/layout/Footer/Footer'
 import { defaultOgImage } from 'common/routes'
 import Snackbar from 'components/layout/Snackbar'
 import DetailsModal from 'components/modal/DetailsModal'