diff --git a/src/components/control_panel.jsx b/src/components/control_panel.jsx
index cd03962..7462e9f 100644
--- a/src/components/control_panel.jsx
+++ b/src/components/control_panel.jsx
@@ -55,7 +55,6 @@ import { useHotkeys } from "react-hotkeys-hook";
 import { Validator } from "jsonschema";
 import { areaSchema, noteSchema, tableSchema } from "../schemas";
 import { Editor } from "@monaco-editor/react";
-// import { Parser } from "node-sql-parser";
 
 export default function ControlPanel(props) {
   const MODAL = {
@@ -732,15 +731,6 @@ export default function ControlPanel(props) {
                 tables: tables,
                 references: relationships,
               });
-              // try{
-              //   const parser = new Parser();
-              //   const ast = parser.astify(src);
-              //   console.log(ast);
-              //   const sql = parser.sqlify(ast);
-              //   console.log(sql);
-              // } catch(e){
-              //   console.log(e)
-              // }
               setExportData((prev) => ({
                 ...prev,
                 data: src,
diff --git a/src/components/notes_overview.jsx b/src/components/notes_overview.jsx
index 5ea7fe2..d8a5002 100644
--- a/src/components/notes_overview.jsx
+++ b/src/components/notes_overview.jsx
@@ -8,6 +8,7 @@ import {
   AutoComplete,
   TextArea,
   Popover,
+  Input,
   Toast,
 } from "@douyinfe/semi-ui";
 import {
@@ -102,6 +103,30 @@ export default function NotesOverview(props) {
               id={`scroll_note_${n.id}`}
               key={n.id}
             >
+              <div className="flex items-center mb-2">
+                <div className="font-semibold me-2">Title:</div>
+                <Input
+                  value={n.title}
+                  placeholder="Title"
+                  onChange={(value) => updateNote(n.id, { title: value })}
+                  onFocus={(e) => setEditField({ title: e.target.value })}
+                  onBlur={(e) => {
+                    if (e.target.value === editField.title) return;
+                    setUndoStack((prev) => [
+                      ...prev,
+                      {
+                        action: Action.EDIT,
+                        element: ObjectType.NOTE,
+                        nid: n.id,
+                        undo: editField,
+                        redo: { title: e.target.value },
+                        message: `Edit note title to "${e.target.name}"`,
+                      },
+                    ]);
+                    setRedoStack([]);
+                  }}
+                />
+              </div>
               <div className="flex justify-between align-top">
                 <TextArea
                   placeholder="Add content"
diff --git a/src/components/table_overview.jsx b/src/components/table_overview.jsx
index f5f917e..2bc1b43 100644
--- a/src/components/table_overview.jsx
+++ b/src/components/table_overview.jsx
@@ -134,8 +134,34 @@ export default function TableOverview(props) {
           tables.map((t, i) => (
             <div id={`scroll_table_${t.id}`} key={t.id}>
               <Collapse.Panel header={<div>{t.name}</div>} itemKey={`${t.id}`}>
+                <div className="flex items-center mb-2">
+                  <div className="text-md font-semibold">Name: </div>
+                  <Input
+                    value={t.name}
+                    placeholder="Name"
+                    className="ms-2"
+                    onChange={(value) => updateTable(t.id, { name: value })}
+                    onFocus={(e) => setEditField({ name: e.target.value })}
+                    onBlur={(e) => {
+                      if (e.target.value === editField.name) return;
+                      setUndoStack((prev) => [
+                        ...prev,
+                        {
+                          action: Action.EDIT,
+                          element: ObjectType.TABLE,
+                          component: "self",
+                          tid: t.id,
+                          undo: editField,
+                          redo: { name: e.target.value },
+                          message: `Edit table name to ${e.target.value}`,
+                        },
+                      ]);
+                      setRedoStack([]);
+                    }}
+                  />
+                </div>
                 {t.fields.map((f, j) => (
-                  <Row gutter={6} key={j} className="hover-1 mb-2">
+                  <Row gutter={6} key={j} className="hover-1 my-2">
                     <Col span={7}>
                       <Input
                         value={f.name}
diff --git a/src/components/todo.jsx b/src/components/todo.jsx
index b6064db..77be231 100644
--- a/src/components/todo.jsx
+++ b/src/components/todo.jsx
@@ -68,6 +68,7 @@ export default function Todo() {
   };
 
   const sort = (s) => {
+    setActiveTask(-1);
     switch (s) {
       case SortOrder.ORIGINAL:
         setTasks((prev) => prev.sort((a, b) => a.order - b.order));