diff --git a/src/app/content/content.component.html b/src/app/content/content.component.html
index a17c82e..d334f80 100644
--- a/src/app/content/content.component.html
+++ b/src/app/content/content.component.html
@@ -1,2 +1,3 @@
+<div class="background-image"></div>
 <app-header></app-header>
 <app-image-container></app-image-container>
\ No newline at end of file
diff --git a/src/app/content/content.component.scss b/src/app/content/content.component.scss
index 07eaf92..7290b68 100644
--- a/src/app/content/content.component.scss
+++ b/src/app/content/content.component.scss
@@ -1,3 +1,17 @@
 :host {
     width: 100%;
-}
\ No newline at end of file
+}
+
+.background-image { 
+    background-image: url("/assets/images/BG.jpg");
+    background-size: cover;
+    -webkit-background-size: cover;
+    display: block;
+    filter: blur(15px);
+    -webkit-filter: blur(15px);
+    height: 100%;
+    left: 0;
+    position: fixed;
+    right: 0;
+    /* z-index: 1; */
+  }
\ No newline at end of file
diff --git a/src/app/side-bar/side-bar.component.html b/src/app/side-bar/side-bar.component.html
index 9298235..c92774c 100644
--- a/src/app/side-bar/side-bar.component.html
+++ b/src/app/side-bar/side-bar.component.html
@@ -1,86 +1,84 @@
-<div class="wrapper">
-  <nav id="sidebar" class="active">
-    <div class="sidebar-header">
-      <button type="button" id="sidebarCollapse" class="btn btn-info">
-        <i class="fas fa-align-justify"></i>
-      </button>
-      <h3 class="logotext">Microbot</h3>
-      <!-- <strong>MB</strong> -->
-    </div>
+<nav id="sidebar" class="active">
+  <div class="sidebar-header">
+    <button type="button" id="sidebarCollapse" class="btn btn-info">
+      <i class="fas fa-align-justify"></i>
+    </button>
+    <h3 class="logotext">Microbot</h3>
+    <!-- <strong>MB</strong> -->
+  </div>
 
-    <ul class="list-unstyled components">
-      <li *ngFor="let tab of tabsData"
-          [ngClass]="{active: tab.activeClass}">
-        <a [routerLink]="tab.href">
-          <i [ngClass]="['fas', tab.tabImage]"></i>
-          <span class="hideable hide">{{tab.tabText}}</span>
-        </a>
-        <ul 
-          class="collapse list-unstyled" 
-          id="pageSubmenu"
-          *ngIf="tab.subList">
-          <li>
-            <a href="#">Repo</a>
-          </li>
-          <li>
-            <a href="#">Issues</a>
-          </li>
-          <li>
-            <a href="#">Admin</a>
-          </li>
-        </ul>
-      </li>
-      <!-- <app-side-bar-tab
-        *ngFor="let tab of tabsData"
-        [tab]="tab">
-      </app-side-bar-tab> -->
-      <!-- <li class="active">
-        <a href="#homeSubmenu">
-          <i class="fas fa-home"></i>
-          <span class="hideable hide">Home</span>
-        </a>
-      </li>
-      <li>
-        <a href="#">
-          <i class="fas fa-briefcase"></i>
-          <span class="hideable hide">About</span>
-        </a>
-      </li>
-      <li>
-        <a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
-          <i class="fas fa-copy"></i>
-          <span class="hideable hide">Tasks</span>
-        </a>
-        <ul class="collapse list-unstyled" id="pageSubmenu">
-          <li>
-            <a href="#">Repo</a>
-          </li>
-          <li>
-            <a href="#">Issues</a>
-          </li>
-          <li>
-            <a href="#">Admin</a>
-          </li>
-        </ul>
-      </li>
-      <li>
-        <a href="#">
-          <i class="fas fa-image"></i>
-          <span class="hideable hide">Favorites</span>
-        </a>
-      </li>
-      <li>
-        <a href="#">
-          <i class="fas fa-question"></i>
-          <span class="hideable hide">FAQ</span>
-        </a>
-      </li>
-      <li>
-        <a href="#">
-          <i class="fas fa-paper-plane"></i>
-          <span class="hideable hide">Contact</span>
-        </a>
-      </li> -->
-    </ul>
-  </nav>
-</div>
+  <ul class="list-unstyled components">
+    <li *ngFor="let tab of tabsData"
+        [ngClass]="{active: tab.activeClass}">
+      <a [routerLink]="tab.href">
+        <i [ngClass]="['fas', tab.tabImage]"></i>
+        <span class="hideable hide">{{tab.tabText}}</span>
+      </a>
+      <ul 
+        class="collapse list-unstyled" 
+        id="pageSubmenu"
+        *ngIf="tab.subList">
+        <li>
+          <a href="#">Repo</a>
+        </li>
+        <li>
+          <a href="#">Issues</a>
+        </li>
+        <li>
+          <a href="#">Admin</a>
+        </li>
+      </ul>
+    </li>
+    <!-- <app-side-bar-tab
+      *ngFor="let tab of tabsData"
+      [tab]="tab">
+    </app-side-bar-tab> -->
+    <!-- <li class="active">
+      <a href="#homeSubmenu">
+        <i class="fas fa-home"></i>
+        <span class="hideable hide">Home</span>
+      </a>
+    </li>
+    <li>
+      <a href="#">
+        <i class="fas fa-briefcase"></i>
+        <span class="hideable hide">About</span>
+      </a>
+    </li>
+    <li>
+      <a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
+        <i class="fas fa-copy"></i>
+        <span class="hideable hide">Tasks</span>
+      </a>
+      <ul class="collapse list-unstyled" id="pageSubmenu">
+        <li>
+          <a href="#">Repo</a>
+        </li>
+        <li>
+          <a href="#">Issues</a>
+        </li>
+        <li>
+          <a href="#">Admin</a>
+        </li>
+      </ul>
+    </li>
+    <li>
+      <a href="#">
+        <i class="fas fa-image"></i>
+        <span class="hideable hide">Favorites</span>
+      </a>
+    </li>
+    <li>
+      <a href="#">
+        <i class="fas fa-question"></i>
+        <span class="hideable hide">FAQ</span>
+      </a>
+    </li>
+    <li>
+      <a href="#">
+        <i class="fas fa-paper-plane"></i>
+        <span class="hideable hide">Contact</span>
+      </a>
+    </li> -->
+  </ul>
+</nav>
diff --git a/src/app/side-bar/side-bar.component.scss b/src/app/side-bar/side-bar.component.scss
index a2c89ae..e236c75 100644
--- a/src/app/side-bar/side-bar.component.scss
+++ b/src/app/side-bar/side-bar.component.scss
@@ -4,6 +4,7 @@ $themeColor-Dark:#E3E2DF;
 $theme-font: verdana, sans-serif;
 // $theme-supplementer: #f39c12;
 $theme-supplementer: #5D001E;
+$theme-supplementer-transparent: rgba(93,0,30,0.2);
 
 // app-root {
 //     font-family: 'Poppins', sans-serif;
@@ -11,7 +12,8 @@ $theme-supplementer: #5D001E;
 // }
 
 :host {
-    background: $theme-supplementer;
+    background: $theme-supplementer-transparent;
+    z-index: 20;
 }
 
 p {
@@ -71,7 +73,7 @@ span {
 #sidebar {
     min-width: 250px;
     max-width: 250px;
-    background: $theme-supplementer;
+    background: $theme-supplementer-transparent;
     color: $themeColor-Dark;
     transition: all 0.3s;
 }
diff --git a/src/styles.css b/src/styles.css
index 90d4ee0..e69de29 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1 +0,0 @@
-/* You can add global styles to this file, and also import other style files */