diff --git a/src/components/ui/loader/loader.html b/src/components/ui/loader/loader.html
index 3728412..385fe16 100644
--- a/src/components/ui/loader/loader.html
+++ b/src/components/ui/loader/loader.html
@@ -1,4 +1,4 @@
-<div id="loader" class="loader-overlay">
+<div id="loader" class="loader-overlay is-first-launch">
     <div class="loader">
         <div class="loader__cube loader__cube--1"></div>
         <div class="loader__cube loader__cube--2"></div>
diff --git a/src/components/ui/loader/loader.scss b/src/components/ui/loader/loader.scss
index 6d33281..a5f8561 100644
--- a/src/components/ui/loader/loader.scss
+++ b/src/components/ui/loader/loader.scss
@@ -12,12 +12,19 @@
 
     transition: 0.4s ease;
 
+    &.is-first-launch {
+        // if loader is shown for the first time, we will
+        // remove opacity and hide the entire site contents
+        background: #f2efeb;
+    }
+
     &.is-active {
         opacity: 1;
         visibility: visible;
     }
 }
 
+
 .loader {
     position: absolute;
     top: 50%;
diff --git a/src/services/loader.js b/src/services/loader.js
index 5209698..8b90e36 100644
--- a/src/services/loader.js
+++ b/src/services/loader.js
@@ -3,14 +3,15 @@ let stack = 1;
 
 export default {
     show() {
-        if (++stack !== 1) {
+        if (++stack >= 0) {
             document.getElementById('loader').classList.add('is-active');
         }
     },
 
     hide() {
-        if (--stack === 0) {
-            document.getElementById('loader').classList.remove('is-active');
+        if (--stack <= 0) {
+            stack = 0;
+            document.getElementById('loader').classList.remove('is-active', 'is-first-launch');
         }
     }
 };