diff --git a/src/app/utils/searchbox.styles.ts b/src/app/utils/searchbox.styles.ts
new file mode 100644
index 000000000..d83fe32ef
--- /dev/null
+++ b/src/app/utils/searchbox.styles.ts
@@ -0,0 +1,14 @@
+export const searchBoxStyles: any = () => ({
+  field: [
+    {
+      paddingLeft: 10
+    },
+    {
+      selectors: {
+        ':focus': {
+          outline: 'none !important'
+        }
+      }
+    }
+  ]
+})
\ No newline at end of file
diff --git a/src/app/views/app-sections/ResponseMessages.tsx b/src/app/views/app-sections/ResponseMessages.tsx
index e569ff56c..1c13c83a0 100644
--- a/src/app/views/app-sections/ResponseMessages.tsx
+++ b/src/app/views/app-sections/ResponseMessages.tsx
@@ -49,7 +49,7 @@ export function responseMessages(graphResponse: IGraphResponse, sampleQuery: IQu
   if (odataLink) {
     return (
       <MessageBar messageBarType={MessageBarType.info}>
-        <FormattedMessage id={'This response contains an @odata property'} />: @odata.{odataLink!.name}
+        <FormattedMessage id={'This response contains an @odata property.'} />: @odata.{odataLink!.name}
         <Link onClick={() => setQuery()}>
           &nbsp;<FormattedMessage id='Click here to follow the link' />
         </Link>
diff --git a/src/app/views/query-runner/request/permissions/PanelList.tsx b/src/app/views/query-runner/request/permissions/PanelList.tsx
index b26c81cda..d491fb913 100644
--- a/src/app/views/query-runner/request/permissions/PanelList.tsx
+++ b/src/app/views/query-runner/request/permissions/PanelList.tsx
@@ -17,6 +17,7 @@ import { IPermission } from '../../../../../types/permissions';
 import { IRootState } from '../../../../../types/root';
 import { dynamicSort } from '../../../../utils/dynamic-sort';
 import { generateGroupsFromList } from '../../../../utils/generate-groups';
+import { searchBoxStyles } from '../../../../utils/searchbox.styles';
 import { setConsentedStatus } from './util';
 
 interface IPanelList {
@@ -84,7 +85,7 @@ const PanelList = ({ messages,
         placeholder={messages['Search permissions']}
         onChange={(event?: React.ChangeEvent<HTMLInputElement>, newValue?: string) =>
           searchValueChanged(event, newValue)}
-        styles={{ field: { paddingLeft: 10 } }}
+        styles={searchBoxStyles}
       />
       <Announced message={`${permissions.length} search results available.`} />
       <hr />
diff --git a/src/app/views/sidebar/history/History.tsx b/src/app/views/sidebar/history/History.tsx
index 580c90d27..ecbc443be 100644
--- a/src/app/views/sidebar/history/History.tsx
+++ b/src/app/views/sidebar/history/History.tsx
@@ -24,6 +24,7 @@ import { dynamicSort } from '../../../utils/dynamic-sort';
 import { generateGroupsFromList } from '../../../utils/generate-groups';
 import { sanitizeQueryUrl } from '../../../utils/query-url-sanitization';
 import { parseSampleUrl } from '../../../utils/sample-url-generation';
+import { searchBoxStyles } from '../../../utils/searchbox.styles';
 import { translateMessage } from '../../../utils/translate-messages';
 import { classNames } from '../../classnames';
 import { sidebarStyles } from '../Sidebar.styles';
@@ -72,12 +73,12 @@ export class History extends Component<IHistoryProps, any> {
     return `${year}-${month}-${day}`;
   };
 
-  public getItems(history: any[]) {
+  public getItems(history: History[]) {
     const {
       intl: { messages }
     }: any = this.props;
 
-    const items: any[] = [];
+    const items: History[] = [];
 
     // tslint:disable-next-line:no-string-literal
     const olderText = messages.older;
@@ -101,11 +102,14 @@ export class History extends Component<IHistoryProps, any> {
       element.category = date;
       items.push(element);
     });
-    items
-      .sort(dynamicSort('createdAt', SortOrder.DESC))
-      .forEach((value, index) => {
-        value.index = index;
-      });
+    return this.sortItems(items);
+  }
+
+  private sortItems = ( items: History[] ) => {
+    items.sort(dynamicSort('createdAt', SortOrder.DESC));
+    items.forEach((value : any, index: number) => {
+      value.index = index;
+    });
     return items;
   }
 
@@ -509,7 +513,7 @@ export class History extends Component<IHistoryProps, any> {
             placeholder={messages['Search history items']}
             className={classes.searchBox}
             onChange={this.searchValueChanged}
-            styles={{ field: { paddingLeft: 10 } }}
+            styles={searchBoxStyles}
           />
           <hr />
           <MessageBar
diff --git a/src/app/views/sidebar/resource-explorer/ResourceExplorer.tsx b/src/app/views/sidebar/resource-explorer/ResourceExplorer.tsx
index fee805a1d..4f736a640 100644
--- a/src/app/views/sidebar/resource-explorer/ResourceExplorer.tsx
+++ b/src/app/views/sidebar/resource-explorer/ResourceExplorer.tsx
@@ -14,6 +14,7 @@ import { IRootState } from '../../../../types/root';
 import { setSampleQuery } from '../../../services/actions/query-input-action-creators';
 import { addResourcePaths } from '../../../services/actions/resource-explorer-action-creators';
 import { GRAPH_URL } from '../../../services/graph-constants';
+import { searchBoxStyles } from '../../../utils/searchbox.styles';
 import { translateMessage } from '../../../utils/translate-messages';
 import { classNames } from '../../classnames';
 import { sidebarStyles } from '../Sidebar.styles';
@@ -197,7 +198,7 @@ const unstyledResourceExplorer = (props: any) => {
           placeholder={translateMessage('Search resources')}
           onChange={changeSearchValue}
           disabled={!!isolated}
-          styles={{ field: { paddingLeft: 10 } }}
+          styles={searchBoxStyles}
         />
         <hr />
         <Stack wrap tokens={{ childrenGap: 10, padding: 10 }}>
diff --git a/src/app/views/sidebar/sample-queries/SampleQueries.tsx b/src/app/views/sidebar/sample-queries/SampleQueries.tsx
index a0c73decc..5afc5ccef 100644
--- a/src/app/views/sidebar/sample-queries/SampleQueries.tsx
+++ b/src/app/views/sidebar/sample-queries/SampleQueries.tsx
@@ -30,6 +30,7 @@ import { substituteTokens } from '../../../utils/token-helpers';
 import { classNames } from '../../classnames';
 import { sidebarStyles } from '../Sidebar.styles';
 import { isJsonString } from './sample-query-utils';
+import { searchBoxStyles } from '../../../utils/searchbox.styles';
 
 export class SampleQueries extends Component<ISampleQueriesProps, any> {
   constructor(props: ISampleQueriesProps) {
@@ -410,7 +411,7 @@ export class SampleQueries extends Component<ISampleQueriesProps, any> {
           className={classes.searchBox}
           placeholder={messages['Search sample queries']}
           onChange={this.searchValueChanged}
-          styles={{ field: { paddingLeft: 10 } }}
+          styles={searchBoxStyles}
           aria-label={'Search'}
         />
         <hr />