diff --git a/public/themes/bootstrap/scss/_gis.scss b/public/themes/bootstrap/scss/_gis.scss
index 16c0f24f51..e1c4a077a9 100644
--- a/public/themes/bootstrap/scss/_gis.scss
+++ b/public/themes/bootstrap/scss/_gis.scss
@@ -8,12 +8,6 @@
   min-height: 230px;
 }
 
-#gis_data_textarea {
-  height: 6em;
-  resize: vertical;
-  width: 100%;
-}
-
 #gis_data_editor {
   input[type="text"] {
     width: 75px;
diff --git a/resources/js/src/table/gis_visualization.ts b/resources/js/src/table/gis_visualization.ts
index 47254e22c1..ec5dc9e6a8 100644
--- a/resources/js/src/table/gis_visualization.ts
+++ b/resources/js/src/table/gis_visualization.ts
@@ -459,11 +459,11 @@ class GisVisualizationController {
     constructor () {
         this.boundOnChoiceChange = this.onChoiceChange.bind(this);
 
-        $(document).on('click', '#choice', this.boundOnChoiceChange);
+        $(document).on('click', '#useOsmAsBaseLayerSwitch', this.boundOnChoiceChange);
 
         if (typeof window.ol === 'undefined') {
-            $('#choice, #labelChoice').hide();
-            $('#choice').prop('checked', false);
+            $('#useOsmAsBaseLayerSwitch, #useOsmAsBaseLayerSwitchLabel').hide();
+            $('#useOsmAsBaseLayerSwitch').prop('checked', false);
         }
 
         this.selectVisualization();
@@ -477,7 +477,7 @@ class GisVisualizationController {
      * Initially loads either SVG or OSM visualization based on the choice.
      */
     private selectVisualization () {
-        const showOl = $('#choice').prop('checked') === true;
+        const showOl = $('#useOsmAsBaseLayerSwitch').prop('checked') === true;
         const oldVis = showOl ? this.svgVis : this.olVis;
         if (oldVis) {
             oldVis.hide();
@@ -508,7 +508,7 @@ class GisVisualizationController {
      * Cleanup events when no longer needed
      */
     public dispose () {
-        $(document).off('click', '#choice');
+        $(document).off('click', '#useOsmAsBaseLayerSwitch');
 
         if (this.svgVis) {
             this.svgVis.dispose();
diff --git a/resources/templates/gis_data_editor_form.twig b/resources/templates/gis_data_editor_form.twig
index 12e82950aa..f3ed891cb1 100644
--- a/resources/templates/gis_data_editor_form.twig
+++ b/resources/templates/gis_data_editor_form.twig
@@ -1,63 +1,71 @@
 <form id="gis_data_editor_form" action="{{ url('/gis-data-editor') }}" method="post">
-    <div id="gis_data_editor">
-        <input type="hidden" name="field" value="{{ field }}">
-        <input type="hidden" name="type" value="{{ column_type }}">
-        {# The input field to which the final result should be added and corresponding null checkbox #}
-        {% if input_name is not null %}
-            <input type="hidden" name="input_name" value="{{ input_name }}">
-        {% endif %}
-        {{ get_hidden_inputs() }}
+  <div id="gis_data_editor">
+    <input type="hidden" name="field" value="{{ field }}">
+    <input type="hidden" name="type" value="{{ column_type }}">
+    {# The input field to which the final result should be added and corresponding null checkbox #}
+    {% if input_name is not null %}
+      <input type="hidden" name="input_name" value="{{ input_name }}">
+    {% endif %}
+    {{ get_hidden_inputs() }}
 
-        {# Visualization section #}
-        <div class="float-end">
-            <div id="visualization-placeholder" style="width: {{ width }}px; height: {{ height }}px;">
-                <div class="visualization-target visualization-target-svg hide">{{ visualization|raw }}</div>
-                <div class="visualization-target visualization-target-ol hide"></div>
-            </div>
-
-            <div class="choice form-switch mt-1">
-                <input type="checkbox" id="choice" class="form-check-input" value="useBaseLayer"{{ srid != 0 ? ' checked="checked"' }}>
-                <label for="choice">{{ t('Use OpenStreetMaps as Base Layer') }}</label>
-            </div>
-        </div>
-
-        <script>{{ open_layers|raw }}</script>
-        {# End of visualization section #}
-
-        {# Data section #}
-        <div id="gis_data" class="gis-geometry" data-gis-data="{{ gis_data|json_encode }}">
+    <div class="container-fluid">
+      <div class="row">
+        <div class="col">
+          <div id="gis_data" class="gis-geometry mb-3" data-gis-data="{{ gis_data|json_encode }}">
             <template id="gis_type_template">
-                <select class="gis_type">
-                    {% for gis_type in gis_types|slice(0, 6) %}
-                        <option value="{{ gis_type }}">{{ gis_type }}</option>
-                    {% endfor %}
-                </select>
+              <select class="gis_type">
+                {% for gis_type in gis_types|slice(0, 6) %}
+                  <option value="{{ gis_type }}">{{ gis_type }}</option>
+                {% endfor %}
+              </select>
             </template>
 
             {# Header section - Inclueds GIS type selector and input field for SRID #}
             <div class="gis-geometry-type">
-                <select name="gis_data[gis_type]" class="gis_type{{ column_type != 'GEOMETRY' ? ' hide' }}">
-                    {% for gis_type in gis_types %}
-                        <option value="{{ gis_type }}"{{ geom_type == gis_type ? ' selected="selected"' }}>
-                            {{ gis_type }}
-                        </option>
-                    {% endfor %}
-                </select>
+              <select name="gis_data[gis_type]" class="gis_type{{ column_type != 'GEOMETRY' ? ' hide' }}">
+                {% for gis_type in gis_types %}
+                  <option value="{{ gis_type }}"{{ geom_type == gis_type ? ' selected="selected"' }}>
+                    {{ gis_type }}
+                  </option>
+                {% endfor %}
+              </select>
 
-                <label for="srid">{{ t('SRID:', context = 'Spatial Reference System Identifier') }}</label>
-                <input id="srid" name="gis_data[srid]" type="text" value="{{ srid }}">
+              <label for="srid">{{ t('SRID:', context = 'Spatial Reference System Identifier') }}</label>
+              <input id="srid" name="gis_data[srid]" type="text" value="{{ srid }}">
             </div>
             {# End of header section #}
-
+          </div>
         </div>
-        {# End of data section #}
 
-        <div class="gis_data_output">
-            <h3>{{ t('Output') }}</h3>
-            <textarea id="gis_data_textarea" class="mb-3" rows="5">{{ result }}</textarea>
+        <div class="col-auto">
+          <div class="card">
+            <div class="card-body">
+              <div id="visualization-placeholder" style="width: {{ width }}px; height: {{ height }}px;">
+                <div class="visualization-target visualization-target-svg hide">{{ visualization|raw }}</div>
+                <div class="visualization-target visualization-target-ol hide"></div>
+              </div>
+            </div>
 
-            <button type="button" class="btn btn-primary gis-copy-data" data-bs-dismiss="modal">{{ t('Copy') }}</button>
-            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"> {{ t('Cancel') }}</button>
+            <div class="card-footer">
+              <div class="form-switch mt-1">
+                <input type="checkbox" id="useOsmAsBaseLayerSwitch" class="form-check-input" value="useBaseLayer"{{ srid != 0 ? ' checked="checked"' }}>
+                <label for="useOsmAsBaseLayerSwitch" id="useOsmAsBaseLayerSwitchLabel">{{ t('Use OpenStreetMaps as Base Layer') }}</label>
+              </div>
+            </div>
+            <script>{{ open_layers|raw }}</script>
+          </div>
         </div>
+      </div>
     </div>
+
+    <div class="mb-3">
+      <label class="form-label" for="gis_data_textarea">{{ t('Output') }}</label>
+      <textarea class="form-control" id="gis_data_textarea" rows="5">{{ result }}</textarea>
+    </div>
+
+    <div>
+      <button type="button" class="btn btn-primary gis-copy-data" data-bs-dismiss="modal">{{ t('Copy') }}</button>
+      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"> {{ t('Cancel') }}</button>
+    </div>
+  </div>
 </form>
diff --git a/resources/templates/table/gis_visualization/gis_visualization.twig b/resources/templates/table/gis_visualization/gis_visualization.twig
index 0b4979e949..5372f5e10e 100644
--- a/resources/templates/table/gis_visualization/gis_visualization.twig
+++ b/resources/templates/table/gis_visualization/gis_visualization.twig
@@ -35,8 +35,8 @@
         <div class="d-flex justify-content-between align-items-center">
           <input type="hidden" name="redraw" value="true">
           <div class="form-check form-switch">
-            <input class="form-check-input" type="checkbox" name="useBaseLayer" id="choice"{{ useBaseLayer ?? false ? ' checked' }}>
-            <label class="form-check-label" for="choice" id="labelChoice">{{ t('Use OpenStreetMaps as Base Layer') }}</label>
+            <input class="form-check-input" type="checkbox" name="useBaseLayer" id="useOsmAsBaseLayerSwitch"{{ useBaseLayer ?? false ? ' checked' }}>
+            <label class="form-check-label" for="useOsmAsBaseLayerSwitch" id="useOsmAsBaseLayerSwitchLabel">{{ t('Use OpenStreetMaps as Base Layer') }}</label>
           </div>
           <div class="dropdown">
             <button class="btn btn-secondary dropdown-toggle" type="button" id="saveImageButton" data-bs-toggle="dropdown" aria-expanded="false">