diff --git a/src/index.html b/src/index.html
index 7fb2c0d274972abe56425cf90a747d312e6bf8ca..60bffeb9e0c469ae45a60d653759dd048108248a 100644
--- a/src/index.html
+++ b/src/index.html
@@ -24,7 +24,7 @@
               src="../assets/CC-Logo.png"
               alt="Logo der Website"
               id="logo"
-              width="156px"
+              width="144px"
             />
           </div>
           <hr />
@@ -120,6 +120,38 @@
               <i id="PauseIcon" class="fa-solid fa-xl fa-pause"></i>
             </div>
           </div>
+          <hr />
+          <div style="white-space: nowrap">
+            <h5>Legend</h5>
+            <div class="elementsInLegend">
+              <i
+                style="color: red; margin-right: 6px"
+                class="fa-sharp fa-solid fa-l fa-exclamation"
+              ></i>
+              <span>User Action Required</span>
+            </div>
+            <div class="elementsInLegend">
+              <i
+                style="color: green; margin-right: 6px"
+                class="fa-sharp fa-l fa-solid fa-check"
+              ></i>
+              <span>Ready To Deploy</span>
+            </div>
+            <div class="elementsInLegend">
+              <i
+                style="color: blue; margin-right: 6px"
+                class="fa-solid fa-l fa-play"
+              ></i>
+              <span>Deployed And Running</span>
+            </div>
+            <div class="elementsInLegend">
+              <i
+                style="color: orange; margin-right: 6px"
+                class="fa-solid fa-l fa-pause"
+              ></i>
+              <span>Deployed But Paused</span>
+            </div>
+          </div>
         </div>
         <div id="Diagram">
           <h4>ARCHITECTURE</h4>
@@ -140,27 +172,6 @@
           </button>
         </div>
       </div>
-      <div class="iconsLegend">
-        <div>
-          <i
-            style="color: red"
-            class="fa-sharp fa-solid fa-xl fa-exclamation"
-          ></i>
-          <span>User Action Required</span>
-        </div>
-        <div>
-          <i style="color: green" class="fa-sharp fa-xl fa-solid fa-check"></i>
-          <span>Ready To Deploy</span>
-        </div>
-        <div>
-          <i style="color: blue" class="fa-solid fa-xl fa-play"></i>
-          <span>Deployed And Running</span>
-        </div>
-        <div>
-          <i style="color: orange" class="fa-solid fa-xl fa-pause"></i>
-          <span>Deployed And Paused</span>
-        </div>
-      </div>
     </div>
     <script src="main.js"></script>
   </body>
diff --git a/src/style.css b/src/style.css
index 10e30a56cd098540b04867d554419b1ac7e2270e..29d30bc903713740186cbe80c78e849aff5df228 100644
--- a/src/style.css
+++ b/src/style.css
@@ -14,7 +14,7 @@ body {
 
 #Diagram {
   width: 100%;
-  height: 95vh;
+  height: 98vh;
   margin: 6px;
   border: 1px solid black;
   border-radius: 4px;
@@ -23,11 +23,13 @@ body {
 
 #Toolbox {
   width: fit-content;
-  height: 95vh;
+  height: 98vh;
   margin: 6px;
   padding: 0 24px;
   border: 1px solid black;
   border-radius: 4px;
+  overflow-y: auto;
+  overflow-x: auto;
 }
 .Filter {
   text-align: center;
@@ -341,9 +343,9 @@ body {
   justify-content: space-between;
 }
 
-.iconsLegend {
-  display: flex;
-  justify-content: space-around;
+.elementsInLegend {
+  text-align: left;
+  margin: 12px 0;
 }
 
 #logoContainer {