diff --git a/frontends/mit-learn/src/pages/HomePage/HeroSearch.tsx b/frontends/mit-learn/src/pages/HomePage/HeroSearch.tsx
index fe8314cc41..f131daff69 100644
--- a/frontends/mit-learn/src/pages/HomePage/HeroSearch.tsx
+++ b/frontends/mit-learn/src/pages/HomePage/HeroSearch.tsx
@@ -13,8 +13,8 @@ import {
 } from "@/common/urls"
 import { NON_DEGREE_LEARNING_FRAGMENT_IDENTIFIER } from "../AboutPage/AboutPage"
 import {
-  RiAddBoxLine,
   RiAwardLine,
+  RiFileAddLine,
   RiSearch2Line,
   RiThumbUpLine,
   RiTimeLine,
@@ -34,7 +34,7 @@ const SEARCH_CHIPS: SearchChip[] = [
     label: "Recently Added",
     href: SEARCH_NEW,
     variant: "outlinedWhite",
-    icon: <RiTimeLine />,
+    icon: <RiFileAddLine />,
   },
   {
     label: "Popular",
@@ -46,7 +46,7 @@ const SEARCH_CHIPS: SearchChip[] = [
     label: "Upcoming",
     href: SEARCH_UPCOMING,
     variant: "outlinedWhite",
-    icon: <RiAddBoxLine />,
+    icon: <RiTimeLine />,
   },
   {
     label: "Free",
@@ -63,7 +63,7 @@ const SEARCH_CHIPS: SearchChip[] = [
   {
     label: "Explore All",
     href: "/search/",
-    variant: "gray",
+    variant: "outlined",
     icon: <RiSearch2Line />,
   },
 ]
@@ -141,10 +141,31 @@ const TopicLink = styled(Link)({
   textDecoration: "underline",
 })
 
-const StyledChipLink = styled(ChipLink)(({ theme, variant }) => [
-  variant === "outlinedWhite" ?? {
+const TrendingChip = styled(ChipLink)(({ theme, variant }) => [
+  {
+    height: "32px",
+    padding: "8px 16px",
+    ".MuiChip-icon": {
+      marginRight: "4px",
+    },
+  },
+  variant === "outlinedWhite" && {
     borderColor: theme.custom.colors.lightGray2,
     color: theme.custom.colors.silverGrayDark,
+    "&:hover": {
+      backgroundColor: `${theme.custom.colors.lightGray1} !important`,
+      borderColor: `${theme.custom.colors.silverGrayLight} !important`,
+      color: theme.custom.colors.darkGray2,
+    },
+  },
+  variant === "outlined" && {
+    backgroundColor: theme.custom.colors.lightGray2,
+    color: theme.custom.colors.darkGray2,
+    borderColor: theme.custom.colors.lightGray2,
+    "&:hover": {
+      backgroundColor: `${theme.custom.colors.lightGray2} !important`,
+      borderColor: theme.custom.colors.silverGray,
+    },
   },
 ])
 
@@ -219,7 +240,7 @@ const HeroSearch: React.FC = () => {
             </BrowseByTopicContainer>
             <TrendingContainer>
               {SEARCH_CHIPS.map((chip) => (
-                <StyledChipLink
+                <TrendingChip
                   key={chip.label}
                   variant={chip.variant}
                   size="medium"
diff --git a/frontends/mit-learn/src/pages/HomePage/SearchInput.tsx b/frontends/mit-learn/src/pages/HomePage/SearchInput.tsx
index 75645c7c37..07ba11403c 100644
--- a/frontends/mit-learn/src/pages/HomePage/SearchInput.tsx
+++ b/frontends/mit-learn/src/pages/HomePage/SearchInput.tsx
@@ -5,7 +5,7 @@ import type { InputProps } from "ol-components"
 
 const StyledInput = styled(Input)(({ theme }) => ({
   height: "72px",
-  borderRadius: "6px",
+  boxShadow: "0px 8px 20px 0px rgba(120, 147, 172, 0.10)",
   "&.MuiInputBase-adornedEnd": {
     paddingRight: "0 !important",
   },
@@ -33,6 +33,15 @@ const StyledAdornmentButton = styled(AdornmentButton)(({ theme }) => ({
   },
 }))
 
+const StyledClearButton = styled(StyledAdornmentButton)({
+  ".MuiInputBase-sizeHero &": {
+    width: "32px",
+    ["&:hover"]: {
+      backgroundColor: "transparent",
+    },
+  },
+})
+
 export interface SearchSubmissionEvent {
   target: {
     value: string
@@ -95,13 +104,13 @@ const SearchInput: React.FC<SearchInputProps> = (props) => {
       endAdornment={
         <>
           {props.value && (
-            <StyledAdornmentButton
+            <StyledClearButton
               className={props.classNameClear}
               aria-label="Clear search text"
               onClick={props.onClear}
             >
               <RiCloseLine />
-            </StyledAdornmentButton>
+            </StyledClearButton>
           )}
           <StyledAdornmentButton
             aria-label="Search"