diff --git a/apps/scandic-web/components/HotelReservation/SelectHotel/HotelFilter/FilterCheckbox/filterCheckbox.module.css b/apps/scandic-web/components/HotelReservation/SelectHotel/HotelFilter/FilterCheckbox/filterCheckbox.module.css
index 0105c4cfb..3d1fb7ec7 100644
--- a/apps/scandic-web/components/HotelReservation/SelectHotel/HotelFilter/FilterCheckbox/filterCheckbox.module.css
+++ b/apps/scandic-web/components/HotelReservation/SelectHotel/HotelFilter/FilterCheckbox/filterCheckbox.module.css
@@ -2,13 +2,18 @@
   display: flex;
   flex-direction: column;
   color: var(--text-color);
+  cursor: pointer;
 }
 
 .container[data-selected] .checkbox {
-  border: none;
+  border: var(--UI-Input-Controls-Fill-Selected);
   background: var(--UI-Input-Controls-Fill-Selected);
 }
 
+.container:focus-within .checkbox {
+  outline: 2px solid var(--UI-Input-Controls-Fill-Selected);
+}
+
 .checkboxContainer {
   display: flex;
   align-items: center;
diff --git a/apps/scandic-web/components/HotelReservation/SelectHotel/HotelFilter/FilterCheckbox/index.tsx b/apps/scandic-web/components/HotelReservation/SelectHotel/HotelFilter/FilterCheckbox/index.tsx
index e46f69c5b..b8cfb0572 100644
--- a/apps/scandic-web/components/HotelReservation/SelectHotel/HotelFilter/FilterCheckbox/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectHotel/HotelFilter/FilterCheckbox/index.tsx
@@ -3,6 +3,7 @@
 import { Checkbox as AriaCheckbox } from "react-aria-components"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import styles from "./filterCheckbox.module.css"
 
@@ -28,7 +29,9 @@ export default function FilterCheckbox({
                 <MaterialIcon icon="check" color="Icon/Inverted" />
               )}
             </span>
-            {name}
+            <Typography variant="Body/Paragraph/mdRegular">
+              <span>{name}</span>
+            </Typography>
           </span>
         </>
       )}