diff --git a/config.toml b/config.toml
index 4629822..0207885 100644
--- a/config.toml
+++ b/config.toml
@@ -8,6 +8,8 @@ highlight_code = true
 
 [extra]
 
+name = "Foo Bar"
+
 social = [
   {title = 'Mail', icon = 'mail', link = 'mailto:foo@bar.de'},
   {title = 'Git', icon = 'git', link = '#git'},
@@ -15,6 +17,9 @@ social = [
   {title = 'Web', icon = 'web', link = 'https://example.com'},
 ]
 
+backgroundcolor = "#10A1EE40"
+backgroundimage = "img/background.svg"
+
 [[extra.footer]]
 copyleft = 'Kasia-Marysia'
 zola = 'Created With Rust'
diff --git a/public/img/background.svg b/public/img/background.svg
new file mode 100644
index 0000000..97e8165
--- /dev/null
+++ b/public/img/background.svg
@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="1920"
+   height="1080"
+   viewBox="0 0 507.99999 285.75"
+   version="1.1"
+   id="svg1"
+   xml:space="preserve"
+   sodipodi:docname="background.svg"
+   inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
+     id="namedview1"
+     pagecolor="#505050"
+     bordercolor="#ffffff"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="1"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     inkscape:zoom="0.37800566"
+     inkscape:cx="95.236669"
+     inkscape:cy="666.65668"
+     inkscape:current-layer="layer1"
+     showgrid="false" /><defs
+     id="defs1" /><g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"><rect
+       style="fill:#ffffff;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4.2;paint-order:stroke markers fill"
+       id="rect4"
+       width="508"
+       height="285.75"
+       x="0"
+       y="0" /><path
+       id="rect1"
+       style="fill:#666666;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4.2;paint-order:stroke markers fill"
+       d="M 0 0 L 0 285.75 L 50.976733 285.75 L 265.49749 285.75 L 158.23737 142.875 L 265.49749 0 L 50.976733 0 L 0 0 z " /><path
+       id="rect6"
+       style="mix-blend-mode:screen;fill:#1a1a1a;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4.2;paint-order:stroke markers fill"
+       d="m 0,0 v 285.75 l 52.640198,0 L 157.38109,142.9243 51.960136,0 Z"
+       sodipodi:nodetypes="cccccc" /><path
+       id="path7"
+       style="display:inline;mix-blend-mode:exclusion;fill:#4d4d4d;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4.2;paint-order:stroke markers fill"
+       d="M 181.10212,0 0,78.329069 V 110.5023 L 105.18428,135.77001 254,0 Z M 105.18428,149.97999 0,175.2477 v 32.17323 L 181.10212,285.75 H 254 Z" /><path
+       id="rect5"
+       style="display:inline;opacity:1;mix-blend-mode:screen;fill:#1a1a1a;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4.2;paint-order:stroke markers fill"
+       d="M 0,17.874878 V 267.87512 L 125.00012,142.875 Z" /></g></svg>
diff --git a/public/img/fediverse.svg b/public/img/fediverse.svg
new file mode 100644
index 0000000..dbe3213
--- /dev/null
+++ b/public/img/fediverse.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M433 179.11c0-97.2-63.71-125.7-63.71-125.7-62.52-28.7-228.56-28.4-290.48 0 0 0-63.72 28.5-63.72 125.7 0 115.7-6.6 259.4 105.63 289.1 40.51 10.7 75.32 13 103.33 11.4 50.81-2.8 79.32-18.1 79.32-18.1l-1.7-36.9s-36.31 11.4-77.12 10.1c-40.41-1.4-83-4.4-89.63-54a102.54 102.54 0 0 1-.9-13.9c85.63 20.9 158.65 9.1 178.75 6.7 56.12-6.7 105-41.3 111.23-72.9 9.8-49.8 9-121.5 9-121.5zm-75.12 125.2h-46.63v-114.2c0-49.7-64-51.6-64 6.9v62.5h-46.33V197c0-58.5-64-56.6-64-6.9v114.2H90.19c0-122.1-5.2-147.9 18.41-175 25.9-28.9 79.82-30.8 103.83 6.1l11.6 19.5 11.6-19.5c24.11-37.1 78.12-34.8 103.83-6.1 23.71 27.3 18.4 53 18.4 175z"/></svg>
diff --git a/public/img/git.svg b/public/img/git.svg
new file mode 100644
index 0000000..dbe3213
--- /dev/null
+++ b/public/img/git.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M433 179.11c0-97.2-63.71-125.7-63.71-125.7-62.52-28.7-228.56-28.4-290.48 0 0 0-63.72 28.5-63.72 125.7 0 115.7-6.6 259.4 105.63 289.1 40.51 10.7 75.32 13 103.33 11.4 50.81-2.8 79.32-18.1 79.32-18.1l-1.7-36.9s-36.31 11.4-77.12 10.1c-40.41-1.4-83-4.4-89.63-54a102.54 102.54 0 0 1-.9-13.9c85.63 20.9 158.65 9.1 178.75 6.7 56.12-6.7 105-41.3 111.23-72.9 9.8-49.8 9-121.5 9-121.5zm-75.12 125.2h-46.63v-114.2c0-49.7-64-51.6-64 6.9v62.5h-46.33V197c0-58.5-64-56.6-64-6.9v114.2H90.19c0-122.1-5.2-147.9 18.41-175 25.9-28.9 79.82-30.8 103.83 6.1l11.6 19.5 11.6-19.5c24.11-37.1 78.12-34.8 103.83-6.1 23.71 27.3 18.4 53 18.4 175z"/></svg>
diff --git a/public/img/mail.svg b/public/img/mail.svg
new file mode 100644
index 0000000..ba15719
--- /dev/null
+++ b/public/img/mail.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg>
diff --git a/public/img/profile.png b/public/img/profile.png
new file mode 100644
index 0000000..f8073e2
Binary files /dev/null and b/public/img/profile.png differ
diff --git a/public/img/web.svg b/public/img/web.svg
new file mode 100644
index 0000000..dbe3213
--- /dev/null
+++ b/public/img/web.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M433 179.11c0-97.2-63.71-125.7-63.71-125.7-62.52-28.7-228.56-28.4-290.48 0 0 0-63.72 28.5-63.72 125.7 0 115.7-6.6 259.4 105.63 289.1 40.51 10.7 75.32 13 103.33 11.4 50.81-2.8 79.32-18.1 79.32-18.1l-1.7-36.9s-36.31 11.4-77.12 10.1c-40.41-1.4-83-4.4-89.63-54a102.54 102.54 0 0 1-.9-13.9c85.63 20.9 158.65 9.1 178.75 6.7 56.12-6.7 105-41.3 111.23-72.9 9.8-49.8 9-121.5 9-121.5zm-75.12 125.2h-46.63v-114.2c0-49.7-64-51.6-64 6.9v62.5h-46.33V197c0-58.5-64-56.6-64-6.9v114.2H90.19c0-122.1-5.2-147.9 18.41-175 25.9-28.9 79.82-30.8 103.83 6.1l11.6 19.5 11.6-19.5c24.11-37.1 78.12-34.8 103.83-6.1 23.71 27.3 18.4 53 18.4 175z"/></svg>
diff --git a/public/style.css b/public/style.css
new file mode 100644
index 0000000..e4cee7b
--- /dev/null
+++ b/public/style.css
@@ -0,0 +1,22 @@
+body {
+  margin: 0px;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  background-repeat: repeat-y;
+}
+
+.container {
+  width: 100vw;
+  height: 100vh;
+  margin: 0px;
+}
+
+.content-social-profile img {
+  max-width: 200px;
+  max-height: 200px;
+  border-radius: 50%;
+}
+
+
+
diff --git a/static/img/background.svg b/static/img/background.svg
new file mode 100644
index 0000000..97e8165
--- /dev/null
+++ b/static/img/background.svg
@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="1920"
+   height="1080"
+   viewBox="0 0 507.99999 285.75"
+   version="1.1"
+   id="svg1"
+   xml:space="preserve"
+   sodipodi:docname="background.svg"
+   inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
+     id="namedview1"
+     pagecolor="#505050"
+     bordercolor="#ffffff"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="1"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     inkscape:zoom="0.37800566"
+     inkscape:cx="95.236669"
+     inkscape:cy="666.65668"
+     inkscape:current-layer="layer1"
+     showgrid="false" /><defs
+     id="defs1" /><g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"><rect
+       style="fill:#ffffff;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4.2;paint-order:stroke markers fill"
+       id="rect4"
+       width="508"
+       height="285.75"
+       x="0"
+       y="0" /><path
+       id="rect1"
+       style="fill:#666666;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4.2;paint-order:stroke markers fill"
+       d="M 0 0 L 0 285.75 L 50.976733 285.75 L 265.49749 285.75 L 158.23737 142.875 L 265.49749 0 L 50.976733 0 L 0 0 z " /><path
+       id="rect6"
+       style="mix-blend-mode:screen;fill:#1a1a1a;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4.2;paint-order:stroke markers fill"
+       d="m 0,0 v 285.75 l 52.640198,0 L 157.38109,142.9243 51.960136,0 Z"
+       sodipodi:nodetypes="cccccc" /><path
+       id="path7"
+       style="display:inline;mix-blend-mode:exclusion;fill:#4d4d4d;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4.2;paint-order:stroke markers fill"
+       d="M 181.10212,0 0,78.329069 V 110.5023 L 105.18428,135.77001 254,0 Z M 105.18428,149.97999 0,175.2477 v 32.17323 L 181.10212,285.75 H 254 Z" /><path
+       id="rect5"
+       style="display:inline;opacity:1;mix-blend-mode:screen;fill:#1a1a1a;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4.2;paint-order:stroke markers fill"
+       d="M 0,17.874878 V 267.87512 L 125.00012,142.875 Z" /></g></svg>
diff --git a/static/img/profile.png b/static/img/profile.png
new file mode 100644
index 0000000..f8073e2
Binary files /dev/null and b/static/img/profile.png differ
diff --git a/static/style.css b/static/style.css
new file mode 100644
index 0000000..e4cee7b
--- /dev/null
+++ b/static/style.css
@@ -0,0 +1,22 @@
+body {
+  margin: 0px;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  background-repeat: repeat-y;
+}
+
+.container {
+  width: 100vw;
+  height: 100vh;
+  margin: 0px;
+}
+
+.content-social-profile img {
+  max-width: 200px;
+  max-height: 200px;
+  border-radius: 50%;
+}
+
+
+
diff --git a/templates/index.html b/templates/index.html
index 78da6e9..f267d8a 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -5,16 +5,24 @@
   <title>{% block title %}{{ config.title }}{% endblock title %}</title>
   <link rel='stylesheet' href='/style.css' type='text/css' >
 </head>
-<body>
-  <div class="container">
+<body style="background-image: url({{ config.extra.backgroundimage }})">
+  <div class="container" style="background: {{ config.extra.backgroundcolor}}; box-shadow: inset 0 0 2000px {{ config.extra.backgroundcolor }}">
     <div class="header">
       <p>Here comes the banner</p>
     </div>
     <div class="content">
       <div class="content-social">
+        <div class="content-social-profile">
+          <img src="/img/profile.png">
+        </div>
+        <div class="content-social-name">
+          <p>{{ config.extra.name }}</p>
+        </div>
         {% if config.extra.social %}
           {% for links in config.extra.social %}
+            <div class="content-social-{{ links.title }}">
             <a href="{{ links.link }}"><img src="/img/{{ links.icon }}.svg"alt="Socialmedia Icon for {{links.icon}}" style="width: 25px; filter: invert(75%)"</img></a><a> {{ links.title }}<br>
+            </div>
           {% endfor %}
         {% endif %}
       </div>