diff --git a/src/pages/editor-page/canvas/table-node/table-edit-mode/table-edit-mode-field.tsx b/src/pages/editor-page/canvas/table-node/table-edit-mode/table-edit-mode-field.tsx
index 5f9c674b..3b604127 100644
--- a/src/pages/editor-page/canvas/table-node/table-edit-mode/table-edit-mode-field.tsx
+++ b/src/pages/editor-page/canvas/table-node/table-edit-mode/table-edit-mode-field.tsx
@@ -162,7 +162,7 @@ export const TableEditModeField: React.FC<TableEditModeFieldProps> = React.memo(
                             </span>
                         </TooltipTrigger>
                         <TooltipContent>
-                            {t('side_panel.tables_section.table.nullable')}
+                            {nullable ? 'Null' : 'Not Null'}
                         </TooltipContent>
                     </Tooltip>
                     <Tooltip>
diff --git a/src/pages/editor-page/canvas/table-node/table-edit-mode/table-field-toggle.tsx b/src/pages/editor-page/canvas/table-node/table-edit-mode/table-field-toggle.tsx
index 0e2d34db..f248c88d 100644
--- a/src/pages/editor-page/canvas/table-node/table-edit-mode/table-field-toggle.tsx
+++ b/src/pages/editor-page/canvas/table-node/table-edit-mode/table-field-toggle.tsx
@@ -1,16 +1,21 @@
 import React from 'react';
 import { Toggle } from '@/components/toggle/toggle';
+import { cn } from '@/lib/utils';
 
 export const TableFieldToggle = React.forwardRef<
     React.ElementRef<typeof Toggle>,
     React.ComponentPropsWithoutRef<typeof Toggle>
->((props, ref) => {
+>(({ className, ...props }, ref) => {
     return (
         <Toggle
             {...props}
             ref={ref}
             variant="default"
-            className="h-8 w-[32px] p-2 text-xs text-slate-500 hover:bg-primary-foreground hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
+            className={cn(
+                'h-8 w-[32px] p-2 text-xs text-slate-500 hover:bg-primary-foreground hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200',
+                'data-[state=on]:text-orange-600 dark:data-[state=on]:text-orange-400',
+                className
+            )}
         />
     );
 });
diff --git a/src/pages/editor-page/side-panel/tables-section/table-list/table-list-item/table-list-item-content/table-field/table-field-toggle.tsx b/src/pages/editor-page/side-panel/tables-section/table-list/table-list-item/table-list-item-content/table-field/table-field-toggle.tsx
index 0e2d34db..f248c88d 100644
--- a/src/pages/editor-page/side-panel/tables-section/table-list/table-list-item/table-list-item-content/table-field/table-field-toggle.tsx
+++ b/src/pages/editor-page/side-panel/tables-section/table-list/table-list-item/table-list-item-content/table-field/table-field-toggle.tsx
@@ -1,16 +1,21 @@
 import React from 'react';
 import { Toggle } from '@/components/toggle/toggle';
+import { cn } from '@/lib/utils';
 
 export const TableFieldToggle = React.forwardRef<
     React.ElementRef<typeof Toggle>,
     React.ComponentPropsWithoutRef<typeof Toggle>
->((props, ref) => {
+>(({ className, ...props }, ref) => {
     return (
         <Toggle
             {...props}
             ref={ref}
             variant="default"
-            className="h-8 w-[32px] p-2 text-xs text-slate-500 hover:bg-primary-foreground hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
+            className={cn(
+                'h-8 w-[32px] p-2 text-xs text-slate-500 hover:bg-primary-foreground hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200',
+                'data-[state=on]:text-orange-600 dark:data-[state=on]:text-orange-400',
+                className
+            )}
         />
     );
 });
diff --git a/src/pages/editor-page/side-panel/tables-section/table-list/table-list-item/table-list-item-content/table-field/table-field.tsx b/src/pages/editor-page/side-panel/tables-section/table-list/table-list-item/table-list-item-content/table-field/table-field.tsx
index 2d6f3d8d..2ee0a439 100644
--- a/src/pages/editor-page/side-panel/tables-section/table-list/table-list-item/table-list-item-content/table-field/table-field.tsx
+++ b/src/pages/editor-page/side-panel/tables-section/table-list/table-list-item/table-list-item-content/table-field/table-field.tsx
@@ -165,7 +165,7 @@ export const TableField: React.FC<TableFieldProps> = ({
                         </span>
                     </TooltipTrigger>
                     <TooltipContent>
-                        {t('side_panel.tables_section.table.nullable')}
+                        {nullable ? 'Null' : 'Not Null'}
                     </TooltipContent>
                 </Tooltip>
                 <Tooltip>