diff --git a/frontend/components/NewLayout/Common/CTALink.tsx b/frontend/components/NewLayout/Common/CTALink.tsx
index a9558005f..3c08c438a 100644
--- a/frontend/components/NewLayout/Common/CTALink.tsx
+++ b/frontend/components/NewLayout/Common/CTALink.tsx
@@ -25,14 +25,14 @@ const Link = styled(MUILink)(
   &:hover, &:focus {
     text-decoration: underline;
 
-    ${LinkIcon} {
+    ${CTALinkIcon} {
       background-color: ${theme.palette.common.brand.main};
     }
   }
 `,
 ) as EnhancedLink
 
-const LinkIcon = styled("span")(
+export const CTALinkIcon = styled("span")(
   ({ theme }) => `
   align-items: center;
   background-color: ${theme.palette.common.brand.light};
@@ -59,13 +59,13 @@ const CTALink = (props: CTALinkProps) => {
   return (
     <Link target={target} {...rest}>
       {children}
-      <LinkIcon>
+      <CTALinkIcon>
         {isExternal ? (
           <ArrowLeft sx={{ fontSize: "24px" }} />
         ) : (
           <ArrowRight sx={{ fontSize: "24px" }} />
         )}
-      </LinkIcon>
+      </CTALinkIcon>
     </Link>
   )
 }
diff --git a/frontend/components/NewLayout/Common/LinkBox.tsx b/frontend/components/NewLayout/Common/LinkBox.tsx
new file mode 100644
index 000000000..539e6348a
--- /dev/null
+++ b/frontend/components/NewLayout/Common/LinkBox.tsx
@@ -0,0 +1,174 @@
+import React from "react"
+
+import Image, { ImageProps } from "next/image"
+
+import { PropsOf } from "@emotion/react"
+import { Typography } from "@mui/material"
+import { styled } from "@mui/material/styles"
+
+import CTALink, { CTALinkIcon, CTALinkProps } from "./CTALink"
+import { fontSize } from "/src/theme/util"
+
+const LinkBoxContainer = styled("article")(
+  ({ theme }) => `
+  background-color: ${theme.palette.common.grayscale.backgroundBox};
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
+  position: relative;
+
+  &:hover {
+    cursor: pointer;
+
+    ${LinkBoxTitle} {
+      color: ${theme.palette.common.brand.main};
+      text-decoration: underline;
+    }
+    ${LinkBoxLink} {
+      text-decoration: underline;
+      ${CTALinkIcon} {
+        background-color: ${theme.palette.common.brand.main};
+        svg {
+          background-color: ${theme.palette.common.brand.main};
+        }
+        }
+    }
+  }
+`,
+)
+
+const LinkBoxContent = styled("div")`
+  /* */
+`
+
+const LinkBoxImageContainer = styled("div")`
+  margin: 0;
+  display: flex;
+  justify-content: stretch;
+  min-height: 10rem;
+  position: relative;
+
+  &:before {
+    content: "";
+    display: block;
+    padding-top: calc(10 / 16) * 100%;
+    width: 100%;
+  }
+`
+
+const LinkBoxImage = styled(Image)`
+  bottom: 0;
+  height: 100%;
+  left: 0;
+  object-fit: cover;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 100%;
+`
+
+const LinkBoxTitleImageContainer = styled("div")`
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+`
+
+const LinkBoxTitleImage = styled(Image)`
+  object-fit: contain;
+  position: absolute;
+`
+
+const LinkBoxTextContainer = styled("div")`
+  padding: 16px;
+`
+
+const LinkBoxTitle = styled(Typography)(
+  ({ theme }) => `
+  ${fontSize(21, 28)}
+  font-weight: 700;
+  color: ${theme.palette.common.brand.nearlyBlack};
+  letter-spacing: -0.42px;
+  hyphens: auto;
+  word-break: break-word;
+  margin: 0 0 16px;
+
+  ${theme.breakpoints.up("desktop")} {
+    ${fontSize(25, 32)}
+    letter-spacing: -0.5px;
+  }
+`,
+)
+
+const LinkBoxDescription = styled("p")(
+  ({ theme }) => `
+  ${fontSize(15, 22)};
+  color: ${theme.palette.common.grayscale.black};
+  margin: 0;
+
+  ${theme.breakpoints.up("desktop")} {
+    ${fontSize(17, 26)}
+  }
+`,
+)
+
+const LinkBoxLink = styled(CTALink)`
+  margin: 0 -8px 24px 0;
+  align-self: flex-end;
+
+  span[aria-hidden="true"] {
+    position: absolute;
+    inset: 0;
+  }
+
+  &:focus {
+    outline: none;
+  }
+` as typeof CTALink
+
+export interface LinkBoxProps {
+  imageProps?: ImageProps
+  title: string
+  titleImageProps?: ImageProps
+  description?: string
+  linkProps: CTALinkProps
+}
+
+const LinkBox = ({
+  imageProps,
+  title,
+  description,
+  titleImageProps,
+  linkProps,
+  ...props
+}: LinkBoxProps & PropsOf<typeof LinkBoxContainer>) => {
+  return (
+    <LinkBoxContainer {...props}>
+      <LinkBoxContent>
+        {imageProps && (
+          <LinkBoxImageContainer>
+            <LinkBoxImage {...imageProps} />
+          </LinkBoxImageContainer>
+        )}
+        <LinkBoxTextContainer>
+          {titleImageProps ? (
+            <LinkBoxTitleImageContainer>
+              <LinkBoxTitleImage {...titleImageProps} />
+            </LinkBoxTitleImageContainer>
+          ) : (
+            <LinkBoxTitle variant="h3">{title}</LinkBoxTitle>
+          )}
+          {description && (
+            <LinkBoxDescription>{description}</LinkBoxDescription>
+          )}
+        </LinkBoxTextContainer>
+      </LinkBoxContent>
+      <LinkBoxLink {...linkProps}></LinkBoxLink>
+    </LinkBoxContainer>
+  )
+}
+
+export default LinkBox
diff --git a/frontend/components/NewLayout/Common/LinkBoxList.tsx b/frontend/components/NewLayout/Common/LinkBoxList.tsx
new file mode 100644
index 000000000..abdd34bff
--- /dev/null
+++ b/frontend/components/NewLayout/Common/LinkBoxList.tsx
@@ -0,0 +1,78 @@
+import { PropsOf } from "@emotion/react"
+import { styled } from "@mui/material/styles"
+
+import LinkBox, { LinkBoxProps } from "./LinkBox"
+
+const linkBoxListVariants = ["default", "wide"] as const
+
+export type LinkBoxListVariant = (typeof linkBoxListVariants)[number]
+
+const LinkBoxListContainer = styled("div")`
+  display: block;
+`
+
+const LinkBoxListComponent = styled("ul")(
+  ({ theme }) => `
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  display: grid;
+  gap: 32px 0;
+
+  :not(.wide) {
+    ${theme.breakpoints.up(768)} {
+      grid-template-columns: repeat(2, 1fr);
+      gap: 32px 24px;
+    }
+    ${theme.breakpoints.up("desktop")} {
+      grid-template-columns: repeat(3, 1fr);
+    }
+    ${theme.breakpoints.up(1920)} {
+      gap: 32px;
+    }
+  }
+
+  .wide {
+    grid-template-columns: 2fr;
+  }
+`,
+)
+
+const Spacer = styled("div")(
+  ({ theme }) => `
+  display: flex;
+  width: 100%;
+  margin-top: 1.75rem;
+  ${theme.breakpoints.up("md")} {
+    margin-top: 2rem;
+  }
+  ${theme.breakpoints.up("lg")} {
+    margin-top: 2.25rem;
+  }
+`,
+)
+
+interface LinkBoxListProps {
+  items: Array<LinkBoxProps>
+  variant?: LinkBoxListVariant
+  LinkBoxProps?: Omit<PropsOf<typeof LinkBox>, keyof LinkBoxProps>
+}
+
+const LinkBoxList = ({
+  items,
+  variant = "default",
+  LinkBoxProps,
+}: LinkBoxListProps) => (
+  <LinkBoxListContainer>
+    <LinkBoxListComponent className={variant === "wide" ? "wide" : undefined}>
+      {items.map((item) => (
+        <li key={item.linkProps.href as string}>
+          <LinkBox {...item} {...LinkBoxProps} />
+        </li>
+      ))}
+    </LinkBoxListComponent>
+    <Spacer />
+  </LinkBoxListContainer>
+)
+
+export default LinkBoxList
diff --git a/frontend/components/NewLayout/Frontpage/Hero.tsx b/frontend/components/NewLayout/Frontpage/Hero.tsx
index d40eb7a13..1d917691f 100644
--- a/frontend/components/NewLayout/Frontpage/Hero.tsx
+++ b/frontend/components/NewLayout/Frontpage/Hero.tsx
@@ -230,7 +230,7 @@ function Hero() {
       <HeroContainer>
         <HeroImageContainer>
           <HeroImage
-            src="/images/courseimages/doggos.png"
+            src="/images/new/doggos.png"
             width={620}
             height={465}
             priority
diff --git a/frontend/components/NewLayout/Frontpage/Hype.tsx b/frontend/components/NewLayout/Frontpage/Hype.tsx
index 90522f4c6..a472bb601 100644
--- a/frontend/components/NewLayout/Frontpage/Hype.tsx
+++ b/frontend/components/NewLayout/Frontpage/Hype.tsx
@@ -1,13 +1,8 @@
-import { styled } from "@mui/material/styles"
+import { useMemo } from "react"
 
-import { SectionContainer } from "/components/NewLayout/Common"
-import {
-  CardBody,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-  CardWrapper,
-} from "/components/NewLayout/Common/Card"
+import { LinkBoxProps } from "../Common/LinkBox"
+import LinkBoxList from "../Common/LinkBoxList"
+import PartnerDivider from "/components/PartnerDivider"
 import { useTranslator } from "/hooks/useTranslator"
 import NaviTranslations from "/translations/navi"
 
@@ -19,73 +14,93 @@ type NaviItem = {
   link: string
 }
 
-// either 4, 2 or 1 columns, depending on the number of items
-const HypeGrid = styled("div", {
-  shouldForwardProp: (prop) => prop !== "count",
-})<{ count?: number }>(
-  ({ theme, count = 4 }) => `
-  display: grid;
-  grid-gap: 1rem;
-  grid-template-columns: ${
-    count % 2 === 0
-      ? "repeat(auto-fit, minmax(200px, 1fr))"
-      : `repeat(auto-fit, minmax(166px, 1fr))`
-  };
-  padding: 2rem;
-  justify-content: center;
-  width: 80%;
-
-  ${theme.breakpoints.down("lg")} {
-    grid-template-columns: ${
-      count % 2 === 0
-        ? "repeat(auto-fit, minmax(300px, 1fr))"
-        : `repeat(auto-fit, minmax(450px, 1fr))`
-    };
-  }
-
-  ${theme.breakpoints.down("xs")} {
-    padding: 0;
-    width: 100%;
-    grid-template-columns: 1fr;
-  }
-`,
-)
-
-const HypeCardHeader = styled(CardHeader)`
-  background-color: #f5f5f5;
-`
-interface HypeCardProps {
-  item: NaviItem
+type CustomNaviItem = {
+  title: string
+  text: string
+  linkText: string
+  img?: string
+  imgDimensions?: { width: number; height: number }
+  link: string
+  titleImg?: string
+  titleImgDimensions?: { width: number; height: number }
 }
 
-const HypeCard = ({ item: { title, text } }: HypeCardProps) => {
-  return (
-    <CardWrapper>
-      <HypeCardHeader>
-        <CardTitle variant="h5" component="h3">
-          {title}
-        </CardTitle>
-      </HypeCardHeader>
-      <CardBody>
-        <CardDescription>{text}</CardDescription>
-      </CardBody>
-    </CardWrapper>
-  )
-}
 function Hype() {
   const t = useTranslator(NaviTranslations)
 
   const items = t("naviItems") as readonly NaviItem[]
+  const customItems = t("customNaviItems") as readonly CustomNaviItem[]
+
+  const listItems: Array<LinkBoxProps> = useMemo(
+    () =>
+      items.map(({ title, text, link, linkText }) => ({
+        title,
+        description: text,
+        /*imageProps: {
+        src: '/images/navi/' + item.img,
+        alt: item.title,
+        fill: true
+      },*/
+        linkProps: {
+          href: link,
+          children: linkText,
+        },
+      })),
+    [items],
+  )
+
+  const customListItems: Array<LinkBoxProps> = useMemo(
+    () =>
+      customItems.map(
+        ({ title, text, titleImg, titleImgDimensions, link, linkText }) => ({
+          title,
+          titleImage: titleImg,
+          description: text,
+          ...(titleImg
+            ? {
+                titleImageProps: {
+                  src: "/images/navi/" + titleImg,
+                  alt: title,
+                  ...(titleImgDimensions ?? { fill: true }),
+                },
+              }
+            : {}),
+          linkProps: {
+            href: link,
+            children: linkText,
+          },
+        }),
+      ),
+    [customItems],
+  )
 
-  // remember to test with divisible by 2 and 3
   return (
-    <SectionContainer>
-      <HypeGrid count={items.length}>
-        {items.map((item) => (
-          <HypeCard key={item.title ?? item.text} item={item} />
-        ))}
-      </HypeGrid>
-    </SectionContainer>
+    <>
+      <LinkBoxList items={listItems} />
+      {customListItems.length > 0 && (
+        <>
+          <PartnerDivider
+            sx={{
+              h4: {
+                fontSize: "0.875rem",
+                color: "#888",
+              },
+              marginBottom: "0.5rem",
+              paddingLeft: "0",
+            }}
+          />
+          <LinkBoxList
+            items={customListItems}
+            variant="wide"
+            LinkBoxProps={{
+              sx: {
+                backgroundColor: "#ccc",
+              },
+            }}
+          />
+        </>
+      )}
+    </>
   )
 }
 
diff --git a/frontend/pages/_new/index.tsx b/frontend/pages/_new/index.tsx
index 73ad97ee4..e6b844792 100644
--- a/frontend/pages/_new/index.tsx
+++ b/frontend/pages/_new/index.tsx
@@ -5,7 +5,7 @@ import { styled } from "@mui/material/styles"
 import Hero from "/components/NewLayout/Frontpage/Hero"
 import Hype from "/components/NewLayout/Frontpage/Hype"
 import { ModuleNavigation } from "/components/NewLayout/Frontpage/Modules"
-import News from "/components/NewLayout/Frontpage/News"
+// import News from "/components/NewLayout/Frontpage/News"
 import SelectedCourses from "/components/NewLayout/Frontpage/SelectedCourses"
 
 const HomeContainer = styled("div")`
@@ -19,7 +19,7 @@ const Home = () => {
     <HomeContainer>
       <Background />
       <Hero />
-      <News />
+      {/*<News />*/}
       <Hype />
       <SelectedCourses />
       <ModuleNavigation />
diff --git a/frontend/public/images/new/doggos.png b/frontend/public/images/new/doggos.png
new file mode 100644
index 000000000..8b221a8db
Binary files /dev/null and b/frontend/public/images/new/doggos.png differ