diff --git a/src/components/control_panel.jsx b/src/components/control_panel.jsx
index 9b009dc..49a150d 100644
--- a/src/components/control_panel.jsx
+++ b/src/components/control_panel.jsx
@@ -19,7 +19,7 @@ import {
   Image,
   Modal,
 } from "@douyinfe/semi-ui";
-import { toPng, toJpeg } from "html-to-image";
+import { toPng, toJpeg, toSvg } from "html-to-image";
 import { saveAs } from "file-saver";
 
 export default function ControlPanel() {
@@ -65,7 +65,7 @@ export default function ControlPanel() {
       "Export as": {
         children: [
           {
-            ".png": () => {
+            PNG: () => {
               toPng(document.getElementById("canvas")).then(function (dataUrl) {
                 setDataUrl(dataUrl);
               });
@@ -74,7 +74,7 @@ export default function ControlPanel() {
             },
           },
           {
-            ".jpeg": () => {
+            JPEG: () => {
               toJpeg(document.getElementById("canvas"), { quality: 0.95 }).then(
                 function (dataUrl) {
                   setDataUrl(dataUrl);
@@ -84,9 +84,20 @@ export default function ControlPanel() {
               setExtension("jpeg");
             },
           },
-          { ".xml": () => {} },
-          { ".svg": () => {} },
-          { ".pdf": () => {} },
+          { XML: () => {} },
+          {
+            SVG: () => {
+              const filter = (node) => node.tagName !== "i";
+              toSvg(document.getElementById("canvas"), { filter: filter }).then(
+                function (dataUrl) {
+                  setDataUrl(dataUrl);
+                }
+              );
+              setVisible(true);
+              setExtension("svg");
+            },
+          },
+          { PDF: () => {} },
         ],
         function: () => {},
       },
@@ -374,7 +385,16 @@ export default function ControlPanel() {
             style={{ width: "180px" }}
             render={
               <Dropdown.Menu>
-                <Dropdown.Item icon={<IconCheckboxTick />}>
+                <Dropdown.Item
+                  icon={
+                    showToolBar ? (
+                      <IconCheckboxTick />
+                    ) : (
+                      <div className="px-2"></div>
+                    )
+                  }
+                  onClick={() => setShowToolBar((prev) => !prev)}
+                >
                   Header
                 </Dropdown.Item>
                 <Dropdown.Item icon={<IconCheckboxTick />}>
diff --git a/src/components/editor_panel.jsx b/src/components/editor_panel.jsx
index d1987df..6816895 100644
--- a/src/components/editor_panel.jsx
+++ b/src/components/editor_panel.jsx
@@ -5,14 +5,12 @@ import { createTheme } from "@uiw/codemirror-themes";
 import { sql } from "@codemirror/lang-sql";
 import { tags as t } from "@lezer/highlight";
 import Shape from "./shape";
-import { toPng } from "html-to-image";
 import { Parser } from "node-sql-parser";
 import { Tabs } from "@douyinfe/semi-ui";
 import "react-resizable/css/styles.css";
 import TableOverview from "./table_overview";
 import ReferenceOverview from "./reference_overview";
 import { defaultTableTheme } from "../data/data";
-import { ImagePreview } from "@douyinfe/semi-ui";
 
 const myTheme = createTheme({
   dark: "light",
@@ -32,13 +30,6 @@ const EditorPanel = (props) => {
   const [tab, setTab] = useState("1");
   const map = useRef(new Map());
 
-  const [visible1, setVisible1] = useState(false);
-  const [dataUrl, setDataUrl] = useState("");
-
-  const visibleChange1 = (v) => {
-    setVisible1(v);
-  };
-
   const tabList = [
     { tab: "Tables", itemKey: "1" },
     { tab: "References", itemKey: "2" },
@@ -169,24 +160,6 @@ const EditorPanel = (props) => {
         >
           parse
         </button>
-        <br />
-        <button
-          onClick={() => {
-            toPng(document.getElementById("canvas")).then(function (dataUrl) {
-              // window.saveAs(dataUrl, "canvas.png");
-              setDataUrl(dataUrl);
-            });
-            setVisible1(true);
-          }}
-        >
-          export img
-        </button>
-        <ImagePreview
-          src={dataUrl}
-          visible={visible1}
-          onVisibleChange={visibleChange1}
-        >
-        </ImagePreview>
       </div>
     </ResizableBox>
   );
diff --git a/src/components/table_overview.jsx b/src/components/table_overview.jsx
index cdfe369..70f96a8 100644
--- a/src/components/table_overview.jsx
+++ b/src/components/table_overview.jsx
@@ -12,6 +12,7 @@ import {
   Select,
   AutoComplete,
   Toast,
+  Empty,
 } from "@douyinfe/semi-ui";
 import {
   IconMore,
@@ -22,6 +23,10 @@ import {
   IconPlus,
   IconSearch,
 } from "@douyinfe/semi-icons";
+import {
+  IllustrationNoContent,
+  IllustrationNoContentDark,
+} from "@douyinfe/semi-illustrations";
 
 export default function TableOverview(props) {
   const [indexActiveKey, setIndexActiveKey] = useState("");
@@ -141,406 +146,422 @@ export default function TableOverview(props) {
         onChange={(k) => setTableActiveKey(k)}
         accordion
       >
-        {props.tables.map((t, i) => (
-          <div id={`${t.name}_scroll_id`} key={t.id}>
-            <Collapse.Panel header={<div>{t.name}</div>} itemKey={`${t.id}`}>
-              {t.fields.map((f, j) => (
-                <Form
-                  key={j}
-                  onChange={(value) => updatedField(i, j, value.values)}
-                >
-                  <Row
-                    type="flex"
-                    justify="start"
-                    align="middle"
-                    gutter={6}
-                    className="hover:bg-slate-100"
+        {props.tables.length <= 0 ? (
+          <Empty
+            image={
+              <IllustrationNoContent style={{ width: 160, height: 160 }} />
+            }
+            darkModeImage={
+              <IllustrationNoContentDark style={{ width: 160, height: 160 }} />
+            }
+            title="No tables"
+            description="Start building your diagram!"
+          />
+        ) : (
+          props.tables.map((t, i) => (
+            <div id={`${t.name}_scroll_id`} key={t.id}>
+              <Collapse.Panel header={<div>{t.name}</div>} itemKey={`${t.id}`}>
+                {t.fields.map((f, j) => (
+                  <Form
+                    key={j}
+                    onChange={(value) => updatedField(i, j, value.values)}
                   >
-                    <Col span={7}>
-                      <Form.Input
-                        field="name"
-                        noLabel={true}
-                        initValue={f.name}
-                        className="m-0"
-                        placeholder="Name"
-                      />
-                    </Col>
-                    <Col span={8}>
-                      <Form.Select
-                        className="w-full"
-                        field="type"
-                        noLabel={true}
-                        optionList={sqlDataTypes.map((value, index) => {
-                          return {
-                            label: value,
-                            value: value,
-                          };
-                        })}
-                        filter
-                        initValue={f.type}
-                        placeholder="Type"
-                      ></Form.Select>
-                    </Col>
-                    <Col span={3}>
-                      <Button
-                        type={f.notNull ? "primary" : "tertiary"}
-                        title="Nullable"
-                        theme={f.notNull ? "solid" : "light"}
-                        onClick={() =>
-                          updatedField(i, j, { notNull: !f.notNull })
-                        }
-                      >
-                        ?
-                      </Button>
-                    </Col>
-                    <Col span={3}>
-                      <Button
-                        type={f.primary ? "primary" : "tertiary"}
-                        title="Primary"
-                        theme={f.primary ? "solid" : "light"}
-                        onClick={() =>
-                          updatedField(i, j, { primary: !f.primary })
-                        }
-                        icon={<IconKeyStroked />}
-                      ></Button>
-                    </Col>
-                    <Col span={3}>
-                      <Popover
-                        content={
-                          <div className="px-1">
-                            <Form
-                              onChange={(value) =>
-                                updatedField(i, j, value.values)
-                              }
-                            >
-                              <Form.Input
-                                field="default"
-                                label="Default"
-                                initValue={f.default}
-                                trigger="blur"
-                                placeholder="Set default"
-                              />
-                              <Form.Input
-                                field="check"
-                                label="Check Expression"
-                                trigger="blur"
-                                placeholder="Set constraint"
-                                initValue={f.check}
-                              />
-                              <div className="flex justify-between items-center my-3">
-                                <label htmlFor="unique" className="font-medium">
-                                  Unique
-                                </label>
-                                <Checkbox
-                                  value="unique"
-                                  defaultChecked={f.unique}
-                                  onChange={(checkedValues) =>
-                                    updatedField(i, j, {
-                                      [checkedValues.target.value]:
-                                        checkedValues.target.checked,
-                                    })
-                                  }
-                                ></Checkbox>
-                              </div>
-                              <div className="flex justify-between items-center my-3">
-                                <label
-                                  htmlFor="increment"
-                                  className="font-medium"
-                                >
-                                  Autoincrement
-                                </label>
-                                <Checkbox
-                                  value="increment"
-                                  defaultChecked={f.increment}
-                                  onChange={(checkedValues) =>
-                                    updatedField(i, j, {
-                                      [checkedValues.target.value]:
-                                        checkedValues.target.checked,
-                                    })
-                                  }
-                                ></Checkbox>
-                              </div>
-                              <Form.TextArea
-                                field="comment"
-                                label="Comment"
-                                placeholder="Add comment"
-                                initValue={f.comment}
-                                autosize
-                                rows={2}
-                              />
-                            </Form>
-                            <Button
-                              icon={<IconDeleteStroked />}
-                              type="danger"
-                              block
-                              onClick={(ev) => {
-                                props.setTables((prev) => {
-                                  const updatedTables = [...prev];
-                                  const updatedFields = [
-                                    ...updatedTables[t.id].fields,
-                                  ];
-                                  updatedFields.splice(j, 1);
-                                  updatedTables[t.id].fields = [
-                                    ...updatedFields,
-                                  ];
-                                  return updatedTables;
-                                });
+                    <Row
+                      type="flex"
+                      justify="start"
+                      align="middle"
+                      gutter={6}
+                      className="hover:bg-slate-100"
+                    >
+                      <Col span={7}>
+                        <Form.Input
+                          field="name"
+                          noLabel={true}
+                          initValue={f.name}
+                          className="m-0"
+                          placeholder="Name"
+                        />
+                      </Col>
+                      <Col span={8}>
+                        <Form.Select
+                          className="w-full"
+                          field="type"
+                          noLabel={true}
+                          optionList={sqlDataTypes.map((value, index) => {
+                            return {
+                              label: value,
+                              value: value,
+                            };
+                          })}
+                          filter
+                          initValue={f.type}
+                          placeholder="Type"
+                        ></Form.Select>
+                      </Col>
+                      <Col span={3}>
+                        <Button
+                          type={f.notNull ? "primary" : "tertiary"}
+                          title="Nullable"
+                          theme={f.notNull ? "solid" : "light"}
+                          onClick={() =>
+                            updatedField(i, j, { notNull: !f.notNull })
+                          }
+                        >
+                          ?
+                        </Button>
+                      </Col>
+                      <Col span={3}>
+                        <Button
+                          type={f.primary ? "primary" : "tertiary"}
+                          title="Primary"
+                          theme={f.primary ? "solid" : "light"}
+                          onClick={() =>
+                            updatedField(i, j, { primary: !f.primary })
+                          }
+                          icon={<IconKeyStroked />}
+                        ></Button>
+                      </Col>
+                      <Col span={3}>
+                        <Popover
+                          content={
+                            <div className="px-1">
+                              <Form
+                                onChange={(value) =>
+                                  updatedField(i, j, value.values)
+                                }
+                              >
+                                <Form.Input
+                                  field="default"
+                                  label="Default"
+                                  initValue={f.default}
+                                  trigger="blur"
+                                  placeholder="Set default"
+                                />
+                                <Form.Input
+                                  field="check"
+                                  label="Check Expression"
+                                  trigger="blur"
+                                  placeholder="Set constraint"
+                                  initValue={f.check}
+                                />
+                                <div className="flex justify-between items-center my-3">
+                                  <label
+                                    htmlFor="unique"
+                                    className="font-medium"
+                                  >
+                                    Unique
+                                  </label>
+                                  <Checkbox
+                                    value="unique"
+                                    defaultChecked={f.unique}
+                                    onChange={(checkedValues) =>
+                                      updatedField(i, j, {
+                                        [checkedValues.target.value]:
+                                          checkedValues.target.checked,
+                                      })
+                                    }
+                                  ></Checkbox>
+                                </div>
+                                <div className="flex justify-between items-center my-3">
+                                  <label
+                                    htmlFor="increment"
+                                    className="font-medium"
+                                  >
+                                    Autoincrement
+                                  </label>
+                                  <Checkbox
+                                    value="increment"
+                                    defaultChecked={f.increment}
+                                    onChange={(checkedValues) =>
+                                      updatedField(i, j, {
+                                        [checkedValues.target.value]:
+                                          checkedValues.target.checked,
+                                      })
+                                    }
+                                  ></Checkbox>
+                                </div>
+                                <Form.TextArea
+                                  field="comment"
+                                  label="Comment"
+                                  placeholder="Add comment"
+                                  initValue={f.comment}
+                                  autosize
+                                  rows={2}
+                                />
+                              </Form>
+                              <Button
+                                icon={<IconDeleteStroked />}
+                                type="danger"
+                                block
+                                onClick={(ev) => {
+                                  props.setTables((prev) => {
+                                    const updatedTables = [...prev];
+                                    const updatedFields = [
+                                      ...updatedTables[t.id].fields,
+                                    ];
+                                    updatedFields.splice(j, 1);
+                                    updatedTables[t.id].fields = [
+                                      ...updatedFields,
+                                    ];
+                                    return updatedTables;
+                                  });
+                                }}
+                              >
+                                Delete
+                              </Button>
+                            </div>
+                          }
+                          trigger="click"
+                          position="rightTop"
+                          showArrow
+                        >
+                          <Button type="tertiary" icon={<IconMore />}></Button>
+                        </Popover>
+                      </Col>
+                    </Row>
+                  </Form>
+                ))}
+                {t.indices.length > 0 && (
+                  <Card
+                    bodyStyle={{ padding: "4px" }}
+                    style={{ marginTop: "12px", marginBottom: "12px" }}
+                    headerLine={false}
+                  >
+                    <Collapse
+                      activeKey={indexActiveKey}
+                      onChange={(itemKey) => setIndexActiveKey(itemKey)}
+                    >
+                      <Collapse.Panel header="Indices" itemKey="1" accordion>
+                        {t.indices.map((idx, k) => (
+                          <div
+                            className="flex justify-between items-center mb-2"
+                            key={k}
+                          >
+                            <Select
+                              placeholder="Select fields"
+                              multiple
+                              optionList={t.fields.map((e) => ({
+                                value: e.name,
+                                label: e.name,
+                              }))}
+                              className="w-full"
+                              defaultValue={idx.fields}
+                              onChange={(value) => {
+                                const updatedTables = [...props.tables];
+                                const updatedIndices = [...t.indices];
+                                updatedIndices[k] = {
+                                  name: `${value.join("_")}_index`,
+                                  fields: [...value],
+                                };
+                                updatedTables[i] = {
+                                  ...t,
+                                  indices: [...updatedIndices],
+                                };
+                                props.setTables(updatedTables);
                               }}
+                            />
+                            <Popover
+                              content={
+                                <div className="px-1">
+                                  <Form>
+                                    <Form.Input
+                                      field="name"
+                                      label="Name"
+                                      initValue={idx.name}
+                                      trigger="blur"
+                                      placeholder="Index name"
+                                    />
+                                  </Form>
+                                  <Button
+                                    icon={<IconDeleteStroked />}
+                                    type="danger"
+                                    block
+                                    onClick={() => {
+                                      const updatedTables = [...props.tables];
+                                      const updatedIndices = [...t.indices];
+                                      updatedIndices.splice(k, 1);
+                                      updatedTables[i] = {
+                                        ...t,
+                                        indices: [...updatedIndices],
+                                      };
+                                      props.setTables(updatedTables);
+                                    }}
+                                  >
+                                    Delete
+                                  </Button>
+                                </div>
+                              }
+                              trigger="click"
+                              position="rightTop"
+                              showArrow
                             >
-                              Delete
-                            </Button>
+                              <Button
+                                icon={<IconMore />}
+                                type="tertiary"
+                                style={{ marginLeft: "12px" }}
+                              ></Button>
+                            </Popover>
                           </div>
-                        }
-                        trigger="click"
-                        position="rightTop"
-                        showArrow
-                      >
-                        <Button type="tertiary" icon={<IconMore />}></Button>
-                      </Popover>
-                    </Col>
-                  </Row>
-                </Form>
-              ))}
-              {t.indices.length > 0 && (
+                        ))}
+                      </Collapse.Panel>
+                    </Collapse>
+                  </Card>
+                )}
                 <Card
                   bodyStyle={{ padding: "4px" }}
                   style={{ marginTop: "12px", marginBottom: "12px" }}
                   headerLine={false}
                 >
-                  <Collapse
-                    activeKey={indexActiveKey}
-                    onChange={(itemKey) => setIndexActiveKey(itemKey)}
-                  >
-                    <Collapse.Panel header="Indices" itemKey="1" accordion>
-                      {t.indices.map((idx, k) => (
-                        <div
-                          className="flex justify-between items-center mb-2"
-                          key={k}
-                        >
-                          <Select
-                            placeholder="Select fields"
-                            multiple
-                            optionList={t.fields.map((e) => ({
-                              value: e.name,
-                              label: e.name,
-                            }))}
-                            className="w-full"
-                            defaultValue={idx.fields}
-                            onChange={(value) => {
-                              const updatedTables = [...props.tables];
-                              const updatedIndices = [...t.indices];
-                              updatedIndices[k] = {
-                                name: `${value.join("_")}_index`,
-                                fields: [...value],
-                              };
-                              updatedTables[i] = {
-                                ...t,
-                                indices: [...updatedIndices],
-                              };
-                              props.setTables(updatedTables);
-                            }}
-                          />
-                          <Popover
-                            content={
-                              <div className="px-1">
-                                <Form>
-                                  <Form.Input
-                                    field="name"
-                                    label="Name"
-                                    initValue={idx.name}
-                                    trigger="blur"
-                                    placeholder="Index name"
-                                  />
-                                </Form>
-                                <Button
-                                  icon={<IconDeleteStroked />}
-                                  type="danger"
-                                  block
-                                  onClick={() => {
-                                    const updatedTables = [...props.tables];
-                                    const updatedIndices = [...t.indices];
-                                    updatedIndices.splice(k, 1);
-                                    updatedTables[i] = {
-                                      ...t,
-                                      indices: [...updatedIndices],
-                                    };
-                                    props.setTables(updatedTables);
-                                  }}
-                                >
-                                  Delete
-                                </Button>
-                              </div>
-                            }
-                            trigger="click"
-                            position="rightTop"
-                            showArrow
-                          >
-                            <Button
-                              icon={<IconMore />}
-                              type="tertiary"
-                              style={{ marginLeft: "12px" }}
-                            ></Button>
-                          </Popover>
-                        </div>
-                      ))}
+                  <Collapse>
+                    <Collapse.Panel header="Comment" itemKey="1">
+                      <Form onChange={(value) => updateTable(i, value.values)}>
+                        <Form.TextArea
+                          field="comment"
+                          noLabel={true}
+                          showClear
+                          onClear={() => updateTable(i, { comment: "" })}
+                          initValue={t.comment}
+                          autosize
+                          placeholder="Add comment"
+                          rows={1}
+                        />
+                      </Form>
                     </Collapse.Panel>
                   </Collapse>
                 </Card>
-              )}
-              <Card
-                bodyStyle={{ padding: "4px" }}
-                style={{ marginTop: "12px", marginBottom: "12px" }}
-                headerLine={false}
-              >
-                <Collapse>
-                  <Collapse.Panel header="Comment" itemKey="1">
-                    <Form onChange={(value) => updateTable(i, value.values)}>
-                      <Form.TextArea
-                        field="comment"
-                        noLabel={true}
-                        showClear
-                        onClear={() => updateTable(i, { comment: "" })}
-                        initValue={t.comment}
-                        autosize
-                        placeholder="Add comment"
-                        rows={1}
-                      />
-                    </Form>
-                  </Collapse.Panel>
-                </Collapse>
-              </Card>
-              <Row gutter={6} className="mt-2">
-                <Col span={8}>
-                  <Popover
-                    content={
-                      <div>
-                        <div className="flex justify-between items-center p-2">
-                          <div className="font-medium">Theme</div>
-                          <Button
-                            type="tertiary"
-                            size="small"
-                            onClick={() =>
-                              updateTable(i, { color: defaultTableTheme })
-                            }
-                          >
-                            Clear
-                          </Button>
-                        </div>
-                        <hr />
-                        <div className="py-3">
-                          <div>
-                            {tableThemes
-                              .slice(0, Math.ceil(tableThemes.length / 2))
-                              .map((c) => (
-                                <button
-                                  key={c}
-                                  style={{ backgroundColor: c }}
-                                  className="p-3 rounded-full mx-1"
-                                  onClick={() => updateTable(i, { color: c })}
-                                >
-                                  {t.color === c ? (
+                <Row gutter={6} className="mt-2">
+                  <Col span={8}>
+                    <Popover
+                      content={
+                        <div>
+                          <div className="flex justify-between items-center p-2">
+                            <div className="font-medium">Theme</div>
+                            <Button
+                              type="tertiary"
+                              size="small"
+                              onClick={() =>
+                                updateTable(i, { color: defaultTableTheme })
+                              }
+                            >
+                              Clear
+                            </Button>
+                          </div>
+                          <hr />
+                          <div className="py-3">
+                            <div>
+                              {tableThemes
+                                .slice(0, Math.ceil(tableThemes.length / 2))
+                                .map((c) => (
+                                  <button
+                                    key={c}
+                                    style={{ backgroundColor: c }}
+                                    className="p-3 rounded-full mx-1"
+                                    onClick={() => updateTable(i, { color: c })}
+                                  >
+                                    {t.color === c ? (
+                                      <IconCheckboxTick
+                                        style={{ color: "white" }}
+                                      />
+                                    ) : (
+                                      <IconCheckboxTick style={{ color: c }} />
+                                    )}
+                                  </button>
+                                ))}
+                            </div>
+                            <div className="mt-3">
+                              {tableThemes
+                                .slice(Math.ceil(tableThemes.length / 2))
+                                .map((c) => (
+                                  <button
+                                    key={c}
+                                    style={{ backgroundColor: c }}
+                                    className="p-3 rounded-full mx-1"
+                                    onClick={() => updateTable(i, { color: c })}
+                                  >
                                     <IconCheckboxTick
-                                      style={{ color: "white" }}
+                                      style={{
+                                        color: t.color === c ? "white" : c,
+                                      }}
                                     />
-                                  ) : (
-                                    <IconCheckboxTick style={{ color: c }} />
-                                  )}
-                                </button>
-                              ))}
-                          </div>
-                          <div className="mt-3">
-                            {tableThemes
-                              .slice(Math.ceil(tableThemes.length / 2))
-                              .map((c) => (
-                                <button
-                                  key={c}
-                                  style={{ backgroundColor: c }}
-                                  className="p-3 rounded-full mx-1"
-                                  onClick={() => updateTable(i, { color: c })}
-                                >
-                                  <IconCheckboxTick
-                                    style={{
-                                      color: t.color === c ? "white" : c,
-                                    }}
-                                  />
-                                </button>
-                              ))}
+                                  </button>
+                                ))}
+                            </div>
                           </div>
                         </div>
-                      </div>
-                    }
-                    trigger="click"
-                    position="bottomLeft"
-                    showArrow
-                  >
+                      }
+                      trigger="click"
+                      position="bottomLeft"
+                      showArrow
+                    >
+                      <Button
+                        type="tertiary"
+                        icon={<IconColorPalette />}
+                      ></Button>
+                    </Popover>
+                  </Col>
+                  <Col span={7}>
                     <Button
-                      type="tertiary"
-                      icon={<IconColorPalette />}
+                      block
+                      onClick={() => {
+                        setIndexActiveKey("1");
+                        const updatedTables = [...props.tables];
+                        updatedTables[i] = {
+                          ...t,
+                          indices: [
+                            ...t.indices,
+                            { name: `index_${t.indices.length}`, fields: [] },
+                          ],
+                        };
+                        props.setTables(updatedTables);
+                      }}
+                    >
+                      Add index
+                    </Button>
+                  </Col>
+                  <Col span={6}>
+                    <Button
+                      onClick={() => {
+                        const updatedTables = [...props.tables];
+                        updatedTables[i].fields = [
+                          ...updatedTables[i].fields,
+                          {
+                            name: "",
+                            type: "",
+                            default: "",
+                            primary: false,
+                            unique: false,
+                            notNull: false,
+                            increment: false,
+                            comment: "",
+                          },
+                        ];
+                        props.setTables(updatedTables);
+                      }}
+                      block
+                    >
+                      Add field
+                    </Button>
+                  </Col>
+                  <Col span={3}>
+                    <Button
+                      icon={<IconDeleteStroked />}
+                      type="danger"
+                      onClick={() => {
+                        Toast.success(`Table deleted!`);
+                        props.setTables((prev) =>
+                          prev
+                            .filter((e) => e.id !== i)
+                            .map((e, idx) => ({ ...e, id: idx }))
+                        );
+                        setTableActiveKey("");
+                      }}
                     ></Button>
-                  </Popover>
-                </Col>
-                <Col span={7}>
-                  <Button
-                    block
-                    onClick={() => {
-                      setIndexActiveKey("1");
-                      const updatedTables = [...props.tables];
-                      updatedTables[i] = {
-                        ...t,
-                        indices: [
-                          ...t.indices,
-                          { name: `index_${t.indices.length}`, fields: [] },
-                        ],
-                      };
-                      props.setTables(updatedTables);
-                    }}
-                  >
-                    Add index
-                  </Button>
-                </Col>
-                <Col span={6}>
-                  <Button
-                    onClick={() => {
-                      const updatedTables = [...props.tables];
-                      updatedTables[i].fields = [
-                        ...updatedTables[i].fields,
-                        {
-                          name: "",
-                          type: "",
-                          default: "",
-                          primary: false,
-                          unique: false,
-                          notNull: false,
-                          increment: false,
-                          comment: "",
-                        },
-                      ];
-                      props.setTables(updatedTables);
-                    }}
-                    block
-                  >
-                    Add field
-                  </Button>
-                </Col>
-                <Col span={3}>
-                  <Button
-                    icon={<IconDeleteStroked />}
-                    type="danger"
-                    onClick={() => {
-                      Toast.success(`Table deleted!`);
-                      props.setTables((prev) =>
-                        prev
-                          .filter((e) => e.id !== i)
-                          .map((e, idx) => ({ ...e, id: idx }))
-                      );
-                      setTableActiveKey("");
-                    }}
-                  ></Button>
-                </Col>
-              </Row>
-            </Collapse.Panel>
-          </div>
-        ))}
+                  </Col>
+                </Row>
+              </Collapse.Panel>
+            </div>
+          ))
+        )}
       </Collapse>
     </>
   );