diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx
index 8e1d8450..b5396a49 100644
--- a/src/renderer/App.tsx
+++ b/src/renderer/App.tsx
@@ -5,6 +5,7 @@ import { AvailableVersionsList } from "./pages/available-versions-list.component
 import { useDispatch, useSelector } from "react-redux";
 import { useEffect } from "react";
 import { VersionViewer } from "./pages/version-viewer.component";
+import { Modal } from "./components/modal/modal.component";
 
 export default function App() {
 
@@ -24,11 +25,12 @@ export default function App() {
   
 
   return (
-    <div className="w-screen h-screen overflow-hidden flex dark:bg-[#202225] z-0">
+    <div className="relative w-screen h-screen overflow-hidden flex dark:bg-main-color-1 z-0">
+      <Modal/>
       <NavBar/>
       <div className="flex flex-col grow">
         <TitleBar/>
-        <div className="bg-[#2C2F33] relative rounded-tl-lg grow overflow-hidden">
+        <div className="bg-main-color-2 relative rounded-tl-lg grow overflow-hidden">
           <Routes>
             <Route path={"/bs-version/:versionNumber"} element={<VersionViewer/>}/>
             <Route path="*" element={<AvailableVersionsList/>}/>