diff --git a/apps/web/components/eventtype/EventAppsTab.tsx b/apps/web/components/eventtype/EventAppsTab.tsx
index 50dabb4abf..faa71884b3 100644
--- a/apps/web/components/eventtype/EventAppsTab.tsx
+++ b/apps/web/components/eventtype/EventAppsTab.tsx
@@ -106,7 +106,7 @@ export const EventAppsTab = ({ eventType }: { eventType: EventType }) => {
       {!shouldLockDisableProps("apps").disabled && (
         <div>
           {!isLoading && notInstalledApps?.length ? (
-            <h2 className="text-emphasis mt-0 mb-2 text-lg font-semibold">{t("available_apps")}</h2>
+            <h2 className="text-emphasis my-2 text-lg font-semibold">{t("available_apps")}</h2>
           ) : null}
           <div className="before:border-0">
             {notInstalledApps?.map((app) => (
diff --git a/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx b/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx
index d5fe0f0746..f6d39ba2d8 100644
--- a/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx
+++ b/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx
@@ -195,7 +195,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
         <span
           className={classNames(
             isInputUsernamePremium ? "border border-orange-400 " : "",
-            "border-default bg-muted text-subtle hidden h-9 items-center rounded-l-md border border-r-0 border-r-gray-300 px-3 text-sm md:inline-flex"
+            "border-default bg-muted text-subtle hidden h-9 items-center rounded-l-md border border-r-0 px-3 text-sm md:inline-flex"
           )}>
           {process.env.NEXT_PUBLIC_WEBSITE_URL.replace("https://", "").replace("http://", "")}/
         </span>
@@ -215,7 +215,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
                 : "border focus:border",
               markAsError
                 ? "focus:shadow-0 focus:ring-shadow-0 border-red-500  focus:border-red-500 focus:outline-none"
-                : "border-l-gray-300",
+                : "border-l-default",
               disabled ? "bg-subtle text-muted focus:border-0" : ""
             )}
             value={inputUsernameValue}
@@ -234,8 +234,8 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
                 isInputUsernamePremium ? "text-orange-400" : "",
                 usernameIsAvailable ? "" : ""
               )}>
-              {isInputUsernamePremium ? <StarIconSolid className="mt-[2px] w-6" /> : <></>}
-              {!isInputUsernamePremium && usernameIsAvailable ? <Check className="mt-2 w-6" /> : <></>}
+              {isInputUsernamePremium ? <StarIconSolid className="mt-[2px] h-4 w-4" /> : <></>}
+              {!isInputUsernamePremium && usernameIsAvailable ? <Check className="mt-2 h-4 w-4" /> : <></>}
             </span>
           </div>
         </div>
diff --git a/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx b/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx
index d21b394209..acd51c6759 100644
--- a/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx
+++ b/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx
@@ -136,8 +136,8 @@ const UsernameTextfield = (props: ICustomUsernameProps) => {
           />
           {currentUsername !== inputUsernameValue && (
             <div className="absolute right-[2px] top-6 flex flex-row">
-              <span className={classNames("mx-2 py-2")}>
-                {usernameIsAvailable ? <Check className="w-6" /> : <></>}
+              <span className={classNames("mx-2 py-2.5")}>
+                {usernameIsAvailable ? <Check className="h-4 w-4" /> : <></>}
               </span>
             </div>
           )}
diff --git a/apps/web/pages/[user].tsx b/apps/web/pages/[user].tsx
index 39e69cdd2d..bafaacc57c 100644
--- a/apps/web/pages/[user].tsx
+++ b/apps/web/pages/[user].tsx
@@ -59,7 +59,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
       {eventTypes.map((type, index) => (
         <li
           key={index}
-          className=" border-subtle bg-default hover:bg-muted group relative border-b first:rounded-t-md last:rounded-b-md last:border-b-0">
+          className=" border-subtle bg-default dark:bg-muted dark:hover:bg-emphasis hover:bg-muted group relative border-b first:rounded-t-md last:rounded-b-md last:border-b-0">
           <ArrowRight className="text-emphasis absolute right-3 top-3 h-4 w-4 opacity-0 transition-opacity group-hover:opacity-100" />
           <Link
             href={getUsernameSlugLink({ users: props.users, slug: type.slug })}
@@ -123,7 +123,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
         <main
           className={classNames(
             shouldAlignCentrally ? "mx-auto" : "",
-            isEmbed ? " border-booker border-booker-width  bg-default rounded-md border" : "",
+            isEmbed ? "border-booker border-booker-width  bg-default rounded-md border" : "",
             "max-w-3xl py-24 px-4"
           )}>
           {isSingleUser && ( // When we deal with a single user, not dynamic group
@@ -161,7 +161,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
                 <div
                   key={type.id}
                   style={{ display: "flex", ...eventTypeListItemEmbedStyles }}
-                  className=" border-subtle bg-default hover:bg-muted group relative border-b first:rounded-t-md last:rounded-b-md last:border-b-0">
+                  className="border-subtle dark:bg-muted dark:hover:bg-emphasis hover:bg-muted group relative border-b first:rounded-t-md last:rounded-b-md last:border-b-0">
                   <ArrowRight className="text-emphasis  absolute right-4 top-4 h-4 w-4 opacity-0 transition-opacity group-hover:opacity-100" />
                   {/* Don't prefetch till the time we drop the amount of javascript in [user][type] page which is impacting score for [user] page */}
                   <div className="block w-full p-5">
diff --git a/apps/web/public/static/locales/es/common.json b/apps/web/public/static/locales/es/common.json
index 501d7a08b0..e8cb5d0b14 100644
--- a/apps/web/public/static/locales/es/common.json
+++ b/apps/web/public/static/locales/es/common.json
@@ -799,7 +799,7 @@
   "trending_apps": "Aplicaciones populares",
   "most_popular": "Más popular",
   "explore_apps": "Aplicaciones {{category}}",
-  "installed_apps": "Aplicaciones instaladas",
+  "installed_apps": "Apps instaladas",
   "free_to_use_apps": "Gratis",
   "no_category_apps": "No hay aplicaciones de {{category}}",
   "no_category_apps_description_calendar": "Añade una aplicación de calendario para comprobar si hay conflictos y evitar reservas duplicadas",
diff --git a/apps/web/public/tips/insights-dark.jpg b/apps/web/public/tips/insights-dark.jpg
index 515a2093f3..d3d9cbf88c 100644
Binary files a/apps/web/public/tips/insights-dark.jpg and b/apps/web/public/tips/insights-dark.jpg differ
diff --git a/packages/app-store/zapier/pages/setup/index.tsx b/packages/app-store/zapier/pages/setup/index.tsx
index aac35987f5..5a6b455d56 100644
--- a/packages/app-store/zapier/pages/setup/index.tsx
+++ b/packages/app-store/zapier/pages/setup/index.tsx
@@ -57,7 +57,7 @@ export default function ZapierSetup(props: IZapierSetupProps) {
               {!newApiKey ? (
                 <>
                   <div className="mt-1 text-xl">{t("generate_api_key")}:</div>
-                  <Button onClick={() => createApiKey()} className="mt-4 mb-4">
+                  <Button color="primary" onClick={() => createApiKey()} className="mt-4 mb-4">
                     {t("generate_api_key")}
                   </Button>
                 </>
diff --git a/packages/features/ee/teams/components/AddNewTeamMembers.tsx b/packages/features/ee/teams/components/AddNewTeamMembers.tsx
index d55d9044cc..f83836c074 100644
--- a/packages/features/ee/teams/components/AddNewTeamMembers.tsx
+++ b/packages/features/ee/teams/components/AddNewTeamMembers.tsx
@@ -103,6 +103,7 @@ export const AddNewTeamMembersForm = ({
       <hr className="border-subtle my-6" />
       <Button
         EndIcon={ArrowRight}
+        color="primary"
         className="mt-6 w-full justify-center"
         disabled={publishTeamMutation.isLoading}
         onClick={() => {
@@ -118,7 +119,7 @@ export default AddNewTeamMembers;
 
 const AddNewTeamMemberSkeleton = () => {
   return (
-    <SkeletonContainer className="rounded-md border">
+    <SkeletonContainer className="border-subtle rounded-md border">
       <div className="flex w-full justify-between p-4">
         <div>
           <p className="text-emphasis text-sm font-medium">
diff --git a/packages/features/eventtypes/components/CheckedTeamSelect.tsx b/packages/features/eventtypes/components/CheckedTeamSelect.tsx
index affa5966ec..95061144cb 100644
--- a/packages/features/eventtypes/components/CheckedTeamSelect.tsx
+++ b/packages/features/eventtypes/components/CheckedTeamSelect.tsx
@@ -44,14 +44,16 @@ export const CheckedTeamSelect = ({
       />
       {/* This class name conditional looks a bit odd but it allows a seemless transition when using autoanimate
        - Slides down from the top instead of just teleporting in from nowhere*/}
-      <ul className={classNames("mt-3 rounded-md", value.length >= 1 && "border")} ref={animationRef}>
+      <ul
+        className={classNames("mt-3 rounded-md", value.length >= 1 && "border-subtle border")}
+        ref={animationRef}>
         {value.map((option, index) => (
           <li key={option.value} className={`flex py-2 px-3 ${index === value.length - 1 ? "" : "border-b"}`}>
             <Avatar size="sm" imageSrc={option.avatar} alt={option.label} />
-            <p className="text-emphasis my-auto ml-3 text-sm">{option.label}</p>
+            <p className="text-emphasis ms-3 my-auto text-sm">{option.label}</p>
             <X
               onClick={() => props.onChange(value.filter((item) => item.value !== option.value))}
-              className="my-auto ml-auto"
+              className="my-auto ml-auto h-4 w-4"
             />
           </li>
         ))}
diff --git a/packages/features/form-builder/Components.tsx b/packages/features/form-builder/Components.tsx
index 672021c628..1cd065bba8 100644
--- a/packages/features/form-builder/Components.tsx
+++ b/packages/features/form-builder/Components.tsx
@@ -255,7 +255,7 @@ export const Components: Record<BookingFieldType, Component> = {
                     }
                     setValue(newValue);
                   }}
-                  className="dark:bg-darkgray-300 border-subtle border-default text-emphasis h-4 w-4 rounded focus:ring-black ltr:mr-2 rtl:ml-2"
+                  className="dark:bg-darkgray-300 border-subtle text-emphasis h-4 w-4 rounded focus:ring-black ltr:mr-2 rtl:ml-2"
                   value={option.value}
                   checked={value.includes(option.value)}
                 />
@@ -314,7 +314,7 @@ export const Components: Record<BookingFieldType, Component> = {
                         type="radio"
                         disabled={readOnly}
                         name={name}
-                        className="dark:bg-darkgray-300 border-subtle border-default text-emphasis h-4 w-4 focus:ring-black ltr:mr-2 rtl:ml-2"
+                        className="dark:bg-darkgray-300 border-subtle text-emphasis h-4 w-4 focus:ring-black ltr:mr-2 rtl:ml-2"
                         value={option.value}
                         onChange={(e) => {
                           setValue({
diff --git a/packages/features/settings/layouts/SettingsLayout.tsx b/packages/features/settings/layouts/SettingsLayout.tsx
index f60bbb7436..c8c39c427d 100644
--- a/packages/features/settings/layouts/SettingsLayout.tsx
+++ b/packages/features/settings/layouts/SettingsLayout.tsx
@@ -255,8 +255,12 @@ const SettingsSidebarContainer = ({
                                   }),
                                 ])
                               }>
-                              <div className="ltr:mr-3 rtl:ml-3">
-                                {teamMenuState[index].teamMenuOpen ? <ChevronDown /> : <ChevronRight />}
+                              <div className="me-3">
+                                {teamMenuState[index].teamMenuOpen ? (
+                                  <ChevronDown className="h-4 w-4" />
+                                ) : (
+                                  <ChevronRight className="h-4 w-4" />
+                                )}
                               </div>
                               <img
                                 src={getPlaceholderAvatar(team.logo, team?.name as string)}
@@ -352,7 +356,7 @@ const MobileSettingsContainer = (props: { onSideContainerOpen?: () => void }) =>
           <button
             className="hover:bg-emphasis flex items-center space-x-2 rounded-md px-3 py-1 rtl:space-x-reverse"
             onClick={() => router.back()}>
-            <ArrowLeft className="text-default" />
+            <ArrowLeft className="text-default h-4 w-4" />
             <p className="text-emphasis font-semibold">{t("settings")}</p>
           </button>
         </div>
diff --git a/packages/features/tips/UpgradeTip.tsx b/packages/features/tips/UpgradeTip.tsx
index 1a03fb4729..66ca54a279 100644
--- a/packages/features/tips/UpgradeTip.tsx
+++ b/packages/features/tips/UpgradeTip.tsx
@@ -44,7 +44,7 @@ export function UpgradeTip({
             alt={title}
           />
         </picture>
-        <div className="relative mt-4 px-8 sm:px-14">
+        <div className="relative my-4 px-8 sm:px-14">
           <h1 className={classNames("font-cal text-3xl", dark && "text-inverted")}>{t(title)}</h1>
           <p className={classNames("mt-4 mb-8 max-w-sm", dark ? "text-inverted" : "text-default")}>
             {t(description)}
diff --git a/packages/ui/components/apps/AllApps.tsx b/packages/ui/components/apps/AllApps.tsx
index f030b17506..a1ecb8761a 100644
--- a/packages/ui/components/apps/AllApps.tsx
+++ b/packages/ui/components/apps/AllApps.tsx
@@ -94,7 +94,7 @@ function CategoryTab({ selectedCategory, categories, searchText }: CategoryTabPr
           }}
           className={classNames(
             selectedCategory === null ? "bg-emphasis text-default" : "bg-muted text-emphasis",
-            "hover:bg-emphasis rounded-md px-4 py-2.5 text-sm font-medium hover:cursor-pointer hover:text-gray-50"
+            "hover:bg-emphasis min-w-max rounded-md px-4 py-2.5 text-sm font-medium hover:cursor-pointer hover:text-gray-50"
           )}>
           {t("all_apps")}
         </li>
@@ -168,7 +168,7 @@ export function AllApps({ apps, searchText, categories }: AllAppsPropsType) {
       <CategoryTab selectedCategory={selectedCategory} searchText={searchText} categories={categories} />
       {filteredApps.length ? (
         <div
-          className="grid gap-3 lg:grid-cols-4 [@media(max-width:1270px)]:grid-cols-3 [@media(max-width:730px)]:grid-cols-2 [@media(max-width:500px)]:grid-cols-1"
+          className="grid gap-3 lg:grid-cols-4 [@media(max-width:1270px)]:grid-cols-3 [@media(max-width:730px)]:grid-cols-1 [@media(max-width:500px)]:grid-cols-1"
           ref={appsContainerRef}>
           {filteredApps.map((app) => (
             <AppCard key={app.name} app={app} searchText={searchText} credentials={app.credentials} />
diff --git a/packages/ui/components/apps/SkeletonLoader.tsx b/packages/ui/components/apps/SkeletonLoader.tsx
index b5b24af526..65e5184349 100644
--- a/packages/ui/components/apps/SkeletonLoader.tsx
+++ b/packages/ui/components/apps/SkeletonLoader.tsx
@@ -31,9 +31,13 @@ function SkeletonItem() {
       <div className="flex-grow truncate text-sm">
         <div className="flex justify-start space-x-2 rtl:space-x-reverse">
           <SkeletonText className="h-10 w-10" />
-          <div className="space-y-2">
-            <SkeletonText className="h-4 w-32" />
-            <SkeletonText className="h-4 w-16" />
+          <div className="space-y-1">
+            <div>
+              <SkeletonText className="h-4 w-16" />
+            </div>
+            <div>
+              <SkeletonText className="h-4 w-32" />
+            </div>
           </div>
         </div>
       </div>
diff --git a/packages/ui/components/avatar/AvatarGroup.tsx b/packages/ui/components/avatar/AvatarGroup.tsx
index 7ad45757b5..8f94a31f38 100644
--- a/packages/ui/components/avatar/AvatarGroup.tsx
+++ b/packages/ui/components/avatar/AvatarGroup.tsx
@@ -45,7 +45,7 @@ export const AvatarGroup = function AvatarGroup(props: AvatarGroupProps) {
       {numTruncatedAvatars > 0 && (
         <li
           className={classNames(
-            "bg-darkgray-300 relative -mr-[4px] mb-1 inline-flex justify-center overflow-hidden rounded-full",
+            "bg-inverted relative -mr-[4px] mb-1 inline-flex justify-center overflow-hidden rounded-full",
             props.size === "sm" ? "min-w-6 h-6" : "min-w-16 h-16"
           )}>
           <span
diff --git a/packages/ui/components/dialog/Dialog.tsx b/packages/ui/components/dialog/Dialog.tsx
index d1bfefa8a2..23d8b08156 100644
--- a/packages/ui/components/dialog/Dialog.tsx
+++ b/packages/ui/components/dialog/Dialog.tsx
@@ -99,7 +99,7 @@ export const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps
           {type === "confirmation" && (
             <div className="flex">
               {Icon && (
-                <div className="mr-4 inline-flex h-10 w-10 items-center justify-center rounded-full bg-gray-300">
+                <div className="bg-emphasis mr-4 inline-flex h-10 w-10 items-center justify-center rounded-full">
                   <Icon className="text-emphasis h-4 w-4" />
                 </div>
               )}
diff --git a/packages/ui/components/editor/stylesEditor.css b/packages/ui/components/editor/stylesEditor.css
index 2db91898fd..e9ffd3616d 100644
--- a/packages/ui/components/editor/stylesEditor.css
+++ b/packages/ui/components/editor/stylesEditor.css
@@ -1,6 +1,5 @@
 
 .editor a {
-  color: #0000FF;
   text-decoration: underline;
   font-size: 14px;
 }