diff --git a/src/app/directory-tree-view/dir-tree-view-sort/shooting-time-info/dir-tree-view-sort-shooting-time-info.component.html b/src/app/directory-tree-view/dir-tree-view-sort/shooting-time-info/dir-tree-view-sort-shooting-time-info.component.html
index 8108d756..aea806de 100644
--- a/src/app/directory-tree-view/dir-tree-view-sort/shooting-time-info/dir-tree-view-sort-shooting-time-info.component.html
+++ b/src/app/directory-tree-view/dir-tree-view-sort/shooting-time-info/dir-tree-view-sort-shooting-time-info.component.html
@@ -11,18 +11,12 @@
     Note that folders are sorted by their names since there is no concept of "Shooting Time" of folders.
   </div>
 
-  <button mat-stroked-button class="details-button" (click)="detailsOpenState.set(!detailsOpenState())">
+  <button mat-button (click)="detailsOpenState.set(!detailsOpenState())">
     <div class="details-button-content">
-      <span>
-        @if (detailsOpenState()) {
-          Hide details for reference
-        } @else {
-          Read details for reference
-        }
-      </span>
-      <mat-icon fontIcon="expand_more"
-                [ngClass]="{'expanded-expand-icon': detailsOpenState()}">
+      <mat-icon fontIcon="chevron_right"
+                [ngClass]="{'details-opened-icon': detailsOpenState()}">
       </mat-icon>
+      <span>More details for reference</span>
     </div>
   </button>
 
diff --git a/src/app/directory-tree-view/dir-tree-view-sort/shooting-time-info/dir-tree-view-sort-shooting-time-info.component.scss b/src/app/directory-tree-view/dir-tree-view-sort/shooting-time-info/dir-tree-view-sort-shooting-time-info.component.scss
index ac815b04..95bb2935 100644
--- a/src/app/directory-tree-view/dir-tree-view-sort/shooting-time-info/dir-tree-view-sort-shooting-time-info.component.scss
+++ b/src/app/directory-tree-view/dir-tree-view-sort/shooting-time-info/dir-tree-view-sort-shooting-time-info.component.scss
@@ -21,10 +21,10 @@
 
 .dialog-body {
   overflow: auto;
-  padding: 24px;
+  padding: 25px 10px;
 
   .message-main {
-    margin-bottom: 30px;
+    padding: 0 0 20px 15px;
 
     li {
       margin-bottom: 10px;
@@ -36,7 +36,9 @@
   }
 
   .message-details {
-    margin-top: 20px;
+    margin-left: 20px;
+    padding: 5px 20px;
+    border-left: black 1px solid;
 
     p {
       margin: 10px 0;
@@ -44,10 +46,6 @@
   }
 }
 
-.details-button {
-  width: 255px;
-}
-
 .details-button-content {
   display: flex;
   gap: 5px;
@@ -55,8 +53,8 @@
   font-weight: normal; // Restore "font-weight: 500" given by mat-button to the browser's default value
 }
 
-.expanded-expand-icon {
-  transform: rotate(180deg);
+.details-opened-icon {
+  transform: rotate(90deg);
 }
 
 .dialog-footer {