diff --git a/static/scss/_colors.scss b/static/scss/_colors.scss
index 79d736c..e3e6d0e 100644
--- a/static/scss/_colors.scss
+++ b/static/scss/_colors.scss
@@ -1,14 +1,14 @@
 // colors
 
-$dark_blue: #2b3990;
-$blue: #27aae1;
-$dark_brown: #414042;
-$brown: #58595b;
-$dark_gray: #808285;
-$gray: #a7a9ac;
-$light_gray: #d1d3d4;
-$lightest_gray: #efefef;
-$white_shade: #f9f9f9;
+$dark_blue: hsl(232, 54%, 37%);
+$blue: hsl(198, 76%, 52%);
+$dark_brown: hsl(270, 2%, 25%);
+$brown: hsl(220, 2%, 35%);
+$dark_gray: hsl(216, 2%, 51%);
+$gray: hsl(216, 3%, 66%);
+$light_gray: hsl(200, 3%, 83%);
+$lightest_gray: hsl(0, 0%, 94%);
+$white_shade: hsl(0, 0%, 98%);
 
 // font size
 $paragraph_size: 16px;
diff --git a/static/scss/home.scss b/static/scss/home.scss
index a262dd2..93106b3 100644
--- a/static/scss/home.scss
+++ b/static/scss/home.scss
@@ -30,7 +30,7 @@ mark {
 }
 
 .temp-intro,
-.temp-end {
+#footer {
 	background-color: $dark_brown;
 	display: flex;
 	justify-content: space-between;
@@ -100,7 +100,7 @@ mark {
 
 }
 
-.temp-end {
+#footer {
 
 	@media screen and (max-width: 1024px) {
 		display: block
diff --git a/templates/home.html b/templates/home.html
index 41678b5..6629e05 100644
--- a/templates/home.html
+++ b/templates/home.html
@@ -386,10 +386,10 @@
 			</ul>
 		</div>
 	</section>
-	<div class="temp-end">
+	<footer id="footer">
 		<small>copyright &copy; 2018 <mark>Webtrigon</mark></small>
 		<small>Powered By <mark>Webtrigon Mini</mark></small>
-	</div>
+	</footer>
 	<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 	<script src="{% static 'OwlCarousel-plugins/owl.carousel.min.js' %}"></script>
 	<script src="{% static 'js/home.js' %}"></script>