diff --git a/public/js/components/app.js b/public/js/components/app.js
index b3cda568..84a1b35b 100644
--- a/public/js/components/app.js
+++ b/public/js/components/app.js
@@ -77,6 +77,12 @@ export const supportedLanguages = [
   { key: 'zh-cn', label: '简体中文' },
 ];
 
+export const supportedlabelModes = [
+  { key: 'default', label: 'Show all layers' },
+  { key: 'only', label: 'Only show label layers' },
+  { key: 'hide', label: 'Hide label layers' },
+];
+
 export class App extends Component {
   constructor(props) {
     super(props);
@@ -85,6 +91,7 @@ export class App extends Component {
       selectedTileLayer: null,
       selectedFileLayer: null,
       selectedLanguage: 'default',
+      selectedLabelMode: 'default',
       selectedColor: null,
       selectedColorOp: null,
       selectedPercentage: null,
@@ -135,6 +142,12 @@ export class App extends Component {
       });
     };
 
+    this._selectLabelMode = (mode) => {
+      this.setState({ selectedLabelMode: mode }, () => {
+        this._updateMap();
+      });
+    };
+
     this._selectTmsLayer = async (config) => {
       const source = await this._getTmsSource(config);
       const { operation, percentage } = TMSService.colorOperationDefaults.find(c => c.style === config.getId());
@@ -248,7 +261,7 @@ export class App extends Component {
     }
 
     // Getting the necessary data to update the map
-    const { selectedTileLayer, selectedLanguage } = this.state;
+    const { selectedTileLayer, selectedLanguage, selectedLabelMode } = this.state;
     const source = await (selectedTileLayer.getVectorStyleSheet());
     const mlMap = this._map._maplibreMap;
 
@@ -260,11 +273,31 @@ export class App extends Component {
     if (selectedLanguage) {
       const langKey = selectedLanguage;
       const lang = supportedLanguages.find(l => l.key === langKey);
+      const labelMode = selectedLabelMode;
 
       try {
         this._map.waitForStyleLoaded(async () => {
+          const defaultStyle = await this.state.selectedTileLayer.getVectorStyleSheet();
+          
+          // Reset the map layers to the default visibility
+          source.layers.forEach(layer => {
+            const defaultVisibility = defaultStyle.layers.find((dl) => dl.id == layer.id )?.visibility || 'visible';
+            mlMap.setLayoutProperty(layer.id, 'visibility', defaultVisibility);
+          });
+          // Set the visibility of layers based on the selected label mode
+          if (labelMode === 'only') {
+            source.layers.filter(layer => layer.type !== 'symbol' && layer.type !== 'background').forEach(layer => {
+              mlMap.setLayoutProperty(layer.id, 'visibility', 'none');
+            });
+          }
+          else if (labelMode === 'hide') {
+            source.layers.filter(layer => layer.type === 'symbol').forEach(layer => {
+              mlMap.setLayoutProperty(layer.id, 'visibility', 'none');
+            });
+          }
+
+          // Set the language property for each layer
           if (langKey === 'default') {
-            const defaultStyle = await this.state.selectedTileLayer.getVectorStyleSheet();
             source.layers.forEach(layer => {
               const textField = defaultStyle?.layers.find(l => l.id === layer.id)?.layout?.['text-field'];
               if (textField) {
@@ -388,8 +421,10 @@ export class App extends Component {
                   title="Tile Layer"
                   layerConfig={this.state.selectedTileLayer}
                   onLanguageChange={this._selectLanguage}
+                  onLabelModeChange={this._selectLabelMode}
                   onColorChange={this._changeColor}
                   language={this.state.selectedLanguage}
+                  labelMode={this.state.selectedLabelMode}
                   color={this.state.selectedColor}
                 />
               </EuiPanel>
diff --git a/public/js/components/customize_tms.js b/public/js/components/customize_tms.js
index 925b26ef..ff7b57af 100644
--- a/public/js/components/customize_tms.js
+++ b/public/js/components/customize_tms.js
@@ -6,19 +6,18 @@
  */
 
 import { TMSService } from '@elastic/ems-client/target/node';
-import React, { PureComponent } from 'react';
+import React, { PureComponent} from 'react';
 import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiForm,
   EuiFormRow,
-  EuiDescribedFormGroup,
   EuiColorPicker,
   EuiComboBox,
   EuiPanel,
 } from '@elastic/eui';
 
-import { supportedLanguages } from './app';
+import { supportedLanguages, supportedlabelModes } from './app';
 
 export class CustomizeTMS extends PureComponent {
   constructor(props) {
@@ -32,6 +31,14 @@ export class CustomizeTMS extends PureComponent {
       }
     };
 
+    this._onLabelChange = (selectedOptions) => {
+      const mode = selectedOptions[0];
+
+      if (mode) {
+        this.props.onLabelModeChange(mode.key);
+      }
+    };
+
   }
 
 
@@ -43,58 +50,53 @@ export class CustomizeTMS extends PureComponent {
     }
 
     const selectedLangOptions = supportedLanguages.filter(l => l.key === this.props.language);
+    const selectedLabelOptions = supportedlabelModes.filter(l => l.key === this.props.labelMode);
+
 
     return (
       <EuiForm component="form">
         <EuiFlexGroup gutterSize={'s'}>
           <EuiFlexItem>
             <EuiPanel hasShadow={false} hasBorder paddingSize="m">
-              <EuiDescribedFormGroup
-                title={<h3>Basemap labels</h3>}
-                description={
-                  <p>
-                    Select the language for
-                    the basemap. Non-translated
-                    labels will fallback to defaults.
-                  </p>
-                }
-              >
-                <EuiFormRow label="Select language">
-                  <EuiComboBox
-                    compressed
-                    isClearable={false}
-                    singleSelection={{ asPlainText: true }}
-                    options={supportedLanguages}
-                    selectedOptions={selectedLangOptions}
-                    onChange={this._onLanguageChange}
-                  />
-                </EuiFormRow>
-              </EuiDescribedFormGroup>
+              <EuiFormRow label="Select language" helpText="Select the language for the basemap. Non-translated labels will fallback to defaults.">
+                <EuiComboBox
+                  compressed
+                  isClearable={false}
+                  singleSelection={{ asPlainText: true }}
+                  options={supportedLanguages}
+                  selectedOptions={selectedLangOptions}
+                  onChange={this._onLanguageChange}
+                />
+              </EuiFormRow>
+            </EuiPanel>
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiPanel hasShadow={false} hasBorder paddingSize='m'>
+              <EuiFormRow label="Select mode" helpText="Select the mode for the basemap labels, which can be either normal, only labels, or no labels.">
+                <EuiComboBox
+                  compressed
+                  isClearable={false}
+                  singleSelection={{ asPlainText: true }}
+                  options={supportedlabelModes}
+                  selectedOptions={selectedLabelOptions}
+                  onChange={this._onLabelChange}
+                />
+              </EuiFormRow>
             </EuiPanel>
           </EuiFlexItem>
           <EuiFlexItem>
             <EuiPanel hasShadow={false} hasBorder paddingSize="m">
-              <EuiDescribedFormGroup
-                title={<h3>Color filter</h3>}
-                description={
-                  <p>
-                    Choose a color filter to apply
-                    to the basemap.
-                  </p>
-                }
-              >
-                <EuiFormRow label="Pick a color">
-                  <EuiColorPicker
-                    compressed
-                    isClearable={true}
-                    onChange={this.props.onColorChange}
-                    color={this.props.color}
-                    format="hex"
-                    secondaryInputDisplay="top"
-                    placeholder="No filter"
-                  />
-                </EuiFormRow>
-              </EuiDescribedFormGroup>
+              <EuiFormRow label="Pick a color" helpText="Choose a color filter to apply to the basemap.">
+                <EuiColorPicker
+                  compressed
+                  isClearable={true}
+                  onChange={this.props.onColorChange}
+                  color={this.props.color}
+                  format="hex"
+                  secondaryInputDisplay="top"
+                  placeholder="No filter"
+                />
+              </EuiFormRow>
             </EuiPanel>
           </EuiFlexItem>
         </EuiFlexGroup>
diff --git a/public/js/components/layer_details.js b/public/js/components/layer_details.js
index e28b9bc7..c8cab1bd 100644
--- a/public/js/components/layer_details.js
+++ b/public/js/components/layer_details.js
@@ -51,7 +51,9 @@ export class LayerDetails extends PureComponent {
           layerConfig={this.props.layerConfig}
           onLanguageChange={this.props.onLanguageChange}
           onColorChange={this.props.onColorChange}
+          onLabelModeChange={this.props.onLabelModeChange}
           language={this.props.language}
+          labelMode={this.props.labelMode}
           color={this.props.color}
         />
       </div>