diff --git a/frontend/src/components/Banner.vue b/frontend/src/components/Banner.vue
index 1080e0961d4025f3c821b023c5ea5756668cb7aa..b319cb932823e99028104e58f1fac9715b2d411b 100644
--- a/frontend/src/components/Banner.vue
+++ b/frontend/src/components/Banner.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="banner">
-   <Text>CaCaoCritics</Text>
+  <img class="logo" alt="Vue logo" src="../assets/logo.png" />
+  <h1 class="text" >CaCaoCritics</h1>
   </div>
 </template>
 
@@ -13,6 +14,22 @@ export default {
 <style>
 .banner {
   text-align: left;
-  background-color: #FF68AD;
+  background-color: #912F56;
+  flex-direction: row;
+  vertical-align: middle;
+  display: flex;
+
+}
+.logo {
+  max-width: 70px;
+  max-height: 70px;
+  margin-right: 20px;
+  margin-top: 15px;
+  margin-left: 20px;
+}
+.text {
+  width: 100px;
+  color: #ffffff;
+  margin-top: 35px;
 }
 </style>