diff --git a/frontend/src/Editor/Components/Table/Table.jsx b/frontend/src/Editor/Components/Table/Table.jsx
index e7bb9e5f51..444e011596 100644
--- a/frontend/src/Editor/Components/Table/Table.jsx
+++ b/frontend/src/Editor/Components/Table/Table.jsx
@@ -382,6 +382,7 @@ export function Table({
               <Toggle
                 value={cellValue}
                 readOnly={!column.isEditable}
+                activeColor={column.activeColor}
                 onChange={(value) => {
                   handleCellValueChange(cell.row.index, column.key || column.name, value, cell.row.original);
                 }}
diff --git a/frontend/src/Editor/Components/Table/Toggle.jsx b/frontend/src/Editor/Components/Table/Toggle.jsx
index f80d098f19..4f47c1b7e7 100644
--- a/frontend/src/Editor/Components/Table/Toggle.jsx
+++ b/frontend/src/Editor/Components/Table/Toggle.jsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-export const Toggle = ({readOnly, value, onChange, options }) => {
+export const Toggle = ({readOnly, value, onChange, activeColor, options }) => {
   const [on, setOn] = useState(() => value)
 
   const toggle = () => {
@@ -16,6 +16,7 @@ export const Toggle = ({readOnly, value, onChange, options }) => {
               className="form-check-input"
               type="checkbox"
               checked={on}
+              style={{ backgroundColor: activeColor}}
               onClick={() => {if(!readOnly) toggle()}}
             />
         </label>
diff --git a/frontend/src/Editor/Inspector/Components/Table.jsx b/frontend/src/Editor/Inspector/Components/Table.jsx
index 1dc45e4855..c9d7fb3895 100644
--- a/frontend/src/Editor/Inspector/Components/Table.jsx
+++ b/frontend/src/Editor/Inspector/Components/Table.jsx
@@ -97,7 +97,7 @@ class Table extends React.Component {
 
   columnPopover = (column, index) => {
     return (
-      <Popover id="popover-basic-2">
+      <Popover id="popover-basic-2" className="shadow">
         <Popover.Content>
           <div className="field mb-2">
             <label className="form-label">Column type</label>
@@ -146,10 +146,25 @@ class Table extends React.Component {
                 e.stopPropagation();
                 this.onColumnItemChange(index, 'key', e.target.value);
               }}
+              placeholder={column.name}
               defaultValue={column.key}
             />
           </div>
 
+          {true && 
+            <div>
+              <div className="field mb-2">
+                <Color
+                  param={{ name: 'Active color' }}
+                  paramType="properties"
+                  componentMeta={{ properties: { color: { displayName: 'Active color'} } }}
+                  definition={{ value: column.activeColor || '#3c92dc' }}
+                  onChange={(name, value, color) => this.onColumnItemChange(index, 'activeColor', color)}
+                />
+              </div>
+            </div>
+          }
+
           {(column.columnType === 'dropdown' || column.columnType === 'multiselect' || column.columnType === 'badge' || column.columnType === 'badges' || column.columnType === 'radio') && (
             <div>
               <div className="field mb-2">