diff --git a/Website/modules/Footer.tsx b/Website/modules/Footer.tsx
index da59da2..1213ea9 100644
--- a/Website/modules/Footer.tsx
+++ b/Website/modules/Footer.tsx
@@ -1,6 +1,8 @@
 import React, {useEffect} from 'react';
 import '../styles/footer.css';
 import {Job} from './Job';
+import Icon from '@mdi/react';
+import { mdiRun, mdiCounter, mdiEyeCheck } from '@mdi/js';
 
 export default function Footer(){
     const [MonitoringJobsCount, setMonitoringJobsCount] = React.useState(0);
@@ -19,9 +21,9 @@ export default function Footer(){
 
     return (
     <footer>
-        <p>{MonitoringJobsCount}</p>
-        <p>{AllJobsCount}</p>
-        <p>{RunningJobsCount}</p>
+        <div><Icon path={mdiEyeCheck} size={1} /> <span>{MonitoringJobsCount}</span></div>
+        <div><Icon path={mdiRun} size={1} /> <span>{RunningJobsCount}</span></div>
+        <div><Icon path={mdiCounter} size={1} /> <span>{AllJobsCount}</span></div>
         <p id="madeWith">Made with Blåhaj 🦈</p>
     </footer>)
 }
\ No newline at end of file
diff --git a/Website/styles/footer.css b/Website/styles/footer.css
index 41c6fdb..bdb38cd 100644
--- a/Website/styles/footer.css
+++ b/Website/styles/footer.css
@@ -18,4 +18,19 @@ footer {
     text-align: right;
     margin-right: 20px;
     cursor: url("Website/media/blahaj.png"), grab;
+}
+
+footer div {
+    margin: 0 10px;
+    display: flex;
+    align-items: center;
+    justify-items: center;
+    background-color: rgba(255,255,255, 0.3);
+    border-radius: 10px;
+    padding: 0 5px;
+}
+
+footer div > * {
+    margin: 0 2px;
+    padding: 3px 0;
 }
\ No newline at end of file