diff --git a/src/app/pd/chat-component/chat-component.component.scss b/src/app/pd/chat-component/chat-component.component.scss
index 6114d4c..fc483c2 100644
--- a/src/app/pd/chat-component/chat-component.component.scss
+++ b/src/app/pd/chat-component/chat-component.component.scss
@@ -183,12 +183,15 @@ body{
       //   "A B"
       //   "C C";
         grid-template-areas:
-        "A B";
+        "A B C";
+       // "B C";
+       //height:50%;
+       //width:100%;
         ::ng-deep .my-video{
           position: absolute;
           top: 0;
-          height:145px;
-          width: 140px;
+          height:50%;
+          width: 100%;
         }
     }
   }
@@ -197,7 +200,18 @@ body{
     grid-template-rows: $two-rows;
     grid-template-areas:
       "A B"
-      "C D";
+      "A C"
+      "A D";
+      background-color: #0f0f0f;
+      padding-left: 150px;
+      padding-right: 150px;
+      height:50%;
+      width:100%;
+      @media (orientation: portrait) {
+        padding-left:0px;
+        padding-right:0px;
+      }
+
   }
 
   .grid--5 {
@@ -262,19 +276,21 @@ body{
   }
 
  ::ng-deep .video-wrapper {
+   background-color: black;
     height: 100%;
     overflow: hidden;
     width: 100%;
-    padding: 2px;
+    padding: 20px;
     .identity-name {
-      position: relative;
-    background-color: #b1b1b1;
+    position: relative;
+    background-color: #0f0f0f;
     text-align: center;
     opacity: 0.8;
     padding: 0;
     bottom: 39px;
     left: 0%;
     .praticipant-name {
+      color:white;
       // width: 80%;
       margin-left: 30px;
       margin-right: 30px;