diff --git a/frontend/react/src/map/map.ts b/frontend/react/src/map/map.ts
index 3a3870de..4880fa7c 100644
--- a/frontend/react/src/map/map.ts
+++ b/frontend/react/src/map/map.ts
@@ -1070,7 +1070,7 @@ export class Map extends L.Map {
             if (this.#effectRequestTable.explosionType === "High explosive") getApp().getServerManager().spawnExplosion(50, "normal", e.latlng);
             else if (this.#effectRequestTable.explosionType === "Napalm") getApp().getServerManager().spawnExplosion(50, "napalm", e.latlng);
             else if (this.#effectRequestTable.explosionType === "White phosphorous") getApp().getServerManager().spawnExplosion(50, "phosphorous", e.latlng);
-
+            else if (this.#effectRequestTable.explosionType === "Fire") getApp().getServerManager().spawnExplosion(50, "fire", e.latlng);
             this.addExplosionMarker(e.latlng);
           } else if (this.#effectRequestTable.type === "smoke") {
             getApp()
diff --git a/frontend/react/src/shortcut/shortcut.ts b/frontend/react/src/shortcut/shortcut.ts
index 3949286e..73259b4c 100644
--- a/frontend/react/src/shortcut/shortcut.ts
+++ b/frontend/react/src/shortcut/shortcut.ts
@@ -1,5 +1,4 @@
-import { OlympusState } from "../constants/constants";
-import { AppStateChangedEvent, ModalEvent, ShortcutChangedEvent, ShortcutsChangedEvent } from "../events";
+import { ModalEvent } from "../events";
 import { ShortcutOptions } from "../interfaces";
 import { keyEventWasInInput } from "../other/utils";
 
diff --git a/frontend/react/src/ui/modals/components/modal.tsx b/frontend/react/src/ui/modals/components/modal.tsx
index c1aecb23..07ba7f8f 100644
--- a/frontend/react/src/ui/modals/components/modal.tsx
+++ b/frontend/react/src/ui/modals/components/modal.tsx
@@ -33,8 +33,8 @@ export function Modal(props: {
               ${
                 props.size === "lg"
                   ? `
-                    h-[600px] w-[1100px]
-                    max-md:h-full max-md:w-full
+                    h-[700px] w-[1100px]
+                    max-xl:h-full max-xl:w-full
                   `
                   : ""
               }
@@ -42,7 +42,7 @@ export function Modal(props: {
                 props.size === "md"
                   ? `
                     h-[600px] w-[950px]
-                    max-md:h-full max-md:w-full
+                    max-lg:h-full max-lg:w-full
                   `
                   : ""
               }
diff --git a/frontend/react/src/ui/modals/loginmodal.tsx b/frontend/react/src/ui/modals/loginmodal.tsx
index 402d8607..5488d398 100644
--- a/frontend/react/src/ui/modals/loginmodal.tsx
+++ b/frontend/react/src/ui/modals/loginmodal.tsx
@@ -89,8 +89,8 @@ export function LoginModal(props: { open: boolean }) {
     <Modal open={props.open} size="md" disableClose={true}>
       <div
         className={`
-          flex w-full flex-row gap-6
-          max-lg:flex-col
+          flex w-full flex-col gap-6
+          lg:flex-row
         `}
       >
         <div
@@ -177,7 +177,7 @@ export function LoginModal(props: { open: boolean }) {
                         </div>
                       </div>
 
-                      <div className={`flex flex-col items-start gap-2`}>
+                      <div className={`flex flex-col items-start gap-1`}>
                         {loginByRole ? (
                           <>
                           <label
diff --git a/frontend/react/src/ui/panels/effectspawnmenu.tsx b/frontend/react/src/ui/panels/effectspawnmenu.tsx
index d449b250..6056f0a9 100644
--- a/frontend/react/src/ui/panels/effectspawnmenu.tsx
+++ b/frontend/react/src/ui/panels/effectspawnmenu.tsx
@@ -7,6 +7,7 @@ import { faArrowLeft, faSmog } from "@fortawesome/free-solid-svg-icons";
 import { LatLng } from "leaflet";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { AppStateChangedEvent } from "../../events";
+import { FaQuestionCircle } from "react-icons/fa";
 
 export function EffectSpawnMenu(props: { visible: boolean; compact: boolean; effect: string | null; latlng?: LatLng | null; onBack?: () => void }) {
   const [appState, setAppState] = useState(OlympusState.NOT_INITIALIZED);
@@ -71,7 +72,7 @@ export function EffectSpawnMenu(props: { visible: boolean; compact: boolean; eff
                   <span className="my-auto text-white">Explosion type</span>
                 </div>
                 <OlDropdown label={explosionType} className="w-full">
-                  {["High explosive", "Napalm", "White phosphorous"].map((optionExplosionType) => {
+                  {["High explosive", "Napalm", "White phosphorous", "Fire"].map((optionExplosionType) => {
                     return (
                       <OlDropdownItem
                         key={optionExplosionType}
@@ -84,6 +85,19 @@ export function EffectSpawnMenu(props: { visible: boolean; compact: boolean; eff
                     );
                   })}
                 </OlDropdown>
+                <div className="flex content-center gap-4 p-4">
+                  <div className="mt-8 text-gray-400">
+                    <FaQuestionCircle />
+                  </div>
+                  <div className="text-sm text-gray-400">
+                    Click on the map to generate an explosion effect. The type of explosion will be the one selected above.
+                    The possible explosion effects are:
+                    <li>High explosive: a normal explosion, like the one from a conventional bomb;</li>
+                    <li>Napalm: an explosion with a longer lasting fire effect;</li>
+                    <li>White phosphorous: an explosion with multiple white flares ejecting from the blast;</li>
+                    <li>Fire: a long lasting static fire.</li>
+                  </div>
+                </div>
               </>
             )}
             {props.effect === "smoke" && (
@@ -117,6 +131,15 @@ export function EffectSpawnMenu(props: { visible: boolean; compact: boolean; eff
                     );
                   })}
                 </div>
+
+                <div className="flex content-center gap-4 p-4">
+                  <div className="my-auto text-gray-400">
+                    <FaQuestionCircle />
+                  </div>
+                  <div className="text-sm text-gray-400">
+                    Click on the map to generate a colored smoke effect. The color of the smoke will be the one selected above.
+                  </div>
+                </div>
               </>
             )}
             {props.compact && (
@@ -133,6 +156,7 @@ export function EffectSpawnMenu(props: { visible: boolean; compact: boolean; eff
                       if (explosionType === "High explosive") getApp().getServerManager().spawnExplosion(50, "normal", props.latlng);
                       else if (explosionType === "Napalm") getApp().getServerManager().spawnExplosion(50, "napalm", props.latlng);
                       else if (explosionType === "White phosphorous") getApp().getServerManager().spawnExplosion(50, "phosphorous", props.latlng);
+                      else if (explosionType === "Fire") getApp().getServerManager().spawnExplosion(50, "fire", props.latlng);
                       getApp().getMap().addExplosionMarker(props.latlng);
                     } else if (props.effect === "smoke") {
                       /* Find the name of the color */
diff --git a/frontend/react/src/ui/panels/unitexplosionmenu.tsx b/frontend/react/src/ui/panels/unitexplosionmenu.tsx
index 615fd2e0..dae65c5f 100644
--- a/frontend/react/src/ui/panels/unitexplosionmenu.tsx
+++ b/frontend/react/src/ui/panels/unitexplosionmenu.tsx
@@ -19,7 +19,7 @@ export function UnitExplosionMenu(props: { open: boolean; onClose: () => void; c
         <span className="text-white">Explosion type</span>
 
         <OlDropdown label={explosionType} className="w-full">
-          {["High explosive", "Napalm", "White phosphorous"].map((optionExplosionType) => {
+          {["High explosive", "Napalm", "White phosphorous", "Fire"].map((optionExplosionType) => {
             return (
               <OlDropdownItem
                 key={optionExplosionType}