diff --git a/api/src/Kurs.Platform.Application.Contracts/Charts/Dto/ChartDto.cs b/api/src/Kurs.Platform.Application.Contracts/Charts/Dto/ChartDto.cs
index 47d02202..ff96da40 100644
--- a/api/src/Kurs.Platform.Application.Contracts/Charts/Dto/ChartDto.cs
+++ b/api/src/Kurs.Platform.Application.Contracts/Charts/Dto/ChartDto.cs
@@ -9,6 +9,8 @@ namespace Kurs.Platform.Charts.Dto
 {
     public class ChartEditDto : ChartDto
     {
+        public string EditType { get; set; }
+
         /// <summary> Chart'a ait sorguların tutulduğu Json veri yapısı
         /// </summary>
         [JsonIgnore]
diff --git a/api/src/Kurs.Platform.Application.Contracts/ListForms/GridOptionsDto/GridColumnOptionDto.cs b/api/src/Kurs.Platform.Application.Contracts/ListForms/GridOptionsDto/GridColumnOptionDto.cs
index 28a530a1..e70a6922 100644
--- a/api/src/Kurs.Platform.Application.Contracts/ListForms/GridOptionsDto/GridColumnOptionDto.cs
+++ b/api/src/Kurs.Platform.Application.Contracts/ListForms/GridOptionsDto/GridColumnOptionDto.cs
@@ -32,20 +32,4 @@ public class GridColumnOptionDto
     public bool ColumnHidingEnabled { get; set; } = false;
     public bool FocusedRowEnabled { get; set; } = false;
     public bool ShowColumnHeaders { get; set; } = true;
-
-    /// <summary> pivot grid için eklenmiş sütunlardır. 
-    /// </summary>
-    public bool AllowFieldDragging { get; set; } = true;
-    public bool ShowFieldPanel { get; set; } = true;
-    public bool ShowDataFields { get; set; } = true;
-    public bool ShowColumnFields { get; set; } = true;
-    public bool ShowRowFields { get; set; } = true;
-    public bool ShowFilterFields { get; set; } = true;
-
-    /// <summary> pivot grid üzerinde küçük Chart özellikleri
-    /// </summary>
-    public bool ShowChart { get; set; } = false;
-    public int ChartHeight { get; set; } = 320;
-    public string ChartCommonSeriesType { get; set; } = "bar";
-
 }
diff --git a/api/src/Kurs.Platform.Application.Contracts/ListForms/GridOptionsDto/GridOptionsDto.cs b/api/src/Kurs.Platform.Application.Contracts/ListForms/GridOptionsDto/GridOptionsDto.cs
index d9f36506..f1d81338 100644
--- a/api/src/Kurs.Platform.Application.Contracts/ListForms/GridOptionsDto/GridOptionsDto.cs
+++ b/api/src/Kurs.Platform.Application.Contracts/ListForms/GridOptionsDto/GridOptionsDto.cs
@@ -122,6 +122,19 @@ public class GridOptionsDto : AuditedEntityDto<Guid>
         set { ColumnOptionJson = JsonSerializer.Serialize(value); }
     }
 
+    [JsonIgnore]
+    public string PivotOptionJson { get; set; }
+    public GridPivotOptionDto PivotOptionDto
+    {
+        get
+        {
+            if (!string.IsNullOrEmpty(PivotOptionJson))
+                return JsonSerializer.Deserialize<GridPivotOptionDto>(PivotOptionJson);
+            return new GridPivotOptionDto();
+        }
+        set { PivotOptionJson = JsonSerializer.Serialize(value); }
+    }
+
     [JsonIgnore]
     public string PagerOptionJson { get; set; }
     public GridPagerOptionDto PagerOptionDto
diff --git a/api/src/Kurs.Platform.Application.Contracts/ListForms/GridOptionsDto/GridPivotOptionDto.cs b/api/src/Kurs.Platform.Application.Contracts/ListForms/GridOptionsDto/GridPivotOptionDto.cs
new file mode 100644
index 00000000..ca316fa6
--- /dev/null
+++ b/api/src/Kurs.Platform.Application.Contracts/ListForms/GridOptionsDto/GridPivotOptionDto.cs
@@ -0,0 +1,20 @@
+namespace Kurs.Platform.ListForms;
+
+public class GridPivotOptionDto
+{
+    /// <summary> pivot grid için eklenmiş sütunlardır. 
+    /// </summary>
+    public bool AllowFieldDragging { get; set; } = true;
+    public bool ShowFieldPanel { get; set; } = true;
+    public bool ShowDataFields { get; set; } = true;
+    public bool ShowColumnFields { get; set; } = true;
+    public bool ShowRowFields { get; set; } = true;
+    public bool ShowFilterFields { get; set; } = true;
+
+    /// <summary> pivot grid üzerinde küçük Chart özellikleri
+    /// </summary>
+    public bool ShowChart { get; set; } = false;
+    public int ChartHeight { get; set; } = 320;
+    public string ChartCommonSeriesType { get; set; } = "bar";
+
+}
diff --git a/api/src/Kurs.Platform.Application.Contracts/ListForms/ListFormEditTabs.cs b/api/src/Kurs.Platform.Application.Contracts/ListForms/ListFormEditTabs.cs
index e0f5d957..111de440 100644
--- a/api/src/Kurs.Platform.Application.Contracts/ListForms/ListFormEditTabs.cs
+++ b/api/src/Kurs.Platform.Application.Contracts/ListForms/ListFormEditTabs.cs
@@ -43,6 +43,7 @@ public class ListFormEditTabs
     public const string GroupForm = "group";
     public const string SelectForm = "select";
     public const string ColumnForm = "column";
+    public const string PivotForm = "pivot";
     public const string PagerForm = "pager";
     public const string StateForm = "state";
     public const string SubFormJsonRow = "subForm";
diff --git a/api/src/Kurs.Platform.Application/ListForms/Administration/ListFormsAppService.cs b/api/src/Kurs.Platform.Application/ListForms/Administration/ListFormsAppService.cs
index 1af3b62e..48be1d89 100644
--- a/api/src/Kurs.Platform.Application/ListForms/Administration/ListFormsAppService.cs
+++ b/api/src/Kurs.Platform.Application/ListForms/Administration/ListFormsAppService.cs
@@ -130,10 +130,13 @@ public class ListFormsAppService : CrudAppService<
         {
             item.ColumnOptionJson = JsonSerializer.Serialize(input.ColumnOptionDto);
         }
+        else if (input.EditType == ListFormEditTabs.PivotForm)
+        {
+            item.PivotOptionJson = JsonSerializer.Serialize(input.PivotOptionDto);
+        }
         else if (input.EditType == ListFormEditTabs.PagerForm)
         {
             item.PagerOptionJson = JsonSerializer.Serialize(input.PagerOptionDto);
-            //item.PageSize = input.PageSize;
         }
         else if (input.EditType == ListFormEditTabs.StateForm)
         {
diff --git a/api/src/Kurs.Platform.Application/ListForms/ListFormAutoMapperProfile.cs b/api/src/Kurs.Platform.Application/ListForms/ListFormAutoMapperProfile.cs
index 1fb6c1f4..e7ff1348 100644
--- a/api/src/Kurs.Platform.Application/ListForms/ListFormAutoMapperProfile.cs
+++ b/api/src/Kurs.Platform.Application/ListForms/ListFormAutoMapperProfile.cs
@@ -1,7 +1,6 @@
 using AutoMapper;
 using Kurs.Platform.Entities;
 using Kurs.Platform.ListForms.Customization;
-using Kurs.Platform.ListForms.ImportManager;
 using Kurs.Platform.ListForms.Select;
 using Kurs.Platform.Queries;
 
diff --git a/api/src/Kurs.Platform.DbMigrator/Seeds/SeederData.json b/api/src/Kurs.Platform.DbMigrator/Seeds/SeederData.json
index 4048100a..5489ea1f 100644
--- a/api/src/Kurs.Platform.DbMigrator/Seeds/SeederData.json
+++ b/api/src/Kurs.Platform.DbMigrator/Seeds/SeederData.json
@@ -12408,12 +12408,6 @@
             "en": "Selection",
             "tr": "Seçme"
         },
-        {
-            "resourceName": "Platform",
-            "key": "ListForms.ListFormEdit.TabColumnsPivots",
-            "en": "Columns & Pivots",
-            "tr": "Sütunlar & Pivotlar"
-        },
         {
             "resourceName": "Platform",
             "key": "ListForms.ListFormEdit.TabColumns",
diff --git a/api/src/Kurs.Platform.Domain/Entities/ListForm.cs b/api/src/Kurs.Platform.Domain/Entities/ListForm.cs
index 81016dfe..aacd9a54 100644
--- a/api/src/Kurs.Platform.Domain/Entities/ListForm.cs
+++ b/api/src/Kurs.Platform.Domain/Entities/ListForm.cs
@@ -31,6 +31,7 @@ public class ListForm : FullAuditedEntity<Guid>
 
     public string DefaultFilter { get; set; }               // Her sorgunun sonuna eklenecek default WHERE condition
     public string ColumnOptionJson { get; set; }
+    public string PivotOptionJson { get; set; }
     public string FilterRowJson { get; set; }               // Filtre ayarlari, Json olarak tutulur, donus sinifi FilterRowDto
     public string HeaderFilterJson { get; set; }            // Header filtreleme ayarlari, Json olarak tutulur
     public string FilterPanelJson { get; set; }             // Filtre paneli Json verileri
diff --git a/api/src/Kurs.Platform.EntityFrameworkCore/Migrations/20250922114945_Initial.Designer.cs b/api/src/Kurs.Platform.EntityFrameworkCore/Migrations/20250925111605_Initial.Designer.cs
similarity index 99%
rename from api/src/Kurs.Platform.EntityFrameworkCore/Migrations/20250922114945_Initial.Designer.cs
rename to api/src/Kurs.Platform.EntityFrameworkCore/Migrations/20250925111605_Initial.Designer.cs
index a6ed97b4..23f39a59 100644
--- a/api/src/Kurs.Platform.EntityFrameworkCore/Migrations/20250922114945_Initial.Designer.cs
+++ b/api/src/Kurs.Platform.EntityFrameworkCore/Migrations/20250925111605_Initial.Designer.cs
@@ -13,7 +13,7 @@ using Volo.Abp.EntityFrameworkCore;
 namespace Kurs.Platform.Migrations
 {
     [DbContext(typeof(PlatformDbContext))]
-    [Migration("20250922114945_Initial")]
+    [Migration("20250925111605_Initial")]
     partial class Initial
     {
         /// <inheritdoc />
@@ -2893,6 +2893,9 @@ namespace Kurs.Platform.Migrations
                     b.Property<string>("PermissionJson")
                         .HasColumnType("nvarchar(max)");
 
+                    b.Property<string>("PivotOptionJson")
+                        .HasColumnType("nvarchar(max)");
+
                     b.Property<string>("SearchPanelJson")
                         .HasColumnType("nvarchar(max)");
 
diff --git a/api/src/Kurs.Platform.EntityFrameworkCore/Migrations/20250922114945_Initial.cs b/api/src/Kurs.Platform.EntityFrameworkCore/Migrations/20250925111605_Initial.cs
similarity index 99%
rename from api/src/Kurs.Platform.EntityFrameworkCore/Migrations/20250922114945_Initial.cs
rename to api/src/Kurs.Platform.EntityFrameworkCore/Migrations/20250925111605_Initial.cs
index 8d6001bd..55a50b8f 100644
--- a/api/src/Kurs.Platform.EntityFrameworkCore/Migrations/20250922114945_Initial.cs
+++ b/api/src/Kurs.Platform.EntityFrameworkCore/Migrations/20250925111605_Initial.cs
@@ -1209,6 +1209,7 @@ namespace Kurs.Platform.Migrations
                     Height = table.Column<int>(type: "int", nullable: true),
                     DefaultFilter = table.Column<string>(type: "nvarchar(max)", nullable: true),
                     ColumnOptionJson = table.Column<string>(type: "nvarchar(max)", nullable: true),
+                    PivotOptionJson = table.Column<string>(type: "nvarchar(max)", nullable: true),
                     FilterRowJson = table.Column<string>(type: "nvarchar(max)", nullable: true),
                     HeaderFilterJson = table.Column<string>(type: "nvarchar(max)", nullable: true),
                     FilterPanelJson = table.Column<string>(type: "nvarchar(max)", nullable: true),
diff --git a/api/src/Kurs.Platform.EntityFrameworkCore/Migrations/PlatformDbContextModelSnapshot.cs b/api/src/Kurs.Platform.EntityFrameworkCore/Migrations/PlatformDbContextModelSnapshot.cs
index 691d55ea..9662f861 100644
--- a/api/src/Kurs.Platform.EntityFrameworkCore/Migrations/PlatformDbContextModelSnapshot.cs
+++ b/api/src/Kurs.Platform.EntityFrameworkCore/Migrations/PlatformDbContextModelSnapshot.cs
@@ -2890,6 +2890,9 @@ namespace Kurs.Platform.Migrations
                     b.Property<string>("PermissionJson")
                         .HasColumnType("nvarchar(max)");
 
+                    b.Property<string>("PivotOptionJson")
+                        .HasColumnType("nvarchar(max)");
+
                     b.Property<string>("SearchPanelJson")
                         .HasColumnType("nvarchar(max)");
 
diff --git a/api/src/Kurs.Platform.HttpApi.Host/Extensions/CaptchaMiddleware.cs b/api/src/Kurs.Platform.HttpApi.Host/Extensions/CaptchaMiddleware.cs
index d5379e0d..cabb1e4c 100644
--- a/api/src/Kurs.Platform.HttpApi.Host/Extensions/CaptchaMiddleware.cs
+++ b/api/src/Kurs.Platform.HttpApi.Host/Extensions/CaptchaMiddleware.cs
@@ -29,30 +29,86 @@ public class CaptchaMiddleware : IMiddleware, ITransientDependency
     public async Task InvokeAsync(HttpContext context, RequestDelegate next)
     {
         var attribute = context.GetEndpoint()?.Metadata?.Any(a => a is CaptchaAttribute);
-        //var endpoint = context.Features.Get<IEndpointFeature>()?.Endpoint;
-        //var attribute = endpoint?.Metadata.GetMetadata<CaptchaAttribute>();
         if (attribute == true)
         {
             context.Request.EnableBuffering();
-            var requestBody = await new StreamReader(context.Request.Body).ReadToEndAsync();
-            var jsonDocument = JsonDocument.Parse(requestBody);
-            if (jsonDocument.RootElement.TryGetProperty("captchaResponse", out var response))
+            string requestBody;
+
+            using (var reader = new StreamReader(context.Request.Body, leaveOpen: true))
             {
-                var result = await captchaManager.VerifyCaptchaAsync(response.GetString());
-                if (result == false)
+                requestBody = await reader.ReadToEndAsync();
+                context.Request.Body.Position = 0; // Body tekrar okunabilsin
+            }
+
+            if (string.IsNullOrWhiteSpace(requestBody))
+            {
+                await WriteBadRequestAsync(context);
+                return;
+            }
+
+            try
+            {
+                using var jsonDocument = JsonDocument.Parse(requestBody);
+
+                if (!jsonDocument.RootElement.TryGetProperty("captchaResponse", out var response))
                 {
-                    context.Response.Clear();
-                    context.Response.ContentType = "text/plain";
-                    context.Response.StatusCode = (int)HttpStatusCode.BadRequest;
-                    await context.Response.WriteAsync(localizer[PlatformConsts.AbpIdentity.User.CaptchaWrongCode]);
+                    await WriteBadRequestAsync(context);
+                    return;
+                }
+
+                var result = await captchaManager.VerifyCaptchaAsync(response.GetString());
+                if (!result)
+                {
+                    await WriteBadRequestAsync(context);
                     return;
                 }
             }
-            context.Request.Body.Position = 0;
+            catch (JsonException)
+            {
+                await WriteBadRequestAsync(context);
+                return;
+            }
         }
 
         await next(context);
     }
 
+    private async Task WriteBadRequestAsync(HttpContext context)
+    {
+        context.Response.Clear();
+        context.Response.ContentType = "text/plain";
+        context.Response.StatusCode = (int)HttpStatusCode.BadRequest;
+        await context.Response.WriteAsync(localizer[PlatformConsts.AbpIdentity.User.CaptchaWrongCode]);
+    }
+
+
+    // public async Task InvokeAsync(HttpContext context, RequestDelegate next)
+    // {
+    //     var attribute = context.GetEndpoint()?.Metadata?.Any(a => a is CaptchaAttribute);
+    //     //var endpoint = context.Features.Get<IEndpointFeature>()?.Endpoint;
+    //     //var attribute = endpoint?.Metadata.GetMetadata<CaptchaAttribute>();
+    //     if (attribute == true)
+    //     {
+    //         context.Request.EnableBuffering();
+    //         var requestBody = await new StreamReader(context.Request.Body).ReadToEndAsync();
+    //         var jsonDocument = JsonDocument.Parse(requestBody);
+    //         if (jsonDocument.RootElement.TryGetProperty("captchaResponse", out var response))
+    //         {
+    //             var result = await captchaManager.VerifyCaptchaAsync(response.GetString());
+    //             if (result == false)
+    //             {
+    //                 context.Response.Clear();
+    //                 context.Response.ContentType = "text/plain";
+    //                 context.Response.StatusCode = (int)HttpStatusCode.BadRequest;
+    //                 await context.Response.WriteAsync(localizer[PlatformConsts.AbpIdentity.User.CaptchaWrongCode]);
+    //                 return;
+    //             }
+    //         }
+    //         context.Request.Body.Position = 0;
+    //     }
+
+    //     await next(context);
+    // }
+
 
 }
diff --git a/ui/src/proxy/admin/list-form/models.ts b/ui/src/proxy/admin/list-form/models.ts
index 732f7144..ec996804 100644
--- a/ui/src/proxy/admin/list-form/models.ts
+++ b/ui/src/proxy/admin/list-form/models.ts
@@ -74,6 +74,7 @@ export const ListFormEditTabs = {
   GroupForm: 'group',
   SelectForm: 'select',
   ColumnForm: 'column',
+  PivotForm: 'pivot',
   PagerForm: 'pager',
   StateForm: 'state',
   SubForm: 'subForm',
diff --git a/ui/src/proxy/charts/models.ts b/ui/src/proxy/charts/models.ts
index aebeb953..72cdcc2e 100644
--- a/ui/src/proxy/charts/models.ts
+++ b/ui/src/proxy/charts/models.ts
@@ -234,6 +234,7 @@ export interface ChartDto extends AuditedEntityDto<string> {
 }
 
 export interface ChartEditDto extends ChartDto {
+  editType: string
   dataSourceJson?: string
   dataSourceDto: ChartDataSourceDto
   dataSourceCode?: string
diff --git a/ui/src/proxy/form/models.ts b/ui/src/proxy/form/models.ts
index 0e2f8ef4..65573046 100644
--- a/ui/src/proxy/form/models.ts
+++ b/ui/src/proxy/form/models.ts
@@ -331,6 +331,9 @@ export interface GridColumnOptionDto {
   columnHidingEnabled: boolean
   focusedRowEnabled: boolean
   showColumnHeaders: boolean
+}
+
+export interface GridPivotOptionDto {
   allowFieldDragging: boolean
   showFieldPanel: boolean
   showDataFields: boolean
@@ -455,6 +458,8 @@ export interface GridOptionsDto extends AuditedEntityDto<string> {
   selectionDto: SelectionDto
   columnOptionJson?: string
   columnOptionDto: GridColumnOptionDto
+  pivotOptionJson?: string
+  pivotOptionDto: GridPivotOptionDto
   pagerOptionJson?: string
   pagerOptionDto: GridPagerOptionDto
   editingOptionJson?: string
diff --git a/ui/src/views/admin/chart/ChartEdit.tsx b/ui/src/views/admin/chart/ChartEdit.tsx
index 28d25715..3ed3e27b 100644
--- a/ui/src/views/admin/chart/ChartEdit.tsx
+++ b/ui/src/views/admin/chart/ChartEdit.tsx
@@ -1,4 +1,4 @@
-import {
+import {
   Alert,
   Button,
   Card,
@@ -9,15 +9,9 @@ import {
   Input,
   Notification,
   Select,
-  Table,
   Tabs,
   toast,
 } from '@/components/ui'
-import TBody from '@/components/ui/Table/TBody'
-import THead from '@/components/ui/Table/THead'
-import Td from '@/components/ui/Table/Td'
-import Th from '@/components/ui/Table/Th'
-import Tr from '@/components/ui/Table/Tr'
 import TabContent from '@/components/ui/Tabs/TabContent'
 import TabList from '@/components/ui/Tabs/TabList'
 import TabNav from '@/components/ui/Tabs/TabNav'
@@ -28,9 +22,6 @@ import {
   putChartJsonItem,
   putCharts,
 } from '@/services/chart.service'
-import { LanguageInfo } from '@/proxy/config/models'
-import { getDataSources } from '@/proxy/data-source'
-import { themeOptions, tooltipFormatListOptions } from '@/shared/options'
 import { SelectBoxOption } from '@/shared/types'
 import { useStoreState } from '@/store'
 import { useLocalization } from '@/utils/hooks/useLocalization'
@@ -38,39 +29,20 @@ import setNull from '@/utils/setNull'
 import { Field, FieldArray, FieldProps, Form, Formik, FormikProps, getIn } from 'formik'
 import { useEffect, useState } from 'react'
 import { Helmet } from 'react-helmet'
-import { FaEdit, FaMinus, FaFileMedical, FaPlus, FaTrash } from 'react-icons/fa'
 import { Link, useParams } from 'react-router-dom'
 import { object, string } from 'yup'
 import {
   chartAnnotationTypeListOptions,
-  chartArgumentAxisHoverModeListOptions,
-  chartArgumentAxisIntervalListOptions,
-  chartArgumentAxisLabelDisplayModeListOptions,
-  chartArgumentAxisLabelOverlappingBehaviorListOptions,
   chartArgumentAxisPositionListOptions,
   chartArgumentAxisTypeListOptions,
   chartBreakStyleLineListOptions,
-  chartEasingListOptions,
-  chartLegendOrientationListOptions,
-  chartLegendPositionListOptions,
-  chartPaletteExtensionModeOptions,
-  chartPaletteOptions,
   chartSeriesDashStyleOptions,
   chartSeriesSelectionModeOptions,
   chartSeriesTypeOptions,
-  chartTitleHorizantalAlignmentListOptions,
-  chartTitleTextOverFlowListOptions,
-  chartTitleVerticalAlignmentListOptions,
   chartTitleWordWrapListOptions,
-  chartTooltipLocationListOptions,
-  chartWordWrapListOptions,
-  chartZoomAndPanAxisOptions,
-  chartZoomAndPanKeyOptions,
 } from './options'
 import { ChartDialogType, ChartOperation } from './types'
 import { IdentityRoleDto, IdentityUserDto } from '@/proxy/admin/models'
-import { MenuDto } from '@/proxy/menus/models'
-import { DataSourceTypeEnum } from '@/proxy/form/models'
 import {
   BreakDto,
   ChartAnnotationDto,
@@ -80,6 +52,23 @@ import {
   ChartValueAxisDto,
 } from '@/proxy/charts/models'
 import { Container } from '@/components/shared'
+import ChartEditDetailsTab from './edit/ChartTabDetails'
+import ChartEditDatabaseTab from './edit/ChartTabDatabase'
+import ChartEditCommonSettingsTab from './edit/ChartTabCommonSettings'
+import ChartEditPermissionsTab from './edit/ChartTabPermissions'
+import ChartEditSeriesTab from './edit/ChartTabSeries'
+import ChartEditAxisTab from './edit/ChartTabAxis'
+import ChartEditPanesTab from './edit/ChartTabPanes'
+import ChartEditCrosshairTab from './edit/ChartTabCrosshair'
+import ChartTabAnimation from './edit/ChartTabAnimation'
+import ChartEditExportTab from './edit/ChartTabExport'
+import ChartTabLegend from './edit/ChartTabLegend'
+import ChartTabAnnotations from './edit/ChartTabAnnotations'
+import ChartEditZoomAndPanTab from './edit/ChartTabZoomAndPan'
+import { getDataSources } from '@/proxy/data-source'
+import { tooltipFormatListOptions } from '@/shared/options'
+import { FaMinus } from 'react-icons/fa'
+import { ROUTES_ENUM } from '@/routes/route.constant'
 
 const chartPanesValidationSchema = object().shape({
   name: string().required(),
@@ -112,7 +101,7 @@ const chartValidationSchema = object().shape({
   chartCode: string().required(),
 })
 
-interface DatabaseOperation {
+export interface DatabaseOperation {
   isOpen: ChartDialogType
   id: string
   operation: ChartOperation
@@ -130,7 +119,7 @@ const defaultDatabaseOperation: DatabaseOperation = {
   index: -1,
 }
 
-interface ConfirmDelete {
+export interface ConfirmDelete {
   isOpen: boolean
   id: string
   index: number
@@ -148,10 +137,7 @@ function ChartEdit() {
   const { chartCode } = useParams()
   const { translate } = useLocalization()
   const [dataSourceList, setDataSourceList] = useState<SelectBoxOption[]>([])
-
-  const languages: LanguageInfo[] | undefined = useStoreState(
-    (state) => state.abpConfig.config?.localization.languages,
-  )
+  const languages = useStoreState((state) => state.abpConfig.config?.localization.languages)
   const permissions: Record<string, boolean> | undefined = useStoreState(
     (state) => state.abpConfig.config?.auth.grantedPolicies,
   )
@@ -164,6 +150,26 @@ function ChartEdit() {
   const [databaseOperationsModalData, setDatabaseOperationsModalData] =
     useState<DatabaseOperation>(defaultDatabaseOperation)
 
+  const onSubmit = async (editType: string, values: Partial<ChartEditDto>): Promise<void> => {
+    try {
+      await putCharts({
+        ...chartValues,
+        ...values, // sadece güncellenen tab'ın değerleri override edilir
+      } as ChartEditDto) // chartValues null olamaz çünkü form ancak chartValues yüklendikten sonra render ediliyor
+
+      toast.push(
+        <Notification type="success" duration={2000}>
+          {`${editType} kaydedildi.`}
+        </Notification>,
+        { placement: 'top-end' },
+      )
+
+      await getChartValues()
+    } catch (error) {
+      toast.push(<Notification type="danger">Hata: {String(error)}</Notification>)
+    }
+  }
+
   const valueAxisList = () => {
     return chartValues?.valueAxisDto.map((key: ChartValueAxisDto) => ({
       value: key.name,
@@ -292,7 +298,11 @@ function ChartEdit() {
               <div className="lg:flex items-center justify-between mb-4 gap-3">
                 <div className="mb-4 lg:mb-0">
                   <h4>
-                    <Link to={`/admin/chart/${chartCode}`}>🔙 {chartCode}</Link>
+                    <Link
+                      to={ROUTES_ENUM.protected.admin.chart.replace('::chartCode', chartCode || '')}
+                    >
+                      🔙 {chartCode}
+                    </Link>
                   </h4>
                   {chartValues.isTenant && (
                     <Alert showIcon className="mb-4" type="warning">
@@ -307,8 +317,8 @@ function ChartEdit() {
                 <TabList className="flex-wrap border-b mb-2 bg-slate-50">
                   <TabNav value="details">Details</TabNav>
                   <TabNav value="database">Database</TabNav>
-                  <TabNav value="commonSettings">Common</TabNav>
                   <TabNav value="permissions">Permissions</TabNav>
+                  <TabNav value="commonSettings">Common</TabNav>
                   <TabNav value="series">Series</TabNav>
                   <TabNav value="axis">Axis</TabNav>
                   <TabNav value="panes">Panes</TabNav>
@@ -320,2989 +330,103 @@ function ChartEdit() {
                   <TabNav value="annotations">Annotations</TabNav>
                 </TabList>
                 <TabContent value="details">
-                  <FormItem
-                    label="Chart Code"
-                    invalid={errors.chartCode && touched.chartCode}
-                    errorMessage={errors.chartCode}
-                  >
-                    <Field type="text" name="chartCode" component={Input} />
-                  </FormItem>
-
-                  <FormItem
-                    label="Culture Name"
-                    invalid={errors.cultureName && touched.cultureName}
-                    errorMessage={errors.cultureName}
-                  >
-                    <Field type="text" name="cultureName">
-                      {({ field, form }: FieldProps<LanguageInfo>) => (
-                        <Select
-                          field={field}
-                          form={form}
-                          options={langOptions}
-                          isClearable={true}
-                          value={langOptions.filter(
-                            (option) => option.value === values.cultureName,
-                          )}
-                          onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                        />
-                      )}
-                    </Field>
-                  </FormItem>
-
-                  <FormItem
-                    label="Role"
-                    invalid={errors.roleId && touched.roleId}
-                    errorMessage={errors.roleId}
-                  >
-                    <Field type="text" name="roleId">
-                      {({ field, form }: FieldProps<IdentityRoleDto>) => (
-                        <Select
-                          field={field}
-                          form={form}
-                          options={roleList}
-                          isClearable={true}
-                          value={roleList.filter((option) => option.value === values.roleId)}
-                          onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                        />
-                      )}
-                    </Field>
-                  </FormItem>
-
-                  <FormItem
-                    label="User"
-                    invalid={errors.userId && touched.userId}
-                    errorMessage={errors.userId}
-                  >
-                    <Field type="text" name="userId">
-                      {({ field, form }: FieldProps<IdentityUserDto>) => (
-                        <Select
-                          field={field}
-                          form={form}
-                          options={userList}
-                          isClearable={true}
-                          value={userList.filter((option) => option.value === values.userId)}
-                          onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                        />
-                      )}
-                    </Field>
-                  </FormItem>
+                  <ChartEditDetailsTab
+                    values={values}
+                    errors={errors}
+                    touched={touched}
+                    langOptions={langOptions}
+                    roleList={roleList}
+                    userList={userList}
+                  />
                 </TabContent>
 
                 <TabContent value="database">
-                  <FormItem
-                    label={translate('::ListForms.ListFormEdit.IsTenant')}
-                    invalid={errors.isTenant && touched.isTenant}
-                    errorMessage={errors.isTenant}
-                  >
-                    <Field
-                      name="isTenant"
-                      placeholder={translate('::ListForms.ListFormEdit.IsTenant')}
-                      component={Checkbox}
-                    />
-                  </FormItem>
-                  <FormItem
-                    label={translate('::ListForms.ListFormEdit.IsBranch')}
-                    invalid={errors.isBranch && touched.isBranch}
-                    errorMessage={errors.isBranch}
-                  >
-                    <Field
-                      name="isBranch"
-                      placeholder={translate('::ListForms.ListFormEdit.IsBranch')}
-                      component={Checkbox}
-                    />
-                  </FormItem>
-                  <FormItem
-                    label={translate('::ListForms.ListFormEdit.IsOrganizationUnit')}
-                    invalid={errors.isOrganizationUnit && touched.isOrganizationUnit}
-                    errorMessage={errors.isOrganizationUnit}
-                  >
-                    <Field
-                      name="isOrganizationUnit"
-                      placeholder={translate('::ListForms.ListFormEdit.IsOrganizationUnit')}
-                      component={Checkbox}
-                    />
-                  </FormItem>
-
-                  <FormItem
-                    label="Data Source Code"
-                    invalid={errors.dataSourceCode && touched.dataSourceCode}
-                    errorMessage={errors.dataSourceCode}
-                  >
-                    <Field type="text" name="dataSourceCode">
-                      {({ field, form }: FieldProps<DataSourceTypeEnum>) => (
-                        <Select
-                          field={field}
-                          form={form}
-                          options={dataSourceList}
-                          value={dataSourceList?.filter(
-                            (option) => option.value === values.dataSourceCode,
-                          )}
-                          onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                        />
-                      )}
-                    </Field>
-                  </FormItem>
-
-                  <FormItem
-                    label="DataSource Query"
-                    invalid={errors.dataSourceDto?.query && touched.dataSourceDto?.query}
-                    errorMessage={errors.dataSourceDto?.query}
-                  >
-                    <Field
-                      type="text"
-                      name="dataSourceDto.query"
-                      component={Input}
-                      textArea={true}
-                    />
-                  </FormItem>
+                  <ChartEditDatabaseTab
+                    values={values}
+                    errors={errors}
+                    touched={touched}
+                    dataSourceList={dataSourceList}
+                  />
                 </TabContent>
 
                 <TabContent value="commonSettings">
-                  <Tabs defaultValue="commonSettings_general">
-                    <TabList className="flex-wrap">
-                      <TabNav value="commonSettings_general">General</TabNav>
-                      <TabNav value="commonSettings_adaptiveLayouts">
-                        Adaptive Layout Settings
-                      </TabNav>
-                      <TabNav value="commonSettings_title">Title Settings</TabNav>
-                      <TabNav value="commonSettings_tooltip">Tooltip Settings</TabNav>
-                      <TabNav value="commonSettings_margin">Margin Settings</TabNav>
-                      <TabNav value="commonSettings_size">Size Settings</TabNav>
-                      <TabNav value="commonSettings_scrollbar">ScrollBar Settings</TabNav>
-                    </TabList>
-                    <TabContent value="commonSettings_general">
-                      <Card className="my-2">
-                        <FormItem
-                          label="Disabled"
-                          invalid={errors.commonDto?.disabled && touched.commonDto?.disabled}
-                          errorMessage={errors.commonDto?.disabled}
-                        >
-                          <Field name="commonDto.disabled" component={Checkbox} />
-                        </FormItem>
-
-                        <FormItem
-                          label="Adjust On Zoom"
-                          invalid={
-                            errors.commonDto?.adjustOnZoom && touched.commonDto?.adjustOnZoom
-                          }
-                          errorMessage={errors.commonDto?.adjustOnZoom}
-                        >
-                          <Field name="commonDto.adjustOnZoom" component={Checkbox} />
-                        </FormItem>
-
-                        <FormItem
-                          label="Container BackgroundColor"
-                          invalid={
-                            errors.commonDto?.containerBackgroundColor &&
-                            touched.commonDto?.containerBackgroundColor
-                          }
-                          errorMessage={errors.commonDto?.containerBackgroundColor}
-                        >
-                          <Field name="commonDto.containerBackgroundColor" component={Input} />
-                        </FormItem>
-
-                        <FormItem
-                          label="Default Pane"
-                          invalid={errors.commonDto?.defaultPane && touched.commonDto?.defaultPane}
-                          errorMessage={errors.commonDto?.defaultPane}
-                        >
-                          <Field type="text" name="commonDto.defaultPane" component={Input} />
-                        </FormItem>
-
-                        <FormItem
-                          label="Theme"
-                          invalid={errors.commonDto?.theme && touched.commonDto?.theme}
-                          errorMessage={errors.commonDto?.theme}
-                        >
-                          <Field type="text" name="commonDto.theme">
-                            {({ field, form }: FieldProps<SelectBoxOption>) => (
-                              <Select
-                                field={field}
-                                form={form}
-                                options={themeOptions}
-                                isClearable={true}
-                                value={themeOptions.filter(
-                                  (option) => option.value === values.commonDto.theme,
-                                )}
-                                onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                              />
-                            )}
-                          </Field>
-                        </FormItem>
-
-                        <FormItem
-                          label="Palette"
-                          invalid={errors.commonDto?.palette && touched.commonDto?.palette}
-                          errorMessage={errors.commonDto?.palette}
-                        >
-                          <Field type="text" name="commonDto.palette">
-                            {({ field, form }: FieldProps<SelectBoxOption>) => (
-                              <Select
-                                field={field}
-                                form={form}
-                                options={chartPaletteOptions}
-                                isClearable={true}
-                                value={chartPaletteOptions.filter(
-                                  (option) => option.value === values.commonDto.palette,
-                                )}
-                                onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                              />
-                            )}
-                          </Field>
-                        </FormItem>
-
-                        <FormItem
-                          label="Palette Extension Mode"
-                          invalid={
-                            errors.commonDto?.paletteExtensionMode &&
-                            touched.commonDto?.paletteExtensionMode
-                          }
-                          errorMessage={errors.commonDto?.paletteExtensionMode}
-                        >
-                          <Field type="text" name="commonDto.paletteExtensionMode">
-                            {({ field, form }: FieldProps<any>) => (
-                              <Select
-                                field={field}
-                                form={form}
-                                options={chartPaletteExtensionModeOptions}
-                                isClearable={true}
-                                value={chartPaletteExtensionModeOptions.filter(
-                                  (option) =>
-                                    option.value === values.commonDto.paletteExtensionMode,
-                                )}
-                                onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                              />
-                            )}
-                          </Field>
-                        </FormItem>
-                      </Card>
-                    </TabContent>
-                    <TabContent value="commonSettings_adaptiveLayouts">
-                      <Card className="my-2">
-                        <FormItem
-                          label="Keep Labels"
-                          invalid={
-                            errors.adaptivelayoutDto?.keepLabels &&
-                            touched.adaptivelayoutDto?.keepLabels
-                          }
-                          errorMessage={errors.adaptivelayoutDto?.keepLabels}
-                        >
-                          <Field name="adaptivelayoutDto.keepLabels" component={Checkbox} />
-                        </FormItem>
-
-                        <FormItem
-                          label="Width"
-                          invalid={
-                            errors.adaptivelayoutDto?.width && touched.adaptivelayoutDto?.width
-                          }
-                          errorMessage={errors.adaptivelayoutDto?.width}
-                        >
-                          <Field type="number" name="adaptivelayoutDto.width" component={Input} />
-                        </FormItem>
-
-                        <FormItem
-                          label="Height"
-                          invalid={
-                            errors.adaptivelayoutDto?.height && touched.adaptivelayoutDto?.height
-                          }
-                          errorMessage={errors.adaptivelayoutDto?.height}
-                        >
-                          <Field type="number" name="adaptivelayoutDto.height" component={Input} />
-                        </FormItem>
-                      </Card>
-                    </TabContent>
-                    <TabContent value="commonSettings_title">
-                      <Card className="my-2">
-                        <FormItem
-                          label="Text"
-                          invalid={errors.titleDto?.text && touched.titleDto?.text}
-                          errorMessage={errors.titleDto?.text}
-                        >
-                          <Field name="titleDto.text" component={Input} />
-                        </FormItem>
-
-                        <FormItem
-                          label="Subtitle"
-                          invalid={errors.titleDto?.subtitle && touched.titleDto?.subtitle}
-                          errorMessage={errors.titleDto?.subtitle}
-                        >
-                          <Field name="titleDto.subtitle" component={Input} />
-                        </FormItem>
-
-                        <FormItem
-                          label="Vertical Alignment"
-                          invalid={
-                            errors.titleDto?.verticalAlignment &&
-                            touched.titleDto?.verticalAlignment
-                          }
-                          errorMessage={errors.titleDto?.verticalAlignment}
-                        >
-                          <Field type="text" name="titleDto.verticalAlignment">
-                            {({ field, form }: FieldProps<SelectBoxOption>) => (
-                              <Select
-                                field={field}
-                                form={form}
-                                options={chartTitleVerticalAlignmentListOptions}
-                                isClearable={true}
-                                value={chartTitleVerticalAlignmentListOptions.filter(
-                                  (option) => option.value === values.titleDto.verticalAlignment,
-                                )}
-                                onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                              />
-                            )}
-                          </Field>
-                        </FormItem>
-
-                        <FormItem
-                          label="Horizontal Alignment"
-                          invalid={
-                            errors.titleDto?.horizontalAlignment &&
-                            touched.titleDto?.horizontalAlignment
-                          }
-                          errorMessage={errors.titleDto?.horizontalAlignment}
-                        >
-                          <Field type="text" name="titleDto.horizontalAlignment">
-                            {({ field, form }: FieldProps<SelectBoxOption>) => (
-                              <Select
-                                field={field}
-                                form={form}
-                                options={chartTitleHorizantalAlignmentListOptions}
-                                isClearable={true}
-                                value={chartTitleHorizantalAlignmentListOptions.filter(
-                                  (option) => option.value === values.titleDto.horizontalAlignment,
-                                )}
-                                onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                              />
-                            )}
-                          </Field>
-                        </FormItem>
-
-                        <FormItem
-                          label="Text Overflow"
-                          invalid={errors.titleDto?.textOverflow && touched.titleDto?.textOverflow}
-                          errorMessage={errors.titleDto?.textOverflow}
-                        >
-                          <Field type="text" name="titleDto.textOverflow">
-                            {({ field, form }: FieldProps<SelectBoxOption>) => (
-                              <Select
-                                field={field}
-                                form={form}
-                                options={chartTitleTextOverFlowListOptions}
-                                isClearable={true}
-                                value={chartTitleTextOverFlowListOptions.filter(
-                                  (option) => option.value === values.titleDto.textOverflow,
-                                )}
-                                onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                              />
-                            )}
-                          </Field>
-                        </FormItem>
-
-                        <FormItem
-                          label="Word Wrap"
-                          invalid={errors.titleDto?.wordWrap && touched.titleDto?.wordWrap}
-                          errorMessage={errors.titleDto?.wordWrap}
-                        >
-                          <Field type="text" name="titleDto.wordWrap">
-                            {({ field, form }: FieldProps<SelectBoxOption>) => (
-                              <Select
-                                field={field}
-                                form={form}
-                                options={chartTitleWordWrapListOptions}
-                                isClearable={true}
-                                value={chartTitleWordWrapListOptions.filter(
-                                  (option) => option.value === values.titleDto.wordWrap,
-                                )}
-                                onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                              />
-                            )}
-                          </Field>
-                        </FormItem>
-                      </Card>
-                    </TabContent>
-                    <TabContent value="commonSettings_tooltip">
-                      <Card className="my-2">
-                        <FormItem
-                          label="Enabled"
-                          invalid={errors.tooltipDto?.enabled && touched.tooltipDto?.enabled}
-                          errorMessage={errors.tooltipDto?.enabled}
-                        >
-                          <Field name="tooltipDto.keepLabels" component={Checkbox} />
-                        </FormItem>
-
-                        <FormItem
-                          label="Shared"
-                          invalid={errors.tooltipDto?.shared && touched.tooltipDto?.shared}
-                          errorMessage={errors.tooltipDto?.shared}
-                        >
-                          <Field name="tooltipDto.shared" component={Checkbox} />
-                        </FormItem>
-
-                        <FormItem
-                          label="Format"
-                          invalid={errors.tooltipDto?.format && touched.tooltipDto?.format}
-                          errorMessage={errors.tooltipDto?.format}
-                        >
-                          <Field type="text" name="tooltipDto.format">
-                            {({ field, form }: FieldProps<SelectBoxOption>) => (
-                              <Select
-                                field={field}
-                                form={form}
-                                options={tooltipFormatListOptions}
-                                isClearable={true}
-                                value={tooltipFormatListOptions.filter(
-                                  (option) => option.value === values.tooltipDto.format,
-                                )}
-                                onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                              />
-                            )}
-                          </Field>
-                        </FormItem>
-
-                        <FormItem
-                          label="Location"
-                          invalid={errors.tooltipDto?.location && touched.tooltipDto?.location}
-                          errorMessage={errors.tooltipDto?.location}
-                        >
-                          <Field type="text" name="tooltipDto.location">
-                            {({ field, form }: FieldProps<SelectBoxOption>) => (
-                              <Select
-                                field={field}
-                                form={form}
-                                options={chartTooltipLocationListOptions}
-                                isClearable={true}
-                                value={chartTooltipLocationListOptions.filter(
-                                  (option) => option.value === values.tooltipDto.location,
-                                )}
-                                onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                              />
-                            )}
-                          </Field>
-                        </FormItem>
-
-                        <FormItem
-                          label="Color"
-                          invalid={errors.tooltipDto?.color && touched.tooltipDto?.color}
-                          errorMessage={errors.tooltipDto?.color}
-                        >
-                          <Field name="tooltipDto.color" component={Input} />
-                        </FormItem>
-
-                        <FormItem
-                          label="Argument Format"
-                          invalid={
-                            errors.tooltipDto?.argumentFormat && touched.tooltipDto?.argumentFormat
-                          }
-                          errorMessage={errors.tooltipDto?.argumentFormat}
-                        >
-                          <Field name="tooltipDto.argumentFormat" component={Input} />
-                        </FormItem>
-
-                        <FormItem
-                          label="Arrow Length"
-                          invalid={
-                            errors.tooltipDto?.arrowLength && touched.tooltipDto?.arrowLength
-                          }
-                          errorMessage={errors.tooltipDto?.arrowLength}
-                        >
-                          <Field type="number" name="tooltipDto.arrowLength" component={Input} />
-                        </FormItem>
-
-                        <FormItem
-                          label="Padding Top/Bottom"
-                          invalid={
-                            errors.tooltipDto?.paddingTopBottom &&
-                            touched.tooltipDto?.paddingTopBottom
-                          }
-                          errorMessage={errors.tooltipDto?.paddingTopBottom}
-                        >
-                          <Field
-                            type="number"
-                            name="tooltipDto.paddingTopBottom"
-                            component={Input}
-                          />
-                        </FormItem>
-
-                        <FormItem
-                          label="Padding Left/Right"
-                          invalid={
-                            errors.tooltipDto?.paddingLeftRight &&
-                            touched.tooltipDto?.paddingLeftRight
-                          }
-                          errorMessage={errors.tooltipDto?.paddingLeftRight}
-                        >
-                          <Field
-                            type="number"
-                            name="tooltipDto.paddingLeftRight"
-                            component={Input}
-                          />
-                        </FormItem>
-                      </Card>
-                      <div className="font-bold m-3">Tooltip Settings - Font</div>
-                      <FormItem
-                        label="Color"
-                        invalid={errors.tooltipDto?.font?.color && touched.tooltipDto?.font?.color}
-                        errorMessage={errors.tooltipDto?.font?.color}
-                      >
-                        <Field name="tooltipDto.font.color" component={Input} />
-                      </FormItem>
-
-                      <FormItem
-                        label="Family"
-                        invalid={
-                          errors.tooltipDto?.font?.family && touched.tooltipDto?.font?.family
-                        }
-                        errorMessage={errors.tooltipDto?.font?.family}
-                      >
-                        <Field name="tooltipDto.font.family" component={Input} />
-                      </FormItem>
-
-                      <FormItem
-                        label="Size"
-                        invalid={errors.tooltipDto?.font?.size && touched.tooltipDto?.font?.size}
-                        errorMessage={errors.tooltipDto?.font?.size}
-                      >
-                        <Field type="number" name="tooltipDto.font.size" component={Input} />
-                      </FormItem>
-
-                      <FormItem
-                        label="Weight"
-                        invalid={
-                          errors.tooltipDto?.font?.weight && touched.tooltipDto?.font?.weight
-                        }
-                        errorMessage={errors.tooltipDto?.font?.weight}
-                      >
-                        <Field type="number" name="tooltipDto.font.weight" component={Input} />
-                      </FormItem>
-
-                      <div className="font-bold m-3">Tooltip Settings - Border</div>
-                      <FormItem
-                        label="Visible"
-                        invalid={
-                          errors.tooltipDto?.border?.visible && touched.tooltipDto?.border?.visible
-                        }
-                        errorMessage={errors.tooltipDto?.border?.visible}
-                      >
-                        <Field name="tooltipDto.border.visible" component={Checkbox} />
-                      </FormItem>
-
-                      <FormItem
-                        label="Dash Style"
-                        invalid={
-                          errors.tooltipDto?.border?.dashStyle &&
-                          touched.tooltipDto?.border?.dashStyle
-                        }
-                        errorMessage={errors.tooltipDto?.border?.dashStyle}
-                      >
-                        <Field type="text" name="tooltipDto.border.dashStyle">
-                          {({ field, form }: FieldProps<SelectBoxOption>) => (
-                            <Select
-                              field={field}
-                              form={form}
-                              options={chartSeriesDashStyleOptions}
-                              isClearable={true}
-                              value={chartSeriesDashStyleOptions.filter(
-                                (option) => option.value === values.tooltipDto.border.dashStyle,
-                              )}
-                              onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                            />
-                          )}
-                        </Field>
-                      </FormItem>
-
-                      <FormItem
-                        label="Width"
-                        invalid={
-                          errors.tooltipDto?.border?.width && touched.tooltipDto?.border?.width
-                        }
-                        errorMessage={errors.tooltipDto?.border?.width}
-                      >
-                        <Field type="number" name="tooltipDto.border.width" component={Input} />
-                      </FormItem>
-
-                      <FormItem
-                        label="Corner Radius"
-                        invalid={
-                          errors.tooltipDto?.border?.cornerRadius &&
-                          touched.tooltipDto?.border?.cornerRadius
-                        }
-                        errorMessage={errors.tooltipDto?.border?.cornerRadius}
-                      >
-                        <Field
-                          type="number"
-                          name="tooltipDto.border.cornerRadius"
-                          component={Input}
-                        />
-                      </FormItem>
-                    </TabContent>
-                    <TabContent value="commonSettings_margin">
-                      <Card className="my-2">
-                        <FormItem
-                          label="Bottom"
-                          invalid={errors.marginDto?.bottom && touched.marginDto?.bottom}
-                          errorMessage={errors.marginDto?.bottom}
-                        >
-                          <Field type="number" name="marginDto.bottom" component={Input} />
-                        </FormItem>
-
-                        <FormItem
-                          label="Top"
-                          invalid={errors.marginDto?.top && touched.marginDto?.top}
-                          errorMessage={errors.marginDto?.top}
-                        >
-                          <Field type="number" name="marginDto.top" component={Input} />
-                        </FormItem>
-
-                        <FormItem
-                          label="Right"
-                          invalid={errors.marginDto?.right && touched.marginDto?.right}
-                          errorMessage={errors.marginDto?.right}
-                        >
-                          <Field type="number" name="marginDto.right" component={Input} />
-                        </FormItem>
-
-                        <FormItem
-                          label="Left"
-                          invalid={errors.marginDto?.left && touched.marginDto?.left}
-                          errorMessage={errors.marginDto?.left}
-                        >
-                          <Field type="number" name="marginDto.left" component={Input} />
-                        </FormItem>
-                      </Card>
-                    </TabContent>
-                    <TabContent value="commonSettings_size">
-                      <Card className="my-2">
-                        <FormItem
-                          label="Use Size"
-                          invalid={errors.sizeDto?.useSize && touched.sizeDto?.useSize}
-                          errorMessage={errors.sizeDto?.useSize}
-                        >
-                          <Field name="sizeDto.useSize" component={Checkbox} />
-                        </FormItem>
-
-                        <FormItem
-                          label="Width"
-                          invalid={errors.sizeDto?.width && touched.sizeDto?.width}
-                          errorMessage={errors.sizeDto?.width}
-                        >
-                          <Field type="number" name="sizeDto.width" component={Input} />
-                        </FormItem>
-
-                        <FormItem
-                          label="Height"
-                          invalid={errors.sizeDto?.height && touched.sizeDto?.height}
-                          errorMessage={errors.sizeDto?.height}
-                        >
-                          <Field type="number" name="sizeDto.height" component={Input} />
-                        </FormItem>
-                      </Card>
-                    </TabContent>
-                    <TabContent value="commonSettings_scrollbar">
-                      <Card className="my-2">
-                        <FormItem
-                          label="Visible"
-                          invalid={errors.scrollBarDto?.visible && touched.scrollBarDto?.visible}
-                          errorMessage={errors.scrollBarDto?.visible}
-                        >
-                          <Field name="scrollBarDto.visible" component={Checkbox} />
-                        </FormItem>
-
-                        <FormItem
-                          label="Color"
-                          invalid={errors.scrollBarDto?.color && touched.scrollBarDto?.color}
-                          errorMessage={errors.scrollBarDto?.color}
-                        >
-                          <Field name="scrollBarDto.color" component={Input} />
-                        </FormItem>
-
-                        <FormItem
-                          label="Position"
-                          invalid={errors.scrollBarDto?.position && touched.scrollBarDto?.position}
-                          errorMessage={errors.scrollBarDto?.position}
-                        >
-                          <Field type="text" name="commonDto.position">
-                            {({ field, form }: FieldProps<IdentityRoleDto>) => (
-                              <Select
-                                field={field}
-                                form={form}
-                                options={chartArgumentAxisPositionListOptions}
-                                isClearable={true}
-                                value={chartArgumentAxisPositionListOptions.filter(
-                                  (option) => option.value === values.scrollBarDto.position,
-                                )}
-                                onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                              />
-                            )}
-                          </Field>
-                        </FormItem>
-
-                        <FormItem
-                          label="Offset"
-                          invalid={errors.scrollBarDto?.offset && touched.scrollBarDto?.offset}
-                          errorMessage={errors.scrollBarDto?.offset}
-                        >
-                          <Field type="number" name="scrollBarDto.offset" component={Input} />
-                        </FormItem>
-
-                        <FormItem
-                          label="Width"
-                          invalid={errors.scrollBarDto?.width && touched.scrollBarDto?.width}
-                          errorMessage={errors.scrollBarDto?.width}
-                        >
-                          <Field type="number" name="scrollBarDto.width" component={Input} />
-                        </FormItem>
-                      </Card>
-                    </TabContent>
-                  </Tabs>
+                  <ChartEditCommonSettingsTab values={values} errors={errors} touched={touched} />
                 </TabContent>
 
                 <TabContent value="permissions">
-                  <FormItem
-                    label="Create"
-                    invalid={errors.permissionDto?.c && touched.permissionDto?.c}
-                    errorMessage={errors.permissionDto?.c}
-                  >
-                    <Field type="text" name="permissionDto.c">
-                      {({ field, form }: FieldProps<MenuDto>) => (
-                        <Select
-                          field={field}
-                          form={form}
-                          options={permissionOptions}
-                          isClearable={true}
-                          value={permissionOptions.filter(
-                            (option) => option.value === values.permissionDto.c,
-                          )}
-                          onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                        />
-                      )}
-                    </Field>
-                  </FormItem>
-                  <FormItem
-                    label="Read"
-                    invalid={errors.permissionDto?.r && touched.permissionDto?.r}
-                    errorMessage={errors.permissionDto?.r}
-                  >
-                    <Field type="text" name="permissionDto.r">
-                      {({ field, form }: FieldProps<MenuDto>) => (
-                        <Select
-                          field={field}
-                          form={form}
-                          options={permissionOptions}
-                          isClearable={true}
-                          value={permissionOptions.filter(
-                            (option) => option.value === values.permissionDto.r,
-                          )}
-                          onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                        />
-                      )}
-                    </Field>
-                  </FormItem>
-                  <FormItem
-                    label="Update"
-                    invalid={errors.permissionDto?.u && touched.permissionDto?.u}
-                    errorMessage={errors.permissionDto?.u}
-                  >
-                    <Field type="text" name="permissionDto.u">
-                      {({ field, form }: FieldProps<MenuDto>) => (
-                        <Select
-                          field={field}
-                          form={form}
-                          options={permissionOptions}
-                          isClearable={true}
-                          value={permissionOptions.filter(
-                            (option) => option.value === values.permissionDto.u,
-                          )}
-                          onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                        />
-                      )}
-                    </Field>
-                  </FormItem>
-                  <FormItem
-                    label="Delete"
-                    invalid={errors.permissionDto?.d && touched.permissionDto?.d}
-                    errorMessage={errors.permissionDto?.d}
-                  >
-                    <Field type="text" name="permissionDto.d">
-                      {({ field, form }: FieldProps<MenuDto>) => (
-                        <Select
-                          field={field}
-                          form={form}
-                          options={permissionOptions}
-                          isClearable={true}
-                          value={permissionOptions.filter(
-                            (option) => option.value === values.permissionDto.d,
-                          )}
-                          onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                        />
-                      )}
-                    </Field>
-                  </FormItem>
+                  <ChartEditPermissionsTab
+                    values={values}
+                    errors={errors}
+                    touched={touched}
+                    permissionOptions={permissionOptions}
+                  />
                 </TabContent>
 
                 <TabContent value="series">
-                  <Tabs defaultValue="series_general">
-                    <TabList>
-                      <TabNav value="series_general">General</TabNav>
-                      <TabNav value="series_common">Common Series Settings</TabNav>
-                    </TabList>
-                    <TabContent value="series_general">
-                      <Card className="my-2" bodyClass="p-0">
-                        <Table compact>
-                          <THead>
-                            <Tr>
-                              <Th>
-                                <Button
-                                  shape="circle"
-                                  variant="plain"
-                                  type="button"
-                                  size="xs"
-                                  title="Add"
-                                  icon={<FaPlus />}
-                                  onClick={async (e) => {
-                                    e.preventDefault()
-                                    setDatabaseOperationsModalData({
-                                      id: values.id ?? '',
-                                      index: -1,
-                                      isOpen: 'serie',
-                                      operation: 'insert',
-                                    })
-                                  }}
-                                />
-                              </Th>
-                              <Th>Type</Th>
-                              <Th>Name</Th>
-                              <Th>Argument Field</Th>
-                              <Th>Value Field</Th>
-                              <Th>Pane</Th>
-                              <Th>Axis</Th>
-                            </Tr>
-                          </THead>
-                          <TBody>
-                            {chartValues.seriesDto.map((row, index) => (
-                              <Tr key={index}>
-                                <Td>
-                                  <div className="flex-wrap inline-flex xl:flex items-center gap-2">
-                                    <Button
-                                      shape="circle"
-                                      variant="plain"
-                                      type="button"
-                                      size="xs"
-                                      title="Edit"
-                                      icon={<FaEdit />}
-                                      onClick={async (e) => {
-                                        e.preventDefault()
-                                        setDatabaseOperationsModalData({
-                                          id: values.id ?? '',
-                                          index,
-                                          isOpen: 'serie',
-                                          operation: 'update',
-                                          seriesValues: chartValues.seriesDto[index],
-                                        })
-                                      }}
-                                    />
-                                    <Button
-                                      shape="circle"
-                                      variant="plain"
-                                      type="button"
-                                      size="xs"
-                                      title="Delete"
-                                      icon={<FaTrash />}
-                                      onClick={async (e) => {
-                                        e.preventDefault()
-                                        setConfirmDelete({
-                                          isOpen: true,
-                                          id: values.id ?? '',
-                                          fieldName: 'serie',
-                                          index,
-                                        })
-                                      }}
-                                    />
-                                  </div>
-                                </Td>
-                                <Td>{row.type}</Td>
-                                <Td>{row.name}</Td>
-                                <Td>{row.argumentField}</Td>
-                                <Td>{row.valueField}</Td>
-                                <Td>{row.pane}</Td>
-                                <Td>{row.axis}</Td>
-                              </Tr>
-                            ))}
-                          </TBody>
-                        </Table>
-                      </Card>
-                    </TabContent>
-                    <TabContent value="series_common">
-                      <Card className="my-2">
-                        <FormItem
-                          label="Visible"
-                          invalid={
-                            errors.commonSeriesSettingsDto?.visible &&
-                            touched.commonSeriesSettingsDto?.visible
-                          }
-                          errorMessage={errors.commonSeriesSettingsDto?.visible}
-                        >
-                          <Field name="commonSeriesSettingsDto.visible" component={Checkbox} />
-                        </FormItem>
-
-                        <FormItem
-                          label="Show In Legend"
-                          invalid={
-                            errors.commonSeriesSettingsDto?.showInLegend &&
-                            touched.commonSeriesSettingsDto?.showInLegend
-                          }
-                          errorMessage={errors.commonSeriesSettingsDto?.showInLegend}
-                        >
-                          <Field name="commonSeriesSettingsDto.showInLegend" component={Checkbox} />
-                        </FormItem>
-
-                        <FormItem
-                          label="Ignore Empty Points"
-                          invalid={
-                            errors.commonSeriesSettingsDto?.ignoreEmptyPoints &&
-                            touched.commonSeriesSettingsDto?.ignoreEmptyPoints
-                          }
-                          errorMessage={errors.commonSeriesSettingsDto?.ignoreEmptyPoints}
-                        >
-                          <Field
-                            name="commonSeriesSettingsDto.ignoreEmptyPoints"
-                            component={Checkbox}
-                          />
-                        </FormItem>
-
-                        <FormItem
-                          label="Type"
-                          invalid={
-                            errors.commonSeriesSettingsDto?.type &&
-                            touched.commonSeriesSettingsDto?.type
-                          }
-                          errorMessage={errors.commonSeriesSettingsDto?.type}
-                        >
-                          <Field type="text" name="commonSeriesSettingsDto.type">
-                            {({ field, form }: FieldProps<SelectBoxOption>) => (
-                              <Select
-                                field={field}
-                                form={form}
-                                options={chartSeriesTypeOptions}
-                                isClearable={true}
-                                value={chartSeriesTypeOptions.filter(
-                                  (option) => option.value === values.commonSeriesSettingsDto.type,
-                                )}
-                                onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                              />
-                            )}
-                          </Field>
-                        </FormItem>
-
-                        <FormItem
-                          label="Selection Mode"
-                          invalid={
-                            errors.commonSeriesSettingsDto?.selectionMode &&
-                            touched.commonSeriesSettingsDto?.selectionMode
-                          }
-                          errorMessage={errors.commonSeriesSettingsDto?.selectionMode}
-                        >
-                          <Field type="text" name="commonSeriesSettingsDto.selectionMode">
-                            {({ field, form }: FieldProps<SelectBoxOption>) => (
-                              <Select
-                                field={field}
-                                form={form}
-                                options={chartSeriesSelectionModeOptions}
-                                isClearable={true}
-                                value={chartSeriesSelectionModeOptions.filter(
-                                  (option) =>
-                                    option.value === values.commonSeriesSettingsDto.selectionMode,
-                                )}
-                                onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                              />
-                            )}
-                          </Field>
-                        </FormItem>
-
-                        <FormItem
-                          label="Argument Field"
-                          invalid={
-                            errors.commonSeriesSettingsDto?.argumentField &&
-                            touched.commonSeriesSettingsDto?.argumentField
-                          }
-                          errorMessage={errors.commonSeriesSettingsDto?.argumentField}
-                        >
-                          <Field name="commonSeriesSettingsDto.argumentField" component={Input} />
-                        </FormItem>
-
-                        <FormItem
-                          label="Value Field"
-                          invalid={
-                            errors.commonSeriesSettingsDto?.valueField &&
-                            touched.commonSeriesSettingsDto?.valueField
-                          }
-                          errorMessage={errors.commonSeriesSettingsDto?.valueField}
-                        >
-                          <Field name="commonSeriesSettingsDto.valueField" component={Input} />
-                        </FormItem>
-
-                        <FormItem
-                          label="Axis"
-                          invalid={
-                            errors.commonSeriesSettingsDto?.axis &&
-                            touched.commonSeriesSettingsDto?.axis
-                          }
-                          errorMessage={errors.commonSeriesSettingsDto?.axis}
-                        >
-                          <Field type="text" name="commonSeriesSettingsDto.axis">
-                            {({ field, form }: FieldProps<SelectBoxOption>) => (
-                              <Select
-                                field={field}
-                                form={form}
-                                options={valueAxisList()}
-                                isClearable={true}
-                                value={valueAxisList()?.find(
-                                  (option) => option.value === values.commonSeriesSettingsDto.axis,
-                                )}
-                                onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                              />
-                            )}
-                          </Field>
-                        </FormItem>
-
-                        <FormItem
-                          label="Pane"
-                          invalid={
-                            errors.commonSeriesSettingsDto?.pane &&
-                            touched.commonSeriesSettingsDto?.pane
-                          }
-                          errorMessage={errors.commonSeriesSettingsDto?.pane}
-                        >
-                          <Field type="text" name="commonSeriesSettingsDto.pane">
-                            {({ field, form }: FieldProps<SelectBoxOption>) => (
-                              <Select
-                                field={field}
-                                form={form}
-                                options={valuePaneList()}
-                                isClearable={true}
-                                value={valuePaneList()?.find(
-                                  (option) => option.value === values.commonSeriesSettingsDto.pane,
-                                )}
-                                onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                              />
-                            )}
-                          </Field>
-                        </FormItem>
-
-                        <FormItem
-                          label="Color"
-                          invalid={
-                            errors.commonSeriesSettingsDto?.color &&
-                            touched.commonSeriesSettingsDto?.color
-                          }
-                          errorMessage={errors.commonSeriesSettingsDto?.color}
-                        >
-                          <Field name="commonSeriesSettingsDto.color" component={Input} />
-                        </FormItem>
-
-                        <FormItem
-                          label="Corner Radius"
-                          invalid={
-                            errors.commonSeriesSettingsDto?.cornerRadius &&
-                            touched.commonSeriesSettingsDto?.cornerRadius
-                          }
-                          errorMessage={errors.commonSeriesSettingsDto?.cornerRadius}
-                        >
-                          <Field
-                            type="number"
-                            name="commonSeriesSettingsDto.cornerRadius"
-                            component={Input}
-                          />
-                        </FormItem>
-
-                        <FormItem
-                          label="Type"
-                          invalid={
-                            errors.commonSeriesSettingsDto?.dashStyle &&
-                            touched.commonSeriesSettingsDto?.dashStyle
-                          }
-                          errorMessage={errors.commonSeriesSettingsDto?.dashStyle}
-                        >
-                          <Field type="text" name="commonSeriesSettingsDto.dashStyle">
-                            {({ field, form }: FieldProps<SelectBoxOption>) => (
-                              <Select
-                                field={field}
-                                form={form}
-                                options={chartSeriesDashStyleOptions}
-                                isClearable={true}
-                                value={chartSeriesDashStyleOptions.filter(
-                                  (option) =>
-                                    option.value === values.commonSeriesSettingsDto.dashStyle,
-                                )}
-                                onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                              />
-                            )}
-                          </Field>
-                        </FormItem>
-
-                        <FormItem
-                          label="Width"
-                          invalid={
-                            errors.commonSeriesSettingsDto?.width &&
-                            touched.commonSeriesSettingsDto?.width
-                          }
-                          errorMessage={errors.commonSeriesSettingsDto?.width}
-                        >
-                          <Field
-                            type="number"
-                            name="commonSeriesSettingsDto.width"
-                            component={Input}
-                          />
-                        </FormItem>
-                      </Card>
-                    </TabContent>
-                  </Tabs>
+                  <ChartEditSeriesTab
+                    values={values}
+                    errors={errors}
+                    touched={touched}
+                    chartValues={chartValues}
+                    setDatabaseOperationsModalData={setDatabaseOperationsModalData}
+                    setConfirmDelete={setConfirmDelete}
+                    valueAxisList={valueAxisList}
+                    valuePaneList={valuePaneList}
+                  />
                 </TabContent>
 
                 <TabContent value="axis">
-                  <Tabs defaultValue="axis_value">
-                    <TabList>
-                      <TabNav value="axis_value">Value Axis</TabNav>
-                      <TabNav value="axis_argument">Argument Axis Options</TabNav>
-                      <TabNav value="axis_common">Common Axis Settings</TabNav>
-                    </TabList>
-                    <TabContent value="axis_value">
-                      <Card className="my-2" bodyClass="p-0">
-                        <Table compact>
-                          <THead>
-                            <Tr>
-                              <Th>
-                                <Button
-                                  shape="circle"
-                                  variant="plain"
-                                  type="button"
-                                  size="xs"
-                                  title="Add"
-                                  icon={<FaPlus />}
-                                  onClick={async (e) => {
-                                    e.preventDefault()
-                                    setDatabaseOperationsModalData({
-                                      id: values.id ?? '',
-                                      index: -1,
-                                      isOpen: 'axis',
-                                      operation: 'insert',
-                                    })
-                                  }}
-                                />
-                              </Th>
-                              <Th>Value Type</Th>
-                              <Th>Position</Th>
-                              <Th>Type</Th>
-                              <Th>Name</Th>
-                              <Th>Title</Th>
-                              <Th>Visible</Th>
-                            </Tr>
-                          </THead>
-                          <TBody>
-                            {chartValues.valueAxisDto.map((row, index) => (
-                              <Tr key={index}>
-                                <Td>
-                                  <div className="flex-wrap inline-flex xl:flex items-center gap-2">
-                                    <Button
-                                      shape="circle"
-                                      variant="plain"
-                                      type="button"
-                                      size="xs"
-                                      title="Edit"
-                                      icon={<FaEdit />}
-                                      onClick={async (e) => {
-                                        e.preventDefault()
-                                        setDatabaseOperationsModalData({
-                                          id: values.id ?? '',
-                                          index,
-                                          isOpen: 'axis',
-                                          operation: 'update',
-                                          axisValues: chartValues.valueAxisDto[index],
-                                        })
-                                      }}
-                                    />
-                                    <Button
-                                      shape="circle"
-                                      variant="plain"
-                                      type="button"
-                                      size="xs"
-                                      title="Delete"
-                                      icon={<FaTrash />}
-                                      onClick={async (e) => {
-                                        e.preventDefault()
-                                        setConfirmDelete({
-                                          isOpen: true,
-                                          id: values.id ?? '',
-                                          fieldName: 'axis',
-                                          index,
-                                        })
-                                      }}
-                                    />
-                                  </div>
-                                </Td>
-                                <Td>{row.valueType}</Td>
-                                <Td>{row.position}</Td>
-                                <Td>{row.type}</Td>
-                                <Td>{row.name}</Td>
-                                <Td>{row.title}</Td>
-                                <Td>{row.visible}</Td>
-                              </Tr>
-                            ))}
-                          </TBody>
-                        </Table>
-                      </Card>
-                    </TabContent>
-                    <TabContent value="axis_argument">
-                      <Card className="my-2">
-                        <FormItem
-                          label="Visible"
-                          invalid={
-                            errors.argumentAxisDto?.visible && touched.argumentAxisDto?.visible
-                          }
-                          errorMessage={errors.argumentAxisDto?.visible}
-                        >
-                          <Field name="argumentAxisDto.visible" component={Checkbox} />
-                        </FormItem>
-
-                        <FormItem
-                          label="Workdays Only"
-                          invalid={
-                            errors.argumentAxisDto?.workdaysOnly &&
-                            touched.argumentAxisDto?.workdaysOnly
-                          }
-                          errorMessage={errors.argumentAxisDto?.workdaysOnly}
-                        >
-                          <Field name="argumentAxisDto.visible" component={Checkbox} />
-                        </FormItem>
-
-                        <FormItem
-                          label="Title"
-                          invalid={errors.argumentAxisDto?.title && touched.argumentAxisDto?.title}
-                          errorMessage={errors.argumentAxisDto?.title}
-                        >
-                          <Field type="text" name="argumentAxisDto.title" component={Input} />
-                        </FormItem>
-
-                        <FormItem
-                          label="Hover Mode"
-                          invalid={
-                            errors.argumentAxisDto?.hoverMode && touched.argumentAxisDto?.hoverMode
-                          }
-                          errorMessage={errors.argumentAxisDto?.hoverMode}
-                        >
-                          <Field type="text" name="argumentAxisDto.hoverMode">
-                            {({ field, form }: FieldProps<SelectBoxOption>) => (
-                              <Select
-                                field={field}
-                                form={form}
-                                options={chartArgumentAxisHoverModeListOptions}
-                                isClearable={true}
-                                value={chartArgumentAxisHoverModeListOptions.filter(
-                                  (option) => option.value === values.argumentAxisDto.hoverMode,
-                                )}
-                                onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                              />
-                            )}
-                          </Field>
-                        </FormItem>
-
-                        <FormItem
-                          label="Argument Type"
-                          invalid={
-                            errors.argumentAxisDto?.argumentType &&
-                            touched.argumentAxisDto?.argumentType
-                          }
-                          errorMessage={errors.argumentAxisDto?.argumentType}
-                        >
-                          <Field type="text" name="argumentAxisDto.argumentType">
-                            {({ field, form }: FieldProps<SelectBoxOption>) => (
-                              <Select
-                                field={field}
-                                form={form}
-                                options={chartArgumentAxisTypeListOptions}
-                                isClearable={true}
-                                value={chartArgumentAxisTypeListOptions.filter(
-                                  (option) => option.value === values.argumentAxisDto.argumentType,
-                                )}
-                                onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                              />
-                            )}
-                          </Field>
-                        </FormItem>
-
-                        <FormItem
-                          label="Position"
-                          invalid={
-                            errors.argumentAxisDto?.position && touched.argumentAxisDto?.position
-                          }
-                          errorMessage={errors.argumentAxisDto?.position}
-                        >
-                          <Field type="text" name="argumentAxisDto.position">
-                            {({ field, form }: FieldProps<SelectBoxOption>) => (
-                              <Select
-                                field={field}
-                                form={form}
-                                options={chartArgumentAxisPositionListOptions}
-                                isClearable={true}
-                                value={chartArgumentAxisPositionListOptions.filter(
-                                  (option) => option.value === values.argumentAxisDto.position,
-                                )}
-                                onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                              />
-                            )}
-                          </Field>
-                        </FormItem>
-
-                        <FormItem
-                          label="Width"
-                          invalid={errors.argumentAxisDto?.width && touched.argumentAxisDto?.width}
-                          errorMessage={errors.argumentAxisDto?.width}
-                        >
-                          <Field type="number" name="argumentAxisDto.width" component={Input} />
-                        </FormItem>
-
-                        <FormItem
-                          label="Aggregation Interval"
-                          invalid={
-                            errors.argumentAxisDto?.aggregationInterval &&
-                            touched.argumentAxisDto?.aggregationInterval
-                          }
-                          errorMessage={errors.argumentAxisDto?.aggregationInterval}
-                        >
-                          <Field type="text" name="argumentAxisDto.aggregationInterval">
-                            {({ field, form }: FieldProps<SelectBoxOption>) => (
-                              <Select
-                                field={field}
-                                form={form}
-                                options={chartArgumentAxisIntervalListOptions}
-                                isClearable={true}
-                                value={chartArgumentAxisIntervalListOptions.filter(
-                                  (option) =>
-                                    option.value === values.argumentAxisDto.aggregationInterval,
-                                )}
-                                onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                              />
-                            )}
-                          </Field>
-                        </FormItem>
-                      </Card>
-
-                      <Card className="my-2" header="Argument Axis - Grid">
-                        <FormItem
-                          label="Visible"
-                          invalid={
-                            errors.argumentAxisDto?.grid?.visible &&
-                            touched.argumentAxisDto?.grid?.visible
-                          }
-                          errorMessage={errors.argumentAxisDto?.grid?.visible}
-                        >
-                          <Field name="argumentAxisDto.grid.visible" component={Checkbox} />
-                        </FormItem>
-
-                        <FormItem
-                          label="Color"
-                          invalid={
-                            errors.argumentAxisDto?.grid?.color &&
-                            touched.argumentAxisDto?.grid?.color
-                          }
-                          errorMessage={errors.argumentAxisDto?.grid?.color}
-                        >
-                          <Field type="text" name="argumentAxisDto.grid.color" component={Input} />
-                        </FormItem>
-
-                        <FormItem
-                          label="Width"
-                          invalid={
-                            errors.argumentAxisDto?.grid?.width &&
-                            touched.argumentAxisDto?.grid?.width
-                          }
-                          errorMessage={errors.argumentAxisDto?.grid?.width}
-                        >
-                          <Field
-                            type="number"
-                            name="argumentAxisDto.grid.width"
-                            component={Input}
-                          />
-                        </FormItem>
-                      </Card>
-
-                      <Card className="my-2" header="Argument Axis - Label">
-                        <FormItem
-                          label="Position"
-                          invalid={
-                            errors.argumentAxisDto?.label?.displayMode &&
-                            touched.argumentAxisDto?.label?.displayMode
-                          }
-                          errorMessage={errors.argumentAxisDto?.label?.displayMode}
-                        >
-                          <Field type="text" name="argumentAxisDto.label.displayMode">
-                            {({ field, form }: FieldProps<SelectBoxOption>) => (
-                              <Select
-                                field={field}
-                                form={form}
-                                options={chartArgumentAxisLabelDisplayModeListOptions}
-                                isClearable={true}
-                                value={chartArgumentAxisLabelDisplayModeListOptions.filter(
-                                  (option) =>
-                                    option.value === values.argumentAxisDto.label.displayMode,
-                                )}
-                                onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                              />
-                            )}
-                          </Field>
-                        </FormItem>
-
-                        <FormItem
-                          label="Rotation Angle"
-                          invalid={
-                            errors.argumentAxisDto?.label?.rotationAngle &&
-                            touched.argumentAxisDto?.label?.rotationAngle
-                          }
-                          errorMessage={errors.argumentAxisDto?.label?.rotationAngle}
-                        >
-                          <Field
-                            type="number"
-                            name="argumentAxisDto.label.rotationAngle"
-                            component={Input}
-                          />
-                        </FormItem>
-
-                        <FormItem
-                          label="Overlapping Behavior"
-                          invalid={
-                            errors.argumentAxisDto?.label?.overlappingBehavior &&
-                            touched.argumentAxisDto?.label?.overlappingBehavior
-                          }
-                          errorMessage={errors.argumentAxisDto?.label?.overlappingBehavior}
-                        >
-                          <Field type="text" name="argumentAxisDto.label.overlappingBehavior">
-                            {({ field, form }: FieldProps<SelectBoxOption>) => (
-                              <Select
-                                field={field}
-                                form={form}
-                                options={chartArgumentAxisLabelOverlappingBehaviorListOptions}
-                                isClearable={true}
-                                value={chartArgumentAxisLabelOverlappingBehaviorListOptions.filter(
-                                  (option) =>
-                                    option.value ===
-                                    values.argumentAxisDto.label.overlappingBehavior,
-                                )}
-                                onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                              />
-                            )}
-                          </Field>
-                        </FormItem>
-                      </Card>
-                    </TabContent>
-                    <TabContent value="axis_common">
-                      <Card className="my-2">
-                        <FormItem
-                          label="Visible"
-                          invalid={
-                            errors.commonAxisSettingsDto?.visible &&
-                            touched.commonAxisSettingsDto?.visible
-                          }
-                          errorMessage={errors.commonAxisSettingsDto?.visible}
-                        >
-                          <Field name="commonAxisSettingsDto.visible" component={Checkbox} />
-                        </FormItem>
-
-                        <FormItem
-                          label="Title"
-                          invalid={
-                            errors.commonAxisSettingsDto?.title &&
-                            touched.commonAxisSettingsDto?.title
-                          }
-                          errorMessage={errors.commonAxisSettingsDto?.title}
-                        >
-                          <Field type="text" name="title" component={Input} />
-                        </FormItem>
-
-                        <FormItem
-                          label="Width"
-                          invalid={
-                            errors.commonAxisSettingsDto?.width &&
-                            touched.commonAxisSettingsDto?.width
-                          }
-                          errorMessage={errors.commonAxisSettingsDto?.width}
-                        >
-                          <Field
-                            type="number"
-                            name="commonAxisSettingsDto.width"
-                            component={Input}
-                          />
-                        </FormItem>
-                      </Card>
-
-                      <Card className="my-2" header="Common Axis Settings - Grid">
-                        <FormItem
-                          label="Visible"
-                          invalid={
-                            errors.commonAxisSettingsDto?.grid?.visible &&
-                            touched.commonAxisSettingsDto?.grid?.visible
-                          }
-                          errorMessage={errors.commonAxisSettingsDto?.grid?.visible}
-                        >
-                          <Field name="commonAxisSettingsDto.grid.visible" component={Checkbox} />
-                        </FormItem>
-
-                        <FormItem
-                          label="Color"
-                          invalid={
-                            errors.commonAxisSettingsDto?.grid?.color &&
-                            touched.commonAxisSettingsDto?.grid?.color
-                          }
-                          errorMessage={errors.commonAxisSettingsDto?.grid?.color}
-                        >
-                          <Field
-                            type="text"
-                            name="commonAxisSettingsDto.grid.color"
-                            component={Input}
-                          />
-                        </FormItem>
-
-                        <FormItem
-                          label="Width"
-                          invalid={
-                            errors.commonAxisSettingsDto?.grid?.width &&
-                            touched.commonAxisSettingsDto?.grid?.width
-                          }
-                          errorMessage={errors.commonAxisSettingsDto?.grid?.width}
-                        >
-                          <Field
-                            type="number"
-                            name="commonAxisSettingsDto.grid.width"
-                            component={Input}
-                          />
-                        </FormItem>
-                      </Card>
-                    </TabContent>
-                  </Tabs>
+                  <ChartEditAxisTab
+                    values={values}
+                    errors={errors}
+                    touched={touched}
+                    chartValues={chartValues}
+                    setDatabaseOperationsModalData={setDatabaseOperationsModalData}
+                    setConfirmDelete={setConfirmDelete}
+                  />
                 </TabContent>
 
                 <TabContent value="panes">
-                  <Card className="my-2">
-                    <FormItem
-                      label="Background Color"
-                      invalid={
-                        errors.commonPaneSettingsDto?.backgroundColor &&
-                        touched.commonPaneSettingsDto?.backgroundColor
-                      }
-                      errorMessage={errors.commonPaneSettingsDto?.backgroundColor}
-                    >
-                      <Field
-                        type="text"
-                        name="commonPaneSettingsDto.backgroundColor"
-                        component={Input}
-                      />
-                    </FormItem>
-                  </Card>
-                  <Card className="my-2" bodyClass="p-0">
-                    <Table compact>
-                      <THead>
-                        <Tr>
-                          <Th>
-                            <Button
-                              shape="circle"
-                              variant="plain"
-                              type="button"
-                              size="xs"
-                              title="Add"
-                              icon={<FaFileMedical />}
-                              onClick={async (e) => {
-                                e.preventDefault()
-                                setDatabaseOperationsModalData({
-                                  id: values.id ?? '',
-                                  index: -1,
-                                  isOpen: 'pane',
-                                  operation: 'insert',
-                                })
-                              }}
-                            />
-                          </Th>
-                          <Th>Name</Th>
-                          <Th>Background Color</Th>
-                          <Th>Height</Th>
-                        </Tr>
-                      </THead>
-                      <TBody>
-                        {chartValues.panesDto.map((row, index) => (
-                          <Tr key={index}>
-                            <Td>
-                              <div className="flex-wrap inline-flex xl:flex items-center gap-2">
-                                <Button
-                                  shape="circle"
-                                  variant="plain"
-                                  type="button"
-                                  size="xs"
-                                  title="Edit"
-                                  icon={<FaEdit />}
-                                  onClick={async (e) => {
-                                    e.preventDefault()
-                                    setDatabaseOperationsModalData({
-                                      id: values.id ?? '',
-                                      index,
-                                      isOpen: 'pane',
-                                      operation: 'update',
-                                      panesValues: chartValues.panesDto[index],
-                                    })
-                                  }}
-                                />
-                                <Button
-                                  shape="circle"
-                                  variant="plain"
-                                  type="button"
-                                  size="xs"
-                                  title="Delete"
-                                  icon={<FaTrash />}
-                                  onClick={async (e) => {
-                                    e.preventDefault()
-                                    setConfirmDelete({
-                                      isOpen: true,
-                                      id: values.id ?? '',
-                                      fieldName: 'pane',
-                                      index,
-                                    })
-                                  }}
-                                />
-                              </div>
-                            </Td>
-                            <Td>{row.name}</Td>
-                            <Td>{row.backgroundColor}</Td>
-                            <Td>{row.height}</Td>
-                          </Tr>
-                        ))}
-                      </TBody>
-                    </Table>
-                  </Card>
+                  <ChartEditPanesTab
+                    values={values}
+                    errors={errors}
+                    touched={touched}
+                    chartValues={chartValues}
+                    setDatabaseOperationsModalData={setDatabaseOperationsModalData}
+                    setConfirmDelete={setConfirmDelete}
+                  />
                 </TabContent>
 
                 <TabContent value="animationsOptions">
-                  <Card className="my-2">
-                    <FormItem
-                      label="Enabled"
-                      invalid={errors.animationDto?.enabled && touched.animationDto?.enabled}
-                      errorMessage={errors.animationDto?.enabled}
-                    >
-                      <Field name="animationDto.enabled" component={Checkbox} />
-                    </FormItem>
-
-                    <FormItem
-                      label="Easing"
-                      invalid={errors.animationDto?.easing && touched.animationDto?.easing}
-                      errorMessage={errors.animationDto?.easing}
-                    >
-                      <Field type="text" name="animationDto.easing">
-                        {({ field, form }: FieldProps<SelectBoxOption>) => (
-                          <Select
-                            field={field}
-                            form={form}
-                            options={chartEasingListOptions}
-                            isClearable={true}
-                            value={chartEasingListOptions.filter(
-                              (option) => option.value === values.animationDto.easing,
-                            )}
-                            onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                          />
-                        )}
-                      </Field>
-                    </FormItem>
-
-                    <FormItem
-                      label="Duration"
-                      invalid={errors.animationDto?.duration && touched.animationDto?.duration}
-                      errorMessage={errors.animationDto?.duration}
-                    >
-                      <Field type="number" name="animationDto.duration" component={Input} />
-                    </FormItem>
-
-                    <FormItem
-                      label="Max Point Count Supported"
-                      invalid={
-                        errors.animationDto?.maxPointCountSupported &&
-                        touched.animationDto?.maxPointCountSupported
-                      }
-                      errorMessage={errors.animationDto?.maxPointCountSupported}
-                    >
-                      <Field
-                        type="number"
-                        name="animationDto.maxPointCountSupported"
-                        component={Input}
-                      />
-                    </FormItem>
-                  </Card>
+                  <ChartTabAnimation values={values} errors={errors} touched={touched} />
                 </TabContent>
 
                 <TabContent value="crosshairOptions">
-                  <Card className="my-2">
-                    <FormItem
-                      label="Enabled"
-                      invalid={errors.crosshairDto?.enabled && touched.crosshairDto?.enabled}
-                      errorMessage={errors.crosshairDto?.enabled}
-                    >
-                      <Field name="crosshairDto.enabled" component={Checkbox} />
-                    </FormItem>
-
-                    <FormItem
-                      label="Color"
-                      invalid={errors.crosshairDto?.color && touched.crosshairDto?.color}
-                      errorMessage={errors.crosshairDto?.color}
-                    >
-                      <Field type="text" name="crosshairDto.color" component={Input} />
-                    </FormItem>
-
-                    <FormItem
-                      label="Dash Style"
-                      invalid={errors.crosshairDto?.dashStyle && touched.crosshairDto?.dashStyle}
-                      errorMessage={errors.crosshairDto?.dashStyle}
-                    >
-                      <Field type="text" name="crosshairDto.dashStyle">
-                        {({ field, form }: FieldProps<SelectBoxOption>) => (
-                          <Select
-                            field={field}
-                            form={form}
-                            options={chartSeriesDashStyleOptions}
-                            isClearable={true}
-                            value={chartSeriesDashStyleOptions.filter(
-                              (option) => option.value === values.crosshairDto.dashStyle,
-                            )}
-                            onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                          />
-                        )}
-                      </Field>
-                    </FormItem>
-
-                    <FormItem
-                      label="Width"
-                      invalid={errors.crosshairDto?.width && touched.crosshairDto?.width}
-                      errorMessage={errors.crosshairDto?.width}
-                    >
-                      <Field type="numner" name="crosshairDto.width" component={Input} />
-                    </FormItem>
-                  </Card>
-
-                  <Card className="my-2" header="Crosshair Options - Label">
-                    <FormItem
-                      label="Visible"
-                      invalid={
-                        errors.crosshairDto?.label?.visible && touched.crosshairDto?.label?.visible
-                      }
-                      errorMessage={errors.crosshairDto?.label?.visible}
-                    >
-                      <Field name="crosshairDto.label.visible" component={Checkbox} />
-                    </FormItem>
-
-                    <FormItem
-                      label="Background Color"
-                      invalid={
-                        errors.crosshairDto?.label?.backgroundColor &&
-                        touched.crosshairDto?.label?.backgroundColor
-                      }
-                      errorMessage={errors.crosshairDto?.label?.backgroundColor}
-                    >
-                      <Field
-                        type="text"
-                        name="crosshairDto.label.backgroundColor"
-                        component={Input}
-                      />
-                    </FormItem>
-
-                    <FormItem
-                      label="Format"
-                      invalid={
-                        errors.crosshairDto?.label?.format && touched.crosshairDto?.label?.format
-                      }
-                      errorMessage={errors.crosshairDto?.label?.format}
-                    >
-                      <Field type="text" name="crosshairDto.label.format">
-                        {({ field, form }: FieldProps<SelectBoxOption>) => (
-                          <Select
-                            field={field}
-                            form={form}
-                            options={tooltipFormatListOptions}
-                            isClearable={true}
-                            value={tooltipFormatListOptions.filter(
-                              (option) => option.value === values.crosshairDto.label.format,
-                            )}
-                            onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                          />
-                        )}
-                      </Field>
-                    </FormItem>
-
-                    <FormItem
-                      label="Customize Text"
-                      invalid={
-                        errors.crosshairDto?.label?.customizeText &&
-                        touched.crosshairDto?.label?.customizeText
-                      }
-                      errorMessage={errors.crosshairDto?.label?.customizeText}
-                    >
-                      <Field
-                        type="text"
-                        name="crosshairDto.label.customizeText"
-                        component={Input}
-                      />
-                    </FormItem>
-                  </Card>
-
-                  <Card className="my-2" header="Crosshair Options - Label - Font">
-                    <FormItem
-                      label="Color"
-                      invalid={
-                        errors.crosshairDto?.label?.font?.color &&
-                        touched.crosshairDto?.label?.font?.color
-                      }
-                      errorMessage={errors.crosshairDto?.label?.font?.color}
-                    >
-                      <Field type="text" name="crosshairDto.label.font.color" component={Input} />
-                    </FormItem>
-
-                    <FormItem
-                      label="Family"
-                      invalid={
-                        errors.crosshairDto?.label?.font?.family &&
-                        touched.crosshairDto?.label?.font?.family
-                      }
-                      errorMessage={errors.crosshairDto?.label?.font?.family}
-                    >
-                      <Field type="text" name="crosshairDto.label.font.family" component={Input} />
-                    </FormItem>
-
-                    <FormItem
-                      label="Size"
-                      invalid={
-                        errors.crosshairDto?.label?.font?.size &&
-                        touched.crosshairDto?.label?.font?.size
-                      }
-                      errorMessage={errors.crosshairDto?.label?.font?.size}
-                    >
-                      <Field type="number" name="crosshairDto.label.font.size" component={Input} />
-                    </FormItem>
-
-                    <FormItem
-                      label="Weight"
-                      invalid={
-                        errors.crosshairDto?.label?.font?.weight &&
-                        touched.crosshairDto?.label?.font?.weight
-                      }
-                      errorMessage={errors.crosshairDto?.label?.font?.weight}
-                    >
-                      <Field type="number" name="crosshairDto.label.font.size" component={Input} />
-                    </FormItem>
-                  </Card>
-
-                  <Card className="my-2" header="Crosshair Options - Label - Horizontal Line">
-                    <FormItem
-                      label="Visible"
-                      invalid={
-                        errors.crosshairDto?.horizontalLine?.visible &&
-                        touched.crosshairDto?.horizontalLine?.visible
-                      }
-                      errorMessage={errors.crosshairDto?.horizontalLine?.visible}
-                    >
-                      <Field name="crosshairDto.horizontalLine.visible" component={Checkbox} />
-                    </FormItem>
-
-                    <FormItem
-                      label="Color"
-                      invalid={
-                        errors.crosshairDto?.horizontalLine?.color &&
-                        touched.crosshairDto?.horizontalLine?.color
-                      }
-                      errorMessage={errors.crosshairDto?.horizontalLine?.color}
-                    >
-                      <Field
-                        type="text"
-                        name="crosshairDto.horizontalLine.color"
-                        component={Input}
-                      />
-                    </FormItem>
-
-                    <FormItem
-                      label="Dash Style"
-                      invalid={
-                        errors.crosshairDto?.horizontalLine?.dashStyle &&
-                        touched.crosshairDto?.horizontalLine?.dashStyle
-                      }
-                      errorMessage={errors.crosshairDto?.horizontalLine?.dashStyle}
-                    >
-                      <Field type="text" name="crosshairDto.horizontalLine.dashStyle">
-                        {({ field, form }: FieldProps<SelectBoxOption>) => (
-                          <Select
-                            field={field}
-                            form={form}
-                            options={chartSeriesDashStyleOptions}
-                            isClearable={true}
-                            value={chartSeriesDashStyleOptions.filter(
-                              (option) =>
-                                option.value === values.crosshairDto.horizontalLine.dashStyle,
-                            )}
-                            onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                          />
-                        )}
-                      </Field>
-                    </FormItem>
-
-                    <FormItem
-                      label="Width"
-                      invalid={
-                        errors.crosshairDto?.horizontalLine?.width &&
-                        touched.crosshairDto?.horizontalLine?.width
-                      }
-                      errorMessage={errors.crosshairDto?.horizontalLine?.width}
-                    >
-                      <Field
-                        type="numner"
-                        name="crosshairDto.horizontalLine.width"
-                        component={Input}
-                      />
-                    </FormItem>
-                  </Card>
-
-                  <Card
-                    className="my-2"
-                    header="Crosshair Options - Label - Horizontal Line - Font"
-                  >
-                    <FormItem
-                      label="Color"
-                      invalid={
-                        errors.crosshairDto?.horizontalLine?.label?.font?.color &&
-                        touched.crosshairDto?.horizontalLine?.label?.font?.color
-                      }
-                      errorMessage={errors.crosshairDto?.horizontalLine?.label?.font?.color}
-                    >
-                      <Field
-                        type="text"
-                        name="crosshairDto.horizontalLine.label.font.color"
-                        component={Input}
-                      />
-                    </FormItem>
-
-                    <FormItem
-                      label="Family"
-                      invalid={
-                        errors.crosshairDto?.horizontalLine?.label?.font?.family &&
-                        touched.crosshairDto?.horizontalLine?.label?.font?.family
-                      }
-                      errorMessage={errors.crosshairDto?.horizontalLine?.label?.font?.family}
-                    >
-                      <Field
-                        type="text"
-                        name="crosshairDto.horizontalLine.label.font.family"
-                        component={Input}
-                      />
-                    </FormItem>
-
-                    <FormItem
-                      label="Size"
-                      invalid={
-                        errors.crosshairDto?.horizontalLine?.label?.font?.size &&
-                        touched.crosshairDto?.horizontalLine?.label?.font?.size
-                      }
-                      errorMessage={errors.crosshairDto?.horizontalLine?.label?.font?.size}
-                    >
-                      <Field
-                        type="number"
-                        name="crosshairDto.horizontalLine.label.font.size"
-                        component={Input}
-                      />
-                    </FormItem>
-
-                    <FormItem
-                      label="Weight"
-                      invalid={
-                        errors.crosshairDto?.horizontalLine?.label?.font?.weight &&
-                        touched.crosshairDto?.horizontalLine?.label?.font?.weight
-                      }
-                      errorMessage={errors.crosshairDto?.horizontalLine?.label?.font?.weight}
-                    >
-                      <Field
-                        type="number"
-                        name="crosshairDto.horizontalLine.label.font.weight"
-                        component={Input}
-                      />
-                    </FormItem>
-                  </Card>
-
-                  <Card className="my-2" header="Crosshair Options - Label - Vertical Line">
-                    <FormItem
-                      label="Visible"
-                      invalid={
-                        errors.crosshairDto?.verticalLine?.visible &&
-                        touched.crosshairDto?.verticalLine?.visible
-                      }
-                      errorMessage={errors.crosshairDto?.verticalLine?.visible}
-                    >
-                      <Field name="crosshairDto.verticalLine.visible" component={Checkbox} />
-                    </FormItem>
-
-                    <FormItem
-                      label="Color"
-                      invalid={
-                        errors.crosshairDto?.verticalLine?.color &&
-                        touched.crosshairDto?.verticalLine?.color
-                      }
-                      errorMessage={errors.crosshairDto?.verticalLine?.color}
-                    >
-                      <Field type="text" name="crosshairDto.verticalLine.color" component={Input} />
-                    </FormItem>
-
-                    <FormItem
-                      label="Dash Style"
-                      invalid={
-                        errors.crosshairDto?.verticalLine?.dashStyle &&
-                        touched.crosshairDto?.verticalLine?.dashStyle
-                      }
-                      errorMessage={errors.crosshairDto?.verticalLine?.dashStyle}
-                    >
-                      <Field type="text" name="crosshairDto.verticalLine.dashStyle">
-                        {({ field, form }: FieldProps<SelectBoxOption>) => (
-                          <Select
-                            field={field}
-                            form={form}
-                            options={chartSeriesDashStyleOptions}
-                            isClearable={true}
-                            value={chartSeriesDashStyleOptions.filter(
-                              (option) =>
-                                option.value === values.crosshairDto.verticalLine.dashStyle,
-                            )}
-                            onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                          />
-                        )}
-                      </Field>
-                    </FormItem>
-
-                    <FormItem
-                      label="Width"
-                      invalid={
-                        errors.crosshairDto?.verticalLine?.width &&
-                        touched.crosshairDto?.verticalLine?.width
-                      }
-                      errorMessage={errors.crosshairDto?.verticalLine?.width}
-                    >
-                      <Field
-                        type="numner"
-                        name="crosshairDto.verticalLine.width"
-                        component={Input}
-                      />
-                    </FormItem>
-                  </Card>
-
-                  <Card
-                    className="my-2"
-                    header="Crosshair Options - Label - Horizontal Line - Font"
-                  >
-                    <FormItem
-                      label="Color"
-                      invalid={
-                        errors.crosshairDto?.verticalLine?.label?.font?.color &&
-                        touched.crosshairDto?.verticalLine?.label?.font?.color
-                      }
-                      errorMessage={errors.crosshairDto?.verticalLine?.label?.font?.color}
-                    >
-                      <Field
-                        type="text"
-                        name="crosshairDto.verticalLine.label.font.color"
-                        component={Input}
-                      />
-                    </FormItem>
-
-                    <FormItem
-                      label="Family"
-                      invalid={
-                        errors.crosshairDto?.verticalLine?.label?.font?.family &&
-                        touched.crosshairDto?.verticalLine?.label?.font?.family
-                      }
-                      errorMessage={errors.crosshairDto?.verticalLine?.label?.font?.family}
-                    >
-                      <Field
-                        type="text"
-                        name="crosshairDto.verticalLine.label.font.family"
-                        component={Input}
-                      />
-                    </FormItem>
-
-                    <FormItem
-                      label="Size"
-                      invalid={
-                        errors.crosshairDto?.verticalLine?.label?.font?.size &&
-                        touched.crosshairDto?.verticalLine?.label?.font?.size
-                      }
-                      errorMessage={errors.crosshairDto?.verticalLine?.label?.font?.size}
-                    >
-                      <Field
-                        type="number"
-                        name="crosshairDto.verticalLine.label.font.size"
-                        component={Input}
-                      />
-                    </FormItem>
-
-                    <FormItem
-                      label="Weight"
-                      invalid={
-                        errors.crosshairDto?.verticalLine?.label?.font?.weight &&
-                        touched.crosshairDto?.verticalLine?.label?.font?.weight
-                      }
-                      errorMessage={errors.crosshairDto?.verticalLine?.label?.font?.weight}
-                    >
-                      <Field
-                        type="number"
-                        name="crosshairDto.verticalLine.label.font.weight"
-                        component={Input}
-                      />
-                    </FormItem>
-                  </Card>
+                  <ChartEditCrosshairTab values={values} errors={errors} touched={touched} />
                 </TabContent>
 
                 <TabContent value="exportSettings">
-                  <Card className="my-2">
-                    <FormItem
-                      label="Enabled"
-                      invalid={errors.exportDto?.enabled && touched.exportDto?.enabled}
-                      errorMessage={errors.exportDto?.enabled}
-                    >
-                      <Field name="exportDto.enabled" component={Checkbox} />
-                    </FormItem>
-
-                    <FormItem
-                      label="Printing Enabled"
-                      invalid={
-                        errors.exportDto?.printingEnabled && touched.exportDto?.printingEnabled
-                      }
-                      errorMessage={errors.exportDto?.printingEnabled}
-                    >
-                      <Field name="exportDto.printingEnabled" component={Checkbox} />
-                    </FormItem>
-
-                    <FormItem
-                      label="Background Color"
-                      invalid={
-                        errors.exportDto?.backgroundColor && touched.exportDto?.backgroundColor
-                      }
-                      errorMessage={errors.exportDto?.backgroundColor}
-                    >
-                      <Field type="text" name="exportDto.backgroundColor" component={Input} />
-                    </FormItem>
-
-                    <FormItem
-                      label="Margin"
-                      invalid={errors.exportDto?.margin && touched.exportDto?.margin}
-                      errorMessage={errors.exportDto?.margin}
-                    >
-                      <Field type="number" name="exportDto.margin" component={Input} />
-                    </FormItem>
-                  </Card>
+                  <ChartEditExportTab errors={errors} touched={touched} />
                 </TabContent>
 
                 <TabContent value="legendSettings">
-                  <Tabs defaultValue="legendSettings_general">
-                    <TabList>
-                      <TabNav value="legendSettings_general">General</TabNav>
-                      <TabNav value="legendSettings_border">Border</TabNav>
-                    </TabList>
-                    <TabContent value="legendSettings_general">
-                      <Card className="my-2">
-                        <FormItem
-                          label="Visible"
-                          invalid={errors.legendDto?.visible && touched.legendDto?.visible}
-                          errorMessage={errors.legendDto?.visible}
-                        >
-                          <Field name="legendDto.visible" component={Checkbox} />
-                        </FormItem>
-
-                        <FormItem
-                          label="Background Color"
-                          invalid={
-                            errors.legendDto?.backgroundColor && touched.legendDto?.backgroundColor
-                          }
-                          errorMessage={errors.legendDto?.backgroundColor}
-                        >
-                          <Field name="legendDto.backgroundColor" component={Input} />
-                        </FormItem>
-
-                        <FormItem
-                          label="Title"
-                          invalid={errors.legendDto?.title && touched.legendDto?.title}
-                          errorMessage={errors.legendDto?.title}
-                        >
-                          <Field name="legendDto.title" component={Input} />
-                        </FormItem>
-
-                        <FormItem
-                          label="Orientation"
-                          invalid={errors.legendDto?.orientation && touched.legendDto?.orientation}
-                          errorMessage={errors.legendDto?.orientation}
-                        >
-                          <Field type="text" name="legendDto.orientation">
-                            {({ field, form }: FieldProps<SelectBoxOption>) => (
-                              <Select
-                                field={field}
-                                form={form}
-                                options={chartLegendOrientationListOptions}
-                                isClearable={true}
-                                value={chartLegendOrientationListOptions.filter(
-                                  (option) => option.value === values.legendDto.orientation,
-                                )}
-                                onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                              />
-                            )}
-                          </Field>
-                        </FormItem>
-
-                        <FormItem
-                          label="Position"
-                          invalid={errors.legendDto?.position && touched.legendDto?.position}
-                          errorMessage={errors.legendDto?.position}
-                        >
-                          <Field type="text" name="legendDto.position">
-                            {({ field, form }: FieldProps<SelectBoxOption>) => (
-                              <Select
-                                field={field}
-                                form={form}
-                                options={chartLegendPositionListOptions}
-                                isClearable={true}
-                                value={chartLegendPositionListOptions.filter(
-                                  (option) => option.value === values.legendDto.position,
-                                )}
-                                onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                              />
-                            )}
-                          </Field>
-                        </FormItem>
-
-                        <FormItem
-                          label="Row Count"
-                          invalid={errors.legendDto?.rowCount && touched.legendDto?.rowCount}
-                          errorMessage={errors.legendDto?.rowCount}
-                        >
-                          <Field type="number" name="legendDto.rowCount" component={Input} />
-                        </FormItem>
-
-                        <FormItem
-                          label="Column Count"
-                          invalid={errors.legendDto?.columnCount && touched.legendDto?.columnCount}
-                          errorMessage={errors.legendDto?.columnCount}
-                        >
-                          <Field type="number" name="legendDto.columnCount" component={Input} />
-                        </FormItem>
-                      </Card>
-                    </TabContent>
-                    <TabContent value="legendSettings_border">
-                      <Card className="my-2">
-                        <FormItem
-                          label="Visible"
-                          invalid={
-                            errors.legendDto?.border?.visible && touched.legendDto?.border?.visible
-                          }
-                          errorMessage={errors.legendDto?.border?.visible}
-                        >
-                          <Field name="legendDto.border.visible" component={Checkbox} />
-                        </FormItem>
-
-                        <FormItem
-                          label="Color"
-                          invalid={
-                            errors.legendDto?.border?.color && touched.legendDto?.border?.color
-                          }
-                          errorMessage={errors.legendDto?.border?.color}
-                        >
-                          <Field name="legendDto.border.color" component={Input} />
-                        </FormItem>
-
-                        <FormItem
-                          label="Dash Style"
-                          invalid={
-                            errors.legendDto?.border?.dashStyle &&
-                            touched.legendDto?.border?.dashStyle
-                          }
-                          errorMessage={errors.legendDto?.border?.dashStyle}
-                        >
-                          <Field type="text" name="legendDto.border.dashStyle">
-                            {({ field, form }: FieldProps<SelectBoxOption>) => (
-                              <Select
-                                field={field}
-                                form={form}
-                                options={chartSeriesDashStyleOptions}
-                                isClearable={true}
-                                value={chartSeriesDashStyleOptions.filter(
-                                  (option) => option.value === values.legendDto.border.dashStyle,
-                                )}
-                                onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                              />
-                            )}
-                          </Field>
-                        </FormItem>
-
-                        <FormItem
-                          label="Width"
-                          invalid={
-                            errors.legendDto?.border?.width && touched.legendDto?.border?.width
-                          }
-                          errorMessage={errors.legendDto?.border?.width}
-                        >
-                          <Field type="number" name="legendDto.border.width" component={Input} />
-                        </FormItem>
-
-                        <FormItem
-                          label="Corner Radius"
-                          invalid={
-                            errors.legendDto?.border?.cornerRadius &&
-                            touched.legendDto?.border?.cornerRadius
-                          }
-                          errorMessage={errors.legendDto?.border?.cornerRadius}
-                        >
-                          <Field
-                            type="number"
-                            name="legendDto.border.cornerRadius"
-                            component={Input}
-                          />
-                        </FormItem>
-                      </Card>
-                    </TabContent>
-                  </Tabs>
+                  <ChartTabLegend values={values} errors={errors} touched={touched} />
                 </TabContent>
 
                 <TabContent value="zoomAndPanSettings">
-                  <Card className="my-2">
-                    <FormItem
-                      label="Allow Mouse Wheel"
-                      invalid={
-                        errors.zoomAndPanDto?.allowMouseWheel &&
-                        touched.zoomAndPanDto?.allowMouseWheel
-                      }
-                      errorMessage={errors.zoomAndPanDto?.allowMouseWheel}
-                    >
-                      <Field name="zoomAndPanDto.allowMouseWheel" component={Checkbox} />
-                    </FormItem>
-
-                    <FormItem
-                      label="Allow Touch Gestures"
-                      invalid={
-                        errors.zoomAndPanDto?.allowTouchGestures &&
-                        touched.zoomAndPanDto?.allowTouchGestures
-                      }
-                      errorMessage={errors.zoomAndPanDto?.allowTouchGestures}
-                    >
-                      <Field name="zoomAndPanDto.allowTouchGestures" component={Checkbox} />
-                    </FormItem>
-
-                    <FormItem
-                      label="Drag To Zoom"
-                      invalid={
-                        errors.zoomAndPanDto?.dragToZoom && touched.zoomAndPanDto?.dragToZoom
-                      }
-                      errorMessage={errors.zoomAndPanDto?.dragToZoom}
-                    >
-                      <Field name="zoomAndPanDto.dragToZoom" component={Checkbox} />
-                    </FormItem>
-
-                    <FormItem
-                      label="Argument Axis"
-                      invalid={
-                        errors.zoomAndPanDto?.argumentAxis && touched.zoomAndPanDto?.argumentAxis
-                      }
-                      errorMessage={errors.zoomAndPanDto?.argumentAxis}
-                    >
-                      <Field type="text" name="zoomAndPanDto.argumentAxis">
-                        {({ field, form }: FieldProps<SelectBoxOption>) => (
-                          <Select
-                            field={field}
-                            form={form}
-                            options={chartZoomAndPanAxisOptions}
-                            isClearable={true}
-                            value={chartZoomAndPanAxisOptions.filter(
-                              (option) => option.value === values.zoomAndPanDto.argumentAxis,
-                            )}
-                            onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                          />
-                        )}
-                      </Field>
-                    </FormItem>
-
-                    <FormItem
-                      label="Value Axis"
-                      invalid={errors.zoomAndPanDto?.valueAxis && touched.zoomAndPanDto?.valueAxis}
-                      errorMessage={errors.zoomAndPanDto?.valueAxis}
-                    >
-                      <Field type="text" name="zoomAndPanDto.valueAxis">
-                        {({ field, form }: FieldProps<SelectBoxOption>) => (
-                          <Select
-                            field={field}
-                            form={form}
-                            options={chartZoomAndPanAxisOptions}
-                            isClearable={true}
-                            value={chartZoomAndPanAxisOptions.filter(
-                              (option) => option.value === values.zoomAndPanDto.valueAxis,
-                            )}
-                            onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                          />
-                        )}
-                      </Field>
-                    </FormItem>
-
-                    <FormItem
-                      label="Pan Key"
-                      invalid={errors.zoomAndPanDto?.panKey && touched.zoomAndPanDto?.panKey}
-                      errorMessage={errors.zoomAndPanDto?.panKey}
-                    >
-                      <Field type="text" name="zoomAndPanDto.panKey">
-                        {({ field, form }: FieldProps<SelectBoxOption>) => (
-                          <Select
-                            field={field}
-                            form={form}
-                            options={chartZoomAndPanKeyOptions}
-                            isClearable={true}
-                            value={chartZoomAndPanKeyOptions.filter(
-                              (option) => option.value === values.zoomAndPanDto.panKey,
-                            )}
-                            onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                          />
-                        )}
-                      </Field>
-                    </FormItem>
-                  </Card>
-
-                  <Card className="my-2" header="Zoom and Pan - DragBox Style">
-                    <FormItem
-                      label="Color"
-                      invalid={
-                        errors.zoomAndPanDto?.dragBoxStyle?.color &&
-                        touched.zoomAndPanDto?.dragBoxStyle?.color
-                      }
-                      errorMessage={errors.zoomAndPanDto?.dragBoxStyle?.color}
-                    >
-                      <Field name="zoomAndPanDto.dragBoxStyle.color" component={Input} />
-                    </FormItem>
-
-                    <FormItem
-                      label="Opacity"
-                      invalid={
-                        errors.zoomAndPanDto?.dragBoxStyle?.opacity &&
-                        touched.zoomAndPanDto?.dragBoxStyle?.opacity
-                      }
-                      errorMessage={errors.zoomAndPanDto?.dragBoxStyle?.opacity}
-                    >
-                      <Field
-                        type="number"
-                        name="zoomAndPanDto.dragBoxStyle.opacity"
-                        component={Input}
-                      />
-                    </FormItem>
-                  </Card>
+                  <ChartEditZoomAndPanTab values={values} errors={errors} touched={touched} />
                 </TabContent>
 
                 <TabContent value="annotations">
-                  <Tabs defaultValue="annotations_general">
-                    <TabList>
-                      <TabNav value="annotations_general">General</TabNav>
-                      <TabNav value="annotations_common">Common Pane</TabNav>
-                    </TabList>
-                    <TabContent value="annotations_general">
-                      <Card className="my-2" bodyClass="p-0">
-                        <Table compact>
-                          <THead>
-                            <Tr>
-                              <Th>
-                                <Button
-                                  shape="circle"
-                                  variant="plain"
-                                  type="button"
-                                  size="xs"
-                                  title="Add"
-                                  icon={<FaFileMedical />}
-                                  onClick={async (e) => {
-                                    e.preventDefault()
-                                    setDatabaseOperationsModalData({
-                                      id: values.id ?? '',
-                                      index: -1,
-                                      isOpen: 'annotation',
-                                      operation: 'insert',
-                                    })
-                                  }}
-                                />
-                              </Th>
-                              <Th>Type</Th>
-                              <Th>Name</Th>
-                              <Th>Text</Th>
-                              <Th>Series</Th>
-                              <Th>Value</Th>
-                              <Th>Width</Th>
-                            </Tr>
-                          </THead>
-                          <TBody>
-                            {chartValues.annotationsDto.map((row, index) => (
-                              <Tr key={index}>
-                                <Td>
-                                  <div className="flex-wrap inline-flex xl:flex items-center gap-2">
-                                    <Button
-                                      shape="circle"
-                                      variant="plain"
-                                      type="button"
-                                      size="xs"
-                                      title="Edit"
-                                      icon={<FaEdit />}
-                                      onClick={async (e) => {
-                                        e.preventDefault()
-                                        setDatabaseOperationsModalData({
-                                          id: values.id ?? '',
-                                          index,
-                                          isOpen: 'annotation',
-                                          operation: 'update',
-                                          annotationsValues: chartValues.annotationsDto[index],
-                                        })
-                                      }}
-                                    />
-                                    <Button
-                                      shape="circle"
-                                      variant="plain"
-                                      type="button"
-                                      size="xs"
-                                      title="Delete"
-                                      icon={<FaTrash />}
-                                      onClick={async (e) => {
-                                        e.preventDefault()
-                                        setConfirmDelete({
-                                          isOpen: true,
-                                          id: values.id ?? '',
-                                          fieldName: 'annotation',
-                                          index,
-                                        })
-                                      }}
-                                    />
-                                  </div>
-                                </Td>
-                                <Td>{row.type}</Td>
-                                <Td>{row.name}</Td>
-                                <Td>{row.text}</Td>
-                                <Td>{row.series}</Td>
-                                <Td>{row.value}</Td>
-                                <Td>{row.width}</Td>
-                              </Tr>
-                            ))}
-                          </TBody>
-                        </Table>
-                      </Card>
-                    </TabContent>
-                    <TabContent value="annotations_common">
-                      <Card className="my-2">
-                        <FormItem
-                          label="Tooltip Enabled"
-                          invalid={
-                            errors.commonAnnotationSettingsDto?.tooltipEnabled &&
-                            touched.commonAnnotationSettingsDto?.tooltipEnabled
-                          }
-                          errorMessage={errors.commonAnnotationSettingsDto?.tooltipEnabled}
-                        >
-                          <Field
-                            name="commonAnnotationSettingsDto.tooltipEnabled"
-                            component={Checkbox}
-                          />
-                        </FormItem>
-
-                        <FormItem
-                          label="Pan Key"
-                          invalid={
-                            errors.commonAnnotationSettingsDto?.type &&
-                            touched.commonAnnotationSettingsDto?.type
-                          }
-                          errorMessage={errors.commonAnnotationSettingsDto?.type}
-                        >
-                          <Field type="text" name="commonAnnotationSettingsDto.type">
-                            {({ field, form }: FieldProps<SelectBoxOption>) => (
-                              <Select
-                                field={field}
-                                form={form}
-                                options={chartAnnotationTypeListOptions}
-                                isClearable={true}
-                                value={chartAnnotationTypeListOptions.filter(
-                                  (option) =>
-                                    option.value === values.commonAnnotationSettingsDto.type,
-                                )}
-                                onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                              />
-                            )}
-                          </Field>
-                        </FormItem>
-
-                        <FormItem
-                          label="Pan Key"
-                          invalid={
-                            errors.commonAnnotationSettingsDto?.series &&
-                            touched.commonAnnotationSettingsDto?.series
-                          }
-                          errorMessage={errors.commonAnnotationSettingsDto?.series}
-                        >
-                          <Field type="text" name="commonAnnotationSettingsDto.series">
-                            {({ field, form }: FieldProps<SelectBoxOption>) => (
-                              <Select
-                                field={field}
-                                form={form}
-                                options={SeriesList()}
-                                isClearable={true}
-                                value={SeriesList()?.find(
-                                  (option) =>
-                                    option.value === values.commonAnnotationSettingsDto.series,
-                                )}
-                                onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                              />
-                            )}
-                          </Field>
-                        </FormItem>
-
-                        <FormItem
-                          label="Argument"
-                          invalid={
-                            errors.commonAnnotationSettingsDto?.argument &&
-                            touched.commonAnnotationSettingsDto?.argument
-                          }
-                          errorMessage={errors.commonAnnotationSettingsDto?.argument}
-                        >
-                          <Field name="commonAnnotationSettingsDto.argument" component={Input} />
-                        </FormItem>
-
-                        <FormItem
-                          label="Color"
-                          invalid={
-                            errors.commonAnnotationSettingsDto?.color &&
-                            touched.commonAnnotationSettingsDto?.color
-                          }
-                          errorMessage={errors.commonAnnotationSettingsDto?.color}
-                        >
-                          <Field name="commonAnnotationSettingsDto.color" component={Input} />
-                        </FormItem>
-
-                        <FormItem
-                          label="Value"
-                          invalid={
-                            errors.commonAnnotationSettingsDto?.value &&
-                            touched.commonAnnotationSettingsDto?.value
-                          }
-                          errorMessage={errors.commonAnnotationSettingsDto?.value}
-                        >
-                          <Field name="commonAnnotationSettingsDto.value" component={Input} />
-                        </FormItem>
-
-                        <FormItem
-                          label="Description"
-                          invalid={
-                            errors.commonAnnotationSettingsDto?.description &&
-                            touched.commonAnnotationSettingsDto?.description
-                          }
-                          errorMessage={errors.commonAnnotationSettingsDto?.description}
-                        >
-                          <Field name="commonAnnotationSettingsDto.description" component={Input} />
-                        </FormItem>
-
-                        <FormItem
-                          label="Image"
-                          invalid={
-                            errors.commonAnnotationSettingsDto?.image &&
-                            touched.commonAnnotationSettingsDto?.image
-                          }
-                          errorMessage={errors.commonAnnotationSettingsDto?.image}
-                        >
-                          <Field name="commonAnnotationSettingsDto.image" component={Input} />
-                        </FormItem>
-
-                        <FormItem
-                          label="Text"
-                          invalid={
-                            errors.commonAnnotationSettingsDto?.text &&
-                            touched.commonAnnotationSettingsDto?.text
-                          }
-                          errorMessage={errors.commonAnnotationSettingsDto?.text}
-                        >
-                          <Field name="commonAnnotationSettingsDto.text" component={Input} />
-                        </FormItem>
-
-                        <FormItem
-                          label="Word Wrap"
-                          invalid={
-                            errors.commonAnnotationSettingsDto?.wordWrap &&
-                            touched.commonAnnotationSettingsDto?.wordWrap
-                          }
-                          errorMessage={errors.commonAnnotationSettingsDto?.wordWrap}
-                        >
-                          <Field type="text" name="commonAnnotationSettingsDto.wordWrap">
-                            {({ field, form }: FieldProps<SelectBoxOption>) => (
-                              <Select
-                                field={field}
-                                form={form}
-                                options={chartWordWrapListOptions}
-                                isClearable={true}
-                                value={chartWordWrapListOptions.filter(
-                                  (option) =>
-                                    option.value === values.commonAnnotationSettingsDto.wordWrap,
-                                )}
-                                onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                              />
-                            )}
-                          </Field>
-                        </FormItem>
-
-                        <FormItem
-                          label="Width"
-                          invalid={
-                            errors.commonAnnotationSettingsDto?.width &&
-                            touched.commonAnnotationSettingsDto?.width
-                          }
-                          errorMessage={errors.commonAnnotationSettingsDto?.width}
-                        >
-                          <Field
-                            type="number"
-                            name="commonAnnotationSettingsDto.width"
-                            component={Input}
-                          />
-                        </FormItem>
-
-                        <FormItem
-                          label="Height"
-                          invalid={
-                            errors.commonAnnotationSettingsDto?.height &&
-                            touched.commonAnnotationSettingsDto?.height
-                          }
-                          errorMessage={errors.commonAnnotationSettingsDto?.height}
-                        >
-                          <Field
-                            type="number"
-                            name="commonAnnotationSettingsDto.height"
-                            component={Input}
-                          />
-                        </FormItem>
-
-                        <FormItem
-                          label="X"
-                          invalid={
-                            errors.commonAnnotationSettingsDto?.x &&
-                            touched.commonAnnotationSettingsDto?.x
-                          }
-                          errorMessage={errors.commonAnnotationSettingsDto?.x}
-                        >
-                          <Field
-                            type="number"
-                            name="commonAnnotationSettingsDto.x"
-                            component={Input}
-                          />
-                        </FormItem>
-
-                        <FormItem
-                          label="Y"
-                          invalid={
-                            errors.commonAnnotationSettingsDto?.y &&
-                            touched.commonAnnotationSettingsDto?.y
-                          }
-                          errorMessage={errors.commonAnnotationSettingsDto?.y}
-                        >
-                          <Field
-                            type="number"
-                            name="commonAnnotationSettingsDto.y"
-                            component={Input}
-                          />
-                        </FormItem>
-
-                        <FormItem
-                          label="Offset X"
-                          invalid={
-                            errors.commonAnnotationSettingsDto?.offsetX &&
-                            touched.commonAnnotationSettingsDto?.offsetX
-                          }
-                          errorMessage={errors.commonAnnotationSettingsDto?.offsetX}
-                        >
-                          <Field
-                            type="number"
-                            name="commonAnnotationSettingsDto.offsetX"
-                            component={Input}
-                          />
-                        </FormItem>
-
-                        <FormItem
-                          label="Offset Y"
-                          invalid={
-                            errors.commonAnnotationSettingsDto?.offsetY &&
-                            touched.commonAnnotationSettingsDto?.offsetY
-                          }
-                          errorMessage={errors.commonAnnotationSettingsDto?.offsetY}
-                        >
-                          <Field
-                            type="number"
-                            name="commonAnnotationSettingsDto.offsetY"
-                            component={Input}
-                          />
-                        </FormItem>
-
-                        <FormItem
-                          label="Padding Left/Right"
-                          invalid={
-                            errors.commonAnnotationSettingsDto?.paddingLeftRight &&
-                            touched.commonAnnotationSettingsDto?.paddingLeftRight
-                          }
-                          errorMessage={errors.commonAnnotationSettingsDto?.paddingLeftRight}
-                        >
-                          <Field
-                            type="number"
-                            name="commonAnnotationSettingsDto.paddingLeftRight"
-                            component={Input}
-                          />
-                        </FormItem>
-
-                        <FormItem
-                          label="Padding Top/Bottom"
-                          invalid={
-                            errors.commonAnnotationSettingsDto?.paddingTopBottom &&
-                            touched.commonAnnotationSettingsDto?.paddingTopBottom
-                          }
-                          errorMessage={errors.commonAnnotationSettingsDto?.paddingTopBottom}
-                        >
-                          <Field
-                            type="number"
-                            name="commonAnnotationSettingsDto.paddingTopBottom"
-                            component={Input}
-                          />
-                        </FormItem>
-                      </Card>
-
-                      <Card className="my-2" header="Common Annotations - Border">
-                        <FormItem
-                          label="Visible"
-                          invalid={
-                            errors.commonAnnotationSettingsDto?.border?.visible &&
-                            touched.commonAnnotationSettingsDto?.border?.visible
-                          }
-                          errorMessage={errors.commonAnnotationSettingsDto?.border?.visible}
-                        >
-                          <Field
-                            name="commonAnnotationSettingsDto.border.visible"
-                            component={Checkbox}
-                          />
-                        </FormItem>
-
-                        <FormItem
-                          label="Color"
-                          invalid={
-                            errors.commonAnnotationSettingsDto?.border?.color &&
-                            touched.commonAnnotationSettingsDto?.border?.color
-                          }
-                          errorMessage={errors.commonAnnotationSettingsDto?.border?.color}
-                        >
-                          <Field
-                            type="text"
-                            name="commonAnnotationSettingsDto.border.color"
-                            component={Input}
-                          />
-                        </FormItem>
-
-                        <FormItem
-                          label="Dash Style"
-                          invalid={
-                            errors.commonAnnotationSettingsDto?.border?.dashStyle &&
-                            touched.commonAnnotationSettingsDto?.border?.dashStyle
-                          }
-                          errorMessage={errors.commonAnnotationSettingsDto?.border?.dashStyle}
-                        >
-                          <Field type="text" name="commonAnnotationSettingsDto.border.dashStyle">
-                            {({ field, form }: FieldProps<SelectBoxOption>) => (
-                              <Select
-                                field={field}
-                                form={form}
-                                options={chartSeriesDashStyleOptions}
-                                isClearable={true}
-                                value={chartSeriesDashStyleOptions.filter(
-                                  (option) =>
-                                    option.value ===
-                                    values.commonAnnotationSettingsDto.border.dashStyle,
-                                )}
-                                onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                              />
-                            )}
-                          </Field>
-                        </FormItem>
-
-                        <FormItem
-                          label="Corner Radius"
-                          invalid={
-                            errors.commonAnnotationSettingsDto?.border?.cornerRadius &&
-                            touched.commonAnnotationSettingsDto?.border?.cornerRadius
-                          }
-                          errorMessage={errors.commonAnnotationSettingsDto?.border?.cornerRadius}
-                        >
-                          <Field
-                            type="number"
-                            name="commonAnnotationSettingsDto.border.cornerRadius"
-                            component={Input}
-                          />
-                        </FormItem>
-
-                        <FormItem
-                          label="Width"
-                          invalid={
-                            errors.commonAnnotationSettingsDto?.border?.width &&
-                            touched.commonAnnotationSettingsDto?.border?.width
-                          }
-                          errorMessage={errors.commonAnnotationSettingsDto?.border?.width}
-                        >
-                          <Field
-                            type="number"
-                            name="commonAnnotationSettingsDto.border.width"
-                            component={Input}
-                          />
-                        </FormItem>
-                      </Card>
-
-                      <Card className="my-2" header="Common Annotations - Font">
-                        <FormItem
-                          label="Color"
-                          invalid={
-                            errors.commonAnnotationSettingsDto?.font?.color &&
-                            touched.commonAnnotationSettingsDto?.font?.color
-                          }
-                          errorMessage={errors.commonAnnotationSettingsDto?.font?.color}
-                        >
-                          <Field name="commonAnnotationSettingsDto.font.color" component={Input} />
-                        </FormItem>
-
-                        <FormItem
-                          label="Family"
-                          invalid={
-                            errors.commonAnnotationSettingsDto?.font?.family &&
-                            touched.commonAnnotationSettingsDto?.font?.family
-                          }
-                          errorMessage={errors.commonAnnotationSettingsDto?.font?.family}
-                        >
-                          <Field name="commonAnnotationSettingsDto.font.family" component={Input} />
-                        </FormItem>
-
-                        <FormItem
-                          label="Size"
-                          invalid={
-                            errors.commonAnnotationSettingsDto?.font?.size &&
-                            touched.commonAnnotationSettingsDto?.font?.size
-                          }
-                          errorMessage={errors.commonAnnotationSettingsDto?.font?.size}
-                        >
-                          <Field
-                            type="number"
-                            name="commonAnnotationSettingsDto.font.size"
-                            component={Input}
-                          />
-                        </FormItem>
-
-                        <FormItem
-                          label="Weight"
-                          invalid={
-                            errors.commonAnnotationSettingsDto?.font?.weight &&
-                            touched.commonAnnotationSettingsDto?.font?.weight
-                          }
-                          errorMessage={errors.commonAnnotationSettingsDto?.font?.weight}
-                        >
-                          <Field
-                            type="number"
-                            name="commonAnnotationSettingsDto.font.weight"
-                            component={Input}
-                          />
-                        </FormItem>
-                      </Card>
-                    </TabContent>
-                  </Tabs>
+                  <ChartTabAnnotations
+                    values={values}
+                    errors={errors}
+                    touched={touched}
+                    chartValues={chartValues}
+                    setDatabaseOperationsModalData={setDatabaseOperationsModalData}
+                    setConfirmDelete={setConfirmDelete}
+                    SeriesList={SeriesList}
+                  />
                 </TabContent>
               </Tabs>
 
diff --git a/ui/src/views/admin/chart/edit/ChartTabAnimation.tsx b/ui/src/views/admin/chart/edit/ChartTabAnimation.tsx
new file mode 100644
index 00000000..f5df2756
--- /dev/null
+++ b/ui/src/views/admin/chart/edit/ChartTabAnimation.tsx
@@ -0,0 +1,69 @@
+import { Card, Checkbox, FormItem, Input, Select } from '@/components/ui'
+import { ChartEditDto } from '@/proxy/charts/models'
+import { SelectBoxOption } from '@/shared/types'
+import { Field, FieldProps, FormikErrors, FormikTouched } from 'formik'
+import { chartEasingListOptions } from './../options'
+
+interface ChartTabAnimationProps {
+  values: ChartEditDto
+  errors: FormikErrors<ChartEditDto>
+  touched: FormikTouched<ChartEditDto>
+}
+
+const ChartTabAnimation = ({ values, errors, touched }: ChartTabAnimationProps) => {
+  return (
+    <Card className="my-2">
+      <FormItem
+        label="Enabled"
+        invalid={!!(errors.animationDto?.enabled && touched.animationDto?.enabled)}
+        errorMessage={errors.animationDto?.enabled as string}
+      >
+        <Field name="animationDto.enabled" component={Checkbox} />
+      </FormItem>
+
+      <FormItem
+        label="Easing"
+        invalid={!!(errors.animationDto?.easing && touched.animationDto?.easing)}
+        errorMessage={errors.animationDto?.easing}
+      >
+        <Field type="text" name="animationDto.easing">
+          {({ field, form }: FieldProps<SelectBoxOption>) => (
+            <Select
+              field={field}
+              form={form}
+              options={chartEasingListOptions}
+              isClearable={true}
+              value={chartEasingListOptions.filter(
+                (option) => option.value === values.animationDto.easing,
+              )}
+              onChange={(option) => form.setFieldValue(field.name, option?.value)}
+            />
+          )}
+        </Field>
+      </FormItem>
+
+      <FormItem
+        label="Duration"
+        invalid={!!(errors.animationDto?.duration && touched.animationDto?.duration)}
+        errorMessage={errors.animationDto?.duration as string}
+      >
+        <Field type="number" name="animationDto.duration" component={Input} />
+      </FormItem>
+
+      <FormItem
+        label="Max Point Count Supported"
+        invalid={
+          !!(
+            errors.animationDto?.maxPointCountSupported &&
+            touched.animationDto?.maxPointCountSupported
+          )
+        }
+        errorMessage={errors.animationDto?.maxPointCountSupported as string}
+      >
+        <Field type="number" name="animationDto.maxPointCountSupported" component={Input} />
+      </FormItem>
+    </Card>
+  )
+}
+
+export default ChartTabAnimation
diff --git a/ui/src/views/admin/chart/edit/ChartTabAnnotations.tsx b/ui/src/views/admin/chart/edit/ChartTabAnnotations.tsx
new file mode 100644
index 00000000..ab23becb
--- /dev/null
+++ b/ui/src/views/admin/chart/edit/ChartTabAnnotations.tsx
@@ -0,0 +1,558 @@
+import { Button, Card, Checkbox, FormItem, Input, Select, Table, Tabs } from '@/components/ui'
+import TabContent from '@/components/ui/Tabs/TabContent'
+import TabList from '@/components/ui/Tabs/TabList'
+import TabNav from '@/components/ui/Tabs/TabNav'
+import TBody from '@/components/ui/Table/TBody'
+import THead from '@/components/ui/Table/THead'
+import Td from '@/components/ui/Table/Td'
+import Th from '@/components/ui/Table/Th'
+import Tr from '@/components/ui/Table/Tr'
+import { ChartEditDto } from '@/proxy/charts/models'
+import { SelectBoxOption } from '@/shared/types'
+import { Field, FieldProps, FormikErrors, FormikTouched } from 'formik'
+import { FaEdit, FaFileMedical, FaTrash } from 'react-icons/fa'
+import {
+  chartAnnotationTypeListOptions,
+  chartSeriesDashStyleOptions,
+  chartWordWrapListOptions,
+} from './../options'
+import { ChartDialogType } from './../types'
+import { ConfirmDelete, DatabaseOperation } from '../ChartEdit'
+
+interface ChartTabAnnotationsProps {
+  values: ChartEditDto
+  errors: FormikErrors<ChartEditDto>
+  touched: FormikTouched<ChartEditDto>
+  chartValues: ChartEditDto
+  setDatabaseOperationsModalData: (data: DatabaseOperation) => void
+  setConfirmDelete: (data: ConfirmDelete) => void
+  SeriesList: () => SelectBoxOption[] | undefined
+}
+
+const ChartTabAnnotations = ({
+  values,
+  errors,
+  touched,
+  chartValues,
+  setDatabaseOperationsModalData,
+  setConfirmDelete,
+  SeriesList,
+}: ChartTabAnnotationsProps) => {
+  return (
+    <Tabs defaultValue="annotations_general">
+      <TabList>
+        <TabNav value="annotations_general">General</TabNav>
+        <TabNav value="annotations_common">Common Pane</TabNav>
+      </TabList>
+      <TabContent value="annotations_general">
+        <Card className="my-2" bodyClass="p-0">
+          <Table compact>
+            <THead>
+              <Tr>
+                <Th>
+                  <Button
+                    shape="circle"
+                    variant="plain"
+                    type="button"
+                    size="xs"
+                    title="Add"
+                    icon={<FaFileMedical />}
+                    onClick={async (e) => {
+                      e.preventDefault()
+                      setDatabaseOperationsModalData({
+                        id: values.id ?? '',
+                        index: -1,
+                        isOpen: 'annotation',
+                        operation: 'insert',
+                      })
+                    }}
+                  />
+                </Th>
+                <Th>Type</Th>
+                <Th>Name</Th>
+                <Th>Text</Th>
+                <Th>Series</Th>
+                <Th>Value</Th>
+                <Th>Width</Th>
+              </Tr>
+            </THead>
+            <TBody>
+              {chartValues.annotationsDto.map((row, index) => (
+                <Tr key={index}>
+                  <Td>
+                    <div className="flex-wrap inline-flex xl:flex items-center gap-2">
+                      <Button
+                        shape="circle"
+                        variant="plain"
+                        type="button"
+                        size="xs"
+                        title="Edit"
+                        icon={<FaEdit />}
+                        onClick={async (e) => {
+                          e.preventDefault()
+                          setDatabaseOperationsModalData({
+                            id: values.id ?? '',
+                            index,
+                            isOpen: 'annotation',
+                            operation: 'update',
+                            annotationsValues: chartValues.annotationsDto[index],
+                          })
+                        }}
+                      />
+                      <Button
+                        shape="circle"
+                        variant="plain"
+                        type="button"
+                        size="xs"
+                        title="Delete"
+                        icon={<FaTrash />}
+                        onClick={async (e) => {
+                          e.preventDefault()
+                          setConfirmDelete({
+                            isOpen: true,
+                            id: values.id ?? '',
+                            fieldName: 'annotation',
+                            index,
+                          })
+                        }}
+                      />
+                    </div>
+                  </Td>
+                  <Td>{row.type}</Td>
+                  <Td>{row.name}</Td>
+                  <Td>{row.text}</Td>
+                  <Td>{row.series}</Td>
+                  <Td>{row.value}</Td>
+                  <Td>{row.width}</Td>
+                </Tr>
+              ))}
+            </TBody>
+          </Table>
+        </Card>
+      </TabContent>
+      <TabContent value="annotations_common">
+        <Card className="my-2">
+          <FormItem
+            label="Tooltip Enabled"
+            invalid={
+              !!(
+                errors.commonAnnotationSettingsDto?.tooltipEnabled &&
+                touched.commonAnnotationSettingsDto?.tooltipEnabled
+              )
+            }
+            errorMessage={errors.commonAnnotationSettingsDto?.tooltipEnabled}
+          >
+            <Field name="commonAnnotationSettingsDto.tooltipEnabled" component={Checkbox} />
+          </FormItem>
+
+          <FormItem
+            label="Pan Key"
+            invalid={
+              !!(
+                errors.commonAnnotationSettingsDto?.type &&
+                touched.commonAnnotationSettingsDto?.type
+              )
+            }
+            errorMessage={errors.commonAnnotationSettingsDto?.type}
+          >
+            <Field type="text" name="commonAnnotationSettingsDto.type">
+              {({ field, form }: FieldProps<SelectBoxOption>) => (
+                <Select
+                  field={field}
+                  form={form}
+                  options={chartAnnotationTypeListOptions}
+                  isClearable={true}
+                  value={chartAnnotationTypeListOptions.filter(
+                    (option) => option.value === values.commonAnnotationSettingsDto.type,
+                  )}
+                  onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                />
+              )}
+            </Field>
+          </FormItem>
+
+          <FormItem
+            label="Pan Key"
+            invalid={
+              !!(
+                errors.commonAnnotationSettingsDto?.series &&
+                touched.commonAnnotationSettingsDto?.series
+              )
+            }
+            errorMessage={errors.commonAnnotationSettingsDto?.series}
+          >
+            <Field type="text" name="commonAnnotationSettingsDto.series">
+              {({ field, form }: FieldProps<SelectBoxOption>) => (
+                <Select
+                  field={field}
+                  form={form}
+                  options={SeriesList()}
+                  isClearable={true}
+                  value={SeriesList()?.find(
+                    (option) => option.value === values.commonAnnotationSettingsDto.series,
+                  )}
+                  onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                />
+              )}
+            </Field>
+          </FormItem>
+
+          <FormItem
+            label="Argument"
+            invalid={
+              !!(
+                errors.commonAnnotationSettingsDto?.argument &&
+                touched.commonAnnotationSettingsDto?.argument
+              )
+            }
+            errorMessage={errors.commonAnnotationSettingsDto?.argument}
+          >
+            <Field name="commonAnnotationSettingsDto.argument" component={Input} />
+          </FormItem>
+
+          <FormItem
+            label="Color"
+            invalid={
+              !!(
+                errors.commonAnnotationSettingsDto?.color &&
+                touched.commonAnnotationSettingsDto?.color
+              )
+            }
+            errorMessage={errors.commonAnnotationSettingsDto?.color}
+          >
+            <Field name="commonAnnotationSettingsDto.color" component={Input} />
+          </FormItem>
+
+          <FormItem
+            label="Value"
+            invalid={
+              !!(
+                errors.commonAnnotationSettingsDto?.value &&
+                touched.commonAnnotationSettingsDto?.value
+              )
+            }
+            errorMessage={errors.commonAnnotationSettingsDto?.value}
+          >
+            <Field name="commonAnnotationSettingsDto.value" component={Input} />
+          </FormItem>
+
+          <FormItem
+            label="Description"
+            invalid={
+              !!(
+                errors.commonAnnotationSettingsDto?.description &&
+                touched.commonAnnotationSettingsDto?.description
+              )
+            }
+            errorMessage={errors.commonAnnotationSettingsDto?.description}
+          >
+            <Field name="commonAnnotationSettingsDto.description" component={Input} />
+          </FormItem>
+
+          <FormItem
+            label="Image"
+            invalid={
+              !!(
+                errors.commonAnnotationSettingsDto?.image &&
+                touched.commonAnnotationSettingsDto?.image
+              )
+            }
+            errorMessage={errors.commonAnnotationSettingsDto?.image}
+          >
+            <Field name="commonAnnotationSettingsDto.image" component={Input} />
+          </FormItem>
+
+          <FormItem
+            label="Text"
+            invalid={
+              !!(
+                errors.commonAnnotationSettingsDto?.text &&
+                touched.commonAnnotationSettingsDto?.text
+              )
+            }
+            errorMessage={errors.commonAnnotationSettingsDto?.text}
+          >
+            <Field name="commonAnnotationSettingsDto.text" component={Input} />
+          </FormItem>
+
+          <FormItem
+            label="Word Wrap"
+            invalid={
+              !!(
+                errors.commonAnnotationSettingsDto?.wordWrap &&
+                touched.commonAnnotationSettingsDto?.wordWrap
+              )
+            }
+            errorMessage={errors.commonAnnotationSettingsDto?.wordWrap}
+          >
+            <Field type="text" name="commonAnnotationSettingsDto.wordWrap">
+              {({ field, form }: FieldProps<SelectBoxOption>) => (
+                <Select
+                  field={field}
+                  form={form}
+                  options={chartWordWrapListOptions}
+                  isClearable={true}
+                  value={chartWordWrapListOptions.filter(
+                    (option) => option.value === values.commonAnnotationSettingsDto.wordWrap,
+                  )}
+                  onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                />
+              )}
+            </Field>
+          </FormItem>
+
+          <FormItem
+            label="Width"
+            invalid={
+              !!(
+                errors.commonAnnotationSettingsDto?.width &&
+                touched.commonAnnotationSettingsDto?.width
+              )
+            }
+            errorMessage={errors.commonAnnotationSettingsDto?.width}
+          >
+            <Field type="number" name="commonAnnotationSettingsDto.width" component={Input} />
+          </FormItem>
+
+          <FormItem
+            label="Height"
+            invalid={
+              !!(
+                errors.commonAnnotationSettingsDto?.height &&
+                touched.commonAnnotationSettingsDto?.height
+              )
+            }
+            errorMessage={errors.commonAnnotationSettingsDto?.height}
+          >
+            <Field type="number" name="commonAnnotationSettingsDto.height" component={Input} />
+          </FormItem>
+
+          <FormItem
+            label="X"
+            invalid={
+              !!(errors.commonAnnotationSettingsDto?.x && touched.commonAnnotationSettingsDto?.x)
+            }
+            errorMessage={errors.commonAnnotationSettingsDto?.x}
+          >
+            <Field type="number" name="commonAnnotationSettingsDto.x" component={Input} />
+          </FormItem>
+
+          <FormItem
+            label="Y"
+            invalid={
+              !!(errors.commonAnnotationSettingsDto?.y && touched.commonAnnotationSettingsDto?.y)
+            }
+            errorMessage={errors.commonAnnotationSettingsDto?.y}
+          >
+            <Field type="number" name="commonAnnotationSettingsDto.y" component={Input} />
+          </FormItem>
+
+          <FormItem
+            label="Offset X"
+            invalid={
+              !!(
+                errors.commonAnnotationSettingsDto?.offsetX &&
+                touched.commonAnnotationSettingsDto?.offsetX
+              )
+            }
+            errorMessage={errors.commonAnnotationSettingsDto?.offsetX}
+          >
+            <Field type="number" name="commonAnnotationSettingsDto.offsetX" component={Input} />
+          </FormItem>
+
+          <FormItem
+            label="Offset Y"
+            invalid={
+              !!(
+                errors.commonAnnotationSettingsDto?.offsetY &&
+                touched.commonAnnotationSettingsDto?.offsetY
+              )
+            }
+            errorMessage={errors.commonAnnotationSettingsDto?.offsetY}
+          >
+            <Field type="number" name="commonAnnotationSettingsDto.offsetY" component={Input} />
+          </FormItem>
+
+          <FormItem
+            label="Padding Left/Right"
+            invalid={
+              !!(
+                errors.commonAnnotationSettingsDto?.paddingLeftRight &&
+                touched.commonAnnotationSettingsDto?.paddingLeftRight
+              )
+            }
+            errorMessage={errors.commonAnnotationSettingsDto?.paddingLeftRight}
+          >
+            <Field
+              type="number"
+              name="commonAnnotationSettingsDto.paddingLeftRight"
+              component={Input}
+            />
+          </FormItem>
+
+          <FormItem
+            label="Padding Top/Bottom"
+            invalid={
+              !!(
+                errors.commonAnnotationSettingsDto?.paddingTopBottom &&
+                touched.commonAnnotationSettingsDto?.paddingTopBottom
+              )
+            }
+            errorMessage={errors.commonAnnotationSettingsDto?.paddingTopBottom}
+          >
+            <Field
+              type="number"
+              name="commonAnnotationSettingsDto.paddingTopBottom"
+              component={Input}
+            />
+          </FormItem>
+        </Card>
+
+        <Card className="my-2" header="Common Annotations - Border">
+          <FormItem
+            label="Visible"
+            invalid={
+              !!(
+                errors.commonAnnotationSettingsDto?.border?.visible &&
+                touched.commonAnnotationSettingsDto?.border?.visible
+              )
+            }
+            errorMessage={errors.commonAnnotationSettingsDto?.border?.visible}
+          >
+            <Field name="commonAnnotationSettingsDto.border.visible" component={Checkbox} />
+          </FormItem>
+
+          <FormItem
+            label="Color"
+            invalid={
+              !!(
+                errors.commonAnnotationSettingsDto?.border?.color &&
+                touched.commonAnnotationSettingsDto?.border?.color
+              )
+            }
+            errorMessage={errors.commonAnnotationSettingsDto?.border?.color}
+          >
+            <Field type="text" name="commonAnnotationSettingsDto.border.color" component={Input} />
+          </FormItem>
+
+          <FormItem
+            label="Dash Style"
+            invalid={
+              !!(
+                errors.commonAnnotationSettingsDto?.border?.dashStyle &&
+                touched.commonAnnotationSettingsDto?.border?.dashStyle
+              )
+            }
+            errorMessage={errors.commonAnnotationSettingsDto?.border?.dashStyle}
+          >
+            <Field type="text" name="commonAnnotationSettingsDto.border.dashStyle">
+              {({ field, form }: FieldProps<SelectBoxOption>) => (
+                <Select
+                  field={field}
+                  form={form}
+                  options={chartSeriesDashStyleOptions}
+                  isClearable={true}
+                  value={chartSeriesDashStyleOptions.filter(
+                    (option) =>
+                      option.value === values.commonAnnotationSettingsDto.border.dashStyle,
+                  )}
+                  onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                />
+              )}
+            </Field>
+          </FormItem>
+
+          <FormItem
+            label="Corner Radius"
+            invalid={
+              !!(
+                errors.commonAnnotationSettingsDto?.border?.cornerRadius &&
+                touched.commonAnnotationSettingsDto?.border?.cornerRadius
+              )
+            }
+            errorMessage={errors.commonAnnotationSettingsDto?.border?.cornerRadius}
+          >
+            <Field
+              type="number"
+              name="commonAnnotationSettingsDto.border.cornerRadius"
+              component={Input}
+            />
+          </FormItem>
+
+          <FormItem
+            label="Width"
+            invalid={
+              !!(
+                errors.commonAnnotationSettingsDto?.border?.width &&
+                touched.commonAnnotationSettingsDto?.border?.width
+              )
+            }
+            errorMessage={errors.commonAnnotationSettingsDto?.border?.width}
+          >
+            <Field
+              type="number"
+              name="commonAnnotationSettingsDto.border.width"
+              component={Input}
+            />
+          </FormItem>
+        </Card>
+
+        <Card className="my-2" header="Common Annotations - Font">
+          <FormItem
+            label="Color"
+            invalid={
+              !!(
+                errors.commonAnnotationSettingsDto?.font?.color &&
+                touched.commonAnnotationSettingsDto?.font?.color
+              )
+            }
+            errorMessage={errors.commonAnnotationSettingsDto?.font?.color}
+          >
+            <Field name="commonAnnotationSettingsDto.font.color" component={Input} />
+          </FormItem>
+
+          <FormItem
+            label="Family"
+            invalid={
+              !!(
+                errors.commonAnnotationSettingsDto?.font?.family &&
+                touched.commonAnnotationSettingsDto?.font?.family
+              )
+            }
+            errorMessage={errors.commonAnnotationSettingsDto?.font?.family}
+          >
+            <Field name="commonAnnotationSettingsDto.font.family" component={Input} />
+          </FormItem>
+
+          <FormItem
+            label="Size"
+            invalid={
+              !!(
+                errors.commonAnnotationSettingsDto?.font?.size &&
+                touched.commonAnnotationSettingsDto?.font?.size
+              )
+            }
+            errorMessage={errors.commonAnnotationSettingsDto?.font?.size}
+          >
+            <Field type="number" name="commonAnnotationSettingsDto.font.size" component={Input} />
+          </FormItem>
+
+          <FormItem
+            label="Weight"
+            invalid={
+              !!(
+                errors.commonAnnotationSettingsDto?.font?.weight &&
+                touched.commonAnnotationSettingsDto?.font?.weight
+              )
+            }
+            errorMessage={errors.commonAnnotationSettingsDto?.font?.weight}
+          >
+            <Field type="number" name="commonAnnotationSettingsDto.font.weight" component={Input} />
+          </FormItem>
+        </Card>
+      </TabContent>
+    </Tabs>
+  )
+}
+
+export default ChartTabAnnotations
diff --git a/ui/src/views/admin/chart/edit/ChartTabAxis.tsx b/ui/src/views/admin/chart/edit/ChartTabAxis.tsx
new file mode 100644
index 00000000..40b042d0
--- /dev/null
+++ b/ui/src/views/admin/chart/edit/ChartTabAxis.tsx
@@ -0,0 +1,440 @@
+import { Button, Card, Checkbox, FormItem, Input, Select, Table, Tabs } from '@/components/ui'
+import TBody from '@/components/ui/Table/TBody'
+import THead from '@/components/ui/Table/THead'
+import Td from '@/components/ui/Table/Td'
+import Th from '@/components/ui/Table/Th'
+import Tr from '@/components/ui/Table/Tr'
+import TabContent from '@/components/ui/Tabs/TabContent'
+import TabList from '@/components/ui/Tabs/TabList'
+import TabNav from '@/components/ui/Tabs/TabNav'
+import { ChartEditDto, ChartValueAxisDto } from '@/proxy/charts/models'
+import { SelectBoxOption } from '@/shared/types'
+import { Field, FieldProps, FormikErrors, FormikTouched } from 'formik'
+import { FaEdit, FaPlus, FaTrash } from 'react-icons/fa'
+import {
+  chartArgumentAxisHoverModeListOptions,
+  chartArgumentAxisIntervalListOptions,
+  chartArgumentAxisLabelDisplayModeListOptions,
+  chartArgumentAxisLabelOverlappingBehaviorListOptions,
+  chartArgumentAxisPositionListOptions,
+  chartArgumentAxisTypeListOptions,
+} from './../options'
+import { ChartDialogType } from './../types'
+import { ConfirmDelete, DatabaseOperation } from '../ChartEdit'
+
+interface ChartTabAxisProps {
+  values: ChartEditDto
+  errors: FormikErrors<ChartEditDto>
+  touched: FormikTouched<ChartEditDto>
+  chartValues: ChartEditDto
+  setDatabaseOperationsModalData: (data: DatabaseOperation) => void
+  setConfirmDelete: (data: ConfirmDelete) => void
+}
+
+const ChartTabAxis = ({
+  values,
+  errors,
+  touched,
+  chartValues,
+  setDatabaseOperationsModalData,
+  setConfirmDelete,
+}: ChartTabAxisProps) => {
+  return (
+    <Tabs defaultValue="axis_value">
+      <TabList>
+        <TabNav value="axis_value">Value Axis</TabNav>
+        <TabNav value="axis_argument">Argument Axis Options</TabNav>
+        <TabNav value="axis_common">Common Axis Settings</TabNav>
+      </TabList>
+      <TabContent value="axis_value">
+        <Card className="my-2" bodyClass="p-0">
+          <Table compact>
+            <THead>
+              <Tr>
+                <Th>
+                  <Button
+                    shape="circle"
+                    variant="plain"
+                    type="button"
+                    size="xs"
+                    title="Add"
+                    icon={<FaPlus />}
+                    onClick={async (e) => {
+                      e.preventDefault()
+                      setDatabaseOperationsModalData({
+                        id: values.id ?? '',
+                        index: -1,
+                        isOpen: 'axis',
+                        operation: 'insert',
+                      })
+                    }}
+                  />
+                </Th>
+                <Th>Value Type</Th>
+                <Th>Position</Th>
+                <Th>Type</Th>
+                <Th>Name</Th>
+                <Th>Title</Th>
+                <Th>Visible</Th>
+              </Tr>
+            </THead>
+            <TBody>
+              {chartValues.valueAxisDto.map((row, index) => (
+                <Tr key={index}>
+                  <Td>
+                    <div className="flex-wrap inline-flex xl:flex items-center gap-2">
+                      <Button
+                        shape="circle"
+                        variant="plain"
+                        type="button"
+                        size="xs"
+                        title="Edit"
+                        icon={<FaEdit />}
+                        onClick={async (e) => {
+                          e.preventDefault()
+                          setDatabaseOperationsModalData({
+                            id: values.id ?? '',
+                            index,
+                            isOpen: 'axis',
+                            operation: 'update',
+                            axisValues: chartValues.valueAxisDto[index],
+                          })
+                        }}
+                      />
+                      <Button
+                        shape="circle"
+                        variant="plain"
+                        type="button"
+                        size="xs"
+                        title="Delete"
+                        icon={<FaTrash />}
+                        onClick={async (e) => {
+                          e.preventDefault()
+                          setConfirmDelete({
+                            isOpen: true,
+                            id: values.id ?? '',
+                            fieldName: 'axis',
+                            index,
+                          })
+                        }}
+                      />
+                    </div>
+                  </Td>
+                  <Td>{row.valueType}</Td>
+                  <Td>{row.position}</Td>
+                  <Td>{row.type}</Td>
+                  <Td>{row.name}</Td>
+                  <Td>{row.title}</Td>
+                  <Td>{row.visible}</Td>
+                </Tr>
+              ))}
+            </TBody>
+          </Table>
+        </Card>
+      </TabContent>
+      <TabContent value="axis_argument">
+        <Card className="my-2">
+          <FormItem
+            label="Visible"
+            invalid={!!(errors.argumentAxisDto?.visible && touched.argumentAxisDto?.visible)}
+            errorMessage={errors.argumentAxisDto?.visible}
+          >
+            <Field name="argumentAxisDto.visible" component={Checkbox} />
+          </FormItem>
+
+          <FormItem
+            label="Workdays Only"
+            invalid={
+              !!(errors.argumentAxisDto?.workdaysOnly && touched.argumentAxisDto?.workdaysOnly)
+            }
+            errorMessage={errors.argumentAxisDto?.workdaysOnly}
+          >
+            <Field name="argumentAxisDto.visible" component={Checkbox} />
+          </FormItem>
+
+          <FormItem
+            label="Title"
+            invalid={!!(errors.argumentAxisDto?.title && touched.argumentAxisDto?.title)}
+            errorMessage={errors.argumentAxisDto?.title}
+          >
+            <Field type="text" name="argumentAxisDto.title" component={Input} />
+          </FormItem>
+
+          <FormItem
+            label="Hover Mode"
+            invalid={!!(errors.argumentAxisDto?.hoverMode && touched.argumentAxisDto?.hoverMode)}
+            errorMessage={errors.argumentAxisDto?.hoverMode}
+          >
+            <Field type="text" name="argumentAxisDto.hoverMode">
+              {({ field, form }: FieldProps<SelectBoxOption>) => (
+                <Select
+                  field={field}
+                  form={form}
+                  options={chartArgumentAxisHoverModeListOptions}
+                  isClearable={true}
+                  value={chartArgumentAxisHoverModeListOptions.filter(
+                    (option) => option.value === values.argumentAxisDto.hoverMode,
+                  )}
+                  onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                />
+              )}
+            </Field>
+          </FormItem>
+
+          <FormItem
+            label="Argument Type"
+            invalid={
+              !!(errors.argumentAxisDto?.argumentType && touched.argumentAxisDto?.argumentType)
+            }
+            errorMessage={errors.argumentAxisDto?.argumentType}
+          >
+            <Field type="text" name="argumentAxisDto.argumentType">
+              {({ field, form }: FieldProps<SelectBoxOption>) => (
+                <Select
+                  field={field}
+                  form={form}
+                  options={chartArgumentAxisTypeListOptions}
+                  isClearable={true}
+                  value={chartArgumentAxisTypeListOptions.filter(
+                    (option) => option.value === values.argumentAxisDto.argumentType,
+                  )}
+                  onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                />
+              )}
+            </Field>
+          </FormItem>
+
+          <FormItem
+            label="Position"
+            invalid={!!(errors.argumentAxisDto?.position && touched.argumentAxisDto?.position)}
+            errorMessage={errors.argumentAxisDto?.position}
+          >
+            <Field type="text" name="argumentAxisDto.position">
+              {({ field, form }: FieldProps<SelectBoxOption>) => (
+                <Select
+                  field={field}
+                  form={form}
+                  options={chartArgumentAxisPositionListOptions}
+                  isClearable={true}
+                  value={chartArgumentAxisPositionListOptions.filter(
+                    (option) => option.value === values.argumentAxisDto.position,
+                  )}
+                  onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                />
+              )}
+            </Field>
+          </FormItem>
+
+          <FormItem
+            label="Width"
+            invalid={!!(errors.argumentAxisDto?.width && touched.argumentAxisDto?.width)}
+            errorMessage={errors.argumentAxisDto?.width}
+          >
+            <Field type="number" name="argumentAxisDto.width" component={Input} />
+          </FormItem>
+
+          <FormItem
+            label="Aggregation Interval"
+            invalid={
+              !!(
+                errors.argumentAxisDto?.aggregationInterval &&
+                touched.argumentAxisDto?.aggregationInterval
+              )
+            }
+            errorMessage={errors.argumentAxisDto?.aggregationInterval}
+          >
+            <Field type="text" name="argumentAxisDto.aggregationInterval">
+              {({ field, form }: FieldProps<SelectBoxOption>) => (
+                <Select
+                  field={field}
+                  form={form}
+                  options={chartArgumentAxisIntervalListOptions}
+                  isClearable={true}
+                  value={chartArgumentAxisIntervalListOptions.filter(
+                    (option) => option.value === values.argumentAxisDto.aggregationInterval,
+                  )}
+                  onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                />
+              )}
+            </Field>
+          </FormItem>
+        </Card>
+
+        <Card className="my-2" header="Argument Axis - Grid">
+          <FormItem
+            label="Visible"
+            invalid={
+              !!(errors.argumentAxisDto?.grid?.visible && touched.argumentAxisDto?.grid?.visible)
+            }
+            errorMessage={errors.argumentAxisDto?.grid?.visible}
+          >
+            <Field name="argumentAxisDto.grid.visible" component={Checkbox} />
+          </FormItem>
+
+          <FormItem
+            label="Color"
+            invalid={
+              !!(errors.argumentAxisDto?.grid?.color && touched.argumentAxisDto?.grid?.color)
+            }
+            errorMessage={errors.argumentAxisDto?.grid?.color}
+          >
+            <Field type="text" name="argumentAxisDto.grid.color" component={Input} />
+          </FormItem>
+
+          <FormItem
+            label="Width"
+            invalid={
+              !!(errors.argumentAxisDto?.grid?.width && touched.argumentAxisDto?.grid?.width)
+            }
+            errorMessage={errors.argumentAxisDto?.grid?.width}
+          >
+            <Field type="number" name="argumentAxisDto.grid.width" component={Input} />
+          </FormItem>
+        </Card>
+
+        <Card className="my-2" header="Argument Axis - Label">
+          <FormItem
+            label="Position"
+            invalid={
+              !!(
+                errors.argumentAxisDto?.label?.displayMode &&
+                touched.argumentAxisDto?.label?.displayMode
+              )
+            }
+            errorMessage={errors.argumentAxisDto?.label?.displayMode}
+          >
+            <Field type="text" name="argumentAxisDto.label.displayMode">
+              {({ field, form }: FieldProps<SelectBoxOption>) => (
+                <Select
+                  field={field}
+                  form={form}
+                  options={chartArgumentAxisLabelDisplayModeListOptions}
+                  isClearable={true}
+                  value={chartArgumentAxisLabelDisplayModeListOptions.filter(
+                    (option) => option.value === values.argumentAxisDto.label.displayMode,
+                  )}
+                  onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                />
+              )}
+            </Field>
+          </FormItem>
+
+          <FormItem
+            label="Rotation Angle"
+            invalid={
+              !!(
+                errors.argumentAxisDto?.label?.rotationAngle &&
+                touched.argumentAxisDto?.label?.rotationAngle
+              )
+            }
+            errorMessage={errors.argumentAxisDto?.label?.rotationAngle}
+          >
+            <Field type="number" name="argumentAxisDto.label.rotationAngle" component={Input} />
+          </FormItem>
+
+          <FormItem
+            label="Overlapping Behavior"
+            invalid={
+              !!(
+                errors.argumentAxisDto?.label?.overlappingBehavior &&
+                touched.argumentAxisDto?.label?.overlappingBehavior
+              )
+            }
+            errorMessage={errors.argumentAxisDto?.label?.overlappingBehavior}
+          >
+            <Field type="text" name="argumentAxisDto.label.overlappingBehavior">
+              {({ field, form }: FieldProps<SelectBoxOption>) => (
+                <Select
+                  field={field}
+                  form={form}
+                  options={chartArgumentAxisLabelOverlappingBehaviorListOptions}
+                  isClearable={true}
+                  value={chartArgumentAxisLabelOverlappingBehaviorListOptions.filter(
+                    (option) => option.value === values.argumentAxisDto.label.overlappingBehavior,
+                  )}
+                  onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                />
+              )}
+            </Field>
+          </FormItem>
+        </Card>
+      </TabContent>
+      <TabContent value="axis_common">
+        <Card className="my-2">
+          <FormItem
+            label="Visible"
+            invalid={
+              !!(errors.commonAxisSettingsDto?.visible && touched.commonAxisSettingsDto?.visible)
+            }
+            errorMessage={errors.commonAxisSettingsDto?.visible}
+          >
+            <Field name="commonAxisSettingsDto.visible" component={Checkbox} />
+          </FormItem>
+
+          <FormItem
+            label="Title"
+            invalid={
+              !!(errors.commonAxisSettingsDto?.title && touched.commonAxisSettingsDto?.title)
+            }
+            errorMessage={errors.commonAxisSettingsDto?.title}
+          >
+            <Field type="text" name="title" component={Input} />
+          </FormItem>
+
+          <FormItem
+            label="Width"
+            invalid={
+              !!(errors.commonAxisSettingsDto?.width && touched.commonAxisSettingsDto?.width)
+            }
+            errorMessage={errors.commonAxisSettingsDto?.width}
+          >
+            <Field type="number" name="commonAxisSettingsDto.width" component={Input} />
+          </FormItem>
+        </Card>
+
+        <Card className="my-2" header="Common Axis Settings - Grid">
+          <FormItem
+            label="Visible"
+            invalid={
+              !!(
+                errors.commonAxisSettingsDto?.grid?.visible &&
+                touched.commonAxisSettingsDto?.grid?.visible
+              )
+            }
+            errorMessage={errors.commonAxisSettingsDto?.grid?.visible}
+          >
+            <Field name="commonAxisSettingsDto.grid.visible" component={Checkbox} />
+          </FormItem>
+
+          <FormItem
+            label="Color"
+            invalid={
+              !!(
+                errors.commonAxisSettingsDto?.grid?.color &&
+                touched.commonAxisSettingsDto?.grid?.color
+              )
+            }
+            errorMessage={errors.commonAxisSettingsDto?.grid?.color}
+          >
+            <Field type="text" name="commonAxisSettingsDto.grid.color" component={Input} />
+          </FormItem>
+
+          <FormItem
+            label="Width"
+            invalid={
+              !!(
+                errors.commonAxisSettingsDto?.grid?.width &&
+                touched.commonAxisSettingsDto?.grid?.width
+              )
+            }
+            errorMessage={errors.commonAxisSettingsDto?.grid?.width}
+          >
+            <Field type="number" name="commonAxisSettingsDto.grid.width" component={Input} />
+          </FormItem>
+        </Card>
+      </TabContent>
+    </Tabs>
+  )
+}
+
+export default ChartTabAxis
diff --git a/ui/src/views/admin/chart/edit/ChartTabCommonSettings.tsx b/ui/src/views/admin/chart/edit/ChartTabCommonSettings.tsx
new file mode 100644
index 00000000..6d9037d5
--- /dev/null
+++ b/ui/src/views/admin/chart/edit/ChartTabCommonSettings.tsx
@@ -0,0 +1,586 @@
+import { Card, Checkbox, FormItem, Input, Select, Tabs } from '@/components/ui'
+import TabContent from '@/components/ui/Tabs/TabContent'
+import TabList from '@/components/ui/Tabs/TabList'
+import TabNav from '@/components/ui/Tabs/TabNav'
+import { ChartEditDto } from '@/proxy/charts/models'
+import { IdentityRoleDto } from '@/proxy/admin/models'
+import {
+  chartArgumentAxisPositionListOptions,
+  chartPaletteExtensionModeOptions,
+  chartPaletteOptions,
+  chartSeriesDashStyleOptions,
+  chartTitleHorizantalAlignmentListOptions,
+  chartTitleTextOverFlowListOptions,
+  chartTitleVerticalAlignmentListOptions,
+  chartTitleWordWrapListOptions,
+  chartTooltipLocationListOptions,
+} from './../options'
+import { SelectBoxOption } from '@/shared/types'
+import { Field, FieldProps, FormikErrors, FormikTouched } from 'formik'
+import { themeOptions, tooltipFormatListOptions } from '@/shared/options'
+
+interface ChartTabCommonSettingsProps {
+  values: ChartEditDto
+  errors: FormikErrors<ChartEditDto>
+  touched: FormikTouched<ChartEditDto>
+}
+
+const ChartTabCommonSettings = ({ values, errors, touched }: ChartTabCommonSettingsProps) => {
+  return (
+    <Tabs defaultValue="commonSettings_general">
+      <TabList className="flex-wrap">
+        <TabNav value="commonSettings_general">General</TabNav>
+        <TabNav value="commonSettings_adaptiveLayouts">Adaptive Layout Settings</TabNav>
+        <TabNav value="commonSettings_title">Title Settings</TabNav>
+        <TabNav value="commonSettings_tooltip">Tooltip Settings</TabNav>
+        <TabNav value="commonSettings_margin">Margin Settings</TabNav>
+        <TabNav value="commonSettings_size">Size Settings</TabNav>
+        <TabNav value="commonSettings_scrollbar">ScrollBar Settings</TabNav>
+      </TabList>
+      <TabContent value="commonSettings_general">
+        <Card className="my-2">
+          <FormItem
+            label="Disabled"
+            invalid={!!(errors.commonDto?.disabled && touched.commonDto?.disabled)}
+            errorMessage={errors.commonDto?.disabled}
+          >
+            <Field name="commonDto.disabled" component={Checkbox} />
+          </FormItem>
+
+          <FormItem
+            label="Adjust On Zoom"
+            invalid={!!(errors.commonDto?.adjustOnZoom && touched.commonDto?.adjustOnZoom)}
+            errorMessage={errors.commonDto?.adjustOnZoom as string}
+          >
+            <Field name="commonDto.adjustOnZoom" component={Checkbox} />
+          </FormItem>
+
+          <FormItem
+            label="Container BackgroundColor"
+            invalid={
+              !!(
+                errors.commonDto?.containerBackgroundColor &&
+                touched.commonDto?.containerBackgroundColor
+              )
+            }
+            errorMessage={errors.commonDto?.containerBackgroundColor}
+          >
+            <Field name="commonDto.containerBackgroundColor" component={Input} />
+          </FormItem>
+
+          <FormItem
+            label="Default Pane"
+            invalid={!!(errors.commonDto?.defaultPane && touched.commonDto?.defaultPane)}
+            errorMessage={errors.commonDto?.defaultPane}
+          >
+            <Field type="text" name="commonDto.defaultPane" component={Input} />
+          </FormItem>
+
+          <FormItem
+            label="Theme"
+            invalid={!!(errors.commonDto?.theme && touched.commonDto?.theme)}
+            errorMessage={errors.commonDto?.theme}
+          >
+            <Field type="text" name="commonDto.theme">
+              {({ field, form }: FieldProps<SelectBoxOption>) => (
+                <Select
+                  field={field}
+                  form={form}
+                  options={themeOptions}
+                  isClearable={true}
+                  value={themeOptions.filter((option) => option.value === values.commonDto.theme)}
+                  onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                />
+              )}
+            </Field>
+          </FormItem>
+
+          <FormItem
+            label="Palette"
+            invalid={!!(errors.commonDto?.palette && touched.commonDto?.palette)}
+            errorMessage={errors.commonDto?.palette}
+          >
+            <Field type="text" name="commonDto.palette">
+              {({ field, form }: FieldProps<SelectBoxOption>) => (
+                <Select
+                  field={field}
+                  form={form}
+                  options={chartPaletteOptions}
+                  isClearable={true}
+                  value={chartPaletteOptions.filter(
+                    (option) => option.value === values.commonDto.palette,
+                  )}
+                  onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                />
+              )}
+            </Field>
+          </FormItem>
+
+          <FormItem
+            label="Palette Extension Mode"
+            invalid={
+              !!(errors.commonDto?.paletteExtensionMode && touched.commonDto?.paletteExtensionMode)
+            }
+            errorMessage={errors.commonDto?.paletteExtensionMode}
+          >
+            <Field type="text" name="commonDto.paletteExtensionMode">
+              {({ field, form }: FieldProps<any>) => (
+                <Select
+                  field={field}
+                  form={form}
+                  options={chartPaletteExtensionModeOptions}
+                  isClearable={true}
+                  value={chartPaletteExtensionModeOptions.filter(
+                    (option) => option.value === values.commonDto.paletteExtensionMode,
+                  )}
+                  onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                />
+              )}
+            </Field>
+          </FormItem>
+        </Card>
+      </TabContent>
+      <TabContent value="commonSettings_adaptiveLayouts">
+        <Card className="my-2">
+          <FormItem
+            label="Keep Labels"
+            invalid={
+              !!(errors.adaptivelayoutDto?.keepLabels && touched.adaptivelayoutDto?.keepLabels)
+            }
+            errorMessage={errors.adaptivelayoutDto?.keepLabels as string}
+          >
+            <Field name="adaptivelayoutDto.keepLabels" component={Checkbox} />
+          </FormItem>
+
+          <FormItem
+            label="Width"
+            invalid={!!(errors.adaptivelayoutDto?.width && touched.adaptivelayoutDto?.width)}
+            errorMessage={errors.adaptivelayoutDto?.width}
+          >
+            <Field type="number" name="adaptivelayoutDto.width" component={Input} />
+          </FormItem>
+
+          <FormItem
+            label="Height"
+            invalid={!!(errors.adaptivelayoutDto?.height && touched.adaptivelayoutDto?.height)}
+            errorMessage={errors.adaptivelayoutDto?.height}
+          >
+            <Field type="number" name="adaptivelayoutDto.height" component={Input} />
+          </FormItem>
+        </Card>
+      </TabContent>
+      <TabContent value="commonSettings_title">
+        <Card className="my-2">
+          <FormItem
+            label="Text"
+            invalid={!!(errors.titleDto?.text && touched.titleDto?.text)}
+            errorMessage={errors.titleDto?.text}
+          >
+            <Field name="titleDto.text" component={Input} />
+          </FormItem>
+
+          <FormItem
+            label="Subtitle"
+            invalid={!!(errors.titleDto?.subtitle && touched.titleDto?.subtitle)}
+            errorMessage={errors.titleDto?.subtitle}
+          >
+            <Field name="titleDto.subtitle" component={Input} />
+          </FormItem>
+
+          <FormItem
+            label="Vertical Alignment"
+            invalid={!!(errors.titleDto?.verticalAlignment && touched.titleDto?.verticalAlignment)}
+            errorMessage={errors.titleDto?.verticalAlignment}
+          >
+            <Field type="text" name="titleDto.verticalAlignment">
+              {({ field, form }: FieldProps<SelectBoxOption>) => (
+                <Select
+                  field={field}
+                  form={form}
+                  options={chartTitleVerticalAlignmentListOptions}
+                  isClearable={true}
+                  value={chartTitleVerticalAlignmentListOptions.filter(
+                    (option) => option.value === values.titleDto.verticalAlignment,
+                  )}
+                  onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                />
+              )}
+            </Field>
+          </FormItem>
+
+          <FormItem
+            label="Horizontal Alignment"
+            invalid={
+              !!(errors.titleDto?.horizontalAlignment && touched.titleDto?.horizontalAlignment)
+            }
+            errorMessage={errors.titleDto?.horizontalAlignment}
+          >
+            <Field type="text" name="titleDto.horizontalAlignment">
+              {({ field, form }: FieldProps<SelectBoxOption>) => (
+                <Select
+                  field={field}
+                  form={form}
+                  options={chartTitleHorizantalAlignmentListOptions}
+                  isClearable={true}
+                  value={chartTitleHorizantalAlignmentListOptions.filter(
+                    (option) => option.value === values.titleDto.horizontalAlignment,
+                  )}
+                  onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                />
+              )}
+            </Field>
+          </FormItem>
+
+          <FormItem
+            label="Text Overflow"
+            invalid={!!(errors.titleDto?.textOverflow && touched.titleDto?.textOverflow)}
+            errorMessage={errors.titleDto?.textOverflow}
+          >
+            <Field type="text" name="titleDto.textOverflow">
+              {({ field, form }: FieldProps<SelectBoxOption>) => (
+                <Select
+                  field={field}
+                  form={form}
+                  options={chartTitleTextOverFlowListOptions}
+                  isClearable={true}
+                  value={chartTitleTextOverFlowListOptions.filter(
+                    (option) => option.value === values.titleDto.textOverflow,
+                  )}
+                  onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                />
+              )}
+            </Field>
+          </FormItem>
+
+          <FormItem
+            label="Word Wrap"
+            invalid={!!(errors.titleDto?.wordWrap && touched.titleDto?.wordWrap)}
+            errorMessage={errors.titleDto?.wordWrap}
+          >
+            <Field type="text" name="titleDto.wordWrap">
+              {({ field, form }: FieldProps<SelectBoxOption>) => (
+                <Select
+                  field={field}
+                  form={form}
+                  options={chartTitleWordWrapListOptions}
+                  isClearable={true}
+                  value={chartTitleWordWrapListOptions.filter(
+                    (option) => option.value === values.titleDto.wordWrap,
+                  )}
+                  onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                />
+              )}
+            </Field>
+          </FormItem>
+        </Card>
+      </TabContent>
+      <TabContent value="commonSettings_tooltip">
+        <Card className="my-2">
+          <FormItem
+            label="Enabled"
+            invalid={!!(errors.tooltipDto?.enabled && touched.tooltipDto?.enabled)}
+            errorMessage={errors.tooltipDto?.enabled as string}
+          >
+            <Field name="tooltipDto.keepLabels" component={Checkbox} />
+          </FormItem>
+
+          <FormItem
+            label="Shared"
+            invalid={!!(errors.tooltipDto?.shared && touched.tooltipDto?.shared)}
+            errorMessage={errors.tooltipDto?.shared as string}
+          >
+            <Field name="tooltipDto.shared" component={Checkbox} />
+          </FormItem>
+
+          <FormItem
+            label="Format"
+            invalid={!!(errors.tooltipDto?.format && touched.tooltipDto?.format)}
+            errorMessage={errors.tooltipDto?.format}
+          >
+            <Field type="text" name="tooltipDto.format">
+              {({ field, form }: FieldProps<SelectBoxOption>) => (
+                <Select
+                  field={field}
+                  form={form}
+                  options={tooltipFormatListOptions}
+                  isClearable={true}
+                  value={tooltipFormatListOptions.filter(
+                    (option) => option.value === values.tooltipDto.format,
+                  )}
+                  onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                />
+              )}
+            </Field>
+          </FormItem>
+
+          <FormItem
+            label="Location"
+            invalid={!!(errors.tooltipDto?.location && touched.tooltipDto?.location)}
+            errorMessage={errors.tooltipDto?.location}
+          >
+            <Field type="text" name="tooltipDto.location">
+              {({ field, form }: FieldProps<SelectBoxOption>) => (
+                <Select
+                  field={field}
+                  form={form}
+                  options={chartTooltipLocationListOptions}
+                  isClearable={true}
+                  value={chartTooltipLocationListOptions.filter(
+                    (option) => option.value === values.tooltipDto.location,
+                  )}
+                  onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                />
+              )}
+            </Field>
+          </FormItem>
+
+          <FormItem
+            label="Color"
+            invalid={!!(errors.tooltipDto?.color && touched.tooltipDto?.color)}
+            errorMessage={errors.tooltipDto?.color}
+          >
+            <Field name="tooltipDto.color" component={Input} />
+          </FormItem>
+
+          <FormItem
+            label="Argument Format"
+            invalid={!!(errors.tooltipDto?.argumentFormat && touched.tooltipDto?.argumentFormat)}
+            errorMessage={errors.tooltipDto?.argumentFormat}
+          >
+            <Field name="tooltipDto.argumentFormat" component={Input} />
+          </FormItem>
+
+          <FormItem
+            label="Arrow Length"
+            invalid={!!(errors.tooltipDto?.arrowLength && touched.tooltipDto?.arrowLength)}
+            errorMessage={errors.tooltipDto?.arrowLength}
+          >
+            <Field type="number" name="tooltipDto.arrowLength" component={Input} />
+          </FormItem>
+
+          <FormItem
+            label="Padding Top/Bottom"
+            invalid={
+              !!(errors.tooltipDto?.paddingTopBottom && touched.tooltipDto?.paddingTopBottom)
+            }
+            errorMessage={errors.tooltipDto?.paddingTopBottom}
+          >
+            <Field type="number" name="tooltipDto.paddingTopBottom" component={Input} />
+          </FormItem>
+
+          <FormItem
+            label="Padding Left/Right"
+            invalid={
+              !!(errors.tooltipDto?.paddingLeftRight && touched.tooltipDto?.paddingLeftRight)
+            }
+            errorMessage={errors.tooltipDto?.paddingLeftRight}
+          >
+            <Field type="number" name="tooltipDto.paddingLeftRight" component={Input} />
+          </FormItem>
+        </Card>
+        <div className="font-bold m-3">Tooltip Settings - Font</div>
+        <FormItem
+          label="Color"
+          invalid={!!(errors.tooltipDto?.font?.color && touched.tooltipDto?.font?.color)}
+          errorMessage={errors.tooltipDto?.font?.color}
+        >
+          <Field name="tooltipDto.font.color" component={Input} />
+        </FormItem>
+
+        <FormItem
+          label="Family"
+          invalid={!!(errors.tooltipDto?.font?.family && touched.tooltipDto?.font?.family)}
+          errorMessage={errors.tooltipDto?.font?.family}
+        >
+          <Field name="tooltipDto.font.family" component={Input} />
+        </FormItem>
+
+        <FormItem
+          label="Size"
+          invalid={!!(errors.tooltipDto?.font?.size && touched.tooltipDto?.font?.size)}
+          errorMessage={errors.tooltipDto?.font?.size}
+        >
+          <Field type="number" name="tooltipDto.font.size" component={Input} />
+        </FormItem>
+
+        <FormItem
+          label="Weight"
+          invalid={!!(errors.tooltipDto?.font?.weight && touched.tooltipDto?.font?.weight)}
+          errorMessage={errors.tooltipDto?.font?.weight}
+        >
+          <Field type="number" name="tooltipDto.font.weight" component={Input} />
+        </FormItem>
+
+        <div className="font-bold m-3">Tooltip Settings - Border</div>
+        <FormItem
+          label="Visible"
+          invalid={!!(errors.tooltipDto?.border?.visible && touched.tooltipDto?.border?.visible)}
+          errorMessage={errors.tooltipDto?.border?.visible as string}
+        >
+          <Field name="tooltipDto.border.visible" component={Checkbox} />
+        </FormItem>
+
+        <FormItem
+          label="Dash Style"
+          invalid={
+            !!(errors.tooltipDto?.border?.dashStyle && touched.tooltipDto?.border?.dashStyle)
+          }
+          errorMessage={errors.tooltipDto?.border?.dashStyle}
+        >
+          <Field type="text" name="tooltipDto.border.dashStyle">
+            {({ field, form }: FieldProps<SelectBoxOption>) => (
+              <Select
+                field={field}
+                form={form}
+                options={chartSeriesDashStyleOptions}
+                isClearable={true}
+                value={chartSeriesDashStyleOptions.filter(
+                  (option) => option.value === values.tooltipDto.border.dashStyle,
+                )}
+                onChange={(option) => form.setFieldValue(field.name, option?.value)}
+              />
+            )}
+          </Field>
+        </FormItem>
+
+        <FormItem
+          label="Width"
+          invalid={!!(errors.tooltipDto?.border?.width && touched.tooltipDto?.border?.width)}
+          errorMessage={errors.tooltipDto?.border?.width}
+        >
+          <Field type="number" name="tooltipDto.border.width" component={Input} />
+        </FormItem>
+
+        <FormItem
+          label="Corner Radius"
+          invalid={
+            !!(errors.tooltipDto?.border?.cornerRadius && touched.tooltipDto?.border?.cornerRadius)
+          }
+          errorMessage={errors.tooltipDto?.border?.cornerRadius}
+        >
+          <Field type="number" name="tooltipDto.border.cornerRadius" component={Input} />
+        </FormItem>
+      </TabContent>
+      <TabContent value="commonSettings_margin">
+        <Card className="my-2">
+          <FormItem
+            label="Bottom"
+            invalid={!!(errors.marginDto?.bottom && touched.marginDto?.bottom)}
+            errorMessage={errors.marginDto?.bottom}
+          >
+            <Field type="number" name="marginDto.bottom" component={Input} />
+          </FormItem>
+
+          <FormItem
+            label="Top"
+            invalid={!!(errors.marginDto?.top && touched.marginDto?.top)}
+            errorMessage={errors.marginDto?.top}
+          >
+            <Field type="number" name="marginDto.top" component={Input} />
+          </FormItem>
+
+          <FormItem
+            label="Right"
+            invalid={!!(errors.marginDto?.right && touched.marginDto?.right)}
+            errorMessage={errors.marginDto?.right}
+          >
+            <Field type="number" name="marginDto.right" component={Input} />
+          </FormItem>
+
+          <FormItem
+            label="Left"
+            invalid={!!(errors.marginDto?.left && touched.marginDto?.left)}
+            errorMessage={errors.marginDto?.left}
+          >
+            <Field type="number" name="marginDto.left" component={Input} />
+          </FormItem>
+        </Card>
+      </TabContent>
+      <TabContent value="commonSettings_size">
+        <Card className="my-2">
+          <FormItem
+            label="Use Size"
+            invalid={!!(errors.sizeDto?.useSize && touched.sizeDto?.useSize)}
+            errorMessage={errors.sizeDto?.useSize as string}
+          >
+            <Field name="sizeDto.useSize" component={Checkbox} />
+          </FormItem>
+
+          <FormItem
+            label="Width"
+            invalid={!!(errors.sizeDto?.width && touched.sizeDto?.width)}
+            errorMessage={errors.sizeDto?.width}
+          >
+            <Field type="number" name="sizeDto.width" component={Input} />
+          </FormItem>
+
+          <FormItem
+            label="Height"
+            invalid={!!(errors.sizeDto?.height && touched.sizeDto?.height)}
+            errorMessage={errors.sizeDto?.height}
+          >
+            <Field type="number" name="sizeDto.height" component={Input} />
+          </FormItem>
+        </Card>
+      </TabContent>
+      <TabContent value="commonSettings_scrollbar">
+        <Card className="my-2">
+          <FormItem
+            label="Visible"
+            invalid={!!(errors.scrollBarDto?.visible && touched.scrollBarDto?.visible)}
+            errorMessage={errors.scrollBarDto?.visible as string}
+          >
+            <Field name="scrollBarDto.visible" component={Checkbox} />
+          </FormItem>
+
+          <FormItem
+            label="Color"
+            invalid={!!(errors.scrollBarDto?.color && touched.scrollBarDto?.color)}
+            errorMessage={errors.scrollBarDto?.color}
+          >
+            <Field name="scrollBarDto.color" component={Input} />
+          </FormItem>
+
+          <FormItem
+            label="Position"
+            invalid={!!(errors.scrollBarDto?.position && touched.scrollBarDto?.position)}
+            errorMessage={errors.scrollBarDto?.position}
+          >
+            <Field type="text" name="commonDto.position">
+              {({ field, form }: FieldProps<IdentityRoleDto>) => (
+                <Select
+                  field={field}
+                  form={form}
+                  options={chartArgumentAxisPositionListOptions}
+                  isClearable={true}
+                  value={chartArgumentAxisPositionListOptions.filter(
+                    (option) => option.value === values.scrollBarDto.position,
+                  )}
+                  onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                />
+              )}
+            </Field>
+          </FormItem>
+
+          <FormItem
+            label="Offset"
+            invalid={!!(errors.scrollBarDto?.offset && touched.scrollBarDto?.offset)}
+            errorMessage={errors.scrollBarDto?.offset}
+          >
+            <Field type="number" name="scrollBarDto.offset" component={Input} />
+          </FormItem>
+
+          <FormItem
+            label="Width"
+            invalid={!!(errors.scrollBarDto?.width && touched.scrollBarDto?.width)}
+            errorMessage={errors.scrollBarDto?.width}
+          >
+            <Field type="number" name="scrollBarDto.width" component={Input} />
+          </FormItem>
+        </Card>
+      </TabContent>
+    </Tabs>
+  )
+}
+
+export default ChartTabCommonSettings
diff --git a/ui/src/views/admin/chart/edit/ChartTabCrosshair.tsx b/ui/src/views/admin/chart/edit/ChartTabCrosshair.tsx
new file mode 100644
index 00000000..c96c288d
--- /dev/null
+++ b/ui/src/views/admin/chart/edit/ChartTabCrosshair.tsx
@@ -0,0 +1,302 @@
+import { Card, Checkbox, FormItem, Input, Select } from '@/components/ui'
+import { ChartEditDto } from '@/proxy/charts/models'
+import { tooltipFormatListOptions } from '@/shared/options'
+import { SelectBoxOption } from '@/shared/types'
+import { Field, FieldProps, FormikErrors, FormikTouched } from 'formik'
+import { chartSeriesDashStyleOptions } from './../options'
+
+interface ChartTabCrosshairProps {
+  values: ChartEditDto
+  errors: FormikErrors<ChartEditDto>
+  touched: FormikTouched<ChartEditDto>
+}
+
+const ChartTabCrosshair = ({ values, errors, touched }: ChartTabCrosshairProps) => {
+  return (
+    <>
+      <Card className="my-2">
+        <FormItem
+          label="Enabled"
+          invalid={!!(errors.crosshairDto?.enabled && touched.crosshairDto?.enabled)}
+          errorMessage={errors.crosshairDto?.enabled as string}
+        >
+          <Field name="crosshairDto.enabled" component={Checkbox} />
+        </FormItem>
+
+        <FormItem
+          label="Color"
+          invalid={!!(errors.crosshairDto?.color && touched.crosshairDto?.color)}
+          errorMessage={errors.crosshairDto?.color}
+        >
+          <Field type="text" name="crosshairDto.color" component={Input} />
+        </FormItem>
+
+        <FormItem
+          label="Dash Style"
+          invalid={!!(errors.crosshairDto?.dashStyle && touched.crosshairDto?.dashStyle)}
+          errorMessage={errors.crosshairDto?.dashStyle}
+        >
+          <Field type="text" name="crosshairDto.dashStyle">
+            {({ field, form }: FieldProps<SelectBoxOption>) => (
+              <Select
+                field={field}
+                form={form}
+                options={chartSeriesDashStyleOptions}
+                isClearable={true}
+                value={chartSeriesDashStyleOptions.filter(
+                  (option) => option.value === values.crosshairDto.dashStyle,
+                )}
+                onChange={(option) => form.setFieldValue(field.name, option?.value)}
+              />
+            )}
+          </Field>
+        </FormItem>
+
+        <FormItem
+          label="Width"
+          invalid={!!(errors.crosshairDto?.width && touched.crosshairDto?.width)}
+          errorMessage={errors.crosshairDto?.width}
+        >
+          <Field type="number" name="crosshairDto.width" component={Input} />
+        </FormItem>
+      </Card>
+
+      <Card className="my-2" header="Crosshair Options - Label">
+        <FormItem
+          label="Visible"
+          invalid={!!(errors.crosshairDto?.label?.visible && touched.crosshairDto?.label?.visible)}
+          errorMessage={errors.crosshairDto?.label?.visible as string}
+        >
+          <Field name="crosshairDto.label.visible" component={Checkbox} />
+        </FormItem>
+
+        <FormItem
+          label="Background Color"
+          invalid={
+            !!(
+              errors.crosshairDto?.label?.backgroundColor &&
+              touched.crosshairDto?.label?.backgroundColor
+            )
+          }
+          errorMessage={errors.crosshairDto?.label?.backgroundColor}
+        >
+          <Field type="text" name="crosshairDto.label.backgroundColor" component={Input} />
+        </FormItem>
+
+        <FormItem
+          label="Format"
+          invalid={!!(errors.crosshairDto?.label?.format && touched.crosshairDto?.label?.format)}
+          errorMessage={errors.crosshairDto?.label?.format}
+        >
+          <Field type="text" name="crosshairDto.label.format">
+            {({ field, form }: FieldProps<SelectBoxOption>) => (
+              <Select
+                field={field}
+                form={form}
+                options={tooltipFormatListOptions}
+                isClearable={true}
+                value={tooltipFormatListOptions.filter(
+                  (option) => option.value === values.crosshairDto.label.format,
+                )}
+                onChange={(option) => form.setFieldValue(field.name, option?.value)}
+              />
+            )}
+          </Field>
+        </FormItem>
+
+        <FormItem
+          label="Customize Text"
+          invalid={
+            !!(
+              errors.crosshairDto?.label?.customizeText &&
+              touched.crosshairDto?.label?.customizeText
+            )
+          }
+          errorMessage={errors.crosshairDto?.label?.customizeText}
+        >
+          <Field type="text" name="crosshairDto.label.customizeText" component={Input} />
+        </FormItem>
+      </Card>
+
+      <Card className="my-2" header="Crosshair Options - Label - Font">
+        <FormItem
+          label="Color"
+          invalid={
+            !!(errors.crosshairDto?.label?.font?.color && touched.crosshairDto?.label?.font?.color)
+          }
+          errorMessage={errors.crosshairDto?.label?.font?.color}
+        >
+          <Field type="text" name="crosshairDto.label.font.color" component={Input} />
+        </FormItem>
+
+        <FormItem
+          label="Family"
+          invalid={
+            !!(
+              errors.crosshairDto?.label?.font?.family && touched.crosshairDto?.label?.font?.family
+            )
+          }
+          errorMessage={errors.crosshairDto?.label?.font?.family}
+        >
+          <Field type="text" name="crosshairDto.label.font.family" component={Input} />
+        </FormItem>
+
+        <FormItem
+          label="Size"
+          invalid={
+            !!(errors.crosshairDto?.label?.font?.size && touched.crosshairDto?.label?.font?.size)
+          }
+          errorMessage={errors.crosshairDto?.label?.font?.size}
+        >
+          <Field type="number" name="crosshairDto.label.font.size" component={Input} />
+        </FormItem>
+
+        <FormItem
+          label="Weight"
+          invalid={
+            !!(
+              errors.crosshairDto?.label?.font?.weight && touched.crosshairDto?.label?.font?.weight
+            )
+          }
+          errorMessage={errors.crosshairDto?.label?.font?.weight}
+        >
+          <Field type="number" name="crosshairDto.label.font.weight" component={Input} />
+        </FormItem>
+      </Card>
+
+      <Card className="my-2" header="Crosshair Options - Label - Horizontal Line">
+        <FormItem
+          label="Visible"
+          invalid={
+            !!(
+              errors.crosshairDto?.horizontalLine?.visible &&
+              touched.crosshairDto?.horizontalLine?.visible
+            )
+          }
+          errorMessage={errors.crosshairDto?.horizontalLine?.visible as string}
+        >
+          <Field name="crosshairDto.horizontalLine.visible" component={Checkbox} />
+        </FormItem>
+
+        <FormItem
+          label="Color"
+          invalid={
+            !!(
+              errors.crosshairDto?.horizontalLine?.color &&
+              touched.crosshairDto?.horizontalLine?.color
+            )
+          }
+          errorMessage={errors.crosshairDto?.horizontalLine?.color}
+        >
+          <Field type="text" name="crosshairDto.horizontalLine.color" component={Input} />
+        </FormItem>
+
+        <FormItem
+          label="Dash Style"
+          invalid={
+            !!(
+              errors.crosshairDto?.horizontalLine?.dashStyle &&
+              touched.crosshairDto?.horizontalLine?.dashStyle
+            )
+          }
+          errorMessage={errors.crosshairDto?.horizontalLine?.dashStyle}
+        >
+          <Field type="text" name="crosshairDto.horizontalLine.dashStyle">
+            {({ field, form }: FieldProps<SelectBoxOption>) => (
+              <Select
+                field={field}
+                form={form}
+                options={chartSeriesDashStyleOptions}
+                isClearable={true}
+                value={chartSeriesDashStyleOptions.filter(
+                  (option) => option.value === values.crosshairDto.horizontalLine.dashStyle,
+                )}
+                onChange={(option) => form.setFieldValue(field.name, option?.value)}
+              />
+            )}
+          </Field>
+        </FormItem>
+
+        <FormItem
+          label="Width"
+          invalid={
+            !!(
+              errors.crosshairDto?.horizontalLine?.width &&
+              touched.crosshairDto?.horizontalLine?.width
+            )
+          }
+          errorMessage={errors.crosshairDto?.horizontalLine?.width}
+        >
+          <Field type="number" name="crosshairDto.horizontalLine.width" component={Input} />
+        </FormItem>
+      </Card>
+
+      <Card className="my-2" header="Crosshair Options - Label - Vertical Line">
+        <FormItem
+          label="Visible"
+          invalid={
+            !!(
+              errors.crosshairDto?.verticalLine?.visible &&
+              touched.crosshairDto?.verticalLine?.visible
+            )
+          }
+          errorMessage={errors.crosshairDto?.verticalLine?.visible as string}
+        >
+          <Field name="crosshairDto.verticalLine.visible" component={Checkbox} />
+        </FormItem>
+
+        <FormItem
+          label="Color"
+          invalid={
+            !!(
+              errors.crosshairDto?.verticalLine?.color && touched.crosshairDto?.verticalLine?.color
+            )
+          }
+          errorMessage={errors.crosshairDto?.verticalLine?.color}
+        >
+          <Field type="text" name="crosshairDto.verticalLine.color" component={Input} />
+        </FormItem>
+
+        <FormItem
+          label="Dash Style"
+          invalid={
+            !!(
+              errors.crosshairDto?.verticalLine?.dashStyle &&
+              touched.crosshairDto?.verticalLine?.dashStyle
+            )
+          }
+          errorMessage={errors.crosshairDto?.verticalLine?.dashStyle}
+        >
+          <Field type="text" name="crosshairDto.verticalLine.dashStyle">
+            {({ field, form }: FieldProps<SelectBoxOption>) => (
+              <Select
+                field={field}
+                form={form}
+                options={chartSeriesDashStyleOptions}
+                isClearable={true}
+                value={chartSeriesDashStyleOptions.filter(
+                  (option) => option.value === values.crosshairDto.verticalLine.dashStyle,
+                )}
+                onChange={(option) => form.setFieldValue(field.name, option?.value)}
+              />
+            )}
+          </Field>
+        </FormItem>
+
+        <FormItem
+          label="Width"
+          invalid={
+            !!(
+              errors.crosshairDto?.verticalLine?.width && touched.crosshairDto?.verticalLine?.width
+            )
+          }
+          errorMessage={errors.crosshairDto?.verticalLine?.width}
+        >
+          <Field type="number" name="crosshairDto.verticalLine.width" component={Input} />
+        </FormItem>
+      </Card>
+    </>
+  )
+}
+
+export default ChartTabCrosshair
diff --git a/ui/src/views/admin/chart/edit/ChartTabDatabase.tsx b/ui/src/views/admin/chart/edit/ChartTabDatabase.tsx
new file mode 100644
index 00000000..241dd417
--- /dev/null
+++ b/ui/src/views/admin/chart/edit/ChartTabDatabase.tsx
@@ -0,0 +1,83 @@
+import { Checkbox, FormItem, Input, Select } from '@/components/ui'
+import { ChartEditDto } from '@/proxy/charts/models'
+import { DataSourceTypeEnum } from '@/proxy/form/models'
+import { SelectBoxOption } from '@/shared/types'
+import { useLocalization } from '@/utils/hooks/useLocalization'
+import { Field, FieldProps, FormikErrors, FormikTouched } from 'formik'
+
+interface ChartTabDatabaseProps {
+  values: ChartEditDto
+  errors: FormikErrors<ChartEditDto>
+  touched: FormikTouched<ChartEditDto>
+  dataSourceList: SelectBoxOption[]
+}
+
+const ChartTabDatabase = ({ values, errors, touched, dataSourceList }: ChartTabDatabaseProps) => {
+  const { translate } = useLocalization()
+
+  return (
+    <>
+      <FormItem
+        label={translate('::ListForms.ListFormEdit.IsTenant')}
+        invalid={!!(errors.isTenant && touched.isTenant)}
+        errorMessage={errors.isTenant as string}
+      >
+        <Field
+          name="isTenant"
+          placeholder={translate('::ListForms.ListFormEdit.IsTenant')}
+          component={Checkbox}
+        />
+      </FormItem>
+      <FormItem
+        label={translate('::ListForms.ListFormEdit.IsBranch')}
+        invalid={!!(errors.isBranch && touched.isBranch)}
+        errorMessage={errors.isBranch as string}
+      >
+        <Field
+          name="isBranch"
+          placeholder={translate('::ListForms.ListFormEdit.IsBranch')}
+          component={Checkbox}
+        />
+      </FormItem>
+      <FormItem
+        label={translate('::ListForms.ListFormEdit.IsOrganizationUnit')}
+        invalid={!!(errors.isOrganizationUnit && touched.isOrganizationUnit)}
+        errorMessage={errors.isOrganizationUnit as string}
+      >
+        <Field
+          name="isOrganizationUnit"
+          placeholder={translate('::ListForms.ListFormEdit.IsOrganizationUnit')}
+          component={Checkbox}
+        />
+      </FormItem>
+
+      <FormItem
+        label="Data Source Code"
+        invalid={!!(errors.dataSourceCode && touched.dataSourceCode)}
+        errorMessage={errors.dataSourceCode}
+      >
+        <Field name="dataSourceCode">
+          {({ field, form }: FieldProps<DataSourceTypeEnum>) => (
+            <Select
+              field={field}
+              form={form}
+              options={dataSourceList}
+              value={dataSourceList?.filter((option) => option.value === values.dataSourceCode)}
+              onChange={(option) => form.setFieldValue(field.name, option?.value)}
+            />
+          )}
+        </Field>
+      </FormItem>
+
+      <FormItem
+        label="DataSource Query"
+        invalid={!!(errors.dataSourceDto?.query && touched.dataSourceDto?.query)}
+        errorMessage={errors.dataSourceDto?.query}
+      >
+        <Field type="text" name="dataSourceDto.query" component={Input} textArea={true} />
+      </FormItem>
+    </>
+  )
+}
+
+export default ChartTabDatabase
diff --git a/ui/src/views/admin/chart/edit/ChartTabDetails.tsx b/ui/src/views/admin/chart/edit/ChartTabDetails.tsx
new file mode 100644
index 00000000..b4bba7fc
--- /dev/null
+++ b/ui/src/views/admin/chart/edit/ChartTabDetails.tsx
@@ -0,0 +1,87 @@
+import { FormItem, Input, Select } from '@/components/ui'
+import { IdentityRoleDto, IdentityUserDto } from '@/proxy/admin/models'
+import { ChartEditDto } from '@/proxy/charts/models'
+import { LanguageInfo } from '@/proxy/config/models'
+import { SelectBoxOption } from '@/shared/types'
+import { Field, FieldProps, FormikErrors, FormikTouched } from 'formik'
+
+interface ChartTabDetailsProps {
+  values: ChartEditDto
+  errors: FormikErrors<ChartEditDto>
+  touched: FormikTouched<ChartEditDto>
+  langOptions: SelectBoxOption[]
+  roleList: SelectBoxOption[]
+  userList: SelectBoxOption[]
+}
+
+const ChartTabDetails = ({
+  values,
+  errors,
+  touched,
+  langOptions,
+  roleList,
+  userList,
+}: ChartTabDetailsProps) => {
+  return (
+    <>
+      <FormItem
+        label="Chart Code"
+        invalid={errors.chartCode && touched.chartCode}
+        errorMessage={errors.chartCode}
+      >
+        <Field type="text" name="chartCode" component={Input} />
+      </FormItem>
+
+      <FormItem
+        label="Culture Name"
+        invalid={errors.cultureName && touched.cultureName}
+        errorMessage={errors.cultureName}
+      >
+        <Field type="text" name="cultureName">
+          {({ field, form }: FieldProps<LanguageInfo>) => (
+            <Select
+              field={field}
+              form={form}
+              options={langOptions}
+              isClearable={true}
+              value={langOptions.filter((option) => option.value === values.cultureName)}
+              onChange={(option) => form.setFieldValue(field.name, option?.value)}
+            />
+          )}
+        </Field>
+      </FormItem>
+
+      <FormItem label="Role" invalid={errors.roleId && touched.roleId} errorMessage={errors.roleId}>
+        <Field type="text" name="roleId">
+          {({ field, form }: FieldProps<IdentityRoleDto>) => (
+            <Select
+              field={field}
+              form={form}
+              options={roleList}
+              isClearable={true}
+              value={roleList.filter((option) => option.value === values.roleId)}
+              onChange={(option) => form.setFieldValue(field.name, option?.value)}
+            />
+          )}
+        </Field>
+      </FormItem>
+
+      <FormItem label="User" invalid={errors.userId && touched.userId} errorMessage={errors.userId}>
+        <Field type="text" name="userId">
+          {({ field, form }: FieldProps<IdentityUserDto>) => (
+            <Select
+              field={field}
+              form={form}
+              options={userList}
+              isClearable={true}
+              value={userList.filter((option) => option.value === values.userId)}
+              onChange={(option) => form.setFieldValue(field.name, option?.value)}
+            />
+          )}
+        </Field>
+      </FormItem>
+    </>
+  )
+}
+
+export default ChartTabDetails
diff --git a/ui/src/views/admin/chart/edit/ChartTabExport.tsx b/ui/src/views/admin/chart/edit/ChartTabExport.tsx
new file mode 100644
index 00000000..7f1b3c4a
--- /dev/null
+++ b/ui/src/views/admin/chart/edit/ChartTabExport.tsx
@@ -0,0 +1,48 @@
+import { Card, Checkbox, FormItem, Input } from '@/components/ui'
+import { ChartEditDto } from '@/proxy/charts/models'
+import { Field, FormikErrors, FormikTouched } from 'formik'
+
+interface ChartTabExportProps {
+  errors: FormikErrors<ChartEditDto>
+  touched: FormikTouched<ChartEditDto>
+}
+
+const ChartTabExport = ({ errors, touched }: ChartTabExportProps) => {
+  return (
+    <Card className="my-2">
+      <FormItem
+        label="Enabled"
+        invalid={!!(errors.exportDto?.enabled && touched.exportDto?.enabled)}
+        errorMessage={errors.exportDto?.enabled as string}
+      >
+        <Field name="exportDto.enabled" component={Checkbox} />
+      </FormItem>
+
+      <FormItem
+        label="Printing Enabled"
+        invalid={!!(errors.exportDto?.printingEnabled && touched.exportDto?.printingEnabled)}
+        errorMessage={errors.exportDto?.printingEnabled as string}
+      >
+        <Field name="exportDto.printingEnabled" component={Checkbox} />
+      </FormItem>
+
+      <FormItem
+        label="Background Color"
+        invalid={!!(errors.exportDto?.backgroundColor && touched.exportDto?.backgroundColor)}
+        errorMessage={errors.exportDto?.backgroundColor}
+      >
+        <Field type="text" name="exportDto.backgroundColor" component={Input} />
+      </FormItem>
+
+      <FormItem
+        label="Margin"
+        invalid={!!(errors.exportDto?.margin && touched.exportDto?.margin)}
+        errorMessage={errors.exportDto?.margin}
+      >
+        <Field type="number" name="exportDto.margin" component={Input} />
+      </FormItem>
+    </Card>
+  )
+}
+
+export default ChartTabExport
diff --git a/ui/src/views/admin/chart/edit/ChartTabLegend.tsx b/ui/src/views/admin/chart/edit/ChartTabLegend.tsx
new file mode 100644
index 00000000..54fd327a
--- /dev/null
+++ b/ui/src/views/admin/chart/edit/ChartTabLegend.tsx
@@ -0,0 +1,176 @@
+import { Card, Checkbox, FormItem, Input, Select, Tabs } from '@/components/ui'
+import TabContent from '@/components/ui/Tabs/TabContent'
+import TabList from '@/components/ui/Tabs/TabList'
+import TabNav from '@/components/ui/Tabs/TabNav'
+import { ChartEditDto } from '@/proxy/charts/models'
+import { SelectBoxOption } from '@/shared/types'
+import { Field, FieldProps, FormikErrors, FormikTouched } from 'formik'
+import {
+  chartLegendOrientationListOptions,
+  chartLegendPositionListOptions,
+  chartSeriesDashStyleOptions,
+} from './../options'
+
+interface ChartTabLegendProps {
+  values: ChartEditDto
+  errors: FormikErrors<ChartEditDto>
+  touched: FormikTouched<ChartEditDto>
+}
+
+const ChartTabLegend = ({ values, errors, touched }: ChartTabLegendProps) => {
+  return (
+    <Tabs defaultValue="legendSettings_general">
+      <TabList>
+        <TabNav value="legendSettings_general">General</TabNav>
+        <TabNav value="legendSettings_border">Border</TabNav>
+      </TabList>
+      <TabContent value="legendSettings_general">
+        <Card className="my-2">
+          <FormItem
+            label="Visible"
+            invalid={!!(errors.legendDto?.visible && touched.legendDto?.visible)}
+            errorMessage={errors.legendDto?.visible}
+          >
+            <Field name="legendDto.visible" component={Checkbox} />
+          </FormItem>
+
+          <FormItem
+            label="Background Color"
+            invalid={!!(errors.legendDto?.backgroundColor && touched.legendDto?.backgroundColor)}
+            errorMessage={errors.legendDto?.backgroundColor}
+          >
+            <Field name="legendDto.backgroundColor" component={Input} />
+          </FormItem>
+
+          <FormItem
+            label="Title"
+            invalid={!!(errors.legendDto?.title && touched.legendDto?.title)}
+            errorMessage={errors.legendDto?.title}
+          >
+            <Field name="legendDto.title" component={Input} />
+          </FormItem>
+
+          <FormItem
+            label="Orientation"
+            invalid={!!(errors.legendDto?.orientation && touched.legendDto?.orientation)}
+            errorMessage={errors.legendDto?.orientation}
+          >
+            <Field type="text" name="legendDto.orientation">
+              {({ field, form }: FieldProps<SelectBoxOption>) => (
+                <Select
+                  field={field}
+                  form={form}
+                  options={chartLegendOrientationListOptions}
+                  isClearable={true}
+                  value={chartLegendOrientationListOptions.filter(
+                    (option) => option.value === values.legendDto.orientation,
+                  )}
+                  onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                />
+              )}
+            </Field>
+          </FormItem>
+
+          <FormItem
+            label="Position"
+            invalid={!!(errors.legendDto?.position && touched.legendDto?.position)}
+            errorMessage={errors.legendDto?.position}
+          >
+            <Field type="text" name="legendDto.position">
+              {({ field, form }: FieldProps<SelectBoxOption>) => (
+                <Select
+                  field={field}
+                  form={form}
+                  options={chartLegendPositionListOptions}
+                  isClearable={true}
+                  value={chartLegendPositionListOptions.filter(
+                    (option) => option.value === values.legendDto.position,
+                  )}
+                  onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                />
+              )}
+            </Field>
+          </FormItem>
+
+          <FormItem
+            label="Row Count"
+            invalid={!!(errors.legendDto?.rowCount && touched.legendDto?.rowCount)}
+            errorMessage={errors.legendDto?.rowCount}
+          >
+            <Field type="number" name="legendDto.rowCount" component={Input} />
+          </FormItem>
+
+          <FormItem
+            label="Column Count"
+            invalid={!!(errors.legendDto?.columnCount && touched.legendDto?.columnCount)}
+            errorMessage={errors.legendDto?.columnCount}
+          >
+            <Field type="number" name="legendDto.columnCount" component={Input} />
+          </FormItem>
+        </Card>
+      </TabContent>
+      <TabContent value="legendSettings_border">
+        <Card className="my-2">
+          <FormItem
+            label="Visible"
+            invalid={!!(errors.legendDto?.border?.visible && touched.legendDto?.border?.visible)}
+            errorMessage={errors.legendDto?.border?.visible}
+          >
+            <Field name="legendDto.border.visible" component={Checkbox} />
+          </FormItem>
+
+          <FormItem
+            label="Color"
+            invalid={!!(errors.legendDto?.border?.color && touched.legendDto?.border?.color)}
+            errorMessage={errors.legendDto?.border?.color}
+          >
+            <Field name="legendDto.border.color" component={Input} />
+          </FormItem>
+
+          <FormItem
+            label="Dash Style"
+            invalid={
+              !!(errors.legendDto?.border?.dashStyle && touched.legendDto?.border?.dashStyle)
+            }
+            errorMessage={errors.legendDto?.border?.dashStyle}
+          >
+            <Field type="text" name="legendDto.border.dashStyle">
+              {({ field, form }: FieldProps<SelectBoxOption>) => (
+                <Select
+                  field={field}
+                  form={form}
+                  options={chartSeriesDashStyleOptions}
+                  isClearable={true}
+                  value={chartSeriesDashStyleOptions.filter(
+                    (option) => option.value === values.legendDto.border.dashStyle,
+                  )}
+                  onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                />
+              )}
+            </Field>
+          </FormItem>
+
+          <FormItem
+            label="Width"
+            invalid={!!(errors.legendDto?.border?.width && touched.legendDto?.border?.width)}
+            errorMessage={errors.legendDto?.border?.width}
+          >
+            <Field type="number" name="legendDto.border.width" component={Input} />
+          </FormItem>
+
+          <FormItem
+            label="Corner Radius"
+            invalid={
+              !!(errors.legendDto?.border?.cornerRadius && touched.legendDto?.border?.cornerRadius)
+            }
+            errorMessage={errors.legendDto?.border?.cornerRadius}
+          >
+            <Field type="number" name="legendDto.border.cornerRadius" component={Input} />
+          </FormItem>
+        </Card>
+      </TabContent>
+    </Tabs>
+  )
+}
+
+export default ChartTabLegend
diff --git a/ui/src/views/admin/chart/edit/ChartTabPanes.tsx b/ui/src/views/admin/chart/edit/ChartTabPanes.tsx
new file mode 100644
index 00000000..87534cff
--- /dev/null
+++ b/ui/src/views/admin/chart/edit/ChartTabPanes.tsx
@@ -0,0 +1,127 @@
+import { Button, Card, FormItem, Input, Table } from '@/components/ui'
+import TBody from '@/components/ui/Table/TBody'
+import THead from '@/components/ui/Table/THead'
+import Td from '@/components/ui/Table/Td'
+import Th from '@/components/ui/Table/Th'
+import Tr from '@/components/ui/Table/Tr'
+import { ChartEditDto } from '@/proxy/charts/models'
+import { Field, FormikErrors, FormikTouched } from 'formik'
+import { FaEdit, FaFileMedical, FaTrash } from 'react-icons/fa'
+import { ConfirmDelete, DatabaseOperation } from '../ChartEdit'
+
+interface ChartTabPanesProps {
+  values: ChartEditDto
+  errors: FormikErrors<ChartEditDto>
+  touched: FormikTouched<ChartEditDto>
+  chartValues: ChartEditDto
+  setDatabaseOperationsModalData: (data: DatabaseOperation) => void
+  setConfirmDelete: (data: ConfirmDelete) => void
+}
+
+const ChartTabPanes = ({
+  values,
+  errors,
+  touched,
+  chartValues,
+  setDatabaseOperationsModalData,
+  setConfirmDelete,
+}: ChartTabPanesProps) => {
+  return (
+    <>
+      <Card className="my-2">
+        <FormItem
+          label="Background Color"
+          invalid={
+            !!(
+              errors.commonPaneSettingsDto?.backgroundColor &&
+              touched.commonPaneSettingsDto?.backgroundColor
+            )
+          }
+          errorMessage={errors.commonPaneSettingsDto?.backgroundColor}
+        >
+          <Field type="text" name="commonPaneSettingsDto.backgroundColor" component={Input} />
+        </FormItem>
+      </Card>
+      <Card className="my-2" bodyClass="p-0">
+        <Table compact>
+          <THead>
+            <Tr>
+              <Th>
+                <Button
+                  shape="circle"
+                  variant="plain"
+                  type="button"
+                  size="xs"
+                  title="Add"
+                  icon={<FaFileMedical />}
+                  onClick={async (e) => {
+                    e.preventDefault()
+                    setDatabaseOperationsModalData({
+                      id: values.id ?? '',
+                      index: -1,
+                      isOpen: 'pane',
+                      operation: 'insert',
+                    })
+                  }}
+                />
+              </Th>
+              <Th>Name</Th>
+              <Th>Background Color</Th>
+              <Th>Height</Th>
+            </Tr>
+          </THead>
+          <TBody>
+            {chartValues.panesDto.map((row, index) => (
+              <Tr key={index}>
+                <Td>
+                  <div className="flex-wrap inline-flex xl:flex items-center gap-2">
+                    <Button
+                      shape="circle"
+                      variant="plain"
+                      type="button"
+                      size="xs"
+                      title="Edit"
+                      icon={<FaEdit />}
+                      onClick={async (e) => {
+                        e.preventDefault()
+                        setDatabaseOperationsModalData({
+                          id: values.id ?? '',
+                          index,
+                          isOpen: 'pane',
+                          operation: 'update',
+                          panesValues: chartValues.panesDto[index],
+                        })
+                      }}
+                    />
+                    <Button
+                      shape="circle"
+                      variant="plain"
+                      type="button"
+                      size="xs"
+                      title="Delete"
+                      icon={<FaTrash />}
+                      onClick={async (e) => {
+                        e.preventDefault()
+                        setConfirmDelete({
+                          isOpen: true,
+                          id: values.id ?? '',
+                          fieldName: 'pane',
+                          index,
+                        })
+                      }}
+                    />
+                  </div>
+                </Td>
+                <Td>{row.name}</Td>
+                <Td>{row.backgroundColor}</Td>
+                <Td>{row.height}</Td>
+              </Tr>
+            ))}
+          </TBody>
+        </Table>
+      </Card>
+    </>
+  )
+}
+
+export default ChartTabPanes
diff --git a/ui/src/views/admin/chart/edit/ChartTabPermissions.tsx b/ui/src/views/admin/chart/edit/ChartTabPermissions.tsx
new file mode 100644
index 00000000..d45a6d9b
--- /dev/null
+++ b/ui/src/views/admin/chart/edit/ChartTabPermissions.tsx
@@ -0,0 +1,98 @@
+import { FormItem, Select } from '@/components/ui'
+import { MenuDto } from '@/proxy/menus/models'
+import { ChartEditDto } from '@/proxy/charts/models'
+import { SelectBoxOption } from '@/shared/types'
+import { Field, FieldProps, FormikErrors, FormikTouched } from 'formik'
+
+interface ChartTabPermissionsProps {
+  values: ChartEditDto
+  errors: FormikErrors<ChartEditDto>
+  touched: FormikTouched<ChartEditDto>
+  permissionOptions: SelectBoxOption[]
+}
+
+const ChartTabPermissions = ({
+  values,
+  errors,
+  touched,
+  permissionOptions,
+}: ChartTabPermissionsProps) => {
+  return (
+    <>
+      <FormItem
+        label="Create"
+        invalid={!!(errors.permissionDto?.c && touched.permissionDto?.c)}
+        errorMessage={errors.permissionDto?.c}
+      >
+        <Field name="permissionDto.c">
+          {({ field, form }: FieldProps<MenuDto>) => (
+            <Select
+              field={field}
+              form={form}
+              options={permissionOptions}
+              isClearable={true}
+              value={permissionOptions.filter((option) => option.value === values.permissionDto.c)}
+              onChange={(option) => form.setFieldValue(field.name, option?.value)}
+            />
+          )}
+        </Field>
+      </FormItem>
+      <FormItem
+        label="Read"
+        invalid={!!(errors.permissionDto?.r && touched.permissionDto?.r)}
+        errorMessage={errors.permissionDto?.r}
+      >
+        <Field name="permissionDto.r">
+          {({ field, form }: FieldProps<MenuDto>) => (
+            <Select
+              field={field}
+              form={form}
+              options={permissionOptions}
+              isClearable={true}
+              value={permissionOptions.filter((option) => option.value === values.permissionDto.r)}
+              onChange={(option) => form.setFieldValue(field.name, option?.value)}
+            />
+          )}
+        </Field>
+      </FormItem>
+      <FormItem
+        label="Update"
+        invalid={!!(errors.permissionDto?.u && touched.permissionDto?.u)}
+        errorMessage={errors.permissionDto?.u}
+      >
+        <Field name="permissionDto.u">
+          {({ field, form }: FieldProps<MenuDto>) => (
+            <Select
+              field={field}
+              form={form}
+              options={permissionOptions}
+              isClearable={true}
+              value={permissionOptions.filter((option) => option.value === values.permissionDto.u)}
+              onChange={(option) => form.setFieldValue(field.name, option?.value)}
+            />
+          )}
+        </Field>
+      </FormItem>
+      <FormItem
+        label="Delete"
+        invalid={!!(errors.permissionDto?.d && touched.permissionDto?.d)}
+        errorMessage={errors.permissionDto?.d}
+      >
+        <Field name="permissionDto.d">
+          {({ field, form }: FieldProps<MenuDto>) => (
+            <Select
+              field={field}
+              form={form}
+              options={permissionOptions}
+              isClearable={true}
+              value={permissionOptions.filter((option) => option.value === values.permissionDto.d)}
+              onChange={(option) => form.setFieldValue(field.name, option?.value)}
+            />
+          )}
+        </Field>
+      </FormItem>
+    </>
+  )
+}
+
+export default ChartTabPermissions
diff --git a/ui/src/views/admin/chart/edit/ChartTabSeries.tsx b/ui/src/views/admin/chart/edit/ChartTabSeries.tsx
new file mode 100644
index 00000000..464edc53
--- /dev/null
+++ b/ui/src/views/admin/chart/edit/ChartTabSeries.tsx
@@ -0,0 +1,366 @@
+import { Button, Card, Checkbox, FormItem, Input, Select, Table, Tabs } from '@/components/ui'
+import TBody from '@/components/ui/Table/TBody'
+import THead from '@/components/ui/Table/THead'
+import Td from '@/components/ui/Table/Td'
+import Th from '@/components/ui/Table/Th'
+import Tr from '@/components/ui/Table/Tr'
+import TabContent from '@/components/ui/Tabs/TabContent'
+import TabList from '@/components/ui/Tabs/TabList'
+import TabNav from '@/components/ui/Tabs/TabNav'
+import {
+  ChartAnnotationDto,
+  ChartEditDto,
+  ChartPanesDto,
+  ChartSeriesDto,
+  ChartValueAxisDto,
+} from '@/proxy/charts/models'
+import { SelectBoxOption } from '@/shared/types'
+import { Field, FieldProps, FormikErrors, FormikTouched } from 'formik'
+import { FaEdit, FaPlus, FaTrash } from 'react-icons/fa'
+import {
+  chartSeriesDashStyleOptions,
+  chartSeriesSelectionModeOptions,
+  chartSeriesTypeOptions,
+} from './../options'
+import { ChartDialogType, ChartOperation } from './../types'
+import { ConfirmDelete, DatabaseOperation } from '../ChartEdit'
+
+interface ChartTabSeriesProps {
+  values: ChartEditDto
+  errors: FormikErrors<ChartEditDto>
+  touched: FormikTouched<ChartEditDto>
+  chartValues: ChartEditDto
+  setDatabaseOperationsModalData: (data: DatabaseOperation) => void
+  setConfirmDelete: (data: ConfirmDelete) => void
+  valueAxisList: () => SelectBoxOption[] | undefined
+  valuePaneList: () => SelectBoxOption[] | undefined
+}
+
+const ChartTabSeries = ({
+  values,
+  errors,
+  touched,
+  chartValues,
+  setDatabaseOperationsModalData,
+  setConfirmDelete,
+  valueAxisList,
+  valuePaneList,
+}: ChartTabSeriesProps) => {
+  return (
+    <Tabs defaultValue="series_general">
+      <TabList>
+        <TabNav value="series_general">General</TabNav>
+        <TabNav value="series_common">Common Series Settings</TabNav>
+      </TabList>
+      <TabContent value="series_general">
+        <Card className="my-2" bodyClass="p-0">
+          <Table compact>
+            <THead>
+              <Tr>
+                <Th>
+                  <Button
+                    shape="circle"
+                    variant="plain"
+                    type="button"
+                    size="xs"
+                    title="Add"
+                    icon={<FaPlus />}
+                    onClick={async (e) => {
+                      e.preventDefault()
+                      setDatabaseOperationsModalData({
+                        id: values.id ?? '',
+                        index: -1,
+                        isOpen: 'serie',
+                        operation: 'insert',
+                      })
+                    }}
+                  />
+                </Th>
+                <Th>Type</Th>
+                <Th>Name</Th>
+                <Th>Argument Field</Th>
+                <Th>Value Field</Th>
+                <Th>Pane</Th>
+                <Th>Axis</Th>
+              </Tr>
+            </THead>
+            <TBody>
+              {chartValues.seriesDto.map((row, index) => (
+                <Tr key={index}>
+                  <Td>
+                    <div className="flex-wrap inline-flex xl:flex items-center gap-2">
+                      <Button
+                        shape="circle"
+                        variant="plain"
+                        type="button"
+                        size="xs"
+                        title="Edit"
+                        icon={<FaEdit />}
+                        onClick={async (e) => {
+                          e.preventDefault()
+                          setDatabaseOperationsModalData({
+                            id: values.id ?? '',
+                            index,
+                            isOpen: 'serie',
+                            operation: 'update',
+                            seriesValues: chartValues.seriesDto[index],
+                          })
+                        }}
+                      />
+                      <Button
+                        shape="circle"
+                        variant="plain"
+                        type="button"
+                        size="xs"
+                        title="Delete"
+                        icon={<FaTrash />}
+                        onClick={async (e) => {
+                          e.preventDefault()
+                          setConfirmDelete({
+                            isOpen: true,
+                            id: values.id ?? '',
+                            fieldName: 'serie',
+                            index,
+                          })
+                        }}
+                      />
+                    </div>
+                  </Td>
+                  <Td>{row.type}</Td>
+                  <Td>{row.name}</Td>
+                  <Td>{row.argumentField}</Td>
+                  <Td>{row.valueField}</Td>
+                  <Td>{row.pane}</Td>
+                  <Td>{row.axis}</Td>
+                </Tr>
+              ))}
+            </TBody>
+          </Table>
+        </Card>
+      </TabContent>
+      <TabContent value="series_common">
+        <Card className="my-2">
+          <FormItem
+            label="Visible"
+            invalid={
+              !!(
+                errors.commonSeriesSettingsDto?.visible && touched.commonSeriesSettingsDto?.visible
+              )
+            }
+            errorMessage={errors.commonSeriesSettingsDto?.visible}
+          >
+            <Field name="commonSeriesSettingsDto.visible" component={Checkbox} />
+          </FormItem>
+
+          <FormItem
+            label="Show In Legend"
+            invalid={
+              !!(
+                errors.commonSeriesSettingsDto?.showInLegend &&
+                touched.commonSeriesSettingsDto?.showInLegend
+              )
+            }
+            errorMessage={errors.commonSeriesSettingsDto?.showInLegend}
+          >
+            <Field name="commonSeriesSettingsDto.showInLegend" component={Checkbox} />
+          </FormItem>
+
+          <FormItem
+            label="Ignore Empty Points"
+            invalid={
+              !!(
+                errors.commonSeriesSettingsDto?.ignoreEmptyPoints &&
+                touched.commonSeriesSettingsDto?.ignoreEmptyPoints
+              )
+            }
+            errorMessage={errors.commonSeriesSettingsDto?.ignoreEmptyPoints}
+          >
+            <Field name="commonSeriesSettingsDto.ignoreEmptyPoints" component={Checkbox} />
+          </FormItem>
+
+          <FormItem
+            label="Type"
+            invalid={
+              !!(errors.commonSeriesSettingsDto?.type && touched.commonSeriesSettingsDto?.type)
+            }
+            errorMessage={errors.commonSeriesSettingsDto?.type}
+          >
+            <Field type="text" name="commonSeriesSettingsDto.type">
+              {({ field, form }: FieldProps<SelectBoxOption>) => (
+                <Select
+                  field={field}
+                  form={form}
+                  options={chartSeriesTypeOptions}
+                  isClearable={true}
+                  value={chartSeriesTypeOptions.filter(
+                    (option) => option.value === values.commonSeriesSettingsDto.type,
+                  )}
+                  onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                />
+              )}
+            </Field>
+          </FormItem>
+
+          <FormItem
+            label="Selection Mode"
+            invalid={
+              !!(
+                errors.commonSeriesSettingsDto?.selectionMode &&
+                touched.commonSeriesSettingsDto?.selectionMode
+              )
+            }
+            errorMessage={errors.commonSeriesSettingsDto?.selectionMode}
+          >
+            <Field type="text" name="commonSeriesSettingsDto.selectionMode">
+              {({ field, form }: FieldProps<SelectBoxOption>) => (
+                <Select
+                  field={field}
+                  form={form}
+                  options={chartSeriesSelectionModeOptions}
+                  isClearable={true}
+                  value={chartSeriesSelectionModeOptions.filter(
+                    (option) => option.value === values.commonSeriesSettingsDto.selectionMode,
+                  )}
+                  onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                />
+              )}
+            </Field>
+          </FormItem>
+
+          <FormItem
+            label="Argument Field"
+            invalid={
+              !!(
+                errors.commonSeriesSettingsDto?.argumentField &&
+                touched.commonSeriesSettingsDto?.argumentField
+              )
+            }
+            errorMessage={errors.commonSeriesSettingsDto?.argumentField}
+          >
+            <Field name="commonSeriesSettingsDto.argumentField" component={Input} />
+          </FormItem>
+
+          <FormItem
+            label="Value Field"
+            invalid={
+              !!(
+                errors.commonSeriesSettingsDto?.valueField &&
+                touched.commonSeriesSettingsDto?.valueField
+              )
+            }
+            errorMessage={errors.commonSeriesSettingsDto?.valueField}
+          >
+            <Field name="commonSeriesSettingsDto.valueField" component={Input} />
+          </FormItem>
+
+          <FormItem
+            label="Axis"
+            invalid={
+              !!(errors.commonSeriesSettingsDto?.axis && touched.commonSeriesSettingsDto?.axis)
+            }
+            errorMessage={errors.commonSeriesSettingsDto?.axis}
+          >
+            <Field type="text" name="commonSeriesSettingsDto.axis">
+              {({ field, form }: FieldProps<SelectBoxOption>) => (
+                <Select
+                  field={field}
+                  form={form}
+                  options={valueAxisList()}
+                  isClearable={true}
+                  value={valueAxisList()?.find(
+                    (option) => option.value === values.commonSeriesSettingsDto.axis,
+                  )}
+                  onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                />
+              )}
+            </Field>
+          </FormItem>
+
+          <FormItem
+            label="Pane"
+            invalid={
+              !!(errors.commonSeriesSettingsDto?.pane && touched.commonSeriesSettingsDto?.pane)
+            }
+            errorMessage={errors.commonSeriesSettingsDto?.pane}
+          >
+            <Field type="text" name="commonSeriesSettingsDto.pane">
+              {({ field, form }: FieldProps<SelectBoxOption>) => (
+                <Select
+                  field={field}
+                  form={form}
+                  options={valuePaneList()}
+                  isClearable={true}
+                  value={valuePaneList()?.find(
+                    (option) => option.value === values.commonSeriesSettingsDto.pane,
+                  )}
+                  onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                />
+              )}
+            </Field>
+          </FormItem>
+
+          <FormItem
+            label="Color"
+            invalid={
+              !!(errors.commonSeriesSettingsDto?.color && touched.commonSeriesSettingsDto?.color)
+            }
+            errorMessage={errors.commonSeriesSettingsDto?.color}
+          >
+            <Field name="commonSeriesSettingsDto.color" component={Input} />
+          </FormItem>
+
+          <FormItem
+            label="Corner Radius"
+            invalid={
+              !!(
+                errors.commonSeriesSettingsDto?.cornerRadius &&
+                touched.commonSeriesSettingsDto?.cornerRadius
+              )
+            }
+            errorMessage={errors.commonSeriesSettingsDto?.cornerRadius}
+          >
+            <Field type="number" name="commonSeriesSettingsDto.cornerRadius" component={Input} />
+          </FormItem>
+
+          <FormItem
+            label="Type"
+            invalid={
+              !!(
+                errors.commonSeriesSettingsDto?.dashStyle &&
+                touched.commonSeriesSettingsDto?.dashStyle
+              )
+            }
+            errorMessage={errors.commonSeriesSettingsDto?.dashStyle}
+          >
+            <Field type="text" name="commonSeriesSettingsDto.dashStyle">
+              {({ field, form }: FieldProps<SelectBoxOption>) => (
+                <Select
+                  field={field}
+                  form={form}
+                  options={chartSeriesDashStyleOptions}
+                  isClearable={true}
+                  value={chartSeriesDashStyleOptions.filter(
+                    (option) => option.value === values.commonSeriesSettingsDto.dashStyle,
+                  )}
+                  onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                />
+              )}
+            </Field>
+          </FormItem>
+
+          <FormItem
+            label="Width"
+            invalid={
+              !!(errors.commonSeriesSettingsDto?.width && touched.commonSeriesSettingsDto?.width)
+            }
+            errorMessage={errors.commonSeriesSettingsDto?.width}
+          >
+            <Field type="number" name="commonSeriesSettingsDto.width" component={Input} />
+          </FormItem>
+        </Card>
+      </TabContent>
+    </Tabs>
+  )
+}
+
+export default ChartTabSeries
diff --git a/ui/src/views/admin/chart/edit/ChartTabZoomAndPan.tsx b/ui/src/views/admin/chart/edit/ChartTabZoomAndPan.tsx
new file mode 100644
index 00000000..11993f35
--- /dev/null
+++ b/ui/src/views/admin/chart/edit/ChartTabZoomAndPan.tsx
@@ -0,0 +1,142 @@
+import { Card, Checkbox, FormItem, Input, Select } from '@/components/ui'
+import { ChartEditDto } from '@/proxy/charts/models'
+import { SelectBoxOption } from '@/shared/types'
+import { Field, FieldProps, FormikErrors, FormikTouched } from 'formik'
+import { chartZoomAndPanAxisOptions, chartZoomAndPanKeyOptions } from './../options'
+
+interface ChartTabZoomAndPanProps {
+  values: ChartEditDto
+  errors: FormikErrors<ChartEditDto>
+  touched: FormikTouched<ChartEditDto>
+}
+
+const ChartTabZoomAndPan = ({ values, errors, touched }: ChartTabZoomAndPanProps) => {
+  return (
+    <>
+      <Card className="my-2">
+        <FormItem
+          label="Allow Mouse Wheel"
+          invalid={
+            !!(errors.zoomAndPanDto?.allowMouseWheel && touched.zoomAndPanDto?.allowMouseWheel)
+          }
+          errorMessage={errors.zoomAndPanDto?.allowMouseWheel as string}
+        >
+          <Field name="zoomAndPanDto.allowMouseWheel" component={Checkbox} />
+        </FormItem>
+
+        <FormItem
+          label="Allow Touch Gestures"
+          invalid={
+            !!(
+              errors.zoomAndPanDto?.allowTouchGestures && touched.zoomAndPanDto?.allowTouchGestures
+            )
+          }
+          errorMessage={errors.zoomAndPanDto?.allowTouchGestures as string}
+        >
+          <Field name="zoomAndPanDto.allowTouchGestures" component={Checkbox} />
+        </FormItem>
+
+        <FormItem
+          label="Drag To Zoom"
+          invalid={!!(errors.zoomAndPanDto?.dragToZoom && touched.zoomAndPanDto?.dragToZoom)}
+          errorMessage={errors.zoomAndPanDto?.dragToZoom as string}
+        >
+          <Field name="zoomAndPanDto.dragToZoom" component={Checkbox} />
+        </FormItem>
+
+        <FormItem
+          label="Argument Axis"
+          invalid={!!(errors.zoomAndPanDto?.argumentAxis && touched.zoomAndPanDto?.argumentAxis)}
+          errorMessage={errors.zoomAndPanDto?.argumentAxis}
+        >
+          <Field type="text" name="zoomAndPanDto.argumentAxis">
+            {({ field, form }: FieldProps<SelectBoxOption>) => (
+              <Select
+                field={field}
+                form={form}
+                options={chartZoomAndPanAxisOptions}
+                isClearable={true}
+                value={chartZoomAndPanAxisOptions.filter(
+                  (option) => option.value === values.zoomAndPanDto.argumentAxis,
+                )}
+                onChange={(option) => form.setFieldValue(field.name, option?.value)}
+              />
+            )}
+          </Field>
+        </FormItem>
+
+        <FormItem
+          label="Value Axis"
+          invalid={!!(errors.zoomAndPanDto?.valueAxis && touched.zoomAndPanDto?.valueAxis)}
+          errorMessage={errors.zoomAndPanDto?.valueAxis}
+        >
+          <Field type="text" name="zoomAndPanDto.valueAxis">
+            {({ field, form }: FieldProps<SelectBoxOption>) => (
+              <Select
+                field={field}
+                form={form}
+                options={chartZoomAndPanAxisOptions}
+                isClearable={true}
+                value={chartZoomAndPanAxisOptions.filter(
+                  (option) => option.value === values.zoomAndPanDto.valueAxis,
+                )}
+                onChange={(option) => form.setFieldValue(field.name, option?.value)}
+              />
+            )}
+          </Field>
+        </FormItem>
+
+        <FormItem
+          label="Pan Key"
+          invalid={!!(errors.zoomAndPanDto?.panKey && touched.zoomAndPanDto?.panKey)}
+          errorMessage={errors.zoomAndPanDto?.panKey}
+        >
+          <Field type="text" name="zoomAndPanDto.panKey">
+            {({ field, form }: FieldProps<SelectBoxOption>) => (
+              <Select
+                field={field}
+                form={form}
+                options={chartZoomAndPanKeyOptions}
+                isClearable={true}
+                value={chartZoomAndPanKeyOptions.filter(
+                  (option) => option.value === values.zoomAndPanDto.panKey,
+                )}
+                onChange={(option) => form.setFieldValue(field.name, option?.value)}
+              />
+            )}
+          </Field>
+        </FormItem>
+      </Card>
+
+      <Card className="my-2" header="Zoom and Pan - DragBox Style">
+        <FormItem
+          label="Color"
+          invalid={
+            !!(
+              errors.zoomAndPanDto?.dragBoxStyle?.color &&
+              touched.zoomAndPanDto?.dragBoxStyle?.color
+            )
+          }
+          errorMessage={errors.zoomAndPanDto?.dragBoxStyle?.color}
+        >
+          <Field name="zoomAndPanDto.dragBoxStyle.color" component={Input} />
+        </FormItem>
+
+        <FormItem
+          label="Opacity"
+          invalid={
+            !!(
+              errors.zoomAndPanDto?.dragBoxStyle?.opacity &&
+              touched.zoomAndPanDto?.dragBoxStyle?.opacity
+            )
+          }
+          errorMessage={errors.zoomAndPanDto?.dragBoxStyle?.opacity as string}
+        >
+          <Field type="number" name="zoomAndPanDto.dragBoxStyle.opacity" component={Input} />
+        </FormItem>
+      </Card>
+    </>
+  )
+}
+
+export default ChartTabZoomAndPan
diff --git a/ui/src/views/admin/listForm/edit/FormEdit.tsx b/ui/src/views/admin/listForm/edit/FormEdit.tsx
index 4de79178..5a9c59bc 100644
--- a/ui/src/views/admin/listForm/edit/FormEdit.tsx
+++ b/ui/src/views/admin/listForm/edit/FormEdit.tsx
@@ -34,6 +34,8 @@ import { Container } from '@/components/shared'
 import { ROUTES_ENUM } from '@/routes/route.constant'
 import FormTabWidgets from './FormTabWidgets'
 import FormTabExtraFilters from './FormTabExtraFilters'
+import FormTabEditForm from './FormTabEditForm'
+import FormTabPivots from './FormTabPivots'
 
 export interface FormEditProps {
   onSubmit: (
@@ -185,16 +187,18 @@ const FormEdit = () => {
           <TabNav value="search">{translate('::ListForms.ListFormEdit.TabSearch')}</TabNav>
           <TabNav value="group">{translate('::ListForms.ListFormEdit.TabGrouping')}</TabNav>
           <TabNav value="select">{translate('::ListForms.ListFormEdit.TabSelection')}</TabNav>
-          <TabNav value="columns">{translate('::ListForms.ListFormEdit.TabColumnsPivots')}</TabNav>
+          <TabNav value="columns">{translate('::ListForms.ListFormEdit.TabColumns')}</TabNav>
+          <TabNav value="pivots">{translate('::ListForms.ListFormEdit.TabPivots')}</TabNav>
           <TabNav value="pager">{translate('::ListForms.ListFormEdit.TabPaging')}</TabNav>
           <TabNav value="state">{translate('::ListForms.ListFormEdit.TabState')}</TabNav>
+          <TabNav value="extrafilter">{translate('::ListForms.ListFormEdit.ExtraFilters')}</TabNav>
           <TabNav value="fields">{translate('::ListForms.ListFormEdit.TabFields')}</TabNav>
           <TabNav value="customization">
             {translate('::ListForms.ListFormEdit.TabCustomization')}
           </TabNav>
+          <TabNav value="editForm">{translate('::ListForms.ListFormEdit.EditingForm')}</TabNav>
           <TabNav value="subForms">{translate('::ListForms.ListFormEdit.TabSubForms')}</TabNav>
           <TabNav value="widget">{translate('::ListForms.ListFormEdit.TabWidgets')}</TabNav>
-          <TabNav value="extrafilter">{translate('::ListForms.ListFormEdit.ExtraFilters')}</TabNav>
         </TabList>
         <TabContent value="details">
           <FormTabDetails onSubmit={onSubmit} />
@@ -211,6 +215,9 @@ const FormEdit = () => {
         <TabContent value="edit">
           <FormTabEdit listFormCode={listFormCode} onSubmit={onSubmit} />
         </TabContent>
+        <TabContent value="editForm">
+          <FormTabEditForm listFormCode={listFormCode} />
+        </TabContent>
         <TabContent value="filterRow">
           <FormTabFilters onSubmit={onSubmit} />
         </TabContent>
@@ -226,6 +233,9 @@ const FormEdit = () => {
         <TabContent value="columns">
           <FormTabColumns onSubmit={onSubmit} />
         </TabContent>
+        <TabContent value="pivots">
+          <FormTabPivots onSubmit={onSubmit} />
+        </TabContent>
         <TabContent value="pager">
           <FormTabPager onSubmit={onSubmit} />
         </TabContent>
diff --git a/ui/src/views/admin/listForm/edit/FormTabColumns.tsx b/ui/src/views/admin/listForm/edit/FormTabColumns.tsx
index 19c721bb..f9c63d2b 100644
--- a/ui/src/views/admin/listForm/edit/FormTabColumns.tsx
+++ b/ui/src/views/admin/listForm/edit/FormTabColumns.tsx
@@ -17,11 +17,6 @@ import { Field, FieldProps, Form, Formik } from 'formik'
 import * as Yup from 'yup'
 import { FormEditProps } from './FormEdit'
 import { columnChooserModeOptions, columnResizingModeOptions } from './options'
-import { SelectBoxOption } from '@/shared/types'
-import { chartSeriesTypeOptions } from '../../chart/options'
-import TabList from '@/components/ui/Tabs/TabList'
-import TabNav from '@/components/ui/Tabs/TabNav'
-import TabContent from '@/components/ui/Tabs/TabContent'
 
 const validationSchema = Yup.object().shape({})
 
@@ -45,419 +40,253 @@ function FormTabColumns(props: FormEditProps) {
         {({ touched, errors, isSubmitting, values }) => (
           <Form>
             <FormContainer size="sm">
-              <Tabs defaultValue="tabColumns">
-                <TabList className="flex-wrap my-3">
-                  <TabNav value="tabColumns">
-                    {translate('::ListForms.ListFormEdit.TabColumns')}
-                  </TabNav>
-                  <TabNav value="tabPivots">
-                    {translate('::ListForms.ListFormEdit.TabPivots')}
-                  </TabNav>
-                </TabList>
-                <TabContent value="tabColumns">
-                  <FormItem
-                    label={translate('::ListForms.ListFormEdit.SelectionShowColumnHeaders')}
-                    invalid={
-                      errors.columnOptionDto?.showColumnHeaders &&
-                      touched.columnOptionDto?.showColumnHeaders
-                    }
-                    errorMessage={errors.columnOptionDto?.showColumnHeaders}
-                  >
-                    <Field
-                      name="columnOptionDto.showColumnHeaders"
-                      placeholder={translate('::ListForms.ListFormEdit.SelectionShowColumnHeaders')}
-                      component={Checkbox}
-                    />
-                  </FormItem>
-                  <FormItem
-                    label={translate('::ListForms.ListFormEdit.SelectionShowBorders')}
-                    invalid={
-                      errors.columnOptionDto?.showBorders && touched.columnOptionDto?.showBorders
-                    }
-                    errorMessage={errors.columnOptionDto?.showBorders}
-                  >
-                    <Field
-                      name="columnOptionDto.showBorders"
-                      placeholder={translate('::ListForms.ListFormEdit.SelectionShowBorders')}
-                      component={Checkbox}
-                    />
-                  </FormItem>
-                  <FormItem
-                    label={translate('::ListForms.ListFormEdit.SelectionShowRowLines')}
-                    invalid={
-                      errors.columnOptionDto?.showRowLines && touched.columnOptionDto?.showRowLines
-                    }
-                    errorMessage={errors.columnOptionDto?.showRowLines}
-                  >
-                    <Field
-                      name="columnOptionDto.showRowLines"
-                      placeholder={translate('::ListForms.ListFormEdit.SelectionShowRowLines')}
-                      component={Checkbox}
-                    />
-                  </FormItem>
-                  <FormItem
-                    label={translate('::ListForms.ListFormEdit.SelectionShowColumnLines')}
-                    invalid={
-                      errors.columnOptionDto?.showColumnLines &&
-                      touched.columnOptionDto?.showColumnLines
-                    }
-                    errorMessage={errors.columnOptionDto?.showColumnLines}
-                  >
-                    <Field
-                      name="columnOptionDto.showColumnLines"
-                      placeholder={translate('::ListForms.ListFormEdit.SelectionShowColumnLines')}
-                      component={Checkbox}
-                    />
-                  </FormItem>
-                  <FormItem
-                    label={translate('::ListForms.ListFormEdit.SelectionRowAlternationEnabled')}
-                    invalid={
-                      errors.columnOptionDto?.rowAlternationEnabled &&
-                      touched.columnOptionDto?.rowAlternationEnabled
-                    }
-                    errorMessage={errors.columnOptionDto?.rowAlternationEnabled}
-                  >
-                    <Field
-                      name="columnOptionDto.rowAlternationEnabled"
-                      placeholder={translate(
-                        '::ListForms.ListFormEdit.SelectionRowAlternationEnabled',
+              <FormItem
+                label={translate('::ListForms.ListFormEdit.SelectionShowColumnHeaders')}
+                invalid={
+                  errors.columnOptionDto?.showColumnHeaders &&
+                  touched.columnOptionDto?.showColumnHeaders
+                }
+                errorMessage={errors.columnOptionDto?.showColumnHeaders}
+              >
+                <Field
+                  name="columnOptionDto.showColumnHeaders"
+                  placeholder={translate('::ListForms.ListFormEdit.SelectionShowColumnHeaders')}
+                  component={Checkbox}
+                />
+              </FormItem>
+              <FormItem
+                label={translate('::ListForms.ListFormEdit.SelectionShowBorders')}
+                invalid={
+                  errors.columnOptionDto?.showBorders && touched.columnOptionDto?.showBorders
+                }
+                errorMessage={errors.columnOptionDto?.showBorders}
+              >
+                <Field
+                  name="columnOptionDto.showBorders"
+                  placeholder={translate('::ListForms.ListFormEdit.SelectionShowBorders')}
+                  component={Checkbox}
+                />
+              </FormItem>
+              <FormItem
+                label={translate('::ListForms.ListFormEdit.SelectionShowRowLines')}
+                invalid={
+                  errors.columnOptionDto?.showRowLines && touched.columnOptionDto?.showRowLines
+                }
+                errorMessage={errors.columnOptionDto?.showRowLines}
+              >
+                <Field
+                  name="columnOptionDto.showRowLines"
+                  placeholder={translate('::ListForms.ListFormEdit.SelectionShowRowLines')}
+                  component={Checkbox}
+                />
+              </FormItem>
+              <FormItem
+                label={translate('::ListForms.ListFormEdit.SelectionShowColumnLines')}
+                invalid={
+                  errors.columnOptionDto?.showColumnLines &&
+                  touched.columnOptionDto?.showColumnLines
+                }
+                errorMessage={errors.columnOptionDto?.showColumnLines}
+              >
+                <Field
+                  name="columnOptionDto.showColumnLines"
+                  placeholder={translate('::ListForms.ListFormEdit.SelectionShowColumnLines')}
+                  component={Checkbox}
+                />
+              </FormItem>
+              <FormItem
+                label={translate('::ListForms.ListFormEdit.SelectionRowAlternationEnabled')}
+                invalid={
+                  errors.columnOptionDto?.rowAlternationEnabled &&
+                  touched.columnOptionDto?.rowAlternationEnabled
+                }
+                errorMessage={errors.columnOptionDto?.rowAlternationEnabled}
+              >
+                <Field
+                  name="columnOptionDto.rowAlternationEnabled"
+                  placeholder={translate('::ListForms.ListFormEdit.SelectionRowAlternationEnabled')}
+                  component={Checkbox}
+                />
+              </FormItem>
+              <FormItem
+                label={translate('::ListForms.ListFormEdit.SelectionAllowColumnReordering')}
+                invalid={
+                  errors.columnOptionDto?.allowColumnReordering &&
+                  touched.columnOptionDto?.allowColumnReordering
+                }
+                errorMessage={errors.columnOptionDto?.allowColumnReordering}
+              >
+                <Field
+                  name="columnOptionDto.allowColumnReordering"
+                  placeholder={translate('::ListForms.ListFormEdit.SelectionAllowColumnReordering')}
+                  component={Checkbox}
+                />
+              </FormItem>
+              <FormItem
+                label={translate('::ListForms.ListFormEdit.SelectionColumnAutoWidth')}
+                invalid={
+                  errors.columnOptionDto?.columnAutoWidth &&
+                  touched.columnOptionDto?.columnAutoWidth
+                }
+                errorMessage={errors.columnOptionDto?.columnAutoWidth}
+              >
+                <Field
+                  name="columnOptionDto.columnAutoWidth"
+                  placeholder={translate('::ListForms.ListFormEdit.SelectionColumnAutoWidth')}
+                  component={Checkbox}
+                />
+              </FormItem>
+              <FormItem
+                label={translate('::ListForms.ListFormEdit.SelectionColumnFixingEnabled')}
+                invalid={
+                  errors.columnOptionDto?.columnFixingEnabled &&
+                  touched.columnOptionDto?.columnFixingEnabled
+                }
+                errorMessage={errors.columnOptionDto?.columnFixingEnabled}
+              >
+                <Field
+                  name="columnOptionDto.columnFixingEnabled"
+                  placeholder={translate('::ListForms.ListFormEdit.SelectionColumnFixingEnabled')}
+                  component={Checkbox}
+                />
+              </FormItem>
+              <FormItem
+                label={translate('::ListForms.ListFormEdit.SelectionRtlEnabled')}
+                invalid={errors.columnOptionDto?.rtlEnabled && touched.columnOptionDto?.rtlEnabled}
+                errorMessage={errors.columnOptionDto?.rtlEnabled}
+              >
+                <Field
+                  name="columnOptionDto.rtlEnabled"
+                  placeholder={translate('::ListForms.ListFormEdit.SelectionRtlEnabled')}
+                  component={Checkbox}
+                />
+              </FormItem>
+              <FormItem
+                label={translate('::ListForms.ListFormEdit.SelectionColumnChooserEnabled')}
+                invalid={
+                  errors.columnOptionDto?.columnChooserEnabled &&
+                  touched.columnOptionDto?.columnChooserEnabled
+                }
+                errorMessage={errors.columnOptionDto?.columnChooserEnabled}
+              >
+                <Field
+                  name="columnOptionDto.columnChooserEnabled"
+                  placeholder={translate('::ListForms.ListFormEdit.SelectionColumnChooserEnabled')}
+                  component={Checkbox}
+                />
+              </FormItem>
+              <FormItem
+                label={translate('::ListForms.ListFormEdit.SelectionColumnChooserMode')}
+                invalid={
+                  errors.columnOptionDto?.columnChooserMode &&
+                  touched.columnOptionDto?.columnChooserMode
+                }
+                errorMessage={errors.columnOptionDto?.columnChooserMode}
+              >
+                <Field
+                  type="text"
+                  autoComplete="off"
+                  name="columnOptionDto.columnChooserMode"
+                  placeholder={translate('::ListForms.ListFormEdit.SelectionColumnChooserMode')}
+                >
+                  {({ field, form }: FieldProps<ColumnChooserMode>) => (
+                    <Select
+                      field={field}
+                      form={form}
+                      isClearable={true}
+                      options={columnChooserModeOptions}
+                      value={columnChooserModeOptions?.filter(
+                        (option) => option.value === values.columnOptionDto.columnChooserMode,
                       )}
-                      component={Checkbox}
+                      onChange={(option) => form.setFieldValue(field.name, option?.value)}
                     />
-                  </FormItem>
-                  <FormItem
-                    label={translate('::ListForms.ListFormEdit.SelectionAllowColumnReordering')}
-                    invalid={
-                      errors.columnOptionDto?.allowColumnReordering &&
-                      touched.columnOptionDto?.allowColumnReordering
-                    }
-                    errorMessage={errors.columnOptionDto?.allowColumnReordering}
-                  >
-                    <Field
-                      name="columnOptionDto.allowColumnReordering"
-                      placeholder={translate(
-                        '::ListForms.ListFormEdit.SelectionAllowColumnReordering',
+                  )}
+                </Field>
+              </FormItem>
+              <FormItem
+                label={translate('::ListForms.ListFormEdit.SelectionAllowColumnResizing')}
+                invalid={
+                  errors.columnOptionDto?.allowColumnResizing &&
+                  touched.columnOptionDto?.allowColumnResizing
+                }
+                errorMessage={errors.columnOptionDto?.allowColumnResizing}
+              >
+                <Field
+                  name="columnOptionDto.allowColumnResizing"
+                  placeholder={translate('::ListForms.ListFormEdit.SelectionAllowColumnResizing')}
+                  component={Checkbox}
+                />
+              </FormItem>
+              <FormItem
+                label={translate('::ListForms.ListFormEdit.SelectionColumnResizingMode')}
+                invalid={
+                  errors.columnOptionDto?.columnResizingMode &&
+                  touched.columnOptionDto?.columnResizingMode
+                }
+                errorMessage={errors.columnOptionDto?.columnResizingMode}
+              >
+                <Field
+                  type="text"
+                  autoComplete="off"
+                  name="columnOptionDto.columnResizingMode"
+                  placeholder={translate('::ListForms.ListFormEdit.SelectionColumnResizingMode')}
+                >
+                  {({ field, form }: FieldProps<ColumnResizeMode>) => (
+                    <Select
+                      field={field}
+                      form={form}
+                      isClearable={true}
+                      options={columnResizingModeOptions}
+                      value={columnResizingModeOptions?.filter(
+                        (option) => option.value === values.columnOptionDto.columnResizingMode,
                       )}
-                      component={Checkbox}
+                      onChange={(option) => form.setFieldValue(field.name, option?.value)}
                     />
-                  </FormItem>
-                  <FormItem
-                    label={translate('::ListForms.ListFormEdit.SelectionColumnAutoWidth')}
-                    invalid={
-                      errors.columnOptionDto?.columnAutoWidth &&
-                      touched.columnOptionDto?.columnAutoWidth
-                    }
-                    errorMessage={errors.columnOptionDto?.columnAutoWidth}
-                  >
-                    <Field
-                      name="columnOptionDto.columnAutoWidth"
-                      placeholder={translate('::ListForms.ListFormEdit.SelectionColumnAutoWidth')}
-                      component={Checkbox}
-                    />
-                  </FormItem>
-                  <FormItem
-                    label={translate('::ListForms.ListFormEdit.SelectionColumnFixingEnabled')}
-                    invalid={
-                      errors.columnOptionDto?.columnFixingEnabled &&
-                      touched.columnOptionDto?.columnFixingEnabled
-                    }
-                    errorMessage={errors.columnOptionDto?.columnFixingEnabled}
-                  >
-                    <Field
-                      name="columnOptionDto.columnFixingEnabled"
-                      placeholder={translate(
-                        '::ListForms.ListFormEdit.SelectionColumnFixingEnabled',
-                      )}
-                      component={Checkbox}
-                    />
-                  </FormItem>
-                  <FormItem
-                    label={translate('::ListForms.ListFormEdit.SelectionRtlEnabled')}
-                    invalid={
-                      errors.columnOptionDto?.rtlEnabled && touched.columnOptionDto?.rtlEnabled
-                    }
-                    errorMessage={errors.columnOptionDto?.rtlEnabled}
-                  >
-                    <Field
-                      name="columnOptionDto.rtlEnabled"
-                      placeholder={translate('::ListForms.ListFormEdit.SelectionRtlEnabled')}
-                      component={Checkbox}
-                    />
-                  </FormItem>
-                  <FormItem
-                    label={translate('::ListForms.ListFormEdit.SelectionColumnChooserEnabled')}
-                    invalid={
-                      errors.columnOptionDto?.columnChooserEnabled &&
-                      touched.columnOptionDto?.columnChooserEnabled
-                    }
-                    errorMessage={errors.columnOptionDto?.columnChooserEnabled}
-                  >
-                    <Field
-                      name="columnOptionDto.columnChooserEnabled"
-                      placeholder={translate(
-                        '::ListForms.ListFormEdit.SelectionColumnChooserEnabled',
-                      )}
-                      component={Checkbox}
-                    />
-                  </FormItem>
-                  <FormItem
-                    label={translate('::ListForms.ListFormEdit.SelectionColumnChooserMode')}
-                    invalid={
-                      errors.columnOptionDto?.columnChooserMode &&
-                      touched.columnOptionDto?.columnChooserMode
-                    }
-                    errorMessage={errors.columnOptionDto?.columnChooserMode}
-                  >
-                    <Field
-                      type="text"
-                      autoComplete="off"
-                      name="columnOptionDto.columnChooserMode"
-                      placeholder={translate('::ListForms.ListFormEdit.SelectionColumnChooserMode')}
-                    >
-                      {({ field, form }: FieldProps<ColumnChooserMode>) => (
-                        <Select
-                          field={field}
-                          form={form}
-                          isClearable={true}
-                          options={columnChooserModeOptions}
-                          value={columnChooserModeOptions?.filter(
-                            (option) => option.value === values.columnOptionDto.columnChooserMode,
-                          )}
-                          onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                        />
-                      )}
-                    </Field>
-                  </FormItem>
-                  <FormItem
-                    label={translate('::ListForms.ListFormEdit.SelectionAllowColumnResizing')}
-                    invalid={
-                      errors.columnOptionDto?.allowColumnResizing &&
-                      touched.columnOptionDto?.allowColumnResizing
-                    }
-                    errorMessage={errors.columnOptionDto?.allowColumnResizing}
-                  >
-                    <Field
-                      name="columnOptionDto.allowColumnResizing"
-                      placeholder={translate(
-                        '::ListForms.ListFormEdit.SelectionAllowColumnResizing',
-                      )}
-                      component={Checkbox}
-                    />
-                  </FormItem>
-                  <FormItem
-                    label={translate('::ListForms.ListFormEdit.SelectionColumnResizingMode')}
-                    invalid={
-                      errors.columnOptionDto?.columnResizingMode &&
-                      touched.columnOptionDto?.columnResizingMode
-                    }
-                    errorMessage={errors.columnOptionDto?.columnResizingMode}
-                  >
-                    <Field
-                      type="text"
-                      autoComplete="off"
-                      name="columnOptionDto.columnResizingMode"
-                      placeholder={translate(
-                        '::ListForms.ListFormEdit.SelectionColumnResizingMode',
-                      )}
-                    >
-                      {({ field, form }: FieldProps<ColumnResizeMode>) => (
-                        <Select
-                          field={field}
-                          form={form}
-                          isClearable={true}
-                          options={columnResizingModeOptions}
-                          value={columnResizingModeOptions?.filter(
-                            (option) => option.value === values.columnOptionDto.columnResizingMode,
-                          )}
-                          onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                        />
-                      )}
-                    </Field>
-                  </FormItem>
-                  <FormItem
-                    label={translate('::ListForms.ListFormEdit.SelectionHoverStateEnabled')}
-                    invalid={
-                      errors.columnOptionDto?.hoverStateEnabled &&
-                      touched.columnOptionDto?.hoverStateEnabled
-                    }
-                    errorMessage={errors.columnOptionDto?.hoverStateEnabled}
-                  >
-                    <Field
-                      name="columnOptionDto.hoverStateEnabled"
-                      placeholder={translate('::ListForms.ListFormEdit.SelectionHoverStateEnabled')}
-                      component={Checkbox}
-                    />
-                  </FormItem>
-                  <FormItem
-                    label={translate('::ListForms.ListFormEdit.SelectionColumnHidingEnabled')}
-                    invalid={
-                      errors.columnOptionDto?.columnHidingEnabled &&
-                      touched.columnOptionDto?.columnHidingEnabled
-                    }
-                    errorMessage={errors.columnOptionDto?.columnHidingEnabled}
-                  >
-                    <Field
-                      name="columnOptionDto.columnHidingEnabled"
-                      placeholder={translate(
-                        '::ListForms.ListFormEdit.SelectionColumnHidingEnabled',
-                      )}
-                      component={Checkbox}
-                    />
-                  </FormItem>
-                  <FormItem
-                    label={translate('::ListForms.ListFormEdit.SelectionFocusedRowEnabled')}
-                    invalid={
-                      errors.columnOptionDto?.focusedRowEnabled &&
-                      touched.columnOptionDto?.focusedRowEnabled
-                    }
-                    errorMessage={errors.columnOptionDto?.focusedRowEnabled}
-                  >
-                    <Field
-                      name="columnOptionDto.focusedRowEnabled"
-                      placeholder={translate('::ListForms.ListFormEdit.SelectionFocusedRowEnabled')}
-                      component={Checkbox}
-                    />
-                  </FormItem>
-                </TabContent>
-                <TabContent value="tabPivots">
-                  <FormItem
-                    label={translate('::ListForms.ListFormEdit.ShowFieldPanel')}
-                    invalid={
-                      errors.columnOptionDto?.showFieldPanel &&
-                      touched.columnOptionDto?.showFieldPanel
-                    }
-                    errorMessage={errors.columnOptionDto?.showFieldPanel}
-                  >
-                    <Field
-                      name="columnOptionDto.showFieldPanel"
-                      placeholder={translate('::ListForms.ListFormEdit.ShowFieldPanel')}
-                      component={Checkbox}
-                    />
-                  </FormItem>
-                  <FormItem
-                    label={translate('::ListForms.ListFormEdit.AllowFieldDragging')}
-                    invalid={
-                      errors.columnOptionDto?.allowFieldDragging &&
-                      touched.columnOptionDto?.allowFieldDragging
-                    }
-                    errorMessage={errors.columnOptionDto?.allowFieldDragging}
-                  >
-                    <Field
-                      name="columnOptionDto.allowFieldDragging"
-                      placeholder={translate('::ListForms.ListFormEdit.AllowFieldDragging')}
-                      component={Checkbox}
-                    />
-                  </FormItem>
-                  <FormItem
-                    label={translate('::ListForms.ListFormEdit.ShowColumnFields')}
-                    invalid={
-                      errors.columnOptionDto?.showRowFields &&
-                      touched.columnOptionDto?.showRowFields
-                    }
-                    errorMessage={errors.columnOptionDto?.showRowFields}
-                  >
-                    <Field
-                      name="columnOptionDto.showColumnFields"
-                      placeholder={translate('::ListForms.ListFormEdit.ShowColumnFields')}
-                      component={Checkbox}
-                    />
-                  </FormItem>
-                  <FormItem
-                    label={translate('::ListForms.ListFormEdit.ShowRowFields')}
-                    invalid={
-                      errors.columnOptionDto?.showRowFields &&
-                      touched.columnOptionDto?.showRowFields
-                    }
-                    errorMessage={errors.columnOptionDto?.showRowFields}
-                  >
-                    <Field
-                      name="columnOptionDto.showRowFields"
-                      placeholder={translate('::ListForms.ListFormEdit.ShowRowFields')}
-                      component={Checkbox}
-                    />
-                  </FormItem>
-                  <FormItem
-                    label={translate('::ListForms.ListFormEdit.ShowDataFields')}
-                    invalid={
-                      errors.columnOptionDto?.showDataFields &&
-                      touched.columnOptionDto?.showDataFields
-                    }
-                    errorMessage={errors.columnOptionDto?.showDataFields}
-                  >
-                    <Field
-                      name="columnOptionDto.showDataFields"
-                      placeholder={translate('::ListForms.ListFormEdit.ShowDataFields')}
-                      component={Checkbox}
-                    />
-                  </FormItem>
-                  <FormItem
-                    label={translate('::ListForms.ListFormEdit.ShowFilterFields')}
-                    invalid={
-                      errors.columnOptionDto?.showFilterFields &&
-                      touched.columnOptionDto?.showFilterFields
-                    }
-                    errorMessage={errors.columnOptionDto?.showFilterFields}
-                  >
-                    <Field
-                      name="columnOptionDto.showFilterFields"
-                      placeholder={translate('::ListForms.ListFormEdit.ShowFilterFields')}
-                      component={Checkbox}
-                    />
-                  </FormItem>
-                  <FormItem
-                    label={translate('::ListForms.ListFormEdit.ShowChart')}
-                    invalid={
-                      errors.columnOptionDto?.showChart && touched.columnOptionDto?.showChart
-                    }
-                    errorMessage={errors.columnOptionDto?.showChart}
-                  >
-                    <Field
-                      name="columnOptionDto.showChart"
-                      placeholder={translate('::ListForms.ListFormEdit.ShowChart')}
-                      component={Checkbox}
-                    />
-                  </FormItem>
-                  <FormItem
-                    label={translate('::ListForms.ListFormEdit.ChartHeight')}
-                    invalid={
-                      errors.columnOptionDto?.chartHeight && touched.columnOptionDto?.chartHeight
-                    }
-                    errorMessage={errors.columnOptionDto?.chartHeight}
-                  >
-                    <Field
-                      className="w-20"
-                      type="number"
-                      autoComplete="off"
-                      name="editingOptionDto.chartHeight"
-                      placeholder={translate('::ListForms.ListFormEdit.ChartHeight')}
-                      component={Input}
-                    />
-                  </FormItem>
-                  <FormItem
-                    label="Type"
-                    invalid={
-                      errors.columnOptionDto?.chartCommonSeriesType &&
-                      touched.columnOptionDto?.chartCommonSeriesType
-                    }
-                    errorMessage={errors.columnOptionDto?.chartCommonSeriesType}
-                  >
-                    <Field type="text" name="columnOptionDto.chartCommonSeriesType">
-                      {({ field, form }: FieldProps<SelectBoxOption>) => (
-                        <Select
-                          field={field}
-                          form={form}
-                          options={chartSeriesTypeOptions}
-                          value={chartSeriesTypeOptions.filter(
-                            (option) =>
-                              option.value === values.columnOptionDto.chartCommonSeriesType,
-                          )}
-                          onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                        />
-                      )}
-                    </Field>
-                  </FormItem>
-                </TabContent>
-              </Tabs>
+                  )}
+                </Field>
+              </FormItem>
+              <FormItem
+                label={translate('::ListForms.ListFormEdit.SelectionHoverStateEnabled')}
+                invalid={
+                  errors.columnOptionDto?.hoverStateEnabled &&
+                  touched.columnOptionDto?.hoverStateEnabled
+                }
+                errorMessage={errors.columnOptionDto?.hoverStateEnabled}
+              >
+                <Field
+                  name="columnOptionDto.hoverStateEnabled"
+                  placeholder={translate('::ListForms.ListFormEdit.SelectionHoverStateEnabled')}
+                  component={Checkbox}
+                />
+              </FormItem>
+              <FormItem
+                label={translate('::ListForms.ListFormEdit.SelectionColumnHidingEnabled')}
+                invalid={
+                  errors.columnOptionDto?.columnHidingEnabled &&
+                  touched.columnOptionDto?.columnHidingEnabled
+                }
+                errorMessage={errors.columnOptionDto?.columnHidingEnabled}
+              >
+                <Field
+                  name="columnOptionDto.columnHidingEnabled"
+                  placeholder={translate('::ListForms.ListFormEdit.SelectionColumnHidingEnabled')}
+                  component={Checkbox}
+                />
+              </FormItem>
+              <FormItem
+                label={translate('::ListForms.ListFormEdit.SelectionFocusedRowEnabled')}
+                invalid={
+                  errors.columnOptionDto?.focusedRowEnabled &&
+                  touched.columnOptionDto?.focusedRowEnabled
+                }
+                errorMessage={errors.columnOptionDto?.focusedRowEnabled}
+              >
+                <Field
+                  name="columnOptionDto.focusedRowEnabled"
+                  placeholder={translate('::ListForms.ListFormEdit.SelectionFocusedRowEnabled')}
+                  component={Checkbox}
+                />
+              </FormItem>
 
               <Button block variant="solid" loading={isSubmitting} type="submit" className="my-2">
                 {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
diff --git a/ui/src/views/admin/listForm/edit/FormTabDetails.tsx b/ui/src/views/admin/listForm/edit/FormTabDetails.tsx
index ded92760..6e8a7abb 100644
--- a/ui/src/views/admin/listForm/edit/FormTabDetails.tsx
+++ b/ui/src/views/admin/listForm/edit/FormTabDetails.tsx
@@ -83,6 +83,84 @@ function FormTabDetails(props: FormEditProps) {
                   )}
                 </Field>
               </FormItem>
+
+              <FormItem
+                label={translate('::ListForms.ListFormEdit.ListFormType')}
+                invalid={errors.listFormType && touched.listFormType}
+                errorMessage={errors.listFormType}
+              >
+                <Field
+                  type="text"
+                  autoComplete="off"
+                  name="listFormType"
+                  placeholder={translate('::ListForms.ListFormEdit.ListFormType')}
+                >
+                  {({ field, form }: FieldProps<SelectBox>) => (
+                    <Select
+                      field={field}
+                      form={form}
+                      isClearable={true}
+                      options={listFormTypeOptions}
+                      value={listFormTypeOptions?.filter(
+                        (option) => option.value === values.listFormType,
+                      )}
+                      onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                    />
+                  )}
+                </Field>
+              </FormItem>
+
+              {values.listFormType === 'List' && (
+                <>
+                  <FormItem
+                    label={translate('::ListForms.ListFormEdit.DetailsLayoutDto.DefaultLayout')}
+                    invalid={errors.layoutDto?.defaultLayout && touched.layoutDto?.defaultLayout}
+                    errorMessage={errors.layoutDto?.defaultLayout}
+                  >
+                    <Field
+                      type="text"
+                      autoComplete="off"
+                      name="layoutDto.defaultLayout"
+                      placeholder={translate(
+                        '::ListForms.ListFormEdit.DetailsLayoutDto.DefaultLayout',
+                      )}
+                    >
+                      {({ field, form }: FieldProps<SelectBox>) => (
+                        <Select
+                          field={field}
+                          form={form}
+                          isClearable={true}
+                          options={listFormDefaultLayoutOptions}
+                          value={listFormDefaultLayoutOptions?.filter(
+                            (option) => option.value === values.layoutDto.defaultLayout,
+                          )}
+                          onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                        />
+                      )}
+                    </Field>
+                  </FormItem>
+
+                  <FormItem
+                    label={translate('::ListForms.ListFormEdit.DetailsLayoutDto.CardLayoutColumn')}
+                    invalid={
+                      errors.layoutDto?.cardLayoutColumn && touched.layoutDto?.cardLayoutColumn
+                    }
+                    errorMessage={errors.layoutDto?.cardLayoutColumn}
+                  >
+                    <Field
+                      type="number"
+                      className="w-20"
+                      autoComplete="off"
+                      name="layoutDto.cardLayoutColumn"
+                      placeholder={translate(
+                        '::ListForms.ListFormEdit.DetailsLayoutDto.CardLayoutColumn',
+                      )}
+                      component={Input}
+                    />
+                  </FormItem>
+                </>
+              )}
+
               <FormItem
                 label={translate('::ListForms.ListFormEdit.DetailsTitle')}
                 invalid={errors.title && touched.title}
@@ -109,42 +187,6 @@ function FormTabDetails(props: FormEditProps) {
                   component={Input}
                 />
               </FormItem>
-              <FormItem
-                label={translate('::ListForms.ListFormEdit.IsSub')}
-                invalid={errors.isSubForm && touched.isSubForm}
-                errorMessage={errors.isSubForm}
-              >
-                <Field
-                  name="isSubForm"
-                  placeholder={translate('::ListForms.ListFormEdit.IsSub')}
-                  component={Checkbox}
-                />
-              </FormItem>
-              <FormItem
-                label={translate('::ListForms.ListFormEdit.ListFormType')}
-                invalid={errors.listFormType && touched.listFormType}
-                errorMessage={errors.listFormType}
-              >
-                <Field
-                  type="text"
-                  autoComplete="off"
-                  name="listFormType"
-                  placeholder={translate('::ListForms.ListFormEdit.ListFormType')}
-                >
-                  {({ field, form }: FieldProps<SelectBox>) => (
-                    <Select
-                      field={field}
-                      form={form}
-                      isClearable={true}
-                      options={listFormTypeOptions}
-                      value={listFormTypeOptions?.filter(
-                        (option) => option.value === values.listFormType,
-                      )}
-                      onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                    />
-                  )}
-                </Field>
-              </FormItem>
               <FormItem
                 label={translate('::ListForms.ListFormEdit.DetailsDescription')}
                 invalid={errors.description && touched.description}
@@ -156,123 +198,94 @@ function FormTabDetails(props: FormEditProps) {
                   name="description"
                   placeholder={translate('::ListForms.ListFormEdit.DetailsDescription')}
                   component={Input}
-                  rows={6}
-                  textArea={true}
                 />
               </FormItem>
               <FormItem
-                label={translate('::ListForms.ListFormEdit.DetailsWidth')}
-                invalid={errors.width && touched.width}
-                errorMessage={errors.width}
+                label={translate('::ListForms.ListFormEdit.IsSub')}
+                invalid={errors.isSubForm && touched.isSubForm}
+                errorMessage={errors.isSubForm}
               >
                 <Field
-                  className="w-20"
-                  type="number"
-                  autoComplete="off"
-                  name="width"
-                  placeholder={translate('::ListForms.ListFormEdit.DetailsWidth')}
-                  component={Input}
-                />
-              </FormItem>
-              <FormItem
-                label={translate('::ListForms.ListFormEdit.DetailsHeight')}
-                invalid={errors.width && touched.width}
-                errorMessage={errors.width}
-              >
-                <Field
-                  className="w-20"
-                  type="number"
-                  autoComplete="off"
-                  name="height"
-                  placeholder={translate('::ListForms.ListFormEdit.DetailsHeight')}
-                  component={Input}
-                />
-              </FormItem>
-
-              <FormItem
-                label={translate('::ListForms.ListFormEdit.DetailsLayoutDto.GridLayout')}
-                invalid={errors.layoutDto?.grid && touched.layoutDto?.grid}
-                errorMessage={errors.layoutDto?.grid}
-              >
-                <Field
-                  className="w-20"
-                  autoComplete="off"
-                  name="layoutDto.grid"
-                  placeholder={translate('::ListForms.ListFormEdit.DetailsLayoutDto.GridLayout')}
+                  name="isSubForm"
+                  placeholder={translate('::ListForms.ListFormEdit.IsSub')}
                   component={Checkbox}
                 />
               </FormItem>
 
-              <FormItem
-                label={translate('::ListForms.ListFormEdit.DetailsLayoutDto.CardLayout')}
-                invalid={errors.layoutDto?.card && touched.layoutDto?.card}
-                errorMessage={errors.layoutDto?.card}
-              >
-                <Field
-                  className="w-20"
-                  autoComplete="off"
-                  name="layoutDto.card"
-                  placeholder={translate('::ListForms.ListFormEdit.DetailsLayoutDto.CardLayout')}
-                  component={Checkbox}
-                />
-              </FormItem>
-
-              <FormItem
-                label={translate('::ListForms.ListFormEdit.DetailsLayoutDto.PivotLayout')}
-                invalid={errors.layoutDto?.card && touched.layoutDto?.card}
-                errorMessage={errors.layoutDto?.card}
-              >
-                <Field
-                  className="w-20"
-                  autoComplete="off"
-                  name="layoutDto.pivot"
-                  placeholder={translate('::ListForms.ListFormEdit.DetailsLayoutDto.PivotLayout')}
-                  component={Checkbox}
-                />
-              </FormItem>
-
-              <FormItem
-                label={translate('::ListForms.ListFormEdit.DetailsLayoutDto.DefaultLayout')}
-                invalid={errors.layoutDto?.defaultLayout && touched.layoutDto?.defaultLayout}
-                errorMessage={errors.layoutDto?.defaultLayout}
-              >
-                <Field
-                  type="text"
-                  autoComplete="off"
-                  name="layoutDto.defaultLayout"
-                  placeholder={translate('::ListForms.ListFormEdit.DetailsLayoutDto.DefaultLayout')}
+              <div className="flex gap-2">
+                <FormItem
+                  label={translate('::ListForms.ListFormEdit.DetailsWidth')}
+                  invalid={errors.width && touched.width}
+                  errorMessage={errors.width}
                 >
-                  {({ field, form }: FieldProps<SelectBox>) => (
-                    <Select
-                      field={field}
-                      form={form}
-                      isClearable={true}
-                      options={listFormDefaultLayoutOptions}
-                      value={listFormDefaultLayoutOptions?.filter(
-                        (option) => option.value === values.layoutDto.defaultLayout,
-                      )}
-                      onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                    />
-                  )}
-                </Field>
-              </FormItem>
+                  <Field
+                    className="w-20"
+                    type="number"
+                    autoComplete="off"
+                    name="width"
+                    placeholder={translate('::ListForms.ListFormEdit.DetailsWidth')}
+                    component={Input}
+                  />
+                </FormItem>
+                <FormItem
+                  label={translate('::ListForms.ListFormEdit.DetailsHeight')}
+                  invalid={errors.width && touched.width}
+                  errorMessage={errors.width}
+                >
+                  <Field
+                    className="w-20"
+                    type="number"
+                    autoComplete="off"
+                    name="height"
+                    placeholder={translate('::ListForms.ListFormEdit.DetailsHeight')}
+                    component={Input}
+                  />
+                </FormItem>
+              </div>
 
-              <FormItem
-                label={translate('::ListForms.ListFormEdit.DetailsLayoutDto.CardLayoutColumn')}
-                invalid={errors.layoutDto?.cardLayoutColumn && touched.layoutDto?.cardLayoutColumn}
-                errorMessage={errors.layoutDto?.cardLayoutColumn}
-              >
-                <Field
-                  type="number"
-                  className="w-20"
-                  autoComplete="off"
-                  name="layoutDto.cardLayoutColumn"
-                  placeholder={translate(
-                    '::ListForms.ListFormEdit.DetailsLayoutDto.CardLayoutColumn',
-                  )}
-                  component={Input}
-                />
-              </FormItem>
+              <div className="flex gap-2">
+                <FormItem
+                  label={translate('::ListForms.ListFormEdit.DetailsLayoutDto.GridLayout')}
+                  invalid={errors.layoutDto?.grid && touched.layoutDto?.grid}
+                  errorMessage={errors.layoutDto?.grid}
+                >
+                  <Field
+                    className="w-20"
+                    autoComplete="off"
+                    name="layoutDto.grid"
+                    placeholder={translate('::ListForms.ListFormEdit.DetailsLayoutDto.GridLayout')}
+                    component={Checkbox}
+                  />
+                </FormItem>
+
+                <FormItem
+                  label={translate('::ListForms.ListFormEdit.DetailsLayoutDto.CardLayout')}
+                  invalid={errors.layoutDto?.card && touched.layoutDto?.card}
+                  errorMessage={errors.layoutDto?.card}
+                >
+                  <Field
+                    className="w-20"
+                    autoComplete="off"
+                    name="layoutDto.card"
+                    placeholder={translate('::ListForms.ListFormEdit.DetailsLayoutDto.CardLayout')}
+                    component={Checkbox}
+                  />
+                </FormItem>
+
+                <FormItem
+                  label={translate('::ListForms.ListFormEdit.DetailsLayoutDto.PivotLayout')}
+                  invalid={errors.layoutDto?.card && touched.layoutDto?.card}
+                  errorMessage={errors.layoutDto?.card}
+                >
+                  <Field
+                    className="w-20"
+                    autoComplete="off"
+                    name="layoutDto.pivot"
+                    placeholder={translate('::ListForms.ListFormEdit.DetailsLayoutDto.PivotLayout')}
+                    component={Checkbox}
+                  />
+                </FormItem>
+              </div>
 
               <Button block variant="solid" loading={isSubmitting} type="submit">
                 {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
diff --git a/ui/src/views/admin/listForm/edit/FormTabEdit.tsx b/ui/src/views/admin/listForm/edit/FormTabEdit.tsx
index 12d232b7..9176d693 100644
--- a/ui/src/views/admin/listForm/edit/FormTabEdit.tsx
+++ b/ui/src/views/admin/listForm/edit/FormTabEdit.tsx
@@ -9,9 +9,6 @@ import {
   Select,
   Tabs,
 } from '@/components/ui'
-import TabContent from '@/components/ui/Tabs/TabContent'
-import TabList from '@/components/ui/Tabs/TabList'
-import TabNav from '@/components/ui/Tabs/TabNav'
 import { ListFormEditTabs } from '@/proxy/admin/list-form/models'
 import { useStoreState } from '@/store'
 import { useLocalization } from '@/utils/hooks/useLocalization'
@@ -24,7 +21,6 @@ import {
 import { Field, FieldProps, Form, Formik } from 'formik'
 import { object } from 'yup'
 import { FormEditProps } from './FormEdit'
-import FormTabEditForm from './FormTabEditForm'
 import {
   editingOptionModeOptions,
   editingOptionNewRowPositionOptions,
@@ -44,374 +40,357 @@ function FormTabEdit(props: FormEditProps & { listFormCode: string }) {
 
   return (
     <Container>
-      <Tabs defaultValue="tabEdit">
-        <TabList className="flex-wrap">
-          <TabNav value="tabEdit">{translate('::ListForms.ListFormEdit.Editing')}</TabNav>
-          <TabNav value="tabForm">{translate('::ListForms.ListFormEdit.EditingForm')}</TabNav>
-        </TabList>
-        <TabContent value="tabEdit">
-          <Formik
-            initialValues={listFormValues}
-            validationSchema={schema}
-            onSubmit={async (values, formikHelpers) => {
-              await props.onSubmit(ListFormEditTabs.Edit.EditForm, values, formikHelpers)
-            }}
-          >
-            {({ touched, errors, values, isSubmitting }) => (
-              <Form>
-                <FormContainer size="sm">
-                  <Card className="my-2">
-                    <FormItem
-                      label={translate('::ListForms.ListFormEdit.EditingAllowAdding')}
-                      invalid={
-                        errors.editingOptionDto?.allowAdding &&
-                        touched.editingOptionDto?.allowAdding
-                      }
-                      errorMessage={errors.editingOptionDto?.allowAdding}
-                    >
-                      <Field
-                        name="editingOptionDto.allowAdding"
-                        placeholder={translate('::ListForms.ListFormEdit.EditingAllowAdding')}
-                        component={Checkbox}
-                      />
-                    </FormItem>
-                    <FormItem
-                      label={translate('::ListForms.ListFormEdit.EditingAllowUpdating')}
-                      invalid={
-                        errors.editingOptionDto?.allowUpdating &&
-                        touched.editingOptionDto?.allowUpdating
-                      }
-                      errorMessage={errors.editingOptionDto?.allowUpdating}
-                    >
-                      <Field
-                        name="editingOptionDto.allowUpdating"
-                        placeholder={translate('::ListForms.ListFormEdit.EditingAllowUpdating')}
-                        component={Checkbox}
-                      />
-                    </FormItem>
-                    <FormItem
-                      label={translate('::ListForms.ListFormEdit.EditingAllowDeleting')}
-                      invalid={
-                        errors.editingOptionDto?.allowDeleting &&
-                        touched.editingOptionDto?.allowDeleting
-                      }
-                      errorMessage={errors.editingOptionDto?.allowDeleting}
-                    >
-                      <Field
-                        name="editingOptionDto.allowDeleting"
-                        placeholder={translate('::ListForms.ListFormEdit.EditingAllowDeleting')}
-                        component={Checkbox}
-                      />
-                    </FormItem>
-                    <FormItem
-                      label={translate('::ListForms.ListFormEdit.EditingAllowDeleteAll')}
-                      invalid={
-                        errors.editingOptionDto?.allowAllDeleting &&
-                        touched.editingOptionDto?.allowAllDeleting
-                      }
-                      errorMessage={errors.editingOptionDto?.allowAllDeleting}
-                    >
-                      <Field
-                        name="editingOptionDto.allowAllDeleting"
-                        placeholder={translate('::ListForms.ListFormEdit.EditingAllowDeleteAll')}
-                        component={Checkbox}
-                      />
-                    </FormItem>
-                    <FormItem
-                      label={translate('::ListForms.ListFormEdit.EditingConfirmDelete')}
-                      invalid={
-                        errors.editingOptionDto?.confirmDelete &&
-                        touched.editingOptionDto?.confirmDelete
-                      }
-                      errorMessage={errors.editingOptionDto?.confirmDelete}
-                    >
-                      <Field
-                        name="editingOptionDto.confirmDelete"
-                        placeholder={translate('::ListForms.ListFormEdit.EditingConfirmDelete')}
-                        component={Checkbox}
-                      />
-                    </FormItem>
-                    <FormItem
-                      label={translate('::ListForms.ListFormEdit.EditingUseIcons')}
-                      invalid={
-                        errors.editingOptionDto?.useIcons && touched.editingOptionDto?.useIcons
-                      }
-                      errorMessage={errors.editingOptionDto?.useIcons}
-                    >
-                      <Field
-                        name="editingOptionDto.useIcons"
-                        placeholder={translate('::ListForms.ListFormEdit.EditingUseIcons')}
-                        component={Checkbox}
-                      />
-                    </FormItem>
-                    <FormItem
-                      label={translate('::ListForms.ListFormEdit.EditingSelectTextOnEditStart')}
-                      invalid={
-                        errors.editingOptionDto?.selectTextOnEditStart &&
-                        touched.editingOptionDto?.selectTextOnEditStart
-                      }
-                      errorMessage={errors.editingOptionDto?.selectTextOnEditStart}
-                    >
-                      <Field
-                        name="editingOptionDto.selectTextOnEditStart"
-                        placeholder={translate(
-                          '::ListForms.ListFormEdit.EditingSelectTextOnEditStart',
+      <Formik
+        initialValues={listFormValues}
+        validationSchema={schema}
+        onSubmit={async (values, formikHelpers) => {
+          await props.onSubmit(ListFormEditTabs.Edit.EditForm, values, formikHelpers)
+        }}
+      >
+        {({ touched, errors, values, isSubmitting }) => (
+          <Form>
+            <FormContainer size="sm">
+              <Card className="my-2">
+                <FormItem
+                  label={translate('::ListForms.ListFormEdit.EditingAllowAdding')}
+                  invalid={
+                    errors.editingOptionDto?.allowAdding && touched.editingOptionDto?.allowAdding
+                  }
+                  errorMessage={errors.editingOptionDto?.allowAdding}
+                >
+                  <Field
+                    name="editingOptionDto.allowAdding"
+                    placeholder={translate('::ListForms.ListFormEdit.EditingAllowAdding')}
+                    component={Checkbox}
+                  />
+                </FormItem>
+                <FormItem
+                  label={translate('::ListForms.ListFormEdit.EditingAllowUpdating')}
+                  invalid={
+                    errors.editingOptionDto?.allowUpdating &&
+                    touched.editingOptionDto?.allowUpdating
+                  }
+                  errorMessage={errors.editingOptionDto?.allowUpdating}
+                >
+                  <Field
+                    name="editingOptionDto.allowUpdating"
+                    placeholder={translate('::ListForms.ListFormEdit.EditingAllowUpdating')}
+                    component={Checkbox}
+                  />
+                </FormItem>
+                <FormItem
+                  label={translate('::ListForms.ListFormEdit.EditingAllowDeleting')}
+                  invalid={
+                    errors.editingOptionDto?.allowDeleting &&
+                    touched.editingOptionDto?.allowDeleting
+                  }
+                  errorMessage={errors.editingOptionDto?.allowDeleting}
+                >
+                  <Field
+                    name="editingOptionDto.allowDeleting"
+                    placeholder={translate('::ListForms.ListFormEdit.EditingAllowDeleting')}
+                    component={Checkbox}
+                  />
+                </FormItem>
+                <FormItem
+                  label={translate('::ListForms.ListFormEdit.EditingAllowDeleteAll')}
+                  invalid={
+                    errors.editingOptionDto?.allowAllDeleting &&
+                    touched.editingOptionDto?.allowAllDeleting
+                  }
+                  errorMessage={errors.editingOptionDto?.allowAllDeleting}
+                >
+                  <Field
+                    name="editingOptionDto.allowAllDeleting"
+                    placeholder={translate('::ListForms.ListFormEdit.EditingAllowDeleteAll')}
+                    component={Checkbox}
+                  />
+                </FormItem>
+                <FormItem
+                  label={translate('::ListForms.ListFormEdit.EditingConfirmDelete')}
+                  invalid={
+                    errors.editingOptionDto?.confirmDelete &&
+                    touched.editingOptionDto?.confirmDelete
+                  }
+                  errorMessage={errors.editingOptionDto?.confirmDelete}
+                >
+                  <Field
+                    name="editingOptionDto.confirmDelete"
+                    placeholder={translate('::ListForms.ListFormEdit.EditingConfirmDelete')}
+                    component={Checkbox}
+                  />
+                </FormItem>
+                <FormItem
+                  label={translate('::ListForms.ListFormEdit.EditingUseIcons')}
+                  invalid={errors.editingOptionDto?.useIcons && touched.editingOptionDto?.useIcons}
+                  errorMessage={errors.editingOptionDto?.useIcons}
+                >
+                  <Field
+                    name="editingOptionDto.useIcons"
+                    placeholder={translate('::ListForms.ListFormEdit.EditingUseIcons')}
+                    component={Checkbox}
+                  />
+                </FormItem>
+                <FormItem
+                  label={translate('::ListForms.ListFormEdit.EditingSelectTextOnEditStart')}
+                  invalid={
+                    errors.editingOptionDto?.selectTextOnEditStart &&
+                    touched.editingOptionDto?.selectTextOnEditStart
+                  }
+                  errorMessage={errors.editingOptionDto?.selectTextOnEditStart}
+                >
+                  <Field
+                    name="editingOptionDto.selectTextOnEditStart"
+                    placeholder={translate('::ListForms.ListFormEdit.EditingSelectTextOnEditStart')}
+                    component={Checkbox}
+                  />
+                </FormItem>
+                <FormItem
+                  label={translate('::ListForms.ListFormEdit.EditingMode')}
+                  invalid={errors.editingOptionDto?.mode && touched.editingOptionDto?.mode}
+                  errorMessage={errors.editingOptionDto?.mode}
+                >
+                  <Field
+                    type="text"
+                    autoComplete="off"
+                    name="editingOptionDto.mode"
+                    placeholder={translate('::ListForms.ListFormEdit.EditingMode')}
+                  >
+                    {({ field, form }: FieldProps<GridsEditMode>) => (
+                      <Select
+                        field={field}
+                        form={form}
+                        isClearable={true}
+                        options={editingOptionModeOptions}
+                        value={editingOptionModeOptions?.filter(
+                          (option) => option.value === values.editingOptionDto.mode,
                         )}
+                        onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                      />
+                    )}
+                  </Field>
+                </FormItem>
+                <FormItem
+                  label={translate('::ListForms.ListFormEdit.EditingRefreshMode')}
+                  invalid={
+                    errors.editingOptionDto?.refreshMode && touched.editingOptionDto?.refreshMode
+                  }
+                  errorMessage={errors.editingOptionDto?.refreshMode}
+                >
+                  <Field
+                    type="text"
+                    autoComplete="off"
+                    name="editingOptionDto.refreshMode"
+                    placeholder={translate('::ListForms.ListFormEdit.EditingRefreshMode')}
+                  >
+                    {({ field, form }: FieldProps<GridsEditRefreshMode>) => (
+                      <Select
+                        field={field}
+                        form={form}
+                        isClearable={true}
+                        options={editingOptionRefreshModeOptions}
+                        value={editingOptionRefreshModeOptions?.filter(
+                          (option) => option.value === values.editingOptionDto.refreshMode,
+                        )}
+                        onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                      />
+                    )}
+                  </Field>
+                </FormItem>
+                <FormItem
+                  label={translate('::ListForms.ListFormEdit.EditingNewRowPosition')}
+                  invalid={
+                    errors.editingOptionDto?.newRowPosition &&
+                    touched.editingOptionDto?.newRowPosition
+                  }
+                  errorMessage={errors.editingOptionDto?.newRowPosition}
+                >
+                  <Field
+                    type="text"
+                    autoComplete="off"
+                    name="editingOptionDto.newRowPosition"
+                    placeholder={translate('::ListForms.ListFormEdit.EditingNewRowPosition')}
+                  >
+                    {({ field, form }: FieldProps<NewRowPosition>) => (
+                      <Select
+                        field={field}
+                        form={form}
+                        isClearable={true}
+                        options={editingOptionNewRowPositionOptions}
+                        value={editingOptionNewRowPositionOptions?.filter(
+                          (option) => option.value === values.editingOptionDto.newRowPosition,
+                        )}
+                        onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                      />
+                    )}
+                  </Field>
+                </FormItem>
+                <FormItem
+                  label={translate('::ListForms.ListFormEdit.EditingStartEditAction')}
+                  invalid={
+                    errors.editingOptionDto?.startEditAction &&
+                    touched.editingOptionDto?.startEditAction
+                  }
+                  errorMessage={errors.editingOptionDto?.startEditAction}
+                >
+                  <Field
+                    type="text"
+                    autoComplete="off"
+                    name="editingOptionDto.startEditAction"
+                    placeholder={translate('::ListForms.ListFormEdit.EditingStartEditAction')}
+                  >
+                    {({ field, form }: FieldProps<StartEditAction>) => (
+                      <Select
+                        field={field}
+                        form={form}
+                        isClearable={true}
+                        options={editingOptionStartEditActionOptions}
+                        value={editingOptionStartEditActionOptions?.filter(
+                          (option) => option.value === values.editingOptionDto.startEditAction,
+                        )}
+                        onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                      />
+                    )}
+                  </Field>
+                </FormItem>
+                <FormItem
+                  label={translate('::ListForms.ListFormEdit.EditingEditColumnName')}
+                  invalid={
+                    errors.editingOptionDto?.editColumnName &&
+                    touched.editingOptionDto?.editColumnName
+                  }
+                  errorMessage={errors.editingOptionDto?.editColumnName}
+                >
+                  <Field
+                    type="text"
+                    autoComplete="off"
+                    name="editingOptionDto.editColumnName"
+                    placeholder={translate('::ListForms.ListFormEdit.EditingEditColumnName')}
+                    component={Input}
+                  />
+                </FormItem>
+                {values.editingOptionDto.mode === 'popup' && (
+                  <>
+                    <FormItem
+                      label={translate('::ListForms.ListFormEdit.EditingShowTitle')}
+                      invalid={
+                        errors.editingOptionDto?.popup?.showTitle &&
+                        touched.editingOptionDto?.popup?.showTitle
+                      }
+                      errorMessage={errors.editingOptionDto?.popup?.showTitle}
+                    >
+                      <Field
+                        name="editingOptionDto.popup.showTitle"
+                        placeholder={translate('::ListForms.ListFormEdit.EditingShowTitle')}
                         component={Checkbox}
                       />
                     </FormItem>
                     <FormItem
-                      label={translate('::ListForms.ListFormEdit.EditingMode')}
-                      invalid={errors.editingOptionDto?.mode && touched.editingOptionDto?.mode}
-                      errorMessage={errors.editingOptionDto?.mode}
+                      label={translate('::ListForms.ListFormEdit.EditingTitle')}
+                      invalid={
+                        errors.editingOptionDto?.popup?.title &&
+                        touched.editingOptionDto?.popup?.title
+                      }
+                      errorMessage={errors.editingOptionDto?.popup?.title}
                     >
                       <Field
                         type="text"
                         autoComplete="off"
-                        name="editingOptionDto.mode"
-                        placeholder={translate('::ListForms.ListFormEdit.EditingMode')}
-                      >
-                        {({ field, form }: FieldProps<GridsEditMode>) => (
-                          <Select
-                            field={field}
-                            form={form}
-                            isClearable={true}
-                            options={editingOptionModeOptions}
-                            value={editingOptionModeOptions?.filter(
-                              (option) => option.value === values.editingOptionDto.mode,
-                            )}
-                            onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                          />
-                        )}
-                      </Field>
-                    </FormItem>
-                    <FormItem
-                      label={translate('::ListForms.ListFormEdit.EditingRefreshMode')}
-                      invalid={
-                        errors.editingOptionDto?.refreshMode &&
-                        touched.editingOptionDto?.refreshMode
-                      }
-                      errorMessage={errors.editingOptionDto?.refreshMode}
-                    >
-                      <Field
-                        type="text"
-                        autoComplete="off"
-                        name="editingOptionDto.refreshMode"
-                        placeholder={translate('::ListForms.ListFormEdit.EditingRefreshMode')}
-                      >
-                        {({ field, form }: FieldProps<GridsEditRefreshMode>) => (
-                          <Select
-                            field={field}
-                            form={form}
-                            isClearable={true}
-                            options={editingOptionRefreshModeOptions}
-                            value={editingOptionRefreshModeOptions?.filter(
-                              (option) => option.value === values.editingOptionDto.refreshMode,
-                            )}
-                            onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                          />
-                        )}
-                      </Field>
-                    </FormItem>
-                    <FormItem
-                      label={translate('::ListForms.ListFormEdit.EditingNewRowPosition')}
-                      invalid={
-                        errors.editingOptionDto?.newRowPosition &&
-                        touched.editingOptionDto?.newRowPosition
-                      }
-                      errorMessage={errors.editingOptionDto?.newRowPosition}
-                    >
-                      <Field
-                        type="text"
-                        autoComplete="off"
-                        name="editingOptionDto.newRowPosition"
-                        placeholder={translate('::ListForms.ListFormEdit.EditingNewRowPosition')}
-                      >
-                        {({ field, form }: FieldProps<NewRowPosition>) => (
-                          <Select
-                            field={field}
-                            form={form}
-                            isClearable={true}
-                            options={editingOptionNewRowPositionOptions}
-                            value={editingOptionNewRowPositionOptions?.filter(
-                              (option) => option.value === values.editingOptionDto.newRowPosition,
-                            )}
-                            onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                          />
-                        )}
-                      </Field>
-                    </FormItem>
-                    <FormItem
-                      label={translate('::ListForms.ListFormEdit.EditingStartEditAction')}
-                      invalid={
-                        errors.editingOptionDto?.startEditAction &&
-                        touched.editingOptionDto?.startEditAction
-                      }
-                      errorMessage={errors.editingOptionDto?.startEditAction}
-                    >
-                      <Field
-                        type="text"
-                        autoComplete="off"
-                        name="editingOptionDto.startEditAction"
-                        placeholder={translate('::ListForms.ListFormEdit.EditingStartEditAction')}
-                      >
-                        {({ field, form }: FieldProps<StartEditAction>) => (
-                          <Select
-                            field={field}
-                            form={form}
-                            isClearable={true}
-                            options={editingOptionStartEditActionOptions}
-                            value={editingOptionStartEditActionOptions?.filter(
-                              (option) => option.value === values.editingOptionDto.startEditAction,
-                            )}
-                            onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                          />
-                        )}
-                      </Field>
-                    </FormItem>
-                    <FormItem
-                      label={translate('::ListForms.ListFormEdit.EditingEditColumnName')}
-                      invalid={
-                        errors.editingOptionDto?.editColumnName &&
-                        touched.editingOptionDto?.editColumnName
-                      }
-                      errorMessage={errors.editingOptionDto?.editColumnName}
-                    >
-                      <Field
-                        type="text"
-                        autoComplete="off"
-                        name="editingOptionDto.editColumnName"
-                        placeholder={translate('::ListForms.ListFormEdit.EditingEditColumnName')}
+                        name="editingOptionDto.popup.title"
+                        placeholder={translate('::ListForms.ListFormEdit.EditingTitle')}
                         component={Input}
                       />
                     </FormItem>
-                    {values.editingOptionDto.mode === 'popup' && (
-                      <>
-                        <FormItem
-                          label={translate('::ListForms.ListFormEdit.EditingShowTitle')}
-                          invalid={
-                            errors.editingOptionDto?.popup?.showTitle &&
-                            touched.editingOptionDto?.popup?.showTitle
-                          }
-                          errorMessage={errors.editingOptionDto?.popup?.showTitle}
-                        >
-                          <Field
-                            name="editingOptionDto.popup.showTitle"
-                            placeholder={translate('::ListForms.ListFormEdit.EditingShowTitle')}
-                            component={Checkbox}
-                          />
-                        </FormItem>
-                        <FormItem
-                          label={translate('::ListForms.ListFormEdit.EditingTitle')}
-                          invalid={
-                            errors.editingOptionDto?.popup?.title &&
-                            touched.editingOptionDto?.popup?.title
-                          }
-                          errorMessage={errors.editingOptionDto?.popup?.title}
-                        >
-                          <Field
-                            type="text"
-                            autoComplete="off"
-                            name="editingOptionDto.popup.title"
-                            placeholder={translate('::ListForms.ListFormEdit.EditingTitle')}
-                            component={Input}
-                          />
-                        </FormItem>
-                        <FormItem
-                          label={translate('::ListForms.ListFormEdit.EditingWidth')}
-                          invalid={
-                            errors.editingOptionDto?.popup?.width &&
-                            touched.editingOptionDto?.popup?.width
-                          }
-                          errorMessage={errors.editingOptionDto?.popup?.width}
-                        >
-                          <Field
-                            className="w-20"
-                            type="number"
-                            autoComplete="off"
-                            name="editingOptionDto.popup.width"
-                            placeholder={translate('::ListForms.ListFormEdit.EditingWidth')}
-                            component={Input}
-                          />
-                        </FormItem>
-                        <FormItem
-                          label={translate('::ListForms.ListFormEdit.EditingHeight')}
-                          invalid={
-                            errors.editingOptionDto?.popup?.height &&
-                            touched.editingOptionDto?.popup?.height
-                          }
-                          errorMessage={errors.editingOptionDto?.popup?.height}
-                        >
-                          <Field
-                            className="w-20"
-                            type="number"
-                            autoComplete="off"
-                            name="editingOptionDto.popup.height"
-                            placeholder={translate('::ListForms.ListFormEdit.EditingHeight')}
-                            component={Input}
-                          />
-                        </FormItem>
-                        <FormItem
-                          label={translate('::ListForms.ListFormEdit.EditingFullScreen')}
-                          invalid={
-                            errors.editingOptionDto?.popup?.fullScreen &&
-                            touched.editingOptionDto?.popup?.fullScreen
-                          }
-                          errorMessage={errors.editingOptionDto?.popup?.fullScreen}
-                        >
-                          <Field
-                            name="editingOptionDto.popup.fullScreen"
-                            placeholder={translate('::ListForms.ListFormEdit.EditingFullScreen')}
-                            component={Checkbox}
-                          />
-                        </FormItem>
-                        <FormItem
-                          label={translate('::ListForms.ListFormEdit.EditingHideOnOutsideClick')}
-                          invalid={
-                            errors.editingOptionDto?.popup?.hideOnOutsideClick &&
-                            touched.editingOptionDto?.popup?.hideOnOutsideClick
-                          }
-                          errorMessage={errors.editingOptionDto?.popup?.hideOnOutsideClick}
-                        >
-                          <Field
-                            name="editingOptionDto.popup.hideOnOutsideClick"
-                            placeholder={translate(
-                              '::ListForms.ListFormEdit.EditingHideOnOutsideClick',
-                            )}
-                            component={Checkbox}
-                          />
-                        </FormItem>
-                      </>
-                    )}
                     <FormItem
-                      label={translate('::ListForms.ListFormEdit.SendOnlyChangedFormValuesUpdate')}
+                      label={translate('::ListForms.ListFormEdit.EditingWidth')}
                       invalid={
-                        errors.editingOptionDto?.sendOnlyChangedFormValuesUpdate &&
-                        touched.editingOptionDto?.sendOnlyChangedFormValuesUpdate
+                        errors.editingOptionDto?.popup?.width &&
+                        touched.editingOptionDto?.popup?.width
                       }
-                      errorMessage={errors.editingOptionDto?.sendOnlyChangedFormValuesUpdate}
+                      errorMessage={errors.editingOptionDto?.popup?.width}
                     >
                       <Field
-                        name="editingOptionDto.sendOnlyChangedFormValuesUpdate"
+                        className="w-20"
+                        type="number"
+                        autoComplete="off"
+                        name="editingOptionDto.popup.width"
+                        placeholder={translate('::ListForms.ListFormEdit.EditingWidth')}
+                        component={Input}
+                      />
+                    </FormItem>
+                    <FormItem
+                      label={translate('::ListForms.ListFormEdit.EditingHeight')}
+                      invalid={
+                        errors.editingOptionDto?.popup?.height &&
+                        touched.editingOptionDto?.popup?.height
+                      }
+                      errorMessage={errors.editingOptionDto?.popup?.height}
+                    >
+                      <Field
+                        className="w-20"
+                        type="number"
+                        autoComplete="off"
+                        name="editingOptionDto.popup.height"
+                        placeholder={translate('::ListForms.ListFormEdit.EditingHeight')}
+                        component={Input}
+                      />
+                    </FormItem>
+                    <FormItem
+                      label={translate('::ListForms.ListFormEdit.EditingFullScreen')}
+                      invalid={
+                        errors.editingOptionDto?.popup?.fullScreen &&
+                        touched.editingOptionDto?.popup?.fullScreen
+                      }
+                      errorMessage={errors.editingOptionDto?.popup?.fullScreen}
+                    >
+                      <Field
+                        name="editingOptionDto.popup.fullScreen"
+                        placeholder={translate('::ListForms.ListFormEdit.EditingFullScreen')}
+                        component={Checkbox}
+                      />
+                    </FormItem>
+                    <FormItem
+                      label={translate('::ListForms.ListFormEdit.EditingHideOnOutsideClick')}
+                      invalid={
+                        errors.editingOptionDto?.popup?.hideOnOutsideClick &&
+                        touched.editingOptionDto?.popup?.hideOnOutsideClick
+                      }
+                      errorMessage={errors.editingOptionDto?.popup?.hideOnOutsideClick}
+                    >
+                      <Field
+                        name="editingOptionDto.popup.hideOnOutsideClick"
                         placeholder={translate(
-                          '::ListForms.ListFormEdit.SendOnlyChangedFormValuesUpdate',
+                          '::ListForms.ListFormEdit.EditingHideOnOutsideClick',
                         )}
                         component={Checkbox}
                       />
                     </FormItem>
-                    <Button block variant="solid" loading={isSubmitting}>
-                      {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
-                    </Button>
-                  </Card>
-                </FormContainer>
-              </Form>
-            )}
-          </Formik>
-        </TabContent>
-        <TabContent value="tabForm">
-          <FormTabEditForm listFormCode={props.listFormCode} />
-        </TabContent>
-      </Tabs>
+                  </>
+                )}
+                <FormItem
+                  label={translate('::ListForms.ListFormEdit.SendOnlyChangedFormValuesUpdate')}
+                  invalid={
+                    errors.editingOptionDto?.sendOnlyChangedFormValuesUpdate &&
+                    touched.editingOptionDto?.sendOnlyChangedFormValuesUpdate
+                  }
+                  errorMessage={errors.editingOptionDto?.sendOnlyChangedFormValuesUpdate}
+                >
+                  <Field
+                    name="editingOptionDto.sendOnlyChangedFormValuesUpdate"
+                    placeholder={translate(
+                      '::ListForms.ListFormEdit.SendOnlyChangedFormValuesUpdate',
+                    )}
+                    component={Checkbox}
+                  />
+                </FormItem>
+                <Button block variant="solid" loading={isSubmitting}>
+                  {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+                </Button>
+              </Card>
+            </FormContainer>
+          </Form>
+        )}
+      </Formik>
     </Container>
   )
 }
diff --git a/ui/src/views/admin/listForm/edit/FormTabPivots.tsx b/ui/src/views/admin/listForm/edit/FormTabPivots.tsx
new file mode 100644
index 00000000..478a3c5f
--- /dev/null
+++ b/ui/src/views/admin/listForm/edit/FormTabPivots.tsx
@@ -0,0 +1,173 @@
+import { Container } from '@/components/shared'
+import { Button, Checkbox, FormContainer, FormItem, Input, Select } from '@/components/ui'
+import { ListFormEditTabs } from '@/proxy/admin/list-form/models'
+import { useStoreState } from '@/store'
+import { useLocalization } from '@/utils/hooks/useLocalization'
+import { Field, FieldProps, Form, Formik } from 'formik'
+import * as Yup from 'yup'
+import { FormEditProps } from './FormEdit'
+import { SelectBoxOption } from '@/shared/types'
+import { chartSeriesTypeOptions } from '../../chart/options'
+
+const validationSchema = Yup.object().shape({})
+
+function FormTabColumns(props: FormEditProps) {
+  const { translate } = useLocalization()
+
+  const listFormValues = useStoreState((s) => s.admin.listFormValues)
+  if (!listFormValues) {
+    return null
+  }
+
+  return (
+    <Container className="grid xl:grid-cols-2">
+      <Formik
+        initialValues={listFormValues}
+        validationSchema={validationSchema}
+        onSubmit={async (values, formikHelpers) => {
+          await props.onSubmit(ListFormEditTabs.PivotForm, values, formikHelpers)
+        }}
+      >
+        {({ touched, errors, isSubmitting, values }) => (
+          <Form>
+            <FormContainer size="sm">
+              <FormItem
+                label={translate('::ListForms.ListFormEdit.ShowFieldPanel')}
+                invalid={
+                  errors.pivotOptionDto?.showFieldPanel && touched.pivotOptionDto?.showFieldPanel
+                }
+                errorMessage={errors.pivotOptionDto?.showFieldPanel}
+              >
+                <Field
+                  name="pivotOptionDto.showFieldPanel"
+                  placeholder={translate('::ListForms.ListFormEdit.ShowFieldPanel')}
+                  component={Checkbox}
+                />
+              </FormItem>
+              <FormItem
+                label={translate('::ListForms.ListFormEdit.AllowFieldDragging')}
+                invalid={
+                  errors.pivotOptionDto?.allowFieldDragging &&
+                  touched.pivotOptionDto?.allowFieldDragging
+                }
+                errorMessage={errors.pivotOptionDto?.allowFieldDragging}
+              >
+                <Field
+                  name="pivotOptionDto.allowFieldDragging"
+                  placeholder={translate('::ListForms.ListFormEdit.AllowFieldDragging')}
+                  component={Checkbox}
+                />
+              </FormItem>
+              <FormItem
+                label={translate('::ListForms.ListFormEdit.ShowColumnFields')}
+                invalid={
+                  errors.pivotOptionDto?.showRowFields && touched.pivotOptionDto?.showRowFields
+                }
+                errorMessage={errors.pivotOptionDto?.showRowFields}
+              >
+                <Field
+                  name="pivotOptionDto.showColumnFields"
+                  placeholder={translate('::ListForms.ListFormEdit.ShowColumnFields')}
+                  component={Checkbox}
+                />
+              </FormItem>
+              <FormItem
+                label={translate('::ListForms.ListFormEdit.ShowRowFields')}
+                invalid={
+                  errors.pivotOptionDto?.showRowFields && touched.pivotOptionDto?.showRowFields
+                }
+                errorMessage={errors.pivotOptionDto?.showRowFields}
+              >
+                <Field
+                  name="pivotOptionDto.showRowFields"
+                  placeholder={translate('::ListForms.ListFormEdit.ShowRowFields')}
+                  component={Checkbox}
+                />
+              </FormItem>
+              <FormItem
+                label={translate('::ListForms.ListFormEdit.ShowDataFields')}
+                invalid={
+                  errors.pivotOptionDto?.showDataFields && touched.pivotOptionDto?.showDataFields
+                }
+                errorMessage={errors.pivotOptionDto?.showDataFields}
+              >
+                <Field
+                  name="pivotOptionDto.showDataFields"
+                  placeholder={translate('::ListForms.ListFormEdit.ShowDataFields')}
+                  component={Checkbox}
+                />
+              </FormItem>
+              <FormItem
+                label={translate('::ListForms.ListFormEdit.ShowFilterFields')}
+                invalid={
+                  errors.pivotOptionDto?.showFilterFields &&
+                  touched.pivotOptionDto?.showFilterFields
+                }
+                errorMessage={errors.pivotOptionDto?.showFilterFields}
+              >
+                <Field
+                  name="pivotOptionDto.showFilterFields"
+                  placeholder={translate('::ListForms.ListFormEdit.ShowFilterFields')}
+                  component={Checkbox}
+                />
+              </FormItem>
+              <FormItem
+                label={translate('::ListForms.ListFormEdit.ShowChart')}
+                invalid={errors.pivotOptionDto?.showChart && touched.pivotOptionDto?.showChart}
+                errorMessage={errors.pivotOptionDto?.showChart}
+              >
+                <Field
+                  name="pivotOptionDto.showChart"
+                  placeholder={translate('::ListForms.ListFormEdit.ShowChart')}
+                  component={Checkbox}
+                />
+              </FormItem>
+              <FormItem
+                label={translate('::ListForms.ListFormEdit.ChartHeight')}
+                invalid={errors.pivotOptionDto?.chartHeight && touched.pivotOptionDto?.chartHeight}
+                errorMessage={errors.pivotOptionDto?.chartHeight}
+              >
+                <Field
+                  className="w-20"
+                  type="number"
+                  autoComplete="off"
+                  name="editingOptionDto.chartHeight"
+                  placeholder={translate('::ListForms.ListFormEdit.ChartHeight')}
+                  component={Input}
+                />
+              </FormItem>
+              <FormItem
+                label="Type"
+                invalid={
+                  errors.pivotOptionDto?.chartCommonSeriesType &&
+                  touched.pivotOptionDto?.chartCommonSeriesType
+                }
+                errorMessage={errors.pivotOptionDto?.chartCommonSeriesType}
+              >
+                <Field type="text" name="pivotOptionDto.chartCommonSeriesType">
+                  {({ field, form }: FieldProps<SelectBoxOption>) => (
+                    <Select
+                      field={field}
+                      form={form}
+                      options={chartSeriesTypeOptions}
+                      value={chartSeriesTypeOptions.filter(
+                        (option) => option.value === values.pivotOptionDto.chartCommonSeriesType,
+                      )}
+                      onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                    />
+                  )}
+                </Field>
+              </FormItem>
+
+              <Button block variant="solid" loading={isSubmitting} type="submit" className="my-2">
+                {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
+              </Button>
+            </FormContainer>
+          </Form>
+        )}
+      </Formik>
+    </Container>
+  )
+}
+
+export default FormTabColumns
diff --git a/ui/src/views/admin/listForm/edit/options.ts b/ui/src/views/admin/listForm/edit/options.ts
index 6beb2c70..1b8683bf 100644
--- a/ui/src/views/admin/listForm/edit/options.ts
+++ b/ui/src/views/admin/listForm/edit/options.ts
@@ -26,7 +26,6 @@ import {
 } from '../../../../proxy/admin/list-form-field/models'
 import { enumToList } from '../../../../utils/enumUtils'
 import { colSpan, iconList, WidgetColorEnum } from '@/components/ui/Widget/iconList'
-import { SelectBoxOption } from '@/shared/types'
 
 export const sortModeOptions = [
   { value: 'none', label: 'None' },
diff --git a/ui/src/views/list/Pivot.tsx b/ui/src/views/list/Pivot.tsx
index fd5791d2..e8f7d773 100644
--- a/ui/src/views/list/Pivot.tsx
+++ b/ui/src/views/list/Pivot.tsx
@@ -33,6 +33,7 @@ import {
   setGridPanelColor,
 } from './Utils'
 import { useFilters } from './useFilters'
+import WidgetGroup from '@/components/common/WidgetGroup'
 
 interface GridProps {
   listFormCode: string
@@ -236,66 +237,70 @@ const Pivot = (props: GridProps) => {
   }, [columnData])
 
   return (
-    <Container className={DX_CLASSNAMES}>
-      {!isSubForm && (
-        <Helmet
-          titleTemplate="%s | Sözsoft Kurs Platform"
-          title={translate('::' + gridDto?.gridOptions.title)}
-          defaultTitle="Sözsoft Kurs Platform"
-        ></Helmet>
-      )}
-      {gridDto && columnData && (
-        <>
-          {gridDto.gridOptions.columnOptionDto.showChart && (
-            <Chart ref={chartRef as any}>
-              <Size height={gridDto.gridOptions.columnOptionDto.chartHeight} />
-              <Tooltip enabled={true}></Tooltip>
-              <CommonSeriesSettings
-                type={gridDto.gridOptions.columnOptionDto.chartCommonSeriesType}
-              />
-            </Chart>
-          )}
+    <>
+      <WidgetGroup widgetGroups={gridDto?.widgets ?? []} />
 
-          <PivotGrid
-            ref={gridRef as any}
-            id={'Pivot-' + listFormCode}
-            allowFiltering={gridDto.gridOptions.filterRowDto.visible}
-            allowSorting={gridDto.gridOptions.sortMode !== 'none'}
-            allowSortingBySummary={gridDto.gridOptions.sortMode !== 'none'}
-            height={gridDto.gridOptions.height || '100%'}
-            width={gridDto.gridOptions.width || '100%'}
-            showBorders={gridDto.gridOptions.columnOptionDto?.showBorders}
-            rtlEnabled={gridDto.gridOptions.columnOptionDto?.rtlEnabled}
-            hoverStateEnabled={gridDto.gridOptions.columnOptionDto?.hoverStateEnabled}
-            onCellPrepared={onCellPrepared}
-          >
-            <HeaderFilter
-              allowSelectAll={gridDto.gridOptions.selectionDto.allowSelectAll}
-              width={gridDto.gridOptions.headerFilterDto.width}
-              height={gridDto.gridOptions.headerFilterDto.height}
+      <Container className={DX_CLASSNAMES}>
+        {!isSubForm && (
+          <Helmet
+            titleTemplate="%s | Sözsoft Kurs Platform"
+            title={translate('::' + gridDto?.gridOptions.title)}
+            defaultTitle="Sözsoft Kurs Platform"
+          ></Helmet>
+        )}
+        {gridDto && columnData && (
+          <>
+            {gridDto.gridOptions.pivotOptionDto.showChart && (
+              <Chart ref={chartRef as any}>
+                <Size height={gridDto.gridOptions.pivotOptionDto.chartHeight} />
+                <Tooltip enabled={true}></Tooltip>
+                <CommonSeriesSettings
+                  type={gridDto.gridOptions.pivotOptionDto.chartCommonSeriesType}
+                />
+              </Chart>
+            )}
+
+            <PivotGrid
+              ref={gridRef as any}
+              id={'Pivot-' + listFormCode}
+              allowFiltering={gridDto.gridOptions.filterRowDto.visible}
+              allowSorting={gridDto.gridOptions.sortMode !== 'none'}
+              allowSortingBySummary={gridDto.gridOptions.sortMode !== 'none'}
+              height={gridDto.gridOptions.height || '100%'}
+              width={gridDto.gridOptions.width || '100%'}
+              showBorders={gridDto.gridOptions.columnOptionDto?.showBorders}
+              rtlEnabled={gridDto.gridOptions.columnOptionDto?.rtlEnabled}
+              hoverStateEnabled={gridDto.gridOptions.columnOptionDto?.hoverStateEnabled}
+              onCellPrepared={onCellPrepared}
             >
-              <Search
-                enabled={gridDto.gridOptions.headerFilterDto.allowSearch}
-                timeout={gridDto.gridOptions.headerFilterDto.searchTimeout}
-              ></Search>
-            </HeaderFilter>
-            <FieldPanel
-              allowFieldDragging={gridDto.gridOptions.columnOptionDto.allowFieldDragging}
-              visible={gridDto.gridOptions.columnOptionDto.showFieldPanel}
-              showDataFields={gridDto.gridOptions.columnOptionDto.showDataFields}
-              showColumnFields={gridDto.gridOptions.columnOptionDto.showColumnFields}
-              showRowFields={gridDto.gridOptions.columnOptionDto.showRowFields}
-              showFilterFields={gridDto.gridOptions.columnOptionDto.showFilterFields}
-            />
-            <FieldChooser
-              enabled={gridDto.gridOptions.columnOptionDto.columnChooserEnabled}
-              height={500}
-            />
-            <Scrolling mode={gridDto.gridOptions.pagerOptionDto.scrollingMode} />
-          </PivotGrid>
-        </>
-      )}
-    </Container>
+              <HeaderFilter
+                allowSelectAll={gridDto.gridOptions.selectionDto.allowSelectAll}
+                width={gridDto.gridOptions.headerFilterDto.width}
+                height={gridDto.gridOptions.headerFilterDto.height}
+              >
+                <Search
+                  enabled={gridDto.gridOptions.headerFilterDto.allowSearch}
+                  timeout={gridDto.gridOptions.headerFilterDto.searchTimeout}
+                ></Search>
+              </HeaderFilter>
+              <FieldPanel
+                allowFieldDragging={gridDto.gridOptions.pivotOptionDto.allowFieldDragging}
+                visible={gridDto.gridOptions.pivotOptionDto.showFieldPanel}
+                showDataFields={gridDto.gridOptions.pivotOptionDto.showDataFields}
+                showColumnFields={gridDto.gridOptions.pivotOptionDto.showColumnFields}
+                showRowFields={gridDto.gridOptions.pivotOptionDto.showRowFields}
+                showFilterFields={gridDto.gridOptions.pivotOptionDto.showFilterFields}
+              />
+              <FieldChooser
+                enabled={gridDto.gridOptions.columnOptionDto.columnChooserEnabled}
+                height={500}
+              />
+              <Scrolling mode={gridDto.gridOptions.pagerOptionDto.scrollingMode} />
+            </PivotGrid>
+          </>
+        )}
+      </Container>
+    </>
   )
 }