diff --git a/apps/ui/components/application/ApplicationPage.tsx b/apps/ui/components/application/ApplicationPage.tsx
index 400c5426a..e664a67d5 100644
--- a/apps/ui/components/application/ApplicationPage.tsx
+++ b/apps/ui/components/application/ApplicationPage.tsx
@@ -10,8 +10,8 @@ import {
 import { useRouter } from "next/router";
 import Stepper, { StepperProps } from "./Stepper";
 import NotesWhenApplying from "@/components/application/NotesWhenApplying";
-import { getApplicationPath } from "@/modules/urls";
-import BreadcrumbWrapper from "../common/BreadcrumbWrapper";
+import { applicationsPrefix, getApplicationPath } from "@/modules/urls";
+import { Breadcrumb } from "../common/Breadcrumb";
 import { H1 } from "common";
 
 const InnerContainer = styled.div<{ $hideStepper: boolean }>`
@@ -111,9 +111,20 @@ export function ApplicationPageWrapper({
   const title = t(`${translationKeyPrefix}.heading`);
   const subTitle =
     headContent || overrideText || t(`${translationKeyPrefix}.text`);
+
+  const routes = [
+    {
+      slug: applicationsPrefix,
+      title: t("breadcrumb:applications"),
+    },
+    {
+      title: t("breadcrumb:application"),
+    },
+  ] as const;
+
   return (
     <>
-      <BreadcrumbWrapper route={["/applications", "application"]} />
+      <Breadcrumb routes={routes} />
       <div>
         <H1 $noMargin>{title}</H1>
         <p>{subTitle}</p>
diff --git a/apps/ui/components/common/Breadcrumb.tsx b/apps/ui/components/common/Breadcrumb.tsx
index 2357fdb0a..c4d94af5f 100644
--- a/apps/ui/components/common/Breadcrumb.tsx
+++ b/apps/ui/components/common/Breadcrumb.tsx
@@ -1,7 +1,12 @@
-import React, { ElementType, Fragment } from "react";
+import React from "react";
 import styled, { css } from "styled-components";
 import { IconAngleLeft, IconAngleRight } from "hds-react";
-import { fontMedium } from "common";
+import { breakpoints, fontMedium } from "common";
+import { useMedia } from "react-use";
+import Link from "next/link";
+import { Flex } from "common/styles/util";
+import { truncatedText } from "common/styles/cssFragments";
+import { useTranslation } from "next-i18next";
 
 export type RouteItem = {
   title: string;
@@ -9,19 +14,10 @@ export type RouteItem = {
 };
 
 type Props = {
-  routes: RouteItem[];
-  isMobile: boolean;
-  linkComponent?: ElementType;
-  className?: string;
-};
-
-const limits = {
-  default: 25,
-  current: 40,
+  routes: Readonly<RouteItem[]>;
 };
 
 const Nav = styled.nav<{ $isMobile?: boolean }>`
-  font-size: var(--fontsize-body-m);
   display: flex;
   align-items: center;
   line-height: var(--spacing-3-xl);
@@ -35,19 +31,24 @@ const Nav = styled.nav<{ $isMobile?: boolean }>`
   }
 `;
 
-const Item = styled.div`
-  display: flex;
-  align-items: center;
-  max-width: 100%;
-`;
+const Item = styled(Flex).attrs({
+  $alignItems: "center",
+  $direction: "row",
+  $gap: "none",
+})``;
 
 const currentCss = css`
   color: var(--color-black);
   ${fontMedium}
 `;
 
-const Anchor = styled.span<{ $current?: boolean; $isMobile?: boolean }>`
+// const LIMIT_CURRENT_CH = 40;
+const LIMIT_DEFAULT_CH = 25;
+const Anchor = styled(Link)<{ $current?: boolean; $isMobile?: boolean }>`
   && {
+    ${truncatedText}
+    display: inline-block;
+    max-width: ${LIMIT_DEFAULT_CH}ch;
     ${({ $current }) => {
       switch ($current) {
         case true:
@@ -61,102 +62,73 @@ const Anchor = styled.span<{ $current?: boolean; $isMobile?: boolean }>`
       }
     }}
   }
-
-  ${({ $isMobile }) =>
-    $isMobile &&
-    `
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-  `};
-
-  white-space: nowrap;
 `;
 
 const Slug = styled.span<{ $current?: boolean }>`
   ${({ $current }) => $current && currentCss}
-
-  white-space: nowrap;
+  ${truncatedText}
+  max-width: ${LIMIT_DEFAULT_CH}ch;
 `;
 
-export function Breadcrumb({
-  routes = [],
+function BreadcrumbImpl({
+  routes,
   isMobile,
-  linkComponent,
-  className,
-}: Props): JSX.Element {
-  const Link = linkComponent || Fragment;
-
+}: Pick<Props, "routes"> & { isMobile: boolean }): JSX.Element | null {
   const routesWithSlug = routes?.filter((n) => n.slug != null && n.slug !== "");
   const lastRoute = routes[routes.length - 1];
   const lastRouteWithSlug = routesWithSlug[routesWithSlug.length - 1];
-
   // TODO why are we doing this? is there a case where we need to do this?
   // or would it just be better to pass hideMobileBreadcrumb prop to the component
   // instead of having hidden logic here?
   const isMobileEnabled =
     isMobile &&
-    routesWithSlug.length > 1 &&
+    routesWithSlug.length > 0 &&
     lastRoute.slug !== lastRouteWithSlug.slug;
 
+  if (!isMobileEnabled && isMobile) {
+    return null;
+  }
+
+  if (isMobile) {
+    return (
+      <Item>
+        <IconAngleLeft size="s" aria-hidden="true" />
+        <Anchor href={lastRouteWithSlug?.slug ?? ""} $isMobile>
+          {lastRouteWithSlug.title}
+        </Anchor>
+      </Item>
+    );
+  }
+
   return (
-    <Nav
-      className={className}
-      data-testid="breadcrumb__wrapper"
-      $isMobile={isMobile}
-    >
-      {!isMobile ? (
-        routes?.map((item, index) => (
-          <Item key={`${item.title}${item.slug}`}>
-            {index > 0 && (
-              <IconAngleRight size="s" aria-hidden className="angleRight" />
-            )}
-            {item.slug ? (
-              <Link {...(linkComponent && { href: item.slug, passHref: true })}>
-                <Anchor
-                  {...(!linkComponent && { href: item.slug })}
-                  $current={index === routes.length - 1}
-                >
-                  {index === routes.length - 1
-                    ? item.title.length > limits.current
-                      ? `${item.title.slice(0, limits.current)}...`
-                      : item.title
-                    : item.title.length > limits.default
-                      ? `${item.title.slice(0, limits.default)}...`
-                      : item.title}
-                </Anchor>
-              </Link>
-            ) : (
-              <Slug $current={index === routes.length - 1}>
-                {index === routes.length - 1
-                  ? item.title.length > limits.current
-                    ? `${item.title.slice(0, limits.current)}...`
-                    : item.title
-                  : item.title.length > limits.default
-                    ? `${item.title.slice(0, limits.default)}...`
-                    : item.title}
-              </Slug>
-            )}
-          </Item>
-        ))
-      ) : isMobileEnabled ? (
-        <Item>
-          <IconAngleLeft size="s" aria-hidden className="angleLeft" />
-          <Link
-            {...(linkComponent && {
-              href: lastRouteWithSlug?.slug,
-              passHref: true,
-            })}
-          >
-            <Anchor
-              {...(!linkComponent && { href: lastRouteWithSlug?.slug })}
-              $isMobile
-            >
-              {lastRouteWithSlug.title}
+    <>
+      {routes.map((item, index) => (
+        <Item key={`${item.title}${item.slug}`}>
+          {index > 0 && <IconAngleRight size="s" aria-hidden="true" />}
+          {item.slug ? (
+            <Anchor href={item.slug} $current={index === routes.length - 1}>
+              {item.title}
             </Anchor>
-          </Link>
+          ) : (
+            <Slug $current={index === routes.length - 1}>{item.title}</Slug>
+          )}
         </Item>
-      ) : null}
+      ))}
+    </>
+  );
+}
+
+export function Breadcrumb({ routes }: Props): JSX.Element {
+  const { t } = useTranslation();
+  const isMobile = useMedia(`(max-width: ${breakpoints.m})`, false);
+
+  const routesWithFrontPage = [
+    { title: t("breadcrumb:frontpage"), slug: "/" },
+    ...routes,
+  ];
+  return (
+    <Nav data-testid="breadcrumb__wrapper" $isMobile={isMobile}>
+      <BreadcrumbImpl routes={routesWithFrontPage} isMobile={isMobile} />
     </Nav>
   );
 }
diff --git a/apps/ui/components/common/BreadcrumbWrapper.tsx b/apps/ui/components/common/BreadcrumbWrapper.tsx
deleted file mode 100644
index dcaa5a881..000000000
--- a/apps/ui/components/common/BreadcrumbWrapper.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import React from "react";
-import { useMedia } from "react-use";
-import { Breadcrumb, RouteItem } from "./Breadcrumb";
-import { useTranslation } from "next-i18next";
-import { breakpoints } from "common/src/common/style";
-import Link, { LinkProps } from "next/link";
-import { trim } from "lodash";
-
-type Props = {
-  route: Array<string | RouteItem>;
-  className?: string;
-};
-
-// Breadcrumbs are shared with admin ui which uses react-router which requires an anchor elem
-const LinkWrapper = (props: LinkProps & { children?: React.ReactNode }) => (
-  <Link {...props}>{props.children}</Link>
-);
-
-function BreadcrumbWrapper({ route, className }: Props): JSX.Element {
-  const { t } = useTranslation();
-  const isMobile = useMedia(`(max-width: ${breakpoints.m})`, false);
-
-  const routes = route.map((n) => {
-    if (typeof n === "object") {
-      return n;
-    }
-    return {
-      title: t(`breadcrumb:${trim(n, "/")}`),
-      ...(n.includes("/") && { slug: n }),
-    };
-  });
-
-  return (
-    <Breadcrumb
-      linkComponent={LinkWrapper}
-      routes={[{ title: t("breadcrumb:frontpage"), slug: "/" }, ...routes]}
-      isMobile={isMobile}
-      className={className}
-    />
-  );
-}
-
-export default BreadcrumbWrapper;
diff --git a/apps/ui/modules/applicationRound.ts b/apps/ui/modules/applicationRound.ts
index b8540b6b9..1077afd15 100644
--- a/apps/ui/modules/applicationRound.ts
+++ b/apps/ui/modules/applicationRound.ts
@@ -1,8 +1,14 @@
 import { type ApplicationRoundNode } from "common/gql/gql-types";
 import { getTranslation } from "./util";
+import { Maybe } from "@/gql/gql-types";
 
 export function getApplicationRoundName(
-  applicationRound: Pick<ApplicationRoundNode, "nameFi" | "nameSv" | "nameEn">
+  applicationRound?:
+    | Maybe<Pick<ApplicationRoundNode, "nameFi" | "nameSv" | "nameEn">>
+    | undefined
 ): string {
+  if (applicationRound == null) {
+    return "-";
+  }
   return getTranslation(applicationRound, "name");
 }
diff --git a/apps/ui/pages/applications/[id]/sent.tsx b/apps/ui/pages/applications/[id]/sent.tsx
index 97039dd14..0d97f4092 100644
--- a/apps/ui/pages/applications/[id]/sent.tsx
+++ b/apps/ui/pages/applications/[id]/sent.tsx
@@ -2,59 +2,60 @@ import { IconAngleRight } from "hds-react";
 import React from "react";
 import { useTranslation } from "next-i18next";
 import styled from "styled-components";
-import { breakpoints } from "common/src/common/style";
-import { fontMedium, H1 } from "common";
+import { H1 } from "common";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import type { GetServerSidePropsContext } from "next";
-import { applicationsPath } from "@/modules/urls";
+import { applicationsPath, applicationsPrefix } from "@/modules/urls";
 import { getCommonServerSideProps } from "@/modules/serverUtils";
-import BreadcrumbWrapper from "@/components/common/BreadcrumbWrapper";
+import { Breadcrumb } from "@/components/common/Breadcrumb";
 import { ButtonLikeLink } from "@/components/common/ButtonLikeLink";
-
-const FontMedium = styled.div`
-  ${fontMedium}
-`;
+import { toNumber } from "common/src/helpers";
 
 const Paragraph = styled.p`
-  white-space: pre-wrap;
-  margin-bottom: var(--spacing-xl);
-
-  @media (min-width: ${breakpoints.m}) {
-    max-width: 60%;
-  }
+  max-width: var(--prose-width);
 `;
 
 function Sent(): JSX.Element {
   const { t } = useTranslation();
 
+  const routes = [
+    {
+      slug: applicationsPrefix,
+      title: t("breadcrumb:applications"),
+    },
+    {
+      title: t("application:sent.heading"),
+    },
+  ] as const;
+
   return (
     <>
-      <BreadcrumbWrapper route={["/applications", "application"]} />
-      <H1>{t("application:sent.heading")}</H1>
-      <FontMedium as="p">{t("application:sent.subHeading")}</FontMedium>
+      <Breadcrumb routes={routes} />
+      <div>
+        <H1 $noMargin>{t("application:sent.heading")}</H1>
+        <Paragraph>{t("application:sent.subHeading")}</Paragraph>
+      </div>
       <Paragraph>{t("application:sent.body")}</Paragraph>
-      <ButtonLikeLink href={applicationsPath}>
-        {t("navigation:Item.applications")}
-        <IconAngleRight aria-hidden="true" />
-      </ButtonLikeLink>
+      <div>
+        <ButtonLikeLink href={applicationsPath}>
+          {t("navigation:Item.applications")}
+          <IconAngleRight aria-hidden="true" />
+        </ButtonLikeLink>
+      </div>
     </>
   );
 }
 
 export async function getServerSideProps(ctx: GetServerSidePropsContext) {
-  const { locale } = ctx;
-
-  // TODO should fetch on SSR but we need authentication for it
-  const { query } = ctx;
+  const { locale, query } = ctx;
   const { id } = query;
+  // TODO should fetch the application here to check it's actually sent
   const pkstring = Array.isArray(id) ? id[0] : id;
-  const pk = Number.isNaN(Number(pkstring)) ? undefined : Number(pkstring);
+  const pk = toNumber(pkstring);
   return {
     notFound: pk == null,
     props: {
       ...getCommonServerSideProps(),
-      key: locale ?? "fi",
-      id: pk ?? null,
       ...(await serverSideTranslations(locale ?? "fi")),
     },
   };
diff --git a/apps/ui/pages/applications/[id]/view/[section]/index.tsx b/apps/ui/pages/applications/[id]/view/[section]/index.tsx
index 2602f9ef9..0ac1a37de 100644
--- a/apps/ui/pages/applications/[id]/view/[section]/index.tsx
+++ b/apps/ui/pages/applications/[id]/view/[section]/index.tsx
@@ -13,12 +13,12 @@ import { H1 } from "common";
 import { AllReservations } from "@/components/application/ApprovedReservations";
 import { gql } from "@apollo/client";
 import { useTranslation } from "next-i18next";
-import BreadcrumbWrapper from "@/components/common/BreadcrumbWrapper";
+import { Breadcrumb } from "@/components/common/Breadcrumb";
 import {
   convertLanguageCode,
   getTranslationSafe,
 } from "common/src/common/util";
-import { getApplicationPath } from "@/modules/urls";
+import { applicationsPrefix, getApplicationPath } from "@/modules/urls";
 
 function ViewAll({ applicationSection }: PropsNarrowed): JSX.Element {
   const { t, i18n } = useTranslation();
@@ -29,7 +29,7 @@ function ViewAll({ applicationSection }: PropsNarrowed): JSX.Element {
   const lang = convertLanguageCode(i18n.language);
   const route = [
     {
-      slug: "/applications",
+      slug: applicationsPrefix,
       title: t("breadcrumb:applications"),
     },
     {
@@ -37,13 +37,13 @@ function ViewAll({ applicationSection }: PropsNarrowed): JSX.Element {
       title: getTranslationSafe(applicationRound, "name", lang),
     },
     {
-      slug: "",
       title: applicationSection.name,
     },
-  ];
+  ] as const;
+
   return (
     <>
-      <BreadcrumbWrapper route={route} />
+      <Breadcrumb routes={route} />
       <H1 $noMargin>{heading}</H1>
       <AllReservations applicationSection={applicationSection} />
     </>
diff --git a/apps/ui/pages/applications/[id]/view/index.tsx b/apps/ui/pages/applications/[id]/view/index.tsx
index 3a0c3e157..b5fa6672f 100644
--- a/apps/ui/pages/applications/[id]/view/index.tsx
+++ b/apps/ui/pages/applications/[id]/view/index.tsx
@@ -22,9 +22,10 @@ import {
   BREAKPOINT,
 } from "@/components/application/ApprovedReservations";
 import { gql } from "@apollo/client";
-import BreadcrumbWrapper from "@/components/common/BreadcrumbWrapper";
+import { Breadcrumb } from "@/components/common/Breadcrumb";
 import { H1 } from "common";
 import styled from "styled-components";
+import { applicationsPrefix } from "@/modules/urls";
 
 const TabPanel = styled(Tabs.TabPanel)`
   && {
@@ -53,9 +54,19 @@ function View({ application, tos }: PropsNarrowed): JSX.Element {
   const showReservations =
     application.status === ApplicationStatusChoice.ResultsSent;
 
+  const routes = [
+    {
+      slug: applicationsPrefix,
+      title: t("breadcrumb:applications"),
+    },
+    {
+      title: t("breadcrumb:application"),
+    },
+  ] as const;
+
   return (
     <>
-      <BreadcrumbWrapper route={["/applications", "application"]} />
+      <Breadcrumb routes={routes} />
       <H1 $noMargin>{applicationRoundName}</H1>
       {showReservations ? (
         <>
diff --git a/apps/ui/pages/applications/index.tsx b/apps/ui/pages/applications/index.tsx
index d0d219b08..b052790fe 100644
--- a/apps/ui/pages/applications/index.tsx
+++ b/apps/ui/pages/applications/index.tsx
@@ -19,6 +19,7 @@ import { getCommonServerSideProps } from "@/modules/serverUtils";
 import { createApolloClient } from "@/modules/apolloClient";
 import { useCurrentUser } from "@/hooks/user";
 import { H1 } from "common";
+import { Breadcrumb } from "@/components/common/Breadcrumb";
 
 type Props = Awaited<ReturnType<typeof getServerSideProps>>["props"];
 type PropsNarrowed = Exclude<Props, { notFound: boolean }>;
@@ -174,12 +175,17 @@ function ApplicationsPage({
     }
   };
 
+  const routes = [
+    {
+      title: t("breadcrumb:applications"),
+    },
+  ] as const;
+
   return (
     <>
+      <Breadcrumb routes={routes} />
       <div>
-        <H1 $marginTop="l" $marginBottom="none">
-          {t("applications:heading")}
-        </H1>
+        <H1 $noMargin>{t("applications:heading")}</H1>
         <p>{t("applications:subHeading")}</p>
       </div>
       <ApplicationGroups
diff --git a/apps/ui/pages/recurring/[id]/criteria/index.tsx b/apps/ui/pages/recurring/[id]/criteria/index.tsx
index 044d40cd7..12662f236 100644
--- a/apps/ui/pages/recurring/[id]/criteria/index.tsx
+++ b/apps/ui/pages/recurring/[id]/criteria/index.tsx
@@ -12,21 +12,21 @@ import { breakpoints, H1 } from "common";
 import { createApolloClient } from "@/modules/apolloClient";
 import Sanitize from "@/components/common/Sanitize";
 import { getTranslation } from "@/modules/util";
-import BreadcrumbWrapper from "@/components/common/BreadcrumbWrapper";
+import { Breadcrumb } from "@/components/common/Breadcrumb";
 import { getApplicationRoundName } from "@/modules/applicationRound";
 import { getCommonServerSideProps } from "@/modules/serverUtils";
 import NotesWhenApplying from "@/components/application/NotesWhenApplying";
+import { getApplicationRoundPath, seasonalPrefix } from "@/modules/urls";
 
 type Props = Awaited<ReturnType<typeof getServerSideProps>>["props"];
 type PropsNarrowed = Exclude<Props, { notFound: boolean }>;
 
-export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
+export async function getServerSideProps(ctx: GetServerSidePropsContext) {
   const { locale, params } = ctx;
   const id = Number(params?.id);
   const commonProps = getCommonServerSideProps();
   const apolloClient = createApolloClient(commonProps.apiBaseUrl, ctx);
 
-  // TODO use a singular query for this
   const { data } = await apolloClient.query<
     ApplicationRoundsUiQuery,
     ApplicationRoundsUiQueryVariables
@@ -47,7 +47,7 @@ export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
       ...(await serverSideTranslations(locale ?? "fi")),
     },
   };
-};
+}
 
 const ContentWrapper = styled.div`
   display: flex;
@@ -61,9 +61,24 @@ function Criteria({ applicationRound }: PropsNarrowed): JSX.Element | null {
   const { t } = useTranslation();
 
   const title = `${getApplicationRoundName(applicationRound)} ${t("applicationRound:criteria")}`;
+
+  const routes = [
+    {
+      slug: seasonalPrefix,
+      title: t("breadcrumb:recurring"),
+    },
+    {
+      title: getApplicationRoundName(applicationRound),
+      slug: getApplicationRoundPath(applicationRound.pk),
+    },
+    {
+      title: t("breadcrumb:criteria"),
+    },
+  ] as const;
+
   return (
     <>
-      <BreadcrumbWrapper route={["/recurring", "criteria"]} />
+      <Breadcrumb routes={routes} />
       <H1 $noMargin>{title}</H1>
       <ContentWrapper>
         <Sanitize html={getTranslation(applicationRound, "criteria")} />
diff --git a/apps/ui/pages/recurring/[id]/index.tsx b/apps/ui/pages/recurring/[id]/index.tsx
index da78fce81..450fc52d8 100644
--- a/apps/ui/pages/recurring/[id]/index.tsx
+++ b/apps/ui/pages/recurring/[id]/index.tsx
@@ -15,7 +15,6 @@ import {
 import { filterNonNullable } from "common/src/helpers";
 import { SeasonalSearchForm } from "@/components/search/SeasonalSearchForm";
 import { createApolloClient } from "@/modules/apolloClient";
-import BreadcrumbWrapper from "@/components/common/BreadcrumbWrapper";
 import { ReservationUnitCard } from "@/components/search/ReservationUnitCard";
 import useReservationUnitsList from "@/hooks/useReservationUnitList";
 import { ListWithPagination } from "@/components/common/ListWithPagination";
@@ -30,6 +29,9 @@ import { useSearchQuery } from "@/hooks/useSearchQuery";
 import { SortingComponent } from "@/components/SortingComponent";
 import { useRouter } from "next/router";
 import { useSearchParams } from "next/navigation";
+import { Breadcrumb } from "@/components/common/Breadcrumb";
+import { getApplicationRoundPath, seasonalPrefix } from "@/modules/urls";
+import { getApplicationRoundName } from "@/modules/applicationRound";
 
 type Props = Awaited<ReturnType<typeof getServerSideProps>>["props"];
 
@@ -101,18 +103,32 @@ function SeasonalSearch({
   );
   const pageInfo = currData?.reservationUnits?.pageInfo;
 
+  const routes = [
+    {
+      slug: seasonalPrefix,
+      title: t("breadcrumb:recurring"),
+    },
+    {
+      title: getApplicationRoundName(selectedApplicationRound),
+      slug: getApplicationRoundPath(applicationRoundPk),
+    },
+    {
+      title: t("breadcrumb:search"),
+    },
+  ] as const;
+
   return (
     <>
+      <Breadcrumb routes={routes} />
+      <div>
+        <H1 $noMargin>{t("search:recurring.heading")}</H1>
+        <p>{t("search:recurring.text")}</p>
+      </div>
       {error ? (
         <Notification size="small" type="alert">
           {t("searchResultList:error")}
         </Notification>
       ) : null}
-      <BreadcrumbWrapper route={["/recurring", "search"]} />
-      <div>
-        <H1 $noMargin>{t("search:recurring.heading")}</H1>
-        <p>{t("search:recurring.text")}</p>
-      </div>
       <SeasonalSearchForm
         unitOptions={unitOptions}
         reservationUnitTypeOptions={reservationUnitTypeOptions}
diff --git a/apps/ui/pages/recurring/index.tsx b/apps/ui/pages/recurring/index.tsx
index 5904885fc..8f2f62e8c 100644
--- a/apps/ui/pages/recurring/index.tsx
+++ b/apps/ui/pages/recurring/index.tsx
@@ -15,6 +15,7 @@ import { ApplicationRoundCard } from "@/components/recurring/ApplicationRoundCar
 import { createApolloClient } from "@/modules/apolloClient";
 import { getCommonServerSideProps } from "@/modules/serverUtils";
 import { Flex } from "common/styles/util";
+import { Breadcrumb } from "@/components/common/Breadcrumb";
 
 type Props = Awaited<ReturnType<typeof getServerSideProps>>["props"];
 
@@ -72,12 +73,17 @@ function RecurringLander({ applicationRounds }: Props): JSX.Element {
       ar.status !== ApplicationRoundStatusChoice.Upcoming
   );
 
+  const routes = [
+    {
+      title: t("breadcrumb:recurring"),
+    },
+  ] as const;
+
   return (
     <>
+      <Breadcrumb routes={routes} />
       <div>
-        <H1 $marginTop="l" $marginBottom="none">
-          {t("recurringLander:heading")}
-        </H1>
+        <H1 $noMargin>{t("recurringLander:heading")}</H1>
         <p>{t("recurringLander:subHeading")}</p>
       </div>
       <>
diff --git a/apps/ui/pages/reservation-unit/[...params].tsx b/apps/ui/pages/reservation-unit/[...params].tsx
index 628342d84..bac722f3f 100644
--- a/apps/ui/pages/reservation-unit/[...params].tsx
+++ b/apps/ui/pages/reservation-unit/[...params].tsx
@@ -25,7 +25,11 @@ import {
 } from "@gql/gql-types";
 import { type Inputs } from "common/src/reservation-form/types";
 import { createApolloClient } from "@/modules/apolloClient";
-import { getReservationPath, getReservationUnitPath } from "@/modules/urls";
+import {
+  getReservationPath,
+  getReservationUnitPath,
+  getSingleSearchPath,
+} from "@/modules/urls";
 import Sanitize from "@/components/common/Sanitize";
 import { isReservationUnitFreeOfCharge } from "@/modules/reservationUnit";
 import {
@@ -51,7 +55,7 @@ import {
 import { ApolloError } from "@apollo/client";
 import { PinkBox as PinkBoxBase } from "@/components/reservation/styles";
 import { Flex } from "common/styles/util";
-import BreadcrumbWrapper from "@/components/common/BreadcrumbWrapper";
+import { Breadcrumb } from "@/components/common/Breadcrumb";
 import { ReservationPageWrapper } from "@/components/reservations/styles";
 
 const StyledReservationInfoCard = styled(ReservationInfoCard)`
@@ -440,27 +444,26 @@ function NewReservation(props: PropsNarrowed): JSX.Element | null {
 }
 
 function NewReservationWrapper(props: PropsNarrowed): JSX.Element | null {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
   const { reservation, reservationUnit } = props;
-  const lang = convertLanguageCode("fi");
+  const lang = convertLanguageCode(i18n.language);
   const routes = [
     {
-      slug: "/search",
+      slug: getSingleSearchPath(),
       title: t("breadcrumb:search"),
     },
     {
       slug: getReservationUnitPath(reservationUnit?.pk),
-      title: getTranslationSafe(reservationUnit, "name", lang) ?? "",
+      title: getTranslationSafe(reservationUnit, "name", lang) ?? "-",
     },
     {
-      // NOTE Don't set slug. It hides the mobile breadcrumb
       title: t("reservations:reservationName", { id: reservation.pk }),
     },
-  ];
+  ] as const;
 
   return (
     <>
-      <BreadcrumbWrapper route={routes} />
+      <Breadcrumb routes={routes} />
       <NewReservation {...props} />
     </>
   );
diff --git a/apps/ui/pages/reservation-unit/[id].tsx b/apps/ui/pages/reservation-unit/[id].tsx
index 4ba7faa0f..3f68fbcfd 100644
--- a/apps/ui/pages/reservation-unit/[id].tsx
+++ b/apps/ui/pages/reservation-unit/[id].tsx
@@ -99,7 +99,7 @@ import {
   getSingleSearchPath,
 } from "@/modules/urls";
 import { Notification } from "hds-react";
-import BreadcrumbWrapper from "@/components/common/BreadcrumbWrapper";
+import { Breadcrumb } from "@/components/common/Breadcrumb";
 import { Flex } from "common/styles/util";
 import { SubmitButton } from "@/styles/util";
 
@@ -795,13 +795,12 @@ function ReservationUnitWrapped(props: PropsNarrowed) {
   const reservationUnitName = getTranslationSafe(reservationUnit, "name", lang);
   const routes = [
     { slug: getSingleSearchPath(), title: t("breadcrumb:search") },
-    // NOTE Don't set slug. It hides the mobile breadcrumb
     { title: reservationUnitName ?? "-" },
-  ];
+  ] as const;
 
   return (
     <>
-      <BreadcrumbWrapper route={routes} />
+      <Breadcrumb routes={routes} />
       <ReservationUnit {...props} />
     </>
   );
diff --git a/apps/ui/pages/reservation/cancel.tsx b/apps/ui/pages/reservation/cancel.tsx
index 277773a37..5e1ee10d0 100644
--- a/apps/ui/pages/reservation/cancel.tsx
+++ b/apps/ui/pages/reservation/cancel.tsx
@@ -15,7 +15,8 @@ import {
   type DeleteReservationMutation,
   type DeleteReservationMutationVariables,
 } from "@/gql/gql-types";
-import BreadcrumbWrapper from "@/components/common/BreadcrumbWrapper";
+import { Breadcrumb } from "@/components/common/Breadcrumb";
+import { reservationsPrefix } from "@/modules/urls";
 
 // This is the callback page from webstore if user cancels the order
 // TODO this would be nicer if we could use a reservation/[id]/cancelled page (or reservation/[id])
@@ -28,20 +29,17 @@ function Cancel({ apiBaseUrl }: NarrowedProps): JSX.Element {
   const { t } = useTranslation();
   const routes = [
     {
-      slug: "/reservations",
+      slug: reservationsPrefix,
       title: t("breadcrumb:reservations"),
     },
     {
-      // NOTE Don't set slug. It hides the mobile breadcrumb
-      // TODO change this to "Peruttu" or something similar
-      title: t("reservations:reservationName", { id: 0 }),
+      title: t("reservations:cancelReservation"),
     },
-  ];
+  ] as const;
 
-  // using breadcrumbs because our page layout is clearer when all pages include them
   return (
     <>
-      <BreadcrumbWrapper route={routes} />
+      <Breadcrumb routes={routes} />
       <H1 $noMargin>{t("reservations:reservationCancelledTitle")}</H1>
       <CancelledLinkSet apiBaseUrl={apiBaseUrl} />
     </>
diff --git a/apps/ui/pages/reservations/[id]/cancel.tsx b/apps/ui/pages/reservations/[id]/cancel.tsx
index c4a47a0f8..2ff5cf927 100644
--- a/apps/ui/pages/reservations/[id]/cancel.tsx
+++ b/apps/ui/pages/reservations/[id]/cancel.tsx
@@ -14,8 +14,8 @@ import { getCommonServerSideProps } from "@/modules/serverUtils";
 import { createApolloClient } from "@/modules/apolloClient";
 import { base64encode, filterNonNullable } from "common/src/helpers";
 import { isReservationCancellable } from "@/modules/reservation";
-import { getReservationPath } from "@/modules/urls";
-import BreadcrumbWrapper from "@/components/common/BreadcrumbWrapper";
+import { getReservationPath, reservationsPrefix } from "@/modules/urls";
+import { Breadcrumb } from "@/components/common/Breadcrumb";
 import { useTranslation } from "next-i18next";
 
 type PropsNarrowed = Exclude<Props, { notFound: boolean }>;
@@ -25,7 +25,7 @@ function ReservationCancelPage(props: PropsNarrowed): JSX.Element {
   const { reservation } = props;
   const routes = [
     {
-      slug: "/reservations",
+      slug: reservationsPrefix,
       title: t("breadcrumb:reservations"),
     },
     {
@@ -33,15 +33,13 @@ function ReservationCancelPage(props: PropsNarrowed): JSX.Element {
       title: t("reservations:reservationName", { id: reservation.pk }),
     },
     {
-      // NOTE Don't set slug. It hides the mobile breadcrumb
-      slug: "",
       title: t("reservations:cancelReservation"),
     },
-  ];
+  ] as const;
 
   return (
     <>
-      <BreadcrumbWrapper route={routes} />
+      <Breadcrumb routes={routes} />
       <ReservationCancellation {...props} reservation={reservation} />
     </>
   );
diff --git a/apps/ui/pages/reservations/[id]/confirmation.tsx b/apps/ui/pages/reservations/[id]/confirmation.tsx
index 6b6bfb50c..b32766b0a 100644
--- a/apps/ui/pages/reservations/[id]/confirmation.tsx
+++ b/apps/ui/pages/reservations/[id]/confirmation.tsx
@@ -13,11 +13,12 @@ import { getCommonServerSideProps } from "@/modules/serverUtils";
 import { base64encode } from "common/src/helpers";
 import { createApolloClient } from "@/modules/apolloClient";
 import { ReservationPageWrapper } from "@/components/reservations/styles";
-import BreadcrumbWrapper from "@/components/common/BreadcrumbWrapper";
+import { Breadcrumb } from "@/components/common/Breadcrumb";
 import {
   getReservationPath,
   getReservationUnitPath,
   reservationsPath,
+  reservationsPrefix,
 } from "@/modules/urls";
 import { Button, IconCalendar, IconLinkExternal } from "hds-react";
 import styled from "styled-components";
@@ -37,7 +38,7 @@ function Confirmation({ apiBaseUrl, reservation }: PropsNarrowed) {
   const { t } = useTranslation();
   const routes = [
     {
-      slug: "/reservations",
+      slug: reservationsPrefix,
       title: t("breadcrumb:reservations"),
     },
     {
@@ -45,16 +46,14 @@ function Confirmation({ apiBaseUrl, reservation }: PropsNarrowed) {
       title: t("reservations:reservationName", { id: reservation.pk }),
     },
     {
-      // NOTE Don't set slug. It hides the mobile breadcrumb
-      slug: "",
       title: t("breadcrumb:confirmation"),
     },
-  ];
+  ] as const;
 
   return (
     // TODO the info card used to be on top on mobile (now it's below)
     <>
-      <BreadcrumbWrapper route={routes} />
+      <Breadcrumb routes={routes} />
       <ReservationPageWrapper $nRows={4}>
         <ReservationInfoCard reservation={reservation} type="confirmed" />
         <ReservationConfirmation
diff --git a/apps/ui/pages/reservations/[id]/edit.tsx b/apps/ui/pages/reservations/[id]/edit.tsx
index 7a4efffac..86bb6e400 100644
--- a/apps/ui/pages/reservations/[id]/edit.tsx
+++ b/apps/ui/pages/reservations/[id]/edit.tsx
@@ -40,8 +40,8 @@ import {
   transformReservation,
 } from "@/modules/reservation";
 import { NotModifiableReason } from "@/components/reservation/NotModifiableReason";
-import { getReservationPath } from "@/modules/urls";
-import BreadcrumbWrapper from "@/components/common/BreadcrumbWrapper";
+import { getReservationPath, reservationsPrefix } from "@/modules/urls";
+import { Breadcrumb } from "@/components/common/Breadcrumb";
 import { breakpoints, H1 } from "common";
 
 type Props = Awaited<ReturnType<typeof getServerSideProps>>["props"];
@@ -234,7 +234,7 @@ function ReservationEditPageWrapper(props: PropsNarrowed): JSX.Element {
   const { reservation } = props;
   const routes = [
     {
-      slug: "/reservations",
+      slug: reservationsPrefix,
       title: t("breadcrumb:reservations"),
     },
     {
@@ -242,15 +242,13 @@ function ReservationEditPageWrapper(props: PropsNarrowed): JSX.Element {
       title: t("reservations:reservationName", { id: reservation.pk }),
     },
     {
-      // NOTE Don't set slug. It hides the mobile breadcrumb
-      slug: "",
       title: t("reservations:modifyReservationTime"),
     },
-  ];
+  ] as const;
 
   return (
     <>
-      <BreadcrumbWrapper route={routes} />
+      <Breadcrumb routes={routes} />
       <ReservationEditPage {...props} />
     </>
   );
diff --git a/apps/ui/pages/reservations/[id]/index.tsx b/apps/ui/pages/reservations/[id]/index.tsx
index 78fbbae63..8f922681f 100644
--- a/apps/ui/pages/reservations/[id]/index.tsx
+++ b/apps/ui/pages/reservations/[id]/index.tsx
@@ -40,7 +40,7 @@ import {
   getReservationUnitName,
   isReservationUnitFreeOfCharge,
 } from "@/modules/reservationUnit";
-import BreadcrumbWrapper from "@/components/common/BreadcrumbWrapper";
+import { Breadcrumb } from "@/components/common/Breadcrumb";
 import { ReservationStatus } from "@/components/reservation/ReservationStatus";
 import { AddressSection } from "@/components/reservation-unit/Address";
 import { ReservationInfoCard } from "@/components/reservation/ReservationInfoCard";
@@ -59,7 +59,11 @@ import {
 import { useRouter } from "next/router";
 import { successToast } from "common/src/common/toast";
 import { ReservationPageWrapper } from "@/components/reservations/styles";
-import { getReservationPath, getReservationUnitPath } from "@/modules/urls";
+import {
+  getReservationPath,
+  getReservationUnitPath,
+  reservationsPrefix,
+} from "@/modules/urls";
 
 type PropsNarrowed = Exclude<Props, { notFound: boolean }>;
 
@@ -382,14 +386,13 @@ function Reservation({
 
   const routes = [
     {
-      slug: "/reservations",
+      slug: reservationsPrefix,
       title: t("breadcrumb:reservations"),
     },
     {
-      // NOTE Don't set slug. It hides the mobile breadcrumb
       title: t("reservations:reservationName", { id: reservation.pk }),
     },
-  ];
+  ] as const;
 
   const hasReceipt =
     order?.receiptUrl &&
@@ -398,7 +401,7 @@ function Reservation({
 
   return (
     <>
-      <BreadcrumbWrapper route={routes} />
+      <Breadcrumb routes={routes} />
       <ReservationPageWrapper data-testid="reservation__content" $nRows={3}>
         <Flex style={{ gridColumn: "1 / span 1", gridRow: "1 / span 1" }}>
           <Flex
diff --git a/apps/ui/pages/reservations/index.tsx b/apps/ui/pages/reservations/index.tsx
index 49f53e62d..24fe22000 100644
--- a/apps/ui/pages/reservations/index.tsx
+++ b/apps/ui/pages/reservations/index.tsx
@@ -21,6 +21,7 @@ import { toApiDate } from "common/src/common/util";
 import { addDays } from "date-fns";
 import { errorToast } from "common/src/common/toast";
 import { TabWrapper } from "common/styles/util";
+import { Breadcrumb } from "@/components/common/Breadcrumb";
 
 const StyledTabPanel = styled(TabPanel)`
   display: flex;
@@ -95,11 +96,16 @@ function Reservations(): JSX.Element | null {
     data?.reservations?.edges?.map((edge) => edge?.node)
   );
 
+  const routes = [
+    {
+      title: t("breadcrumb:reservations"),
+    },
+  ] as const;
+
   return (
     <>
-      <H1 $marginTop="l" $marginBottom="none">
-        {t(`navigation:Item.reservations`)}
-      </H1>
+      <Breadcrumb routes={routes} />
+      <H1 $noMargin>{t(`navigation:Item.reservations`)}</H1>
       {/* HDS tabs doesn't support data-testid */}
       <TabWrapper data-testid="Reservations--page__tab_container">
         <Tabs>
diff --git a/apps/ui/pages/search/index.tsx b/apps/ui/pages/search/index.tsx
index 222510188..cd275f68d 100644
--- a/apps/ui/pages/search/index.tsx
+++ b/apps/ui/pages/search/index.tsx
@@ -18,6 +18,7 @@ import { useSearchQuery } from "@/hooks/useSearchQuery";
 import { SortingComponent } from "@/components/SortingComponent";
 import { Flex } from "common/styles/util";
 import { useSearchParams } from "next/navigation";
+import { Breadcrumb } from "@/components/common/Breadcrumb";
 
 export async function getServerSideProps(ctx: GetServerSidePropsContext) {
   const { locale } = ctx;
@@ -80,16 +81,21 @@ function SearchSingle({
     }
   }, [content?.current?.offsetTop, currData?.reservationUnits, isMobile]);
 
+  const routes = [
+    {
+      title: t("breadcrumb:search"),
+    },
+  ] as const;
+
   return (
     <>
+      <Breadcrumb routes={routes} />
+      <H1 $noMargin>{t("search:single.heading")}</H1>
       {error ? (
         <Notification size="small" type="alert">
           {t("searchResultList:error")}
         </Notification>
       ) : null}
-      <H1 $marginTop="l" $marginBottom="none">
-        {t("search:single.heading")}
-      </H1>
       <SingleSearchForm
         unitOptions={unitOptions}
         reservationUnitTypeOptions={reservationUnitTypeOptions}