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 03e13d718..e4c0fe3f5 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
@@ -6,8 +6,10 @@ import {
     TabPanels,
     Tabs,
 } from '~/bundles/common/components/components.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 { backgroundColors, backgroundImages } from '../../mock/bg-mock.js';
 import { ColorCard, ImageCard } from './components/components.js';
 
 const BackgroundsContent: React.FC = () => {
diff --git a/frontend/src/bundles/studio/components/video-menu/components/mock/bg-mock.ts b/frontend/src/bundles/studio/components/video-menu/components/mock/bg-mock.ts
deleted file mode 100644
index 30ea5693a..000000000
--- a/frontend/src/bundles/studio/components/video-menu/components/mock/bg-mock.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-const backgroundImages = [
-    'https://plus.unsplash.com/premium_photo-1683141170332-d7529337265c?fm=jpg&q=60&w=3000&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8b2ZmaWNlJTIwd2FsbHxlbnwwfHwwfHx8MA%3D%3D',
-    'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?fm=jpg&q=60&w=3000&ixlib=rb-4.0.3',
-    'https://images.inc.com/uploaded_files/image/1920x1080/getty_515240506_255906.jpg',
-    'https://www.shutterstock.com/image-photo/new-york-city-us-dec-600nw-2402660001.jpg',
-    'https://t3.ftcdn.net/jpg/06/35/00/52/360_F_635005270_1H64mK3INWWYK99FCIL2yWbsd8s4iloa.jpg',
-    'https://plus.unsplash.com/premium_photo-1677567996070-68fa4181775a?fm=jpg&q=60&w=3000&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8bGlicmFyeSUyMGJhY2tncm91bmR8ZW58MHx8MHx8fDA%3D',
-    'https://www.shutterstock.com/image-photo/new-york-city-us-dec-600nw-2402660001.jpg',
-    'https://t3.ftcdn.net/jpg/06/35/00/52/360_F_635005270_1H64mK3INWWYK99FCIL2yWbsd8s4iloa.jpg',
-    'https://plus.unsplash.com/premium_photo-1677567996070-68fa4181775a?fm=jpg&q=60&w=3000&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8bGlicmFyeSUyMGJhY2tncm91bmR8ZW58MHx8MHx8fDA%3D',
-];
-
-const backgroundColors = [
-    '#FFE9D0',
-    '#FFFED3',
-    '#BBE9FF',
-    '#B1AFFF',
-    '#91DDCF',
-    '#F7F9F2',
-    '#E8C5E5',
-    '#F19ED2',
-];
-
-export { backgroundColors, backgroundImages };
diff --git a/frontend/src/bundles/studio/data/bg-colors.json b/frontend/src/bundles/studio/data/bg-colors.json
new file mode 100644
index 000000000..9f4b1a666
--- /dev/null
+++ b/frontend/src/bundles/studio/data/bg-colors.json
@@ -0,0 +1,10 @@
+[
+    "#FFE9D0",
+    "#FFFED3",
+    "#BBE9FF",
+    "#B1AFFF",
+    "#91DDCF",
+    "#F7F9F2",
+    "#E8C5E5",
+    "#F19ED2"
+]
diff --git a/frontend/src/bundles/studio/data/bg-images.json b/frontend/src/bundles/studio/data/bg-images.json
new file mode 100644
index 000000000..3f6ab14cd
--- /dev/null
+++ b/frontend/src/bundles/studio/data/bg-images.json
@@ -0,0 +1,8 @@
+[
+    "https://d2tm5q3cg1nlwf.cloudfront.net/city.webp",
+    "https://d2tm5q3cg1nlwf.cloudfront.net/wall_2.jfif",
+    "https://d2tm5q3cg1nlwf.cloudfront.net/wall.jpg",
+    "https://d2tm5q3cg1nlwf.cloudfront.net/sea.jfif",
+    "https://d2tm5q3cg1nlwf.cloudfront.net/school.jpg",
+    "https://d2tm5q3cg1nlwf.cloudfront.net/library.jfif"
+]