diff --git a/app/src/main/java/com/nextcloud/talk/chat/ChatActivity.kt b/app/src/main/java/com/nextcloud/talk/chat/ChatActivity.kt
index d5de6a60d..55535f91f 100644
--- a/app/src/main/java/com/nextcloud/talk/chat/ChatActivity.kt
+++ b/app/src/main/java/com/nextcloud/talk/chat/ChatActivity.kt
@@ -51,9 +51,11 @@ import androidx.activity.OnBackPressedCallback
 import androidx.activity.result.ActivityResult
 import androidx.activity.result.contract.ActivityResultContracts
 import androidx.appcompat.view.ContextThemeWrapper
+import androidx.core.content.ContextCompat
 import androidx.core.content.FileProvider
 import androidx.core.content.PermissionChecker
 import androidx.core.content.PermissionChecker.PERMISSION_GRANTED
+import androidx.core.graphics.ColorUtils
 import androidx.core.graphics.drawable.toBitmap
 import androidx.core.text.bold
 import androidx.emoji2.text.EmojiCompat
@@ -569,7 +571,7 @@ class ChatActivity :
         this.lifecycle.removeObserver(chatViewModel)
     }
 
-    @SuppressLint("NotifyDataSetChanged", "SetTextI18n")
+    @SuppressLint("NotifyDataSetChanged", "SetTextI18n", "ResourceAsColor")
     @Suppress("LongMethod")
     private fun initObservers() {
         Log.d(TAG, "initObservers Called")
@@ -1087,6 +1089,9 @@ class ChatActivity :
                 }
                 is ChatViewModel.OutOfOfficeUIState.Success -> {
                     binding.outOfOfficeContainer.visibility = View.VISIBLE
+                    val backgroundColor = ContextCompat.getColor(this, R.color.colorPrimary)
+                    val setAlpha = ColorUtils.setAlphaComponent(backgroundColor, (0.2f * 255).toInt())
+                    binding.outOfOfficeContainer.setCardBackgroundColor(setAlpha)
 
                     val startDateTimestamp: Long = uiState.userAbsence.startDate.toLong()
                     val endDateTimestamp: Long = uiState.userAbsence.endDate.toLong()
diff --git a/app/src/main/res/layout/activity_chat.xml b/app/src/main/res/layout/activity_chat.xml
index a6936ce88..87b8c58f1 100644
--- a/app/src/main/res/layout/activity_chat.xml
+++ b/app/src/main/res/layout/activity_chat.xml
@@ -127,15 +127,18 @@
 
         </LinearLayout>
 
-        <FrameLayout
+        <com.google.android.material.card.MaterialCardView
             android:id="@+id/out_of_office_container"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:visibility="gone"
-            tools:visibility="visible">
+            tools:visibility="visible"
+            android:layout_margin="8dp"
+            app:cardCornerRadius="12dp">
 
-            <include layout="@layout/out_of_office_view" />
-        </FrameLayout>
+
+        <include layout="@layout/out_of_office_view" />
+    </com.google.android.material.card.MaterialCardView>
 
         <com.stfalcon.chatkit.messages.MessagesList
             android:id="@+id/messagesListView"
@@ -144,7 +147,7 @@
             android:clipToPadding="false"
             android:paddingBottom="20dp"
             android:visibility="gone"
-            android:layout_below="@id/out_of_office_container"
+            android:layout_below= "@id/out_of_office_container"
             app:dateHeaderTextSize="13sp"
             app:incomingBubblePaddingBottom="@dimen/message_bubble_corners_vertical_padding"
             app:incomingBubblePaddingLeft="@dimen/message_bubble_corners_horizontal_padding"
@@ -193,7 +196,9 @@
             android:visibility="gone"
             tools:visibility="visible"
             app:background="@color/colorPrimary"
+            android:clipToPadding="false"
             app:cornerRadius="@dimen/button_corner_radius"
+
             app:icon="@drawable/ic_baseline_arrow_downward_24px" />
 
         <com.google.android.material.floatingactionbutton.FloatingActionButton
diff --git a/app/src/main/res/layout/out_of_office_view.xml b/app/src/main/res/layout/out_of_office_view.xml
index e4f8dc825..1037b627b 100644
--- a/app/src/main/res/layout/out_of_office_view.xml
+++ b/app/src/main/res/layout/out_of_office_view.xml
@@ -9,14 +9,23 @@
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:maxHeight="150dp"
-    android:padding="12dp"
     xmlns:tools="http://schemas.android.com/tools"
-    android:id="@+id/out_of_office_view"
-    style="@style/ScrollViewStyle">
+    android:id="@+id/out_of_office_view">
 
     <LinearLayout
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
+        android:orientation="horizontal">
+
+        <View
+        android:layout_width="6dp"
+        android:layout_height="match_parent"
+        android:background="@color/colorPrimary"/>
+
+    <LinearLayout
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:padding="8dp"
         android:orientation="vertical">
 
         <TextView
@@ -25,7 +34,6 @@
             android:layout_height="wrap_content"
             android:textSize="16sp"
             android:textStyle="bold"
-            android:layout_marginTop ="8dp"
             tools:text="Jane is out of office"/>
 
         <TextView
@@ -52,4 +60,5 @@
             android:textSize="14sp"
             tools:text="Hi, I am out of office this week. Please contact ....., ..........write very very very very very very very very very very very very very very very long message..................................................................................................................................if you have any issues."/>
     </LinearLayout>
+    </LinearLayout>
 </ScrollView>
\ No newline at end of file