diff --git a/src/app/views/sidebar/Sidebar.tsx b/src/app/views/sidebar/Sidebar.tsx
index d7c355134..48a9ffdd7 100644
--- a/src/app/views/sidebar/Sidebar.tsx
+++ b/src/app/views/sidebar/Sidebar.tsx
@@ -5,6 +5,7 @@ import { telemetry } from '../../../telemetry';
 import { translateMessage } from '../../utils/translate-messages';
 import History from './history/History';
 import SampleQueries from './sample-queries/SampleQueries';
+
 export const Sidebar = () => {
   return (
     <div>
diff --git a/src/app/views/sidebar/resource-explorer/ResourceExplorer.tsx b/src/app/views/sidebar/resource-explorer/ResourceExplorer.tsx
index 6a2f764ff..9e3e3c655 100644
--- a/src/app/views/sidebar/resource-explorer/ResourceExplorer.tsx
+++ b/src/app/views/sidebar/resource-explorer/ResourceExplorer.tsx
@@ -1,6 +1,7 @@
 import {
   Breadcrumb, ChoiceGroup, DefaultButton,
-  IBreadcrumbItem, IChoiceGroupOption, INavLinkGroup, Label, Nav, SearchBox, Spinner, SpinnerSize, Stack, styled
+  IBreadcrumbItem, IChoiceGroupOption, INavLink, INavLinkGroup, Label, Nav, SearchBox, Spinner, SpinnerSize,
+  Stack, styled
 } from '@fluentui/react';
 import React, { useEffect, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
@@ -20,6 +21,7 @@ import {
   getResourcesSupportedByVersion, getUrlFromLink, removeCounter
 } from './resource-explorer.utils';
 import ResourceLink from './ResourceLink';
+import { navStyles } from './resources.styles';
 
 const unstyledResourceExplorer = (props: any) => {
   const dispatch = useDispatch();
@@ -115,17 +117,6 @@ const unstyledResourceExplorer = (props: any) => {
     }
   }
 
-  const navStyles: any = (properties: any) => ({
-    chevronIcon: [
-      properties.isExpanded && {
-        transform: 'rotate(0deg)'
-      },
-      !properties.isExpanded && {
-        transform: 'rotate(-90deg)'
-      }
-    ]
-  });
-
   const isolateTree = (navLink: any): void => {
     const tree = [
       {
@@ -149,8 +140,9 @@ const unstyledResourceExplorer = (props: any) => {
     setItems(createList(filtered.children, version));
   }
 
-  const clickLink = (ev?: React.MouseEvent<HTMLElement>) => {
+  const clickLink = (ev?: React.MouseEvent<HTMLElement>, item? : INavLink) => {
     ev!.preventDefault();
+    item!.isExpanded = !item!.isExpanded;
   }
 
   const resourceOptionSelected = (activity: string, context: any) => {
diff --git a/src/app/views/sidebar/resource-explorer/resources.styles.ts b/src/app/views/sidebar/resource-explorer/resources.styles.ts
index b2c7715ca..b3c46388a 100644
--- a/src/app/views/sidebar/resource-explorer/resources.styles.ts
+++ b/src/app/views/sidebar/resource-explorer/resources.styles.ts
@@ -15,4 +15,43 @@ export const resourceExplorerStyles = (theme: ITheme) => {
       }
     }
   }
-}
\ No newline at end of file
+}
+
+export const navStyles: any = (properties: any) => ({
+  chevronIcon: [
+    properties.isExpanded && {
+      transform: 'rotate(0deg)'
+    },
+    !properties.isExpanded && {
+      transform: 'rotate(-90deg)'
+    }
+  ],
+  chevronButton: [
+    properties.isExpanded && {
+      selectors: {
+        '::after': {
+          borderStyle: 'none !important',
+          borderLeft: '0px !important'
+        }
+      }
+    },
+    !properties.isExpanded && {
+      selectors: {
+        '::after': {
+          borderStyle: 'none !important',
+          borderLeft: '0px !important'
+        }
+      }
+    }
+  ],
+  link: [
+    properties.isSelected && {
+      selectors: {
+        '::after': {
+          borderStyle: 'none !important',
+          borderLeft: '0px !important'
+        }
+      }
+    }
+  ]
+});
\ No newline at end of file