diff --git a/src/app/views/sidebar/resource-explorer/ResourceExplorer.tsx b/src/app/views/sidebar/resource-explorer/ResourceExplorer.tsx
index c3e0c3027..1a77cd195 100644
--- a/src/app/views/sidebar/resource-explorer/ResourceExplorer.tsx
+++ b/src/app/views/sidebar/resource-explorer/ResourceExplorer.tsx
@@ -13,7 +13,7 @@ import { AppDispatch, useAppSelector } from '../../../../store';
 import { componentNames, eventTypes, telemetry } from '../../../../telemetry';
 import { IQuery } from '../../../../types/query-runner';
 import { IResource, IResourceLink, ResourceLinkType, ResourceOptions } from '../../../../types/resources';
-import { addResourcePaths } from '../../../services/actions/collections-action-creators';
+import { addResourcePaths, removeResourcePaths } from '../../../services/actions/collections-action-creators';
 import { setSampleQuery } from '../../../services/actions/query-input-action-creators';
 import { GRAPH_URL } from '../../../services/graph-constants';
 import { getResourcesSupportedByVersion } from '../../../utils/resources/resources-filter';
@@ -60,6 +60,10 @@ const UnstyledResourceExplorer = (props: any) => {
     dispatch(addResourcePaths(getResourcePaths(item, version)));
   }
 
+  const removeFromCollection = (item: IResourceLink) => {
+    dispatch(removeResourcePaths(getResourcePaths(item, version)));
+  }
+
   const changeVersion = (_event: React.MouseEvent<HTMLElement>, checked?: boolean | undefined): void => {
     const selectedVersion = checked ? versions[1].key : versions[0].key;
     setVersion(selectedVersion);
@@ -85,6 +89,10 @@ const UnstyledResourceExplorer = (props: any) => {
     if (activity === ResourceOptions.ADD_TO_COLLECTION) {
       addToCollection(context);
     }
+
+    if (activity === ResourceOptions.REMOVE_FROM_COLLECTION) {
+      removeFromCollection(context);
+    }
   }
 
   const setQuery = (resourceLink: INavLink) => {
@@ -156,9 +164,10 @@ const UnstyledResourceExplorer = (props: any) => {
           (<Nav
             groups={items}
             styles={navStyles}
-            onRenderLink={(link: any) => {
+            onRenderLink={link => {
               return <ResourceLink
-                link={link}
+                link={link!}
+                version={version}
                 resourceOptionSelected={(activity: string, context: unknown) =>
                   resourceOptionSelected(activity, context)}
                 classes={classes}
diff --git a/src/app/views/sidebar/resource-explorer/ResourceLink.tsx b/src/app/views/sidebar/resource-explorer/ResourceLink.tsx
index 548a9e208..3341b249a 100644
--- a/src/app/views/sidebar/resource-explorer/ResourceLink.tsx
+++ b/src/app/views/sidebar/resource-explorer/ResourceLink.tsx
@@ -1,19 +1,35 @@
-import { getId, getTheme, IconButton, ITooltipHostStyles, mergeStyleSets, TooltipHost } from '@fluentui/react';
-import { CSSProperties } from 'react';
-import { componentNames, eventTypes, telemetry } from '../../../../telemetry';
+import {
+  getId, getTheme, IconButton, INavLink,
+  ITooltipHostStyles, mergeStyleSets, TooltipHost
+} from '@fluentui/react';
+import { CSSProperties, useEffect } from 'react';
 
-import { ResourceOptions } from '../../../../types/resources';
+import { useAppSelector } from '../../../../store';
+import { componentNames, eventTypes, telemetry } from '../../../../telemetry';
+import { IResourceLink, ResourceOptions } from '../../../../types/resources';
 import { validateExternalLink } from '../../../utils/external-link-validation';
 import { getStyleFor } from '../../../utils/http-methods.utils';
 import { translateMessage } from '../../../utils/translate-messages';
+import { existsInCollection, setExisting } from './resourcelink.utils';
+
 interface IResourceLinkProps {
-  link: any;
+  link: INavLink;
   resourceOptionSelected: Function;
   classes: any;
+  version: string;
 }
 
 const ResourceLink = (props: IResourceLinkProps) => {
-  const { link: resourceLink, classes } = props;
+  const { classes, version } = props;
+  const { collections } = useAppSelector(state => state);
+  const link = props.link as IResourceLink;
+
+  const paths = collections?.find(k => k.isDefault)?.paths || [];
+  const resourceLink = { ...link };
+
+  useEffect(() => {
+    setExisting(resourceLink, existsInCollection(link, paths, version));
+  }, [paths])
 
   const showButtons = {
     div: {
@@ -44,6 +60,8 @@ const ResourceLink = (props: IResourceLinkProps) => {
   const buttonId = getId('targetButton');
   const documentButton = getId('documentButton');
   const documentButtonTooltip = getId('documentButtonTooltip');
+  const removeCollectionButton = getId('removeCollectionButton');
+  const removeCollectionButtonTooltip = getId('removeCollectionButtonTooltip');
 
   const iconButtonStyles = {
     root: { marginRight: 1, zIndex: 10 },
@@ -51,7 +69,7 @@ const ResourceLink = (props: IResourceLinkProps) => {
   };
 
   const methodButtonStyles: CSSProperties = {
-    background: getStyleFor(resourceLink.method),
+    background: getStyleFor(resourceLink.method!),
     alignSelf: 'center',
     margin: 2,
     textTransform: 'uppercase'
@@ -77,6 +95,20 @@ const ResourceLink = (props: IResourceLinkProps) => {
   const calloutProps = { gapSpace: 0 };
   const hostStyles: Partial<ITooltipHostStyles> = { root: { display: 'inline-block' } };
 
+  setExisting(resourceLink, existsInCollection(link, paths, version));
+
+  const handleAddToCollectionClick = (event: any) => {
+    event.preventDefault();
+    event.stopPropagation();
+    props.resourceOptionSelected(ResourceOptions.ADD_TO_COLLECTION, link);
+  }
+
+  const handleRemoveFromCollectionClick = (event: any) => {
+    event.preventDefault();
+    event.stopPropagation();
+    props.resourceOptionSelected(ResourceOptions.REMOVE_FROM_COLLECTION, link);
+  }
+
   return <span className={linkStyle.link} tabIndex={0}>
     {resourceLink.method &&
       <span className={classes.badge} style={methodButtonStyles}>
@@ -91,23 +123,38 @@ const ResourceLink = (props: IResourceLinkProps) => {
     </span>
 
     <div>
-      <TooltipHost
-        content={translateMessage('Add to collection')}
-        id={tooltipId}
+      {resourceLink.isInCollection ? <TooltipHost
+        content={translateMessage('remove')}
+        id={removeCollectionButtonTooltip}
         calloutProps={calloutProps}
         styles={hostStyles}
       >
         <IconButton
-          ariaLabel={translateMessage('Add to collection')}
+          ariaLabel={translateMessage('remove')}
           role='button'
-          id={buttonId}
-          aria-describedby={tooltipId}
+          id={removeCollectionButton}
+          aria-describedby={removeCollectionButtonTooltip}
           styles={iconButtonStyles}
-          menuIconProps={{ iconName: 'BoxAdditionSolid' }}
-          onClick={() => props.resourceOptionSelected(ResourceOptions.ADD_TO_COLLECTION, resourceLink)}
+          menuIconProps={{ iconName: 'BoxSubtractSolid' }}
+          onClick={handleRemoveFromCollectionClick}
         />
-      </TooltipHost>
-
+      </TooltipHost> :
+        <TooltipHost
+          content={translateMessage('Add to collection')}
+          id={tooltipId}
+          calloutProps={calloutProps}
+          styles={hostStyles}
+        >
+          <IconButton
+            ariaLabel={translateMessage('Add to collection')}
+            role='button'
+            id={buttonId}
+            aria-describedby={tooltipId}
+            styles={iconButtonStyles}
+            menuIconProps={{ iconName: 'BoxAdditionSolid' }}
+            onClick={handleAddToCollectionClick}
+          />
+        </TooltipHost>}
 
       {resourceLink.method &&
         <TooltipHost
diff --git a/src/app/views/sidebar/resource-explorer/resourcelink.utils.ts b/src/app/views/sidebar/resource-explorer/resourcelink.utils.ts
new file mode 100644
index 000000000..1ff4f0434
--- /dev/null
+++ b/src/app/views/sidebar/resource-explorer/resourcelink.utils.ts
@@ -0,0 +1,29 @@
+import { IResourceLink } from '../../../../types/resources';
+import { getUrlFromLink } from './resource-explorer.utils';
+
+export const existsInCollection = (link: IResourceLink, paths: IResourceLink[], version: string): boolean => {
+  if (link.method) {
+    const found = paths.find(p => p.key === `${link.key}-${version}` || p.key === link.key);
+    return !!found;
+  } else {
+    const resourceUrl = getUrlFromLink(link) + '/' + link.url.split('-').pop();
+    const pathsInCollection = paths.filter(p => p.url.startsWith(resourceUrl) &&
+      p.key!.split('-').pop() === version);
+    if (pathsInCollection.length > 0) {
+      const noneNodeLinks: IResourceLink[] = link.links.filter((k: IResourceLink) => k.type !== 'node');
+      const list: IResourceLink[] = [];
+      noneNodeLinks.forEach((element: IResourceLink) => {
+        if (pathsInCollection.find((k: IResourceLink) => k.key === element.key ||
+          k.key === `${element.key}-${version}`)) {
+          list.push(element);
+        }
+      });
+      return list.length === noneNodeLinks.length;
+    }
+  }
+  return false;
+};
+
+export function setExisting(item: any, value: boolean) {
+  item.isInCollection = value;
+}
diff --git a/src/types/resources.ts b/src/types/resources.ts
index deca7cb9f..8447064f1 100644
--- a/src/types/resources.ts
+++ b/src/types/resources.ts
@@ -42,7 +42,8 @@ export enum ResourceLinkType {
 }
 
 export enum ResourceOptions {
-  ADD_TO_COLLECTION = 'add-to-collection'
+  ADD_TO_COLLECTION = 'add-to-collection',
+  REMOVE_FROM_COLLECTION = 'remove-from-collection'
 }
 
 export interface Collection {