diff --git a/package.json b/package.json
index c9cf1f9705c..f98ee7f1420 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
     "@emotion/react": "11.11.4",
     "@lexical/history": "0.13.1",
     "@lexical/react": "0.13.1",
+    "@mediapipe/tasks-vision": "^0.10.12",
     "@wireapp/avs": "9.6.12",
     "@wireapp/commons": "5.2.7",
     "@wireapp/core": "45.2.11",
diff --git a/src/i18n/en-US.json b/src/i18n/en-US.json
index 404bbe0cf8e..e13d9ba05f2 100644
--- a/src/i18n/en-US.json
+++ b/src/i18n/en-US.json
@@ -1512,6 +1512,9 @@
   "videoCallaudioInputMicrophone": "Microphone",
   "videoCallaudioOutputSpeaker": "Speaker",
   "videoCallvideoInputCamera": "Camera",
+  "videoCallbackgroundBlurHeadline": "Background",
+  "videoCallbackgroundBlur": "Blur my background",
+  "videoCallbackgroundNotBlurred": "Don't blur my background",
   "videoSpeakersTabAll": "All ({{count}})",
   "videoSpeakersTabSpeakers": "Speakers",
   "warningCallIssues": "This version of {{brandName}} can not participate in the call. Please use",
@@ -1538,4 +1541,4 @@
   "wireMacos": "{{brandName}} for macOS",
   "wireWindows": "{{brandName}} for Windows",
   "wire_for_web": "{{brandName}} for Web"
-}
+}
\ No newline at end of file
diff --git a/src/script/calling/Participant.ts b/src/script/calling/Participant.ts
index 52b72de7a29..0ead860eff5 100644
--- a/src/script/calling/Participant.ts
+++ b/src/script/calling/Participant.ts
@@ -22,6 +22,7 @@ import ko from 'knockout';
 
 import {VIDEO_STATE} from '@wireapp/avs';
 
+import {backgroundBlur} from 'Components/calling/FullscreenVideoCall';
 import {matchQualifiedIds} from 'Util/QualifiedId';
 
 import {User} from '../entity/User';
@@ -41,7 +42,7 @@ export class Participant {
   public isActivelySpeaking: ko.Observable<boolean>;
   public isSendingVideo: ko.PureComputed<boolean>;
   public isAudioEstablished: ko.Observable<boolean>;
-
+  public isBlurred: ko.Observable<backgroundBlur>;
   // Audio
   public audioStream: ko.Observable<MediaStream | undefined>;
   public isMuted: ko.Observable<boolean>;
@@ -63,6 +64,9 @@ export class Participant {
     this.hasPausedVideo = ko.pureComputed(() => {
       return this.videoState() === VIDEO_STATE.PAUSED;
     });
+    this.isBlurred = ko.observable(
+      localStorage.getItem('blurState') === 'true' ? backgroundBlur.isBlurred : backgroundBlur.isNotBlurred,
+    );
     this.videoStream = ko.observable();
     this.audioStream = ko.observable();
     this.isActivelySpeaking = ko.observable(false);
@@ -87,6 +91,11 @@ export class Participant {
     this.videoStream(videoStream);
   }
 
+  async setBlur(blurState: backgroundBlur): Promise<void> {
+    this.isBlurred(blurState);
+    localStorage.setItem('blurState', blurState === backgroundBlur.isBlurred ? 'true' : 'false');
+  }
+
   updateMediaStream(newStream: MediaStream, stopTracks: boolean): MediaStream {
     if (newStream.getVideoTracks().length) {
       this.setVideoStream(new MediaStream(newStream.getVideoTracks()), stopTracks);
diff --git a/src/script/components/calling/FullscreenVideoCall.tsx b/src/script/components/calling/FullscreenVideoCall.tsx
index 22d210b706d..7d91c89f153 100644
--- a/src/script/components/calling/FullscreenVideoCall.tsx
+++ b/src/script/components/calling/FullscreenVideoCall.tsx
@@ -83,6 +83,11 @@ export interface FullscreenVideoCallProps {
   videoGrid: Grid;
 }
 
+export enum backgroundBlur {
+  isNotBlurred,
+  isBlurred,
+}
+
 const FullscreenVideoCall: React.FC<FullscreenVideoCallProps> = ({
   call,
   canShareScreen,
@@ -108,10 +113,11 @@ const FullscreenVideoCall: React.FC<FullscreenVideoCallProps> = ({
   teamState = container.resolve(TeamState),
 }) => {
   const selfParticipant = call.getSelfParticipant();
-  const {sharesScreen: selfSharesScreen, sharesCamera: selfSharesCamera} = useKoSubscribableChildren(selfParticipant, [
-    'sharesScreen',
-    'sharesCamera',
-  ]);
+  const {
+    sharesScreen: selfSharesScreen,
+    sharesCamera: selfSharesCamera,
+    isBlurred,
+  } = useKoSubscribableChildren(selfParticipant, ['sharesScreen', 'sharesCamera', 'isBlurred']);
 
   const {
     activeSpeakers,
@@ -150,7 +156,7 @@ const FullscreenVideoCall: React.FC<FullscreenVideoCallProps> = ({
     (call.initialType === CALL_TYPE.VIDEO || conversation.supportsVideoCall(call.isConference));
 
   const showSwitchMicrophone = audioinput.length > 1;
-  const showSwitchVideo = videoinput.length > 1;
+  // const showSwitchVideo = videoinput.length > 1; //TODO: should we show video switch list item when there is only one camera?
 
   const audioOptions = [
     {
@@ -227,17 +233,41 @@ const FullscreenVideoCall: React.FC<FullscreenVideoCallProps> = ({
             };
       }),
     },
+    {
+      label: t('videoCallbackgroundBlurHeadline'),
+      options: [
+        {
+          label: t('videoCallbackgroundBlur'),
+          value: backgroundBlur.isBlurred,
+          dataUieName: backgroundBlur.isBlurred,
+          id: backgroundBlur.isBlurred,
+        },
+        {
+          label: t('videoCallbackgroundNotBlurred'),
+          value: backgroundBlur.isNotBlurred,
+          dataUieName: backgroundBlur.isNotBlurred,
+          id: backgroundBlur.isNotBlurred,
+        },
+      ],
+    },
   ];
 
   const [selectedVideoOptions, setSelectedVideoOptions] = React.useState(() =>
-    [currentCameraDevice].flatMap(
+    [currentCameraDevice, isBlurred].flatMap(
       device => videoOptions.flatMap(options => options.options.filter(item => item.id === device)) ?? [],
     ),
   );
-  const updateVideoOptions = (selectedOption: string) => {
+
+  const updateVideoOptions = async (selectedOption: string | backgroundBlur) => {
     const camera = videoOptions[0].options.find(item => item.value === selectedOption) ?? selectedVideoOptions[0];
-    setSelectedVideoOptions([camera]);
-    switchCameraInput(camera.id);
+    const blur = videoOptions[1].options.find(item => item.value == selectedOption) ?? selectedVideoOptions[1];
+
+    if (blur.id !== isBlurred) {
+      await selfParticipant.setBlur(blur.id as backgroundBlur);
+    }
+
+    setSelectedVideoOptions([camera, blur]);
+    switchCameraInput(String(camera.id));
   };
 
   const unreadMessagesCount = useAppState(state => state.unreadMessagesCount);
@@ -510,44 +540,42 @@ const FullscreenVideoCall: React.FC<FullscreenVideoCallProps> = ({
                     </span>
                   </button>
 
-                  {showSwitchVideo && (
-                    <button
-                      className="device-toggle-button"
-                      css={videoOptionsOpen ? videoControlActiveStyles : videoControlInActiveStyles}
-                      onClick={() => setVideoOptionsOpen(prev => !prev)}
-                      onKeyDown={event => handleKeyDown(event, () => setVideoOptionsOpen(prev => !prev))}
-                      onBlur={event => {
-                        if (!event.currentTarget.contains(event.relatedTarget)) {
-                          setVideoOptionsOpen(false);
-                        }
-                      }}
-                    >
-                      {videoOptionsOpen ? (
-                        <>
-                          <Select
-                            // eslint-disable-next-line jsx-a11y/no-autofocus
-                            autoFocus
-                            value={selectedVideoOptions}
-                            onChange={selectedOption => updateVideoOptions(String(selectedOption?.value))}
-                            onKeyDown={event => isEscapeKey(event) && setVideoOptionsOpen(false)}
-                            id="select-camera"
-                            dataUieName="select-camera"
-                            controlShouldRenderValue={false}
-                            isClearable={false}
-                            backspaceRemovesValue={false}
-                            hideSelectedOptions={false}
-                            options={videoOptions}
-                            menuPlacement="top"
-                            menuIsOpen
-                            wrapperCSS={{marginBottom: 0}}
-                          />
-                          <Icon.Chevron css={{height: '16px'}} />
-                        </>
-                      ) : (
-                        <Icon.Chevron css={{rotate: '180deg', height: '16px'}} />
-                      )}
-                    </button>
-                  )}
+                  <button
+                    className="device-toggle-button"
+                    css={videoOptionsOpen ? videoControlActiveStyles : videoControlInActiveStyles}
+                    onClick={() => setVideoOptionsOpen(prev => !prev)}
+                    onKeyDown={event => handleKeyDown(event, () => setVideoOptionsOpen(prev => !prev))}
+                    onBlur={event => {
+                      if (!event.currentTarget.contains(event.relatedTarget)) {
+                        setVideoOptionsOpen(false);
+                      }
+                    }}
+                  >
+                    {videoOptionsOpen ? (
+                      <>
+                        <Select
+                          // eslint-disable-next-line jsx-a11y/no-autofocus
+                          autoFocus
+                          value={selectedVideoOptions}
+                          onChange={selectedOption => updateVideoOptions(String(selectedOption?.value))}
+                          onKeyDown={event => isEscapeKey(event) && setVideoOptionsOpen(false)}
+                          id="select-camera"
+                          dataUieName="select-camera"
+                          controlShouldRenderValue={false}
+                          isClearable={false}
+                          backspaceRemovesValue={false}
+                          hideSelectedOptions={false}
+                          options={videoOptions}
+                          menuPlacement="top"
+                          menuIsOpen
+                          wrapperCSS={{marginBottom: 0}}
+                        />
+                        <Icon.Chevron css={{height: '16px'}} />
+                      </>
+                    ) : (
+                      <Icon.Chevron css={{rotate: '180deg', height: '16px'}} />
+                    )}
+                  </button>
                 </li>
               )}
 
diff --git a/src/script/components/calling/GroupVideoGrid.tsx b/src/script/components/calling/GroupVideoGrid.tsx
index fd066534883..69914f974ee 100644
--- a/src/script/components/calling/GroupVideoGrid.tsx
+++ b/src/script/components/calling/GroupVideoGrid.tsx
@@ -161,6 +161,8 @@ const GroupVideoGrid: React.FunctionComponent<GroupVideoGripProps> = ({
       {thumbnail.videoStream && !maximizedParticipant && (
         <GroupVideoThumbnailWrapper minimized={minimized}>
           <Video
+            blur={!!selfParticipant.isBlurred()}
+            handleBlur={selfParticipant.setVideoStream}
             className="group-video__thumbnail-video"
             autoPlay
             playsInline
diff --git a/src/script/components/calling/GroupVideoGridTile.tsx b/src/script/components/calling/GroupVideoGridTile.tsx
index db1b8b33fc8..6fd5aa429c5 100644
--- a/src/script/components/calling/GroupVideoGridTile.tsx
+++ b/src/script/components/calling/GroupVideoGridTile.tsx
@@ -147,6 +147,8 @@ const GroupVideoGridTile: React.FC<GroupVideoGridTileProps> = ({
       {hasActiveVideo ? (
         <div className="tile-wrapper">
           <Video
+            blur={participant === selfParticipant && !!selfParticipant.isBlurred()}
+            handleBlur={participant === selfParticipant ? selfParticipant.setVideoStream : undefined}
             autoPlay
             playsInline
             srcObject={videoStream}
diff --git a/src/script/components/calling/Video.tsx b/src/script/components/calling/Video.tsx
index 4d8c3d8ae5e..59c9e703683 100644
--- a/src/script/components/calling/Video.tsx
+++ b/src/script/components/calling/Video.tsx
@@ -18,14 +18,20 @@
  */
 
 // https://github.com/facebook/react/issues/11163#issuecomment-628379291
+
 import {VideoHTMLAttributes, useEffect, useRef} from 'react';
 
+import {applyBlur} from 'Util/applyBlur';
+
 type VideoProps = VideoHTMLAttributes<HTMLVideoElement> & {
   srcObject: MediaStream;
+  blur: boolean;
+  handleBlur?: (stream: MediaStream, stopTracks: boolean) => void;
 };
 
-const Video = ({srcObject, ...props}: VideoProps) => {
+const Video = ({srcObject, blur, handleBlur, ...props}: VideoProps) => {
   const refVideo = useRef<HTMLVideoElement>(null);
+  const blurRef = useRef<HTMLVideoElement>(null);
 
   useEffect(() => {
     if (!refVideo.current) {
@@ -36,6 +42,9 @@ const Video = ({srcObject, ...props}: VideoProps) => {
 
   useEffect(
     () => () => {
+      if (blurRef.current) {
+        blurRef.current.srcObject = null;
+      }
       if (refVideo.current) {
         refVideo.current.srcObject = null;
       }
@@ -43,7 +52,41 @@ const Video = ({srcObject, ...props}: VideoProps) => {
     [],
   );
 
-  return <video ref={refVideo} {...props} />;
+  useEffect(() => {
+    const asyncBlur = async () => {
+      if (!refVideo.current) {
+        throw new Error('No ref video');
+      }
+      return await applyBlur(refVideo.current, props);
+    };
+
+    if (blur) {
+      asyncBlur()
+        .then(stream => {
+          if (!stream) {
+            throw new Error('Failed to apply blur');
+          }
+          // handleBlur?.(stream, false);
+          blurRef.current!.srcObject = stream;
+        })
+        .catch(console.error);
+    }
+  }, [blur, handleBlur, props]);
+
+  return (
+    <>
+      <video
+        ref={refVideo}
+        {...props}
+        css={{visibility: blur ? 'hidden' : 'visible', display: blur ? 'none' : 'inline block'}}
+      />
+      <video
+        ref={blurRef}
+        {...props}
+        css={{visibility: !blur ? 'hidden' : 'visible', display: !blur ? 'none' : 'inline block'}}
+      />
+    </>
+  );
 };
 
 export {Video};
diff --git a/src/script/util/applyBlur.ts b/src/script/util/applyBlur.ts
new file mode 100644
index 00000000000..0bb1242205a
--- /dev/null
+++ b/src/script/util/applyBlur.ts
@@ -0,0 +1,178 @@
+/*
+ * Wire
+ * Copyright (C) 2024 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import {VideoHTMLAttributes} from 'react';
+
+import {ImageSegmenter, FilesetResolver, ImageSegmenterResult} from '@mediapipe/tasks-vision';
+
+function makeGaussKernel(sigma: number) {
+  const GAUSSKERN = 6.0;
+  const dim = parseInt(Math.max(3.0, GAUSSKERN * sigma));
+  const sqrtSigmaPi2 = Math.sqrt(Math.PI * 2.0) * sigma;
+  const s2 = 2.0 * sigma * sigma;
+  let sum = 0.0;
+
+  const kernel = new Float32Array(dim - !(dim & 1)); // Make it odd number
+  const half = parseInt(kernel.length / 2);
+  for (let i = -half, j = 0; j < kernel.length; i++, j++) {
+    kernel[j] = Math.exp(-(i * i) / s2) / sqrtSigmaPi2;
+    sum += kernel[j];
+  }
+  // Normalize the gaussian kernel to prevent image darkening/brightening
+  for (let i = 0; i < dim; i++) {
+    kernel[i] /= sum;
+  }
+  return kernel;
+}
+
+export function blurPixels(pixels: Uint8ClampedArray, sigma: number, imageWidth: number, imageHeight: number) {
+  const kernel = makeGaussKernel(sigma);
+
+  const w = imageWidth;
+  const h = imageHeight;
+  const buff = new Uint8Array(w * h);
+  const mk = Math.floor(kernel.length / 2);
+  const kl = kernel.length;
+
+  for (let channel = 0; channel < 3; channel++) {
+    // First step process columns
+    for (let hw = 0, j = 0; j < h; j++, hw += w) {
+      for (let i = 0; i < w; i++) {
+        let sum = 0;
+        for (let k = 0; k < kl; k++) {
+          let col = i + (k - mk);
+          col = col < 0 ? 0 : col >= w ? w - 1 : col;
+          sum += pixels[(hw + col) * 4 + channel] * kernel[k];
+        }
+        buff[hw + i] = sum;
+      }
+    }
+
+    // Second step process rows
+    for (let j = 0, offset = 0; j < h; j++, offset += w) {
+      for (let i = 0; i < w; i++) {
+        let sum = 0;
+        for (let k = 0; k < kl; k++) {
+          let row = j + (k - mk);
+          row = row < 0 ? 0 : row >= h ? h - 1 : row;
+          sum += buff[row * w + i] * kernel[k];
+        }
+        const off = (j * w + i) * 4;
+        pixels[off + channel] = sum;
+      }
+    }
+  }
+  return pixels;
+}
+
+export async function applyBlur(
+  videoElement: HTMLVideoElement,
+  props: VideoHTMLAttributes<HTMLVideoElement>,
+): Promise<MediaStream> {
+  if (!videoElement) {
+    throw new Error('No video stream provided');
+  }
+
+  const imageWidth = Number(props?.width ?? 1280);
+  const imageHeight = Number(props?.height ?? 720);
+
+  const canvasEl = document.createElement('canvas');
+  canvasEl.width = imageWidth;
+  canvasEl.height = imageHeight;
+  const ctx = canvasEl.getContext('2d', {willReadFrequently: true});
+
+  async function callbackForVideo(result: ImageSegmenterResult) {
+    if (!ctx || !result) {
+      return;
+    }
+
+    const originalImage = ctx.getImageData(0, 0, imageWidth, imageHeight).data;
+    // const backgroundImageData = new Uint8ClampedArray(originalImage.slice(0).buffer);
+
+    // const blurredImage = blurPixels(backgroundImageData, 5, imageWidth, imageHeight);
+
+    const mask: Float32Array =
+      result?.confidenceMasks?.[0].getAsFloat32Array() ?? new Float32Array(imageWidth * imageHeight);
+
+    let j = 0;
+    if (originalImage === undefined) {
+      return;
+    }
+    for (let i = 0; i < mask.length; ++i) {
+      //black mask
+      originalImage[j] = mask[i] <= 0.5 ? originalImage[j] : 50;
+      originalImage[j + 1] = mask[i + 1] <= 0.5 ? originalImage[j + 1] : 50;
+      originalImage[j + 2] = mask[i + 2] <= 0.5 ? originalImage[j + 2] : 50;
+      j += 4;
+    }
+
+    const uint8Array = new Uint8ClampedArray(originalImage.buffer);
+    const dataNew = new ImageData(uint8Array, imageWidth, imageHeight);
+
+    ctx?.putImageData(dataNew, 0, 0);
+
+    window.requestAnimationFrame(predictWebcam);
+  }
+
+  let imageSegmenter: ImageSegmenter | undefined;
+
+  const createImageSegmenter = async () => {
+    try {
+      const video = await FilesetResolver.forVisionTasks('/min/vision-wasm');
+
+      imageSegmenter = await ImageSegmenter.createFromOptions(video, {
+        baseOptions: {
+          modelAssetPath: '/models/selfie_multiclass_256x256.tflite',
+          delegate: 'GPU',
+        },
+        runningMode: 'VIDEO',
+        outputCategoryMask: false,
+        outputConfidenceMasks: true,
+      });
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  async function predictWebcam() {
+    if (ctx === null || videoElement === null) {
+      throw new Error('No video stream provided');
+    }
+    let lastWebcamTime = -1;
+    if (videoElement.currentTime === lastWebcamTime) {
+      window.requestAnimationFrame(predictWebcam);
+      return;
+    }
+
+    lastWebcamTime = videoElement.currentTime;
+    ctx.drawImage(videoElement, 0, 0, imageWidth, imageHeight);
+    // Do not segmented if imageSegmenter.current hasn't loaded
+    if (imageSegmenter === undefined) {
+      throw new Error('Image segmenter not loaded');
+    }
+    const startTimeMs = performance.now();
+
+    // Start segmenting the stream.
+    imageSegmenter.segmentForVideo(videoElement, startTimeMs, callbackForVideo);
+  }
+
+  await createImageSegmenter();
+  await predictWebcam();
+  return canvasEl.captureStream(30);
+}
diff --git a/yarn.lock b/yarn.lock
index 642c1393283..fd4ee6bd853 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3380,6 +3380,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@mediapipe/tasks-vision@npm:^0.10.12":
+  version: 0.10.12
+  resolution: "@mediapipe/tasks-vision@npm:0.10.12"
+  checksum: cc18aa6be2e6dddf9e60a12f5e2aade30a0711a9827372a47bcf1c5c89df672bca7aa59954e7d482b73028818ee3d57e5c7a254440f05c930893532974fcc587
+  languageName: node
+  linkType: hard
+
 "@nodelib/fs.scandir@npm:2.1.5":
   version: 2.1.5
   resolution: "@nodelib/fs.scandir@npm:2.1.5"
@@ -17380,6 +17387,7 @@ __metadata:
     "@koush/wrtc": 0.5.3
     "@lexical/history": 0.13.1
     "@lexical/react": 0.13.1
+    "@mediapipe/tasks-vision": ^0.10.12
     "@testing-library/react": 14.2.1
     "@types/dexie-batch": 0.4.7
     "@types/eslint": 8.56.5