diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
index 789825d..a8829c7 100644
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
@@ -1275,6 +1275,7 @@ dependencies = [
  "async-openai",
  "aws-config",
  "aws-sdk-dynamodb",
+ "base64 0.22.1",
  "futures",
  "http 0.2.12",
  "log",
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
index 6b1b0f4..24e0ee9 100644
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -30,6 +30,7 @@ log = "0.4.22"
 futures = "0.3.30"
 aws-config = "1.6.1"
 aws-sdk-dynamodb = "1.71.2"
+base64 = "0.22.1"
 [features]
 # This feature is used for production builds or when a dev server is not specified, DO NOT REMOVE!!
 custom-protocol = ["tauri/custom-protocol"]
diff --git a/src-tauri/src/dynamo_client.rs b/src-tauri/src/dynamo_client.rs
index aa0a602..be36a0b 100644
--- a/src-tauri/src/dynamo_client.rs
+++ b/src-tauri/src/dynamo_client.rs
@@ -3,6 +3,7 @@ use aws_sdk_dynamodb::{Client, config::Credentials, types::AttributeValue};
 use aws_config::Region;
 use serde::{Deserialize, Serialize};
 use serde_json::json;
+use base64;
 
 #[derive(Debug, Deserialize)]
 pub struct DynamoCredentials {
@@ -25,6 +26,23 @@ struct ApiResponse {
     data: Option<serde_json::Value>,
 }
 
+fn convert_json_to_attr_value(value: &serde_json::Value) -> Option<AttributeValue> {
+    match value {
+        serde_json::Value::String(s) => Some(AttributeValue::S(s.clone())),
+        serde_json::Value::Number(n) => Some(AttributeValue::N(n.to_string())),
+        serde_json::Value::Bool(b) => Some(AttributeValue::Bool(*b)),
+        serde_json::Value::Null => Some(AttributeValue::Null(true)),
+        serde_json::Value::Array(arr) => Some(AttributeValue::L(
+            arr.iter().filter_map(|v| convert_json_to_attr_value(v)).collect()
+        )),
+        serde_json::Value::Object(map) => Some(AttributeValue::M(
+            map.iter().filter_map(|(k, v)| {
+                convert_json_to_attr_value(v).map(|av| (k.clone(), av))
+            }).collect()
+        )),
+    }
+}
+
 #[tauri::command]
 pub async fn dynamo_api(
     window: tauri::Window,
@@ -65,7 +83,8 @@ pub async fn dynamo_api(
                     let table_info = json!({
                         "id": response.table().and_then(|t| t.table_id()),
                         "name": response.table().map(|t| t.table_name()),
-                        "status": response.table().and_then(|t| t.table_status().map(|s| s.as_str().to_string())),                        "itemCount": response.table().and_then(|t| t.item_count()),
+                        "status": response.table().and_then(|t| t.table_status().map(|s| s.as_str().to_string())),
+                        "itemCount": response.table().and_then(|t| t.item_count()),
                         "sizeBytes": response.table().and_then(|t| t.table_size_bytes()),
                         "keySchema": response.table().and_then(|t| {
                             Some(t.key_schema().iter().map(|k| {
@@ -146,18 +165,79 @@ pub async fn dynamo_api(
                 })
             }
         },
-        "put_item" => {
-            if let Some(_payload) = &options.payload {
-                // Implementation for put_item would go here
-                Ok(ApiResponse {
-                    status: 200,
-                    message: "Item put successfully".to_string(),
-                    data: None,
-                })
+        "CREATE_ITEM" => {
+            if let Some(payload) = &options.payload {
+                // Expecting payload to have an "attributes" array
+                if let Some(attributes) = payload.get("attributes").and_then(|v| v.as_array()) {
+                    let mut put_item = client.put_item().table_name(&options.table_name);
+
+                    for attr in attributes {
+                        if let (Some(key), Some(value), Some(attr_type)) = (
+                            attr.get("key").and_then(|v| v.as_str()),
+                            attr.get("value"),
+                            attr.get("type").and_then(|v| v.as_str()),
+                        ) {
+                            let attr_value = match attr_type {
+                                "S" => value.as_str().map(|s| AttributeValue::S(s.to_string())),
+                                "N" => value.as_f64().map(|n| AttributeValue::N(n.to_string())),
+                                "B" => value.as_str().map(|s| AttributeValue::B(
+                                    aws_sdk_dynamodb::primitives::Blob::new(base64::decode(s).unwrap_or_default())
+                                )),
+                                "BOOL" => value.as_bool().map(AttributeValue::Bool),
+                                "NULL" => Some(AttributeValue::Null(true)),
+                                "SS" => value.as_array().map(|arr| {
+                                    AttributeValue::Ss(arr.iter().filter_map(|v| v.as_str().map(|s| s.to_string())).collect())
+                                }),
+                                "NS" => value.as_array().map(|arr| {
+                                    AttributeValue::Ns(arr.iter().filter_map(|v| v.as_f64().map(|n| n.to_string())).collect())
+                                }),
+                                "BS" => value.as_array().map(|arr| {
+                                    AttributeValue::Bs(arr.iter().filter_map(|v| v.as_str().map(|s| {
+                                        aws_sdk_dynamodb::primitives::Blob::new(base64::decode(s).unwrap_or_default())
+                                    })).collect())
+                                }),
+                                "L" => value.as_array().map(|arr| {
+                                    AttributeValue::L(arr.iter().filter_map(|v| {
+                                        // Recursively convert each element
+                                        convert_json_to_attr_value(v)
+                                    }).collect())
+                                }),
+                                "M" => value.as_object().map(|map| {
+                                    AttributeValue::M(map.iter().filter_map(|(k, v)| {
+                                        convert_json_to_attr_value(v).map(|av| (k.clone(), av))
+                                    }).collect())
+                                }),
+                                _ => None,
+                            };
+                            if let Some(av) = attr_value {
+                                put_item = put_item.item(key, av);
+                            }
+                        }
+                    }
+
+                    match put_item.send().await {
+                        Ok(_) => Ok(ApiResponse {
+                            status: 200,
+                            message: "Item created successfully".to_string(),
+                            data: None,
+                        }),
+                        Err(e) => Ok(ApiResponse {
+                            status: 500,
+                            message: format!("Failed to create item: {}", e),
+                            data: None,
+                        }),
+                    }
+                } else {
+                    Ok(ApiResponse {
+                        status: 400,
+                        message: "Attributes array is required".to_string(),
+                        data: None,
+                    })
+                }
             } else {
                 Ok(ApiResponse {
                     status: 400,
-                    message: "Item is required for put_item operation".to_string(),
+                    message: "Item payload is required".to_string(),
                     data: None,
                 })
             }
diff --git a/src/components/tool-bar.vue b/src/components/tool-bar.vue
index 710a8f3..522b274 100644
--- a/src/components/tool-bar.vue
+++ b/src/components/tool-bar.vue
@@ -61,7 +61,7 @@
       {{ $t('editor.loadDefault') }}
     </n-tooltip>
     <n-button-group v-if="props.type === 'DYNAMO_EDITOR'">
-      <n-button quaternary>
+      <n-button quaternary @click="handleEditorSwitch('DYNAMO_EDITOR_UI')">
         <template #icon>
           <n-icon>
             <Template />
@@ -69,7 +69,7 @@
         </template>
         {{ $t('editor.dynamo.uiQuery') }}
       </n-button>
-      <n-button quaternary>
+      <n-button quaternary @click="handleEditorSwitch('DYNAMO_EDITOR_SQL')">
         <template #icon>
           <n-icon>
             <Code />
@@ -77,6 +77,14 @@
         </template>
         {{ $t('editor.dynamo.sqlEditor') }}
       </n-button>
+      <n-button quaternary @click="handleEditorSwitch('DYNAMO_EDITOR_CREATE_ITEM')">
+        <template #icon>
+          <n-icon>
+            <Add />
+          </n-icon>
+        </template>
+        {{ $t('editor.dynamo.createItem') }}
+      </n-button>
     </n-button-group>
     <n-tabs
       v-if="props.type === 'MANAGE'"
@@ -95,12 +103,15 @@
 </template>
 
 <script setup lang="ts">
-import { AiStatus, Search, Code, Template } from '@vicons/carbon';
+import { Add, AiStatus, Search, Code, Template } from '@vicons/carbon';
 import { storeToRefs } from 'pinia';
 import { useClusterManageStore, useConnectionStore, useTabStore } from '../store';
 import { useLang } from '../lang';
 import { CustomError, inputProps } from '../common';
 
+const props = defineProps({ type: String });
+const emits = defineEmits(['switch-manage-tab']);
+
 const message = useMessage();
 const lang = useLang();
 
@@ -108,11 +119,6 @@ const connectionStore = useConnectionStore();
 const { fetchConnections, fetchIndices, selectIndex } = connectionStore;
 const { connections } = storeToRefs(connectionStore);
 
-const props = defineProps({
-  type: String,
-});
-const emits = defineEmits(['switch-manage-tab']);
-
 const tabStore = useTabStore();
 const { loadDefaultSnippet, selectConnection } = tabStore;
 const { activePanel, activeElasticsearchIndexOption } = storeToRefs(tabStore);
@@ -255,6 +261,12 @@ const handleHiddenChange = async (value: boolean) => {
     await refreshStates(value);
   }
 };
+
+const handleEditorSwitch = async (
+  value: 'DYNAMO_EDITOR_UI' | 'DYNAMO_EDITOR_SQL' | 'DYNAMO_EDITOR_CREATE_ITEM',
+) => {
+  activePanel.value.editorType = value;
+};
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/datasources/dynamoApi.ts b/src/datasources/dynamoApi.ts
index a4d344f..b02c7c1 100644
--- a/src/datasources/dynamoApi.ts
+++ b/src/datasources/dynamoApi.ts
@@ -29,14 +29,36 @@ export type DynamoIndex = {
 };
 
 // Main table info type
-export type DynamoDBTableInfo = {
+export type RawDynamoDBTableInfo = {
   id: string;
   name: string;
   status: string;
   itemCount: number;
   sizeBytes: number;
   keySchema: KeySchema[]; // Based on connection store usage
-  attributeDefinitions?: AttributeDefinition[];
+  attributeDefinitions: AttributeDefinition[];
+  indices: DynamoIndex[];
+  creationDateTime: string;
+};
+
+export type DynamoDBTableInfo = {
+  id: string;
+  name: string;
+  status: string;
+  itemCount: number;
+  sizeBytes: number;
+  partitionKey: {
+    name: string;
+    type: string;
+    valueType: string;
+  };
+  sortKey?: {
+    name: string;
+    type: string;
+    valueType: string;
+  };
+  keySchema: KeySchema[];
+  attributeDefinitions: AttributeDefinition[];
   indices?: DynamoIndex[];
   creationDateTime?: string;
 };
@@ -84,8 +106,27 @@ const dynamoApi = {
     if (status !== 200) {
       throw new CustomError(status, message);
     }
-    return data as DynamoDBTableInfo;
+    const { keySchema, attributeDefinitions } = data as RawDynamoDBTableInfo;
+
+    const pkName = keySchema.find(({ keyType }) => keyType.toUpperCase() === 'HASH')?.attributeName;
+    const pkValueType = attributeDefinitions.find(
+      ({ attributeName }) => attributeName === pkName,
+    )?.attributeType;
+
+    const skName = keySchema.find(
+      ({ keyType }) => keyType.toUpperCase() === 'RANGE',
+    )?.attributeName;
+    const skValueType = attributeDefinitions.find(
+      ({ attributeName }) => attributeName === skName,
+    )?.attributeType;
+
+    const partitionKey = { name: pkName, valueType: pkValueType, type: 'HASH' };
+
+    const sortKey = { name: skName, valueType: skValueType, type: 'RANGE' };
+
+    return { ...data, partitionKey, sortKey } as DynamoDBTableInfo;
   },
+
   queryTable: async (con: DynamoDBConnection, queryParams: QueryParams): Promise<QueryResult> => {
     const credentials = {
       region: con.region,
@@ -136,6 +177,32 @@ const dynamoApi = {
 
     return data as QueryResult;
   },
+  createItem: async (
+    con: DynamoDBConnection,
+    attributes: Array<{
+      key: string;
+      value: string | number | boolean | null;
+      type: string;
+    }>,
+  ) => {
+    const credentials = {
+      region: con.region,
+      access_key_id: con.accessKeyId,
+      secret_access_key: con.secretAccessKey,
+    };
+    const options = {
+      table_name: con.tableName,
+      operation: 'CREATE_ITEM',
+      payload: { attributes },
+    };
+
+    const { status, message, data } = await tauriClient.invokeDynamoApi(credentials, options);
+
+    if (status !== 200) {
+      throw new CustomError(status, message);
+    }
+    return data as QueryResult;
+  },
 };
 
 export { dynamoApi };
diff --git a/src/lang/enUS.ts b/src/lang/enUS.ts
index 337916b..818d004 100644
--- a/src/lang/enUS.ts
+++ b/src/lang/enUS.ts
@@ -193,9 +193,6 @@ export const enUS = {
     unsupportedFile: 'DocKit only supports file end with .search file',
     loadDefault: 'Load default code snippet',
     dynamo: {
-      filterKeyRequired: 'Filter key name is required',
-      filterOperatorRequired: 'Filter operator is required',
-      filterValueRequired: 'Filter key value is required',
       uiQuery: 'Query UI',
       sqlEditor: 'PartiQL Editor',
       tableOrIndex: 'Table/Index',
@@ -205,11 +202,19 @@ export const enUS = {
       filterTitle: 'Filters - Optional',
       inputAttrName: 'Enter attribute name',
       inputOperator: 'Select Operator',
+      type: 'Select attribute type',
       inputAttrValue: 'Enter attribute value',
       resultTitle: 'Query Result',
       indexIsRequired: 'Table/Index is required',
       atLeastRequired: 'Partition key or at least 1 filter is required',
       scanWarning: 'Request without partitionKey will scan the table',
+      createItem: 'Create Item',
+      addAttributesTitle: 'Add Attributes',
+      attributeNameRequired: 'Attribute name is required',
+      attributeTypeRequired: 'Attribute type is required',
+      attributeValueRequired: 'Attribute value is required',
+      operatorRequired: 'Filter operator is required',
+      createItemSuccess: 'Item created successfully!',
     },
   },
   file: {
diff --git a/src/lang/zhCN.ts b/src/lang/zhCN.ts
index af263c8..50602bb 100644
--- a/src/lang/zhCN.ts
+++ b/src/lang/zhCN.ts
@@ -193,9 +193,6 @@ export const zhCN = {
     unsupportedFile: 'DocKit仅支持以 .search 结尾的文件',
     loadDefault: '加载默认代码片段',
     dynamo: {
-      filterKeyRequired: '请输入滤器键名',
-      filterOperatorRequired: '请输入滤器操作符',
-      filterValueRequired: '请输入滤器键的值',
       uiQuery: '查询 UI',
       sqlEditor: 'PartiQL 查询',
       tableOrIndex: '表/索引',
@@ -205,11 +202,19 @@ export const zhCN = {
       filterTitle: '条件过滤 - 可选',
       inputAttrName: '请输入属性名称',
       inputOperator: '选择操作符',
+      type: '选择属性类型',
       inputAttrValue: '请输入属性的值',
       resultTitle: '查询结果',
       indexIsRequired: '表/索引 是必需的',
       atLeastRequired: 'Partition Key 或至少 1 个过滤器是必需的',
       scanWarning: '未提供 Partition Key，执行 Scan 操作可能会导致性能问题',
+      createItem: '添加数据',
+      addAttributesTitle: '添加属性',
+      attributeNameRequired: '请输入属性名称',
+      attributeTypeRequired: '请输入属性类型',
+      attributeValueRequired: '请输入属性值',
+      operatorRequired: '请输入滤器操作符',
+      createItemSuccess: '数据添加成功!',
     },
   },
   file: {
diff --git a/src/store/connectionStore.ts b/src/store/connectionStore.ts
index bc016e1..7c21525 100644
--- a/src/store/connectionStore.ts
+++ b/src/store/connectionStore.ts
@@ -3,12 +3,13 @@ import { buildAuthHeader, buildURL, CustomError, pureObject } from '../common';
 import { lang } from '../lang';
 import { SearchAction, transformToCurl } from '../common/monaco';
 import {
-  loadHttpClient,
-  storeApi,
+  AttributeDefinition,
   dynamoApi,
   DynamoIndex,
   KeySchema,
+  loadHttpClient,
   QueryParams,
+  storeApi,
 } from '../datasources';
 import { DynamoIndexOrTableOption } from './tabStore.ts';
 
@@ -41,12 +42,23 @@ export type DynamoDBConnection = {
   id?: number;
   name: string;
   type: DatabaseType.DYNAMODB;
-  indices: Array<DynamoIndex>;
+  indices?: Array<DynamoIndex>;
   region: string;
   accessKeyId: string;
   secretAccessKey: string;
   tableName: string;
-  keySchema: Array<KeySchema>;
+  keySchema?: Array<KeySchema>;
+  partitionKey: {
+    name: string;
+    type: string;
+    valueType: string;
+  };
+  attributeDefinitions: Array<AttributeDefinition>;
+  sortKey?: {
+    name: string;
+    type: string;
+    valueType: string;
+  };
 };
 
 export type ElasticsearchConnection = {
@@ -122,7 +134,7 @@ export const useConnectionStore = defineStore('connectionStore', {
     },
     getDynamoIndexOrTableOption: () => {
       return (targetConnection?: DynamoDBConnection) => {
-        if (!targetConnection || targetConnection.type !== DatabaseType.DYNAMODB) return [];
+        if (!targetConnection?.keySchema) return [];
 
         const { partitionKeyName, sortKeyName } = getIndexInfo(targetConnection.keySchema);
         const partitionKeyOption = partitionKeyName && {
@@ -132,16 +144,17 @@ export const useConnectionStore = defineStore('connectionStore', {
           sortKeyName,
         };
 
-        const indexOptions = targetConnection.indices?.map(index => {
-          const { partitionKeyName, sortKeyName } = getIndexInfo(index.keySchema);
+        const indexOptions =
+          targetConnection.indices?.map(index => {
+            const { partitionKeyName, sortKeyName } = getIndexInfo(index.keySchema);
 
-          return {
-            label: `GSI - ${index.name}`,
-            value: index.name,
-            partitionKeyName,
-            sortKeyName,
-          };
-        });
+            return {
+              label: `GSI - ${index.name}`,
+              value: index.name,
+              partitionKeyName,
+              sortKeyName,
+            };
+          }) || [];
 
         return [partitionKeyOption, ...indexOptions].filter(
           Boolean,
@@ -232,6 +245,9 @@ export const useConnectionStore = defineStore('connectionStore', {
         const tableInfo = await dynamoApi.describeTable(con as DynamoDBConnection);
         connection.keySchema = tableInfo.keySchema;
         connection.indices = tableInfo.indices as DynamoIndex[];
+        connection.partitionKey = tableInfo.partitionKey;
+        connection.sortKey = tableInfo.sortKey;
+        connection.attributeDefinitions = tableInfo.attributeDefinitions;
       }
     },
     async selectIndex(con: Connection, indexName: string) {
@@ -323,5 +339,16 @@ export const useConnectionStore = defineStore('connectionStore', {
         ? await dynamoApi.queryTable(con, queryParams)
         : await dynamoApi.scanTable(con, queryParams);
     },
+
+    async createItem(
+      con: DynamoDBConnection,
+      attributes: Array<{
+        key: string;
+        value: string | number | boolean | null;
+        type: string;
+      }>,
+    ) {
+      return await dynamoApi.createItem(con, attributes);
+    },
   },
 });
diff --git a/src/store/tabStore.ts b/src/store/tabStore.ts
index 41275f1..7700182 100644
--- a/src/store/tabStore.ts
+++ b/src/store/tabStore.ts
@@ -12,6 +12,7 @@ type Panel = {
   file?: string;
   content?: string;
   hideSystemIndices?: boolean;
+  editorType?: 'DYNAMO_EDITOR_UI' | 'DYNAMO_EDITOR_SQL' | 'DYNAMO_EDITOR_CREATE_ITEM';
 };
 
 const homePanel: Panel = { id: 0, name: 'home', file: '' };
diff --git a/src/views/editor/dynamo-editor/components/create-item.vue b/src/views/editor/dynamo-editor/components/create-item.vue
new file mode 100644
index 0000000..88a2ad3
--- /dev/null
+++ b/src/views/editor/dynamo-editor/components/create-item.vue
@@ -0,0 +1,356 @@
+<template>
+  <n-card>
+    <n-form
+      ref="dynamoRecordFormRef"
+      :model="dynamoRecordForm"
+      :rules="dynamoRecordFormRules"
+      label-placement="left"
+      require-mark-placement="right-hanging"
+      label-width="auto"
+    >
+      <n-card :title="$t('editor.dynamo.addAttributesTitle')">
+        <template #header-extra>
+          <n-icon size="26" @click="addAttributeItem" style="cursor: pointer">
+            <Add />
+          </n-icon>
+        </template>
+        <!-- First row with partition and sort key -->
+        <n-grid :cols="24" :x-gap="12">
+          <n-grid-item span="12">
+            <n-form-item
+              v-if="selectedTable.partitionKeyLabel"
+              :label="selectedTable.partitionKeyLabel"
+              path="partitionKey"
+              :input-props="inputProps"
+            >
+              <n-input
+                v-model:value="dynamoRecordForm.partitionKey"
+                :placeholder="$t('editor.dynamo.enterPartitionKey')"
+                :input-props="inputProps"
+              />
+            </n-form-item>
+          </n-grid-item>
+
+          <n-grid-item span="12">
+            <n-form-item
+              v-if="selectedTable.sortKeyLabel"
+              :label="selectedTable.sortKeyLabel"
+              path="sortKey"
+              :input-props="inputProps"
+            >
+              <n-input
+                v-model:value="dynamoRecordForm.sortKey"
+                :placeholder="$t('editor.dynamo.enterSortKey')"
+              />
+            </n-form-item>
+          </n-grid-item>
+        </n-grid>
+        <n-divider title-placement="left"> Key Attributes </n-divider>
+        <n-grid
+          v-for="(item, index) in selectedTable.keyAttributes"
+          :key="index"
+          :cols="24"
+          :x-gap="12"
+        >
+          <n-grid-item span="9">
+            <n-form-item :path="`keyAttributes[${index}].key`">
+              <n-input
+                v-model:value="item.attributeName"
+                :placeholder="$t('editor.dynamo.inputAttrName')"
+                disabled
+              />
+            </n-form-item>
+          </n-grid-item>
+          <n-grid-item span="4">
+            <n-form-item :path="`keyAttributes[${index}].type`">
+              <n-select
+                v-model:value="item.attributeType"
+                :placeholder="$t('editor.dynamo.type')"
+                disabled
+                :options="attributeType"
+              />
+            </n-form-item>
+          </n-grid-item>
+          <n-grid-item span="9">
+            <n-form-item
+              :path="`keyAttributes[${index}].value`"
+              :rule="{
+                required: true,
+                message: `${lang.t('editor.dynamo.attributeValueRequired')}`,
+                trigger: ['input', 'blur'],
+              }"
+            >
+              <n-input
+                v-model:value="item.value"
+                :placeholder="$t('editor.dynamo.inputAttrValue')"
+                :input-props="inputProps"
+              />
+            </n-form-item>
+          </n-grid-item>
+          <n-grid-item span="2">
+            <n-button quaternary circle @click="removeAttributeItem(index)">
+              <template #icon>
+                <n-icon>
+                  <Delete />
+                </n-icon>
+              </template>
+            </n-button>
+          </n-grid-item>
+        </n-grid>
+        <!-- Dynamically additional form items -->
+        <n-divider title-placement="left"> Additional Attributes </n-divider>
+        <n-grid
+          v-for="(item, index) in dynamoRecordForm.attributes"
+          :key="index"
+          :cols="24"
+          :x-gap="12"
+        >
+          <n-grid-item span="9">
+            <n-form-item
+              :path="`attributes[${index}].key`"
+              :rule="{
+                required: true,
+                message: `${lang.t('editor.dynamo.attributeNameRequired')}`,
+                trigger: ['input', 'blur'],
+              }"
+            >
+              <n-input
+                v-model:value="item.key"
+                :placeholder="$t('editor.dynamo.inputAttrName')"
+                :input-props="inputProps"
+              />
+            </n-form-item>
+          </n-grid-item>
+          <n-grid-item span="4">
+            <n-form-item
+              :path="`attributes[${index}].type`"
+              :rule="{
+                required: true,
+                message: `${lang.t('editor.dynamo.attributeTypeRequired')}`,
+                trigger: ['input', 'blur'],
+              }"
+            >
+              <n-select
+                v-model:value="item.type"
+                :placeholder="$t('editor.dynamo.type')"
+                :options="attributeType"
+              />
+            </n-form-item>
+          </n-grid-item>
+          <n-grid-item span="9">
+            <n-form-item
+              :path="`attributes[${index}].value`"
+              :rule="{
+                required: true,
+                message: `${lang.t('editor.dynamo.attributeValueRequired')}`,
+                trigger: ['input', 'blur'],
+              }"
+            >
+              <n-input
+                v-model:value="item.value"
+                :placeholder="$t('editor.dynamo.inputAttrValue')"
+                :input-props="inputProps"
+              />
+            </n-form-item>
+          </n-grid-item>
+          <n-grid-item span="2">
+            <n-button quaternary circle @click="removeAttributeItem(index)">
+              <template #icon>
+                <n-icon>
+                  <Delete />
+                </n-icon>
+              </template>
+            </n-button>
+          </n-grid-item>
+        </n-grid>
+      </n-card>
+    </n-form>
+    <template #footer>
+      <div class="card-footer">
+        <n-button type="warning" tertiary @click="handleReset">
+          {{ $t('dialogOps.reset') }}
+        </n-button>
+        <n-button
+          type="primary"
+          @click="handleSubmit"
+          :disabled="!validationPassed"
+          :loading="loadingRef.createItem"
+        >
+          {{ $t('dialogOps.execute') }}
+        </n-button>
+      </div>
+    </template>
+  </n-card>
+  <n-card :title="$t('editor.dynamo.resultTitle')" v-if="queryResult.data">
+    <n-data-table :columns="queryResult.columns" :data="queryResult.data" />
+  </n-card>
+</template>
+
+<script setup lang="ts">
+import { storeToRefs } from 'pinia';
+import { Add, Delete } from '@vicons/carbon';
+import { FormRules, FormValidationError } from 'naive-ui';
+import { Connection, DynamoDBConnection, useConnectionStore, useTabStore } from '../../../../store';
+import { inputProps } from '../../../../common';
+import { useLang } from '../../../../lang';
+
+const connectionStore = useConnectionStore();
+
+const { fetchIndices, createItem } = connectionStore;
+const { getDynamoIndexOrTableOption } = storeToRefs(connectionStore);
+
+const tabStore = useTabStore();
+const { activeConnection } = storeToRefs(tabStore);
+
+const loadingRef = ref({ createItem: false });
+
+const dynamoRecordFormRef = ref();
+const attributeType = ref([
+  { label: 'String', value: 'S' },
+  { label: 'Number', value: 'N' },
+  { label: 'Boolean', value: 'BOOL' },
+  { label: 'Binary', value: 'B' },
+  { label: 'Null', value: 'NULL' },
+  { label: 'List', value: 'L' },
+  { label: 'Map', value: 'M' },
+  { label: 'String Set', value: 'SS' },
+  { label: 'Number Set', value: 'NS' },
+  { label: 'Binary Set', value: 'BS' },
+]);
+
+const message = useMessage();
+const lang = useLang();
+
+const dynamoRecordForm = ref<{
+  partitionKey: string;
+  sortKey: string;
+  attributes: Array<{ key: string; value: string; type: string }>;
+  keyAttributes: Array<{ key: string; value: string; type: string }>;
+}>({ partitionKey: '', sortKey: '', attributes: [] });
+
+const dynamoRecordFormRules = reactive<FormRules>({
+  index: [
+    {
+      required: true,
+      renderMessage: () => lang.t('editor.dynamo.indexIsRequired'),
+      trigger: ['input', 'blur'],
+    },
+  ],
+  partitionKey: [
+    {
+      required: true,
+      renderMessage: () => lang.t('editor.dynamo.attributeValueRequired'),
+      level: 'error',
+      trigger: ['input', 'blur'],
+    },
+  ],
+});
+
+const queryResult = ref<{
+  columns: Array<{ title: string; key: string }>;
+  data: Array<Record<string, unknown>> | undefined;
+}>({
+  columns: [],
+  data: undefined,
+});
+
+const addAttributeItem = () => {
+  dynamoRecordForm.value.attributes.push({ key: '', value: '', type: '' });
+};
+
+const removeAttributeItem = (index: number) => {
+  dynamoRecordForm.value.attributes.splice(index, 1);
+};
+
+const selectedTable = computed(() => {
+  const indexOrTableOptions = getDynamoIndexOrTableOption.value(
+    activeConnection.value as DynamoDBConnection,
+  );
+  if (indexOrTableOptions?.length < 1) {
+    return {
+      partitionKeyName: undefined,
+      sortKeyName: undefined,
+      partitionKeyLabel: undefined,
+      sortKeyLabel: undefined,
+      keyAttributes: [],
+    };
+  }
+
+  const { partitionKeyName, sortKeyName } = indexOrTableOptions[0];
+
+  return {
+    partitionKeyName,
+    sortKeyName,
+    partitionKeyLabel: partitionKeyName ? `${partitionKeyName}  (Partition Key):` : undefined,
+    sortKeyLabel: sortKeyName ? `${sortKeyName} (Sort Key):` : undefined,
+    keyAttributes: activeConnection.value.attributeDefinitions ?? [],
+  };
+});
+
+const validateForm = async () => {
+  try {
+    return await dynamoRecordFormRef.value?.validate(
+      (errors: Array<FormValidationError>) => !errors,
+    );
+  } catch (e) {
+    return false;
+  }
+};
+const validationPassed = watch(
+  [dynamoRecordForm.value, dynamoRecordForm.value.attributes],
+  validateForm,
+);
+
+const handleSubmit = async (event: MouseEvent) => {
+  event.preventDefault();
+  if (!activeConnection.value) {
+    message.error(`status: 500, ${lang.t('connection.selectIndex')}`);
+    return;
+  }
+  if (!(await validateForm())) {
+    message.error(lang.t('connection.validationFailed'));
+    return;
+  }
+
+  try {
+    loadingRef.value.createItem = true;
+    const { partitionKey } = activeConnection.value as DynamoDBConnection;
+    const pkRecord = {
+      key: partitionKey.name,
+      value: dynamoRecordForm.value.partitionKey,
+      type: partitionKey.valueType,
+    };
+
+    const attributes = [pkRecord, ...dynamoRecordForm.value.attributes];
+
+    await createItem(activeConnection.value as DynamoDBConnection, attributes);
+    message.success(lang.t('editor.dynamo.createItemSuccess'));
+  } catch (error) {
+    message.error(`status: ${(error as Error).name}, details: ${(error as Error).message}`, {
+      closable: true,
+      keepAliveOnHover: true,
+      duration: 3600,
+    });
+  } finally {
+    loadingRef.value.createItem = false;
+  }
+};
+
+const handleReset = () => {
+  dynamoRecordForm.value = { partitionKey: '', sortKey: '', attributes: [] };
+
+  if (dynamoRecordFormRef.value) {
+    dynamoRecordFormRef.value.restoreValidation();
+  }
+};
+
+fetchIndices(activeConnection.value as Connection);
+</script>
+
+<style lang="scss" scoped>
+.card-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+}
+</style>
diff --git a/src/views/editor/dynamo-editor/components/sql-editor.vue b/src/views/editor/dynamo-editor/components/sql-editor.vue
new file mode 100644
index 0000000..4f5c106
--- /dev/null
+++ b/src/views/editor/dynamo-editor/components/sql-editor.vue
@@ -0,0 +1,7 @@
+<template>
+  <div>SQL editor</div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/editor/dynamo-editor/components/ui-editor.vue b/src/views/editor/dynamo-editor/components/ui-editor.vue
new file mode 100644
index 0000000..88ecc4e
--- /dev/null
+++ b/src/views/editor/dynamo-editor/components/ui-editor.vue
@@ -0,0 +1,368 @@
+<template>
+  <n-card>
+    <n-form
+      ref="dynamoQueryFormRef"
+      :model="dynamoQueryForm"
+      :rules="dynamoQueryFormRules"
+      label-placement="left"
+      require-mark-placement="right-hanging"
+      label-width="auto"
+    >
+      <!-- First row with partition and sort key -->
+      <n-grid :cols="24" :x-gap="12">
+        <n-grid-item span="12">
+          <n-form-item :label="$t('editor.dynamo.tableOrIndex')" path="index">
+            <n-select
+              :placeholder="$t('editor.dynamo.selectTableOrIndex')"
+              v-model:value="dynamoQueryForm.index"
+              remote
+              :loading="loadingRef.index"
+              @update:show="handleIndexOpen"
+              @update:value="handleUpdate"
+              :options="indicesOrTableOptions"
+            />
+          </n-form-item>
+        </n-grid-item>
+
+        <n-grid-item span="12">
+          <n-form-item
+            v-if="selectedIndexOrTable?.partitionKeyName"
+            :label="getLabel('PARTITION_KEY')"
+            path="partitionKey"
+            :input-props="inputProps"
+          >
+            <n-input
+              v-model:value="dynamoQueryForm.partitionKey"
+              :placeholder="$t('editor.dynamo.enterPartitionKey')"
+              :input-props="inputProps"
+            />
+          </n-form-item>
+        </n-grid-item>
+
+        <n-grid-item span="12">
+          <n-form-item
+            v-if="selectedIndexOrTable?.sortKeyName"
+            :label="getLabel('SORT_KEY')"
+            path="sortKey"
+            :input-props="inputProps"
+          >
+            <n-input
+              v-model:value="dynamoQueryForm.sortKey"
+              :placeholder="$t('editor.dynamo.enterSortKey')"
+            />
+          </n-form-item>
+        </n-grid-item>
+      </n-grid>
+
+      <!-- Dynamic additional form items -->
+      <n-card :title="$t('editor.dynamo.filterTitle')">
+        <template #header-extra>
+          <n-icon size="26" @click="addFilterItem" style="cursor: pointer">
+            <Add />
+          </n-icon>
+        </template>
+        <n-grid
+          v-for="(item, index) in dynamoQueryForm.formFilterItems"
+          :key="index"
+          :cols="24"
+          :x-gap="12"
+        >
+          <n-grid-item span="9">
+            <n-form-item
+              :path="`formFilterItems[${index}].key`"
+              :rule="{
+                required: true,
+                message: `${lang.t('editor.dynamo.attributeNameRequired')}`,
+                trigger: ['input', 'blur'],
+              }"
+            >
+              <n-input
+                v-model:value="item.key"
+                :placeholder="$t('editor.dynamo.inputAttrName')"
+                :input-props="inputProps"
+              />
+            </n-form-item>
+          </n-grid-item>
+          <n-grid-item span="4">
+            <n-form-item
+              :path="`formFilterItems[${index}].operator`"
+              :rule="{
+                required: true,
+                message: `${lang.t('editor.dynamo.operatorRequired')}`,
+                trigger: ['input', 'blur'],
+              }"
+            >
+              <n-select
+                v-model:value="item.operator"
+                :placeholder="$t('editor.dynamo.inputOperator')"
+                :options="filterConditions"
+              />
+            </n-form-item>
+          </n-grid-item>
+          <n-grid-item span="9">
+            <n-form-item
+              :path="`formFilterItems[${index}].value`"
+              :rule="{
+                required: true,
+                message: `${lang.t('editor.dynamo.attributeValueRequired')}`,
+                trigger: ['input', 'blur'],
+              }"
+            >
+              <n-input
+                v-model:value="item.value"
+                :placeholder="$t('editor.dynamo.inputAttrValue')"
+                :input-props="inputProps"
+              />
+            </n-form-item>
+          </n-grid-item>
+          <n-grid-item span="2">
+            <n-button quaternary circle @click="removeFilterItem(index)">
+              <template #icon>
+                <n-icon>
+                  <Delete />
+                </n-icon>
+              </template>
+            </n-button>
+          </n-grid-item>
+        </n-grid>
+      </n-card>
+    </n-form>
+    <template #footer>
+      <div class="card-footer">
+        <n-button type="warning" tertiary @click="handleReset">
+          {{ $t('dialogOps.reset') }}
+        </n-button>
+        <n-button type="primary" @click="handleSubmit" :disabled="!validationPassed">
+          {{ $t('dialogOps.execute') }}
+        </n-button>
+      </div>
+    </template>
+  </n-card>
+  <n-card :title="$t('editor.dynamo.resultTitle')" v-if="queryResult.data">
+    <n-data-table :columns="queryResult.columns" :data="queryResult.data" />
+  </n-card>
+</template>
+
+<script setup lang="ts">
+import { storeToRefs } from 'pinia';
+import { Add, Delete } from '@vicons/carbon';
+import { isEmpty } from 'lodash';
+import { FormItemRule, FormRules, FormValidationError } from 'naive-ui';
+import {
+  Connection,
+  DynamoDBConnection,
+  DynamoIndexOrTableOption,
+  useConnectionStore,
+  useTabStore,
+} from '../../../../store';
+import { inputProps } from '../../../../common';
+import { useLang } from '../../../../lang';
+
+const connectionStore = useConnectionStore();
+
+const { fetchIndices, queryTable } = connectionStore;
+const { getDynamoIndexOrTableOption } = storeToRefs(connectionStore);
+
+const tabStore = useTabStore();
+const { activeConnection } = storeToRefs(tabStore);
+
+const dynamoQueryFormRef = ref();
+const filterConditions = ref([
+  { label: '=', value: '=' },
+  { label: '!=', value: '!=' },
+  { label: '<=', value: '<=' },
+  { label: '<', value: '<' },
+  { label: '>=', value: '>=' },
+  { label: '>', value: '>' },
+  { label: 'Between', value: 'between' },
+  { label: 'Exists', value: 'attribute_exists' },
+  { label: 'Not exists', value: 'attribute_not_exists' },
+  { label: 'Contain', value: 'contains' },
+  { label: 'Not contain', value: 'not contain' },
+  { label: 'Begins with', value: 'begins_with' },
+]);
+
+const loadingRef = ref({ index: false });
+
+const message = useMessage();
+const lang = useLang();
+
+const dynamoQueryForm = ref<{
+  index: string;
+  partitionKey: string;
+  sortKey: string;
+  formFilterItems: Array<{ key: string; value: string; operator: string }>;
+}>({ index: '', partitionKey: '', sortKey: '', formFilterItems: [] });
+
+const dynamoQueryFormRules = reactive<FormRules>({
+  index: [
+    {
+      required: true,
+      renderMessage: () => lang.t('editor.dynamo.indexIsRequired'),
+      trigger: ['input', 'blur'],
+    },
+  ],
+  partitionKey: [
+    {
+      validator: (_: FormItemRule, value) =>
+        !(isEmpty(dynamoQueryForm.value.formFilterItems) && !value),
+      renderMessage: () => lang.t('editor.dynamo.atLeastRequired'),
+      level: 'error',
+      trigger: ['input', 'blur'],
+    },
+    {
+      validator: (_: FormItemRule, value) =>
+        !(!isEmpty(dynamoQueryForm.value.formFilterItems) && !value),
+      renderMessage: () => lang.t('editor.dynamo.scanWarning'),
+      level: 'warning',
+      trigger: ['input', 'blur'],
+    },
+  ],
+});
+
+const queryResult = ref<{
+  columns: Array<{ title: string; key: string }>;
+  data: Array<Record<string, unknown>> | undefined;
+}>({
+  columns: [],
+  data: undefined,
+});
+
+const addFilterItem = () => {
+  dynamoQueryForm.value.formFilterItems.push({ key: '', value: '', operator: '' });
+};
+
+const removeFilterItem = (index: number) => {
+  dynamoQueryForm.value.formFilterItems.splice(index, 1);
+};
+
+const indicesOrTableOptions = ref<Array<DynamoIndexOrTableOption>>([]);
+
+const selectedIndexOrTable = ref<DynamoIndexOrTableOption | undefined>(undefined);
+
+const handleUpdate = (value: string) => {
+  const indices = getDynamoIndexOrTableOption.value(activeConnection.value as DynamoDBConnection);
+  selectedIndexOrTable.value = indices.find(item => item.value === value);
+  dynamoQueryForm.value.index = selectedIndexOrTable.value!.value;
+};
+
+const getLabel = (label: string) => {
+  if (!selectedIndexOrTable.value) {
+    return label;
+  }
+  switch (label) {
+    case 'PARTITION_KEY':
+      return `${selectedIndexOrTable.value.partitionKeyName} (Partition Key):`;
+    case 'SORT_KEY':
+      return `${selectedIndexOrTable.value.sortKeyName} (Sort Key):`;
+    default:
+      return label;
+  }
+};
+
+const handleIndexOpen = async (isOpen: boolean) => {
+  if (!isOpen) {
+    loadingRef.value.index = false;
+    return;
+  }
+  loadingRef.value.index = true;
+  try {
+    await fetchIndices(activeConnection.value as Connection);
+    indicesOrTableOptions.value = getDynamoIndexOrTableOption.value(
+      activeConnection.value as DynamoDBConnection,
+    );
+  } catch (err) {
+    message.error(`status: ${(err as Error).name}, details: ${(err as Error).message}`, {
+      closable: true,
+      keepAliveOnHover: true,
+      duration: 3600,
+    });
+  } finally {
+    loadingRef.value.index = false;
+  }
+};
+
+const validateForm = async () => {
+  try {
+    return await dynamoQueryFormRef.value?.validate(
+      (errors: Array<FormValidationError>) => !errors,
+    );
+  } catch (e) {
+    return false;
+  }
+};
+const validationPassed = watch(
+  [dynamoQueryForm.value, dynamoQueryForm.value.formFilterItems],
+  validateForm,
+);
+
+const handleSubmit = async (event: MouseEvent) => {
+  event.preventDefault();
+  if (!activeConnection.value || !selectedIndexOrTable.value) {
+    message.error(`status: 500, ${lang.t('connection.selectIndex')}`);
+    return;
+  }
+  if (!(await validateForm())) {
+    message.error(lang.t('connection.validationFailed'));
+    return;
+  }
+
+  try {
+    const { tableName } = activeConnection.value as DynamoDBConnection;
+    const { partitionKey, sortKey, formFilterItems } = dynamoQueryForm.value;
+    const { partitionKeyName, sortKeyName, value } =
+      selectedIndexOrTable.value as DynamoIndexOrTableOption;
+    // Build query parameters
+    const queryParams = {
+      tableName,
+      indexName: value,
+      partitionKey: { name: partitionKeyName, value: partitionKey },
+      sortKey: sortKeyName && sortKey ? { name: sortKeyName, value: sortKey } : undefined,
+      filters: formFilterItems,
+    };
+
+    const data = await queryTable(activeConnection.value as DynamoDBConnection, queryParams);
+
+    const columnsSet = new Set<string>();
+    data.items.forEach(item => {
+      Object.keys(item).forEach(key => {
+        columnsSet.add(key);
+      });
+    });
+    const columnsData = data.items.map(item => {
+      const row: Record<string, unknown> = {};
+      columnsSet.forEach(key => {
+        row[key] = item[key];
+      });
+      return row;
+    });
+    queryResult.value = {
+      columns: Array.from(columnsSet).map(key => ({ title: key, key })),
+      data: columnsData,
+    };
+  } catch (error) {
+    message.error(`status: ${(error as Error).name}, details: ${(error as Error).message}`, {
+      closable: true,
+      keepAliveOnHover: true,
+      duration: 3600,
+    });
+  }
+};
+
+const handleReset = () => {
+  selectedIndexOrTable.value = undefined;
+  dynamoQueryForm.value = { index: '', partitionKey: '', sortKey: '', formFilterItems: [] };
+
+  if (dynamoQueryFormRef.value) {
+    dynamoQueryFormRef.value.restoreValidation();
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.card-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+}
+</style>
diff --git a/src/views/editor/dynamo-editor/index.vue b/src/views/editor/dynamo-editor/index.vue
index 431a146..0250bc6 100644
--- a/src/views/editor/dynamo-editor/index.vue
+++ b/src/views/editor/dynamo-editor/index.vue
@@ -1,372 +1,22 @@
 <template>
   <div class="dynamo-editor">
     <tool-bar type="DYNAMO_EDITOR" />
-    <n-card>
-      <n-form
-        ref="dynamoQueryFormRef"
-        :model="dynamoQueryForm"
-        :rules="dynamoQueryFormRules"
-        label-placement="left"
-        require-mark-placement="right-hanging"
-        label-width="auto"
-      >
-        <!-- First row with partition and sort key -->
-        <n-grid :cols="24" :x-gap="12">
-          <n-grid-item span="12">
-            <n-form-item :label="$t('editor.dynamo.tableOrIndex')" path="index">
-              <n-select
-                :placeholder="$t('editor.dynamo.selectTableOrIndex')"
-                v-model:value="dynamoQueryForm.index"
-                remote
-                :loading="loadingRef.index"
-                @update:show="handleIndexOpen"
-                @update:value="handleUpdate"
-                :options="indicesOrTableOptions"
-              />
-            </n-form-item>
-          </n-grid-item>
-
-          <n-grid-item span="12">
-            <n-form-item
-              v-if="selectedIndexOrTable?.partitionKeyName"
-              :label="getLabel('PARTITION_KEY')"
-              path="partitionKey"
-              :input-props="inputProps"
-            >
-              <n-input
-                v-model:value="dynamoQueryForm.partitionKey"
-                :placeholder="$t('editor.dynamo.enterPartitionKey')"
-                :input-props="inputProps"
-              />
-            </n-form-item>
-          </n-grid-item>
-
-          <n-grid-item span="12">
-            <n-form-item
-              v-if="selectedIndexOrTable?.sortKeyName"
-              :label="getLabel('SORT_KEY')"
-              path="sortKey"
-              :input-props="inputProps"
-            >
-              <n-input
-                v-model:value="dynamoQueryForm.sortKey"
-                :placeholder="$t('editor.dynamo.enterSortKey')"
-              />
-            </n-form-item>
-          </n-grid-item>
-        </n-grid>
-
-        <!-- Dynamic additional form items -->
-        <n-card :title="$t('editor.dynamo.filterTitle')">
-          <template #header-extra>
-            <n-icon size="26" @click="addFilterItem" style="cursor: pointer">
-              <Add />
-            </n-icon>
-          </template>
-          <n-grid
-            v-for="(item, index) in dynamoQueryForm.formFilterItems"
-            :key="index"
-            :cols="24"
-            :x-gap="12"
-          >
-            <n-grid-item span="9">
-              <n-form-item
-                :path="`formFilterItems[${index}].key`"
-                :rule="{
-                  required: true,
-                  message: `${lang.t('editor.dynamo.filterKeyRequired')}`,
-                  trigger: ['input', 'blur'],
-                }"
-              >
-                <n-input
-                  v-model:value="item.key"
-                  :placeholder="$t('editor.dynamo.inputAttrName')"
-                  :input-props="inputProps"
-                />
-              </n-form-item>
-            </n-grid-item>
-            <n-grid-item span="4">
-              <n-form-item
-                :path="`formFilterItems[${index}].operator`"
-                :rule="{
-                  required: true,
-                  message: `${lang.t('editor.dynamo.filterOperatorRequired')}`,
-                  trigger: ['input', 'blur'],
-                }"
-              >
-                <n-select
-                  v-model:value="item.operator"
-                  :placeholder="$t('editor.dynamo.inputOperator')"
-                  :options="filterConditions"
-                />
-              </n-form-item>
-            </n-grid-item>
-            <n-grid-item span="9">
-              <n-form-item
-                :path="`formFilterItems[${index}].value`"
-                :rule="{
-                  required: true,
-                  message: `${lang.t('editor.dynamo.filterValueRequired')}`,
-                  trigger: ['input', 'blur'],
-                }"
-              >
-                <n-input
-                  v-model:value="item.value"
-                  :placeholder="$t('editor.dynamo.inputAttrValue')"
-                  :input-props="inputProps"
-                />
-              </n-form-item>
-            </n-grid-item>
-            <n-grid-item span="2">
-              <n-button quaternary circle @click="removeFilterItem(index)">
-                <template #icon>
-                  <n-icon>
-                    <Delete />
-                  </n-icon>
-                </template>
-              </n-button>
-            </n-grid-item>
-          </n-grid>
-        </n-card>
-      </n-form>
-      <template #footer>
-        <div class="card-footer">
-          <n-button type="warning" tertiary @click="handleReset">
-            {{ $t('dialogOps.reset') }}
-          </n-button>
-          <n-button type="primary" @click="handleSubmit" :disabled="!validationPassed">
-            {{ $t('dialogOps.execute') }}
-          </n-button>
-        </div>
-      </template>
-    </n-card>
-    <n-card :title="$t('editor.dynamo.resultTitle')" v-if="queryResult.data">
-      <n-data-table :columns="queryResult.columns" :data="queryResult.data" />
-    </n-card>
+    <ui-editor v-if="activePanel.editorType === 'DYNAMO_EDITOR_UI'"></ui-editor>
+    <create-item v-else-if="activePanel.editorType === 'DYNAMO_EDITOR_CREATE_ITEM'" />
+    <sql-editor v-else />
   </div>
 </template>
 
 <script setup lang="ts">
 import { storeToRefs } from 'pinia';
-import { Add, Delete } from '@vicons/carbon';
-import { isEmpty } from 'lodash';
 import ToolBar from '../../../components/tool-bar.vue';
-import { FormItemRule, FormRules, FormValidationError } from 'naive-ui';
-import {
-  Connection,
-  DynamoDBConnection,
-  DynamoIndexOrTableOption,
-  useConnectionStore,
-  useTabStore,
-} from '../../../store';
-import { inputProps } from '../../../common';
-import { useLang } from '../../../lang';
-
-const connectionStore = useConnectionStore();
-
-const { fetchIndices, queryTable } = connectionStore;
-const { getDynamoIndexOrTableOption } = storeToRefs(connectionStore);
+import UiEditor from './components/ui-editor.vue';
+import SqlEditor from './components/sql-editor.vue';
+import CreateItem from './components/create-item.vue';
+import { useTabStore } from '../../../store';
 
 const tabStore = useTabStore();
-const { activeConnection } = storeToRefs(tabStore);
-
-const dynamoQueryFormRef = ref();
-const filterConditions = ref([
-  { label: '=', value: '=' },
-  { label: '!=', value: '!=' },
-  { label: '<=', value: '<=' },
-  { label: '<', value: '<' },
-  { label: '>=', value: '>=' },
-  { label: '>', value: '>' },
-  { label: 'Between', value: 'between' },
-  { label: 'Exists', value: 'attribute_exists' },
-  { label: 'Not exists', value: 'attribute_not_exists' },
-  { label: 'Contain', value: 'contains' },
-  { label: 'Not contain', value: 'not contain' },
-  { label: 'Begins with', value: 'begins_with' },
-]);
-
-const loadingRef = ref({ index: false });
-
-const message = useMessage();
-const lang = useLang();
-
-const dynamoQueryForm = ref<{
-  index: string;
-  partitionKey: string;
-  sortKey: string;
-  formFilterItems: Array<{ key: string; value: string; operator: string }>;
-}>({ index: '', partitionKey: '', sortKey: '', formFilterItems: [] });
-
-const dynamoQueryFormRules = reactive<FormRules>({
-  index: [
-    {
-      required: true,
-      renderMessage: () => lang.t('editor.dynamo.indexIsRequired'),
-      trigger: ['input', 'blur'],
-    },
-  ],
-  partitionKey: [
-    {
-      validator: (_: FormItemRule, value) =>
-        !(isEmpty(dynamoQueryForm.value.formFilterItems) && !value),
-      renderMessage: () => lang.t('editor.dynamo.atLeastRequired'),
-      level: 'error',
-      trigger: ['input', 'blur'],
-    },
-    {
-      validator: (_: FormItemRule, value) =>
-        !(!isEmpty(dynamoQueryForm.value.formFilterItems) && !value),
-      renderMessage: () => lang.t('editor.dynamo.scanWarning'),
-      level: 'warning',
-      trigger: ['input', 'blur'],
-    },
-  ],
-});
-
-const queryResult = ref<{
-  columns: Array<{ title: string; key: string }>;
-  data: Array<Record<string, unknown>> | undefined;
-}>({
-  columns: [],
-  data: undefined,
-});
-
-const addFilterItem = () => {
-  dynamoQueryForm.value.formFilterItems.push({ key: '', value: '', operator: '' });
-};
-
-const removeFilterItem = (index: number) => {
-  dynamoQueryForm.value.formFilterItems.splice(index, 1);
-};
-
-const indicesOrTableOptions = ref<Array<DynamoIndexOrTableOption>>([]);
-
-const selectedIndexOrTable = ref<DynamoIndexOrTableOption | undefined>(undefined);
-
-const handleUpdate = (value: string) => {
-  const indices = getDynamoIndexOrTableOption.value(activeConnection.value as DynamoDBConnection);
-  selectedIndexOrTable.value = indices.find(item => item.value === value);
-  dynamoQueryForm.value.index = selectedIndexOrTable.value!.value;
-};
-
-const getLabel = (label: string) => {
-  if (!selectedIndexOrTable.value) {
-    return label;
-  }
-  switch (label) {
-    case 'PARTITION_KEY':
-      return `${selectedIndexOrTable.value.partitionKeyName} (Partition Key):`;
-    case 'SORT_KEY':
-      return `${selectedIndexOrTable.value.sortKeyName} (Sort Key):`;
-    default:
-      return label;
-  }
-};
-
-const handleIndexOpen = async (isOpen: boolean) => {
-  if (!isOpen) {
-    loadingRef.value.index = false;
-    return;
-  }
-  loadingRef.value.index = true;
-  try {
-    await fetchIndices(activeConnection.value as Connection);
-    indicesOrTableOptions.value = getDynamoIndexOrTableOption.value(
-      activeConnection.value as DynamoDBConnection,
-    );
-  } catch (err) {
-    message.error(`status: ${(err as Error).name}, details: ${(err as Error).message}`, {
-      closable: true,
-      keepAliveOnHover: true,
-      duration: 3600,
-    });
-  } finally {
-    loadingRef.value.index = false;
-  }
-};
-
-const validateForm = async () => {
-  try {
-    return await dynamoQueryFormRef.value?.validate(
-      (errors: Array<FormValidationError>) => !errors,
-    );
-  } catch (e) {
-    return false;
-  }
-};
-const validationPassed = watch(
-  [dynamoQueryForm.value, dynamoQueryForm.value.formFilterItems],
-  validateForm,
-);
-
-const handleSubmit = async (event: MouseEvent) => {
-  event.preventDefault();
-  if (!activeConnection.value || !selectedIndexOrTable.value) {
-    message.error(`status: 500, ${lang.t('connection.selectIndex')}`);
-    return;
-  }
-  if (!(await validateForm())) {
-    message.error(lang.t('connection.validationFailed'));
-    return;
-  }
-
-  try {
-    const { tableName } = activeConnection.value as DynamoDBConnection;
-    const { partitionKey, sortKey, formFilterItems } = dynamoQueryForm.value;
-    const { partitionKeyName, sortKeyName, value } =
-      selectedIndexOrTable.value as DynamoIndexOrTableOption;
-    // Build query parameters
-    const queryParams = {
-      tableName,
-      indexName: value,
-      partitionKey: { name: partitionKeyName, value: partitionKey },
-      sortKey: sortKeyName && sortKey ? { name: sortKeyName, value: sortKey } : undefined,
-      filters: formFilterItems,
-    };
-
-    const data = await queryTable(activeConnection.value as DynamoDBConnection, queryParams);
-
-    const columnsSet = new Set<string>();
-    data.items.forEach(item => {
-      Object.keys(item).forEach(key => {
-        columnsSet.add(key);
-      });
-    });
-    const columnsData = data.items.map(item => {
-      const row: Record<string, unknown> = {};
-      columnsSet.forEach(key => {
-        row[key] = item[key];
-      });
-      return row;
-    });
-    queryResult.value = {
-      columns: Array.from(columnsSet).map(key => ({ title: key, key })),
-      data: columnsData,
-    };
-  } catch (error) {
-    message.error(`status: ${(error as Error).name}, details: ${(error as Error).message}`, {
-      closable: true,
-      keepAliveOnHover: true,
-      duration: 3600,
-    });
-  }
-};
-
-const handleReset = () => {
-  selectedIndexOrTable.value = undefined;
-  dynamoQueryForm.value = { index: '', partitionKey: '', sortKey: '', formFilterItems: [] };
-
-  if (dynamoQueryFormRef.value) {
-    dynamoQueryFormRef.value.restoreValidation();
-  }
-};
+const { activePanel } = storeToRefs(tabStore);
 </script>
 
-<style lang="scss" scoped>
-.card-footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 12px;
-}
-</style>
+<style lang="scss" scoped></style>