diff --git a/src/fireedge/src/client/containers/VirtualMachines/index.js b/src/fireedge/src/client/containers/VirtualMachines/index.js
index 5a5393bd68..46d1538728 100644
--- a/src/fireedge/src/client/containers/VirtualMachines/index.js
+++ b/src/fireedge/src/client/containers/VirtualMachines/index.js
@@ -15,8 +15,8 @@
  * ------------------------------------------------------------------------- */
 import { ReactElement, useState, memo } from 'react'
 import PropTypes from 'prop-types'
-import { Pin as GotoIcon, RefreshDouble } from 'iconoir-react'
-import { Typography, Box, Stack, Chip, IconButton } from '@mui/material'
+import { Pin as GotoIcon, RefreshDouble, Cancel } from 'iconoir-react'
+import { Typography, Box, Stack, Chip } from '@mui/material'
 import { Row } from 'react-table'
 
 import { useLazyGetVmQuery } from 'client/features/OneApi/vm'
@@ -59,6 +59,7 @@ function VirtualMachines() {
                 <InfoTabs
                   vm={selectedRows[0]?.original}
                   gotoPage={selectedRows[0]?.gotoPage}
+                  unselect={() => selectedRows[0]?.toggleRowSelected(false)}
                 />
               )}
             </>
@@ -74,9 +75,10 @@ function VirtualMachines() {
  *
  * @param {VM} vm - VM to display
  * @param {Function} [gotoPage] - Function to navigate to a page of a VM
+ * @param {Function} [unselect] - Function to unselect a VM
  * @returns {ReactElement} VM details
  */
-const InfoTabs = memo(({ vm, gotoPage }) => {
+const InfoTabs = memo(({ vm, gotoPage, unselect }) => {
   const [getVm, { isFetching }] = useLazyGetVmQuery()
 
   return (
@@ -87,25 +89,37 @@ const InfoTabs = memo(({ vm, gotoPage }) => {
           icon={<RefreshDouble />}
           tooltip={Tr(T.Refresh)}
           isSubmitting={isFetching}
-          onClick={() => getVm({ id: vm.ID })}
+          onClick={() => getVm({ id: vm?.ID })}
         />
-        {gotoPage && (
-          <IconButton title={Tr(T.LocateOnTable)} onClick={gotoPage}>
-            <GotoIcon />
-          </IconButton>
+        {typeof gotoPage === 'function' && (
+          <SubmitButton
+            data-cy="locate-on-table"
+            icon={<GotoIcon />}
+            tooltip={Tr(T.LocateOnTable)}
+            onClick={() => gotoPage()}
+          />
+        )}
+        {typeof unselect === 'function' && (
+          <SubmitButton
+            data-cy="unselect"
+            icon={<Cancel />}
+            tooltip={Tr(T.Close)}
+            onClick={() => unselect()}
+          />
         )}
         <Typography color="text.primary" noWrap>
-          {`#${vm.ID} | ${vm.NAME}`}
+          {`#${vm?.ID} | ${vm?.NAME}`}
         </Typography>
       </Stack>
-      <VmTabs id={vm.ID} />
+      <VmTabs id={vm?.ID} />
     </Stack>
   )
 })
 
 InfoTabs.propTypes = {
-  vm: PropTypes.object.isRequired,
+  vm: PropTypes.object,
   gotoPage: PropTypes.func,
+  unselect: PropTypes.func,
 }
 
 InfoTabs.displayName = 'InfoTabs'
diff --git a/src/fireedge/src/client/containers/VmTemplates/index.js b/src/fireedge/src/client/containers/VmTemplates/index.js
index 0be1b18e05..a30d8c3435 100644
--- a/src/fireedge/src/client/containers/VmTemplates/index.js
+++ b/src/fireedge/src/client/containers/VmTemplates/index.js
@@ -15,18 +15,19 @@
  * ------------------------------------------------------------------------- */
 import { ReactElement, useState, memo } from 'react'
 import PropTypes from 'prop-types'
-import { BookmarkEmpty } from 'iconoir-react'
-import { Typography, Box, Stack, Chip, IconButton } from '@mui/material'
+import { Pin as GotoIcon, RefreshDouble, Cancel } from 'iconoir-react'
+import { Typography, Box, Stack, Chip } from '@mui/material'
 import { Row } from 'react-table'
 
-import vmTemplateApi from 'client/features/OneApi/vmTemplate'
+import { useLazyGetTemplateQuery } from 'client/features/OneApi/vmTemplate'
 import { VmTemplatesTable } from 'client/components/Tables'
 import VmTemplateActions from 'client/components/Tables/VmTemplates/actions'
 import VmTemplateTabs from 'client/components/Tabs/VmTemplate'
 import SplitPane from 'client/components/SplitPane'
 import MultipleTags from 'client/components/MultipleTags'
+import { SubmitButton } from 'client/components/FormControl'
 import { Tr } from 'client/components/HOC'
-import { T } from 'client/constants'
+import { T, VmTemplate } from 'client/constants'
 
 /**
  * Displays a list of VM Templates with a split pane between the list and selected row(s).
@@ -56,8 +57,9 @@ function VmTemplates() {
                 <GroupedTags tags={selectedRows} />
               ) : (
                 <InfoTabs
-                  id={selectedRows[0]?.original?.ID}
+                  template={selectedRows[0]?.original}
                   gotoPage={selectedRows[0]?.gotoPage}
+                  unselect={() => selectedRows[0]?.toggleRowSelected(false)}
                 />
               )}
             </>
@@ -71,39 +73,53 @@ function VmTemplates() {
 /**
  * Displays details of a VM Template.
  *
- * @param {string} id - VM Template id to display
+ * @param {VmTemplate} template - VM Template id to display
  * @param {Function} [gotoPage] - Function to navigate to a page of a VM Template
+ * @param {Function} [unselect] - Function to unselect a VM Template
  * @returns {ReactElement} VM Template details
  */
-const InfoTabs = memo(({ id, gotoPage }) => {
-  const vmTemplate = vmTemplateApi.endpoints.getTemplates.useQueryState(
-    undefined,
-    {
-      selectFromResult: ({ data = [] }) =>
-        data.find((item) => +item.ID === +id),
-    }
-  )
+const InfoTabs = memo(({ template, gotoPage, unselect }) => {
+  const [getTemplate, { isFetching }] = useLazyGetTemplateQuery()
 
   return (
     <Stack overflow="auto">
       <Stack direction="row" alignItems="center" gap={1} mb={1}>
-        <Typography color="text.primary" noWrap>
-          {`#${id} | ${vmTemplate.NAME}`}
-        </Typography>
-        {gotoPage && (
-          <IconButton title={Tr(T.LocateOnTable)} onClick={gotoPage}>
-            <BookmarkEmpty />
-          </IconButton>
+        <SubmitButton
+          data-cy="detail-refresh"
+          icon={<RefreshDouble />}
+          tooltip={Tr(T.Refresh)}
+          isSubmitting={isFetching}
+          onClick={() => getTemplate({ id: template?.ID })}
+        />
+        {typeof gotoPage === 'function' && (
+          <SubmitButton
+            data-cy="locate-on-table"
+            icon={<GotoIcon />}
+            tooltip={Tr(T.LocateOnTable)}
+            onClick={() => gotoPage()}
+          />
         )}
+        {typeof unselect === 'function' && (
+          <SubmitButton
+            data-cy="unselect"
+            icon={<Cancel />}
+            tooltip={Tr(T.Close)}
+            onClick={() => unselect()}
+          />
+        )}
+        <Typography color="text.primary" noWrap>
+          {`#${template?.ID} | ${template?.NAME}`}
+        </Typography>
       </Stack>
-      <VmTemplateTabs id={id} />
+      <VmTemplateTabs id={template?.ID} />
     </Stack>
   )
 })
 
 InfoTabs.propTypes = {
-  id: PropTypes.string.isRequired,
+  template: PropTypes.object,
   gotoPage: PropTypes.func,
+  unselect: PropTypes.func,
 }
 
 InfoTabs.displayName = 'InfoTabs'