---
myst:
html_meta:
'description': 'Learn How to customize the Footer of the page'
'property=og:description': 'Learn How to customize the Footer of the page'
'property=og:title': 'Footer customization'
'keywords': 'Plone, Volto, Training, Theme, Footer'
---
(voltohandson-footer-label)=
# Footer
We customize the footer using component shadowing as well, by copying the original Volto `Footer` component from the `omelette` folder (`omelette/src/components/theme/Footer/Footer.jsx`) into the `customizations/components/theme/Footer/Footer.jsx` file.
Since we need the Logo component in the Footer, we import it from Volto as we did in the Header:
```jsx
import { Logo } from '@plone/volto/components';
```
Then, we replace the `Footer` component content to match the one from `plone.org`.
```jsx
<>
>
```
and add this styling to the `custom.overrides` file:
```less
//Footer
#footer {
background-color: #113156;
color: #dfe6ec;
padding-top: 55px;
.ui.grid {
.ui.list {
a:hover {
text-decoration: underline;
}
.header {
margin-bottom: 19px;
a {
font-size: 15px;
color: #dfe6ec;
}
}
.item {
margin-bottom: 6px;
a {
font-size: 12.5px;
}
}
}
}
}
#sub-footer {
background: #1f1238;
margin-top: 0;
border: none;
padding-top: 36px;
padding-bottom: 54px;
p,
a {
color: @white;
font-size: 11.5px;
font-weight: bold;
}
}
```