diff --git a/frontend/src/bundles/studio/components/video-menu/components/menu-content/backgrounds-content/backgrounds-content.tsx b/frontend/src/bundles/studio/components/video-menu/components/menu-content/backgrounds-content/backgrounds-content.tsx
index e4c0fe3f5..b0cc6af44 100644
--- a/frontend/src/bundles/studio/components/video-menu/components/menu-content/backgrounds-content/backgrounds-content.tsx
+++ b/frontend/src/bundles/studio/components/video-menu/components/menu-content/backgrounds-content/backgrounds-content.tsx
@@ -1,18 +1,28 @@
 import {
+    Flex,
     SimpleGrid,
     Tab,
     TabList,
     TabPanel,
     TabPanels,
     Tabs,
+    Text,
 } from '~/bundles/common/components/components.js';
+import { useAppDispatch, useCallback } from '~/bundles/common/hooks/hooks.js';
 // TODO: Make endpoint for this
 import backgroundColors from '~/bundles/studio/data/bg-colors.json';
 import backgroundImages from '~/bundles/studio/data/bg-images.json';
+import { actions as studioActions } from '~/bundles/studio/store/studio.js';
 
 import { ColorCard, ImageCard } from './components/components.js';
+import styles from './styles.module.css';
 
 const BackgroundsContent: React.FC = () => {
+    const dispatch = useAppDispatch();
+    const handleRemoveBackground = useCallback((): void => {
+        dispatch(studioActions.removeBackgroundFromScene());
+    }, [dispatch]);
+
     return (
         <>
             <Tabs>
@@ -24,6 +34,14 @@ const BackgroundsContent: React.FC = () => {
                 <TabPanels>
                     <TabPanel>
                         <SimpleGrid columns={2} spacingX="13px" spacingY="10px">
+                            <Flex
+                                className={styles['none-item']}
+                                height="100px"
+                                onClick={handleRemoveBackground}
+                            >
+                                <Text variant="body1">None</Text>
+                            </Flex>
+
                             {backgroundImages.map((imageSource, index) => (
                                 <ImageCard
                                     key={index}
@@ -34,6 +52,14 @@ const BackgroundsContent: React.FC = () => {
                     </TabPanel>
                     <TabPanel>
                         <SimpleGrid columns={3} spacingX="13px" spacingY="10px">
+                            <Flex
+                                className={styles['none-item']}
+                                height="80px"
+                                onClick={handleRemoveBackground}
+                            >
+                                <Text variant="body1">None</Text>
+                            </Flex>
+
                             {backgroundColors.map((color, index) => (
                                 <ColorCard key={index} color={color} />
                             ))}
diff --git a/frontend/src/bundles/studio/components/video-menu/components/menu-content/backgrounds-content/components/color-card.tsx b/frontend/src/bundles/studio/components/video-menu/components/menu-content/backgrounds-content/components/color-card.tsx
index 5ceaabb4a..f1680fef2 100644
--- a/frontend/src/bundles/studio/components/video-menu/components/menu-content/backgrounds-content/components/color-card.tsx
+++ b/frontend/src/bundles/studio/components/video-menu/components/menu-content/backgrounds-content/components/color-card.tsx
@@ -2,6 +2,8 @@ import { Box } from '~/bundles/common/components/components.js';
 import { useAppDispatch, useCallback } from '~/bundles/common/hooks/hooks.js';
 import { actions as studioActions } from '~/bundles/studio/store/studio.js';
 
+import styles from './styles.module.css';
+
 type Properties = {
     color: string;
 };
@@ -20,8 +22,8 @@ const ColorCard: React.FC<Properties> = ({ color }) => {
 
     return (
         <Box
+            className={styles['color-item']}
             backgroundColor={color}
-            height="80px"
             onClick={handleColorClick}
         ></Box>
     );
diff --git a/frontend/src/bundles/studio/components/video-menu/components/menu-content/backgrounds-content/components/styles.module.css b/frontend/src/bundles/studio/components/video-menu/components/menu-content/backgrounds-content/components/styles.module.css
index 4416b5f25..add5f9567 100644
--- a/frontend/src/bundles/studio/components/video-menu/components/menu-content/backgrounds-content/components/styles.module.css
+++ b/frontend/src/bundles/studio/components/video-menu/components/menu-content/backgrounds-content/components/styles.module.css
@@ -7,8 +7,21 @@
     transition: all 0.3s ease;
 }
 
+.color-item {
+    border-radius: 7px;
+    height: 80px;
+    border-width: 1px;
+    border-color: transparent;
+    transition: all 0.3s ease;
+}
+
 .image-item:hover {
     background-color: var(--chakra-colors-background-600);
     border-color: var(--chakra-colors-brand-secondary-300);
-    cursor: 'pointer';
+    cursor: pointer;
+}
+
+.color-item:hover {
+    border-color: var(--chakra-colors-brand-secondary-300);
+    cursor: pointer;
 }
diff --git a/frontend/src/bundles/studio/components/video-menu/components/menu-content/backgrounds-content/styles.module.css b/frontend/src/bundles/studio/components/video-menu/components/menu-content/backgrounds-content/styles.module.css
new file mode 100644
index 000000000..d20a3d960
--- /dev/null
+++ b/frontend/src/bundles/studio/components/video-menu/components/menu-content/backgrounds-content/styles.module.css
@@ -0,0 +1,15 @@
+.none-item {
+    background-color: var(--chakra-colors-background-700);
+    border-radius: 7px;
+    border-width: 1px;
+    border-color: transparent;
+    transition: all 0.3s ease;
+    align-items: center;
+    justify-content: center;
+}
+
+.none-item:hover {
+    background-color: var(--chakra-colors-background-600);
+    border-color: var(--chakra-colors-brand-secondary-300);
+    cursor: pointer;
+}
diff --git a/frontend/src/bundles/studio/store/slice.ts b/frontend/src/bundles/studio/store/slice.ts
index 8755b58fe..3df0969a1 100644
--- a/frontend/src/bundles/studio/store/slice.ts
+++ b/frontend/src/bundles/studio/store/slice.ts
@@ -346,6 +346,23 @@ const { reducer, actions, name } = createSlice({
                 };
             });
         },
+        removeBackgroundFromScene(state) {
+            const selectedItem = state.ui.selectedItem;
+            if (!selectedItem || selectedItem.type !== RowNames.SCENE) {
+                return;
+            }
+
+            state.scenes = state.scenes.map((scene) => {
+                if (scene.id !== selectedItem.id) {
+                    return scene;
+                }
+
+                return {
+                    ...scene,
+                    background: {},
+                };
+            });
+        },
         setMenuActiveItem(
             state,
             action: PayloadAction<ValueOf<typeof MenuItems> | null>,