diff --git a/.gitignore b/.gitignore
index 96e9c43..d7eed0b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -10,3 +10,6 @@ deploy-*.sh
 
 # Custom
 blocks
+config
+data
+src
diff --git a/README.md b/README.md
index c9c950b..3db5e59 100644
--- a/README.md
+++ b/README.md
@@ -20,3 +20,11 @@ environment.
 
 Generated blocks are including this repository.   
 This project is running a nodejs script with `browsersync` and `gulp` which improves the development process.   
+
+## Development / Testing the tool
+
+Run `npm run generate-block` command and give the `development` name to the block, it will generate the `/blocks` folder. 
+
+Copy the `/development/data` and `/development/src` folders to root folder of project.
+Now you're ready to run development process: `npm run dev`.
+
diff --git a/generators/block/templates/src/template.template.hbs b/generators/block/templates/src/template.template.hbs
index 6afa5fe..e44d509 100644
--- a/generators/block/templates/src/template.template.hbs
+++ b/generators/block/templates/src/template.template.hbs
@@ -33,9 +33,9 @@
 
     <h2>Image Example</h2>
     <div>
-      <img src="images/demo.jpeg" alt="">
+      <img src="/images/demo.jpeg" alt="">
       <br>
-      <code>&lt;img src=&quot;images/demo.jpeg&quot; alt=&quot;&quot;&gt;
+      <code>&lt;img src=&quot;/images/demo.jpeg&quot; alt=&quot;&quot;&gt;
       </code>
     </div>
 
diff --git a/layouts/alignfull.hbs b/layouts/alignfull.hbs
index 915128d..ca72bd2 100644
--- a/layouts/alignfull.hbs
+++ b/layouts/alignfull.hbs
@@ -4,8 +4,6 @@
 
 <body>
 
-{{> (include_partial "layouts/partials/toolbar") }}
-
 <main>
   {{> (include_block_template) }}
 </main>
diff --git a/layouts/container.hbs b/layouts/container.hbs
index 936d8c3..2dd26e7 100644
--- a/layouts/container.hbs
+++ b/layouts/container.hbs
@@ -4,8 +4,6 @@
 
 <body>
 
-{{> (include_partial "layouts/partials/toolbar") }}
-
 <main>
   <div class="container">
     {{> (include_block_template) }}
diff --git a/layouts/images/icon-desktop.svg b/layouts/images/icon-desktop.svg
new file mode 100644
index 0000000..134ba5e
--- /dev/null
+++ b/layouts/images/icon-desktop.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path d="M15 20H9" stroke="url(#paint0_linear_17102_17357)" stroke-width="2" stroke-linecap="round"
+        stroke-linejoin="round"/>
+  <path
+    d="M19 5H5C4.44772 5 4 5.44772 4 6V16C4 16.5523 4.44772 17 5 17H19C19.5523 17 20 16.5523 20 16V6C20 5.44772 19.5523 5 19 5Z"
+    stroke="url(#paint1_linear_17102_17357)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <defs>
+    <linearGradient id="paint0_linear_17102_17357" x1="9" y1="21" x2="11.3077" y2="17.5385"
+                    gradientUnits="userSpaceOnUse">
+      <stop stop-color="#14181F"/>
+      <stop offset="1" stop-color="#272A31"/>
+    </linearGradient>
+    <linearGradient id="paint1_linear_17102_17357" x1="4" y1="17" x2="22" y2="11" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#14181F"/>
+      <stop offset="1" stop-color="#272A31"/>
+    </linearGradient>
+  </defs>
+</svg>
diff --git a/layouts/images/icon-mobile.svg b/layouts/images/icon-mobile.svg
new file mode 100644
index 0000000..364fae4
--- /dev/null
+++ b/layouts/images/icon-mobile.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path
+    d="M16 3H8C7.44772 3 7 3.44772 7 4V20C7 20.5523 7.44772 21 8 21H16C16.5523 21 17 20.5523 17 20V4C17 3.44772 16.5523 3 16 3Z"
+    stroke="url(#paint0_linear_17102_17362)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M12 18H12.002V18.002H12V18Z" stroke="url(#paint1_linear_17102_17362)" stroke-width="2" stroke-linecap="round"
+        stroke-linejoin="round"/>
+  <defs>
+    <linearGradient id="paint0_linear_17102_17362" x1="7" y1="21" x2="19.2634" y2="19.2967"
+                    gradientUnits="userSpaceOnUse">
+      <stop stop-color="#14181F"/>
+      <stop offset="1" stop-color="#272A31"/>
+    </linearGradient>
+    <linearGradient id="paint1_linear_17102_17362" x1="12" y1="18.002" x2="12.0024" y2="18.0014"
+                    gradientUnits="userSpaceOnUse">
+      <stop stop-color="#14181F"/>
+      <stop offset="1" stop-color="#272A31"/>
+    </linearGradient>
+  </defs>
+</svg>
diff --git a/layouts/images/icon-tablet.svg b/layouts/images/icon-tablet.svg
new file mode 100644
index 0000000..9d78584
--- /dev/null
+++ b/layouts/images/icon-tablet.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path
+    d="M20 3H4C3.44772 3 3 3.44772 3 4V20C3 20.5523 3.44772 21 4 21H20C20.5523 21 21 20.5523 21 20V4C21 3.44772 20.5523 3 20 3Z"
+    stroke="url(#paint0_linear_17102_17360)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M12 18H12.002V18.002H12V18Z" stroke="url(#paint1_linear_17102_17360)" stroke-width="2" stroke-linecap="round"
+        stroke-linejoin="round"/>
+  <defs>
+    <linearGradient id="paint0_linear_17102_17360" x1="3" y1="21" x2="24.1765" y2="15.7059"
+                    gradientUnits="userSpaceOnUse">
+      <stop stop-color="#14181F"/>
+      <stop offset="1" stop-color="#272A31"/>
+    </linearGradient>
+    <linearGradient id="paint1_linear_17102_17360" x1="12" y1="18.002" x2="12.0024" y2="18.0014"
+                    gradientUnits="userSpaceOnUse">
+      <stop stop-color="#14181F"/>
+      <stop offset="1" stop-color="#272A31"/>
+    </linearGradient>
+  </defs>
+</svg>
diff --git a/layouts/index.hbs b/layouts/index.hbs
new file mode 100644
index 0000000..7939893
--- /dev/null
+++ b/layouts/index.hbs
@@ -0,0 +1,19 @@
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="/styles/page--main.css">
+  <title>Block Development Tool</title>
+</head>
+
+<body>
+
+{{> (include_partial "layouts/partials/toolbar") }}
+
+<script>window.previewFrameUrl = 'http://localhost:{{ port }}/view/{{ baseView }}';</script>
+<iframe id="preview_frame" src="http://localhost:{{ port }}/view/{{ baseView }}" class="breakpoint"></iframe>
+
+<script src="/scripts/page--toolbar.js"></script>
+</body>
+</html>
diff --git a/layouts/partials/head.hbs b/layouts/partials/head.hbs
index 6b7ee45..9382c94 100644
--- a/layouts/partials/head.hbs
+++ b/layouts/partials/head.hbs
@@ -2,8 +2,10 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
-  {{#if config.cssUrl }}<link rel="stylesheet" href="{{ config.cssUrl }}">
-  {{/if}}<link rel="stylesheet" href="styles/page--main.css">
-  <link rel="stylesheet" href="styles/{{ config.blockName }}.min.css">
+  {{#if config.cssUrl }}
+    <link rel="stylesheet" href="{{ config.cssUrl }}">
+  {{/if}}
+  <link rel="stylesheet" href="/styles/page--view.css">{{# if config.blockName}}
+  <link rel="stylesheet" href="/styles/{{ config.blockName }}.min.css">{{/if}}
   <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css"/>
 </head>
diff --git a/layouts/partials/scripts.hbs b/layouts/partials/scripts.hbs
index ded04ff..7991cb1 100644
--- a/layouts/partials/scripts.hbs
+++ b/layouts/partials/scripts.hbs
@@ -1,5 +1,4 @@
 <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
-<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
-<script src="scripts/page--toolbar.js"></script>{{#if config.jsUrl }}
-<script src="{{ config.jsUrl }}"></script>{{/if}}
-<script src="scripts/{{ config.blockName }}.min.js"></script>
+<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>{{#if config.jsUrl }}
+<script src="{{ config.jsUrl }}"></script>{{/if}}{{#if config.blockName }}
+<script src="/scripts/{{ config.blockName }}.min.js"></script>{{/if}}
diff --git a/layouts/partials/toolbar.hbs b/layouts/partials/toolbar.hbs
index 3fa8884..97cb42f 100644
--- a/layouts/partials/toolbar.hbs
+++ b/layouts/partials/toolbar.hbs
@@ -1,7 +1,20 @@
 <header class="page_toolbar">
+
+  <div class="page_toolbar__responsive_mode">
+    <input type="radio" value="desktop" id="responsive_mode__desktop" name="responsive_mode" checked="checked"/>
+    <label for="responsive_mode__desktop">Desktop</label>
+
+    <input type="radio" value="tablet" id="responsive_mode__tablet" name="responsive_mode"/>
+    <label for="responsive_mode__tablet">Tablet</label>
+
+    <input type="radio" value="mobile" id="responsive_mode__mobile" name="responsive_mode"/>
+    <label for="responsive_mode__mobile">Mobile</label>
+  </div>
+
   <div class="page_toolbar__data_options">
     <label for="data-options">Data Options: </label>
 
+
     <select name="data" id="data-options">
       {{#each config.dataFiles }}
         <option value="{{ name }}" {{#if active }}selected="selected"{{/if}}>{{ name }}</option>
diff --git a/layouts/scripts/page--toolbar.js b/layouts/scripts/page--toolbar.js
index 112d59d..ab97a16 100644
--- a/layouts/scripts/page--toolbar.js
+++ b/layouts/scripts/page--toolbar.js
@@ -1,13 +1,38 @@
 (function () {
 
-  const dataOptionsSelect = document.getElementById('data-options');
-  if (!dataOptionsSelect) {
-    return;
+  const previewFrame = document.getElementById('preview_frame');
+
+  initDataOptions();
+  initResponsiveMode();
+
+  /**
+   * Functions
+   */
+
+  function initDataOptions() {
+    const dataOptionsSelect = document.getElementById('data-options');
+    if (!dataOptionsSelect) {
+      return;
+    }
+
+    dataOptionsSelect.addEventListener('change', function () {
+      previewFrame.src = window.previewFrameUrl + '?data=' + this.value;
+    });
   }
 
-  dataOptionsSelect.addEventListener('change', function () {
-    console.log(this.value)
-    window.location = '?data=' + this.value;
-  })
+  function initResponsiveMode() {
+
+    document.querySelectorAll('input[name="responsive_mode"]').forEach((input) => {
+      input.addEventListener('change', (event) => {
+        const mode = event.target.value;
+
+        previewFrame.classList.remove('breakpoint--desktop');
+        previewFrame.classList.remove('breakpoint--tablet');
+        previewFrame.classList.remove('breakpoint--mobile');
+
+        previewFrame.classList.add('breakpoint--' + mode);
+      });
+    });
+  }
 
 })();
diff --git a/layouts/styles/_page--breakpoints.scss b/layouts/styles/_page--breakpoints.scss
new file mode 100644
index 0000000..1be4930
--- /dev/null
+++ b/layouts/styles/_page--breakpoints.scss
@@ -0,0 +1,24 @@
+#preview_frame {
+  display: block;
+  margin-right: auto;
+  margin-left: auto;
+
+  border: 1px solid #E2E8F0;
+
+  transition: max-width .3s ease-in-out, width .3s ease-in-out;
+
+  &.breakpoint {
+    width: 100%;
+    max-width: 1920px;
+    //max-width: 100%;
+
+    &--mobile {
+      max-width: 375px;
+    }
+
+    &--tablet {
+      max-width: 768px;
+    }
+  }
+
+}
diff --git a/layouts/styles/_page--main--responsive-mode.scss b/layouts/styles/_page--main--responsive-mode.scss
new file mode 100644
index 0000000..2e0019e
--- /dev/null
+++ b/layouts/styles/_page--main--responsive-mode.scss
@@ -0,0 +1,38 @@
+
+&__responsive_mode {
+  display: flex;
+  gap: 0.5rem;
+
+  input[type='radio'] {
+    display: none;
+  }
+
+  label {
+    --size: 1.5rem;
+    cursor: pointer;
+    background-image: url("../images/icon-desktop.svg");
+    background-repeat: no-repeat;
+    background-size: calc(var(--size) - 0.15rem);
+    background-position: center;
+    font-size: 1px;
+    color: rgba(0, 0, 0, 0);
+    line-height: 1;
+    display: block;
+    width: var(--size);
+    height: var(--size);
+    border-radius: 0.25rem;
+
+    &[for="responsive_mode__tablet"] {
+      background-image: url("../images/icon-tablet.svg");
+    }
+
+    &[for="responsive_mode__mobile"] {
+      background-image: url("../images/icon-mobile.svg");
+    }
+  }
+
+  input[type='radio']:checked + label {
+    background-color: #CBD5E0;
+  }
+
+}
diff --git a/layouts/styles/page--main.css b/layouts/styles/page--main.css
index 71a854a..eb35c43 100644
--- a/layouts/styles/page--main.css
+++ b/layouts/styles/page--main.css
@@ -1,29 +1,36 @@
 body {
   margin: 0;
   font-size: 1rem;
+  background-color: #F7FAFC;
 }
 
-header.page_toolbar {
+iframe {
+  margin-top: 30px;
+  height: calc(100% - 54px - 32px);
+  background-color: white;
+}
+
+.page_toolbar {
   --gap: 2.5rem;
   font-size: 14px;
-
   font-family: Arial, sans-serif;
-  background-color: #ccc;
+  background-color: #EDF2F7;
   padding: 1em;
-
   display: flex;
   justify-content: center;
   gap: var(--gap);
   align-items: center;
-  margin-bottom: 2em;
 }
-
-header.page_toolbar > div {
+.page_toolbar > div {
   position: relative;
 }
-
-header.page_toolbar > div:not(:first-child):after {
-  content: '|';
+@media (max-width: 1024px) {
+  .page_toolbar > div {
+    display: none;
+  }
+}
+.page_toolbar > div:not(:first-child):after {
+  content: "|";
   position: absolute;
   left: calc(var(--gap) / 2 * -1);
   top: 40%;
@@ -31,8 +38,7 @@ header.page_toolbar > div:not(:first-child):after {
   line-height: 1;
   transform: translateY(-50%);
 }
-
-header.page_toolbar select {
+.page_toolbar > div select {
   font-size: 0.85em;
   margin: 0;
   display: inline-block;
@@ -41,13 +47,59 @@ header.page_toolbar select {
   width: initial !important;
   padding: 4px 8px;
 }
-
 @media (max-width: 1024px) {
-  header.page_toolbar > div {
-    display: none;
-  }
-
-  header.page_toolbar .page_toolbar__data_options {
+  .page_toolbar__data_options {
     display: block;
   }
 }
+.page_toolbar__responsive_mode {
+  display: flex;
+  gap: 0.5rem;
+}
+.page_toolbar__responsive_mode input[type=radio] {
+  display: none;
+}
+.page_toolbar__responsive_mode label {
+  --size: 1.5rem;
+  cursor: pointer;
+  background-image: url("../images/icon-desktop.svg");
+  background-repeat: no-repeat;
+  background-size: calc(var(--size) - 0.15rem);
+  background-position: center;
+  font-size: 1px;
+  color: rgba(0, 0, 0, 0);
+  line-height: 1;
+  display: block;
+  width: var(--size);
+  height: var(--size);
+  border-radius: 0.25rem;
+}
+.page_toolbar__responsive_mode label[for=responsive_mode__tablet] {
+  background-image: url("../images/icon-tablet.svg");
+}
+.page_toolbar__responsive_mode label[for=responsive_mode__mobile] {
+  background-image: url("../images/icon-mobile.svg");
+}
+.page_toolbar__responsive_mode input[type=radio]:checked + label {
+  background-color: #CBD5E0;
+}
+
+#preview_frame {
+  display: block;
+  margin-right: auto;
+  margin-left: auto;
+  border: 1px solid #E2E8F0;
+  transition: max-width 0.3s ease-in-out, width 0.3s ease-in-out;
+}
+#preview_frame.breakpoint {
+  width: 100%;
+  max-width: 1920px;
+}
+#preview_frame.breakpoint--mobile {
+  max-width: 375px;
+}
+#preview_frame.breakpoint--tablet {
+  max-width: 768px;
+}
+
+/*# sourceMappingURL=page--main.css.map */
diff --git a/layouts/styles/page--main.css.map b/layouts/styles/page--main.css.map
new file mode 100644
index 0000000..5d67207
--- /dev/null
+++ b/layouts/styles/page--main.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["page--main.scss","_page--main--responsive-mode.scss","_page--breakpoints.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EAEA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAGA;EACE;;AAEA;EAHF;IAII;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAKF;EADF;IAEI;;;ACxDN;EACE;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAIJ;EACE;;;AClCJ;EACE;EACA;EACA;EAEA;EAEA;;AAEA;EACE;EACA;;AAGA;EACE;;AAGF;EACE","file":"page--main.css"}
\ No newline at end of file
diff --git a/layouts/styles/page--main.scss b/layouts/styles/page--main.scss
new file mode 100644
index 0000000..6694e9a
--- /dev/null
+++ b/layouts/styles/page--main.scss
@@ -0,0 +1,66 @@
+body {
+  margin: 0;
+  font-size: 1rem;
+  //overflow: none;
+  background-color: #F7FAFC;
+}
+
+iframe {
+  margin-top: 30px;
+  height: calc(100% - 54px - 32px);
+  background-color: white;
+}
+
+.page_toolbar {
+  --gap: 2.5rem;
+  font-size: 14px;
+
+  font-family: Arial, sans-serif;
+  background-color: #EDF2F7;
+  padding: 1em;
+
+  display: flex;
+  justify-content: center;
+  gap: var(--gap);
+  align-items: center;
+  //margin-bottom: 2em;
+
+  > div {
+    position: relative;
+
+    @media (max-width: 1024px) {
+      display: none;
+    }
+
+    &:not(:first-child):after {
+      content: '|';
+      position: absolute;
+      left: calc(var(--gap) / 2 * -1);
+      top: 40%;
+      font-size: 20px;
+      line-height: 1;
+      transform: translateY(-50%);
+    }
+
+    select {
+      font-size: 0.85em;
+      margin: 0;
+      display: inline-block;
+      border-radius: initial;
+      min-width: initial;
+      width: initial !important;
+      padding: 4px 8px;
+    }
+  }
+
+  &__data_options {
+    @media (max-width: 1024px) {
+      display: block;
+    }
+  }
+
+  @import "page--main--responsive-mode";
+}
+
+@import "page--breakpoints";
+
diff --git a/layouts/styles/page--view.css b/layouts/styles/page--view.css
new file mode 100644
index 0000000..c02582e
--- /dev/null
+++ b/layouts/styles/page--view.css
@@ -0,0 +1,19 @@
+body {
+  margin: 0;
+}
+
+main {
+  max-width: 1920px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.container {
+  max-width: 1200px;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 15px;
+  padding-right: 15px;
+}
+
+/*# sourceMappingURL=page--view.css.map */
diff --git a/layouts/styles/page--view.css.map b/layouts/styles/page--view.css.map
new file mode 100644
index 0000000..979a375
--- /dev/null
+++ b/layouts/styles/page--view.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["page--view.scss"],"names":[],"mappings":"AAAA;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA","file":"page--view.css"}
\ No newline at end of file
diff --git a/layouts/styles/page--view.scss b/layouts/styles/page--view.scss
new file mode 100644
index 0000000..31711d3
--- /dev/null
+++ b/layouts/styles/page--view.scss
@@ -0,0 +1,17 @@
+body {
+  margin: 0;
+}
+
+main {
+  max-width: 1920px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.container {
+  max-width: 1200px;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 15px;
+  padding-right: 15px;
+}
diff --git a/package-lock.json b/package-lock.json
index 6b19bc6..aa8a3bb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
 	"name": "create-block-dev-tool",
-	"version": "1.0.2",
+	"version": "1.0.3",
 	"lockfileVersion": 2,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "create-block-dev-tool",
-			"version": "1.0.2",
+			"version": "1.0.3",
 			"license": "ISC",
 			"dependencies": {
 				"browser-sync": "^2.27.9",
@@ -27,6 +27,9 @@
 			},
 			"bin": {
 				"component-dev": "server.js"
+			},
+			"devDependencies": {
+				"open": "^8.4.0"
 			}
 		},
 		"node_modules/@ampproject/remapping": {
@@ -3039,6 +3042,15 @@
 				"node": ">=0.8"
 			}
 		},
+		"node_modules/define-lazy-prop": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
+			"integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==",
+			"dev": true,
+			"engines": {
+				"node": ">=8"
+			}
+		},
 		"node_modules/define-properties": {
 			"version": "1.1.4",
 			"resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz",
@@ -8985,11 +8997,44 @@
 			}
 		},
 		"node_modules/open": {
-			"version": "6.4.0",
-			"resolved": "https://registry.npmjs.org/open/-/open-6.4.0.tgz",
-			"integrity": "sha512-IFenVPgF70fSm1keSd2iDBIDIBZkroLeuffXq+wKTzTJlBpesFWojV9lb8mzOfaAzM1sr7HQHuO0vtV0zYekGg==",
+			"version": "8.4.0",
+			"resolved": "https://registry.npmjs.org/open/-/open-8.4.0.tgz",
+			"integrity": "sha512-XgFPPM+B28FtCCgSb9I+s9szOC1vZRSwgWsRUA5ylIxRTgKozqjOCrVOqGsYABPYK5qnfqClxZTFBa8PKt2v6Q==",
+			"dev": true,
 			"dependencies": {
-				"is-wsl": "^1.1.0"
+				"define-lazy-prop": "^2.0.0",
+				"is-docker": "^2.1.1",
+				"is-wsl": "^2.2.0"
+			},
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/open/node_modules/is-docker": {
+			"version": "2.2.1",
+			"resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
+			"integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
+			"dev": true,
+			"bin": {
+				"is-docker": "cli.js"
+			},
+			"engines": {
+				"node": ">=8"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
+		"node_modules/open/node_modules/is-wsl": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
+			"integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
+			"dev": true,
+			"dependencies": {
+				"is-docker": "^2.0.0"
 			},
 			"engines": {
 				"node": ">=8"
@@ -14451,6 +14496,17 @@
 				"node": ">=6"
 			}
 		},
+		"node_modules/yo/node_modules/open": {
+			"version": "6.4.0",
+			"resolved": "https://registry.npmjs.org/open/-/open-6.4.0.tgz",
+			"integrity": "sha512-IFenVPgF70fSm1keSd2iDBIDIBZkroLeuffXq+wKTzTJlBpesFWojV9lb8mzOfaAzM1sr7HQHuO0vtV0zYekGg==",
+			"dependencies": {
+				"is-wsl": "^1.1.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
 		"node_modules/yo/node_modules/p-locate": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
@@ -17084,6 +17140,12 @@
 				}
 			}
 		},
+		"define-lazy-prop": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
+			"integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==",
+			"dev": true
+		},
 		"define-properties": {
 			"version": "1.1.4",
 			"resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz",
@@ -21696,11 +21758,31 @@
 			}
 		},
 		"open": {
-			"version": "6.4.0",
-			"resolved": "https://registry.npmjs.org/open/-/open-6.4.0.tgz",
-			"integrity": "sha512-IFenVPgF70fSm1keSd2iDBIDIBZkroLeuffXq+wKTzTJlBpesFWojV9lb8mzOfaAzM1sr7HQHuO0vtV0zYekGg==",
+			"version": "8.4.0",
+			"resolved": "https://registry.npmjs.org/open/-/open-8.4.0.tgz",
+			"integrity": "sha512-XgFPPM+B28FtCCgSb9I+s9szOC1vZRSwgWsRUA5ylIxRTgKozqjOCrVOqGsYABPYK5qnfqClxZTFBa8PKt2v6Q==",
+			"dev": true,
 			"requires": {
-				"is-wsl": "^1.1.0"
+				"define-lazy-prop": "^2.0.0",
+				"is-docker": "^2.1.1",
+				"is-wsl": "^2.2.0"
+			},
+			"dependencies": {
+				"is-docker": {
+					"version": "2.2.1",
+					"resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
+					"integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
+					"dev": true
+				},
+				"is-wsl": {
+					"version": "2.2.0",
+					"resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
+					"integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
+					"dev": true,
+					"requires": {
+						"is-docker": "^2.0.0"
+					}
+				}
 			}
 		},
 		"openurl": {
@@ -25835,6 +25917,14 @@
 						"path-exists": "^3.0.0"
 					}
 				},
+				"open": {
+					"version": "6.4.0",
+					"resolved": "https://registry.npmjs.org/open/-/open-6.4.0.tgz",
+					"integrity": "sha512-IFenVPgF70fSm1keSd2iDBIDIBZkroLeuffXq+wKTzTJlBpesFWojV9lb8mzOfaAzM1sr7HQHuO0vtV0zYekGg==",
+					"requires": {
+						"is-wsl": "^1.1.0"
+					}
+				},
 				"p-locate": {
 					"version": "3.0.0",
 					"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
diff --git a/package.json b/package.json
index 1c13f7e..f478df7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "create-block-dev-tool",
-	"version": "1.0.3",
+	"version": "1.0.3-a",
 	"scripts": {
 		"start": "component-dev",
 		"dev": "NODE_ENV=development node server.js",
@@ -28,5 +28,8 @@
 	},
 	"bin": {
 		"component-dev": "./server.js"
+	},
+	"devDependencies": {
+		"open": "^8.4.0"
 	}
 }
diff --git a/server.js b/server.js
index 3c18dee..4f8476e 100755
--- a/server.js
+++ b/server.js
@@ -13,13 +13,14 @@ import dartSass from 'sass';
 import gulpSass from 'gulp-sass';
 import sourcemaps from "gulp-sourcemaps";
 import fs from "fs/promises";
+import open from "open";
 
 /**
  * Constants
  */
 
-const isDev = config.has('mode') && config.get('mode') === 'development';
-const modulePath = 'node_modules/create-block-dev-tool/';
+const isDev = process.env.NODE_ENV === 'development'; // Check README file in case you get "missing files" error.
+const modulePath = isDev ? '' : 'node_modules/create-block-dev-tool/';
 const projectDir = modulePath;
 
 const sass = gulpSass(dartSass);
@@ -31,6 +32,7 @@ buildScriptFiles()
  * Init server
  */
 
+let port = 3000;
 const app = express();
 
 const hbs = create({
@@ -44,45 +46,38 @@ app.set('views', projectDir + 'layouts');
 const dataFiles = prepareListOfDataFiles(await fs.readdir('./data'));
 
 app.get('/', async (req, res) => {
-  let jsonFileName = (req.query.data) ? req.query.data : 'default';
-  if (!jsonFileName || !await fsExtra.exists(`./data/${jsonFileName}.json`)) {
-    jsonFileName = 'default';
+  let jsonFileName = req.query.data ? req.query.data : 'default';
+  const data = await getBlockConfigs(jsonFileName);
+
+  data.helpers = {
+    port: port,
+    include_partial: (path) => projectDir + path,
+    baseView: config.has('baseView') ? config.get('baseView') : 'container',
   }
 
-  const data = await fsExtra.readJson(`./data/${jsonFileName}.json`);
+  res.render('index', data);
+});
 
-  Object.assign(data, {
-    config: Object.assign(
-      JSON.parse(JSON.stringify(config)), // The entire config object.
-      {
-        projectDir,
-        activeDataFile: jsonFileName,
-        dataFiles: dataFiles.map((name) => {
-          return {
-            name,
-            active: jsonFileName === name,
-          };
-        }),
-        remToPx: config.has('remToPx') ? config.get('remToPx') : 16,
-      }
-    )
-  });
+app.get('/view/:baseView', async (req, res) => {
+  let jsonFileName = req.query.data ? req.query.data : 'default';
+  const data = await getBlockConfigs(jsonFileName);
 
   data.helpers = {
     include_partial: (path) => projectDir + path,
-    include_block_template: (path) => 'src/' + config.get('blockName') + '.template',
+    include_block_template: (path) => 'src/' + (config.has('blockName') ? config.get('blockName') : 'development') + '.template',
   }
 
-  const baseView = config.has('baseView') ? config.get('baseView') : 'container';
+  const baseView = req.params.baseView ?? 'container';
 
-  res.render(baseView, data);
+  res.render(baseView, data)
 });
 
 app.use(express.static('src'));
 app.use(express.static(projectDir + 'layouts'));
 
-const listener = app.listen(0, () => {
+const listener = app.listen(0, async () => {
   const PORT = listener.address().port;
+  await open(`http://localhost:${PORT}`);
 
   console.log(`The web server has started on port ${PORT}`);
 
@@ -98,7 +93,6 @@ const listener = app.listen(0, () => {
     return cb();
   }]));
 
-
   // bs.watch("src/**/*.js", function (event, file) {});
   // bs.watch("src/**/*.css", function (event, file) {});
 
@@ -106,9 +100,15 @@ const listener = app.listen(0, () => {
     browserSyncReload(bs, '', 'Template File Change: ' + file)
   });
 
+
   bs.init({
     proxy: `http://localhost:${PORT}`,
+    open: false
+  }, (err, bs) => {
+    port = bs.server._connectionKey.split(':').pop();
+    console.log(port)
   });
+
 });
 
 /**
@@ -160,3 +160,30 @@ function prepareListOfDataFiles(dataFiles) {
     })
     .sort();
 }
+
+async function getBlockConfigs(jsonFileName) {
+  if (!jsonFileName || !await fsExtra.exists(`./data/${jsonFileName}.json`)) {
+    jsonFileName = 'default';
+  }
+
+  const data = await fsExtra.readJson(`./data/${jsonFileName}.json`);
+
+  Object.assign(data, {
+    config: Object.assign(
+      JSON.parse(JSON.stringify(config)), // The entire config object.
+      {
+        projectDir,
+        activeDataFile: jsonFileName,
+        dataFiles: dataFiles.map((name) => {
+          return {
+            name,
+            active: jsonFileName === name,
+          };
+        }),
+        remToPx: config.has('remToPx') ? config.get('remToPx') : 16,
+      }
+    )
+  });
+
+  return data;
+}
