diff --git a/css/projects.css b/css/projects.css
index 7fb77ea..3f60938 100644
--- a/css/projects.css
+++ b/css/projects.css
@@ -164,13 +164,73 @@ header {
 /* Index
 ================ */
 
-.index_start {
-    background-image: url(/images/backgroud_img/index_bg.jpg);
+.hero-image {
+    background: url(images/background_img/index_bg.jpg) no-repeat center;
     background-size: cover;
-    background-position: center;
-	top: 0px;
+    background-color: #f9f9ed  ;
+    height: 500px;
+    position: relative;
+    margin-top: 100px;
 }
 
+.hero-text {
+    justify-content: center;
+}
+
+.home-about-textbox {
+    background-color: #232323;
+    padding: 10em 20%;
+    width: 100%;
+    outline: 2px solid#f9f9ed;
+    outline-offset: -2.5em;
+    color: #f9f9ed;
+    position: relative;
+    text-align: justify;
+}
+
+.home-about-textbox h1 {
+    color: #f9f9ed;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    top: 0.75em;
+    background: #232323;
+    padding: 0 0.145em;
+}
+
+@media (min-width: 25rem) {
+    h1 {
+        font-size: 2rem;
+    }
+
+    .home-about-textbox h1 {
+        top: 0.6em;
+    }
+}
+
+@media (min-width: 60rem) {
+    h1 {
+        font-size: 2.5rem;
+    }
+
+    .home-about {
+        background-repeat: no-repeat;
+    }
+
+    .home-about-textbox {
+        width: 100%;
+        outline-offset: -3.75em;
+        /* margin-left: -2.5%; */
+        text-align: left;
+        box-shadow: 0 0 4em 0 rgba(0, 0, 0, 0.3);
+    }
+
+    .home-about-textbox h1 {
+        top: 0.75em;
+        left: 6rem;
+        transform: translateX(0);
+    }
+}
 
 /* Collection 
 ================*/
@@ -179,6 +239,7 @@ div.collection_container {
     clear: both;
     display: flex;
     flex-wrap: wrap;
+    margin-top: 50px;
 }
 
 div.collection {
@@ -222,11 +283,10 @@ div.collection div.col-desc {
     width: 220px;
     height: 220px;
     border-radius: 50%;
-    /*border: 2px solid #f9f9ed; */
 }
 
 .col-image:hover{
-    filter: blur(1px);
+    filter: blur(3px);
     filter: brightness(50%);
     cursor: pointer;
 }
diff --git a/css/styles.css b/css/styles.css
index c15ad3b..e44263f 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -108,60 +108,7 @@ p:last-of-type {
 /* hero-home
 =================== */
 
-.home-about-textbox {
-    background-color: #232323;
-    padding: 10em 20%;
-    width: 100%;
-    outline: 2px solid#f9f9ed;
-    outline-offset: -2.5em;
-    color: #f9f9ed;
-    position: relative;
-    text-align: justify;
-}
 
-.home-about-textbox h1 {
-    color: #f9f9ed;
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
-    top: 0.75em;
-    background: #232323;
-    padding: 0 0.145em;
-}
-
-@media (min-width: 25rem) {
-    h1 {
-        font-size: 2rem;
-    }
-
-    .home-about-textbox h1 {
-        top: 0.6em;
-    }
-}
-
-@media (min-width: 60rem) {
-    h1 {
-        font-size: 2.5rem;
-    }
-
-    .home-about {
-        background-repeat: no-repeat;
-    }
-
-    .home-about-textbox {
-        width: 100%;
-        outline-offset: -3.75em;
-        /* margin-left: -2.5%; */
-        text-align: left;
-        box-shadow: 0 0 4em 0 rgba(0, 0, 0, 0.3);
-    }
-
-    .home-about-textbox h1 {
-        top: 0.75em;
-        left: 6rem;
-        transform: translateX(0);
-    }
-}
 
 /* portfolio
 =================== */
diff --git a/index.php b/index.php
index 8cc6838..2d2c955 100644
--- a/index.php
+++ b/index.php
@@ -1,9 +1,7 @@
 <?php include('header.tpl'); ?>
 
-<div class="index_start">
-	<div>
-		<img src="images\logo_button\title_ivory.png"></img>
-	</div>
+<div class="hero-image">
+	Logo
 </div>
 
 <div class="container">
@@ -102,5 +100,4 @@
     <p><a style="color: #f9f9ed; text-decoration: none;" href="https://www.instagram.com/bricabracomania_metalworks/">Check out our instagram page</a></p>
 	<div id="ig_container"><!-- instagram posts will be inserted here --></div>
 </div>
-
-<?php include('footer.tpl'); ?>
+<?php include('footer.tpl'); ?>
\ No newline at end of file