diff --git a/public/css/app.css b/public/css/app.css
index 79e6c7bb..f8a31967 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -8072,6 +8072,10 @@ video {
   height: 2rem;
 }
 
+.h-9 {
+  height: 2.75rem;
+}
+
 .h-10 {
   height: 2.5rem;
 }
@@ -8112,6 +8116,18 @@ video {
   height: 16rem;
 }
 
+.h-80 {
+  height: 20rem;
+}
+
+.h-100 {
+  height: 25rem;
+}
+
+.h-120 {
+  height: 30rem;
+}
+
 .h-auto {
   height: auto;
 }
@@ -8168,6 +8184,10 @@ video {
   height: 1.75rem;
 }
 
+.h-8\.5 {
+  height: 2.625rem;
+}
+
 .text-xs {
   font-size: 0.75rem;
 }
@@ -19785,6 +19805,10 @@ video {
   width: 2rem;
 }
 
+.w-9 {
+  width: 2.75rem;
+}
+
 .w-10 {
   width: 2.5rem;
 }
@@ -19825,6 +19849,18 @@ video {
   width: 16rem;
 }
 
+.w-80 {
+  width: 20rem;
+}
+
+.w-100 {
+  width: 25rem;
+}
+
+.w-120 {
+  width: 30rem;
+}
+
 .w-auto {
   width: auto;
 }
@@ -22599,6 +22635,72 @@ button:focus, input:focus {
   outline: 0;
 }
 
+.chat-window {
+  height: auto;
+  border-top-left-radius: 0.6rem;
+  border-top-right-radius: 0.6rem;
+  --bg-opacity: 1;
+  background-color: #fefefe;
+  background-color: rgba(254, 254, 254, var(--bg-opacity));
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  width: 20rem;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}
+
+.chat-header {
+  --bg-opacity: 1;
+  background-color: #219fa6;
+  background-color: rgba(33, 159, 166, var(--bg-opacity));
+  height: 2rem;
+  width: 100%;
+  display: flex;
+  border-top-left-radius: 0.6rem;
+  border-top-right-radius: 0.6rem;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  margin-bottom: 1rem;
+}
+
+.chat-container {
+  height: 25rem;
+  display: flex;
+  width: 100%;
+  --bg-opacity: 1;
+  background-color: #fefefe;
+  background-color: rgba(254, 254, 254, var(--bg-opacity));
+}
+
+.chat-footer {
+  --bg-opacity: 1;
+  background-color: #219fa6;
+  background-color: rgba(33, 159, 166, var(--bg-opacity));
+  flex-direction: row;
+  justify-content: center;
+  padding: 0.25rem;
+  border-top-left-radius: 0.9rem;
+  border-top-right-radius: 0.9rem;
+  width: 100%;
+}
+
+.chat-input {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  box-sizing: border-box;
+  font-size: 0.875rem;
+  --bg-opacity: 1;
+  background-color: #fefefe;
+  background-color: rgba(254, 254, 254, var(--bg-opacity));
+  border-width: 1px;
+  --border-opacity: 1;
+  border-color: #b8b8b8;
+  border-color: rgba(184, 184, 184, var(--border-opacity));
+  border-radius: 9999px;
+  width: 100%;
+}
+
 .btn {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
@@ -22878,6 +22980,38 @@ button:focus, input:focus {
   padding-right: 0.75rem;
 }
 
+.smiley {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+  width: 2rem;
+}
+
+.send {
+  --bg-opacity: 1;
+  background-color: #393d3f;
+  background-color: rgba(57, 61, 63, var(--bg-opacity));
+  border-radius: 9999px;
+  height: 2rem;
+  width: 2.5rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.user-picture {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.user-name {
+  margin-top: auto;
+  margin-bottom: auto;
+  display: flex;
+  --text-opacity: 1;
+  color: #fefefe;
+  color: rgba(254, 254, 254, var(--text-opacity));
+}
+
 .icon {
   width: 2rem;
   height: 1.75rem;
@@ -30450,6 +30584,10 @@ button:focus, input:focus {
     height: 2rem;
   }
 
+  .sm\:h-9 {
+    height: 2.75rem;
+  }
+
   .sm\:h-10 {
     height: 2.5rem;
   }
@@ -30490,6 +30628,18 @@ button:focus, input:focus {
     height: 16rem;
   }
 
+  .sm\:h-80 {
+    height: 20rem;
+  }
+
+  .sm\:h-100 {
+    height: 25rem;
+  }
+
+  .sm\:h-120 {
+    height: 30rem;
+  }
+
   .sm\:h-auto {
     height: auto;
   }
@@ -30546,6 +30696,10 @@ button:focus, input:focus {
     height: 1.75rem;
   }
 
+  .sm\:h-8\.5 {
+    height: 2.625rem;
+  }
+
   .sm\:text-xs {
     font-size: 0.75rem;
   }
@@ -42163,6 +42317,10 @@ button:focus, input:focus {
     width: 2rem;
   }
 
+  .sm\:w-9 {
+    width: 2.75rem;
+  }
+
   .sm\:w-10 {
     width: 2.5rem;
   }
@@ -42203,6 +42361,18 @@ button:focus, input:focus {
     width: 16rem;
   }
 
+  .sm\:w-80 {
+    width: 20rem;
+  }
+
+  .sm\:w-100 {
+    width: 25rem;
+  }
+
+  .sm\:w-120 {
+    width: 30rem;
+  }
+
   .sm\:w-auto {
     width: auto;
   }
@@ -52365,6 +52535,10 @@ button:focus, input:focus {
     height: 2rem;
   }
 
+  .md\:h-9 {
+    height: 2.75rem;
+  }
+
   .md\:h-10 {
     height: 2.5rem;
   }
@@ -52405,6 +52579,18 @@ button:focus, input:focus {
     height: 16rem;
   }
 
+  .md\:h-80 {
+    height: 20rem;
+  }
+
+  .md\:h-100 {
+    height: 25rem;
+  }
+
+  .md\:h-120 {
+    height: 30rem;
+  }
+
   .md\:h-auto {
     height: auto;
   }
@@ -52461,6 +52647,10 @@ button:focus, input:focus {
     height: 1.75rem;
   }
 
+  .md\:h-8\.5 {
+    height: 2.625rem;
+  }
+
   .md\:text-xs {
     font-size: 0.75rem;
   }
@@ -64078,6 +64268,10 @@ button:focus, input:focus {
     width: 2rem;
   }
 
+  .md\:w-9 {
+    width: 2.75rem;
+  }
+
   .md\:w-10 {
     width: 2.5rem;
   }
@@ -64118,6 +64312,18 @@ button:focus, input:focus {
     width: 16rem;
   }
 
+  .md\:w-80 {
+    width: 20rem;
+  }
+
+  .md\:w-100 {
+    width: 25rem;
+  }
+
+  .md\:w-120 {
+    width: 30rem;
+  }
+
   .md\:w-auto {
     width: auto;
   }
@@ -74280,6 +74486,10 @@ button:focus, input:focus {
     height: 2rem;
   }
 
+  .lg\:h-9 {
+    height: 2.75rem;
+  }
+
   .lg\:h-10 {
     height: 2.5rem;
   }
@@ -74320,6 +74530,18 @@ button:focus, input:focus {
     height: 16rem;
   }
 
+  .lg\:h-80 {
+    height: 20rem;
+  }
+
+  .lg\:h-100 {
+    height: 25rem;
+  }
+
+  .lg\:h-120 {
+    height: 30rem;
+  }
+
   .lg\:h-auto {
     height: auto;
   }
@@ -74376,6 +74598,10 @@ button:focus, input:focus {
     height: 1.75rem;
   }
 
+  .lg\:h-8\.5 {
+    height: 2.625rem;
+  }
+
   .lg\:text-xs {
     font-size: 0.75rem;
   }
@@ -85993,6 +86219,10 @@ button:focus, input:focus {
     width: 2rem;
   }
 
+  .lg\:w-9 {
+    width: 2.75rem;
+  }
+
   .lg\:w-10 {
     width: 2.5rem;
   }
@@ -86033,6 +86263,18 @@ button:focus, input:focus {
     width: 16rem;
   }
 
+  .lg\:w-80 {
+    width: 20rem;
+  }
+
+  .lg\:w-100 {
+    width: 25rem;
+  }
+
+  .lg\:w-120 {
+    width: 30rem;
+  }
+
   .lg\:w-auto {
     width: auto;
   }
@@ -96195,6 +96437,10 @@ button:focus, input:focus {
     height: 2rem;
   }
 
+  .xl\:h-9 {
+    height: 2.75rem;
+  }
+
   .xl\:h-10 {
     height: 2.5rem;
   }
@@ -96235,6 +96481,18 @@ button:focus, input:focus {
     height: 16rem;
   }
 
+  .xl\:h-80 {
+    height: 20rem;
+  }
+
+  .xl\:h-100 {
+    height: 25rem;
+  }
+
+  .xl\:h-120 {
+    height: 30rem;
+  }
+
   .xl\:h-auto {
     height: auto;
   }
@@ -96291,6 +96549,10 @@ button:focus, input:focus {
     height: 1.75rem;
   }
 
+  .xl\:h-8\.5 {
+    height: 2.625rem;
+  }
+
   .xl\:text-xs {
     font-size: 0.75rem;
   }
@@ -107908,6 +108170,10 @@ button:focus, input:focus {
     width: 2rem;
   }
 
+  .xl\:w-9 {
+    width: 2.75rem;
+  }
+
   .xl\:w-10 {
     width: 2.5rem;
   }
@@ -107948,6 +108214,18 @@ button:focus, input:focus {
     width: 16rem;
   }
 
+  .xl\:w-80 {
+    width: 20rem;
+  }
+
+  .xl\:w-100 {
+    width: 25rem;
+  }
+
+  .xl\:w-120 {
+    width: 30rem;
+  }
+
   .xl\:w-auto {
     width: auto;
   }
diff --git a/public/vendor/courier/icons/close-cultured-100.svg b/public/vendor/courier/icons/close-cultured-100.svg
new file mode 100644
index 00000000..d1abcafc
--- /dev/null
+++ b/public/vendor/courier/icons/close-cultured-100.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fefefe" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
\ No newline at end of file
diff --git a/public/vendor/courier/icons/minus-cultured-100.svg b/public/vendor/courier/icons/minus-cultured-100.svg
new file mode 100644
index 00000000..68e3c972
--- /dev/null
+++ b/public/vendor/courier/icons/minus-cultured-100.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fefefe" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-minus"><line x1="5" y1="12" x2="19" y2="12"></line></svg>
\ No newline at end of file
diff --git a/public/vendor/courier/icons/search.svg b/public/vendor/courier/icons/search-cultured-100.svg
similarity index 100%
rename from public/vendor/courier/icons/search.svg
rename to public/vendor/courier/icons/search-cultured-100.svg
diff --git a/public/vendor/courier/icons/send-cultured-100.svg b/public/vendor/courier/icons/send-cultured-100.svg
new file mode 100644
index 00000000..cd06f98e
--- /dev/null
+++ b/public/vendor/courier/icons/send-cultured-100.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<line fill="none" stroke="#F5F5F5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" x1="19.938" y1="4.063" x2="9.544" y2="14.455"/>
+<polygon fill="none" stroke="#F5F5F5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" points="19.938,4.063 
+	13.323,22.959 9.544,14.455 1.04,10.677 "/>
+</svg>
diff --git a/public/vendor/courier/icons/send2-cultured-100.svg b/public/vendor/courier/icons/send2-cultured-100.svg
new file mode 100644
index 00000000..1670e834
--- /dev/null
+++ b/public/vendor/courier/icons/send2-cultured-100.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<line fill="none" stroke="#F5F5F5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" x1="22.525" y1="12.139" x2="6.971" y2="12.161"/>
+<polygon fill="none" stroke="#F5F5F5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" points="22.525,12.139 
+	3.449,21.358 6.971,12.161 3.42,2.975 "/>
+</svg>
diff --git a/public/vendor/courier/icons/smiley-cultured-100.svg b/public/vendor/courier/icons/smiley-cultured-100.svg
new file mode 100644
index 00000000..52a962b7
--- /dev/null
+++ b/public/vendor/courier/icons/smiley-cultured-100.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fefefe" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-smile"><circle cx="12" cy="12" r="10"></circle><path d="M8 14s1.5 2 4 2 4-2 4-2"></path><line x1="9" y1="9" x2="9.01" y2="9"></line><line x1="15" y1="9" x2="15.01" y2="9"></line></svg>
\ No newline at end of file
diff --git a/public/vendor/courier/icons/user-cultured-100.svg b/public/vendor/courier/icons/user-cultured-100.svg
new file mode 100644
index 00000000..e9523610
--- /dev/null
+++ b/public/vendor/courier/icons/user-cultured-100.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fefefe" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
\ No newline at end of file
diff --git a/resources/assets/icons/close-cultured-100.svg b/resources/assets/icons/close-cultured-100.svg
new file mode 100644
index 00000000..d1abcafc
--- /dev/null
+++ b/resources/assets/icons/close-cultured-100.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fefefe" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
\ No newline at end of file
diff --git a/resources/assets/icons/minus-cultured-100.svg b/resources/assets/icons/minus-cultured-100.svg
new file mode 100644
index 00000000..68e3c972
--- /dev/null
+++ b/resources/assets/icons/minus-cultured-100.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fefefe" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-minus"><line x1="5" y1="12" x2="19" y2="12"></line></svg>
\ No newline at end of file
diff --git a/resources/assets/icons/search.svg b/resources/assets/icons/search-cultured-100.svg
similarity index 100%
rename from resources/assets/icons/search.svg
rename to resources/assets/icons/search-cultured-100.svg
diff --git a/resources/assets/icons/send-cultured-100.svg b/resources/assets/icons/send-cultured-100.svg
new file mode 100644
index 00000000..cd06f98e
--- /dev/null
+++ b/resources/assets/icons/send-cultured-100.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<line fill="none" stroke="#F5F5F5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" x1="19.938" y1="4.063" x2="9.544" y2="14.455"/>
+<polygon fill="none" stroke="#F5F5F5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" points="19.938,4.063 
+	13.323,22.959 9.544,14.455 1.04,10.677 "/>
+</svg>
diff --git a/resources/assets/icons/send2-cultured-100.svg b/resources/assets/icons/send2-cultured-100.svg
new file mode 100644
index 00000000..1670e834
--- /dev/null
+++ b/resources/assets/icons/send2-cultured-100.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<line fill="none" stroke="#F5F5F5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" x1="22.525" y1="12.139" x2="6.971" y2="12.161"/>
+<polygon fill="none" stroke="#F5F5F5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" points="22.525,12.139 
+	3.449,21.358 6.971,12.161 3.42,2.975 "/>
+</svg>
diff --git a/resources/assets/icons/smiley-cultured-100.svg b/resources/assets/icons/smiley-cultured-100.svg
new file mode 100644
index 00000000..52a962b7
--- /dev/null
+++ b/resources/assets/icons/smiley-cultured-100.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fefefe" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-smile"><circle cx="12" cy="12" r="10"></circle><path d="M8 14s1.5 2 4 2 4-2 4-2"></path><line x1="9" y1="9" x2="9.01" y2="9"></line><line x1="15" y1="9" x2="15.01" y2="9"></line></svg>
\ No newline at end of file
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
index 03740c53..c1644f15 100644
--- a/resources/sass/app.scss
+++ b/resources/sass/app.scss
@@ -4,88 +4,109 @@
 
 @tailwind utilities;
 
+
 button:focus, input:focus {
     @apply outline-none;
 }
 
-.btn{
+.chat-window {
+    @apply h-auto rounded-t-xl bg-cultured-100 shadow w-80 absolute bottom-0 right-0;
+}
+
+.chat-header {
+    @apply bg-viridiant-600 h-8 w-full flex rounded-t-xl shadow-md mb-4;
+}
+
+.chat-container {
+    @apply h-100 flex w-full bg-cultured-100;
+}
+
+.chat-footer {
+    @apply bg-viridiant-600 flex-row justify-center p-1 rounded-t-3xl w-full;
+}
+
+.chat-input {
+    @apply px-2 py-1 box-border text-sm bg-cultured-100 border border-cultured-700 rounded-full w-full;
+}
+
+.btn {
     @apply py-1 px-3 m-2 rounded-full appearance-none;
 }
 
-.btn-viridiant{
+.btn-viridiant {
     @apply text-cultured-100 bg-viridiant-600 border border-transparent;
 }
 
-.btn-viridiant:hover{
+.btn-viridiant:hover {
     @apply border border-viridiant-600 bg-cultured-100 text-viridiant-600;
 }
 
-.btn-viridiant-outline{
+.btn-viridiant-outline {
     @apply text-viridiant-600 border border-viridiant-600 bg-cultured-100;
 }
 
-.btn-viridiant-outline:hover{
+.btn-viridiant-outline:hover {
     @apply bg-viridiant-600 text-cultured-100;
 }
 
-.btn-orange-peel{
+.btn-orange-peel {
     @apply text-cultured-100 bg-orange-peel-600 border border-transparent;
 }
 
-.btn-orange-peel:hover{
+.btn-orange-peel:hover {
     @apply border border-orange-peel-600 bg-cultured-100 text-orange-peel-600;
 }
 
-.btn-orange-peel-outline{
+.btn-orange-peel-outline {
     @apply text-orange-peel-600 border border-orange-peel-600 bg-cultured-100;
 }
 
-.btn-orange-peel-outline:hover{
+.btn-orange-peel-outline:hover {
     @apply bg-orange-peel-600 text-cultured-100;
 }
 
-.btn-onyx{
+.btn-onyx {
     @apply text-cultured-100 bg-onyx-600 border border-transparent;
 }
 
-.btn-onyx:hover{
+.btn-onyx:hover {
     @apply border border-onyx-600 bg-cultured-100 text-onyx-600;
 }
 
-.btn-onyx-outline{
+.btn-onyx-outline {
     @apply text-onyx-600 border border-onyx-600 bg-cultured-100;
 }
 
-.btn-onyx-outline:hover{
+.btn-onyx-outline:hover {
     @apply bg-onyx-600 text-cultured-100;
 }
 
-.nav-bar-li{
+.nav-bar-li {
     @apply inline-flex;
 }
 
-.nav-bar-li a{
+.nav-bar-li a {
     @apply text-onyx-600 py-1 relative my-0 mx-1.5625;
 }
 
-.nav-bar-li a:hover{
+.nav-bar-li a:hover {
     @apply transition duration-900;
 }
 
-.nav-bar-li a:after{
+.nav-bar-li a:after {
     content : '';
     @apply origin-1/2 transform -translate-x-1/2 scale-x-0 bg-viridiant-600 w-full h-0.1875 left-1/2 transition duration-250 bottom-0 absolute;
 }
 
-.nav-bar-li a:hover:after{
+.nav-bar-li a:hover:after {
     @apply transform -translate-x-1/2 scale-x-100;
 }
 
-.search-bar{
+.search-bar {
     @apply bg-cultured-400 text-onyx-700 border border-onyx-200 rounded-full py-2 pl-10 pr-2 leading-tight;
 }
 
-.search-bar:focus{
+.search-bar:focus {
     @apply bg-cultured-100 border-onyx-500 w-full;
 }
 
@@ -102,6 +123,22 @@ button:focus, input:focus {
     @apply bg-onyx-200 border border-onyx-200 rounded-r-full p-1 pr-3;
 }
 
+.smiley {
+    @apply px-1 w-8;
+}
+
+.send {
+    @apply bg-onyx-600 rounded-full h-8 w-10 flex justify-center items-center;
+}
+
+.user-picture {
+    @apply px-4;
+}
+
+.user-name {
+    @apply my-auto flex text-cultured-100 ;
+}
+
 .icon {
     @apply w-8 h-1.75 mx-auto my-auto relative;
 }
@@ -132,10 +169,10 @@ button:focus, input:focus {
     @apply text-center list-none;
 }
 
-.bg-blur-3{
+.bg-blur-3 {
     filter: blur(3px);
 }
 
-.bg-blur-5{
+.bg-blur-5 {
     filter: blur(5px);
 }
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index dad601f2..adba207f 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -35,7 +35,7 @@
                 <form role="search" class="w-full justify-center">
                   <div class="flex justify-center">
                     <input class="search-input w-56" autocomplete="off" id="search-submit" type="text" placeholder="Search ...">
-                    <button class="search-glass"><a><img src="{{asset('vendor/courier/icons/search.svg')}}" width="24px" height="24px"></a></button>
+                    <button class="search-glass"><a><img src="{{asset('vendor/courier/icons/search-cultured-100.svg')}}" width="24px" height="24px"></a></button>
                 	</div>
                 </form>
               </div>
@@ -52,7 +52,7 @@
                 <form role="search" class="w-full justify-center">
                   <div class="flex justify-center">
                     <input class="search-input w-32" autocomplete="off" id="search-submit" type="text" placeholder="Search ...">
-                    <button class="search-glass"><a><img src="{{asset('vendor/courier/icons/search.svg')}}" width="24px" height="24px"></a></button>
+                    <button class="search-glass"><a><img src="{{asset('vendor/courier/icons/search-cultured-100.svg')}}" width="24px" height="24px"></a></button>
                 	</div>
                 </form>
               </div>
@@ -81,6 +81,23 @@
         <main>
             @yield('content')
         </main>
+        {{-- Real-Time Chat --}}
+        <div class="chat-window">
+            <div class="chat-header">
+                <button class="user-picture"><a><img src="{{asset('vendor/courier/icons/user-cultured-100.svg')}}" width="20px" height="20px"></a></button>
+                <div class="user-name" for="">Unknow person</div>
+                <button class="minus my-auto ml-auto mr-2"><a><img src="{{asset('vendor/courier/icons/minus-cultured-100.svg')}}" width="20px" height="20px"></a></button>
+                <button class="close my-auto mr-2"><a><img src="{{asset('vendor/courier/icons/close-cultured-100.svg')}}" width="20px" height="20px"></a></button>
+            </div>
+            <div class="chat-container"></div>
+            <div class="chat-footer">
+                <div class="w-full flex">
+                    <input class="chat-input" autocomplete="off" id="message-submit" type="text" placeholder="Type your message...">
+                    <button class="smiley"><a><img src="{{asset('vendor/courier/icons/smiley-cultured-100.svg')}}" width="24px" height="24px"></a></button>
+                    <button class="send"><a><img src="{{asset('vendor/courier/icons/send-cultured-100.svg')}}" width="18px" height="18px"></a></button>
+                </div>
+            </div>
+        </div>
     </div>
 </body>
 <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script>
diff --git a/tailwind.config.js b/tailwind.config.js
index 97c30cf6..e36db670 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -36,6 +36,11 @@ module.exports = {
                 '0.1875': '0.1875rem',
                 '1.875': '1.875rem',
                 '1.75': '1.75rem',
+                '8.5': '2.625rem',
+                '9': '2.75rem',
+                '80': '20rem',
+                '100': '25rem',
+                '120': '30rem',
             },
             width: {
                 '1/8': '12.5%',
@@ -46,6 +51,10 @@ module.exports = {
                 '3/4': '75%',
                 '7/8': '87.5%',
                 '1.875': '1.875rem',
+                '9': '2.75rem',
+                '80': '20rem',
+                '100': '25rem',
+                '120': '30rem',
             },
             minWidth: {
               '1': '1rem',