diff --git a/STYLEGUIDE.md b/STYLEGUIDE.md
index c3e22cf47..8a22821ed 100644
--- a/STYLEGUIDE.md
+++ b/STYLEGUIDE.md
@@ -69,6 +69,30 @@ const emit = defineEmits(["routeToName"]);
 useRouteToName(emit);
 ```
 
+### Breakpoints
+
+activist uses Tailwind for CSS, and some parts of components will be conditionally rendered based on Tailwind breakpoints, but we want to avoid using it to show and hide whole components. The reason for this is that using CSS in this way means that unneeded TypeScript for the hidden components will still run on page load. Please use `useBreakpoint` for all conditional rendering of full components.
+
+- ✅ No TS ran:
+
+   ```vue
+    <template>
+      <MyComponent v-if="aboveMediumBP" />
+    </template>
+
+   <script setup lang="ts">
+   import useBreakpoint from "~/composables/useBreakpoint";
+   const aboveMediumBP = useBreakpoint("md");
+   </script>
+   ```
+- ❌ TS still ran:
+
+    ```vue
+    <template>
+      <MyComponent class="hidden md:block" />
+    </template>
+    ```
+
 <a id="typescript"></a>
 
 ## TypeScript [`⇧`](#contents)
diff --git a/frontend/components/card/CardTextArea.vue b/frontend/components/card/CardTextArea.vue
index af8a2231c..221994e8a 100644
--- a/frontend/components/card/CardTextArea.vue
+++ b/frontend/components/card/CardTextArea.vue
@@ -8,19 +8,21 @@
         {{ description }}
       </p>
       <div v-if="multiline">
-        <!-- Mobile -->
+        <!-- MARK: Mobile -->
         <textarea
+          v-if="!aboveMediumBP"
           id="feedback"
-          class="block w-full resize-none overflow-y-scroll rounded-md border border-white bg-transparent px-3 py-2 dark:border-white md:hidden md:resize-y md:overflow-hidden"
+          class="block w-full resize-none overflow-y-scroll rounded-md border border-white bg-transparent px-3 py-2 dark:border-white md:resize-y md:overflow-hidden"
           type="text"
           rows="5"
           :placeholder="placeholder"
           :aria-label="textAreaAriaLabel"
         ></textarea>
-        <!-- Desktop -->
+        <!-- MARK: Desktop -->
         <textarea
+          v-if="aboveMediumBP"
           id="feedback"
-          class="hidden w-full resize-none overflow-y-scroll rounded-md border border-white bg-transparent px-3 py-2 dark:border-white md:block md:resize-y md:overflow-hidden"
+          class="block w-full resize-none overflow-y-scroll rounded-md border border-white bg-transparent px-3 py-2 dark:border-white md:resize-y md:overflow-hidden"
           type="text"
           rows="3"
           :placeholder="placeholder"
@@ -40,6 +42,8 @@
 </template>
 
 <script setup lang="ts">
+import useBreakpoint from "~/composables/useBreakpoint";
+
 defineProps<{
   header: string;
   description: string;
@@ -47,4 +51,6 @@ defineProps<{
   multiline: boolean;
   textAreaAriaLabel: string;
 }>();
+
+const aboveMediumBP = useBreakpoint("md");
 </script>
diff --git a/frontend/components/card/discussion/CardDiscussion.vue b/frontend/components/card/discussion/CardDiscussion.vue
index 7e1f1fdde..9f52acfa2 100644
--- a/frontend/components/card/discussion/CardDiscussion.vue
+++ b/frontend/components/card/discussion/CardDiscussion.vue
@@ -3,7 +3,8 @@
     class="card-style flex w-full flex-col px-3 py-4 md:grow md:flex-row md:py-3 lg:px-5"
   >
     <BtnAction
-      class="mt-1 hidden h-min md:flex"
+      v-if="aboveMediumBP"
+      class="mt-1 flex h-min"
       :cta="true"
       :counter="discussion.upVoters.length"
       fontSize="sm"
@@ -18,7 +19,10 @@
             <h2 class="responsive-h3 w-full font-bold">
               {{ discussion.title }}
             </h2>
-            <div class="flex items-center space-x-3 md:hidden md:w-fit">
+            <div
+              v-if="!aboveMediumBP"
+              class="flex items-center space-x-3 md:w-fit"
+            >
               <MetaTagMembers :members="discussion.participants.length" />
               <MetaTag
                 :iconName="IconMap.CHAT"
@@ -28,7 +32,8 @@
           </div>
           <div class="flex space-x-2">
             <BtnAction
-              class="mt-1 flex md:hidden"
+              v-if="!aboveMediumBP"
+              class="mt-1 flex"
               :cta="true"
               :label="`${discussion.upVoters}`"
               fontSize="sm"
@@ -47,7 +52,8 @@
           </div>
         </div>
         <div
-          class="hidden w-full items-center space-x-3 md:flex md:w-fit lg:space-x-5"
+          v-if="aboveMediumBP"
+          class="flex w-full items-center space-x-3 md:w-fit lg:space-x-5"
         >
           <MetaTagMembers :members="discussion.participants.length" />
           <MetaTag
@@ -78,6 +84,7 @@
 </template>
 
 <script setup lang="ts">
+import useBreakpoint from "~/composables/useBreakpoint";
 import type { Discussion } from "~/types/content/discussion";
 import { IconMap } from "~/types/icon-map";
 
@@ -85,4 +92,6 @@ defineProps<{
   isPrivate?: boolean;
   discussion: Discussion;
 }>();
+
+const aboveMediumBP = useBreakpoint("md");
 </script>
diff --git a/frontend/components/card/search-result/CardSearchResult.vue b/frontend/components/card/search-result/CardSearchResult.vue
index 1b989cd14..9f1893a3c 100644
--- a/frontend/components/card/search-result/CardSearchResult.vue
+++ b/frontend/components/card/search-result/CardSearchResult.vue
@@ -159,7 +159,10 @@
               :user="user"
             />
           </div>
-          <div class="hidden items-center space-x-3 md:flex lg:space-x-5">
+          <div
+            v-if="aboveMediumBP"
+            class="flex items-center space-x-3 lg:space-x-5"
+          >
             <MetaTagLocation v-if="location" :location="location" />
             <MetaTagVideo
               v-if="onlineLocation"
@@ -170,7 +173,10 @@
           </div>
         </div>
         <div class="flex flex-col space-y-3 md:flex-row md:space-y-0">
-          <div class="flex items-center justify-center space-x-4 md:hidden">
+          <div
+            v-if="!aboveMediumBP"
+            class="flex items-center justify-center space-x-4"
+          >
             <MetaTagLocation v-if="location" :location="location" />
             <MetaTagVideo
               v-if="onlineLocation"
@@ -215,6 +221,7 @@
 </template>
 
 <script setup lang="ts">
+import useBreakpoint from "~/composables/useBreakpoint";
 import { useLinkURL } from "~/composables/useLinkURL";
 import type { User } from "~/types/auth/user";
 import type { Resource } from "~/types/content/resource";
@@ -233,6 +240,8 @@ const props = defineProps<{
   isPrivate?: boolean;
 }>();
 
+const aboveMediumBP = useBreakpoint("md");
+
 const i18n = useI18n();
 const localePath = useLocalePath();
 const { linkURL } = useLinkURL(props);
diff --git a/frontend/components/header/HeaderMobile.vue b/frontend/components/header/HeaderMobile.vue
index 635c78e1c..deca643bf 100644
--- a/frontend/components/header/HeaderMobile.vue
+++ b/frontend/components/header/HeaderMobile.vue
@@ -1,7 +1,8 @@
 <template>
   <header
+    v-if="!aboveMediumBP"
     ref="header"
-    class="sticky top-0 z-50 h-12 w-full bg-light-layer-2 drop-shadow-md duration-500 dark:bg-dark-layer-2 md:hidden"
+    class="sticky top-0 z-50 h-12 w-full bg-light-layer-2 drop-shadow-md duration-500 dark:bg-dark-layer-2"
   >
     <div class="h-full">
       <div class="flex h-full justify-between gap-2 px-4">
@@ -48,8 +49,11 @@
 </template>
 
 <script setup lang="ts">
+import useBreakpoint from "~/composables/useBreakpoint";
 import { DropdownLocation, SearchBarLocation } from "~/types/location";
 
+const aboveMediumBP = useBreakpoint("md");
+
 const userIsSignedIn = false;
 const isSearchExpanded = ref(false);
 
diff --git a/frontend/components/header/HeaderWebsite.vue b/frontend/components/header/HeaderWebsite.vue
index 7177da3f1..efd4f34c4 100644
--- a/frontend/components/header/HeaderWebsite.vue
+++ b/frontend/components/header/HeaderWebsite.vue
@@ -10,7 +10,7 @@
     }"
   >
     <!-- MARK: Mobile Header -->
-    <div id="mobile-header" class="flex px-4 py-3 md:hidden">
+    <div v-if="!aboveMediumBP" class="flex px-4 py-3">
       <div class="z-0 mx-auto">
         <div
           class="absolute left-0 top-0 z-0 flex h-full w-full items-center justify-center"
@@ -37,7 +37,7 @@
       </SidebarRight>
     </div>
     <!-- MARK: Desktop Header -->
-    <div id="desktop-header" class="mx-auto hidden py-3 md:block">
+    <div v-if="aboveMediumBP" id="desktop-header" class="mx-auto py-3">
       <div class="responsive-px-5 flex items-center justify-between">
         <div class="flex items-center md:space-x-4 lg:space-x-6 xl:space-x-8">
           <div class="relative z-0 h-10 w-36">
@@ -52,8 +52,9 @@
             <DropdownTheme />
             <DropdownLanguage />
             <BtnRouteInternal
+              v-if="aboveLargeBP"
               id="btn-get-in-touch-large"
-              class="hidden lg:block"
+              class="block"
               :cta="true"
               label="components.btn-route-internal.get-in-touch"
               linkTo="/help/contact"
@@ -61,8 +62,9 @@
               ariaLabel="components.btn-route-internal.get-in-touch-aria-label"
             />
             <BtnRouteInternal
+              v-else-if="aboveMediumBP"
               id="btn-get-in-touch-medium"
-              class="hidden md:block lg:hidden"
+              class="block"
               :cta="true"
               label="components.btn-route-internal.get-in-touch"
               linkTo="/help/contact"
@@ -77,8 +79,12 @@
 </template>
 
 <script setup lang="ts">
+import useBreakpoint from "~/composables/useBreakpoint";
 import { DropdownLocation } from "~/types/location";
 
+const aboveMediumBP = useBreakpoint("md");
+const aboveLargeBP = useBreakpoint("lg");
+
 const headerOpacity: Ref<number> = ref(1);
 const prevScrollY: Ref<number> = ref(0);
 
diff --git a/frontend/components/landing/LandingSplash.vue b/frontend/components/landing/LandingSplash.vue
index 79adacb41..ae7338738 100644
--- a/frontend/components/landing/LandingSplash.vue
+++ b/frontend/components/landing/LandingSplash.vue
@@ -14,11 +14,11 @@
       <div
         class="w-10/12 text-center text-base sm:text-xl md:w-3/4 md:text-lg xl:text-2xl"
       >
-        <div class="hidden flex-col space-y-1 md:block xl:space-y-2">
+        <div v-if="aboveMediumBP" class="block flex-col space-y-1 xl:space-y-2">
           <p>{{ $t("components.landing-splash.message-1") }}</p>
           <p>{{ $t("components.landing-splash.message-2") }}</p>
         </div>
-        <p class="md:hidden">
+        <p v-else>
           {{ $t("components.landing-splash.message-1") }}&nbsp;{{
             $t("components.landing-splash.message-2")
           }}
@@ -37,3 +37,9 @@
     </div>
   </div>
 </template>
+
+<script setup lang="ts">
+import useBreakpoint from "~/composables/useBreakpoint";
+
+const aboveMediumBP = useBreakpoint("md");
+</script>
diff --git a/frontend/components/menu/MenuSubPageSelector.vue b/frontend/components/menu/MenuSubPageSelector.vue
index 5ca59f5b9..a54e7b433 100644
--- a/frontend/components/menu/MenuSubPageSelector.vue
+++ b/frontend/components/menu/MenuSubPageSelector.vue
@@ -13,14 +13,14 @@
             }"
             :to="localePath(selector.routeURL)"
           >
-            <div class="md:hidden">
+            <div v-if="!aboveMediumBP">
               <Icon
                 v-if="selector.iconName"
                 :name="selector.iconName"
                 size="1em"
               />
             </div>
-            <p :class="{ 'hidden md:block': selector.iconName }">
+            <p v-if="!selector.iconName || aboveMediumBP">
               {{ selector.label }}
             </p>
           </NuxtLink>
@@ -32,6 +32,7 @@
 
 <script setup lang="ts">
 import { Tab, TabGroup, TabList } from "@headlessui/vue";
+import useBreakpoint from "~/composables/useBreakpoint";
 import type { SubPageSelector } from "~/types/sub-page-selector";
 
 const props = defineProps<{
@@ -39,6 +40,8 @@ const props = defineProps<{
   selectedRoute: number;
 }>();
 
+const aboveMediumBP = useBreakpoint("md");
+
 const localePath = useLocalePath();
 const nuxtApp = useNuxtApp();
 const router = useRouter();
diff --git a/frontend/components/modal/qr-code/ModalQRCode.vue b/frontend/components/modal/qr-code/ModalQRCode.vue
index 323bd3f21..c64bf78af 100644
--- a/frontend/components/modal/qr-code/ModalQRCode.vue
+++ b/frontend/components/modal/qr-code/ModalQRCode.vue
@@ -55,8 +55,9 @@
             {{ $t("components.modal-qr-code.section-3-paragraph-1") }}
           </p> -->
         <BtnActionDropdown
+          v-if="aboveMediumBP"
           @main-btn-clicked="handleMainBtnClicked"
-          class="hidden w-fit md:block"
+          class="block w-fit"
           :cta="true"
           :label="$t('components.btn-action-dropdown.download-qr-code')"
           fontSize="lg"
@@ -97,8 +98,9 @@
         </button>
       </div>
       <BtnActionDropdown
+        v-if="!aboveMediumBP"
         @main-btn-clicked="handleMainBtnClicked"
-        class="w-fit md:hidden"
+        class="w-fit"
         :cta="true"
         :label="$t('components.btn-action-dropdown.download-qr-code')"
         fontSize="lg"
@@ -119,6 +121,7 @@
 
 <script setup lang="ts">
 import { DialogTitle } from "@headlessui/vue";
+import useBreakpoint from "~/composables/useBreakpoint";
 import { useLinkURL } from "~/composables/useLinkURL";
 import type { User } from "~/types/auth/user";
 import type { Resource } from "~/types/content/resource";
@@ -136,6 +139,8 @@ const props = defineProps<{
   isOpen: boolean;
 }>();
 
+const aboveMediumBP = useBreakpoint("md");
+
 const { linkURL } = useLinkURL(props);
 const modals = useModals();
 const modalName = "ModalsQRCode";
diff --git a/frontend/components/page/PageContent.vue b/frontend/components/page/PageContent.vue
index f3c196b50..424cda172 100644
--- a/frontend/components/page/PageContent.vue
+++ b/frontend/components/page/PageContent.vue
@@ -1,7 +1,8 @@
 <template>
   <!-- Note: image on top of content. -->
   <img
-    class="mb-4 h-40 sm:h-52 md:hidden"
+    v-if="!aboveMediumBP"
+    class="mb-4 h-40 sm:h-52"
     :src="imgURL + '_' + $colorMode.value + '.png'"
     :alt="$t(imgAltText)"
   />
@@ -14,17 +15,19 @@
     <div class="items-center space-y-4 text-left md:items-start">
       <!-- Note: image floating right of content. -->
       <img
-        class="float-right hidden h-52 p-4 md:block lg:h-64 2xl:hidden"
+        v-if="aboveMediumBP && !above2xlBP"
+        class="float-right block h-52 p-4 lg:h-64"
         :src="imgURL + '_' + $colorMode.value + '.png'"
         :alt="$t(imgAltText)"
       />
-      <PageBreadcrumbs v-if="includeBreadcrumbs" class="hidden md:block" />
+      <PageBreadcrumbs v-if="includeBreadcrumbs && aboveMediumBP" />
       <slot />
     </div>
     <div class="flex justify-end pr-32">
       <!-- Note: image right of content. -->
       <img
-        class="hidden h-72 2xl:block"
+        v-if="above2xlBP"
+        class="block h-72"
         :src="imgURL + '_' + $colorMode.value + '.png'"
         :alt="$t(imgAltText)"
       />
@@ -33,12 +36,17 @@
 </template>
 
 <script setup lang="ts">
+import useBreakpoint from "~/composables/useBreakpoint";
+
 export interface Props {
   imgURL: string;
   imgAltText: string;
   includeBreadcrumbs?: boolean;
 }
 
+const aboveMediumBP = useBreakpoint("md");
+const above2xlBP = useBreakpoint("2xl");
+
 withDefaults(defineProps<Props>(), {
   includeBreadcrumbs: false,
 });
diff --git a/frontend/components/page/PageDocs.vue b/frontend/components/page/PageDocs.vue
index adf9797a8..78fade85d 100644
--- a/frontend/components/page/PageDocs.vue
+++ b/frontend/components/page/PageDocs.vue
@@ -3,7 +3,7 @@
     class="responsive-py-4 responsive-px-5 flex w-full flex-col items-center bg-light-layer-0 text-light-text dark:bg-dark-layer-0 dark:text-dark-text"
   >
     <div class="flex w-11/12 items-start pb-2 sm:w-10/12 md:w-full">
-      <PageBreadcrumbs class="md:hidden" />
+      <PageBreadcrumbs v-if="!aboveMediumBP" />
     </div>
     <PageContent
       :imgURL="imgURL"
@@ -16,8 +16,12 @@
 </template>
 
 <script setup lang="ts">
+import useBreakpoint from "~/composables/useBreakpoint";
+
 defineProps<{
   imgURL: string;
   imgAltText: string;
 }>();
+
+const aboveMediumBP = useBreakpoint("md");
 </script>
diff --git a/frontend/composables/useBreakpoint.ts b/frontend/composables/useBreakpoint.ts
new file mode 100644
index 000000000..b50bd6223
--- /dev/null
+++ b/frontend/composables/useBreakpoint.ts
@@ -0,0 +1,21 @@
+import { useBreakpoints } from "@vueuse/core";
+import { BreakpointMap } from "~/types/breakpoint-map";
+
+const breakpoints = useBreakpoints({
+  sm: BreakpointMap.SMALL,
+  md: BreakpointMap.MEDIUM,
+  lg: BreakpointMap.LARGE,
+  xl: BreakpointMap.XL,
+  "2xl": BreakpointMap.XXL,
+  xxl: BreakpointMap.XXL,
+  "3xl": BreakpointMap.XXXL,
+  xxxl: BreakpointMap.XXXL,
+});
+
+export default function useBreakpoint(
+  breakpointName: MaybeRefOrGetter<
+    "sm" | "md" | "lg" | "xl" | "2xl" | "xxl" | "3xl" | "xxxl"
+  >
+): Ref<boolean> {
+  return breakpoints.greaterOrEqual(breakpointName);
+}
diff --git a/frontend/layouts/auth.vue b/frontend/layouts/auth.vue
index 147d85e2b..84f948ec3 100644
--- a/frontend/layouts/auth.vue
+++ b/frontend/layouts/auth.vue
@@ -1,10 +1,10 @@
 <template>
-  <HeaderWebsite class="md:hidden" />
+  <HeaderWebsite v-if="!aboveMediumBP" />
   <div class="grid h-screen grid-cols-1 md:grid-cols-2">
     <Head>
       <Title>{{ $t(page.title) }}</Title>
     </Head>
-    <div class="relative hidden md:block">
+    <div v-if="aboveMediumBP" class="relative">
       <div class="flex h-full w-full items-center justify-center">
         <div
           class="relative z-0 mb-6 h-16 w-64 overflow-y-hidden xl:h-24 xl:w-96"
@@ -18,7 +18,7 @@
     <div
       class="h-full bg-light-layer-1 text-light-text dark:bg-dark-layer-1 dark:text-dark-text"
     >
-      <div class="hidden justify-end space-x-6 px-8 py-4 md:flex">
+      <div v-if="aboveMediumBP" class="flex justify-end space-x-6 px-8 py-4">
         <DropdownLanguage />
         <BtnRouteInternal
           v-if="page.route != 'index'"
@@ -44,6 +44,9 @@
 
 <script setup lang="ts">
 const route = useRoute();
+import useBreakpoint from "~/composables/useBreakpoint";
+
+const aboveMediumBP = useBreakpoint("md");
 
 const page = computed(() => {
   const authRoutes = [
diff --git a/frontend/layouts/sidebar.vue b/frontend/layouts/sidebar.vue
index e7f566279..1d7a70a06 100644
--- a/frontend/layouts/sidebar.vue
+++ b/frontend/layouts/sidebar.vue
@@ -1,12 +1,13 @@
 <template>
   <HeaderMobile />
-  <MenuMobileNavigationDropdown class="md:hidden" />
+  <MenuMobileNavigationDropdown v-if="!aboveMediumBP" />
   <SidebarLeft
+    v-if="aboveMediumBP"
     @mouseover="sidebarHover = true"
     @focus="sidebarHover = true"
     @mouseleave="sidebarHover = false"
     @blur="sidebarHover = false"
-    class="hidden md:block"
+    class="block"
   />
   <div class="flex flex-col md:h-screen md:overflow-y-scroll">
     <div
@@ -20,15 +21,18 @@
       :class="sidebarFooterDynamicClass"
     />
   </div>
-  <MenuMobileNavBar class="md:hidden" />
+  <MenuMobileNavBar v-if="!aboveMediumBP" />
 </template>
 
 <script setup lang="ts">
+import useBreakpoint from "~/composables/useBreakpoint";
 import {
   getSidebarContentDynamicClass,
   getSidebarFooterDynamicClass,
 } from "~/utils/sidebarUtils";
 
+const aboveMediumBP = useBreakpoint("md");
+
 const sidebar = useSidebar();
 const sidebarHover = ref(false);
 
diff --git a/frontend/pages/docs/get-active.vue b/frontend/pages/docs/get-active.vue
index fdc05bd5f..751d20656 100644
--- a/frontend/pages/docs/get-active.vue
+++ b/frontend/pages/docs/get-active.vue
@@ -9,19 +9,21 @@
       class="responsive-py-4 responsive-px-5 flex w-full flex-col items-center"
     >
       <div class="flex w-10/12 items-start pb-2 md:w-full">
-        <PageBreadcrumbs class="md:hidden" />
+        <PageBreadcrumbs v-if="!aboveMediumBP" />
       </div>
       <!-- Note: image on top of content for mobile. -->
       <img
-        class="h-1/6 w-full md:hidden"
+        v-if="!aboveMediumBP"
+        class="h-1/6 w-full"
         :src="GET_ACTIVE_MOCKUP_URL + `_${$colorMode.value}.png`"
         :alt="$t('pages.docs.get-active.modal-image-alt-text')"
       />
       <div class="w-10/12 gap-16 md:w-full 2xl:grid 2xl:grid-cols-2">
         <ModalImageBtn
+          v-if="aboveMediumBP"
           @click="openModal()"
           @keydown.enter="openModal()"
-          class="hidden md:block"
+          class="block"
           :imageURL="GET_ACTIVE_MOCKUP_URL"
           imageAltText="pages.docs.get-active.modal-image-alt-text"
         />
@@ -34,7 +36,7 @@
         <div
           class="items-center space-y-4 text-left md:items-start 2xl:col-span-1 2xl:row-start-1"
         >
-          <PageBreadcrumbs class="hidden md:block" />
+          <PageBreadcrumbs v-if="aboveMediumBP" class="block" />
           <h1 class="responsive-h1 pb-2 font-bold">
             {{ $t("pages.docs.get-active.header") }}
           </h1>
@@ -124,11 +126,13 @@
 </template>
 
 <script setup lang="ts">
+import useBreakpoint from "~/composables/useBreakpoint";
 import { IconMap } from "~/types/icon-map";
 
+const aboveMediumBP = useBreakpoint("md");
+
 const modals = useModals();
 const modalName = "ModalImage";
-
 const modalIsOpen = ref(false);
 
 function openModal() {
diff --git a/frontend/pages/docs/get-organized.vue b/frontend/pages/docs/get-organized.vue
index 8c32a91dc..a6b4a47bc 100644
--- a/frontend/pages/docs/get-organized.vue
+++ b/frontend/pages/docs/get-organized.vue
@@ -9,19 +9,21 @@
       class="responsive-py-4 responsive-px-5 flex w-full flex-col items-center"
     >
       <div class="flex w-10/12 items-start pb-2 md:w-full">
-        <PageBreadcrumbs class="md:hidden" />
+        <PageBreadcrumbs v-if="!aboveMediumBP" />
       </div>
       <!-- Note: image on top of content for mobile. -->
       <img
-        class="h-1/6 w-full md:hidden"
+        v-if="!aboveMediumBP"
+        class="h-1/6 w-full"
         :src="GET_ORGANIZED_MOCKUP_URL + `_${$colorMode.value}.png`"
         :alt="$t('pages.docs.get-organized.modal-image-alt-text')"
       />
       <div class="w-10/12 gap-16 md:w-full 2xl:grid 2xl:grid-cols-2">
         <ModalImageBtn
+          v-if="aboveMediumBP"
           @click="openModal()"
           @keydown.enter="openModal()"
-          class="hidden md:block"
+          class="block"
           :imageURL="GET_ORGANIZED_MOCKUP_URL"
           imageAltText="pages.docs.get-organized.modal-image-alt-text"
         />
@@ -34,7 +36,7 @@
         <div
           class="items-center space-y-4 text-left md:items-start 2xl:col-span-1 2xl:row-start-1"
         >
-          <PageBreadcrumbs class="hidden md:block" />
+          <PageBreadcrumbs v-if="aboveMediumBP" />
           <h1 class="responsive-h1 pb-2 font-bold">
             {{ $t("pages.docs.get-organized.header") }}
           </h1>
@@ -97,8 +99,11 @@
 </template>
 
 <script setup lang="ts">
+import useBreakpoint from "~/composables/useBreakpoint";
 import { IconMap } from "~/types/icon-map";
 
+const aboveMediumBP = useBreakpoint("md");
+
 const modals = useModals();
 const modalName = "ModalImage";
 const modalIsOpen = ref(false);
diff --git a/frontend/pages/docs/grow-organization.vue b/frontend/pages/docs/grow-organization.vue
index 12d8d91fb..c5eb74e98 100644
--- a/frontend/pages/docs/grow-organization.vue
+++ b/frontend/pages/docs/grow-organization.vue
@@ -9,19 +9,21 @@
       class="responsive-py-4 responsive-px-5 flex w-full flex-col items-center"
     >
       <div class="flex w-10/12 items-start pb-2 md:w-full">
-        <PageBreadcrumbs class="md:hidden" />
+        <PageBreadcrumbs v-if="!aboveMediumBP" />
       </div>
       <!-- Note: image on top of content for mobile. -->
       <img
-        class="h-1/6 w-full md:hidden"
+        v-if="!aboveMediumBP"
+        class="h-1/6 w-full"
         :src="GROW_ORGANIZATION_MOCKUP_URL + `_${$colorMode.value}.png`"
         :alt="$t('pages.docs.grow-organization.modal-image-alt-text')"
       />
       <div class="w-10/12 gap-16 md:w-full 2xl:grid 2xl:grid-cols-2">
         <ModalImageBtn
+          v-if="aboveMediumBP"
           @click="openModal()"
           @keydown.enter="openModal()"
-          class="hidden md:block"
+          class="block"
           :imageURL="GROW_ORGANIZATION_MOCKUP_URL"
           imageAltText="pages.docs.grow-organization.modal-image-alt-text"
         />
@@ -34,7 +36,7 @@
         <div
           class="items-center space-y-4 text-left md:items-start 2xl:col-span-1 2xl:row-start-1"
         >
-          <PageBreadcrumbs class="hidden md:block" />
+          <PageBreadcrumbs v-if="aboveMediumBP" class="block" />
           <h1 class="responsive-h1 pb-2 font-bold">
             {{ $t("pages.docs.grow-organization.header") }}
           </h1>
@@ -104,8 +106,11 @@
 </template>
 
 <script setup lang="ts">
+import useBreakpoint from "~/composables/useBreakpoint";
 import { IconMap } from "~/types/icon-map";
 
+const aboveMediumBP = useBreakpoint("md");
+
 const modals = useModals();
 const modalName = "ModalImage";
 const modalIsOpen = ref(false);
diff --git a/frontend/pages/events/[id]/discussion.vue b/frontend/pages/events/[id]/discussion.vue
index 28ac44091..fc0748882 100644
--- a/frontend/pages/events/[id]/discussion.vue
+++ b/frontend/pages/events/[id]/discussion.vue
@@ -13,7 +13,8 @@
     >
       <div class="flex space-x-2 lg:space-x-3">
         <BtnRouteInternal
-          class="hidden w-max md:block"
+          v-if="aboveMediumBP"
+          class="block w-max"
           :cta="true"
           linkTo="/"
           label="components.btn-route-internal.new-discussion"
@@ -37,8 +38,11 @@
 </template>
 
 <script setup lang="ts">
+import useBreakpoint from "~/composables/useBreakpoint";
 import { IconMap } from "~/types/icon-map";
 import { testClimateEvent } from "~/utils/testEntities";
 
+const aboveMediumBP = useBreakpoint("md");
+
 const event = testClimateEvent;
 </script>
diff --git a/frontend/pages/organizations/[id]/about.vue b/frontend/pages/organizations/[id]/about.vue
index 5c238fd39..1b05b426b 100644
--- a/frontend/pages/organizations/[id]/about.vue
+++ b/frontend/pages/organizations/[id]/about.vue
@@ -66,7 +66,7 @@
           }"
         />
         <div class="h-full w-full">
-          <MediaImageCarouselFull :class="{ 'lg:hidden': textExpanded }" />
+          <MediaImageCarouselFull v-if="!textExpanded || !aboveLargeBP" />
         </div>
       </div>
       <CardGetInvolvedOrganization />
@@ -81,9 +81,12 @@
 </template>
 
 <script setup lang="ts">
+import useBreakpoint from "~/composables/useBreakpoint";
 import { BreakpointMap } from "~/types/breakpoint-map";
 import { IconMap } from "~/types/icon-map";
 
+const aboveLargeBP = useBreakpoint("lg");
+
 const idParam = useRoute().params.id;
 const id = typeof idParam === "string" ? idParam : undefined;
 
diff --git a/frontend/pages/organizations/[id]/discussions/index.vue b/frontend/pages/organizations/[id]/discussions/index.vue
index db8b52afb..d8e471ef4 100644
--- a/frontend/pages/organizations/[id]/discussions/index.vue
+++ b/frontend/pages/organizations/[id]/discussions/index.vue
@@ -17,7 +17,8 @@
     >
       <div class="flex space-x-2 lg:space-x-3">
         <BtnRouteInternal
-          class="hidden w-max md:block"
+          v-if="aboveMediumBP"
+          class="block w-max"
           :cta="true"
           linkTo="/"
           label="components.btn-route-internal.new-discussion"
@@ -42,8 +43,11 @@
 </template>
 
 <script setup lang="ts">
+import useBreakpoint from "~/composables/useBreakpoint";
 import { IconMap } from "~/types/icon-map";
 import { testTechOrg } from "~/utils/testEntities";
 
+const aboveMediumBP = useBreakpoint("md");
+
 const organization = testTechOrg;
 </script>
diff --git a/frontend/pages/organizations/[id]/groups/[id]/about.vue b/frontend/pages/organizations/[id]/groups/[id]/about.vue
index 905578b28..186e25862 100644
--- a/frontend/pages/organizations/[id]/groups/[id]/about.vue
+++ b/frontend/pages/organizations/[id]/groups/[id]/about.vue
@@ -73,7 +73,7 @@
           :group="group"
         />
         <div class="h-full w-full">
-          <MediaImageCarouselFull :class="{ 'lg:hidden': textExpanded }" />
+          <MediaImageCarouselFull v-if="!textExpanded || !aboveLargeBP" />
         </div>
       </div>
       <CardGetInvolvedGroup :group="group" />
@@ -84,11 +84,14 @@
 </template>
 
 <script setup lang="ts">
+import useBreakpoint from "~/composables/useBreakpoint";
 import { BreakpointMap } from "~/types/breakpoint-map";
 import type { Group, GroupText } from "~/types/entities/group";
 import { IconMap } from "~/types/icon-map";
 import { getGroupSubPages } from "~/utils/groupSubPages";
 
+const aboveLargeBP = useBreakpoint("lg");
+
 const { id } = useRoute().params;
 
 const [resOrg, resOrgTexts] = await Promise.all([