diff --git a/README.md b/README.md
index 08e7f68f..1eeed0a0 100755
--- a/README.md
+++ b/README.md
@@ -22,7 +22,7 @@ import ReactImageAnnotate from "react-image-annotate";
 const App = () => (
   <ReactImageAnnotate
     labelImages
-    regionClsList={["Alpha", "Beta", "Charlie", "Delta"]}
+    regionClsList={[{name:"alpha", tranlation: "Alpha"}, {name:"beta", translation: "Beta"}, {name: "charlie", translation: "Charlie"}, {name:"delta", translation:"Delta"}]}
     regionTagList={["tag1", "tag2", "tag3"]}
     images={[
       {
@@ -54,9 +54,9 @@ All of the following properties can be defined on the Annotator...
 | `taskDescription`        | \*`string`                                       | Markdown description for what to do in the image.                                       |               |
 | `allowedArea`            | `{ x: number, y: number, w: number, h: number }` | Area that is available for annotation.                                                  | Entire image. |
 | `regionTagList`          | `Array<string>`                                  | Allowed "tags" (mutually inclusive classifications) for regions.                        |               |
-| `regionClsList`          | `Array<string>`                                  | Allowed "classes" (mutually exclusive classifications) for regions.           
+| `regionClsList`          | `Array{name: <string>, translation: <string>`    | Allowed "classes" (mutually exclusive classifications) for regions.           
 | `regionColorList`        | `Array<string>`                                  | Custom color list for regions. Default colors are used if not specified.
-| `preselectCls`          | `string`                                          |  Put in the class that should be preselected when creating a new Box/Polygon etc.           |               |
+| `preselectCls`          | `string`                                          |  Put in the class that should be preselected when creating a new Box/Polygon etc.       |               |
 | `imageTagList`           | `Array<string>`                                  | Allowed tags for entire image.                                                          |               |
 | `imageClsList`           | `Array<string>`                                  | Allowed classes for entire image.                                                       |               |
 | `enabledTools`           | `Array<string>`                                  | Tools allowed to be used. e.g. "select", "create-point", "create-box", "create-polygon" | Everything.   |
diff --git a/src/Annotator/index.jsx b/src/Annotator/index.jsx
index 5403a287..f15d049b 100644
--- a/src/Annotator/index.jsx
+++ b/src/Annotator/index.jsx
@@ -172,11 +172,20 @@ Annotator.propTypes = {
   enabledTools: PropTypes.arrayOf(PropTypes.string),
   selectedTool: PropTypes.string,
   regionTagList: PropTypes.arrayOf(PropTypes.string),
-  regionClsList: PropTypes.arrayOf(PropTypes.string),
+  regionClsList: PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    translation: PropTypes.string,
+})),
   regionColorList: PropTypes.arrayOf(PropTypes.string),
-  preselectCls: PropTypes.string,
+  preselectCls: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    translation: PropTypes.string
+}),
   imageTagList: PropTypes.arrayOf(PropTypes.string),
-  imageClsList: PropTypes.arrayOf(PropTypes.string),
+  imageClsList: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    translation: PropTypes.string
+}),
   keyframes: PropTypes.object,
   taskDescription: PropTypes.string,
   RegionEditLabel: PropTypes.node,
diff --git a/src/Annotator/reducers/general-reducer.js b/src/Annotator/reducers/general-reducer.js
index 71e63f0b..6788795a 100644
--- a/src/Annotator/reducers/general-reducer.js
+++ b/src/Annotator/reducers/general-reducer.js
@@ -25,11 +25,11 @@ export default (state, action) => {
     action.y = clamp(action.y, aa.y, aa.y + aa.h)
   }
 
-  if (action.type === "ON_CLS_ADDED" && action.cls && action.cls !== "") {
+  if (action.type === "ON_CLS_ADDED" && action.cls && action.cls.name !== "") {
     const oldRegionClsList = state.regionClsList
     const newState = {
       ...state,
-      regionClsList: oldRegionClsList.concat(action.cls),
+      regionClsList: oldRegionClsList.concat(action.cls.name),
     }
     return newState
   }
diff --git a/src/ClassSelectionMenu/index.jsx b/src/ClassSelectionMenu/index.jsx
index 218efb91..ffd2f5fd 100644
--- a/src/ClassSelectionMenu/index.jsx
+++ b/src/ClassSelectionMenu/index.jsx
@@ -84,7 +84,7 @@ export const ClassSelectionMenu = ({
       >
         {regionClsList.map((label, index) => (
           <LabelContainer
-            key={"regionCls" + label}
+            key={"regionCls" + label.name}
             className={classnames({selected: label === selectedCls})}
             onClick={() => onSelectCls(label)}
           >
@@ -92,7 +92,7 @@ export const ClassSelectionMenu = ({
               style={{backgroundColor: index < regionColorList.length ? regionColorList[index] : colors[index % colors.length]}}
             />
             <Label className={classnames({selected: label === selectedCls})}>
-              {capitalize(label)}
+              {capitalize(label.translation != null ? label.translation : label.name)}
             </Label>
             <DashSep />
           </LabelContainer>
diff --git a/src/DemoSite/Examples.jsx b/src/DemoSite/Examples.jsx
index 3f8716c5..63c45de7 100644
--- a/src/DemoSite/Examples.jsx
+++ b/src/DemoSite/Examples.jsx
@@ -4,11 +4,11 @@ import {setIn} from 'seamless-immutable';
 const userReducer = (state, action) => {
   switch (action.type) {
     case "SELECT_CLASSIFICATION": {
-      switch (action.cls) {
-        case "Line-Crossing": {
+      switch (action.cls?.name) {
+        case "name.lightbarrier": {
           return setIn(state, ["selectedTool"], "create-line");
         }
-        case "Area-Occupancy": {
+        case "name.parkingarea": {
           return setIn(state, ["selectedTool"], "create-polygon");
         }
       }
@@ -33,7 +33,7 @@ export const examples = {
     // regionTagList: [],
     // regionClsList: ["hotdog"],
     regionTagList: ["has-bun"],
-    regionClsList: ["hotdog", "not-hotdog"],
+    regionClsList: [{name: "hotdog"}, {name: "not-hotdog"}],
     regionColorList: ["#4d0c89", "#55d68d"],
     preselectCls: "not-hotdog",
     enabledTools: ["create-point", "create-box", "create-polygon", "create-line", "create-expanding-line"],
@@ -56,8 +56,8 @@ export const examples = {
     // regionTagList: [],
     // regionClsList: ["hotdog"],
     regionTagList: ["has-bun"],
-    regionClsList: ["Line-Crossing", "Area-Occupancy"],
-    preselectCls: "not-hotdog",
+    regionClsList: [{name: "name.lightbarrier", translation: "Light Barrier"}, {name: "name.parkingarea", translation: "Parking Area"}],
+    preselectCls: {name: "name.lightbarrier", translation: "Light Barrier"},
     // showTags: true,
     images: [
       {
@@ -71,7 +71,7 @@ export const examples = {
   "Simple Segmentation": () => ({
     taskDescription:
       "Annotate each image according to this _markdown_ specification.",
-    regionClsList: ["car", "truck"],
+    regionClsList: [{name: "car"}, {name: "truck"}],
     enabledTools: ["select", "create-polygon"],
     images: [
       {
diff --git a/src/DemoSite/simple-segmentation-example.json b/src/DemoSite/simple-segmentation-example.json
index 523ba23a..6c3dfef5 100644
--- a/src/DemoSite/simple-segmentation-example.json
+++ b/src/DemoSite/simple-segmentation-example.json
@@ -559,8 +559,8 @@
   ],
   "labelImages": false,
   "regionClsList": [
-    "car",
-    "truck"
+    { "name": "car"},
+    { "name": "truck"}
   ],
   "regionTagList": [],
   "imageClsList": [],
diff --git a/src/ImageCanvas/index.jsx b/src/ImageCanvas/index.jsx
index a2f7c661..5ad3da93 100644
--- a/src/ImageCanvas/index.jsx
+++ b/src/ImageCanvas/index.jsx
@@ -415,7 +415,10 @@ ImageCanvas.propTypes = {
   showHighlightBox: PropTypes.bool,
   showPointDistances: PropTypes.bool,
   pointDistancePrecision: PropTypes.number,
-  regionClsList: PropTypes.arrayOf(PropTypes.string),
+  regionClsList: PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    translation: PropTypes.string,
+  })),
   regionTagList: PropTypes.arrayOf(PropTypes.string),
   allowedArea: PropTypes.shape({x: PropTypes.number, y: PropTypes.number, w: PropTypes.number, h: PropTypes.number}),
   RegionEditLabel: PropTypes.element,
diff --git a/src/MainLayout/index.jsx b/src/MainLayout/index.jsx
index 23c2e477..67c8bf77 100644
--- a/src/MainLayout/index.jsx
+++ b/src/MainLayout/index.jsx
@@ -240,12 +240,6 @@ export const MainLayout = ({
                     expandedByDefault
                   />
                 ),
-                // (state.images?.length || 0) > 1 && (
-                //   <ImageSelector
-                //     onSelect={action("SELECT_REGION", "region")}
-                //     images={state.images}
-                //   />
-                // ),
                 <RegionSelector
                   key={"activeImage" + activeImage.id}
                   regions={activeImage ? activeImage.regions : emptyArr}
diff --git a/src/RegionLabel/index.jsx b/src/RegionLabel/index.jsx
index 6d1483bb..cf952f0e 100644
--- a/src/RegionLabel/index.jsx
+++ b/src/RegionLabel/index.jsx
@@ -123,10 +123,10 @@ export const RegionLabel = ({
                     })
                   }}
                   value={
-                    region.cls ? {label: region.cls, value: region.cls} : null
+                    region.cls ? {label: region.cls.translation, value: region.cls} : null
                   }
                   options={asMutable(
-                    allowedClasses.map((c) => ({value: c, label: c}))
+                    allowedClasses.map((c) => ({value: c, label: c.translation}))
                   )}
                 />
               </div>