diff --git a/assets/layers/maproulette/maproulette.json b/assets/layers/maproulette/maproulette.json
index 9c5a24c713..a536c73e7c 100644
--- a/assets/layers/maproulette/maproulette.json
+++ b/assets/layers/maproulette/maproulette.json
@@ -238,7 +238,7 @@
             "cs": "Označit jako příliš těžké"
           },
           "status": "6",
-          "image": "not_found"
+          "image": "./assets/svg/not_found.svg"
         }
       }
     }
diff --git a/src/UI/Map/Icon.svelte b/src/UI/Map/Icon.svelte
index dc8783494f..d39f534444 100644
--- a/src/UI/Map/Icon.svelte
+++ b/src/UI/Map/Icon.svelte
@@ -24,6 +24,9 @@
   import Gps_arrow from "../../assets/svg/Gps_arrow.svelte";
   import { HeartIcon } from "@babeard/svelte-heroicons/solid";
   import { HeartIcon as HeartOutlineIcon } from "@babeard/svelte-heroicons/outline";
+  import Confirm from "../../assets/svg/Confirm.svelte";
+  import Not_found from "../../assets/svg/Not_found.svelte";
+  import { twMerge } from "tailwind-merge";
 
   /**
    * Renders a single icon.
@@ -32,71 +35,75 @@
    */
 
   export let icon: string | undefined;
-  export let color: string | undefined = undefined
-  export let clss: string | undefined = undefined
+  export let color: string | undefined = undefined;
+  export let clss: string | undefined = undefined;
 </script>
 
 {#if icon}
-    {#if icon === "pin"}
-      <Pin {color} class={clss}/>
-    {:else if icon === "square"}
-      <Square {color} class={clss}/>
-    {:else if icon === "circle"}
-      <Circle {color} class={clss}/>
-    {:else if icon === "checkmark"}
-      <Checkmark {color} class={clss}/>
-    {:else if icon === "clock"}
-      <Clock {color} class={clss}/>
-    {:else if icon === "close"}
-      <Close {color} class={clss}/>
-    {:else if icon === "crosshair"}
-      <Crosshair {color} class={clss}/>
-    {:else if icon === "help"}
-      <Help {color} class={clss}/>
-    {:else if icon === "home"}
-      <Home {color} class={clss}/>
-    {:else if icon === "invalid"}
-      <Invalid {color} class={clss}/>
-    {:else if icon === "location"}
-      <Location {color} class={clss}/>
-    {:else if icon === "location_empty"}
-      <Location_empty {color} class={clss}/>
-    {:else if icon === "location_locked"}
-      <Location_locked {color} class={clss}/>
-    {:else if icon === "note"}
-      <Note {color} class={clss}/>
-    {:else if icon === "resolved"}
-      <Resolved {color} class={clss}/>
-    {:else if icon === "ring"}
-      <Ring {color} class={clss}/>
-    {:else if icon === "scissors"}
-      <Scissors {color} class={clss}/>
-    {:else if icon === "teardrop"}
-      <Teardrop {color} class={clss}/>
-    {:else if icon === "teardrop_with_hole_green"}
-      <Teardrop_with_hole_green {color} class={clss}/>
-    {:else if icon === "triangle"}
-      <Triangle {color} class={clss}/>
-    {:else if icon === "brick_wall_square"}
-      <Brick_wall_square {color} class={clss}/>
-    {:else if icon === "brick_wall_round"}
-      <Brick_wall_round {color} class={clss}/>
-    {:else if icon === "gps_arrow"}
-      <Gps_arrow {color} class={clss}/>
-    {:else if icon === "checkmark"}
-      <Checkmark {color} class={clss}/>
-    {:else if icon === "help"}
-      <Help {color} class={clss}/>
-    {:else if icon === "close"}
-      <Close {color} class={clss}/>
-    {:else if icon === "invalid"}
-      <Invalid {color} class={clss}/>
-    {:else if icon === "heart"}
-      <HeartIcon class={clss}/>
-    {:else if icon === "heart_outline"}
-      <HeartOutlineIcon class={clss}/>
-    {:else}
-      <img class={clss ?? "h-full w-full"} src={icon}  aria-hidden="true"
-           alt="" />
-    {/if}
+  {#if icon === "pin"}
+    <Pin {color} class={clss} />
+  {:else if icon === "square"}
+    <Square {color} class={clss} />
+  {:else if icon === "circle"}
+    <Circle {color} class={clss} />
+  {:else if icon === "checkmark"}
+    <Checkmark {color} class={clss} />
+  {:else if icon === "clock"}
+    <Clock {color} class={clss} />
+  {:else if icon === "close"}
+    <Close {color} class={clss} />
+  {:else if icon === "crosshair"}
+    <Crosshair {color} class={clss} />
+  {:else if icon === "help"}
+    <Help {color} class={clss} />
+  {:else if icon === "home"}
+    <Home {color} class={clss} />
+  {:else if icon === "invalid"}
+    <Invalid {color} class={clss} />
+  {:else if icon === "location"}
+    <Location {color} class={clss} />
+  {:else if icon === "location_empty"}
+    <Location_empty {color} class={clss} />
+  {:else if icon === "location_locked"}
+    <Location_locked {color} class={clss} />
+  {:else if icon === "note"}
+    <Note {color} class={clss} />
+  {:else if icon === "resolved"}
+    <Resolved {color} class={clss} />
+  {:else if icon === "ring"}
+    <Ring {color} class={clss} />
+  {:else if icon === "scissors"}
+    <Scissors {color} class={clss} />
+  {:else if icon === "teardrop"}
+    <Teardrop {color} class={clss} />
+  {:else if icon === "teardrop_with_hole_green"}
+    <Teardrop_with_hole_green {color} class={clss} />
+  {:else if icon === "triangle"}
+    <Triangle {color} class={clss} />
+  {:else if icon === "brick_wall_square"}
+    <Brick_wall_square {color} class={clss} />
+  {:else if icon === "brick_wall_round"}
+    <Brick_wall_round {color} class={clss} />
+  {:else if icon === "gps_arrow"}
+    <Gps_arrow {color} class={clss} />
+  {:else if icon === "checkmark"}
+    <Checkmark {color} class={clss} />
+  {:else if icon === "help"}
+    <Help {color} class={clss} />
+  {:else if icon === "close"}
+    <Close {color} class={clss} />
+  {:else if icon === "invalid"}
+    <Invalid {color} class={clss} />
+  {:else if icon === "heart"}
+    <HeartIcon class={clss} />
+  {:else if icon === "heart_outline"}
+    <HeartOutlineIcon class={clss} />
+  {:else if icon === "confirm"}
+    <Confirm class={clss} {color} />
+  {:else if icon === "not_found"}
+    <Not_found class={twMerge(clss, "no-image-background")} {color} />
+  {:else}
+    <img class={clss ?? "h-full w-full"} src={icon} aria-hidden="true"
+         alt="" />
+  {/if}
 {/if}
diff --git a/src/UI/MapRoulette/MaprouletteSetStatus.svelte b/src/UI/MapRoulette/MaprouletteSetStatus.svelte
new file mode 100644
index 0000000000..c2071b59de
--- /dev/null
+++ b/src/UI/MapRoulette/MaprouletteSetStatus.svelte
@@ -0,0 +1,73 @@
+<script lang="ts">
+  import type { SpecialVisualizationState } from "../SpecialVisualization";
+  import { Store, UIEventSource } from "../../Logic/UIEventSource";
+  import Loading from "../../assets/svg/Loading.svelte";
+  import Tr from "../Base/Tr.svelte";
+  import Translations from "../i18n/Translations";
+  import Icon from "../Map/Icon.svelte";
+  import Maproulette from "../../Logic/Maproulette";
+
+  /**
+   * A UI-element to change the status of a maproulette-task
+   */
+  export let state: SpecialVisualizationState;
+  export let tags: UIEventSource<Record<string, string>>;
+  export let message: string;
+  export let image: string;
+  export let message_closed: string;
+  export let statusToSet: string;
+  export let maproulette_id_key: string;
+
+  let applying = false;
+  let failed = false;
+
+  /** Current status of the task*/
+  let status: Store<number> = tags
+    .map((tgs) => {
+      if (tgs["status"]) {
+        return tgs["status"];
+      }
+      return Maproulette.codeToIndex(tgs["mr_taskStatus"]);
+    }).map(Number);
+
+  async function apply() {
+    const maproulette_id =
+      tags.data[maproulette_id_key] ??
+      tags.data.mr_taskId ??
+      tags.data.id;
+    try {
+      await Maproulette.singleton.closeTask(
+        Number(maproulette_id),
+        Number(statusToSet),
+        {
+          tags: `MapComplete MapComplete:${state.layout.id}`
+        }
+      );
+      tags.data["mr_taskStatus"] =
+        Maproulette.STATUS_MEANING[Number(statusToSet)];
+      tags.data.status = statusToSet;
+      tags.ping();
+    } catch (e) {
+      console.error(e);
+      failed = true;
+    }
+  }
+
+</script>
+
+{#if failed}
+  <div class="alert">
+    ERROR - could not close the MapRoulette task
+  </div>
+{:else if applying}
+  <Loading>
+    <Tr t={Translations.t.general.loading} />
+  </Loading>
+{:else if $status === Maproulette.STATUS_OPEN}
+  <button class="w-full p-4 no-image-background" on:click={() => apply()}>
+    <Icon clss="w-8 h-8 mr-2" icon={image} />
+    {message}
+  </button>
+{:else}
+  {message_closed}
+{/if}
diff --git a/src/UI/SpecialVisualizations.ts b/src/UI/SpecialVisualizations.ts
index 0439a3c15a..9170b0947f 100644
--- a/src/UI/SpecialVisualizations.ts
+++ b/src/UI/SpecialVisualizations.ts
@@ -83,6 +83,7 @@ import NearbyImages from "./Image/NearbyImages.svelte"
 import NearbyImagesCollapsed from "./Image/NearbyImagesCollapsed.svelte"
 import { svelte } from "@sveltejs/vite-plugin-svelte"
 import MoveWizard from "./Popup/MoveWizard.svelte"
+import MaprouletteSetStatus from "./MapRoulette/MaprouletteSetStatus.svelte"
 
 class NearbyImageVis implements SpecialVisualization {
     // Class must be in SpecialVisualisations due to weird cyclical import that breaks the tests
@@ -1141,73 +1142,22 @@ export default class SpecialVisualizations {
                     },
                 ],
                 constr: (state, tagsSource, args) => {
-                    let [message, image, message_closed, status, maproulette_id_key] = args
+                    let [message, image, message_closed, statusToSet, maproulette_id_key] = args
                     if (image === "") {
                         image = "confirm"
                     }
                     if (maproulette_id_key === "" || maproulette_id_key === undefined) {
                         maproulette_id_key = "mr_taskId"
                     }
-                    const failed = new UIEventSource(false)
-
-                    const closeButton = new SubtleButton(image, message).OnClickWithLoading(
-                        Translations.t.general.loading,
-                        async () => {
-                            const maproulette_id =
-                                tagsSource.data[maproulette_id_key] ??
-                                tagsSource.data.mr_taskId ??
-                                tagsSource.data.id
-                            try {
-                                await Maproulette.singleton.closeTask(
-                                    Number(maproulette_id),
-                                    Number(status),
-                                    {
-                                        tags: `MapComplete MapComplete:${state.layout.id}`,
-                                    }
-                                )
-                                tagsSource.data["mr_taskStatus"] =
-                                    Maproulette.STATUS_MEANING[Number(status)]
-                                tagsSource.data.status = status
-                                tagsSource.ping()
-                            } catch (e) {
-                                console.error(e)
-                                failed.setData(true)
-                            }
-                        }
-                    )
-
-                    let message_closed_element = undefined
-                    if (message_closed !== undefined && message_closed !== "") {
-                        message_closed_element = new FixedUiElement(message_closed)
-                    }
-
-                    return new VariableUiElement(
-                        tagsSource
-                            .map((tgs) => {
-                                if (tgs["status"]) {
-                                    return tgs["status"]
-                                }
-                                const code = tgs["mr_taskStatus"]
-                                console.log("Code is", code, Maproulette.codeToIndex(code))
-                                return Maproulette.codeToIndex(code)
-                            })
-                            .map(Number)
-                            .map(
-                                (status) => {
-                                    console.log("Close MR button: status is", status)
-                                    if (failed.data) {
-                                        return new FixedUiElement(
-                                            "ERROR - could not close the MapRoulette task"
-                                        ).SetClass("block alert")
-                                    }
-                                    if (status === Maproulette.STATUS_OPEN) {
-                                        return closeButton
-                                    }
-                                    return message_closed_element ?? "Closed!"
-                                },
-                                [failed]
-                            )
-                    )
+                    return new SvelteUIElement(MaprouletteSetStatus, {
+                        state,
+                        tags: tagsSource,
+                        message,
+                        image,
+                        message_closed,
+                        statusToSet,
+                        maproulette_id_key,
+                    })
                 },
             },
             {