.

frontend/src/css/InfoButton.css

@@ -0,0 +1,112 @@
+.info-button {
+    position: absolute;
+    bottom: 40px;
+    right: 20px;
+    /*background-color: var(--background-2);*/
+    background-color: #1CB1F1;
+    color: white;
+    width: 50px;
+    height: 50px;
+    border-radius: 25px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 1.5em;
+    cursor: pointer;
+    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
+    z-index: 1000;
+}
+
+.info-button:hover {
+    background-color: var(--background-3-hover);
+}
+
+.info-box {
+    position: absolute;
+    bottom: 40px;
+    right: calc(20px + 50px + 10px);
+    background-color: var(--background-2);
+    color: white;
+    width: 300px;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
+    z-index: 1000;
+    max-height: 400px;
+    overflow-y: auto;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.info-box.visible {
+    opacity: 1;
+}
+
+.info-box::-webkit-scrollbar {
+    display: none;
+}
+
+.info-box:before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 20px;
+    background: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
+    pointer-events: none;
+}
+
+.info-box:after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 20px;
+    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));
+    pointer-events: none;
+}
+
+
+.color-code {
+    display: inline-block;
+    width: 12px;
+    height: 12px;
+    margin-right: 8px;
+    border-radius: 50%;
+    vertical-align: middle;
+}
+
+.green {
+    background-color: green;
+}
+
+.yellow {
+    background-color: yellow;
+}
+
+.red {
+    background-color: red;
+}
+
+.scroll-btn {
+    position: absolute;
+    right: 10px;
+    width: 30px;
+    height: 30px;
+    background-color: rgba(0, 0, 0, 0.5);
+    color: white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    border-radius: 5px;
+}
+
+.scroll-btn.down {
+    bottom: 400px;
+}
+

frontend/src/pages/Conditions.tsx

@@ -1,11 +1,13 @@
 import ConditionsMap from '../Components/Conditions/ConditionsMap';
+import InfoButton from '../Components/Conditions/InfoButton';
 
 const Conditions = () => {
   return (
     <div style={{ height: '95%' }}>
       <ConditionsMap>
         {/* we could place some other stuff in the bottom, if need should be */}
       </ConditionsMap>
+      <InfoButton />
     </div>
   );
 };