diff --git a/README.md b/README.md
index 5644e4c..2737c2e 100644
--- a/README.md
+++ b/README.md
@@ -191,8 +191,8 @@ You need to add the following dependencies to your HTML:
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Quick ERD</title>
 
-        <!-- Assuming you put the rappid.css file in this path -->
-        <link rel="stylesheet" type="text/css" href="./examples/diagram-generator/libs/rappid.css">
+        <!-- Assuming you put the rappid.min.css file in this path -->
+        <link rel="stylesheet" type="text/css" href="./examples/diagram-generator/libs/rappid.min.css">
         <link rel="stylesheet" href="./dist/quick-erd.css">
 
         <style>
@@ -221,23 +221,25 @@ You need to add the following dependencies to your HTML:
             import { Diagram  } from './dist/quick-erd.js';
 
             new Diagram( toERD(
-`departments /insert 2
+`
+departments
     name /nn
     location
     country
-    employees /insert 4
-        name /nn vc50
-        email /lower
-        cost center num
-        date hired
-        job vc255
+employees
+    departments_id /fk departments
+    name /nn vc50
+    email /lower
+    cost center num
+    date hired
+    job vc255
 
 view emp_v departments employees
 
 # settings = { "prefix": null, "semantics": "CHAR", "DV": false }
 
 `
-            ), document.getElementById( 'quickERD' ) );
+            ), '#quickERD' );
         </script>
     </body>
 </html>
@@ -255,8 +257,8 @@ view emp_v departments employees
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Quick ERD</title>
 
-        <!-- Assuming you put the rappid.css file in this path -->
-        <link rel="stylesheet" type="text/css" href="./examples/diagram-generator/libs/rappid.css">
+        <!-- Assuming you put the rappid.min.css file in this path -->
+        <link rel="stylesheet" type="text/css" href="./examples/diagram-generator/libs/rappid.min.css">
         <link rel="stylesheet" href="./dist/quick-erd.css">
 
         <style>
@@ -285,23 +287,25 @@ view emp_v departments employees
 
         <script>
             new quickERD.Diagram( quickSQL.toERD(
-`departments /insert 2
+`
+departments
     name /nn
     location
     country
-    employees /insert 4
-        name /nn vc50
-        email /lower
-        cost center num
-        date hired
-        job vc255
+employees
+    departments_id /fk departments
+    name /nn vc50
+    email /lower
+    cost center num
+    date hired
+    job vc255
 
 view emp_v departments employees
 
 # settings = { "prefix": null, "semantics": "CHAR", "DV": false }
 
 `
-            ), document.getElementById( 'quickERD' ) );
+            ), '#quickERD' );
         </script>
     </body>
 </html>
diff --git a/assets/quick-erd-dark-example.png b/assets/quick-erd-dark-example.png
index 384c64d..9fd8b5d 100644
Binary files a/assets/quick-erd-dark-example.png and b/assets/quick-erd-dark-example.png differ
diff --git a/assets/quick-erd-dark.png b/assets/quick-erd-dark.png
index 164cbf9..a0fcaa3 100644
Binary files a/assets/quick-erd-dark.png and b/assets/quick-erd-dark.png differ
diff --git a/assets/quick-erd-example.png b/assets/quick-erd-example.png
index aa311e5..ffa805f 100644
Binary files a/assets/quick-erd-example.png and b/assets/quick-erd-example.png differ
diff --git a/assets/quick-erd-light-example.png b/assets/quick-erd-light-example.png
index 338aa0f..7759353 100644
Binary files a/assets/quick-erd-light-example.png and b/assets/quick-erd-light-example.png differ
diff --git a/assets/quick-erd-light.png b/assets/quick-erd-light.png
index 0dfddde..50e7dbd 100644
Binary files a/assets/quick-erd-light.png and b/assets/quick-erd-light.png differ
diff --git a/examples/diagram-generator/index.html b/examples/diagram-generator/index.html
index f9b1456..5940dbe 100644
--- a/examples/diagram-generator/index.html
+++ b/examples/diagram-generator/index.html
@@ -5,7 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>QuickERD</title>
 
-    <link rel="stylesheet" type="text/css" href="libs/rappid.css">
+    <!-- Assuming you put the rappid.min.css file in this path -->
+    <link rel="stylesheet" type="text/css" href="libs/rappid.min.css">
 
     <link rel="stylesheet" href="../../dist/quick-erd.css">
 
@@ -13,7 +14,7 @@
     <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js" integrity="sha256-qXBd/EfAdjOA2FGrGAG+b3YBn2tn5A6bhz+LSgYD96k=" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/backbone@1.5.0/backbone-min.min.js"></script>
     
-    <script src="libs/rappid.min.js"></script>
+    <!-- Assuming you put the rappid.min.js file in this path -->
     <script src="libs/rappid.min.js"></script>
 
     <!-- <script src="../../dist/quick-erd.umd.cjs"></script>
@@ -61,7 +62,7 @@
     </style>
 </head>
 <body>
-    <div class="container">
+    <div class="container" style="padding: 20px;">
         <div id="sql">
             <pre></pre>
         </div>
@@ -73,24 +74,27 @@
         import { Diagram  } from '../../dist/quick-erd.js';
 
         const input = 
-`departments /insert 2
-   name /nn
-   location
-   country
-   employees /insert 4
-      name /nn vc50
-      email /lower
-      cost center num
-      date hired
-      job vc255
+`
+departments
+    name /nn
+    location
+    country
+employees
+    departments_id /fk departments
+    name /nn vc50
+    email /lower
+    cost center num
+    date hired
+    job vc255
 
 view emp_v departments employees
 
 # settings = { "prefix": null, "semantics": "CHAR", "DV": false }
 `
         // new quickERD.Diagram( quickSQL.toERD( input ), document.getElementById( 'quickERD' ) );
-        new Diagram( toERD( input, document.getElementById( 'quickERD' ) ) );
 
+        new Diagram( toERD(input), '#quickERD' );
+        
         document.querySelector( '#sql > pre' ).innerText = input;
     </script>
 </body>
diff --git a/src/quick-erd/utils.js b/src/quick-erd/utils.js
index 492da3a..0e46e36 100644
--- a/src/quick-erd/utils.js
+++ b/src/quick-erd/utils.js
@@ -3,6 +3,8 @@
 
 var utils = {};
 
+const FONT_NAME = getComputedStyle(document.querySelector(':root')).getPropertyValue('--qs-diagram-font-family') || 'Arial';
+
 utils.newGuid = function () {
     function _s8(s) {
         var p = (Math.random().toString(16) + '000000000').substr(2, 8);
@@ -16,17 +18,15 @@ utils.calcWidth = function (schema, name, columns) {
     if (schema) {
         objName = schema.concat('.').concat(name);
     }
-    var nameWidth = utils.getTextWidth(objName, '12pt Arial');
-    var colWidth = 60;
+    var nameWidth = utils.getTextWidth(objName, `12pt ${FONT_NAME}`);
+    var colWidth = 0;
     var dtWidth = 0;
-    var indexWidth = 0;
     for (var i = 0; i < columns.length; i++) {
-        colWidth = Math.max(colWidth, utils.getTextWidth(columns[i].name, '10pt Arial'));
-        dtWidth = Math.max(dtWidth, utils.getTextWidth(columns[i].datatype, '10pt Arial'));
+        colWidth = Math.max(colWidth, utils.getTextWidth(columns[i].name, `10pt ${FONT_NAME}`));
+        dtWidth = Math.max(dtWidth, utils.getTextWidth(columns[i].datatype, `10pt ${FONT_NAME}`));
     }
 
-    const bonus = 40; // colWidth > 100 ? 15 : 40;
-    const cdtWidth = colWidth + bonus + dtWidth;
+    const cdtWidth = (dtWidth > colWidth) ? (dtWidth * 2) : colWidth + dtWidth + 20;
     let width = Math.max(nameWidth, cdtWidth);
     return width;
 };