diff --git a/frontend/app/components/Client/Audit/AuditList/AuditList.tsx b/frontend/app/components/Client/Audit/AuditList/AuditList.tsx
index 2b4249155..549b25b6d 100644
--- a/frontend/app/components/Client/Audit/AuditList/AuditList.tsx
+++ b/frontend/app/components/Client/Audit/AuditList/AuditList.tsx
@@ -15,6 +15,7 @@ function AuditList(props: Props) {
     const list = useObserver(() => auditStore.list);
     const searchQuery = useObserver(() => auditStore.searchQuery);
     const page = useObserver(() => auditStore.page);
+    const order = useObserver(() => auditStore.order);
     const { showModal } = useModal();
     
     useEffect(() => {
@@ -22,8 +23,9 @@ function AuditList(props: Props) {
             page: auditStore.page,
             limit: auditStore.pageSize,
             query: auditStore.searchQuery,
+            order: auditStore.order,
         });
-    }, [page, searchQuery]);
+    }, [page, searchQuery, order]);
 
     return useObserver(() => (
         <Loader loading={loading}>
diff --git a/frontend/app/components/Client/Audit/AuditListItem/AuditListItem.tsx b/frontend/app/components/Client/Audit/AuditListItem/AuditListItem.tsx
index 492d5c140..7d584bb06 100644
--- a/frontend/app/components/Client/Audit/AuditListItem/AuditListItem.tsx
+++ b/frontend/app/components/Client/Audit/AuditListItem/AuditListItem.tsx
@@ -9,7 +9,7 @@ function AuditListItem(props: Props) {
     const { audit, onShowDetails } = props;
     return (
         <div className="grid grid-cols-12 gap-4 items-center py-3">
-            <div className="col-span-5">asd</div>
+            <div className="col-span-5">{audit.username}</div>
             <div className="col-span-4 link cursor-pointer select-none" onClick={onShowDetails}>{audit.action}</div>
             <div className="col-span-3">{audit.createdAt && checkForRecent(audit.createdAt, 'LLL dd, yyyy, hh:mm a')}</div>
         </div>
diff --git a/frontend/app/components/Client/Audit/AuditView/AuditView.tsx b/frontend/app/components/Client/Audit/AuditView/AuditView.tsx
index ec9904567..1e53f24b5 100644
--- a/frontend/app/components/Client/Audit/AuditView/AuditView.tsx
+++ b/frontend/app/components/Client/Audit/AuditView/AuditView.tsx
@@ -4,14 +4,37 @@ import AuditList from '../AuditList';
 import AuditSearchField from '../AuditSearchField';
 import { useStore } from 'App/mstore';
 import { useObserver } from 'mobx-react-lite';
+import Select from 'Shared/Select';
+import SelectDateRange from 'Shared/SelectDateRange';
 
 function AuditView(props) {
     const { auditStore } = useStore();
+    const order = useObserver(() => auditStore.order);
+
     return useObserver(() => (
         <div>
             <div className="flex items-center mb-4">
                 <PageTitle title="Audit" />
                 <div className="flex items-center ml-auto">
+                    <div className="mx-4">
+                        {/* <SelectDateRange
+                            startDate={auditStore.startDate}
+                            endDate={auditStore.endDate}
+                            range={auditStore.range}
+                            onChange={auditStore.setDateRange}
+                        /> */}
+                    </div>
+                    <div className="mx-4">
+                        <Select
+                            options={[
+                                { label: 'Newest First', value: 'desc' },
+                                { label: 'Oldest First', value: 'asc' },
+                            ]}
+                            defaultValue={order}
+                            plain
+                            onChange={({ value }) => auditStore.updateKey('order', value)}
+                        />
+                    </div>
                     <AuditSearchField onChange={(value) => auditStore.updateKey('searchQuery', value) }/>
                 </div>
             </div>
diff --git a/frontend/app/components/shared/Select/Select.tsx b/frontend/app/components/shared/Select/Select.tsx
index 307fbb0ea..a69fb931a 100644
--- a/frontend/app/components/shared/Select/Select.tsx
+++ b/frontend/app/components/shared/Select/Select.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
-import Select from 'react-select';
+import Select, { components, DropdownIndicatorProps } from 'react-select';
+import { Icon } from 'UI';
+import colors from 'App/theme/colors';
 
 interface Props {
     options: any[];
@@ -21,10 +23,21 @@ export default function({ plain = false, options, isSearchable = false, defaultV
         control: (provided) => {
             const obj = {
                 ...provided,
-                border: 'solid thin #ddd'
+                border: 'solid thin #ddd',
+                cursor: 'pointer',
             }
             if (plain) {
                 obj['border'] = '1px solid transparent'
+                obj['&:hover'] = {
+                    borderColor: 'transparent',
+                    backgroundColor: colors['gray-light']
+                }
+                obj['&:focus'] = {
+                    borderColor: 'transparent'
+                }
+                obj['&:active'] = {
+                    borderColor: 'transparent'
+                }
             }
             return obj;
         },
@@ -46,7 +59,8 @@ export default function({ plain = false, options, isSearchable = false, defaultV
             isSearchable={isSearchable}
             defaultValue={defaultSelected}
             components={{
-                IndicatorSeparator: () => null
+                IndicatorSeparator: () => null,
+                DropdownIndicator,
             }}
             styles={customStyles}
             theme={(theme) => ({
@@ -56,9 +70,18 @@ export default function({ plain = false, options, isSearchable = false, defaultV
                     primary: '#394EFF',
                 }
             })}
+            blurInputOnSelect={true}
             {...rest}
         />
     );
 }
 
-// export default Select;
\ No newline at end of file
+const DropdownIndicator = (
+    props: DropdownIndicatorProps<true>
+  ) => {
+    return (
+      <components.DropdownIndicator {...props}>
+        <Icon name="chevron-down" size="18" />
+      </components.DropdownIndicator>
+    );
+  };
\ No newline at end of file
diff --git a/frontend/app/components/shared/SelectDateRange/SelectDateRange.tsx b/frontend/app/components/shared/SelectDateRange/SelectDateRange.tsx
new file mode 100644
index 000000000..5fe03120e
--- /dev/null
+++ b/frontend/app/components/shared/SelectDateRange/SelectDateRange.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { DATE_RANGE_OPTIONS } from 'App/dateRange'
+import Select from 'Shared/Select';
+
+interface Props {
+    startDate: string;
+    endDate: string;
+    range: string;
+    onChange: (startDate: string, endDate: string) => void;
+}
+function SelectDateRange(props: Props) {
+    return (
+        <div>
+            <Select
+                plain
+                options={DATE_RANGE_OPTIONS}
+            />
+        </div>
+    );
+}
+
+export default SelectDateRange;
\ No newline at end of file
diff --git a/frontend/app/components/shared/SelectDateRange/index.ts b/frontend/app/components/shared/SelectDateRange/index.ts
new file mode 100644
index 000000000..9b59aa99b
--- /dev/null
+++ b/frontend/app/components/shared/SelectDateRange/index.ts
@@ -0,0 +1 @@
+export { default } from './SelectDateRange';
\ No newline at end of file
diff --git a/frontend/app/dateRange.js b/frontend/app/dateRange.js
index b50ec2fb9..4a2ea923d 100644
--- a/frontend/app/dateRange.js
+++ b/frontend/app/dateRange.js
@@ -23,6 +23,13 @@ Object.keys(DATE_RANGE_LABELS).forEach((key) => { DATE_RANGE_VALUES[ key ] = key
 export { DATE_RANGE_VALUES };
 export const dateRangeValues = Object.keys(DATE_RANGE_VALUES);
 
+export const DATE_RANGE_OPTIONS = Object.keys(DATE_RANGE_LABELS).map((key) => {
+  return {
+    label: DATE_RANGE_LABELS[ key ],
+    value: key,
+  };
+});
+
 export function getDateRangeFromTs(start, end) {
   return moment.range(
     moment(start),
diff --git a/frontend/app/mstore/auditStore.ts b/frontend/app/mstore/auditStore.ts
index 11b0ba9f4..b3df0aa6d 100644
--- a/frontend/app/mstore/auditStore.ts
+++ b/frontend/app/mstore/auditStore.ts
@@ -1,6 +1,7 @@
 import { makeAutoObservable, runInAction, observable, action, reaction } from "mobx"
 import { auditService } from "App/services"
 import Audit from './types/audit'
+import Period, { LAST_7_DAYS } from 'Types/app/period';
 
 export default class AuditStore {
     list: any[] = [];
@@ -9,6 +10,8 @@ export default class AuditStore {
     pageSize: number = 20;
     searchQuery: string = '';
     isLoading: boolean = false;
+    order: string = 'desc';
+    period: Period = Period({ rangeName: LAST_7_DAYS })
 
     constructor() {
         makeAutoObservable(this, {
@@ -18,8 +21,11 @@ export default class AuditStore {
         })
     }
 
+    setDateRange(data: any) {
+        this.period = new Period(data);
+    }
+
     updateKey(key: string, value: any) {
-        console.log(key, value)
         this[key] = value;
     }
 
@@ -27,7 +33,6 @@ export default class AuditStore {
         this.isLoading = true;
         return new Promise((resolve, reject) => {
             auditService.all(data).then(response => {
-                console.log('response', response);
                 runInAction(() => {
                     this.list = response.sessions.map(item => Audit.fromJson(item))
                     this.total = response.count
diff --git a/frontend/app/mstore/types/audit.ts b/frontend/app/mstore/types/audit.ts
index b9c30343f..104ff447e 100644
--- a/frontend/app/mstore/types/audit.ts
+++ b/frontend/app/mstore/types/audit.ts
@@ -3,7 +3,7 @@ import { unserscoreToSpaceAndCapitalize } from 'App/utils';
 
 export default class Audit {
     id: string = '';
-    userName: string = '';
+    username: string = '';
     action: string = '';
     createdAt: any = null;
     endPoint: string = '';
@@ -17,7 +17,7 @@ export default class Audit {
     static fromJson(json: any): Audit {
         const audit = new Audit();
         audit.id = json.rn;
-        audit.userName = json.userName;
+        audit.username = json.username;
         audit.action = unserscoreToSpaceAndCapitalize(json.action);
         audit.createdAt = json.createdAt && DateTime.fromMillis(json.createdAt || 0);
         audit.endPoint = json.endPoint;
@@ -30,7 +30,7 @@ export default class Audit {
     toJson(): any {
         return {
             id: this.id,
-            userName: this.userName
+            username: this.username
         };
     }
 }
\ No newline at end of file
diff --git a/frontend/app/services/AuditService.ts b/frontend/app/services/AuditService.ts
index 0a93d6bb6..39b7521ed 100644
--- a/frontend/app/services/AuditService.ts
+++ b/frontend/app/services/AuditService.ts
@@ -14,7 +14,7 @@ export default class AuditService {
     all(data: any): Promise<any> {
         return this.client.post('/trails', data)
             .then(response => response.json())
-            .then(response => response.data[0] || []);
+            .then(response => response.data || []);
     }
 
     one(id: string): Promise<any> {
diff --git a/frontend/app/svg/icons/text-paragraph.svg b/frontend/app/svg/icons/text-paragraph.svg
index 9779beabf..f06f83174 100644
--- a/frontend/app/svg/icons/text-paragraph.svg
+++ b/frontend/app/svg/icons/text-paragraph.svg
@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-text-paragraph" viewBox="0 0 16 16">
+<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-text-paragraph" viewBox="0 0 16 16">
   <path fill-rule="evenodd" d="M2 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm4-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5z"/>
 </svg>
\ No newline at end of file