diff --git a/packages/base/src/dialogs/symbology/components/color_ramp/CanvasSelectComponent.tsx b/packages/base/src/dialogs/symbology/components/color_ramp/CanvasSelectComponent.tsx
index 062c21577..98dc01d57 100644
--- a/packages/base/src/dialogs/symbology/components/color_ramp/CanvasSelectComponent.tsx
+++ b/packages/base/src/dialogs/symbology/components/color_ramp/CanvasSelectComponent.tsx
@@ -1,7 +1,10 @@
 import { Button } from '@jupyterlab/ui-components';
 import React, { useEffect, useRef, useState } from 'react';
 
-import { useColorMapList } from '@/src/dialogs/symbology/colorRampUtils';
+import {
+  ColorRampName,
+  useColorMapList,
+} from '@/src/dialogs/symbology/colorRampUtils';
 import ColorRampEntry from './ColorRampEntry';
 
 export interface IColorMap {
@@ -10,7 +13,7 @@ export interface IColorMap {
 }
 
 interface ICanvasSelectComponentProps {
-  selectedRamp: string;
+  selectedRamp: ColorRampName;
   setSelected: (item: any) => void;
 }
 
diff --git a/packages/base/src/dialogs/symbology/components/color_ramp/ColorRamp.tsx b/packages/base/src/dialogs/symbology/components/color_ramp/ColorRamp.tsx
index 70af1d808..4f74a9a26 100644
--- a/packages/base/src/dialogs/symbology/components/color_ramp/ColorRamp.tsx
+++ b/packages/base/src/dialogs/symbology/components/color_ramp/ColorRamp.tsx
@@ -3,16 +3,18 @@ import { Button } from '@jupyterlab/ui-components';
 import React, { useEffect, useState } from 'react';
 
 import { LoadingIcon } from '@/src/shared/components/loading';
+import { ClassificationMode } from '@/src/types';
 import CanvasSelectComponent from './CanvasSelectComponent';
 import ModeSelectRow from './ModeSelectRow';
+import { ColorRampName } from '../../colorRampUtils';
 
 interface IColorRampProps {
-  modeOptions: string[];
+  modeOptions: ClassificationMode[];
   layerParams: IDict;
   classifyFunc: (
-    selectedMode: string,
-    numberOfShades: string,
-    selectedRamp: string,
+    selectedMode: ClassificationMode,
+    numberOfShades: number,
+    selectedRamp: ColorRampName,
     setIsLoading: (isLoading: boolean) => void,
   ) => void;
   showModeRow: boolean;
@@ -20,11 +22,13 @@ interface IColorRampProps {
 }
 
 export type ColorRampOptions = {
-  selectedRamp: string;
-  numberOfShades: string;
-  selectedMode: string;
+  selectedRamp: ColorRampName;
+  numberOfShades: number;
+  selectedMode: ClassificationMode;
 };
 
+const isValidNumberOfShades = (value: number) => !isNaN(value) && value > 0;
+
 const ColorRamp: React.FC<IColorRampProps> = ({
   layerParams,
   modeOptions,
@@ -32,28 +36,27 @@ const ColorRamp: React.FC<IColorRampProps> = ({
   showModeRow,
   showRampSelector,
 }) => {
-  const [selectedRamp, setSelectedRamp] = useState('');
-  const [selectedMode, setSelectedMode] = useState('');
-  const [numberOfShades, setNumberOfShades] = useState('');
-  const [isLoading, setIsLoading] = useState(false);
+  const [selectedRamp, setSelectedRamp] = useState<ColorRampName>('viridis');
+  const [selectedMode, setSelectedMode] =
+    useState<ClassificationMode>('equal interval');
+  const [numberOfShades, setNumberOfShades] = useState<number>(9);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
 
   useEffect(() => {
-    if (selectedRamp === '' && selectedMode === '' && numberOfShades === '') {
+    if (layerParams.symbologyState) {
       populateOptions();
     }
-  }, [layerParams]);
+  }, [
+    layerParams.symbologyState.nClasses,
+    layerParams.symbologyState.mode,
+    layerParams.symbologyState.colorRamp,
+  ]);
 
   const populateOptions = () => {
-    let nClasses, singleBandMode, colorRamp;
-
-    if (layerParams.symbologyState) {
-      nClasses = layerParams.symbologyState.nClasses;
-      singleBandMode = layerParams.symbologyState.mode;
-      colorRamp = layerParams.symbologyState.colorRamp;
-    }
-    setNumberOfShades(nClasses ? nClasses : '9');
-    setSelectedMode(singleBandMode ? singleBandMode : 'equal interval');
-    setSelectedRamp(colorRamp ? colorRamp : 'viridis');
+    const { nClasses, mode, colorRamp } = layerParams.symbologyState ?? {};
+    setNumberOfShades(nClasses ?? 9);
+    setSelectedMode((mode as ClassificationMode) ?? 'equal interval');
+    setSelectedRamp((colorRamp as ColorRampName) ?? 'viridis');
   };
 
   return (
@@ -81,6 +84,7 @@ const ColorRamp: React.FC<IColorRampProps> = ({
       ) : (
         <Button
           className="jp-Dialog-button jp-mod-accept jp-mod-styled"
+          disabled={!isValidNumberOfShades(numberOfShades) || !selectedMode}
           onClick={() =>
             classifyFunc(
               selectedMode,
diff --git a/packages/base/src/dialogs/symbology/components/color_ramp/ModeSelectRow.tsx b/packages/base/src/dialogs/symbology/components/color_ramp/ModeSelectRow.tsx
index c6be6814d..79e4af086 100644
--- a/packages/base/src/dialogs/symbology/components/color_ramp/ModeSelectRow.tsx
+++ b/packages/base/src/dialogs/symbology/components/color_ramp/ModeSelectRow.tsx
@@ -1,10 +1,12 @@
 import React from 'react';
+
+import { ClassificationMode } from '@/src/types';
 interface IModeSelectRowProps {
-  numberOfShades: string;
-  setNumberOfShades: (value: string) => void;
-  selectedMode: string;
-  setSelectedMode: (value: string) => void;
-  modeOptions: string[];
+  numberOfShades: number;
+  setNumberOfShades: React.Dispatch<React.SetStateAction<number>>;
+  selectedMode: ClassificationMode;
+  setSelectedMode: React.Dispatch<React.SetStateAction<ClassificationMode>>;
+  modeOptions: ClassificationMode[];
 }
 const ModeSelectRow: React.FC<IModeSelectRowProps> = ({
   numberOfShades,
@@ -22,7 +24,12 @@ const ModeSelectRow: React.FC<IModeSelectRowProps> = ({
           name="class-number-input"
           type="number"
           value={selectedMode === 'continuous' ? 52 : numberOfShades}
-          onChange={event => setNumberOfShades(event.target.value)}
+          onChange={event => {
+            const value = Number(event.target.value);
+            if (!isNaN(value) && value > 0) {
+              setNumberOfShades(value);
+            }
+          }}
           disabled={selectedMode === 'continuous'}
         />
       </div>
@@ -34,10 +41,12 @@ const ModeSelectRow: React.FC<IModeSelectRowProps> = ({
             id="mode-select"
             className="jp-mod-styled"
             value={selectedMode}
-            onChange={event => setSelectedMode(event.target.value)}
+            onChange={event =>
+              setSelectedMode(event.target.value as ClassificationMode)
+            }
           >
             {modeOptions.map(mode => (
-              <option key={mode} value={mode} selected={selectedMode === mode}>
+              <option key={mode} value={mode}>
                 {mode}
               </option>
             ))}
diff --git a/packages/base/src/dialogs/symbology/symbologyUtils.ts b/packages/base/src/dialogs/symbology/symbologyUtils.ts
index afc3216ae..0dfa85809 100644
--- a/packages/base/src/dialogs/symbology/symbologyUtils.ts
+++ b/packages/base/src/dialogs/symbology/symbologyUtils.ts
@@ -1,6 +1,7 @@
 import { IJGISLayer } from '@jupytergis/schema';
 import colormap from 'colormap';
 
+import { ColorRampName } from './colorRampUtils';
 import { IStopRow } from './symbologyDialog';
 
 const COLOR_EXPR_STOPS_START = 3;
@@ -101,7 +102,7 @@ export namespace VectorUtils {
 export namespace Utils {
   export const getValueColorPairs = (
     stops: number[],
-    selectedRamp: string,
+    selectedRamp: ColorRampName,
     nClasses: number,
     reverse = false,
   ) => {
diff --git a/packages/base/src/dialogs/symbology/tiff_layer/types/SingleBandPseudoColor.tsx b/packages/base/src/dialogs/symbology/tiff_layer/types/SingleBandPseudoColor.tsx
index 0cc58f61d..f0ef0cdbd 100644
--- a/packages/base/src/dialogs/symbology/tiff_layer/types/SingleBandPseudoColor.tsx
+++ b/packages/base/src/dialogs/symbology/tiff_layer/types/SingleBandPseudoColor.tsx
@@ -20,6 +20,8 @@ import { Utils } from '@/src/dialogs/symbology/symbologyUtils';
 import BandRow from '@/src/dialogs/symbology/tiff_layer/components/BandRow';
 import { LoadingOverlay } from '@/src/shared/components/loading';
 import { GlobalStateDbManager } from '@/src/store';
+import { ClassificationMode } from '@/src/types';
+import { ColorRampName } from '../../colorRampUtils';
 
 export type InterpolationType = 'discrete' | 'linear' | 'exact';
 
@@ -38,7 +40,11 @@ const SingleBandPseudoColor: React.FC<ISymbologyDialogProps> = ({
   }
 
   const functions = ['discrete', 'linear', 'exact'];
-  const modeOptions = ['continuous', 'equal interval', 'quantile'];
+  const modeOptions = [
+    'continuous',
+    'equal interval',
+    'quantile',
+  ] as const satisfies ClassificationMode[];
 
   const stateDb = GlobalStateDbManager.getInstance().getStateDb();
 
@@ -282,9 +288,9 @@ const SingleBandPseudoColor: React.FC<ISymbologyDialogProps> = ({
   };
 
   const buildColorInfoFromClassification = async (
-    selectedMode: string,
-    numberOfShades: string,
-    selectedRamp: string,
+    selectedMode: ClassificationMode,
+    numberOfShades: number,
+    selectedRamp: ColorRampName,
     setIsLoading: (isLoading: boolean) => void,
   ) => {
     // Update layer state with selected options
@@ -299,7 +305,7 @@ const SingleBandPseudoColor: React.FC<ISymbologyDialogProps> = ({
     const currentBand = bandRows[selectedBand - 1];
     const source = model.getSource(layer?.parameters?.source);
     const sourceInfo = source?.parameters?.urls[0];
-    const nClasses = selectedMode === 'continuous' ? 52 : +numberOfShades;
+    const nClasses = selectedMode === 'continuous' ? 52 : numberOfShades;
 
     setIsLoading(true);
     switch (selectedMode) {
diff --git a/packages/base/src/dialogs/symbology/vector_layer/types/Categorized.tsx b/packages/base/src/dialogs/symbology/vector_layer/types/Categorized.tsx
index 4e0e36a52..a002f6724 100644
--- a/packages/base/src/dialogs/symbology/vector_layer/types/Categorized.tsx
+++ b/packages/base/src/dialogs/symbology/vector_layer/types/Categorized.tsx
@@ -11,7 +11,8 @@ import {
 } from '@/src/dialogs/symbology/symbologyDialog';
 import { Utils, VectorUtils } from '@/src/dialogs/symbology/symbologyUtils';
 import ValueSelect from '@/src/dialogs/symbology/vector_layer/components/ValueSelect';
-import { SymbologyTab } from '@/src/types';
+import { SymbologyTab, ClassificationMode } from '@/src/types';
+import { ColorRampName } from '../../colorRampUtils';
 
 const Categorized: React.FC<ISymbologyTabbedDialogWithAttributesProps> = ({
   model,
@@ -117,16 +118,16 @@ const Categorized: React.FC<ISymbologyTabbedDialogWithAttributesProps> = ({
   }, [selectedAttribute, stopRows, colorRampOptions]);
 
   const buildColorInfoFromClassification = (
-    selectedMode: string,
-    numberOfShades: string,
-    selectedRamp: string,
+    selectedMode: ClassificationMode,
+    numberOfShades: number,
+    selectedRamp: ColorRampName,
     setIsLoading: (isLoading: boolean) => void,
   ) => {
     setColorRampOptions({
       selectedFunction: '',
       selectedRamp,
-      numberOfShades: '',
-      selectedMode: '',
+      numberOfShades,
+      selectedMode,
     });
 
     const stops = Array.from(
diff --git a/packages/base/src/dialogs/symbology/vector_layer/types/Graduated.tsx b/packages/base/src/dialogs/symbology/vector_layer/types/Graduated.tsx
index 3da611ab5..38d9dd156 100644
--- a/packages/base/src/dialogs/symbology/vector_layer/types/Graduated.tsx
+++ b/packages/base/src/dialogs/symbology/vector_layer/types/Graduated.tsx
@@ -13,6 +13,8 @@ import {
 } from '@/src/dialogs/symbology/symbologyDialog';
 import { Utils, VectorUtils } from '@/src/dialogs/symbology/symbologyUtils';
 import ValueSelect from '@/src/dialogs/symbology/vector_layer/components/ValueSelect';
+import { ClassificationMode } from '@/src/types';
+import { ColorRampName } from '../../colorRampUtils';
 
 const Graduated: React.FC<ISymbologyTabbedDialogWithAttributesProps> = ({
   model,
@@ -29,7 +31,7 @@ const Graduated: React.FC<ISymbologyTabbedDialogWithAttributesProps> = ({
     'jenks',
     'pretty',
     'logarithmic',
-  ];
+  ] as const satisfies ClassificationMode[];
 
   const selectableAttributeRef = useRef<string>();
   const symbologyTabRef = useRef<string>();
@@ -215,9 +217,9 @@ const Graduated: React.FC<ISymbologyTabbedDialogWithAttributesProps> = ({
   };
 
   const buildColorInfoFromClassification = (
-    selectedMode: string,
-    numberOfShades: string,
-    selectedRamp: string,
+    selectedMode: ClassificationMode,
+    numberOfShades: number,
+    selectedRamp: ColorRampName,
   ) => {
     setColorRampOptions({
       selectedRamp,
@@ -233,31 +235,31 @@ const Graduated: React.FC<ISymbologyTabbedDialogWithAttributesProps> = ({
       case 'quantile':
         stops = VectorClassifications.calculateQuantileBreaks(
           values,
-          +numberOfShades,
+          numberOfShades,
         );
         break;
       case 'equal interval':
         stops = VectorClassifications.calculateEqualIntervalBreaks(
           values,
-          +numberOfShades,
+          numberOfShades,
         );
         break;
       case 'jenks':
         stops = VectorClassifications.calculateJenksBreaks(
           values,
-          +numberOfShades,
+          numberOfShades,
         );
         break;
       case 'pretty':
         stops = VectorClassifications.calculatePrettyBreaks(
           values,
-          +numberOfShades,
+          numberOfShades,
         );
         break;
       case 'logarithmic':
         stops = VectorClassifications.calculateLogarithmicBreaks(
           values,
-          +numberOfShades,
+          numberOfShades,
         );
         break;
       default:
@@ -271,7 +273,7 @@ const Graduated: React.FC<ISymbologyTabbedDialogWithAttributesProps> = ({
         : Utils.getValueColorPairs(
             stops,
             selectedRamp,
-            +numberOfShades,
+            numberOfShades,
             reverseRamp,
           );
 
diff --git a/packages/base/src/dialogs/symbology/vector_layer/types/Heatmap.tsx b/packages/base/src/dialogs/symbology/vector_layer/types/Heatmap.tsx
index 42e812536..ae1eebfbe 100644
--- a/packages/base/src/dialogs/symbology/vector_layer/types/Heatmap.tsx
+++ b/packages/base/src/dialogs/symbology/vector_layer/types/Heatmap.tsx
@@ -3,6 +3,7 @@ import React, { useEffect, useRef, useState } from 'react';
 
 import CanvasSelectComponent from '@/src/dialogs/symbology/components/color_ramp/CanvasSelectComponent';
 import { ISymbologyDialogProps } from '@/src/dialogs/symbology/symbologyDialog';
+import { ColorRampName } from '../../colorRampUtils';
 
 const Heatmap: React.FC<ISymbologyDialogProps> = ({
   model,
@@ -18,7 +19,7 @@ const Heatmap: React.FC<ISymbologyDialogProps> = ({
   if (!layer?.parameters) {
     return;
   }
-  const [selectedRamp, setSelectedRamp] = useState('');
+  const [selectedRamp, setSelectedRamp] = useState<ColorRampName>('viridis');
   const [heatmapOptions, setHetamapOptions] = useState({
     radius: 8,
     blur: 15,
diff --git a/packages/base/src/types.ts b/packages/base/src/types.ts
index 6ae72d4b2..87c11d5b4 100644
--- a/packages/base/src/types.ts
+++ b/packages/base/src/types.ts
@@ -40,3 +40,14 @@ declare global {
     jupytergisMaps: { [name: string]: Map };
   }
 }
+
+const classificationModes = [
+  'quantile',
+  'equal interval',
+  'jenks',
+  'pretty',
+  'logarithmic',
+  'continuous',
+] as const;
+
+export type ClassificationMode = (typeof classificationModes)[number];