diff --git a/api/web/src/components/Styling/Layer.vue b/api/web/src/components/Styling/Layer.vue
index ea98137c7..3e1854b9f 100644
--- a/api/web/src/components/Styling/Layer.vue
+++ b/api/web/src/components/Styling/Layer.vue
@@ -1,13 +1,13 @@
 <template>
     <div class='ps-3'>
-        <div class='col-lg'>
+        <div v-if='l.filter' class='col-lg'>
             <label class='subheader'>Filter</label>
             <pre
                 class='col-12 px-2 py-1'
                 v-text='JSON.stringify(l.filter)'
             />
         </div>
-        <div class='col-12'>
+        <div v-if='l["source-layer"]' class='col-12'>
             <label class='subheader'>Source Layer</label>
             <pre
                 class='col-12 py-1'
diff --git a/api/web/src/components/Styling/Style.vue b/api/web/src/components/Styling/Style.vue
index bae4197fd..27da5bf02 100644
--- a/api/web/src/components/Styling/Style.vue
+++ b/api/web/src/components/Styling/Style.vue
@@ -148,7 +148,11 @@ export default {
     },
     methods: {
         newLayer: function() {
-            this.layers.push({ id: "new-layer" });
+            this.styles.push({
+                id: "new-layer",
+                layout: {},
+                paint: {}
+            });
             this.open.add('new-layer');
         }
     }