diff --git a/QuestionPreview.html b/QuestionPreview.html
index 41f043a..0054f1e 100644
--- a/QuestionPreview.html
+++ b/QuestionPreview.html
@@ -46,7 +46,8 @@
 	<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css"> -->
 	<link rel="stylesheet" href="./node_modules/quill/dist/quill.snow.css" type="text/css" media="all" />
 
-	
+	<link rel="stylesheet" href="assets/css/quillTable.css" type="text/css" media="all" />
+
 
 	
     <style>
@@ -73,28 +74,9 @@
     	/* margin-top: -27px !important; */
   		text-align: center;	
 	}
-		table {
-  border-collapse: collapse; /* Set to 'collapse' for adjacent cell borders to collapse into one */
-  text-indent: 0; /* Reset text indentation */
-  border-spacing: 0; /* Set to '0' to eliminate any spacing between cells */
-}
-		table td{
-			border: 1px solid black !important;
-		}
-		.table-border{
-    /* border: 1px solid black; */
-  	margin-left:10px;
-  	margin-right: 10px !important;
-  	width: 80px;
-  	inline-size: 80px;
-    text-wrap: wrap;
 		
-}
 
-tr{
-    display: flex !important;
-	/* border: 1px solid black; */
-}
+
 		.question-Group-Description{
 			margin-top: -14px;
 		}
diff --git a/assets/css/quillTable.css b/assets/css/quillTable.css
new file mode 100644
index 0000000..979bfe0
--- /dev/null
+++ b/assets/css/quillTable.css
@@ -0,0 +1,362 @@
+ table {
+    width: 90%;
+    border-collapse: collapse;
+    table-layout: fixed;
+    overflow:hidden;
+    white-space: nowrap;
+  }
+  
+ table td {
+    border: 1px solid black;
+    padding: 2px 5px;
+    height: 25px;
+    vertical-align: top;
+    white-space: pre-wrap; /* https://github.com/quilljs/quill/issues/1760 */
+  }
+  
+  .ql-editor__table--hideBorder td {
+    border: none !important;
+  }
+  
+   table td[rowspan="2"] {
+    height: 50px;
+  }
+  
+  table td[rowspan="3"] {
+    height: 75px;
+  }
+  
+   table td[rowspan="4"] {
+    height: 100px;
+  }
+  
+   table td[rowspan="5"] {
+    height: 125px;
+  }
+  
+  table td[rowspan="6"] {
+    height: 150px;
+  }
+  
+   table td[rowspan="7"] {
+    height: 175px;
+  }
+  
+  table td[rowspan="8"] {
+    height: 200px;
+  }
+  
+   table td[rowspan="9"] {
+    height: 225px;
+  }
+  
+   table td.ql-cell-selected {
+    background-color: #cce0f8;
+  }
+  
+   table td[merge_id] {
+    display: none;
+  }
+  
+  .quill-better-table-wrapper {
+    overflow-x: auto;
+  }
+  
+  .ql-picker.ql-table {
+    width: auto !important;
+    margin-right: 0;
+  }
+  
+  .ql-picker.ql-table .ql-picker-label svg {
+    display: none;
+  }
+  
+  /* .ql-formats button.ql-table::after, */
+  .ql-picker.ql-table .ql-picker-label::before {
+    display: block;
+    font-size: 14px;
+  }
+  
+  .ql-bubble .ql-toolbar .ql-picker.ql-table .ql-picker-label {
+    color: #ccc;
+  }
+  
+  .ql-bubble .ql-toolbar .ql-picker.ql-table .ql-picker-label:hover {
+    color: #fff;
+  }
+  
+  .ql-picker.ql-table:nth-of-type(1) .ql-picker-label::before {
+    content: "\f0ce";
+  }
+  
+  .ql-picker.ql-table .ql-picker-label::before {
+    font-family: "Font Awesome 6 Free";
+    font-weight: 900;
+    padding-top: 2px;
+    line-height: 1em;
+  }
+  
+  .ql-picker-item[data-value="insert"]::after {
+    content: "Insert table";
+  }
+  
+  .ql-picker-item[data-value="append-col"]::after {
+    content: "Add column";
+  }
+  
+  .ql-picker-item[data-value="append-col-before"]::after {
+    content: "Add column before";
+  }
+  
+  .ql-picker-item[data-value="append-col-after"]::after {
+    content: "Add column after";
+  }
+  
+  .ql-picker-item[data-value="remove-col"]::after {
+    content: "Remove column";
+  }
+  
+  .ql-picker-item[data-value="append-row"]::after {
+    content: "Add row";
+  }
+  
+  .ql-picker-item[data-value="append-row-above"]::after {
+    content: "Add row above";
+  }
+  
+  .ql-picker-item[data-value="append-row-below"]::after {
+    content: "Add row below";
+  }
+  
+  .ql-picker-item[data-value="remove-row"]::after {
+    content: "Remove row";
+  }
+  
+  .ql-picker-item[data-value="split-cell"]::after {
+    content: "Split cell";
+  }
+  
+  .ql-picker-item[data-value="merge-selection"]::after {
+    content: "Merge selection";
+  }
+  
+  .ql-picker-item[data-value="remove-cell"]::after {
+    content: "Remove cell";
+  }
+  
+  .ql-picker-item[data-value="remove-selection"]::after {
+    content: "Remove selection";
+  }
+  
+  .ql-picker-item[data-value="undo"]::after {
+    content: "Undo";
+  }
+  
+  .ql-picker-item[data-value="redo"]::after {
+    content: "Redo";
+  }
+  
+  .ql-picker-item[data-value="remove-table"]:before {
+    content: "Remove table";
+  }
+  
+  .ql-picker-item[data-value="hide-border"]::after {
+    content: "Hide Border";
+  }
+  
+  .ql-picker-item[data-value="show-border"]::after {
+    content: "Show Border";
+  }
+  
+  .ql-table:nth-of-type(1),
+  .ql-contain {
+    width: 90px;
+    margin-right: 0;
+  }
+  
+  .ql-picker.ql-table:nth-of-type(1) {
+    font-size: 11px;
+    font-weight: normal;
+  }
+  
+  .ql-picker.ql-table .ql-picker-label {
+    padding: 2px 3px;
+    width: 23px;
+  }
+  
+  .ql-picker.ql-table:nth-of-type(1) .ql-picker-options {
+    width: 180px;
+  }
+  
+  .ql-picker.ql-table:nth-of-type(1) .ql-picker-item {
+    display: block;
+    float: left;
+    width: 30px;
+    height: 30px;
+    line-height: 30px;
+    text-align: center;
+    padding: 0px;
+    margin: 1px;
+  }
+  
+  .ql-toolbar .ql-picker.ql-table .ql-picker-item {
+    display: none;
+  }
+  
+  .ql-toolbar .ql-picker.ql-table .ql-picker-item.enabled {
+    display: block;
+  }
+  
+  .ql-picker.ql-table:nth-of-type(2) {
+    display: flex;
+    width: 145px;
+  }
+  
+  .ql-picker.ql-table:nth-of-type(2) .ql-picker-label::before {
+    content: "\f850";
+  }
+  
+  .ql-picker.ql-table:nth-of-type(2) {
+    color: #444;
+  }
+  
+  .ql-picker.ql-table:nth-of-type(1) .ql-picker-item {
+    border: 1px solid #444;
+    color: #444;
+  }
+  
+  .ql-bubble .ql-picker.ql-table:nth-of-type(1) .ql-picker-item {
+    border: 1px solid #ccc;
+    color: #ccc;
+  }
+  
+  .ql-bubble .ql-picker.ql-table:nth-of-type(1) .ql-picker-item:hover {
+    border: 1px solid #fff;
+    color: #fff;
+  }
+  
+  .ql-table:nth-of-type(2) .ql-picker-label.ql-active {
+    color: #444 !important;
+  }
+  
+  .ql-toolbar .ql-picker-item.ql-selected:before, .ql-picker.ql-table:nth-of-type(2) .ql-picker-item {
+    color: #444;
+  }
+  
+  .ql-bubble .ql-toolbar .ql-picker-item.ql-selected:before, .ql-bubble .ql-picker.ql-table:nth-of-type(2) .ql-picker-item {
+    color: #ccc;
+  }
+  
+  .ql-bubble .ql-picker.ql-table:nth-of-type(2) .ql-picker-item:hover {
+    color: #fff;
+  }
+  
+  .ql-picker-label.ql-active .ql-stroke {
+    stroke: #444 !important;
+  }
+  
+  .ql-picker-item[data-value="remove-table"] {
+    border: none !important;
+    width: 100%;
+  }
+  
+  .ql-picker-item[data-value=newtable_1_1]:before {
+    content: "1x1";
+  }
+  
+  .ql-picker-item[data-value=newtable_1_2]:before {
+    content: "1x2";
+  }
+  
+  .ql-picker-item[data-value=newtable_1_3]:before {
+    content: "1x3";
+  }
+  
+  .ql-picker-item[data-value=newtable_1_4]:before {
+    content: "1x4";
+  }
+  
+  .ql-picker-item[data-value=newtable_1_5]:before {
+    content: "1x5";
+  }
+  
+  .ql-picker-item[data-value=newtable_2_1]:before {
+    content: "2x1";
+  }
+  
+  .ql-picker-item[data-value=newtable_2_2]:before {
+    content: "2x2";
+  }
+  
+  .ql-picker-item[data-value=newtable_2_3]:before {
+    content: "2x3";
+  }
+  
+  .ql-picker-item[data-value=newtable_2_4]:before {
+    content: "2x4";
+  }
+  
+  .ql-picker-item[data-value=newtable_2_5]:before {
+    content: "2x5";
+  }
+  
+  .ql-picker-item[data-value=newtable_3_1]:before {
+    content: "3x1";
+  }
+  
+  .ql-picker-item[data-value=newtable_3_2]:before {
+    content: "3x2";
+  }
+  
+  .ql-picker-item[data-value=newtable_3_3]:before {
+    content: "3x3";
+  }
+  
+  .ql-picker-item[data-value=newtable_3_4]:before {
+    content: "3x4";
+  }
+  
+  .ql-picker-item[data-value=newtable_3_5]:before {
+    content: "3x5";
+  }
+  
+  .ql-picker-item[data-value=newtable_4_1]:before {
+    content: "4x1";
+  }
+  
+  .ql-picker-item[data-value=newtable_4_2]:before {
+    content: "4x2";
+  }
+  
+  .ql-picker-item[data-value=newtable_4_3]:before {
+    content: "4x3";
+  }
+  
+  .ql-picker-item[data-value=newtable_4_4]:before {
+    content: "4x4";
+  }
+  
+  .ql-picker-item[data-value=newtable_4_5]:before {
+    content: "4x5";
+  }
+  
+  .ql-picker-item[data-value=newtable_5_1]:before {
+    content: "5x1";
+  }
+  
+  .ql-picker-item[data-value=newtable_5_2]:before {
+    content: "5x2";
+  }
+  
+  .ql-picker-item[data-value=newtable_5_3]:before {
+    content: "5x3";
+  }
+  
+  .ql-picker-item[data-value=newtable_5_4]:before {
+    content: "5x4";
+  }
+  
+  .ql-picker-item[data-value=newtable_5_5]:before {
+    content: "5x5";
+  }
+  
\ No newline at end of file
diff --git a/nav_pane.js b/nav_pane.js
index 7b79259..e202bb4 100644
--- a/nav_pane.js
+++ b/nav_pane.js
@@ -22,9 +22,9 @@ function navpane() {
         // return html.replace(/<p>/g, '').replace(/<\/p>/g, '');
 
         var html = html.replace(/<[^>]*>/g, '');
-        // if (html.length >= 30) {
-        //     html=html.slice(0, 25) + '...';
-        // }
+        if (html.length >= 35) {
+            html=html.slice(0,35 ) + '...';
+        }
         return html
 
     }