diff --git a/src/App.tsx b/src/App.tsx
index 6e8c7fc..12cdd3f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,11 +1,17 @@
 import React from 'react';
 import '../src/styles/App.scss';
 import Router from "./config/Router";
+import ThemeContextProvider, {useTheme} from "./utils/contexts/ThemeContext";
 
 function App() {
-  return (
-    <Router/>
-  );
+
+    const {isDarkMode} = useTheme();
+
+    return (
+        <div className={`app ${isDarkMode ? 'dark' : 'light'}`}>
+            <Router/>
+        </div>
+    );
 }
 
 export default App;
diff --git a/src/index.tsx b/src/index.tsx
index d77cdf9..be8d0d4 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,12 +1,15 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
+import ThemeContextProvider from "./utils/contexts/ThemeContext";
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );
 root.render(
   <React.StrictMode>
-    <App />
+      <ThemeContextProvider>
+          <App />
+      </ThemeContextProvider>
   </React.StrictMode>
 );
\ No newline at end of file
diff --git a/src/layout/pages/MainLobby.tsx b/src/layout/pages/MainLobby.tsx
index 73e7bf4..cf73293 100644
--- a/src/layout/pages/MainLobby.tsx
+++ b/src/layout/pages/MainLobby.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import useTitle from "../../utils/hooks/TitleHook";
 import Card from "../components/Card";
+import {useTheme} from "../../utils/contexts/ThemeContext";
 
 const ROOM_URL = `http://${process.env.REACT_APP_API_URL}/room`;
 
@@ -26,11 +27,11 @@ const MainLobby = () => {
             <div className={"main-lobby__container"}>
                 <div className={"main-lobby__container-button clickable"} onClick={handleCreateRoom}>
                     <h2 className={"mau"}>Host Game</h2>
-                    <Card cardString={'SPADES ACE'} isClickable />
+                    <Card cardString={'SPADES ACE'} isClickable/>
                 </div>
                 <div className={"main-lobby__container-button clickable"} onClick={gotoRooms}>
                     <h2 className={"mau"}>Join Game</h2>
-                    <Card cardString={'SPADES ACE'} isHidden isClickable />
+                    <Card cardString={'SPADES ACE'} isHidden isClickable/>
                 </div>
             </div>
         </div>
diff --git a/src/styles/App.scss b/src/styles/App.scss
index d01a534..9bd1017 100644
--- a/src/styles/App.scss
+++ b/src/styles/App.scss
@@ -7,6 +7,11 @@
   src: local('Mau'), url(../assets/fonts/OrientalCatsLight.otf) format('opentype');
 }
 
+.app {
+  width: 100vw;
+  height: 100vh;
+}
+
 .mau {
   font-family: "Mau", serif;
 }
\ No newline at end of file
diff --git a/src/styles/utils/_utils.scss b/src/styles/utils/_utils.scss
index 04972e8..647d032 100644
--- a/src/styles/utils/_utils.scss
+++ b/src/styles/utils/_utils.scss
@@ -1 +1,2 @@
-@import "pointer";
\ No newline at end of file
+@import "pointer";
+@import "theme";
\ No newline at end of file
diff --git a/src/styles/utils/theme.scss b/src/styles/utils/theme.scss
new file mode 100644
index 0000000..8895a7e
--- /dev/null
+++ b/src/styles/utils/theme.scss
@@ -0,0 +1,8 @@
+.dark {
+  background-color: #333;
+  color: #fff;
+}
+.light {
+  background-color: #fff;
+  color: #333;
+}
\ No newline at end of file
diff --git a/src/utils/contexts/ThemeContext.tsx b/src/utils/contexts/ThemeContext.tsx
index 2653ad6..92b3388 100644
--- a/src/utils/contexts/ThemeContext.tsx
+++ b/src/utils/contexts/ThemeContext.tsx
@@ -23,4 +23,6 @@ const ThemeContextProvider = ({children}: any) => {
             {children}
         </ThemeContext.Provider>
     );
-};
\ No newline at end of file
+};
+
+export default ThemeContextProvider;
\ No newline at end of file