diff --git a/components/HotelReservation/SelectRate/RoomFilter/index.tsx b/components/HotelReservation/SelectRate/RoomFilter/index.tsx
index eb7c442b3..92d2fde3d 100644
--- a/components/HotelReservation/SelectRate/RoomFilter/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomFilter/index.tsx
@@ -6,7 +6,7 @@ import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 import { z } from "zod"
 
-import { InfoCircleIcon } from "@/components/Icons"
+import { CheckIcon, InfoCircleIcon } from "@/components/Icons"
 import CheckboxChip from "@/components/TempDesignSystem/Form/FilterChip/Checkbox"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
@@ -114,7 +114,7 @@ export default function RoomFilter({
               />
             ))}
             <Tooltip text={tooltipText} position="bottom" arrow="right">
-              <InfoCircleIcon className={styles.infoIcon} />
+              <InfoCircleIcon color="uiTextPlaceholder" />
             </Tooltip>
           </div>
         </form>
diff --git a/components/HotelReservation/SelectRate/RoomFilter/roomFilter.module.css b/components/HotelReservation/SelectRate/RoomFilter/roomFilter.module.css
index 9cce04e43..4af90296c 100644
--- a/components/HotelReservation/SelectRate/RoomFilter/roomFilter.module.css
+++ b/components/HotelReservation/SelectRate/RoomFilter/roomFilter.module.css
@@ -12,11 +12,6 @@
   align-items: center;
 }
 
-.roomsFilter .infoIcon,
-.roomsFilter .infoIcon path {
-  stroke: var(--UI-Text-Medium-contrast);
-  fill: transparent;
-}
 .filterInfo {
   display: flex;
   flex-direction: row;
diff --git a/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/PriceList/priceList.module.css b/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/PriceList/priceList.module.css
index 4f3431525..b7767cb92 100644
--- a/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/PriceList/priceList.module.css
+++ b/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/PriceList/priceList.module.css
@@ -1,6 +1,11 @@
+.priceList {
+  margin: 0;
+}
+
 .priceRow {
   display: flex;
   justify-content: space-between;
+  align-items: flex-end;
   padding: var(--Spacing-x-quarter) 0;
 }
 
diff --git a/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/flexibilityOption.module.css b/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/flexibilityOption.module.css
index 6d7bc5daf..852f5260d 100644
--- a/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/flexibilityOption.module.css
+++ b/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/flexibilityOption.module.css
@@ -3,6 +3,7 @@
   border-radius: var(--Corner-radius-Large);
   padding: var(--Spacing-x-one-and-half) var(--Spacing-x2);
   background-color: var(--Base-Surface-Secondary-light-Normal);
+  border: 1px solid var(--Base-Surface-Secondary-light-Normal);
   position: relative;
   display: flex;
   flex-direction: column;
@@ -22,6 +23,13 @@
   background-color: var(--Base-Surface-Primary-light-Hover-alt);
 }
 .checkIcon {
+  width: 24px;
+  height: 24px;
+  border-radius: 100px;
+  background-color: var(--UI-Input-Controls-Fill-Selected);
+  border: 2px solid var(--Base-Border-Inverted);
+  justify-content: center;
+  align-items: center;
   display: none;
 }
 input[type="radio"]:checked + .card {
@@ -29,7 +37,7 @@ input[type="radio"]:checked + .card {
   background-color: var(--Base-Surface-Primary-light-Hover-alt);
 }
 input[type="radio"]:checked + .card .checkIcon {
-  display: block;
+  display: flex;
   position: absolute;
   top: -10px;
   right: -10px;
@@ -40,12 +48,6 @@ input[type="radio"]:checked + .card .checkIcon {
   gap: var(--Spacing-x-half);
 }
 
-.header .infoIcon,
-.header .infoIcon path {
-  stroke: var(--UI-Text-Medium-contrast);
-  fill: transparent;
-}
-
 .button {
   background: none;
   border: none;
@@ -53,7 +55,7 @@ input[type="radio"]:checked + .card .checkIcon {
   grid-area: chevron;
   height: 100%;
   justify-self: flex-end;
-  padding: 0;
+  padding: 1px 0 0 0;
 }
 
 .popover {
diff --git a/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx b/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx
index f1781d978..afbfb632b 100644
--- a/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx
@@ -1,8 +1,8 @@
 "use client"
-import { useState } from "react"
+import { useRef, useState } from "react"
 import { Button, DialogTrigger } from "react-aria-components"
 
-import { CheckCircleIcon, InfoCircleIcon } from "@/components/Icons"
+import { CheckIcon, InfoCircleIcon } from "@/components/Icons"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 
 import PricePopover from "./Popover"
@@ -25,6 +25,7 @@ export default function FlexibilityOption({
 }: FlexibilityOptionProps) {
   const [rootDiv, setRootDiv] = useState<Element | undefined>(undefined)
   const [isPopoverOpen, setIsPopoverOpen] = useState(false)
+  let triggerRef = useRef<HTMLButtonElement>(null)
 
   function setRef(node: Element | null) {
     if (node) {
@@ -36,7 +37,7 @@ export default function FlexibilityOption({
     return (
       <div className={styles.disabledCard}>
         <div className={styles.header}>
-          <InfoCircleIcon className={styles.infoIcon} />
+          <InfoCircleIcon width={16} height={16} color="uiTextMediumContrast" />
           <Caption color="disabled">{name}</Caption>
           <Caption color="disabled">({paymentTerm})</Caption>
         </div>
@@ -59,6 +60,13 @@ export default function FlexibilityOption({
     handleSelectRate(rate)
   }
 
+  function togglePopover() {
+    console.log("Toggle Popover called")
+    setIsPopoverOpen((prevState) => !prevState)
+  }
+
+  console.log(isPopoverOpen)
+
   return (
     <label>
       <input
@@ -69,48 +77,52 @@ export default function FlexibilityOption({
       />
       <div className={styles.card}>
         <div className={styles.header} ref={setRef}>
-          <DialogTrigger>
-            <Button
-              aria-label="Help"
-              className={styles.button}
-              onPress={() => setIsPopoverOpen(true)}
-            >
-              <InfoCircleIcon className={styles.infoIcon} />
-            </Button>
-            <PricePopover
-              placement="bottom"
-              className={styles.popover}
-              isNonModal
-              shouldFlip={false}
-              shouldUpdatePosition={false}
-              /**
-               * react-aria uses portals to render Popover in body
-               * unless otherwise specified. We need it to be contained
-               * by this component to both access css variables assigned
-               * on the container as well as to not overflow it at any time.
-               */
-              UNSTABLE_portalContainer={rootDiv}
-              isOpen={isPopoverOpen}
-              onOpenChange={setIsPopoverOpen}
+          <Button
+            aria-label="Help"
+            className={styles.button}
+            onPress={togglePopover}
+            ref={triggerRef}
+          >
+            <InfoCircleIcon
+              width={16}
+              height={16}
+              color="uiTextMediumContrast"
+            />
+          </Button>
+          <PricePopover
+            placement="bottom"
+            className={styles.popover}
+            isNonModal
+            shouldFlip={false}
+            shouldUpdatePosition={false}
+            /**
+             * react-aria uses portals to render Popover in body
+             * unless otherwise specified. We need it to be contained
+             * by this component to both access css variables assigned
+             * on the container as well as to not overflow it at any time.
+             */
+            UNSTABLE_portalContainer={rootDiv}
+            triggerRef={triggerRef}
+            isOpen={isPopoverOpen}
+            onOpenChange={setIsPopoverOpen}
+          >
+            <Caption
+              color="uiTextHighContrast"
+              type="bold"
+              className={styles.popoverHeading}
             >
+              {name}
+            </Caption>
+            {priceInformation?.map((info) => (
               <Caption
+                key={info}
                 color="uiTextHighContrast"
-                type="bold"
-                className={styles.popoverHeading}
+                className={styles.popoverText}
               >
-                {name}
+                {info}
               </Caption>
-              {priceInformation?.map((info) => (
-                <Caption
-                  key={info}
-                  color="uiTextHighContrast"
-                  className={styles.popoverText}
-                >
-                  {info}
-                </Caption>
-              ))}
-            </PricePopover>
-          </DialogTrigger>
+            ))}
+          </PricePopover>
           <Caption color="uiTextHighContrast">{name}</Caption>
           <Caption color="uiTextPlaceholder">({paymentTerm})</Caption>
         </div>
@@ -119,13 +131,10 @@ export default function FlexibilityOption({
           memberPrice={memberPrice}
           petRoomPackage={petRoomPackage}
         />
-        <CheckCircleIcon
-          color="blue"
-          className={styles.checkIcon}
-          width={24}
-          height={24}
-          stroke="white"
-        />
+
+        <div className={styles.checkIcon}>
+          <CheckIcon color="white" height="16" width="16" />
+        </div>
       </div>
     </label>
   )
diff --git a/components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx b/components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx
index 5b0c65489..93dc20ab4 100644
--- a/components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx
@@ -88,25 +88,30 @@ export default function RoomCard({
               : `${roomSize?.min}-${roomSize?.max}`}
             m²
           </Caption>
-          {roomConfiguration.roomTypeCode && (
-            <ToggleSidePeek
-              hotelId={hotelId}
-              roomTypeCode={roomConfiguration.roomTypeCode}
-            />
-          )}
+          <div className={styles.toggleSidePeek}>
+            {roomConfiguration.roomTypeCode && (
+              <ToggleSidePeek
+                hotelId={hotelId}
+                roomTypeCode={roomConfiguration.roomTypeCode}
+              />
+            )}
+          </div>
         </div>
         <div className={styles.container}>
           <div className={styles.roomDetails}>
             <Subtitle className={styles.name} type="two">
               {roomConfiguration.roomType}
             </Subtitle>
+            {/* Out of scope for now        
             <Body>{descriptions?.short}</Body>
+            */}
+            <Caption color="uiTextHighContrast" type="bold">
+              {intl.formatMessage({
+                id: "Breakfast selection in next step.",
+              })}
+            </Caption>
           </div>
-          <Caption color="uiTextHighContrast">
-            {intl.formatMessage({
-              id: "Breakfast selection in next step.",
-            })}
-          </Caption>
+
           <div className={styles.flexibilityOptions}>
             {Object.entries(rates).map(([key, rate]) => (
               <FlexibilityOption
diff --git a/components/HotelReservation/SelectRate/RoomSelection/RoomCard/roomCard.module.css b/components/HotelReservation/SelectRate/RoomSelection/RoomCard/roomCard.module.css
index 537c1b30a..a2c5724cd 100644
--- a/components/HotelReservation/SelectRate/RoomSelection/RoomCard/roomCard.module.css
+++ b/components/HotelReservation/SelectRate/RoomSelection/RoomCard/roomCard.module.css
@@ -27,24 +27,21 @@
   padding-right: var(--Spacing-x1);
 }
 
-.specification .button {
+.toggleSidePeek {
   margin-left: auto;
-  padding: 0 0 0 var(--Spacing-x-half);
-  text-decoration: none;
 }
 
 .container {
   padding: var(--Spacing-x1) var(--Spacing-x2) var(--Spacing-x2);
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x2);
+  gap: var(--Spacing-x-one-and-half);
 }
 
 .roomDetails {
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x1);
-  margin-bottom: var(--Spacing-x2);
+  gap: var(--Spacing-x2);
 }
 
 .name {
diff --git a/components/Icons/InfoCircle.tsx b/components/Icons/InfoCircle.tsx
index 3d9bc82c1..ac7f81349 100644
--- a/components/Icons/InfoCircle.tsx
+++ b/components/Icons/InfoCircle.tsx
@@ -12,14 +12,14 @@ export default function InfoCircleIcon({
     <svg
       className={classNames}
       fill="none"
-      height="17"
-      viewBox="0 0 16 17"
-      width="16"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
       <path
-        d="M8.00833 11.75C8.18056 11.75 8.32778 11.6889 8.45 11.5667C8.57222 11.4444 8.63333 11.2972 8.63333 11.125V8.475C8.63333 8.30278 8.57222 8.15556 8.45 8.03333C8.32778 7.91111 8.18056 7.85 8.00833 7.85C7.83611 7.85 7.68889 7.91111 7.56667 8.03333C7.44444 8.15556 7.38333 8.30278 7.38333 8.475V11.125C7.38333 11.2972 7.44444 11.4444 7.56667 11.5667C7.68889 11.6889 7.83611 11.75 8.00833 11.75ZM7.99825 6.56667C8.17719 6.56667 8.32778 6.50614 8.45 6.38508C8.57222 6.26404 8.63333 6.11404 8.63333 5.93508C8.63333 5.75614 8.57281 5.60556 8.45175 5.48333C8.33071 5.36111 8.18071 5.3 8.00175 5.3C7.82281 5.3 7.67222 5.36053 7.55 5.48158C7.42778 5.60263 7.36667 5.75263 7.36667 5.93158C7.36667 6.11053 7.42719 6.26111 7.54825 6.38333C7.66929 6.50556 7.81929 6.56667 7.99825 6.56667ZM8 15C7.10103 15 6.25623 14.8291 5.46558 14.4873C4.67493 14.1455 3.98717 13.6816 3.4023 13.0956C2.81743 12.5097 2.35417 11.8217 2.0125 11.0319C1.67083 10.242 1.5 9.39806 1.5 8.5C1.5 7.60103 1.67091 6.75623 2.01272 5.96558C2.35453 5.17493 2.81842 4.48717 3.40438 3.9023C3.99035 3.31743 4.67826 2.85417 5.46812 2.5125C6.25798 2.17083 7.10194 2 8 2C8.89897 2 9.74377 2.17091 10.5344 2.51272C11.3251 2.85453 12.0128 3.31842 12.5977 3.90438C13.1826 4.49035 13.6458 5.17826 13.9875 5.96812C14.3292 6.75798 14.5 7.60194 14.5 8.5C14.5 9.39897 14.3291 10.2438 13.9873 11.0344C13.6455 11.8251 13.1816 12.5128 12.5956 13.0977C12.0097 13.6826 11.3217 14.1458 10.5319 14.4875C9.74202 14.8292 8.89806 15 8 15Z"
+        d="M10.0061 13.8958C10.1965 13.8958 10.3612 13.8274 10.5 13.6906C10.6389 13.5538 10.7084 13.3896 10.7084 13.1979V9.71873C10.7084 9.52706 10.6404 9.36283 10.5044 9.22602C10.3685 9.08922 10.2053 9.02081 10.0149 9.02081C9.82442 9.02081 9.65976 9.08922 9.52087 9.22602C9.38199 9.36283 9.31254 9.52706 9.31254 9.71873V13.1979C9.31254 13.3896 9.38052 13.5538 9.51648 13.6906C9.65245 13.8274 9.81564 13.8958 10.0061 13.8958ZM9.99346 7.58331C10.1923 7.58331 10.3612 7.51606 10.5 7.38156C10.6389 7.24706 10.7084 7.0804 10.7084 6.88156C10.7084 6.68273 10.6411 6.51387 10.5066 6.37498C10.3721 6.23609 10.2055 6.16665 10.0066 6.16665C9.80779 6.16665 9.63893 6.2339 9.50004 6.3684C9.36115 6.5029 9.29171 6.66956 9.29171 6.8684C9.29171 7.06723 9.35896 7.23609 9.49346 7.37498C9.62796 7.51387 9.79462 7.58331 9.99346 7.58331ZM10.0058 17.7916C8.9338 17.7916 7.92449 17.5884 6.97785 17.182C6.0312 16.7756 5.20275 16.2165 4.4925 15.5049C3.78225 14.7933 3.224 13.9649 2.81775 13.0199C2.4115 12.0748 2.20837 11.065 2.20837 9.99044C2.20837 8.91476 2.41159 7.90707 2.81802 6.96738C3.22445 6.02767 3.78348 5.20269 4.4951 4.49244C5.20673 3.78219 6.03508 3.22394 6.98017 2.81769C7.92523 2.41144 8.93504 2.20831 10.0096 2.20831C11.0853 2.20831 12.093 2.41153 13.0326 2.81796C13.9724 3.22439 14.7973 3.78342 15.5076 4.49504C16.2178 5.20667 16.7761 6.0334 17.1823 6.97523C17.5886 7.91705 17.7917 8.92338 17.7917 9.99423C17.7917 11.0662 17.5885 12.0755 17.1821 13.0222C16.7756 13.9688 16.2166 14.7973 15.505 15.5075C14.7934 16.2178 13.9666 16.776 13.0248 17.1823C12.083 17.5885 11.0766 17.7916 10.0058 17.7916ZM10 16.3958C11.7709 16.3958 13.2796 15.7725 14.5261 14.526C15.7726 13.2795 16.3959 11.7708 16.3959 9.99998C16.3959 8.22915 15.7726 6.72047 14.5261 5.47394C13.2796 4.22741 11.7709 3.60415 10 3.60415C8.22921 3.60415 6.72053 4.22741 5.474 5.47394C4.22747 6.72047 3.60421 8.22915 3.60421 9.99998C3.60421 11.7708 4.22747 13.2795 5.474 14.526C6.72053 15.7725 8.22921 16.3958 10 16.3958Z"
         fill="#CD0921"
       />
     </svg>
diff --git a/components/Icons/icon.module.css b/components/Icons/icon.module.css
index 68ace50b3..1782e9b77 100644
--- a/components/Icons/icon.module.css
+++ b/components/Icons/icon.module.css
@@ -62,6 +62,11 @@
   fill: var(--UI-Text-Medium-contrast);
 }
 
+.uiTextPlaceholder,
+.uiTextPlaceholder * {
+  fill: var(--UI-Text-Placeholder);
+}
+
 .blue,
 .blue * {
   fill: var(--UI-Input-Controls-Fill-Selected);
diff --git a/components/Icons/variants.ts b/components/Icons/variants.ts
index 09d69364f..24c3531c3 100644
--- a/components/Icons/variants.ts
+++ b/components/Icons/variants.ts
@@ -20,6 +20,7 @@ const config = {
       white: styles.white,
       uiTextHighContrast: styles.uiTextHighContrast,
       uiTextMediumContrast: styles.uiTextMediumContrast,
+      uiTextPlaceholder: styles.uiTextPlaceholder,
       disabled: styles.disabled,
     },
   },