diff --git a/README.md b/README.md
index dc3c5985..403ba83a 100644
--- a/README.md
+++ b/README.md
@@ -28,6 +28,20 @@
     <img alt="Read the Docs" src="https://img.shields.io/readthedocs/emhass">
   </a>
 </p>
+<div align="center">
+ <a href="https://emhass.readthedocs.io/en/latest/">
+      <img src="https://raw.githubusercontent.com/davidusb-geek/emhass/master/docs/images/Documentation_button.svg" alt="Documentation">
+  </a>
+   <a href="https://community.home-assistant.io/t/emhass-an-energy-management-for-home-assistant/338126">
+      <img src="https://raw.githubusercontent.com/davidusb-geek/emhass/master/docs/images/Community_button.svg" alt="Community">
+  </a>
+  <a href="https://github.com/davidusb-geek/emhass/issues">
+      <img src="https://raw.githubusercontent.com/davidusb-geek/emhass/master/docs/images/Issues_button.svg" alt="Issues">
+  </a>
+  <a href="https://github.com/davidusb-geek/emhass-add-on">
+     <img src="https://raw.githubusercontent.com/davidusb-geek/emhass/master/docs/images/EMHASS_Add_on_button.svg" alt="EMHASS Add-on">
+  </a>
+</div>
 <br>
 <p align="center">
 If you like this work please consider buying a coffee ;-) 
diff --git a/docs/images/Community_button.svg b/docs/images/Community_button.svg
new file mode 100644
index 00000000..9406b927
--- /dev/null
+++ b/docs/images/Community_button.svg
@@ -0,0 +1,40 @@
+<svg fill="none" width="110" height="35" xmlns="http://www.w3.org/2000/svg">
+    <foreignObject width="100%" height="100%">
+       <div xmlns="http://www.w3.org/1999/xhtml">
+          <style>
+             .invert-image{
+             font-size: 15px;
+             padding: 5px 12px;
+             border-radius: 7px;
+             color: #3d3d3d;
+             background-color: #e1e1e1;
+             box-shadow: #3d3d3d 3px 3px;
+             }
+             .invert-image:hover {
+             color: darkblue;
+             background-color: #e1e1e1;
+             }
+             .invert-image:active {
+             background-color: #d7d7db;
+             }
+             
+             @media (prefers-color-scheme: dark) {
+             .invert-image{
+             border-width: 1px;
+             color: #e1e1e1;
+             background-color: #282928;
+             box-shadow: #282928 4px 7px;
+             }
+             .invert-image:hover {
+             color: #ccf3ff;
+             background-color: #3d3d3d;
+             }
+             .invert-image:active {
+             background-color: #111111;
+             }
+             }
+          </style>
+          <button class="invert-image">Community</button>
+       </div>   
+    </foreignObject>
+ </svg>
\ No newline at end of file
diff --git a/docs/images/Documentation_button.svg b/docs/images/Documentation_button.svg
new file mode 100644
index 00000000..749330ae
--- /dev/null
+++ b/docs/images/Documentation_button.svg
@@ -0,0 +1,40 @@
+<svg fill="none" width="135" height="35" xmlns="http://www.w3.org/2000/svg">
+    <foreignObject width="100%" height="100%">
+       <div xmlns="http://www.w3.org/1999/xhtml">
+          <style>
+             .invert-image{
+             font-size: 15px;
+             padding: 5px 12px;
+             border-radius: 7px;
+             color: #3d3d3d;
+             background-color: #e1e1e1;
+             box-shadow: #3d3d3d 3px 3px;
+             }
+             .invert-image:hover {
+             color: darkblue;
+             background-color: #e1e1e1;
+             }
+             .invert-image:active {
+             background-color: #d7d7db;
+             }
+             
+             @media (prefers-color-scheme: dark) {
+             .invert-image{
+             border-width: 1px;
+             color: #e1e1e1;
+             background-color: #282928;
+             box-shadow: #282928 4px 7px;
+             }
+             .invert-image:hover {
+             color: #ccf3ff;
+             background-color: #3d3d3d;
+             }
+             .invert-image:active {
+             background-color: #111111;
+             }
+             }
+          </style>
+          <button class="invert-image">Documentation</button>
+       </div>   
+    </foreignObject>
+ </svg>
\ No newline at end of file
diff --git a/docs/images/EMHASS_Add_on_button.svg b/docs/images/EMHASS_Add_on_button.svg
new file mode 100644
index 00000000..88347998
--- /dev/null
+++ b/docs/images/EMHASS_Add_on_button.svg
@@ -0,0 +1,40 @@
+<svg fill="none"  width="150" height="35" xmlns="http://www.w3.org/2000/svg">
+    <foreignObject width="100%" height="100%">
+       <div xmlns="http://www.w3.org/1999/xhtml">
+          <style>
+             .invert-image{
+             font-size: 15px;
+             padding: 5px 12px;
+             border-radius: 7px;
+             color: #3d3d3d;
+             background-color: #e1e1e1;
+             box-shadow: #3d3d3d 3px 3px;
+             }
+             .invert-image:hover {
+             color: darkblue;
+             background-color: #e1e1e1;
+             }
+             .invert-image:active {
+             background-color: #d7d7db;
+             }
+             
+             @media (prefers-color-scheme: dark) {
+             .invert-image{
+             border-width: 1px;
+             color: #e1e1e1;
+             background-color: #282928;
+             box-shadow: #282928 4px 7px;
+             }
+             .invert-image:hover {
+             color: #ccf3ff;
+             background-color: #3d3d3d;
+             }
+             .invert-image:active {
+             background-color: #111111;
+             }
+             }
+          </style>
+          <button class="invert-image">EMHASS Add-on</button>
+       </div>   
+    </foreignObject>
+ </svg>
\ No newline at end of file
diff --git a/docs/images/Issues_button.svg b/docs/images/Issues_button.svg
new file mode 100644
index 00000000..e288d3a8
--- /dev/null
+++ b/docs/images/Issues_button.svg
@@ -0,0 +1,40 @@
+<svg fill="none"  width="77" height="35" xmlns="http://www.w3.org/2000/svg">
+    <foreignObject width="100%" height="100%" >
+       <div xmlns="http://www.w3.org/1999/xhtml">
+          <style>
+             .invert-image{
+             font-size: 15px;
+             padding: 5px 12px;
+             border-radius: 7px;
+             color: #3d3d3d;
+             background-color: #e1e1e1;
+             box-shadow: #3d3d3d 3px 3px;
+             }
+             .invert-image:hover {
+             color: darkblue;
+             background-color: #e1e1e1;
+             }
+             .invert-image:active {
+             background-color: #d7d7db;
+             }
+             
+             @media (prefers-color-scheme: dark) {
+             .invert-image{
+             border-width: 1px;
+             color: #e1e1e1;
+             background-color: #282928;
+             box-shadow: #282928 4px 7px;
+             }
+             .invert-image:hover {
+             color: #ccf3ff;
+             background-color: #3d3d3d;
+             }
+             .invert-image:active {
+             background-color: #111111;
+             }
+             }
+          </style>
+          <button class="invert-image">Issues</button>
+       </div>   
+    </foreignObject>
+ </svg>
\ No newline at end of file