diff --git a/arches_for_science/media/css/project.css b/arches_for_science/media/css/project.css
index 8e02bb22b..225226ac3 100644
--- a/arches_for_science/media/css/project.css
+++ b/arches_for_science/media/css/project.css
@@ -1191,6 +1191,9 @@
     cursor: pointer;
     color: #213e5f;
     font-size: 14px;
+    font-weight: 400;
+    margin-top: 5px;
+    margin-bottom: 5px;
 }
 .file-configuration input[type=radio]{
     margin:0;
@@ -1223,12 +1226,62 @@
     padding: 0;
 }
 
-.importer-configuration h4{
+.importer-configuration {
     position: relative;
     cursor: pointer;
     color: #213e5f;
     font-size: 14px;
+    margin-bottom: 0px;
+}
+
+.importer-config-panel {
+    padding: 2px 15px 15px 15px;
+    border-bottom: 1px solid #ddd;
+}
+
+.importer-list-container {
+    width: 470px;
+}
+ 
+.importer-list-container div:hover {
+    background: #EBF6FC;
+}
+
+.file-config-header {
+    font-size: 14px;
+    color: #213e5f;
+    margin: 5px 0px 0px 0px;
+}
+
+.file-config-instuctions {
+    margin: 0px 0px 5px 0px;
+    font-weight: 400;
+    color: #666;
+    font-size: 13px;
+}
+
+.importer-config-panel input {
+    margin-top: 3px;
+    margin-bottom: 10px;
+    height: 28px;
+    font-size: 13px;
+}
+
+.importer-config-panel input::placeholder {
+    font-size: 12px;
+    padding-left: 5px;
+    padding-bottom: 5px;
+}
+
+.importer-config-panel textarea {
+    margin-top: 3px;
 }
+
+.importer-config-panel textarea::placeholder {
+    font-size: 12px;
+    margin-left: 5px;
+}
+
 .importer-configuration input[type=radio]{
     margin:0;
 }
@@ -1240,6 +1293,10 @@
     display: flex;
     flex-direction: row;
     margin-top: 10px;
+    margin-bottom: 10px;
+    z-index: 1;
+    position: relative;
+    width: 100%;
 }
 .file-configuration .file-buttons{
     flex: 1;
@@ -1247,11 +1304,18 @@
     align-items: center;
     display: flex;
     padding: 10px 20px;
-    background-color: #fdfdfd;
+    background-color: #f9f9f9;
     border: 1px solid #ddd;
 }
+
+.file-configuration .file-buttons:hover {
+    background: #fff;
+}
+
 .file-configuration .file-buttons.active {
     font-weight: bold;
+    font-size: 13px;
+    background: #fff;
 }
 .file-configuration .dataTables_wrapper .row:first-child{
     background-color: #ddd;
@@ -1284,6 +1348,23 @@
   z-index: 1;
 }
 
+.table-tools-container {
+    display: flex;
+    margin-top: 5px;
+    padding-left: 5px;
+    padding-bottom: 10px;
+}
+
+.import-tool {
+    color: #579ddb;
+    margin-right: 10px;
+}
+
+.import-tool:hover {
+    color: #156AB7;
+    cursor: pointer;
+}
+
 /* Show the tooltip text when you mouse over the tooltip container */
 .tip:hover .tooltiptext {
   visibility: visible;
@@ -1292,8 +1373,14 @@
     text-align: center;
     margin: 16px 0px 16px 30px;
     height:fit-content; 
-    background-color: #fde9ad;
+    background-color: #FFFF00;
+    border: 1px solid #9951C0;
+    border-radius: 2px;
+    color: #440468;
+    font-weight: 400;
     overflow-y: auto;
+    padding: 40px;
+    width: 600px;
 }
 
 .afs-error-message {
diff --git a/arches_for_science/templates/views/components/plugins/file-configuration.htm b/arches_for_science/templates/views/components/plugins/file-configuration.htm
index 586d59dd6..e5011cf96 100644
--- a/arches_for_science/templates/views/components/plugins/file-configuration.htm
+++ b/arches_for_science/templates/views/components/plugins/file-configuration.htm
@@ -1,67 +1,74 @@
 {% load i18n %}
-<div class="file-configuration" style="width: 100%;height: calc(100% - 105px);display:flex;">
-    <div class="uploaded-files" style="width: 32.6793%;padding: 10px;padding-top: 0;">
+<div class="file-configuration" style="width: 100vw; margin: -20px; display: flex; height: calc(100% + 40px);">
+    <div class="uploaded-files" style="width: 500px; padding: 10px;">
         <h4><span>{% trans "Uploaded Files" %}</span></h4>
-        <span>{% trans "Specify how to process the data files for viewing.  Any additional files (such as images) will be automatically displayed if possible." %}</span>
+        <span class="file-config-instuctions">{% trans "Specify how to process the data files for viewing.  Any additional files (such as images) will be automatically displayed if possible." %}</span>
         <div class="file-button-container">
             <div class="file-buttons" data-bind="click:() => {fileMode('data')}, css: {active: fileMode() == 'data'}" role="button">{% trans "Data Files" %}</div>
             <div style="margin: 0 5px"></div>
             <div class="file-buttons" data-bind="click:() => {fileMode('other'); selectedFiles([])}, css: {active: fileMode() != 'data'}" role="button">{% trans "Additional Files" %}</div>
         </div>
 
-        <div class="pad-btm" data-bind="visible: currentFiles().length > 0" style="overflow-y: scroll;padding: 7px; max-height: calc(100% - 100px);">
-            <table class="table table-striped" cellspacing="0" width="100%">
-                <thead>
-                    <tr class="afs-table-header">
-                        <th class="min-tabletl">{% trans "Name" %}</th>
-                        <th class="min-tabletl">{% trans "Configuration" %}</th>
-                        <th style="width:40px;" class="afs-table-control all"></th>
-                    </tr>
-                </thead>
-                <tbody data-bind="dataTablesForEach: { data: currentFiles, as: 'file', dataTableOptions: fileTableConfig }">
-                    <tr>
-                        <td>
-                            <div style="display: flex; align-items:center;">
-                                <div style="display: flex; align-items: center;">
-                                    <div style="width: 25px;min-height:25px; margin: 0 5px;cursor:pointer" data-bind="click: function() { $parent.displayFile(file); $parent.selectedFile(file); }"><i data-bind="visible: $parent.visibleFile() == file.fileid && $parent.selectedFiles().length <= 1" role="button" aria-label="{% trans "Selected File" %}" class="fa fa-eye"></i></div>
-                                    <input style="margin: 0 5px" type="checkbox" data-bind="visible: $parent.fileMode() == 'data', value: file.fileid, checked: $parent.selectedFiles">
+        <div>
+            <div class="" style="border: 1px solid #ddd; width: 100%; padding: 0px 7px; z-index: 1; position: relative; height: 640px; overflow-y: scroll; overflow-x: hidden;" data-bind="visible: currentFiles().length > 0" style="overflow-y: scroll; height: 600px;">
+                <table class="table table-striped" cellspacing="0" width="100%">
+                    <thead>
+                        <tr class="afs-table-header">
+                            <th class="min-tabletl">{% trans "Name" %}</th>
+                            <th class="min-tabletl">{% trans "Configuration" %}</th>
+                            
+                        </tr>
+                    </thead>
+                    <tbody data-bind="dataTablesForEach: { data: currentFiles, as: 'file', dataTableOptions: fileTableConfig }">
+                        <tr>
+                            <td>
+                                <div style="display: flex; align-items:center;">
+                                    <div style="display: flex; align-items: center;">
+                                        <div style="margin: 0 5px;cursor:pointer" data-bind="click: function() { $parent.displayFile(file); $parent.selectedFile(file); }"><i data-bind="visible: $parent.visibleFile() == file.fileid && $parent.selectedFiles().length <= 1" role="button" aria-label="{% trans "Selected File" %}" class="fa fa-eye"></i></div>
+                                        <input style="margin: 0px 5px 0px 0px;" type="checkbox" data-bind="visible: $parent.fileMode() == 'data', value: file.fileid, checked: $parent.selectedFiles">
+                                    </div>
+                                    <div style="padding:1px 5px;min-height: 39px;align-items:center;display:flex;cursor:pointer; flex: 1" data-bind="click: function() { $parent.displayFile(file); $parent.selectedFile(file); },text: file.details.name"></div>
                                 </div>
-                                <div style="padding:8px;min-height: 39px;align-items:center;display:flex;cursor:pointer; flex: 1" data-bind="click: function() { $parent.displayFile(file); $parent.selectedFile(file); },text: file.details.name"></div>
-                            </div>
-                        </td>
-                        <td style="padding:8px;cursor:pointer" data-bind="click: function() { $parent.displayFile(file); $parent.selectedFile(file); }">
-                            <div data-bind="visible: (typeof file.details?.rendererConfig == 'function')">
-                                <input style="display:inline-block; flex: 1"
-                                    data-bind="
-                                    value: file.details.rendererConfig,
-                                    select2Query: {
-                                        select2Config: {
-                                            clickBubble: false,
-                                            disabled: file.details.disabledConfig,
-                                            width: 'element',
-                                            ajax:{
-                                                url: $parent.rendererUrl,
-                                                results: $parent.processConfigs
-                                            },
-                                            initSelection: $parent.initSelection,
-                                            value: file.details.rendererConfig,
-                                            closeOnSelect: true,
-                                            allowClear: false,
-                                            multiple: false 
-                                        }
-                                    }">
-                            </div>
-                        </td>
-                        <td style="padding:8px;cursor:pointer" data-bind="click: function() { $parent.displayFile(file) }">
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
+                            </td>
+                            <td style="padding:8px;cursor:pointer" data-bind="click: function() { $parent.displayFile(file); $parent.selectedFile(file); }">
+                                <div data-bind="visible: (typeof file.details?.rendererConfig == 'function')">
+                                    <input style="display:inline-block; flex: 1"
+                                        data-bind="
+                                        value: file.details.rendererConfig,
+                                        select2Query: {
+                                            select2Config: {
+                                                clickBubble: false,
+                                                disabled: file.details.disabledConfig,
+                                                width: 'element',
+                                                ajax:{
+                                                    url: $parent.rendererUrl,
+                                                    results: $parent.processConfigs
+                                                },
+                                                initSelection: $parent.initSelection,
+                                                value: file.details.rendererConfig,
+                                                closeOnSelect: true,
+                                                allowClear: false,
+                                                multiple: false 
+                                            }
+                                        }">
+                                </div>
+                            </td>
+                            
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+            
+        </div>
+        <div class="table-tools-container">
+            <div class="import-tool">x files</div>
+            <div class="import-tool">Select All</div>
+            <div class="import-tool">Remove Importer</div>
         </div>
     </div>
-    <div style="cursor:col-resize; width:18px;" class="resizer"></div>
-    <div class="active-files" style="width: 31.9659%; display: flex; flex-direction: column">
-        <div data-bind="visible: !(selectedFiles().length > 1) && fileMode() == 'data'">
+    <div style="cursor:col-resize; min-width:12px; background: #fcfcfc; border-right: 1px solid #eee; border-left: 1px solid #ddd;" class="resizer"></div>
+    <div class="active-files" style="width: 31.9659%; min-width: 550px; display: flex; flex-direction: column; padding: 10px 10px 20px 20px; z-index: 10;">
+        <div style="margin-bottom: 10px;" data-bind="visible: !(selectedFiles().length > 1) && fileMode() == 'data'">
             <h4 data-bind="text: selectedFile()?.details?.name"></h4>
             <div class="cm" style="border: 1px solid #ddd" >
                 <div data-bind="codemirror: {
@@ -116,8 +123,7 @@ <h4>{% trans "File Preview" %}</h4>
             </div>
         </div>
     </div>
-    <div style="cursor:col-resize;width:18px;" class="resizer"></div>
-    <div style="width: 32.3226%;padding: 10px; padding-top: 0;" data-bind="visible: fileMode() == 'data'">
+    <div style="width: 550px; min-width: 550px; position: relative; padding: 10px 50px 20px 20px;" data-bind="visible: fileMode() == 'data'">
         {% block importerConfiguration %}
         <!-- ko component: {
             name: 'importer-configuration',
diff --git a/arches_for_science/templates/views/components/plugins/importer-configuration.htm b/arches_for_science/templates/views/components/plugins/importer-configuration.htm
index c3e41eb0b..7aad623c0 100644
--- a/arches_for_science/templates/views/components/plugins/importer-configuration.htm
+++ b/arches_for_science/templates/views/components/plugins/importer-configuration.htm
@@ -1,10 +1,10 @@
 {% load i18n %}
 <div class="importer-configuration">
-    <h4><span>{% trans "Importer Configurations" %}</span></h4>
-    <span>{% trans "Define how to import your x/y data" %}</span>
-    <div>
+    <div class="file-config-header">{% trans "Importer Configurations" %}</div>
+    <div class="file-config-instuctions">{% trans "Define how to import your x/y data" %}</div>
+    <div class="importer-list-container">
         <!-- ko foreach: {data: rendererConfigs, as: 'configuration' } -->
-        <div style="padding:8px; display:flex;align-items: center;">
+        <div style="display:flex;align-items: center;">
             <input style="margin: 8px" type="radio" name="selectedConfiguration" data-bind="checked: $parent.selectedConfiguration, value: configuration.configid"></input>
             <span style="flex:1"><span data-bind="text: configuration.name"></span><span data-bind="if: configuration.description"><span class="tip"><i class="fa fa-info-circle"></i><span class="tooltiptext" data-bind="text: configuration.description"></span></span></span></span>
             <i class="fa fa-pencil" role="button" data-bind="click:()=>{$parent.loadConfiguration(configuration);}" aria-label="{% trans Edit %}"></i>
@@ -13,38 +13,38 @@ <h4><span>{% trans "Importer Configurations" %}</span></h4>
         <!-- /ko -->
     </div>
     <button class="btn btn-primary" data-bind="click:()=>{showConfigurationPanel(true), editConfigurationId(undefined)}">{% trans "Add Importer Configuration" %}</button>
-    <div data-bind="visible: showConfigurationPanel" style="border: 1px solid #ddd; margin: 10px 0;">
+    <div data-bind="visible: showConfigurationPanel" style="border: 1px solid #ddd; width: 470px; position: absolute; top: 4px;">
         <div style="background-color: #004577; color: #fff; padding: 10px; font-weight: bold;">{% trans "Add Importer Configuration" %}</div>
-        <div style="background-color: #fafafa; padding: 10px;">
-            <div>
-                <h4 class="file-config-header">{% trans "Importer Name" %}</h4>
+        <div style="background-color: #fafafa; overflow-y: scroll; height: calc(100vh - 337px);">
+            <div class="importer-config-panel">
+                <div class="file-config-header">{% trans "Importer Name" %}</div>
                 <input type="text" name="configurationName" data-bind="textInput: configurationName" placeholder="Name of Importer">
-                <h4 class="file-config-header">{% trans "Importer Description" %}</h4>
-                <textarea type="text" name="configurationDescription" data-bind="textInput: configurationDescription" placeholder="Describe the Importer">
+                <div class="file-config-header">{% trans "Importer Description" %}</div>
+                <textarea style="height: 50px;" type="text" name="configurationDescription" data-bind="textInput: configurationDescription" placeholder="Describe the Importer">
             </div>
-            <div>
-                <h4 class="file-config-header">{% trans "Header" %}</h4>
-                <h5>{% trans "Define where your x/y data are found in the file" %}</h5>
+            <div class="importer-config-panel">
+                <div class="file-config-header">{% trans "Header" %}</div>
+                <div class="file-config-instuctions">{% trans "Define where your x/y data are found in the file" %}</div>
                 <div style="display: flex; flex-direction: column; padding-bottom: 5px;">
                     <div style="display:flex; flex-direction: row; align-items:center; margin: 0"><input id="header-config-none" type="radio" name="headerConfig" value="none" data-bind="checked: headerConfig"><label for="header-config-none">{% trans "File does not have a header" %}</label></div>
                     <div style="display:flex; flex-direction: row; align-items:center; margin: 0"><input id="header-config-fixed" type="radio" name="headerConfig" value="fixed" data-bind="checked: headerConfig"><label for="header-config-fixed">{% trans "File has a fixed header (constant number of lines)" %}</label></div>
-                    <div style="display:flex; flex-direction: row; align-items:center; margin: 0"><input id="header-config-delimited" type="radio" name="headerConfig" value="delimited" data-bind="checked: headerConfig"><label for="header-config-delimited">{% trans "File header ends after specific text (variable number of lines, consistent ending text)" %}</label></div>
+                    <div style="display:flex; flex-direction: row; align-items:center; margin: 0"><input id="header-config-delimited" type="radio" name="headerConfig" value="delimited" data-bind="checked: headerConfig"><label for="header-config-delimited">{% trans "File header ends after specific text" %}</label></div>
                 </div>
                 <input type="text" name="headerDelimiter" data-bind="visible: headerConfig()=='delimited', textInput: headerDelimiter" placeholder="Ending Text">
                 <input type="text" name="headerFixedLines" data-bind="visible: headerConfig()=='fixed', textInput: headerFixedLines" placeholder="Number of Lines">
             </div>
-            <div>
-                <h4 class="file-config-header">{% trans "Footer" %}</h4>
-                <h5>{% trans "Define where your x/y data end in the file" %}</h5>
+            <div class="importer-config-panel">
+                <div class="file-config-header">{% trans "Footer" %}</div>
+                <div class="file-config-instuctions">{% trans "Define where your x/y data end in the file" %}</div>
                 <div style="display: flex; flex-direction: column; padding-bottom: 5px;">
                     <div style="display:flex; flex-direction: row; align-items:center; margin: 0"><input id="header-config-none" type="radio" name="footerConfig" value="none" data-bind="checked: footerConfig"><label for="header-config-none">{% trans "End of File" %}</label></div>
                     <div style="display:flex; flex-direction: row; align-items:center; margin: 0"><input id="header-config-delimited" type="radio" name="footerConfig" value="delimited" data-bind="checked: footerConfig"><label for="header-config-delimited">{% trans "File footer begins after specific text (consistent ending text)" %}</label></div>
                 </div>
                 <input type="text" name="headerDelimiter" data-bind="visible: footerConfig()=='delimited', textInput: footerDelimiter" placeholder="Ending Text">
             </div>
-            <div>
-                <h4>{% trans "Transformations" %}</h4>
-                <h5>{% trans "Optionally define a transformation for \"y\" data" %}</h5>
+            <div class="importer-config-panel">
+                <div class="file-config-header">{% trans "Transformations" %}</div>
+                <div class="file-config-instuctions">{% trans "Optionally define a transformation for \"y\" data" %}</div>
                 <input style="display:inline-block; flex: 1"
                 data-bind="
                 value: selectedTransformation,
@@ -62,10 +62,10 @@ <h5>{% trans "Optionally define a transformation for \"y\" data" %}</h5>
                     }
                 }">
             </div>
-            <div>
-                <h4>{% trans "Data Column Delimiter" %}</h4>
+            <div class="importer-config-panel">
+                <div class="file-config-header">{% trans "Data Column Delimiter" %}</div>
                 <div class="afs-error-message ep-alert-red" style="padding:5px;" data-bind="visible: invalidDelimiter()">{% trans "The data delimiter must be a valid regular expression" %}</div>
-                <h5>{% trans "Define how the data are separated" %}</h5>
+                <div class="file-config-instuctions">{% trans "Define how the data are separated" %}</div>
                 <div style="display: flex; flex-direction: row">
                     <div class="data-delimiter-radio"><input id="delimiter-space" type="radio" name="dataDelimiter" value="" data-bind="checked: dataDelimiterRadio"><label for="delimiter-space">{% trans "Whitespace" %}</label></div>
                     <div class="data-delimiter-radio"><input id="delimiter-comma" type="radio" name="dataDelimiter" value="," data-bind="checked: dataDelimiterRadio"><label for="delimiter-comma">{% trans "Comma" %}</label></div>
@@ -73,7 +73,10 @@ <h5>{% trans "Define how the data are separated" %}</h5>
                     <div class="data-delimiter-radio"><input id="delimiter-other" type="radio" name="dataDelimiter" value="other" data-bind="checked: dataDelimiterRadio"><label for="delimiter-other">{% trans "Other" %}</label></div>
                 </div>
                 <input type="text" name="delimiterCharacter" data-bind="visible: dataDelimiterRadio()=='other', textInput: dataDelimiter">
-                <div style="display: flex; margin: 5px 0;"><input type="checkbox" name="includeDelimiter" value="includeDelimiter" data-bind="checked:includeDelimiter"><label style="padding: 0 10px" for="header-config-none">{% trans "Include Delimiter in Value (example: + or - might be part of a numeric value)" %}</label></div>
+                <div style="display: flex; margin: 5px 0;">
+                    <input style="margin: 0px 0px 0px 2px;" type="checkbox" name="includeDelimiter" value="includeDelimiter" data-bind="checked:includeDelimiter">
+                    <label style="margin-top: 2px;" for="header-config-none">{% trans "Include Delimiter in Value" %}</label>
+                </div>
             </div>
         </div>
         <div style="display: flex;background-color: #eee;border-top: 1px solid #ddd">
diff --git a/arches_for_science/templates/views/components/workflows/upload-dataset/file-interpretation-step.htm b/arches_for_science/templates/views/components/workflows/upload-dataset/file-interpretation-step.htm
index afc21575a..06ceabec0 100644
--- a/arches_for_science/templates/views/components/workflows/upload-dataset/file-interpretation-step.htm
+++ b/arches_for_science/templates/views/components/workflows/upload-dataset/file-interpretation-step.htm
@@ -142,7 +142,7 @@ <h2 class="file-workbench-filter-header">{% trans 'Data Files' %}</h2>
             <span>{% trans "Dataset" %}:</span>
             <span style="font-weight: bold" data-bind="text: $parent.selectedDigitalResource()?.displayname"></span>
         </div>
-        <div style="margin-top: 10px">
+        <div style="margin-top: 0px">
             <span>{% trans "File" %}:</span>
             <span style="font-weight: bold" data-bind="text: selectedFile()?.file_details[0].name"></span>
         </div>
diff --git a/arches_for_science/templates/views/components/workflows/upload-dataset/select-dataset-files-step.htm b/arches_for_science/templates/views/components/workflows/upload-dataset/select-dataset-files-step.htm
index 4c351dcfd..b368f1818 100644
--- a/arches_for_science/templates/views/components/workflows/upload-dataset/select-dataset-files-step.htm
+++ b/arches_for_science/templates/views/components/workflows/upload-dataset/select-dataset-files-step.htm
@@ -37,24 +37,27 @@ <h4 class="workbench-card-sidepanel-header" data-bind="click: hideSidePanel">{%
         <!--ko if: annotations().length > 0-->
         <div style="width:100%; display: flex;">
             <button class="btn" style="background: #9490EE;color: #fff;" data-bind="visible: self.showDatasetDetails, click: function(){self.showDatasetDetails(false)}">
-                <i class="fa fa-list" style="color: #fff"></i> {% trans "Show Sampled Area List" %}</button>
+                <i class="fa fa-list" style="color: #fff"></i> {% trans "Back to Sampled Area List" %}</button>
         </div>
 
-        <div style="margin-top:10px" data-bind="visible: !self.showDatasetDetails()">
-            <label class="control-label">{% trans "Sampled Locations" %}</label>
-            <div style="margin-bottom: 10px; border: 1px solid rgb(221, 221, 221); padding: 5px; background-color: rgb(249, 249, 249);">
-                <span>{% trans "Select a location or area to upload or view files." %}</span>
+        <div data-bind="visible: !self.showDatasetDetails()">
+            <label class="control-label" style="font-size: 1.2em; font-weight: 500;">{% trans "Sampled Locations" %}</label>
+            <div style="margin-bottom: 10px; border: 1px solid #9951C0; padding: 20px; background-color: #FFFF00; border-radius: 2px;">
+                <div style="font-size: 1.15em; text-align: center; color: #440468;">
+                    <i class="fa fa-info-circle"></i><span style="margin-left: 5px;">{% trans "Select a Location or Area" %}</span>
+                </div>
+                <div style="color: #9951C0; text-align: center;"> {% trans "Click on a location or area from the list below to start uploading files. Locked locations/areas were uploaded by others and can't be edited" %}</div>
             </div>
             <input type="text" class="form-control" style="width: 100%;" placeholder="Filter" data-bind="textInput: partFilter">
         </div>
-        <div class="panel">
-            <div style="margin-top: 10px">
+        <div class="panel" style="margin-bottom: 0px;">
+            <div style="margin-top: 5px">
                 <div data-bind="visible: !self.showDatasetDetails()">
                     <div id="parts-panel" data-bind="foreach: {data: parts, as: 'part'}">
                         <!--ko if: self.partFilter() === "" || part.displayname.toLowerCase().includes(self.partFilter().toLowerCase()) -->
                         <div class="panel">
                             <a role="button" data-parent="#parts-panel"  aria-expanded="false" data-bind="click: function(){ $parent.showDatasetDetails(true); $parent.selectedPart(part); }, attr: { href: '#' + part.tileid, 'aria-expanded': $index == 0 ? 'true' : 'false' }">
-                                <div style="height: 25px; padding: 10px;display: flex; align-items:center;" class="file-workbench-file">
+                                <div style="height: 25px; padding: 10px; display: flex; align-items:center;" class="file-workbench-file">
                                     <span style="flex: 1" class="file-name manifest-manager-canvas-name" data-bind="text: part.displayname + ' (' + part.type + ')'"></span>
                                     <div data-bind="visible: !part.hasCurrentObservation()">
                                         <i class="fa fa-lock" style="color: black"></i>
@@ -72,18 +75,20 @@ <h4 class="workbench-card-sidepanel-header" data-bind="click: hideSidePanel">{%
                 </div>
 
                 <div data-bind="visible: self.showDatasetDetails">
-                    <div style="margin-bottom: 10px; border: 1px solid #ddd; padding: 5px; background-color: #f9f9f9;">
-                        <span>{% trans "Supported image files and PDF files are automatically detected and displayed." %}</span>
+                    <div style="margin-bottom: 10px; border: 1px solid #9951C0; padding: 20px; background-color: #FFFF00; border-radius: 2px;">
+                        <div style="font-size: 1.15em; text-align: center; color: #440468;">
+                            <i class="fa fa-info-circle"></i><span style="margin-left: 5px;">{% trans "File Formats" %}</span>
+                        </div>
+                        <div style="color: #9951C0; text-align: center;">{% trans "Only ASCII files can be presented as interactive charts. Supported image files and PDF files will automatically detected and displayed." %}</div>
                     </div>
-                    <div data-bind="visible: selectedPartHasCurrentObservation()">
+                    <div style="margin-top: 15px;" data-bind="visible: selectedPartHasCurrentObservation()">
                         <div class="dataset-name">
-                            <label class="control-label">{% trans "Dataset Name" %}</label>
+                            <label class="control-label" style="font-size: 1.2em; font-weight: 500;">{% trans "Dataset Name" %}</label>
                             <div style="display: flex">
                                 <input style="flex: 1;" type="text" class="form-control" placeholder="Dataset name" data-bind="enable: self.selectedPartHasCurrentObservation(), textInput: selectedPart().datasetName">
-                                <button style="margin: 0px 5px" class="btn btn-md btn-mint" data-bind="visible: (self.showDatasetDetails() && selectedPart()?.nameDirty()), click: function(){$parent.saveFiles(); }" style="">Save</button>
                             </div>
                             <div style="display: flex;" >
-                                <input class="afs-calculated-datasetname" style="flex: 1" disabled type="text" data-bind="textInput: selectedPartHasCurrentObservation() ? selectedPart().calcDatasetName : selectedPart().datasetName"></input>
+                                <input class="afs-calculated-datasetname" style="flex: 1; margin-bottom: 0px;" disabled type="text" data-bind="textInput: selectedPartHasCurrentObservation() ? selectedPart().calcDatasetName : selectedPart().datasetName"></input>
                             </div>
                         </div>
                         <!-- ko if: uploadFailed -->
@@ -92,7 +97,7 @@ <h4 class="workbench-card-sidepanel-header" data-bind="click: hideSidePanel">{%
                             {% trans 'Failed to upload files.  Try again or contact an administrator.'%}
                         </div>
                         <!-- /ko -->
-                        <div class="dropzone-photo-upload" style="height: 80px;" data-bind="visible: selectedPartHasCurrentObservation(), dropzone: dropzoneOptions">
+                        <div class="dropzone-photo-upload" style="height: 80px; padding: 30px 15px; background: #C1F25F; border: 1px dashed #619100; border-radius: 2px; margin-bottom: 10px;" data-bind="visible: selectedPartHasCurrentObservation(), dropzone: dropzoneOptions">
                             <div class="file-workbench-links">
                                 <a class="upload-dataset-files dz-clickable" data-bind="css: uniqueidClass">
                                     <span>{% trans "Drag or " %}</span><span class="text-bold">{% trans "click here " %}</span><span>{% trans "to upload files" %}</span>
@@ -104,8 +109,8 @@ <h4 class="workbench-card-sidepanel-header" data-bind="click: hideSidePanel">{%
                         </div>
                     </div>
                     <div class="panel-collapse collapse" data-bind="visible: ko.unwrap(selectedPart().datasetFiles).length; attr: { id: selectedPart().tileid }, css: { in: $index() == 0}">
-                        <label class="control-label" style="padding-top: 5px; ">{% trans "Files in Dataset" %}</label>
-                        <div class="file-workbench-files" data-bind="foreach: {data: selectedPart().datasetFiles, as: 'file'}">
+                        <label class="control-label" style="font-size: 1.2em; font-weight: 500; padding-top: 5px; ">{% trans "Files in Dataset" %}</label>
+                        <div class="file-workbench-files" style="height: 215px;" data-bind="foreach: {data: selectedPart().datasetFiles, as: 'file'}">
                             <div class='file-workbench-file' style="display: flex;" data-bind="css: {staged: false}">
                                 <div style="flex: 1">
                                     <i data-bind="visible: self.selectedPartHasCurrentObservation(), click: function(){self.selectedPartHasCurrentObservation() ? $parent.deleteFile(file): console.log('no')}" class="fa fa-trash" style="color: black"></i>
@@ -116,8 +121,9 @@ <h4 class="workbench-card-sidepanel-header" data-bind="click: hideSidePanel">{%
                                 </div>
                             </div>
                         </div>
-                        <div><span data-bind="text: ko.unwrap(selectedPart().datasetFiles).length"></span> {% trans "files loaded" %}</div>
+                        <div style="margin-bottom: 10px;"><span data-bind="text: ko.unwrap(selectedPart().datasetFiles).length"></span> {% trans "files" %}</div>
                     </div>
+                    <button style="width: 150px;" class="btn btn-md btn-mint" data-bind="visible: (self.showDatasetDetails() && selectedPart()?.nameDirty()), click: function(){$parent.saveFiles(); }" style="">Save</button>
                     
                 </div>
             </div>
diff --git a/arches_for_science/templates/views/components/workflows/upload-dataset/upload-files-step.htm b/arches_for_science/templates/views/components/workflows/upload-dataset/upload-files-step.htm
index 726c09188..7c0c06228 100644
--- a/arches_for_science/templates/views/components/workflows/upload-dataset/upload-files-step.htm
+++ b/arches_for_science/templates/views/components/workflows/upload-dataset/upload-files-step.htm
@@ -28,10 +28,6 @@
         <button class="btn btn-shim btn-labeled btn-sm fa fa-plus btn-mint" data-bind="click: saveFiles">{% trans 'Save'%}</button>
         <!-- /ko -->
     </div>
-
-    <div style="margin-bottom: 10px; border: 1px solid #ddd; padding: 5px; background-color: #f9f9f9; width: 50%">
-        <span>{% trans "Supported image files and PDF files are automatically detected and displayed." %}</span>
-    </div>
 </div>
 
 <!-- ko if: uploadFailed -->
@@ -44,28 +40,25 @@
 <div class="file-chart-upload-panel">
     <!-- ko if: files().length === 0 -->
     <div class="gallery-controls new-tile">
-        <div class="dropzone-photo-upload" data-bind="dropzone: dropzoneOptions">
+        <div style="padding: 10px 45px 45px 45px;" class="dropzone-photo-upload" data-bind="dropzone: dropzoneOptions">
             <div class="file-select-window">
-                <div class="bord-top pad-ver file-select">
+                <div style="background: #C1F25F; border: dashed 1px #619100; border-radius: 2px;" class="bord-top pad-ver file-select">
                     <div class="" style="padding: 5px">
-                        <h2>{% trans 'Upload Files' %}</h2>
-                        <h4>{% trans 'Drag & Drop your files onto this panel to upload' %}</h4>
+                        <h2><i class="fa fa-cloud-upload"></i><span style="margin-left: 5px;">{% trans "Upload files" %}</h2>
+                        <h4 style="font-weight: 400;">{% trans 'Drag & Drop your files onto this panel to upload' %}</h4>
                     </div>
-                    <button type="button" class="btn btn-lg btn-file-select upload-dataset-files dz-clickable" data-bind="css: uniqueidClass">
+                    <button style="margin: 0px 0px 15px 0px;" type="button" class="btn btn-lg btn-file-select upload-dataset-files dz-clickable" data-bind="css: uniqueidClass">
                         <i class="fa fa-file"></i>
                         <span>{% trans "Select Files" %}</span>
                     </button>
                     <br>
-                    <div style="padding: 10px">{% trans "Adding files to this record is " %}
-                        <span><strong>{% trans "optional." %}</strong></span>
+                    <div style="padding: 10px 10px 25px 10px;">{% trans "You may upload files of various formats " %}
+                        <span><strong>{% trans "but only ASCII files with X/Y data columns can be displayed on an interactive graph." %}</strong></span>
                         <br>
                         {% trans "You may upload as many files as you wish; check with the site admin on the maximum file size." %}
                     </div>
 
                 </div>
-                <div class="file-upload-footer">
-                    <span></span>
-                </div>
             </div>
 
         </div>
@@ -76,9 +69,11 @@ <h4>{% trans 'Drag & Drop your files onto this panel to upload' %}</h4>
     <!-- /ko -->
       
     <!-- ko if: files().length > 0 -->
-    
-    <div style="background-color: white; padding: 45px;">
-        <div class="dropzone-photo-upload" style="background: #fafafa; border: dashed 1px purple; padding: 40px; text-align: center;" data-bind="dropzone: dropzoneOptions">
+    <div style="background-color: white; padding: 10px 45px 45px 45px;">
+        <div class="dropzone-photo-upload" style="background: #C1F25F; border: dashed 1px #619100; padding: 40px; text-align: center; border-radius: 2px;" data-bind="dropzone: dropzoneOptions">
+            <div style="font-size: 1.35em; text-align: center; color: #440468;">
+                <i class="fa fa-cloud-upload"></i><span style="margin-left: 5px;">{% trans "File Upload" %}</span>
+            </div>
             <div class="file-workbench-links">
                 <a class="upload-dataset-files dz-clickable" data-bind="css: uniqueidClass">
                     <span>{% trans "Drag or " %}</span><span class="text-bold">{% trans "click here " %}</span>
@@ -89,7 +84,7 @@ <h4>{% trans 'Drag & Drop your files onto this panel to upload' %}</h4>
                 <div id="hidden-dz-previews" style="display:none"></div>
             </div>
         </div>
-        <div class="file-workbench-files" style="display: flex; flex-direction: column; height: 485px; border: solid 1px lightgrey; padding: 20px;">
+        <div class="file-workbench-files" style="display: flex; flex-direction: column; height: 385px; border: solid 1px lightgrey;">
             
             <!-- ko foreach: {data: files, as: 'file'} -->
                 <div class="file-workbench-file">
@@ -102,6 +97,10 @@ <h4>{% trans 'Drag & Drop your files onto this panel to upload' %}</h4>
                 </div>
             <!-- /ko -->
         </div>
+        <div class="table-tools-container">
+            <div class="import-tool">x files</div>
+            <div class="import-tool">Remove All</div>
+        </div>
     </div>
     <!-- /ko -->
 </div>