diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/grid/Grid/Grid.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/grid/Grid/Grid.tsx
index 3bf7bde69d..aae233abf7 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/grid/Grid/Grid.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/grid/Grid/Grid.tsx
@@ -34,7 +34,7 @@ export const Grid = ({ viewId }: { viewId: string }) => {
             {/* table component view with text area for td */}
             <div className='flex flex-col gap-4'>
               <table className='w-full table-fixed text-sm'>
-                <GridTableHeader />
+                <GridTableHeader controller={controller} />
                 <GridTableRows onOpenRow={onOpenRow} allRows={rows} viewId={viewId} controller={controller} />
               </table>
 
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableHeader/GridTableHeader.hooks.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableHeader/GridTableHeader.hooks.tsx
index a2db70852d..f88e00b188 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableHeader/GridTableHeader.hooks.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableHeader/GridTableHeader.hooks.tsx
@@ -1,23 +1,15 @@
-import { nanoid } from 'nanoid';
-import { FieldType } from '@/services/backend/models/flowy-database/field_entities';
-import { gridActions } from '../../../stores/reducers/grid/slice';
-import { useAppDispatch, useAppSelector } from '../../../stores/store';
+import { useAppSelector } from '../../../stores/store';
+import { DatabaseController } from '@/appflowy_app/stores/effects/database/database_controller';
+import { TypeOptionController } from '@/appflowy_app/stores/effects/database/field/type_option/type_option_controller';
+import { None } from 'ts-results';
 
-export const useGridTableHeaderHooks = function () {
-  const dispatch = useAppDispatch();
+export const useGridTableHeaderHooks = function (controller: DatabaseController) {
   const database = useAppSelector((state) => state.database);
 
-  const onAddField = () => {
-    dispatch(
-      gridActions.addField({
-        field: {
-          fieldId: nanoid(8),
-          name: 'Name',
-          fieldOptions: {},
-          fieldType: FieldType.RichText,
-        },
-      })
-    );
+  const onAddField = async () => {
+    // TODO: move this to database controller hook
+    const fieldController = new TypeOptionController(controller.viewId, None);
+    await fieldController.initialize();
   };
 
   return {
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableHeader/GridTableHeader.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableHeader/GridTableHeader.tsx
index e91c541d48..9293f6cd32 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableHeader/GridTableHeader.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableHeader/GridTableHeader.tsx
@@ -8,15 +8,19 @@ import { MultiSelectTypeSvg } from '../../_shared/svg/MultiSelectTypeSvg';
 import { ChecklistTypeSvg } from '../../_shared/svg/ChecklistTypeSvg';
 import { UrlTypeSvg } from '../../_shared/svg/UrlTypeSvg';
 import { FieldType } from '@/services/backend/models/flowy-database/field_entities';
+import { DatabaseController } from '@/appflowy_app/stores/effects/database/database_controller';
+import { useTranslation } from 'react-i18next';
 
-export const GridTableHeader = () => {
-  const { fields, onAddField } = useGridTableHeaderHooks();
+export const GridTableHeader = ({ controller }: { controller: DatabaseController }) => {
+  const { fields, onAddField } = useGridTableHeaderHooks(controller);
+
+  const { t } = useTranslation('');
 
   return (
     <>
       <thead>
         <tr>
-          {fields.map((field, i) => {
+          {fields.map((field) => {
             return (
               <th key={field.fieldId} className='m-0 border border-l-0 border-shade-6 p-0'>
                 <div className={'flex cursor-pointer items-center px-4 py-2 hover:bg-main-secondary'}>
@@ -44,7 +48,7 @@ export const GridTableHeader = () => {
               <i className='mr-2 h-5 w-5'>
                 <AddSvg />
               </i>
-              <span>New column</span>
+              <span>{t('grid.field.newColumn')}</span>
             </div>
           </th>
         </tr>
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableRows/GridAddRow.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableRows/GridAddRow.tsx
index ad55a67b31..f50898c9e7 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableRows/GridAddRow.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridTableRows/GridAddRow.tsx
@@ -1,8 +1,10 @@
 import { DatabaseController } from '@/appflowy_app/stores/effects/database/database_controller';
 import AddSvg from '../../_shared/svg/AddSvg';
 import { useGridAddRow } from './GridAddRow.hooks';
+import { useTranslation } from 'react-i18next';
 export const GridAddRow = ({ controller }: { controller: DatabaseController }) => {
   const { addRow } = useGridAddRow(controller);
+  const { t } = useTranslation('');
 
   return (
     <div>
@@ -10,7 +12,7 @@ export const GridAddRow = ({ controller }: { controller: DatabaseController }) =
         <i className='mr-2 h-5 w-5'>
           <AddSvg />
         </i>
-        <span>New row</span>
+        <span>{t('grid.row.newRow')}</span>
       </button>
     </div>
   );