diff --git a/src/components/Alert/Alert.tsx b/src/components/Alert/Alert.tsx
index 3a3b6deb..bb6a0fb1 100644
--- a/src/components/Alert/Alert.tsx
+++ b/src/components/Alert/Alert.tsx
@@ -71,6 +71,7 @@ const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
       <div
         ref={ref}
         role="alert"
+        data-slot="alert"
         className={cn(
           alertVariants({ variant }),
           React.isValidElement(icon) && 'pl-11',
@@ -84,6 +85,7 @@ const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
         {dismissible && (
           <button
             type="button"
+            data-slot="alert-dismiss"
             onClick={onDismiss}
             className={cn(
               'absolute top-2 right-2 rounded-md p-1',
@@ -112,6 +114,7 @@ const AlertTitle = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
   <h5
     ref={ref}
+    data-slot="alert-title"
     className={cn('mb-1 leading-none font-semibold tracking-tight', className)}
     {...props}
   >
@@ -130,6 +133,7 @@ const AlertDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <p
     ref={ref}
+    data-slot="alert-description"
     className={cn('text-sm [&_p]:leading-relaxed', className)}
     {...props}
   />
diff --git a/src/components/ConnectionStatus/ConnectionStatus.tsx b/src/components/ConnectionStatus/ConnectionStatus.tsx
index 6ba52cd5..1061a5fc 100644
--- a/src/components/ConnectionStatus/ConnectionStatus.tsx
+++ b/src/components/ConnectionStatus/ConnectionStatus.tsx
@@ -123,9 +123,13 @@ export function ConnectionStatusOverlay({
       role="alertdialog"
       aria-label="Connection status"
       aria-live="assertive"
+      data-slot="connection-overlay"
       className={cn(overlayVariants({ animate }), className)}
     >
-      <div className={cn(cardVariants({ animate }))}>
+      <div
+        data-slot="connection-overlay-card"
+        className={cn(cardVariants({ animate }))}
+      >
         <div className="flex flex-col items-center gap-4 text-center md:flex-row md:text-left">
           {/* Icon */}
           <div className="shrink-0">
@@ -133,7 +137,7 @@ export function ConnectionStatusOverlay({
           </div>
 
           {/* Content */}
-          <div className="flex-1">
+          <div data-slot="connection-overlay-content" className="flex-1">
             <p className="text-gray-700 dark:text-gray-300">{displayMessage}</p>
             <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
               Please check your internet connection.
@@ -151,6 +155,7 @@ export function ConnectionStatusOverlay({
           <div className="shrink-0">
             <button
               type="button"
+              data-slot="connection-overlay-action"
               onClick={onReload || (() => window.location.reload())}
               className="bg-primary-700 hover:bg-primary-800 inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium text-white transition-colors"
             >
@@ -203,8 +208,8 @@ export function UpdateAvailableOverlay({
   isVisible = true,
   onUpdateNow,
   onLater,
-  logoUrl = '/images/logos/bluehive-icon-blue.svg',
-  appName = 'BlueHive',
+  logoUrl,
+  appName = 'App',
   className,
 }: UpdateAvailableOverlayProps) {
   if (!isVisible || !update.available) return null;
@@ -214,9 +219,13 @@ export function UpdateAvailableOverlay({
       role="alertdialog"
       aria-label="Update available"
       aria-live="polite"
+      data-slot="update-overlay"
       className={cn(overlayVariants({ animate: true }), className)}
     >
-      <div className={cn(cardVariants({ animate: true }))}>
+      <div
+        data-slot="update-overlay-card"
+        className={cn(cardVariants({ animate: true }))}
+      >
         <div className="flex flex-col items-center gap-4 text-center md:flex-row md:text-left">
           {/* Logo */}
           <div className="shrink-0">
@@ -232,7 +241,7 @@ export function UpdateAvailableOverlay({
           </div>
 
           {/* Content */}
-          <div className="flex-1">
+          <div data-slot="update-overlay-content" className="flex-1">
             <p className="font-semibold text-gray-900 dark:text-white">
               Update Available
             </p>
@@ -326,7 +335,10 @@ export function ConnectionStatusBadge({
   };
 
   return (
-    <span className={cn(badgeVariants({ status }), className)}>
+    <span
+      data-slot="connection-badge"
+      className={cn(badgeVariants({ status }), className)}
+    >
       <ConnectionDot status={status} />
       {showLabel && labels[status]}
     </span>
@@ -374,6 +386,7 @@ export function ConnectionStatusBar({
     <div
       role="status"
       aria-live="polite"
+      data-slot="connection-bar"
       className={cn(
         'fixed right-0 left-0 z-40 px-4 py-2',
         position === 'top' ? 'top-0' : 'bottom-0',
@@ -383,7 +396,10 @@ export function ConnectionStatusBar({
         className
       )}
     >
-      <div className="container mx-auto flex items-center justify-center gap-2 text-sm">
+      <div
+        data-slot="connection-bar-content"
+        className="container mx-auto flex items-center justify-center gap-2 text-sm"
+      >
         <ConnectionDot status={connection.status} />
         <span>
           {connection.status === 'disconnected' && 'You are offline'}
diff --git a/src/components/ServiceBadge/ServiceBadge.tsx b/src/components/ServiceBadge/ServiceBadge.tsx
index f1e24a25..9d084efd 100644
--- a/src/components/ServiceBadge/ServiceBadge.tsx
+++ b/src/components/ServiceBadge/ServiceBadge.tsx
@@ -125,6 +125,7 @@ export function ServiceBadge({
       {removable && onRemove && (
         <button
           type="button"
+          data-slot="service-badge-remove"
           onClick={(e) => {
             e.preventDefault();
             e.stopPropagation();
@@ -152,6 +153,7 @@ export function ServiceBadge({
     return (
       <a
         href={href}
+        data-slot="service-badge"
         className={classes}
         {...(props as React.AnchorHTMLAttributes<HTMLAnchorElement>)}
       >
@@ -164,6 +166,7 @@ export function ServiceBadge({
     return (
       <button
         type="button"
+        data-slot="service-badge"
         onClick={onClick}
         className={classes}
         {...(props as React.ButtonHTMLAttributes<HTMLButtonElement>)}
@@ -174,7 +177,7 @@ export function ServiceBadge({
   }
 
   return (
-    <span className={classes} {...props}>
+    <span data-slot="service-badge" className={classes} {...props}>
       {content}
     </span>
   );
@@ -204,7 +207,10 @@ export function ServiceBadgeGroup({
   const hiddenCount = maxVisible ? badges.length - maxVisible : 0;
 
   return (
-    <div className={cn('flex flex-wrap gap-2', className)}>
+    <div
+      data-slot="service-badge-group"
+      className={cn('flex flex-wrap gap-2', className)}
+    >
       {visibleBadges}
       {hiddenCount > 0 && (
         <ServiceBadge
@@ -290,7 +296,10 @@ export function ServiceTagCloudBadges({
   const hiddenCount = maxVisible ? services.length - maxVisible : 0;
 
   return (
-    <div className={cn('flex flex-wrap gap-2', className)}>
+    <div
+      data-slot="service-tag-cloud"
+      className={cn('flex flex-wrap gap-2', className)}
+    >
       {visibleServices.map((service) => (
         <ServiceBadge
           key={service.id}
@@ -346,7 +355,10 @@ export function SelectedServicesBadges({
   }
 
   return (
-    <div className={cn('flex flex-wrap items-center gap-2', className)}>
+    <div
+      data-slot="selected-services"
+      className={cn('flex flex-wrap items-center gap-2', className)}
+    >
       {services.map((service) => (
         <ServiceBadge
           key={service.id}
@@ -436,6 +448,7 @@ export function DOTBadge({
 
   return (
     <span
+      data-slot="dot-badge"
       className={cn(
         'inline-flex items-center rounded-md font-medium',
         config.className,
diff --git a/src/styles/condensed-view.css b/src/styles/condensed-view.css
index 1e477941..3e5877c1 100644
--- a/src/styles/condensed-view.css
+++ b/src/styles/condensed-view.css
@@ -50,6 +50,181 @@ body.condensed
   max-height: 200px;
 }
 
+/* Alert — tighter padding, smaller text */
+body.condensed [data-slot='alert'] {
+  padding: 0.375rem 0.5rem !important;
+  border-radius: 4px !important;
+  font-size: 0.75rem !important;
+  line-height: 1.125rem !important;
+}
+
+body.condensed [data-slot='alert'] > svg {
+  left: 0.5rem !important;
+  top: 0.375rem !important;
+  width: 0.875rem !important;
+  height: 0.875rem !important;
+}
+
+body.condensed [data-slot='alert'].pl-11 {
+  padding-left: 1.75rem !important;
+}
+
+body.condensed [data-slot='alert'].pr-10 {
+  padding-right: 1.75rem !important;
+}
+
+body.condensed [data-slot='alert-title'] {
+  margin-bottom: 0.125rem !important;
+  font-size: 0.75rem !important;
+  line-height: 1rem !important;
+}
+
+body.condensed [data-slot='alert-description'] {
+  font-size: 0.6875rem !important;
+  line-height: 1rem !important;
+}
+
+body.condensed [data-slot='alert-dismiss'] {
+  top: 0.25rem !important;
+  right: 0.25rem !important;
+  padding: 0.125rem !important;
+}
+
+body.condensed [data-slot='alert-dismiss'] svg {
+  width: 0.75rem !important;
+  height: 0.75rem !important;
+}
+
+/* ConnectionStatusOverlay — compact card */
+body.condensed [data-slot='connection-overlay-card'] {
+  padding: 1rem !important;
+  border-radius: 0.5rem !important;
+  max-width: 28rem !important;
+}
+
+body.condensed [data-slot='connection-overlay-card'] svg.h-12 {
+  height: 2rem !important;
+  width: 2rem !important;
+}
+
+body.condensed [data-slot='connection-overlay-content'] p {
+  font-size: 0.75rem !important;
+  line-height: 1.125rem !important;
+}
+
+body.condensed [data-slot='connection-overlay-content'] p + p {
+  margin-top: 0.25rem !important;
+}
+
+body.condensed [data-slot='connection-overlay-action'] {
+  padding: 0.25rem 0.75rem !important;
+  font-size: 0.75rem !important;
+  border-radius: 0.375rem !important;
+  gap: 0.25rem !important;
+}
+
+body.condensed [data-slot='connection-overlay-action'] svg {
+  height: 0.75rem !important;
+  width: 0.75rem !important;
+}
+
+/* UpdateAvailableOverlay — compact card */
+body.condensed [data-slot='update-overlay-card'] {
+  padding: 1rem !important;
+  border-radius: 0.5rem !important;
+  max-width: 28rem !important;
+}
+
+body.condensed [data-slot='update-overlay-card'] img,
+body.condensed [data-slot='update-overlay-card'] svg.h-12 {
+  height: 2rem !important;
+  width: 2rem !important;
+}
+
+body.condensed [data-slot='update-overlay-content'] p {
+  font-size: 0.75rem !important;
+  line-height: 1.125rem !important;
+}
+
+body.condensed [data-slot='update-overlay-content'] p + p {
+  margin-top: 0.25rem !important;
+}
+
+body.condensed [data-slot='update-overlay-card'] button {
+  padding: 0.25rem 0.75rem !important;
+  font-size: 0.75rem !important;
+  border-radius: 0.375rem !important;
+}
+
+/* ConnectionStatusBadge — tighter pill */
+body.condensed [data-slot='connection-badge'] {
+  padding: 0.125rem 0.375rem !important;
+  font-size: 0.625rem !important;
+  line-height: 1rem !important;
+  gap: 0.25rem !important;
+  border-radius: 2px !important;
+}
+
+body.condensed [data-slot='connection-badge'] span {
+  height: 0.375rem !important;
+  width: 0.375rem !important;
+}
+
+/* ConnectionStatusBar — thinner bar */
+body.condensed [data-slot='connection-bar'] {
+  padding: 0.25rem 0.5rem !important;
+}
+
+body.condensed [data-slot='connection-bar-content'] {
+  font-size: 0.6875rem !important;
+  gap: 0.25rem !important;
+}
+
+/* ServiceBadge — tighter padding, smaller text, square corners */
+body.condensed [data-slot='service-badge'] {
+  padding: 0.125rem 0.375rem !important;
+  font-size: 0.625rem !important;
+  line-height: 1rem !important;
+  border-radius: 2px !important;
+  gap: 0.125rem !important;
+}
+
+body.condensed [data-slot='service-badge'] svg {
+  width: 0.625rem !important;
+  height: 0.625rem !important;
+}
+
+body.condensed [data-slot='service-badge-remove'] {
+  padding: 0.0625rem !important;
+  margin-left: 0.125rem !important;
+}
+
+body.condensed [data-slot='service-badge-remove'] svg {
+  width: 0.5rem !important;
+  height: 0.5rem !important;
+}
+
+/* ServiceBadgeGroup / ServiceTagCloud / SelectedServices — tighter gap */
+body.condensed [data-slot='service-badge-group'],
+body.condensed [data-slot='service-tag-cloud'],
+body.condensed [data-slot='selected-services'] {
+  gap: 0.25rem !important;
+}
+
+/* DOTBadge — compact */
+body.condensed [data-slot='dot-badge'] {
+  padding: 0.125rem 0.375rem !important;
+  font-size: 0.625rem !important;
+  line-height: 1rem !important;
+  border-radius: 2px !important;
+}
+
+body.condensed [data-slot='dot-badge'] svg {
+  width: 0.625rem !important;
+  height: 0.625rem !important;
+  margin-right: 0.125rem !important;
+}
+
 /* Avatar — single condensed size, square corners */
 body.condensed [data-slot='avatar'] {
   font-size: 0.625rem;