chore(main): release 1.13.1 (#735 )

fix: general performance improvements on canvas (#751 )
fix: resolve unresponsive cursor and input glitches when editing field comments (#749 )
2025-10-24 16:43:59 +00:00 · 2025-07-05 18:14:47 +03:00 · 2025-07-04 12:23:29 +03:00 · 2025-07-02 20:33:52 +03:00 · 2025-06-24 12:46:56 +03:00 · 2025-06-11 21:50:42 +03:00
285 changed files with 40462 additions and 18305 deletions
--- a/.github/workflows/cla.yaml
+++ b/.github/workflows/cla.yaml
@@ -0,0 +1,33 @@
+name: "CLA Assistant"
+on:
+  issue_comment:
+    types: [created]
+  pull_request_target:
+    types: [opened,closed,synchronize]
+
+permissions:
+  actions: write
+  contents: write # this can be 'read' if the signatures are in remote repository
+  pull-requests: write
+  statuses: write
+
+
+jobs:
+  CLAAssistant:
+    runs-on: ubuntu-latest
+    steps:
+      - name: "CLA Assistant"
+        if: (github.event.comment.body == 'recheck' || github.event.comment.body == 'I have read the CLA Document and I hereby sign the CLA') || github.event_name == 'pull_request_target'
+        # Beta Release
+        uses: contributor-assistant/github-action@v2.6.1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          PERSONAL_ACCESS_TOKEN: ${{ secrets.CHARTDB_CLA_SIGNATURES_PAT }}
+        with:
+          remote-organization-name: 'chartdb'
+          remote-repository-name: 'cla-signatures'
+          path-to-signatures: 'signatures/version1/cla.json'
+          path-to-document: 'https://github.com/chartdb/chartdb/blob/main/CLA.md'
+          # branch should not be protected
+          branch: 'main'
+          allowlist: 
--- a/.github/workflows/publish.yaml
+++ b/.github/workflows/publish.yaml
@@ -32,7 +32,7 @@ jobs:
          registry: ${{ env.REGISTRY }}
          username: ${{ github.actor }}
          password: ${{ secrets.GITHUB_TOKEN }}
-    
+
      - name: Install dependencies
        run: npm ci

@@ -42,6 +42,12 @@ jobs:
      - name: Build project
        run: npm run build

+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
      - name: Extract metadata (tags, labels) for Docker
        id: meta
        uses: docker/metadata-action@v4
@@ -50,10 +56,11 @@ jobs:
          tags: |
            type=semver,pattern={{version}}

-      - name: Build and push Docker image
+      - name: Build and push multi-arch Docker image
        uses: docker/build-push-action@v6
        with:
          context: .
          push: true
+          platforms: linux/amd64,linux/arm64
          tags: ${{ steps.meta.outputs.tags }}
          labels: ${{ steps.meta.outputs.labels }}
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,237 @@
 # Changelog

+## [1.13.1](https://github.com/chartdb/chartdb/compare/v1.13.0...v1.13.1) (2025-07-04)
+
+
+### Bug Fixes
+
+* **custom_types:** fix display custom types in select box ([#737](https://github.com/chartdb/chartdb/issues/737)) ([24be28a](https://github.com/chartdb/chartdb/commit/24be28a662c48fc5bc62e76446b9669d83d7d3e0))
+* **dbml-editor:** for some cases that the dbml had issues ([#739](https://github.com/chartdb/chartdb/issues/739)) ([e0ff198](https://github.com/chartdb/chartdb/commit/e0ff198c3fd416498dac5680bb323ec88c54b65c))
+* **dbml:** Filter duplicate tables at diagram level before export dbml ([#746](https://github.com/chartdb/chartdb/issues/746)) ([d429128](https://github.com/chartdb/chartdb/commit/d429128e65aa28c500eac2487356e4869506e948))
+* **export-sql:** conditionally show generic option and reorder by diagram type ([#708](https://github.com/chartdb/chartdb/issues/708)) ([c6118e0](https://github.com/chartdb/chartdb/commit/c6118e0cdb0e5caaf73447d33db2fde1a98efe60))
+* general performance improvements on canvas ([#751](https://github.com/chartdb/chartdb/issues/751)) ([4fcc49d](https://github.com/chartdb/chartdb/commit/4fcc49d49a76a4b886ffd6cf0b40cf2fc49952ec))
+* **import-database:** for custom types query to import supabase & timescale ([#745](https://github.com/chartdb/chartdb/issues/745)) ([2fce832](https://github.com/chartdb/chartdb/commit/2fce8326b67b751d38dd34f409fea574449d0298))
+* **import-db:** fix mariadb import ([#740](https://github.com/chartdb/chartdb/issues/740)) ([7d063b9](https://github.com/chartdb/chartdb/commit/7d063b905f19f51501468bd0bd794a25cf65e1be))
+* **performance:** improve storage provider performance ([#734](https://github.com/chartdb/chartdb/issues/734)) ([c6788b4](https://github.com/chartdb/chartdb/commit/c6788b49173d9cce23571daeb460285cb7cffb11))
+* resolve unresponsive cursor and input glitches when editing field comments ([#749](https://github.com/chartdb/chartdb/issues/749)) ([d15985e](https://github.com/chartdb/chartdb/commit/d15985e3999a0cd54213b2fb08c55d48a1b8b3b2))
+* **table name:** updates table name value when its updated from canvas/sidebar ([#716](https://github.com/chartdb/chartdb/issues/716)) ([8b86e1c](https://github.com/chartdb/chartdb/commit/8b86e1c22992aaadcce7ad5fc1d267c5a57a99f0))
+
+## [1.13.0](https://github.com/chartdb/chartdb/compare/v1.12.0...v1.13.0) (2025-05-28)
+
+
+### Features
+
+* **custom-types:** add enums and composite types for Postgres ([#714](https://github.com/chartdb/chartdb/issues/714)) ([c3904d9](https://github.com/chartdb/chartdb/commit/c3904d9fdd63ef5b76a44e73582d592f2c418687))
+* **export-sql:** add custom types to export sql script ([#720](https://github.com/chartdb/chartdb/issues/720)) ([cad155e](https://github.com/chartdb/chartdb/commit/cad155e6550f171b8faecbfdff27032798ecea43))
+* **oracle:** support oracle in ChartDB ([#709](https://github.com/chartdb/chartdb/issues/709)) ([765a1c4](https://github.com/chartdb/chartdb/commit/765a1c43547a29bd3428c942c7afb56f63aaf046))
+
+
+### Bug Fixes
+
+* **canvas:** prevent canvas blink and lag on field edit ([#723](https://github.com/chartdb/chartdb/issues/723)) ([cd44346](https://github.com/chartdb/chartdb/commit/cd443466c7952f1cdc3739645c12130b9231e3a1))
+* **canvas:** prevent canvas blink and lag on primary field edit ([#725](https://github.com/chartdb/chartdb/issues/725)) ([4477b1c](https://github.com/chartdb/chartdb/commit/4477b1ca1fe6b282b604739a23e31181acd4d7bc))
+* **custom_types:** fix custom types on storage provider ([#721](https://github.com/chartdb/chartdb/issues/721)) ([beb0151](https://github.com/chartdb/chartdb/commit/beb015194f917c0ba644458410162d2b7599918c))
+* **custom_types:** fix custom types on storage provider ([#722](https://github.com/chartdb/chartdb/issues/722)) ([18012dd](https://github.com/chartdb/chartdb/commit/18012ddab1718bcce3432aea626adf6fc9be25d9))
+* **custom-types:** fetch directly via the smart-query the custom types ([#729](https://github.com/chartdb/chartdb/issues/729)) ([cf1e141](https://github.com/chartdb/chartdb/commit/cf1e141837eda77d717ad87489ce9946b688e226))
+* **dbml-editor:** export comments with schema if existsed ([#728](https://github.com/chartdb/chartdb/issues/728)) ([73f542a](https://github.com/chartdb/chartdb/commit/73f542adad2d66a1e84fc656a0c34d9b1f39f33c))
+* **dbml-editor:** fix export dbml - to show enums ([#724](https://github.com/chartdb/chartdb/issues/724)) ([3894a22](https://github.com/chartdb/chartdb/commit/3894a221745d32c13160bedcb1bcf53d89897698))
+* **import-database:** remove the default fetch from import database ([#718](https://github.com/chartdb/chartdb/issues/718)) ([0d11b0c](https://github.com/chartdb/chartdb/commit/0d11b0c55a94a12a764785cfdcf2ba10437241d6))
+* **menu:** add oracle to import menu ([#713](https://github.com/chartdb/chartdb/issues/713)) ([aee5779](https://github.com/chartdb/chartdb/commit/aee577998342eb4a2b05b3e03181992a435712d8))
+* **relationship:** fix creating of relationships ([#732](https://github.com/chartdb/chartdb/issues/732)) ([08b627c](https://github.com/chartdb/chartdb/commit/08b627cb8ca8fdf08d8ed2ff7e89104887deffb7))
+
+## [1.12.0](https://github.com/chartdb/chartdb/compare/v1.11.0...v1.12.0) (2025-05-20)
+
+
+### Features
+
+* **areas:** implement area to enable logical diagram arrangement ([#661](https://github.com/chartdb/chartdb/issues/661)) ([92e3ec7](https://github.com/chartdb/chartdb/commit/92e3ec785c91f7f19881c6d9d0692257af4651bc))
+* **examples:** update examples to have areas ([#677](https://github.com/chartdb/chartdb/issues/677)) ([21c9129](https://github.com/chartdb/chartdb/commit/21c9129e14670c744950cd43a5cbdd4b7d47c639))
+* **image-export:** add transparent and pattern export image toggles ([#671](https://github.com/chartdb/chartdb/issues/671)) ([6b8d637](https://github.com/chartdb/chartdb/commit/6b8d637b757b94630ecd7521b4a2c99634afae69))
+
+
+### Bug Fixes
+
+* add sorting based on how common the datatype on side-panel ([#651](https://github.com/chartdb/chartdb/issues/651)) ([3a1b8d1](https://github.com/chartdb/chartdb/commit/3a1b8d1db13d8dd7cb6cbe5ef8c5a60faccfeae5))
+* **canvas:** disable edit area name on read only ([#666](https://github.com/chartdb/chartdb/issues/666)) ([9402822](https://github.com/chartdb/chartdb/commit/9402822fa31f8cd94fe7971277839ee5425e29bf))
+* **canvas:** read only mode ([#665](https://github.com/chartdb/chartdb/issues/665)) ([651fe36](https://github.com/chartdb/chartdb/commit/651fe361fce61fe0577d2593f268131e9ca359d0))
+* **clone:** add areas to clone diagram ([#664](https://github.com/chartdb/chartdb/issues/664)) ([aee1713](https://github.com/chartdb/chartdb/commit/aee1713aecdd5e54228a16cbc3c4fc184661c56b))
+* **dbml-editor:** add inline refs mode + fix issues with DBML syntax ([#687](https://github.com/chartdb/chartdb/issues/687)) ([fbf2fe9](https://github.com/chartdb/chartdb/commit/fbf2fe919c2168c715f8231c0246753b19635f14))
+* **dbml-editor:** remove invalid fields before showing DBML + warning ([#683](https://github.com/chartdb/chartdb/issues/683)) ([5759241](https://github.com/chartdb/chartdb/commit/5759241573db204183c92599588d59f4aadaeafb))
+* **ddl-import:** fix datatypes when importing via ddl ([#696](https://github.com/chartdb/chartdb/issues/696)) ([a1144bb](https://github.com/chartdb/chartdb/commit/a1144bbf761a0daedd546b5d9b92300be59e0157))
+* **ddl:** inline fks ddl script ([#701](https://github.com/chartdb/chartdb/issues/701)) ([5849e45](https://github.com/chartdb/chartdb/commit/5849e4586c7c2a7cd86bd064df8916b130fc6234))
+* **dependencies:** hide icon when diagram has no dependencies ([#684](https://github.com/chartdb/chartdb/issues/684)) ([547149d](https://github.com/chartdb/chartdb/commit/547149da44db6d3d1e36d619d475fe52ff83a472))
+* **examples:** add loader ([#678](https://github.com/chartdb/chartdb/issues/678)) ([90a20dd](https://github.com/chartdb/chartdb/commit/90a20dd1b0277c4aee848fae5ed7a8347c5ba77d))
+* **examples:** fix clone examples ([#679](https://github.com/chartdb/chartdb/issues/679)) ([1778abb](https://github.com/chartdb/chartdb/commit/1778abb683d575af244edcd9a11f8d03f903f719))
+* **expanded-table:** persist expanded state across renders ([#707](https://github.com/chartdb/chartdb/issues/707)) ([54d5e96](https://github.com/chartdb/chartdb/commit/54d5e96a6db1e3abd52229a89ac503ff31885386))
+* **export image:** Fix usage of advanced options accordion ([#703](https://github.com/chartdb/chartdb/issues/703)) ([0ce85cf](https://github.com/chartdb/chartdb/commit/0ce85cf76b733f441f661608278c0db3122c5074))
+* **import-database:** auto detect when user try to import ddl script ([#698](https://github.com/chartdb/chartdb/issues/698)) ([5a5e64a](https://github.com/chartdb/chartdb/commit/5a5e64abef510cff28b3d8972520d0b9df29b024))
+* **import-database:** remove view_definition when importing via query ([#702](https://github.com/chartdb/chartdb/issues/702)) ([481ad3c](https://github.com/chartdb/chartdb/commit/481ad3c8449f469bf2b4418e4cdcc5b5608dfd36))
+* **import-json:** for broken json imports ([#697](https://github.com/chartdb/chartdb/issues/697)) ([2368e0d](https://github.com/chartdb/chartdb/commit/2368e0d2639021c4a11a8e5131d6af44fb6a47db))
+* **import-json:** simplify import script for fixing invalid JSON ([#681](https://github.com/chartdb/chartdb/issues/681)) ([226e6cf](https://github.com/chartdb/chartdb/commit/226e6cf1ce4d2edcfbee6a4de7ab0bc0cfeb17fe))
+* **import:** dbml and query - senetize before import ([#699](https://github.com/chartdb/chartdb/issues/699)) ([34c0a71](https://github.com/chartdb/chartdb/commit/34c0a7163f47bde7ddfaa8f044341e3c971b7e03))
+* **navbar:** open diagram directly from diagram icon ([#694](https://github.com/chartdb/chartdb/issues/694)) ([7db86dc](https://github.com/chartdb/chartdb/commit/7db86dcf8c97d34b056e4b5b85a0dda0438322ea))
+* **performance:** Only render visible ([#672](https://github.com/chartdb/chartdb/issues/672)) ([83c4333](https://github.com/chartdb/chartdb/commit/83c43332d497e9fc148a18b9cb4d9ecc85e44183))
+* **performance:** update field only when changed ([#685](https://github.com/chartdb/chartdb/issues/685)) ([d3ddf7c](https://github.com/chartdb/chartdb/commit/d3ddf7c51eaa4b9cddb961defd52d423f39f281d))
+* **postgres:** fix import of postgres fks ([#700](https://github.com/chartdb/chartdb/issues/700)) ([89e3cea](https://github.com/chartdb/chartdb/commit/89e3ceab00defaabc079e165fc90e92ca00722cf))
+* **schema:** add areas to diagram schema ([#663](https://github.com/chartdb/chartdb/issues/663)) ([ecfa148](https://github.com/chartdb/chartdb/commit/ecfa14829bcb1b813c7b154b4bd59f24e3032d8f))
+* **sql-script:** change ddl to be sql-script ([#710](https://github.com/chartdb/chartdb/issues/710)) ([487fb2d](https://github.com/chartdb/chartdb/commit/487fb2d5c17b70ac54aa17af9a2ac9aded6b40ba))
+* **table:** enhance field focus behavior to include table hover state ([#676](https://github.com/chartdb/chartdb/issues/676)) ([19d2d0b](https://github.com/chartdb/chartdb/commit/19d2d0bddd3a464995b79e97e6caf6e652836081))
+* **translations:** Add some translations for ru-RU language ([#690](https://github.com/chartdb/chartdb/issues/690)) ([97d01d7](https://github.com/chartdb/chartdb/commit/97d01d72014e473c42348c9ebcbe7a0b973d31aa))
+
+## [1.11.0](https://github.com/chartdb/chartdb/compare/v1.10.0...v1.11.0) (2025-04-17)
+
+
+### Features
+
+* add sidebar footer help buttons ([#650](https://github.com/chartdb/chartdb/issues/650)) ([fc46cbb](https://github.com/chartdb/chartdb/commit/fc46cbb8933761c7bac3604664f7de812f6f5b6b))
+* **import-sql:** import postgresql via SQL (DDL script) ([#639](https://github.com/chartdb/chartdb/issues/639)) ([f7a6e0c](https://github.com/chartdb/chartdb/commit/f7a6e0cb5e4921dd9540739f9da269858e7ca7be))
+
+
+### Bug Fixes
+
+* **import:** display query result formatted ([#644](https://github.com/chartdb/chartdb/issues/644)) ([caa81c2](https://github.com/chartdb/chartdb/commit/caa81c24a6535bc87129c38622aac5a62a6d479d))
+* **import:** strict parse of database metadata ([#635](https://github.com/chartdb/chartdb/issues/635)) ([0940d72](https://github.com/chartdb/chartdb/commit/0940d72d5d3726650213257639f24ba47e729854))
+* **mobile:** fix create diagram modal on mobile ([#646](https://github.com/chartdb/chartdb/issues/646)) ([25c4b42](https://github.com/chartdb/chartdb/commit/25c4b4253849575d7a781ed197281e2a35e7184a))
+* **mysql-ddl:** update the script to import - for create fks ([#642](https://github.com/chartdb/chartdb/issues/642)) ([cf81253](https://github.com/chartdb/chartdb/commit/cf81253535ca5a3b8a65add78287c1bdb283a1c7))
+* **performance:** Import deps dynamically ([#652](https://github.com/chartdb/chartdb/issues/652)) ([e3cb627](https://github.com/chartdb/chartdb/commit/e3cb62788c13f149e35e1a5020191bd43d14b52f))
+* remove unused links from help menu ([#623](https://github.com/chartdb/chartdb/issues/623)) ([85275e5](https://github.com/chartdb/chartdb/commit/85275e5dd6e7845f06f682eeceda7932fc87e875))
+* **sidebar:** turn sidebar to responsive for mobile ([#658](https://github.com/chartdb/chartdb/issues/658)) ([ce2389f](https://github.com/chartdb/chartdb/commit/ce2389f135d399d82c9848335d31174bac8a3791))
+
+## [1.10.0](https://github.com/chartdb/chartdb/compare/v1.9.0...v1.10.0) (2025-03-25)
+
+
+### Features
+
+* **cloudflare-d1:** add support to cloudflare-d1 + wrangler cli ([#632](https://github.com/chartdb/chartdb/issues/632)) ([794f226](https://github.com/chartdb/chartdb/commit/794f2262092fbe36e27e92220221ed98cb51ae37))
+
+
+### Bug Fixes
+
+* **dbml-editor:** dealing with dbml editor for non-generic db-type ([#624](https://github.com/chartdb/chartdb/issues/624)) ([14de30b](https://github.com/chartdb/chartdb/commit/14de30b7aaa0ccaca8372f0213b692266d53f0de))
+* **export-sql:** move from AI sql-export for MySQL&MariaDB to deterministic script ([#628](https://github.com/chartdb/chartdb/issues/628)) ([2fbf347](https://github.com/chartdb/chartdb/commit/2fbf3476b87f1177af17de8242a74d195dae5f35))
+* **export-sql:** move from AI sql-export for postgres to deterministic script ([#626](https://github.com/chartdb/chartdb/issues/626)) ([18f228c](https://github.com/chartdb/chartdb/commit/18f228ca1d5a6c6056cb7c3bfc24d04ec470edf1))
+* **export-sql:** move from AI sql-export for sqlite to deterministic script ([#627](https://github.com/chartdb/chartdb/issues/627)) ([897ac60](https://github.com/chartdb/chartdb/commit/897ac60a829a00e9453d670cceeb2282e9e93f1c))
+* **sidebar:** add sidebar for diagram objects ([#618](https://github.com/chartdb/chartdb/issues/618)) ([63b5ba0](https://github.com/chartdb/chartdb/commit/63b5ba0bb9934c4e5c5d0d1b6f995afbbd3acf36))
+* **sidebar:** opens sidepanel in case its closed and click on sidebar ([#620](https://github.com/chartdb/chartdb/issues/620)) ([3faa39e](https://github.com/chartdb/chartdb/commit/3faa39e7875d836dfe526d94a10f8aed070ac1c1))
+
+## [1.9.0](https://github.com/chartdb/chartdb/compare/v1.8.1...v1.9.0) (2025-03-13)
+
+
+### Features
+
+* **canvas:** highlight the Show-All button when No-Tables are visible in the canvas ([#612](https://github.com/chartdb/chartdb/issues/612)) ([62beb68](https://github.com/chartdb/chartdb/commit/62beb68fa1ec22ccd4fe5e59a8ceb9d3e8f6d374))
+* **chart max length:** add support for edit char max length ([#613](https://github.com/chartdb/chartdb/issues/613)) ([09b1275](https://github.com/chartdb/chartdb/commit/09b12754757b9625ca287d91a92cf0d83c9e2b89))
+* **chart max length:** enable edit length from data type select box ([#616](https://github.com/chartdb/chartdb/issues/616)) ([bd67ccf](https://github.com/chartdb/chartdb/commit/bd67ccfbcf66b919453ca6c0bfd71e16772b3d8e))
+
+
+### Bug Fixes
+
+* **cardinality:** set true as default ([#583](https://github.com/chartdb/chartdb/issues/583)) ([2939320](https://github.com/chartdb/chartdb/commit/2939320a15a9ccd9eccfe46c26e04ca1edca2420))
+* **performance:** Optimize performance of field comments editing ([#610](https://github.com/chartdb/chartdb/issues/610)) ([5dd7fe7](https://github.com/chartdb/chartdb/commit/5dd7fe75d1b0378ba406c75183c5e2356730c3b4))
+* remove Buckle dialog ([#617](https://github.com/chartdb/chartdb/issues/617)) ([502472b](https://github.com/chartdb/chartdb/commit/502472b08342be425e66e2b6c94e5fe37ba14aa9))
+* **shorcuts:** add shortcut to toggle the theme ([#602](https://github.com/chartdb/chartdb/issues/602)) ([a643852](https://github.com/chartdb/chartdb/commit/a6438528375ab54d3ec7d80ac6b6ddd65ea8cf1e))
+
+## [1.8.1](https://github.com/chartdb/chartdb/compare/v1.8.0...v1.8.1) (2025-03-02)
+
+
+### Bug Fixes
+
+* **add-docs:** add link to ChartDB documentation ([#597](https://github.com/chartdb/chartdb/issues/597)) ([b55d631](https://github.com/chartdb/chartdb/commit/b55d631146ff3a1f7d63c800d44b5d3d3a223c76))
+* components config ([#591](https://github.com/chartdb/chartdb/issues/591)) ([cbc4e85](https://github.com/chartdb/chartdb/commit/cbc4e85a14e24a43f9ff470518f8fe2845046bdb))
+* **docker config:** Environment Variable Handling and Configuration Logic ([#605](https://github.com/chartdb/chartdb/issues/605)) ([d6919f3](https://github.com/chartdb/chartdb/commit/d6919f30336cc846fe6e6505b5a5278aa14dcce6))
+* **empty-state:** show diff buttons on import-dbml when triggered by empty ([#574](https://github.com/chartdb/chartdb/issues/574)) ([4834247](https://github.com/chartdb/chartdb/commit/48342471ac231922f2ca4455b74a9879127a54f1))
+* **i18n:** add [FR] translation ([#579](https://github.com/chartdb/chartdb/issues/579)) ([ab89bad](https://github.com/chartdb/chartdb/commit/ab89bad6d544ba4c339a3360eeec7d29e5579511))
+* **img-export:** add ChartDB watermark to exported image ([#588](https://github.com/chartdb/chartdb/issues/588)) ([b935b7f](https://github.com/chartdb/chartdb/commit/b935b7f25111d5f72b7f8d7c552a4ea5974f791e))
+* **import-mssql:** fix import/export scripts to handle data correctly ([#598](https://github.com/chartdb/chartdb/issues/598)) ([e06eb2a](https://github.com/chartdb/chartdb/commit/e06eb2a48e6bd3bcf352f4bcf128214c7da4c1b1))
+* **menu-backup:** update export to be backup ([#590](https://github.com/chartdb/chartdb/issues/590)) ([26a0a5b](https://github.com/chartdb/chartdb/commit/26a0a5b550ef5e47e89b00d0232dc98936f63f23))
+* open create new diagram when there is no diagram ([#594](https://github.com/chartdb/chartdb/issues/594)) ([ef11892](https://github.com/chartdb/chartdb/commit/ef118929ad5d5cbfae0290061bd8ea30bd262496))
+* **open diagram:** in case there is no diagram, opens the dialog ([#593](https://github.com/chartdb/chartdb/issues/593)) ([68f4819](https://github.com/chartdb/chartdb/commit/68f48190c93f155398cca15dd7af2a025de2d45f))
+* **side-panel:** simplify how to add field and index ([#573](https://github.com/chartdb/chartdb/issues/573)) ([a1c0cf1](https://github.com/chartdb/chartdb/commit/a1c0cf102add4fb235e913e75078139b3961341b))
+* **sql_server_export:** use sql server export ([#600](https://github.com/chartdb/chartdb/issues/600)) ([56382a9](https://github.com/chartdb/chartdb/commit/56382a9fdc5e3044f8811873dd8a79f590771896))
+* **sqlite-import:** import nuallable columns correctly + add json type ([#571](https://github.com/chartdb/chartdb/issues/571)) ([deb2184](https://github.com/chartdb/chartdb/commit/deb218423f77f0c0945a93005696456f62b00ce3))
+
+## [1.8.0](https://github.com/chartdb/chartdb/compare/v1.7.0...v1.8.0) (2025-02-13)
+
+
+### Features
+
+* **dbml-import:** add error highlighting for dbml imports ([#556](https://github.com/chartdb/chartdb/issues/556)) ([190e4f4](https://github.com/chartdb/chartdb/commit/190e4f4ffa834fa621f264dc608ca3f3b393a331))
+* **docker image:** add support for custom inference servers ([#543](https://github.com/chartdb/chartdb/issues/543)) ([1878083](https://github.com/chartdb/chartdb/commit/1878083056ea4db7a05cdeeb38a4f7b9f5f95bd1))
+
+
+### Bug Fixes
+
+* **canvas:** add right-click option to create relationships ([#568](https://github.com/chartdb/chartdb/issues/568)) ([e993f15](https://github.com/chartdb/chartdb/commit/e993f1549c4c86bb9e7e36062db803ba6613b3b3))
+* **canvas:** locate table from canvas ([#560](https://github.com/chartdb/chartdb/issues/560)) ([dc404c9](https://github.com/chartdb/chartdb/commit/dc404c9d7ee272c93aac69646bac859829a5234e))
+* **docker:** add option to hide popups ([#580](https://github.com/chartdb/chartdb/issues/580)) ([a96c2e1](https://github.com/chartdb/chartdb/commit/a96c2e107838d2dc13b586923fd9dbe06598cdd8))
+* **export-sql:** show create script for only filtered schemas ([#570](https://github.com/chartdb/chartdb/issues/570)) ([85fd14f](https://github.com/chartdb/chartdb/commit/85fd14fa02bb2879c36bba53369dbf2e7fa578d4))
+* **i18n:** fix Ukrainian ([#554](https://github.com/chartdb/chartdb/issues/554)) ([7b62719](https://github.com/chartdb/chartdb/commit/7b6271962a99bfe5ffbd0176e714c76368ef5c41))
+* **import dbml:** add import for indexes ([#566](https://github.com/chartdb/chartdb/issues/566)) ([0db67ea](https://github.com/chartdb/chartdb/commit/0db67ea42a5f9585ca1d246db7a7ff0239bec0ba))
+* **import-query:** improve the cleanup for messy json input ([#562](https://github.com/chartdb/chartdb/issues/562)) ([93d59f8](https://github.com/chartdb/chartdb/commit/93d59f8887765098d040a3184aaee32112f67267))
+* **index unique:** extract unique toggle for faster editing ([#559](https://github.com/chartdb/chartdb/issues/559)) ([dd4324d](https://github.com/chartdb/chartdb/commit/dd4324d64f7638ada5c022a2ab38bd8e6986af25))
+* **mssql-import:** improve script readability by adding edition comment ([#572](https://github.com/chartdb/chartdb/issues/572)) ([be65328](https://github.com/chartdb/chartdb/commit/be65328f24b0361638b9e2edb39eaa9906e77f67))
+* **realtionships section:** add the schema to source/target tables ([#561](https://github.com/chartdb/chartdb/issues/561)) ([b9e621b](https://github.com/chartdb/chartdb/commit/b9e621bd680730a0ffbf1054d735bfa418711cae))
+* **sqlserver-import:** open ssms guide when max chars ([#565](https://github.com/chartdb/chartdb/issues/565)) ([9c485b3](https://github.com/chartdb/chartdb/commit/9c485b3b01a131bf551c7e95916b0c416f6aa0b5))
+* **table actions:** fix size of table actions ([#578](https://github.com/chartdb/chartdb/issues/578)) ([26d95ee](https://github.com/chartdb/chartdb/commit/26d95eed25d86452d9168a9d93a301ba50d934e3))
+
+## [1.7.0](https://github.com/chartdb/chartdb/compare/v1.6.1...v1.7.0) (2025-02-03)
+
+
+### Features
+
+* **dbml-editor:** add dbml editor in side pannel ([#534](https://github.com/chartdb/chartdb/issues/534)) ([88be6c1](https://github.com/chartdb/chartdb/commit/88be6c1fd4a7e1f20937e8204c14d8fc1c2665b4))
+* **import-dbml:** add import dbml functionality ([#549](https://github.com/chartdb/chartdb/issues/549)) ([b424518](https://github.com/chartdb/chartdb/commit/b424518212290a870fdb7c420a303f65f5901429))
+
+
+### Bug Fixes
+
+* **canvas edit:** add option to edit names in canvas ([#536](https://github.com/chartdb/chartdb/issues/536)) ([0dcc9b9](https://github.com/chartdb/chartdb/commit/0dcc9b9568cfe749d44d2e93cb365ba3d3a1e71c))
+* **dbml-editor:** add shortcuts to dbml and filter: [#534](https://github.com/chartdb/chartdb/issues/534) ([#535](https://github.com/chartdb/chartdb/issues/535)) ([3b3be08](https://github.com/chartdb/chartdb/commit/3b3be086b1e8d5acf999f8504580d9e2f956f7da))
+* **dbml:** add error handling ([#545](https://github.com/chartdb/chartdb/issues/545)) ([fef6d3f](https://github.com/chartdb/chartdb/commit/fef6d3f4996130a3769d1f25b4b1f2090293a1bf))
+* **empty-state:** fix dark-mode for empty-state ([#547](https://github.com/chartdb/chartdb/issues/547)) ([99a8201](https://github.com/chartdb/chartdb/commit/99a820139861546a012d7b562ddbb9b77698151a))
+* **examples:** fix employee example dbml ([#544](https://github.com/chartdb/chartdb/issues/544)) ([2118bce](https://github.com/chartdb/chartdb/commit/2118bce0f00d55eb19d22b9fa2d4964ba2533a09))
+* **i18n:** translation/Ukrainian ([#529](https://github.com/chartdb/chartdb/issues/529)) ([ff3269e](https://github.com/chartdb/chartdb/commit/ff3269ec0510bbae4bc114e65a1ea86a656e8785))
+* **open-diagram:** add arrow keys navigation in open diagram dialog ([#537](https://github.com/chartdb/chartdb/issues/537)) ([14f11c2](https://github.com/chartdb/chartdb/commit/14f11c27a7ad5b990131c8495148cabf12835082))
+* **performance:** fix bundle size ([#551](https://github.com/chartdb/chartdb/issues/551)) ([4c93326](https://github.com/chartdb/chartdb/commit/4c93326bb6e3eaa143373c500a0c641e95a53fb9))
+* **performance:** reduce bundle size ([#553](https://github.com/chartdb/chartdb/issues/553)) ([004d530](https://github.com/chartdb/chartdb/commit/004d530880a50dea6e9786eb9ae63cf592a4d852))
+* **performance:** resolve error on startup ([#552](https://github.com/chartdb/chartdb/issues/552)) ([fd2cc9f](https://github.com/chartdb/chartdb/commit/fd2cc9fcfc8f4a9f0bc79def47d89114159392fb))
+* **psql-import:** remove typo for import command (psql) ([#546](https://github.com/chartdb/chartdb/issues/546)) ([eb9b41e](https://github.com/chartdb/chartdb/commit/eb9b41e4f656bec1451c45763f4ea5b547aeec5c))
+* **scroll:** fix scroll area ([#550](https://github.com/chartdb/chartdb/issues/550)) ([ef3d7a8](https://github.com/chartdb/chartdb/commit/ef3d7a8b67431e923b75bf8287b86bbc8abe723b))
+
+## [1.6.1](https://github.com/chartdb/chartdb/compare/v1.6.0...v1.6.1) (2025-01-26)
+
+
+### Bug Fixes
+
+* change empty state image ([#531](https://github.com/chartdb/chartdb/issues/531)) ([42d4cba](https://github.com/chartdb/chartdb/commit/42d4cbac8ce352e0e4e155d7003bfb85296b897f))
+* **chat-type:** remove typo of char datatype in examples ([#530](https://github.com/chartdb/chartdb/issues/530)) ([58231c9](https://github.com/chartdb/chartdb/commit/58231c91393de30ebff817f0ebc57a5c5579f106))
+* **empty_state:** customize empty state ([#533](https://github.com/chartdb/chartdb/issues/533)) ([1643e7b](https://github.com/chartdb/chartdb/commit/1643e7bdeb1bbaf081ab064e871d102c87243c0a))
+* **Image Export:** importing css rules error while download image ([#524](https://github.com/chartdb/chartdb/issues/524)) ([e9e2736](https://github.com/chartdb/chartdb/commit/e9e2736cb2203702d53df9afc30b8e989a8c9953))
+* **shortcuts:** add zoom all shortcut ([#528](https://github.com/chartdb/chartdb/issues/528)) ([7452ca6](https://github.com/chartdb/chartdb/commit/7452ca6965b0332a93b686c397ddf51013e42506))
+* **filter-tables:** show clean filter if no-results ([#532](https://github.com/chartdb/chartdb/issues/532)) ([c36cd33](https://github.com/chartdb/chartdb/commit/c36cd33180badaa9b7f9e27c765f19cb03a50ccd))
+
+## [1.6.0](https://github.com/chartdb/chartdb/compare/v1.5.1...v1.6.0) (2025-01-02)
+
+
+### Features
+
+* **view-menu:** add toggle for mini map visibility ([#496](https://github.com/chartdb/chartdb/issues/496)) ([#505](https://github.com/chartdb/chartdb/issues/505)) ([8abf2a7](https://github.com/chartdb/chartdb/commit/8abf2a7bfcc36d39e60ac133b0e5e569de1bbc72))
+
+
+### Bug Fixes
+
+* add loadDiagramFromData logic to chartdb provider ([#513](https://github.com/chartdb/chartdb/issues/513)) ([ee659ea](https://github.com/chartdb/chartdb/commit/ee659eaa038a94ee13801801e84152df4d79683d))
+* **dependency:** upgrade react query to v7 - clean console warnings ([#504](https://github.com/chartdb/chartdb/issues/504)) ([7c5db08](https://github.com/chartdb/chartdb/commit/7c5db0848e49dfdb7e7120f77003d1e37f8d71b0))
+* **i18n:** translation/Arabic ([#509](https://github.com/chartdb/chartdb/issues/509)) ([4b43f72](https://github.com/chartdb/chartdb/commit/4b43f720e90e49d5461e68d188e3865000f52497))
+
+## [1.5.1](https://github.com/chartdb/chartdb/compare/v1.5.0...v1.5.1) (2024-12-15)
+
+
+### Bug Fixes
+
+* **export:** fix SQL server field.nullable type to boolean ([#486](https://github.com/chartdb/chartdb/issues/486)) ([a151f56](https://github.com/chartdb/chartdb/commit/a151f56b5d950e0b5cc54363684ada95889024b3))
+* **readme:** Update README.md - add CockroachDB ([#482](https://github.com/chartdb/chartdb/issues/482)) ([2b6b733](https://github.com/chartdb/chartdb/commit/2b6b73326155f18d6d56779c0657a3506e2d2cde))
+
 ## [1.5.0](https://github.com/chartdb/chartdb/compare/v1.4.0...v1.5.0) (2024-12-11)


--- a/CLA.md
+++ b/CLA.md
@@ -0,0 +1,45 @@
+# ChartDB Contributors License Agreement
+
+This Contributors License Agreement ("CLA") is entered into between the Contributor, and ChartDB, Inc. ("ChartDB"), collectively referred to as the "Parties."
+
+## Background:
+
+ChartDB is an open-source project aimed at providing an open-source database diagramming and visualization tool for all parties.This CLA governs the rights and contributions made by the Contributor to the ChartDB project.
+
+## Agreement:
+
+**Contributor Grant of License:**
+
+By submitting code, documentation, or any other materials (collectively, "Contributions") to the ChartDB project, the Contributor grants ChartDB a perpetual, worldwide, non-exclusive, royalty-free, sublicensable license to use, modify, distribute, and otherwise exploit the Contributions, including any intellectual property rights therein, for the purposes of the ChartDB project.
+
+**Representation of Ownership and Right to Contribute:**
+
+The Contributor represents that they have the legal right to grant the license stated in Section 1, and that the Contributions do not infringe upon the intellectual property rights of any third party. The Contributor also represents that they have the authority to submit the Contributions on their own behalf or, if applicable, on behalf of their employer or any other entity.
+
+**Patent Grant:**
+
+If the Contributions include any method, process, or apparatus that is covered by a patent, the Contributor agrees to grant ChartDB a non-exclusive, worldwide, royalty-free license under any patent claims necessary to use, modify, distribute, and otherwise exploit the Contributions for the purposes of the ChartDB project.
+
+**No Implied Warranties or Support:**
+
+The Contributor acknowledges that the Contributions are provided "as is," without any warranties or support of any kind. ChartDB shall have no obligation to provide maintenance, updates, bug fixes, or support for the Contributions.
+
+**Retention of Contributor Rights:**
+
+The Contributor retains all right, title, and interest in and to their Contributions. This CLA does not restrict the Contributor from using their own Contributions for any other purpose.
+
+**Governing Law:**
+
+This CLA shall be governed by and construed in accordance with the laws of Delaware (DE), without regard to its conflict of laws principles.
+
+**Entire Agreement:**
+
+This CLA constitutes the entire agreement between the Parties with respect to the subject matter hereof and supersedes all prior and contemporaneous understandings, agreements, representations, and warranties.
+
+**Acceptance:**
+
+By submitting Contributions to the ChartDB project, the Contributor acknowledges and agrees to the terms and conditions of this CLA. If the Contributor is agreeing to this CLA on behalf of an entity, they represent that they have the necessary authority to bind that entity to these terms.
+
+**Effective Date:**
+
+This CLA is effective as of the date of the first Contribution made by the Contributor to the ChartDB project.
--- a/CODE_OF_CONDUCT.md
+++ b/CODE_OF_CONDUCT.md
@@ -60,7 +60,7 @@ representative at an online or offline event.

 Instances of abusive, harassing, or otherwise unacceptable behavior may be
 reported to the community leaders responsible for enforcement at
-chartdb.io@gmail.com.
+support@chartdb.io.
 All complaints will be reviewed and investigated promptly and fairly.

 All community leaders are obligated to respect the privacy and security of the
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -18,7 +18,7 @@ To submit a pull request:

 If you find a bug, check [GitHub issues](https://github.com/chartdb/chartdb/issues) to see if it’s already reported. If not, feel free to [report it](https://github.com/chartdb/chartdb/issues/new?labels=bug).

-For questions about using ChartDB, reach out to us via Email (chartdb.io@gmail.com) or [Discord](https://discord.gg/QeFwyWSKwC). For feature requests, create a [new feature](https://github.com/chartdb/chartdb/issues/new?labels=enhancement).
+For questions about using ChartDB, reach out to us via Email (support@chartdb.io) or [Discord](https://discord.gg/QeFwyWSKwC). For feature requests, create a [new feature](https://github.com/chartdb/chartdb/issues/new?labels=enhancement).

 ### Creating a Branch

@@ -35,7 +35,7 @@ By contributing, you agree that your work will be licensed under ChartDB's [lice
 ## Questions?

 Feel free to ask in `#contributing` on [Discord](https://discord.gg/QeFwyWSKwC) if you have questions about our process, how to proceed, etc.
-or [Email](chartdb.io@gmail.com)
+or [Email](support@chartdb.io)

 ---

--- a/12
+++ b/12
@@ -1,6 +1,9 @@
 FROM node:22-alpine AS builder

 ARG VITE_OPENAI_API_KEY
+ARG VITE_OPENAI_API_ENDPOINT
+ARG VITE_LLM_MODEL_NAME
+ARG VITE_HIDE_BUCKLE_DOT_DEV

 WORKDIR /usr/src/app

@@ -10,9 +13,13 @@ RUN npm ci

 COPY . .

+RUN echo "VITE_OPENAI_API_KEY=${VITE_OPENAI_API_KEY}" > .env && \
+    echo "VITE_OPENAI_API_ENDPOINT=${VITE_OPENAI_API_ENDPOINT}" >> .env && \
+    echo "VITE_LLM_MODEL_NAME=${VITE_LLM_MODEL_NAME}" >> .env && \
+    echo "VITE_HIDE_BUCKLE_DOT_DEV=${VITE_HIDE_BUCKLE_DOT_DEV}" >> .env 
+
 RUN npm run build

-# Use a lightweight web server to serve the production build
 FROM nginx:stable-alpine AS production

 COPY --from=builder /usr/src/app/dist /usr/share/nginx/html
@@ -20,7 +27,6 @@ COPY ./default.conf.template /etc/nginx/conf.d/default.conf.template
 COPY entrypoint.sh /entrypoint.sh
 RUN chmod +x /entrypoint.sh

-# Expose the default port for the Nginx web server
 EXPOSE 80

-ENTRYPOINT ["/entrypoint.sh"]
+ENTRYPOINT ["/entrypoint.sh"]
--- a/README.md
+++ b/README.md
@@ -30,8 +30,8 @@
  <a href="https://discord.gg/QeFwyWSKwC">
    <img src="https://img.shields.io/discord/1277047413705670678?color=5865F2&label=Discord&logo=discord&logoColor=white" alt="Discord community channel" />
  </a>
-  <a href="https://x.com/chartdb_io">
-    <img src="https://img.shields.io/twitter/follow/ChartDB?style=social"/>
+  <a href="https://x.com/intent/follow?screen_name=jonathanfishner">
+    <img src="https://img.shields.io/twitter/follow/jonathanfishner?style=social"/>
  </a>

 </h4>
@@ -49,13 +49,13 @@ Instantly visualize your database schema with a single **"Smart Query."** Custom

 **What it does**:

-   **Instant Schema Import**
-    Run a single query to instantly retrieve your database schema as JSON. This makes it incredibly fast to visualize your database schema, whether for documentation, team discussions, or simply understanding your data better.
+- **Instant Schema Import**
+  Run a single query to instantly retrieve your database schema as JSON. This makes it incredibly fast to visualize your database schema, whether for documentation, team discussions, or simply understanding your data better.

-   **AI-Powered Export for Easy Migration**
-    Our AI-driven export feature allows you to generate the DDL script in the dialect of your choice. Whether you’re migrating from MySQL to PostgreSQL or from SQLite to MariaDB, ChartDB simplifies the process by providing the necessary scripts tailored to your target database.
-   **Interactive Editing**
-    Fine-tune your database schema using our intuitive editor. Easily make adjustments or annotations to better visualize complex structures.
+- **AI-Powered Export for Easy Migration**
+  Our AI-driven export feature allows you to generate the DDL script in the dialect of your choice. Whether you're migrating from MySQL to PostgreSQL or from SQLite to MariaDB, ChartDB simplifies the process by providing the necessary scripts tailored to your target database.
+- **Interactive Editing**
+  Fine-tune your database schema using our intuitive editor. Easily make adjustments or annotations to better visualize complex structures.

 ### Status

@@ -63,12 +63,13 @@ ChartDB is currently in Public Beta. Star and watch this repository to get notif

 ### Supported Databases

-   ✅ PostgreSQL (<img src="./src/assets/postgresql_logo_2.png" width="15"/> + <img src="./src/assets/supabase.png" alt="Supabase" width="15"/> + <img src="./src/assets/timescale.png" alt="Timescale" width="15"/> )
-   ✅ MySQL
-   ✅ SQL Server
-   ✅ MariaDB
-   ✅ SQLite
-   ✅ ClickHouse
+- ✅ PostgreSQL (<img src="./src/assets/postgresql_logo_2.png" width="15"/> + <img src="./src/assets/supabase.png" alt="Supabase" width="15"/> + <img src="./src/assets/timescale.png" alt="Timescale" width="15"/> )
+- ✅ MySQL
+- ✅ SQL Server
+- ✅ MariaDB
+- ✅ SQLite (<img src="./src/assets/sqlite_logo_2.png" width="15"/> + <img src="./src/assets/cloudflare_d1.png" alt="Cloudflare D1" width="15"/> Cloudflare D1)
+- ✅ CockroachDB
+- ✅ ClickHouse

 ## Getting Started

@@ -90,24 +91,51 @@ npm run build

 Or like this if you want to have AI capabilities:

-```
+```bash
 npm install
 VITE_OPENAI_API_KEY=<YOUR_OPEN_AI_KEY> npm run build
 ```

 ### Run the Docker Container
+
 ```bash
 docker run -e OPENAI_API_KEY=<YOUR_OPEN_AI_KEY> -p 8080:80 ghcr.io/chartdb/chartdb:latest
 ```

 #### Build and Run locally
+
 ```bash
 docker build -t chartdb .
 docker run -e OPENAI_API_KEY=<YOUR_OPEN_AI_KEY> -p 8080:80 chartdb
 ```

+#### Using Custom Inference Server
+
+```bash
+# Build
+docker build \
+  --build-arg VITE_OPENAI_API_ENDPOINT=<YOUR_ENDPOINT> \
+  --build-arg VITE_LLM_MODEL_NAME=<YOUR_MODEL_NAME> \
+  -t chartdb .
+
+# Run
+docker run \
+  -e OPENAI_API_ENDPOINT=<YOUR_ENDPOINT> \
+  -e LLM_MODEL_NAME=<YOUR_MODEL_NAME> \
+  -p 8080:80 chartdb
+```
+
+> **Note:** You must configure either Option 1 (OpenAI API key) OR Option 2 (Custom endpoint and model name) for AI capabilities to work. Do not mix the two options.
+
 Open your browser and navigate to `http://localhost:8080`.

+Example configuration for a local vLLM server:
+
+```bash
+VITE_OPENAI_API_ENDPOINT=http://localhost:8000/v1
+VITE_LLM_MODEL_NAME=Qwen/Qwen2.5-32B-Instruct-AWQ
+```
+
 ## Try it on our website

 1. Go to [ChartDB.io](https://chartdb.io?ref=github_readme_2)
@@ -119,9 +147,9 @@ Open your browser and navigate to `http://localhost:8080`.

 ## 💚 Community & Support

-   [Discord](https://discord.gg/QeFwyWSKwC) (For live discussion with the community and the ChartDB team)
-   [GitHub Issues](https://github.com/chartdb/chartdb/issues) (For any bugs and errors you encounter using ChartDB)
-   [Twitter](https://x.com/chartdb_io) (Get news fast)
+- [Discord](https://discord.gg/QeFwyWSKwC) (For live discussion with the community and the ChartDB team)
+- [GitHub Issues](https://github.com/chartdb/chartdb/issues) (For any bugs and errors you encounter using ChartDB)
+- [Twitter](https://x.com/intent/follow?screen_name=jonathanfishner) (Get news fast)

 ## Contributing

--- a/components.json
+++ b/components.json
@@ -1,17 +1,20 @@
 {
-  "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "new-york",
-  "rsc": false,
-  "tsx": true,
-  "tailwind": {
-    "config": "tailwind.config.js",
-    "css": "src/globals.css",
-    "baseColor": "slate",
-    "cssVariables": true,
-    "prefix": ""
-  },
-  "aliases": {
-    "components": "src/components",
-    "utils": "@/lib/utils"
-  }
-}
+    "$schema": "https://ui.shadcn.com/schema.json",
+    "style": "new-york",
+    "rsc": false,
+    "tsx": true,
+    "tailwind": {
+        "config": "tailwind.config.js",
+        "css": "src/globals.css",
+        "baseColor": "slate",
+        "cssVariables": true,
+        "prefix": ""
+    },
+    "aliases": {
+        "components": "src/components",
+        "utils": "src/lib/utils",
+        "ui": "src/components/ui",
+        "lib": "src/lib",
+        "hooks": "src/hooks"
+    }
+}
--- a/default.conf.template
+++ b/default.conf.template
@@ -10,7 +10,12 @@ server {

    location /config.js {
        default_type application/javascript;
-        return 200 "window.env = { OPENAI_API_KEY: \"$OPENAI_API_KEY\" };";
+        return 200 "window.env = { 
+            OPENAI_API_KEY: \"$OPENAI_API_KEY\",
+            OPENAI_API_ENDPOINT: \"$OPENAI_API_ENDPOINT\",
+            LLM_MODEL_NAME: \"$LLM_MODEL_NAME\",
+            HIDE_BUCKLE_DOT_DEV: \"$HIDE_BUCKLE_DOT_DEV\"
+        };";
    }

    error_page   500 502 503 504  /50x.html;
--- a/entrypoint.sh
+++ b/entrypoint.sh
@@ -1,7 +1,7 @@
 #!/bin/sh

 # Replace placeholders in nginx.conf
-envsubst '${OPENAI_API_KEY}' < /etc/nginx/conf.d/default.conf.template > /etc/nginx/conf.d/default.conf
+envsubst '${OPENAI_API_KEY} ${OPENAI_API_ENDPOINT} ${LLM_MODEL_NAME} ${HIDE_BUCKLE_DOT_DEV}' < /etc/nginx/conf.d/default.conf.template > /etc/nginx/conf.d/default.conf

 # Start Nginx
 nginx -g "daemon off;"
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -20,7 +20,7 @@ const compat = new FlatCompat({

 export default [
    {
-        ignores: ['**/dist', '**/.eslintrc.cjs', 'tailwind.config.js'],
+        ignores: ['**/dist', '**/.eslintrc.cjs', '**/tailwind.config.js'],
        // files: ['**/*.ts', '**/*.tsx'],
    },
    ...fixupConfigRules(
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
    "name": "chartdb",
    "private": true,
-    "version": "1.5.0",
+    "version": "1.13.1",
    "type": "module",
    "scripts": {
        "dev": "vite",
@@ -13,6 +13,7 @@
    },
    "dependencies": {
        "@ai-sdk/openai": "^0.0.51",
+        "@dbml/core": "^3.9.5",
        "@dnd-kit/sortable": "^8.0.0",
        "@monaco-editor/react": "^4.6.0",
        "@radix-ui/react-accordion": "^1.2.0",
@@ -21,27 +22,27 @@
        "@radix-ui/react-checkbox": "^1.1.1",
        "@radix-ui/react-collapsible": "^1.1.0",
        "@radix-ui/react-context-menu": "^2.2.1",
-        "@radix-ui/react-dialog": "^1.1.1",
+        "@radix-ui/react-dialog": "^1.1.6",
        "@radix-ui/react-dropdown-menu": "^2.1.1",
        "@radix-ui/react-hover-card": "^1.1.1",
        "@radix-ui/react-icons": "^1.3.0",
        "@radix-ui/react-label": "^2.1.0",
        "@radix-ui/react-menubar": "^1.1.1",
        "@radix-ui/react-popover": "^1.1.1",
-        "@radix-ui/react-scroll-area": "^1.1.0",
+        "@radix-ui/react-scroll-area": "1.2.0",
        "@radix-ui/react-select": "^2.1.1",
-        "@radix-ui/react-separator": "^1.1.0",
-        "@radix-ui/react-slot": "^1.1.0",
+        "@radix-ui/react-separator": "^1.1.2",
+        "@radix-ui/react-slot": "^1.1.2",
        "@radix-ui/react-tabs": "^1.1.0",
        "@radix-ui/react-toast": "^1.2.1",
        "@radix-ui/react-toggle": "^1.1.0",
        "@radix-ui/react-toggle-group": "^1.1.0",
-        "@radix-ui/react-tooltip": "^1.1.2",
+        "@radix-ui/react-tooltip": "^1.1.8",
        "@uidotdev/usehooks": "^2.4.1",
        "@xyflow/react": "^12.3.1",
        "ahooks": "^3.8.1",
        "ai": "^3.3.14",
-        "class-variance-authority": "^0.7.0",
+        "class-variance-authority": "^0.7.1",
        "clsx": "^2.1.1",
        "cmdk": "^1.0.0",
        "dexie": "^4.0.8",
@@ -60,7 +61,7 @@
        "react-i18next": "^15.0.1",
        "react-resizable-panels": "^2.0.22",
        "react-responsive": "^10.0.0",
-        "react-router-dom": "^6.26.0",
+        "react-router-dom": "^7.1.1",
        "react-use": "^17.5.1",
        "tailwind-merge": "^2.4.0",
        "tailwindcss-animate": "^1.0.7",
--- a/public/buckle-animated.gif
+++ b/public/buckle-animated.gif
--- a/public/buckle.png
+++ b/public/buckle.png
--- a/src/assets/cloudflare_d1.png
+++ b/src/assets/cloudflare_d1.png
--- a/src/assets/empty_state.png
+++ b/src/assets/empty_state.png
--- a/src/assets/empty_state_dark.png
+++ b/src/assets/empty_state_dark.png
--- a/src/assets/examples/bike_stores_example.png
+++ b/src/assets/examples/bike_stores_example.png
--- a/src/assets/examples/bike_stores_example_dark.png
+++ b/src/assets/examples/bike_stores_example_dark.png
--- a/src/assets/examples/dvd_rental_example.png
+++ b/src/assets/examples/dvd_rental_example.png
--- a/src/assets/examples/dvd_rental_example_dark.png
+++ b/src/assets/examples/dvd_rental_example_dark.png
--- a/src/assets/examples/employees_example.png
+++ b/src/assets/examples/employees_example.png
--- a/src/assets/examples/employees_example_dark.png
+++ b/src/assets/examples/employees_example_dark.png
--- a/src/assets/oracle_logo.png
+++ b/src/assets/oracle_logo.png
--- a/src/assets/oracle_logo_2.png
+++ b/src/assets/oracle_logo_2.png
--- a/src/assets/oracle_logo_dark.png
+++ b/src/assets/oracle_logo_dark.png
--- a/src/components/code-snippet/code-editor.ts
+++ b/src/components/code-snippet/code-editor.ts
@@ -1,2 +1,3 @@
 import './config.ts';
 export { Editor } from '@monaco-editor/react';
+export { DiffEditor } from '@monaco-editor/react';
--- a/src/components/code-snippet/code-snippet.tsx
+++ b/src/components/code-snippet/code-snippet.tsx
@@ -5,6 +5,7 @@ import { useTheme } from '@/hooks/use-theme';
 import { useMonaco } from '@monaco-editor/react';
 import { useToast } from '@/components/toast/use-toast';
 import { Button } from '../button/button';
+import type { LucideIcon } from 'lucide-react';
 import { Copy, CopyCheck } from 'lucide-react';
 import { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip/tooltip';
 import { useTranslation } from 'react-i18next';
@@ -12,29 +13,49 @@ import { DarkTheme } from './themes/dark';
 import { LightTheme } from './themes/light';
 import './config.ts';

-export interface CodeSnippetProps {
-    className?: string;
-    code: string;
-    language?: 'sql' | 'shell';
-    loading?: boolean;
-    autoScroll?: boolean;
-    isComplete?: boolean;
-}
-
 export const Editor = lazy(() =>
    import('./code-editor').then((module) => ({
        default: module.Editor,
    }))
 );

+export const DiffEditor = lazy(() =>
+    import('./code-editor').then((module) => ({
+        default: module.DiffEditor,
+    }))
+);
+
+type EditorType = typeof Editor;
+
+export interface CodeSnippetAction {
+    label: string;
+    icon: LucideIcon;
+    onClick: () => void;
+}
+
+export interface CodeSnippetProps {
+    className?: string;
+    code: string;
+    codeToCopy?: string;
+    language?: 'sql' | 'shell';
+    loading?: boolean;
+    autoScroll?: boolean;
+    isComplete?: boolean;
+    editorProps?: React.ComponentProps<EditorType>;
+    actions?: CodeSnippetAction[];
+}
+
 export const CodeSnippet: React.FC<CodeSnippetProps> = React.memo(
    ({
        className,
        code,
+        codeToCopy,
        loading,
        language = 'sql',
        autoScroll = false,
        isComplete = true,
+        editorProps,
+        actions,
    }) => {
        const { t } = useTranslation();
        const monaco = useMonaco();
@@ -81,7 +102,7 @@ export const CodeSnippet: React.FC<CodeSnippetProps> = React.memo(
            }

            try {
-                await navigator.clipboard.writeText(code);
+                await navigator.clipboard.writeText(codeToCopy ?? code);
                setIsCopied(true);
            } catch {
                setIsCopied(false);
@@ -93,7 +114,7 @@ export const CodeSnippet: React.FC<CodeSnippetProps> = React.memo(
                    ),
                });
            }
-        }, [code, t, toast]);
+        }, [code, codeToCopy, t, toast]);

        return (
            <div
@@ -107,36 +128,58 @@ export const CodeSnippet: React.FC<CodeSnippetProps> = React.memo(
                ) : (
                    <Suspense fallback={<Spinner />}>
                        {isComplete ? (
-                            <Tooltip
-                                onOpenChange={setTooltipOpen}
-                                open={isCopied || tooltipOpen}
-                            >
-                                <TooltipTrigger
-                                    asChild
-                                    className="absolute right-1 top-1 z-10"
+                            <div className="absolute right-1 top-1 z-10 flex flex-col gap-1">
+                                <Tooltip
+                                    onOpenChange={setTooltipOpen}
+                                    open={isCopied || tooltipOpen}
                                >
-                                    <span>
-                                        <Button
-                                            className=" h-fit p-1.5"
-                                            variant="outline"
-                                            onClick={copyToClipboard}
-                                        >
-                                            {isCopied ? (
-                                                <CopyCheck size={16} />
-                                            ) : (
-                                                <Copy size={16} />
-                                            )}
-                                        </Button>
-                                    </span>
-                                </TooltipTrigger>
-                                <TooltipContent>
-                                    {t(
-                                        isCopied
-                                            ? 'copied'
-                                            : 'copy_to_clipboard'
-                                    )}
-                                </TooltipContent>
-                            </Tooltip>
+                                    <TooltipTrigger asChild>
+                                        <span>
+                                            <Button
+                                                className="h-fit p-1.5"
+                                                variant="outline"
+                                                onClick={copyToClipboard}
+                                            >
+                                                {isCopied ? (
+                                                    <CopyCheck size={16} />
+                                                ) : (
+                                                    <Copy size={16} />
+                                                )}
+                                            </Button>
+                                        </span>
+                                    </TooltipTrigger>
+                                    <TooltipContent>
+                                        {t(
+                                            isCopied
+                                                ? 'copied'
+                                                : 'copy_to_clipboard'
+                                        )}
+                                    </TooltipContent>
+                                </Tooltip>
+
+                                {actions &&
+                                    actions.length > 0 &&
+                                    actions.map((action, index) => (
+                                        <Tooltip key={index}>
+                                            <TooltipTrigger asChild>
+                                                <span>
+                                                    <Button
+                                                        className="h-fit p-1.5"
+                                                        variant="outline"
+                                                        onClick={action.onClick}
+                                                    >
+                                                        <action.icon
+                                                            size={16}
+                                                        />
+                                                    </Button>
+                                                </span>
+                                            </TooltipTrigger>
+                                            <TooltipContent>
+                                                {action.label}
+                                            </TooltipContent>
+                                        </Tooltip>
+                                    ))}
+                            </div>
                        ) : null}

                        <Editor
@@ -144,27 +187,32 @@ export const CodeSnippet: React.FC<CodeSnippetProps> = React.memo(
                            language={language}
                            loading={<Spinner />}
                            theme={effectiveTheme}
+                            {...editorProps}
                            options={{
-                                minimap: {
-                                    enabled: false,
-                                },
                                readOnly: true,
                                automaticLayout: true,
-                                scrollbar: {
-                                    vertical: 'hidden',
-                                    horizontal: 'hidden',
-                                    alwaysConsumeMouseWheel: false,
-                                },
                                scrollBeyondLastLine: false,
                                renderValidationDecorations: 'off',
                                lineDecorationsWidth: 0,
                                overviewRulerBorder: false,
                                overviewRulerLanes: 0,
                                hideCursorInOverviewRuler: true,
+                                contextmenu: false,
+                                ...editorProps?.options,
                                guides: {
                                    indentation: false,
+                                    ...editorProps?.options?.guides,
+                                },
+                                scrollbar: {
+                                    vertical: 'hidden',
+                                    horizontal: 'hidden',
+                                    alwaysConsumeMouseWheel: false,
+                                    ...editorProps?.options?.scrollbar,
+                                },
+                                minimap: {
+                                    enabled: false,
+                                    ...editorProps?.options?.minimap,
                                },
-                                contextmenu: false,
                            }}
                        />
                        {!isComplete ? (
--- a/src/components/code-snippet/languages/dbml-language.ts
+++ b/src/components/code-snippet/languages/dbml-language.ts
@@ -0,0 +1,54 @@
+import type { Monaco } from '@monaco-editor/react';
+import { dataTypes } from '@/lib/data/data-types/data-types';
+
+export const setupDBMLLanguage = (monaco: Monaco) => {
+    monaco.languages.register({ id: 'dbml' });
+
+    // Define themes for DBML
+    monaco.editor.defineTheme('dbml-dark', {
+        base: 'vs-dark',
+        inherit: true,
+        rules: [
+            { token: 'keyword', foreground: '569CD6' }, // Table, Ref keywords
+            { token: 'string', foreground: 'CE9178' }, // Strings
+            { token: 'annotation', foreground: '9CDCFE' }, // [annotations]
+            { token: 'delimiter', foreground: 'D4D4D4' }, // Braces {}
+            { token: 'operator', foreground: 'D4D4D4' }, // Operators
+            { token: 'datatype', foreground: '4EC9B0' }, // Data types
+        ],
+        colors: {},
+    });
+
+    monaco.editor.defineTheme('dbml-light', {
+        base: 'vs',
+        inherit: true,
+        rules: [
+            { token: 'keyword', foreground: '0000FF' }, // Table, Ref keywords
+            { token: 'string', foreground: 'A31515' }, // Strings
+            { token: 'annotation', foreground: '001080' }, // [annotations]
+            { token: 'delimiter', foreground: '000000' }, // Braces {}
+            { token: 'operator', foreground: '000000' }, // Operators
+            { token: 'type', foreground: '267F99' }, // Data types
+        ],
+        colors: {},
+    });
+
+    const dataTypesNames = dataTypes.map((dt) => dt.name);
+    const datatypePattern = dataTypesNames.join('|');
+
+    monaco.languages.setMonarchTokensProvider('dbml', {
+        keywords: ['Table', 'Ref', 'Indexes'],
+        datatypes: dataTypesNames,
+        tokenizer: {
+            root: [
+                [/\b(Table|Ref|Indexes)\b/, 'keyword'],
+                [/\[.*?\]/, 'annotation'],
+                [/".*?"/, 'string'],
+                [/'.*?'/, 'string'],
+                [/[{}]/, 'delimiter'],
+                [/[<>]/, 'operator'],
+                [new RegExp(`\\b(${datatypePattern})\\b`, 'i'), 'type'], // Added 'i' flag for case-insensitive matching
+            ],
+        },
+    });
+};
--- a/src/pages/editor-page/side-panel/tables-section/table-list/table-list-item/table-list-item-content/color-picker/color-picker.tsx
+++ b/src/pages/editor-page/side-panel/tables-section/table-list/table-list-item/table-list-item-content/color-picker/color-picker.tsx
--- a/src/components/diagram-icon/diagram-icon.tsx
+++ b/src/components/diagram-icon/diagram-icon.tsx
@@ -22,14 +22,15 @@ export interface DiagramIconProps
 export const DiagramIcon = React.forwardRef<
    React.ElementRef<typeof TooltipTrigger>,
    DiagramIconProps
->(({ databaseType, databaseEdition, className, imgClassName }, ref) =>
+>(({ databaseType, databaseEdition, className, imgClassName, onClick }, ref) =>
    databaseEdition ? (
        <Tooltip>
            <TooltipTrigger className={cn('mr-1', className)} ref={ref} asChild>
                <img
                    src={databaseEditionToImageMap[databaseEdition]}
-                    className={cn('h-5 max-w-fit rounded-full', imgClassName)}
+                    className={cn('max-h-5 max-w-5 rounded-full', imgClassName)}
                    alt="database"
+                    onClick={onClick}
                />
            </TooltipTrigger>
            <TooltipContent>
@@ -41,8 +42,9 @@ export const DiagramIcon = React.forwardRef<
            <TooltipTrigger className={cn('mr-2', className)} ref={ref} asChild>
                <img
                    src={databaseSecondaryLogoMap[databaseType]}
-                    className={cn('h-5 max-w-fit', imgClassName)}
+                    className={cn('max-h-5 max-w-5', imgClassName)}
                    alt="database"
+                    onClick={onClick}
                />
            </TooltipTrigger>
            <TooltipContent>
--- a/src/components/empty-state/empty-state.tsx
+++ b/src/components/empty-state/empty-state.tsx
@@ -1,30 +1,66 @@
 import React, { forwardRef } from 'react';
 import EmptyStateImage from '@/assets/empty_state.png';
+import EmptyStateImageDark from '@/assets/empty_state_dark.png';
 import { Label } from '@/components/label/label';
 import { cn } from '@/lib/utils';
+import { useTheme } from '@/hooks/use-theme';

 export interface EmptyStateProps {
    title: string;
    description: string;
+    imageClassName?: string;
+    titleClassName?: string;
+    descriptionClassName?: string;
 }

 export const EmptyState = forwardRef<
    HTMLDivElement,
    React.HTMLAttributes<HTMLDivElement> & EmptyStateProps
->(({ title, description, className }, ref) => (
-    <div
-        ref={ref}
-        className={cn(
-            'flex flex-1 flex-col items-center justify-center space-y-1',
-            className
-        )}
-    >
-        <img src={EmptyStateImage} alt="Empty state" className="w-32" />
-        <Label className="text-base">{title}</Label>
-        <Label className="text-sm font-normal text-muted-foreground">
-            {description}
-        </Label>
-    </div>
-));
+>(
+    (
+        {
+            title,
+            description,
+            className,
+            titleClassName,
+            descriptionClassName,
+            imageClassName,
+        },
+        ref
+    ) => {
+        const { effectiveTheme } = useTheme();
+
+        return (
+            <div
+                ref={ref}
+                className={cn(
+                    'flex flex-1 flex-col items-center justify-center space-y-1',
+                    className
+                )}
+            >
+                <img
+                    src={
+                        effectiveTheme === 'dark'
+                            ? EmptyStateImageDark
+                            : EmptyStateImage
+                    }
+                    alt="Empty state"
+                    className={cn('mb-2 w-20', imageClassName)}
+                />
+                <Label className={cn('text-base', titleClassName)}>
+                    {title}
+                </Label>
+                <Label
+                    className={cn(
+                        'text-sm font-normal text-muted-foreground',
+                        descriptionClassName
+                    )}
+                >
+                    {description}
+                </Label>
+            </div>
+        );
+    }
+);

 EmptyState.displayName = 'EmptyState';
--- a/src/components/select-box/select-box.tsx
+++ b/src/components/select-box/select-box.tsx
@@ -24,12 +24,20 @@ export interface SelectBoxOption {
    value: string;
    label: string;
    description?: string;
+    regex?: string;
+    extractRegex?: RegExp;
+    group?: string;
 }

 export interface SelectBoxProps {
    options: SelectBoxOption[];
    value?: string[] | string;
-    onChange?: (values: string[] | string) => void;
+    valueSuffix?: string;
+    optionSuffix?: (option: SelectBoxOption) => string;
+    onChange?: (
+        values: string[] | string,
+        regexMatches?: string[] | string
+    ) => void;
    placeholder?: string;
    inputPlaceholder?: string;
    emptyPlaceholder?: string;
@@ -44,6 +52,7 @@ export interface SelectBoxProps {
    disabled?: boolean;
    open?: boolean;
    onOpenChange?: (open: boolean) => void;
+    popoverClassName?: string;
 }

 export const SelectBox = React.forwardRef<HTMLInputElement, SelectBoxProps>(
@@ -55,10 +64,12 @@ export const SelectBox = React.forwardRef<HTMLInputElement, SelectBoxProps>(
            className,
            options,
            value,
+            valueSuffix,
            onChange,
            multiple,
            oneLine,
            selectAll,
+            optionSuffix,
            deselectAll,
            clearText,
            showClear,
@@ -66,6 +77,7 @@ export const SelectBox = React.forwardRef<HTMLInputElement, SelectBoxProps>(
            disabled,
            open,
            onOpenChange: setOpen,
+            popoverClassName,
        },
        ref
    ) => {
@@ -86,7 +98,7 @@ export const SelectBox = React.forwardRef<HTMLInputElement, SelectBoxProps>(
        );

        const handleSelect = React.useCallback(
-            (selectedValue: string) => {
+            (selectedValue: string, regexMatches?: string[]) => {
                if (multiple) {
                    const newValue =
                        value?.includes(selectedValue) && Array.isArray(value)
@@ -94,7 +106,7 @@ export const SelectBox = React.forwardRef<HTMLInputElement, SelectBoxProps>(
                            : [...(value ?? []), selectedValue];
                    onChange?.(newValue);
                } else {
-                    onChange?.(selectedValue);
+                    onChange?.(selectedValue, regexMatches);
                    setIsOpen(false);
                }
            },
@@ -166,6 +178,101 @@ export const SelectBox = React.forwardRef<HTMLInputElement, SelectBoxProps>(
            [isOpen, onOpenChange]
        );

+        const groups = React.useMemo(
+            () =>
+                options.reduce(
+                    (acc, option) => {
+                        if (option.group) {
+                            if (!acc[option.group]) {
+                                acc[option.group] = [];
+                            }
+                            acc[option.group].push(option);
+                        } else {
+                            if (!acc['default']) {
+                                acc['default'] = [];
+                            }
+                            acc['default'].push(option);
+                        }
+                        return acc;
+                    },
+                    {} as Record<string, SelectBoxOption[]>
+                ),
+            [options]
+        );
+
+        const hasGroups = React.useMemo(
+            () =>
+                Object.keys(groups).filter((group) => group !== 'default')
+                    .length > 0,
+            [groups]
+        );
+
+        const renderOption = React.useCallback(
+            (option: SelectBoxOption) => {
+                const isSelected =
+                    Array.isArray(value) && value.includes(option.value);
+
+                const isRegexMatch =
+                    option.regex && new RegExp(option.regex)?.test(searchTerm);
+
+                const matches = option.extractRegex
+                    ? searchTerm.match(option.extractRegex)
+                    : undefined;
+
+                return (
+                    <CommandItem
+                        className="flex items-center"
+                        key={option.value}
+                        keywords={option.regex ? [option.regex] : undefined}
+                        onSelect={() =>
+                            handleSelect(
+                                option.value,
+                                matches?.map((match) => match.toString())
+                            )
+                        }
+                    >
+                        {multiple && (
+                            <div
+                                className={cn(
+                                    'mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary',
+                                    isSelected
+                                        ? 'bg-primary text-primary-foreground'
+                                        : 'opacity-50 [&_svg]:invisible'
+                                )}
+                            >
+                                <CheckIcon />
+                            </div>
+                        )}
+                        <div className="flex flex-1 items-center truncate">
+                            <span>
+                                {isRegexMatch ? searchTerm : option.label}
+                                {!isRegexMatch && optionSuffix
+                                    ? optionSuffix(option)
+                                    : ''}
+                            </span>
+                            {option.description && (
+                                <span className="ml-1 w-0 flex-1 truncate text-xs text-muted-foreground">
+                                    {option.description}
+                                </span>
+                            )}
+                        </div>
+                        {((!multiple && option.value === value) ||
+                            isRegexMatch) && (
+                            <CheckIcon
+                                className={cn(
+                                    'ml-auto',
+                                    option.value === value
+                                        ? 'opacity-100'
+                                        : 'opacity-0'
+                                )}
+                            />
+                        )}
+                    </CommandItem>
+                );
+            },
+            [value, multiple, searchTerm, handleSelect, optionSuffix]
+        );
+
        return (
            <Popover open={isOpen} onOpenChange={onOpenChange} modal={true}>
                <PopoverTrigger asChild tabIndex={0} onKeyDown={handleKeyDown}>
@@ -199,6 +306,7 @@ export const SelectBox = React.forwardRef<HTMLInputElement, SelectBoxProps>(
                                                (opt) => opt.value === value
                                            )?.label
                                        }
+                                        {valueSuffix ? valueSuffix : ''}
                                    </div>
                                )
                            ) : (
@@ -235,15 +343,29 @@ export const SelectBox = React.forwardRef<HTMLInputElement, SelectBoxProps>(
                    </div>
                </PopoverTrigger>
                <PopoverContent
-                    className="w-fit min-w-[var(--radix-popover-trigger-width)] p-0"
+                    className={cn(
+                        'w-fit min-w-[var(--radix-popover-trigger-width)] p-0',
+                        popoverClassName
+                    )}
                    align="center"
                >
                    <Command
-                        filter={(value, search) =>
-                            value.toLowerCase().includes(search.toLowerCase())
+                        filter={(value, search, keywords) => {
+                            if (
+                                keywords?.length &&
+                                keywords.some((keyword) =>
+                                    new RegExp(keyword).test(search)
+                                )
+                            ) {
+                                return 1;
+                            }
+
+                            return value
+                                .toLowerCase()
+                                .includes(search.toLowerCase())
                                ? 1
-                                : 0
-                        }
+                                : 0;
+                        }}
                    >
                        <div className="relative">
                            <CommandInput
@@ -296,65 +418,22 @@ export const SelectBox = React.forwardRef<HTMLInputElement, SelectBoxProps>(

                        <ScrollArea>
                            <div className="max-h-64 w-full">
-                                <CommandGroup>
-                                    <CommandList className="max-h-fit w-full">
-                                        {options.map((option) => {
-                                            const isSelected =
-                                                Array.isArray(value) &&
-                                                value.includes(option.value);
-                                            return (
-                                                <CommandItem
-                                                    className="flex items-center"
-                                                    key={option.value}
-                                                    // value={option.value}
-                                                    onSelect={() =>
-                                                        handleSelect(
-                                                            option.value
-                                                        )
-                                                    }
-                                                >
-                                                    {multiple && (
-                                                        <div
-                                                            className={cn(
-                                                                'mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary',
-                                                                isSelected
-                                                                    ? 'bg-primary text-primary-foreground'
-                                                                    : 'opacity-50 [&_svg]:invisible'
-                                                            )}
-                                                        >
-                                                            <CheckIcon />
-                                                        </div>
-                                                    )}
-                                                    <div className="flex items-center truncate">
-                                                        <span>
-                                                            {option.label}
-                                                        </span>
-                                                        {option.description && (
-                                                            <span className="ml-1 text-xs text-muted-foreground">
-                                                                {
-                                                                    option.description
-                                                                }
-                                                            </span>
-                                                        )}
-                                                    </div>
-                                                    {!multiple &&
-                                                        option.value ===
-                                                            value && (
-                                                            <CheckIcon
-                                                                className={cn(
-                                                                    'ml-auto',
-                                                                    option.value ===
-                                                                        value
-                                                                        ? 'opacity-100'
-                                                                        : 'opacity-0'
-                                                                )}
-                                                            />
-                                                        )}
-                                                </CommandItem>
-                                            );
-                                        })}
-                                    </CommandList>
-                                </CommandGroup>
+                                <CommandList className="max-h-fit w-full">
+                                    {hasGroups
+                                        ? Object.entries(groups).map(
+                                              ([groupName, groupOptions]) => (
+                                                  <CommandGroup
+                                                      key={groupName}
+                                                      heading={groupName}
+                                                  >
+                                                      {groupOptions.map(
+                                                          renderOption
+                                                      )}
+                                                  </CommandGroup>
+                                              )
+                                          )
+                                        : options.map(renderOption)}
+                                </CommandList>
                            </div>
                        </ScrollArea>
                    </Command>
--- a/src/components/sheet/sheet.tsx
+++ b/src/components/sheet/sheet.tsx
@@ -0,0 +1,135 @@
+import * as React from 'react';
+import * as SheetPrimitive from '@radix-ui/react-dialog';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+import { Cross2Icon } from '@radix-ui/react-icons';
+
+const Sheet = SheetPrimitive.Root;
+
+const SheetTrigger = SheetPrimitive.Trigger;
+
+const SheetClose = SheetPrimitive.Close;
+
+const SheetPortal = SheetPrimitive.Portal;
+
+const SheetOverlay = React.forwardRef<
+    React.ElementRef<typeof SheetPrimitive.Overlay>,
+    React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+    <SheetPrimitive.Overlay
+        className={cn(
+            'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+            className
+        )}
+        {...props}
+        ref={ref}
+    />
+));
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
+
+const sheetVariants = cva(
+    'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out',
+    {
+        variants: {
+            side: {
+                top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
+                bottom: 'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+                left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
+                right: 'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
+            },
+        },
+        defaultVariants: {
+            side: 'right',
+        },
+    }
+);
+
+interface SheetContentProps
+    extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+        VariantProps<typeof sheetVariants> {}
+
+const SheetContent = React.forwardRef<
+    React.ElementRef<typeof SheetPrimitive.Content>,
+    SheetContentProps
+>(({ side = 'right', className, children, ...props }, ref) => (
+    <SheetPortal>
+        <SheetOverlay />
+        <SheetPrimitive.Content
+            ref={ref}
+            className={cn(sheetVariants({ side }), className)}
+            {...props}
+        >
+            <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+                <Cross2Icon className="size-4" />
+                <span className="sr-only">Close</span>
+            </SheetPrimitive.Close>
+            {children}
+        </SheetPrimitive.Content>
+    </SheetPortal>
+));
+SheetContent.displayName = SheetPrimitive.Content.displayName;
+
+const SheetHeader = ({
+    className,
+    ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+    <div
+        className={cn(
+            'flex flex-col space-y-2 text-center sm:text-left',
+            className
+        )}
+        {...props}
+    />
+);
+SheetHeader.displayName = 'SheetHeader';
+
+const SheetFooter = ({
+    className,
+    ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+    <div
+        className={cn(
+            'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+            className
+        )}
+        {...props}
+    />
+);
+SheetFooter.displayName = 'SheetFooter';
+
+const SheetTitle = React.forwardRef<
+    React.ElementRef<typeof SheetPrimitive.Title>,
+    React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+    <SheetPrimitive.Title
+        ref={ref}
+        className={cn('text-lg font-semibold text-foreground', className)}
+        {...props}
+    />
+));
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
+
+const SheetDescription = React.forwardRef<
+    React.ElementRef<typeof SheetPrimitive.Description>,
+    React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+    <SheetPrimitive.Description
+        ref={ref}
+        className={cn('text-sm text-muted-foreground', className)}
+        {...props}
+    />
+));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
+
+export {
+    Sheet,
+    SheetPortal,
+    SheetOverlay,
+    SheetTrigger,
+    SheetClose,
+    SheetContent,
+    SheetHeader,
+    SheetFooter,
+    SheetTitle,
+    SheetDescription,
+};
--- a/src/components/sidebar/sidebar.tsx
+++ b/src/components/sidebar/sidebar.tsx
@@ -0,0 +1,790 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import type { VariantProps } from 'class-variance-authority';
+import { cva } from 'class-variance-authority';
+import { useIsMobile } from '@/hooks/use-mobile';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/button/button';
+import { Input } from '@/components/input/input';
+import { Separator } from '@/components/separator/separator';
+import {
+    Sheet,
+    SheetContent,
+    SheetDescription,
+    SheetHeader,
+    SheetTitle,
+} from '@/components/sheet/sheet';
+import { Skeleton } from '@/components/skeleton/skeleton';
+import {
+    Tooltip,
+    TooltipContent,
+    TooltipProvider,
+    TooltipTrigger,
+} from '@/components/tooltip/tooltip';
+import { ViewVerticalIcon } from '@radix-ui/react-icons';
+import { useSidebar } from './use-sidebar';
+
+const SIDEBAR_COOKIE_NAME = 'sidebar_state';
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+const SIDEBAR_WIDTH = '16rem';
+const SIDEBAR_WIDTH_MOBILE = '18rem';
+const SIDEBAR_WIDTH_ICON = '3rem';
+const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
+
+type SidebarContext = {
+    state: 'expanded' | 'collapsed';
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    openMobile: boolean;
+    setOpenMobile: (open: boolean) => void;
+    isMobile: boolean;
+    toggleSidebar: () => void;
+};
+
+const SidebarContext = React.createContext<SidebarContext | null>(null);
+
+const SidebarProvider = React.forwardRef<
+    HTMLDivElement,
+    React.ComponentProps<'div'> & {
+        defaultOpen?: boolean;
+        open?: boolean;
+        onOpenChange?: (open: boolean) => void;
+    }
+>(
+    (
+        {
+            defaultOpen = true,
+            open: openProp,
+            onOpenChange: setOpenProp,
+            className,
+            style,
+            children,
+            ...props
+        },
+        ref
+    ) => {
+        const isMobile = useIsMobile();
+        const [openMobile, setOpenMobile] = React.useState(false);
+
+        // This is the internal state of the sidebar.
+        // We use openProp and setOpenProp for control from outside the component.
+        const [_open, _setOpen] = React.useState(defaultOpen);
+        const open = openProp ?? _open;
+        const setOpen = React.useCallback(
+            (value: boolean | ((value: boolean) => boolean)) => {
+                const openState =
+                    typeof value === 'function' ? value(open) : value;
+                if (setOpenProp) {
+                    setOpenProp(openState);
+                } else {
+                    _setOpen(openState);
+                }
+
+                // This sets the cookie to keep the sidebar state.
+                document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+            },
+            [setOpenProp, open]
+        );
+
+        // Helper to toggle the sidebar.
+        const toggleSidebar = React.useCallback(() => {
+            return isMobile
+                ? setOpenMobile((open) => !open)
+                : setOpen((open) => !open);
+        }, [isMobile, setOpen, setOpenMobile]);
+
+        // Adds a keyboard shortcut to toggle the sidebar.
+        React.useEffect(() => {
+            const handleKeyDown = (event: KeyboardEvent) => {
+                if (
+                    event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+                    (event.metaKey || event.ctrlKey)
+                ) {
+                    event.preventDefault();
+                    toggleSidebar();
+                }
+            };
+
+            window.addEventListener('keydown', handleKeyDown);
+            return () => window.removeEventListener('keydown', handleKeyDown);
+        }, [toggleSidebar]);
+
+        // We add a state so that we can do data-state="expanded" or "collapsed".
+        // This makes it easier to style the sidebar with Tailwind classes.
+        const state = open ? 'expanded' : 'collapsed';
+
+        const contextValue = React.useMemo<SidebarContext>(
+            () => ({
+                state,
+                open,
+                setOpen,
+                isMobile,
+                openMobile,
+                setOpenMobile,
+                toggleSidebar,
+            }),
+            [
+                state,
+                open,
+                setOpen,
+                isMobile,
+                openMobile,
+                setOpenMobile,
+                toggleSidebar,
+            ]
+        );
+
+        return (
+            <SidebarContext.Provider value={contextValue}>
+                <TooltipProvider delayDuration={0}>
+                    <div
+                        style={
+                            {
+                                '--sidebar-width': SIDEBAR_WIDTH,
+                                '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
+                                ...style,
+                            } as React.CSSProperties
+                        }
+                        className={cn(
+                            'group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar',
+                            className
+                        )}
+                        ref={ref}
+                        {...props}
+                    >
+                        {children}
+                    </div>
+                </TooltipProvider>
+            </SidebarContext.Provider>
+        );
+    }
+);
+SidebarProvider.displayName = 'SidebarProvider';
+
+const Sidebar = React.forwardRef<
+    HTMLDivElement,
+    React.ComponentProps<'div'> & {
+        side?: 'left' | 'right';
+        variant?: 'sidebar' | 'floating' | 'inset';
+        collapsible?: 'offcanvas' | 'icon' | 'none';
+    }
+>(
+    (
+        {
+            side = 'left',
+            variant = 'sidebar',
+            collapsible = 'offcanvas',
+            className,
+            children,
+            ...props
+        },
+        ref
+    ) => {
+        const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+
+        if (collapsible === 'none') {
+            return (
+                <div
+                    className={cn(
+                        'flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground',
+                        className
+                    )}
+                    ref={ref}
+                    {...props}
+                >
+                    {children}
+                </div>
+            );
+        }
+
+        if (isMobile) {
+            return (
+                <Sheet
+                    open={openMobile}
+                    onOpenChange={setOpenMobile}
+                    {...props}
+                >
+                    <SheetContent
+                        data-sidebar="sidebar"
+                        data-mobile="true"
+                        className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+                        style={
+                            {
+                                '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
+                            } as React.CSSProperties
+                        }
+                        side={side}
+                    >
+                        <SheetHeader className="sr-only">
+                            <SheetTitle>Sidebar</SheetTitle>
+                            <SheetDescription>
+                                Displays the mobile sidebar.
+                            </SheetDescription>
+                        </SheetHeader>
+                        <div className="flex size-full flex-col">
+                            {children}
+                        </div>
+                    </SheetContent>
+                </Sheet>
+            );
+        }
+
+        return (
+            <div
+                ref={ref}
+                className="group peer hidden text-sidebar-foreground md:block"
+                data-state={state}
+                data-collapsible={state === 'collapsed' ? collapsible : ''}
+                data-variant={variant}
+                data-side={side}
+            >
+                {/* This is what handles the sidebar gap on desktop */}
+                <div
+                    className={cn(
+                        'relative w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear',
+                        'group-data-[collapsible=offcanvas]:w-0',
+                        'group-data-[side=right]:rotate-180',
+                        variant === 'floating' || variant === 'inset'
+                            ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'
+                            : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]'
+                    )}
+                />
+                <div
+                    className={cn(
+                        'fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex',
+                        side === 'left'
+                            ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
+                            : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
+                        // Adjust the padding for floating and inset variants.
+                        variant === 'floating' || variant === 'inset'
+                            ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'
+                            : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',
+                        className
+                    )}
+                    {...props}
+                >
+                    <div
+                        data-sidebar="sidebar"
+                        className="flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
+                    >
+                        {children}
+                    </div>
+                </div>
+            </div>
+        );
+    }
+);
+Sidebar.displayName = 'Sidebar';
+
+const SidebarTrigger = React.forwardRef<
+    React.ElementRef<typeof Button>,
+    React.ComponentProps<typeof Button>
+>(({ className, onClick, ...props }, ref) => {
+    const { toggleSidebar } = useSidebar();
+
+    return (
+        <Button
+            ref={ref}
+            data-sidebar="trigger"
+            variant="ghost"
+            size="icon"
+            className={cn('h-7 w-7', className)}
+            onClick={(event) => {
+                onClick?.(event);
+                toggleSidebar();
+            }}
+            {...props}
+        >
+            <ViewVerticalIcon />
+            <span className="sr-only">Toggle Sidebar</span>
+        </Button>
+    );
+});
+SidebarTrigger.displayName = 'SidebarTrigger';
+
+const SidebarRail = React.forwardRef<
+    HTMLButtonElement,
+    React.ComponentProps<'button'>
+>(({ className, ...props }, ref) => {
+    const { toggleSidebar } = useSidebar();
+
+    return (
+        <button
+            ref={ref}
+            data-sidebar="rail"
+            aria-label="Toggle Sidebar"
+            tabIndex={-1}
+            onClick={toggleSidebar}
+            title="Toggle Sidebar"
+            className={cn(
+                'absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',
+                '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize',
+                '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
+                'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar',
+                '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
+                '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
+                className
+            )}
+            {...props}
+        />
+    );
+});
+SidebarRail.displayName = 'SidebarRail';
+
+const SidebarInset = React.forwardRef<
+    HTMLDivElement,
+    React.ComponentProps<'main'>
+>(({ className, ...props }, ref) => {
+    return (
+        <main
+            ref={ref}
+            className={cn(
+                'relative flex w-full flex-1 flex-col bg-background',
+                'md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow',
+                className
+            )}
+            {...props}
+        />
+    );
+});
+SidebarInset.displayName = 'SidebarInset';
+
+const SidebarInput = React.forwardRef<
+    React.ElementRef<typeof Input>,
+    React.ComponentProps<typeof Input>
+>(({ className, ...props }, ref) => {
+    return (
+        <Input
+            ref={ref}
+            data-sidebar="input"
+            className={cn(
+                'h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring',
+                className
+            )}
+            {...props}
+        />
+    );
+});
+SidebarInput.displayName = 'SidebarInput';
+
+const SidebarHeader = React.forwardRef<
+    HTMLDivElement,
+    React.ComponentProps<'div'>
+>(({ className, ...props }, ref) => {
+    return (
+        <div
+            ref={ref}
+            data-sidebar="header"
+            className={cn('flex flex-col gap-2 p-2', className)}
+            {...props}
+        />
+    );
+});
+SidebarHeader.displayName = 'SidebarHeader';
+
+const SidebarFooter = React.forwardRef<
+    HTMLDivElement,
+    React.ComponentProps<'div'>
+>(({ className, ...props }, ref) => {
+    return (
+        <div
+            ref={ref}
+            data-sidebar="footer"
+            className={cn('flex flex-col gap-2 p-2', className)}
+            {...props}
+        />
+    );
+});
+SidebarFooter.displayName = 'SidebarFooter';
+
+const SidebarSeparator = React.forwardRef<
+    React.ElementRef<typeof Separator>,
+    React.ComponentProps<typeof Separator>
+>(({ className, ...props }, ref) => {
+    return (
+        <Separator
+            ref={ref}
+            data-sidebar="separator"
+            className={cn('mx-2 w-auto bg-sidebar-border', className)}
+            {...props}
+        />
+    );
+});
+SidebarSeparator.displayName = 'SidebarSeparator';
+
+const SidebarContent = React.forwardRef<
+    HTMLDivElement,
+    React.ComponentProps<'div'>
+>(({ className, ...props }, ref) => {
+    return (
+        <div
+            ref={ref}
+            data-sidebar="content"
+            className={cn(
+                'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden',
+                className
+            )}
+            {...props}
+        />
+    );
+});
+SidebarContent.displayName = 'SidebarContent';
+
+const SidebarGroup = React.forwardRef<
+    HTMLDivElement,
+    React.ComponentProps<'div'>
+>(({ className, ...props }, ref) => {
+    return (
+        <div
+            ref={ref}
+            data-sidebar="group"
+            className={cn(
+                'relative flex w-full min-w-0 flex-col p-2',
+                className
+            )}
+            {...props}
+        />
+    );
+});
+SidebarGroup.displayName = 'SidebarGroup';
+
+const SidebarGroupLabel = React.forwardRef<
+    HTMLDivElement,
+    React.ComponentProps<'div'> & { asChild?: boolean }
+>(({ className, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'div';
+
+    return (
+        <Comp
+            ref={ref}
+            data-sidebar="group-label"
+            className={cn(
+                'flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+                'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
+                className
+            )}
+            {...props}
+        />
+    );
+});
+SidebarGroupLabel.displayName = 'SidebarGroupLabel';
+
+const SidebarGroupAction = React.forwardRef<
+    HTMLButtonElement,
+    React.ComponentProps<'button'> & { asChild?: boolean }
+>(({ className, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+
+    return (
+        <Comp
+            ref={ref}
+            data-sidebar="group-action"
+            className={cn(
+                'absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+                // Increases the hit area of the button on mobile.
+                'after:absolute after:-inset-2 after:md:hidden',
+                'group-data-[collapsible=icon]:hidden',
+                className
+            )}
+            {...props}
+        />
+    );
+});
+SidebarGroupAction.displayName = 'SidebarGroupAction';
+
+const SidebarGroupContent = React.forwardRef<
+    HTMLDivElement,
+    React.ComponentProps<'div'>
+>(({ className, ...props }, ref) => (
+    <div
+        ref={ref}
+        data-sidebar="group-content"
+        className={cn('w-full text-sm', className)}
+        {...props}
+    />
+));
+SidebarGroupContent.displayName = 'SidebarGroupContent';
+
+const SidebarMenu = React.forwardRef<
+    HTMLUListElement,
+    React.ComponentProps<'ul'>
+>(({ className, ...props }, ref) => (
+    <ul
+        ref={ref}
+        data-sidebar="menu"
+        className={cn('flex w-full min-w-0 flex-col gap-1', className)}
+        {...props}
+    />
+));
+SidebarMenu.displayName = 'SidebarMenu';
+
+const SidebarMenuItem = React.forwardRef<
+    HTMLLIElement,
+    React.ComponentProps<'li'>
+>(({ className, ...props }, ref) => (
+    <li
+        ref={ref}
+        data-sidebar="menu-item"
+        className={cn('group/menu-item relative', className)}
+        {...props}
+    />
+));
+SidebarMenuItem.displayName = 'SidebarMenuItem';
+
+const sidebarMenuButtonVariants = cva(
+    'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+    {
+        variants: {
+            variant: {
+                default:
+                    'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+                outline:
+                    'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',
+            },
+            size: {
+                default: 'h-8 text-sm',
+                sm: 'h-7 text-xs',
+                lg: 'h-12 text-sm group-data-[collapsible=icon]:!p-0',
+            },
+        },
+        defaultVariants: {
+            variant: 'default',
+            size: 'default',
+        },
+    }
+);
+
+const SidebarMenuButton = React.forwardRef<
+    HTMLButtonElement,
+    React.ComponentProps<'button'> & {
+        asChild?: boolean;
+        isActive?: boolean;
+        tooltip?: string | React.ComponentProps<typeof TooltipContent>;
+    } & VariantProps<typeof sidebarMenuButtonVariants>
+>(
+    (
+        {
+            asChild = false,
+            isActive = false,
+            variant = 'default',
+            size = 'default',
+            tooltip,
+            className,
+            ...props
+        },
+        ref
+    ) => {
+        const Comp = asChild ? Slot : 'button';
+        const { isMobile, state } = useSidebar();
+
+        const button = (
+            <Comp
+                ref={ref}
+                data-sidebar="menu-button"
+                data-size={size}
+                data-active={isActive}
+                className={cn(
+                    sidebarMenuButtonVariants({ variant, size }),
+                    className
+                )}
+                {...props}
+            />
+        );
+
+        if (!tooltip) {
+            return button;
+        }
+
+        if (typeof tooltip === 'string') {
+            tooltip = {
+                children: tooltip,
+            };
+        }
+
+        return (
+            <Tooltip>
+                <TooltipTrigger asChild>{button}</TooltipTrigger>
+                <TooltipContent
+                    side="right"
+                    align="center"
+                    hidden={state !== 'collapsed' || isMobile}
+                    {...tooltip}
+                />
+            </Tooltip>
+        );
+    }
+);
+SidebarMenuButton.displayName = 'SidebarMenuButton';
+
+const SidebarMenuAction = React.forwardRef<
+    HTMLButtonElement,
+    React.ComponentProps<'button'> & {
+        asChild?: boolean;
+        showOnHover?: boolean;
+    }
+>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+
+    return (
+        <Comp
+            ref={ref}
+            data-sidebar="menu-action"
+            className={cn(
+                'absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0',
+                // Increases the hit area of the button on mobile.
+                'after:absolute after:-inset-2 after:md:hidden',
+                'peer-data-[size=sm]/menu-button:top-1',
+                'peer-data-[size=default]/menu-button:top-1.5',
+                'peer-data-[size=lg]/menu-button:top-2.5',
+                'group-data-[collapsible=icon]:hidden',
+                showOnHover &&
+                    'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0',
+                className
+            )}
+            {...props}
+        />
+    );
+});
+SidebarMenuAction.displayName = 'SidebarMenuAction';
+
+const SidebarMenuBadge = React.forwardRef<
+    HTMLDivElement,
+    React.ComponentProps<'div'>
+>(({ className, ...props }, ref) => (
+    <div
+        ref={ref}
+        data-sidebar="menu-badge"
+        className={cn(
+            'pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground',
+            'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
+            'peer-data-[size=sm]/menu-button:top-1',
+            'peer-data-[size=default]/menu-button:top-1.5',
+            'peer-data-[size=lg]/menu-button:top-2.5',
+            'group-data-[collapsible=icon]:hidden',
+            className
+        )}
+        {...props}
+    />
+));
+SidebarMenuBadge.displayName = 'SidebarMenuBadge';
+
+const SidebarMenuSkeleton = React.forwardRef<
+    HTMLDivElement,
+    React.ComponentProps<'div'> & {
+        showIcon?: boolean;
+    }
+>(({ className, showIcon = false, ...props }, ref) => {
+    // Random width between 50 to 90%.
+    const width = React.useMemo(() => {
+        return `${Math.floor(Math.random() * 40) + 50}%`;
+    }, []);
+
+    return (
+        <div
+            ref={ref}
+            data-sidebar="menu-skeleton"
+            className={cn(
+                'flex h-8 items-center gap-2 rounded-md px-2',
+                className
+            )}
+            {...props}
+        >
+            {showIcon && (
+                <Skeleton
+                    className="size-4 rounded-md"
+                    data-sidebar="menu-skeleton-icon"
+                />
+            )}
+            <Skeleton
+                className="h-4 max-w-[--skeleton-width] flex-1"
+                data-sidebar="menu-skeleton-text"
+                style={
+                    {
+                        '--skeleton-width': width,
+                    } as React.CSSProperties
+                }
+            />
+        </div>
+    );
+});
+SidebarMenuSkeleton.displayName = 'SidebarMenuSkeleton';
+
+const SidebarMenuSub = React.forwardRef<
+    HTMLUListElement,
+    React.ComponentProps<'ul'>
+>(({ className, ...props }, ref) => (
+    <ul
+        ref={ref}
+        data-sidebar="menu-sub"
+        className={cn(
+            'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5',
+            'group-data-[collapsible=icon]:hidden',
+            className
+        )}
+        {...props}
+    />
+));
+SidebarMenuSub.displayName = 'SidebarMenuSub';
+
+const SidebarMenuSubItem = React.forwardRef<
+    HTMLLIElement,
+    React.ComponentProps<'li'>
+>(({ ...props }, ref) => <li ref={ref} {...props} />);
+SidebarMenuSubItem.displayName = 'SidebarMenuSubItem';
+
+const SidebarMenuSubButton = React.forwardRef<
+    HTMLAnchorElement,
+    React.ComponentProps<'a'> & {
+        asChild?: boolean;
+        size?: 'sm' | 'md';
+        isActive?: boolean;
+    }
+>(({ asChild = false, size = 'md', isActive, className, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'a';
+
+    return (
+        <Comp
+            ref={ref}
+            data-sidebar="menu-sub-button"
+            data-size={size}
+            data-active={isActive}
+            className={cn(
+                'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',
+                'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
+                size === 'sm' && 'text-xs',
+                size === 'md' && 'text-sm',
+                'group-data-[collapsible=icon]:hidden',
+                className
+            )}
+            {...props}
+        />
+    );
+});
+SidebarMenuSubButton.displayName = 'SidebarMenuSubButton';
+
+export {
+    Sidebar,
+    SidebarContent,
+    SidebarFooter,
+    SidebarGroup,
+    SidebarGroupAction,
+    SidebarGroupContent,
+    SidebarGroupLabel,
+    SidebarHeader,
+    SidebarInput,
+    SidebarInset,
+    SidebarMenu,
+    SidebarMenuAction,
+    SidebarMenuBadge,
+    SidebarMenuButton,
+    SidebarMenuItem,
+    SidebarMenuSkeleton,
+    SidebarMenuSub,
+    SidebarMenuSubButton,
+    SidebarMenuSubItem,
+    SidebarProvider,
+    SidebarRail,
+    SidebarSeparator,
+    SidebarTrigger,
+    SidebarContext,
+};
--- a/src/components/sidebar/use-sidebar.tsx
+++ b/src/components/sidebar/use-sidebar.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import { SidebarContext } from './sidebar';
+
+export const useSidebar = () => {
+    const context = React.useContext(SidebarContext);
+    if (!context) {
+        throw new Error('useSidebar must be used within a SidebarProvider.');
+    }
+
+    return context;
+};
--- a/src/components/skeleton/skeleton.tsx
+++ b/src/components/skeleton/skeleton.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+function Skeleton({
+    className,
+    ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+    return (
+        <div
+            className={cn('animate-pulse rounded-md bg-primary/10', className)}
+            {...props}
+        />
+    );
+}
+
+export { Skeleton };
--- a/src/context/alert-context/alert-context.tsx
+++ b/src/context/alert-context/alert-context.tsx
@@ -0,0 +1,15 @@
+import { createContext, useContext } from 'react';
+import { emptyFn } from '@/lib/utils';
+import type { BaseAlertDialogProps } from '@/dialogs/base-alert-dialog/base-alert-dialog';
+
+export interface AlertContext {
+    showAlert: (params: BaseAlertDialogProps) => void;
+    closeAlert: () => void;
+}
+
+export const alertContext = createContext<AlertContext>({
+    closeAlert: emptyFn,
+    showAlert: emptyFn,
+});
+
+export const useAlert = () => useContext(alertContext);
--- a/src/context/alert-context/alert-provider.tsx
+++ b/src/context/alert-context/alert-provider.tsx
@@ -0,0 +1,36 @@
+import React, { useCallback, useState } from 'react';
+import type { AlertContext } from './alert-context';
+import { alertContext } from './alert-context';
+import type { BaseAlertDialogProps } from '@/dialogs/base-alert-dialog/base-alert-dialog';
+import { BaseAlertDialog } from '@/dialogs/base-alert-dialog/base-alert-dialog';
+
+export const AlertProvider: React.FC<React.PropsWithChildren> = ({
+    children,
+}) => {
+    const [showAlert, setShowAlert] = useState(false);
+    const [alertParams, setAlertParams] = useState<BaseAlertDialogProps>({
+        title: '',
+    });
+    const showAlertHandler: AlertContext['showAlert'] = useCallback(
+        (params) => {
+            setAlertParams(params);
+            setShowAlert(true);
+        },
+        [setShowAlert, setAlertParams]
+    );
+    const closeAlertHandler = useCallback(() => {
+        setShowAlert(false);
+    }, [setShowAlert]);
+
+    return (
+        <alertContext.Provider
+            value={{
+                showAlert: showAlertHandler,
+                closeAlert: closeAlertHandler,
+            }}
+        >
+            {children}
+            <BaseAlertDialog dialog={{ open: showAlert }} {...alertParams} />
+        </alertContext.Provider>
+    );
+};
--- a/src/context/canvas-context/canvas-context.tsx
+++ b/src/context/canvas-context/canvas-context.tsx
@@ -0,0 +1,22 @@
+import { createContext } from 'react';
+import { emptyFn } from '@/lib/utils';
+import type { Graph } from '@/lib/graph';
+import { createGraph } from '@/lib/graph';
+
+export interface CanvasContext {
+    reorderTables: (options?: { updateHistory?: boolean }) => void;
+    fitView: (options?: {
+        duration?: number;
+        padding?: number;
+        maxZoom?: number;
+    }) => void;
+    setOverlapGraph: (graph: Graph<string>) => void;
+    overlapGraph: Graph<string>;
+}
+
+export const canvasContext = createContext<CanvasContext>({
+    reorderTables: emptyFn,
+    fitView: emptyFn,
+    setOverlapGraph: emptyFn,
+    overlapGraph: createGraph(),
+});
--- a/src/context/canvas-context/canvas-provider.tsx
+++ b/src/context/canvas-context/canvas-provider.tsx
@@ -0,0 +1,85 @@
+import React, { type ReactNode, useCallback, useState } from 'react';
+import { canvasContext } from './canvas-context';
+import { useChartDB } from '@/hooks/use-chartdb';
+import {
+    adjustTablePositions,
+    shouldShowTablesBySchemaFilter,
+} from '@/lib/domain/db-table';
+import { useReactFlow } from '@xyflow/react';
+import { findOverlappingTables } from '@/pages/editor-page/canvas/canvas-utils';
+import type { Graph } from '@/lib/graph';
+import { createGraph } from '@/lib/graph';
+
+interface CanvasProviderProps {
+    children: ReactNode;
+}
+
+export const CanvasProvider = ({ children }: CanvasProviderProps) => {
+    const { tables, relationships, updateTablesState, filteredSchemas } =
+        useChartDB();
+    const { fitView } = useReactFlow();
+    const [overlapGraph, setOverlapGraph] =
+        useState<Graph<string>>(createGraph());
+
+    const reorderTables = useCallback(
+        (
+            options: { updateHistory?: boolean } = {
+                updateHistory: true,
+            }
+        ) => {
+            const newTables = adjustTablePositions({
+                relationships,
+                tables: tables.filter((table) =>
+                    shouldShowTablesBySchemaFilter(table, filteredSchemas)
+                ),
+                mode: 'all', // Use 'all' mode for manual reordering
+            });
+
+            const updatedOverlapGraph = findOverlappingTables({
+                tables: newTables,
+            });
+
+            updateTablesState(
+                (currentTables) =>
+                    currentTables.map((table) => {
+                        const newTable = newTables.find(
+                            (t) => t.id === table.id
+                        );
+                        return {
+                            id: table.id,
+                            x: newTable?.x ?? table.x,
+                            y: newTable?.y ?? table.y,
+                        };
+                    }),
+                {
+                    updateHistory: options.updateHistory ?? true,
+                    forceOverride: false,
+                }
+            );
+
+            setOverlapGraph(updatedOverlapGraph);
+
+            setTimeout(() => {
+                fitView({
+                    duration: 500,
+                    padding: 0.2,
+                    maxZoom: 0.8,
+                });
+            }, 500);
+        },
+        [filteredSchemas, relationships, tables, updateTablesState, fitView]
+    );
+
+    return (
+        <canvasContext.Provider
+            value={{
+                reorderTables,
+                fitView,
+                setOverlapGraph,
+                overlapGraph,
+            }}
+        >
+            {children}
+        </canvasContext.Provider>
+    );
+};
--- a/src/context/chartdb-context/chartdb-context.tsx
+++ b/src/context/chartdb-context/chartdb-context.tsx
@@ -10,6 +10,8 @@ import type { DatabaseEdition } from '@/lib/domain/database-edition';
 import type { DBSchema } from '@/lib/domain/db-schema';
 import type { DBDependency } from '@/lib/domain/db-dependency';
 import { EventEmitter } from 'ahooks/lib/useEventEmitter';
+import type { Area } from '@/lib/domain/area';
+import type { DBCustomType } from '@/lib/domain/db-custom-type';

 export type ChartDBEventType =
    | 'add_tables'
@@ -70,6 +72,8 @@ export interface ChartDBContext {
    schemas: DBSchema[];
    relationships: DBRelationship[];
    dependencies: DBDependency[];
+    areas: Area[];
+    customTypes: DBCustomType[];
    currentDiagram: Diagram;
    events: EventEmitter<ChartDBEvent>;
    readonly?: boolean;
@@ -84,6 +88,7 @@ export interface ChartDBContext {
        options?: { updateHistory: boolean }
    ) => Promise<void>;
    loadDiagram: (diagramId: string) => Promise<Diagram | undefined>;
+    loadDiagramFromData: (diagram: Diagram) => void;
    updateDiagramUpdatedAt: () => Promise<void>;
    clearDiagramData: () => Promise<void>;
    deleteDiagram: () => Promise<void>;
@@ -220,6 +225,58 @@ export interface ChartDBContext {
        dependency: Partial<DBDependency>,
        options?: { updateHistory: boolean }
    ) => Promise<void>;
+
+    // Area operations
+    createArea: (attributes?: Partial<Omit<Area, 'id'>>) => Promise<Area>;
+    addArea: (
+        area: Area,
+        options?: { updateHistory: boolean }
+    ) => Promise<void>;
+    addAreas: (
+        areas: Area[],
+        options?: { updateHistory: boolean }
+    ) => Promise<void>;
+    getArea: (id: string) => Area | null;
+    removeArea: (
+        id: string,
+        options?: { updateHistory: boolean }
+    ) => Promise<void>;
+    removeAreas: (
+        ids: string[],
+        options?: { updateHistory: boolean }
+    ) => Promise<void>;
+    updateArea: (
+        id: string,
+        area: Partial<Area>,
+        options?: { updateHistory: boolean }
+    ) => Promise<void>;
+
+    // Custom type operations
+    createCustomType: (
+        attributes?: Partial<Omit<DBCustomType, 'id'>>
+    ) => Promise<DBCustomType>;
+    addCustomType: (
+        customType: DBCustomType,
+        options?: { updateHistory: boolean }
+    ) => Promise<void>;
+    addCustomTypes: (
+        customTypes: DBCustomType[],
+        options?: { updateHistory: boolean }
+    ) => Promise<void>;
+    getCustomType: (id: string) => DBCustomType | null;
+    removeCustomType: (
+        id: string,
+        options?: { updateHistory: boolean }
+    ) => Promise<void>;
+    removeCustomTypes: (
+        ids: string[],
+        options?: { updateHistory: boolean }
+    ) => Promise<void>;
+    updateCustomType: (
+        id: string,
+        customType: Partial<DBCustomType>,
+        options?: { updateHistory: boolean }
+    ) => Promise<void>;
 }

 export const chartDBContext = createContext<ChartDBContext>({
@@ -229,6 +286,8 @@ export const chartDBContext = createContext<ChartDBContext>({
    tables: [],
    relationships: [],
    dependencies: [],
+    areas: [],
+    customTypes: [],
    schemas: [],
    filteredSchemas: [],
    filterSchemas: emptyFn,
@@ -246,6 +305,7 @@ export const chartDBContext = createContext<ChartDBContext>({
    updateDiagramName: emptyFn,
    updateDiagramUpdatedAt: emptyFn,
    loadDiagram: emptyFn,
+    loadDiagramFromData: emptyFn,
    clearDiagramData: emptyFn,
    deleteDiagram: emptyFn,

@@ -294,4 +354,22 @@ export const chartDBContext = createContext<ChartDBContext>({
    removeDependencies: emptyFn,
    addDependencies: emptyFn,
    updateDependency: emptyFn,
+
+    // Area operations
+    createArea: emptyFn,
+    addArea: emptyFn,
+    addAreas: emptyFn,
+    getArea: emptyFn,
+    removeArea: emptyFn,
+    removeAreas: emptyFn,
+    updateArea: emptyFn,
+
+    // Custom type operations
+    createCustomType: emptyFn,
+    addCustomType: emptyFn,
+    addCustomTypes: emptyFn,
+    getCustomType: emptyFn,
+    removeCustomType: emptyFn,
+    removeCustomTypes: emptyFn,
+    updateCustomType: emptyFn,
 });
--- a/src/context/chartdb-context/chartdb-provider.tsx
+++ b/src/context/chartdb-context/chartdb-provider.tsx
@@ -21,7 +21,14 @@ import { useLocalConfig } from '@/hooks/use-local-config';
 import { defaultSchemas } from '@/lib/data/default-schemas';
 import { useEventEmitter } from 'ahooks';
 import type { DBDependency } from '@/lib/domain/db-dependency';
+import type { Area } from '@/lib/domain/area';
 import { storageInitialValue } from '../storage-context/storage-context';
+import { useDiff } from '../diff-context/use-diff';
+import type { DiffCalculatedEvent } from '../diff-context/diff-context';
+import {
+    DBCustomTypeKind,
+    type DBCustomType,
+} from '@/lib/domain/db-custom-type';

 export interface ChartDBProviderProps {
    diagram?: Diagram;
@@ -30,7 +37,8 @@ export interface ChartDBProviderProps {

 export const ChartDBProvider: React.FC<
    React.PropsWithChildren<ChartDBProviderProps>
-> = ({ children, diagram, readonly }) => {
+> = ({ children, diagram, readonly: readonlyProp }) => {
+    const { hasDiff } = useDiff();
    let db = useStorage();
    const events = useEventEmitter<ChartDBEvent>();
    const { setSchemasFilter, schemasFilter } = useLocalConfig();
@@ -53,9 +61,37 @@ export const ChartDBProvider: React.FC<
    const [dependencies, setDependencies] = useState<DBDependency[]>(
        diagram?.dependencies ?? []
    );
+    const [areas, setAreas] = useState<Area[]>(diagram?.areas ?? []);
+    const [customTypes, setCustomTypes] = useState<DBCustomType[]>(
+        diagram?.customTypes ?? []
+    );
+    const { events: diffEvents } = useDiff();
+
+    const diffCalculatedHandler = useCallback((event: DiffCalculatedEvent) => {
+        const { tablesAdded, fieldsAdded, relationshipsAdded } = event.data;
+        setTables((tables) =>
+            [...tables, ...(tablesAdded ?? [])].map((table) => {
+                const fields = fieldsAdded.get(table.id);
+                return fields
+                    ? { ...table, fields: [...table.fields, ...fields] }
+                    : table;
+            })
+        );
+        setRelationships((relationships) => [
+            ...relationships,
+            ...(relationshipsAdded ?? []),
+        ]);
+    }, []);
+
+    diffEvents.useSubscription(diffCalculatedHandler);

    const defaultSchemaName = defaultSchemas[databaseType];

+    const readonly = useMemo(
+        () => readonlyProp ?? hasDiff ?? false,
+        [readonlyProp, hasDiff]
+    );
+
    if (readonly) {
        db = storageInitialValue;
    }
@@ -125,6 +161,8 @@ export const ChartDBProvider: React.FC<
            tables,
            relationships,
            dependencies,
+            areas,
+            customTypes,
        }),
        [
            diagramId,
@@ -134,6 +172,8 @@ export const ChartDBProvider: React.FC<
            tables,
            relationships,
            dependencies,
+            areas,
+            customTypes,
            diagramCreatedAt,
            diagramUpdatedAt,
        ]
@@ -145,6 +185,8 @@ export const ChartDBProvider: React.FC<
            setTables([]);
            setRelationships([]);
            setDependencies([]);
+            setAreas([]);
+            setCustomTypes([]);
            setDiagramUpdatedAt(updatedAt);

            resetRedoStack();
@@ -155,6 +197,8 @@ export const ChartDBProvider: React.FC<
                db.deleteDiagramTables(diagramId),
                db.deleteDiagramRelationships(diagramId),
                db.deleteDiagramDependencies(diagramId),
+                db.deleteDiagramAreas(diagramId),
+                db.deleteDiagramCustomTypes(diagramId),
            ]);
        }, [db, diagramId, resetRedoStack, resetUndoStack]);

@@ -167,6 +211,8 @@ export const ChartDBProvider: React.FC<
            setTables([]);
            setRelationships([]);
            setDependencies([]);
+            setAreas([]);
+            setCustomTypes([]);
            resetRedoStack();
            resetUndoStack();

@@ -175,6 +221,8 @@ export const ChartDBProvider: React.FC<
                db.deleteDiagramRelationships(diagramId),
                db.deleteDiagram(diagramId),
                db.deleteDiagramDependencies(diagramId),
+                db.deleteDiagramAreas(diagramId),
+                db.deleteDiagramCustomTypes(diagramId),
            ]);
        }, [db, diagramId, resetRedoStack, resetUndoStack]);

@@ -256,22 +304,27 @@ export const ChartDBProvider: React.FC<
    );

    const addTables: ChartDBContext['addTables'] = useCallback(
-        async (tables: DBTable[], options = { updateHistory: true }) => {
-            setTables((currentTables) => [...currentTables, ...tables]);
+        async (tablesToAdd: DBTable[], options = { updateHistory: true }) => {
+            setTables((currentTables) => [...currentTables, ...tablesToAdd]);
            const updatedAt = new Date();
            setDiagramUpdatedAt(updatedAt);
            await Promise.all([
                db.updateDiagram({ id: diagramId, attributes: { updatedAt } }),
-                ...tables.map((table) => db.addTable({ diagramId, table })),
+                ...tablesToAdd.map((table) =>
+                    db.addTable({ diagramId, table })
+                ),
            ]);

-            events.emit({ action: 'add_tables', data: { tables } });
+            events.emit({
+                action: 'add_tables',
+                data: { tables: tablesToAdd },
+            });

            if (options.updateHistory) {
                addUndoAction({
                    action: 'addTables',
-                    redoData: { tables },
-                    undoData: { tableIds: tables.map((t) => t.id) },
+                    redoData: { tables: tablesToAdd },
+                    undoData: { tableIds: tablesToAdd.map((t) => t.id) },
                });
                resetRedoStack();
            }
@@ -730,13 +783,23 @@ export const ChartDBProvider: React.FC<
            options = { updateHistory: true }
        ) => {
            const fields = getTable(tableId)?.fields ?? [];
-            setTables((tables) =>
-                tables.map((table) =>
-                    table.id === tableId
-                        ? { ...table, fields: [...table.fields, field] }
-                        : table
-                )
-            );
+            setTables((tables) => {
+                return tables.map((table) => {
+                    if (table.id === tableId) {
+                        db.updateTable({
+                            id: tableId,
+                            attributes: {
+                                ...table,
+                                fields: [...table.fields, field],
+                            },
+                        });
+
+                        return { ...table, fields: [...table.fields, field] };
+                    }
+
+                    return table;
+                });
+            });

            events.emit({
                action: 'add_field',
@@ -757,13 +820,6 @@ export const ChartDBProvider: React.FC<
            setDiagramUpdatedAt(updatedAt);
            await Promise.all([
                db.updateDiagram({ id: diagramId, attributes: { updatedAt } }),
-                db.updateTable({
-                    id: tableId,
-                    attributes: {
-                        ...table,
-                        fields: [...table.fields, field],
-                    },
-                }),
            ]);

            if (options.updateHistory) {
@@ -1336,15 +1392,133 @@ export const ChartDBProvider: React.FC<
        ]
    );

-    const loadDiagram: ChartDBContext['loadDiagram'] = useCallback(
-        async (diagramId: string) => {
-            const diagram = await db.getDiagram(diagramId, {
-                includeRelationships: true,
-                includeTables: true,
-                includeDependencies: true,
-            });
+    // Area operations
+    const addAreas: ChartDBContext['addAreas'] = useCallback(
+        async (areas: Area[], options = { updateHistory: true }) => {
+            setAreas((currentAreas) => [...currentAreas, ...areas]);

-            if (diagram) {
+            const updatedAt = new Date();
+            setDiagramUpdatedAt(updatedAt);
+
+            await Promise.all([
+                ...areas.map((area) => db.addArea({ diagramId, area })),
+                db.updateDiagram({ id: diagramId, attributes: { updatedAt } }),
+            ]);
+
+            if (options.updateHistory) {
+                addUndoAction({
+                    action: 'addAreas',
+                    redoData: { areas },
+                    undoData: { areaIds: areas.map((a) => a.id) },
+                });
+                resetRedoStack();
+            }
+        },
+        [db, diagramId, setAreas, addUndoAction, resetRedoStack]
+    );
+
+    const addArea: ChartDBContext['addArea'] = useCallback(
+        async (area: Area, options = { updateHistory: true }) => {
+            return addAreas([area], options);
+        },
+        [addAreas]
+    );
+
+    const createArea: ChartDBContext['createArea'] = useCallback(
+        async (attributes) => {
+            const area: Area = {
+                id: generateId(),
+                name: `Area ${areas.length + 1}`,
+                x: 0,
+                y: 0,
+                width: 300,
+                height: 200,
+                color: randomColor(),
+                ...attributes,
+            };
+
+            await addArea(area);
+
+            return area;
+        },
+        [areas, addArea]
+    );
+
+    const getArea: ChartDBContext['getArea'] = useCallback(
+        (id: string) => areas.find((area) => area.id === id) ?? null,
+        [areas]
+    );
+
+    const removeAreas: ChartDBContext['removeAreas'] = useCallback(
+        async (ids: string[], options = { updateHistory: true }) => {
+            const prevAreas = [
+                ...areas.filter((area) => ids.includes(area.id)),
+            ];
+
+            setAreas((areas) => areas.filter((area) => !ids.includes(area.id)));
+
+            const updatedAt = new Date();
+            setDiagramUpdatedAt(updatedAt);
+
+            await Promise.all([
+                ...ids.map((id) => db.deleteArea({ diagramId, id })),
+                db.updateDiagram({ id: diagramId, attributes: { updatedAt } }),
+            ]);
+
+            if (prevAreas.length > 0 && options.updateHistory) {
+                addUndoAction({
+                    action: 'removeAreas',
+                    redoData: { areaIds: ids },
+                    undoData: { areas: prevAreas },
+                });
+                resetRedoStack();
+            }
+        },
+        [db, diagramId, setAreas, areas, addUndoAction, resetRedoStack]
+    );
+
+    const removeArea: ChartDBContext['removeArea'] = useCallback(
+        async (id: string, options = { updateHistory: true }) => {
+            return removeAreas([id], options);
+        },
+        [removeAreas]
+    );
+
+    const updateArea: ChartDBContext['updateArea'] = useCallback(
+        async (
+            id: string,
+            area: Partial<Area>,
+            options = { updateHistory: true }
+        ) => {
+            const prevArea = getArea(id);
+
+            setAreas((areas) =>
+                areas.map((a) => (a.id === id ? { ...a, ...area } : a))
+            );
+
+            const updatedAt = new Date();
+            setDiagramUpdatedAt(updatedAt);
+
+            await Promise.all([
+                db.updateDiagram({ id: diagramId, attributes: { updatedAt } }),
+                db.updateArea({ id, attributes: area }),
+            ]);
+
+            if (!!prevArea && options.updateHistory) {
+                addUndoAction({
+                    action: 'updateArea',
+                    redoData: { areaId: id, area },
+                    undoData: { areaId: id, area: prevArea },
+                });
+                resetRedoStack();
+            }
+        },
+        [db, diagramId, setAreas, getArea, addUndoAction, resetRedoStack]
+    );
+
+    const loadDiagramFromData: ChartDBContext['loadDiagramFromData'] =
+        useCallback(
+            async (diagram) => {
                setDiagramId(diagram.id);
                setDiagramName(diagram.name);
                setDatabaseType(diagram.databaseType);
@@ -1352,26 +1526,189 @@ export const ChartDBProvider: React.FC<
                setTables(diagram?.tables ?? []);
                setRelationships(diagram?.relationships ?? []);
                setDependencies(diagram?.dependencies ?? []);
+                setAreas(diagram?.areas ?? []);
+                setCustomTypes(diagram?.customTypes ?? []);
                setDiagramCreatedAt(diagram.createdAt);
                setDiagramUpdatedAt(diagram.updatedAt);

                events.emit({ action: 'load_diagram', data: { diagram } });
+            },
+            [
+                setDiagramId,
+                setDiagramName,
+                setDatabaseType,
+                setDatabaseEdition,
+                setTables,
+                setRelationships,
+                setDependencies,
+                setAreas,
+                setCustomTypes,
+                setDiagramCreatedAt,
+                setDiagramUpdatedAt,
+                events,
+            ]
+        );
+
+    const loadDiagram: ChartDBContext['loadDiagram'] = useCallback(
+        async (diagramId: string) => {
+            const diagram = await db.getDiagram(diagramId, {
+                includeRelationships: true,
+                includeTables: true,
+                includeDependencies: true,
+                includeAreas: true,
+                includeCustomTypes: true,
+            });
+
+            if (diagram) {
+                loadDiagramFromData(diagram);
            }

            return diagram;
        },
+        [db, loadDiagramFromData]
+    );
+
+    // Custom type operations
+    const getCustomType: ChartDBContext['getCustomType'] = useCallback(
+        (id: string) => customTypes.find((type) => type.id === id) ?? null,
+        [customTypes]
+    );
+
+    const addCustomTypes: ChartDBContext['addCustomTypes'] = useCallback(
+        async (
+            customTypes: DBCustomType[],
+            options = { updateHistory: true }
+        ) => {
+            setCustomTypes((currentTypes) => [...currentTypes, ...customTypes]);
+            const updatedAt = new Date();
+            setDiagramUpdatedAt(updatedAt);
+
+            await Promise.all([
+                db.updateDiagram({ id: diagramId, attributes: { updatedAt } }),
+                ...customTypes.map((customType) =>
+                    db.addCustomType({ diagramId, customType })
+                ),
+            ]);
+
+            if (options.updateHistory) {
+                addUndoAction({
+                    action: 'addCustomTypes',
+                    redoData: { customTypes },
+                    undoData: { customTypeIds: customTypes.map((t) => t.id) },
+                });
+                resetRedoStack();
+            }
+        },
+        [db, diagramId, setCustomTypes, addUndoAction, resetRedoStack]
+    );
+
+    const addCustomType: ChartDBContext['addCustomType'] = useCallback(
+        async (customType: DBCustomType, options = { updateHistory: true }) => {
+            return addCustomTypes([customType], options);
+        },
+        [addCustomTypes]
+    );
+
+    const createCustomType: ChartDBContext['createCustomType'] = useCallback(
+        async (attributes) => {
+            const customType: DBCustomType = {
+                id: generateId(),
+                name: `type_${customTypes.length + 1}`,
+                kind: DBCustomTypeKind.enum,
+                values: [],
+                fields: [],
+                ...attributes,
+            };
+
+            await addCustomType(customType);
+            return customType;
+        },
+        [addCustomType, customTypes]
+    );
+
+    const removeCustomTypes: ChartDBContext['removeCustomTypes'] = useCallback(
+        async (ids, options = { updateHistory: true }) => {
+            const typesToRemove = ids
+                .map((id) => getCustomType(id))
+                .filter(Boolean) as DBCustomType[];
+
+            setCustomTypes((types) =>
+                types.filter((type) => !ids.includes(type.id))
+            );
+
+            const updatedAt = new Date();
+            setDiagramUpdatedAt(updatedAt);
+
+            await Promise.all([
+                db.updateDiagram({ id: diagramId, attributes: { updatedAt } }),
+                ...ids.map((id) => db.deleteCustomType({ diagramId, id })),
+            ]);
+
+            if (typesToRemove.length > 0 && options.updateHistory) {
+                addUndoAction({
+                    action: 'removeCustomTypes',
+                    redoData: {
+                        customTypeIds: ids,
+                    },
+                    undoData: {
+                        customTypes: typesToRemove,
+                    },
+                });
+                resetRedoStack();
+            }
+        },
        [
            db,
-            setDiagramId,
-            setDiagramName,
-            setDatabaseType,
-            setDatabaseEdition,
-            setTables,
-            setRelationships,
-            setDependencies,
-            setDiagramCreatedAt,
-            setDiagramUpdatedAt,
-            events,
+            diagramId,
+            setCustomTypes,
+            addUndoAction,
+            resetRedoStack,
+            getCustomType,
+        ]
+    );
+
+    const removeCustomType: ChartDBContext['removeCustomType'] = useCallback(
+        async (id: string, options = { updateHistory: true }) => {
+            return removeCustomTypes([id], options);
+        },
+        [removeCustomTypes]
+    );
+
+    const updateCustomType: ChartDBContext['updateCustomType'] = useCallback(
+        async (
+            id: string,
+            customType: Partial<DBCustomType>,
+            options = { updateHistory: true }
+        ) => {
+            const prevCustomType = getCustomType(id);
+            setCustomTypes((types) =>
+                types.map((t) => (t.id === id ? { ...t, ...customType } : t))
+            );
+
+            const updatedAt = new Date();
+            setDiagramUpdatedAt(updatedAt);
+
+            await Promise.all([
+                db.updateDiagram({ id: diagramId, attributes: { updatedAt } }),
+                db.updateCustomType({ id, attributes: customType }),
+            ]);
+
+            if (!!prevCustomType && options.updateHistory) {
+                addUndoAction({
+                    action: 'updateCustomType',
+                    redoData: { customTypeId: id, customType },
+                    undoData: { customTypeId: id, customType: prevCustomType },
+                });
+                resetRedoStack();
+            }
+        },
+        [
+            db,
+            setCustomTypes,
+            addUndoAction,
+            resetRedoStack,
+            getCustomType,
+            diagramId,
        ]
    );

@@ -1384,6 +1721,7 @@ export const ChartDBProvider: React.FC<
                tables,
                relationships,
                dependencies,
+                areas,
                currentDiagram,
                schemas,
                filteredSchemas,
@@ -1393,6 +1731,7 @@ export const ChartDBProvider: React.FC<
                updateDiagramId,
                updateDiagramName,
                loadDiagram,
+                loadDiagramFromData,
                updateDatabaseType,
                updateDatabaseEdition,
                clearDiagramData,
@@ -1430,6 +1769,21 @@ export const ChartDBProvider: React.FC<
                removeDependency,
                removeDependencies,
                updateDependency,
+                createArea,
+                addArea,
+                addAreas,
+                getArea,
+                removeArea,
+                removeAreas,
+                updateArea,
+                customTypes,
+                createCustomType,
+                addCustomType,
+                addCustomTypes,
+                getCustomType,
+                removeCustomType,
+                removeCustomTypes,
+                updateCustomType,
            }}
        >
            {children}
--- a/src/context/config-context/config-context.tsx
+++ b/src/context/config-context/config-context.tsx
@@ -4,7 +4,10 @@ import type { ChartDBConfig } from '@/lib/domain/config';

 export interface ConfigContext {
    config?: ChartDBConfig;
-    updateConfig: (config: Partial<ChartDBConfig>) => Promise<void>;
+    updateConfig: (params: {
+        config?: Partial<ChartDBConfig>;
+        updateFn?: (config: ChartDBConfig) => ChartDBConfig;
+    }) => Promise<void>;
 }

 export const ConfigContext = createContext<ConfigContext>({
--- a/src/context/config-context/config-provider.tsx
+++ b/src/context/config-context/config-provider.tsx
@@ -19,15 +19,29 @@ export const ConfigProvider: React.FC<React.PropsWithChildren> = ({
        loadConfig();
    }, [getConfig]);

-    const updateConfig: ConfigContext['updateConfig'] = async (
-        config: Partial<ChartDBConfig>
-    ) => {
-        await updateDataConfig(config);
-        setConfig((prevConfig) =>
-            prevConfig
-                ? { ...prevConfig, ...config }
-                : { ...{ defaultDiagramId: '' }, ...config }
-        );
+    const updateConfig: ConfigContext['updateConfig'] = async ({
+        config,
+        updateFn,
+    }) => {
+        const promise = new Promise<void>((resolve) => {
+            setConfig((prevConfig) => {
+                let baseConfig: ChartDBConfig = { defaultDiagramId: '' };
+                if (prevConfig) {
+                    baseConfig = prevConfig;
+                }
+
+                const updatedConfig = updateFn
+                    ? updateFn(baseConfig)
+                    : { ...baseConfig, ...config };
+
+                updateDataConfig(updatedConfig).then(() => {
+                    resolve();
+                });
+                return updatedConfig;
+            });
+        });
+
+        return promise;
    };

    return (
--- a/src/context/dialog-context/dialog-context.tsx
+++ b/src/context/dialog-context/dialog-context.tsx
@@ -1,32 +1,37 @@
 import { createContext } from 'react';
 import { emptyFn } from '@/lib/utils';
-import type { BaseAlertDialogProps } from '@/dialogs/base-alert-dialog/base-alert-dialog';
 import type { TableSchemaDialogProps } from '@/dialogs/table-schema-dialog/table-schema-dialog';
 import type { ImportDatabaseDialogProps } from '@/dialogs/import-database-dialog/import-database-dialog';
 import type { ExportSQLDialogProps } from '@/dialogs/export-sql-dialog/export-sql-dialog';
 import type { ExportImageDialogProps } from '@/dialogs/export-image-dialog/export-image-dialog';
 import type { ExportDiagramDialogProps } from '@/dialogs/export-diagram-dialog/export-diagram-dialog';
 import type { ImportDiagramDialogProps } from '@/dialogs/import-diagram-dialog/import-diagram-dialog';
+import type { CreateRelationshipDialogProps } from '@/dialogs/create-relationship-dialog/create-relationship-dialog';
+import type { ImportDBMLDialogProps } from '@/dialogs/import-dbml-dialog/import-dbml-dialog';
+import type { OpenDiagramDialogProps } from '@/dialogs/open-diagram-dialog/open-diagram-dialog';
+import type { CreateDiagramDialogProps } from '@/dialogs/create-diagram-dialog/create-diagram-dialog';

 export interface DialogContext {
    // Create diagram dialog
-    openCreateDiagramDialog: () => void;
+    openCreateDiagramDialog: (
+        params?: Omit<CreateDiagramDialogProps, 'dialog'>
+    ) => void;
    closeCreateDiagramDialog: () => void;

    // Open diagram dialog
-    openOpenDiagramDialog: () => void;
+    openOpenDiagramDialog: (
+        params?: Omit<OpenDiagramDialogProps, 'dialog'>
+    ) => void;
    closeOpenDiagramDialog: () => void;

    // Export SQL dialog
    openExportSQLDialog: (params: Omit<ExportSQLDialogProps, 'dialog'>) => void;
    closeExportSQLDialog: () => void;

-    // Alert dialog
-    showAlert: (params: BaseAlertDialogProps) => void;
-    closeAlert: () => void;
-
    // Create relationship dialog
-    openCreateRelationshipDialog: () => void;
+    openCreateRelationshipDialog: (
+        params?: Omit<CreateRelationshipDialogProps, 'dialog'>
+    ) => void;
    closeCreateRelationshipDialog: () => void;

    // Import database dialog
@@ -62,6 +67,12 @@ export interface DialogContext {
        params: Omit<ImportDiagramDialogProps, 'dialog'>
    ) => void;
    closeImportDiagramDialog: () => void;
+
+    // Import DBML dialog
+    openImportDBMLDialog: (
+        params?: Omit<ImportDBMLDialogProps, 'dialog'>
+    ) => void;
+    closeImportDBMLDialog: () => void;
 }

 export const dialogContext = createContext<DialogContext>({
@@ -71,8 +82,6 @@ export const dialogContext = createContext<DialogContext>({
    closeOpenDiagramDialog: emptyFn,
    openExportSQLDialog: emptyFn,
    closeExportSQLDialog: emptyFn,
-    closeAlert: emptyFn,
-    showAlert: emptyFn,
    closeCreateRelationshipDialog: emptyFn,
    openCreateRelationshipDialog: emptyFn,
    openImportDatabaseDialog: emptyFn,
@@ -87,4 +96,6 @@ export const dialogContext = createContext<DialogContext>({
    closeExportDiagramDialog: emptyFn,
    openImportDiagramDialog: emptyFn,
    closeImportDiagramDialog: emptyFn,
+    openImportDBMLDialog: emptyFn,
+    closeImportDBMLDialog: emptyFn,
 });
--- a/src/context/dialog-context/dialog-provider.tsx
+++ b/src/context/dialog-context/dialog-provider.tsx
@@ -1,13 +1,14 @@
 import React, { useCallback, useState } from 'react';
 import type { DialogContext } from './dialog-context';
 import { dialogContext } from './dialog-context';
+import type { CreateDiagramDialogProps } from '@/dialogs/create-diagram-dialog/create-diagram-dialog';
 import { CreateDiagramDialog } from '@/dialogs/create-diagram-dialog/create-diagram-dialog';
+import type { OpenDiagramDialogProps } from '@/dialogs/open-diagram-dialog/open-diagram-dialog';
 import { OpenDiagramDialog } from '@/dialogs/open-diagram-dialog/open-diagram-dialog';
 import type { ExportSQLDialogProps } from '@/dialogs/export-sql-dialog/export-sql-dialog';
 import { ExportSQLDialog } from '@/dialogs/export-sql-dialog/export-sql-dialog';
 import { DatabaseType } from '@/lib/domain/database-type';
-import type { BaseAlertDialogProps } from '@/dialogs/base-alert-dialog/base-alert-dialog';
-import { BaseAlertDialog } from '@/dialogs/base-alert-dialog/base-alert-dialog';
+import type { CreateRelationshipDialogProps } from '@/dialogs/create-relationship-dialog/create-relationship-dialog';
 import { CreateRelationshipDialog } from '@/dialogs/create-relationship-dialog/create-relationship-dialog';
 import type { ImportDatabaseDialogProps } from '@/dialogs/import-database-dialog/import-database-dialog';
 import { ImportDatabaseDialog } from '@/dialogs/import-database-dialog/import-database-dialog';
@@ -19,15 +20,50 @@ import type { ExportImageDialogProps } from '@/dialogs/export-image-dialog/expor
 import { ExportImageDialog } from '@/dialogs/export-image-dialog/export-image-dialog';
 import { ExportDiagramDialog } from '@/dialogs/export-diagram-dialog/export-diagram-dialog';
 import { ImportDiagramDialog } from '@/dialogs/import-diagram-dialog/import-diagram-dialog';
+import type { ImportDBMLDialogProps } from '@/dialogs/import-dbml-dialog/import-dbml-dialog';
+import { ImportDBMLDialog } from '@/dialogs/import-dbml-dialog/import-dbml-dialog';

 export const DialogProvider: React.FC<React.PropsWithChildren> = ({
    children,
 }) => {
    const [openNewDiagramDialog, setOpenNewDiagramDialog] = useState(false);
+    const [newDiagramDialogParams, setNewDiagramDialogParams] =
+        useState<Omit<CreateDiagramDialogProps, 'dialog'>>();
+    const openNewDiagramDialogHandler: DialogContext['openCreateDiagramDialog'] =
+        useCallback(
+            (props) => {
+                setNewDiagramDialogParams(props);
+                setOpenNewDiagramDialog(true);
+            },
+            [setOpenNewDiagramDialog]
+        );
+
    const [openOpenDiagramDialog, setOpenOpenDiagramDialog] = useState(false);
+    const [openDiagramDialogParams, setOpenDiagramDialogParams] =
+        useState<Omit<OpenDiagramDialogProps, 'dialog'>>();
+
+    const openOpenDiagramDialogHandler: DialogContext['openOpenDiagramDialog'] =
+        useCallback(
+            (props) => {
+                setOpenDiagramDialogParams(props);
+                setOpenOpenDiagramDialog(true);
+            },
+            [setOpenOpenDiagramDialog]
+        );

    const [openCreateRelationshipDialog, setOpenCreateRelationshipDialog] =
        useState(false);
+    const [createRelationshipDialogParams, setCreateRelationshipDialogParams] =
+        useState<Omit<CreateRelationshipDialogProps, 'dialog'>>();
+    const openCreateRelationshipDialogHandler: DialogContext['openCreateRelationshipDialog'] =
+        useCallback(
+            (params) => {
+                setCreateRelationshipDialogParams(params);
+                setOpenCreateRelationshipDialog(true);
+            },
+            [setOpenCreateRelationshipDialog]
+        );
+
    const [openStarUsDialog, setOpenStarUsDialog] = useState(false);

    // Export image dialog
@@ -88,7 +124,7 @@ export const DialogProvider: React.FC<React.PropsWithChildren> = ({
            [setOpenTableSchemaDialog]
        );

-    // Export image dialog
+    // Export diagram dialog
    const [openExportDiagramDialog, setOpenExportDiagramDialog] =
        useState(false);

@@ -96,35 +132,22 @@ export const DialogProvider: React.FC<React.PropsWithChildren> = ({
    const [openImportDiagramDialog, setOpenImportDiagramDialog] =
        useState(false);

-    // Alert dialog
-    const [showAlert, setShowAlert] = useState(false);
-    const [alertParams, setAlertParams] = useState<BaseAlertDialogProps>({
-        title: '',
-    });
-    const showAlertHandler: DialogContext['showAlert'] = useCallback(
-        (params) => {
-            setAlertParams(params);
-            setShowAlert(true);
-        },
-        [setShowAlert, setAlertParams]
-    );
-    const closeAlertHandler = useCallback(() => {
-        setShowAlert(false);
-    }, [setShowAlert]);
+    // Import DBML dialog
+    const [openImportDBMLDialog, setOpenImportDBMLDialog] = useState(false);
+    const [importDBMLDialogParams, setImportDBMLDialogParams] =
+        useState<Omit<ImportDBMLDialogProps, 'dialog'>>();

    return (
        <dialogContext.Provider
            value={{
-                openCreateDiagramDialog: () => setOpenNewDiagramDialog(true),
+                openCreateDiagramDialog: openNewDiagramDialogHandler,
                closeCreateDiagramDialog: () => setOpenNewDiagramDialog(false),
-                openOpenDiagramDialog: () => setOpenOpenDiagramDialog(true),
+                openOpenDiagramDialog: openOpenDiagramDialogHandler,
                closeOpenDiagramDialog: () => setOpenOpenDiagramDialog(false),
                openExportSQLDialog: openExportSQLDialogHandler,
                closeExportSQLDialog: () => setOpenExportSQLDialog(false),
-                showAlert: showAlertHandler,
-                closeAlert: closeAlertHandler,
-                openCreateRelationshipDialog: () =>
-                    setOpenCreateRelationshipDialog(true),
+                openCreateRelationshipDialog:
+                    openCreateRelationshipDialogHandler,
                closeCreateRelationshipDialog: () =>
                    setOpenCreateRelationshipDialog(false),
                openImportDatabaseDialog: openImportDatabaseDialogHandler,
@@ -142,18 +165,29 @@ export const DialogProvider: React.FC<React.PropsWithChildren> = ({
                openImportDiagramDialog: () => setOpenImportDiagramDialog(true),
                closeImportDiagramDialog: () =>
                    setOpenImportDiagramDialog(false),
+                openImportDBMLDialog: (params) => {
+                    setImportDBMLDialogParams(params);
+                    setOpenImportDBMLDialog(true);
+                },
+                closeImportDBMLDialog: () => setOpenImportDBMLDialog(false),
            }}
        >
            {children}
-            <CreateDiagramDialog dialog={{ open: openNewDiagramDialog }} />
-            <OpenDiagramDialog dialog={{ open: openOpenDiagramDialog }} />
+            <CreateDiagramDialog
+                dialog={{ open: openNewDiagramDialog }}
+                {...newDiagramDialogParams}
+            />
+            <OpenDiagramDialog
+                dialog={{ open: openOpenDiagramDialog }}
+                {...openDiagramDialogParams}
+            />
            <ExportSQLDialog
                dialog={{ open: openExportSQLDialog }}
                {...exportSQLDialogParams}
            />
-            <BaseAlertDialog dialog={{ open: showAlert }} {...alertParams} />
            <CreateRelationshipDialog
                dialog={{ open: openCreateRelationshipDialog }}
+                {...createRelationshipDialogParams}
            />
            <ImportDatabaseDialog
                dialog={{ open: openImportDatabaseDialog }}
@@ -170,6 +204,10 @@ export const DialogProvider: React.FC<React.PropsWithChildren> = ({
            />
            <ExportDiagramDialog dialog={{ open: openExportDiagramDialog }} />
            <ImportDiagramDialog dialog={{ open: openImportDiagramDialog }} />
+            <ImportDBMLDialog
+                dialog={{ open: openImportDBMLDialog }}
+                {...importDBMLDialogParams}
+            />
        </dialogContext.Provider>
    );
 };
--- a/src/context/diff-context/diff-context.tsx
+++ b/src/context/diff-context/diff-context.tsx
@@ -0,0 +1,79 @@
+import { createContext } from 'react';
+import type { Diagram } from '@/lib/domain/diagram';
+import type { DBTable } from '@/lib/domain/db-table';
+import type { EventEmitter } from 'ahooks/lib/useEventEmitter';
+import type { DBField } from '@/lib/domain/db-field';
+import type { DataType } from '@/lib/data/data-types/data-types';
+import type { DBRelationship } from '@/lib/domain/db-relationship';
+import type { DiffMap } from '@/lib/domain/diff/diff';
+
+export type DiffEventType = 'diff_calculated';
+
+export type DiffEventBase<T extends DiffEventType, D> = {
+    action: T;
+    data: D;
+};
+
+export type DiffCalculatedData = {
+    tablesAdded: DBTable[];
+    fieldsAdded: Map<string, DBField[]>;
+    relationshipsAdded: DBRelationship[];
+};
+
+export type DiffCalculatedEvent = DiffEventBase<
+    'diff_calculated',
+    DiffCalculatedData
+>;
+
+export type DiffEvent = DiffCalculatedEvent;
+
+export interface DiffContext {
+    newDiagram: Diagram | null;
+    originalDiagram: Diagram | null;
+    diffMap: DiffMap;
+    hasDiff: boolean;
+
+    calculateDiff: ({
+        diagram,
+        newDiagram,
+    }: {
+        diagram: Diagram;
+        newDiagram: Diagram;
+    }) => void;
+
+    // table diff
+    checkIfTableHasChange: ({ tableId }: { tableId: string }) => boolean;
+    checkIfNewTable: ({ tableId }: { tableId: string }) => boolean;
+    checkIfTableRemoved: ({ tableId }: { tableId: string }) => boolean;
+    getTableNewName: ({ tableId }: { tableId: string }) => string | null;
+    getTableNewColor: ({ tableId }: { tableId: string }) => string | null;
+
+    // field diff
+    checkIfFieldHasChange: ({
+        tableId,
+        fieldId,
+    }: {
+        tableId: string;
+        fieldId: string;
+    }) => boolean;
+    checkIfFieldRemoved: ({ fieldId }: { fieldId: string }) => boolean;
+    checkIfNewField: ({ fieldId }: { fieldId: string }) => boolean;
+    getFieldNewName: ({ fieldId }: { fieldId: string }) => string | null;
+    getFieldNewType: ({ fieldId }: { fieldId: string }) => DataType | null;
+
+    // relationship diff
+    checkIfNewRelationship: ({
+        relationshipId,
+    }: {
+        relationshipId: string;
+    }) => boolean;
+    checkIfRelationshipRemoved: ({
+        relationshipId,
+    }: {
+        relationshipId: string;
+    }) => boolean;
+
+    events: EventEmitter<DiffEvent>;
+}
+
+export const diffContext = createContext<DiffContext | undefined>(undefined);
--- a/src/context/diff-context/diff-provider.tsx
+++ b/src/context/diff-context/diff-provider.tsx
@@ -0,0 +1,376 @@
+import React, { useCallback } from 'react';
+import type {
+    DiffCalculatedData,
+    DiffContext,
+    DiffEvent,
+} from './diff-context';
+import { diffContext } from './diff-context';
+
+import {
+    generateDiff,
+    getDiffMapKey,
+} from '@/lib/domain/diff/diff-check/diff-check';
+import type { Diagram } from '@/lib/domain/diagram';
+import { useEventEmitter } from 'ahooks';
+import type { DBField } from '@/lib/domain/db-field';
+import type { DataType } from '@/lib/data/data-types/data-types';
+import type { DBRelationship } from '@/lib/domain/db-relationship';
+import type { ChartDBDiff, DiffMap } from '@/lib/domain/diff/diff';
+
+export const DiffProvider: React.FC<React.PropsWithChildren> = ({
+    children,
+}) => {
+    const [newDiagram, setNewDiagram] = React.useState<Diagram | null>(null);
+    const [originalDiagram, setOriginalDiagram] =
+        React.useState<Diagram | null>(null);
+    const [diffMap, setDiffMap] = React.useState<DiffMap>(
+        new Map<string, ChartDBDiff>()
+    );
+    const [tablesChanged, setTablesChanged] = React.useState<
+        Map<string, boolean>
+    >(new Map<string, boolean>());
+    const [fieldsChanged, setFieldsChanged] = React.useState<
+        Map<string, boolean>
+    >(new Map<string, boolean>());
+
+    const events = useEventEmitter<DiffEvent>();
+
+    const generateNewFieldsMap = useCallback(
+        ({
+            diffMap,
+            newDiagram,
+        }: {
+            diffMap: DiffMap;
+            newDiagram: Diagram;
+        }) => {
+            const newFieldsMap = new Map<string, DBField[]>();
+
+            diffMap.forEach((diff) => {
+                if (diff.object === 'field' && diff.type === 'added') {
+                    const field = newDiagram?.tables
+                        ?.find((table) => table.id === diff.tableId)
+                        ?.fields.find((f) => f.id === diff.newField.id);
+
+                    if (field) {
+                        newFieldsMap.set(diff.tableId, [
+                            ...(newFieldsMap.get(diff.tableId) ?? []),
+                            field,
+                        ]);
+                    }
+                }
+            });
+
+            return newFieldsMap;
+        },
+        []
+    );
+
+    const findNewRelationships = useCallback(
+        ({
+            diffMap,
+            newDiagram,
+        }: {
+            diffMap: DiffMap;
+            newDiagram: Diagram;
+        }) => {
+            const relationships: DBRelationship[] = [];
+            diffMap.forEach((diff) => {
+                if (diff.object === 'relationship' && diff.type === 'added') {
+                    const relationship = newDiagram?.relationships?.find(
+                        (rel) => rel.id === diff.newRelationship.id
+                    );
+
+                    if (relationship) {
+                        relationships.push(relationship);
+                    }
+                }
+            });
+
+            return relationships;
+        },
+        []
+    );
+
+    const generateDiffCalculatedData = useCallback(
+        ({
+            newDiagram,
+            diffMap,
+        }: {
+            newDiagram: Diagram;
+            diffMap: DiffMap;
+        }): DiffCalculatedData => {
+            return {
+                tablesAdded:
+                    newDiagram?.tables?.filter((table) => {
+                        const tableKey = getDiffMapKey({
+                            diffObject: 'table',
+                            objectId: table.id,
+                        });
+
+                        return (
+                            diffMap.has(tableKey) &&
+                            diffMap.get(tableKey)?.type === 'added'
+                        );
+                    }) ?? [],
+
+                fieldsAdded: generateNewFieldsMap({
+                    diffMap: diffMap,
+                    newDiagram: newDiagram,
+                }),
+                relationshipsAdded: findNewRelationships({
+                    diffMap: diffMap,
+                    newDiagram: newDiagram,
+                }),
+            };
+        },
+        [findNewRelationships, generateNewFieldsMap]
+    );
+
+    const calculateDiff: DiffContext['calculateDiff'] = useCallback(
+        ({ diagram, newDiagram: newDiagramArg }) => {
+            const {
+                diffMap: newDiffs,
+                changedTables: newChangedTables,
+                changedFields: newChangedFields,
+            } = generateDiff({ diagram, newDiagram: newDiagramArg });
+
+            setDiffMap(newDiffs);
+            setTablesChanged(newChangedTables);
+            setFieldsChanged(newChangedFields);
+            setNewDiagram(newDiagramArg);
+            setOriginalDiagram(diagram);
+
+            events.emit({
+                action: 'diff_calculated',
+                data: generateDiffCalculatedData({
+                    diffMap: newDiffs,
+                    newDiagram: newDiagramArg,
+                }),
+            });
+        },
+        [setDiffMap, events, generateDiffCalculatedData]
+    );
+
+    const getTableNewName = useCallback<DiffContext['getTableNewName']>(
+        ({ tableId }) => {
+            const tableNameKey = getDiffMapKey({
+                diffObject: 'table',
+                objectId: tableId,
+                attribute: 'name',
+            });
+
+            if (diffMap.has(tableNameKey)) {
+                const diff = diffMap.get(tableNameKey);
+
+                if (diff?.type === 'changed') {
+                    return diff.newValue as string;
+                }
+            }
+
+            return null;
+        },
+        [diffMap]
+    );
+
+    const getTableNewColor = useCallback<DiffContext['getTableNewColor']>(
+        ({ tableId }) => {
+            const tableColorKey = getDiffMapKey({
+                diffObject: 'table',
+                objectId: tableId,
+                attribute: 'color',
+            });
+
+            if (diffMap.has(tableColorKey)) {
+                const diff = diffMap.get(tableColorKey);
+
+                if (diff?.type === 'changed') {
+                    return diff.newValue as string;
+                }
+            }
+            return null;
+        },
+        [diffMap]
+    );
+
+    const checkIfTableHasChange = useCallback<
+        DiffContext['checkIfTableHasChange']
+    >(({ tableId }) => tablesChanged.get(tableId) ?? false, [tablesChanged]);
+
+    const checkIfNewTable = useCallback<DiffContext['checkIfNewTable']>(
+        ({ tableId }) => {
+            const tableKey = getDiffMapKey({
+                diffObject: 'table',
+                objectId: tableId,
+            });
+
+            return (
+                diffMap.has(tableKey) && diffMap.get(tableKey)?.type === 'added'
+            );
+        },
+        [diffMap]
+    );
+
+    const checkIfTableRemoved = useCallback<DiffContext['checkIfTableRemoved']>(
+        ({ tableId }) => {
+            const tableKey = getDiffMapKey({
+                diffObject: 'table',
+                objectId: tableId,
+            });
+
+            return (
+                diffMap.has(tableKey) &&
+                diffMap.get(tableKey)?.type === 'removed'
+            );
+        },
+        [diffMap]
+    );
+
+    const checkIfFieldHasChange = useCallback<
+        DiffContext['checkIfFieldHasChange']
+    >(
+        ({ fieldId }) => {
+            return fieldsChanged.get(fieldId) ?? false;
+        },
+        [fieldsChanged]
+    );
+
+    const checkIfFieldRemoved = useCallback<DiffContext['checkIfFieldRemoved']>(
+        ({ fieldId }) => {
+            const fieldKey = getDiffMapKey({
+                diffObject: 'field',
+                objectId: fieldId,
+            });
+
+            return (
+                diffMap.has(fieldKey) &&
+                diffMap.get(fieldKey)?.type === 'removed'
+            );
+        },
+        [diffMap]
+    );
+
+    const checkIfNewField = useCallback<DiffContext['checkIfNewField']>(
+        ({ fieldId }) => {
+            const fieldKey = getDiffMapKey({
+                diffObject: 'field',
+                objectId: fieldId,
+            });
+
+            return (
+                diffMap.has(fieldKey) && diffMap.get(fieldKey)?.type === 'added'
+            );
+        },
+        [diffMap]
+    );
+
+    const getFieldNewName = useCallback<DiffContext['getFieldNewName']>(
+        ({ fieldId }) => {
+            const fieldKey = getDiffMapKey({
+                diffObject: 'field',
+                objectId: fieldId,
+                attribute: 'name',
+            });
+
+            if (diffMap.has(fieldKey)) {
+                const diff = diffMap.get(fieldKey);
+
+                if (diff?.type === 'changed') {
+                    return diff.newValue as string;
+                }
+            }
+
+            return null;
+        },
+        [diffMap]
+    );
+
+    const getFieldNewType = useCallback<DiffContext['getFieldNewType']>(
+        ({ fieldId }) => {
+            const fieldKey = getDiffMapKey({
+                diffObject: 'field',
+                objectId: fieldId,
+                attribute: 'type',
+            });
+
+            if (diffMap.has(fieldKey)) {
+                const diff = diffMap.get(fieldKey);
+
+                if (diff?.type === 'changed') {
+                    return diff.newValue as DataType;
+                }
+            }
+
+            return null;
+        },
+        [diffMap]
+    );
+
+    const checkIfNewRelationship = useCallback<
+        DiffContext['checkIfNewRelationship']
+    >(
+        ({ relationshipId }) => {
+            const relationshipKey = getDiffMapKey({
+                diffObject: 'relationship',
+                objectId: relationshipId,
+            });
+
+            return (
+                diffMap.has(relationshipKey) &&
+                diffMap.get(relationshipKey)?.type === 'added'
+            );
+        },
+        [diffMap]
+    );
+
+    const checkIfRelationshipRemoved = useCallback<
+        DiffContext['checkIfRelationshipRemoved']
+    >(
+        ({ relationshipId }) => {
+            const relationshipKey = getDiffMapKey({
+                diffObject: 'relationship',
+                objectId: relationshipId,
+            });
+
+            return (
+                diffMap.has(relationshipKey) &&
+                diffMap.get(relationshipKey)?.type === 'removed'
+            );
+        },
+        [diffMap]
+    );
+
+    return (
+        <diffContext.Provider
+            value={{
+                newDiagram,
+                originalDiagram,
+                diffMap,
+                hasDiff: diffMap.size > 0,
+
+                calculateDiff,
+
+                // table diff
+                getTableNewName,
+                checkIfNewTable,
+                checkIfTableRemoved,
+                checkIfTableHasChange,
+                getTableNewColor,
+
+                // field diff
+                checkIfFieldHasChange,
+                checkIfFieldRemoved,
+                checkIfNewField,
+                getFieldNewName,
+                getFieldNewType,
+
+                // relationship diff
+                checkIfNewRelationship,
+                checkIfRelationshipRemoved,
+
+                events,
+            }}
+        >
+            {children}
+        </diffContext.Provider>
+    );
+};
--- a/src/context/diff-context/use-diff.ts
+++ b/src/context/diff-context/use-diff.ts
@@ -0,0 +1,10 @@
+import { useContext } from 'react';
+import { diffContext } from './diff-context';
+
+export const useDiff = () => {
+    const context = useContext(diffContext);
+    if (context === undefined) {
+        throw new Error('useDiff must be used within an DiffProvider');
+    }
+    return context;
+};
--- a/src/context/export-image-context/export-image-context.tsx
+++ b/src/context/export-image-context/export-image-context.tsx
@@ -3,7 +3,14 @@ import { emptyFn } from '@/lib/utils';

 export type ImageType = 'png' | 'jpeg' | 'svg';
 export interface ExportImageContext {
-    exportImage: (type: ImageType, scale: number) => Promise<void>;
+    exportImage: (
+        type: ImageType,
+        options: {
+            includePatternBG: boolean;
+            transparent: boolean;
+            scale: number;
+        }
+    ) => Promise<void>;
 }

 export const exportImageContext = createContext<ExportImageContext>({
--- a/src/context/export-image-context/export-image-provider.tsx
+++ b/src/context/export-image-context/export-image-provider.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo, useEffect, useState } from 'react';
 import type { ExportImageContext, ImageType } from './export-image-context';
 import { exportImageContext } from './export-image-context';
 import { toJpeg, toPng, toSvg } from 'html-to-image';
@@ -6,6 +6,9 @@ import { useReactFlow } from '@xyflow/react';
 import { useChartDB } from '@/hooks/use-chartdb';
 import { useFullScreenLoader } from '@/hooks/use-full-screen-spinner';
 import { useTheme } from '@/hooks/use-theme';
+import logoDark from '@/assets/logo-dark.png';
+import logoLight from '@/assets/logo-light.png';
+import type { EffectiveTheme } from '../theme-context/theme-context';

 export const ExportImageProvider: React.FC<React.PropsWithChildren> = ({
    children,
@@ -14,6 +17,24 @@ export const ExportImageProvider: React.FC<React.PropsWithChildren> = ({
    const { setNodes, getViewport } = useReactFlow();
    const { effectiveTheme } = useTheme();
    const { diagramName } = useChartDB();
+    const [logoBase64, setLogoBase64] = useState<string>('');
+
+    useEffect(() => {
+        // Convert logo to base64 on component mount
+        const img = new Image();
+        img.src = effectiveTheme === 'light' ? logoLight : logoDark;
+        img.onload = () => {
+            const canvas = document.createElement('canvas');
+            canvas.width = img.width;
+            canvas.height = img.height;
+            const ctx = canvas.getContext('2d');
+            if (ctx) {
+                ctx.drawImage(img, 0, 0);
+                const base64 = canvas.toDataURL('image/png');
+                setLogoBase64(base64);
+            }
+        };
+    }, [effectiveTheme]);

    const downloadImage = useCallback(
        (dataUrl: string, type: ImageType) => {
@@ -37,8 +58,16 @@ export const ExportImageProvider: React.FC<React.PropsWithChildren> = ({
        []
    );

+    const getBackgroundColor = useCallback(
+        (theme: EffectiveTheme, transparent: boolean): string => {
+            if (transparent) return 'transparent';
+            return theme === 'light' ? '#ffffff' : '#141414';
+        },
+        []
+    );
+
    const exportImage: ExportImageContext['exportImage'] = useCallback(
-        async (type, scale = 1) => {
+        async (type, { includePatternBG, transparent, scale }) => {
            showLoader({
                animated: false,
            });
@@ -94,50 +123,59 @@ export const ExportImageProvider: React.FC<React.PropsWithChildren> = ({
                    defs.innerHTML = markerDefs.innerHTML;
                }

-                const pattern = document.createElementNS(
-                    'http://www.w3.org/2000/svg',
-                    'pattern'
-                );
-                pattern.setAttribute('id', 'background-pattern');
-                pattern.setAttribute('width', String(16 * viewport.zoom));
-                pattern.setAttribute('height', String(16 * viewport.zoom));
-                pattern.setAttribute('patternUnits', 'userSpaceOnUse');
-                pattern.setAttribute(
-                    'patternTransform',
-                    `translate(${viewport.x % (16 * viewport.zoom)} ${viewport.y % (16 * viewport.zoom)})`
-                );
+                if (includePatternBG) {
+                    const pattern = document.createElementNS(
+                        'http://www.w3.org/2000/svg',
+                        'pattern'
+                    );
+                    pattern.setAttribute('id', 'background-pattern');
+                    pattern.setAttribute('width', String(16 * viewport.zoom));
+                    pattern.setAttribute('height', String(16 * viewport.zoom));
+                    pattern.setAttribute('patternUnits', 'userSpaceOnUse');
+                    pattern.setAttribute(
+                        'patternTransform',
+                        `translate(${viewport.x % (16 * viewport.zoom)} ${viewport.y % (16 * viewport.zoom)})`
+                    );

-                const dot = document.createElementNS(
-                    'http://www.w3.org/2000/svg',
-                    'circle'
-                );
+                    const dot = document.createElementNS(
+                        'http://www.w3.org/2000/svg',
+                        'circle'
+                    );

-                const dotSize = viewport.zoom * 0.5;
-                dot.setAttribute('cx', String(viewport.zoom));
-                dot.setAttribute('cy', String(viewport.zoom));
-                dot.setAttribute('r', String(dotSize));
-                const dotColor =
-                    effectiveTheme === 'light' ? '#92939C' : '#777777';
-                dot.setAttribute('fill', dotColor);
+                    const dotSize = viewport.zoom * 0.5;
+                    dot.setAttribute('cx', String(viewport.zoom));
+                    dot.setAttribute('cy', String(viewport.zoom));
+                    dot.setAttribute('r', String(dotSize));
+                    const dotColor =
+                        effectiveTheme === 'light' ? '#92939C' : '#777777';
+                    dot.setAttribute('fill', dotColor);
+
+                    pattern.appendChild(dot);
+                    defs.appendChild(pattern);
+                }

-                pattern.appendChild(dot);
-                defs.appendChild(pattern);
                tempSvg.appendChild(defs);

                const backgroundRect = document.createElementNS(
                    'http://www.w3.org/2000/svg',
                    'rect'
                );
-                const padding = 2000;
-                backgroundRect.setAttribute('x', String(-viewport.x - padding));
-                backgroundRect.setAttribute('y', String(-viewport.y - padding));
+                const bgPadding = 2000;
+                backgroundRect.setAttribute(
+                    'x',
+                    String(-viewport.x - bgPadding)
+                );
+                backgroundRect.setAttribute(
+                    'y',
+                    String(-viewport.y - bgPadding)
+                );
                backgroundRect.setAttribute(
                    'width',
-                    String(reactFlowBounds.width + 2 * padding)
+                    String(reactFlowBounds.width + 2 * bgPadding)
                );
                backgroundRect.setAttribute(
                    'height',
-                    String(reactFlowBounds.height + 2 * padding)
+                    String(reactFlowBounds.height + 2 * bgPadding)
                );
                backgroundRect.setAttribute('fill', 'url(#background-pattern)');
                tempSvg.appendChild(backgroundRect);
@@ -148,27 +186,110 @@ export const ExportImageProvider: React.FC<React.PropsWithChildren> = ({
                );

                try {
-                    const dataUrl = await imageCreateFn(viewportElement, {
-                        ...(type === 'jpeg' || type === 'png'
-                            ? {
-                                  backgroundColor:
-                                      effectiveTheme === 'light'
-                                          ? '#ffffff'
-                                          : '#141414',
-                              }
-                            : {}),
-                        width: reactFlowBounds.width,
-                        height: reactFlowBounds.height,
-                        style: {
-                            width: `${reactFlowBounds.width}px`,
-                            height: `${reactFlowBounds.height}px`,
-                            transform: `translate(${viewport.x}px, ${viewport.y}px) scale(${viewport.zoom})`,
-                        },
-                        quality: 1,
-                        pixelRatio: scale,
-                    });
+                    // Handle SVG export differently
+                    if (type === 'svg') {
+                        const dataUrl = await imageCreateFn(viewportElement, {
+                            width: reactFlowBounds.width,
+                            height: reactFlowBounds.height,
+                            style: {
+                                width: `${reactFlowBounds.width}px`,
+                                height: `${reactFlowBounds.height}px`,
+                                transform: `translate(${viewport.x}px, ${viewport.y}px) scale(${viewport.zoom})`,
+                            },
+                            quality: 1,
+                            pixelRatio: scale,
+                            skipFonts: true,
+                        });
+                        downloadImage(dataUrl, type);
+                        return;
+                    }

-                    downloadImage(dataUrl, type);
+                    // For PNG and JPEG, continue with the watermark process
+                    const initialDataUrl = await imageCreateFn(
+                        viewportElement,
+                        {
+                            backgroundColor: getBackgroundColor(
+                                effectiveTheme,
+                                transparent
+                            ),
+                            width: reactFlowBounds.width,
+                            height: reactFlowBounds.height,
+                            style: {
+                                width: `${reactFlowBounds.width}px`,
+                                height: `${reactFlowBounds.height}px`,
+                                transform: `translate(${viewport.x}px, ${viewport.y}px) scale(${viewport.zoom})`,
+                            },
+                            quality: 1,
+                            pixelRatio: scale,
+                            skipFonts: true,
+                        }
+                    );
+
+                    // Create a canvas to combine the diagram and watermark
+                    const canvas = document.createElement('canvas');
+                    const ctx = canvas.getContext('2d');
+
+                    if (!ctx) {
+                        downloadImage(initialDataUrl, type);
+                        return;
+                    }
+
+                    // Set canvas size to match the export size
+                    canvas.width = reactFlowBounds.width * scale;
+                    canvas.height = reactFlowBounds.height * scale;
+
+                    // Load the exported diagram
+                    const diagramImage = new Image();
+                    diagramImage.src = initialDataUrl;
+
+                    await new Promise((resolve) => {
+                        diagramImage.onload = async () => {
+                            // Draw the diagram
+                            ctx.drawImage(diagramImage, 0, 0);
+
+                            // Calculate logo size
+                            const logoHeight = Math.max(
+                                24,
+                                Math.floor(canvas.width * 0.024)
+                            );
+                            const padding = Math.max(
+                                12,
+                                Math.floor(logoHeight * 0.5)
+                            );
+
+                            // Load and draw the logo
+                            const logoImage = new Image();
+                            logoImage.src = logoBase64;
+
+                            await new Promise((resolve) => {
+                                logoImage.onload = () => {
+                                    // Calculate logo width while maintaining aspect ratio
+                                    const logoWidth =
+                                        (logoImage.width / logoImage.height) *
+                                        logoHeight;
+
+                                    // Draw logo in bottom-left corner
+                                    ctx.globalAlpha = 0.9;
+                                    ctx.drawImage(
+                                        logoImage,
+                                        padding,
+                                        canvas.height - logoHeight - padding,
+                                        logoWidth,
+                                        logoHeight
+                                    );
+                                    ctx.globalAlpha = 1;
+                                    resolve(null);
+                                };
+                            });
+
+                            // Convert canvas to data URL
+                            const finalDataUrl = canvas.toDataURL(
+                                type === 'png' ? 'image/png' : 'image/jpeg'
+                            );
+                            downloadImage(finalDataUrl, type);
+                            resolve(null);
+                        };
+                    });
                } finally {
                    viewportElement.removeChild(tempSvg);
                    hideLoader();
@@ -176,6 +297,7 @@ export const ExportImageProvider: React.FC<React.PropsWithChildren> = ({
            }, 0);
        },
        [
+            getBackgroundColor,
            downloadImage,
            getViewport,
            hideLoader,
@@ -183,6 +305,7 @@ export const ExportImageProvider: React.FC<React.PropsWithChildren> = ({
            setNodes,
            showLoader,
            effectiveTheme,
+            logoBase64,
        ]
    );

--- a/src/context/history-context/history-provider.tsx
+++ b/src/context/history-context/history-provider.tsx
@@ -33,6 +33,12 @@ export const HistoryProvider: React.FC<React.PropsWithChildren> = ({
        removeIndex,
        updateIndex,
        removeRelationships,
+        addAreas,
+        removeAreas,
+        updateArea,
+        addCustomTypes,
+        removeCustomTypes,
+        updateCustomType,
    } = useChartDB();

    const redoActionHandlers = useMemo(
@@ -107,6 +113,28 @@ export const HistoryProvider: React.FC<React.PropsWithChildren> = ({
                    updateHistory: false,
                });
            },
+            addAreas: ({ redoData: { areas } }) => {
+                return addAreas(areas, { updateHistory: false });
+            },
+            removeAreas: ({ redoData: { areaIds } }) => {
+                return removeAreas(areaIds, { updateHistory: false });
+            },
+            updateArea: ({ redoData: { areaId, area } }) => {
+                return updateArea(areaId, area, { updateHistory: false });
+            },
+            addCustomTypes: ({ redoData: { customTypes } }) => {
+                return addCustomTypes(customTypes, { updateHistory: false });
+            },
+            removeCustomTypes: ({ redoData: { customTypeIds } }) => {
+                return removeCustomTypes(customTypeIds, {
+                    updateHistory: false,
+                });
+            },
+            updateCustomType: ({ redoData: { customTypeId, customType } }) => {
+                return updateCustomType(customTypeId, customType, {
+                    updateHistory: false,
+                });
+            },
        }),
        [
            addTables,
@@ -126,6 +154,12 @@ export const HistoryProvider: React.FC<React.PropsWithChildren> = ({
            addDependencies,
            removeDependencies,
            updateDependency,
+            addAreas,
+            removeAreas,
+            updateArea,
+            addCustomTypes,
+            removeCustomTypes,
+            updateCustomType,
        ]
    );

@@ -215,6 +249,28 @@ export const HistoryProvider: React.FC<React.PropsWithChildren> = ({
                    updateHistory: false,
                });
            },
+            addAreas: ({ undoData: { areaIds } }) => {
+                return removeAreas(areaIds, { updateHistory: false });
+            },
+            removeAreas: ({ undoData: { areas } }) => {
+                return addAreas(areas, { updateHistory: false });
+            },
+            updateArea: ({ undoData: { areaId, area } }) => {
+                return updateArea(areaId, area, { updateHistory: false });
+            },
+            addCustomTypes: ({ undoData: { customTypeIds } }) => {
+                return removeCustomTypes(customTypeIds, {
+                    updateHistory: false,
+                });
+            },
+            removeCustomTypes: ({ undoData: { customTypes } }) => {
+                return addCustomTypes(customTypes, { updateHistory: false });
+            },
+            updateCustomType: ({ undoData: { customTypeId, customType } }) => {
+                return updateCustomType(customTypeId, customType, {
+                    updateHistory: false,
+                });
+            },
        }),
        [
            addTables,
@@ -234,6 +290,12 @@ export const HistoryProvider: React.FC<React.PropsWithChildren> = ({
            addDependencies,
            removeDependencies,
            updateDependency,
+            addAreas,
+            removeAreas,
+            updateArea,
+            addCustomTypes,
+            removeCustomTypes,
+            updateCustomType,
        ]
    );

--- a/src/context/history-context/redo-undo-action.ts
+++ b/src/context/history-context/redo-undo-action.ts
@@ -4,6 +4,8 @@ import type { DBField } from '@/lib/domain/db-field';
 import type { DBIndex } from '@/lib/domain/db-index';
 import type { DBRelationship } from '@/lib/domain/db-relationship';
 import type { DBDependency } from '@/lib/domain/db-dependency';
+import type { Area } from '@/lib/domain/area';
+import type { DBCustomType } from '@/lib/domain/db-custom-type';

 type Action = keyof ChartDBContext;

@@ -123,6 +125,42 @@ type RedoUndoActionRemoveDependencies = RedoUndoActionBase<
    { dependencies: DBDependency[] }
 >;

+type RedoUndoActionAddAreas = RedoUndoActionBase<
+    'addAreas',
+    { areas: Area[] },
+    { areaIds: string[] }
+>;
+
+type RedoUndoActionUpdateArea = RedoUndoActionBase<
+    'updateArea',
+    { areaId: string; area: Partial<Area> },
+    { areaId: string; area: Partial<Area> }
+>;
+
+type RedoUndoActionRemoveAreas = RedoUndoActionBase<
+    'removeAreas',
+    { areaIds: string[] },
+    { areas: Area[] }
+>;
+
+type RedoUndoActionAddCustomTypes = RedoUndoActionBase<
+    'addCustomTypes',
+    { customTypes: DBCustomType[] },
+    { customTypeIds: string[] }
+>;
+
+type RedoUndoActionUpdateCustomType = RedoUndoActionBase<
+    'updateCustomType',
+    { customTypeId: string; customType: Partial<DBCustomType> },
+    { customTypeId: string; customType: Partial<DBCustomType> }
+>;
+
+type RedoUndoActionRemoveCustomTypes = RedoUndoActionBase<
+    'removeCustomTypes',
+    { customTypeIds: string[] },
+    { customTypes: DBCustomType[] }
+>;
+
 export type RedoUndoAction =
    | RedoUndoActionAddTables
    | RedoUndoActionRemoveTables
@@ -140,7 +178,13 @@ export type RedoUndoAction =
    | RedoUndoActionRemoveRelationships
    | RedoUndoActionAddDependencies
    | RedoUndoActionUpdateDependency
-    | RedoUndoActionRemoveDependencies;
+    | RedoUndoActionRemoveDependencies
+    | RedoUndoActionAddAreas
+    | RedoUndoActionUpdateArea
+    | RedoUndoActionRemoveAreas
+    | RedoUndoActionAddCustomTypes
+    | RedoUndoActionUpdateCustomType
+    | RedoUndoActionRemoveCustomTypes;

 export type RedoActionData<T extends Action> = Extract<
    RedoUndoAction,
--- a/src/context/keyboard-shortcuts-context/keyboard-shortcuts-provider.tsx
+++ b/src/context/keyboard-shortcuts-context/keyboard-shortcuts-provider.tsx
@@ -9,6 +9,7 @@ import { useHistory } from '@/hooks/use-history';
 import { useDialog } from '@/hooks/use-dialog';
 import { useChartDB } from '@/hooks/use-chartdb';
 import { useLayout } from '@/hooks/use-layout';
+import { useReactFlow } from '@xyflow/react';

 export const KeyboardShortcutsProvider: React.FC<React.PropsWithChildren> = ({
    children,
@@ -17,6 +18,7 @@ export const KeyboardShortcutsProvider: React.FC<React.PropsWithChildren> = ({
    const { openOpenDiagramDialog } = useDialog();
    const { updateDiagramUpdatedAt } = useChartDB();
    const { toggleSidePanel } = useLayout();
+    const { fitView } = useReactFlow();

    useHotkeys(
        keyboardShortcutsForOS[KeyboardShortcutAction.REDO].keyCombination,
@@ -37,7 +39,7 @@ export const KeyboardShortcutsProvider: React.FC<React.PropsWithChildren> = ({
    useHotkeys(
        keyboardShortcutsForOS[KeyboardShortcutAction.OPEN_DIAGRAM]
            .keyCombination,
-        openOpenDiagramDialog,
+        () => openOpenDiagramDialog(),
        {
            preventDefault: true,
        },
@@ -61,6 +63,20 @@ export const KeyboardShortcutsProvider: React.FC<React.PropsWithChildren> = ({
        },
        [toggleSidePanel]
    );
+    useHotkeys(
+        keyboardShortcutsForOS[KeyboardShortcutAction.SHOW_ALL].keyCombination,
+        () => {
+            fitView({
+                duration: 500,
+                padding: 0.1,
+                maxZoom: 0.8,
+            });
+        },
+        {
+            preventDefault: true,
+        },
+        [fitView]
+    );

    return (
        <keyboardShortcutsContext.Provider value={{}}>
--- a/src/context/keyboard-shortcuts-context/keyboard-shortcuts.ts
+++ b/src/context/keyboard-shortcuts-context/keyboard-shortcuts.ts
@@ -6,6 +6,8 @@ export enum KeyboardShortcutAction {
    OPEN_DIAGRAM = 'open_diagram',
    SAVE_DIAGRAM = 'save_diagram',
    TOGGLE_SIDE_PANEL = 'toggle_side_panel',
+    SHOW_ALL = 'show_all',
+    TOGGLE_THEME = 'toggle_theme',
 }

 export interface KeyboardShortcut {
@@ -55,6 +57,20 @@ export const keyboardShortcuts: Record<
        keyCombinationMac: 'meta+b',
        keyCombinationWin: 'ctrl+b',
    },
+    [KeyboardShortcutAction.SHOW_ALL]: {
+        action: KeyboardShortcutAction.SHOW_ALL,
+        keyCombinationLabelMac: '⌘0',
+        keyCombinationLabelWin: 'Ctrl+0',
+        keyCombinationMac: 'meta+0',
+        keyCombinationWin: 'ctrl+0',
+    },
+    [KeyboardShortcutAction.TOGGLE_THEME]: {
+        action: KeyboardShortcutAction.TOGGLE_THEME,
+        keyCombinationLabelMac: '⌘M',
+        keyCombinationLabelWin: 'Ctrl+M',
+        keyCombinationMac: 'meta+m',
+        keyCombinationWin: 'ctrl+m',
+    },
 };

 export interface KeyboardShortcutForOS {
--- a/src/context/layout-context/layout-context.tsx
+++ b/src/context/layout-context/layout-context.tsx
@@ -1,7 +1,12 @@
 import { emptyFn } from '@/lib/utils';
 import { createContext } from 'react';

-export type SidebarSection = 'tables' | 'relationships' | 'dependencies';
+export type SidebarSection =
+    | 'tables'
+    | 'relationships'
+    | 'dependencies'
+    | 'areas'
+    | 'customTypes';

 export interface LayoutContext {
    openedTableInSidebar: string | undefined;
@@ -16,6 +21,14 @@ export interface LayoutContext {
    openDependencyFromSidebar: (dependencyId: string) => void;
    closeAllDependenciesInSidebar: () => void;

+    openedAreaInSidebar: string | undefined;
+    openAreaFromSidebar: (areaId: string) => void;
+    closeAllAreasInSidebar: () => void;
+
+    openedCustomTypeInSidebar: string | undefined;
+    openCustomTypeFromSidebar: (customTypeId: string) => void;
+    closeAllCustomTypesInSidebar: () => void;
+
    selectedSidebarSection: SidebarSection;
    selectSidebarSection: (section: SidebarSection) => void;

@@ -41,6 +54,14 @@ export const layoutContext = createContext<LayoutContext>({
    openDependencyFromSidebar: emptyFn,
    closeAllDependenciesInSidebar: emptyFn,

+    openedAreaInSidebar: undefined,
+    openAreaFromSidebar: emptyFn,
+    closeAllAreasInSidebar: emptyFn,
+
+    openedCustomTypeInSidebar: undefined,
+    openCustomTypeFromSidebar: emptyFn,
+    closeAllCustomTypesInSidebar: emptyFn,
+
    selectSidebarSection: emptyFn,
    openTableFromSidebar: emptyFn,
    closeAllTablesInSidebar: emptyFn,
--- a/src/context/layout-context/layout-provider.tsx
+++ b/src/context/layout-context/layout-provider.tsx
@@ -14,6 +14,11 @@ export const LayoutProvider: React.FC<React.PropsWithChildren> = ({
        React.useState<string | undefined>();
    const [openedDependencyInSidebar, setOpenedDependencyInSidebar] =
        React.useState<string | undefined>();
+    const [openedAreaInSidebar, setOpenedAreaInSidebar] = React.useState<
+        string | undefined
+    >();
+    const [openedCustomTypeInSidebar, setOpenedCustomTypeInSidebar] =
+        React.useState<string | undefined>();
    const [selectedSidebarSection, setSelectedSidebarSection] =
        React.useState<SidebarSection>('tables');
    const [isSidePanelShowed, setIsSidePanelShowed] =
@@ -30,6 +35,12 @@ export const LayoutProvider: React.FC<React.PropsWithChildren> = ({
    const closeAllDependenciesInSidebar: LayoutContext['closeAllDependenciesInSidebar'] =
        () => setOpenedDependencyInSidebar('');

+    const closeAllAreasInSidebar: LayoutContext['closeAllAreasInSidebar'] =
+        () => setOpenedAreaInSidebar('');
+
+    const closeAllCustomTypesInSidebar: LayoutContext['closeAllCustomTypesInSidebar'] =
+        () => setOpenedCustomTypeInSidebar('');
+
    const hideSidePanel: LayoutContext['hideSidePanel'] = () =>
        setIsSidePanelShowed(false);

@@ -62,6 +73,21 @@ export const LayoutProvider: React.FC<React.PropsWithChildren> = ({
            setOpenedDependencyInSidebar(dependencyId);
        };

+    const openAreaFromSidebar: LayoutContext['openAreaFromSidebar'] = (
+        areaId
+    ) => {
+        showSidePanel();
+        setSelectedSidebarSection('areas');
+        setOpenedAreaInSidebar(areaId);
+    };
+
+    const openCustomTypeFromSidebar: LayoutContext['openCustomTypeFromSidebar'] =
+        (customTypeId) => {
+            showSidePanel();
+            setSelectedSidebarSection('customTypes');
+            setOpenedTableInSidebar(customTypeId);
+        };
+
    const openSelectSchema: LayoutContext['openSelectSchema'] = () =>
        setIsSelectSchemaOpen(true);

@@ -88,6 +114,12 @@ export const LayoutProvider: React.FC<React.PropsWithChildren> = ({
                openedDependencyInSidebar,
                openDependencyFromSidebar,
                closeAllDependenciesInSidebar,
+                openedAreaInSidebar,
+                openAreaFromSidebar,
+                closeAllAreasInSidebar,
+                openedCustomTypeInSidebar,
+                openCustomTypeFromSidebar,
+                closeAllCustomTypesInSidebar,
            }}
        >
            {children}
--- a/src/context/local-config-context/local-config-context.tsx
+++ b/src/context/local-config-context/local-config-context.tsx
@@ -32,6 +32,9 @@ export interface LocalConfigContext {

    showDependenciesOnCanvas: boolean;
    setShowDependenciesOnCanvas: (showDependenciesOnCanvas: boolean) => void;
+
+    showMiniMapOnCanvas: boolean;
+    setShowMiniMapOnCanvas: (showMiniMapOnCanvas: boolean) => void;
 }

 export const LocalConfigContext = createContext<LocalConfigContext>({
@@ -44,7 +47,7 @@ export const LocalConfigContext = createContext<LocalConfigContext>({
    schemasFilter: {},
    setSchemasFilter: emptyFn,

-    showCardinality: false,
+    showCardinality: true,
    setShowCardinality: emptyFn,

    hideMultiSchemaNotification: false,
@@ -58,4 +61,7 @@ export const LocalConfigContext = createContext<LocalConfigContext>({

    showDependenciesOnCanvas: false,
    setShowDependenciesOnCanvas: emptyFn,
+
+    showMiniMapOnCanvas: false,
+    setShowMiniMapOnCanvas: emptyFn,
 });
--- a/src/context/local-config-context/local-config-provider.tsx
+++ b/src/context/local-config-context/local-config-provider.tsx
@@ -11,6 +11,7 @@ const hideMultiSchemaNotificationKey = 'hide_multi_schema_notification';
 const githubRepoOpenedKey = 'github_repo_opened';
 const starUsDialogLastOpenKey = 'star_us_dialog_last_open';
 const showDependenciesOnCanvasKey = 'show_dependencies_on_canvas';
+const showMiniMapOnCanvasKey = 'show_minimap_on_canvas';

 export const LocalConfigProvider: React.FC<React.PropsWithChildren> = ({
    children,
@@ -30,7 +31,7 @@ export const LocalConfigProvider: React.FC<React.PropsWithChildren> = ({
    );

    const [showCardinality, setShowCardinality] = React.useState<boolean>(
-        (localStorage.getItem(showCardinalityKey) || 'false') === 'true'
+        (localStorage.getItem(showCardinalityKey) || 'true') === 'true'
    );

    const [hideMultiSchemaNotification, setHideMultiSchemaNotification] =
@@ -54,6 +55,11 @@ export const LocalConfigProvider: React.FC<React.PropsWithChildren> = ({
                'true'
        );

+    const [showMiniMapOnCanvas, setShowMiniMapOnCanvas] =
+        React.useState<boolean>(
+            (localStorage.getItem(showMiniMapOnCanvasKey) || 'true') === 'true'
+        );
+
    useEffect(() => {
        localStorage.setItem(
            starUsDialogLastOpenKey,
@@ -95,6 +101,13 @@ export const LocalConfigProvider: React.FC<React.PropsWithChildren> = ({
        );
    }, [showDependenciesOnCanvas]);

+    useEffect(() => {
+        localStorage.setItem(
+            showMiniMapOnCanvasKey,
+            showMiniMapOnCanvas.toString()
+        );
+    }, [showMiniMapOnCanvas]);
+
    return (
        <LocalConfigContext.Provider
            value={{
@@ -114,6 +127,8 @@ export const LocalConfigProvider: React.FC<React.PropsWithChildren> = ({
                setStarUsDialogLastOpen,
                showDependenciesOnCanvas,
                setShowDependenciesOnCanvas,
+                showMiniMapOnCanvas,
+                setShowMiniMapOnCanvas,
            }}
        >
            {children}
--- a/src/context/storage-context/storage-context.tsx
+++ b/src/context/storage-context/storage-context.tsx
@@ -5,6 +5,8 @@ import type { DBRelationship } from '@/lib/domain/db-relationship';
 import type { DBTable } from '@/lib/domain/db-table';
 import type { ChartDBConfig } from '@/lib/domain/config';
 import type { DBDependency } from '@/lib/domain/db-dependency';
+import type { Area } from '@/lib/domain/area';
+import type { DBCustomType } from '@/lib/domain/db-custom-type';

 export interface StorageContext {
    // Config operations
@@ -17,6 +19,8 @@ export interface StorageContext {
        includeTables?: boolean;
        includeRelationships?: boolean;
        includeDependencies?: boolean;
+        includeAreas?: boolean;
+        includeCustomTypes?: boolean;
    }) => Promise<Diagram[]>;
    getDiagram: (
        id: string,
@@ -24,6 +28,8 @@ export interface StorageContext {
            includeTables?: boolean;
            includeRelationships?: boolean;
            includeDependencies?: boolean;
+            includeAreas?: boolean;
+            includeCustomTypes?: boolean;
        }
    ) => Promise<Diagram | undefined>;
    updateDiagram: (params: {
@@ -86,6 +92,40 @@ export interface StorageContext {
    }) => Promise<void>;
    listDependencies: (diagramId: string) => Promise<DBDependency[]>;
    deleteDiagramDependencies: (diagramId: string) => Promise<void>;
+
+    // Area operations
+    addArea: (params: { diagramId: string; area: Area }) => Promise<void>;
+    getArea: (params: {
+        diagramId: string;
+        id: string;
+    }) => Promise<Area | undefined>;
+    updateArea: (params: {
+        id: string;
+        attributes: Partial<Area>;
+    }) => Promise<void>;
+    deleteArea: (params: { diagramId: string; id: string }) => Promise<void>;
+    listAreas: (diagramId: string) => Promise<Area[]>;
+    deleteDiagramAreas: (diagramId: string) => Promise<void>;
+
+    // Custom type operations
+    addCustomType: (params: {
+        diagramId: string;
+        customType: DBCustomType;
+    }) => Promise<void>;
+    getCustomType: (params: {
+        diagramId: string;
+        id: string;
+    }) => Promise<DBCustomType | undefined>;
+    updateCustomType: (params: {
+        id: string;
+        attributes: Partial<DBCustomType>;
+    }) => Promise<void>;
+    deleteCustomType: (params: {
+        diagramId: string;
+        id: string;
+    }) => Promise<void>;
+    listCustomTypes: (diagramId: string) => Promise<DBCustomType[]>;
+    deleteDiagramCustomTypes: (diagramId: string) => Promise<void>;
 }

 export const storageInitialValue: StorageContext = {
@@ -119,6 +159,21 @@ export const storageInitialValue: StorageContext = {
    deleteDependency: emptyFn,
    listDependencies: emptyFn,
    deleteDiagramDependencies: emptyFn,
+
+    addArea: emptyFn,
+    getArea: emptyFn,
+    updateArea: emptyFn,
+    deleteArea: emptyFn,
+    listAreas: emptyFn,
+    deleteDiagramAreas: emptyFn,
+
+    // Custom type operations
+    addCustomType: emptyFn,
+    getCustomType: emptyFn,
+    updateCustomType: emptyFn,
+    deleteCustomType: emptyFn,
+    listCustomTypes: emptyFn,
+    deleteDiagramCustomTypes: emptyFn,
 };

 export const storageContext =
--- a/src/context/storage-context/storage-provider.tsx
+++ b/src/context/storage-context/storage-provider.tsx
--- a/src/context/theme-context/theme-context.tsx
+++ b/src/context/theme-context/theme-context.tsx
@@ -1,8 +1,7 @@
 import { createContext } from 'react';
 import { emptyFn } from '@/lib/utils';
-
-export type Theme = 'light' | 'dark' | 'system';
-export type EffectiveTheme = Exclude<Theme, 'system'>;
+import type { Theme, EffectiveTheme } from '@/lib/types';
+export type { Theme, EffectiveTheme };

 export interface ThemeContext {
    theme: Theme;
--- a/src/context/theme-context/theme-provider.tsx
+++ b/src/context/theme-context/theme-provider.tsx
@@ -1,8 +1,13 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useCallback } from 'react';
 import type { EffectiveTheme } from './theme-context';
 import { ThemeContext } from './theme-context';
 import { useMediaQuery } from 'react-responsive';
 import { useLocalConfig } from '@/hooks/use-local-config';
+import { useHotkeys } from 'react-hotkeys-hook';
+import {
+    KeyboardShortcutAction,
+    keyboardShortcutsForOS,
+} from '../keyboard-shortcuts-context/keyboard-shortcuts';

 export const ThemeProvider: React.FC<React.PropsWithChildren> = ({
    children,
@@ -29,6 +34,24 @@ export const ThemeProvider: React.FC<React.PropsWithChildren> = ({
        }
    }, [effectiveTheme]);

+    const handleThemeToggle = useCallback(() => {
+        if (theme === 'system') {
+            setTheme(effectiveTheme === 'dark' ? 'light' : 'dark');
+        } else {
+            setTheme(theme === 'dark' ? 'light' : 'dark');
+        }
+    }, [theme, effectiveTheme, setTheme]);
+
+    useHotkeys(
+        keyboardShortcutsForOS[KeyboardShortcutAction.TOGGLE_THEME]
+            .keyCombination,
+        handleThemeToggle,
+        {
+            preventDefault: true,
+        },
+        [handleThemeToggle]
+    );
+
    return (
        <ThemeContext.Provider value={{ theme, setTheme, effectiveTheme }}>
            {children}
--- a/src/dialogs/base-alert-dialog/base-alert-dialog.tsx
+++ b/src/dialogs/base-alert-dialog/base-alert-dialog.tsx
@@ -10,7 +10,7 @@ import {
    AlertDialogTitle,
 } from '@/components/alert-dialog/alert-dialog';
 import type { AlertDialogProps } from '@radix-ui/react-alert-dialog';
-import { useDialog } from '@/hooks/use-dialog';
+import { useAlert } from '@/context/alert-context/alert-context';

 export interface BaseAlertDialogProps {
    title: string;
@@ -33,7 +33,7 @@ export const BaseAlertDialog: React.FC<BaseAlertDialogProps> = ({
    content,
    onClose,
 }) => {
-    const { closeAlert } = useDialog();
+    const { closeAlert } = useAlert();

    const closeAlertHandler = useCallback(() => {
        onClose?.();
--- a/src/dialogs/common/import-database/import-database.tsx
+++ b/src/dialogs/common/import-database/import-database.tsx
@@ -1,4 +1,10 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, {
+    Suspense,
+    useCallback,
+    useEffect,
+    useState,
+    useRef,
+} from 'react';
 import { Button } from '@/components/button/button';
 import {
    DialogClose,
@@ -8,31 +14,10 @@ import {
    DialogInternalContent,
    DialogTitle,
 } from '@/components/dialog/dialog';
-import { ToggleGroup, ToggleGroupItem } from '@/components/toggle/toggle-group';
-import { DatabaseType } from '@/lib/domain/database-type';
-import { databaseSecondaryLogoMap } from '@/lib/databases';
-import { CodeSnippet } from '@/components/code-snippet/code-snippet';
-import { Textarea } from '@/components/textarea/textarea';
+import type { DatabaseType } from '@/lib/domain/database-type';
+import { Editor } from '@/components/code-snippet/code-snippet';
 import type { DatabaseEdition } from '@/lib/domain/database-edition';
-import {
-    databaseEditionToImageMap,
-    databaseEditionToLabelMap,
-    databaseTypeToEditionMap,
-} from '@/lib/domain/database-edition';
-import {
-    Avatar,
-    AvatarFallback,
-    AvatarImage,
-} from '@/components/avatar/avatar';
-import { SSMSInfo } from './ssms-info/ssms-info';
 import { useTranslation } from 'react-i18next';
-import { Tabs, TabsList, TabsTrigger } from '@/components/tabs/tabs';
-import type { DatabaseClient } from '@/lib/domain/database-clients';
-import {
-    databaseClientToLabelMap,
-    databaseTypeToClientsMap,
-} from '@/lib/domain/database-clients';
-import type { ImportMetadataScripts } from '@/lib/data/import-metadata/scripts/scripts';
 import { ZoomableImage } from '@/components/zoomable-image/zoomable-image';
 import { useBreakpoint } from '@/hooks/use-breakpoint';
 import { Spinner } from '@/components/spinner/spinner';
@@ -40,9 +25,64 @@ import {
    fixMetadataJson,
    isStringMetadataJson,
 } from '@/lib/data/import-metadata/utils';
+import {
+    ResizableHandle,
+    ResizablePanel,
+    ResizablePanelGroup,
+} from '@/components/resizable/resizable';
+import { useTheme } from '@/hooks/use-theme';
+import type { OnChange } from '@monaco-editor/react';
+import { useDebounce } from '@/hooks/use-debounce-v2';
+import { InstructionsSection } from './instructions-section/instructions-section';
+import { parseSQLError } from '@/lib/data/sql-import';
+import type { editor } from 'monaco-editor';
+import { waitFor } from '@/lib/utils';

 const errorScriptOutputMessage =
-    'Invalid JSON. Please correct it or contact us at chartdb.io@gmail.com for help.';
+    'Invalid JSON. Please correct it or contact us at support@chartdb.io for help.';
+
+// Helper to detect if content is likely SQL DDL or JSON
+const detectContentType = (content: string): 'query' | 'ddl' | null => {
+    if (!content || content.trim().length === 0) return null;
+
+    // Common SQL DDL keywords
+    const ddlKeywords = [
+        'CREATE TABLE',
+        'ALTER TABLE',
+        'DROP TABLE',
+        'CREATE INDEX',
+        'CREATE VIEW',
+        'CREATE PROCEDURE',
+        'CREATE FUNCTION',
+        'CREATE SCHEMA',
+        'CREATE DATABASE',
+    ];
+
+    const upperContent = content.toUpperCase();
+
+    // Check for SQL DDL patterns
+    const hasDDLKeywords = ddlKeywords.some((keyword) =>
+        upperContent.includes(keyword)
+    );
+    if (hasDDLKeywords) return 'ddl';
+
+    // Check if it looks like JSON
+    try {
+        // Just check structure, don't need full parse for detection
+        if (
+            (content.trim().startsWith('{') && content.trim().endsWith('}')) ||
+            (content.trim().startsWith('[') && content.trim().endsWith(']'))
+        ) {
+            return 'query';
+        }
+    } catch (error) {
+        // Not valid JSON, might be partial
+        console.error('Error detecting content type:', error);
+    }
+
+    // If we can't confidently detect, return null
+    return null;
+};

 export interface ImportDatabaseProps {
    goBack?: () => void;
@@ -57,6 +97,8 @@ export interface ImportDatabaseProps {
    >;
    keepDialogAfterImport?: boolean;
    title: string;
+    importMethod: 'query' | 'ddl';
+    setImportMethod: (method: 'query' | 'ddl') => void;
 }

 export const ImportDatabase: React.FC<ImportDatabaseProps> = ({
@@ -70,32 +112,52 @@ export const ImportDatabase: React.FC<ImportDatabaseProps> = ({
    setDatabaseEdition,
    keepDialogAfterImport,
    title,
+    importMethod,
+    setImportMethod,
 }) => {
-    const databaseClients = databaseTypeToClientsMap[databaseType];
+    const { effectiveTheme } = useTheme();
    const [errorMessage, setErrorMessage] = useState('');
-    const [databaseClient, setDatabaseClient] = useState<
-        DatabaseClient | undefined
-    >();
-    const { t } = useTranslation();
-    const [importMetadataScripts, setImportMetadataScripts] =
-        useState<ImportMetadataScripts | null>(null);
+    const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null);

+    const { t } = useTranslation();
    const { isSm: isDesktop } = useBreakpoint('sm');

    const [showCheckJsonButton, setShowCheckJsonButton] = useState(false);
    const [isCheckingJson, setIsCheckingJson] = useState(false);
+    const [showSSMSInfoDialog, setShowSSMSInfoDialog] = useState(false);

    useEffect(() => {
-        const loadScripts = async () => {
-            const { importMetadataScripts } = await import(
-                '@/lib/data/import-metadata/scripts/scripts'
-            );
-            setImportMetadataScripts(importMetadataScripts);
-        };
-        loadScripts();
-    }, []);
+        setScriptResult('');
+        setErrorMessage('');
+        setShowCheckJsonButton(false);
+    }, [importMethod, setScriptResult]);

+    // Check if the ddl is valid
    useEffect(() => {
+        if (importMethod !== 'ddl') {
+            return;
+        }
+
+        if (!scriptResult.trim()) return;
+
+        parseSQLError({
+            sqlContent: scriptResult,
+            sourceDatabaseType: databaseType,
+        }).then((result) => {
+            if (result.success) {
+                setErrorMessage('');
+            } else if (!result.success && result.error) {
+                setErrorMessage(result.error);
+            }
+        });
+    }, [importMethod, scriptResult, databaseType]);
+
+    // Check if the script result is a valid JSON
+    useEffect(() => {
+        if (importMethod !== 'query') {
+            return;
+        }
+
        if (scriptResult.trim().length === 0) {
            setErrorMessage('');
            setShowCheckJsonButton(false);
@@ -115,7 +177,7 @@ export const ImportDatabase: React.FC<ImportDatabaseProps> = ({
            setErrorMessage(errorScriptOutputMessage);
            setShowCheckJsonButton(false);
        }
-    }, [scriptResult]);
+    }, [scriptResult, importMethod]);

    const handleImport = useCallback(() => {
        if (errorMessage.length === 0 && scriptResult.trim().length !== 0) {
@@ -123,30 +185,82 @@ export const ImportDatabase: React.FC<ImportDatabaseProps> = ({
        }
    }, [errorMessage.length, onImport, scriptResult]);

-    const handleInputChange = useCallback(
-        (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-            const inputValue = e.target.value;
-            setScriptResult(inputValue);
+    const formatEditor = useCallback(() => {
+        if (editorRef.current) {
+            setTimeout(() => {
+                editorRef.current
+                    ?.getAction('editor.action.formatDocument')
+                    ?.run();
+            }, 50);
+        }
+    }, []);
+
+    const handleInputChange: OnChange = useCallback(
+        (inputValue) => {
+            setScriptResult(inputValue ?? '');
+
+            // Automatically open SSMS info when input length is exactly 65535
+            if ((inputValue ?? '').length === 65535) {
+                setShowSSMSInfoDialog(true);
+            }
        },
        [setScriptResult]
    );

+    const debouncedHandleInputChange = useDebounce(handleInputChange, 500);
+
    const handleCheckJson = useCallback(async () => {
        setIsCheckingJson(true);

-        const fixedJson = await fixMetadataJson(scriptResult);
+        await waitFor(1000);
+        const fixedJson = fixMetadataJson(scriptResult);

        if (isStringMetadataJson(fixedJson)) {
            setScriptResult(fixedJson);
            setErrorMessage('');
+            formatEditor();
        } else {
            setScriptResult(fixedJson);
            setErrorMessage(errorScriptOutputMessage);
+            formatEditor();
        }

        setShowCheckJsonButton(false);
        setIsCheckingJson(false);
-    }, [scriptResult, setScriptResult]);
+    }, [scriptResult, setScriptResult, formatEditor]);
+
+    const detectAndSetImportMethod = useCallback(() => {
+        const content = editorRef.current?.getValue();
+        if (content && content.trim()) {
+            const detectedType = detectContentType(content);
+            if (detectedType && detectedType !== importMethod) {
+                setImportMethod(detectedType);
+            }
+        }
+    }, [setImportMethod, importMethod]);
+
+    const [editorDidMount, setEditorDidMount] = useState(false);
+
+    useEffect(() => {
+        if (editorRef.current && editorDidMount) {
+            editorRef.current.onDidPaste(() => {
+                setTimeout(() => {
+                    editorRef.current
+                        ?.getAction('editor.action.formatDocument')
+                        ?.run();
+                }, 0);
+                setTimeout(detectAndSetImportMethod, 0);
+            });
+        }
+    }, [detectAndSetImportMethod, editorDidMount]);
+
+    const handleEditorDidMount = useCallback(
+        (editor: editor.IStandaloneCodeEditor) => {
+            editorRef.current = editor;
+            setEditorDidMount(true);
+        },
+        []
+    );

    const renderHeader = useCallback(() => {
        return (
@@ -157,223 +271,131 @@ export const ImportDatabase: React.FC<ImportDatabaseProps> = ({
        );
    }, [title]);

+    const renderInstructions = useCallback(
+        () => (
+            <InstructionsSection
+                databaseType={databaseType}
+                importMethod={importMethod}
+                setDatabaseEdition={setDatabaseEdition}
+                setImportMethod={setImportMethod}
+                databaseEdition={databaseEdition}
+                setShowSSMSInfoDialog={setShowSSMSInfoDialog}
+                showSSMSInfoDialog={showSSMSInfoDialog}
+            />
+        ),
+        [
+            databaseType,
+            importMethod,
+            setDatabaseEdition,
+            setImportMethod,
+            databaseEdition,
+            setShowSSMSInfoDialog,
+            showSSMSInfoDialog,
+        ]
+    );
+
+    const renderOutputTextArea = useCallback(
+        () => (
+            <div className="flex size-full flex-col gap-1 overflow-hidden rounded-md border p-1">
+                <div className="w-full text-center text-xs text-muted-foreground">
+                    {importMethod === 'query'
+                        ? 'Smart Query Output'
+                        : 'SQL Script'}
+                </div>
+                <div className="flex-1 overflow-hidden">
+                    <Suspense fallback={<Spinner />}>
+                        <Editor
+                            value={scriptResult}
+                            onChange={debouncedHandleInputChange}
+                            language={importMethod === 'query' ? 'json' : 'sql'}
+                            loading={<Spinner />}
+                            onMount={handleEditorDidMount}
+                            theme={
+                                effectiveTheme === 'dark'
+                                    ? 'dbml-dark'
+                                    : 'dbml-light'
+                            }
+                            options={{
+                                formatOnPaste: true,
+                                minimap: { enabled: false },
+                                scrollBeyondLastLine: false,
+                                automaticLayout: true,
+                                glyphMargin: false,
+                                lineNumbers: 'on',
+                                guides: {
+                                    indentation: false,
+                                },
+                                folding: true,
+                                lineNumbersMinChars: 3,
+                                renderValidationDecorations: 'off',
+                                lineDecorationsWidth: 0,
+                                overviewRulerBorder: false,
+                                overviewRulerLanes: 0,
+                                hideCursorInOverviewRuler: true,
+                                contextmenu: false,
+
+                                scrollbar: {
+                                    vertical: 'hidden',
+                                    horizontal: 'hidden',
+                                    alwaysConsumeMouseWheel: false,
+                                },
+                            }}
+                            className="size-full min-h-40"
+                        />
+                    </Suspense>
+                </div>
+
+                {errorMessage ? (
+                    <div className="mt-2 flex shrink-0 items-center gap-2">
+                        <p className="text-xs text-red-700">{errorMessage}</p>
+                    </div>
+                ) : null}
+            </div>
+        ),
+        [
+            errorMessage,
+            scriptResult,
+            importMethod,
+            effectiveTheme,
+            debouncedHandleInputChange,
+            handleEditorDidMount,
+        ]
+    );
+
    const renderContent = useCallback(() => {
        return (
            <DialogInternalContent>
-                <div className="flex w-full flex-1 flex-col gap-6">
-                    {databaseTypeToEditionMap[databaseType].length > 0 ? (
-                        <div className="flex flex-col gap-1 md:flex-row">
-                            <p className="text-sm leading-6 text-muted-foreground">
-                                {t(
-                                    'new_diagram_dialog.import_database.database_edition'
-                                )}
-                            </p>
-                            <ToggleGroup
-                                type="single"
-                                className="ml-1 flex-wrap gap-2"
-                                value={
-                                    !databaseEdition
-                                        ? 'regular'
-                                        : databaseEdition
-                                }
-                                onValueChange={(value) => {
-                                    setDatabaseEdition(
-                                        value === 'regular'
-                                            ? undefined
-                                            : (value as DatabaseEdition)
-                                    );
-                                }}
-                            >
-                                <ToggleGroupItem
-                                    value="regular"
-                                    variant="outline"
-                                    className="h-6 gap-1 p-0 px-2 shadow-none"
-                                >
-                                    <Avatar className="size-4 rounded-none">
-                                        <AvatarImage
-                                            src={
-                                                databaseSecondaryLogoMap[
-                                                    databaseType
-                                                ]
-                                            }
-                                            alt="Regular"
-                                        />
-                                        <AvatarFallback>Regular</AvatarFallback>
-                                    </Avatar>
-                                    Regular
-                                </ToggleGroupItem>
-                                {databaseTypeToEditionMap[databaseType].map(
-                                    (edition) => (
-                                        <ToggleGroupItem
-                                            value={edition}
-                                            key={edition}
-                                            variant="outline"
-                                            className="h-6 gap-1 p-0 px-2 shadow-none"
-                                        >
-                                            <Avatar className="size-4">
-                                                <AvatarImage
-                                                    src={
-                                                        databaseEditionToImageMap[
-                                                            edition
-                                                        ]
-                                                    }
-                                                    alt={
-                                                        databaseEditionToLabelMap[
-                                                            edition
-                                                        ]
-                                                    }
-                                                />
-                                                <AvatarFallback>
-                                                    {
-                                                        databaseEditionToLabelMap[
-                                                            edition
-                                                        ]
-                                                    }
-                                                </AvatarFallback>
-                                            </Avatar>
-                                            {databaseEditionToLabelMap[edition]}
-                                        </ToggleGroupItem>
-                                    )
-                                )}
-                            </ToggleGroup>
-                        </div>
-                    ) : null}
-                    <div className="flex flex-col gap-1">
-                        <div className="flex flex-col gap-1 text-sm text-muted-foreground md:flex-row md:justify-between">
-                            <div>
-                                1.{' '}
-                                {t('new_diagram_dialog.import_database.step_1')}
-                            </div>
-                            {databaseType === DatabaseType.SQL_SERVER && (
-                                <SSMSInfo />
-                            )}
-                        </div>
-                        {databaseTypeToClientsMap[databaseType].length > 0 ? (
-                            <Tabs
-                                value={
-                                    !databaseClient
-                                        ? 'dbclient'
-                                        : databaseClient
-                                }
-                                onValueChange={(value) => {
-                                    setDatabaseClient(
-                                        value === 'dbclient'
-                                            ? undefined
-                                            : (value as DatabaseClient)
-                                    );
-                                }}
-                            >
-                                <div className="flex flex-1">
-                                    <TabsList className="h-8 justify-start rounded-none rounded-t-sm ">
-                                        <TabsTrigger
-                                            value="dbclient"
-                                            className="h-6 w-20"
-                                        >
-                                            DB Client
-                                        </TabsTrigger>
-
-                                        {databaseClients?.map((client) => (
-                                            <TabsTrigger
-                                                key={client}
-                                                value={client}
-                                                className="h-6 !w-20"
-                                            >
-                                                {
-                                                    databaseClientToLabelMap[
-                                                        client
-                                                    ]
-                                                }
-                                            </TabsTrigger>
-                                        )) ?? []}
-                                    </TabsList>
-                                </div>
-                                <CodeSnippet
-                                    className="h-40 w-full"
-                                    loading={!importMetadataScripts}
-                                    code={
-                                        importMetadataScripts?.[databaseType]?.(
-                                            {
-                                                databaseEdition,
-                                                databaseClient,
-                                            }
-                                        ) ?? ''
-                                    }
-                                    language={databaseClient ? 'shell' : 'sql'}
-                                />
-                            </Tabs>
-                        ) : (
-                            <CodeSnippet
-                                className="h-40 w-full flex-auto"
-                                loading={!importMetadataScripts}
-                                code={
-                                    importMetadataScripts?.[databaseType]?.({
-                                        databaseEdition,
-                                    }) ?? ''
-                                }
-                                language="sql"
-                            />
-                        )}
+                {isDesktop ? (
+                    <ResizablePanelGroup
+                        direction={isDesktop ? 'horizontal' : 'vertical'}
+                        className="min-h-[500px]"
+                    >
+                        <ResizablePanel
+                            defaultSize={25}
+                            minSize={25}
+                            maxSize={99}
+                            className="min-h-fit rounded-md bg-gradient-to-b from-slate-50 to-slate-100 p-2 dark:from-slate-900 dark:to-slate-800 md:min-h-fit md:min-w-[350px] md:rounded-l-md md:p-2"
+                        >
+                            {renderInstructions()}
+                        </ResizablePanel>
+                        <ResizableHandle withHandle />
+                        <ResizablePanel className="min-h-40 py-2 md:px-2 md:py-0">
+                            {renderOutputTextArea()}
+                        </ResizablePanel>
+                    </ResizablePanelGroup>
+                ) : (
+                    <div className="flex flex-col gap-2">
+                        {renderInstructions()}
+                        {renderOutputTextArea()}
                    </div>
-                    <div className="flex h-48 flex-col gap-1">
-                        <p className="text-sm text-muted-foreground">
-                            2. {t('new_diagram_dialog.import_database.step_2')}
-                        </p>
-                        <Textarea
-                            className="w-full flex-1 rounded-md bg-muted p-2 text-sm"
-                            placeholder={t(
-                                'new_diagram_dialog.import_database.script_results_placeholder'
-                            )}
-                            value={scriptResult}
-                            onChange={handleInputChange}
-                        />
-                        {showCheckJsonButton || errorMessage ? (
-                            <div className="mt-2 flex items-center gap-2">
-                                {showCheckJsonButton ? (
-                                    <Button
-                                        type="button"
-                                        variant="outline"
-                                        size="sm"
-                                        onClick={handleCheckJson}
-                                        disabled={isCheckingJson}
-                                    >
-                                        {isCheckingJson ? (
-                                            <Spinner size="small" />
-                                        ) : (
-                                            t(
-                                                'new_diagram_dialog.import_database.check_script_result'
-                                            )
-                                        )}
-                                    </Button>
-                                ) : (
-                                    <p className="text-sm text-red-700">
-                                        {errorMessage}
-                                    </p>
-                                )}
-                            </div>
-                        ) : null}
-                    </div>
-                </div>
+                )}
            </DialogInternalContent>
        );
-    }, [
-        databaseEdition,
-        databaseType,
-        errorMessage,
-        handleInputChange,
-        scriptResult,
-        setDatabaseEdition,
-        databaseClients,
-        databaseClient,
-        importMetadataScripts,
-        t,
-        showCheckJsonButton,
-        isCheckingJson,
-        handleCheckJson,
-    ]);
+    }, [renderOutputTextArea, renderInstructions, isDesktop]);

    const renderFooter = useCallback(() => {
        return (
-            <DialogFooter className="mt-4 flex !justify-between gap-2">
+            <DialogFooter className="flex !justify-between gap-2">
                <div className="flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2">
                    {goBack && (
                        <Button
@@ -407,7 +429,22 @@ export const ImportDatabase: React.FC<ImportDatabaseProps> = ({
                        </DialogClose>
                    )}

-                    {keepDialogAfterImport ? (
+                    {showCheckJsonButton ? (
+                        <Button
+                            type="button"
+                            variant="default"
+                            onClick={handleCheckJson}
+                            disabled={isCheckingJson}
+                        >
+                            {isCheckingJson ? (
+                                <Spinner size="small" />
+                            ) : (
+                                t(
+                                    'new_diagram_dialog.import_database.check_script_result'
+                                )
+                            )}
+                        </Button>
+                    ) : keepDialogAfterImport ? (
                        <Button
                            type="button"
                            variant="default"
@@ -425,7 +462,6 @@ export const ImportDatabase: React.FC<ImportDatabaseProps> = ({
                                type="button"
                                variant="default"
                                disabled={
-                                    showCheckJsonButton ||
                                    scriptResult.trim().length === 0 ||
                                    errorMessage.length > 0
                                }
@@ -456,6 +492,8 @@ export const ImportDatabase: React.FC<ImportDatabaseProps> = ({
        errorMessage.length,
        scriptResult,
        showCheckJsonButton,
+        isCheckingJson,
+        handleCheckJson,
        goBack,
        t,
    ]);
--- a/src/dialogs/common/import-database/instructions-section/instructions-section.tsx
+++ b/src/dialogs/common/import-database/instructions-section/instructions-section.tsx
@@ -0,0 +1,179 @@
+import React from 'react';
+import logo from '@/assets/logo-2.png';
+import { ToggleGroup, ToggleGroupItem } from '@/components/toggle/toggle-group';
+import { DatabaseType } from '@/lib/domain/database-type';
+import { databaseSecondaryLogoMap } from '@/lib/databases';
+import type { DatabaseEdition } from '@/lib/domain/database-edition';
+import {
+    databaseEditionToImageMap,
+    databaseEditionToLabelMap,
+    databaseTypeToEditionMap,
+} from '@/lib/domain/database-edition';
+import {
+    Avatar,
+    AvatarFallback,
+    AvatarImage,
+} from '@/components/avatar/avatar';
+import { useTranslation } from 'react-i18next';
+import { Code } from 'lucide-react';
+import { SmartQueryInstructions } from './instructions/smart-query-instructions';
+import { DDLInstructions } from './instructions/ddl-instructions';
+
+const DatabasesWithoutDDLInstructions: DatabaseType[] = [
+    DatabaseType.CLICKHOUSE,
+    DatabaseType.ORACLE,
+];
+
+export interface InstructionsSectionProps {
+    databaseType: DatabaseType;
+    databaseEdition?: DatabaseEdition;
+    setDatabaseEdition: React.Dispatch<
+        React.SetStateAction<DatabaseEdition | undefined>
+    >;
+    importMethod: 'query' | 'ddl';
+    setImportMethod: (method: 'query' | 'ddl') => void;
+    showSSMSInfoDialog: boolean;
+    setShowSSMSInfoDialog: (show: boolean) => void;
+}
+
+export const InstructionsSection: React.FC<InstructionsSectionProps> = ({
+    databaseType,
+    databaseEdition,
+    setDatabaseEdition,
+    importMethod,
+    setImportMethod,
+    setShowSSMSInfoDialog,
+    showSSMSInfoDialog,
+}) => {
+    const { t } = useTranslation();
+
+    return (
+        <div className="flex w-full flex-1 flex-col gap-4">
+            {databaseTypeToEditionMap[databaseType].length > 0 ? (
+                <div className="flex flex-col gap-1">
+                    <p className="text-sm leading-6 text-primary">
+                        {t(
+                            'new_diagram_dialog.import_database.database_edition'
+                        )}
+                    </p>
+                    <ToggleGroup
+                        type="single"
+                        className="ml-1 flex-wrap justify-start gap-2"
+                        value={!databaseEdition ? 'regular' : databaseEdition}
+                        onValueChange={(value) => {
+                            setDatabaseEdition(
+                                value === 'regular'
+                                    ? undefined
+                                    : (value as DatabaseEdition)
+                            );
+                        }}
+                    >
+                        <ToggleGroupItem
+                            value="regular"
+                            variant="outline"
+                            className="h-6 gap-1 p-0 px-2 shadow-none data-[state=on]:bg-slate-200 dark:data-[state=on]:bg-slate-700"
+                        >
+                            <Avatar className="size-4 rounded-none">
+                                <AvatarImage
+                                    src={databaseSecondaryLogoMap[databaseType]}
+                                    alt="Regular"
+                                />
+                                <AvatarFallback>Regular</AvatarFallback>
+                            </Avatar>
+                            Regular
+                        </ToggleGroupItem>
+                        {databaseTypeToEditionMap[databaseType].map(
+                            (edition) => (
+                                <ToggleGroupItem
+                                    value={edition}
+                                    key={edition}
+                                    variant="outline"
+                                    className="h-6 gap-1 p-0 px-2 shadow-none data-[state=on]:bg-slate-200 dark:data-[state=on]:bg-slate-700"
+                                >
+                                    <Avatar className="size-4">
+                                        <AvatarImage
+                                            src={
+                                                databaseEditionToImageMap[
+                                                    edition
+                                                ]
+                                            }
+                                            alt={
+                                                databaseEditionToLabelMap[
+                                                    edition
+                                                ]
+                                            }
+                                        />
+                                        <AvatarFallback>
+                                            {databaseEditionToLabelMap[edition]}
+                                        </AvatarFallback>
+                                    </Avatar>
+                                    {databaseEditionToLabelMap[edition]}
+                                </ToggleGroupItem>
+                            )
+                        )}
+                    </ToggleGroup>
+                </div>
+            ) : null}
+
+            {DatabasesWithoutDDLInstructions.includes(databaseType) ? null : (
+                <div className="flex flex-col gap-1">
+                    <p className="text-sm leading-6 text-primary">
+                        How would you like to import?
+                    </p>
+                    <ToggleGroup
+                        type="single"
+                        className="ml-1 flex-wrap justify-start gap-2"
+                        value={importMethod}
+                        onValueChange={(value) => {
+                            let selectedImportMethod: 'query' | 'ddl' = 'query';
+                            if (value) {
+                                selectedImportMethod = value as 'query' | 'ddl';
+                            }
+
+                            setImportMethod(selectedImportMethod);
+                        }}
+                    >
+                        <ToggleGroupItem
+                            value="query"
+                            variant="outline"
+                            className="h-6 gap-1 p-0 px-2 shadow-none data-[state=on]:bg-slate-200 dark:data-[state=on]:bg-slate-700"
+                        >
+                            <Avatar className="h-3 w-4 rounded-none">
+                                <AvatarImage src={logo} alt="query" />
+                                <AvatarFallback>Query</AvatarFallback>
+                            </Avatar>
+                            Smart Query
+                        </ToggleGroupItem>
+                        <ToggleGroupItem
+                            value="ddl"
+                            variant="outline"
+                            className="h-6 gap-1 p-0 px-2 shadow-none data-[state=on]:bg-slate-200 dark:data-[state=on]:bg-slate-700"
+                        >
+                            <Avatar className="size-4 rounded-none">
+                                <Code size={16} />
+                            </Avatar>
+                            SQL Script
+                        </ToggleGroupItem>
+                    </ToggleGroup>
+                </div>
+            )}
+
+            <div className="flex flex-col gap-2">
+                <div className="text-sm font-semibold">Instructions:</div>
+                {importMethod === 'query' ? (
+                    <SmartQueryInstructions
+                        databaseType={databaseType}
+                        databaseEdition={databaseEdition}
+                        showSSMSInfoDialog={showSSMSInfoDialog}
+                        setShowSSMSInfoDialog={setShowSSMSInfoDialog}
+                    />
+                ) : (
+                    <DDLInstructions
+                        databaseType={databaseType}
+                        databaseEdition={databaseEdition}
+                    />
+                )}
+            </div>
+        </div>
+    );
+};
--- a/src/dialogs/common/import-database/instructions-section/instructions/ddl-instruction-step.tsx
+++ b/src/dialogs/common/import-database/instructions-section/instructions/ddl-instruction-step.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import { CodeSnippet } from '@/components/code-snippet/code-snippet';
+
+export interface DDLInstructionStepProps {
+    index: number;
+    text: string;
+    code?: string;
+    example?: string;
+}
+
+export const DDLInstructionStep: React.FC<DDLInstructionStepProps> = ({
+    index,
+    text,
+    code,
+    example,
+}) => {
+    return (
+        <div className="flex flex-col gap-1">
+            <div className="flex flex-col gap-1 text-sm text-primary">
+                <div>
+                    <span className="font-medium">{index}.</span> {text}
+                </div>
+
+                {code ? (
+                    <div className="h-[60px]">
+                        <CodeSnippet
+                            className="h-full"
+                            code={code}
+                            language={'shell'}
+                        />
+                    </div>
+                ) : null}
+                {example ? (
+                    <>
+                        <div className="my-2">Example:</div>
+                        <div className="h-[60px]">
+                            <CodeSnippet
+                                className="h-full"
+                                code={example}
+                                language={'shell'}
+                            />
+                        </div>
+                    </>
+                ) : null}
+            </div>
+        </div>
+    );
+};
--- a/src/dialogs/common/import-database/instructions-section/instructions/ddl-instructions.tsx
+++ b/src/dialogs/common/import-database/instructions-section/instructions/ddl-instructions.tsx
@@ -0,0 +1,118 @@
+import React from 'react';
+import { DatabaseType } from '@/lib/domain/database-type';
+import type { DatabaseEdition } from '@/lib/domain/database-edition';
+import { DDLInstructionStep } from './ddl-instruction-step';
+
+interface DDLInstruction {
+    text: string;
+    code?: string;
+    example?: string;
+}
+
+const DDLInstructionsMap: Record<DatabaseType, DDLInstruction[]> = {
+    [DatabaseType.GENERIC]: [],
+    [DatabaseType.MYSQL]: [
+        {
+            text: 'Install mysqldump.',
+        },
+        {
+            text: 'Execute the following command in your terminal (prefix with sudo on Linux if needed):',
+            code: `mysqldump -h <host> -u <username>\n-P <port> -p --no-data\n<database_name> > <output_path>`,
+            example: `mysqldump -h localhost -u root -P\n3306 -p --no-data my_db >\nschema_export.sql`,
+        },
+        {
+            text: 'Open the exported SQL file, copy its contents, and paste them here.',
+        },
+    ],
+    [DatabaseType.POSTGRESQL]: [
+        {
+            text: 'Install pg_dump.',
+        },
+        {
+            text: 'Execute the following command in your terminal (prefix with sudo on Linux if needed):',
+            code: `pg_dump -h <host> -p <port> -d <database_name> \n  -U <username> -s -F p -E UTF-8 \n  -f <output_file_path>`,
+            example: `pg_dump -h localhost -p 5432 -d my_db \n  -U postgres -s -F p -E UTF-8 \n  -f schema_export.sql`,
+        },
+        {
+            text: 'Open the exported SQL file, copy its contents, and paste them here.',
+        },
+    ],
+    [DatabaseType.SQLITE]: [
+        {
+            text: 'Install sqlite3.',
+        },
+        {
+            text: 'Execute the following command in your terminal:',
+            code: `sqlite3 <database_file_path>\n.dump > <output_file_path>`,
+            example: `sqlite3 my_db.db\n.dump > schema_export.sql`,
+        },
+        {
+            text: 'Open the exported SQL file, copy its contents, and paste them here.',
+        },
+    ],
+    [DatabaseType.SQL_SERVER]: [
+        {
+            text: 'Download and install SQL Server Management Studio (SSMS).',
+        },
+        {
+            text: 'Connect to your SQL Server instance using SSMS.',
+        },
+        {
+            text: 'Right-click on the database you want to export and select Script Database as > CREATE To > New Query Editor Window.',
+        },
+        {
+            text: 'Copy the generated script and paste it here.',
+        },
+    ],
+    [DatabaseType.CLICKHOUSE]: [],
+    [DatabaseType.COCKROACHDB]: [
+        {
+            text: 'Install pg_dump.',
+        },
+        {
+            text: 'Execute the following command in your terminal (prefix with sudo on Linux if needed):',
+            code: `pg_dump -h <host> -p <port> -d <database_name> \n  -U <username> -s -F p -E UTF-8 \n  -f <output_file_path>`,
+            example: `pg_dump -h localhost -p 5432 -d my_db \n  -U postgres -s -F p -E UTF-8 \n  -f schema_export.sql`,
+        },
+        {
+            text: 'Open the exported SQL file, copy its contents, and paste them here.',
+        },
+    ],
+    [DatabaseType.MARIADB]: [
+        {
+            text: 'Install mysqldump.',
+        },
+        {
+            text: 'Execute the following command in your terminal (prefix with sudo on Linux if needed):',
+            code: `mysqldump -h <host> -u <username>\n-P <port> -p --no-data\n<database_name> > <output_path>`,
+            example: `mysqldump -h localhost -u root -P\n3306 -p --no-data my_db >\nschema_export.sql`,
+        },
+        {
+            text: 'Open the exported SQL file, copy its contents, and paste them here.',
+        },
+    ],
+    [DatabaseType.ORACLE]: [],
+};
+
+export interface DDLInstructionsProps {
+    databaseType: DatabaseType;
+    databaseEdition?: DatabaseEdition;
+}
+
+export const DDLInstructions: React.FC<DDLInstructionsProps> = ({
+    databaseType,
+}) => {
+    return (
+        <>
+            {DDLInstructionsMap[databaseType].map((instruction, index) => (
+                <DDLInstructionStep
+                    key={index}
+                    index={index + 1}
+                    text={instruction.text}
+                    code={instruction.code}
+                    example={instruction.example}
+                />
+            ))}
+        </>
+    );
+};
--- a/src/dialogs/common/import-database/instructions-section/instructions/smart-query-instructions.tsx
+++ b/src/dialogs/common/import-database/instructions-section/instructions/smart-query-instructions.tsx
@@ -0,0 +1,147 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { DatabaseType } from '@/lib/domain/database-type';
+import { CodeSnippet } from '@/components/code-snippet/code-snippet';
+import type { DatabaseEdition } from '@/lib/domain/database-edition';
+import { SSMSInfo } from './ssms-info/ssms-info';
+import { useTranslation } from 'react-i18next';
+import { Tabs, TabsList, TabsTrigger } from '@/components/tabs/tabs';
+import type { DatabaseClient } from '@/lib/domain/database-clients';
+import { minimizeQuery } from '@/lib/data/import-metadata/utils';
+import {
+    databaseClientToLabelMap,
+    databaseTypeToClientsMap,
+    databaseEditionToClientsMap,
+} from '@/lib/domain/database-clients';
+import type { ImportMetadataScripts } from '@/lib/data/import-metadata/scripts/scripts';
+
+export interface SmartQueryInstructionsProps {
+    databaseType: DatabaseType;
+    databaseEdition?: DatabaseEdition;
+    showSSMSInfoDialog: boolean;
+    setShowSSMSInfoDialog: (show: boolean) => void;
+}
+
+export const SmartQueryInstructions: React.FC<SmartQueryInstructionsProps> = ({
+    databaseType,
+    databaseEdition,
+    showSSMSInfoDialog,
+    setShowSSMSInfoDialog,
+}) => {
+    const databaseClients = useMemo(
+        () => [
+            ...databaseTypeToClientsMap[databaseType],
+            ...(databaseEdition
+                ? databaseEditionToClientsMap[databaseEdition]
+                : []),
+        ],
+        [databaseType, databaseEdition]
+    );
+    const [databaseClient, setDatabaseClient] = useState<
+        DatabaseClient | undefined
+    >();
+    const { t } = useTranslation();
+    const [importMetadataScripts, setImportMetadataScripts] =
+        useState<ImportMetadataScripts | null>(null);
+
+    const code = useMemo(
+        () =>
+            (databaseClients.length > 0
+                ? importMetadataScripts?.[databaseType]?.({
+                      databaseEdition,
+                      databaseClient,
+                  })
+                : importMetadataScripts?.[databaseType]?.({
+                      databaseEdition,
+                  })) ?? '',
+        [
+            databaseType,
+            databaseEdition,
+            databaseClients,
+            importMetadataScripts,
+            databaseClient,
+        ]
+    );
+
+    useEffect(() => {
+        const loadScripts = async () => {
+            const { importMetadataScripts } = await import(
+                '@/lib/data/import-metadata/scripts/scripts'
+            );
+            setImportMetadataScripts(importMetadataScripts);
+        };
+        loadScripts();
+    }, []);
+
+    return (
+        <>
+            <div className="flex flex-col gap-1">
+                <div className="flex flex-col gap-1 text-sm text-primary">
+                    <div>
+                        <span className="font-medium">1.</span>{' '}
+                        {t('new_diagram_dialog.import_database.step_1')}
+                    </div>
+                    {databaseType === DatabaseType.SQL_SERVER && (
+                        <SSMSInfo
+                            open={showSSMSInfoDialog}
+                            setOpen={setShowSSMSInfoDialog}
+                        />
+                    )}
+                </div>
+                {databaseClients.length > 0 ? (
+                    <Tabs
+                        value={!databaseClient ? 'dbclient' : databaseClient}
+                        onValueChange={(value) => {
+                            setDatabaseClient(
+                                value === 'dbclient'
+                                    ? undefined
+                                    : (value as DatabaseClient)
+                            );
+                        }}
+                    >
+                        <div className="flex flex-1">
+                            <TabsList className="h-8 justify-start rounded-none rounded-t-sm ">
+                                <TabsTrigger
+                                    value="dbclient"
+                                    className="h-6 w-20"
+                                >
+                                    DB Client
+                                </TabsTrigger>
+
+                                {databaseClients?.map((client) => (
+                                    <TabsTrigger
+                                        key={client}
+                                        value={client}
+                                        className="h-6 !w-20"
+                                    >
+                                        {databaseClientToLabelMap[client]}
+                                    </TabsTrigger>
+                                )) ?? []}
+                            </TabsList>
+                        </div>
+                        <CodeSnippet
+                            className="h-40 w-full md:h-[200px]"
+                            loading={!importMetadataScripts}
+                            code={minimizeQuery(code)}
+                            codeToCopy={code}
+                            language={databaseClient ? 'shell' : 'sql'}
+                        />
+                    </Tabs>
+                ) : (
+                    <CodeSnippet
+                        className="h-40 w-full flex-auto md:h-[200px]"
+                        loading={!importMetadataScripts}
+                        code={minimizeQuery(code)}
+                        codeToCopy={code}
+                        language="sql"
+                    />
+                )}
+            </div>
+            <div className="flex flex-col gap-1">
+                <p className="text-sm text-primary">
+                    <span className="font-medium">2.</span>{' '}
+                    {t('new_diagram_dialog.import_database.step_2')}
+                </p>
+            </div>
+        </>
+    );
+};
--- a/src/dialogs/common/import-database/instructions-section/instructions/ssms-info/ssms-info.tsx
+++ b/src/dialogs/common/import-database/instructions-section/instructions/ssms-info/ssms-info.tsx
@@ -4,32 +4,55 @@ import {
    HoverCardTrigger,
 } from '@/components/hover-card/hover-card';
 import { Label } from '@/components/label/label';
-import { Info } from 'lucide-react';
-import React from 'react';
+import { Info, X } from 'lucide-react';
+import React, { useCallback, useEffect, useMemo } from 'react';
 import SSMSInstructions from '@/assets/ssms-instructions.png';
 import { ZoomableImage } from '@/components/zoomable-image/zoomable-image';
 import { useTranslation } from 'react-i18next';

-export interface SSMSInfoProps {}
+export interface SSMSInfoProps {
+    open?: boolean;
+    setOpen?: (open: boolean) => void;
+}

 export const SSMSInfo = React.forwardRef<
    React.ElementRef<typeof HoverCardTrigger>,
    SSMSInfoProps
->((props, ref) => {
+>(({ open: controlledOpen, setOpen: setControlledOpen }, ref) => {
    const [open, setOpen] = React.useState(false);
    const { t } = useTranslation();
+
+    useEffect(() => {
+        if (controlledOpen) {
+            setOpen(true);
+        }
+    }, [controlledOpen]);
+
+    const closeHandler = useCallback(() => {
+        setOpen(false);
+        setControlledOpen?.(false);
+    }, [setControlledOpen]);
+
+    const isOpen = useMemo(
+        () => open || controlledOpen,
+        [open, controlledOpen]
+    );
+
    return (
        <HoverCard
-            open={open}
+            open={isOpen}
            onOpenChange={(isOpen) => {
+                if (controlledOpen) {
+                    return;
+                }
                setOpen(isOpen);
            }}
        >
-            <HoverCardTrigger ref={ref} {...props} asChild>
+            <HoverCardTrigger ref={ref} asChild>
                <div
                    className="flex flex-row items-center gap-1 text-pink-600"
                    onClick={() => {
-                        setOpen(!open);
+                        setOpen?.(!open);
                    }}
                >
                    <Info size={14} />
@@ -41,13 +64,21 @@ export const SSMSInfo = React.forwardRef<
                </div>
            </HoverCardTrigger>
            <HoverCardContent className="w-80">
-                <div className="flex">
-                    <div className="space-y-1">
+                <div className="flex flex-col">
+                    <div className="flex items-start justify-between">
                        <h4 className="text-sm font-semibold">
                            {t(
                                'new_diagram_dialog.import_database.ssms_instructions.title'
                            )}
                        </h4>
+                        <button
+                            onClick={closeHandler}
+                            className="text-muted-foreground hover:text-foreground"
+                        >
+                            <X size={16} />
+                        </button>
+                    </div>
+                    <div className="space-y-1">
                        <p className="text-xs text-muted-foreground">
                            <span className="font-semibold">1. </span>
                            {t(
--- a/src/dialogs/create-diagram-dialog/create-diagram-dialog.tsx
+++ b/src/dialogs/create-diagram-dialog/create-diagram-dialog.tsx
@@ -17,6 +17,7 @@ import { CreateDiagramDialogStep } from './create-diagram-dialog-step';
 import { ImportDatabase } from '../common/import-database/import-database';
 import { useTranslation } from 'react-i18next';
 import type { BaseDialogProps } from '../common/base-dialog-props';
+import { sqlImportToDiagram } from '@/lib/data/sql-import';

 export interface CreateDiagramDialogProps extends BaseDialogProps {}

@@ -25,10 +26,11 @@ export const CreateDiagramDialog: React.FC<CreateDiagramDialogProps> = ({
 }) => {
    const { diagramId } = useChartDB();
    const { t } = useTranslation();
+    const [importMethod, setImportMethod] = useState<'query' | 'ddl'>('query');
    const [databaseType, setDatabaseType] = useState<DatabaseType>(
        DatabaseType.GENERIC
    );
-    const { closeCreateDiagramDialog } = useDialog();
+    const { closeCreateDiagramDialog, openImportDBMLDialog } = useDialog();
    const { updateConfig } = useConfig();
    const [scriptResult, setScriptResult] = useState('');
    const [databaseEdition, setDatabaseEdition] = useState<
@@ -41,6 +43,11 @@ export const CreateDiagramDialog: React.FC<CreateDiagramDialogProps> = ({
    const [diagramNumber, setDiagramNumber] = useState<number>(1);
    const navigate = useNavigate();

+    useEffect(() => {
+        setDatabaseEdition(undefined);
+        setImportMethod('query');
+    }, [databaseType]);
+
    useEffect(() => {
        const fetchDiagrams = async () => {
            const diagrams = await listDiagrams();
@@ -54,29 +61,41 @@ export const CreateDiagramDialog: React.FC<CreateDiagramDialogProps> = ({
        setDatabaseType(DatabaseType.GENERIC);
        setDatabaseEdition(undefined);
        setScriptResult('');
+        setImportMethod('query');
    }, [dialog.open]);

    const hasExistingDiagram = (diagramId ?? '').trim().length !== 0;

    const importNewDiagram = useCallback(async () => {
-        const databaseMetadata: DatabaseMetadata =
-            loadDatabaseMetadata(scriptResult);
+        let diagram: Diagram | undefined;

-        const diagram = await loadFromDatabaseMetadata({
-            databaseType,
-            databaseMetadata,
-            diagramNumber,
-            databaseEdition:
-                databaseEdition?.trim().length === 0
-                    ? undefined
-                    : databaseEdition,
-        });
+        if (importMethod === 'ddl') {
+            diagram = await sqlImportToDiagram({
+                sqlContent: scriptResult,
+                sourceDatabaseType: databaseType,
+                targetDatabaseType: databaseType,
+            });
+        } else {
+            const databaseMetadata: DatabaseMetadata =
+                loadDatabaseMetadata(scriptResult);
+
+            diagram = await loadFromDatabaseMetadata({
+                databaseType,
+                databaseMetadata,
+                diagramNumber,
+                databaseEdition:
+                    databaseEdition?.trim().length === 0
+                        ? undefined
+                        : databaseEdition,
+            });
+        }

        await addDiagram({ diagram });
-        await updateConfig({ defaultDiagramId: diagram.id });
+        await updateConfig({ config: { defaultDiagramId: diagram.id } });
        closeCreateDiagramDialog();
        navigate(`/diagrams/${diagram.id}`);
    }, [
+        importMethod,
        databaseType,
        addDiagram,
        databaseEdition,
@@ -101,9 +120,13 @@ export const CreateDiagramDialog: React.FC<CreateDiagramDialogProps> = ({
        };

        await addDiagram({ diagram });
-        await updateConfig({ defaultDiagramId: diagram.id });
+        await updateConfig({ config: { defaultDiagramId: diagram.id } });
        closeCreateDiagramDialog();
        navigate(`/diagrams/${diagram.id}`);
+        setTimeout(
+            () => openImportDBMLDialog({ withCreateEmptyDiagram: true }),
+            700
+        );
    }, [
        databaseType,
        addDiagram,
@@ -112,6 +135,7 @@ export const CreateDiagramDialog: React.FC<CreateDiagramDialogProps> = ({
        navigate,
        updateConfig,
        diagramNumber,
+        openImportDBMLDialog,
    ]);

    return (
@@ -128,7 +152,7 @@ export const CreateDiagramDialog: React.FC<CreateDiagramDialogProps> = ({
            }}
        >
            <DialogContent
-                className="flex max-h-screen w-[90vw] max-w-[90vw] flex-col overflow-y-auto md:overflow-visible lg:max-w-[60vw] xl:lg:max-w-lg xl:min-w-[45vw]"
+                className="flex max-h-dvh w-full flex-col md:max-w-[900px]"
                showClose={hasExistingDiagram}
            >
                {step === CreateDiagramDialogStep.SELECT_DATABASE ? (
@@ -154,6 +178,8 @@ export const CreateDiagramDialog: React.FC<CreateDiagramDialogProps> = ({
                        }
                        setScriptResult={setScriptResult}
                        title={t('new_diagram_dialog.import_database.title')}
+                        importMethod={importMethod}
+                        setImportMethod={setImportMethod}
                    />
                )}
            </DialogContent>
--- a/src/dialogs/create-diagram-dialog/select-database/select-database-content.tsx
+++ b/src/dialogs/create-diagram-dialog/select-database/select-database-content.tsx
@@ -20,6 +20,7 @@ const SUPPORTED_DB_TYPES: DatabaseType[] = [
    DatabaseType.MARIADB,
    DatabaseType.SQLITE,
    DatabaseType.SQL_SERVER,
+    DatabaseType.ORACLE,
    DatabaseType.COCKROACHDB,
    DatabaseType.CLICKHOUSE,
 ];
--- a/src/dialogs/create-relationship-dialog/create-relationship-dialog.tsx
+++ b/src/dialogs/create-relationship-dialog/create-relationship-dialog.tsx
@@ -22,13 +22,17 @@ import { areFieldTypesCompatible } from '@/lib/data/data-types/data-types';
 const ErrorMessageRelationshipFieldsNotSameType =
    'Relationships can only be created between fields of the same type';

-export interface CreateRelationshipDialogProps extends BaseDialogProps {}
+export interface CreateRelationshipDialogProps extends BaseDialogProps {
+    sourceTableId?: string;
+}

 export const CreateRelationshipDialog: React.FC<
    CreateRelationshipDialogProps
-> = ({ dialog }) => {
+> = ({ dialog, sourceTableId: preSelectedSourceTableId }) => {
    const { closeCreateRelationshipDialog } = useDialog();
-    const [primaryTableId, setPrimaryTableId] = useState<string | undefined>();
+    const [primaryTableId, setPrimaryTableId] = useState<string | undefined>(
+        preSelectedSourceTableId
+    );
    const [primaryFieldId, setPrimaryFieldId] = useState<string | undefined>();
    const [referencedTableId, setReferencedTableId] = useState<
        string | undefined
@@ -43,6 +47,9 @@ export const CreateRelationshipDialog: React.FC<
    const [canCreateRelationship, setCanCreateRelationship] = useState(false);
    const { fitView, setEdges } = useReactFlow();
    const { databaseType } = useChartDB();
+    const [primaryFieldSelectOpen, setPrimaryFieldSelectOpen] = useState(false);
+    const [referencedTableSelectOpen, setReferencedTableSelectOpen] =
+        useState(false);

    const tableOptions = useMemo(() => {
        return tables.map(
@@ -89,8 +96,23 @@ export const CreateRelationshipDialog: React.FC<
        setReferencedTableId(undefined);
        setReferencedFieldId(undefined);
        setErrorMessage('');
+        setPrimaryFieldSelectOpen(false);
+        setReferencedTableSelectOpen(false);
    }, [dialog.open]);

+    useEffect(() => {
+        if (preSelectedSourceTableId) {
+            const table = getTable(preSelectedSourceTableId);
+            if (table) {
+                setPrimaryTableId(preSelectedSourceTableId);
+            }
+
+            setTimeout(() => {
+                setPrimaryFieldSelectOpen(true);
+            }, 100);
+        }
+    }, [preSelectedSourceTableId, getTable]);
+
    useEffect(() => {
        setCanCreateRelationship(false);
        setErrorMessage('');
@@ -223,8 +245,14 @@ export const CreateRelationshipDialog: React.FC<
                                    )}
                                    value={primaryTableId}
                                    onChange={(value) => {
-                                        setPrimaryTableId(value as string);
-                                        setPrimaryFieldId(undefined);
+                                        const newTableId = value as string;
+                                        setPrimaryTableId(newTableId);
+                                        if (
+                                            newTableId !==
+                                            preSelectedSourceTableId
+                                        ) {
+                                            setPrimaryFieldId(undefined);
+                                        }
                                    }}
                                    emptyPlaceholder={t(
                                        'create_relationship_dialog.no_tables_found'
@@ -253,6 +281,8 @@ export const CreateRelationshipDialog: React.FC<
                                            'create_relationship_dialog.primary_field_placeholder'
                                        )}
                                        value={primaryFieldId}
+                                        open={primaryFieldSelectOpen}
+                                        onOpenChange={setPrimaryFieldSelectOpen}
                                        onChange={(value) =>
                                            setPrimaryFieldId(value as string)
                                        }
@@ -283,6 +313,8 @@ export const CreateRelationshipDialog: React.FC<
                                        'create_relationship_dialog.referenced_table_placeholder'
                                    )}
                                    value={referencedTableId}
+                                    open={referencedTableSelectOpen}
+                                    onOpenChange={setReferencedTableSelectOpen}
                                    onChange={(value) => {
                                        setReferencedTableId(value as string);
                                        setReferencedFieldId(undefined);
--- a/src/dialogs/export-diagram-dialog/export-diagram-dialog.tsx
+++ b/src/dialogs/export-diagram-dialog/export-diagram-dialog.tsx
@@ -15,11 +15,10 @@ import { SelectBox } from '@/components/select-box/select-box';
 import type { BaseDialogProps } from '../common/base-dialog-props';
 import { useTranslation } from 'react-i18next';
 import { useChartDB } from '@/hooks/use-chartdb';
-import { diagramToJSONOutput } from '@/lib/export-import-utils';
 import { Spinner } from '@/components/spinner/spinner';
-import { waitFor } from '@/lib/utils';
 import { AlertCircle } from 'lucide-react';
 import { Alert, AlertDescription, AlertTitle } from '@/components/alert/alert';
+import { useExportDiagram } from '@/hooks/use-export-diagram';

 export interface ExportDiagramDialogProps extends BaseDialogProps {}

@@ -27,44 +26,27 @@ export const ExportDiagramDialog: React.FC<ExportDiagramDialogProps> = ({
    dialog,
 }) => {
    const { t } = useTranslation();
-    const { diagramName, currentDiagram } = useChartDB();
-    const [isLoading, setIsLoading] = useState(false);
+    const { currentDiagram } = useChartDB();
    const { closeExportDiagramDialog } = useDialog();
    const [error, setError] = useState(false);

    useEffect(() => {
        if (!dialog.open) return;
-        setIsLoading(false);
        setError(false);
    }, [dialog.open]);

-    const downloadOutput = useCallback(
-        (dataUrl: string) => {
-            const a = document.createElement('a');
-            a.setAttribute('download', `ChartDB(${diagramName}).json`);
-            a.setAttribute('href', dataUrl);
-            a.click();
-        },
-        [diagramName]
-    );
+    const { exportDiagram, isExporting: isLoading } = useExportDiagram();

    const handleExport = useCallback(async () => {
-        setIsLoading(true);
-        await waitFor(1000);
        try {
-            const json = diagramToJSONOutput(currentDiagram);
-            const blob = new Blob([json], { type: 'application/json' });
-            const dataUrl = URL.createObjectURL(blob);
-            downloadOutput(dataUrl);
-            setIsLoading(false);
+            await exportDiagram({ diagram: currentDiagram });
            closeExportDiagramDialog();
        } catch (e) {
            setError(true);
-            setIsLoading(false);

            throw e;
        }
-    }, [downloadOutput, currentDiagram, closeExportDiagramDialog]);
+    }, [exportDiagram, currentDiagram, closeExportDiagramDialog]);

    const outputTypeOptions: SelectBoxOption[] = useMemo(
        () =>
--- a/src/dialogs/export-image-dialog/export-image-dialog.tsx
+++ b/src/dialogs/export-image-dialog/export-image-dialog.tsx
@@ -16,11 +16,20 @@ import type { BaseDialogProps } from '../common/base-dialog-props';
 import { useTranslation } from 'react-i18next';
 import type { ImageType } from '@/context/export-image-context/export-image-context';
 import { useExportImage } from '@/hooks/use-export-image';
+import { Checkbox } from '@/components/checkbox/checkbox';
+import {
+    Accordion,
+    AccordionContent,
+    AccordionItem,
+    AccordionTrigger,
+} from '@/components/accordion/accordion';

 export interface ExportImageDialogProps extends BaseDialogProps {
    format: ImageType;
 }

+const DEFAULT_INCLUDE_PATTERN_BG = true;
+const DEFAULT_TRANSPARENT = false;
 const DEFAULT_SCALE = '2';
 export const ExportImageDialog: React.FC<ExportImageDialogProps> = ({
    dialog,
@@ -28,17 +37,28 @@ export const ExportImageDialog: React.FC<ExportImageDialogProps> = ({
 }) => {
    const { t } = useTranslation();
    const [scale, setScale] = useState<string>(DEFAULT_SCALE);
+    const [includePatternBG, setIncludePatternBG] = useState<boolean>(
+        DEFAULT_INCLUDE_PATTERN_BG
+    );
+    const [transparent, setTransparent] =
+        useState<boolean>(DEFAULT_TRANSPARENT);
    const { exportImage } = useExportImage();

    useEffect(() => {
        if (!dialog.open) return;
        setScale(DEFAULT_SCALE);
+        setIncludePatternBG(DEFAULT_INCLUDE_PATTERN_BG);
+        setTransparent(DEFAULT_TRANSPARENT);
    }, [dialog.open]);
    const { closeExportImageDialog } = useDialog();

    const handleExport = useCallback(() => {
-        exportImage(format, Number(scale));
-    }, [exportImage, format, scale]);
+        exportImage(format, {
+            transparent,
+            includePatternBG,
+            scale: Number(scale),
+        });
+    }, [exportImage, format, includePatternBG, transparent, scale]);

    const scaleOptions: SelectBoxOption[] = useMemo(
        () =>
@@ -65,15 +85,79 @@ export const ExportImageDialog: React.FC<ExportImageDialogProps> = ({
                        {t('export_image_dialog.description')}
                    </DialogDescription>
                </DialogHeader>
-                <div className="grid gap-4 py-1">
-                    <div className="grid w-full items-center gap-4">
-                        <SelectBox
-                            options={scaleOptions}
-                            multiple={false}
-                            value={scale}
-                            onChange={(value) => setScale(value as string)}
-                        />
-                    </div>
+                <div className="flex flex-col gap-4 py-1">
+                    <SelectBox
+                        options={scaleOptions}
+                        multiple={false}
+                        value={scale}
+                        onChange={(value) => setScale(value as string)}
+                    />
+                    <Accordion type="single" collapsible className="w-full">
+                        <AccordionItem value="settings" className="border-0">
+                            <AccordionTrigger
+                                className="py-1.5"
+                                iconPosition="right"
+                            >
+                                {t('export_image_dialog.advanced_options')}
+                            </AccordionTrigger>
+                            <AccordionContent>
+                                <div className="flex flex-col gap-3 py-2">
+                                    <div className="flex items-start gap-3">
+                                        <Checkbox
+                                            id="pattern-checkbox"
+                                            className="mt-1 data-[state=checked]:border-pink-600 data-[state=checked]:bg-pink-600 data-[state=checked]:text-white"
+                                            checked={includePatternBG}
+                                            onCheckedChange={(value) =>
+                                                setIncludePatternBG(
+                                                    value as boolean
+                                                )
+                                            }
+                                        />
+                                        <div className="flex flex-col">
+                                            <label
+                                                htmlFor="pattern-checkbox"
+                                                className="cursor-pointer font-medium"
+                                            >
+                                                {t(
+                                                    'export_image_dialog.pattern'
+                                                )}
+                                            </label>
+                                            <span className="text-sm text-muted-foreground">
+                                                {t(
+                                                    'export_image_dialog.pattern_description'
+                                                )}
+                                            </span>
+                                        </div>
+                                    </div>
+                                    <div className="flex items-start gap-3">
+                                        <Checkbox
+                                            id="transparent-checkbox"
+                                            className="mt-1 data-[state=checked]:border-pink-600 data-[state=checked]:bg-pink-600 data-[state=checked]:text-white"
+                                            checked={transparent}
+                                            onCheckedChange={(value) =>
+                                                setTransparent(value as boolean)
+                                            }
+                                        />
+                                        <div className="flex flex-col">
+                                            <label
+                                                htmlFor="transparent-checkbox"
+                                                className="cursor-pointer font-medium"
+                                            >
+                                                {t(
+                                                    'export_image_dialog.transparent'
+                                                )}
+                                            </label>
+                                            <span className="text-sm text-muted-foreground">
+                                                {t(
+                                                    'export_image_dialog.transparent_description'
+                                                )}
+                                            </span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </AccordionContent>
+                        </AccordionItem>
+                    </Accordion>
                </div>
                <DialogFooter className="flex gap-1 md:justify-between">
                    <DialogClose asChild>
--- a/src/dialogs/export-sql-dialog/export-sql-dialog.tsx
+++ b/src/dialogs/export-sql-dialog/export-sql-dialog.tsx
@@ -20,10 +20,12 @@ import {
 } from '@/lib/data/export-metadata/export-sql-script';
 import { databaseTypeToLabelMap } from '@/lib/databases';
 import { DatabaseType } from '@/lib/domain/database-type';
+import { shouldShowTablesBySchemaFilter } from '@/lib/domain/db-table';
 import { Annoyed, Sparkles } from 'lucide-react';
 import React, { useCallback, useEffect, useRef } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import type { BaseDialogProps } from '../common/base-dialog-props';
+import type { Diagram } from '@/lib/domain/diagram';

 export interface ExportSQLDialogProps extends BaseDialogProps {
    targetDatabaseType: DatabaseType;
@@ -34,7 +36,7 @@ export const ExportSQLDialog: React.FC<ExportSQLDialogProps> = ({
    targetDatabaseType,
 }) => {
    const { closeExportSQLDialog } = useDialog();
-    const { currentDiagram } = useChartDB();
+    const { currentDiagram, filteredSchemas } = useChartDB();
    const { t } = useTranslation();
    const [script, setScript] = React.useState<string>();
    const [error, setError] = React.useState<boolean>(false);
@@ -43,17 +45,63 @@ export const ExportSQLDialog: React.FC<ExportSQLDialogProps> = ({
    const abortControllerRef = useRef<AbortController | null>(null);

    const exportSQLScript = useCallback(async () => {
+        const filteredDiagram: Diagram = {
+            ...currentDiagram,
+            tables: currentDiagram.tables?.filter((table) =>
+                shouldShowTablesBySchemaFilter(table, filteredSchemas)
+            ),
+            relationships: currentDiagram.relationships?.filter((rel) => {
+                const sourceTable = currentDiagram.tables?.find(
+                    (t) => t.id === rel.sourceTableId
+                );
+                const targetTable = currentDiagram.tables?.find(
+                    (t) => t.id === rel.targetTableId
+                );
+                return (
+                    sourceTable &&
+                    targetTable &&
+                    shouldShowTablesBySchemaFilter(
+                        sourceTable,
+                        filteredSchemas
+                    ) &&
+                    shouldShowTablesBySchemaFilter(targetTable, filteredSchemas)
+                );
+            }),
+            dependencies: currentDiagram.dependencies?.filter((dep) => {
+                const table = currentDiagram.tables?.find(
+                    (t) => t.id === dep.tableId
+                );
+                const dependentTable = currentDiagram.tables?.find(
+                    (t) => t.id === dep.dependentTableId
+                );
+                return (
+                    table &&
+                    dependentTable &&
+                    shouldShowTablesBySchemaFilter(table, filteredSchemas) &&
+                    shouldShowTablesBySchemaFilter(
+                        dependentTable,
+                        filteredSchemas
+                    )
+                );
+            }),
+        };
+
        if (targetDatabaseType === DatabaseType.GENERIC) {
-            return Promise.resolve(exportBaseSQL(currentDiagram));
+            return Promise.resolve(
+                exportBaseSQL({
+                    diagram: filteredDiagram,
+                    targetDatabaseType,
+                })
+            );
        } else {
-            return exportSQL(currentDiagram, targetDatabaseType, {
+            return exportSQL(filteredDiagram, targetDatabaseType, {
                stream: true,
                onResultStream: (text) =>
                    setScript((prev) => (prev ? prev + text : text)),
                signal: abortControllerRef.current?.signal,
            });
        }
-    }, [targetDatabaseType, currentDiagram]);
+    }, [targetDatabaseType, currentDiagram, filteredSchemas]);

    useEffect(() => {
        if (!dialog.open) {
@@ -92,7 +140,7 @@ export const ExportSQLDialog: React.FC<ExportSQLDialogProps> = ({
                            components={[
                                <a
                                    key={0}
-                                    href="mailto:chartdb.io@gmail.com"
+                                    href="mailto:support@chartdb.io"
                                    target="_blank"
                                    className="text-pink-600 hover:underline"
                                    rel="noreferrer"
--- a/src/dialogs/import-database-dialog/import-database-dialog.tsx
+++ b/src/dialogs/import-database-dialog/import-database-dialog.tsx
@@ -6,12 +6,15 @@ import { ImportDatabase } from '../common/import-database/import-database';
 import type { DatabaseEdition } from '@/lib/domain/database-edition';
 import type { DatabaseMetadata } from '@/lib/data/import-metadata/metadata-types/database-metadata';
 import { loadDatabaseMetadata } from '@/lib/data/import-metadata/metadata-types/database-metadata';
+import type { Diagram } from '@/lib/domain/diagram';
 import { loadFromDatabaseMetadata } from '@/lib/domain/diagram';
 import { useChartDB } from '@/hooks/use-chartdb';
 import { useRedoUndoStack } from '@/hooks/use-redo-undo-stack';
 import { Trans, useTranslation } from 'react-i18next';
 import { useReactFlow } from '@xyflow/react';
 import type { BaseDialogProps } from '../common/base-dialog-props';
+import { useAlert } from '@/context/alert-context/alert-context';
+import { sqlImportToDiagram } from '@/lib/data/sql-import';

 export interface ImportDatabaseDialogProps extends BaseDialogProps {
    databaseType: DatabaseType;
@@ -21,7 +24,9 @@ export const ImportDatabaseDialog: React.FC<ImportDatabaseDialogProps> = ({
    dialog,
    databaseType,
 }) => {
-    const { closeImportDatabaseDialog, showAlert } = useDialog();
+    const [importMethod, setImportMethod] = useState<'query' | 'ddl'>('query');
+    const { closeImportDatabaseDialog } = useDialog();
+    const { showAlert } = useAlert();
    const {
        tables,
        relationships,
@@ -41,6 +46,10 @@ export const ImportDatabaseDialog: React.FC<ImportDatabaseDialogProps> = ({
        DatabaseEdition | undefined
    >();

+    useEffect(() => {
+        setDatabaseEdition(undefined);
+    }, [databaseType]);
+
    useEffect(() => {
        if (!dialog.open) return;
        setDatabaseEdition(undefined);
@@ -48,17 +57,27 @@ export const ImportDatabaseDialog: React.FC<ImportDatabaseDialogProps> = ({
    }, [dialog.open]);

    const importDatabase = useCallback(async () => {
-        const databaseMetadata: DatabaseMetadata =
-            loadDatabaseMetadata(scriptResult);
+        let diagram: Diagram | undefined;

-        const diagram = await loadFromDatabaseMetadata({
-            databaseType,
-            databaseMetadata,
-            databaseEdition:
-                databaseEdition?.trim().length === 0
-                    ? undefined
-                    : databaseEdition,
-        });
+        if (importMethod === 'ddl') {
+            diagram = await sqlImportToDiagram({
+                sqlContent: scriptResult,
+                sourceDatabaseType: databaseType,
+                targetDatabaseType: databaseType,
+            });
+        } else {
+            const databaseMetadata: DatabaseMetadata =
+                loadDatabaseMetadata(scriptResult);
+
+            diagram = await loadFromDatabaseMetadata({
+                databaseType,
+                databaseMetadata,
+                databaseEdition:
+                    databaseEdition?.trim().length === 0
+                        ? undefined
+                        : databaseEdition,
+            });
+        }

        const tableIdsToRemove = tables
            .filter((table) =>
@@ -302,6 +321,7 @@ export const ImportDatabaseDialog: React.FC<ImportDatabaseDialogProps> = ({

        closeImportDatabaseDialog();
    }, [
+        importMethod,
        databaseEdition,
        currentDatabaseType,
        updateDatabaseType,
@@ -331,7 +351,7 @@ export const ImportDatabaseDialog: React.FC<ImportDatabaseDialogProps> = ({
            }}
        >
            <DialogContent
-                className="flex max-h-screen w-[90vw] flex-col overflow-y-auto md:overflow-visible xl:min-w-[45vw]"
+                className="flex max-h-screen w-full flex-col md:max-w-[900px]"
                showClose
            >
                <ImportDatabase
@@ -343,6 +363,8 @@ export const ImportDatabaseDialog: React.FC<ImportDatabaseDialogProps> = ({
                    setScriptResult={setScriptResult}
                    keepDialogAfterImport
                    title={t('import_database_dialog.title', { diagramName })}
+                    importMethod={importMethod}
+                    setImportMethod={setImportMethod}
                />
            </DialogContent>
        </Dialog>
--- a/src/dialogs/import-dbml-dialog/import-dbml-dialog.tsx
+++ b/src/dialogs/import-dbml-dialog/import-dbml-dialog.tsx
@@ -0,0 +1,413 @@
+import React, {
+    useCallback,
+    useEffect,
+    useState,
+    Suspense,
+    useRef,
+} from 'react';
+import * as monaco from 'monaco-editor';
+import { useDialog } from '@/hooks/use-dialog';
+import {
+    Dialog,
+    DialogClose,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogInternalContent,
+    DialogTitle,
+} from '@/components/dialog/dialog';
+import { Button } from '@/components/button/button';
+import type { BaseDialogProps } from '../common/base-dialog-props';
+import { useTranslation } from 'react-i18next';
+import { Editor } from '@/components/code-snippet/code-snippet';
+import { useTheme } from '@/hooks/use-theme';
+import { AlertCircle } from 'lucide-react';
+import { importDBMLToDiagram, sanitizeDBML } from '@/lib/dbml-import';
+import { useChartDB } from '@/hooks/use-chartdb';
+import { Parser } from '@dbml/core';
+import { useCanvas } from '@/hooks/use-canvas';
+import { setupDBMLLanguage } from '@/components/code-snippet/languages/dbml-language';
+import { useToast } from '@/components/toast/use-toast';
+import { Spinner } from '@/components/spinner/spinner';
+import { debounce } from '@/lib/utils';
+
+interface DBMLError {
+    message: string;
+    line: number;
+    column: number;
+}
+
+function parseDBMLError(error: unknown): DBMLError | null {
+    try {
+        if (typeof error === 'string') {
+            const parsed = JSON.parse(error);
+            if (parsed.diags?.[0]) {
+                const diag = parsed.diags[0];
+                return {
+                    message: diag.message,
+                    line: diag.location.start.line,
+                    column: diag.location.start.column,
+                };
+            }
+        } else if (error && typeof error === 'object' && 'diags' in error) {
+            const parsed = error as {
+                diags: Array<{
+                    message: string;
+                    location: { start: { line: number; column: number } };
+                }>;
+            };
+            if (parsed.diags?.[0]) {
+                return {
+                    message: parsed.diags[0].message,
+                    line: parsed.diags[0].location.start.line,
+                    column: parsed.diags[0].location.start.column,
+                };
+            }
+        }
+    } catch (e) {
+        console.error('Error parsing DBML error:', e);
+    }
+    return null;
+}
+
+export interface ImportDBMLDialogProps extends BaseDialogProps {
+    withCreateEmptyDiagram?: boolean;
+}
+
+export const ImportDBMLDialog: React.FC<ImportDBMLDialogProps> = ({
+    dialog,
+    withCreateEmptyDiagram,
+}) => {
+    const { t } = useTranslation();
+    const initialDBML = `// Use DBML to define your database structure
+// Simple Blog System with Comments Example
+
+Table users {
+  id integer [primary key]
+  name varchar
+  email varchar
+}
+
+Table posts {
+  id integer [primary key]
+  title varchar
+  content text
+  user_id integer
+  created_at timestamp
+}
+
+Table comments {
+  id integer [primary key]
+  content text
+  post_id integer
+  user_id integer
+  created_at timestamp
+}
+
+// Relationships
+Ref: posts.user_id > users.id // Each post belongs to one user
+Ref: comments.post_id > posts.id // Each comment belongs to one post
+Ref: comments.user_id > users.id // Each comment is written by one user`;
+
+    const [dbmlContent, setDBMLContent] = useState<string>(initialDBML);
+    const { closeImportDBMLDialog } = useDialog();
+    const [errorMessage, setErrorMessage] = useState<string | undefined>();
+    const { effectiveTheme } = useTheme();
+    const { toast } = useToast();
+    const {
+        addTables,
+        addRelationships,
+        tables,
+        relationships,
+        removeTables,
+        removeRelationships,
+    } = useChartDB();
+    const { reorderTables } = useCanvas();
+    const [reorder, setReorder] = useState(false);
+    const editorRef = useRef<monaco.editor.IStandaloneCodeEditor>();
+    const decorationsCollection =
+        useRef<monaco.editor.IEditorDecorationsCollection>();
+
+    const handleEditorDidMount = (
+        editor: monaco.editor.IStandaloneCodeEditor
+    ) => {
+        editorRef.current = editor;
+        decorationsCollection.current = editor.createDecorationsCollection();
+    };
+
+    useEffect(() => {
+        if (reorder) {
+            reorderTables({
+                updateHistory: false,
+            });
+            setReorder(false);
+        }
+    }, [reorder, reorderTables]);
+
+    const highlightErrorLine = useCallback((error: DBMLError) => {
+        if (!editorRef.current) return;
+
+        const model = editorRef.current.getModel();
+        if (!model) return;
+
+        const decorations = [
+            {
+                range: new monaco.Range(
+                    error.line,
+                    1,
+                    error.line,
+                    model.getLineMaxColumn(error.line)
+                ),
+                options: {
+                    isWholeLine: true,
+                    className: 'dbml-error-line',
+                    glyphMarginClassName: 'dbml-error-glyph',
+                    hoverMessage: { value: error.message },
+                    overviewRuler: {
+                        color: '#ff0000',
+                        position: monaco.editor.OverviewRulerLane.Right,
+                        darkColor: '#ff0000',
+                    },
+                },
+            },
+        ];
+
+        decorationsCollection.current?.set(decorations);
+    }, []);
+
+    const clearDecorations = useCallback(() => {
+        decorationsCollection.current?.clear();
+    }, []);
+
+    const validateDBML = useCallback(
+        async (content: string) => {
+            // Clear previous errors
+            setErrorMessage(undefined);
+            clearDecorations();
+
+            if (!content.trim()) return;
+
+            try {
+                const sanitizedContent = sanitizeDBML(content);
+                const parser = new Parser();
+                parser.parse(sanitizedContent, 'dbml');
+            } catch (e) {
+                const parsedError = parseDBMLError(e);
+                if (parsedError) {
+                    setErrorMessage(
+                        t('import_dbml_dialog.error.description') +
+                            ` (1 error found - in line ${parsedError.line})`
+                    );
+                    highlightErrorLine(parsedError);
+                } else {
+                    setErrorMessage(
+                        e instanceof Error ? e.message : JSON.stringify(e)
+                    );
+                }
+            }
+        },
+        [clearDecorations, highlightErrorLine, t]
+    );
+
+    const debouncedValidateRef = useRef<((value: string) => void) | null>(null);
+
+    // Set up debounced validation
+    useEffect(() => {
+        debouncedValidateRef.current = debounce((value: string) => {
+            validateDBML(value);
+        }, 500);
+
+        return () => {
+            debouncedValidateRef.current = null;
+        };
+    }, [validateDBML]);
+
+    // Trigger validation when content changes
+    useEffect(() => {
+        if (debouncedValidateRef.current) {
+            debouncedValidateRef.current(dbmlContent);
+        }
+    }, [dbmlContent]);
+
+    useEffect(() => {
+        if (!dialog.open) {
+            setErrorMessage(undefined);
+            clearDecorations();
+            setDBMLContent(initialDBML);
+        }
+    }, [dialog.open, initialDBML, clearDecorations]);
+
+    const handleImport = useCallback(async () => {
+        if (!dbmlContent.trim() || errorMessage) return;
+
+        try {
+            // Sanitize DBML content before importing
+            const sanitizedContent = sanitizeDBML(dbmlContent);
+            const importedDiagram = await importDBMLToDiagram(sanitizedContent);
+            const tableIdsToRemove = tables
+                .filter((table) =>
+                    importedDiagram.tables?.some(
+                        (t) =>
+                            t.name === table.name && t.schema === table.schema
+                    )
+                )
+                .map((table) => table.id);
+            // Find relationships that need to be removed
+            const relationshipIdsToRemove = relationships
+                .filter((relationship) => {
+                    const sourceTable = tables.find(
+                        (table) => table.id === relationship.sourceTableId
+                    );
+                    const targetTable = tables.find(
+                        (table) => table.id === relationship.targetTableId
+                    );
+                    if (!sourceTable || !targetTable) return true;
+                    const replacementSourceTable = importedDiagram.tables?.find(
+                        (table) =>
+                            table.name === sourceTable.name &&
+                            table.schema === sourceTable.schema
+                    );
+                    const replacementTargetTable = importedDiagram.tables?.find(
+                        (table) =>
+                            table.name === targetTable.name &&
+                            table.schema === targetTable.schema
+                    );
+                    return replacementSourceTable || replacementTargetTable;
+                })
+                .map((relationship) => relationship.id);
+
+            // Remove existing items
+            await Promise.all([
+                removeTables(tableIdsToRemove, { updateHistory: false }),
+                removeRelationships(relationshipIdsToRemove, {
+                    updateHistory: false,
+                }),
+            ]);
+
+            // Add new items
+            await Promise.all([
+                addTables(importedDiagram.tables ?? [], {
+                    updateHistory: false,
+                }),
+                addRelationships(importedDiagram.relationships ?? [], {
+                    updateHistory: false,
+                }),
+            ]);
+            setReorder(true);
+            closeImportDBMLDialog();
+        } catch (e) {
+            toast({
+                title: t('import_dbml_dialog.error.title'),
+                variant: 'destructive',
+                description: (
+                    <>
+                        <div>{t('import_dbml_dialog.error.description')}</div>
+                        {e instanceof Error ? e.message : JSON.stringify(e)}
+                    </>
+                ),
+            });
+        }
+    }, [
+        dbmlContent,
+        closeImportDBMLDialog,
+        tables,
+        relationships,
+        removeTables,
+        removeRelationships,
+        addTables,
+        addRelationships,
+        errorMessage,
+        toast,
+        setReorder,
+        t,
+    ]);
+
+    return (
+        <Dialog
+            {...dialog}
+            onOpenChange={(open) => {
+                if (!open) {
+                    closeImportDBMLDialog();
+                }
+            }}
+        >
+            <DialogContent
+                className="flex h-[80vh] max-h-screen w-full flex-col md:max-w-[900px]"
+                showClose
+            >
+                <DialogHeader>
+                    <DialogTitle>
+                        {withCreateEmptyDiagram
+                            ? t('import_dbml_dialog.example_title')
+                            : t('import_dbml_dialog.title')}
+                    </DialogTitle>
+                    <DialogDescription>
+                        {t('import_dbml_dialog.description')}
+                    </DialogDescription>
+                </DialogHeader>
+                <DialogInternalContent>
+                    <Suspense fallback={<Spinner />}>
+                        <Editor
+                            value={dbmlContent}
+                            onChange={(value) => setDBMLContent(value || '')}
+                            language="dbml"
+                            onMount={handleEditorDidMount}
+                            theme={
+                                effectiveTheme === 'dark'
+                                    ? 'dbml-dark'
+                                    : 'dbml-light'
+                            }
+                            beforeMount={setupDBMLLanguage}
+                            options={{
+                                minimap: { enabled: false },
+                                scrollBeyondLastLine: false,
+                                automaticLayout: true,
+                                glyphMargin: true,
+                                lineNumbers: 'on',
+                                scrollbar: {
+                                    vertical: 'visible',
+                                    horizontal: 'visible',
+                                },
+                            }}
+                            className="size-full"
+                        />
+                    </Suspense>
+                </DialogInternalContent>
+                <DialogFooter>
+                    <div className="flex w-full items-center justify-between">
+                        <div className="flex items-center gap-4">
+                            <DialogClose asChild>
+                                <Button variant="secondary">
+                                    {withCreateEmptyDiagram
+                                        ? t('import_dbml_dialog.skip_and_empty')
+                                        : t('import_dbml_dialog.cancel')}
+                                </Button>
+                            </DialogClose>
+                            {errorMessage ? (
+                                <div className="flex items-center gap-1">
+                                    <AlertCircle className="size-4 text-destructive" />
+
+                                    <span className="text-xs text-destructive">
+                                        {errorMessage ||
+                                            t(
+                                                'import_dbml_dialog.error.description'
+                                            )}
+                                    </span>
+                                </div>
+                            ) : null}
+                        </div>
+                        <Button
+                            onClick={handleImport}
+                            disabled={!dbmlContent.trim() || !!errorMessage}
+                        >
+                            {withCreateEmptyDiagram
+                                ? t('import_dbml_dialog.show_example')
+                                : t('import_dbml_dialog.import')}
+                        </Button>
+                    </div>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    );
+};
--- a/src/dialogs/open-diagram-dialog/open-diagram-dialog.tsx
+++ b/src/dialogs/open-diagram-dialog/open-diagram-dialog.tsx
@@ -22,15 +22,19 @@ import { useConfig } from '@/hooks/use-config';
 import { useDialog } from '@/hooks/use-dialog';
 import { useStorage } from '@/hooks/use-storage';
 import type { Diagram } from '@/lib/domain/diagram';
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import type { BaseDialogProps } from '../common/base-dialog-props';
+import { useDebounce } from '@/hooks/use-debounce';

-export interface OpenDiagramDialogProps extends BaseDialogProps {}
+export interface OpenDiagramDialogProps extends BaseDialogProps {
+    canClose?: boolean;
+}

 export const OpenDiagramDialog: React.FC<OpenDiagramDialogProps> = ({
    dialog,
+    canClose = true,
 }) => {
    const { closeOpenDiagramDialog } = useDialog();
    const { t } = useTranslation();
@@ -58,24 +62,77 @@ export const OpenDiagramDialog: React.FC<OpenDiagramDialogProps> = ({
        fetchDiagrams();
    }, [listDiagrams, setDiagrams, dialog.open]);

-    const openDiagram = (diagramId: string) => {
-        if (diagramId) {
-            updateConfig({ defaultDiagramId: diagramId });
-            navigate(`/diagrams/${diagramId}`);
-        }
-    };
+    const openDiagram = useCallback(
+        (diagramId: string) => {
+            if (diagramId) {
+                updateConfig({ config: { defaultDiagramId: diagramId } });
+                navigate(`/diagrams/${diagramId}`);
+            }
+        },
+        [updateConfig, navigate]
+    );
+
+    const handleRowKeyDown = useCallback(
+        (e: React.KeyboardEvent<HTMLTableRowElement>) => {
+            const element = e.target as HTMLElement;
+            const diagramId = element.getAttribute('data-diagram-id');
+            const selectionIndexAttr = element.getAttribute(
+                'data-selection-index'
+            );
+
+            if (!diagramId || !selectionIndexAttr) return;
+
+            const selectionIndex = parseInt(selectionIndexAttr, 10);
+
+            switch (e.key) {
+                case 'Enter':
+                case ' ':
+                    e.preventDefault();
+                    openDiagram(diagramId);
+                    closeOpenDiagramDialog();
+                    break;
+                case 'ArrowDown': {
+                    e.preventDefault();
+
+                    (
+                        document.querySelector(
+                            `[data-selection-index="${selectionIndex + 1}"]`
+                        ) as HTMLElement
+                    )?.focus();
+                    break;
+                }
+                case 'ArrowUp': {
+                    e.preventDefault();
+
+                    (
+                        document.querySelector(
+                            `[data-selection-index="${selectionIndex - 1}"]`
+                        ) as HTMLElement
+                    )?.focus();
+                    break;
+                }
+            }
+        },
+        [openDiagram, closeOpenDiagramDialog]
+    );
+
+    const onFocusHandler = useDebounce(
+        (diagramId: string) => setSelectedDiagramId(diagramId),
+        50
+    );
+
    return (
        <Dialog
            {...dialog}
            onOpenChange={(open) => {
-                if (!open) {
+                if (!open && canClose) {
                    closeOpenDiagramDialog();
                }
            }}
        >
            <DialogContent
-                className="flex h-[30rem] max-h-screen w-[90vw] flex-col overflow-y-auto md:w-screen xl:min-w-[55vw]"
-                showClose
+                className="flex h-[30rem] max-h-screen flex-col overflow-y-auto md:min-w-[80vw] xl:min-w-[55vw]"
+                showClose={canClose}
            >
                <DialogHeader>
                    <DialogTitle>{t('open_diagram_dialog.title')}</DialogTitle>
@@ -112,10 +169,17 @@ export const OpenDiagramDialog: React.FC<OpenDiagramDialogProps> = ({
                                </TableRow>
                            </TableHeader>
                            <TableBody>
-                                {diagrams.map((diagram) => (
+                                {diagrams.map((diagram, index) => (
                                    <TableRow
                                        key={diagram.id}
                                        data-state={`${selectedDiagramId === diagram.id ? 'selected' : ''}`}
+                                        data-diagram-id={diagram.id}
+                                        data-selection-index={index}
+                                        tabIndex={0}
+                                        onFocus={() =>
+                                            onFocusHandler(diagram.id)
+                                        }
+                                        className="focus:bg-accent focus:outline-none"
                                        onClick={(e) => {
                                            switch (e.detail) {
                                                case 1:
@@ -133,6 +197,7 @@ export const OpenDiagramDialog: React.FC<OpenDiagramDialogProps> = ({
                                                    );
                                            }
                                        }}
+                                        onKeyDown={handleRowKeyDown}
                                    >
                                        <TableCell className="table-cell">
                                            <div className="flex justify-center">
@@ -164,11 +229,15 @@ export const OpenDiagramDialog: React.FC<OpenDiagramDialogProps> = ({
                </DialogInternalContent>

                <DialogFooter className="flex !justify-between gap-2">
-                    <DialogClose asChild>
-                        <Button type="button" variant="secondary">
-                            {t('open_diagram_dialog.cancel')}
-                        </Button>
-                    </DialogClose>
+                    {canClose ? (
+                        <DialogClose asChild>
+                            <Button type="button" variant="secondary">
+                                {t('open_diagram_dialog.cancel')}
+                            </Button>
+                        </DialogClose>
+                    ) : (
+                        <div />
+                    )}
                    <DialogClose asChild>
                        <Button
                            type="submit"
--- a/src/globals.css
+++ b/src/globals.css
@@ -30,6 +30,14 @@
        --chart-4: 43 74% 66%;
        --chart-5: 27 87% 67%;
        --subtitle: 215.3 19.3% 34.5%;
+        --sidebar-background: 0 0% 98%;
+        --sidebar-foreground: 240 5.3% 26.1%;
+        --sidebar-primary: 240 5.9% 10%;
+        --sidebar-primary-foreground: 0 0% 98%;
+        --sidebar-accent: 240 4.8% 95.9%;
+        --sidebar-accent-foreground: 240 5.9% 10%;
+        --sidebar-border: 220 13% 91%;
+        --sidebar-ring: 217.2 91.2% 59.8%;
    }

    .dark {
@@ -58,6 +66,14 @@
        --chart-4: 280 65% 60%;
        --chart-5: 340 75% 55%;
        --subtitle: 212.7 26.8% 83.9%;
+        --sidebar-background: 240 5.9% 10%;
+        --sidebar-foreground: 240 4.8% 95.9%;
+        --sidebar-primary: 224.3 76.3% 48%;
+        --sidebar-primary-foreground: 0 0% 100%;
+        --sidebar-accent: 240 3.7% 15.9%;
+        --sidebar-accent-foreground: 240 4.8% 95.9%;
+        --sidebar-border: 240 3.7% 15.9%;
+        --sidebar-ring: 217.2 91.2% 59.8%;
    }
 }

@@ -73,3 +89,68 @@
        @apply dark:group-hover:bg-slate-900 group-hover:bg-slate-100 group-hover:ring-[0.5px] rounded-md cursor-pointer;
    }
 }
+
+.gradient-background {
+    /* Fallback: Set a background color. */
+    background-color: #f46b24;
+
+    /* Create the gradient. */
+    background-image: linear-gradient(
+        45deg,
+        #2e6579 20%,
+        #4fafca 20%,
+        #4fafca 40%,
+        #6dc630 40%,
+        #6dc630 60%,
+        #f9dc3a 60%,
+        #f9dc3a 80%,
+        #f46b24 80%
+    );
+
+    /* Set the background size and repeat properties. */
+    background-size: 100%;
+    background-repeat: repeat;
+
+    /* Use the text as a mask for the background. */
+    /* This will show the gradient as a text color rather than element bg. */
+    /* -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent; */
+
+    /* Animate the text when loading the element. */
+    /* This animates it on page load and when hovering out. */
+    animation: rainbow-text-simple-animation-rev 0.75s ease forwards;
+}
+
+.gradient-background:hover {
+    animation: rainbow-text-simple-animation 0.5s ease-in forwards;
+}
+
+.dbml-error-line {
+    background-color: rgba(255, 0, 0, 0.2) !important;
+}
+
+@keyframes rainbow-text-simple-animation-rev {
+    0% {
+        background-size: 650%;
+    }
+    40% {
+        background-size: 650%;
+    }
+    100% {
+        background-size: 100%;
+    }
+}
+
+/* Move the background and make it larger. */
+/* Animation shown when hovering over the text. */
+@keyframes rainbow-text-simple-animation {
+    0% {
+        background-size: 100%;
+    }
+    80% {
+        background-size: 650%;
+    }
+    100% {
+        background-size: 650%;
+    }
+}
--- a/src/hooks/use-canvas.ts
+++ b/src/hooks/use-canvas.ts
@@ -0,0 +1,4 @@
+import { useContext } from 'react';
+import { canvasContext } from '@/context/canvas-context/canvas-context';
+
+export const useCanvas = () => useContext(canvasContext);
--- a/src/hooks/use-debounce-v2.ts
+++ b/src/hooks/use-debounce-v2.ts
@@ -0,0 +1,47 @@
+import { useEffect, useRef, useCallback } from 'react';
+import { debounce as utilsDebounce } from '@/lib/utils';
+
+interface DebouncedFunction {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (...args: any[]): void;
+    cancel?: () => void;
+}
+
+/**
+ * A hook that returns a debounced version of the provided function.
+ * The debounced function will only be called after the specified delay
+ * has passed without the function being called again.
+ *
+ * @param callback The function to debounce
+ * @param delay The delay in milliseconds
+ * @returns A debounced version of the callback
+ */
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function useDebounce<T extends (...args: any[]) => any>(
+    callback: T,
+    delay: number
+): (...args: Parameters<T>) => void {
+    // Use a ref to store the debounced function
+    const debouncedFnRef = useRef<DebouncedFunction>();
+
+    // Update the debounced function when dependencies change
+    useEffect(() => {
+        // Create the debounced function
+        debouncedFnRef.current = utilsDebounce(callback, delay);
+
+        // Clean up when component unmounts or dependencies change
+        return () => {
+            if (debouncedFnRef.current?.cancel) {
+                debouncedFnRef.current.cancel();
+            }
+        };
+    }, [callback, delay]);
+
+    // Create a stable callback that uses the ref
+    const debouncedCallback = useCallback((...args: Parameters<T>) => {
+        debouncedFnRef.current?.(...args);
+    }, []);
+
+    return debouncedCallback;
+}
--- a/src/hooks/use-debounce.ts
+++ b/src/hooks/use-debounce.ts
@@ -0,0 +1,21 @@
+import { useCallback, useRef } from 'react';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type AnyFunction = (...args: any[]) => any;
+
+export const useDebounce = <T extends AnyFunction>(
+    func: T,
+    delay: number
+): ((...args: Parameters<T>) => void) => {
+    const inDebounce = useRef<NodeJS.Timeout>();
+
+    const debounce = useCallback(
+        (...args: Parameters<T>) => {
+            clearTimeout(inDebounce.current);
+            inDebounce.current = setTimeout(() => func(...args), delay);
+        },
+        [func, delay]
+    );
+
+    return debounce;
+};
--- a/src/hooks/use-export-diagram.tsx
+++ b/src/hooks/use-export-diagram.tsx
@@ -0,0 +1,40 @@
+import { useCallback, useState } from 'react';
+import { useDialog } from '@/hooks/use-dialog';
+import { diagramToJSONOutput } from '@/lib/export-import-utils';
+import { waitFor } from '@/lib/utils';
+import type { Diagram } from '@/lib/domain/diagram';
+
+export const useExportDiagram = () => {
+    const [isLoading, setIsLoading] = useState(false);
+    const { closeExportDiagramDialog } = useDialog();
+
+    const downloadOutput = useCallback((name: string, dataUrl: string) => {
+        const a = document.createElement('a');
+        a.setAttribute('download', `ChartDB(${name}).json`);
+        a.setAttribute('href', dataUrl);
+        a.click();
+    }, []);
+
+    const handleExport = useCallback(
+        async ({ diagram }: { diagram: Diagram }) => {
+            setIsLoading(true);
+            await waitFor(1000);
+            try {
+                const json = diagramToJSONOutput(diagram);
+                const blob = new Blob([json], { type: 'application/json' });
+                const dataUrl = URL.createObjectURL(blob);
+                downloadOutput(diagram.name, dataUrl);
+                setIsLoading(false);
+                closeExportDiagramDialog();
+            } finally {
+                setIsLoading(false);
+            }
+        },
+        [downloadOutput, closeExportDiagramDialog]
+    );
+
+    return {
+        exportDiagram: handleExport,
+        isExporting: isLoading,
+    };
+};
--- a/src/hooks/use-mobile.tsx
+++ b/src/hooks/use-mobile.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+    const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
+        undefined
+    );
+
+    React.useEffect(() => {
+        const mql = window.matchMedia(
+            `(max-width: ${MOBILE_BREAKPOINT - 1}px)`
+        );
+        const onChange = () => {
+            setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+        };
+        mql.addEventListener('change', onChange);
+        setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+        return () => mql.removeEventListener('change', onChange);
+    }, []);
+
+    return !!isMobile;
+}
--- a/src/i18n/i18n.ts
+++ b/src/i18n/i18n.ts
@@ -22,6 +22,7 @@ import { te, teMetadata } from './locales/te';
 import { bn, bnMetadata } from './locales/bn';
 import { gu, guMetadata } from './locales/gu';
 import { vi, viMetadata } from './locales/vi';
+import { ar, arMetadata } from './locales/ar';

 export const languages: LanguageMetadata[] = [
    enMetadata,
@@ -44,6 +45,7 @@ export const languages: LanguageMetadata[] = [
    bnMetadata,
    guMetadata,
    viMetadata,
+    arMetadata,
 ];

 const resources = {
@@ -67,6 +69,7 @@ const resources = {
    bn,
    gu,
    vi,
+    ar,
 };

 i18n.use(LanguageDetector)
--- a/src/i18n/locales/ar.ts
+++ b/src/i18n/locales/ar.ts
@@ -0,0 +1,484 @@
+import type { LanguageMetadata, LanguageTranslation } from '../types';
+
+export const ar: LanguageTranslation = {
+    translation: {
+        menu: {
+            file: {
+                file: 'ملف',
+                new: 'جديد',
+                open: 'فتح',
+                save: 'حفظ',
+                import: 'استيراد قاعدة بيانات',
+                export_sql: 'SQL تصدير',
+                export_as: 'تصدير كـ',
+                delete_diagram: 'حذف الرسم البياني',
+                exit: 'خروج',
+            },
+            edit: {
+                edit: 'تحرير',
+                undo: 'تراجع',
+                redo: 'إعادة',
+                clear: 'مسح',
+            },
+            view: {
+                view: 'عرض',
+                show_sidebar: 'إظهار الشريط الجانبي',
+                hide_sidebar: 'إخفاء الشريط الجانبي',
+                hide_cardinality: 'إخفاء الكاردينالية',
+                show_cardinality: 'إظهار الكاردينالية',
+                zoom_on_scroll: 'تكبير/تصغير عند التمرير',
+                theme: 'المظهر',
+                show_dependencies: 'إظهار الاعتمادات',
+                hide_dependencies: 'إخفاء الاعتمادات',
+                // TODO: Translate
+                show_minimap: 'Show Mini Map',
+                hide_minimap: 'Hide Mini Map',
+            },
+            backup: {
+                backup: 'النسخ الاحتياطي',
+                export_diagram: 'تصدير المخطط',
+                restore_diagram: 'استعادة المخطط',
+            },
+            help: {
+                help: 'مساعدة',
+                docs_website: 'الوثائق',
+                join_discord: 'انضم إلينا على Discord',
+            },
+        },
+
+        delete_diagram_alert: {
+            title: 'حذف المخطط',
+            description:
+                '.لا يمكن التراجع عن هذا الإجراء. سيتم حذف الرسم البياني بشكل دائم',
+            cancel: 'إلغاء',
+            delete: 'حذف',
+        },
+
+        clear_diagram_alert: {
+            title: 'مسح الرسم البياني',
+            description:
+                '.لا يمكن التراجع عن هذا الاجراء. سيتم حذف جميع البيانات في الرسم البياني بشكل دائم',
+            cancel: 'إلغاء',
+            clear: 'مسح',
+        },
+
+        reorder_diagram_alert: {
+            title: 'إعادة ترتيب الرسم البياني',
+            description:
+                'هذا الإجراء سيقوم بإعادة ترتيب الجداول في المخطط بشكل تلقائي. هل تريد المتابعة؟',
+            reorder: 'إعادة ترتيب',
+            cancel: 'إلغاء',
+        },
+
+        multiple_schemas_alert: {
+            title: 'مخططات متعددة',
+            description:
+                '{{formattedSchemas}} :مخططات في هذا الرسم البياني. يتم حاليا عرض {{schemasCount}} هناك',
+            dont_show_again: 'لا تظهره مجدداً',
+            change_schema: 'تغيير',
+            none: 'لا شيء',
+        },
+
+        copy_to_clipboard_toast: {
+            unsupported: {
+                title: 'فشل النسخ',
+                description: '.الحافظة غير مدعومة',
+            },
+            failed: {
+                title: 'فشل النسخ',
+                description: 'حدث خطأ أثناء النسخ. حاول مجدداً',
+            },
+        },
+
+        theme: {
+            system: 'النظام',
+            light: 'فاتح',
+            dark: 'داكن',
+        },
+
+        zoom: {
+            on: 'تشغيل',
+            off: 'إيقاف',
+        },
+
+        last_saved: 'آخر حفظ',
+        saved: 'تم الحفظ',
+        loading_diagram: '...جارِ تحميل الرسم البياني',
+        deselect_all: 'إلغاء تحديد الكل',
+        select_all: 'تحديد الكل',
+        clear: 'مسح',
+        show_more: 'عرض المزيد',
+        show_less: 'عرض أقل',
+        copy_to_clipboard: 'نسخ إلى الحافظة',
+        copied: '!تم النسخ',
+
+        side_panel: {
+            schema: ':المخطط',
+            filter_by_schema: 'تصفية حسب المخطط',
+            search_schema: '...بحث في المخطط',
+            no_schemas_found: '.لم يتم العثور على مخططات',
+            view_all_options: '...عرض جميع الخيارات',
+            tables_section: {
+                tables: 'الجداول',
+                add_table: 'إضافة جدول',
+                filter: 'تصفية',
+                collapse: 'طي الكل',
+                // TODO: Translate
+                clear: 'Clear Filter',
+                no_results: 'No tables found matching your filter.',
+                // TODO: Translate
+                show_list: 'Show Table List',
+                show_dbml: 'Show DBML Editor',
+
+                table: {
+                    fields: 'الحقول',
+                    nullable: 'يمكن ان يكون فارغاً؟',
+                    primary_key: 'المفتاح الأساسي',
+                    indexes: 'الفهارس',
+                    comments: 'تعليقات',
+                    no_comments: 'لا توجد تعليقات',
+                    add_field: 'إضافة حقل',
+                    add_index: 'إضافة فهرس',
+                    index_select_fields: 'حدد الحقول',
+                    no_types_found: 'لا يوجد أنواع',
+                    field_name: 'الإسم',
+                    field_type: 'النوع',
+                    field_actions: {
+                        title: 'خصائص الحقل',
+                        unique: 'فريد',
+                        comments: 'تعليقات',
+                        no_comments: 'لا يوجد تعليقات',
+                        delete_field: 'حذف الحقل',
+                        // TODO: Translate
+                        character_length: 'Max Length',
+                    },
+                    index_actions: {
+                        title: 'خصائص الفهرس',
+                        name: 'الإسم',
+                        unique: 'فريد',
+                        delete_index: 'حذف الفهرس',
+                    },
+                    table_actions: {
+                        title: 'إجراءات الجدول',
+                        change_schema: 'تغيير المخطط',
+                        add_field: 'إضافة حقل',
+                        add_index: 'إضافة فهرس',
+                        duplicate_table: 'نسخ الجدول',
+                        delete_table: 'حذف الجدول',
+                    },
+                },
+                empty_state: {
+                    title: 'لا توجد جداول',
+                    description: 'أنشئ جدولاً للبدء',
+                },
+            },
+            relationships_section: {
+                relationships: 'العلاقات',
+                filter: 'تصفية',
+                add_relationship: 'إضافة علاقة',
+                collapse: 'طي الكل',
+                relationship: {
+                    primary: 'الجدول الأساسي',
+                    foreign: 'الجدول المرتبط',
+                    cardinality: 'الكاردينالية',
+                    delete_relationship: 'حذف',
+                    relationship_actions: {
+                        title: 'إجراءات',
+                        delete_relationship: 'حذف',
+                    },
+                },
+                empty_state: {
+                    title: 'لا توجد علاقات',
+                    description: 'إنشئ علاقة لربط الجداول',
+                },
+            },
+            dependencies_section: {
+                dependencies: 'الاعتمادات',
+                filter: 'تصفية',
+                collapse: 'طي الكل',
+                dependency: {
+                    table: 'الجدول',
+                    dependent_table: 'عرض الاعتمادات',
+                    delete_dependency: 'حذف',
+                    dependency_actions: {
+                        title: 'إجراءات',
+                        delete_dependency: 'حذف',
+                    },
+                },
+                empty_state: {
+                    title: 'لا توجد اعتمادات',
+                    description: 'إنشاء اعتماد للبدء',
+                },
+            },
+
+            // TODO: Translate
+            areas_section: {
+                areas: 'Areas',
+                add_area: 'Add Area',
+                filter: 'Filter',
+                clear: 'Clear Filter',
+                no_results: 'No areas found matching your filter.',
+
+                area: {
+                    area_actions: {
+                        title: 'Area Actions',
+                        edit_name: 'Edit Name',
+                        delete_area: 'Delete Area',
+                    },
+                },
+                empty_state: {
+                    title: 'No areas',
+                    description: 'Create an area to get started',
+                },
+            },
+
+            // TODO: Translate
+            custom_types_section: {
+                custom_types: 'Custom Types',
+                filter: 'Filter',
+                clear: 'Clear Filter',
+                no_results: 'No custom types found matching your filter.',
+                empty_state: {
+                    title: 'No custom types',
+                    description:
+                        'Custom types will appear here when they are available in your database',
+                },
+                custom_type: {
+                    kind: 'Kind',
+                    enum_values: 'Enum Values',
+                    composite_fields: 'Fields',
+                    no_fields: 'No fields defined',
+                    field_name_placeholder: 'Field name',
+                    field_type_placeholder: 'Select type',
+                    add_field: 'Add Field',
+                    custom_type_actions: {
+                        title: 'Actions',
+                        delete_custom_type: 'Delete',
+                    },
+                    delete_custom_type: 'Delete Type',
+                },
+            },
+        },
+
+        toolbar: {
+            zoom_in: 'تكبير',
+            zoom_out: 'تصغير',
+            save: 'حفظ',
+            show_all: 'عرض الكل',
+            undo: 'تراجع',
+            redo: 'إعادة',
+            reorder_diagram: 'إعادة ترتيب الرسم البياني',
+            highlight_overlapping_tables: 'تمييز الجداول المتداخلة',
+        },
+
+        new_diagram_dialog: {
+            database_selection: {
+                title: 'ما هو نوع قاعدة البيانات الخاصة بك؟',
+                description:
+                    'تتمتع كل قاعدة بيانات بمميزاتها وقدراتها الفريدة.',
+                check_examples_long: 'ألقي نظرة على الأمثلة',
+                check_examples_short: 'أمثلة',
+            },
+
+            import_database: {
+                title: 'إسترد قاعدة بياناتك',
+                database_edition: ':إصدار قاعدة البيانات',
+                step_1: ':قم بتشغيل هذا البرنامج النصي في قاعدة بياناتك',
+                step_2: ':إلصق نتيجة البرنامج النصي هنا →',
+                script_results_placeholder: '...نتيجة البرنامج النصي هنا',
+                ssms_instructions: {
+                    button_text: 'SSMS تعليمات',
+                    title: 'تعليمات',
+                    step_1: 'SQL SERVER < انتقل إلى الأدوات > الخيارات > نتائح الاستعلام',
+                    step_2: '(اضبطها على 9999999) XML اذا كنت تستخدم "نتائج إلى الشبكة"، قم بتغيير الحد الاقصى للاحرف المستردة للبيانات غير',
+                },
+                instructions_link: 'تحتاج مساعدة؟ شاهد الفيديو',
+                check_script_result: 'تحقق من نتيجة البرنامج النصي',
+            },
+
+            cancel: 'إلغاء',
+            import_from_file: 'استيراد من ملف',
+            back: 'رجوع',
+            empty_diagram: 'مخطط فارغ',
+            continue: 'متابعة',
+            import: 'استيراد',
+        },
+
+        open_diagram_dialog: {
+            title: 'فتح مخطط',
+            description: 'اختر مخططًا لفتحه من القائمة ادناه',
+            table_columns: {
+                name: 'الإسم',
+                created_at: 'تاريخ الإنشاء',
+                last_modified: 'آخر تعديل',
+                tables_count: 'الجداول',
+            },
+            cancel: 'إلغاء',
+            open: 'فتح',
+        },
+
+        export_sql_dialog: {
+            title: 'SQL تصدير',
+            description:
+                '{{databaseType}} صدّر مخطط الرسم البياني إلى برنامج نصي لـ',
+            close: 'إغلاق',
+            loading: {
+                text: '...{{databaseType}} ل SQL يقوم الذكاء الاصطناعي بإنشاء',
+                description: 'هذا قد يستغرق 30 ثانية',
+            },
+            error: {
+                message:
+                    'النصي. يرجى المحاولة مرة اخرى لاحقاً او <0>اتصل بنا</0> SQL خطأ في إنشاء برنامج',
+                description:
+                    ' الخاصة بك. راجع الدليل <0>هنا</0> OPENAI_TOKEN لا تتردد في استخدام',
+            },
+        },
+
+        create_relationship_dialog: {
+            title: 'إنشاء علاقة',
+            primary_table: 'الجدول الأساسي',
+            primary_field: 'الحقل الأساسي',
+            referenced_table: 'الجدول المرتبط',
+            referenced_field: 'الحقل المرتبط',
+            primary_table_placeholder: 'حدد الجدول',
+            primary_field_placeholder: 'حدد الحقل',
+            referenced_table_placeholder: 'حدد الجدول',
+            referenced_field_placeholder: 'حدد الحقل',
+            no_tables_found: 'لم يتم العثور على جداول',
+            no_fields_found: 'لم يتم العثور على حقول',
+            create: 'إنشاء',
+            cancel: 'إلغاء',
+        },
+
+        import_database_dialog: {
+            title: 'استيراد إلى المخطط الحالي',
+            override_alert: {
+                title: 'استيراد قاعدة بيانات',
+                content: {
+                    alert: 'سيؤدي استيراد هذا المخطط إلى التأثير على الجداول والعلاقات الحالية.',
+                    new_tables:
+                        'جداول جديدة <bold>{{newTablesNumber}}</bold> سيتم إضافة',
+                    new_relationships:
+                        'علاقات جديدة <bold>{{newRelationshipsNumber}}</bold> سيتم إنشاء',
+                    tables_override:
+                        'جداول <bold>{{tablesOverrideNumber}}</bold> سيتم تعديل',
+                    proceed: 'هل تريد المتابعة؟',
+                },
+                import: 'استيراد',
+                cancel: 'إلغاء',
+            },
+        },
+
+        export_image_dialog: {
+            title: 'تصدير الصورة',
+            description: ':اختر عامل المقياس للتصدير',
+            scale_1x: '1x عادي',
+            scale_2x: '2x (موصى به)',
+            scale_3x: '3x',
+            scale_4x: '4x',
+            cancel: 'إلغاء',
+            export: 'تصدير',
+            // TODO: Translate
+            advanced_options: 'Advanced Options',
+            pattern: 'Include background pattern',
+            pattern_description: 'Add subtle grid pattern to background.',
+            transparent: 'Transparent background',
+            transparent_description: 'Remove background color from image.',
+        },
+
+        new_table_schema_dialog: {
+            title: 'اختر مخططاً',
+            description:
+                '.يتم حالياً عرض مخططات متعددة. اختر واحداً للجدول الجديد',
+            cancel: 'إلغاء',
+            confirm: 'تأكيد',
+        },
+
+        update_table_schema_dialog: {
+            title: 'تغيير المخطط',
+            description: '"{{tableName}}" تحديث مخطط الجدول',
+            cancel: 'إلغاء',
+            confirm: 'تغيير',
+        },
+
+        star_us_dialog: {
+            title: '!ساعدنا على التحسن',
+            description: '؟! إنها مجرد نقرة واحدةGITHUB هل ترغب في تقييمنا على',
+            close: 'ليس الآن',
+            confirm: '!بالتأكيد',
+        },
+        export_diagram_dialog: {
+            title: 'تصدير المخطط',
+            description: ':اختر التنسيق للتصدير',
+            format_json: 'JSON',
+            cancel: 'إلغاء',
+            export: 'تصدير',
+            error: {
+                title: 'حدث خطأ أثناء التصدير',
+                description:
+                    'support@chartdb.io حدث خطأ ما. هل تحتاج إلى مساعدة؟',
+            },
+        },
+        import_diagram_dialog: {
+            title: 'استيراد الرسم البياني',
+            description: ':للرسم البياني ادناه JSON قم بلصق',
+            cancel: 'إلغاء',
+            import: 'استيراد',
+            error: {
+                title: 'حدث خطأ أثناء الاستيراد',
+                description:
+                    'support@chartdb.io و المحاولة مرة اخرى. هل تحتاج إلى المساعدة؟ JSON غير صالح. يرجى التحقق من JSON الرسم البياني',
+            },
+        },
+        import_dbml_dialog: {
+            // TODO: Translate
+            title: 'Import DBML',
+            example_title: 'Import Example DBML',
+            description: 'Import a database schema from DBML format.',
+            import: 'Import',
+            cancel: 'Cancel',
+            skip_and_empty: 'Skip & Empty',
+            show_example: 'Show Example',
+            error: {
+                title: 'Error',
+                description: 'Failed to parse DBML. Please check the syntax.',
+            },
+        },
+        relationship_type: {
+            one_to_one: 'واحد إلى واحد',
+            one_to_many: 'واحد إلى متعدد',
+            many_to_one: 'متعدد إلى واحد',
+            many_to_many: 'متعدد إلى متعدد',
+        },
+
+        canvas_context_menu: {
+            new_table: 'جدول جديد',
+            new_relationship: 'علاقة جديدة',
+            // TODO: Translate
+            new_area: 'New Area',
+        },
+
+        table_node_context_menu: {
+            edit_table: 'تعديل الجدول',
+            duplicate_table: 'نسخ الجدول',
+            delete_table: 'حذف الجدول',
+            add_relationship: 'Add Relationship', // TODO: Translate
+        },
+
+        snap_to_grid_tooltip: '({{key}} مغنظة الشبكة (اضغط مع الاستمرار على',
+
+        tool_tips: {
+            double_click_to_edit: 'انقر مرتين للتعديل',
+        },
+
+        language_select: {
+            change_language: 'اللغة',
+        },
+    },
+};
+
+export const arMetadata: LanguageMetadata = {
+    name: 'Arabic',
+    nativeName: 'العربية',
+    code: 'ar',
+};
--- a/src/i18n/locales/bn.ts
+++ b/src/i18n/locales/bn.ts
@@ -8,7 +8,7 @@ export const bn: LanguageTranslation = {
                new: 'নতুন',
                open: 'খুলুন',
                save: 'সংরক্ষণ করুন',
-                import_database: 'ডাটাবেস আমদানি করুন',
+                import: 'ডাটাবেস আমদানি করুন',
                export_sql: 'SQL রপ্তানি করুন',
                export_as: 'রূপে রপ্তানি করুন',
                delete_diagram: 'ডায়াগ্রাম মুছুন',
@@ -30,18 +30,20 @@ export const bn: LanguageTranslation = {
                theme: 'থিম',
                show_dependencies: 'নির্ভরতাগুলি দেখান',
                hide_dependencies: 'নির্ভরতাগুলি লুকান',
+                // TODO: Translate
+                show_minimap: 'Show Mini Map',
+                hide_minimap: 'Hide Mini Map',
            },

-            share: {
-                share: 'শেয়ার করুন',
+            backup: {
+                backup: 'ব্যাকআপ',
                export_diagram: 'ডায়াগ্রাম রপ্তানি করুন',
-                import_diagram: 'ডায়াগ্রাম আমদানি করুন',
+                restore_diagram: 'ডায়াগ্রাম পুনরুদ্ধার করুন',
            },
            help: {
                help: 'সাহায্য',
-                visit_website: 'ChartDB ওয়েবসাইটে যান',
+                docs_website: 'ডকুমেন্টেশন',
                join_discord: 'আমাদের Discord-এ যোগ দিন',
-                schedule_a_call: 'আমাদের সাথে কথা বলুন!',
            },
        },

@@ -102,7 +104,6 @@ export const bn: LanguageTranslation = {

        last_saved: 'সর্বশেষ সংরক্ষণ',
        saved: 'সংরক্ষিত',
-        diagrams: 'ডায়াগ্রাম',
        loading_diagram: 'ডায়াগ্রাম লোড হচ্ছে...',
        deselect_all: 'সব নির্বাচন সরান',
        select_all: 'সব নির্বাচন করুন',
@@ -123,6 +124,12 @@ export const bn: LanguageTranslation = {
                add_table: 'টেবিল যোগ করুন',
                filter: 'ফিল্টার',
                collapse: 'সব ভাঁজ করুন',
+                // TODO: Translate
+                clear: 'Clear Filter',
+                no_results: 'No tables found matching your filter.',
+                // TODO: Translate
+                show_list: 'Show Table List',
+                show_dbml: 'Show DBML Editor',

                table: {
                    fields: 'ফিল্ড',
@@ -143,6 +150,8 @@ export const bn: LanguageTranslation = {
                        comments: 'মন্তব্য',
                        no_comments: 'কোনো মন্তব্য নেই',
                        delete_field: 'ফিল্ড মুছুন',
+                        // TODO: Translate
+                        character_length: 'Max Length',
                    },
                    index_actions: {
                        title: 'ইনডেক্স কর্ম',
@@ -202,6 +211,53 @@ export const bn: LanguageTranslation = {
                    description: 'এই অংশে কোনো নির্ভরতা উপলব্ধ নেই।',
                },
            },
+
+            // TODO: Translate
+            areas_section: {
+                areas: 'Areas',
+                add_area: 'Add Area',
+                filter: 'Filter',
+                clear: 'Clear Filter',
+                no_results: 'No areas found matching your filter.',
+
+                area: {
+                    area_actions: {
+                        title: 'Area Actions',
+                        edit_name: 'Edit Name',
+                        delete_area: 'Delete Area',
+                    },
+                },
+                empty_state: {
+                    title: 'No areas',
+                    description: 'Create an area to get started',
+                },
+            },
+            // TODO: Translate
+            custom_types_section: {
+                custom_types: 'Custom Types',
+                filter: 'Filter',
+                clear: 'Clear Filter',
+                no_results: 'No custom types found matching your filter.',
+                empty_state: {
+                    title: 'No custom types',
+                    description:
+                        'Custom types will appear here when they are available in your database',
+                },
+                custom_type: {
+                    kind: 'Kind',
+                    enum_values: 'Enum Values',
+                    composite_fields: 'Fields',
+                    no_fields: 'No fields defined',
+                    field_name_placeholder: 'Field name',
+                    field_type_placeholder: 'Select type',
+                    add_field: 'Add Field',
+                    custom_type_actions: {
+                        title: 'Actions',
+                        delete_custom_type: 'Delete',
+                    },
+                    delete_custom_type: 'Delete Type',
+                },
+            },
        },

        toolbar: {
@@ -228,7 +284,7 @@ export const bn: LanguageTranslation = {
                title: 'আপনার ডাটাবেস আমদানি করুন',
                database_edition: 'ডাটাবেস সংস্করণ:',
                step_1: 'আপনার ডাটাবেসে এই স্ক্রিপ্ট চালান:',
-                step_2: 'স্ক্রিপ্টের ফলাফল এখানে পেস্ট করুন:',
+                step_2: 'স্ক্রিপ্টের ফলাফল এখানে পেস্ট করুন →',
                script_results_placeholder: 'স্ক্রিপ্টের ফলাফল এখানে...',
                ssms_instructions: {
                    button_text: 'SSMS নির্দেশনা',
@@ -322,6 +378,12 @@ export const bn: LanguageTranslation = {
            scale_4x: '4x',
            cancel: 'বাতিল করুন',
            export: 'রপ্তানি করুন',
+            // TODO: Translate
+            advanced_options: 'Advanced Options',
+            pattern: 'Include background pattern',
+            pattern_description: 'Add subtle grid pattern to background.',
+            transparent: 'Transparent background',
+            transparent_description: 'Remove background color from image.',
        },

        new_table_schema_dialog: {
@@ -356,7 +418,7 @@ export const bn: LanguageTranslation = {
            error: {
                title: 'চিত্র রপ্তানিতে ত্রুটি',
                description:
-                    'কিছু ভুল হয়েছে। সাহায্যের প্রয়োজন? chartdb.io@gmail.com-এ যোগাযোগ করুন।',
+                    'কিছু ভুল হয়েছে। সাহায্যের প্রয়োজন? support@chartdb.io-এ যোগাযোগ করুন।',
            },
        },

@@ -368,7 +430,21 @@ export const bn: LanguageTranslation = {
            error: {
                title: 'চিত্র আমদানিতে ত্রুটি',
                description:
-                    'ডায়াগ্রাম JSON অবৈধ। অনুগ্রহ করে JSON পরীক্ষা করুন এবং আবার চেষ্টা করুন। সাহায্যের প্রয়োজন? chartdb.io@gmail.com-এ যোগাযোগ করুন।',
+                    'ডায়াগ্রাম JSON অবৈধ। অনুগ্রহ করে JSON পরীক্ষা করুন এবং আবার চেষ্টা করুন। সাহায্যের প্রয়োজন? support@chartdb.io-এ যোগাযোগ করুন।',
+            },
+        },
+        // TODO: Translate
+        import_dbml_dialog: {
+            example_title: 'Import Example DBML',
+            title: 'Import DBML',
+            description: 'Import a database schema from DBML format.',
+            import: 'Import',
+            cancel: 'Cancel',
+            skip_and_empty: 'Skip & Empty',
+            show_example: 'Show Example',
+            error: {
+                title: 'Error',
+                description: 'Failed to parse DBML. Please check the syntax.',
            },
        },
        relationship_type: {
@@ -381,12 +457,15 @@ export const bn: LanguageTranslation = {
        canvas_context_menu: {
            new_table: 'নতুন টেবিল',
            new_relationship: 'নতুন সম্পর্ক',
+            // TODO: Translate
+            new_area: 'New Area',
        },

        table_node_context_menu: {
            edit_table: 'টেবিল সম্পাদনা করুন',
            duplicate_table: 'টেবিল নকল করুন',
            delete_table: 'টেবিল মুছে ফেলুন',
+            add_relationship: 'Add Relationship', // TODO: Translate
        },

        snap_to_grid_tooltip: 'গ্রিডে স্ন্যাপ করুন (অবস্থান {{key}})',
--- a/src/i18n/locales/de.ts
+++ b/src/i18n/locales/de.ts
@@ -8,7 +8,7 @@ export const de: LanguageTranslation = {
                new: 'Neu',
                open: 'Öffnen',
                save: 'Speichern',
-                import_database: 'Datenbank importieren',
+                import: 'Datenbank importieren',
                export_sql: 'SQL exportieren',
                export_as: 'Exportieren als',
                delete_diagram: 'Diagramm löschen',
@@ -30,18 +30,20 @@ export const de: LanguageTranslation = {
                theme: 'Stil',
                show_dependencies: 'Abhängigkeiten anzeigen',
                hide_dependencies: 'Abhängigkeiten ausblenden',
+                // TODO: Translate
+                show_minimap: 'Show Mini Map',
+                hide_minimap: 'Hide Mini Map',
            },
            // TODO: Translate
-            share: {
-                share: 'Share',
+            backup: {
+                backup: 'Backup',
                export_diagram: 'Export Diagram',
-                import_diagram: 'Import Diagram',
+                restore_diagram: 'Restore Diagram',
            },
            help: {
                help: 'Hilfe',
-                visit_website: 'ChartDB Webseite',
+                docs_website: 'Dokumentation',
                join_discord: 'Auf Discord beitreten',
-                schedule_a_call: 'Gespräch vereinbaren',
            },
        },

@@ -103,7 +105,6 @@ export const de: LanguageTranslation = {

        last_saved: 'Zuletzt gespeichert',
        saved: 'Gespeichert',
-        diagrams: 'Diagramme',
        loading_diagram: 'Diagramm wird geladen...',
        deselect_all: 'Alles abwählen',
        select_all: 'Alles auswählen',
@@ -124,6 +125,12 @@ export const de: LanguageTranslation = {
                add_table: 'Tabelle hinzufügen',
                filter: 'Filter',
                collapse: 'Alle einklappen',
+                // TODO: Translate
+                clear: 'Clear Filter',
+                no_results: 'No tables found matching your filter.',
+                // TODO: Translate
+                show_list: 'Show Table List',
+                show_dbml: 'Show DBML Editor',

                table: {
                    fields: 'Felder',
@@ -144,6 +151,8 @@ export const de: LanguageTranslation = {
                        comments: 'Kommentare',
                        no_comments: 'Keine Kommentare',
                        delete_field: 'Feld löschen',
+                        // TODO: Translate
+                        character_length: 'Max Length',
                    },
                    index_actions: {
                        title: 'Indexattribute',
@@ -204,6 +213,53 @@ export const de: LanguageTranslation = {
                    description: 'Erstellen Sie eine Ansicht, um zu beginnen',
                },
            },
+
+            // TODO: Translate
+            areas_section: {
+                areas: 'Areas',
+                add_area: 'Add Area',
+                filter: 'Filter',
+                clear: 'Clear Filter',
+                no_results: 'No areas found matching your filter.',
+
+                area: {
+                    area_actions: {
+                        title: 'Area Actions',
+                        edit_name: 'Edit Name',
+                        delete_area: 'Delete Area',
+                    },
+                },
+                empty_state: {
+                    title: 'No areas',
+                    description: 'Create an area to get started',
+                },
+            },
+            // TODO: Translate
+            custom_types_section: {
+                custom_types: 'Custom Types',
+                filter: 'Filter',
+                clear: 'Clear Filter',
+                no_results: 'No custom types found matching your filter.',
+                empty_state: {
+                    title: 'No custom types',
+                    description:
+                        'Custom types will appear here when they are available in your database',
+                },
+                custom_type: {
+                    kind: 'Kind',
+                    enum_values: 'Enum Values',
+                    composite_fields: 'Fields',
+                    no_fields: 'No fields defined',
+                    field_name_placeholder: 'Field name',
+                    field_type_placeholder: 'Select type',
+                    add_field: 'Add Field',
+                    custom_type_actions: {
+                        title: 'Actions',
+                        delete_custom_type: 'Delete',
+                    },
+                    delete_custom_type: 'Delete Type',
+                },
+            },
        },

        toolbar: {
@@ -230,7 +286,7 @@ export const de: LanguageTranslation = {
                title: 'Datenbank importieren',
                database_edition: 'Datenbank Edition:',
                step_1: 'Führen Sie dieses Skript in Ihrer Datenbank aus:',
-                step_2: 'Fügen Sie das Skriptergebnis hier ein:',
+                step_2: 'Fügen Sie das Skriptergebnis hier ein →',
                script_results_placeholder: 'Skriptergebnisse hier...',
                ssms_instructions: {
                    button_text: 'SSMS Anweisungen',
@@ -325,6 +381,12 @@ export const de: LanguageTranslation = {
            scale_4x: '4x',
            cancel: 'Abbrechen',
            export: 'Exportieren',
+            // TODO: Translate
+            advanced_options: 'Advanced Options',
+            pattern: 'Include background pattern',
+            pattern_description: 'Add subtle grid pattern to background.',
+            transparent: 'Transparent background',
+            transparent_description: 'Remove background color from image.',
        },

        new_table_schema_dialog: {
@@ -359,7 +421,7 @@ export const de: LanguageTranslation = {
            error: {
                title: 'Error exporting diagram',
                description:
-                    'Something went wrong. Need help? chartdb.io@gmail.com',
+                    'Something went wrong. Need help? support@chartdb.io',
            },
        },
        // TODO: Translate
@@ -371,7 +433,21 @@ export const de: LanguageTranslation = {
            error: {
                title: 'Error importing diagram',
                description:
-                    'The diagram JSON is invalid. Please check the JSON and try again. Need help? chartdb.io@gmail.com',
+                    'The diagram JSON is invalid. Please check the JSON and try again. Need help? support@chartdb.io',
+            },
+        },
+        // TODO: Translate
+        import_dbml_dialog: {
+            example_title: 'Import Example DBML',
+            title: 'Import DBML',
+            description: 'Import a database schema from DBML format.',
+            import: 'Import',
+            cancel: 'Cancel',
+            skip_and_empty: 'Skip & Empty',
+            show_example: 'Show Example',
+            error: {
+                title: 'Error',
+                description: 'Failed to parse DBML. Please check the syntax.',
            },
        },
        relationship_type: {
@@ -384,12 +460,15 @@ export const de: LanguageTranslation = {
        canvas_context_menu: {
            new_table: 'Neue Tabelle',
            new_relationship: 'Neue Beziehung',
+            // TODO: Translate
+            new_area: 'New Area',
        },

        table_node_context_menu: {
            edit_table: 'Tabelle bearbeiten',
            duplicate_table: 'Duplicate Table', // TODO: Translate
            delete_table: 'Tabelle löschen',
+            add_relationship: 'Add Relationship', // TODO: Translate
        },

        // TODO: Add translations
--- a/src/i18n/locales/en.ts
+++ b/src/i18n/locales/en.ts
@@ -8,7 +8,7 @@ export const en = {
                new: 'New',
                open: 'Open',
                save: 'Save',
-                import_database: 'Import Database',
+                import: 'Import',
                export_sql: 'Export SQL',
                export_as: 'Export as',
                delete_diagram: 'Delete Diagram',
@@ -30,17 +30,18 @@ export const en = {
                theme: 'Theme',
                show_dependencies: 'Show Dependencies',
                hide_dependencies: 'Hide Dependencies',
+                show_minimap: 'Show Mini Map',
+                hide_minimap: 'Hide Mini Map',
            },
-            share: {
-                share: 'Share',
+            backup: {
+                backup: 'Backup',
                export_diagram: 'Export Diagram',
-                import_diagram: 'Import Diagram',
+                restore_diagram: 'Restore Diagram',
            },
            help: {
                help: 'Help',
-                visit_website: 'Visit ChartDB',
+                docs_website: 'Docs',
                join_discord: 'Join us on Discord',
-                schedule_a_call: 'Talk with us!',
            },
        },

@@ -101,7 +102,6 @@ export const en = {

        last_saved: 'Last saved',
        saved: 'Saved',
-        diagrams: 'Diagrams',
        loading_diagram: 'Loading diagram...',
        deselect_all: 'Deselect All',
        select_all: 'Select All',
@@ -122,6 +122,10 @@ export const en = {
                add_table: 'Add Table',
                filter: 'Filter',
                collapse: 'Collapse All',
+                clear: 'Clear Filter',
+                no_results: 'No tables found matching your filter.',
+                show_list: 'Show Table List',
+                show_dbml: 'Show DBML Editor',

                table: {
                    fields: 'Fields',
@@ -139,6 +143,7 @@ export const en = {
                    field_actions: {
                        title: 'Field Attributes',
                        unique: 'Unique',
+                        character_length: 'Max Length',
                        comments: 'Comments',
                        no_comments: 'No comments',
                        delete_field: 'Delete Field',
@@ -201,6 +206,52 @@ export const en = {
                    description: 'Create a view to get started',
                },
            },
+
+            areas_section: {
+                areas: 'Areas',
+                add_area: 'Add Area',
+                filter: 'Filter',
+                clear: 'Clear Filter',
+                no_results: 'No areas found matching your filter.',
+
+                area: {
+                    area_actions: {
+                        title: 'Area Actions',
+                        edit_name: 'Edit Name',
+                        delete_area: 'Delete Area',
+                    },
+                },
+                empty_state: {
+                    title: 'No areas',
+                    description: 'Create an area to get started',
+                },
+            },
+
+            custom_types_section: {
+                custom_types: 'Custom Types',
+                filter: 'Filter',
+                clear: 'Clear Filter',
+                no_results: 'No custom types found matching your filter.',
+                empty_state: {
+                    title: 'No custom types',
+                    description:
+                        'Custom types will appear here when they are available in your database',
+                },
+                custom_type: {
+                    kind: 'Kind',
+                    enum_values: 'Enum Values',
+                    composite_fields: 'Fields',
+                    no_fields: 'No fields defined',
+                    field_name_placeholder: 'Field name',
+                    field_type_placeholder: 'Select type',
+                    add_field: 'Add Field',
+                    custom_type_actions: {
+                        title: 'Actions',
+                        delete_custom_type: 'Delete',
+                    },
+                    delete_custom_type: 'Delete Type',
+                },
+            },
        },

        toolbar: {
@@ -227,7 +278,7 @@ export const en = {
                title: 'Import your Database',
                database_edition: 'Database Edition:',
                step_1: 'Run this script in your database:',
-                step_2: 'Paste the script result here:',
+                step_2: 'Paste the script result into this modal →',
                script_results_placeholder: 'Script results here...',
                ssms_instructions: {
                    button_text: 'SSMS Instructions',
@@ -321,6 +372,11 @@ export const en = {
            scale_4x: '4x',
            cancel: 'Cancel',
            export: 'Export',
+            advanced_options: 'Advanced Options',
+            pattern: 'Include background pattern',
+            pattern_description: 'Add subtle grid pattern to background.',
+            transparent: 'Transparent background',
+            transparent_description: 'Remove background color from image.',
        },

        new_table_schema_dialog: {
@@ -354,19 +410,33 @@ export const en = {
            error: {
                title: 'Error exporting diagram',
                description:
-                    'Something went wrong. Need help? chartdb.io@gmail.com',
+                    'Something went wrong. Need help? support@chartdb.io',
            },
        },

        import_diagram_dialog: {
            title: 'Import Diagram',
-            description: 'Paste the diagram JSON below:',
+            description: 'Import a diagram from a JSON file.',
            cancel: 'Cancel',
            import: 'Import',
            error: {
                title: 'Error importing diagram',
                description:
-                    'The diagram JSON is invalid. Please check the JSON and try again. Need help? chartdb.io@gmail.com',
+                    'The diagram JSON is invalid. Please check the JSON and try again. Need help? support@chartdb.io',
+            },
+        },
+
+        import_dbml_dialog: {
+            example_title: 'Import Example DBML',
+            title: 'Import DBML',
+            description: 'Import a database schema from DBML format.',
+            import: 'Import',
+            cancel: 'Cancel',
+            skip_and_empty: 'Skip & Empty',
+            show_example: 'Show Example',
+            error: {
+                title: 'Error importing DBML',
+                description: 'Failed to parse DBML. Please check the syntax.',
            },
        },
        relationship_type: {
@@ -379,12 +449,14 @@ export const en = {
        canvas_context_menu: {
            new_table: 'New Table',
            new_relationship: 'New Relationship',
+            new_area: 'New Area',
        },

        table_node_context_menu: {
            edit_table: 'Edit Table',
            duplicate_table: 'Duplicate Table',
            delete_table: 'Delete Table',
+            add_relationship: 'Add Relationship',
        },

        snap_to_grid_tooltip: 'Snap to Grid (Hold {{key}})',
--- a/src/i18n/locales/es.ts
+++ b/src/i18n/locales/es.ts
@@ -8,7 +8,7 @@ export const es: LanguageTranslation = {
                new: 'Nuevo',
                open: 'Abrir',
                save: 'Guardar',
-                import_database: 'Importar Base de Datos',
+                import: 'Importar Base de Datos',
                export_sql: 'Exportar SQL',
                export_as: 'Exportar como',
                delete_diagram: 'Eliminar Diagrama',
@@ -30,18 +30,19 @@ export const es: LanguageTranslation = {
                theme: 'Tema',
                show_dependencies: 'Mostrar dependencias',
                hide_dependencies: 'Ocultar dependencias',
+                // TODO: Translate
+                show_minimap: 'Show Mini Map',
+                hide_minimap: 'Hide Mini Map',
            },
-            // TODO: Translate
-            share: {
-                share: 'Share',
-                export_diagram: 'Export Diagram',
-                import_diagram: 'Import Diagram',
+            backup: {
+                backup: 'Respaldo',
+                export_diagram: 'Exportar Diagrama',
+                restore_diagram: 'Restaurar Diagrama',
            },
            help: {
                help: 'Ayuda',
-                visit_website: 'Visitar ChartDB',
+                docs_website: 'Documentación',
                join_discord: 'Únete a nosotros en Discord',
-                schedule_a_call: '¡Habla con nosotros!',
            },
        },

@@ -93,7 +94,6 @@ export const es: LanguageTranslation = {

        last_saved: 'Último guardado',
        saved: 'Guardado',
-        diagrams: 'Diagramas',
        loading_diagram: 'Cargando diagrama...',
        deselect_all: 'Deseleccionar todo',
        select_all: 'Seleccionar todo',
@@ -114,6 +114,12 @@ export const es: LanguageTranslation = {
                add_table: 'Agregar Tabla',
                filter: 'Filtrar',
                collapse: 'Colapsar Todo',
+                // TODO: Translate
+                clear: 'Clear Filter',
+                no_results: 'No tables found matching your filter.',
+                // TODO: Translate
+                show_list: 'Show Table List',
+                show_dbml: 'Show DBML Editor',

                table: {
                    fields: 'Campos',
@@ -134,6 +140,8 @@ export const es: LanguageTranslation = {
                        comments: 'Comentarios',
                        no_comments: 'Sin comentarios',
                        delete_field: 'Eliminar Campo',
+                        // TODO: Translate
+                        character_length: 'Max Length',
                    },
                    index_actions: {
                        title: 'Atributos del Índice',
@@ -193,6 +201,53 @@ export const es: LanguageTranslation = {
                    description: 'Crea una vista para comenzar',
                },
            },
+
+            // TODO: Translate
+            areas_section: {
+                areas: 'Areas',
+                add_area: 'Add Area',
+                filter: 'Filter',
+                clear: 'Clear Filter',
+                no_results: 'No areas found matching your filter.',
+
+                area: {
+                    area_actions: {
+                        title: 'Area Actions',
+                        edit_name: 'Edit Name',
+                        delete_area: 'Delete Area',
+                    },
+                },
+                empty_state: {
+                    title: 'No areas',
+                    description: 'Create an area to get started',
+                },
+            },
+            // TODO: Translate
+            custom_types_section: {
+                custom_types: 'Custom Types',
+                filter: 'Filter',
+                clear: 'Clear Filter',
+                no_results: 'No custom types found matching your filter.',
+                empty_state: {
+                    title: 'No custom types',
+                    description:
+                        'Custom types will appear here when they are available in your database',
+                },
+                custom_type: {
+                    kind: 'Kind',
+                    enum_values: 'Enum Values',
+                    composite_fields: 'Fields',
+                    no_fields: 'No fields defined',
+                    field_name_placeholder: 'Field name',
+                    field_type_placeholder: 'Select type',
+                    add_field: 'Add Field',
+                    custom_type_actions: {
+                        title: 'Actions',
+                        delete_custom_type: 'Delete',
+                    },
+                    delete_custom_type: 'Delete Type',
+                },
+            },
        },

        toolbar: {
@@ -219,7 +274,7 @@ export const es: LanguageTranslation = {
                title: 'Importa tu Base de Datos',
                database_edition: 'Edición de Base de Datos:',
                step_1: 'Ejecuta este script en tu base de datos:',
-                step_2: 'Pega el resultado del script aquí:',
+                step_2: 'Pega el resultado del script aquí →',
                script_results_placeholder: 'Resultados del script aquí...',
                ssms_instructions: {
                    button_text: 'Instrucciones SSMS',
@@ -315,6 +370,12 @@ export const es: LanguageTranslation = {
            scale_4x: '4x',
            cancel: 'Cancelar',
            export: 'Exportar',
+            // TODO: Translate
+            advanced_options: 'Advanced Options',
+            pattern: 'Include background pattern',
+            pattern_description: 'Add subtle grid pattern to background.',
+            transparent: 'Transparent background',
+            transparent_description: 'Remove background color from image.',
        },

        new_table_schema_dialog: {
@@ -358,7 +419,7 @@ export const es: LanguageTranslation = {
            error: {
                title: 'Error exporting diagram',
                description:
-                    'Something went wrong. Need help? chartdb.io@gmail.com',
+                    'Something went wrong. Need help? support@chartdb.io',
            },
        },
        // TODO: Translate
@@ -370,7 +431,21 @@ export const es: LanguageTranslation = {
            error: {
                title: 'Error importing diagram',
                description:
-                    'The diagram JSON is invalid. Please check the JSON and try again. Need help? chartdb.io@gmail.com',
+                    'The diagram JSON is invalid. Please check the JSON and try again. Need help? support@chartdb.io',
+            },
+        },
+        // TODO: Translate
+        import_dbml_dialog: {
+            example_title: 'Import Example DBML',
+            title: 'Import DBML',
+            description: 'Import a database schema from DBML format.',
+            import: 'Import',
+            cancel: 'Cancel',
+            skip_and_empty: 'Skip & Empty',
+            show_example: 'Show Example',
+            error: {
+                title: 'Error',
+                description: 'Failed to parse DBML. Please check the syntax.',
            },
        },
        relationship_type: {
@@ -383,12 +458,15 @@ export const es: LanguageTranslation = {
        canvas_context_menu: {
            new_table: 'Nueva Tabla',
            new_relationship: 'Nueva Relación',
+            // TODO: Translate
+            new_area: 'New Area',
        },

        table_node_context_menu: {
            edit_table: 'Editar Tabla',
            duplicate_table: 'Duplicate Table', // TODO: Translate
            delete_table: 'Eliminar Tabla',
+            add_relationship: 'Add Relationship', // TODO: Translate
        },

        // TODO: Add translations
--- a/src/i18n/locales/fr.ts
+++ b/src/i18n/locales/fr.ts
@@ -8,7 +8,7 @@ export const fr: LanguageTranslation = {
                new: 'Nouveau',
                open: 'Ouvrir',
                save: 'Enregistrer',
-                import_database: 'Importer Base de Données',
+                import: 'Importer Base de Données',
                export_sql: 'Exporter SQL',
                export_as: 'Exporter en tant que',
                delete_diagram: 'Supprimer le Diagramme',
@@ -30,17 +30,18 @@ export const fr: LanguageTranslation = {
                theme: 'Thème',
                show_dependencies: 'Afficher les Dépendances',
                hide_dependencies: 'Masquer les Dépendances',
+                show_minimap: 'Afficher la Mini Carte',
+                hide_minimap: 'Masquer la Mini Carte',
            },
-            share: {
-                share: 'Partage',
+            backup: {
+                backup: 'Sauvegarde',
                export_diagram: 'Exporter le diagramme',
-                import_diagram: 'Importer un diagramme',
+                restore_diagram: 'Restaurer le diagramme',
            },
            help: {
                help: 'Aide',
-                visit_website: 'Visitez ChartDB',
+                docs_website: 'Documentation',
                join_discord: 'Rejoignez-nous sur Discord',
-                schedule_a_call: 'Parlez avec nous !',
            },
        },

@@ -92,16 +93,14 @@ export const fr: LanguageTranslation = {

        last_saved: 'Dernière sauvegarde',
        saved: 'Enregistré',
-        diagrams: 'Diagrammes',
        loading_diagram: 'Chargement du diagramme...',
        deselect_all: 'Tout désélectionner',
        select_all: 'Tout sélectionner',
        clear: 'Effacer',
        show_more: 'Afficher Plus',
        show_less: 'Afficher Moins',
-        // TODO: Translate
-        copy_to_clipboard: 'Copy to Clipboard',
-        copied: 'Copied!',
+        copy_to_clipboard: 'Copier dans le presse-papiers',
+        copied: 'Copié !',

        side_panel: {
            schema: 'Schéma:',
@@ -114,6 +113,11 @@ export const fr: LanguageTranslation = {
                add_table: 'Ajouter une Table',
                filter: 'Filtrer',
                collapse: 'Réduire Tout',
+                clear: 'Effacer le Filtre',
+                no_results:
+                    'Aucune table trouvée correspondant à votre filtre.',
+                show_list: 'Afficher la Liste des Tableaux',
+                show_dbml: "Afficher l'éditeur DBML",

                table: {
                    fields: 'Champs',
@@ -134,6 +138,8 @@ export const fr: LanguageTranslation = {
                        comments: 'Commentaires',
                        no_comments: 'Pas de commentaires',
                        delete_field: 'Supprimer le Champ',
+                        // TODO: Translate
+                        character_length: 'Max Length',
                    },
                    index_actions: {
                        title: "Attributs de l'Index",
@@ -145,7 +151,7 @@ export const fr: LanguageTranslation = {
                        title: 'Actions de la Table',
                        add_field: 'Ajouter un Champ',
                        add_index: 'Ajouter un Index',
-                        duplicate_table: 'Duplicate Table', // TODO: Translate
+                        duplicate_table: 'Tableau dupliqué',
                        delete_table: 'Supprimer la Table',
                        change_schema: 'Changer le Schéma',
                    },
@@ -193,6 +199,53 @@ export const fr: LanguageTranslation = {
                    description: 'Créez une vue pour commencer',
                },
            },
+
+            // TODO: Translate
+            areas_section: {
+                areas: 'Areas',
+                add_area: 'Add Area',
+                filter: 'Filter',
+                clear: 'Clear Filter',
+                no_results: 'No areas found matching your filter.',
+
+                area: {
+                    area_actions: {
+                        title: 'Area Actions',
+                        edit_name: 'Edit Name',
+                        delete_area: 'Delete Area',
+                    },
+                },
+                empty_state: {
+                    title: 'No areas',
+                    description: 'Create an area to get started',
+                },
+            },
+            // TODO: Translate
+            custom_types_section: {
+                custom_types: 'Custom Types',
+                filter: 'Filter',
+                clear: 'Clear Filter',
+                no_results: 'No custom types found matching your filter.',
+                empty_state: {
+                    title: 'No custom types',
+                    description:
+                        'Custom types will appear here when they are available in your database',
+                },
+                custom_type: {
+                    kind: 'Kind',
+                    enum_values: 'Enum Values',
+                    composite_fields: 'Fields',
+                    no_fields: 'No fields defined',
+                    field_name_placeholder: 'Field name',
+                    field_type_placeholder: 'Select type',
+                    add_field: 'Add Field',
+                    custom_type_actions: {
+                        title: 'Actions',
+                        delete_custom_type: 'Delete',
+                    },
+                    delete_custom_type: 'Delete Type',
+                },
+            },
        },

        toolbar: {
@@ -219,7 +272,7 @@ export const fr: LanguageTranslation = {
                title: 'Importer votre Base de Données',
                database_edition: 'Édition de la Base de Données :',
                step_1: 'Exécutez ce script dans votre base de données :',
-                step_2: 'Collez le résultat du script ici :',
+                step_2: 'Collez le résultat du script ici →',
                script_results_placeholder: 'Résultats du script ici...',
                ssms_instructions: {
                    button_text: 'Instructions SSMS',
@@ -228,14 +281,12 @@ export const fr: LanguageTranslation = {
                    step_2: 'Si vous utilisez "Résultats en Grille", changez le nombre maximum de caractères récupérés pour les données non-XML (définir à 9999999).',
                },
                instructions_link: "Besoin d'aide ? Regardez comment",
-                // TODO: Translate
-                check_script_result: 'Check Script Result',
+                check_script_result: 'Vérifier le résultat du Script',
            },

            cancel: 'Annuler',
            back: 'Retour',
-            // TODO: Translate
-            import_from_file: 'Import from File',
+            import_from_file: "Importer à partir d'un fichier",
            empty_diagram: 'Diagramme vide',
            continue: 'Continuer',
            import: 'Importer',
@@ -282,6 +333,12 @@ export const fr: LanguageTranslation = {
            scale_4x: '4x',
            cancel: 'Annuler',
            export: 'Exporter',
+            // TODO: Translate
+            advanced_options: 'Advanced Options',
+            pattern: 'Include background pattern',
+            pattern_description: 'Add subtle grid pattern to background.',
+            transparent: 'Transparent background',
+            transparent_description: 'Remove background color from image.',
        },

        multiple_schemas_alert: {
@@ -350,29 +407,42 @@ export const fr: LanguageTranslation = {
                cancel: 'Annuler',
            },
        },
-        // TODO: Translate
        export_diagram_dialog: {
-            title: 'Export Diagram',
-            description: 'Choose the format for export:',
+            title: 'Exporter le Diagramme',
+            description: "Sélectionner le format d'exportation :",
            format_json: 'JSON',
-            cancel: 'Cancel',
-            export: 'Export',
+            cancel: 'Annuler',
+            export: 'Exporter',
            error: {
-                title: 'Error exporting diagram',
+                title: "Erreur lors de l'exportation du diagramme",
                description:
-                    'Something went wrong. Need help? chartdb.io@gmail.com',
+                    "Une erreur s'est produite. Besoin d'aide ? support@chartdb.io",
            },
        },
-        // TODO: Translate
        import_diagram_dialog: {
-            title: 'Import Diagram',
-            description: 'Paste the diagram JSON below:',
-            cancel: 'Cancel',
-            import: 'Import',
+            title: 'Importer un diagramme',
+            description: 'Coller le diagramme au format JSON ci-dessous :',
+            cancel: 'Annuler',
+            import: 'Exporter',
            error: {
-                title: 'Error importing diagram',
+                title: "Erreur lors de l'exportation du diagramme",
                description:
-                    'The diagram JSON is invalid. Please check the JSON and try again. Need help? chartdb.io@gmail.com',
+                    "Le diagramme JSON n'est pas valide. Veuillez vérifier le JSON et réessayer. Besoin d'aide ? support@chartdb.io",
+            },
+        },
+        import_dbml_dialog: {
+            example_title: "Exemple d'importation DBML",
+            title: 'Import DBML',
+            description:
+                'Importer un schéma de base de données à partir du format DBML.',
+            import: 'Importer',
+            cancel: 'Annuler',
+            skip_and_empty: 'Passer et vider',
+            show_example: 'Afficher un exemple',
+            error: {
+                title: 'Erreur',
+                description:
+                    "Erreur d'analyse du DBML. Veuillez vérifier la syntaxe.",
            },
        },
        relationship_type: {
@@ -385,16 +455,19 @@ export const fr: LanguageTranslation = {
        canvas_context_menu: {
            new_table: 'Nouvelle Table',
            new_relationship: 'Nouvelle Relation',
+            // TODO: Translate
+            new_area: 'New Area',
        },

        table_node_context_menu: {
            edit_table: 'Éditer la Table',
-            duplicate_table: 'Duplicate Table', // TODO: Translate
+            duplicate_table: 'Tableau Dupliqué',
            delete_table: 'Supprimer la Table',
+            add_relationship: 'Ajouter une Relation',
        },

-        // TODO: Add translations
-        snap_to_grid_tooltip: 'Snap to Grid (Hold {{key}})',
+        snap_to_grid_tooltip:
+            'Aligner sur la grille (maintenir la touche {{key}})',

        tool_tips: {
            double_click_to_edit: 'Double-cliquez pour modifier',
--- a/src/i18n/locales/gu.ts
+++ b/src/i18n/locales/gu.ts
@@ -8,7 +8,7 @@ export const gu: LanguageTranslation = {
                new: 'નવું',
                open: 'ખોલો',
                save: 'સાચવો',
-                import_database: 'ડેટાબેસ આયાત કરો',
+                import: 'ડેટાબેસ આયાત કરો',
                export_sql: 'SQL નિકાસ કરો',
                export_as: 'રૂપે નિકાસ કરો',
                delete_diagram: 'ડાયાગ્રામ કાઢી નાખો',
@@ -30,18 +30,20 @@ export const gu: LanguageTranslation = {
                theme: 'થિમ',
                show_dependencies: 'નિર્ભરતાઓ બતાવો',
                hide_dependencies: 'નિર્ભરતાઓ છુપાવો',
+                // TODO: Translate
+                show_minimap: 'Show Mini Map',
+                hide_minimap: 'Hide Mini Map',
            },

-            share: {
-                share: 'શેર કરો',
+            backup: {
+                backup: 'બેકઅપ',
                export_diagram: 'ડાયાગ્રામ નિકાસ કરો',
-                import_diagram: 'ડાયાગ્રામ આયાત કરો',
+                restore_diagram: 'ડાયાગ્રામ પુનઃસ્થાપિત કરો',
            },
            help: {
                help: 'મદદ',
-                visit_website: 'ChartDB વેબસાઇટ પર જાઓ',
+                docs_website: 'દસ્તાવેજીકરણ',
                join_discord: 'અમારા Discordમાં જોડાઓ',
-                schedule_a_call: 'અમારી સાથે વાત કરો!',
            },
        },

@@ -102,7 +104,6 @@ export const gu: LanguageTranslation = {

        last_saved: 'છેલ્લે સાચવ્યું',
        saved: 'સાચવ્યું',
-        diagrams: 'ડાયાગ્રામ',
        loading_diagram: 'ડાયાગ્રામ લોડ થઈ રહ્યું છે...',
        deselect_all: 'બધાને ડીસેલેક્ટ કરો',
        select_all: 'બધા પસંદ કરો',
@@ -123,6 +124,12 @@ export const gu: LanguageTranslation = {
                add_table: 'ટેબલ ઉમેરો',
                filter: 'ફિલ્ટર',
                collapse: 'બધાને સકુચિત કરો',
+                // TODO: Translate
+                clear: 'Clear Filter',
+                no_results: 'No tables found matching your filter.',
+                // TODO: Translate
+                show_list: 'Show Table List',
+                show_dbml: 'Show DBML Editor',

                table: {
                    fields: 'ફીલ્ડ્સ',
@@ -144,6 +151,8 @@ export const gu: LanguageTranslation = {
                        comments: 'ટિપ્પણીઓ',
                        no_comments: 'કોઈ ટિપ્પણીઓ નથી',
                        delete_field: 'ફીલ્ડ કાઢી નાખો',
+                        // TODO: Translate
+                        character_length: 'Max Length',
                    },
                    index_actions: {
                        title: 'ઇન્ડેક્સ લક્ષણો',
@@ -203,6 +212,53 @@ export const gu: LanguageTranslation = {
                    description: 'આ વિભાગમાં કોઈ નિર્ભરતા ઉપલબ્ધ નથી.',
                },
            },
+
+            // TODO: Translate
+            areas_section: {
+                areas: 'Areas',
+                add_area: 'Add Area',
+                filter: 'Filter',
+                clear: 'Clear Filter',
+                no_results: 'No areas found matching your filter.',
+
+                area: {
+                    area_actions: {
+                        title: 'Area Actions',
+                        edit_name: 'Edit Name',
+                        delete_area: 'Delete Area',
+                    },
+                },
+                empty_state: {
+                    title: 'No areas',
+                    description: 'Create an area to get started',
+                },
+            },
+            // TODO: Translate
+            custom_types_section: {
+                custom_types: 'Custom Types',
+                filter: 'Filter',
+                clear: 'Clear Filter',
+                no_results: 'No custom types found matching your filter.',
+                empty_state: {
+                    title: 'No custom types',
+                    description:
+                        'Custom types will appear here when they are available in your database',
+                },
+                custom_type: {
+                    kind: 'Kind',
+                    enum_values: 'Enum Values',
+                    composite_fields: 'Fields',
+                    no_fields: 'No fields defined',
+                    field_name_placeholder: 'Field name',
+                    field_type_placeholder: 'Select type',
+                    add_field: 'Add Field',
+                    custom_type_actions: {
+                        title: 'Actions',
+                        delete_custom_type: 'Delete',
+                    },
+                    delete_custom_type: 'Delete Type',
+                },
+            },
        },

        toolbar: {
@@ -228,7 +284,7 @@ export const gu: LanguageTranslation = {
                title: 'તમારું ડેટાબેસ આયાત કરો',
                database_edition: 'ડેટાબેસ આવૃત્તિ:',
                step_1: 'તમારા ડેટાબેસમાં આ સ્ક્રિપ્ટ ચલાવો:',
-                step_2: 'સ્ક્રિપ્ટનો પરિણામ અહીં પેસ્ટ કરો:',
+                step_2: 'સ્ક્રિપ્ટનો પરિણામ અહીં પેસ્ટ કરો →',
                script_results_placeholder: 'સ્ક્રિપ્ટના પરિણામ અહીં...',
                ssms_instructions: {
                    button_text: 'SSMS સૂચનાઓ',
@@ -322,6 +378,12 @@ export const gu: LanguageTranslation = {
            scale_4x: '4x',
            cancel: 'રદ કરો',
            export: 'નિકાસ કરો',
+            // TODO: Translate
+            advanced_options: 'Advanced Options',
+            pattern: 'Include background pattern',
+            pattern_description: 'Add subtle grid pattern to background.',
+            transparent: 'Transparent background',
+            transparent_description: 'Remove background color from image.',
        },

        new_table_schema_dialog: {
@@ -356,7 +418,7 @@ export const gu: LanguageTranslation = {
            error: {
                title: 'ડાયાગ્રામ નિકાસમાં ભૂલ',
                description:
-                    'કશુક તો ખોટું થયું. મદદ જોઈએ? chartdb.io@gmail.com પર સંપર્ક કરો.',
+                    'કશુક તો ખોટું થયું. મદદ જોઈએ? support@chartdb.io પર સંપર્ક કરો.',
            },
        },

@@ -368,7 +430,21 @@ export const gu: LanguageTranslation = {
            error: {
                title: 'ડાયાગ્રામ આયાતમાં ભૂલ',
                description:
-                    'ડાયાગ્રામ JSON અમાન્ય છે. કૃપા કરીને JSON તપાસો અને ફરી પ્રયાસ કરો. મદદ જોઈએ? chartdb.io@gmail.com પર સંપર્ક કરો.',
+                    'ડાયાગ્રામ JSON અમાન્ય છે. કૃપા કરીને JSON તપાસો અને ફરી પ્રયાસ કરો. મદદ જોઈએ? support@chartdb.io પર સંપર્ક કરો.',
+            },
+        },
+        // TODO: Translate
+        import_dbml_dialog: {
+            example_title: 'Import Example DBML',
+            title: 'Import DBML',
+            description: 'Import a database schema from DBML format.',
+            import: 'Import',
+            cancel: 'Cancel',
+            skip_and_empty: 'Skip & Empty',
+            show_example: 'Show Example',
+            error: {
+                title: 'Error',
+                description: 'Failed to parse DBML. Please check the syntax.',
            },
        },
        relationship_type: {
@@ -381,12 +457,15 @@ export const gu: LanguageTranslation = {
        canvas_context_menu: {
            new_table: 'નવું ટેબલ',
            new_relationship: 'નવો સંબંધ',
+            // TODO: Translate
+            new_area: 'New Area',
        },

        table_node_context_menu: {
            edit_table: 'ટેબલ સંપાદિત કરો',
            duplicate_table: 'ટેબલ નકલ કરો',
            delete_table: 'ટેબલ કાઢી નાખો',
+            add_relationship: 'Add Relationship', // TODO: Translate
        },

        snap_to_grid_tooltip: 'ગ્રિડ પર સ્નેપ કરો (જમાવટ {{key}})',
--- a/src/i18n/locales/hi.ts
+++ b/src/i18n/locales/hi.ts
@@ -8,7 +8,7 @@ export const hi: LanguageTranslation = {
                new: 'नया',
                open: 'खोलें',
                save: 'सहेजें',
-                import_database: 'डेटाबेस आयात करें',
+                import: 'डेटाबेस आयात करें',
                export_sql: 'SQL निर्यात करें',
                export_as: 'के रूप में निर्यात करें',
                delete_diagram: 'आरेख हटाएँ',
@@ -30,18 +30,19 @@ export const hi: LanguageTranslation = {
                theme: 'थीम',
                show_dependencies: 'निर्भरता दिखाएँ',
                hide_dependencies: 'निर्भरता छिपाएँ',
+                // TODO: Translate
+                show_minimap: 'Show Mini Map',
+                hide_minimap: 'Hide Mini Map',
            },
-            // TODO: Translate
-            share: {
-                share: 'Share',
-                export_diagram: 'Export Diagram',
-                import_diagram: 'Import Diagram',
+            backup: {
+                backup: 'बैकअप',
+                export_diagram: 'आरेख निर्यात करें',
+                restore_diagram: 'आरेख पुनर्स्थापित करें',
            },
            help: {
                help: 'मदद',
-                visit_website: 'ChartDB वेबसाइट पर जाएँ',
+                docs_website: 'દસ્તાવેજીકરણ',
                join_discord: 'हमसे Discord पर जुड़ें',
-                schedule_a_call: 'हमसे बात करें!',
            },
        },

@@ -102,7 +103,6 @@ export const hi: LanguageTranslation = {

        last_saved: 'अंतिम सहेजा गया',
        saved: 'सहेजा गया',
-        diagrams: 'आरेख',
        loading_diagram: 'आरेख लोड हो रहा है...',
        deselect_all: 'सभी को अचयनित करें',
        select_all: 'सभी को चुनें',
@@ -124,6 +124,12 @@ export const hi: LanguageTranslation = {
                add_table: 'तालिका जोड़ें',
                filter: 'फ़िल्टर',
                collapse: 'सभी को संक्षिप्त करें',
+                // TODO: Translate
+                clear: 'Clear Filter',
+                no_results: 'No tables found matching your filter.',
+                // TODO: Translate
+                show_list: 'Show Table List',
+                show_dbml: 'Show DBML Editor',

                table: {
                    fields: 'फ़ील्ड्स',
@@ -144,6 +150,8 @@ export const hi: LanguageTranslation = {
                        comments: 'टिप्पणियाँ',
                        no_comments: 'कोई टिप्पणी नहीं',
                        delete_field: 'फ़ील्ड हटाएँ',
+                        // TODO: Translate
+                        character_length: 'Max Length',
                    },
                    index_actions: {
                        title: 'सूचकांक विशेषताएँ',
@@ -204,6 +212,53 @@ export const hi: LanguageTranslation = {
                    description: 'इस अनुभाग में कोई निर्भरता उपलब्ध नहीं है।',
                },
            },
+
+            // TODO: Translate
+            areas_section: {
+                areas: 'Areas',
+                add_area: 'Add Area',
+                filter: 'Filter',
+                clear: 'Clear Filter',
+                no_results: 'No areas found matching your filter.',
+
+                area: {
+                    area_actions: {
+                        title: 'Area Actions',
+                        edit_name: 'Edit Name',
+                        delete_area: 'Delete Area',
+                    },
+                },
+                empty_state: {
+                    title: 'No areas',
+                    description: 'Create an area to get started',
+                },
+            },
+            // TODO: Translate
+            custom_types_section: {
+                custom_types: 'Custom Types',
+                filter: 'Filter',
+                clear: 'Clear Filter',
+                no_results: 'No custom types found matching your filter.',
+                empty_state: {
+                    title: 'No custom types',
+                    description:
+                        'Custom types will appear here when they are available in your database',
+                },
+                custom_type: {
+                    kind: 'Kind',
+                    enum_values: 'Enum Values',
+                    composite_fields: 'Fields',
+                    no_fields: 'No fields defined',
+                    field_name_placeholder: 'Field name',
+                    field_type_placeholder: 'Select type',
+                    add_field: 'Add Field',
+                    custom_type_actions: {
+                        title: 'Actions',
+                        delete_custom_type: 'Delete',
+                    },
+                    delete_custom_type: 'Delete Type',
+                },
+            },
        },

        toolbar: {
@@ -230,7 +285,7 @@ export const hi: LanguageTranslation = {
                title: 'अपना डेटाबेस आयात करें',
                database_edition: 'डेटाबेस संस्करण:',
                step_1: 'अपने डेटाबेस में यह स्क्रिप्ट चलाएँ:',
-                step_2: 'यहाँ स्क्रिप्ट का परिणाम पेस्ट करें:',
+                step_2: 'यहाँ स्क्रिप्ट का परिणाम पेस्ट करें →',
                script_results_placeholder: 'स्क्रिप्ट के परिणाम यहाँ...',
                ssms_instructions: {
                    button_text: 'SSMS निर्देश',
@@ -326,6 +381,12 @@ export const hi: LanguageTranslation = {
            scale_4x: '4x',
            cancel: 'रद्द करें',
            export: 'निर्यात करें',
+            // TODO: Translate
+            advanced_options: 'Advanced Options',
+            pattern: 'Include background pattern',
+            pattern_description: 'Add subtle grid pattern to background.',
+            transparent: 'Transparent background',
+            transparent_description: 'Remove background color from image.',
        },

        new_table_schema_dialog: {
@@ -360,7 +421,7 @@ export const hi: LanguageTranslation = {
            error: {
                title: 'Error exporting diagram',
                description:
-                    'Something went wrong. Need help? chartdb.io@gmail.com',
+                    'Something went wrong. Need help? support@chartdb.io',
            },
        },
        // TODO: Translate
@@ -372,7 +433,21 @@ export const hi: LanguageTranslation = {
            error: {
                title: 'Error importing diagram',
                description:
-                    'The diagram JSON is invalid. Please check the JSON and try again. Need help? chartdb.io@gmail.com',
+                    'The diagram JSON is invalid. Please check the JSON and try again. Need help? support@chartdb.io',
+            },
+        },
+        // TODO: Translate
+        import_dbml_dialog: {
+            example_title: 'Import Example DBML',
+            title: 'Import DBML',
+            description: 'Import a database schema from DBML format.',
+            import: 'Import',
+            cancel: 'Cancel',
+            skip_and_empty: 'Skip & Empty',
+            show_example: 'Show Example',
+            error: {
+                title: 'Error',
+                description: 'Failed to parse DBML. Please check the syntax.',
            },
        },
        relationship_type: {
@@ -385,12 +460,15 @@ export const hi: LanguageTranslation = {
        canvas_context_menu: {
            new_table: 'नई तालिका',
            new_relationship: 'नया संबंध',
+            // TODO: Translate
+            new_area: 'New Area',
        },

        table_node_context_menu: {
            edit_table: 'तालिका संपादित करें',
            duplicate_table: 'Duplicate Table', // TODO: Translate
            delete_table: 'तालिका हटाएँ',
+            add_relationship: 'Add Relationship', // TODO: Translate
        },

        // TODO: Add translations
--- a/src/i18n/locales/id_ID.ts
+++ b/src/i18n/locales/id_ID.ts
@@ -8,7 +8,7 @@ export const id_ID: LanguageTranslation = {
                new: 'Buat Baru',
                open: 'Buka',
                save: 'Simpan',
-                import_database: 'Impor Database',
+                import: 'Impor Database',
                export_sql: 'Ekspor SQL',
                export_as: 'Ekspor Sebagai',
                delete_diagram: 'Hapus Diagram',
@@ -30,17 +30,19 @@ export const id_ID: LanguageTranslation = {
                theme: 'Tema',
                show_dependencies: 'Tampilkan Dependensi',
                hide_dependencies: 'Sembunyikan Dependensi',
+                // TODO: Translate
+                show_minimap: 'Show Mini Map',
+                hide_minimap: 'Hide Mini Map',
            },
-            share: {
-                share: 'Bagikan',
+            backup: {
+                backup: 'Cadangan',
                export_diagram: 'Ekspor Diagram',
-                import_diagram: 'Impor Diagram',
+                restore_diagram: 'Pulihkan Diagram',
            },
            help: {
                help: 'Bantuan',
-                visit_website: 'Kunjungi ChartDB',
+                docs_website: 'Dokumentasi',
                join_discord: 'Bergabunglah di Discord kami',
-                schedule_a_call: 'Berbicara dengan kami!',
            },
        },

@@ -101,7 +103,6 @@ export const id_ID: LanguageTranslation = {

        last_saved: 'Terakhir disimpan',
        saved: 'Tersimpan',
-        diagrams: 'Diagram',
        loading_diagram: 'Memuat diagram...',
        deselect_all: 'Batalkan Semua',
        select_all: 'Pilih Semua',
@@ -122,6 +123,12 @@ export const id_ID: LanguageTranslation = {
                add_table: 'Tambah Tabel',
                filter: 'Saring',
                collapse: 'Lipat Semua',
+                // TODO: Translate
+                clear: 'Clear Filter',
+                no_results: 'No tables found matching your filter.',
+                // TODO: Translate
+                show_list: 'Show Table List',
+                show_dbml: 'Show DBML Editor',

                table: {
                    fields: 'Kolom',
@@ -142,6 +149,8 @@ export const id_ID: LanguageTranslation = {
                        comments: 'Komentar',
                        no_comments: 'Tidak ada komentar',
                        delete_field: 'Hapus Kolom',
+                        // TODO: Translate
+                        character_length: 'Max Length',
                    },
                    index_actions: {
                        title: 'Atribut Indeks',
@@ -201,6 +210,53 @@ export const id_ID: LanguageTranslation = {
                    description: 'Buat tampilan untuk memulai',
                },
            },
+
+            // TODO: Translate
+            areas_section: {
+                areas: 'Areas',
+                add_area: 'Add Area',
+                filter: 'Filter',
+                clear: 'Clear Filter',
+                no_results: 'No areas found matching your filter.',
+
+                area: {
+                    area_actions: {
+                        title: 'Area Actions',
+                        edit_name: 'Edit Name',
+                        delete_area: 'Delete Area',
+                    },
+                },
+                empty_state: {
+                    title: 'No areas',
+                    description: 'Create an area to get started',
+                },
+            },
+            // TODO: Translate
+            custom_types_section: {
+                custom_types: 'Custom Types',
+                filter: 'Filter',
+                clear: 'Clear Filter',
+                no_results: 'No custom types found matching your filter.',
+                empty_state: {
+                    title: 'No custom types',
+                    description:
+                        'Custom types will appear here when they are available in your database',
+                },
+                custom_type: {
+                    kind: 'Kind',
+                    enum_values: 'Enum Values',
+                    composite_fields: 'Fields',
+                    no_fields: 'No fields defined',
+                    field_name_placeholder: 'Field name',
+                    field_type_placeholder: 'Select type',
+                    add_field: 'Add Field',
+                    custom_type_actions: {
+                        title: 'Actions',
+                        delete_custom_type: 'Delete',
+                    },
+                    delete_custom_type: 'Delete Type',
+                },
+            },
        },

        toolbar: {
@@ -227,7 +283,7 @@ export const id_ID: LanguageTranslation = {
                title: 'Impor Database Anda',
                database_edition: 'Edisi Database:',
                step_1: 'Jalankan skrip ini di database Anda:',
-                step_2: 'Tempel hasil skrip di sini:',
+                step_2: 'Tempel hasil skrip di sini →',
                script_results_placeholder: 'Hasil skrip di sini...',
                ssms_instructions: {
                    button_text: 'Instruksi SSMS',
@@ -320,6 +376,12 @@ export const id_ID: LanguageTranslation = {
            scale_4x: '4x',
            cancel: 'Batal',
            export: 'Ekspor',
+            // TODO: Translate
+            advanced_options: 'Advanced Options',
+            pattern: 'Include background pattern',
+            pattern_description: 'Add subtle grid pattern to background.',
+            transparent: 'Transparent background',
+            transparent_description: 'Remove background color from image.',
        },

        new_table_schema_dialog: {
@@ -354,7 +416,7 @@ export const id_ID: LanguageTranslation = {
            error: {
                title: 'Error ekspor diagram',
                description:
-                    'Sesuatu yang salah. Butuh bantuan? chartdb.io@gmail.com',
+                    'Sesuatu yang salah. Butuh bantuan? support@chartdb.io',
            },
        },

@@ -366,7 +428,21 @@ export const id_ID: LanguageTranslation = {
            error: {
                title: 'Error impor diagram',
                description:
-                    'Diagram JSON tidak valid. Silakan cek JSON dan coba lagi. Butuh bantuan? chartdb.io@gmail.com',
+                    'Diagram JSON tidak valid. Silakan cek JSON dan coba lagi. Butuh bantuan? support@chartdb.io',
+            },
+        },
+        // TODO: Translate
+        import_dbml_dialog: {
+            example_title: 'Import Example DBML',
+            title: 'Import DBML',
+            description: 'Import a database schema from DBML format.',
+            import: 'Import',
+            cancel: 'Cancel',
+            skip_and_empty: 'Skip & Empty',
+            show_example: 'Show Example',
+            error: {
+                title: 'Error',
+                description: 'Failed to parse DBML. Please check the syntax.',
            },
        },

@@ -380,12 +456,15 @@ export const id_ID: LanguageTranslation = {
        canvas_context_menu: {
            new_table: 'Tabel Baru',
            new_relationship: 'Hubungan Baru',
+            // TODO: Translate
+            new_area: 'New Area',
        },

        table_node_context_menu: {
            edit_table: 'Ubah Tabel',
            delete_table: 'Hapus Tabel',
            duplicate_table: 'Duplikat Tabel',
+            add_relationship: 'Add Relationship', // TODO: Translate
        },

        snap_to_grid_tooltip: 'Snap ke Kisi (Tahan {{key}})',
--- a/src/i18n/locales/ja.ts
+++ b/src/i18n/locales/ja.ts
@@ -8,7 +8,7 @@ export const ja: LanguageTranslation = {
                new: '新規',
                open: '開く',
                save: '保存',
-                import_database: 'データベースをインポート',
+                import: 'データベースをインポート',
                export_sql: 'SQLをエクスポート',
                export_as: '形式を指定してエクスポート',
                delete_diagram: 'ダイアグラムを削除',
@@ -31,18 +31,20 @@ export const ja: LanguageTranslation = {
                // TODO: Translate
                show_dependencies: 'Show Dependencies',
                hide_dependencies: 'Hide Dependencies',
+                // TODO: Translate
+                show_minimap: 'Show Mini Map',
+                hide_minimap: 'Hide Mini Map',
            },
            // TODO: Translate
-            share: {
-                share: 'Share',
+            backup: {
+                backup: 'Backup',
                export_diagram: 'Export Diagram',
-                import_diagram: 'Import Diagram',
+                restore_diagram: 'Restore Diagram',
            },
            help: {
                help: 'ヘルプ',
-                visit_website: 'ChartDBにアクセス',
+                docs_website: 'ドキュメント',
                join_discord: 'Discordに参加',
-                schedule_a_call: '話しかけてください！',
            },
        },

@@ -104,7 +106,6 @@ export const ja: LanguageTranslation = {

        last_saved: '最後に保存された',
        saved: '保存されました',
-        diagrams: 'ダイアグラム',
        loading_diagram: 'ダイアグラムを読み込み中...',
        deselect_all: 'すべての選択を解除',
        select_all: 'すべてを選択',
@@ -126,6 +127,12 @@ export const ja: LanguageTranslation = {
                add_table: 'テーブルを追加',
                filter: 'フィルタ',
                collapse: 'すべて折りたたむ',
+                // TODO: Translate
+                clear: 'Clear Filter',
+                no_results: 'No tables found matching your filter.',
+                // TODO: Translate
+                show_list: 'Show Table List',
+                show_dbml: 'Show DBML Editor',

                table: {
                    fields: 'フィールド',
@@ -146,6 +153,8 @@ export const ja: LanguageTranslation = {
                        comments: 'コメント',
                        no_comments: 'コメントがありません',
                        delete_field: 'フィールドを削除',
+                        // TODO: Translate
+                        character_length: 'Max Length',
                    },
                    index_actions: {
                        title: 'インデックス属性',
@@ -207,6 +216,53 @@ export const ja: LanguageTranslation = {
                    description: 'Create a view to get started',
                },
            },
+
+            // TODO: Translate
+            areas_section: {
+                areas: 'Areas',
+                add_area: 'Add Area',
+                filter: 'Filter',
+                clear: 'Clear Filter',
+                no_results: 'No areas found matching your filter.',
+
+                area: {
+                    area_actions: {
+                        title: 'Area Actions',
+                        edit_name: 'Edit Name',
+                        delete_area: 'Delete Area',
+                    },
+                },
+                empty_state: {
+                    title: 'No areas',
+                    description: 'Create an area to get started',
+                },
+            },
+            // TODO: Translate
+            custom_types_section: {
+                custom_types: 'Custom Types',
+                filter: 'Filter',
+                clear: 'Clear Filter',
+                no_results: 'No custom types found matching your filter.',
+                empty_state: {
+                    title: 'No custom types',
+                    description:
+                        'Custom types will appear here when they are available in your database',
+                },
+                custom_type: {
+                    kind: 'Kind',
+                    enum_values: 'Enum Values',
+                    composite_fields: 'Fields',
+                    no_fields: 'No fields defined',
+                    field_name_placeholder: 'Field name',
+                    field_type_placeholder: 'Select type',
+                    add_field: 'Add Field',
+                    custom_type_actions: {
+                        title: 'Actions',
+                        delete_custom_type: 'Delete',
+                    },
+                    delete_custom_type: 'Delete Type',
+                },
+            },
        },

        toolbar: {
@@ -233,7 +289,7 @@ export const ja: LanguageTranslation = {
                title: 'データベースをインポート',
                database_edition: 'データベースエディション:',
                step_1: 'このスクリプトをデータベースで実行してください:',
-                step_2: 'ここにスクリプトの結果を貼り付けてください:',
+                step_2: 'ここにスクリプトの結果を貼り付けてください →',
                script_results_placeholder: 'ここにスクリプトの結果...',
                ssms_instructions: {
                    button_text: 'SSMSの手順',
@@ -329,6 +385,12 @@ export const ja: LanguageTranslation = {
            scale_4x: '4x',
            cancel: 'キャンセル',
            export: 'エクスポート',
+            // TODO: Translate
+            advanced_options: 'Advanced Options',
+            pattern: 'Include background pattern',
+            pattern_description: 'Add subtle grid pattern to background.',
+            transparent: 'Transparent background',
+            transparent_description: 'Remove background color from image.',
        },

        new_table_schema_dialog: {
@@ -363,7 +425,7 @@ export const ja: LanguageTranslation = {
            error: {
                title: 'Error exporting diagram',
                description:
-                    'Something went wrong. Need help? chartdb.io@gmail.com',
+                    'Something went wrong. Need help? support@chartdb.io',
            },
        },
        // TODO: Translate
@@ -375,7 +437,21 @@ export const ja: LanguageTranslation = {
            error: {
                title: 'Error importing diagram',
                description:
-                    'The diagram JSON is invalid. Please check the JSON and try again. Need help? chartdb.io@gmail.com',
+                    'The diagram JSON is invalid. Please check the JSON and try again. Need help? support@chartdb.io',
+            },
+        },
+        // TODO: Translate
+        import_dbml_dialog: {
+            example_title: 'Import Example DBML',
+            title: 'Import DBML',
+            description: 'Import a database schema from DBML format.',
+            import: 'Import',
+            cancel: 'Cancel',
+            skip_and_empty: 'Skip & Empty',
+            show_example: 'Show Example',
+            error: {
+                title: 'Error',
+                description: 'Failed to parse DBML. Please check the syntax.',
            },
        },
        relationship_type: {
@@ -388,12 +464,15 @@ export const ja: LanguageTranslation = {
        canvas_context_menu: {
            new_table: '新しいテーブル',
            new_relationship: '新しいリレーションシップ',
+            // TODO: Translate
+            new_area: 'New Area',
        },

        table_node_context_menu: {
            edit_table: 'テーブルを編集',
            duplicate_table: 'Duplicate Table', // TODO: Translate
            delete_table: 'テーブルを削除',
+            add_relationship: 'Add Relationship', // TODO: Translate
        },

        // TODO: Add translations
--- a/src/i18n/locales/ko_KR.ts
+++ b/src/i18n/locales/ko_KR.ts
@@ -8,7 +8,7 @@ export const ko_KR: LanguageTranslation = {
                new: '새 다이어그램',
                open: '열기',
                save: '저장',
-                import_database: '데이터베이스 가져오기',
+                import: '데이터베이스 가져오기',
                export_sql: 'SQL로 저장',
                export_as: '다른 형식으로 저장',
                delete_diagram: '다이어그램 삭제',
@@ -30,17 +30,19 @@ export const ko_KR: LanguageTranslation = {
                theme: '테마',
                show_dependencies: '종속성 보이기',
                hide_dependencies: '종속성 숨기기',
+                // TODO: Translate
+                show_minimap: 'Show Mini Map',
+                hide_minimap: 'Hide Mini Map',
            },
-            share: {
-                share: '공유',
+            backup: {
+                backup: '백업',
                export_diagram: '다이어그램 내보내기',
-                import_diagram: '다이어그램 가져오기',
+                restore_diagram: '다이어그램 복구',
            },
            help: {
                help: '도움말',
-                visit_website: 'ChartDB 사이트 방문',
+                docs_website: '선적 서류 비치',
                join_discord: 'Discord 가입',
-                schedule_a_call: 'Talk with us!',
            },
        },

@@ -101,7 +103,6 @@ export const ko_KR: LanguageTranslation = {

        last_saved: '최근 저장일시: ',
        saved: '저장됨',
-        diagrams: '다이어그램',
        loading_diagram: '다이어그램 로딩중...',
        deselect_all: '모두 선택 해제',
        select_all: '모두 선택',
@@ -122,6 +123,12 @@ export const ko_KR: LanguageTranslation = {
                add_table: '테이블 추가',
                filter: '필터',
                collapse: '모두 접기',
+                // TODO: Translate
+                clear: 'Clear Filter',
+                no_results: 'No tables found matching your filter.',
+                // TODO: Translate
+                show_list: 'Show Table List',
+                show_dbml: 'Show DBML Editor',

                table: {
                    fields: '필드',
@@ -142,6 +149,8 @@ export const ko_KR: LanguageTranslation = {
                        comments: '주석',
                        no_comments: '주석 없음',
                        delete_field: '필드 삭제',
+                        // TODO: Translate
+                        character_length: 'Max Length',
                    },
                    index_actions: {
                        title: '인덱스 속성',
@@ -201,6 +210,53 @@ export const ko_KR: LanguageTranslation = {
                    description: '뷰 테이블을 만들어 시작하세요.',
                },
            },
+
+            // TODO: Translate
+            areas_section: {
+                areas: 'Areas',
+                add_area: 'Add Area',
+                filter: 'Filter',
+                clear: 'Clear Filter',
+                no_results: 'No areas found matching your filter.',
+
+                area: {
+                    area_actions: {
+                        title: 'Area Actions',
+                        edit_name: 'Edit Name',
+                        delete_area: 'Delete Area',
+                    },
+                },
+                empty_state: {
+                    title: 'No areas',
+                    description: 'Create an area to get started',
+                },
+            },
+            // TODO: Translate
+            custom_types_section: {
+                custom_types: 'Custom Types',
+                filter: 'Filter',
+                clear: 'Clear Filter',
+                no_results: 'No custom types found matching your filter.',
+                empty_state: {
+                    title: 'No custom types',
+                    description:
+                        'Custom types will appear here when they are available in your database',
+                },
+                custom_type: {
+                    kind: 'Kind',
+                    enum_values: 'Enum Values',
+                    composite_fields: 'Fields',
+                    no_fields: 'No fields defined',
+                    field_name_placeholder: 'Field name',
+                    field_type_placeholder: 'Select type',
+                    add_field: 'Add Field',
+                    custom_type_actions: {
+                        title: 'Actions',
+                        delete_custom_type: 'Delete',
+                    },
+                    delete_custom_type: 'Delete Type',
+                },
+            },
        },

        toolbar: {
@@ -227,7 +283,7 @@ export const ko_KR: LanguageTranslation = {
                title: '당신의 데이터베이스를 가져오세요',
                database_edition: '데이터베이스 세부 종류:',
                step_1: '데이터베이스에서 아래의 SQL을 실행해주세요:',
-                step_2: '이곳에 결과를 붙여넣어주세요:',
+                step_2: '이곳에 결과를 붙여넣어주세요 →',
                script_results_placeholder: '이곳에 스크립트 결과를 입력...',
                ssms_instructions: {
                    button_text: 'SSMS을 사용하시는 경우',
@@ -320,6 +376,12 @@ export const ko_KR: LanguageTranslation = {
            scale_4x: '4x',
            cancel: '취소',
            export: '내보내기',
+            // TODO: Translate
+            advanced_options: 'Advanced Options',
+            pattern: 'Include background pattern',
+            pattern_description: 'Add subtle grid pattern to background.',
+            transparent: 'Transparent background',
+            transparent_description: 'Remove background color from image.',
        },

        new_table_schema_dialog: {
@@ -353,7 +415,7 @@ export const ko_KR: LanguageTranslation = {
            error: {
                title: '다이어그램 내보내기 오류',
                description:
-                    '무언가 문제가 발생하였습니다. 도움이 필요하신 경우 chartdb.io@gmail.com으로 연락해주세요.',
+                    '무언가 문제가 발생하였습니다. 도움이 필요하신 경우 support@chartdb.io으로 연락해주세요.',
            },
        },
        import_diagram_dialog: {
@@ -364,7 +426,21 @@ export const ko_KR: LanguageTranslation = {
            error: {
                title: '다이어그램 가져오기 오류',
                description:
-                    '다이어그램 JSON이 유효하지 않습니다. JSON이 올바른 형식인지 확인해주세요. 도움이 필요하신 경우 chartdb.io@gmail.com으로 연락해주세요.',
+                    '다이어그램 JSON이 유효하지 않습니다. JSON이 올바른 형식인지 확인해주세요. 도움이 필요하신 경우 support@chartdb.io으로 연락해주세요.',
+            },
+        },
+        // TODO: Translate
+        import_dbml_dialog: {
+            example_title: 'Import Example DBML',
+            title: 'Import DBML',
+            description: 'Import a database schema from DBML format.',
+            import: 'Import',
+            cancel: 'Cancel',
+            skip_and_empty: 'Skip & Empty',
+            show_example: 'Show Example',
+            error: {
+                title: 'Error',
+                description: 'Failed to parse DBML. Please check the syntax.',
            },
        },
        relationship_type: {
@@ -377,12 +453,15 @@ export const ko_KR: LanguageTranslation = {
        canvas_context_menu: {
            new_table: '새 테이블',
            new_relationship: '새 연관관계',
+            // TODO: Translate
+            new_area: 'New Area',
        },

        table_node_context_menu: {
            edit_table: '테이블 수정',
            duplicate_table: '테이블 복제',
            delete_table: '테이블 삭제',
+            add_relationship: 'Add Relationship', // TODO: Translate
        },

        snap_to_grid_tooltip: '그리드에 맞추기 ({{key}}를 누른채 유지)',
--- a/Show More
+++ b/Show More