diff --git a/commafeed-client/src/components/ActionButton.tsx b/commafeed-client/src/components/ActionButton.tsx
index 01bead87..a4d6e66b 100644
--- a/commafeed-client/src/components/ActionButton.tsx
+++ b/commafeed-client/src/components/ActionButton.tsx
@@ -29,7 +29,7 @@ export const ActionButton = forwardRef<HTMLDivElement, ActionButtonProps>((props
     const iconOnly = (mobile && !props.showLabelOnMobile) || (!mobile && props.hideLabelOnDesktop)
 
     return (
-        <Box ref={ref}>
+        <Box ref={ref} className="cf-action-button">
             {iconOnly && (
                 <Tooltip label={label} openDelay={Constants.tooltip.delay}>
                     <ActionIcon
diff --git a/commafeed-client/src/components/content/FeedEntries.tsx b/commafeed-client/src/components/content/FeedEntries.tsx
index 56860d2d..d83f6c7a 100644
--- a/commafeed-client/src/components/content/FeedEntries.tsx
+++ b/commafeed-client/src/components/content/FeedEntries.tsx
@@ -288,7 +288,7 @@ export function FeedEntries() {
     return (
         <InfiniteScroll
             id="entries"
-            className={`view-mode-${viewMode}`}
+            className={`cf-entries cf-view-mode-${viewMode}`}
             initialLoad={false}
             loadMore={async () => await (!loading && dispatch(loadMoreEntries()))}
             hasMore={hasMore}
diff --git a/commafeed-client/src/components/content/FeedEntry.tsx b/commafeed-client/src/components/content/FeedEntry.tsx
index 006508b3..4d977c5a 100644
--- a/commafeed-client/src/components/content/FeedEntry.tsx
+++ b/commafeed-client/src/components/content/FeedEntry.tsx
@@ -184,10 +184,10 @@ export function FeedEntry(props: FeedEntryProps) {
             </a>
             {props.expanded && (
                 <Box px={paddingX} pb={paddingY} onClick={props.onBodyClick}>
-                    <Box className={classes.body}>
+                    <Box className={`${classes.body} cf-content`}>
                         <FeedEntryBody entry={props.entry} />
                     </Box>
-                    <Divider variant="dashed" my={paddingY} />
+                    <Divider variant="dashed" my={paddingY} className="cf-footer-divider" />
                     <FeedEntryFooter entry={props.entry} />
                 </Box>
             )}
diff --git a/commafeed-client/src/components/content/FeedEntryFooter.tsx b/commafeed-client/src/components/content/FeedEntryFooter.tsx
index ad11883b..e5bb7dfe 100644
--- a/commafeed-client/src/components/content/FeedEntryFooter.tsx
+++ b/commafeed-client/src/components/content/FeedEntryFooter.tsx
@@ -37,7 +37,7 @@ export function FeedEntryFooter(props: FeedEntryFooterProps) {
         )
 
     return (
-        <Group justify="space-between">
+        <Group justify="space-between" className="cf-footer">
             <Group gap={spacing}>
                 {props.entry.markable && (
                     <ActionButton
diff --git a/commafeed-client/src/components/content/header/FeedEntryHeader.tsx b/commafeed-client/src/components/content/header/FeedEntryHeader.tsx
index e2028efc..0ffd40ee 100644
--- a/commafeed-client/src/components/content/header/FeedEntryHeader.tsx
+++ b/commafeed-client/src/components/content/header/FeedEntryHeader.tsx
@@ -29,8 +29,8 @@ export function FeedEntryHeader(props: FeedEntryHeaderProps) {
         read: props.entry.read,
     })
     return (
-        <Box>
-            <Flex align="flex-start" justify="space-between">
+        <Box className="cf-header">
+            <Flex align="flex-start" justify="space-between" className="cf-header-title">
                 <Flex align="flex-start" className={classes.main}>
                     {props.showStarIcon && (
                         <Box ml={-5}>
@@ -41,7 +41,7 @@ export function FeedEntryHeader(props: FeedEntryHeaderProps) {
                 </Flex>
                 {props.showExternalLinkIcon && <OpenExternalLink entry={props.entry} />}
             </Flex>
-            <Flex align="center">
+            <Flex align="center" className="cf-header-subtitle">
                 <FeedFavicon url={props.entry.iconUrl} />
                 <Space w={6} />
                 <Box c="dimmed">
@@ -51,7 +51,7 @@ export function FeedEntryHeader(props: FeedEntryHeaderProps) {
                 </Box>
             </Flex>
             {props.expanded && (
-                <Box c="dimmed">
+                <Box className="cf-header-details">
                     {props.entry.author && <span>by {props.entry.author}</span>}
                     {props.entry.author && props.entry.categories && <span>&nbsp;·&nbsp;</span>}
                     {props.entry.categories && <span>{props.entry.categories}</span>}
diff --git a/commafeed-client/src/components/header/Header.tsx b/commafeed-client/src/components/header/Header.tsx
index 0df73531..d6867f41 100644
--- a/commafeed-client/src/components/header/Header.tsx
+++ b/commafeed-client/src/components/header/Header.tsx
@@ -42,11 +42,14 @@ function HeaderToolbar(props: { children: React.ReactNode }) {
                 display: "flex",
                 justifyContent: "space-between",
             }}
+            className="cf-toolbar"
         >
             {props.children}
         </Box>
     ) : (
-        <Group gap={spacing}>{props.children}</Group>
+        <Group gap={spacing} className="cf-toolbar">
+            {props.children}
+        </Group>
     )
 }
 
@@ -75,7 +78,7 @@ export function Header() {
 
     if (!settings) return <Loader />
     return (
-        <Center>
+        <Center className="cf-toolbar-wrapper">
             <HeaderToolbar>
                 <ActionButton
                     icon={<TbArrowUp size={iconSize} />}
diff --git a/commafeed-client/src/components/sidebar/Tree.tsx b/commafeed-client/src/components/sidebar/Tree.tsx
index ffebfd96..ccfa8dca 100644
--- a/commafeed-client/src/components/sidebar/Tree.tsx
+++ b/commafeed-client/src/components/sidebar/Tree.tsx
@@ -182,7 +182,7 @@ export function Tree() {
             <OnDesktop>
                 <TreeSearch feeds={feeds} />
             </OnDesktop>
-            <Box>
+            <Box className="cf-tree">
                 {allCategoryNode()}
                 {starredCategoryNode()}
                 {root.children.map(c => recursiveCategoryNode(c))}
diff --git a/commafeed-client/src/components/sidebar/TreeNode.tsx b/commafeed-client/src/components/sidebar/TreeNode.tsx
index f791de8b..26d55777 100644
--- a/commafeed-client/src/components/sidebar/TreeNode.tsx
+++ b/commafeed-client/src/components/sidebar/TreeNode.tsx
@@ -68,18 +68,18 @@ export function TreeNode(props: TreeNodeProps) {
         <Box
             py={1}
             pl={props.level * 20}
-            className={classes.node}
+            className={`${classes.node} cf-treenode cf-treenode-${props.type}`}
             onClick={(e: React.MouseEvent) => props.onClick(e, props.id)}
             data-id={props.id}
             data-type={props.type}
             data-unread-count={props.unread}
         >
-            <Box mr={6} onClick={(e: React.MouseEvent) => props.onIconClick?.(e, props.id)}>
+            <Box mr={6} onClick={(e: React.MouseEvent) => props.onIconClick?.(e, props.id)} className="cf-treenode-icon">
                 <Center>{typeof props.icon === "string" ? <FeedFavicon url={props.icon} /> : props.icon}</Center>
             </Box>
             <Box className={classes.nodeText}>{props.name}</Box>
             {!props.expanded && (
-                <Box>
+                <Box className="cf-treenode-unread-count">
                     <UnreadCount unreadCount={props.unread} />
                 </Box>
             )}
diff --git a/commafeed-client/src/components/sidebar/TreeSearch.tsx b/commafeed-client/src/components/sidebar/TreeSearch.tsx
index 4a9818bf..f8ca9159 100644
--- a/commafeed-client/src/components/sidebar/TreeSearch.tsx
+++ b/commafeed-client/src/components/sidebar/TreeSearch.tsx
@@ -1,7 +1,7 @@
 import { msg } from "@lingui/core/macro"
 import { useLingui } from "@lingui/react"
 import { Trans } from "@lingui/react/macro"
-import { TextInput } from "@mantine/core"
+import { Box, TextInput } from "@mantine/core"
 import { Spotlight, type SpotlightActionData, spotlight } from "@mantine/spotlight"
 import { redirectToFeed } from "app/redirect/thunks"
 import { useAppDispatch } from "app/store"
@@ -33,7 +33,7 @@ export function TreeSearch(props: TreeSearchProps) {
     useMousetrap("g u", () => spotlight.open())
 
     return (
-        <>
+        <Box className="cf-treesearch">
             <TextInput
                 placeholder={_(msg`Search`)}
                 leftSection={searchIcon}
@@ -58,6 +58,6 @@ export function TreeSearch(props: TreeSearchProps) {
                 }}
                 nothingFound={<Trans>Nothing found</Trans>}
             />
-        </>
+        </Box>
     )
 }
diff --git a/commafeed-client/src/components/sidebar/UnreadCount.tsx b/commafeed-client/src/components/sidebar/UnreadCount.tsx
index d808af51..63e39235 100644
--- a/commafeed-client/src/components/sidebar/UnreadCount.tsx
+++ b/commafeed-client/src/components/sidebar/UnreadCount.tsx
@@ -18,7 +18,7 @@ export function UnreadCount(props: { unreadCount: number }) {
     const count = props.unreadCount >= 10000 ? "10k+" : props.unreadCount
     return (
         <Tooltip label={props.unreadCount} disabled={props.unreadCount === count} openDelay={Constants.tooltip.delay}>
-            <Badge className={classes.badge} variant="light" fullWidth>
+            <Badge className={`${classes.badge} cf-badge`} variant="light" fullWidth>
                 {count}
             </Badge>
         </Tooltip>
diff --git a/commafeed-client/src/pages/app/FeedEntriesPage.tsx b/commafeed-client/src/pages/app/FeedEntriesPage.tsx
index 716c88ff..9444f2ca 100644
--- a/commafeed-client/src/pages/app/FeedEntriesPage.tsx
+++ b/commafeed-client/src/pages/app/FeedEntriesPage.tsx
@@ -88,7 +88,7 @@ export function FeedEntriesPage(props: FeedEntriesPageProps) {
     return (
         // add some room at the bottom of the page in order to be able to scroll the current entry at the top of the page when expanding
         <Box mb={viewport.height * 0.7}>
-            <Group gap="xl">
+            <Group gap="xl" className="cf-entries-title">
                 {sourceWebsiteUrl && (
                     <a href={sourceWebsiteUrl} target="_blank" rel="noreferrer" className={classes.sourceWebsiteLink}>
                         <Title order={3}>{title}</Title>
diff --git a/commafeed-client/src/pages/app/Layout.tsx b/commafeed-client/src/pages/app/Layout.tsx
index ef3c99a5..4e23ae72 100644
--- a/commafeed-client/src/pages/app/Layout.tsx
+++ b/commafeed-client/src/pages/app/Layout.tsx
@@ -35,9 +35,16 @@ interface LayoutProps {
 function LogoAndTitle() {
     const dispatch = useAppDispatch()
     return (
-        <Center inline onClick={async () => await dispatch(redirectToRootCategory())} style={{ cursor: "pointer" }}>
-            <Logo size={24} />
-            <Title order={3} pl="md">
+        <Center
+            className="cf-logo-title"
+            inline
+            onClick={async () => await dispatch(redirectToRootCategory())}
+            style={{ cursor: "pointer" }}
+        >
+            <Box className="cf-logo">
+                <Logo size={24} />
+            </Box>
+            <Title order={3} pl="md" className="cf-title">
                 CommaFeed
             </Title>
         </Center>