diff --git a/frontends/mit-open/public/images/unit_banners/see.jpg b/frontends/mit-open/public/images/unit_banners/see.jpg
index 5b12a0ddd7..6b20f0346a 100644
Binary files a/frontends/mit-open/public/images/unit_banners/see.jpg and b/frontends/mit-open/public/images/unit_banners/see.jpg differ
diff --git a/frontends/mit-open/public/images/unit_banners/xpro.jpg b/frontends/mit-open/public/images/unit_banners/xpro.jpg
index cb5402f5a3..ede776430c 100644
Binary files a/frontends/mit-open/public/images/unit_banners/xpro.jpg and b/frontends/mit-open/public/images/unit_banners/xpro.jpg differ
diff --git a/frontends/mit-open/src/page-components/ChannelDetails/ChannelDetails.tsx b/frontends/mit-open/src/page-components/ChannelDetails/ChannelDetails.tsx
index 788591369b..6b3aee1c89 100644
--- a/frontends/mit-open/src/page-components/ChannelDetails/ChannelDetails.tsx
+++ b/frontends/mit-open/src/page-components/ChannelDetails/ChannelDetails.tsx
@@ -24,6 +24,7 @@ const FACETS_BY_CHANNEL_TYPE: Record<ChannelTypeEnum, string[]> = {
   [ChannelTypeEnum.Unit]: [
     "offerings",
     "audience",
+    "fee",
     "formats",
     "content_types",
     "certifications",
@@ -47,34 +48,42 @@ const getFacetManifest = (channelType: ChannelTypeEnum) => {
     {
       name: "topic",
       title: "Topic",
+      order: 0,
     },
     {
       name: "formats",
       title: "Formats",
+      order: 0,
     },
     {
       name: "fee",
       title: "Fee",
+      order: 0,
     },
     {
       name: "department",
       title: "Department",
+      order: 0,
     },
     {
       name: "offerings",
       title: "Offerings",
+      order: -1,
     },
     {
       name: "level",
       title: "Level",
+      order: 0,
     },
     {
       name: "content_types",
       title: "Type of Content",
+      order: 0,
     },
     {
       name: "audience",
       title: "Audience",
+      order: 0,
     },
     {
       name: "more_information",
@@ -84,22 +93,27 @@ const getFacetManifest = (channelType: ChannelTypeEnum) => {
           {channelTitle} website <OpenInNewIcon fontSize="inherit" />
         </a>
       ),
+      order: 1,
     },
     {
       name: "platform",
       title: "Platform",
+      order: 0,
     },
     {
       name: "offered_by",
       title: "Offered By",
+      order: 0,
     },
     {
       name: "certifications",
       title: "Certificate",
+      order: 0,
     },
     {
       name: "learning_format",
       title: "Format",
+      order: 0,
       labelFunction: (key: string) =>
         key
           .split("_")
@@ -127,12 +141,15 @@ const InfoLabel = styled(Typography)(({ theme }) => ({
 const ChannelDetailsCard = styled(Box)(({ theme }) => ({
   borderRadius: "12px",
   backgroundColor: "white",
-  minWidth: "300px",
-  padding: "32px",
+  padding: "36px",
   display: "flex",
   flexDirection: "column",
   gap: "16px",
+  [theme.breakpoints.up("md")]: {
+    minWidth: "408px",
+  },
   [theme.breakpoints.down("md")]: {
+    padding: "16px",
     width: "100%",
   },
 }))
@@ -142,36 +159,45 @@ const ChannelDetails: React.FC<ChannelDetailsProps> = (props) => {
   const channelDetails = getChannelDetails(field)
   const channelType = field.channel_type
   const channelTitle = field.title
+
   const facetManifest = useMemo(
     () => getFacetManifest(channelType),
     [channelType],
   )
 
-  const body = facetManifest.map((value) => {
-    const detailValue = (
-      channelDetails as unknown as { [key: string]: string }
-    )[value.name]
-    if (detailValue) {
-      const label = value?.labelFunction
-        ? value.labelFunction(detailValue, channelTitle)
-        : detailValue
+  const body = facetManifest
+    .sort((a, b) =>
+      a?.order && b?.order && a?.order > b?.order
+        ? 1
+        : a?.order && b?.order && b?.order > a?.order
+          ? -1
+          : 0,
+    )
+    .map((value) => {
+      const detailValue = (
+        channelDetails as unknown as { [key: string]: string }
+      )[value.name]
+      if (detailValue) {
+        const label = value?.labelFunction
+          ? value.labelFunction(detailValue, channelTitle)
+          : detailValue
 
-      return (
-        <Box key={value.title}>
-          <InfoLabel
-            variant="subtitle2"
-            sx={{ marginBottom: (theme) => theme.typography.pxToRem(4) }}
-          >
-            {value.title}:
-          </InfoLabel>
-          <Typography variant="body3" color="text.secondary">
-            {Array.isArray(label) ? label.join(" | ") : label}
-          </Typography>
-        </Box>
-      )
-    }
-    return null
-  })
+        return (
+          <Box key={value.title}>
+            <InfoLabel
+              variant="subtitle2"
+              sx={{ marginBottom: (theme) => theme.typography.pxToRem(4) }}
+            >
+              {value.title}
+            </InfoLabel>
+            <Typography variant="body3" color="text.secondary">
+              {Array.isArray(label) ? label.join(" | ") : label}
+            </Typography>
+          </Box>
+        )
+      }
+      return null
+    })
   return <ChannelDetailsCard>{body}</ChannelDetailsCard>
 }
 
diff --git a/frontends/mit-open/src/page-components/SearchSubscriptionToggle/SearchSubscriptionToggle.tsx b/frontends/mit-open/src/page-components/SearchSubscriptionToggle/SearchSubscriptionToggle.tsx
index 1c5c99e431..fd852e1f1d 100644
--- a/frontends/mit-open/src/page-components/SearchSubscriptionToggle/SearchSubscriptionToggle.tsx
+++ b/frontends/mit-open/src/page-components/SearchSubscriptionToggle/SearchSubscriptionToggle.tsx
@@ -10,6 +10,7 @@ import type { SimpleMenuItem } from "ol-components"
 import ExpandMoreSharpIcon from "@mui/icons-material/ExpandMoreSharp"
 import { useUserMe } from "api/hooks/user"
 import { SourceTypeEnum } from "api"
+import MailOutlineIcon from "@mui/icons-material/MailOutline"
 
 const SearchSubscriptionToggle = ({
   searchParams,
@@ -71,6 +72,7 @@ const SearchSubscriptionToggle = ({
     <Button
       variant="primary"
       disabled={subscriptionCreate.isLoading}
+      startIcon={<MailOutlineIcon />}
       onClick={() =>
         subscriptionCreate.mutateAsync({
           PercolateQuerySubscriptionRequestRequest: subscribeParams,
diff --git a/frontends/mit-open/src/pages/ArticleDetailsPage/ArticleDetailsPage.tsx b/frontends/mit-open/src/pages/ArticleDetailsPage/ArticleDetailsPage.tsx
index dccdaf8b81..fc4d5d4839 100644
--- a/frontends/mit-open/src/pages/ArticleDetailsPage/ArticleDetailsPage.tsx
+++ b/frontends/mit-open/src/pages/ArticleDetailsPage/ArticleDetailsPage.tsx
@@ -24,7 +24,6 @@ const ArticlesDetailPage: React.FC = () => {
   return (
     <BannerPage
       src="/static/images/course_search_banner.png"
-      alt=""
       className="articles-detail-page"
     >
       <MetaTags>
diff --git a/frontends/mit-open/src/pages/FieldPage/FieldPage.test.tsx b/frontends/mit-open/src/pages/FieldPage/FieldPage.test.tsx
index 10b91965e4..5fb7896816 100644
--- a/frontends/mit-open/src/pages/FieldPage/FieldPage.test.tsx
+++ b/frontends/mit-open/src/pages/FieldPage/FieldPage.test.tsx
@@ -101,9 +101,11 @@ describe("FieldPage", () => {
     const header = title[0].closest("header")
     assertInstanceOf(header, HTMLElement)
     const images = within(header).getAllByRole("img") as HTMLImageElement[]
-
-    expect(images[0].src).toContain(field.configuration.banner_background)
-    expect(images[1].src).toContain(field.configuration.logo)
+    const headerStyles = getComputedStyle(header)
+    expect(headerStyles.backgroundImage).toContain(
+      field.configuration.banner_background,
+    )
+    expect(images[0].src).toContain(field.configuration.logo)
   })
 
   it("Displays the field search if search_filter is not undefined", async () => {
diff --git a/frontends/mit-open/src/pages/FieldPage/FieldPageSkeleton.tsx b/frontends/mit-open/src/pages/FieldPage/FieldPageSkeleton.tsx
index abe1c4ab77..13d04c12a5 100644
--- a/frontends/mit-open/src/pages/FieldPage/FieldPageSkeleton.tsx
+++ b/frontends/mit-open/src/pages/FieldPage/FieldPageSkeleton.tsx
@@ -26,7 +26,6 @@ export const FieldControls = styled.div`
   position: relative;
   min-height: 38px;
   display: flex;
-  margin-bottom: 1em;
 `
 
 interface FieldSkeletonProps {
@@ -42,7 +41,10 @@ const NAV_PATH: { [key: string]: string } = {
 
 const NavText = styled(Typography)(({ theme }) => ({
   color: theme.custom.colors.lightGray2,
-  marginBottom: "10px",
+  marginBottom: "16px",
+  [theme.breakpoints.down("md")]: {
+    marginBottom: "32px",
+  },
   ".current": {
     color: theme.custom.colors.silverGrayLight,
   },
@@ -68,10 +70,11 @@ const FieldSkeletonProps: React.FC<FieldSkeletonProps> = ({
         displayConfiguration?.banner_background ??
         "/static/images/background_steps.jpeg"
       }
-      alt=""
       omitBackground={field.isLoading}
+      backgroundSize="2000px auto"
+      dim={30}
       bannerContent={
-        <Container sx={{ my: 2, py: "48px" }}>
+        <Container sx={{ pt: "48px", pb: "64px" }}>
           <NavText variant="subtitle3">
             Home / {NAV_PATH[channelType]} /{" "}
             <span className="current">{field.data?.title}</span>
@@ -94,13 +97,28 @@ const FieldSkeletonProps: React.FC<FieldSkeletonProps> = ({
                   display="flex"
                   flexDirection="column"
                   alignItems="start"
-                  sx={{ flexGrow: 24, flexShrink: 0, order: 1, width: "60%" }}
+                  sx={{
+                    flexGrow: 1,
+                    flexShrink: 0,
+                    order: 1,
+                    width: "50%",
+                  }}
                 >
                   <Box
                     display="flex"
                     flexDirection="row"
                     alignItems="center"
-                    sx={{ flexGrow: 1, flexShrink: 0, order: 1, mt: 3 }}
+                    sx={(theme) => ({
+                      flexGrow: 1,
+                      flexShrink: 0,
+                      order: 1,
+                      py: "24px",
+
+                      [theme.breakpoints.down("md")]: {
+                        py: 0,
+                        pb: "8px",
+                      },
+                    })}
                   >
                     {displayConfiguration?.logo ? (
                       <FieldAvatar
@@ -110,7 +128,7 @@ const FieldSkeletonProps: React.FC<FieldSkeletonProps> = ({
                         field={field.data}
                       />
                     ) : (
-                      <Typography variant="h3" data-testid="header">
+                      <Typography variant="h1" data-testid="header">
                         <Link
                           to={routes.makeFieldViewPath(
                             field.data.channel_type,
@@ -131,8 +149,8 @@ const FieldSkeletonProps: React.FC<FieldSkeletonProps> = ({
                         flexGrow: 0,
                         flexShrink: 0,
                         order: 2,
-                        width: "90%",
-                        my: 2,
+                        width: { md: "80%", sm: "100%" },
+                        my: 1,
                       }}
                     >
                       <Typography variant="h4">
@@ -150,11 +168,11 @@ const FieldSkeletonProps: React.FC<FieldSkeletonProps> = ({
                       flexGrow: 0,
                       flexShrink: 0,
                       order: 2,
-                      width: "60%",
-                      my: 2,
+                      width: { md: "80%", sm: "100%" },
+                      my: 1,
                     }}
                   >
-                    <Typography variant="body2">
+                    <Typography variant="body1">
                       {displayConfiguration.sub_heading}
                     </Typography>
                   </Box>
@@ -168,7 +186,8 @@ const FieldSkeletonProps: React.FC<FieldSkeletonProps> = ({
                         width: "100%",
                         flexShrink: 1,
                         order: 3,
-                        my: 2,
+                        mt: { xs: "8px" },
+                        mb: { xs: "48px" },
                       }}
                     >
                       <FieldControls>
@@ -196,9 +215,9 @@ const FieldSkeletonProps: React.FC<FieldSkeletonProps> = ({
                     display="flex"
                     sx={{
                       order: 2,
-                      flexGrow: 1,
+                      flexGrow: 0,
                       flexShrink: 0,
-                      width: { md: "300px", xs: "100%" },
+                      width: { md: "408px", xs: "100%" },
                     }}
                   >
                     <ChannelDetails field={field.data} />
@@ -209,11 +228,12 @@ const FieldSkeletonProps: React.FC<FieldSkeletonProps> = ({
                     flexDirection="row"
                     alignItems="end"
                     sx={{
-                      flexGrow: 1,
+                      flexGrow: 0,
                       width: { md: "15%", xs: "100%" },
                       flexShrink: 0,
                       order: 2,
-                      my: 1,
+                      mt: { md: "0px", sm: "8px" },
+                      mb: { md: "0px", sm: "48px" },
                     }}
                   >
                     <FieldControls>
diff --git a/frontends/mit-open/src/pages/LearningPathListingPage/LearningPathListingPage.tsx b/frontends/mit-open/src/pages/LearningPathListingPage/LearningPathListingPage.tsx
index 2c35075887..7924198ae3 100644
--- a/frontends/mit-open/src/pages/LearningPathListingPage/LearningPathListingPage.tsx
+++ b/frontends/mit-open/src/pages/LearningPathListingPage/LearningPathListingPage.tsx
@@ -112,7 +112,6 @@ const LearningPathListingPage: React.FC = () => {
   return (
     <BannerPage
       src="/static/images/course_search_banner.png"
-      alt=""
       className="learningpaths-page"
     >
       <MetaTags>
diff --git a/frontends/mit-open/src/pages/ListDetailsPage/ListDetailsPage.tsx b/frontends/mit-open/src/pages/ListDetailsPage/ListDetailsPage.tsx
index b8c238c303..dd52015a22 100644
--- a/frontends/mit-open/src/pages/ListDetailsPage/ListDetailsPage.tsx
+++ b/frontends/mit-open/src/pages/ListDetailsPage/ListDetailsPage.tsx
@@ -112,7 +112,6 @@ const ListDetailsPage: React.FC<ListDetailsPageProps> = ({
   return (
     <BannerPage
       src="/static/images/course_search_banner.png"
-      alt=""
       className="learningpaths-page"
     >
       <MetaTags>
diff --git a/frontends/mit-open/src/pages/UserListListingPage/UserListListingPage.tsx b/frontends/mit-open/src/pages/UserListListingPage/UserListListingPage.tsx
index cf8f44bfc8..afb3e9a755 100644
--- a/frontends/mit-open/src/pages/UserListListingPage/UserListListingPage.tsx
+++ b/frontends/mit-open/src/pages/UserListListingPage/UserListListingPage.tsx
@@ -159,7 +159,6 @@ const UserListListingPage: React.FC = () => {
   return (
     <BannerPage
       src="/static/images/course_search_banner.png"
-      alt=""
       className="learningpaths-page"
     >
       <MetaTags>
diff --git a/frontends/ol-components/src/components/BannerPage/BannerPage.tsx b/frontends/ol-components/src/components/BannerPage/BannerPage.tsx
index 83ae99f14b..57e76e6fa4 100644
--- a/frontends/ol-components/src/components/BannerPage/BannerPage.tsx
+++ b/frontends/ol-components/src/components/BannerPage/BannerPage.tsx
@@ -3,58 +3,16 @@ import styled from "@emotion/styled"
 
 const BANNER_HEIGHT = "200px"
 const SM_BANNER_HEIGHT = "115px"
-const BACKGROUND_FALLBACK_COLOR = "#20316d"
+const BACKGROUND_FALLBACK_COLOR = "#000"
+const DEFAULT_BACKGROUND_SIZE = "cover"
 
 interface ImgProps {
   /**
    * The `src` attribute for the banner image.
    */
   src?: string | null
-  /**
-   * The `alt` attribute for the banner image.
-   */
-  alt?: string
 }
 
-/**
- * Prefer direct use of `BannerPage` component.
- */
-const BannerContainer = styled.div`
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: -1;
-`
-
-const imageStylesheet = `
-  width: 100%;
-  display: block;
-`
-
-const StyledImage = styled.img`
-  ${imageStylesheet}
-  object-fit: cover;
-  height: 100%;
-`
-
-const PlaceholderDiv = styled.div`
-  ${imageStylesheet}
-  background-color: ${BACKGROUND_FALLBACK_COLOR};
-  min-height: ${BANNER_HEIGHT};
-  height: 100%;
-  ${({ theme }) => theme.breakpoints.down("sm")} {
-    min-height: ${SM_BANNER_HEIGHT};
-  }
-`
-
-/**
- * Prefer direct use of `BannerPage` component.
- */
-const BannerImage = ({ src, alt }: ImgProps) =>
-  src ? <StyledImage src={src} alt={alt || ""} /> : <PlaceholderDiv />
-
 /**
  * Prefer direct use of `BannerPage` component.
  */
@@ -78,12 +36,15 @@ interface BannerPageProps extends ImgProps {
    */
   bannerContent?: React.ReactNode
   bannerContainerClass?: string
+  backgroundSize?: string
+  dim?: number
 }
 
 const BannerPageHeaderFlex = styled.header`
   min-height: ${BANNER_HEIGHT};
   height: 100%;
   position: relative;
+
   ${({ theme }) => theme.breakpoints.down("sm")} {
     min-height: ${SM_BANNER_HEIGHT};
   }
@@ -91,6 +52,7 @@ const BannerPageHeaderFlex = styled.header`
   display: flex;
   flex-direction: column;
   justify-content: center;
+  overflow: hidden;
 `
 
 /**
@@ -102,18 +64,29 @@ const BannerPage: React.FC<BannerPageProps> = ({
   src,
   bannerContent,
   bannerContainerClass,
-  alt,
   children,
   omitBackground,
+  dim = 0,
+  backgroundSize = DEFAULT_BACKGROUND_SIZE,
 }) => {
   return (
     <BannerPageWrapper className={className}>
-      <BannerPageHeaderFlex className={bannerContainerClass}>
-        <BannerContainer>
-          {!omitBackground && <BannerImage src={src} alt={alt} />}
-        </BannerContainer>
+      <BannerPageHeaderFlex
+        className={bannerContainerClass}
+        style={
+          !omitBackground
+            ? {
+                background: `url(${src}) no-repeat top left #000`,
+                backgroundAttachment: "fixed",
+                backgroundSize: backgroundSize,
+                backgroundImage: `linear-gradient(rgba(0 0 0 / ${dim}%), rgba(0 0 0 / ${dim}%)), url('${src}')`,
+              }
+            : { background: BACKGROUND_FALLBACK_COLOR }
+        }
+      >
         {bannerContent}
       </BannerPageHeaderFlex>
+
       {children}
     </BannerPageWrapper>
   )