diff --git a/components/BloomWrapper.tsx b/components/BloomWrapper.tsx
index 5e7c6d0f..a311218e 100644
--- a/components/BloomWrapper.tsx
+++ b/components/BloomWrapper.tsx
@@ -15,9 +15,10 @@ const StyledBloomIIIFWrapper = styled("div", {
     display: "none",
   },
 
-  "@sm": {
+  "@xs": {
     "& > div > div": {
       alignItems: "center",
+      textAlign: "center",
 
       "& > div": {
         "&:last-child": {
diff --git a/components/Facets/Facets.styled.ts b/components/Facets/Facets.styled.ts
index 040158b4..39f5961d 100644
--- a/components/Facets/Facets.styled.ts
+++ b/components/Facets/Facets.styled.ts
@@ -1,4 +1,3 @@
-import { StyledToggle } from "@/components/Shared/Switch.styled";
 import { Wrapper as WorkTypeWrapper } from "@/components/Facets/WorkType/WorkType.styled";
 import { styled } from "@/stitches.config";
 
@@ -7,23 +6,28 @@ import { styled } from "@/stitches.config";
 const StyledFacets = styled("div", {
   display: "flex",
   justifyContent: "space-between",
-  margin: "1.618rem 0",
   position: "relative",
+  margin: "$gr4 0",
   left: "0",
-  transition: "$dcAll",
+  transition: "$dcScrollLeft",
   zIndex: "1",
 
   [`& ${WorkTypeWrapper}`]: {
     borderRight: "1px solid $black10",
     paddingRight: "$gr2",
     transition: "$dcWidth",
+
+    "@sm": {
+      marginTop: "$gr3",
+      borderRight: "none",
+      paddingRight: "0",
+    },
   },
 
   "@sm": {
-    [`& ${WorkTypeWrapper}`]: {
-      width: "0",
-      opacity: "0",
-    },
+    padding: "$gr4 0",
+    flexDirection: "column",
+    alignItems: "center",
   },
 });
 
@@ -32,41 +36,61 @@ const Width = styled("span", {
   width: "100%",
 });
 
+const FacetExtras = styled("div", {
+  display: "flex",
+
+  "@sm": {
+    marginTop: "$gr4",
+    flexDirection: "column-reverse",
+    alignItems: "center",
+  },
+});
+
 const Wrapper = styled("div", {
+  height: "38px",
+  transition: "$dcScrollHeight",
+  margin: "$gr4 0",
+
+  "@sm": {
+    margin: "-$gr4 0 $gr4",
+    backgroundColor: "$gray6",
+    height: "225px",
+  },
+
   ".facets-ui-container": {
     transition: "$dcAll",
   },
 
   "&[data-filter-fixed='true']": {
-    margin: "1.618rem 0",
     flexGrow: "0",
     flexShrink: "1",
     height: "38px",
 
-    [`& ${WorkTypeWrapper}`]: {
+    "@sm": {
+      backgroundColor: "transparent",
+      margin: "0",
+    },
+
+    [`& ${FacetExtras}`]: {
       width: "0",
       opacity: "0",
     },
 
     [`& ${StyledFacets}`]: {
       position: "fixed",
-      top: "50px",
+      margin: "0",
+      top: "$gr6",
       left: "50%",
       zIndex: "1",
       transform: "translate(-50%)",
       backfaceVisibility: "hidden",
       webkitFontSmoothing: "subpixel-antialiased",
-    },
 
-    [`& ${StyledToggle}`]: {
-      width: "0",
-      opacity: "0",
+      "@sm": {
+        top: "$gr5",
+      },
     },
   },
 });
 
-const FacetExtras = styled("div", {
-  display: "flex",
-});
-
 export { FacetExtras, StyledFacets, Width, Wrapper };
diff --git a/components/Facets/Filter/Clear.styled.ts b/components/Facets/Filter/Clear.styled.ts
index f5c03f57..7075e488 100644
--- a/components/Facets/Filter/Clear.styled.ts
+++ b/components/Facets/Filter/Clear.styled.ts
@@ -17,6 +17,7 @@ const FilterClearStyled = styled("button", {
   marginLeft: "$gr2",
   padding: "0 $gr3",
   transition: "$dcAll",
+  whiteSpace: "nowrap",
 
   "&:focus, &:hover": {
     color: "$purple",
diff --git a/components/Header/Header.styled.ts b/components/Header/Header.styled.ts
index a4af571b..1398b456 100644
--- a/components/Header/Header.styled.ts
+++ b/components/Header/Header.styled.ts
@@ -76,6 +76,7 @@ const Primary = styled("div", {
   position: "relative",
   top: "unset",
   height: "$gr5",
+  boxShadow: "2px 2px 5px #0001",
 
   [`& ${ContainerStyled}`]: {
     display: "flex",
@@ -86,15 +87,15 @@ const Primary = styled("div", {
     transition: "$dcAll",
 
     [`& ${NavStyled}`]: {
-      backgroundColor: "$gray6",
-      color: "$purple",
+      backgroundColor: "$purple120",
       fontSize: "$gr4",
-      fontFamily: "$northwesternSansBold",
-      paddingTop: "2px",
+      fontFamily: "$northwesternSansRegular",
       display: "flex",
       height: "$gr5",
+      boxShadow: "3px -3px 19px #fff1",
 
       a: {
+        color: "$white",
         display: "flex",
         height: "100%",
         justifyContent: "center",
@@ -120,6 +121,8 @@ const Primary = styled("div", {
   },
 
   "&[data-search-fixed='true']": {
+    zIndex: "2",
+
     [`& ${ContainerStyled}`]: {
       position: "fixed",
       top: "0",
@@ -143,10 +146,6 @@ const Primary = styled("div", {
         opacity: "0",
       },
 
-      button: {
-        backgroundColor: "$purple10",
-      },
-
       [`& ${SearchStyled}`]: {
         marginRight: "0",
       },
@@ -209,6 +208,8 @@ const HeaderStyled = styled("header", {
         },
 
         [`& ${Primary}`]: {
+          boxShadow: "unset",
+
           [`& ${SearchStyled}, & ${NavStyled}`]: {
             boxShadow: "8px 8px 19px #0003",
           },
diff --git a/components/Heading/Heading.styled.ts b/components/Heading/Heading.styled.ts
index c6b256dc..2cac8d43 100644
--- a/components/Heading/Heading.styled.ts
+++ b/components/Heading/Heading.styled.ts
@@ -19,6 +19,10 @@ const StyledHeading = styled("h2", {
     letterSpacing: "-0.015em",
     margin: "$gr6 0 $gr4",
 
+    "@sm": {
+      fontSize: "$gr7 !important",
+    },
+
     "&::before": {
       height: "$gr1",
       width: "$gr7",
diff --git a/components/Homepage/Overview.tsx b/components/Homepage/Overview.tsx
index 1adf0830..856c19ea 100644
--- a/components/Homepage/Overview.tsx
+++ b/components/Homepage/Overview.tsx
@@ -25,7 +25,7 @@ const HomepageOverview = () => {
               audiovisual materials - as well as licensed art historical images
               for teaching and reference.
             </p>
-            <Button isPrimary onClick={() => router.push("/about")}>
+            <Button isPrimary isLowercase onClick={() => router.push("/about")}>
               Learn More
             </Button>
           </Content>
diff --git a/components/Search/Search.styled.ts b/components/Search/Search.styled.ts
index da585c48..a7f5e0c6 100644
--- a/components/Search/Search.styled.ts
+++ b/components/Search/Search.styled.ts
@@ -10,7 +10,7 @@ const SearchStyled = styled("form", {
   backgroundColor: "$white",
   height: "$gr5",
   marginRight: "$gr5",
-  boxShadow: "inset 0 -1px 0 #f0f0f0",
+  boxShadow: "3px -3px 19px #fff1",
   transition: "$dcAll",
 
   "@sm": {
@@ -18,6 +18,10 @@ const SearchStyled = styled("form", {
     marginRight: "0",
   },
 
+  "@lg": {
+    marginRight: "$gr3",
+  },
+
   svg: {
     position: "absolute",
     display: "flex",
@@ -41,19 +45,30 @@ const Input = styled("input", {
   width: "100%",
   border: "none",
   backgroundColor: "transparent",
-  padding: "2px $gr5 0",
+  padding: "1px $gr3 0 $gr5",
   fontSize: "$gr3",
   zIndex: "1",
   fontFamily: "$northwesternSansRegular",
+  whiteSpace: "nowrap",
+
+  "&::placeholder": {
+    overflow: "hidden",
+    color: "$black80",
+    textOverflow: "ellipsis",
+    marginRight: "$gr5",
+  },
 });
 
 const Button = styled("button", {
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
   border: "none",
-  backgroundColor: "$gray6",
-  padding: "2px $3 0",
-  color: "$purple",
+  backgroundColor: "$purple120",
+  padding: "0 $gr3 ",
+  color: "$white",
   fontSize: "$gr4",
-  fontFamily: "$northwesternSansBold",
+  fontFamily: "$northwesternSansRegular",
   cursor: "pointer",
   textRendering: "optimizeLegibility",
 });
@@ -63,18 +78,25 @@ const Clear = styled("button", {
   display: "flex",
   right: "5rem",
   height: "$gr5",
-  width: "$gr5",
+  width: "calc($gr5 + $gr2)",
   justifyContent: "center",
   textAlign: "center",
   alignItems: "center",
   cursor: "pointer",
   border: "none",
-  backgroundColor: "transparent",
+  background: "linear-gradient(90deg, #fff0 0, #fff  38.2%)",
   zIndex: "1",
+  fill: "$black80",
+
+  "&:focus, &:hover": {
+    fill: "$purple30",
+  },
 
   svg: {
-    fill: "$black50",
-    padding: "$gr1",
+    fill: "inherit",
+    padding: "$gr2",
+    marginLeft: "$gr2",
+    transition: "$dcAll",
   },
 });
 
diff --git a/components/Search/Search.tsx b/components/Search/Search.tsx
index d00a4512..c1115cc6 100644
--- a/components/Search/Search.tsx
+++ b/components/Search/Search.tsx
@@ -1,5 +1,9 @@
 import { Button, Clear, Input, SearchStyled } from "./Search.styled";
-import { IconClear, IconSearch } from "@/components/Shared/SVG/Icons";
+import {
+  IconArrowForward,
+  IconClear,
+  IconSearch,
+} from "@/components/Shared/SVG/Icons";
 import React, {
   ChangeEvent,
   FocusEvent,
@@ -98,7 +102,7 @@ const Search: React.FC<SearchProps> = ({ isSearchActive }) => {
         </Clear>
       )}
       <Button type="submit" data-testid="submit-button">
-        Search
+        Search <IconArrowForward />
       </Button>
       {isLoaded && <IconSearch />}
     </SearchStyled>
diff --git a/components/SharedLink/SharedLink.test.tsx b/components/SharedLink/SharedLink.test.tsx
index 85b38354..639a38a5 100644
--- a/components/SharedLink/SharedLink.test.tsx
+++ b/components/SharedLink/SharedLink.test.tsx
@@ -153,6 +153,7 @@ const work: Work = {
   },
   file_sets: [
     {
+      accession_number: "inu-dil-12b39039-68af-4a31-8b04-1b025d95a0b8",
       duration: null,
       height: 4050,
       id: "7ad42e60-a8b6-444d-b4cf-f53f9c2756f6",
diff --git a/components/Work/TopInfo.styled.ts b/components/Work/TopInfo.styled.ts
index d5b5a080..44586359 100644
--- a/components/Work/TopInfo.styled.ts
+++ b/components/Work/TopInfo.styled.ts
@@ -7,12 +7,12 @@ const ActionButtons = styled("div", {
   display: "flex",
   flexDirection: "row",
   justifyContent: "flext-start",
-  padding: "1rem 0",
+  padding: "$gr2 0",
 
   button: {
-    marginRight: "$4",
+    marginRight: "$gr3",
     fontFamily: "$northwesternSansLight",
-    paddingTop: "$3",
+    paddingTop: "$gr3",
 
     "&:last-child": {
       marginRight: "0",
@@ -30,9 +30,9 @@ const ActionButtons = styled("div", {
 
 const TopInfoContent = styled("div", {
   display: "grid",
-  gap: "$7",
+  gap: "$gr7",
   gridTemplateColumns: "618fr 382fr",
-  margin: "$3 0",
+  margin: "$gr3 0",
 
   "@md": {
     gap: "$gr5",
@@ -45,7 +45,7 @@ const TopInfoContent = styled("div", {
 });
 
 const TopInfoWrapper = styled("section", {
-  margin: "$6 0",
+  margin: "$gr5 0",
 
   [`> header`]: {
     display: "flex",
@@ -58,28 +58,26 @@ const TopInfoWrapper = styled("section", {
       letterSpacing: "-0.015em",
       margin: "0",
 
-      "&::before": {
-        height: "$1",
-        width: "$7",
-        display: "block",
-        backgroundColor: "$purple10",
-        content: "",
-        position: "relative",
-        top: "-$4",
+      "@sm": {
+        fontSize: "$gr7",
       },
     },
 
     p: {
-      fontSize: "$5",
+      fontSize: "$gr5",
       color: "$black50",
       fontFamily: "$northwesternSansLight",
       lineHeight: "1.47em",
+
+      "@sm": {
+        fontSize: "$gr4",
+      },
     },
   },
 });
 
 const TopInfoCollection = styled("div", {
-  padding: "1rem 0",
+  padding: "$gr4 0",
 
   [`& ${StyledHeading}`]: {
     color: "$black80",
diff --git a/mocks/sample-work1.ts b/mocks/sample-work1.ts
index db5facfd..37aa638a 100644
--- a/mocks/sample-work1.ts
+++ b/mocks/sample-work1.ts
@@ -36,6 +36,7 @@ export const sampleWork1: Work = {
   description: ["Ima description"],
   file_sets: [
     {
+      accession_number: "inu-dil-50575a78-a47a-4a07-939f-6e1d6a9d7065",
       duration: 20,
       height: 1000,
       id: "93d75ffe-20d8-48ea-9206-8db9114f2731",
diff --git a/mocks/sample-work2.ts b/mocks/sample-work2.ts
index e2555980..d2ca2bbd 100644
--- a/mocks/sample-work2.ts
+++ b/mocks/sample-work2.ts
@@ -36,6 +36,7 @@ export const sampleWork2: Work = {
   description: ["Ima cool description"],
   file_sets: [
     {
+      accession_number: "inu-dil-50575a78-a47a-4a07-939f-6e1d6a9d7065",
       duration: null,
       height: 1000,
       id: "93d75ffe-20d8-48ea-9206-8db9114f2731",
diff --git a/package-lock.json b/package-lock.json
index ddd9961a..5fb63a03 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
         "@honeybadger-io/js": "^4.9.2",
         "@honeybadger-io/webpack": "^4.8.2",
         "@iiif/parser": "^1.0.10",
-        "@nulib/dcapi-types": "^2.0.0-rc.4",
+        "@nulib/dcapi-types": "^2.0.0-rc.5",
         "@nulib/design-system": "^1.6.2",
         "@radix-ui/colors": "^0.1.8",
         "@radix-ui/react-accordion": "^1.0.1",
@@ -1999,9 +1999,9 @@
       }
     },
     "node_modules/@nulib/dcapi-types": {
-      "version": "2.0.0-rc.4",
-      "resolved": "https://registry.npmjs.org/@nulib/dcapi-types/-/dcapi-types-2.0.0-rc.4.tgz",
-      "integrity": "sha512-vA1gAHusP9xE8NWEnPdKM0t8UsN8bcgw5a1j7/8fGekl2mgb/6H2F10J0bJ9MslfvLVsA1YFoW9yaV7OxbOzMg=="
+      "version": "2.0.0-rc.5",
+      "resolved": "https://registry.npmjs.org/@nulib/dcapi-types/-/dcapi-types-2.0.0-rc.5.tgz",
+      "integrity": "sha512-z4GqJk+V6eRQkF5k7jfebUsAZx/rrb1lFGrbeUXB0Hz3GmbwYwRWS1CovpHz6Cvz12/I/z5HNl0C/QM5u/ucqA=="
     },
     "node_modules/@nulib/design-system": {
       "version": "1.6.2",
@@ -15059,9 +15059,9 @@
       }
     },
     "@nulib/dcapi-types": {
-      "version": "2.0.0-rc.4",
-      "resolved": "https://registry.npmjs.org/@nulib/dcapi-types/-/dcapi-types-2.0.0-rc.4.tgz",
-      "integrity": "sha512-vA1gAHusP9xE8NWEnPdKM0t8UsN8bcgw5a1j7/8fGekl2mgb/6H2F10J0bJ9MslfvLVsA1YFoW9yaV7OxbOzMg=="
+      "version": "2.0.0-rc.5",
+      "resolved": "https://registry.npmjs.org/@nulib/dcapi-types/-/dcapi-types-2.0.0-rc.5.tgz",
+      "integrity": "sha512-z4GqJk+V6eRQkF5k7jfebUsAZx/rrb1lFGrbeUXB0Hz3GmbwYwRWS1CovpHz6Cvz12/I/z5HNl0C/QM5u/ucqA=="
     },
     "@nulib/design-system": {
       "version": "1.6.2",
diff --git a/package.json b/package.json
index 4fc95f7a..e1c43c43 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
     "@honeybadger-io/js": "^4.9.2",
     "@honeybadger-io/webpack": "^4.8.2",
     "@iiif/parser": "^1.0.10",
-    "@nulib/dcapi-types": "^2.0.0-rc.4",
+    "@nulib/dcapi-types": "^2.0.0-rc.5",
     "@nulib/design-system": "^1.6.2",
     "@radix-ui/colors": "^0.1.8",
     "@radix-ui/react-accordion": "^1.0.1",
diff --git a/styles/transitions.ts b/styles/transitions.ts
index 7c9ad11c..83690274 100644
--- a/styles/transitions.ts
+++ b/styles/transitions.ts
@@ -7,6 +7,8 @@ const transitions = {
   dcAll: `all ${seconds}s ${timingFunction}`,
   dcOpacity: `opacity ${seconds}s ${timingFunction}`,
   dcImageLoad: `all 1s ${timingFunction}`,
+  dcScrollLeft: `left 1s ${timingFunction}`,
+  dcScrollHeight: `height 1s ${timingFunction}`,
   dcWidth: `width ${seconds}s ${timingFunction}`,
 };