diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/conference/conference-detail.dialog.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/conference/conference-detail.dialog.component.html
index 3e206c86..ea71f589 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/conference/conference-detail.dialog.component.html
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/conference/conference-detail.dialog.component.html
@@ -30,21 +30,25 @@
         {{ conferenceDetail.title }}
       </div>
       <div class="normal">
-        <span class="normal label bg-accent-color">{{ 'conference.videoConferenceRegister' | translate}}</span>
+        <span class="normal label bg-accent-color">{{
+          'conference.videoConferenceRegister' | translate
+        }}</span>
         <span class="name">{{ conferenceDetail.register }}</span>
       </div>
       <div class="underline">
-        <mat-accordion>
+        <mat-accordion class="attendee-list">
           <mat-expansion-panel>
             <mat-expansion-panel-header>
               <mat-panel-title>
-                <span class="label bg-accent-color bg-warn-color">{{ 'conference.videoConferenceAttendee' | translate}}</span>
+                <span class="label bg-accent-color bg-warn-color">{{
+                  'conference.videoConferenceAttendee' | translate
+                }}</span>
               </mat-panel-title>
-              <mat-panel-description>
+              <mat-panel-description class="text-accent-color">
                 {{ conferenceDetail.attendee }}
               </mat-panel-description>
             </mat-expansion-panel-header>
-            <mat-chip-list>
+            <mat-chip-list class="attendee-list-name">
               <mat-chip *ngFor="let attendee of conferenceDetail.attendees">{{
                 attendee
               }}</mat-chip>
@@ -53,7 +57,9 @@
         </mat-accordion>
       </div>
       <div class="normal">
-        <span class="label bg-accent-color">{{ 'conference.videoConferenceDate' | translate}}</span>
+        <span class="label bg-accent-color">{{
+          'conference.videoConferenceDate' | translate
+        }}</span>
         <span
           >{{
             conferenceDetail.startDate | ucapDate: 'YYYY.MM.DD (ddd) a hh:mm'
@@ -65,13 +71,15 @@
         >
       </div>
       <div class="underline">
-        <span class="label bg-accent-color">{{ 'conference.videoConferenceRoom' | translate}}</span>
+        <span class="label bg-accent-color">{{
+          'conference.videoConferenceRoom' | translate
+        }}</span>
         <span>{{ getJoinArray(conferenceDetail.conferenceRooms) }}</span>
       </div>
     </div>
   </mat-card-content>
   <mat-card-actions class="button-farm flex-row">
-    <button mat-stroked-button (click)="onClickConfirm()" class="mat-primary">
+    <button mat-flat-button (click)="onClickConfirm()" class="mat-primary">
       {{ 'common.messages.confirm' | translate }}
     </button>
   </mat-card-actions>
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/conference/conference-detail.dialog.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/conference/conference-detail.dialog.component.scss
index d0f9f45d..9faee9e4 100644
--- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/conference/conference-detail.dialog.component.scss
+++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/conference/conference-detail.dialog.component.scss
@@ -123,3 +123,35 @@
     }
   }
 }
+.attendee-list {
+  .mat-expansion {
+    &-panel {
+      box-shadow: none;
+      &-header {
+        padding: 0;
+        height: 24px !important;
+        &-title {
+          display: inline-flex;
+          flex: 0 0 auto;
+          border-radius: 14px;
+          margin-right: 0;
+          color: #ffffff;
+          line-height: 20px;
+          justify-content: center;
+        }
+        &-description {
+          //color: rgb(0, 0, 0, 0.8);
+        }
+      }
+    }
+    &-indicator {
+      width: 20px;
+    }
+  }
+}
+
+::ng-deep .attendee-list {
+  .mat-expansion-panel-body {
+    margin-top: 10px;
+  }
+}
diff --git a/projects/ucap-webmessenger-ui/src/assets/scss/partials/_dialogs.scss b/projects/ucap-webmessenger-ui/src/assets/scss/partials/_dialogs.scss
index 288a8b12..e0132478 100644
--- a/projects/ucap-webmessenger-ui/src/assets/scss/partials/_dialogs.scss
+++ b/projects/ucap-webmessenger-ui/src/assets/scss/partials/_dialogs.scss
@@ -40,7 +40,6 @@
 }
 
 .mat-card {
-  min-width: 500px;
   padding: 10px;
   .mat-card-header {
     margin-bottom: 20px;