diff --git a/src/App.js b/src/App.js
index e3e6721..911e8d6 100644
--- a/src/App.js
+++ b/src/App.js
@@ -136,7 +136,7 @@ function App() {
 
   return (
     <Router>
-      <div className='row'>
+      <div className='container'>
         <Navigation language={language} />
         <Routes>
           <Route exact path='/' element={<Home language={"en"} />}></Route>
@@ -170,9 +170,8 @@ function App() {
 
           <Route exact path='/japanMap' element={<Japan />}></Route>
         </Routes>
-
-        <Footer />
       </div>
+      <Footer />
     </Router>
   );
 }
diff --git a/src/UI/Footer.js b/src/UI/Footer.js
index 3d49234..b2ec928 100644
--- a/src/UI/Footer.js
+++ b/src/UI/Footer.js
@@ -10,8 +10,12 @@ const Footer = () => {
 
     return (
         <footer className={`bg-${theme} text-center text-lg-start text-${theme}`}>
-            <p className="small">{getString(language, 'footer_madewith')}: <a className={`link-${theme}`} href="https://reactjs.org/" target="_blank" rel="noopener noreferrer">React</a>, <a className={`link-${theme}`} href="https://fsharp.org/" target="_blank" rel="noopener noreferrer">F#</a>, <a className={`link-${theme}`} href="https://github.com/giraffe-fsharp/Giraffe" target="_blank" rel="noopener noreferrer">Giraffe</a>, <a className={`link-${theme}`} href="https://getbootstrap.com/" target="_blank" rel="noopener noreferrer">Bootstrap</a>, <a className={`link-${theme}`} href="https://www.nginx.com/" target="_blank" rel="noopener noreferrer">Nginx</a> {getString(language, 'and')} <a className={`link-${theme}`} href="https://www.docker.com/" target="_blank" rel="noopener noreferrer">Docker</a> {getString(language, 'on')} <a className={`link-${theme}`} href="https://www.digitalocean.com/" target="_blank" rel="noopener noreferrer">DigitalOcean</a> cloud droplets.</p>
-            <p className="small">{getString(language, 'footer_contentparsed')}: <a className={`link-${theme}`} href="https://github.com/quantizor/markdown-to-jsx" target="_blank" rel="noopener noreferrer">markdown-to-jsx</a></p>
+            <div className="container-fluid">
+                <span className="small">{getString(language, 'footer_madewith')}: <a className={`link-${theme}`} href="https://reactjs.org/" target="_blank" rel="noopener noreferrer">React</a>, <a className={`link-${theme}`} href="https://fsharp.org/" target="_blank" rel="noopener noreferrer">F#</a>, <a className={`link-${theme}`} href="https://github.com/giraffe-fsharp/Giraffe" target="_blank" rel="noopener noreferrer">Giraffe</a>, <a className={`link-${theme}`} href="https://getbootstrap.com/" target="_blank" rel="noopener noreferrer">Bootstrap</a>, <a className={`link-${theme}`} href="https://www.nginx.com/" target="_blank" rel="noopener noreferrer">Nginx</a> {getString(language, 'and')} <a className={`link-${theme}`} href="https://www.docker.com/" target="_blank" rel="noopener noreferrer">Docker</a> {getString(language, 'on')} <a className={`link-${theme}`} href="https://www.digitalocean.com/" target="_blank" rel="noopener noreferrer">DigitalOcean</a> cloud droplets.</span>
+                <br />
+                <span className="small">{getString(language, 'footer_contentparsed')}: <a className={`link-${theme}`} href="https://github.com/quantizor/markdown-to-jsx" target="_blank" rel="noopener noreferrer">markdown-to-jsx</a></span>
+                <br /><br />
+            </div>
         </footer>
     )
 }