diff --git a/packages/base/src/mainview/logo.svg b/packages/base/src/mainview/logo.svg
new file mode 100644
index 000000000..5100f477c
--- /dev/null
+++ b/packages/base/src/mainview/logo.svg
@@ -0,0 +1,31 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  version="1.1"
+  width="256"
+  height="256"
+  viewBox="0 0 256 256"
+  class="jp-icon-selectable">
+  <g class="jp-icon-selectable">
+    <path
+      class="jp-icon-selectable"
+      d="M137.607,136.899 L172.044,136.899 L142.898,108.083 L107.19,108.083 L107.19,142.392 L137.607,172.708 z"
+      fill="#EE7913" />
+    <path
+      class="jp-icon-selectable"
+      d="M248.061,212.048 L186.618,151.306 L152.01,151.306 L152.01,187.067 L210.891,245.749 L248.061,245.749 z"
+      fill="#589632" />
+    <path
+      class="jp-icon-selectable"
+      d="M152.01,151.306 L186.618,151.306 L172.044,136.899 L137.607,136.899 L137.607,172.708 L152.01,187.067 z"
+      fill="#F0E64A" />
+    <path
+      class="jp-icon-selectable"
+      d="M144.826,199.3 C139.606,200.502 134.183,201.154 128.588,201.154 C88.561,201.154 54.516,168.24 54.516,125.564 C54.516,82.887 88.182,50.695 128.588,50.695 C168.989,50.695 201.158,82.882 201.158,125.564 C201.158,132.501 200.295,139.183 198.697,145.509 L235.744,182.551 C245.296,165.815 250.64,146.354 250.64,125.277 C250.64,59.499 198.147,10.251 127.839,10.251 C57.849,10.251 5.36,59.178 5.36,125.277 C5.36,191.698 57.849,241.598 127.839,241.598 C145.905,241.598 162.791,238.275 177.916,232.227 L144.826,199.3 z"
+      fill="#93B023" />
+    <path
+      class="jp-icon-selectable"
+      d="M107.19,108.083 L248.061,245.749 L248.061,212.048 L186.618,151.306 L172.044,136.898 L142.898,108.083 z"
+      fill="#FFFFFF"
+      fill-opacity="0.172" />
+  </g>
+</svg>
diff --git a/packages/base/src/mainview/mainView.tsx b/packages/base/src/mainview/mainView.tsx
index 08b7ed4db..6afc34af2 100644
--- a/packages/base/src/mainview/mainView.tsx
+++ b/packages/base/src/mainview/mainView.tsx
@@ -66,7 +66,7 @@ import {
 } from 'ol/source';
 import Static from 'ol/source/ImageStatic';
 import TileSource from 'ol/source/Tile';
-import { Circle, Fill, Stroke, Style } from 'ol/style';
+import { Circle, Fill, Stroke, Style, Icon } from 'ol/style';
 import { Rule } from 'ol/style/flat';
 import proj4 from 'proj4';
 //@ts-expect-error no types for proj4list
@@ -823,8 +823,20 @@ export class MainView extends React.Component<IProps, IStates> {
           opacity: layerParameters.opacity,
           visible: layer.visible,
           source: this._sources[layerParameters.source],
-          style: this.vectorLayerStyleRuleBuilder(layer)
+          style: new Style({
+            image: new Icon({
+              crossOrigin: 'anonymous',
+              src: 'sq.png',
+              size: [20, 20],
+              color: '#4271AE',
+              scale: 2,
+            }),
+          })
         });
+        console.log('from vectorstylerulebuilder', this.vectorLayerStyleRuleBuilder(layer));
+
+        console.log('VectorLayer', newMapLayer);
+
 
         break;
       }
@@ -955,17 +967,16 @@ export class MainView extends React.Component<IProps, IStates> {
     }
 
     const defaultStyle = {
-      'fill-color': 'rgba(255,255,255,0.4)',
-      'stroke-color': '#3399CC',
-      'stroke-width': 1.25,
-      'circle-radius': 5,
-      'circle-fill-color': 'rgba(255,255,255,0.4)',
-      'circle-stroke-width': 1.25,
-      'circle-stroke-color': '#3399CC'
+      'icon-image': 'sq.png', // Path to the icon image
+      'icon-size': [32, 32], // Specify size as an array [width, height]
+      'icon-color': '#3399CC',
+      'icon-opacity': 1.0,
+      'icon-stroke-color': '#000000',
+      'icon-stroke-width': 1.25,
     };
 
     const defaultRules: Rule = {
-      style: defaultStyle
+      style: defaultStyle,
     };
 
     const layerStyle = { ...defaultRules };
@@ -977,6 +988,10 @@ export class MainView extends React.Component<IProps, IStates> {
     ) {
       const filterExpr: any[] = [];
 
+
+      // 'Any' and 'All' operators require more than one argument
+      // So if there's only one filter, skip that part to avoid error
+
       // 'Any' and 'All' operators require more than one argument
       // So if there's only one filter, skip that part to avoid error
       if (layer.filters.appliedFilters.length === 1) {
@@ -1011,6 +1026,8 @@ export class MainView extends React.Component<IProps, IStates> {
 
     layerStyle.style = newStyle;
 
+    console.log('layerStyle', layerStyle);
+
     return [layerStyle];
   };
 
@@ -1102,6 +1119,9 @@ export class MainView extends React.Component<IProps, IStates> {
           this.vectorLayerStyleRuleBuilder(layer)
         );
 
+        console.log('VectorLayer', mapLayer);
+
+
         break;
       }
       case 'VectorTileLayer': {
diff --git a/packages/base/src/mainview/sq.png b/packages/base/src/mainview/sq.png
new file mode 100644
index 000000000..6162edb8a
Binary files /dev/null and b/packages/base/src/mainview/sq.png differ