diff --git a/src/main/less/header.less b/src/main/less/header.less
index ae4218ca2..a7f2bc345 100644
--- a/src/main/less/header.less
+++ b/src/main/less/header.less
@@ -1,6 +1,6 @@
-.floating-navbar {
+.navbar {
   //border-top: 4px solid #4286f4;
-  background-color: #a5a5a5;
+  background-color: transparent;
   margin-bottom: 0px;
   border-bottom: 0;
   border-left: 0;
diff --git a/src/main/less/petclinic.less b/src/main/less/petclinic.less
index d017a4171..da924f443 100644
--- a/src/main/less/petclinic.less
+++ b/src/main/less/petclinic.less
@@ -19,7 +19,7 @@
 @spring-grey:       #838789;
 @spring-light-grey: #f1f1f1;
 
-@body-bg:                           @spring-light-grey;
+@body-bg:                           transparent;
 @text-color:                        @spring-brown;
 @link-color:                        @spring-dark-green;
 @link-hover-color:                  @spring-dark-green;
@@ -54,6 +54,19 @@
   color: @spring-light-grey;
 }
 
+.carousel {
+    height: 100vh;
+    width: 100%;
+    overflow:hidden;
+}
+.carousel .carousel-inner {
+    height:100%;    
+}
+.carousel .carousel-inner img {
+    display:block;
+    object-fit: cover;
+}
+
 .table-filter {
   background-color: @spring-brown;
   padding: 9px 12px;
diff --git a/src/main/resources/templates/welcome.html b/src/main/resources/templates/welcome.html
index d069b1385..c0c853200 100644
--- a/src/main/resources/templates/welcome.html
+++ b/src/main/resources/templates/welcome.html
@@ -12,7 +12,7 @@
 
     <!-- This is a test for a picture car. -->
 
-    <div class="container">  
+
   <div id="myCarousel" class="carousel slide" data-ride="carousel">
     <!-- Indicators -->
     <ol class="carousel-indicators">
@@ -46,7 +46,7 @@
       <span class="sr-only">Next</span>
     </a>
   </div>
-</div>
+
 
 
   </body>