diff --git a/src/cg-dropdown.js b/src/cg-dropdown.js
index b66463d..4f84846 100644
--- a/src/cg-dropdown.js
+++ b/src/cg-dropdown.js
@@ -1,9 +1,8 @@
-import { customStyles, createSelected } from './components/utils';
+import { customStyles, createSelected, checkItemStruct } from './components/utils';
 import { createBreadcrumb } from './components/create-element';
 
 export class DropDown {
   #element;
-  #selector;
   #list;
   #options;
   #caret;
@@ -80,6 +79,18 @@ export class DropDown {
     return this.#items[number];
   }
 
+  disabled(value) {
+    if (typeof value !== 'boolean') {
+      return;
+    }
+
+    if (value === true) {
+      this.#element.setAttribute('disabled', true);
+    } else {
+      this.#element.removeAttribute('disabled');
+    }
+  }
+
   #init(options) {
     this.#options = options;
     const { items, multiselect, url } = this.#options;
@@ -111,7 +122,7 @@ export class DropDown {
       const random = Math.random().toString(36).substring(2, 10);
       let item = {};
 
-      if (this.#checkItemStruct(dataItem)) {
+      if (checkItemStruct(dataItem)) {
         item = {
           id: dataItem.id,
           title: dataItem.title,
@@ -147,9 +158,6 @@ export class DropDown {
     if (select) {
       createSelected(this.#element, select, styles);
     }
-
-    const selector = this.#element.querySelector('.cg-select');
-    this.#selector = selector;
   }
 
   #render(select) {
@@ -162,10 +170,6 @@ export class DropDown {
       this.#initSelected();
     }
 
-    // if (event) {
-    //   this.#initEvent();
-    // }
-
     const ulList = document.createElement('ul');
 
     if (styles) {
@@ -215,12 +219,11 @@ export class DropDown {
     }
 
     const response = await fetch(url);
-
     const dataUrl = await response.json();
 
     dataUrl.forEach((dataItem, index) => {
       const item = {
-        id: dataItem.phone,
+        id: dataItem.id,
         title: dataItem.name,
         value: index,
       };
@@ -313,7 +316,7 @@ export class DropDown {
             } else {
               if (multiselectTag) {
                 const tagItem = document.getElementById(`tag-${index}`);
-
+                // TODO: bug error! in url
                 ul.removeChild(tagItem);
               }
               this.#indexes.splice(checkIndex, 1);
@@ -366,26 +369,4 @@ export class DropDown {
       }
     }
   }
-
-  #checkItemStruct(item) {
-    if (item && typeof item !== 'object') {
-      return false;
-    }
-
-    return (
-      item.hasOwnProperty('id') && item.hasOwnProperty('title') && item.hasOwnProperty('value')
-    );
-  }
-
-  disabled(value) {
-    // if (typeof value !== 'boolean') {
-    //   return;
-    // }
-
-    if (value == true) {
-      const select = this.#element.querySelector('.cg-select');
-      // return console.log('Work');
-    } else {
-    }
-  }
 }
diff --git a/src/components/utils.js b/src/components/utils.js
index 45e7841..9d6c13f 100644
--- a/src/components/utils.js
+++ b/src/components/utils.js
@@ -1,10 +1,10 @@
 export function createSelected(element, content, styles) {
   if (content) {
     element.innerHTML = `
-      <button class="cg-select">
+      <div class="cg-select">
           <p class="selected">${content}</p>
           <div class="caret"></div>
-      </button>
+      </div>
       `;
   }
 
@@ -12,10 +12,10 @@ export function createSelected(element, content, styles) {
     customStyles(element, styles);
 
     element.innerHTML = `
-            <button class="cg-select" style = "${styles}">
-                <span class="selected" style = "${styles}">${content}</span>
-                <div class="caret" style = "${styles}"></div>
-            </button>
+      <div class="cg-select" style = "${styles}">
+          <span class="selected" style = "${styles}">${content}</span>
+          <div class="caret" style = "${styles}"></div>
+      </div>
     `;
   }
 }
@@ -51,3 +51,11 @@ export function customStyles(element, styles) {
     }
   }
 }
+
+export function checkItemStruct(item) {
+  if (item && typeof item !== 'object') {
+    return false;
+  }
+
+  return item.hasOwnProperty('id') && item.hasOwnProperty('title') && item.hasOwnProperty('value');
+}
diff --git a/src/index.html b/src/index.html
index 275edda..2e0d1ea 100644
--- a/src/index.html
+++ b/src/index.html
@@ -9,11 +9,11 @@
   </head>
   <body>
     <div class="container">
-      <div class="cg-dropdown cg-dropdown_one"></div>
+      <button class="cg-dropdown cg-dropdown_one"></button>
 
-      <div class="cg-dropdown cg-dropdown_two"></div>
+      <button class="cg-dropdown cg-dropdown_two"></button>
 
-      <div class="cg-dropdown cg-dropdown_three"></div>
+      <button class="cg-dropdown cg-dropdown_three"></button>
     </div>
   </body>
   <script type="module" src="index.js"></script>
diff --git a/src/index.js b/src/index.js
index 1afff76..bf439cd 100644
--- a/src/index.js
+++ b/src/index.js
@@ -6,7 +6,7 @@ const dropdown = new DropDown({
   items: ['BMW', 'Opel', 'Mersedes', 'MAN', 'max'],
   styles: {
     head: {
-      background: 'red',
+      background: '#4d629f',
     },
   },
   multiselect: true,
@@ -55,7 +55,7 @@ const dropdown2 = new DropDown({
 });
 
 dropdown2.addItem('LADA');
-dropdown.disabled(true);
+dropdown.disabled(false);
 
 //ToDo: paste the desired url;
 
@@ -65,7 +65,8 @@ const dropdown3 = new DropDown({
   url: 'http://jsonplaceholder.typicode.com/users',
   styles: {
     head: {
-      background: 'red',
+      background: 'black',
+      width: '350px',
     },
   },
   multiselect: true,
diff --git a/src/style/main.scss b/src/style/main.scss
index cfd1d2d..c40fb12 100644
--- a/src/style/main.scss
+++ b/src/style/main.scss
@@ -4,29 +4,36 @@
 }
 
 body {
-  background: #1b1e25;
+  background: #4a4a4a;
 }
 
 .container {
+  margin: 0 auto;
   display: flex;
-  margin: 50px auto;
+  align-items: baseline;
   justify-content: space-between;
-  width: 800px;
+  width: 900px;
+}
+
+.content {
+  border: 1px solid #616161;
+  height: 500px;
 }
 
 .cg-dropdown {
-  * {
-    position: relative;
-
-    // max-height: 60px;
-  }
+  min-width: 235px;
+  margin-left: 0;
+  position: relative;
+  margin: 0;
+  padding: 0;
+  border: none;
+  border-radius: 10px;
 }
 
 .cg-select {
   padding: 5px;
-  min-width: 235px;
-  max-width: 225px;
-  min-height: 60px;
+
+  min-height: 50px;
   color: #fff;
   display: flex;
   justify-content: space-between;
@@ -40,7 +47,8 @@ body {
   transition: 0.5s;
 
   .selected {
-    max-width: 200px;
+    max-width: 195px;
+
     margin: 5px;
   }
 
@@ -75,6 +83,7 @@ body {
   max-height: 230px;
   overflow-y: auto;
   position: absolute;
+
   width: 220px;
   padding: 7px;
   margin-top: -0.2px;
@@ -92,6 +101,10 @@ body {
   z-index: 1;
 
   &__item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
     transition: 0.5s;
     padding: 15px;
 
@@ -134,6 +147,7 @@ body {
 
 input[type='checkbox'] {
   cursor: pointer;
+  margin: 0 5px 0 0;
 }
 
 .svg-icon {