diff --git a/client/public/locales/en/translation.json b/client/public/locales/en/translation.json
index f170b96306..f7e7d3b991 100644
--- a/client/public/locales/en/translation.json
+++ b/client/public/locales/en/translation.json
@@ -313,6 +313,7 @@
     "migrationWaves": "Migration waves",
     "migrationWave(s)": "Migration wave(s)",
     "name": "Name",
+    "none": "None",
     "northboundDependencies": "Northbound dependencies",
     "notAvailable": "Not available",
     "notConnected": "Not connected",
@@ -367,6 +368,9 @@
     "tagDeleted": "Tag deleted",
     "tagName": "Tag name",
     "tags": "Tags",
+    "tagsArchetype": "Archetype Tags",
+    "tagsAssessment": "Assessment Tags",
+    "tagsCriteria": "Criteria Tags",
     "target": "Target",
     "tagCategory": "Tag category",
     "tagCategoryDeleted": "Tag category deleted",
@@ -387,6 +391,9 @@
     "tag": "Tag",
     "YAMLTemplate": "YAML template"
   },
+  "titles": {
+    "archetypeDrawer": "Archetype details"
+  },
   "toastr": {
     "success": {
       "saveWhat": "{{type}} {{what}} was successfully saved.",
diff --git a/client/src/app/components/PageDrawerContext.tsx b/client/src/app/components/PageDrawerContext.tsx
index 9da68c42ce..7a6c95ed05 100644
--- a/client/src/app/components/PageDrawerContext.tsx
+++ b/client/src/app/components/PageDrawerContext.tsx
@@ -6,6 +6,7 @@ import {
   DrawerContent,
   DrawerContentBody,
   DrawerHead,
+  DrawerPanelBody,
   DrawerPanelContent,
   DrawerPanelContentProps,
 } from "@patternfly/react-core";
@@ -13,7 +14,7 @@ import pageStyles from "@patternfly/react-styles/css/components/Page/page";
 
 const usePageDrawerState = () => {
   const [isDrawerExpanded, setIsDrawerExpanded] = React.useState(false);
-  const [drawerChildren, setDrawerChildren] =
+  const [drawerPanelContent, setDrawerPanelContent] =
     React.useState<React.ReactNode>(null);
   const [drawerPanelContentProps, setDrawerPanelContentProps] = React.useState<
     Partial<DrawerPanelContentProps>
@@ -23,8 +24,8 @@ const usePageDrawerState = () => {
   return {
     isDrawerExpanded,
     setIsDrawerExpanded,
-    drawerChildren,
-    setDrawerChildren,
+    drawerPanelContent,
+    setDrawerPanelContent,
     drawerPanelContentProps,
     setDrawerPanelContentProps,
     drawerPageKey,
@@ -38,8 +39,8 @@ type PageDrawerState = ReturnType<typeof usePageDrawerState>;
 const PageDrawerContext = React.createContext<PageDrawerState>({
   isDrawerExpanded: false,
   setIsDrawerExpanded: () => {},
-  drawerChildren: null,
-  setDrawerChildren: () => {},
+  drawerPanelContent: null,
+  setDrawerPanelContent: () => {},
   drawerPanelContentProps: {},
   setDrawerPanelContentProps: () => {},
   drawerPageKey: "",
@@ -58,7 +59,7 @@ export const PageContentWithDrawerProvider: React.FC<
   const {
     isDrawerExpanded,
     drawerFocusRef,
-    drawerChildren,
+    drawerPanelContent,
     drawerPanelContentProps,
     drawerPageKey,
   } = pageDrawerState;
@@ -80,7 +81,7 @@ export const PageContentWithDrawerProvider: React.FC<
                 key={drawerPageKey}
                 {...drawerPanelContentProps}
               >
-                {drawerChildren}
+                {drawerPanelContent}
               </DrawerPanelContent>
             }
           >
@@ -98,6 +99,7 @@ let numPageDrawerContentInstances = 0;
 export interface IPageDrawerContentProps {
   isExpanded: boolean;
   onCloseClick: () => void; // Should be used to update local state such that `isExpanded` becomes false.
+  header?: React.ReactNode;
   children: React.ReactNode; // The content to show in the drawer when `isExpanded` is true.
   drawerPanelContentProps?: Partial<DrawerPanelContentProps>; // Additional props for the DrawerPanelContent component.
   focusKey?: string | number; // A unique key representing the object being described in the drawer. When this changes, the drawer will regain focus.
@@ -105,17 +107,18 @@ export interface IPageDrawerContentProps {
 }
 
 export const PageDrawerContent: React.FC<IPageDrawerContentProps> = ({
-  isExpanded: localIsExpandedProp,
+  isExpanded,
   onCloseClick,
+  header = null,
   children,
-  drawerPanelContentProps: localDrawerPanelContentProps,
+  drawerPanelContentProps,
   focusKey,
   pageKey: localPageKeyProp,
 }) => {
   const {
     setIsDrawerExpanded,
     drawerFocusRef,
-    setDrawerChildren,
+    setDrawerPanelContent,
     setDrawerPanelContentProps,
     setDrawerPageKey,
   } = React.useContext(PageDrawerContext);
@@ -137,12 +140,12 @@ export const PageDrawerContent: React.FC<IPageDrawerContentProps> = ({
   // This is the ONLY place where `setIsDrawerExpanded` should be called.
   // To expand/collapse the drawer, use the `isExpanded` prop when rendering PageDrawerContent.
   React.useEffect(() => {
-    setIsDrawerExpanded(localIsExpandedProp);
+    setIsDrawerExpanded(isExpanded);
     return () => {
       setIsDrawerExpanded(false);
-      setDrawerChildren(null);
+      setDrawerPanelContent(null);
     };
-  }, [localIsExpandedProp]);
+  }, [isExpanded, setDrawerPanelContent, setIsDrawerExpanded]);
 
   // Same with pageKey and drawerPanelContentProps, keep them in sync with the local prop on PageDrawerContent.
   React.useEffect(() => {
@@ -150,33 +153,46 @@ export const PageDrawerContent: React.FC<IPageDrawerContentProps> = ({
     return () => {
       setDrawerPageKey("");
     };
-  }, [localPageKeyProp]);
+  }, [localPageKeyProp, setDrawerPageKey]);
 
   React.useEffect(() => {
-    setDrawerPanelContentProps(localDrawerPanelContentProps || {});
-  }, [localDrawerPanelContentProps]);
+    setDrawerPanelContentProps(drawerPanelContentProps || {});
+  }, [drawerPanelContentProps, setDrawerPanelContentProps]);
 
   // If the drawer is already expanded describing app A, then the user clicks app B, we want to send focus back to the drawer.
   React.useEffect(() => {
     drawerFocusRef?.current?.focus();
-  }, [focusKey]);
+  }, [drawerFocusRef, focusKey]);
 
   React.useEffect(() => {
-    setDrawerChildren(
-      <DrawerHead>
-        <span tabIndex={0} ref={drawerFocusRef}>
-          {children}
-        </span>
-        <DrawerActions>
-          <DrawerCloseButton
-            // We call onCloseClick here instead of setIsDrawerExpanded
-            // because we want the isExpanded prop of PageDrawerContent to be the source of truth.
-            onClick={onCloseClick}
-          />
-        </DrawerActions>
-      </DrawerHead>
+    const drawerHead = header === null ? children : header;
+    const drawerPanelBody = header === null ? null : children;
+
+    setDrawerPanelContent(
+      <>
+        <DrawerHead>
+          <span tabIndex={isExpanded ? 0 : -1} ref={drawerFocusRef}>
+            {drawerHead}
+          </span>
+          <DrawerActions>
+            <DrawerCloseButton
+              // We call onCloseClick here instead of setIsDrawerExpanded
+              // because we want the isExpanded prop of PageDrawerContent to be the source of truth.
+              onClick={onCloseClick}
+            />
+          </DrawerActions>
+        </DrawerHead>
+        <DrawerPanelBody>{drawerPanelBody}</DrawerPanelBody>
+      </>
     );
-  }, [children]);
+  }, [
+    children,
+    drawerFocusRef,
+    header,
+    isExpanded,
+    onCloseClick,
+    setDrawerPanelContent,
+  ]);
 
   return null;
 };
diff --git a/client/src/app/pages/archetypes/archetypes-page.tsx b/client/src/app/pages/archetypes/archetypes-page.tsx
index b598df804e..586003ede1 100644
--- a/client/src/app/pages/archetypes/archetypes-page.tsx
+++ b/client/src/app/pages/archetypes/archetypes-page.tsx
@@ -47,6 +47,7 @@ import {
 
 import ArchetypeApplicationsColumn from "./components/archetype-applications-column";
 import ArchetypeDescriptionColumn from "./components/archetype-description-column";
+import ArchetypeDetailDrawer from "./components/archetype-detail-drawer";
 import ArchetypeForm from "./components/archetype-form";
 import ArchetypeMaintainersColumn from "./components/archetype-maintainers-column";
 import ArchetypeTagsColumn from "./components/archetype-tags-column";
@@ -142,9 +143,11 @@ const Archetypes: React.FC = () => {
       paginationToolbarItemProps,
       paginationProps,
       tableProps,
+      getClickableTrProps,
       getThProps,
       getTdProps,
     },
+    activeRowDerivedState: { activeRowItem, clearActiveRow },
   } = tableControls;
 
   // TODO: RBAC access checks need to be added.  Only Architect (and Administrator) personas
@@ -267,9 +270,12 @@ const Archetypes: React.FC = () => {
                 }
                 numRenderedColumns={numRenderedColumns}
               >
-                {currentPageItems?.map((archetype, rowIndex) => (
-                  <Tbody key={archetype.id}>
-                    <Tr>
+                <Tbody>
+                  {currentPageItems?.map((archetype, rowIndex) => (
+                    <Tr
+                      key={archetype.id}
+                      {...getClickableTrProps({ item: archetype })}
+                    >
                       <TableRowContentWithControls
                         {...tableControls}
                         item={archetype}
@@ -318,8 +324,8 @@ const Archetypes: React.FC = () => {
                         </Td>
                       </TableRowContentWithControls>
                     </Tr>
-                  </Tbody>
-                ))}
+                  ))}
+                </Tbody>
               </ConditionalTableBody>
             </Table>
             <SimplePagination
@@ -331,6 +337,11 @@ const Archetypes: React.FC = () => {
         </ConditionalRender>
       </PageSection>
 
+      <ArchetypeDetailDrawer
+        archetype={activeRowItem}
+        onCloseClick={clearActiveRow}
+      />
+
       {/* Create modal */}
       <Modal
         title={t("dialog.title.newArchetype")}
diff --git a/client/src/app/pages/archetypes/components/archetype-detail-drawer.css b/client/src/app/pages/archetypes/components/archetype-detail-drawer.css
new file mode 100644
index 0000000000..0e9741759c
--- /dev/null
+++ b/client/src/app/pages/archetypes/components/archetype-detail-drawer.css
@@ -0,0 +1,6 @@
+.archetype-detail-drawer-list {
+  --pf-v5-c-description-list__term--FontSize: var(--pf-v5-global--FontSize--lg);
+  --pf-v5-c-description-list__description--FontSize: var(
+    --pf-v5-global--FontSize--md
+  );
+}
diff --git a/client/src/app/pages/archetypes/components/archetype-detail-drawer.tsx b/client/src/app/pages/archetypes/components/archetype-detail-drawer.tsx
new file mode 100644
index 0000000000..7a00b6da5f
--- /dev/null
+++ b/client/src/app/pages/archetypes/components/archetype-detail-drawer.tsx
@@ -0,0 +1,186 @@
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+
+import {
+  TextContent,
+  Text,
+  Title,
+  DescriptionList,
+  DescriptionListGroup,
+  DescriptionListTerm,
+  DescriptionListDescription,
+  LabelGroup,
+  Label,
+  Stack,
+  StackItem,
+} from "@patternfly/react-core";
+import spacing from "@patternfly/react-styles/css/utilities/Spacing/spacing";
+
+import { Archetype, Tag } from "@app/api/models";
+import { EmptyTextMessage } from "@app/components/EmptyTextMessage";
+import { PageDrawerContent } from "@app/components/PageDrawerContext";
+
+import "./archetype-detail-drawer.css";
+
+export interface IArchetypeDetailDrawerProps {
+  onCloseClick: () => void;
+  archetype: Archetype | null;
+}
+
+const ArchetypeDetailDrawer: React.FC<IArchetypeDetailDrawerProps> = ({
+  onCloseClick,
+  archetype,
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <PageDrawerContent
+      isExpanded={!!archetype}
+      onCloseClick={onCloseClick}
+      focusKey={archetype?.id}
+      pageKey="archetype-details"
+      header={
+        <TextContent>
+          <Text component="small" className={spacing.mb_0}>
+            {t("titles.archetypeDrawer")}
+          </Text>
+          <Title headingLevel="h2" size="lg" className={spacing.mtXs}>
+            {archetype?.name}
+          </Title>
+        </TextContent>
+      }
+    >
+      <DescriptionList className="archetype-detail-drawer-list">
+        <DescriptionListGroup>
+          <DescriptionListTerm>{t("terms.description")}</DescriptionListTerm>
+          <DescriptionListDescription>
+            {archetype?.description || (
+              <EmptyTextMessage message={t("terms.notAvailable")} />
+            )}
+          </DescriptionListDescription>
+        </DescriptionListGroup>
+
+        <DescriptionListGroup>
+          <DescriptionListTerm>{t("terms.tagsCriteria")}</DescriptionListTerm>
+          <DescriptionListDescription>
+            {archetype?.criteriaTags?.length ?? 0 > 0 ? (
+              <TagLabels tags={archetype?.criteriaTags} />
+            ) : (
+              <EmptyTextMessage message={t("terms.none")} />
+            )}
+          </DescriptionListDescription>
+        </DescriptionListGroup>
+
+        <DescriptionListGroup>
+          <DescriptionListTerm>{t("terms.tagsArchetype")}</DescriptionListTerm>
+          <DescriptionListDescription>
+            {archetype?.tags?.length ?? 0 > 0 ? (
+              <TagLabels tags={archetype?.tags} />
+            ) : (
+              <EmptyTextMessage message={t("terms.none")} />
+            )}
+          </DescriptionListDescription>
+        </DescriptionListGroup>
+
+        <DescriptionListGroup>
+          <DescriptionListTerm>{t("terms.tagsAssessment")}</DescriptionListTerm>
+          <DescriptionListDescription>
+            {archetype?.assessmentTags?.length ?? 0 > 0 ? (
+              <TagLabels tags={archetype?.assessmentTags} />
+            ) : (
+              <EmptyTextMessage message={t("terms.none")} />
+            )}
+          </DescriptionListDescription>
+        </DescriptionListGroup>
+
+        <DescriptionListGroup>
+          <DescriptionListTerm>{t("terms.maintainers")}</DescriptionListTerm>
+          <DescriptionListDescription>
+            <Stack>
+              <StackItem>
+                <TextContent>
+                  <Text>{t("terms.stakeholder(s)")}</Text>
+                </TextContent>
+              </StackItem>
+              <StackItem>
+                {archetype?.stakeholders?.length ?? 0 > 0 ? (
+                  <StakeholderLabels archetype={archetype as Archetype} />
+                ) : (
+                  <EmptyTextMessage message={t("terms.none")} />
+                )}
+              </StackItem>
+            </Stack>
+          </DescriptionListDescription>
+          <DescriptionListDescription>
+            <Stack>
+              <StackItem>
+                <TextContent>
+                  <Text>{t("terms.stakeholderGroup(s)")}</Text>
+                </TextContent>
+              </StackItem>
+              <StackItem>
+                {archetype?.stakeholderGroups?.length ?? 0 > 0 ? (
+                  <StakeholderGroupsLabels archetype={archetype as Archetype} />
+                ) : (
+                  <EmptyTextMessage message={t("terms.none")} />
+                )}
+              </StackItem>
+            </Stack>
+          </DescriptionListDescription>
+        </DescriptionListGroup>
+
+        <DescriptionListGroup>
+          <DescriptionListTerm>{t("terms.comments")}</DescriptionListTerm>
+          <DescriptionListDescription>
+            {archetype?.comments || (
+              <EmptyTextMessage message={t("terms.notAvailable")} />
+            )}
+          </DescriptionListDescription>
+        </DescriptionListGroup>
+      </DescriptionList>
+
+      {/* TODO: action buttons -- primary: "Close", link: "Edit archetype" */}
+    </PageDrawerContent>
+  );
+};
+
+const TagLabels: React.FC<{ tags?: Tag[] }> = ({ tags }) =>
+  (tags?.length ?? 0) === 0 ? null : (
+    <LabelGroup>
+      {(tags as Tag[])
+        .sort((a, b) => a.name.localeCompare(b.name))
+        .map((sh) => (
+          <Label color="grey" key={sh.id}>
+            {sh.name}
+          </Label>
+        ))}
+    </LabelGroup>
+  );
+
+const StakeholderLabels: React.FC<{ archetype: Archetype }> = ({
+  archetype,
+}) =>
+  (archetype.stakeholders?.length ?? 0) === 0 ? null : (
+    <LabelGroup>
+      {archetype.stakeholders?.map((sh) => (
+        <Label color="orange" key={sh.id}>
+          {sh.name}
+        </Label>
+      ))}
+    </LabelGroup>
+  );
+
+const StakeholderGroupsLabels: React.FC<{ archetype: Archetype }> = ({
+  archetype,
+}) =>
+  (archetype.stakeholderGroups?.length ?? 0) === 0 ? null : (
+    <LabelGroup>
+      {archetype.stakeholderGroups?.map((sh) => (
+        <Label color="green" key={sh.id}>
+          {sh.name}
+        </Label>
+      ))}
+    </LabelGroup>
+  );
+
+export default ArchetypeDetailDrawer;