diff --git a/services/web/.storybook/main.ts b/services/web/.storybook/main.ts
index 712661dfab..ac1a922072 100644
--- a/services/web/.storybook/main.ts
+++ b/services/web/.storybook/main.ts
@@ -45,6 +45,33 @@ const config: StorybookConfig = {
               { loader: 'less-loader' },
             ],
           },
+          {
+            // Pass Sass files through sass-loader/css-loader/mini-css-extract-
+            // plugin (note: run in reverse order)
+            test: /\.s[ac]ss$/,
+            use: [
+              // Allows the CSS to be extracted to a separate .css file
+              { loader: MiniCssExtractPlugin.loader },
+              // Resolves any CSS dependencies (e.g. url())
+              { loader: 'css-loader' },
+              // Resolve relative paths sensibly in SASS
+              { loader: 'resolve-url-loader' },
+              {
+                // Runs autoprefixer on CSS via postcss
+                loader: 'postcss-loader',
+                options: {
+                  postcssOptions: {
+                    plugins: ['autoprefixer'],
+                  },
+                },
+              },
+              // Compiles Sass to CSS
+              {
+                loader: 'sass-loader',
+                options: { sourceMap: true }, // sourceMap: true is required for resolve-url-loader
+              },
+            ],
+          },
         ],
         plugins: [new MiniCssExtractPlugin()],
       },
diff --git a/services/web/frontend/js/features/ui/components/ol/ol-form-checkbox.tsx b/services/web/frontend/js/features/ui/components/ol/ol-form-checkbox.tsx
index 5577d1016d..28eca00b3f 100644
--- a/services/web/frontend/js/features/ui/components/ol/ol-form-checkbox.tsx
+++ b/services/web/frontend/js/features/ui/components/ol/ol-form-checkbox.tsx
@@ -14,6 +14,8 @@ function OLFormCheckbox(props: OLFormCheckboxProps) {
   const bs3FormCheckboxProps: React.ComponentProps<typeof BS3Checkbox> = {
     children: rest.label,
     checked: rest.checked,
+    value: rest.value,
+    name: rest.name,
     required: rest.required,
     readOnly: rest.readOnly,
     disabled: rest.disabled,
diff --git a/services/web/frontend/js/shared/components/labs/labs-experiments-widget.tsx b/services/web/frontend/js/shared/components/labs/labs-experiments-widget.tsx
index 302811709a..56f2e5f108 100644
--- a/services/web/frontend/js/shared/components/labs/labs-experiments-widget.tsx
+++ b/services/web/frontend/js/shared/components/labs/labs-experiments-widget.tsx
@@ -1,10 +1,11 @@
 import { ReactNode, useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import Badge from '@/shared/components/badge'
-import Tooltip from '@/shared/components/tooltip'
+import OLBadge from '@/features/ui/components/ol/ol-badge'
+import OLTooltip from '@/features/ui/components/ol/ol-tooltip'
 import { postJSON } from '@/infrastructure/fetch-json'
-import { Button } from 'react-bootstrap'
+import OLButton from '@/features/ui/components/ol/ol-button'
 import getMeta from '@/utils/meta'
+import { isBootstrap5 } from '@/features/utils/bootstrap-5'
 
 type IntegrationLinkingWidgetProps = {
   logo: ReactNode
@@ -66,7 +67,7 @@ export function LabsExperimentWidget({
       <div className="description-container">
         <div className="title-row">
           <h3 className="h4">{title}</h3>
-          {optedIn && <Badge bsStyle="info">{t('enabled')}</Badge>}
+          {optedIn && <OLBadge bg="info">{t('enabled')}</OLBadge>}
         </div>
         <p className="small">
           {description}{' '}
@@ -111,31 +112,36 @@ function ActionButton({
 
   if (optedIn) {
     return (
-      <Button bsStyle={null} className="btn-secondary" onClick={handleDisable}>
+      <OLButton variant="secondary" onClick={handleDisable}>
         {t('turn_off')}
-      </Button>
+      </OLButton>
     )
   } else if (disabled) {
+    const tooltipableButton = isBootstrap5() ? (
+      <div className="d-inline-block">
+        <OLButton variant="primary" disabled>
+          {t('turn_on')}
+        </OLButton>
+      </div>
+    ) : (
+      <OLButton variant="primary" disabled>
+        {t('turn_on')}
+      </OLButton>
+    )
     return (
-      <Tooltip
+      <OLTooltip
         id="experiment-disabled"
         description={t('this_experiment_isnt_accepting_new_participants')}
         overlayProps={{ delay: 0 }}
       >
-        <Button bsStyle="secondary" className="btn btn-primary" disabled>
-          {t('turn_on')}
-        </Button>
-      </Tooltip>
+        {tooltipableButton}
+      </OLTooltip>
     )
   } else {
     return (
-      <Button
-        bsStyle="primary"
-        onClick={handleEnable}
-        className="btn btn-primary"
-      >
+      <OLButton variant="primary" onClick={handleEnable}>
         {t('turn_on')}
-      </Button>
+      </OLButton>
     )
   }
 }