diff --git a/.vscode/extensions.json b/.vscode/extensions.json
new file mode 100644
index 0000000..a5d0054
--- /dev/null
+++ b/.vscode/extensions.json
@@ -0,0 +1,5 @@
+{
+    "recommendations": [
+        "platformio.platformio-ide"
+    ]
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index accaa3d..667f72e 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "svelte-app",
+  "name": "iotm-web",
   "version": "1.0.0",
   "private": true,
   "scripts": {
@@ -29,4 +29,4 @@
     "daisyui": "^1.11.0",
     "sirv-cli": "^1.0.0"
   }
-}
+}
\ No newline at end of file
diff --git a/src/App.svelte b/src/App.svelte
index ea46a67..f5f9f6b 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -35,6 +35,20 @@
     wigets = JSON.parse(document.getElementById("text1").value);
   }
 
+  let pages = [];
+
+  pages = [
+    {
+      widget: "input",
+      type: "time",
+      status: "12:00",
+      page: "Inputs",
+      order: "3",
+      descr: "Switch on boiler time",
+      topic: "/prefix/00000-00003/temp3",
+    },
+  ];
+
   let wigets = [];
 
   wigets = [
@@ -42,7 +56,7 @@
       widget: "input",
       type: "time",
       status: "12:00",
-      page: "",
+      page: "Inputs",
       order: "3",
       descr: "Switch on boiler time",
       topic: "/prefix/00000-00003/temp3",
@@ -52,7 +66,7 @@
       type: "number",
       status: "30.5",
       after: "°С",
-      page: "",
+      page: "Inputs",
       order: "1",
       descr: "Boiler temperature",
       topic: "/prefix/00000-00001/temp1",
@@ -61,7 +75,7 @@
       widget: "input",
       type: "text",
       status: "Hello",
-      page: "",
+      page: "Inputs",
       order: "3",
       descr: "Massage to be send",
       topic: "/prefix/00000-00003/temp3",
@@ -70,7 +84,7 @@
       widget: "input",
       type: "date",
       status: "2021.09.15",
-      page: "",
+      page: "Inputs",
       order: "2",
       descr: "Switch on boiler date",
       topic: "/prefix/00000-00002/temp2",
@@ -114,16 +128,29 @@
   <ul class="menu__main">
     <div class="bg-cover bg-gray-50 pt-16">
       <Route path="/">
-        <Card title="Inputs">
-          {#each wigets as widget, i}
-            {#if widget.widget === "input"}
-              <Myinput bind:value={widget.status} descr={widget.descr} topic={widget.topic} ws={1} type={widget.type} />
-            {/if}
-          {/each}
-        </Card>
-        <Card title="Редактор JSON">
-          <textarea on:input={SuperDuperFunction} rows="10" class="widget-input-indigo" id="text1">{syntaxHighlight(JSON.stringify(wigets))}</textarea>
-        </Card>
+        <div class="cards-grid">
+          <Card title="Здесь будет конфигуратор">
+            {#each wigets as widget, i}
+              {#if widget.widget === "input"}
+                <Myinput bind:value={widget.status} descr={widget.descr} topic={widget.topic} ws={1} type={widget.type} />
+              {/if}
+            {/each}
+          </Card>
+          <Card title="Здесь будет конфигуратор">
+            {#each wigets as widget, i}
+              {#if widget.widget === "input"}
+                <Myinput bind:value={widget.status} descr={widget.descr} topic={widget.topic} ws={1} type={widget.type} />
+              {/if}
+            {/each}
+          </Card>
+          <Card title="Здесь будет конфигуратор">
+            {#each wigets as widget, i}
+              {#if widget.widget === "input"}
+                <Myinput bind:value={widget.status} descr={widget.descr} topic={widget.topic} ws={1} type={widget.type} />
+              {/if}
+            {/each}
+          </Card>
+        </div>
       </Route>
 
       <Route path="/config">
@@ -148,6 +175,13 @@
           </div>
         </Card>
       </Route>
+      <Route path="/utilities">
+        <div class="cards-grid">
+          <Card title="Редактор JSON">
+            <textarea on:input={SuperDuperFunction} rows="10" class="widget-input-indigo w-full" id="text1">{syntaxHighlight(JSON.stringify(wigets))}</textarea>
+          </Card>
+        </div>
+      </Route>
     </div>
   </ul>
 </main>
@@ -164,24 +198,33 @@
     .block-psn-center {
       @apply grid place-items-center mx-2 sm:my-auto;
     }
-    .card {
+    .card2 {
       @apply w-11/12 sm:w-8/12 md:w-6/12 lg:w-5/12 2xl:w-4/12 p-2 sm:p-2 md:p-2 lg:p-2 xl:px-8 xl:py-4 2xl:px-8 2xl:py-4 my-2 bg-white rounded-lg shadow-md lg:shadow-lg;
     }
-    .card-title-gray {
-      @apply text-center text-lg text-gray-500 font-bold pb-6;
-    }
-    .card-items {
-      @apply md:items-center lg:items-end 2xl:items-end md:flex mb-6;
-    }
-    .widget-descr-gray-left {
-      @apply content-center pr-4 block text-gray-500 font-bold md:text-left;
-    }
+
     .widget-input-indigo {
       @apply content-center pr-4 py-1 bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-indigo-500;
     }
     .widget-after {
       @apply pr-4 block text-gray-500 font-bold md:text-right;
     }
+
+    .cards-grid {
+      @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-3 justify-items-center;
+    }
+    .card {
+      @apply w-11/12 my-2 p-2 sm:p-2 md:p-2 lg:p-2 xl:px-8 xl:py-4 2xl:px-8 2xl:py-4 bg-white rounded-lg shadow-md lg:shadow-lg;
+    }
+    .card-title-gray {
+      @apply text-center text-lg text-gray-500 font-bold pb-6;
+    }
+
+    .card-items {
+      @apply md:items-center md:flex mb-6;
+    }
+    .widget-descr-gray-left {
+      @apply content-center pr-4 block text-gray-500 font-bold md:text-left;
+    }
   }
 
   #menu__toggle {
@@ -203,12 +246,10 @@
     left: 0;
   }
 
-  /*
   #menu__toggle:checked ~ .menu__main {
-    margin-left: 150px; 
+    margin-left: 150px;
     transition-duration: 0.25s;
   }
-  */
 
   .menu__btn {
     display: flex;
diff --git a/src/Card.svelte b/src/Card.svelte
index 62b41ce..b5b4ab2 100644
--- a/src/Card.svelte
+++ b/src/Card.svelte
@@ -2,11 +2,7 @@
   export let title;
 </script>
 
-<div class="container">
-  <div class="block-psn-center">
-    <div class="card">
-      <h1 class="card-title-gray">{title}</h1>
-      <slot />
-    </div>
-  </div>
+<div class="card">
+  <h1 class="card-title-gray">{title}</h1>
+  <slot />
 </div>
diff --git a/src/Myinput.svelte b/src/Myinput.svelte
index dad2557..4498fa5 100644
--- a/src/Myinput.svelte
+++ b/src/Myinput.svelte
@@ -11,26 +11,24 @@
   //style="min-width:50%; max-width:100%; width:{value.length * 10}px" on:change={(WSpush(ws, topic, value), console.log(value.length))}
 </script>
 
-<div class="container">
-  <div class="card-items">
-    <div class="md:w-2/3 lg:w-2/3 2xl:w-2/3">
-      <!-- svelte-ignore a11y-label-has-associated-control -->
-      <label class="widget-descr-gray-left">{!descr ? "" : descr}</label>
-    </div>
-    <div class="md:w-1/3 lg:w-1/3 2xl:w-1/3">
-      <!-- on:change={WSpush(ws, topic, value)} -->
-      {#if type == "number"}
-        <input class="widget-input-indigo text-right" step="0.1" on:change={WSpush(ws, topic, value)} bind:value type="number" />
-      {/if}
-      {#if type == "text"}
-        <input class="widget-input-indigo text-right" on:change={WSpush(ws, topic, value)} bind:value type="text" />
-      {/if}
-      {#if type == "date"}
-        <input class="widget-input-indigo text-right" on:change={WSpush(ws, topic, value)} bind:value type="date" />
-      {/if}
-      {#if type == "time"}
-        <input class="widget-input-indigo text-right" on:change={WSpush(ws, topic, value)} bind:value type="time" />
-      {/if}
-    </div>
+<div class="card-items">
+  <div class="md:w-2/3 lg:w-2/3 2xl:w-2/3">
+    <!-- svelte-ignore a11y-label-has-associated-control -->
+    <label class="widget-descr-gray-left">{!descr ? "" : descr}</label>
+  </div>
+  <div class="md:w-1/3 lg:w-1/3 2xl:w-1/3">
+    <!-- on:change={WSpush(ws, topic, value)} -->
+    {#if type == "number"}
+      <input class="widget-input-indigo text-right" step="0.1" on:change={WSpush(ws, topic, value)} bind:value type="number" />
+    {/if}
+    {#if type == "text"}
+      <input class="widget-input-indigo text-right" on:change={WSpush(ws, topic, value)} bind:value type="text" />
+    {/if}
+    {#if type == "date"}
+      <input class="widget-input-indigo text-right" on:change={WSpush(ws, topic, value)} bind:value type="date" />
+    {/if}
+    {#if type == "time"}
+      <input class="widget-input-indigo text-right" on:change={WSpush(ws, topic, value)} bind:value type="time" />
+    {/if}
   </div>
 </div>