diff --git a/src/editor/components/components/AddLayerPanel/AddLayerPanel.component.jsx b/src/editor/components/components/AddLayerPanel/AddLayerPanel.component.jsx
index beb7cd9e0..5719e5980 100644
--- a/src/editor/components/components/AddLayerPanel/AddLayerPanel.component.jsx
+++ b/src/editor/components/components/AddLayerPanel/AddLayerPanel.component.jsx
@@ -1,19 +1,18 @@
 import { useState, useEffect, useMemo, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import { useAuthContext } from '../../../contexts/index.js';
+import { Button, Tabs } from '../../components';
 
 import styles from './AddLayerPanel.module.scss';
 import classNames from 'classnames';
-import { Button } from '../Button';
-import { Chevron24Down, Plus20Circle } from '../../../icons';
-import { Dropdown } from '../Dropdown';
+import { Chevron24Down } from '../../../icons';
 import CardPlaceholder from '../../../../../ui_assets/card-placeholder.svg';
 import LockedCard from '../../../../../ui_assets/locked-card.svg';
 import mixinCatalog from '../../../../catalog.json';
 import posthog from 'posthog-js';
 import Events from '../../../lib/Events';
 import pickPointOnGroundPlane from '../../../lib/pick-point-on-ground-plane';
-import { layersData, streetLayersData } from './layersData.js';
+import { customLayersData, streetLayersData } from './layersData.js';
 import { LayersOptions } from './LayersOptions.js';
 
 // Create an empty image
@@ -281,16 +280,20 @@ const AddLayerPanel = ({ onClose, isAddLayerPanelOpen }) => {
   }, []);
 
   const selectedCards = useMemo(() => {
-    if (selectedOption === 'Pro Layers') {
-      return layersData;
-    } else if (selectedOption === 'Street Layers') {
-      return streetLayersData;
-    } else {
-      return getSelectedMixinCards(groupedMixins, selectedOption);
+    switch (selectedOption) {
+      case 'Custom Layers':
+        return customLayersData;
+      case 'Streets and Intersections':
+        return streetLayersData;
+      default:
+        return getSelectedMixinCards(groupedMixins, selectedOption);
     }
   }, [groupedMixins, selectedOption]);
 
   const handleSelect = (value) => {
+    posthog.capture('select_layer_option', {
+      layer_option: value
+    });
     setSelectedOption(value);
   };
 
@@ -417,18 +420,16 @@ const AddLayerPanel = ({ onClose, isAddLayerPanelOpen }) => {
         <Chevron24Down />
       </Button>
       <div className={styles.header}>
-        <div className={styles.button}>
-          <Plus20Circle />
-          <p className={styles.buttonLabel}>Add New Entity</p>
+        <div className={styles.categories}>
+          <Tabs
+            tabs={LayersOptions.map((option) => ({
+              label: option.label,
+              value: option.value,
+              isSelected: selectedOption === option.value,
+              onClick: () => handleSelect(option.value)
+            }))}
+          />
         </div>
-        <Dropdown
-          placeholder="Layers: Maps & Reference"
-          options={LayersOptions}
-          onSelect={handleSelect}
-          selectedOptionValue={selectedOption}
-          className={styles.dropdown}
-          smallDropdown={true}
-        />
       </div>
       <div className={styles.cards}>
         {selectedCards.map((card) => (
diff --git a/src/editor/components/components/AddLayerPanel/AddLayerPanel.module.scss b/src/editor/components/components/AddLayerPanel/AddLayerPanel.module.scss
index 0626e2831..fbce4d92a 100644
--- a/src/editor/components/components/AddLayerPanel/AddLayerPanel.module.scss
+++ b/src/editor/components/components/AddLayerPanel/AddLayerPanel.module.scss
@@ -47,8 +47,8 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin-bottom: 24px;
-    margin-top: -30px;
+    margin-bottom: 12px;
+    margin-top: 12px;
   }
 
   .cards {
diff --git a/src/editor/components/components/AddLayerPanel/LayersOptions.js b/src/editor/components/components/AddLayerPanel/LayersOptions.js
index 438a563d3..7273bb8a3 100644
--- a/src/editor/components/components/AddLayerPanel/LayersOptions.js
+++ b/src/editor/components/components/AddLayerPanel/LayersOptions.js
@@ -1,36 +1,26 @@
 const LayersOptions = [
   {
-    value: 'Dividers & Traffic Control',
-    label: '🚧 Dividers & Traffic Control',
-    mixinGroups: ['dividers'],
-    onClick: () => {}
-  },
-  {
-    value: 'Street Layers',
-    label: '🛣️ Street Layers',
+    value: 'Bicycles',
+    label: '🚲 Bicycles',
+    mixinGroups: ['vehicles', 'cyclists'],
     onClick: () => {}
   },
   {
-    value: 'Pro Layers',
-    label: '🌏 Pro Layers',
+    value: 'People',
+    label: '🚶 People',
+    mixinGroups: ['people'],
     onClick: () => {}
   },
   {
-    value: 'Motor Vehicles',
-    label: '🚗 Motor Vehicles',
+    value: 'Vehicles',
+    label: '🚗 Vehicles',
     mixinGroups: ['vehicles-rigged', 'vehicles-transit'],
     onClick: () => {}
   },
   {
-    value: 'People Power Vehicles',
-    label: '🚲 People Power Vehicles',
-    mixinGroups: ['vehicles', 'cyclists'],
-    onClick: () => {}
-  },
-  {
-    value: 'Characters',
-    label: '🚶 Characters',
-    mixinGroups: ['people'],
+    value: 'Dividers & Traffic Control',
+    label: '🚧 Dividers & Traffic Control',
+    mixinGroups: ['dividers'],
     onClick: () => {}
   },
   {
@@ -39,12 +29,21 @@ const LayersOptions = [
     mixinGroups: ['sidewalk-props', 'intersection-props'],
     onClick: () => {}
   },
-
+  {
+    value: 'Streets and Intersections',
+    label: '🚦 Streets and Intersections',
+    onClick: () => {}
+  },
   {
     value: 'Buildings',
     label: '🏠 Buildings',
     mixinGroups: ['buildings'],
     onClick: () => {}
+  },
+  {
+    value: 'Custom Layers',
+    label: '🌐 Custom Layers',
+    onClick: () => {}
   }
 ];
 
diff --git a/src/editor/components/components/AddLayerPanel/layersData.js b/src/editor/components/components/AddLayerPanel/layersData.js
index a5da632ad..5ac902825 100644
--- a/src/editor/components/components/AddLayerPanel/layersData.js
+++ b/src/editor/components/components/AddLayerPanel/layersData.js
@@ -1,8 +1,6 @@
 import {
   createSvgExtrudedEntity,
-  createMapbox,
   createStreetmixStreet,
-  create3DTiles,
   createCustomModel,
   createPrimitiveGeometry,
   createIntersection,
@@ -63,31 +61,20 @@ export const streetLayersData = [
     description: 'Premade Street 150ft Right of Way / 124ft Roadway Width',
     id: 6,
     handlerFunction: create150ftRightOfWay
-  }
-];
-
-// data for PRO layers cards
-export const layersData = [
-  {
-    name: 'Mapbox 2D Aerial',
-    img: 'ui_assets/cards/mapbox2d.jpg',
-    icon: 'ui_assets/cards/icons/mapbox24.png',
-    requiresPro: true,
-    description:
-      'Create entity with mapbox component, that accepts a long / lat and renders a plane with dimensions that (should be) at a correct scale.',
-    id: 1,
-    handlerFunction: createMapbox
   },
   {
-    name: 'Google Maps 3D Tiles',
-    img: 'ui_assets/cards/google3d.jpg',
-    icon: 'ui_assets/cards/icons/google24.png',
+    name: 'Create intersection',
+    img: '',
     requiresPro: true,
+    icon: '',
     description:
-      'Adds an entity to load and display 3d tiles from Google Maps Tiles API 3D Tiles endpoint. This will break your scene and you cannot save it yet, so beware before testing.',
-    id: 2,
-    handlerFunction: create3DTiles
-  },
+      'Create intersection entity. Parameters of intersection component could be changed in properties panel.',
+    id: 7,
+    handlerFunction: createIntersection
+  }
+];
+
+export const customLayersData = [
   {
     name: 'Entity from extruded SVG',
     img: '',
@@ -95,7 +82,7 @@ export const layersData = [
     requiresPro: true,
     description:
       'Create entity with svg-extruder component, that accepts a svgString and creates a new entity with geometry extruded from the svg and applies the default mixin material grass.',
-    id: 3,
+    id: 1,
     handlerFunction: createSvgExtrudedEntity
   },
   {
@@ -105,7 +92,7 @@ export const layersData = [
     icon: '',
     description:
       'Create entity with model from path for a glTF (or Glb) file hosted on any publicly accessible HTTP server.',
-    id: 4,
+    id: 2,
     handlerFunction: createCustomModel
   },
   {
@@ -115,19 +102,9 @@ export const layersData = [
     icon: '',
     description:
       'Create entity with A-Frame primitive geometry. Geometry type could be changed in properties panel.',
-    id: 5,
+    id: 3,
     handlerFunction: createPrimitiveGeometry
   },
-  {
-    name: 'Create intersection',
-    img: '',
-    requiresPro: true,
-    icon: '',
-    description:
-      'Create intersection entity. Parameters of intersection component could be changed in properties panel.',
-    id: 6,
-    handlerFunction: createIntersection
-  }, // createImageEntity
   {
     name: 'Place New Image Entity',
     img: '',
@@ -135,7 +112,7 @@ export const layersData = [
     icon: 'ui_assets/cards/icons/gallery24.png',
     description:
       'Place an image such as a sign, reference photo, custom map, etc.',
-    id: 7,
+    id: 4,
     handlerFunction: createImageEntity
   }
 ];
diff --git a/src/editor/components/components/Tabs/Tabs.module.scss b/src/editor/components/components/Tabs/Tabs.module.scss
index e19c9bf8e..8964740fb 100644
--- a/src/editor/components/components/Tabs/Tabs.module.scss
+++ b/src/editor/components/components/Tabs/Tabs.module.scss
@@ -5,10 +5,7 @@
   align-items: center;
   width: fit-content;
   column-gap: 12px;
-  margin: 14px auto 0;
-  background: rgba(55, 55, 55, 0.4);
   border-radius: 16px;
-  padding: 8px 12px;
 
   .activeTab,
   .inactiveTab {
diff --git a/src/editor/components/scenegraph/Toolbar.js b/src/editor/components/scenegraph/Toolbar.js
index 04e79f1a5..1554ba91a 100644
--- a/src/editor/components/scenegraph/Toolbar.js
+++ b/src/editor/components/scenegraph/Toolbar.js
@@ -112,6 +112,7 @@ export default class Toolbar extends Component {
   };
 
   newHandler = () => {
+    posthog.capture('new_scene_clicked');
     AFRAME.INSPECTOR.selectEntity(null);
     STREET.utils.newScene();
     AFRAME.scenes[0].emit('newScene');