diff --git a/src/app/shared/host-window.service.ts b/src/app/shared/host-window.service.ts
index 6d13d921e0..1c71bf5075 100644
--- a/src/app/shared/host-window.service.ts
+++ b/src/app/shared/host-window.service.ts
@@ -10,13 +10,15 @@ import { AppState } from '../app.reducer';
 import { CSSVariableService } from './sass-helper/css-variable.service';
 
 export enum WidthCategory {
-  XS,
-  SM,
-  MD,
-  LG,
-  XL
+  XS = 0,
+  SM = 1,
+  MD = 2,
+  LG = 3,
+  XL = 4,
 }
 
+export const maxMobileWidth = WidthCategory.SM;
+
 const hostWindowStateSelector = (state: AppState) => state.hostWindow;
 const widthSelector = createSelector(hostWindowStateSelector, (hostWindow: HostWindowState) => hostWindow.width);
 
@@ -31,11 +33,11 @@ export class HostWindowService {
     /* See _exposed_variables.scss */
     variableService.getAllVariables()
       .subscribe((variables) => {
-      this.breakPoints.XL_MIN = parseInt(variables['--bs-xl-min'], 10);
-      this.breakPoints.LG_MIN = parseInt(variables['--bs-lg-min'], 10);
-      this.breakPoints.MD_MIN = parseInt(variables['--bs-md-min'], 10);
-      this.breakPoints.SM_MIN = parseInt(variables['--bs-sm-min'], 10);
-    });
+        this.breakPoints.XL_MIN = parseInt(variables['--bs-xl-min'], 10);
+        this.breakPoints.LG_MIN = parseInt(variables['--bs-lg-min'], 10);
+        this.breakPoints.MD_MIN = parseInt(variables['--bs-md-min'], 10);
+        this.breakPoints.SM_MIN = parseInt(variables['--bs-sm-min'], 10);
+      });
   }
 
   private getWidthObs(): Observable<number> {
@@ -99,6 +101,41 @@ export class HostWindowService {
     );
   }
 
+  is(exactWidthCat: WidthCategory): Observable<boolean> {
+    return this.widthCategory.pipe(
+      map((widthCat: WidthCategory) => widthCat === exactWidthCat),
+      distinctUntilChanged()
+    );
+  }
+
+  isIn(widthCatArray: [WidthCategory]): Observable<boolean> {
+    return this.widthCategory.pipe(
+      map((widthCat: WidthCategory) => widthCatArray.includes(widthCat)),
+      distinctUntilChanged()
+    );
+  }
+
+  isUpTo(maxWidthCat: WidthCategory): Observable<boolean> {
+    return this.widthCategory.pipe(
+      map((widthCat: WidthCategory) => widthCat <= maxWidthCat),
+      distinctUntilChanged()
+    );
+  }
+
+  isMobile(): Observable<boolean> {
+    return this.widthCategory.pipe(
+      map((widthCat: WidthCategory) => widthCat <= maxMobileWidth),
+      distinctUntilChanged()
+    );
+  }
+
+  isDesktop(): Observable<boolean> {
+    return this.widthCategory.pipe(
+      map((widthCat: WidthCategory) => widthCat > maxMobileWidth),
+      distinctUntilChanged()
+    );
+  }
+
   isXsOrSm(): Observable<boolean> {
     return observableCombineLatest(
       this.isXs(),
diff --git a/src/app/shared/testing/host-window-service.stub.ts b/src/app/shared/testing/host-window-service.stub.ts
index ecb8c26acb..b64d6fbffc 100644
--- a/src/app/shared/testing/host-window-service.stub.ts
+++ b/src/app/shared/testing/host-window-service.stub.ts
@@ -20,4 +20,8 @@ export class HostWindowServiceStub {
   isXsOrSm(): Observable<boolean> {
     return this.isXs();
   }
+
+  isMobile(): Observable<boolean> {
+    return this.isXs();
+  }
 }