diff --git a/src/common/components/icons/index.ts b/src/common/components/icons/index.ts
index 56c4ea26..d2207e5a 100644
--- a/src/common/components/icons/index.ts
+++ b/src/common/components/icons/index.ts
@@ -1,6 +1,7 @@
 export * from './dark-icon.component';
 export * from './light-icon.component';
 export * from './edit-icon.component';
+export * from './key-icon.component';
 export * from './canvas-setting-icon.component';
 export * from './relation-icon.component';
 export * from './zoom-in-icon.component';
diff --git a/src/common/components/icons/key-icon.component.tsx b/src/common/components/icons/key-icon.component.tsx
new file mode 100644
index 00000000..94041449
--- /dev/null
+++ b/src/common/components/icons/key-icon.component.tsx
@@ -0,0 +1,12 @@
+export const KeyIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1.2em"
+      height="1.2em"
+      viewBox="0 0 256 256"
+    >
+      <path d="M200,48A56,56,0,1,0,141.09,97.42L53.66,184.85a8,8,0,0,0-2.34,5.66V208H40a8,8,0,0,0-8,8v32a8,8,0,0,0,8,8H72a8,8,0,0,0,8-8V240h16a8,8,0,0,0,8-8V226.68a8,8,0,0,0,2.34-5.66l13.59-13.59,13.6,13.6a8,8,0,0,0,11.32,0l24-24a8,8,0,0,0,0-11.32l-13.6-13.6,27.08-27.08A56,56,0,1,0,200,48Zm0,32a24,24,0,1,1-24-24A24,24,0,0,1,200,80Z" />
+    </svg>
+  );
+};
diff --git a/src/common/components/modal-dialog/modal-dialog.const.ts b/src/common/components/modal-dialog/modal-dialog.const.ts
index 0a91fde4..6ad8231f 100644
--- a/src/common/components/modal-dialog/modal-dialog.const.ts
+++ b/src/common/components/modal-dialog/modal-dialog.const.ts
@@ -1,5 +1,6 @@
 export const CANVAS_SETTINGS_TITLE = 'Canvas Settings';
 export const ADD_RELATION_TITLE = 'Add Relation';
+export const MANAGE_INDEX_TITLE = 'Manage Index';
 export const EDIT_RELATION_TITLE = 'Edit Relation';
 export const ADD_COLLECTION_TITLE = 'Add Collection';
 export const EDIT_COLLECTION_TITLE = 'Edit Collection';
diff --git a/src/core/functions.ts b/src/core/functions.ts
new file mode 100644
index 00000000..3f2083d2
--- /dev/null
+++ b/src/core/functions.ts
@@ -0,0 +1,33 @@
+import { IndexField } from './providers';
+
+export const isNullOrWhiteSpace = (str?: string) => !str?.trim();
+
+export const parseManageIndexFields = (fieldsString?: string): IndexField[] => {
+  const fields = fieldsString
+    ?.split(/\s*,\s*/) // Split by commas with spaces
+    ?.map(field => {
+      const [name, ...orderParts] = field.trim().split(/\s+/); // Split by one or more spaces
+      return { name, orderMethod: orderParts.join(' ') }; // Handle multi-word order methods
+    });
+  return fields?.filter(x => !isNullOrWhiteSpace(x.name)) as IndexField[];
+};
+
+export const clonify = <T>(input: object): T => {
+  const str = JSON.stringify(input);
+  const obj = JSON.parse(str);
+  return obj as T;
+};
+
+export const isEqual = (
+  a?: string,
+  b?: string,
+  ignoreCaseSensivity?: boolean
+): boolean => {
+  ignoreCaseSensivity = ignoreCaseSensivity ?? true;
+  if (ignoreCaseSensivity) {
+    a = a?.toLowerCase();
+    b = b?.toLowerCase();
+  }
+  if (a === b) return true;
+  return false;
+};
diff --git a/src/core/model/errorHandling.ts b/src/core/model/errorHandling.ts
new file mode 100644
index 00000000..41719dae
--- /dev/null
+++ b/src/core/model/errorHandling.ts
@@ -0,0 +1,10 @@
+export interface errorHandling {
+  errorKey?: string;
+  errorMessage?: string;
+  isSuccessful: boolean;
+}
+
+export interface Output<T> {
+  errorHandling: errorHandling;
+  data?: T;
+}
diff --git a/src/core/providers/canvas-schema/canvas-schema-vlatest.model.ts b/src/core/providers/canvas-schema/canvas-schema-vlatest.model.ts
index 45b0c6fd..fd12f66d 100644
--- a/src/core/providers/canvas-schema/canvas-schema-vlatest.model.ts
+++ b/src/core/providers/canvas-schema/canvas-schema-vlatest.model.ts
@@ -1,4 +1,5 @@
 import { Coords, FieldType, GUID, Size } from '@/core/model';
+import { errorHandling } from '@/core/model/errorHandling';
 
 export interface TableVm {
   id: string;
@@ -6,6 +7,7 @@ export interface TableVm {
   tableName: string;
   x: number; // Canvas X Position
   y: number; // Canvas Y Position
+  indexes?: IndexVm[];
 }
 
 export interface FieldVm {
@@ -40,6 +42,22 @@ export interface DatabaseSchemaVm {
   isPristine?: boolean;
 }
 
+export type OrderMethod = 'Ascending' | 'Descending';
+
+export interface IndexField {
+  name: string;
+  orderMethod: OrderMethod;
+}
+export interface IndexVm {
+  id: string;
+  name: string;
+  isUnique: boolean;
+  sparse: boolean;
+  fields: IndexField[];
+  fieldsString?: string;
+  partialFilterExpression?: string;
+}
+
 export const createDefaultDatabaseSchemaVm = (): DatabaseSchemaVm => ({
   version: '0.1',
   tables: [],
@@ -68,8 +86,10 @@ export interface CanvasSchemaContextVm {
   updateTablePosition: UpdatePositionFn;
   doFieldToggleCollapse: (tableId: string, fieldId: GUID) => void;
   updateFullTable: (table: TableVm) => void;
+  updateFullTableByCheckingIndexes: (table: TableVm) => errorHandling;
   addTable: (table: TableVm) => void;
   addRelation: (relation: RelationVm) => void;
+  addIndexes: (tableId: GUID, indexes: IndexVm[]) => void;
   doSelectElement: (id: GUID | null) => void;
   canUndo: () => boolean;
   canRedo: () => boolean;
diff --git a/src/core/providers/canvas-schema/canvas-schema.business.ts b/src/core/providers/canvas-schema/canvas-schema.business.ts
index ec255ef2..136dbf1f 100644
--- a/src/core/providers/canvas-schema/canvas-schema.business.ts
+++ b/src/core/providers/canvas-schema/canvas-schema.business.ts
@@ -1,5 +1,10 @@
 import { produce } from 'immer';
-import { FieldVm, RelationVm, TableVm } from './canvas-schema-vlatest.model';
+import {
+  FieldVm,
+  IndexVm,
+  RelationVm,
+  TableVm,
+} from './canvas-schema-vlatest.model';
 import { DatabaseSchemaVm } from './canvas-schema-vlatest.model';
 import { GUID } from '@/core/model';
 
@@ -105,3 +110,15 @@ export const updateRelation = (
       draft.relations[index] = relation;
     }
   });
+
+export const updateIndexes = (
+  tableId: GUID,
+  indexes: IndexVm[],
+  dbSchema: DatabaseSchemaVm
+): DatabaseSchemaVm =>
+  produce(dbSchema, draft => {
+    const tableIndex = draft.tables.findIndex(t => t.id === tableId);
+    if (tableIndex !== -1) {
+      draft.tables[tableIndex].indexes = indexes;
+    }
+  });
diff --git a/src/core/providers/canvas-schema/canvas-schema.provider.tsx b/src/core/providers/canvas-schema/canvas-schema.provider.tsx
index 29767cba..46d92d10 100644
--- a/src/core/providers/canvas-schema/canvas-schema.provider.tsx
+++ b/src/core/providers/canvas-schema/canvas-schema.provider.tsx
@@ -3,6 +3,7 @@ import { produce } from 'immer';
 import { CanvasSchemaContext } from './canvas-schema.context';
 import {
   DatabaseSchemaVm,
+  IndexVm,
   RelationVm,
   TableVm,
   UpdatePositionItemInfo,
@@ -19,10 +20,13 @@ import {
   addNewTable,
   updateRelation,
   updateTable,
+  updateIndexes,
 } from './canvas-schema.business';
 import { useHistoryManager } from '@/common/undo-redo';
 import { mapSchemaToLatestVersion } from './canvas-schema.mapper';
 import { useStateWithInterceptor } from './canvas-schema.hook';
+import { indexDuplicateNameChecking } from '@/pods/manage-index/manage-index.business';
+import { errorHandling } from '@/core/model/errorHandling';
 
 interface Props {
   children: React.ReactNode;
@@ -60,6 +64,17 @@ export const CanvasSchemaProvider: React.FC<Props> = props => {
     );
   };
 
+  const updateFullTableByCheckingIndexes = (table: TableVm): errorHandling => {
+    const res = indexDuplicateNameChecking(table, canvasSchema);
+    if (!res.isSuccessful) {
+      return res;
+    }
+    setSchema(prevSchema =>
+      updateTable(table, { ...prevSchema, isPristine: false })
+    );
+    return res;
+  };
+
   // TODO: #56 created to track this
   // https://github.com/Lemoncode/mongo-modeler/issues/56
   const addTable = (table: TableVm) => {
@@ -80,6 +95,12 @@ export const CanvasSchemaProvider: React.FC<Props> = props => {
     }
   };
 
+  const addIndexes = (tableId: GUID, indexes: IndexVm[]) => {
+    setSchema(prevSchema =>
+      updateIndexes(tableId, indexes, { ...prevSchema, isPristine: false })
+    );
+  };
+
   const updateFullRelation = (relationUpdated: RelationVm) => {
     setSchema(prevSchema =>
       updateRelation(relationUpdated, { ...prevSchema, isPristine: false })
@@ -236,8 +257,10 @@ export const CanvasSchemaProvider: React.FC<Props> = props => {
         updateTablePosition,
         doFieldToggleCollapse,
         updateFullTable,
+        updateFullTableByCheckingIndexes,
         addTable,
         addRelation,
+        addIndexes,
         doSelectElement,
         canUndo,
         canRedo,
diff --git a/src/pods/canvas/canvas-svg.component.tsx b/src/pods/canvas/canvas-svg.component.tsx
index dabb5240..62220523 100644
--- a/src/pods/canvas/canvas-svg.component.tsx
+++ b/src/pods/canvas/canvas-svg.component.tsx
@@ -17,6 +17,7 @@ interface Props {
   onUpdateTablePosition: UpdatePositionFn;
   onToggleCollapse: (tableId: GUID, fieldId: GUID) => void;
   onEditTable: (tableInfo: TableVm) => void;
+  onManageIndex: (tableInfo: TableVm) => void;
   onEditRelation: (relationId: GUID) => void;
   onSelectElement: (relationId: GUID | null) => void;
   isTabletOrMobileDevice: boolean;
@@ -31,6 +32,7 @@ export const CanvasSvgComponent: React.FC<Props> = props => {
     onUpdateTablePosition,
     onToggleCollapse,
     onEditTable,
+    onManageIndex,
     onEditRelation,
     onSelectElement,
     isTabletOrMobileDevice,
@@ -63,6 +65,7 @@ export const CanvasSvgComponent: React.FC<Props> = props => {
           updatePosition={onUpdateTablePosition}
           onToggleCollapse={onToggleCollapse}
           onEditTable={onEditTable}
+          onManageIndex={onManageIndex}
           canvasSize={canvasSize}
           isSelected={canvasSchema.selectedElementId === table.id}
           selectTable={onSelectElement}
diff --git a/src/pods/canvas/canvas.pod.tsx b/src/pods/canvas/canvas.pod.tsx
index 4a2963c0..e3a14887 100644
--- a/src/pods/canvas/canvas.pod.tsx
+++ b/src/pods/canvas/canvas.pod.tsx
@@ -17,6 +17,7 @@ import {
   EDIT_COLLECTION_TITLE,
   ADD_COLLECTION_TITLE,
   ADD_RELATION_TITLE,
+  MANAGE_INDEX_TITLE,
 } from '@/common/components/modal-dialog';
 import { CanvasSvgComponent } from './canvas-svg.component';
 import { EditRelationPod } from '../edit-relation';
@@ -25,6 +26,8 @@ import { CanvasAccessible } from './components/canvas-accessible';
 import useAutosave from '@/core/autosave/autosave.hook';
 import { CANVAS_MAX_WIDTH } from '@/core/providers';
 import { setOffSetZoomToCoords } from '@/common/helpers/set-off-set-zoom-to-coords.helper';
+import { ManageIndexPod } from '../manage-index';
+
 const HEIGHT_OFFSET = 200;
 const BORDER_MARGIN = 40;
 export const CanvasPod: React.FC = () => {
@@ -35,6 +38,7 @@ export const CanvasPod: React.FC = () => {
     addRelation,
     updateTablePosition,
     updateFullTable,
+    updateFullTableByCheckingIndexes,
     doFieldToggleCollapse,
     doSelectElement,
     updateFullRelation,
@@ -122,6 +126,28 @@ export const CanvasPod: React.FC = () => {
     );
   };
 
+  const handleManageIndexSave = (table: TableVm) => {
+    const res = updateFullTableByCheckingIndexes(table);
+    console.log(table);
+    if (!res.isSuccessful) {
+      alert(res.errorMessage);
+      return;
+    }
+    closeModal();
+  };
+
+  const handleManageIndex = (tableInfo: TableVm) => {
+    if (isTabletOrMobileDevice) return;
+    openModal(
+      <ManageIndexPod
+        table={tableInfo}
+        onSave={handleManageIndexSave}
+        onClose={handleCloseModal}
+      />,
+      MANAGE_INDEX_TITLE
+    );
+  };
+
   const containerRef = React.useRef<HTMLDivElement>(null);
 
   const handleScroll = () => {
@@ -252,7 +278,6 @@ export const CanvasPod: React.FC = () => {
       document.removeEventListener('keydown', handleKeyDown);
     };
   }, [modalDialog.isOpen, canvasSchema.selectedElementId]);
-
   return (
     <main
       className={classes.container}
@@ -287,6 +312,7 @@ export const CanvasPod: React.FC = () => {
           onUpdateTablePosition={updateTablePosition}
           onToggleCollapse={handleToggleCollapse}
           onEditTable={handleEditTable}
+          onManageIndex={handleManageIndex}
           onEditRelation={handleEditRelation}
           onSelectElement={onSelectElement}
           isTabletOrMobileDevice={isTabletOrMobileDevice}
diff --git a/src/pods/canvas/components/table/components/database-table-header.component.tsx b/src/pods/canvas/components/table/components/database-table-header.component.tsx
index 08b1c5d9..55b2097c 100644
--- a/src/pods/canvas/components/table/components/database-table-header.component.tsx
+++ b/src/pods/canvas/components/table/components/database-table-header.component.tsx
@@ -1,4 +1,4 @@
-import { Edit } from '@/common/components';
+import { Edit, KeyIcon } from '@/common/components';
 import { TABLE_CONST } from '@/core/providers';
 import { TruncatedText } from './truncated-text.component';
 import {
@@ -16,11 +16,13 @@ interface Props {
   tableName: string;
   onSelectTable: () => void;
   isTabletOrMobileDevice: boolean;
+  onManageIndex: () => void;
 }
 
 export const DatabaseTableHeader: React.FC<Props> = props => {
   const {
     onEditTable,
+    onManageIndex,
     isSelected,
     tableName,
     onSelectTable,
@@ -34,6 +36,10 @@ export const DatabaseTableHeader: React.FC<Props> = props => {
     e.stopPropagation();
   };
 
+  const handleIndexClick = (e: React.MouseEvent<SVGGElement, MouseEvent>) => {
+    onManageIndex();
+    e.stopPropagation();
+  };
   const handleClick = (e: React.MouseEvent<SVGGElement, MouseEvent>) => {
     onSelectTable();
     e.stopPropagation();
@@ -72,21 +78,38 @@ export const DatabaseTableHeader: React.FC<Props> = props => {
         textClass={classes.tableText}
       />
       {isSelected && !isTabletOrMobileDevice && (
-        <g
-          transform={`translate(${TABLE_CONST.TABLE_WIDTH - (PENCIL_ICON_WIDTH - PENCIL_MARGIN_RIGHT)}, 2)`}
-          onClick={handlePencilIconClick}
-        >
-          <rect
-            x="0"
-            y="0"
-            width={PENCIL_ICON_WIDTH + PENCIL_MARGIN_RIGHT}
-            fill="transparent"
-            height={PENCIL_ICON_HEIGHT}
+        <>
+          <g
+            transform={`translate(${TABLE_CONST.TABLE_WIDTH - (PENCIL_ICON_WIDTH - PENCIL_MARGIN_RIGHT)}, 2)`}
             onClick={handlePencilIconClick}
-            style={{ cursor: 'pointer' }}
-          />
-          <Edit />
-        </g>
+          >
+            <rect
+              x="0"
+              y="0"
+              width={PENCIL_ICON_WIDTH + PENCIL_MARGIN_RIGHT}
+              fill="transparent"
+              height={PENCIL_ICON_HEIGHT}
+              onClick={handlePencilIconClick}
+              style={{ cursor: 'pointer' }}
+            />
+            <Edit />
+          </g>
+          <g
+            transform={`translate(${TABLE_CONST.TABLE_WIDTH - (PENCIL_ICON_WIDTH - PENCIL_MARGIN_RIGHT) - 30}, 2)`}
+            onClick={handleIndexClick}
+          >
+            <rect
+              x="0"
+              y="0"
+              width={PENCIL_ICON_WIDTH + PENCIL_MARGIN_RIGHT}
+              fill="transparent"
+              height={PENCIL_ICON_HEIGHT}
+              onClick={handleIndexClick}
+              style={{ cursor: 'pointer' }}
+            />
+            <KeyIcon />
+          </g>
+        </>
       )}
       {/* Clikable area to select the table or edit it*/}
       <rect
@@ -94,7 +117,7 @@ export const DatabaseTableHeader: React.FC<Props> = props => {
         y="0"
         width={
           isSelected
-            ? TABLE_CONST.TABLE_WIDTH - PENCIL_ICON_WIDTH
+            ? TABLE_CONST.TABLE_WIDTH - PENCIL_ICON_WIDTH - 30
             : TABLE_CONST.TABLE_WIDTH
         }
         height={TABLE_CONST.HEADER_HEIGHT}
diff --git a/src/pods/canvas/components/table/components/database-table-row.component.tsx b/src/pods/canvas/components/table/components/database-table-row.component.tsx
index a81bd891..026becd4 100644
--- a/src/pods/canvas/components/table/components/database-table-row.component.tsx
+++ b/src/pods/canvas/components/table/components/database-table-row.component.tsx
@@ -4,6 +4,7 @@ import { TABLE_CONST } from '@/core/providers/canvas-schema/canvas.const';
 import { TruncatedText } from './truncated-text.component';
 import classes from '../database-table.module.css';
 import { calculateColumNameWidth } from '../database-table.business';
+import { isNullOrWhiteSpace } from '@/core/functions';
 
 interface Props {
   tableInfo: TableVm;
@@ -41,6 +42,25 @@ export const DatabaseTableRow: React.FC<Props> = props => {
     field.type === 'object' && (field.children?.length ?? 0) > 0;
   const isExpanded = !field.isCollapsed;
 
+  const indexFlag = (fieldName: string): string => {
+    const found = tableInfo.indexes?.find(x =>
+      x.fields?.find(
+        z => z.name == fieldName || z.name.endsWith(`.${fieldName}`)
+      )
+    );
+
+    let result: string = '';
+
+    if (found) {
+      result = 'i';
+      if (found.isUnique) result = 'u' + result;
+    }
+
+    return result;
+  };
+
+  const indexFlagStr = indexFlag(field.name);
+
   return (
     <g key={field.id} transform={`translate(${MARGIN_LEFT}, ${currentY})`}>
       <g transform={`translate(${level * TABLE_CONST.LEVEL_INDENTATION}, 0)`}>
@@ -55,7 +75,10 @@ export const DatabaseTableRow: React.FC<Props> = props => {
           </text>
         )}
         <TruncatedText
-          text={field.name}
+          text={
+            field.name +
+            (isNullOrWhiteSpace(indexFlagStr) ? '' : `(${indexFlagStr})`)
+          }
           x={SPACE_ARROW_TEXT}
           y={0}
           width={
@@ -64,6 +87,16 @@ export const DatabaseTableRow: React.FC<Props> = props => {
             level * TABLE_CONST.LEVEL_INDENTATION
           }
           height={TABLE_CONST.FONT_SIZE}
+          style={
+            indexFlagStr == 'i'
+              ? { fontWeight: 'bold' }
+              : indexFlagStr == 'ui'
+                ? {
+                    fontWeight: 'bold',
+                    fontStyle: 'italic',
+                  }
+                : {}
+          }
         />
       </g>
       <TruncatedText
diff --git a/src/pods/canvas/components/table/components/truncated-text.component.tsx b/src/pods/canvas/components/table/components/truncated-text.component.tsx
index 6c7b62b7..06850ac8 100644
--- a/src/pods/canvas/components/table/components/truncated-text.component.tsx
+++ b/src/pods/canvas/components/table/components/truncated-text.component.tsx
@@ -9,6 +9,7 @@ interface Props {
   width: number;
   height: number;
   textClass?: string;
+  style?: React.CSSProperties;
 }
 
 export const TruncatedText: React.FC<Props> = props => {
@@ -26,6 +27,7 @@ export const TruncatedText: React.FC<Props> = props => {
         y={y + height}
         clipPath={`url(#clip_${id})`}
         className={!textClass ? classes.tableTextRow : textClass}
+        style={props.style}
       >
         {text}
       </text>
diff --git a/src/pods/canvas/components/table/database-table.component.tsx b/src/pods/canvas/components/table/database-table.component.tsx
index f486e995..a8c1ffab 100644
--- a/src/pods/canvas/components/table/database-table.component.tsx
+++ b/src/pods/canvas/components/table/database-table.component.tsx
@@ -19,6 +19,7 @@ interface Props {
   updatePosition: UpdatePositionFn;
   onToggleCollapse: (tableId: GUID, fieldId: GUID) => void;
   onEditTable: (tableInfo: TableVm) => void;
+  onManageIndex: (tableInfo: TableVm) => void;
   canvasSize: Size;
   isSelected: boolean;
   selectTable: (tableId: GUID) => void;
@@ -30,6 +31,7 @@ interface Props {
 export const DatabaseTable: React.FC<Props> = ({
   tableInfo,
   onEditTable,
+  onManageIndex,
   updatePosition,
   onToggleCollapse,
   canvasSize,
@@ -81,6 +83,10 @@ export const DatabaseTable: React.FC<Props> = ({
     onEditTable(tableInfo);
   };
 
+  const handleManageIndexClick = () => {
+    onManageIndex(tableInfo);
+  };
+
   return (
     <g
       transform={`translate(${tableInfo.x}, ${tableInfo.y})`}
@@ -92,6 +98,7 @@ export const DatabaseTable: React.FC<Props> = ({
       <DatabaseTableBorder totalHeight={totalHeight} isSelected={isSelected} />
       <DatabaseTableHeader
         onEditTable={handleDoubleClick}
+        onManageIndex={handleManageIndexClick}
         onSelectTable={handleSelectTable}
         isSelected={isSelected}
         tableName={tableInfo.tableName}
diff --git a/src/pods/edit-relation/edit-relation.business.ts b/src/pods/edit-relation/edit-relation.business.ts
index 3d550ad3..0d6a0d0e 100644
--- a/src/pods/edit-relation/edit-relation.business.ts
+++ b/src/pods/edit-relation/edit-relation.business.ts
@@ -156,11 +156,11 @@ export const findFieldRecursively = (
 // };
 
 const findRelation = (relations: RelationVm[], id: GUID): RelationVm => {
-  const relationId = relations.find(relation => relation.id === id);
-  if (!relationId) {
-    throw Error(`Relation for ${relationId} is missing`);
+  const relation = relations.find(relation => relation.id === id);
+  if (!relation) {
+    throw Error(`Relation for ${id} is missing`);
   }
-  return relationId;
+  return relation;
 };
 
 export const createInitialIdValues = (
diff --git a/src/pods/edit-table/edit-table.component.tsx b/src/pods/edit-table/edit-table.component.tsx
index fcb9259e..02c060f2 100644
--- a/src/pods/edit-table/edit-table.component.tsx
+++ b/src/pods/edit-table/edit-table.component.tsx
@@ -15,6 +15,7 @@ interface Props {
   onDeleteField: (fieldId: GUID) => void;
   onAddField: (fieldId: GUID, isChildren: boolean, newFieldId: GUID) => void;
   updateTableName: (value: string) => void;
+  updateTableComment: (value: string) => void;
   onMoveDownField: (fieldId: GUID) => void;
   onMoveUpField: (fieldId: GUID) => void;
   onDragField: (fields: FieldVm[], id?: GUID) => void;
@@ -27,6 +28,7 @@ export const EditTableComponent: React.FC<Props> = props => {
     onDeleteField,
     onAddField,
     updateTableName,
+    updateTableComment,
     onMoveDownField,
     onMoveUpField,
     onDragField,
@@ -62,6 +64,10 @@ export const EditTableComponent: React.FC<Props> = props => {
     updateTableName(e.currentTarget.value);
   };
 
+  const handleChangeTableComment = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    updateTableComment(e.currentTarget.value);
+  };
+
   return (
     <>
       <div className={classes.tableName}>
@@ -75,6 +81,17 @@ export const EditTableComponent: React.FC<Props> = props => {
           />
         </label>
       </div>
+      <div className={classes.tableName}>
+        <label>
+          Comment:
+          <textarea
+            value={table.comment}
+            onChange={handleChangeTableComment}
+            onFocus={e => e.currentTarget.select()}
+            rows={3}
+          />
+        </label>
+      </div>
 
       <div className={classes.tableEditor}>
         <div className={classes.headerRow}>
diff --git a/src/pods/edit-table/edit-table.mapper.ts b/src/pods/edit-table/edit-table.mapper.ts
index 55deb15e..9fe6f038 100644
--- a/src/pods/edit-table/edit-table.mapper.ts
+++ b/src/pods/edit-table/edit-table.mapper.ts
@@ -9,7 +9,7 @@ import * as editTableModel from './edit-table.vm';
 const extractFieldIDThatIsFk =
   (tableId: GUID) =>
   (relation: canvasModel.RelationVm): GUID => {
-    let result: GUID = '-1';
+    const result: GUID = '-1';
     switch (relation.type) {
       case '1:1':
         if (
@@ -44,7 +44,7 @@ const markFKFields = (
   fields: canvasModel.FieldVm[],
   FKFields: GUID[]
 ): editTableModel.FieldVm[] => {
-  let result: editTableModel.FieldVm[] = [];
+  const result: editTableModel.FieldVm[] = [];
   fields.forEach(field => {
     const isFK = FKFields.includes(field.id);
     result.push({
diff --git a/src/pods/edit-table/edit-table.module.css b/src/pods/edit-table/edit-table.module.css
index 0b659053..0278f4fa 100644
--- a/src/pods/edit-table/edit-table.module.css
+++ b/src/pods/edit-table/edit-table.module.css
@@ -181,6 +181,13 @@ related to each other and to the dialog header*/
   max-width: 190px;
 }
 
+.table-name textarea {
+  width: 100%;
+  background-color: var(--background-dialog);
+  border-radius: var(--border-radius-table);
+  color: var(--text-white);
+}
+
 .fieldCell button {
   display: flex;
   align-items: center;
diff --git a/src/pods/edit-table/edit-table.pod.tsx b/src/pods/edit-table/edit-table.pod.tsx
index a2e7dc10..ece6e2d8 100644
--- a/src/pods/edit-table/edit-table.pod.tsx
+++ b/src/pods/edit-table/edit-table.pod.tsx
@@ -72,6 +72,10 @@ export const EditTablePod: React.FC<Props> = props => {
     setEditTable({ ...editTable, tableName });
   };
 
+  const updateTableComment = (comment: string) => {
+    setEditTable({ ...editTable, comment });
+  };
+
   const onMoveDownField = (fieldId: GUID) => {
     setEditTable(currentTable => moveDownField(currentTable, fieldId));
   };
@@ -103,6 +107,7 @@ export const EditTablePod: React.FC<Props> = props => {
         onDeleteField={onDeleteField}
         onAddField={onAddField}
         updateTableName={updateTableName}
+        updateTableComment={updateTableComment}
         onMoveDownField={onMoveDownField}
         onMoveUpField={onMoveUpField}
         onDragField={onDragField}
diff --git a/src/pods/edit-table/edit-table.vm.ts b/src/pods/edit-table/edit-table.vm.ts
index 56dc1018..26018bc6 100644
--- a/src/pods/edit-table/edit-table.vm.ts
+++ b/src/pods/edit-table/edit-table.vm.ts
@@ -29,11 +29,12 @@ export interface TableVm {
   tableName: string;
   x: number; // Canvas X Position
   y: number; // Canvas Y Position
+  comment?:string;
 }
 
 export const createDefaultTable = (): TableVm => ({
   id: GenerateGUID(),
-  tableName: 'New Collection',
+  tableName: 'New Collection',  
   fields: [
     {
       id: GenerateGUID(),
diff --git a/src/pods/manage-index/components/commands/command-icon-button.tsx b/src/pods/manage-index/components/commands/command-icon-button.tsx
new file mode 100644
index 00000000..8815a151
--- /dev/null
+++ b/src/pods/manage-index/components/commands/command-icon-button.tsx
@@ -0,0 +1,16 @@
+interface Props {
+  onClick: () => void;
+  icon: JSX.Element;
+  disabled?: boolean;
+  ariaLabel?: string;
+}
+
+export const CommandIconButton: React.FC<Props> = props => {
+  const { onClick, icon, disabled, ariaLabel } = props;
+
+  return (
+    <button onClick={onClick} disabled={disabled} aria-label={ariaLabel}>
+      {icon}
+    </button>
+  );
+};
diff --git a/src/pods/manage-index/components/commands/commands.business-first-item.spec.ts b/src/pods/manage-index/components/commands/commands.business-first-item.spec.ts
new file mode 100644
index 00000000..c86f03da
--- /dev/null
+++ b/src/pods/manage-index/components/commands/commands.business-first-item.spec.ts
@@ -0,0 +1,43 @@
+import { FieldVm } from '../../manage-index.vm';
+import { isFirstItemInArray } from './commands.business';
+
+describe('isFirstItemInArray', () => {
+  it('should return true when it is the first item of the array', () => {
+    // Arrange
+    const indexes: FieldVm[] = [
+      { id: '1', name: 'Index1', isUnique: false, sparse: false, fields: [] },
+      { id: '2', name: 'Index2', isUnique: false, sparse: false, fields: [] },
+    ];
+    //Act
+    const firstItem = isFirstItemInArray(indexes, '1');
+
+    //Assert
+    expect(firstItem).toBeTruthy();
+  });
+
+  it('should return false when it is not the last item of the array', () => {
+    // Arrange
+    const indexes: FieldVm[] = [
+      { id: '1', name: 'Index1', isUnique: false, sparse: false, fields: [] },
+      { id: '2', name: 'Index2', isUnique: false, sparse: false, fields: [] },
+    ];
+    //Act
+    const firstItem = isFirstItemInArray(indexes, '2');
+
+    //Assert
+    expect(firstItem).toBeFalsy();
+  });
+
+  it('should return false when it is not the first item of the array', () => {
+    // Arrange
+    const indexes: FieldVm[] = [
+      { id: '1', name: 'Index1', isUnique: false, sparse: false, fields: [] },
+      { id: '2', name: 'Index2', isUnique: false, sparse: false, fields: [] },
+    ];
+    //Act
+    const firstItem = isFirstItemInArray(indexes, '2');
+
+    //Assert
+    expect(firstItem).toBeFalsy();
+  });
+});
diff --git a/src/pods/manage-index/components/commands/commands.business-last-item.spec.ts b/src/pods/manage-index/components/commands/commands.business-last-item.spec.ts
new file mode 100644
index 00000000..bb7b7cae
--- /dev/null
+++ b/src/pods/manage-index/components/commands/commands.business-last-item.spec.ts
@@ -0,0 +1,45 @@
+import { FieldVm } from '../../manage-index.vm';
+import { isLastItemInArray } from './commands.business';
+
+describe('isLastItemInArray', () => {
+  it('should return true when it is the last item of the array', () => {
+    // Arrange
+    const indexes: FieldVm[] = [
+      { id: '1', name: 'Index1', isUnique: false, sparse: false, fields: [] },
+      { id: '2', name: 'Index2', isUnique: false, sparse: false, fields: [] },
+    ];
+
+    //Act
+    const firstItem = isLastItemInArray(indexes, '2');
+
+    //Assert
+    expect(firstItem).toBeTruthy();
+  });
+  it('should return false when it is not the last item of the array', () => {
+    // Arrange
+    const indexes: FieldVm[] = [
+      { id: '1', name: 'Index1', isUnique: false, sparse: false, fields: [] },
+      { id: '2', name: 'Index2', isUnique: false, sparse: false, fields: [] },
+    ];
+
+    //Act
+    const firstItem = isLastItemInArray(indexes, '1');
+
+    //Assert
+    expect(firstItem).toBeFalsy();
+  });
+
+  it('should return false when it is not the last item of the array', () => {
+    // Arrange
+    const indexes: FieldVm[] = [
+      { id: '1', name: 'Index1', isUnique: false, sparse: false, fields: [] },
+      { id: '2', name: 'Index2', isUnique: false, sparse: false, fields: [] },
+    ];
+
+    //Act
+    const firstItem = isLastItemInArray(indexes, '1');
+
+    //Assert
+    expect(firstItem).toBeFalsy();
+  });
+});
diff --git a/src/pods/manage-index/components/commands/commands.business.ts b/src/pods/manage-index/components/commands/commands.business.ts
new file mode 100644
index 00000000..412c060a
--- /dev/null
+++ b/src/pods/manage-index/components/commands/commands.business.ts
@@ -0,0 +1,8 @@
+import { GUID } from '@/core/model';
+import { FieldVm } from '../../manage-index.vm';
+
+export const isLastItemInArray = (array: FieldVm[], id: GUID): boolean =>
+  array[array.length - 1].id === id;
+
+export const isFirstItemInArray = (array: FieldVm[], id: GUID): boolean =>
+  array[0].id === id;
diff --git a/src/pods/manage-index/components/commands/commands.component.tsx b/src/pods/manage-index/components/commands/commands.component.tsx
new file mode 100644
index 00000000..689f4166
--- /dev/null
+++ b/src/pods/manage-index/components/commands/commands.component.tsx
@@ -0,0 +1,46 @@
+import { Add } from '@/common/components/icons/add-icon.component';
+import { CommandIconButton } from './command-icon-button';
+import { FieldVm } from '../../manage-index.vm';
+import { GUID, GenerateGUID } from '@/core/model';
+import { TrashIcon } from '@/common/components';
+
+interface Props {
+  onDeleteIndex: (indexId: GUID) => void;
+  onAddIndex: (fieldId: GUID, isChildren: boolean, newfieldId: GUID) => void;
+  index: FieldVm;
+  indexes: FieldVm[];
+  onMoveDown: (indexId: GUID) => void;
+  onMoveUp: (indexId: GUID) => void;
+  isDeleteVisible: boolean;
+  labelAddIndex?: string;
+}
+
+const REMOVE_ICON = 'Remove';
+const ADD = 'Add Index';
+
+export const Commands: React.FC<Props> = (props: Props) => {
+  const {
+    index: index,
+    onDeleteIndex: onDeleteIndex,
+    onAddIndex: onAddIndex,
+    isDeleteVisible,
+    labelAddIndex: labelAddIndex,
+  } = props;
+
+  return (
+    <>
+      <CommandIconButton
+        icon={<Add />}
+        onClick={() => onAddIndex(index.id, false, GenerateGUID())}
+        ariaLabel={labelAddIndex || ADD}
+      />
+      {isDeleteVisible && (
+        <CommandIconButton
+          icon={<TrashIcon />}
+          onClick={() => onDeleteIndex(index.id)}
+          ariaLabel={REMOVE_ICON + index.name}
+        />
+      )}
+    </>
+  );
+};
diff --git a/src/pods/manage-index/components/index.tsx b/src/pods/manage-index/components/index.tsx
new file mode 100644
index 00000000..4800f3b5
--- /dev/null
+++ b/src/pods/manage-index/components/index.tsx
@@ -0,0 +1,166 @@
+import React from 'react';
+import classes from '../manage-index.module.css';
+import { Reorder, motion, useDragControls } from 'framer-motion';
+import { Commands } from './commands/commands.component';
+import { DragDropIcon, Checkbox } from '@/common/components';
+import { FieldVm } from '../manage-index.vm';
+import { GUID } from '@/core/model';
+
+interface Props {
+  index: FieldVm;
+  indexes: FieldVm[];
+  level: number;
+  expanded: Set<string>;
+  toggleExpand: (id: GUID) => void;
+  expand: (id: GUID) => void;
+  updateValue: <K extends keyof FieldVm>(
+    index: FieldVm,
+    id: K,
+    value: FieldVm[K]
+  ) => void;
+  nameInputRefRecord: React.RefObject<Record<string, HTMLInputElement | null>>;
+  onDelete: (id: GUID) => void;
+  onAdd: (id: GUID) => void;
+  onMoveDown: (id: GUID) => void;
+  onMoveUp: (id: GUID) => void;
+  isDeleteVisible: boolean;
+  labelAddIndex?: string;
+}
+
+const INPUT_NAME = 'Index ';
+const CHECKBOX_ISUNIQUE = 'Checkbox isUnique for index ';
+export const Index: React.FC<Props> = props => {
+  const {
+    index,
+    indexes,
+    level,
+    onAdd,
+    onDelete,
+    onMoveDown,
+    onMoveUp,
+    updateValue,
+    nameInputRefRecord,
+    isDeleteVisible,
+    labelAddIndex,
+  } = props;
+  const variantsItem = {
+    left: {
+      opacity: 0,
+      x: -200,
+      scale: 0.8,
+    },
+    stay: {
+      opacity: 1,
+      x: 0,
+      scale: 1,
+      transition: { duration: 0.3 },
+    },
+  };
+  const dragControls = useDragControls();
+  const handleAdd = (id: GUID) => {
+    onAdd(id);
+  };
+
+  const handlerPointerDown = (e: React.PointerEvent<HTMLButtonElement>) => {
+    dragControls.start(e);
+    e.currentTarget.style.cursor = 'grabbing';
+  };
+
+  const assignRef = (el: HTMLInputElement | null, id: string) => {
+    if (el && nameInputRefRecord?.current) {
+      nameInputRefRecord.current[id] = el;
+    }
+  };
+
+  return (
+    <React.Fragment key={index.id}>
+      <Reorder.Item
+        value={index}
+        key={index.id}
+        style={{ y: 0 }}
+        className={`${classes.fieldRow} `}
+        initial="left"
+        animate="stay"
+        exit="left"
+        variants={variantsItem}
+        transition={{ duration: 0.3 }}
+        dragListener={false}
+        dragControls={dragControls}
+      >
+        <div className={classes.fieldCell}>
+          <motion.button
+            className={classes.dragButton}
+            onPointerDown={e => handlerPointerDown(e)}
+            onPointerUp={e => (e.currentTarget.style.cursor = 'grab')}
+            aria-hidden="true"
+            tabIndex={-1}
+          >
+            <DragDropIcon />
+          </motion.button>
+          <div className={`${classes.expandCell} ${classes[`indent${level}`]}`}>
+            <div className={classes.buttonSpace} />
+            <div className={classes.inputName}>
+              <input
+                value={index.name}
+                onChange={e => {
+                  updateValue(index, 'name', e.target.value);
+                }}
+                ref={el => assignRef(el, index.id)}
+                aria-label={INPUT_NAME + index.name}
+              />
+            </div>
+          </div>
+        </div>
+        <div className={classes.fieldCell}>
+          <input
+            value={index.fieldsString}
+            onChange={e => {
+              updateValue(index, 'fieldsString', e.target.value);
+            }}
+            ref={el => assignRef(el, index.id)}
+            aria-label={INPUT_NAME + index.name}
+          />
+        </div>
+        <div className={classes.fieldCell}>
+          <Checkbox
+            id="isUnique"
+            checked={index.isUnique}
+            onChange={() => updateValue(index, 'isUnique', !index.isUnique)}
+            ariaLabel={CHECKBOX_ISUNIQUE + index.name}
+          ></Checkbox>
+        </div>
+        <div className={classes.fieldCell}>
+          <Checkbox
+            id="sparse"
+            checked={index.sparse}
+            onChange={() => updateValue(index, 'sparse', !index.sparse)}
+            ariaLabel={CHECKBOX_ISUNIQUE + index.name}
+          ></Checkbox>
+        </div>
+        <div className={classes.fieldCell}>
+          <input
+            value={index.partialFilterExpression}
+            onChange={e => {
+              updateValue(index, 'partialFilterExpression', e.target.value);
+            }}
+            ref={el => assignRef(el, index.id)}
+            aria-label={INPUT_NAME + index.name}
+          />
+        </div>
+        <div className={`${classes.fieldCell} ${classes.commandsContainer}`}>
+          <Commands
+            index={index}
+            indexes={indexes}
+            onDeleteIndex={onDelete}
+            onAddIndex={handleAdd}
+            onMoveDown={onMoveDown}
+            onMoveUp={onMoveUp}
+            isDeleteVisible={isDeleteVisible}
+            labelAddIndex={labelAddIndex}
+          />
+        </div>
+        <div className={classes.fieldCell}></div>
+      </Reorder.Item>
+    </React.Fragment>
+  );
+};
diff --git a/src/pods/manage-index/components/nested-manage-index-grid.tsx b/src/pods/manage-index/components/nested-manage-index-grid.tsx
new file mode 100644
index 00000000..f134a159
--- /dev/null
+++ b/src/pods/manage-index/components/nested-manage-index-grid.tsx
@@ -0,0 +1,87 @@
+import React from 'react';
+import classes from '../manage-index.module.css';
+import { GUID } from '@/core/model';
+import { FieldVm } from '../manage-index.vm';
+
+import { AnimatePresence, Reorder } from 'framer-motion';
+import { Index } from './index';
+
+interface NestedManageIndexGridProps {
+  id?: GUID;
+  indexes: FieldVm[];
+  level: number;
+  expanded: Set<string>;
+  toggleExpand: (fieldId: string) => void;
+  expand: (fieldId: string) => void;
+  updateValue: <K extends keyof FieldVm>(
+    index: FieldVm,
+    id: K,
+    value: FieldVm[K]
+  ) => void;
+  onDelete: (id: GUID) => void;
+  onAdd: (id: GUID) => void;
+  nameInputRefRecord: React.RefObject<Record<string, HTMLInputElement | null>>;
+  onMoveDown: (id: GUID) => void;
+  onMoveUp: (id: GUID) => void;
+  onDrag?: (index: FieldVm[], id?: GUID) => void;
+  isDeleteVisible: boolean;
+  labelAddIndex?: string;
+}
+
+export const NestedManageIndexGrid: React.FC<NestedManageIndexGridProps> = ({
+  id,
+  indexes,
+  level,
+  expanded,
+  toggleExpand,
+  expand,
+  updateValue,
+  onDelete,
+  onAdd,
+  nameInputRefRecord,
+  onMoveDown,
+  onMoveUp,
+  onDrag,
+  isDeleteVisible,
+  labelAddIndex,
+}) => {
+  const variantsGroup = {
+    open: { opacity: 1, height: 'auto' },
+    collapsed: { opacity: 0, height: 0 },
+  };
+  return (
+    <Reorder.Group
+      values={indexes}
+      onReorder={indexes => (onDrag ? onDrag(indexes, id) : null)}
+      className={classes.nestedGrid}
+      key={level}
+      initial="collapsed"
+      animate="open"
+      exit="collapsed"
+      variants={variantsGroup}
+      transition={{ duration: 0.8 }}
+    >
+      <AnimatePresence initial={false}>
+        {indexes.map(item => (
+          <Index
+            key={item.id}
+            index={item}
+            indexes={indexes}
+            expand={expand}
+            expanded={expanded}
+            level={level}
+            onAdd={onAdd}
+            onDelete={onDelete}
+            onMoveDown={onMoveDown}
+            onMoveUp={onMoveUp}
+            toggleExpand={toggleExpand}
+            updateValue={updateValue}
+            nameInputRefRecord={nameInputRefRecord}
+            isDeleteVisible={isDeleteVisible}
+            labelAddIndex={labelAddIndex}
+          />
+        ))}
+      </AnimatePresence>
+    </Reorder.Group>
+  );
+};
diff --git a/src/pods/manage-index/index.ts b/src/pods/manage-index/index.ts
new file mode 100644
index 00000000..09ec1843
--- /dev/null
+++ b/src/pods/manage-index/index.ts
@@ -0,0 +1 @@
+export * from './manage-index.pod';
diff --git a/src/pods/manage-index/manage-index.business.ts b/src/pods/manage-index/manage-index.business.ts
new file mode 100644
index 00000000..d70718ba
--- /dev/null
+++ b/src/pods/manage-index/manage-index.business.ts
@@ -0,0 +1,261 @@
+import { produce } from 'immer';
+import { FieldVm } from './manage-index.vm';
+import { GUID } from '@/core/model';
+import * as editIndexVm from './manage-index.vm';
+import * as canvasVm from '@/core/providers/canvas-schema';
+import {
+  clonify,
+  isEqual,
+  isNullOrWhiteSpace,
+  parseManageIndexFields,
+} from '@/core/functions';
+import { errorHandling, Output } from '@/core/model/errorHandling';
+
+export interface UpdateIndexValueParams<K extends keyof editIndexVm.FieldVm> {
+  indexToUpdate: editIndexVm.FieldVm;
+  key: K;
+  value: editIndexVm.FieldVm[K];
+}
+
+export const updateIndexValueLogic = <K extends keyof editIndexVm.FieldVm>(
+  table: canvasVm.TableVm,
+  params: UpdateIndexValueParams<K>
+) => {
+  return produce(table, draftTable => {
+    const findAndUpdateIndex = (currentTable: canvasVm.TableVm): boolean => {
+      const formerIndex = currentTable.indexes?.find(
+        f => f.id === params.indexToUpdate.id
+      );
+      if (formerIndex) {
+        formerIndex[params.key] = params.value;
+        return true;
+      }
+      if (!currentTable.indexes) currentTable.indexes = [];
+      params.indexToUpdate[params.key] = params.value;
+      currentTable.indexes.push(params.indexToUpdate);
+      return true;
+    };
+
+    findAndUpdateIndex(draftTable);
+  });
+};
+
+export const removeIndex = (
+  table: canvasVm.TableVm,
+  indexId: GUID
+): canvasVm.TableVm => {
+  return produce(table, draftTable => {
+    const remove = (indexes: FieldVm[]): void => {
+      for (let i = 0; i < indexes.length; i++) {
+        if (indexes[i].id === indexId) {
+          indexes.splice(i, 1);
+          return;
+        }
+      }
+    };
+    if (table.indexes) remove(draftTable.indexes as editIndexVm.FieldVm[]);
+  });
+};
+
+export const addIndexLogic = (
+  currentTable: canvasVm.TableVm,
+  indexId: GUID,
+  newFieldId: GUID
+) => {
+  return produce(currentTable, draftTable => {
+    const findAndAddIndex = (indexes: editIndexVm.FieldVm[]): boolean => {
+      const foundIndex = indexes.findIndex(f => f.id === indexId);
+      if (foundIndex != -1) {
+        indexes.splice(
+          foundIndex + 1,
+          0,
+          editIndexVm.createDefaultIndex(currentTable.tableName, newFieldId)
+        );
+        return true;
+      }
+      return false;
+    };
+    if (currentTable.indexes)
+      findAndAddIndex(draftTable.indexes as editIndexVm.FieldVm[]);
+  });
+};
+
+export const moveDown = (
+  table: canvasVm.TableVm,
+  indexId: GUID
+): canvasVm.TableVm => {
+  return produce(table, draftTable => {
+    const _moveDown = (indexes: FieldVm[]): void => {
+      for (let i = 0; i < indexes.length; i++) {
+        const field = indexes[i];
+        if (field.id === indexId && i < indexes.length - 1) {
+          const temp = indexes[i];
+          indexes[i] = indexes[i + 1];
+          indexes[i + 1] = temp;
+          return;
+        }
+      }
+    };
+
+    _moveDown(draftTable.indexes as editIndexVm.FieldVm[]);
+  });
+};
+
+export const moveUp = (
+  table: canvasVm.TableVm,
+  indexId: GUID
+): canvasVm.TableVm => {
+  return produce(table, draftTable => {
+    const _moveUp = (indexes: FieldVm[]): void => {
+      for (let i = 0; i < indexes.length; i++) {
+        const field = indexes[i];
+        if (field.id === indexId && i > 0) {
+          const temp = indexes[i];
+          indexes[i] = indexes[i - 1];
+          indexes[i - 1] = temp;
+          return;
+        }
+      }
+    };
+
+    _moveUp(draftTable.indexes as editIndexVm.FieldVm[]);
+  });
+};
+
+export const findIndex = (
+  indexes: editIndexVm.FieldVm[],
+  id: GUID
+): editIndexVm.FieldVm | undefined => {
+  for (const item of indexes) {
+    if (item.id === id) return item;
+  }
+  return undefined;
+};
+
+//of course this needs unit test
+export const apply = (table: canvasVm.TableVm): Output<canvasVm.TableVm> => {
+  const result: Output<canvasVm.TableVm> = {
+    errorHandling: {
+      isSuccessful: true,
+    },
+  };
+
+  const _table = clonify<canvasVm.TableVm>(table);
+  const errorFound = _table.indexes?.find(
+    x => isNullOrWhiteSpace(x.name) || isNullOrWhiteSpace(x.fieldsString)
+  );
+  if (!_table.indexes || errorFound) {
+    const error = 'Please make sure that you provided the correct info';
+    result.errorHandling.errorMessage = error;
+    result.errorHandling.isSuccessful = false;
+    return result;
+  }
+
+  if (_table.indexes?.length > 0) {
+    for (let i = 0; i < _table.indexes.length; i++) {
+      const item = _table.indexes[i];
+      const fields = parseManageIndexFields(item.fieldsString);
+      _table.indexes[i].fields = [];
+      _table.indexes[i].fields.push(...fields);
+    }
+
+    let error: string = '';
+    _table.indexes.some(elem => {
+      elem.fields.some(fld => {
+        const found = doesColumnExist(table, fld.name);
+        if (!found) {
+          error = `Field name provided(${fld.name}) does not exist in the table schema.`;
+          return true;
+        }
+
+        if (
+          !isNullOrWhiteSpace(fld.orderMethod) &&
+          !isEqual(fld.orderMethod, 'Ascending') &&
+          !isEqual(fld.orderMethod, 'Descending')
+        ) {
+          error = `The order method provided(${fld.orderMethod}) is incorrect.`;
+          return true;
+        }
+      });
+      if (!isNullOrWhiteSpace(error)) return true;
+    });
+
+    if (!isNullOrWhiteSpace(error)) {
+      result.errorHandling.isSuccessful = false;
+      result.errorHandling.errorMessage = error;
+      return result;
+    }
+  }
+
+  result.data = _table;
+
+  return result;
+};
+
+const doesColumnExist = (table: canvasVm.TableVm, searchInput: string) => {
+  const keys = searchInput.split('.');
+  const rootKey = keys[0];
+
+  for (const field of table.fields) {
+    if (field.name === rootKey) {
+      let current = field;
+      for (let i = 1; i < keys.length; i++) {
+        const key = keys[i];
+        if (current.children && Array.isArray(current.children)) {
+          const child = current.children.find(child => child.name === key);
+          if (child) {
+            current = child; // Move deeper into the hierarchy
+          } else {
+            return false; // Column not found at this level
+          }
+        } else {
+          return false; // No children to traverse further
+        }
+      }
+      return true; // Successfully traversed all keys
+    }
+  }
+
+  return false;
+};
+
+export const indexDuplicateNameChecking = (
+  table: canvasVm.TableVm,
+  schema: canvasVm.DatabaseSchemaVm
+): errorHandling => {
+  const result: errorHandling = {
+    isSuccessful: true,
+  };
+
+  // Check the duplicates index name in the current table
+  table.indexes?.some(idx => {
+    const dupFound = table.indexes?.find(
+      x => isEqual(x.name, idx.name) && x.id !== idx.id
+    );
+
+    if (dupFound) {
+      result.errorMessage = `Duplicate index name found in table (${table.tableName}) with index name (${dupFound.name})`;
+      result.isSuccessful = false;
+      return true;
+    }
+  });
+
+  if (!result.isSuccessful) return result;
+
+  // Check the duplicates index name in the whole schema
+  schema.tables.some(tbl => {
+    if (isEqual(tbl.tableName, table.tableName)) return false;
+
+    table.indexes?.some(idx => {
+      const dupFound = tbl.indexes?.find(x => isEqual(x.name, idx.name));
+
+      if (dupFound) {
+        result.errorMessage = `Duplicate index name found in table (${tbl.tableName}) with index name (${dupFound.name})`;
+        result.isSuccessful = false;
+        return true;
+      }
+    });
+  });
+
+  return result;
+};
diff --git a/src/pods/manage-index/manage-index.component.tsx b/src/pods/manage-index/manage-index.component.tsx
new file mode 100644
index 00000000..116ba7c3
--- /dev/null
+++ b/src/pods/manage-index/manage-index.component.tsx
@@ -0,0 +1,106 @@
+import React, { useState } from 'react';
+import classes from './manage-index.module.css';
+import { createDefaultIndex, FieldVm } from './manage-index.vm';
+import { GUID } from '@/core/model';
+import { useInputRefFocus } from './use-input-focus.hook';
+import { TableVm } from '@/core/providers';
+import { NestedManageIndexGrid } from './components/nested-manage-index-grid';
+
+interface Props {
+  table: TableVm;
+  updateValue: <K extends keyof FieldVm>(
+    field: FieldVm,
+    id: K,
+    value: FieldVm[K]
+  ) => void;
+  onDelete: (id: GUID) => void;
+  onAdd: (id: GUID, newIndexId: GUID) => void;
+  onMoveDown: (id: GUID) => void;
+  onMoveUp: (id: GUID) => void;
+  onDrag?: (index: FieldVm[], id?: GUID) => void;
+}
+
+export const ManageIndexComponent: React.FC<Props> = props => {
+  const { table, updateValue, onDelete, onAdd, onMoveDown, onMoveUp, onDrag } =
+    props;
+
+  const { handleAdd, nameInputRefRecord } = useInputRefFocus(onAdd);
+
+  const [expanded, setExpanded] = useState<Set<string>>(new Set());
+
+  const expand = (indexId: GUID) => {
+    setExpanded(prev => {
+      const newExpanded = new Set(prev);
+      if (!newExpanded.has(indexId)) {
+        newExpanded.add(indexId);
+      }
+      return newExpanded;
+    });
+  };
+
+  const toggleExpand = (indexId: GUID) => {
+    setExpanded(prev => {
+      const newExpanded = new Set(prev);
+      if (newExpanded.has(indexId)) {
+        newExpanded.delete(indexId);
+      } else {
+        newExpanded.add(indexId);
+      }
+      return newExpanded;
+    });
+  };
+
+  return (
+    <>
+      <div className={classes.tableName}>
+        <label>Collection: {table.tableName}</label>
+      </div>
+
+      <div className={classes.tableName}>
+        Instructions:
+        <li>
+          Please note that the Fields column should be provided as the
+          following. FieldName1 (Ascending/Descending: optional), FieldName2
+          (Ascending/Descending: optional). The comma separator is needed if
+          more than one field is needed
+        </li>
+        <li>
+          Partial Filter Expression: has to be provided without the initial{' '}
+          {'{}'}. Example= {`email: { $exists: true, $ne: null }`}
+        </li>
+      </div>
+
+      <div className={classes.tableEditor}>
+        <div className={classes.headerRow}>
+          <div className={classes.headerCell}>Name</div>
+          <div className={classes.headerCell}>Fields</div>
+          <div className={classes.headerCell}>Unique</div>
+          <div className={classes.headerCell}>Sparse</div>
+          <div className={classes.headerCell}>Partial Filter Expression</div>
+          <div className={classes.headerCell}>Actions</div>
+          <div className={classes.headerCell}></div>
+        </div>
+
+        <NestedManageIndexGrid
+          indexes={
+            (!table.indexes || table.indexes?.length === 0
+              ? [createDefaultIndex(table.tableName)]
+              : table.indexes) as FieldVm[]
+          }
+          level={0}
+          expanded={expanded}
+          toggleExpand={toggleExpand}
+          expand={expand}
+          updateValue={updateValue}
+          onDelete={onDelete}
+          onAdd={handleAdd}
+          onMoveDown={onMoveDown}
+          onMoveUp={onMoveUp}
+          onDrag={onDrag}
+          nameInputRefRecord={nameInputRefRecord}
+          isDeleteVisible={table.fields?.length !== 1}
+        />
+      </div>
+    </>
+  );
+};
diff --git a/src/pods/manage-index/manage-index.module.css b/src/pods/manage-index/manage-index.module.css
new file mode 100644
index 00000000..0b659053
--- /dev/null
+++ b/src/pods/manage-index/manage-index.module.css
@@ -0,0 +1,222 @@
+.tableEditor {
+  display: grid;
+  grid-template-columns: auto 60px 60px 150px 80px 60px 250px;
+  margin: var(--space-md);
+  margin-top: 0;
+  min-width: 800px;
+}
+.tableEditor ul {
+  padding: 0;
+  margin: 0;
+}
+
+.fieldRow,
+.header-row {
+  display: grid;
+  grid-template-columns: auto 60px 60px 150px 80px 60px 250px;
+  grid-column: 1 / -1;
+  border: 1px solid var(--secondary-border-color);
+  border-top-width: 0.5px;
+  border-bottom-width: 0.5px;
+  background-color: var(--background-dialog);
+}
+
+.nestedGrid ul li:last-child {
+  border-bottom: 0.5px solid var(--secondary-border-color);
+}
+
+.tableEditor > ul > li:last-child {
+  border-bottom: 1px solid var(--secondary-border-color);
+  border-bottom-left-radius: var(--border-radius-table);
+  border-bottom-right-radius: var(--border-radius-table);
+}
+
+.tableEditor > ul > li:first-child {
+  border-top: none;
+}
+
+.nestedGrid {
+  display: grid;
+  grid-template-columns: auto 60px 60px 150px 80px 60px 250px;
+  grid-column: 1 / -1;
+}
+.content {
+  display: grid;
+  grid-column: 1 / -1;
+  grid-template-columns: auto 60px 60px 150px 80px 60px 250px;
+  transform-origin: top center;
+}
+.fieldCell,
+.headerCell {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-cells);
+}
+
+.fieldCell + .fieldCell,
+.headerCell + .headerCell {
+  border-left: 1px solid var(--secondary-border-color);
+}
+
+.headerCell {
+  padding: var(--space-xs) 5px;
+  background-color: var(--edit-table-header);
+  color: var(--text-white);
+  border-top: 1px solid var(--secondary-border-color);
+  border-bottom: 1px solid var(--secondary-border-color);
+}
+
+.commands-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  gap: 10px;
+}
+
+.expandCell {
+  display: flex;
+  width: 100%;
+  gap: 5px;
+}
+
+@supports (grid-template-columns: subgrid) {
+  .tableEditor {
+    grid-template-columns: repeat(7, auto);
+  }
+  .fieldRow,
+  .header-row,
+  .nestedGrid {
+    grid-template-columns: subgrid;
+  }
+  .expandCell {
+    min-width: 300px;
+  }
+
+  .content {
+    grid-template-columns: subgrid;
+  }
+}
+
+/* TODO: this solution is not ideal, we would need to add more indent levels */
+/* #59 */
+/* https://github.com/Lemoncode/mongo-modeler/issues/59 */
+.indent0 {
+  padding-left: 5px;
+}
+.indent1 {
+  padding-left: var(--padding-table);
+}
+.indent2 {
+  padding-left: calc(var(--padding-table) * 2);
+}
+.indent3 {
+  padding-left: calc(var(--padding-table) * 3);
+}
+.indent4 {
+  padding-left: calc(var(--padding-table) * 4);
+}
+
+.indent5 {
+  padding-left: calc(var(--padding-table) * 5);
+}
+.indent6 {
+  padding-left: calc(var(--padding-table) * 6);
+}
+.indent7 {
+  padding-left: calc(var(--padding-table) * 7);
+}
+.indent8 {
+  padding-left: calc(var(--padding-table) * 8);
+}
+.indent9 {
+  padding-left: calc(var(--padding-table) * 9);
+}
+.indent10 {
+  padding-left: calc(var(--padding-table) * 10);
+}
+
+/*The top position of the two position sticky's are 
+related to each other and to the dialog header*/
+.header-row {
+  position: sticky;
+  top: 7.1rem;
+  z-index: 1;
+  border: none;
+  border-radius: 0px;
+  padding-top: var(--space-md);
+}
+
+.header-row .headerCell:first-child {
+  border-top-left-radius: var(--border-radius-table);
+  border-left: 1px solid var(--secondary-border-color);
+}
+
+.header-row .headerCell:last-child {
+  border-top-right-radius: var(--border-radius-table);
+  border-right: 1px solid var(--secondary-border-color);
+}
+
+.table-name {
+  background-color: var(--background-dialog);
+  position: sticky;
+  top: 3rem;
+  left: 0px;
+  padding-top: var(--space-md);
+  padding-bottom: var(--space-md);
+  z-index: 2;
+  text-align: left;
+  border-bottom: 1px solid var(--primary-border-color);
+}
+
+.table-name label {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+}
+
+.table-name input {
+  max-width: 190px;
+}
+
+.fieldCell button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.4em 0.6em;
+  font-size: var(--fs-m);
+  min-width: 38px;
+  min-height: 31px;
+}
+
+.input-name {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.button-space {
+  padding: 0.4em 0.6em;
+  font-size: var(--fs-m);
+  min-width: 30px;
+  min-height: 30px;
+}
+
+.expandCell button {
+  padding: 3px;
+  min-width: 30px;
+  min-height: 30px;
+}
+
+.fieldCell .drag-button {
+  cursor: grab;
+  padding: 3px;
+  min-width: 30px;
+  min-height: 30px;
+}
+.drag-button svg {
+  pointer-events: none;
+}
diff --git a/src/pods/manage-index/manage-index.pod.tsx b/src/pods/manage-index/manage-index.pod.tsx
new file mode 100644
index 00000000..3b83f89e
--- /dev/null
+++ b/src/pods/manage-index/manage-index.pod.tsx
@@ -0,0 +1,91 @@
+import React from 'react';
+import * as canvasVm from '@/core/providers/canvas-schema';
+import * as editIndexVm from './manage-index.vm';
+import { ManageIndexComponent } from './manage-index.component';
+import { GUID } from '@/core/model';
+import {
+  addIndexLogic,
+  moveDown,
+  moveUp,
+  removeIndex,
+  apply,
+  updateIndexValueLogic,
+} from './manage-index.business';
+
+interface Props {
+  table: canvasVm.TableVm;
+  onSave: (table: canvasVm.TableVm) => void;
+  onClose: () => void;
+}
+
+export const ManageIndexPod: React.FC<Props> = props => {
+  const { table, onSave, onClose } = props;
+
+  const [editTableIndex, setEditTableIndex] =
+    React.useState<canvasVm.TableVm>(table);
+
+  const handleSubmit = (table: canvasVm.TableVm) => {
+    const saveResult = apply(table);
+    if (!saveResult.errorHandling.isSuccessful) {
+      alert(saveResult.errorHandling.errorMessage);
+      return;
+    }
+    onSave(saveResult.data ?? table);
+  };
+
+  const updateValue = <K extends keyof editIndexVm.FieldVm>(
+    indexToUpdate: editIndexVm.FieldVm,
+    key: K,
+    value: editIndexVm.FieldVm[K]
+  ) => {
+    setEditTableIndex(currentTable =>
+      updateIndexValueLogic(currentTable, {
+        indexToUpdate: indexToUpdate as editIndexVm.FieldVm,
+        key,
+        value,
+      })
+    );
+  };
+
+  const onDelete = (indexId: GUID) => {
+    setEditTableIndex(currentTable => removeIndex(currentTable, indexId));
+  };
+
+  const onAdd = (indexId: GUID, newIndexId: GUID) => {
+    setEditTableIndex(currentTable =>
+      addIndexLogic(currentTable, indexId, newIndexId)
+    );
+  };
+
+  const onMoveDown = (id: GUID) => {
+    setEditTableIndex(currentTable => moveDown(currentTable, id));
+  };
+
+  const onMoveUp = (id: GUID) => {
+    setEditTableIndex(currentTable => moveUp(currentTable, id));
+  };
+
+  return (
+    <>
+      <ManageIndexComponent
+        table={editTableIndex}
+        updateValue={updateValue}
+        onDelete={onDelete}
+        onAdd={onAdd}
+        onMoveDown={onMoveDown}
+        onMoveUp={onMoveUp}
+      />
+      <div className="two-buttons">
+        <button
+          className="button-secondary"
+          onClick={() => handleSubmit(editTableIndex)}
+        >
+          Apply
+        </button>
+        <button className="button-tertiary" onClick={onClose}>
+          Cancel
+        </button>
+      </div>
+    </>
+  );
+};
diff --git a/src/pods/manage-index/manage-index.vm.ts b/src/pods/manage-index/manage-index.vm.ts
new file mode 100644
index 00000000..054cbf28
--- /dev/null
+++ b/src/pods/manage-index/manage-index.vm.ts
@@ -0,0 +1,24 @@
+import { GUID, GenerateGUID } from '@/core/model';
+import { IndexField } from '@/core/providers';
+
+export interface FieldVm {
+  id: GUID;
+  name: string;
+  isUnique: boolean;
+  sparse: boolean;
+  fields: IndexField[];
+  fieldsString?: string;
+  partialFilterExpression?: string;
+}
+
+export const createDefaultIndex = (
+  tableName: string,
+  guid?: GUID
+): FieldVm => ({
+  id: guid ? guid : GenerateGUID(),
+  name: `${tableName}_idx_newIndex`,
+  isUnique: false,
+  sparse: false,
+  fields: [],
+  fieldsString: '',
+});
diff --git a/src/pods/manage-index/use-input-focus.hook.ts b/src/pods/manage-index/use-input-focus.hook.ts
new file mode 100644
index 00000000..968febce
--- /dev/null
+++ b/src/pods/manage-index/use-input-focus.hook.ts
@@ -0,0 +1,28 @@
+import { GUID, GenerateGUID } from '@/core/model';
+import React from 'react';
+
+export const useInputRefFocus = (
+  onAdd: (id: GUID, newIndexId: GUID) => void
+) => {
+  const nameInputRefRecord = React.useRef<Record<string, HTMLInputElement>>({});
+
+  const [newIndexId, setNewIndexId] = React.useState<GUID>('');
+
+  const handleAdd = (id: GUID) => {
+    const newIndexId = GenerateGUID();
+    setNewIndexId(newIndexId);
+    onAdd(id, newIndexId);
+  };
+
+  React.useEffect(() => {
+    const input = nameInputRefRecord.current[newIndexId];
+
+    if (input) {
+      input.focus();
+      input.select();
+      setNewIndexId('');
+    }
+  }, [newIndexId, nameInputRefRecord.current]);
+
+  return { handleAdd, nameInputRefRecord };
+};
diff --git a/src/pods/toolbar/components/export-button/export-button.business.spec.ts b/src/pods/toolbar/components/export-button/export-button.business.spec.ts
index 5aaf06d5..0f8d667c 100644
--- a/src/pods/toolbar/components/export-button/export-button.business.spec.ts
+++ b/src/pods/toolbar/components/export-button/export-button.business.spec.ts
@@ -2069,6 +2069,20 @@ describe('getSchemaScriptFromTableVm', () => {
         { id: 'id2', PK: false, name: 'field2', type: 'decimal', isNN: false },
         { id: 'id3', PK: false, name: 'field3', type: 'bool', isNN: true },
       ],
+      indexes: [
+        {
+          id: 'id_1',
+          name: 'idx_Table_01',
+          isUnique: false,
+          sparse: false,
+          fields: [
+            {
+              name: 'field1',
+              orderMethod: 'Ascending',
+            },
+          ],
+        },
+      ],
     };
     //Act
     const result = getSchemaScriptFromTableVm(table);
@@ -2087,9 +2101,17 @@ describe('getSchemaScriptFromTableVm', () => {
       },
     },
   },
-});`;
-
-    expect(result).toEqual(expectedScript);
+});
+db.Table.createIndex(
+      { "field1": 1 }, 
+      { name: "idx_Table_01",
+        unique:false,
+        sparse:false,
+      });`
+      .replace(/ /g, '')
+      .replace(/\n/g, '');
+
+    expect(result.replace(/ /g, '').replace(/\n/g, '')).toEqual(expectedScript);
   });
 });
 
@@ -2112,6 +2134,20 @@ describe('getSchemaScriptFromTableVmArray', () => {
             isNN: false,
           },
         ],
+        indexes: [
+          {
+            id: 'id_1',
+            name: 'idx_Table_01',
+            isUnique: false,
+            sparse: false,
+            fields: [
+              {
+                name: 'field3',
+                orderMethod: 'Ascending',
+              },
+            ],
+          },
+        ],
       },
       {
         id: 'tableId3',
@@ -2149,6 +2185,13 @@ describe('getSchemaScriptFromTableVmArray', () => {
   },
 });
 
+db.Table.createIndex(
+      { "field3": 1 }, 
+      { name: "idx_Table_01",
+        unique:false,
+        sparse:false,
+      });
+
 db.createCollection("Table1", {
   validator: {
     $jsonSchema: {
@@ -2161,8 +2204,10 @@ db.createCollection("Table1", {
       },
     },
   },
-});`;
+});`
+      .replace(/ /g, '')
+      .replace(/\n/g, '');
 
-    expect(result).toEqual(expectedScript);
+    expect(result.replace(/ /g, '').replace(/\n/g, '')).toEqual(expectedScript);
   });
 });
diff --git a/src/pods/toolbar/components/export-button/export-button.business.ts b/src/pods/toolbar/components/export-button/export-button.business.ts
index 4d45e168..9e89f457 100644
--- a/src/pods/toolbar/components/export-button/export-button.business.ts
+++ b/src/pods/toolbar/components/export-button/export-button.business.ts
@@ -1,5 +1,6 @@
 import { FieldVm, TableVm, TABLE_CONST } from '@/core/providers';
 import { doTablesOverlap } from './export-coordinate.helpers';
+import { isNullOrWhiteSpace } from '@/core/functions';
 
 export const getMaxPositionXFromTables = (tables: TableVm[]): number =>
   tables.length === 0 ? 0 : Math.max(...tables.map(table => table.x));
@@ -77,10 +78,10 @@ export const placeTableWithoutOverlap = (
 };
 
 export const placeAllTablesWithoutOverlap = (tables: TableVm[]): TableVm[] => {
-  let placedTables: TableVm[] = [];
+  const placedTables: TableVm[] = [];
 
-  for (let table of tables) {
-    let newTable = placeTableWithoutOverlap(table, placedTables);
+  for (const table of tables) {
+    const newTable = placeTableWithoutOverlap(table, placedTables);
     placedTables.push(newTable);
   }
 
@@ -116,7 +117,10 @@ export const getPropertyJsonSchema = (field: FieldVm): string => {
   return `"${field.name}": { bsonType: "${field.type}" }`;
 };
 
-export const getPropertiesJsonSchema = (fields: FieldVm[], useTab = true): string => {
+export const getPropertiesJsonSchema = (
+  fields: FieldVm[],
+  useTab = true
+): string => {
   const separator = useTab ? ',\n        ' : ', ';
   return fields.map(getPropertyJsonSchema).join(separator);
 };
@@ -141,11 +145,47 @@ export const getSchemaScriptFromTableVm = (table: TableVm): string => {
       },
     },
   },
-});`;
+  });`;
 
-  return schemaScript;
+  const createIndexes: string = generateIndexScript(table);
+
+  return `${schemaScript}${!isNullOrWhiteSpace(createIndexes) ? `\n${createIndexes}` : ''}`;
 };
 
+const generateIndexScript = (table: TableVm): string => {
+  let createIndexes: string = '';
+  if (table.indexes && table.indexes?.length > 0) {
+    const t = table.indexes.map(idx => {
+      const fields = idx.fields
+        .map(item => {
+          let oM: string = '';
+          switch (item.orderMethod.toLowerCase()) {
+            case 'ascending':
+              oM = ':1';
+              break;
+            case 'descending':
+              oM = ':-1';
+              break;
+            default:
+              oM = ':1';
+          }
+          return `"${item.name}" ${oM}`;
+        })
+        .join(', ');
+
+      return `db.${table.tableName}.createIndex(
+        { ${fields} }, 
+        {
+          name: "${idx.name}",
+          unique:${idx.isUnique ? 'true' : 'false'},
+          sparse:${idx.sparse ? 'true' : 'false'},
+          ${isNullOrWhiteSpace(idx.partialFilterExpression) ? '' : `partialFilterExpression:{${idx.partialFilterExpression}}`}
+        });`;
+    });
+    createIndexes = t.join(';\n');
+  }
+  return createIndexes;
+};
 export const getSchemaScriptFromTableVmArray = (tables: TableVm[]): string => {
   return tables.map(getSchemaScriptFromTableVm).join('\n\n');
 };