diff --git a/README.md b/README.md
index 26e12ba..87728ec 100644
--- a/README.md
+++ b/README.md
@@ -26,7 +26,7 @@ You will find all the block files in `/src` folder.
 /src/styles/
     *.scss
     
-/src/template.hbs
+/src/*.template.hbs
 ```
 
 # Block rules
@@ -51,7 +51,12 @@ how the data is stored. Don't change or edit these files - use the data as it is
 There are multiple data sources since the block can be reused in different situations with different data. We have to
 make sure that the block is always rendered properly.
 
-## Class Naming Convention
+### Static Media Files
+
+Use the `/src/images` folder in case you need to upload images or video files to the template. These files will be
+available by the next URL: http://localhost:3000/images/${filename}
+
+### Class Naming Convention
 
 Use BEM naming system for class names: http://getbem.com/naming/
 
@@ -90,7 +95,26 @@ The lib is included in the project and ready for use. Test with `window.Swiper`
 
 ## Development Toolbar
 
-Use development toolbar to switch between data sources and test responsiveness of block.
+Use development toolbar to switch between data sources.
+
+## Responsiveness
+
+Make sure the layout is rendered correctly on all standard breakpoint size:
+
+1. 1920px in width...
+2. 1680px
+3. 1440px
+4. 1360px
+5. 1280px
+6. 1024px
+7. 980px
+8. 768px
+9. 600px
+10. 414px
+11. 375px
+
+If you follow the rules of REM unit - your layout must be "elastic" and most of the breakpoints should be rendered
+properly.
 
 ## Pixel Perfect Test
 
diff --git a/config/default.cjs b/config/default.cjs
index e9a946f..c20c4ad 100644
--- a/config/default.cjs
+++ b/config/default.cjs
@@ -1,4 +1,4 @@
 module.exports = {
-    "mode": "production",
-    "cssUrl": "https://",
+    cssUrl: "https://",
+    blockName: "template",
 }
diff --git a/config/development.cjs b/config/development.cjs
index d246345..8c9e1cb 100644
--- a/config/development.cjs
+++ b/config/development.cjs
@@ -1,4 +1,5 @@
 module.exports = {
-    "mode": "development",
-    "cssUrl": "https://",
+    mode: "development",
+    cssUrl: "https://",
+    blockName: "template",
 }
diff --git a/layouts/page-container.hbs b/layouts/page-container.hbs
index e58dd23..e19ea35 100644
--- a/layouts/page-container.hbs
+++ b/layouts/page-container.hbs
@@ -8,7 +8,7 @@
 
 <main>
     <div class="container">
-        {{> src/template }}
+        {{> (include_block_template) }}
     </div>
 </main>
 
diff --git a/layouts/page.hbs b/layouts/page.hbs
index b77c1ee..b99b842 100644
--- a/layouts/page.hbs
+++ b/layouts/page.hbs
@@ -7,7 +7,7 @@
 {{> (include_partial "layouts/partials/toolbar") }}
 
 <main>
-    {{> src/template }}
+    {{> (include_block_template) }}
 </main>
 
 {{> (include_partial "layouts/partials/scripts") }}
diff --git a/layouts/partials/head.hbs b/layouts/partials/head.hbs
index 5af5aab..f5408b7 100644
--- a/layouts/partials/head.hbs
+++ b/layouts/partials/head.hbs
@@ -4,6 +4,6 @@
 
     <link rel="stylesheet" href="{{ config.cssUrl }}">
     <link rel="stylesheet" href="styles/page--main.css">
-    <link rel="stylesheet" href="styles/template.min.css">
+    <link rel="stylesheet" href="styles/{{ config.blockName }}.min.css">
     <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 7c814e9..02942e2 100644
--- a/layouts/partials/scripts.hbs
+++ b/layouts/partials/scripts.hbs
@@ -1,4 +1,4 @@
 <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
 <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
 <script src="scripts/page--toolbar.js"></script>
-<script src="scripts/template.min.js"></script>
\ No newline at end of file
+<script src="scripts/{{ config.blockName }}.min.js"></script>
\ No newline at end of file
diff --git a/server.js b/server.js
index 257c340..18c5670 100755
--- a/server.js
+++ b/server.js
@@ -58,12 +58,14 @@ app.get('/', async (req, res) => {
                     active: jsonFileName === name,
                 };
             }),
-            cssUrl: config.get('cssUrl')
+            cssUrl: config.get('cssUrl'),
+            blockName: config.get('blockName')
         }
     });
 
     data.helpers = {
         include_partial: (path) => projectDir + path,
+        include_block_template: (path) => 'src/' + config.get('blockName') + '.template',
     }
 
     res.render('page-container', data);
diff --git a/src/template.hbs b/src/template.hbs
deleted file mode 100644
index 2f085bb..0000000
--- a/src/template.hbs
+++ /dev/null
@@ -1,13 +0,0 @@
-<section class="template">
-    <header class="template__header">
-        <h1 class="template__header-heading">Ready!</h1>
-    </header>
-
-    <div class="template__content">
-        <p>
-            Review the `/data` folder with JSON data files.<br>
-            Don't change data JSON files - use the data as it is.
-        </p>
-        <p>Build the layout based on provided data structure.</p>
-    </div>
-</section>
\ No newline at end of file
diff --git a/src/template.template.hbs b/src/template.template.hbs
new file mode 100644
index 0000000..cf91e69
--- /dev/null
+++ b/src/template.template.hbs
@@ -0,0 +1,70 @@
+<section class="template">
+
+    {{!
+    Remove Everything Below:
+    }}
+
+    <style>
+        code {
+            background-color: #eee;
+            color: #333;
+            padding: 1rem 1.5rem;
+            border: 2px solid #d8d8d8;
+            display: inline-block;
+            border-radius: 2px;
+            font-size: 14px;
+        }
+    </style>
+
+    <header class="template__header">
+        <h1 class="template__header-heading">Ready!</h1>
+    </header>
+
+    <div class="template__content">
+        <p>
+            Review the `/data` folder with JSON data files.<br>
+            Don't change data JSON files - use the data as it is.
+        </p>
+        <p>Build the layout based on provided data structure.</p>
+
+        <br><br>
+        <hr>
+
+        <h2>Image Example</h2>
+        <div>
+            <img src="images/demo.jpeg" alt="">
+            <br>
+            <code>
+                &lt;img src=&quot;images/demo.jpeg&quot; alt=&quot;&quot;&gt;
+            </code>
+        </div>
+
+        <br><br>
+        <hr>
+
+        <h2>Available Buttons Styling</h2>
+
+        <div>
+            <a href="#" class="btn btn--primary">Primary</a>
+            <br>
+            <code>
+                &lt;a href=&quot;#&quot; class=&quot;btn btn--primary&quot;&gt;Primary&lt;/a&gt;
+            </code>
+        </div>
+
+        <br>
+
+        <div>
+            <a href="#" class="btn btn--secondary">Secondary</a>
+            <br>
+            <code>
+                &lt;a href=&quot;#&quot; class=&quot;btn btn--secondary&quot;&gt;Secondary&lt;/a&gt;
+            </code>
+        </div>
+    </div>
+
+    {{!
+    Remove END
+    }}
+
+</section>
\ No newline at end of file