diff --git a/src/components/App.jsx b/src/components/App.jsx
index 2231b11..05df8b6 100644
--- a/src/components/App.jsx
+++ b/src/components/App.jsx
@@ -19,10 +19,9 @@ import WindowManager from './WindowManager';
 
 const iconContextValue = { style: { verticalAlign: 'middle' } };
 
-const App = () => (
-  <div>
+const App = ({ store }) => (
+  <Provider store={store}>
     <Style />
-    <div id="outstreamContainer" />
     <IconContext.Provider value={iconContextValue}>
       <CanvasSwitchButton />
       <Menu />
@@ -33,16 +32,12 @@ const App = () => (
       <UI />
       <WindowManager />
     </IconContext.Provider>
-  </div>
+  </Provider>
 );
 
 function renderApp(domParent, store) {
   const root = createRoot(domParent);
-  root.render(
-    <Provider store={store}>
-      <App />
-    </Provider>,
-  );
+  root.render(<App store={store} />);
 }
 
 export default renderApp;
diff --git a/src/components/AppWin.jsx b/src/components/AppWin.jsx
new file mode 100644
index 0000000..7cd6f7b
--- /dev/null
+++ b/src/components/AppWin.jsx
@@ -0,0 +1,29 @@
+/**
+ * Main App
+ */
+
+import React from 'react';
+import { Provider } from 'react-redux';
+import { createRoot } from 'react-dom/client';
+import { IconContext } from 'react-icons';
+
+import Style from './Style';
+import UIWin from './UIWin';
+
+const iconContextValue = { style: { verticalAlign: 'middle' } };
+
+const AppWin = ({ store }) => (
+  <Provider store={store}>
+    <Style />
+    <IconContext.Provider value={iconContextValue}>
+      <UIWin />
+    </IconContext.Provider>
+  </Provider>
+);
+
+function renderAppWin(domParent, store) {
+  const root = createRoot(domParent);
+  root.render(<AppWin store={store} />);
+}
+
+export default renderAppWin;
diff --git a/src/components/UIWin.jsx b/src/components/UIWin.jsx
new file mode 100644
index 0000000..dc1c5d4
--- /dev/null
+++ b/src/components/UIWin.jsx
@@ -0,0 +1,25 @@
+/*
+ *
+ */
+
+import React from 'react';
+import { useSelector } from 'react-redux';
+
+import { selectWindowType } from '../store/selectors/win';
+import COMPONENTS from './windows';
+
+const UIWin = () => {
+  const windowType = useSelector(selectWindowType);
+
+  const [Content, name] = COMPONENTS[windowType];
+
+  return (
+    <>
+      {(windowType)
+        ? <Content />
+        : <h1>Loading</h1>}
+    </>
+  );
+};
+
+export default React.memo(UIWin);
diff --git a/src/ssr/Win.jsx b/src/ssr/Win.jsx
index 48b5e4f..18fbf5d 100644
--- a/src/ssr/Win.jsx
+++ b/src/ssr/Win.jsx
@@ -5,18 +5,42 @@
 
 /* eslint-disable max-len */
 
-import { getTTag } from '../core/ttag';
+import { langCodeToCC } from '../utils/location';
+import ttags, { getTTag } from '../core/ttag';
 
 /* this will be set by webpack */
-import { assets } from '../core/assets';
-import { ASSET_SERVER } from '../core/config';
+import { styleassets, assets } from '../core/assets';
+import { ASSET_SERVER, BACKUP_URL } from '../core/config';
 
 /*
- * generates string with html of globe page
+ * generate language list
+ */
+const langs = Object.keys(ttags)
+  .map((l) => (l === 'default' ? 'en' : l))
+  .map((l) => [l, langCodeToCC(l)]);
+
+/*
+ * values that we pass to client scripts
+ */
+const ssv = {
+  assetserver: ASSET_SERVER,
+  availableStyles: styleassets,
+  langs,
+};
+if (BACKUP_URL) {
+  ssv.backupurl = BACKUP_URL;
+}
+
+/*
+ * generates string with html of win page
  * @param lang language code
  * @return html of mainpage
  */
 function generateWinPage(lang) {
+  const ssvR = {
+    ...ssv,
+    lang: lang === 'default' ? 'en' : lang,
+  };
   const script = (assets[`win-${lang}`])
     ? assets[`win-${lang}`].js
     : assets.win.js;
@@ -37,8 +61,12 @@ function generateWinPage(lang) {
         />
         <link rel="icon" href="/favicon.ico" type="image/x-icon" />
         <link rel="apple-touch-icon" href="apple-touch-icon.png" />
+        <script>window.ssv=JSON.parse('${JSON.stringify(ssvR)}')</script>
+        <link rel="stylesheet" type="text/css" id="globcss" href="${styleassets.default}" />
       </head>
       <body>
+        <div id="app">
+        </div>
         <script src="${ASSET_SERVER + script}"></script>
       </body>
     </html>
diff --git a/src/store/configureWinStore.js b/src/store/configureStoreWin.js
similarity index 95%
rename from src/store/configureWinStore.js
rename to src/store/configureStoreWin.js
index 682fc8e..4aff44b 100644
--- a/src/store/configureWinStore.js
+++ b/src/store/configureStoreWin.js
@@ -17,6 +17,7 @@ import storage from 'redux-persist/lib/storage';
 import audio from './reducers/audio';
 import canvas from './reducers/canvas';
 import gui from './reducers/gui';
+import win from './reducers/win';
 
 /*
  * middleware
@@ -40,11 +41,13 @@ const reducers = persistReducer({
   },
   blacklist: [
     'canvas',
+    'win',
   ],
 }, combineReducers({
   audio,
   canvas,
   gui,
+  win,
 }));
 
 const store = createStore(
diff --git a/src/store/reducers/win.js b/src/store/reducers/win.js
new file mode 100644
index 0000000..48473bf
--- /dev/null
+++ b/src/store/reducers/win.js
@@ -0,0 +1,20 @@
+/*
+ * state for single-window page (popup)
+ */
+
+const initialState = {
+  // windowType: null,
+  windowType: 'SETTINGS',
+  title: '',
+  args: {},
+};
+
+export default function win(
+  state = initialState,
+  action,
+) {
+  switch (action.type) {
+    default:
+      return state;
+  }
+}
diff --git a/src/store/selectors/win.js b/src/store/selectors/win.js
new file mode 100644
index 0000000..b41b7dc
--- /dev/null
+++ b/src/store/selectors/win.js
@@ -0,0 +1,5 @@
+/*
+ * selectors for single window / popup
+ */
+
+export const selectWindowType = (state) => state.win.windowType;
diff --git a/src/styles/default.css b/src/styles/default.css
index db60048..62ffd70 100644
--- a/src/styles/default.css
+++ b/src/styles/default.css
@@ -684,6 +684,10 @@ tr:nth-child(even) {
     width: 100%;
     padding: 0;
   }
+
+  .overlay {
+    display: none;
+  }
 }
 
 .overlay {
@@ -980,19 +984,6 @@ table td span {
   transform: scale(1.10,1.10); /* Standard syntax */
 }
 
-#outstreamContainer {
-  position: fixed;
-  display: none;
-  width: 100%;
-  height: 100%;
-  top: 0px;
-  left: 0px;
-  right: 0px;
-  bottom: 0px;
-  background-color: black;
-  z-index: 9000;
-}
-
 .grecaptcha-badge {
   visibility: hidden;
 }
diff --git a/src/styles/theme-dark-round.css b/src/styles/theme-dark-round.css
index 9aac007..424ee8f 100644
--- a/src/styles/theme-dark-round.css
+++ b/src/styles/theme-dark-round.css
@@ -172,7 +172,3 @@ h3, h4 {
 .actionbuttons:hover, .coorbox:hover, .menu > div:hover {
   background-color: #363637;
 }
-
-#outstreamContainer {
-  background-color: black;
-}
diff --git a/src/styles/theme-dark-sstraight.css b/src/styles/theme-dark-sstraight.css
index f787aa7..8cb2650 100644
--- a/src/styles/theme-dark-sstraight.css
+++ b/src/styles/theme-dark-sstraight.css
@@ -177,7 +177,3 @@ h3, h4 {
 .actionbuttons:hover, .coorbox:hover, .menu > div:hover {
   background-color: rgba(71, 71, 71, 0.8);
 }
-
-#outstreamContainer {
-  background-color: black;
-}
diff --git a/src/styles/theme-dark.css b/src/styles/theme-dark.css
index 0c3c2c5..88cb09a 100644
--- a/src/styles/theme-dark.css
+++ b/src/styles/theme-dark.css
@@ -157,7 +157,3 @@ h3, h4 {
 .actionbuttons:hover, .coorbox:hover, .menu > div:hover {
   background-color: #363637;
 }
-
-#outstreamContainer {
-  background-color: black;
-}
diff --git a/src/win.js b/src/win.js
index 21c268f..fac4b6c 100644
--- a/src/win.js
+++ b/src/win.js
@@ -2,9 +2,12 @@
  * Main Script for windows (pop-ups and stuff)
  */
 
-import store from './store/configureWinStore';
+import store from './store/configureStoreWin';
+
+import renderAppWin from './components/AppWin';
 
 document.addEventListener('DOMContentLoaded', () => {
   // eslint-disable-next-line no-console
   console.log('hello');
+  renderAppWin(document.getElementById('app'), store);
 });
