diff --git a/src/components/IOC/GitRefLink/GitRefLink.js b/src/components/IOC/GitRefLink/GitRefLink.js
index 54e07f242e69cc9218757ad18a3e741b06f343d1..2c69f37b8d470d2b71d48f7d2713ad58c525c3ea 100644
--- a/src/components/IOC/GitRefLink/GitRefLink.js
+++ b/src/components/IOC/GitRefLink/GitRefLink.js
@@ -3,9 +3,9 @@
  * Component providing link (and tag) to gitlab
  */
 import React from "react";
-import { Typography, Link as MuiLink, Stack } from "@mui/material";
+import { Typography } from "@mui/material";
 import { string } from "prop-types";
-import LaunchIcon from "@mui/icons-material/Launch";
+import { ExternalLink, ExternalLinkContents } from "../../common/Link";
 
 const propTypes = {
   /** String containing url to gitlab template */
@@ -15,16 +15,7 @@ const propTypes = {
 };
 
 const defaultRenderLinkContents = (revision) => {
-  return (
-    <Stack
-      flexDirection="row"
-      alignItems="center"
-      gap={0.5}
-    >
-      {revision}
-      <LaunchIcon fontSize="small" />
-    </Stack>
-  );
+  return <ExternalLinkContents>{revision}</ExternalLinkContents>;
 };
 
 export default function GitRefLink({
@@ -53,16 +44,13 @@ export default function GitRefLink({
 
   return (
     <Typography display="inline">
-      <MuiLink
+      <ExternalLink
         href={url}
-        target="_blank"
-        rel="noreferrer"
-        underline="hover"
         aria-label={`External Git Link, revision ${revision}`}
         {...LinkProps}
       >
         {renderLinkContents(revision)}
-      </MuiLink>
+      </ExternalLink>
     </Typography>
   );
 }
diff --git a/src/components/common/Link/ExternalLink.js b/src/components/common/Link/ExternalLink.js
new file mode 100644
index 0000000000000000000000000000000000000000..21296d00ca7e09c50e9606d81ebfc2d373d9954b
--- /dev/null
+++ b/src/components/common/Link/ExternalLink.js
@@ -0,0 +1,34 @@
+import React from "react";
+import { Link, Stack, styled } from "@mui/material";
+import LaunchIcon from "@mui/icons-material/Launch";
+
+export const ExternalLinkContents = ({ children }) => {
+  return (
+    <Stack
+      flexDirection="row"
+      alignItems="center"
+      gap={0.5}
+      flexWrap="wrap"
+    >
+      {children}
+      <LaunchIcon fontSize="small" />
+    </Stack>
+  );
+};
+
+const ExternalLink = styled(({ href, children, className, ...props }) => {
+  return (
+    <Link
+      href={href}
+      target="_blank"
+      rel="noreferrer"
+      underline="hover"
+      className={className}
+      {...props}
+    >
+      {children}
+    </Link>
+  );
+})({});
+
+export default ExternalLink;
diff --git a/src/components/common/Link/index.js b/src/components/common/Link/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..be361d8ea903c7156d5e815866bab90d1bf48c75
--- /dev/null
+++ b/src/components/common/Link/index.js
@@ -0,0 +1,3 @@
+import ExternalLink, { ExternalLinkContents } from "./ExternalLink";
+
+export { ExternalLinkContents, ExternalLink };
diff --git a/src/views/host/HostDetailsView.js b/src/views/host/HostDetailsView.js
index 4cd13a712ed1bccc2255a87169f9a451d1cf0c0e..f591e47c1c1825273e70a5da0e2973c01a2c09d1 100644
--- a/src/views/host/HostDetailsView.js
+++ b/src/views/host/HostDetailsView.js
@@ -1,11 +1,7 @@
 import React, { useEffect, useCallback, useContext, useMemo } from "react";
 import {
   Box,
-  Link,
-  Container,
   IconButton,
-  Card,
-  CardContent,
   Typography,
   Link as MuiLink,
   Stack
@@ -34,6 +30,10 @@ import {
 import { apiContext } from "../../api/DeployApi";
 import { usePagination } from "../../hooks/pagination";
 import IOCTable from "../../components/IOC/IOCTable";
+import {
+  ExternalLink,
+  ExternalLinkContents
+} from "../../components/common/Link";
 
 export function HostDetailsView({ id, host }) {
   const { setTitle } = useContext(GlobalAppBarContext);
@@ -164,7 +164,7 @@ export function HostDetailsView({ id, host }) {
     }
   }
 
-  let renderHost = {
+  const renderHost = {
     "registered by": (
       <MuiLink
         component={ReactRouterLink}
@@ -186,29 +186,24 @@ export function HostDetailsView({ id, host }) {
   };
 
   return (
-    <>
-      <IconButton
-        color="inherit"
-        onClick={handleClick}
-        size="large"
-      >
-        <ArrowBackIcon />
-      </IconButton>
-
-      {host && <AlertBannerList alerts={host.alerts} />}
-      {host && (
-        <HostBadge
-          host={host}
-          sx={{ mt: 2.5 }}
-        />
-      )}
-      <Box sx={{ pt: 2 }}>
-        <Typography
-          sx={{ my: 2.5 }}
-          variant="h3"
+    <Stack gap={2}>
+      <Box>
+        <IconButton
+          color="inherit"
+          onClick={handleClick}
+          size="large"
         >
-          IOCs
-        </Typography>
+          <ArrowBackIcon />
+        </IconButton>
+      </Box>
+      {host ? (
+        <>
+          <AlertBannerList alerts={host?.alerts ?? []} />
+          <HostBadge host={host} />
+        </>
+      ) : null}
+      <Stack gap={2}>
+        <Typography variant="h3">IOCs</Typography>
         <IOCTable
           iocs={iocs?.deployedIocs}
           loading={loading || !dataReady}
@@ -216,83 +211,67 @@ export function HostDetailsView({ id, host }) {
           pagination={pagination}
           onPage={onPage}
         />
-      </Box>
+      </Stack>
       <AccessControl
         allowedRoles={["DeploymentToolAdmin", "DeploymentToolIntegrator"]}
         renderNoAccess={() => <></>}
       >
-        <SimpleAccordion
-          summary="Host details"
-          expanded={deserialize(urlState.details_open)}
-          onChange={(event, expanded) =>
-            setUrlState({ details_open: serialize(expanded) })
-          }
-        >
-          {host && (
+        {host ? (
+          <SimpleAccordion
+            summary="Host details"
+            expanded={deserialize(urlState.details_open)}
+            onChange={(event, expanded) =>
+              setUrlState({ details_open: serialize(expanded) })
+            }
+            sx={{ marginTop: "0 !important" }}
+          >
             <KeyValueTable
               obj={renderHost}
               variant="overline"
-              sx={{ border: 0 }}
-              valueOptions={{ headerName: "" }}
             />
-          )}
-        </SimpleAccordion>
+          </SimpleAccordion>
+        ) : null}
       </AccessControl>
       <AccessControl
         allowedRoles={["DeploymentToolAdmin", "DeploymentToolIntegrator"]}
         renderNoAccess={() => <></>}
       >
-        <Box sx={{ pt: 2 }}>
-          <Typography
-            sx={{ my: 2.5 }}
-            variant="h3"
-          >
-            Host log stream
-          </Typography>
-          {host && (
+        <Stack gap={2}>
+          <Typography variant="h3">Host log stream</Typography>
+          {host ? (
             <LokiPanel
               host={host}
               isSyslog
               isDeployed
             />
-          )}
-        </Box>
+          ) : null}
+        </Stack>
       </AccessControl>
-      <Card
-        variant="outlined"
-        sx={{ mt: 2 }}
-      >
-        <CardContent>
-          <Container>
-            <Typography
-              variant="body2"
-              fontWeight="bold"
-            >
-              Open in CSEntry
-            </Typography>
-            <Link
+      <KeyValueTable
+        obj={{
+          "Host Configuration": (
+            <ExternalLink
               href={`https://csentry.esss.lu.se/network/hosts/view/${host?.csEntryHost.name}`}
-              target="_blank"
-              rel="noreferrer"
-              underline="hover"
-            >{`https://csentry.esss.lu.se/network/hosts/view/${host?.csEntryHost?.name}`}</Link>
-
-            <Typography
-              variant="body2"
-              fontWeight="bold"
-              sx={{ marginTop: 2 }}
+              aria-label="Host Configuration"
             >
-              Open in Grafana
-            </Typography>
-            <Link
+              <ExternalLinkContents>
+                {`https://csentry.esss.lu.se/network/hosts/view/${host?.csEntryHost?.name}`}
+              </ExternalLinkContents>
+            </ExternalLink>
+          ),
+          "Host Metrics": (
+            <ExternalLink
               href={`https://grafana.tn.esss.lu.se/d/5zJT23xWz/node-exporter-full?orgId=1&var-node=${host?.csEntryHost.fqdn}`}
-              target="_blank"
-              rel="noreferrer"
-              underline="hover"
-            >{`https://grafana.tn.esss.lu.se/d/5zJT23xWz/node-exporter-full?orgId=1&var-node=${host?.csEntryHost.fqdn}`}</Link>
-          </Container>
-        </CardContent>
-      </Card>
-    </>
+              aria-label="Host Metrics"
+            >
+              <ExternalLinkContents>
+                {`https://grafana.tn.esss.lu.se/d/5zJT23xWz/node-exporter-full?orgId=1&var-node=${host?.csEntryHost.fqdn}`}
+              </ExternalLinkContents>
+            </ExternalLink>
+          )
+        }}
+        variant="overline"
+      />
+    </Stack>
   );
 }