diff --git a/lib/app/communications/customer.js b/lib/app/communications/customer.js
index f1953d2..5ec58ed 100644
--- a/lib/app/communications/customer.js
+++ b/lib/app/communications/customer.js
@@ -435,7 +435,7 @@ class CustomerCommunication {
     #createContacts(container, option) {
         const readonly = option.readonly;
         const recordReadonly = option.recordReadonly;
-        const contacts = createElement('div');
+        const contacts = createElement('div', 'bar-list-container');
         container.append(
             createElement('div', 'contact-bar',
                 createElement('div', 'bar-icon',
@@ -491,7 +491,7 @@ class CustomerCommunication {
                                             }));
                                             button.addEventListener('click', () => {
                                                 const add = new Contact({
-                                                    company: !nullOrEmpty(this.#data.companyCode),
+                                                    company: !nullOrEmpty(this.#data.companyName),
                                                     onSave: item => {
                                                         const exists = this.#gridContact.source.some(s => s.Name === item.Name && s.MobilePhone === item.MobilePhone);
                                                         if (exists) {
@@ -535,14 +535,14 @@ class CustomerCommunication {
                                 }),
                                 createElement('div', null,
                                     createElement('div', div => {
-                                        if (nullOrEmpty(this.#data.companyCode)) {
+                                        if (nullOrEmpty(this.#data.companyName)) {
                                             div.style.display = 'none';
                                         }
                                         div.style.fontWeight = 'bold';
                                         div.innerText = r('contactFromRecord', 'Contacts from Customer Record');
                                     }),
                                     createElement('div', div => {
-                                        if (nullOrEmpty(this.#data.companyCode)) {
+                                        if (nullOrEmpty(this.#data.companyName)) {
                                             div.style.display = 'none';
                                         }
                                         div.className = 'contacts-record';
@@ -606,7 +606,7 @@ class CustomerCommunication {
                                             onclick: function () {
                                                 const edit = new Contact({
                                                     contact: this,
-                                                    company: !nullOrEmpty(This.#data.companyCode),
+                                                    company: !nullOrEmpty(This.#data.companyName),
                                                     onSave: (item, _op) => {
                                                         const exists =
                                                             This.#gridContact.source.some(s => s !== this && s.Name === item.Name && s.MobilePhone === item.MobilePhone) ||
@@ -804,7 +804,7 @@ class CustomerCommunication {
     #createFollowers(container, option) {
         const readonly = option.readonly;
         const recordReadonly = option.recordReadonly;
-        const followers = createElement('div');
+        const followers = createElement('div', 'bar-list-container');
         const buttonEditFollower = createElement('button', button => {
             button.className = 'roundbtn button-edit-followers';
             button.style.backgroundColor = 'rgb(48, 107, 255)';
@@ -872,6 +872,7 @@ class CustomerCommunication {
                             div.className = 'followers-record';
                             div.style.maxHeight = '400px';
                             div.style.width = '660px';
+                            div.style.overflow = 'auto';
                         })
                     )
                 );
diff --git a/lib/app/communications/style.scss b/lib/app/communications/style.scss
index d988fec..0aef017 100644
--- a/lib/app/communications/style.scss
+++ b/lib/app/communications/style.scss
@@ -42,7 +42,7 @@
         &:hover {
             background-color: var(--dark-fore-opacity-color);
 
-            >svg {
+            > svg {
                 opacity: .6;
             }
         }
@@ -52,12 +52,12 @@
             fill: lightgray;
             background-color: transparent !important;
 
-            &:hover>svg {
+            &:hover > svg {
                 opacity: unset;
             }
         }
 
-        >svg {
+        > svg {
             width: 13px;
             height: 14px;
             display: block;
@@ -75,16 +75,16 @@
         align-items: center;
         font-size: var(--font-larger-size);
 
-        >div {
+        > div {
             flex: 1 1 auto;
         }
 
-        >.title-functions {
+        > .title-functions {
             flex: 0 0 auto;
             display: flex;
             padding: 4px;
 
-            >label {
+            > label {
                 margin: 0 4px;
                 box-sizing: border-box;
                 cursor: pointer;
@@ -97,7 +97,7 @@
                 justify-content: center;
                 transition: background-color .2s;
 
-                >svg {
+                > svg {
                     fill: var(--strong-color);
                     width: 14px;
                     height: 14px;
@@ -107,7 +107,7 @@
                 &:hover {
                     background-color: var(--dark-fore-opacity-color);
 
-                    >svg {
+                    > svg {
                         opacity: .6;
                     }
                 }
@@ -119,7 +119,7 @@
                     &:hover {
                         background-color: var(--dark-fore-color);
 
-                        >svg {
+                        > svg {
                             opacity: unset;
                         }
                     }
@@ -134,26 +134,31 @@
         display: flex;
         border-bottom: 1px solid var(--title-bg-color);
 
-        >.bar-icon {
+        > .bar-icon {
             flex: 0 0 auto;
 
-            >svg {
+            > svg {
                 width: 30px;
                 height: 30px;
                 margin: 0 8px;
             }
         }
 
-        >.bar-list {
+        > .bar-list {
             flex: 1 1 auto;
             width: calc(100% - 46px);
 
+            .bar-list-container {
+                max-height: 120px;
+                overflow: auto;
+            }
+
             .contact-item {
                 display: flex;
                 align-items: center;
                 line-height: 22px;
 
-                >svg {
+                > svg {
                     flex: 0 0 auto;
                     width: 16px;
                     height: 16px;
@@ -161,7 +166,7 @@
                     fill: var(--strong-color);
                 }
 
-                >span {
+                > span {
                     // flex: 1 1 auto;
                     color: var(--strong-color);
                     font-size: var(--font-size);
@@ -177,7 +182,7 @@
             float: right;
             margin: 4px 10px 10px;
 
-            >svg {
+            > svg {
                 width: 16px;
             }
         }
@@ -189,7 +194,7 @@
         display: flex;
         flex-direction: column;
 
-        >textarea {
+        > textarea {
             padding: 10px 10px 0;
             border: none;
             height: 70px;
@@ -200,17 +205,17 @@
             @include outline();
         }
 
-        >div {
+        > div {
             padding: 0 10px 10px;
 
-            >.customer-name {
+            > .customer-name {
                 float: left;
 
-                >span {
+                > span {
                     font-size: var(--font-smaller-size);
                 }
 
-                >.ui-input {
+                > .ui-input {
                     margin-left: 4px;
                     width: 150px;
                     border-top: none;
@@ -219,7 +224,7 @@
                 }
             }
 
-            >.prompt-count {
+            > .prompt-count {
                 display: inline-block;
                 color: var(--light-color);
                 font-size: var(--font-smaller-size);
@@ -254,7 +259,7 @@
                 font-size: var(--font-size);
                 align-self: flex-start;
 
-                .ui-tooltip-wrapper>.ui-tooltip-content {
+                .ui-tooltip-wrapper > .ui-tooltip-content {
                     font-weight: normal;
                 }
             }
@@ -268,7 +273,7 @@
                 max-width: 240px;
                 background-color: rgb(244, 244, 244);
 
-                a>svg {
+                a > svg {
                     width: 13px;
                     height: 13px;
                     fill: #2140fb;
@@ -278,7 +283,7 @@
                     }
                 }
 
-                >span::after {
+                > span::after {
                     content: '';
                     display: block;
                 }
@@ -330,7 +335,7 @@
             height: 100%;
             min-height: 120px;
 
-            >.ui-grid-body .ui-grid-body-content>.ui-grid-row>td {
+            > .ui-grid-body .ui-grid-body-content > .ui-grid-row > td {
                 vertical-align: top;
 
                 .col-icon {
@@ -340,11 +345,11 @@
                 .icon-contact-type {
                     cursor: unset;
 
-                    >svg {
+                    > svg {
                         fill: #333;
                     }
 
-                    &:hover>svg {
+                    &:hover > svg {
                         opacity: unset;
                     }
                 }
@@ -370,22 +375,22 @@
             flex-direction: column;
             width: 600px;
 
-            >.follower-search {
+            > .follower-search {
                 margin-bottom: 6px;
             }
 
-            >.follower-grid {
+            > .follower-grid {
                 height: 380px;
             }
         }
     }
 }
 
-@media (prefers-color-scheme: dark) {
+/*@media (prefers-color-scheme: dark) {
     .comm {
         --dark-fore-color: #000;
         --dark-fore-opacity-color: rgba(0, 0, 0, .4);
         --strong-color: #ccc;
         --light-color: #333;
     }
-}
\ No newline at end of file
+}*/
diff --git a/lib/ui/css/grid.scss b/lib/ui/css/grid.scss
index c73d545..587904e 100644
--- a/lib/ui/css/grid.scss
+++ b/lib/ui/css/grid.scss
@@ -515,7 +515,7 @@
     }
 }
 
-@media (prefers-color-scheme: dark) {
+/*@media (prefers-color-scheme: dark) {
     .ui-grid {
         --cell-hover-bg-color: yellow;
         --header-border-color: #525456;
@@ -532,4 +532,4 @@
         --row-selected-bg-color: #190d04;
         --text-disabled-color: gray;
     }
-}
\ No newline at end of file
+}*/
\ No newline at end of file
diff --git a/lib/ui/css/variables/definition.scss b/lib/ui/css/variables/definition.scss
index 78612ee..b83309e 100644
--- a/lib/ui/css/variables/definition.scss
+++ b/lib/ui/css/variables/definition.scss
@@ -10,7 +10,7 @@
 }
 
 :root {
-    color-scheme: light dark;
+    /*color-scheme: light dark;*/
 
     --color: #201f1e;
     --bg-color: #fff;
@@ -40,7 +40,7 @@
     --font-family: "Franklin Gothic Book", "San Francisco", "Segoe UI", "Open Sans", "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei UI", sans-serif;
 }
 
-@media (prefers-color-scheme: dark) {
+/*@media (prefers-color-scheme: dark) {
     :root {
         --color: rgb(255 255 255/87%);
         --bg-color: #141414;
@@ -60,4 +60,4 @@
         --loading-bg-color: rgb(20 20 20/40%);
         --loading-fore-color: rgb(255 255 255/20%);
     }
-}
\ No newline at end of file
+}*/
\ No newline at end of file
diff --git a/lib/ui/grid/grid.js b/lib/ui/grid/grid.js
index d1c9fe0..9ff5468 100644
--- a/lib/ui/grid/grid.js
+++ b/lib/ui/grid/grid.js
@@ -296,7 +296,7 @@ class Grid {
 
         let height = this.height;
         if (height === 0) {
-            height = this.#containerHeight;
+            height = this.#containerHeight ??= this.containerHeight;
         } else if (isNaN(height) || height < 0) {
             height = this.#el.offsetHeight - top;
         }
@@ -308,12 +308,16 @@ class Grid {
         this.#bodyClientWidth = body.clientWidth;
     }
 
-    reload() {
+    get containerHeight() {
         let length = this.#currentSource.length;
         if (this.extraRows > 0) {
             length += this.extraRows;
         }
-        this.#containerHeight = length * (this.rowHeight + 1);
+        return length * (this.rowHeight + 1);
+    }
+
+    reload() {
+        this.#containerHeight = this.containerHeight;
         this.#refs.body.scrollTop = 0;
         this.#refs.body.scrollLeft = 0;
         this.#refs.bodyContent.style.top = '0px';
@@ -634,7 +638,7 @@ class Grid {
                             }
                         }
                         if (Grid.ColumnTypes.isCheckbox(col.type)) {
-                            cell.appendChild(GridCheckboxColumn.createEdit(e => this.#onRowChanged(e, exists + i, col, e.target.checked)));
+                            cell.appendChild(GridCheckboxColumn.createEdit(e => this.#onRowChanged(e, index, col, e.target.checked)));
                             // this.#colTypes[col.key] = GridCheckboxColumn;
                         } else {
                             let type = this.#colTypes[col.key];
@@ -1532,7 +1536,7 @@ class Grid {
         if (this.#currentSource == null) {
             return;
         }
-        const row = this.#currentSource[this.#startIndex + index];
+        const row = this.#currentSource[index];
         const item = row.values;
         if (item == null) {
             return;
diff --git a/lib/utility.js b/lib/utility.js
index 259d435..ed5523c 100644
--- a/lib/utility.js
+++ b/lib/utility.js
@@ -44,7 +44,13 @@ function isEmail(text) {
 }
 
 function isPhone(text) {
-    return /^[1-9]\d{9,}$/.test(text);
+    if (/^[1-9]\d{9,}$/.test(text)) {
+        return true;
+    }
+    if (/^\+?[1-9][\d-]{9,}\d$/.test(text) && /^[1-9]\d{9,}$/.test(text.replace('+', '').replace(new RegExp('-', 'g'), ''))) {
+        return true;
+    }
+    return false;
 }
 
 export {