diff --git a/demo-shell/src/app/components/files/files.component.html b/demo-shell/src/app/components/files/files.component.html
index 7b3111d25d..8ac047acd2 100644
--- a/demo-shell/src/app/components/files/files.component.html
+++ b/demo-shell/src/app/components/files/files.component.html
@@ -49,14 +49,14 @@
                 <span class="adf-error-message--text">{{errorMessage}}</span>
             </div>
             <adf-toolbar *ngIf="!disableDragArea" [color]="toolbarColor" class="adf-files-toolbar">
-                <adf-toolbar-title fxFlex="0 1 auto">
-                    <adf-breadcrumb fxShow fxHide.lt-sm="true"
-                                    class="adf-files-breadcrumb"
+                <adf-toolbar-title  fxFlex="0 1 auto">
+                    <adf-breadcrumb
+                                    class="adf-files-breadcrumb adf-standard-breadcrumb"
                                     root="APP.PERSONAL-FILES"
                                     [target]="documentList">
                     </adf-breadcrumb>
-                    <adf-dropdown-breadcrumb fxHide fxShow.lt-sm="true"
-                                             class="adf-files-breadcrumb"
+                    <adf-dropdown-breadcrumb
+                                             class="adf-files-breadcrumb adf-alternate-breadcrumb"
                                              [target]="documentList">
                     </adf-dropdown-breadcrumb>
                 </adf-toolbar-title>
@@ -250,15 +250,14 @@
                         key="$thumbnail"
                         type="image"
                         [sortable]="false"
-                        class="adf-image-table-cell"
+                        class="adf-image-table-cell adf-folder-image-column"
                         [class.adf-cell-thumbnail]="thumbnails">
                     </data-column>
                     <data-column
                         *ngIf="showNameColumn && hyperlinkNavigation"
                         key="name"
                         title="{{'DOCUMENT_LIST.COLUMNS.DISPLAY_NAME' | translate}}"
-                        [formatTooltip]="getNodeNameTooltip"
-                        class="adf-ellipsis-cell adf-expand-cell-5">
+                        [formatTooltip]="getNodeNameTooltip">
                         <ng-template let-context>
                             <adf-name-column [context]="context"></adf-name-column>
                         </ng-template>
@@ -268,7 +267,7 @@
                         key="name"
                         title="{{'DOCUMENT_LIST.COLUMNS.DISPLAY_NAME' | translate}}"
                         [formatTooltip]="getNodeNameTooltip"
-                        class="adf-ellipsis-cell adf-expand-cell-5">
+                        class="adf-ellipsis-cell adf-expand-cell-5  adf-display-name-column">
                     </data-column>
                     <!-- Location column demo -->
                     <!--
@@ -280,6 +279,7 @@
                     </data-column>
                     -->
                     <data-column
+                        class="adf-size-column"
                         key="content.sizeInBytes"
                         title="{{'DOCUMENT_LIST.COLUMNS.SIZE' | translate}}"
                         type="fileSize">
@@ -304,12 +304,12 @@
                     </data-column>
                     -->
                     <data-column
-                        class="adf-full-width adf-ellipsis-cell"
+                        class="adf-full-width adf-ellipsis-cell adf-nodeId-column"
                         title="{{'DOCUMENT_LIST.COLUMNS.NODE_ID' | translate}}"
                         key="id">
                     </data-column>
                     <data-column
-                        class="adf-desktop-only"
+                        class="adf-isLocked-column"
                         title="{{'DOCUMENT_LIST.COLUMNS.IS_LOCKED' | translate}}"
                         key="id">
                         <ng-template let-entry="$implicit">
@@ -322,14 +322,14 @@
                     <data-column
                         title="{{'DOCUMENT_LIST.COLUMNS.CREATED_BY' | translate}}"
                         key="createdByUser.displayName"
-                        class="adf-desktop-only">
+                        class="adf-createdBy-column">
                     </data-column>
                     <data-column
                         title="{{'DOCUMENT_LIST.COLUMNS.CREATED' | translate}}"
                         key="createdAt"
                         type="date"
                         [format]="enableMediumTimeFormat ? 'medium' : 'timeAgo'"
-                        class="adf-desktop-only">
+                        class="adf-desktop-only adf-createdOn-column">
                     </data-column>
 
                 </data-columns>
diff --git a/demo-shell/src/app/components/files/files.component.scss b/demo-shell/src/app/components/files/files.component.scss
index 4761478875..19cdee0418 100644
--- a/demo-shell/src/app/components/files/files.component.scss
+++ b/demo-shell/src/app/components/files/files.component.scss
@@ -1,7 +1,7 @@
 @mixin adf-file-component-theme($theme) {
-    $minimumDocumentListWidth: 900px;
     $foreground: map-get($theme, foreground);
 
+
     .adf-container {
         margin: 10px !important;
     }
@@ -71,10 +71,6 @@
         .adf-toolbar-title {
             display: flex;
             width: 100%;
-
-            .adf-breadcrumb {
-                width: 0;
-            }
         }
     }
 
@@ -140,46 +136,108 @@
         }
     }
 
-    @media (max-device-width: $minimumDocumentListWidth) {
-        .adf-file-list-container .adf-datatable-list {
-            .adf-datatable-cell,
-            .adf-datatable-table-cell-header {
-                display: none;
-            }
-
-            .adf-datatable-cell:first-child,
-            .adf-datatable-table-cell-header:first-child,
-            .adf-datatable-cell:nth-child(2),
-            .adf-datatable-table-cell-header:nth-child(2) {
-                display: table-cell;
-            }
+    @media all {
+        .adf-isLocked-column {
+            max-width: 30px !important;
+            margin-right: 5px;
         }
 
-        .adf-site-container-style {
-            width: 100%;
-            display: block;
-
-            & ::ng-deep .adf-site-dropdown-list-element {
-                width: 100%;
-            }
+        .adf-folder-image-column {
+            max-width: 28px!important;
         }
+    }
 
-        adf-file-uploading-dialog ::ng-deep .adf-upload-dialog {
-            width: 80%;
+    @media (max-width: 768px) {
+            .adf-createdOn-column {
+                display: none !important;
+            }
+    }
 
-            & ::ng-deep adf-file-uploading-list ::ng-deep adf-file-uploading-list-row
-            .adf-file-uploading-row__group {
-                min-width: 0;
+    @media (max-width: 500px) {
+        .adf {
+
+            &-display-name-column {
+                max-width: 50% !important;
+            }
+            &-size-column {
+                display: none !important;
+            }
+            &-createdBy-column {
+                max-width: 45% !important;
+            }
+            &-nodeId-column {
+                display: none !important;
             }
         }
     }
 
-    @media (max-device-width: 1024px) {
-        .adf-file-list-container .adf-datatable-list {
+    @media (max-width: 600px) {
+        .adf {
 
-            .adf-datatable-cell:nth-child(5),
-            .adf-datatable-table-cell-header:nth-child(5) {
-                display: none;
+            &-display-name-column {
+                max-width: 35%;
+            }
+            &-size-column {
+                max-width: 8%;
+            }
+            &-createdBy-column {
+                max-width: 35%;
+            }
+            &-createdOn-column {
+                max-width: 15%;
+            }
+            &-nodeId-column {
+                max-width: 10%;
+            }
+            &-isLocked-column {
+                display: none!important;
+            }
+            &-standard-breadcrumb {
+                display: none !important;
+            }
+        }
+    }
+
+    @media (min-width: 601px) {
+        .adf {
+
+            &-display-name-column {
+                max-width: 30%;
+            }
+            &-size-column {
+                max-width: 10%;
+            }
+            &-createdBy-column {
+                max-width: 30%;
+            }
+            &-createdOn-column {
+                max-width: 15%;
+            }
+            &-nodeId-column {
+                max-width: 12%;
+            }
+            &-alternate-breadcrumb {
+                display: none !important;
+            }
+        }
+    }
+
+    @media (min-width: 1400px) {
+        .adf {
+            &-display-name-column {
+                max-width: 40%;
+            }
+            &-size-column {
+                max-width: 15%;
+            }
+            &-createdBy-column {
+                max-width: 20%;
+            }
+            &-createdOn-column {
+                max-width: 20%;
+            }
+            &-nodeId-column {
+                max-width: 20%;
             }
         }
     }