diff --git a/frontend/src/bundles/home/components/main-content/main-content.tsx b/frontend/src/bundles/home/components/main-content/main-content.tsx
index be7728d08..71402f8f0 100644
--- a/frontend/src/bundles/home/components/main-content/main-content.tsx
+++ b/frontend/src/bundles/home/components/main-content/main-content.tsx
@@ -12,6 +12,7 @@ import {
 import { actions as homeActions } from '~/bundles/home/store/home.js';
 
 import { VideoSection } from '../components.js';
+import styles from './styles.module.css';
 
 const MainContent: React.FC = () => {
     const dispatch = useAppDispatch();
@@ -25,7 +26,7 @@ const MainContent: React.FC = () => {
     }, [dispatch]);
 
     return (
-        <Box bg="background.50" borderRadius="lg">
+        <Box className={styles['main-content']}>
             <Overlay isOpen={dataStatus === DataStatus.PENDING}>
                 <Loader />
             </Overlay>
diff --git a/frontend/src/bundles/home/components/main-content/styles.module.css b/frontend/src/bundles/home/components/main-content/styles.module.css
new file mode 100644
index 000000000..c0d57c638
--- /dev/null
+++ b/frontend/src/bundles/home/components/main-content/styles.module.css
@@ -0,0 +1,6 @@
+.main-content {
+    background-color: var(--chakra-colors-background-50);
+    border-radius: var(--chakra-radii-lg);
+    height: calc(100vh - 75px);
+    overflow: auto;
+}