diff --git a/frontends/main/next.config.ts b/frontends/main/next.config.ts
index 41e735d388..a45c3aac67 100644
--- a/frontends/main/next.config.ts
+++ b/frontends/main/next.config.ts
@@ -5,7 +5,9 @@ import { withSentryConfig } from "@sentry/nextjs"
 import { validateEnv } from "./validateEnv"
 // import { theme } from "ol-components/ThemeProvider/ThemeProvider"
 // import { theme } from "../ol-components/ThemeProvider/ThemeProvider"
-import { theme } from "ol-components"
+// import { theme } from "ol-components"
+// import { theme } from "../ol-components/src/components/ThemeProvider/ThemeProvider"
+import { theme } from "./src/common/theme/theme"
 import BundleAnalyzer from "@next/bundle-analyzer"
 
 validateEnv()
diff --git a/frontends/ol-components/src/components/Alert/Alert.tsx b/frontends/ol-components/src/components/Alert/Alert.tsx
index d6cc9f52a1..3174d8199e 100644
--- a/frontends/ol-components/src/components/Alert/Alert.tsx
+++ b/frontends/ol-components/src/components/Alert/Alert.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import React, { useEffect } from "react"
-import styled from "@emotion/styled"
+import { styled } from "@pigment-css/react"
 import { default as MuiAlert, AlertColor } from "@mui/material/Alert"
 import { theme } from "../ThemeProvider/ThemeProvider"
 import type { AlertProps as MuiAlertProps } from "@mui/material/Alert"
@@ -10,6 +10,17 @@ type Colors = {
   [_Severity in AlertColor]: string
 }
 
+type Severities = {
+  [Key in AlertColor as Capitalize<Key>]: Key
+}
+
+const Severities: Severities = {
+  Success: "success",
+  Info: "info",
+  Warning: "warning",
+  Error: "error",
+}
+
 const COLORS: Colors = {
   info: theme.custom.colors.blue,
   success: theme.custom.colors.green,
@@ -21,12 +32,11 @@ type AlertStyleProps = {
   severity: AlertColor
 }
 
-const AlertStyled = styled(MuiAlert)<AlertStyleProps>(({ severity }) => ({
+const AlertStyled = styled(MuiAlert)<AlertStyleProps>({
   padding: "11px 16px",
   borderRadius: 4,
   borderWidth: 2,
   borderStyle: "solid",
-  borderColor: COLORS[severity],
   background: "#FFF",
   ".MuiAlert-message": {
     ...theme.typography.body2,
@@ -40,7 +50,6 @@ const AlertStyled = styled(MuiAlert)<AlertStyleProps>(({ severity }) => ({
     marginRight: 8,
     svg: {
       width: 16,
-      fill: COLORS[severity],
     },
   },
   button: {
@@ -50,7 +59,24 @@ const AlertStyled = styled(MuiAlert)<AlertStyleProps>(({ severity }) => ({
       background: "none",
     },
   },
-}))
+  variants: [
+    Severities.Success,
+    Severities.Info,
+    Severities.Warning,
+    Severities.Error,
+  ].map((severity) => ({
+    props: { severity },
+    style: {
+      borderColor: COLORS[severity],
+      ".MuiAlert-icon": {
+        marginRight: 8,
+        svg: {
+          fill: severity,
+        },
+      },
+    },
+  })),
+})
 
 const Hidden = styled.span({ display: "none" })
 
diff --git a/frontends/ol-components/src/components/Banner/Banner.tsx b/frontends/ol-components/src/components/Banner/Banner.tsx
index 22dd0bdaa6..71b2e073b1 100644
--- a/frontends/ol-components/src/components/Banner/Banner.tsx
+++ b/frontends/ol-components/src/components/Banner/Banner.tsx
@@ -1,7 +1,7 @@
 import React from "react"
 import styled from "@emotion/styled"
 import Typography from "@mui/material/Typography"
-import Container from "@mui/material/Container"
+import Container from "@mui/material-pigment-css/Container"
 import { ResponsiveStyleValue, SxProps } from "@mui/system"
 import { Theme } from "../ThemeProvider/ThemeProvider"
 
diff --git a/frontends/ol-components/src/components/BannerPage/BannerPage.tsx b/frontends/ol-components/src/components/BannerPage/BannerPage.tsx
index 57e76e6fa4..f9a0250898 100644
--- a/frontends/ol-components/src/components/BannerPage/BannerPage.tsx
+++ b/frontends/ol-components/src/components/BannerPage/BannerPage.tsx
@@ -1,4 +1,5 @@
 import React from "react"
+// import { styled } from "@pigment-css/react"
 import styled from "@emotion/styled"
 
 const BANNER_HEIGHT = "200px"
diff --git a/frontends/ol-components/src/components/Breadcrumbs/Breadcrumbs.tsx b/frontends/ol-components/src/components/Breadcrumbs/Breadcrumbs.tsx
index d12cbb9a65..7eb144f0a6 100644
--- a/frontends/ol-components/src/components/Breadcrumbs/Breadcrumbs.tsx
+++ b/frontends/ol-components/src/components/Breadcrumbs/Breadcrumbs.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "@emotion/styled"
+import { styled } from "@pigment-css/react"
 import { RiArrowRightSLine } from "@remixicon/react"
 import { Link } from "../Link/Link"
 import { theme } from "../ThemeProvider/ThemeProvider"
diff --git a/frontends/ol-components/src/components/Card/Card.tsx b/frontends/ol-components/src/components/Card/Card.tsx
index 7e316dd8e4..5d499723b3 100644
--- a/frontends/ol-components/src/components/Card/Card.tsx
+++ b/frontends/ol-components/src/components/Card/Card.tsx
@@ -7,14 +7,19 @@ import React, {
   useCallback,
   AriaAttributes,
 } from "react"
-import styled from "@emotion/styled"
+import { styled } from "@pigment-css/react"
 import { theme } from "../ThemeProvider/ThemeProvider"
 import { pxToRem } from "../ThemeProvider/typography"
 import { Link } from "../Link/Link"
 import { default as NextImage, ImageProps as NextImageProps } from "next/image"
-import { truncateText } from "../TruncateText/TruncateText"
+// import { truncateText } from "../TruncateText/TruncateText"
 
-export type Size = "small" | "medium"
+export const Sizes = {
+  Small: "small",
+  Medium: "medium",
+} as const
+
+export type Size = (typeof Sizes)[keyof typeof Sizes]
 
 type LinkableProps = {
   href?: string
@@ -54,34 +59,57 @@ export const Linkable: React.FC<LinkableProps> = ({
 }
 
 export const BaseContainer = styled.div<{ display?: CSSProperties["display"] }>(
-  ({ theme, onClick, display = "block" }) => [
-    {
-      borderRadius: "8px",
-      border: `1px solid ${theme.custom.colors.lightGray2}`,
-      background: theme.custom.colors.white,
-      display,
-      overflow: "hidden", // to clip image so they match border radius
-    },
-    onClick && {
-      "&:hover": {
-        borderColor: theme.custom.colors.silverGrayLight,
-        boxShadow:
-          "0 2px 4px 0 rgb(37 38 43 / 10%), 0 2px 4px 0 rgb(37 38 43 / 10%)",
-        cursor: "pointer",
+  {
+    borderRadius: "8px",
+    border: `1px solid ${theme.custom.colors.lightGray2}`,
+    background: theme.custom.colors.white,
+    overflow: "hidden", // to clip image so they match border radius
+    variants: [
+      {
+        props: { display: "block" },
+        style: { display: "block" },
       },
-    },
-  ],
+      {
+        props: { display: "inline" },
+        style: { display: "inline" },
+      },
+      {
+        props: (props) => !!props.onClick,
+        style: {
+          "&:hover": {
+            borderColor: theme.custom.colors.silverGrayLight,
+            boxShadow:
+              "0 2px 4px 0 rgb(37 38 43 / 10%), 0 2px 4px 0 rgb(37 38 43 / 10%)",
+            cursor: "pointer",
+          },
+        },
+      },
+    ],
+  },
 )
+
 const CONTAINER_WIDTHS: Record<Size, number> = {
   small: 192,
   medium: 300,
 }
-const Container = styled(BaseContainer)<{ size?: Size }>(({ size }) => [
-  size && {
-    minWidth: CONTAINER_WIDTHS[size],
-    maxWidth: CONTAINER_WIDTHS[size],
-  },
-])
+const Container = styled(BaseContainer)<{ size?: Size }>({
+  variants: [
+    {
+      props: { size: Sizes.Small },
+      style: {
+        minWidth: CONTAINER_WIDTHS[Sizes.Small],
+        maxWidth: CONTAINER_WIDTHS[Sizes.Small],
+      },
+    },
+    {
+      props: { size: Sizes.Medium },
+      style: {
+        minWidth: CONTAINER_WIDTHS[Sizes.Medium],
+        maxWidth: CONTAINER_WIDTHS[Sizes.Medium],
+      },
+    },
+  ],
+})
 
 const Content = () => <></>
 
@@ -89,48 +117,86 @@ const Body = styled.div`
   margin: 16px;
 `
 
-const Image = styled(NextImage)<{ height?: number | string; size?: Size }>`
+const ImageBase = styled(NextImage)`
   display: block;
   width: 100%;
-  height: ${({ height, size }) =>
-    height ?? (size === "small" ? "120px" : "170px")};
   background-color: ${theme.custom.colors.lightGray1};
   object-fit: cover;
 `
 
-const Info = styled.div<{ size?: Size }>`
-  ${{ ...theme.typography.subtitle3 }}
-  color: ${theme.custom.colors.silverGrayDark};
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: ${({ size }) => (size === "small" ? 4 : 8)}px;
-`
+const Image = styled(ImageBase)<{ height?: number | string; size?: Size }>({
+  height: ({ height }) => height, // TODO pigment - creates a dynamic style, but need to check the precedence when used in combination with known variants below, see: https://github.com/mui/pigment-css?tab=readme-ov-file#styling-based-on-runtime-values
+  variants: [
+    {
+      props: ({ height, size }) => !height && size === Sizes.Small,
+      style: {
+        height: "120px",
+      },
+    },
+    {
+      props: ({ height, size }) => !height && size === Sizes.Medium,
+      style: {
+        height: "170px",
+      },
+    },
+  ],
+})
+
+const Info = styled.div<{ size?: Size }>({
+  ...theme.typography.subtitle3,
+  color: theme.custom.colors.silverGrayDark,
+  display: "flex",
+  justifyContent: "space-between",
+  variants: [
+    {
+      props: { size: Sizes.Small },
+      style: {
+        marginBottom: 4,
+      },
+    },
+    {
+      props: { size: Sizes.Medium },
+      style: {
+        marginBottom: 8,
+      },
+    },
+  ],
+})
 
 const titleOpts = {
   shouldForwardProp: (prop: string) => prop !== "lines" && prop !== "size",
 }
+
 const Title = styled(
   Linkable,
   titleOpts,
-)<{ size?: Size; lines?: number }>(({ theme, size, lines = 3 }) => {
-  return [
+)<{ size?: Size; lines?: number }>({
+  display: "flex",
+  textOverflow: "ellipsis",
+  overflow: "hidden",
+  margin: 0,
+  // ...truncateText(lines), // TODO pigment
+  variants: [
     {
-      display: "flex",
-      textOverflow: "ellipsis",
-      overflow: "hidden",
-      margin: 0,
-      ...truncateText(lines),
+      props: { size: Sizes.Small },
+      style: {
+        ...theme.typography.subtitle2,
+        // TODO pigment: Can we mix variants and style based on runtime values or do we need the height separately (commented below)
+        height: ({ lines }) =>
+          `calc(${lines} * ${theme.typography.subtitle2.lineHeight})`,
+      },
     },
-    size === "small"
-      ? {
-          ...theme.typography.subtitle2,
-          height: `calc(${lines} * ${theme.typography.subtitle2.lineHeight})`,
-        }
-      : {
-          ...theme.typography.subtitle1,
-          height: `calc(${lines} * ${theme.typography.subtitle1.lineHeight})`,
-        },
-  ]
+    {
+      props: ({ size }) => size !== Sizes.Small,
+      style: {
+        ...theme.typography.subtitle1,
+        height: ({ lines }) =>
+          `calc(${lines} * ${theme.typography.subtitle1.lineHeight})`,
+      },
+    },
+  ],
+  // height: ({ lines, size }) =>
+  //   `calc(${lines} * ${size === Sizes.Small ? theme.typography.subtitle2.lineHeight : theme.typography.subtitle1.lineHeight})`,
 })
 
 const Footer = styled.span`
diff --git a/frontends/ol-components/src/components/Card/ListCardCondensed.tsx b/frontends/ol-components/src/components/Card/ListCardCondensed.tsx
index a3b4ecca01..ef24866f38 100644
--- a/frontends/ol-components/src/components/Card/ListCardCondensed.tsx
+++ b/frontends/ol-components/src/components/Card/ListCardCondensed.tsx
@@ -5,7 +5,7 @@ import React, {
   isValidElement,
   AriaAttributes,
 } from "react"
-import styled from "@emotion/styled"
+import { styled } from "@pigment-css/react"
 import { RiDraggable } from "@remixicon/react"
 import { theme } from "../ThemeProvider/ThemeProvider"
 import { BaseContainer, useClickChildLink } from "./Card"
@@ -21,14 +21,17 @@ import {
 } from "./ListCard"
 import type { Card as BaseCard, TitleProps } from "./ListCard"
 
-const Container = styled(BaseContainer)<{ draggable?: boolean }>(
-  ({ draggable }) => [
-    draggable && {
-      display: "flex",
-      flexDirection: "row",
+const Container = styled(BaseContainer)<{ draggable?: boolean }>({
+  variants: [
+    {
+      props: ({ draggable }) => !!draggable,
+      style: {
+        display: "flex",
+        flexDirection: "row",
+      },
     },
   ],
-)
+})
 
 const DragArea = styled(BaseDragArea)`
   padding-right: 4px;
diff --git a/frontends/ol-components/src/components/Carousel/Carousel.tsx b/frontends/ol-components/src/components/Carousel/Carousel.tsx
index 12b706cc88..987d5f5b23 100644
--- a/frontends/ol-components/src/components/Carousel/Carousel.tsx
+++ b/frontends/ol-components/src/components/Carousel/Carousel.tsx
@@ -4,7 +4,7 @@ import Slick from "react-slick"
 import { onReInitSlickA11y } from "./util"
 import { ActionButton } from "../Button/Button"
 import { RiArrowRightLine, RiArrowLeftLine } from "@remixicon/react"
-import styled from "@emotion/styled"
+import { styled } from "@pigment-css/react"
 
 type CarouselProps = {
   children: React.ReactNode
@@ -31,31 +31,38 @@ type CarouselProps = {
   nextLabel?: string
 }
 
-const SlickStyled = styled(Slick)<{ rendered: boolean }>(({ rendered }) => [
-  {
-    /**
-     * This is a fallback. The carousel's width should be constrained by it's
-     * parent. But if it's not, this will at least prevent it from resizing itself
-     * beyond the viewport width.
-     */
-    maxWidth: "100vw",
-    ".slick-track::before": {
-      // By default slick has empty string content on the ::before pseudo
-      // element, which interferes with spacing on initial render.
-      content: "none",
-    },
+// TODOD pigment any
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const SlickStyled: any = styled(Slick)<{
+  rendered: boolean
+}>({
+  /**
+   * This is a fallback. The carousel's width should be constrained by it's
+   * parent. But if it's not, this will at least prevent it from resizing itself
+   * beyond the viewport width.
+   */
+  maxWidth: "100vw",
+  ".slick-track::before": {
+    // By default slick has empty string content on the ::before pseudo
+    // element, which interferes with spacing on initial render.
+    content: "none",
   },
-  !rendered && {
-    ".slick-track": {
-      /**
-       * When react-slick renders on the server, it sets `style="width: 0px;"`
-       * on the `.slick-track` element. This, combined with auto margoins,
-       * causes the carousel to render with strange positioning initially.
-       */
-      width: "unset !important",
+  variants: [
+    {
+      props: ({ rendered }) => !rendered,
+      style: {
+        ".slick-track": {
+          /**
+           * When react-slick renders on the server, it sets `style="width: 0px;"`
+           * on the `.slick-track` element. This, combined with auto margoins,
+           * causes the carousel to render with strange positioning initially.
+           */
+          width: "unset !important",
+        },
+      },
     },
-  },
-])
+  ],
+})
 
 /**
  * Return the current slide and the sliders per paged, based on current element
diff --git a/frontends/ol-components/src/components/Checkbox/Checkbox.tsx b/frontends/ol-components/src/components/Checkbox/Checkbox.tsx
index a65e7b3bae..96ba4f157d 100644
--- a/frontends/ol-components/src/components/Checkbox/Checkbox.tsx
+++ b/frontends/ol-components/src/components/Checkbox/Checkbox.tsx
@@ -1,6 +1,5 @@
 import React from "react"
-import styled from "@emotion/styled"
-import { css } from "@emotion/react"
+import { styled, css } from "@pigment-css/react"
 import { theme } from "../ThemeProvider/ThemeProvider"
 
 // prettier-ignore
diff --git a/frontends/ol-components/src/components/ChoiceBox/ChoiceBoxField.tsx b/frontends/ol-components/src/components/ChoiceBox/ChoiceBoxField.tsx
index eede76afae..572590e1b8 100644
--- a/frontends/ol-components/src/components/ChoiceBox/ChoiceBoxField.tsx
+++ b/frontends/ol-components/src/components/ChoiceBox/ChoiceBoxField.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "@emotion/styled"
+import { styled } from "@pigment-css/react"
 import FormControl from "@mui/material/FormControl"
 import FormGroup from "@mui/material/FormGroup"
 import FormLabel from "@mui/material/FormLabel"
diff --git a/frontends/ol-components/src/components/Dialog/Dialog.tsx b/frontends/ol-components/src/components/Dialog/Dialog.tsx
index 966fdcb783..a4b9c31fa5 100644
--- a/frontends/ol-components/src/components/Dialog/Dialog.tsx
+++ b/frontends/ol-components/src/components/Dialog/Dialog.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useId, useState } from "react"
-import styled from "@emotion/styled"
+import { styled } from "@pigment-css/react"
 import { theme } from "../ThemeProvider/ThemeProvider"
 import { default as MuiDialog } from "@mui/material/Dialog"
 import type { DialogProps as MuiDialogProps } from "@mui/material/Dialog"
diff --git a/frontends/ol-components/src/components/EmbedlyCard/EmbedlyCard.tsx b/frontends/ol-components/src/components/EmbedlyCard/EmbedlyCard.tsx
index 6064544f4c..ceeed846df 100644
--- a/frontends/ol-components/src/components/EmbedlyCard/EmbedlyCard.tsx
+++ b/frontends/ol-components/src/components/EmbedlyCard/EmbedlyCard.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from "react"
-import styled from "@emotion/styled"
+import { styled } from "@pigment-css/react"
 import isURL from "validator/lib/isURL"
 import {
   createStylesheet,
@@ -38,9 +38,9 @@ const insertCardStylesheet = (e: Event) => {
   createStylesheet(e.target.contentDocument, stylesheet)
 }
 
-const Container = styled.div<{ aspectRatio?: number }>`
-  ${({ aspectRatio }) => (aspectRatio ? `aspect-ratio: ${aspectRatio};` : "")}
-`
+const Container = styled.div<{ aspectRatio?: number }>({
+  aspectRatio: ({ aspectRatio }) => aspectRatio ?? "auto",
+})
 
 /**
  * Renders the given URL as an [embedly card](https://embed.ly/cards).
diff --git a/frontends/ol-components/src/components/FormDialog/FormDialog.tsx b/frontends/ol-components/src/components/FormDialog/FormDialog.tsx
index ad2cbefb0b..d6b71776ee 100644
--- a/frontends/ol-components/src/components/FormDialog/FormDialog.tsx
+++ b/frontends/ol-components/src/components/FormDialog/FormDialog.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react"
-import styled from "@emotion/styled"
+import { styled } from "@pigment-css/react"
 import { Dialog } from "../Dialog/Dialog"
 import type { DialogProps } from "../Dialog/Dialog"
 
diff --git a/frontends/ol-components/src/components/FormHelpers/FormHelpers.tsx b/frontends/ol-components/src/components/FormHelpers/FormHelpers.tsx
index 1e67cf3ccf..858162bfaf 100644
--- a/frontends/ol-components/src/components/FormHelpers/FormHelpers.tsx
+++ b/frontends/ol-components/src/components/FormHelpers/FormHelpers.tsx
@@ -64,7 +64,18 @@ const ControlLabel: React.FC<ControlLabelProps> = ({
       component="label"
       htmlFor={htmlFor}
       variant="subtitle2"
-      sx={{ marginBottom: "4px", width: fullWidth ? "100%" : "auto" }}
+      sx={[
+        {
+          marginBottom: "4px",
+        },
+        fullWidth
+          ? {
+              width: "100%",
+            }
+          : {
+              width: "auto",
+            },
+      ]}
     >
       {label}
       {required ? <Required aria-hidden="true">*</Required> : null}
diff --git a/frontends/ol-components/src/components/Input/Input.tsx b/frontends/ol-components/src/components/Input/Input.tsx
index 21014c63ab..9833f91b8f 100644
--- a/frontends/ol-components/src/components/Input/Input.tsx
+++ b/frontends/ol-components/src/components/Input/Input.tsx
@@ -2,7 +2,7 @@ import React from "react"
 import styled from "@emotion/styled"
 import InputBase from "@mui/material/InputBase"
 import type { InputBaseProps } from "@mui/material/InputBase"
-import type { Theme } from "@mui/material/styles"
+import type { Theme } from "@pigment-css/react/theme"
 import ClassNames from "classnames"
 
 type Size = NonNullable<InputBaseProps["size"]>
diff --git a/frontends/ol-components/src/components/LearningResourceCard/LearningResourceCard.tsx b/frontends/ol-components/src/components/LearningResourceCard/LearningResourceCard.tsx
index 7c819abffc..228ad9a0b9 100644
--- a/frontends/ol-components/src/components/LearningResourceCard/LearningResourceCard.tsx
+++ b/frontends/ol-components/src/components/LearningResourceCard/LearningResourceCard.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "@emotion/styled"
+import { styled } from "@pigment-css/react"
 import Skeleton from "@mui/material/Skeleton"
 import {
   RiMenuAddLine,
@@ -23,25 +23,28 @@ import { imgConfigs } from "../../constants/imgConfigs"
 import { theme } from "../ThemeProvider/ThemeProvider"
 import Tooltip from "@mui/material/Tooltip"
 
-const SkeletonImage = styled(Skeleton)<{ aspect: number }>`
-  padding-bottom: ${({ aspect }) => 100 / aspect}%;
-`
+const SkeletonImage = styled(Skeleton)<{ aspect: number }>({
+  paddingBottom: ({ aspect }) => `${100 / aspect}%`,
+})
 
 const Label = styled.span(({ theme }) => ({
   color: theme.custom.colors.silverGrayDark,
 }))
 
-const Value = styled.span<{ size?: Size }>(({ theme, size }) => [
-  {
-    color: theme.custom.colors.darkGray2,
-  },
-  size === "small" && {
-    color: theme.custom.colors.silverGrayDark,
-    ".MitCard-root:hover &": {
-      color: theme.custom.colors.darkGray2,
+const Value = styled.span<{ size?: Size }>({
+  color: theme.custom.colors.darkGray2,
+  variants: [
+    {
+      props: { size: "small" },
+      style: {
+        color: theme.custom.colors.silverGrayDark,
+        ".MitCard-root:hover &": {
+          color: theme.custom.colors.darkGray2,
+        },
+      },
     },
-  },
-])
+  ],
+})
 
 const getImageDimensions = (size: Size, isMedia: boolean) => {
   const dimensions = {
@@ -181,13 +184,18 @@ const CardActionButton: React.FC<
   )
 }
 
-const StyledCard = styled(Card)<{ size: Size }>(({ size }) => [
-  size === "medium" && {
-    ".MitCard-info": {
-      height: "18px",
+const StyledCard = styled(Card)<{ size: Size }>({
+  variants: [
+    {
+      props: { size: "medium" },
+      style: {
+        ".MitCard-info": {
+          height: "18px",
+        },
+      },
     },
-  },
-])
+  ],
+})
 
 const LearningResourceCard: React.FC<LearningResourceCardProps> = ({
   isLoading,
diff --git a/frontends/ol-components/src/components/LearningResourceCard/LearningResourceListCard.tsx b/frontends/ol-components/src/components/LearningResourceCard/LearningResourceListCard.tsx
index fe673a9b16..7c33d9137c 100644
--- a/frontends/ol-components/src/components/LearningResourceCard/LearningResourceListCard.tsx
+++ b/frontends/ol-components/src/components/LearningResourceCard/LearningResourceListCard.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "@emotion/styled"
+import { styled } from "@pigment-css/react"
 import Skeleton from "@mui/material/Skeleton"
 import {
   RiMenuAddLine,
diff --git a/frontends/ol-components/src/components/LearningResourceCard/LearningResourceListCardCondensed.tsx b/frontends/ol-components/src/components/LearningResourceCard/LearningResourceListCardCondensed.tsx
index 54c9a1a443..9d6f7f3950 100644
--- a/frontends/ol-components/src/components/LearningResourceCard/LearningResourceListCardCondensed.tsx
+++ b/frontends/ol-components/src/components/LearningResourceCard/LearningResourceListCardCondensed.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "@emotion/styled"
+import { styled } from "@pigment-css/react"
 import Skeleton from "@mui/material/Skeleton"
 import {
   RiMenuAddLine,
diff --git a/frontends/ol-components/src/components/LearningResourceExpanded/DifferingRunsTable.tsx b/frontends/ol-components/src/components/LearningResourceExpanded/DifferingRunsTable.tsx
index 9d132a9c2e..03105f9f2d 100644
--- a/frontends/ol-components/src/components/LearningResourceExpanded/DifferingRunsTable.tsx
+++ b/frontends/ol-components/src/components/LearningResourceExpanded/DifferingRunsTable.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "@emotion/styled"
+import { styled } from "@pigment-css/react"
 import { theme } from "../ThemeProvider/ThemeProvider"
 import { LearningResource } from "api"
 import {
diff --git a/frontends/ol-components/src/components/LearningResourceExpanded/InfoSectionV1.tsx b/frontends/ol-components/src/components/LearningResourceExpanded/InfoSectionV1.tsx
index fa22c0adc2..2d92af7a22 100644
--- a/frontends/ol-components/src/components/LearningResourceExpanded/InfoSectionV1.tsx
+++ b/frontends/ol-components/src/components/LearningResourceExpanded/InfoSectionV1.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "@emotion/styled"
+import { styled } from "@pigment-css/react"
 import ISO6391 from "iso-639-1"
 import {
   RemixiconComponentType,
diff --git a/frontends/ol-components/src/components/LearningResourceExpanded/InfoSectionV2.tsx b/frontends/ol-components/src/components/LearningResourceExpanded/InfoSectionV2.tsx
index 7a1267543e..e63d48dd5a 100644
--- a/frontends/ol-components/src/components/LearningResourceExpanded/InfoSectionV2.tsx
+++ b/frontends/ol-components/src/components/LearningResourceExpanded/InfoSectionV2.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from "react"
-import styled from "@emotion/styled"
+import { styled } from "@pigment-css/react"
 import ISO6391 from "iso-639-1"
 import {
   RemixiconComponentType,
diff --git a/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpandedV1.tsx b/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpandedV1.tsx
index e7dabf3b53..133345e7ee 100644
--- a/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpandedV1.tsx
+++ b/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpandedV1.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react"
-import styled from "@emotion/styled"
+import { styled } from "@pigment-css/react"
 import Skeleton from "@mui/material/Skeleton"
 import Typography from "@mui/material/Typography"
 import { default as NextImage } from "next/image"
diff --git a/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpandedV2.tsx b/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpandedV2.tsx
index 71600485be..41a12bc753 100644
--- a/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpandedV2.tsx
+++ b/frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpandedV2.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState } from "react"
-import styled from "@emotion/styled"
+import { styled } from "@pigment-css/react"
 import Skeleton from "@mui/material/Skeleton"
 import { default as NextImage } from "next/image"
 import { ActionButton, Button, ButtonLink, ButtonProps } from "../Button/Button"
diff --git a/frontends/ol-components/src/components/LearningResourceExpanded/VideoFrame.tsx b/frontends/ol-components/src/components/LearningResourceExpanded/VideoFrame.tsx
index 70b110bb99..08954c5d25 100644
--- a/frontends/ol-components/src/components/LearningResourceExpanded/VideoFrame.tsx
+++ b/frontends/ol-components/src/components/LearningResourceExpanded/VideoFrame.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "@emotion/styled"
+import { styled } from "@pigment-css/react"
 import { EmbedlyCard } from "../EmbedlyCard/EmbedlyCard"
 
 const IFrame = styled.iframe`
diff --git a/frontends/ol-components/src/components/Lists/ListItemLink.tsx b/frontends/ol-components/src/components/Lists/ListItemLink.tsx
index 3da72dedfe..78211e11e8 100644
--- a/frontends/ol-components/src/components/Lists/ListItemLink.tsx
+++ b/frontends/ol-components/src/components/Lists/ListItemLink.tsx
@@ -1,11 +1,14 @@
 import React from "react"
 import ListItemButton from "@mui/material/ListItemButton"
 import type { ListItemButtonProps } from "@mui/material/ListItemButton"
-import { styled } from "@mui/material/styles"
+import { styled } from "@mui/material-pigment-css"
 import Link from "next/link"
 
 type ListItemLinkProps = ListItemButtonProps<"a">
 
+const ListItemButtonLink = ({ ...props }: ListItemLinkProps) => (
+  <ListItemButton component={Link} {...props} />
+)
 /**
  * A ListItemButton that uses a Link component from react-router-dom.
  *
@@ -13,18 +16,12 @@ type ListItemLinkProps = ListItemButtonProps<"a">
  * that `ListItem` should have `disablePadding` when it contains a `ListItemLink`
  * since the padding is applied to the link itself.
  */
-const ListItemLink: React.FC<ListItemLinkProps> = styled(
-  ({ ...props }: ListItemLinkProps) => (
-    <ListItemButton component={Link} {...props} />
-  ),
-)(() => [
-  {
-    ".MuiListItemText-root": {
-      marginTop: 0,
-      marginBottom: 0,
-    },
+const ListItemLink: React.FC<ListItemLinkProps> = styled(ListItemButtonLink)({
+  ".MuiListItemText-root": {
+    marginTop: 0,
+    marginBottom: 0,
   },
-])
+})
 
 export { ListItemLink }
 export type { ListItemLinkProps }
diff --git a/frontends/ol-components/src/components/LoadingSpinner/LoadingSpinner.tsx b/frontends/ol-components/src/components/LoadingSpinner/LoadingSpinner.tsx
index 274b98699b..6ccc1c634e 100644
--- a/frontends/ol-components/src/components/LoadingSpinner/LoadingSpinner.tsx
+++ b/frontends/ol-components/src/components/LoadingSpinner/LoadingSpinner.tsx
@@ -1,7 +1,7 @@
 import React from "react"
 import CircularProgress from "@mui/material/CircularProgress"
 import Fade from "@mui/material/Fade"
-import styled from "@emotion/styled"
+import { styled } from "@pigment-css/react"
 
 const Container = styled.div({
   display: "flex",
diff --git a/frontends/ol-components/src/components/NavDrawer/NavDrawer.tsx b/frontends/ol-components/src/components/NavDrawer/NavDrawer.tsx
index f8ed70bb54..b96464fbbf 100644
--- a/frontends/ol-components/src/components/NavDrawer/NavDrawer.tsx
+++ b/frontends/ol-components/src/components/NavDrawer/NavDrawer.tsx
@@ -1,7 +1,7 @@
 import Drawer, { DrawerProps } from "@mui/material/Drawer"
 import ClickAwayListener from "@mui/material/ClickAwayListener"
 import { FocusTrap } from "@mui/base/FocusTrap"
-import styled from "@emotion/styled"
+import { styled } from "@pigment-css/react"
 import Link from "next/link"
 import React, { ReactElement } from "react"
 import { RiCloseLargeLine } from "@remixicon/react"
@@ -27,21 +27,22 @@ const NavSection = styled.div({
   gap: "12px",
 })
 
-const NavSectionHeader = styled.div<{ hasButton: boolean }>(
-  ({ theme, hasButton }) => [
+const NavSectionHeader = styled.div<{ hasButton: boolean }>(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  alignSelf: "stretch",
+  color: theme.custom.colors.darkGray1,
+  ...theme.typography.subtitle3,
+  variants: [
     {
-      display: "flex",
-      alignItems: "center",
-      alignSelf: "stretch",
-      color: theme.custom.colors.darkGray1,
-      ...theme.typography.subtitle3,
-    },
-    hasButton && {
-      justifyContent: "space-between",
-      height: "16px",
+      props: ({ hasButton }) => !!hasButton,
+      style: {
+        justifyContent: "space-between",
+        height: "16px",
+      },
     },
   ],
-)
+}))
 
 const NavItemsContainer = styled.div(({ theme }) => ({
   display: "flex",
diff --git a/frontends/ol-components/src/components/Popover/Popover.tsx b/frontends/ol-components/src/components/Popover/Popover.tsx
index 39e96ff8af..57e87d83fc 100644
--- a/frontends/ol-components/src/components/Popover/Popover.tsx
+++ b/frontends/ol-components/src/components/Popover/Popover.tsx
@@ -1,5 +1,5 @@
 import * as React from "react"
-import styled from "@emotion/styled"
+import { styled } from "@pigment-css/react"
 import MuiPopper from "@mui/material/Popper"
 import type { PopperProps } from "@mui/material/Popper"
 import Fade from "@mui/material/Fade"
diff --git a/frontends/ol-components/src/components/Radio/Radio.tsx b/frontends/ol-components/src/components/Radio/Radio.tsx
index 153eb21f53..1406997468 100644
--- a/frontends/ol-components/src/components/Radio/Radio.tsx
+++ b/frontends/ol-components/src/components/Radio/Radio.tsx
@@ -1,6 +1,5 @@
 import React from "react"
-import styled from "@emotion/styled"
-import { css } from "@emotion/react"
+import { styled, css } from "@pigment-css/react"
 import { theme } from "../ThemeProvider/ThemeProvider"
 
 // prettier-ignore
diff --git a/frontends/ol-components/src/components/RadioChoiceField/RadioChoiceField.tsx b/frontends/ol-components/src/components/RadioChoiceField/RadioChoiceField.tsx
index f5d0a5de64..f14102189e 100644
--- a/frontends/ol-components/src/components/RadioChoiceField/RadioChoiceField.tsx
+++ b/frontends/ol-components/src/components/RadioChoiceField/RadioChoiceField.tsx
@@ -4,7 +4,7 @@ import FormControlLabel from "@mui/material/FormControlLabel"
 import Radio from "@mui/material/Radio"
 import RadioGroup from "@mui/material/RadioGroup"
 import type { RadioGroupProps } from "@mui/material/RadioGroup"
-import styled from "@emotion/styled"
+import { styled } from "@pigment-css/react"
 
 const RadioGroupStyled = styled(RadioGroup)(({ theme }) => ({
   display: "flex",
diff --git a/frontends/ol-components/src/components/RoutedDrawer/RoutedDrawer.tsx b/frontends/ol-components/src/components/RoutedDrawer/RoutedDrawer.tsx
index f476728bac..47eb1c2bb8 100644
--- a/frontends/ol-components/src/components/RoutedDrawer/RoutedDrawer.tsx
+++ b/frontends/ol-components/src/components/RoutedDrawer/RoutedDrawer.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useMemo } from "react"
 import Drawer from "@mui/material/Drawer"
-import styled from "@emotion/styled"
+import { styled } from "@pigment-css/react"
 import type { DrawerProps } from "@mui/material/Drawer"
 import { ActionButton } from "../Button/Button"
 import { RiCloseLargeLine } from "@remixicon/react"
diff --git a/frontends/ol-components/src/components/SelectField/SelectField.tsx b/frontends/ol-components/src/components/SelectField/SelectField.tsx
index 055d9167a7..3c348a5d6c 100644
--- a/frontends/ol-components/src/components/SelectField/SelectField.tsx
+++ b/frontends/ol-components/src/components/SelectField/SelectField.tsx
@@ -8,7 +8,8 @@ import InputBase from "@mui/material/InputBase"
 import type { InputBaseProps } from "@mui/material/InputBase"
 import { FormFieldWrapper } from "../FormHelpers/FormHelpers"
 import type { FormFieldWrapperProps } from "../FormHelpers/FormHelpers"
-import styled from "@emotion/styled"
+// import { styled } from "@pigment-css/react"
+import { styled } from "@mui/material-pigment-css"
 import { baseInputStyles } from "../Input/Input"
 import { RiArrowDownSLine } from "@remixicon/react"
 
@@ -22,73 +23,80 @@ type SelectInputProps = Omit<InputBaseProps, "size"> & {
 
 const DEFAULT_SIZE = "medium"
 
-const SelectInput = styled(InputBase as React.FC<SelectInputProps>)(
-  ({ theme, size = DEFAULT_SIZE }) => [
-    baseInputStyles(theme),
+const SelectInput = styled(InputBase)(({ theme }) => ({
+  ...baseInputStyles(theme),
+  ".MuiInputBase-input": {
+    boxSizing: "border-box",
+    display: "inline-flex",
+    alignItems: "center",
+    "&:focus": {
+      backgroundColor: "transparent",
+    },
+  },
+  ".MuiSelect-icon": {
+    // MUI sizes icons via fontSize, remixicon doesn't.
+    // This usually isn't an issue. In this case, we need to size the icon
+    // MUI's way so that its transformations apply correctly.
+    height: "1em",
+    width: "1em",
+  },
+  variants: [
     {
-      ".MuiInputBase-input": {
-        boxSizing: "border-box",
-        display: "inline-flex",
-        alignItems: "center",
-        "&:focus": {
-          backgroundColor: "transparent",
+      props: { size: "small" },
+      style: {
+        ...theme.typography.body3,
+        height: "32px",
+        ".MuiInputBase-input": {
+          height: "100%",
+          padding: "8px 12px",
+        },
+        "&&& .MuiInputBase-input": {
+          paddingRight: "28px", // 12px + 16px icon
+        },
+        ".MuiSelect-icon": {
+          fontSize: 16,
+          right: "12px",
         },
-      },
-      ".MuiSelect-icon": {
-        // MUI sizes icons via fontSize, remixicon doesn't.
-        // This usually isn't an issue. In this case, we need to size the icon
-        // MUI's way so that its transformations apply correctly.
-        height: "1em",
-        width: "1em",
-      },
-    },
-    size === "small" && {
-      ...theme.typography.body3,
-      height: "32px",
-      ".MuiInputBase-input": {
-        height: "100%",
-        padding: "8px 12px",
-      },
-      "&&& .MuiInputBase-input": {
-        paddingRight: "28px", // 12px + 16px icon
-      },
-      ".MuiSelect-icon": {
-        fontSize: 16,
-        right: "12px",
       },
     },
-    size === "medium" && {
-      ...theme.typography.body2,
-      height: "40px",
-      ".MuiInputBase-input": {
-        height: "100%",
-        padding: "8px 12px",
-      },
-      "&&& .MuiInputBase-input": {
-        paddingRight: "32px", // 12px + 20px icon
-      },
-      ".MuiSelect-icon": {
-        fontSize: 20,
-        right: "12px",
+    {
+      props: ({ size }) => !size || size === DEFAULT_SIZE,
+      style: {
+        ...theme.typography.body2,
+        height: "40px",
+        ".MuiInputBase-input": {
+          height: "100%",
+          padding: "8px 12px",
+        },
+        "&&& .MuiInputBase-input": {
+          paddingRight: "32px", // 12px + 20px icon
+        },
+        ".MuiSelect-icon": {
+          fontSize: 20,
+          right: "12px",
+        },
       },
     },
-    size === "large" && {
-      ...theme.typography.body1,
-      height: "48px",
-      ".MuiInputBase-input": {
-        height: "100%",
-        padding: "8px 16px",
-      },
-      "&&& .MuiInputBase-input": {
-        paddingRight: "40px", // 16px + 24px icon
-      },
-      ".MuiSelect-icon": {
-        fontSize: 24,
-        right: "16px",
+    {
+      props: { size: "large" },
+      style: {
+        ...theme.typography.body1,
+        height: "48px",
+        ".MuiInputBase-input": {
+          height: "100%",
+          padding: "8px 16px",
+        },
+        "&&& .MuiInputBase-input": {
+          paddingRight: "40px", // 16px + 24px icon
+        },
+        ".MuiSelect-icon": {
+          fontSize: 24,
+          right: "16px",
+        },
       },
     },
   ],
-)
+}))
 
 const SelectIcon = styled(RiArrowDownSLine)({
   fontSize: "24px",
diff --git a/frontends/ol-components/src/components/SortableList/SortableList.tsx b/frontends/ol-components/src/components/SortableList/SortableList.tsx
index 57a59238ce..2461b418bf 100644
--- a/frontends/ol-components/src/components/SortableList/SortableList.tsx
+++ b/frontends/ol-components/src/components/SortableList/SortableList.tsx
@@ -23,7 +23,7 @@ import {
 import type { SortableData } from "@dnd-kit/sortable"
 import { CSS } from "@dnd-kit/utilities"
 import { CancelDropArguments } from "@dnd-kit/core/dist/components/DndContext/DndContext"
-import styled from "@emotion/styled"
+import { styled } from "@pigment-css/react"
 
 const DragStyles = styled.div`
   .ol-draggable {