diff --git a/apps/scandic-web/components/Blocks/CampaignHotelListing/HotelListingItem/hotelListingItem.module.css b/apps/scandic-web/components/Blocks/CampaignHotelListing/HotelListingItem/hotelListingItem.module.css
index afb8f7c7d..68cbf96b5 100644
--- a/apps/scandic-web/components/Blocks/CampaignHotelListing/HotelListingItem/hotelListingItem.module.css
+++ b/apps/scandic-web/components/Blocks/CampaignHotelListing/HotelListingItem/hotelListingItem.module.css
@@ -14,19 +14,6 @@
   position: relative;
 }
 
-.tripAdvisor {
-  position: absolute;
-  top: var(--Space-x2);
-  left: var(--Space-x2);
-  display: flex;
-  align-items: center;
-  gap: var(--Space-x05);
-  background-color: var(--Surface-Primary-Default);
-  padding: var(--Space-x025) var(--Space-x1);
-  border-radius: var(--Corner-Radius-sm);
-  color: var(--Text-Interactive-Default);
-}
-
 .content {
   padding: 0 var(--Space-x2);
   display: grid;
diff --git a/apps/scandic-web/components/Blocks/CampaignHotelListing/HotelListingItem/index.tsx b/apps/scandic-web/components/Blocks/CampaignHotelListing/HotelListingItem/index.tsx
index 4fc68883a..fdf616c3d 100644
--- a/apps/scandic-web/components/Blocks/CampaignHotelListing/HotelListingItem/index.tsx
+++ b/apps/scandic-web/components/Blocks/CampaignHotelListing/HotelListingItem/index.tsx
@@ -5,8 +5,8 @@ import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import { FacilityToIcon } from "@scandic-hotels/design-system/FacilityToIcon"
 import HotelLogoIcon from "@scandic-hotels/design-system/Icons/HotelLogoIcon"
-import TripadvisorIcon from "@scandic-hotels/design-system/Icons/TripadvisorIcon"
 import ImageGallery from "@scandic-hotels/design-system/ImageGallery"
+import { TripAdvisorChip } from "@scandic-hotels/design-system/TripAdvisorChip"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
@@ -47,12 +47,12 @@ export default function HotelListingItem({
           )}
         />
         {tripadvisorRating ? (
-          <Typography variant="Title/Overline/sm">
-            <div className={styles.tripAdvisor}>
-              <TripadvisorIcon color="CurrentColor" />
-              <span>{tripadvisorRating}</span>
-            </div>
-          </Typography>
+          <TripAdvisorChip
+            color="Neutral"
+            rating={tripadvisorRating}
+            wrapper="x2"
+            size="sm"
+          />
         ) : null}
       </div>
       <div className={styles.content}>
diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelListItem/hotelListItem.module.css b/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelListItem/hotelListItem.module.css
index 9b486fe46..a4ac10903 100644
--- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelListItem/hotelListItem.module.css
+++ b/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelListItem/hotelListItem.module.css
@@ -25,19 +25,6 @@
   height: 200px;
 }
 
-.tripAdvisor {
-  position: absolute;
-  top: var(--Space-x2);
-  left: var(--Space-x2);
-  display: flex;
-  align-items: center;
-  gap: var(--Space-x05);
-  background-color: var(--Surface-Primary-Default);
-  padding: var(--Space-x025) var(--Space-x1);
-  border-radius: var(--Corner-Radius-sm);
-  color: var(--Text-Interactive-Default);
-}
-
 .intro {
   display: grid;
   gap: var(--Space-x05);
@@ -90,11 +77,6 @@
     height: 100%;
   }
 
-  .tripAdvisor {
-    top: 12px;
-    left: 12px;
-  }
-
   .content {
     padding: var(--Space-x15);
     gap: var(--Space-x1);
diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelListItem/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelListItem/index.tsx
index 85b330b6b..0ed4bcbd3 100644
--- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelListItem/index.tsx
+++ b/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/HotelListItem/index.tsx
@@ -9,8 +9,8 @@ import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import { FacilityToIcon } from "@scandic-hotels/design-system/FacilityToIcon"
 import HotelLogoIcon from "@scandic-hotels/design-system/Icons/HotelLogoIcon"
-import TripadvisorIcon from "@scandic-hotels/design-system/Icons/TripadvisorIcon"
 import ImageGallery from "@scandic-hotels/design-system/ImageGallery"
+import { TripAdvisorChip } from "@scandic-hotels/design-system/TripAdvisorChip"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { useDestinationPageHotelsMapStore } from "@/stores/destination-page-hotels-map"
@@ -80,12 +80,12 @@ export default function HotelListItem({ hotel, url }: HotelListItemProps) {
           )}
         />
         {hotel.tripadvisor && (
-          <Typography variant="Title/Overline/sm">
-            <div className={styles.tripAdvisor}>
-              <TripadvisorIcon color="CurrentColor" />
-              <span>{hotel.tripadvisor}</span>
-            </div>
-          </Typography>
+          <TripAdvisorChip
+            color="Neutral"
+            rating={hotel.tripadvisor}
+            wrapper="x2"
+            size="sm"
+          />
         )}
       </div>
       <div className={styles.content}>
diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationListing/HotelListing/HotelListingItem/hotelListingItem.module.css b/apps/scandic-web/components/ContentType/DestinationPage/DestinationListing/HotelListing/HotelListingItem/hotelListingItem.module.css
index 96495d680..b790d1238 100644
--- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationListing/HotelListing/HotelListingItem/hotelListingItem.module.css
+++ b/apps/scandic-web/components/ContentType/DestinationPage/DestinationListing/HotelListing/HotelListingItem/hotelListingItem.module.css
@@ -18,19 +18,6 @@
   height: 200px;
 }
 
-.tripAdvisor {
-  position: absolute;
-  top: var(--Space-x2);
-  left: var(--Space-x2);
-  display: flex;
-  align-items: center;
-  gap: var(--Space-x05);
-  background-color: var(--Base-Surface-Primary-light-Normal);
-  padding: var(--Space-x025) var(--Space-x1);
-  border-radius: var(--Corner-Radius-sm);
-  color: var(--Text-Interactive-Default);
-}
-
 .hotelName {
   color: var(--Text-Default);
 }
diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationListing/HotelListing/HotelListingItem/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/DestinationListing/HotelListing/HotelListingItem/index.tsx
index 9edeac762..f40c83bed 100644
--- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationListing/HotelListing/HotelListingItem/index.tsx
+++ b/apps/scandic-web/components/ContentType/DestinationPage/DestinationListing/HotelListing/HotelListingItem/index.tsx
@@ -10,8 +10,8 @@ import { Divider } from "@scandic-hotels/design-system/Divider"
 import { FacilityToIcon } from "@scandic-hotels/design-system/FacilityToIcon"
 import HotelLogoIcon from "@scandic-hotels/design-system/Icons/HotelLogoIcon"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import TripadvisorIcon from "@scandic-hotels/design-system/Icons/TripadvisorIcon"
 import ImageGallery from "@scandic-hotels/design-system/ImageGallery"
+import { TripAdvisorChip } from "@scandic-hotels/design-system/TripAdvisorChip"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { useDestinationPageHotelsMapStore } from "@/stores/destination-page-hotels-map"
@@ -54,12 +54,12 @@ export default function HotelListingItem({
           )}
         />
         {hotel.tripadvisor && (
-          <Typography variant="Title/Overline/sm">
-            <div className={styles.tripAdvisor}>
-              <TripadvisorIcon color="CurrentColor" />
-              <span>{hotel.tripadvisor}</span>
-            </div>
-          </Typography>
+          <TripAdvisorChip
+            color="Neutral"
+            rating={hotel.tripadvisor}
+            wrapper="x2"
+            size="sm"
+          />
         )}
       </div>
       <div className={styles.content}>
diff --git a/apps/scandic-web/components/ContentType/DestinationPage/HotelMapCard/DialogImage/dialogImage.module.css b/apps/scandic-web/components/ContentType/DestinationPage/HotelMapCard/DialogImage/dialogImage.module.css
index ddb0b9fb8..31b61b9cc 100644
--- a/apps/scandic-web/components/ContentType/DestinationPage/HotelMapCard/DialogImage/dialogImage.module.css
+++ b/apps/scandic-web/components/ContentType/DestinationPage/HotelMapCard/DialogImage/dialogImage.module.css
@@ -9,13 +9,6 @@
   object-fit: cover;
 }
 
-.imageContainer .tripAdvisor {
-  position: absolute;
-  left: 7px;
-  top: 7px;
-  border-radius: var(--Corner-Radius-sm);
-}
-
 @media screen and (max-width: 500px) {
   .imageContainer {
     min-width: 120px;
diff --git a/apps/scandic-web/components/ContentType/DestinationPage/HotelMapCard/DialogImage/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/HotelMapCard/DialogImage/index.tsx
index 714dd7abf..05e6e6e25 100644
--- a/apps/scandic-web/components/ContentType/DestinationPage/HotelMapCard/DialogImage/index.tsx
+++ b/apps/scandic-web/components/ContentType/DestinationPage/HotelMapCard/DialogImage/index.tsx
@@ -1,7 +1,6 @@
-import { ChipStatic } from "@scandic-hotels/design-system/ChipStatic"
-import TripadvisorIcon from "@scandic-hotels/design-system/Icons/TripadvisorIcon"
 import Image from "@scandic-hotels/design-system/Image"
 import ImageFallback from "@scandic-hotels/design-system/ImageFallback"
+import { TripAdvisorChip } from "@scandic-hotels/design-system/TripAdvisorChip"
 
 import styles from "./dialogImage.module.css"
 
@@ -32,12 +31,12 @@ export default function DialogImage({
         />
       )}
       {rating ? (
-        <div className={styles.tripAdvisor}>
-          <ChipStatic color="Neutral" size="sm" className={styles.tripAdvisor}>
-            <TripadvisorIcon color="Icon/Interactive/Default" />
-            {rating}
-          </ChipStatic>
-        </div>
+        <TripAdvisorChip
+          rating={rating}
+          color="Neutral"
+          size="sm"
+          wrapper="x15"
+        />
       ) : null}
     </div>
   )
diff --git a/apps/scandic-web/components/ContentType/HotelPage/IntroSection/TripAdvisorSection/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/IntroSection/TripAdvisorSection/index.tsx
index e66b1cab3..d634d2368 100644
--- a/apps/scandic-web/components/ContentType/HotelPage/IntroSection/TripAdvisorSection/index.tsx
+++ b/apps/scandic-web/components/ContentType/HotelPage/IntroSection/TripAdvisorSection/index.tsx
@@ -39,22 +39,12 @@ export default async function TripAdvisorSection({
     : null
 
   if (!tripAdvisorHref) {
-    return (
-      <TripAdvisorChip
-        rating={tripAdvisor.rating}
-        color="subtle"
-        wrapper={false}
-      />
-    )
+    return <TripAdvisorChip rating={tripAdvisor.rating} color="Subtle" />
   }
 
   return (
     <div className={styles.tripAdvisorSection}>
-      <TripAdvisorChip
-        rating={tripAdvisor.rating}
-        color="subtle"
-        wrapper={false}
-      />
+      <TripAdvisorChip rating={tripAdvisor.rating} color="Subtle" />
       <ButtonLink
         href={tripAdvisorHref}
         variant="Text"
diff --git a/packages/design-system/lib/components/ChipStatic/ChipStatic.stories.tsx b/packages/design-system/lib/components/ChipStatic/ChipStatic.stories.tsx
index 813caa5d9..aa0240f69 100644
--- a/packages/design-system/lib/components/ChipStatic/ChipStatic.stories.tsx
+++ b/packages/design-system/lib/components/ChipStatic/ChipStatic.stories.tsx
@@ -16,27 +16,27 @@ export const Neutral: Story = {
   render: () => (
     <div style={{ display: "flex", gap: "16px", alignItems: "center" }}>
       <ChipStatic color="Neutral" size="xs" lowerCase>
-        <MaterialIcon icon="lock" />
+        <MaterialIcon icon="lock" size={16} />
         lowerCase xs
-        <MaterialIcon icon="lock" />
+        <MaterialIcon icon="lock" size={16} />
       </ChipStatic>
 
       <ChipStatic color="Neutral" size="xs">
-        <MaterialIcon icon="lock" />
+        <MaterialIcon icon="lock" size={16} />
         xs
-        <MaterialIcon icon="lock" />
+        <MaterialIcon icon="lock" size={16} />
       </ChipStatic>
 
       <ChipStatic color="Neutral" size="sm">
-        <MaterialIcon icon="lock" />
+        <MaterialIcon icon="lock" size={16} />
         sm
-        <MaterialIcon icon="lock" />
+        <MaterialIcon icon="lock" size={16} />
       </ChipStatic>
 
       <ChipStatic color="Neutral" size="lg">
-        <MaterialIcon icon="lock" />
+        <MaterialIcon icon="lock" size={20} />
         lg
-        <MaterialIcon icon="lock" />
+        <MaterialIcon icon="lock" size={20} />
       </ChipStatic>
     </div>
   ),
@@ -46,27 +46,27 @@ export const Subtle: Story = {
   render: () => (
     <div style={{ display: "flex", gap: "16px", alignItems: "center" }}>
       <ChipStatic color="Subtle" size="xs" lowerCase>
-        <MaterialIcon icon="lock" />
+        <MaterialIcon icon="lock" size={16} />
         lowerCase xs
-        <MaterialIcon icon="lock" />
+        <MaterialIcon icon="lock" size={16} />
       </ChipStatic>
 
       <ChipStatic color="Subtle" size="xs">
-        <MaterialIcon icon="lock" />
+        <MaterialIcon icon="lock" size={16} />
         xs
-        <MaterialIcon icon="lock" />
+        <MaterialIcon icon="lock" size={16} />
       </ChipStatic>
 
       <ChipStatic color="Subtle" size="sm">
-        <MaterialIcon icon="lock" />
+        <MaterialIcon icon="lock" size={16} />
         sm
-        <MaterialIcon icon="lock" />
+        <MaterialIcon icon="lock" size={16} />
       </ChipStatic>
 
       <ChipStatic color="Subtle" size="lg">
-        <MaterialIcon icon="lock" />
+        <MaterialIcon icon="lock" size={20} />
         lg
-        <MaterialIcon icon="lock" />
+        <MaterialIcon icon="lock" size={20} />
       </ChipStatic>
     </div>
   ),
@@ -76,27 +76,27 @@ export const Disabled: Story = {
   render: () => (
     <div style={{ display: "flex", gap: "16px", alignItems: "center" }}>
       <ChipStatic color="Disabled" size="xs" lowerCase>
-        <MaterialIcon icon="lock" />
+        <MaterialIcon icon="lock" size={16} />
         lowerCase xs
-        <MaterialIcon icon="lock" />
+        <MaterialIcon icon="lock" size={16} />
       </ChipStatic>
 
       <ChipStatic color="Disabled" size="xs">
-        <MaterialIcon icon="lock" />
+        <MaterialIcon icon="lock" size={16} />
         xs
-        <MaterialIcon icon="lock" />
+        <MaterialIcon icon="lock" size={16} />
       </ChipStatic>
 
       <ChipStatic color="Disabled" size="sm">
-        <MaterialIcon icon="lock" />
+        <MaterialIcon icon="lock" size={16} />
         sm
-        <MaterialIcon icon="lock" />
+        <MaterialIcon icon="lock" size={16} />
       </ChipStatic>
 
       <ChipStatic color="Disabled" size="lg">
-        <MaterialIcon icon="lock" />
+        <MaterialIcon icon="lock" size={20} />
         lg
-        <MaterialIcon icon="lock" />
+        <MaterialIcon icon="lock" size={20} />
       </ChipStatic>
     </div>
   ),
diff --git a/packages/design-system/lib/components/ChipStatic/index.tsx b/packages/design-system/lib/components/ChipStatic/index.tsx
index af234dad8..2fba79b87 100644
--- a/packages/design-system/lib/components/ChipStatic/index.tsx
+++ b/packages/design-system/lib/components/ChipStatic/index.tsx
@@ -1 +1,3 @@
 export { ChipStatic } from "./ChipStatic"
+// eslint-disable-next-line react-refresh/only-export-components
+export { variants as chipStaticVariants, withChipStatic } from "./variants"
diff --git a/packages/design-system/lib/components/ChipStatic/variants.ts b/packages/design-system/lib/components/ChipStatic/variants.ts
index 8384af390..9a5820f0a 100644
--- a/packages/design-system/lib/components/ChipStatic/variants.ts
+++ b/packages/design-system/lib/components/ChipStatic/variants.ts
@@ -2,6 +2,8 @@ import { cva } from "class-variance-authority"
 
 import styles from "./chip-static.module.css"
 
+import { deepmerge } from "deepmerge-ts"
+
 const config = {
   variants: {
     color: {
@@ -22,3 +24,16 @@ const config = {
 } as const
 
 export const variants = cva(styles.chip, config)
+
+const chipConfig = {
+  variants: {
+    ...config.variants,
+  },
+  defaultVariants: {
+    ...config.defaultVariants,
+  },
+} as const
+
+export function withChipStatic<T>(config: T) {
+  return deepmerge(chipConfig, config)
+}
diff --git a/packages/design-system/lib/components/HotelCard/HotelCardDialogImage/index.tsx b/packages/design-system/lib/components/HotelCard/HotelCardDialogImage/index.tsx
index 12caae179..c371684ae 100644
--- a/packages/design-system/lib/components/HotelCard/HotelCardDialogImage/index.tsx
+++ b/packages/design-system/lib/components/HotelCard/HotelCardDialogImage/index.tsx
@@ -40,7 +40,9 @@ export function HotelCardDialogImage({
       {rating?.tripAdvisor && (
         <TripAdvisorChip
           rating={rating.tripAdvisor}
-          size={position === "top" ? "small" : "default"}
+          color="Neutral"
+          size={position === "top" ? "xs" : "sm"}
+          wrapper={position === "top" ? "x05" : "x15"}
         />
       )}
     </div>
diff --git a/packages/design-system/lib/components/HotelCard/index.tsx b/packages/design-system/lib/components/HotelCard/index.tsx
index edc8ed792..10edd0e03 100644
--- a/packages/design-system/lib/components/HotelCard/index.tsx
+++ b/packages/design-system/lib/components/HotelCard/index.tsx
@@ -216,7 +216,12 @@ export const HotelCardComponent = memo(
               sizes="(min-width: 768px) calc(100vw - 340px), (min-width: 1367px) 33vw, 100vw"
             />
             {hotel.ratings?.tripAdvisor && (
-              <TripAdvisorChip rating={hotel.ratings.tripAdvisor} />
+              <TripAdvisorChip
+                rating={hotel.ratings.tripAdvisor}
+                color="Neutral"
+                size="sm"
+                wrapper="x2"
+              />
             )}
           </div>
         </div>
diff --git a/packages/design-system/lib/components/HotelInfoCard/index.tsx b/packages/design-system/lib/components/HotelInfoCard/index.tsx
index 92aaef5a7..cdcb97922 100644
--- a/packages/design-system/lib/components/HotelInfoCard/index.tsx
+++ b/packages/design-system/lib/components/HotelInfoCard/index.tsx
@@ -59,7 +59,12 @@ export function HotelInfoCard({
         <div className={styles.imageWrapper}>
           <ImageGallery title={hotel.name} images={galleryImages} fill />
           {hotel.ratings?.tripAdvisor && (
-            <TripAdvisorChip rating={hotel.ratings.tripAdvisor.rating} />
+            <TripAdvisorChip
+              rating={hotel.ratings.tripAdvisor.rating}
+              color="Neutral"
+              size="sm"
+              wrapper="x2"
+            />
           )}
         </div>
         <div className={styles.hotelContent}>
diff --git a/packages/design-system/lib/components/TripAdvisorChip/TripdAdvisorChip.stories.tsx b/packages/design-system/lib/components/TripAdvisorChip/TripdAdvisorChip.stories.tsx
index b06da7267..c65a1b852 100644
--- a/packages/design-system/lib/components/TripAdvisorChip/TripdAdvisorChip.stories.tsx
+++ b/packages/design-system/lib/components/TripAdvisorChip/TripdAdvisorChip.stories.tsx
@@ -9,16 +9,10 @@ const meta: Meta<typeof TripAdvisorChip> = {
     rating: {
       control: { type: "number", min: 0, max: 5, step: 0.1 },
     },
-    size: {
-      control: { type: "select" },
-      options: ["default", "small"],
-    },
-    color: {
-      control: { type: "select" },
-      options: ["default", "subtle"],
-    },
+
     wrapper: {
-      control: { type: "boolean" },
+      control: { type: "select" },
+      options: ["x05", "x15", "x2"],
     },
   },
 }
@@ -29,35 +23,40 @@ type Story = StoryObj<typeof TripAdvisorChip>
 export const Default: Story = {
   args: {
     rating: 4.5,
-    size: "default",
-    color: "default",
-    wrapper: false,
   },
 }
 
-export const WithWrapper: Story = {
+export const WithSmallWrapper: Story = {
   args: {
     rating: 4.5,
-    size: "default",
-    color: "default",
-    wrapper: true,
+    wrapper: "x05",
+  },
+}
+
+export const WithMediumWrapper: Story = {
+  args: {
+    rating: 4.5,
+    wrapper: "x15",
+  },
+}
+
+export const WithLargeWrapper: Story = {
+  args: {
+    rating: 4.5,
+    wrapper: "x2",
   },
 }
 
 export const Small: Story = {
   args: {
     rating: 4.5,
-    size: "small",
-    color: "default",
-    wrapper: true,
+    size: "sm",
   },
 }
 
 export const Subtle: Story = {
   args: {
     rating: 4.5,
-    size: "default",
-    color: "subtle",
-    wrapper: false,
+    color: "Subtle",
   },
 }
diff --git a/packages/design-system/lib/components/TripAdvisorChip/index.tsx b/packages/design-system/lib/components/TripAdvisorChip/index.tsx
index 9fe32ff57..85c83ae10 100644
--- a/packages/design-system/lib/components/TripAdvisorChip/index.tsx
+++ b/packages/design-system/lib/components/TripAdvisorChip/index.tsx
@@ -1,60 +1,44 @@
 import { cva, type VariantProps } from "class-variance-authority"
 import TripadvisorIcon from "../Icons/Customised/Socials/Tripadvisor"
 import styles from "./tripAdvisorChip.module.css"
-import { Typography } from "../Typography"
+import { ChipStatic, withChipStatic } from "../ChipStatic"
 
 const container = cva(styles.container, {
   variants: {
-    size: {
-      default: null,
-      small: styles.containerSmall,
+    wrapper: {
+      x05: styles["padding-x05"],
+      x15: styles["padding-x15"],
+      x2: styles["padding-x2"],
     },
   },
   defaultVariants: {
-    size: "default",
+    wrapper: undefined,
   },
 })
 
-const chip = cva(styles.tripAdvisor, {
-  variants: {
-    size: {
-      default: null,
-      small: styles.tripAdvisorSmall,
-    },
-    color: {
-      default: null,
-      subtle: styles.tripAdvisorSubtle,
-    },
-  },
-  defaultVariants: {
-    size: "default",
-    color: "default",
-  },
-})
+const _chipVariant = cva("", withChipStatic({}))
 
-type TripAdvisorProps = {
+interface TripAdvisorProps
+  extends VariantProps<typeof container>, VariantProps<typeof _chipVariant> {
   rating: number
-  wrapper?: boolean
-} & VariantProps<typeof chip>
+}
 
 export function TripAdvisorChip({
   rating,
-  wrapper = true,
-  size,
-  color,
+  wrapper,
+  size = "sm",
+  color = "Subtle",
 }: TripAdvisorProps) {
   const content = (
-    <div className={chip({ size, color })}>
+    <ChipStatic size={size} color={color}>
       <TripadvisorIcon size={16} color="CurrentColor" />
-      <Typography variant="Tag/sm">
-        <p>{rating}</p>
-      </Typography>
-    </div>
+      {rating}
+    </ChipStatic>
   )
 
   return wrapper ? (
     // Wrapping the chip in a transparent container with some padding to increase the touch target
-    <div className={container({ size })}>{content}</div>
+    <div className={container({ wrapper })}>{content}</div>
   ) : (
     content
   )
diff --git a/packages/design-system/lib/components/TripAdvisorChip/tripAdvisorChip.module.css b/packages/design-system/lib/components/TripAdvisorChip/tripAdvisorChip.module.css
index 02c5cb3df..a692777f3 100644
--- a/packages/design-system/lib/components/TripAdvisorChip/tripAdvisorChip.module.css
+++ b/packages/design-system/lib/components/TripAdvisorChip/tripAdvisorChip.module.css
@@ -2,31 +2,16 @@
   position: absolute;
   left: 0;
   top: 0;
-  padding: var(--Space-x2);
 }
 
-.containerSmall {
-  position: absolute;
-  left: 0;
-  top: 0;
+.padding-x05 {
   padding: var(--Space-x05);
 }
 
-.tripAdvisor {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--Space-x05);
-  background-color: var(--Base-Surface-Primary-light-Normal);
-  color: var(--Text-Interactive-Default);
-  padding: var(--Space-x05) var(--Space-x1);
-  border-radius: var(--Corner-Radius-sm);
+.padding-x15 {
+  padding: var(--Space-x15);
 }
 
-.tripAdvisorSmall {
-  padding: 0 var(--Space-x05) 0 3px;
-  border-radius: 2px;
-}
-
-.tripAdvisorSubtle {
-  background-color: var(--Surface-Secondary-Subtle, #e3d9d1);
+.padding-x2 {
+  padding: var(--Space-x2);
 }