diff --git a/i18n/template-ssr.pot b/i18n/template-ssr.pot
index bc36c78..e4d1a92 100644
--- a/i18n/template-ssr.pot
+++ b/i18n/template-ssr.pot
@@ -95,38 +95,38 @@ msgid ""
 "one (Note: you can use those links just once)"
 msgstr ""
 
-#: src/ssr/Win.jsx:32
+#: src/ssr/Win.jsx:31
 msgid "PixelPlanet.Fun Window"
 msgstr ""
 
-#: src/ssr/Win.jsx:33
+#: src/ssr/Win.jsx:32
 msgid "PixelPlanet.Fun Windows"
 msgstr ""
 
-#: src/ssr/Main.jsx:58
-msgid "PixelPlanet.Fun"
-msgstr ""
-
-#: src/ssr/Main.jsx:59
-msgid "Place color pixels on an map styled canvas with other players online"
-msgstr ""
-
-#: src/ssr/Globe.jsx:34
+#: src/ssr/Globe.jsx:33
 msgid "PixelPlanet.Fun 3DGlobe"
 msgstr ""
 
-#: src/ssr/Globe.jsx:35
+#: src/ssr/Globe.jsx:34
 msgid "A 3D globe of our whole map"
 msgstr ""
 
-#: src/ssr/Globe.jsx:48
+#: src/ssr/Globe.jsx:47
 msgid "Double click on globe to go back."
 msgstr ""
 
-#: src/ssr/Globe.jsx:49
+#: src/ssr/Globe.jsx:48
 msgid "Loading..."
 msgstr ""
 
+#: src/ssr/Main.jsx:54
+msgid "PixelPlanet.Fun"
+msgstr ""
+
+#: src/ssr/Main.jsx:55
+msgid "Place color pixels on an map styled canvas with other players online"
+msgstr ""
+
 #: src/core/mail.js:71
 #, javascript-format
 msgid ""
@@ -271,6 +271,22 @@ msgstr ""
 msgid "Server error occured"
 msgstr ""
 
+#: src/routes/api/modtools.js:53
+msgid "You are not logged in"
+msgstr ""
+
+#: src/routes/api/modtools.js:65
+msgid "You are not allowed to access this page"
+msgstr ""
+
+#: src/routes/api/modtools.js:207
+msgid "Just admins can do that"
+msgstr ""
+
+#: src/routes/api/baninfo.js:24
+msgid "You are not banned"
+msgstr ""
+
 #: src/utils/validation.js:17
 msgid "Email can't be empty."
 msgstr ""
@@ -319,22 +335,6 @@ msgstr ""
 msgid "Password must be shorter than 60 characters."
 msgstr ""
 
-#: src/routes/api/modtools.js:53
-msgid "You are not logged in"
-msgstr ""
-
-#: src/routes/api/modtools.js:65
-msgid "You are not allowed to access this page"
-msgstr ""
-
-#: src/routes/api/modtools.js:207
-msgid "Just admins can do that"
-msgstr ""
-
-#: src/routes/api/baninfo.js:24
-msgid "You are not banned"
-msgstr ""
-
 #: src/routes/api/auth/register.js:26
 msgid "No Captcha given"
 msgstr ""
@@ -355,27 +355,6 @@ msgstr ""
 msgid "Failed to establish session after register :("
 msgstr ""
 
-#: src/routes/api/auth/change_mail.js:38
-#: src/routes/api/auth/change_passwd.js:34
-#: src/routes/api/auth/delete_account.js:34
-msgid "You are not authenticated."
-msgstr ""
-
-#: src/routes/api/auth/change_mail.js:47
-#: src/routes/api/auth/change_passwd.js:43
-#: src/routes/api/auth/delete_account.js:44
-msgid "Incorrect password!"
-msgstr ""
-
-#: src/routes/api/auth/logout.js:11
-msgid "You are not even logged in."
-msgstr ""
-
-#: src/routes/api/auth/delete_account.js:54
-#: src/routes/api/auth/logout.js:20
-msgid "Server error when logging out."
-msgstr ""
-
 #: src/routes/api/auth/verify.js:22
 #: src/routes/api/auth/verify.js:29
 msgid "Mail verification"
@@ -391,6 +370,27 @@ msgid ""
 "request a new one."
 msgstr ""
 
+#: src/routes/api/auth/logout.js:11
+msgid "You are not even logged in."
+msgstr ""
+
+#: src/routes/api/auth/delete_account.js:54
+#: src/routes/api/auth/logout.js:20
+msgid "Server error when logging out."
+msgstr ""
+
+#: src/routes/api/auth/change_mail.js:38
+#: src/routes/api/auth/change_passwd.js:34
+#: src/routes/api/auth/delete_account.js:34
+msgid "You are not authenticated."
+msgstr ""
+
+#: src/routes/api/auth/change_mail.js:47
+#: src/routes/api/auth/change_passwd.js:43
+#: src/routes/api/auth/delete_account.js:44
+msgid "Incorrect password!"
+msgstr ""
+
 #: src/ssr/RedirectionPage.jsx:19
 msgid "PixelPlanet.fun Accounts"
 msgstr ""
@@ -404,69 +404,69 @@ msgstr ""
 msgid "Or ${ clickHere } to go back to pixelplanet"
 msgstr ""
 
-#: src/canvasesDesc.js:18
+#: src/canvasesDesc.js:19
 msgid "Earth"
 msgstr ""
 
-#: src/canvasesDesc.js:19
+#: src/canvasesDesc.js:20
 msgid "Moon"
 msgstr ""
 
-#: src/canvasesDesc.js:20
+#: src/canvasesDesc.js:21
 msgid "3D Canvas"
 msgstr ""
 
-#: src/canvasesDesc.js:21
+#: src/canvasesDesc.js:22
 msgid "Coronavirus"
 msgstr ""
 
-#: src/canvasesDesc.js:22
+#: src/canvasesDesc.js:23
 msgid "PixelZone"
 msgstr ""
 
-#: src/canvasesDesc.js:23
+#: src/canvasesDesc.js:24
 msgid "PixelCanvas"
 msgstr ""
 
-#: src/canvasesDesc.js:24
+#: src/canvasesDesc.js:25
 msgid "1bit"
 msgstr ""
 
-#: src/canvasesDesc.js:25
+#: src/canvasesDesc.js:26
 msgid "Top10"
 msgstr ""
 
-#: src/canvasesDesc.js:28
+#: src/canvasesDesc.js:29
 msgid "Our main canvas, a huge map of the world. Place everywhere you like"
 msgstr ""
 
-#: src/canvasesDesc.js:29
+#: src/canvasesDesc.js:30
 msgid ""
 "Moon canvas. Safe space for art. No flags or large text (unless part of "
 "art) or art larger than 1.5k x 1.5k pixels."
 msgstr ""
 
-#: src/canvasesDesc.js:30
+#: src/canvasesDesc.js:31
 msgid "Place Voxels on a 3D canvas with others"
 msgstr ""
 
-#: src/canvasesDesc.js:31
+#: src/canvasesDesc.js:32
 msgid "Special canvas to spread awareness of SARS-CoV2"
 msgstr ""
 
-#: src/canvasesDesc.js:32
+#: src/canvasesDesc.js:33
 msgid "Mirror of PixelZone"
 msgstr ""
 
-#: src/canvasesDesc.js:33
+#: src/canvasesDesc.js:34
 msgid "Mirror of PixelCanvas"
 msgstr ""
 
-#: src/canvasesDesc.js:34
+#: src/canvasesDesc.js:35
 msgid "Black and White canvas"
 msgstr ""
 
-#: src/canvasesDesc.js:35
+#: src/canvasesDesc.js:36
 msgid ""
 "A canvas for the most active players from the the previous day. Daily "
 "ranking updates at 00:00 UTC."
diff --git a/i18n/template.pot b/i18n/template.pot
index 8e26a54..f511d0b 100644
--- a/i18n/template.pot
+++ b/i18n/template.pot
@@ -54,109 +54,109 @@ msgstr ""
 msgid "Didn't get an answer from pixelplanet. Maybe try to refresh?"
 msgstr ""
 
-#: src/ui/placePixel.js:203
+#: src/ui/placePixel.js:202
 msgid "Invalid Canvas"
 msgstr ""
 
-#: src/ui/placePixel.js:204
+#: src/ui/placePixel.js:203
 msgid "This canvas doesn't exist"
 msgstr ""
 
-#: src/ui/placePixel.js:207
-#: src/ui/placePixel.js:211
-#: src/ui/placePixel.js:215
+#: src/ui/placePixel.js:206
+#: src/ui/placePixel.js:210
+#: src/ui/placePixel.js:214
 msgid "Invalid Coordinates"
 msgstr ""
 
-#: src/ui/placePixel.js:208
+#: src/ui/placePixel.js:207
 msgid "x out of bounds"
 msgstr ""
 
-#: src/ui/placePixel.js:212
+#: src/ui/placePixel.js:211
 msgid "y out of bounds"
 msgstr ""
 
-#: src/ui/placePixel.js:216
+#: src/ui/placePixel.js:215
 msgid "z out of bounds"
 msgstr ""
 
-#: src/ui/placePixel.js:219
+#: src/ui/placePixel.js:218
 msgid "Wrong Color"
 msgstr ""
 
-#: src/ui/placePixel.js:220
+#: src/ui/placePixel.js:219
 msgid "Invalid color selected"
 msgstr ""
 
-#: src/ui/placePixel.js:223
+#: src/ui/placePixel.js:222
 msgid "Just for registered Users"
 msgstr ""
 
-#: src/ui/placePixel.js:224
+#: src/ui/placePixel.js:223
 msgid "You have to be logged in to place on this canvas"
 msgstr ""
 
-#: src/ui/placePixel.js:227
+#: src/ui/placePixel.js:226
 msgid "Place more :)"
 msgstr ""
 
-#: src/ui/placePixel.js:229
+#: src/ui/placePixel.js:228
 msgid "You can not access this canvas yet. You need to place more pixels"
 msgstr ""
 
-#: src/ui/placePixel.js:232
+#: src/ui/placePixel.js:231
 msgid "Pixel protected!"
 msgstr ""
 
-#: src/ui/placePixel.js:239
+#: src/ui/placePixel.js:238
 msgid "Please prove that you are human"
 msgstr ""
 
-#: src/ui/placePixel.js:243
+#: src/ui/placePixel.js:242
 msgid "No Proxies Allowed :("
 msgstr ""
 
-#: src/ui/placePixel.js:244
+#: src/ui/placePixel.js:243
 msgid "You are using a Proxy."
 msgstr ""
 
-#: src/ui/placePixel.js:247
+#: src/ui/placePixel.js:246
 msgid "Not allowed"
 msgstr ""
 
-#: src/ui/placePixel.js:248
+#: src/ui/placePixel.js:247
 msgid "Just the Top10 of yesterday can place here"
 msgstr ""
 
-#: src/ui/placePixel.js:251
+#: src/ui/placePixel.js:250
 msgid "You are weird"
 msgstr ""
 
-#: src/ui/placePixel.js:253
+#: src/ui/placePixel.js:252
 msgid "Server got confused by your pixels. Are you playing on multiple devices?"
 msgstr ""
 
-#: src/ui/placePixel.js:256
+#: src/ui/placePixel.js:255
 msgid "Banned"
 msgstr ""
 
-#: src/ui/placePixel.js:260
+#: src/ui/placePixel.js:259
 msgid "Range Banned"
 msgstr ""
 
-#: src/ui/placePixel.js:261
+#: src/ui/placePixel.js:260
 msgid "Your Internet Provider is banned from playing this game"
 msgstr ""
 
-#: src/ui/placePixel.js:264
+#: src/ui/placePixel.js:263
 msgid "Weird"
 msgstr ""
 
-#: src/ui/placePixel.js:265
+#: src/ui/placePixel.js:264
 msgid "Couldn't set Pixel"
 msgstr ""
 
-#: src/ui/placePixel.js:270
+#: src/ui/placePixel.js:269
 #, javascript-format
 msgid "Error ${ retCode }"
 msgstr ""
@@ -261,11 +261,6 @@ msgstr ""
 msgid "Open Chat"
 msgstr ""
 
-#: src/components/buttons/CanvasSwitchButton.jsx:22
-#: src/components/windows/index.js:19
-msgid "Canvas Selection"
-msgstr ""
-
 #: src/components/buttons/ExpandMenuButton.jsx:22
 msgid "Close Menu"
 msgstr ""
@@ -274,6 +269,11 @@ msgstr ""
 msgid "Open Menu"
 msgstr ""
 
+#: src/components/buttons/CanvasSwitchButton.jsx:22
+#: src/components/windows/index.js:19
+msgid "Canvas Selection"
+msgstr ""
+
 #: src/components/HistorySelect.jsx:144
 msgid "Loading"
 msgstr ""
@@ -311,18 +311,6 @@ msgstr ""
 msgid "Resize"
 msgstr ""
 
-#: src/components/buttons/GlobeButton.jsx:34
-msgid "Globe View"
-msgstr ""
-
-#: src/components/buttons/PalselButton.jsx:30
-msgid "Close Palette"
-msgstr ""
-
-#: src/components/buttons/PalselButton.jsx:30
-msgid "Open Palette"
-msgstr ""
-
 #: src/components/BanInfo.jsx:76
 #: src/components/buttons/HelpButton.jsx:22
 #: src/components/windows/index.js:13
@@ -343,6 +331,18 @@ msgstr ""
 msgid "Make Screenshot"
 msgstr ""
 
+#: src/components/buttons/GlobeButton.jsx:34
+msgid "Globe View"
+msgstr ""
+
+#: src/components/buttons/PalselButton.jsx:30
+msgid "Close Palette"
+msgstr ""
+
+#: src/components/buttons/PalselButton.jsx:30
+msgid "Open Palette"
+msgstr ""
+
 #: src/components/BanInfo.jsx:81
 #: src/components/Captcha.jsx:77
 #: src/components/ChangeMail.jsx:72
@@ -477,6 +477,124 @@ msgstr ""
 msgid "Enter Characters"
 msgstr ""
 
+#: src/components/windows/Settings.jsx:86
+msgid "Show Grid"
+msgstr ""
+
+#: src/components/windows/Settings.jsx:91
+msgid "Turn on grid to highlight pixel borders."
+msgstr ""
+
+#: src/components/windows/Settings.jsx:94
+msgid "Show Pixel Activity"
+msgstr ""
+
+#: src/components/windows/Settings.jsx:99
+msgid "Show circles where pixels are placed."
+msgstr ""
+
+#: src/components/windows/Settings.jsx:102
+msgid "Disable Game Sounds"
+msgstr ""
+
+#: src/components/windows/Settings.jsx:108
+msgid "All sound effects will be disabled."
+msgstr ""
+
+#: src/components/windows/Settings.jsx:112
+msgid ""
+"Your Browser doesn't allow us to use AudioContext to play sounds. Do you "
+"have some privacy feature blocking us?"
+msgstr ""
+
+#: src/components/windows/Settings.jsx:118
+msgid "Enable chat notifications"
+msgstr ""
+
+#: src/components/windows/Settings.jsx:122
+msgid "Play a sound when new chat messages arrive"
+msgstr ""
+
+#: src/components/windows/Settings.jsx:125
+msgid "Auto Zoom In"
+msgstr ""
+
+#: src/components/windows/Settings.jsx:130
+msgid ""
+"Zoom in instead of placing a pixel when you tap the canvas and your zoom is "
+"small."
+msgstr ""
+
+#: src/components/windows/Settings.jsx:133
+msgid "Compact Palette"
+msgstr ""
+
+#: src/components/windows/Settings.jsx:138
+msgid "Display Palette in a compact form that takes less screen space."
+msgstr ""
+
+#: src/components/windows/Settings.jsx:141
+msgid "Potato Mode"
+msgstr ""
+
+#: src/components/windows/Settings.jsx:145
+msgid "For when you are playing on a potato."
+msgstr ""
+
+#: src/components/Converter.jsx:376
+#: src/components/windows/Settings.jsx:148
+msgid "Light Grid"
+msgstr ""
+
+#: src/components/windows/Settings.jsx:152
+msgid "Show Grid in white instead of black."
+msgstr ""
+
+#: src/components/windows/Settings.jsx:156
+msgid "Historical View"
+msgstr ""
+
+#: src/components/windows/Settings.jsx:161
+msgid "Check out past versions of the canvas."
+msgstr ""
+
+#: src/components/windows/Settings.jsx:166
+msgid "Themes"
+msgstr ""
+
+#: src/components/windows/Settings.jsx:171
+msgid "How pixelplanet should look like."
+msgstr ""
+
+#: src/components/windows/Settings.jsx:178
+msgid "Select Language"
+msgstr ""
+
+#: src/components/windows/UserArea.jsx:31
+#: src/components/windows/UserArea.jsx:50
+msgid "Profile"
+msgstr ""
+
+#: src/components/windows/UserArea.jsx:53
+msgid "Ranking"
+msgstr ""
+
+#: src/components/windows/UserArea.jsx:56
+msgid "Converter"
+msgstr ""
+
+#: src/components/windows/UserArea.jsx:62
+msgid "Modtools"
+msgstr ""
+
+#: src/components/windows/UserArea.jsx:63
+msgid "Loading..."
+msgstr ""
+
+#: src/components/windows/UserArea.jsx:70
+msgid "Consider joining us on Guilded:"
+msgstr ""
+
 #: src/components/windows/Help.jsx:42
 msgid "Place color pixels on a large canvas with other players online!"
 msgstr ""
@@ -650,122 +768,15 @@ msgstr ""
 msgid "Credit for the Palette of the Top10 canvas goes to ${ vinikLink }."
 msgstr ""
 
-#: src/components/windows/Settings.jsx:134
-msgid "Show Grid"
-msgstr ""
-
-#: src/components/windows/Settings.jsx:139
-msgid "Turn on grid to highlight pixel borders."
-msgstr ""
-
-#: src/components/windows/Settings.jsx:142
-msgid "Show Pixel Activity"
-msgstr ""
-
-#: src/components/windows/Settings.jsx:147
-msgid "Show circles where pixels are placed."
-msgstr ""
-
-#: src/components/windows/Settings.jsx:150
-msgid "Disable Game Sounds"
-msgstr ""
-
-#: src/components/windows/Settings.jsx:156
-msgid "All sound effects will be disabled."
-msgstr ""
-
-#: src/components/windows/Settings.jsx:160
+#: src/components/windows/CanvasSelect.jsx:27
 msgid ""
-"Your Browser doesn't allow us to use AudioContext to play sounds. Do you "
-"have some privacy feature blocking us?"
+"Select the canvas you want to use.  Every canvas is unique and has "
+"different palettes, cooldown and requirements.  Archive of closed canvases "
+"can be accessed here:"
 msgstr ""
 
-#: src/components/windows/Settings.jsx:166
-msgid "Enable chat notifications"
-msgstr ""
-
-#: src/components/windows/Settings.jsx:170
-msgid "Play a sound when new chat messages arrive"
-msgstr ""
-
-#: src/components/windows/Settings.jsx:173
-msgid "Auto Zoom In"
-msgstr ""
-
-#: src/components/windows/Settings.jsx:178
-msgid ""
-"Zoom in instead of placing a pixel when you tap the canvas and your zoom is "
-"small."
-msgstr ""
-
-#: src/components/windows/Settings.jsx:181
-msgid "Compact Palette"
-msgstr ""
-
-#: src/components/windows/Settings.jsx:186
-msgid "Display Palette in a compact form that takes less screen space."
-msgstr ""
-
-#: src/components/windows/Settings.jsx:189
-msgid "Potato Mode"
-msgstr ""
-
-#: src/components/windows/Settings.jsx:193
-msgid "For when you are playing on a potato."
-msgstr ""
-
-#: src/components/Converter.jsx:376
-#: src/components/windows/Settings.jsx:196
-msgid "Light Grid"
-msgstr ""
-
-#: src/components/windows/Settings.jsx:200
-msgid "Show Grid in white instead of black."
-msgstr ""
-
-#: src/components/windows/Settings.jsx:204
-msgid "Historical View"
-msgstr ""
-
-#: src/components/windows/Settings.jsx:209
-msgid "Check out past versions of the canvas."
-msgstr ""
-
-#: src/components/windows/Settings.jsx:214
-msgid "Themes"
-msgstr ""
-
-#: src/components/windows/Settings.jsx:219
-msgid "How pixelplanet should look like."
-msgstr ""
-
-#: src/components/windows/Settings.jsx:226
-msgid "Select Language"
-msgstr ""
-
-#: src/components/windows/UserArea.jsx:31
-#: src/components/windows/UserArea.jsx:50
-msgid "Profile"
-msgstr ""
-
-#: src/components/windows/UserArea.jsx:53
-msgid "Ranking"
-msgstr ""
-
-#: src/components/windows/UserArea.jsx:56
-msgid "Converter"
-msgstr ""
-
-#: src/components/windows/UserArea.jsx:62
-msgid "Modtools"
-msgstr ""
-
-#: src/components/windows/UserArea.jsx:63
-msgid "Loading..."
-msgstr ""
-
-#: src/components/windows/UserArea.jsx:70
-msgid "Consider joining us on Guilded:"
+#: src/components/windows/CanvasSelect.jsx:35
+msgid "Archive"
 msgstr ""
 
 #: src/components/windows/Register.jsx:85
@@ -845,17 +856,6 @@ msgid ""
 "how the canvas was at that time."
 msgstr ""
 
-#: src/components/windows/CanvasSelect.jsx:33
-msgid ""
-"Select the canvas you want to use.  Every canvas is unique and has "
-"different palettes, cooldown and requirements.  Archive of closed canvases "
-"can be accessed here:"
-msgstr ""
-
-#: src/components/windows/CanvasSelect.jsx:41
-msgid "Archive"
-msgstr ""
-
 #: src/components/windows/Chat.jsx:143
 msgid "Start chatting here"
 msgstr ""
@@ -928,14 +928,6 @@ msgstr ""
 msgid "Password must be shorter than 60 characters."
 msgstr ""
 
-#: src/components/GetIID.jsx:44
-msgid "Get IID"
-msgstr ""
-
-#: src/components/GetIID.jsx:53
-msgid "Copy"
-msgstr ""
-
 #: src/components/ChangeMail.jsx:91
 #: src/components/ChangeName.jsx:68
 #: src/components/ChangePassword.jsx:109
@@ -1103,6 +1095,14 @@ msgstr ""
 msgid "Download Template"
 msgstr ""
 
+#: src/components/GetIID.jsx:44
+msgid "Get IID"
+msgstr ""
+
+#: src/components/GetIID.jsx:53
+msgid "Copy"
+msgstr ""
+
 #: src/components/CanvasItem.jsx:29
 msgid "Online Users"
 msgstr ""
@@ -1208,15 +1208,15 @@ msgstr ""
 msgid "Yes, Delete My Account!"
 msgstr ""
 
-#: src/components/SocialSettings.jsx:37
+#: src/components/SocialSettings.jsx:24
 msgid "Block all Private Messages"
 msgstr ""
 
-#: src/components/SocialSettings.jsx:55
+#: src/components/SocialSettings.jsx:37
 msgid "Unblock Users"
 msgstr ""
 
-#: src/components/SocialSettings.jsx:80
+#: src/components/SocialSettings.jsx:62
 msgid "You have no users blocked"
 msgstr ""
 
@@ -1394,19 +1394,24 @@ msgid "(0 = infinite)"
 msgstr ""
 
 #: src/components/windows/Help.jsx:15
-#: src/components/windows/Settings.jsx:135
+#: src/components/windows/Settings.jsx:87
 msgctxt "keybinds"
 msgid "G"
 msgstr ""
 
 #: src/components/windows/Help.jsx:16
-#: src/components/windows/Settings.jsx:143
+#: src/components/windows/Settings.jsx:95
 msgctxt "keybinds"
 msgid "X"
 msgstr ""
 
+#: src/components/windows/Settings.jsx:103
+msgctxt "keybinds"
+msgid "M"
+msgstr ""
+
 #: src/components/windows/Help.jsx:17
-#: src/components/windows/Settings.jsx:206
+#: src/components/windows/Settings.jsx:158
 msgctxt "keybinds"
 msgid "H"
 msgstr ""
@@ -1454,9 +1459,4 @@ msgstr ""
 #: src/components/windows/Help.jsx:32
 msgctxt "keybinds"
 msgid "C"
-msgstr ""
-
-#: src/components/windows/Settings.jsx:151
-msgctxt "keybinds"
-msgid "M"
 msgstr ""
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 448f455..4b7e5b9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -33,12 +33,10 @@
         "react-dom": "^18.2.0",
         "react-icons": "^4.3.1",
         "react-redux": "^8.0.2",
-        "react-responsive": "^8.2.0",
         "react-stay-scrolled": "^8.0.0",
         "react-toggle": "^4.1.3",
         "redis": "^4.2.0",
         "redux": "^4.1.2",
-        "redux-logger": "^3.0.6",
         "redux-persist": "^6.0.0",
         "redux-thunk": "^2.4.1",
         "reselect": "^4.1.6",
@@ -4329,11 +4327,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/css-mediaquery": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/css-mediaquery/-/css-mediaquery-0.1.2.tgz",
-      "integrity": "sha512-COtn4EROW5dBGlE/4PiKnh6rZpAPxDeFLaEEwt4i10jpDMFt2EhQGS79QmmrO+iKCHv0PU/HrOWEhijFd1x99Q=="
-    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -4402,11 +4395,6 @@
       "integrity": "sha512-cSfRWjXJtZQeRuZGVvDrJroCR5V2UvBNUMHsPCdNYzuAG8b9V8aAy3KUcdQrGQPXs17Y+ojbPh1aOCplg9YR9g==",
       "dev": true
     },
-    "node_modules/deep-diff": {
-      "version": "0.3.8",
-      "resolved": "https://registry.npmjs.org/deep-diff/-/deep-diff-0.3.8.tgz",
-      "integrity": "sha512-yVn6RZmHiGnxRKR9sJb3iVV2XTF1Ghh2DiWRZ3dMnGc43yUdWWF/kX6lQyk3+P84iprfWKU/8zFTrlkvtFm1ug=="
-    },
     "node_modules/deep-equal": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.0.1.tgz",
@@ -6237,11 +6225,6 @@
         "hunspell-tojson": "bin/hunspell-tojson.js"
       }
     },
-    "node_modules/hyphenate-style-name": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
-      "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ=="
-    },
     "node_modules/iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -7296,14 +7279,6 @@
         "semver": "bin/semver"
       }
     },
-    "node_modules/matchmediaquery": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/matchmediaquery/-/matchmediaquery-0.3.1.tgz",
-      "integrity": "sha512-Hlk20WQHRIm9EE9luN1kjRjYXAQToHOIAHPJn9buxBwuhfTHoKUcX+lXBbxc85DVQfXYbEQ4HcwQdd128E3qHQ==",
-      "dependencies": {
-        "css-mediaquery": "^0.1.2"
-      }
-    },
     "node_modules/media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -8852,23 +8827,6 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
       "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
     },
-    "node_modules/react-responsive": {
-      "version": "8.2.0",
-      "resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-8.2.0.tgz",
-      "integrity": "sha512-iagCqVrw4QSjhxKp3I/YK6+ODkWY6G+YPElvdYKiUUbywwh9Ds0M7r26Fj2/7dWFFbOpcGnJE6uE7aMck8j5Qg==",
-      "dependencies": {
-        "hyphenate-style-name": "^1.0.0",
-        "matchmediaquery": "^0.3.0",
-        "prop-types": "^15.6.1",
-        "shallow-equal": "^1.1.0"
-      },
-      "engines": {
-        "node": ">= 0.10"
-      },
-      "peerDependencies": {
-        "react": ">=16.8.0"
-      }
-    },
     "node_modules/react-stay-scrolled": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/react-stay-scrolled/-/react-stay-scrolled-8.0.0.tgz",
@@ -8965,14 +8923,6 @@
         "@babel/runtime": "^7.9.2"
       }
     },
-    "node_modules/redux-logger": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/redux-logger/-/redux-logger-3.0.6.tgz",
-      "integrity": "sha512-JoCIok7bg/XpqA1JqCqXFypuqBbQzGQySrhFzewB7ThcnysTO30l4VCst86AuB9T9tuT03MAA56Jw2PNhRSNCg==",
-      "dependencies": {
-        "deep-diff": "^0.3.5"
-      }
-    },
     "node_modules/redux-persist": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/redux-persist/-/redux-persist-6.0.0.tgz",
@@ -9475,11 +9425,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/shallow-equal": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.1.tgz",
-      "integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA=="
-    },
     "node_modules/sharp": {
       "version": "0.30.7",
       "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.30.7.tgz",
@@ -14360,11 +14305,6 @@
         }
       }
     },
-    "css-mediaquery": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/css-mediaquery/-/css-mediaquery-0.1.2.tgz",
-      "integrity": "sha512-COtn4EROW5dBGlE/4PiKnh6rZpAPxDeFLaEEwt4i10jpDMFt2EhQGS79QmmrO+iKCHv0PU/HrOWEhijFd1x99Q=="
-    },
     "cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -14410,11 +14350,6 @@
       "integrity": "sha512-cSfRWjXJtZQeRuZGVvDrJroCR5V2UvBNUMHsPCdNYzuAG8b9V8aAy3KUcdQrGQPXs17Y+ojbPh1aOCplg9YR9g==",
       "dev": true
     },
-    "deep-diff": {
-      "version": "0.3.8",
-      "resolved": "https://registry.npmjs.org/deep-diff/-/deep-diff-0.3.8.tgz",
-      "integrity": "sha512-yVn6RZmHiGnxRKR9sJb3iVV2XTF1Ghh2DiWRZ3dMnGc43yUdWWF/kX6lQyk3+P84iprfWKU/8zFTrlkvtFm1ug=="
-    },
     "deep-equal": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.0.1.tgz",
@@ -15820,11 +15755,6 @@
       "integrity": "sha512-4DwmFAvlz+ChsqLDsZT2cwBsYNXh+oWboemxXtafwKIyItq52xfR4e4kr017sLAoPaSYVofSOvPUfmOAhXyYvw==",
       "dev": true
     },
-    "hyphenate-style-name": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
-      "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ=="
-    },
     "iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -16610,14 +16540,6 @@
         }
       }
     },
-    "matchmediaquery": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/matchmediaquery/-/matchmediaquery-0.3.1.tgz",
-      "integrity": "sha512-Hlk20WQHRIm9EE9luN1kjRjYXAQToHOIAHPJn9buxBwuhfTHoKUcX+lXBbxc85DVQfXYbEQ4HcwQdd128E3qHQ==",
-      "requires": {
-        "css-mediaquery": "^0.1.2"
-      }
-    },
     "media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -17743,17 +17665,6 @@
         }
       }
     },
-    "react-responsive": {
-      "version": "8.2.0",
-      "resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-8.2.0.tgz",
-      "integrity": "sha512-iagCqVrw4QSjhxKp3I/YK6+ODkWY6G+YPElvdYKiUUbywwh9Ds0M7r26Fj2/7dWFFbOpcGnJE6uE7aMck8j5Qg==",
-      "requires": {
-        "hyphenate-style-name": "^1.0.0",
-        "matchmediaquery": "^0.3.0",
-        "prop-types": "^15.6.1",
-        "shallow-equal": "^1.1.0"
-      }
-    },
     "react-stay-scrolled": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/react-stay-scrolled/-/react-stay-scrolled-8.0.0.tgz",
@@ -17827,14 +17738,6 @@
         "@babel/runtime": "^7.9.2"
       }
     },
-    "redux-logger": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/redux-logger/-/redux-logger-3.0.6.tgz",
-      "integrity": "sha512-JoCIok7bg/XpqA1JqCqXFypuqBbQzGQySrhFzewB7ThcnysTO30l4VCst86AuB9T9tuT03MAA56Jw2PNhRSNCg==",
-      "requires": {
-        "deep-diff": "^0.3.5"
-      }
-    },
     "redux-persist": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/redux-persist/-/redux-persist-6.0.0.tgz",
@@ -18203,11 +18106,6 @@
         "kind-of": "^6.0.2"
       }
     },
-    "shallow-equal": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.1.tgz",
-      "integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA=="
-    },
     "sharp": {
       "version": "0.30.7",
       "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.30.7.tgz",
diff --git a/package.json b/package.json
index 68d13c3..777d3c1 100644
--- a/package.json
+++ b/package.json
@@ -8,9 +8,9 @@
   "description": "Unlimited planet canvas for placing pixels",
   "main": "server.js",
   "scripts": {
-    "build": "babel-node scripts/build.js && npm run minify-css",
-    "build:dev": "webpack --env extract --config ./webpack.config.server.babel.js && webpack --env extract --env development --config ./webpack.config.client.babel.js && npm run minify-css",
-    "minify-css": "babel-node scripts/minifyCss.js",
+    "build": "node scripts/build.js && npm run minify-css",
+    "build:dev": "webpack --env extract --config ./webpack.config.server.js && webpack --env extract --env development --config ./webpack.config.client.js && npm run minify-css",
+    "minify-css": "node scripts/minifyCss.js",
     "babel-node": "babel-node",
     "lint": "cd $INIT_CWD && eslint --ext .jsx --ext .js",
     "lint:src": "eslint --ext .jsx --ext .js src"
@@ -29,8 +29,8 @@
     "etag": "^1.8.1",
     "express": "^4.17.2",
     "express-session": "^1.17.2",
-    "image-q": "^4.0.0",
     "js-file-download": "^0.4.12",
+    "image-q": "^4.0.0",
     "morgan": "^1.10.0",
     "multer": "^1.4.4",
     "mysql2": "^2.3.3",
@@ -47,12 +47,10 @@
     "react-dom": "^18.2.0",
     "react-icons": "^4.3.1",
     "react-redux": "^8.0.2",
-    "react-responsive": "^8.2.0",
     "react-stay-scrolled": "^8.0.0",
     "react-toggle": "^4.1.3",
     "redis": "^4.2.0",
     "redux": "^4.1.2",
-    "redux-logger": "^3.0.6",
     "redux-persist": "^6.0.0",
     "redux-thunk": "^2.4.1",
     "reselect": "^4.1.6",
diff --git a/scripts/build.js b/scripts/build.js
index ceb15ed..069cdde 100644
--- a/scripts/build.js
+++ b/scripts/build.js
@@ -3,9 +3,10 @@
  * Lets split that here
  */
 
-import webpack from 'webpack';
-import serverConfig from '../webpack.config.server.babel.js';
-import clientConfig, {getAllAvailableLocals} from '../webpack.config.client.babel.js';
+const webpack = require('webpack');
+const serverConfig = require('../webpack.config.server.js');
+const clientConfig = require('../webpack.config.client.js');
+const { getAllAvailableLocals } = clientConfig;
 
 function compile(webpackConfig) {
   return new Promise((resolve, reject) => {
diff --git a/scripts/minifyCss.js b/scripts/minifyCss.js
index 181a1e6..6baad02 100644
--- a/scripts/minifyCss.js
+++ b/scripts/minifyCss.js
@@ -4,17 +4,16 @@
  * so files beginning with "theme-" in the src/styles folder will
  * be read and automatically added.
  *
- * @flow
  */
 
 /* eslint-disable import/no-extraneous-dependencies */
 /* eslint-disable no-console */
 
-import fs from 'fs';
-import path from 'path';
-import CleanCSS from 'clean-css';
-import crypto from 'crypto';
-import mkdirp from 'mkdirp';
+const fs = require('fs');
+const path = require('path');
+const CleanCSS = require('clean-css');
+const crypto = require('crypto');
+const mkdirp = require('mkdirp');
 
 const assetdir = path.resolve(__dirname, '..', 'dist', 'public', 'assets');
 const builddir = path.resolve(__dirname, '..', 'dist');
@@ -71,4 +70,4 @@ if (require.main === module) {
   doMinifyCss();
 }
 
-export default minifyCss;
+module.exports = minifyCss;
diff --git a/src/backup.js b/src/backup.js
index a02ea18..7cf07a9 100644
--- a/src/backup.js
+++ b/src/backup.js
@@ -22,8 +22,7 @@ import {
   createPngBackup,
   incrementialBackupRedis,
 } from './core/tilesBackup';
-// eslint-disable-next-line import/no-unresolved
-import canvases from './canvases.json';
+import canvases from './core/canvases';
 
 /*
  * use low cpu priority
diff --git a/src/canvasesDesc.js b/src/canvasesDesc.js
index 77c2a4c..2c2500c 100644
--- a/src/canvasesDesc.js
+++ b/src/canvasesDesc.js
@@ -4,9 +4,10 @@
  *
  */
 
-import canvases from './canvases.json';
+import canvases from './core/canvases';
 import ttag from './core/ttag';
 
+
 /* eslint-disable max-len */
 
 function getCanvases(t) {
@@ -55,7 +56,6 @@ function getCanvases(t) {
   return localicedCanvases;
 }
 
-
 const lCanvases = {};
 (() => {
   const langs = Object.keys(ttag);
diff --git a/src/core/CanvasCleaner.js b/src/core/CanvasCleaner.js
index 3eee4ba..15cebd4 100644
--- a/src/core/CanvasCleaner.js
+++ b/src/core/CanvasCleaner.js
@@ -19,8 +19,7 @@ import {
   TILE_SIZE,
 } from './constants';
 import logger from './logger';
-// eslint-disable-next-line import/no-unresolved
-import canvases from './canvases.json';
+import canvases from './canvases';
 
 const METHODS = {
   /*
diff --git a/src/core/Image.js b/src/core/Image.js
index 9899e40..f646c17 100644
--- a/src/core/Image.js
+++ b/src/core/Image.js
@@ -11,8 +11,7 @@ import RedisCanvas from '../data/redis/RedisCanvas';
 import logger from './logger';
 import { getChunkOfPixel } from './utils';
 import { TILE_SIZE } from './constants';
-// eslint-disable-next-line import/no-unresolved
-import canvases from './canvases.json';
+import canvases from './canvases';
 import Palette from './Palette';
 
 
diff --git a/src/core/RpgEvent.js b/src/core/RpgEvent.js
index 7975569..d0d1c97 100644
--- a/src/core/RpgEvent.js
+++ b/src/core/RpgEvent.js
@@ -20,8 +20,7 @@ import { protectCanvasArea } from './Image';
 import { setPixelByOffset } from './setPixel';
 import { TILE_SIZE, EVENT_USER_NAME } from './constants';
 import chatProvider from './ChatProvider';
-// eslint-disable-next-line import/no-unresolved
-import canvases from './canvases.json';
+import canvases from './canvases';
 
 // steps in minutes for event stages
 // STEPS[5] is event duration, adjusted from 10 to 8 on 2022.04.26
diff --git a/src/core/Void.js b/src/core/Void.js
index 33e0205..39efea0 100644
--- a/src/core/Void.js
+++ b/src/core/Void.js
@@ -10,8 +10,7 @@ import PixelUpdate from '../socket/packets/PixelUpdateServer';
 import { setPixelByOffset } from './setPixel';
 import { TILE_SIZE } from './constants';
 import { CANVAS_ID } from '../data/redis/Event';
-// eslint-disable-next-line import/no-unresolved
-import canvases from './canvases.json';
+import canvases from './canvases';
 
 const TARGET_RADIUS = 62;
 
diff --git a/src/core/adminfunctions.js b/src/core/adminfunctions.js
index 33346b1..be0c69b 100644
--- a/src/core/adminfunctions.js
+++ b/src/core/adminfunctions.js
@@ -31,8 +31,7 @@ import {
   getIPofIID,
   getIIDofIP,
 } from '../data/sql/IPInfo';
-// eslint-disable-next-line import/no-unresolved
-import canvases from './canvases.json';
+import canvases from './canvases';
 import {
   imageABGR2Canvas,
   protectCanvasArea,
diff --git a/src/core/assets.js b/src/core/assets.js
new file mode 100644
index 0000000..50823a1
--- /dev/null
+++ b/src/core/assets.js
@@ -0,0 +1,9 @@
+import path from 'path';
+import { readFileSync } from 'fs';
+
+export const assets = JSON.parse(readFileSync(
+  path.resolve(__dirname, './assets.json'),
+));
+export const styleassets = JSON.parse(readFileSync(
+  path.resolve(__dirname, './styleassets.json'),
+));
diff --git a/src/core/canvases.js b/src/core/canvases.js
new file mode 100644
index 0000000..20b78ce
--- /dev/null
+++ b/src/core/canvases.js
@@ -0,0 +1,8 @@
+import path from 'path';
+import { readFileSync } from 'fs';
+
+const canvases = JSON.parse(readFileSync(
+  path.resolve(__dirname, './canvases.json'),
+));
+
+export default canvases;
diff --git a/src/core/draw.js b/src/core/draw.js
index 0ac49dc..53c0c34 100644
--- a/src/core/draw.js
+++ b/src/core/draw.js
@@ -12,8 +12,7 @@ import {
   setPixelByCoords,
 } from './setPixel';
 import rankings from './ranking';
-// eslint-disable-next-line import/no-unresolved
-import canvases from './canvases.json';
+import canvases from './canvases';
 
 import { THREE_CANVAS_HEIGHT, THREE_TILE_SIZE, TILE_SIZE } from './constants';
 
diff --git a/src/core/me.js b/src/core/me.js
index c951d21..a292cc5 100644
--- a/src/core/me.js
+++ b/src/core/me.js
@@ -4,7 +4,6 @@
  * various api endpoints.
  *
  */
-// eslint-disable-next-line import/no-unresolved
 import { getLocalicedCanvases } from '../canvasesDesc';
 import { USE_MAILER } from './config';
 import chatProvider from './ChatProvider';
diff --git a/src/core/rollback.js b/src/core/rollback.js
index 2d74c8b..61e7c49 100644
--- a/src/core/rollback.js
+++ b/src/core/rollback.js
@@ -16,8 +16,7 @@ import { getChunkOfPixel } from './utils';
 import Palette from './Palette';
 import { TILE_SIZE } from './constants';
 import { BACKUP_DIR } from './config';
-// eslint-disable-next-line import/no-unresolved
-import canvases from './canvases.json';
+import canvases from './canvases';
 
 export default async function rollbackToDate(
   canvasId, // number
diff --git a/src/core/setPixel.js b/src/core/setPixel.js
index d5d1815..636a581 100644
--- a/src/core/setPixel.js
+++ b/src/core/setPixel.js
@@ -8,8 +8,7 @@ import {
   getOffsetOfPixel,
 } from './utils';
 import pixelCache from './PixelCache';
-// eslint-disable-next-line import/no-unresolved
-import canvases from './canvases.json';
+import canvases from './canvases';
 
 
 /**
diff --git a/src/core/tileserver.js b/src/core/tileserver.js
index 7fad101..9a6749c 100644
--- a/src/core/tileserver.js
+++ b/src/core/tileserver.js
@@ -7,8 +7,7 @@ import fs from 'fs';
 import { Worker } from 'worker_threads';
 
 import logger from './logger';
-// eslint-disable-next-line import/no-unresolved
-import canvases from './canvases.json';
+import canvases from './canvases';
 import RedisCanvas from '../data/redis/RedisCanvas';
 
 import { TILE_FOLDER } from './config';
diff --git a/src/routes/index.js b/src/routes/index.js
index 9b31cc8..b3d6730 100644
--- a/src/routes/index.js
+++ b/src/routes/index.js
@@ -16,7 +16,7 @@ import captcha from './captcha';
 import resetPassword from './reset_password';
 import api from './api';
 
-import assets from './assets.json'; // eslint-disable-line import/no-unresolved
+import { assets } from '../core/assets';
 import { expressTTag } from '../core/ttag';
 import generateGlobePage from '../ssr/Globe';
 import generateWinPage from '../ssr/Win';
diff --git a/src/routes/tiles.js b/src/routes/tiles.js
index 8a22cfa..18ec8ea 100644
--- a/src/routes/tiles.js
+++ b/src/routes/tiles.js
@@ -7,8 +7,7 @@
 import fs from 'fs';
 import express from 'express';
 
-// eslint-disable-next-line import/no-unresolved
-import canvases from './canvases.json';
+import canvases from '../core/canvases';
 import { getMaxTiledZoom } from '../core/utils';
 import { TILE_FOLDER } from '../core/config';
 
diff --git a/src/socket/SocketServer.js b/src/socket/SocketServer.js
index 98c4544..fedb0c5 100644
--- a/src/socket/SocketServer.js
+++ b/src/socket/SocketServer.js
@@ -4,8 +4,7 @@
 import WebSocket from 'ws';
 
 import logger from '../core/logger';
-// eslint-disable-next-line import/no-unresolved
-import canvases from './canvases.json';
+import canvases from '../core/canvases';
 import Counter from '../utils/Counter';
 import { getIPFromRequest, getHostFromRequest } from '../utils/ip';
 
diff --git a/src/ssr/Globe.jsx b/src/ssr/Globe.jsx
index e305086..6d39be1 100644
--- a/src/ssr/Globe.jsx
+++ b/src/ssr/Globe.jsx
@@ -8,8 +8,7 @@
 import { getTTag } from '../core/ttag';
 
 /* this will be set by webpack */
-// eslint-disable-next-line import/no-unresolved
-import assets from './assets.json';
+import { assets } from '../core/assets';
 import { ASSET_SERVER } from '../core/config';
 
 import globeCss from '../styles/globe.css';
diff --git a/src/ssr/Main.jsx b/src/ssr/Main.jsx
index cc44938..54e1ff8 100644
--- a/src/ssr/Main.jsx
+++ b/src/ssr/Main.jsx
@@ -7,11 +7,7 @@
 
 import { langCodeToCC } from '../utils/location';
 import ttags, { getTTag } from '../core/ttag';
-/* this one is set by webpack */
-// eslint-disable-next-line import/no-unresolved
-import assets from './assets.json';
-// eslint-disable-next-line import/no-unresolved
-import styleassets from './styleassets.json';
+import { styleassets, assets } from '../core/assets';
 
 import { ASSET_SERVER, BACKUP_URL } from '../core/config';
 
diff --git a/src/ssr/Win.jsx b/src/ssr/Win.jsx
index 5eda012..48b5e4f 100644
--- a/src/ssr/Win.jsx
+++ b/src/ssr/Win.jsx
@@ -8,8 +8,7 @@
 import { getTTag } from '../core/ttag';
 
 /* this will be set by webpack */
-// eslint-disable-next-line import/no-unresolved
-import assets from './assets.json';
+import { assets } from '../core/assets';
 import { ASSET_SERVER } from '../core/config';
 
 /*
diff --git a/webpack.config.client.babel.js b/webpack.config.client.js
similarity index 82%
rename from webpack.config.client.babel.js
rename to webpack.config.client.js
index 5041761..0015ab1 100644
--- a/webpack.config.client.babel.js
+++ b/webpack.config.client.js
@@ -1,17 +1,22 @@
 /**
+ * webpack config for client files
  */
 
-import fs from 'fs';
-import path from 'path';
-import webpack from 'webpack';
-import AssetsPlugin from 'assets-webpack-plugin';
-import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
+const fs = require('fs');
+const path = require('path');
+const process = require('process');
+const webpack = require('webpack');
+const AssetsPlugin = require('assets-webpack-plugin');
+const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
+
+// make sure we build in root dir
+process.chdir(__dirname);
 
 /*
  * Emit a file with assets paths
  */
 const assetPlugin = new AssetsPlugin({
-  path: path.resolve(__dirname, 'dist'),
+  path: path.resolve('dist'),
   filename: 'assets.json',
   update: true,
   entrypoints: true,
@@ -19,7 +24,7 @@ const assetPlugin = new AssetsPlugin({
 });
 
 
-export function buildWebpackClientConfig(
+function buildWebpackClientConfig(
   development,
   analyze,
   locale,
@@ -28,14 +33,14 @@ export function buildWebpackClientConfig(
   const ttag = {
     resolve: {
       translations: (locale !== 'default')
-        ? path.resolve(__dirname, 'i18n', `${locale}.po`)
+        ? path.resolve('i18n', `${locale}.po`)
         : locale,
     },
   };
 
   if (extract) {
     ttag.extract = {
-      output: path.resolve(__dirname, 'i18n', 'template.pot'),
+      output: path.resolve('i18n', 'template.pot'),
     };
   }
 
@@ -55,21 +60,20 @@ export function buildWebpackClientConfig(
     name: 'client',
     target: 'web',
 
-    context: __dirname,
     mode: (development) ? 'development' : 'production',
     devtool: (development) ? 'eval' : false,
 
     entry: {
       [(locale !== 'default') ? `client-${locale}` : 'client']:
-        [path.resolve(__dirname, 'src', 'client.js')],
+        [path.resolve('src', 'client.js')],
       [(locale !== 'default') ? `globe-${locale}` : 'globe']:
-        [path.resolve(__dirname, 'src', 'globe.js')],
+        [path.resolve('src', 'globe.js')],
       [(locale !== 'default') ? `win-${locale}` : 'win']:
-        [path.resolve(__dirname, 'src', 'win.js')],
+        [path.resolve('src', 'win.js')],
     },
 
     output: {
-      path: path.resolve(__dirname, 'dist', 'public', 'assets'),
+      path: path.resolve('dist', 'public', 'assets'),
       publicPath: '/assets/',
       filename: '[name].[chunkhash:8].js',
       chunkFilename: (locale !== 'default')
@@ -87,7 +91,7 @@ export function buildWebpackClientConfig(
         /*
          * if we don't do that,we might load different versions of three
          */
-        three: path.resolve(__dirname, './node_modules/three'),
+        three: path.resolve('node_modules', 'three'),
       },
       extensions: ['.js', '.jsx'],
     },
@@ -122,9 +126,9 @@ export function buildWebpackClientConfig(
           test: /\.(js|jsx)$/,
           loader: 'babel-loader',
           include: [
-            path.resolve(__dirname, 'src'),
+            path.resolve('src'),
             ...['image-q'].map((moduleName) => (
-              path.resolve(__dirname + '/node_modules/' + moduleName)
+              path.resolve('node_modules', moduleName)
             ))
           ],
           options: {
@@ -188,8 +192,8 @@ export function buildWebpackClientConfig(
   };
 }
 
-export function getAllAvailableLocals() {
-  const langDir = path.resolve(__dirname, 'i18n');
+function getAllAvailableLocals() {
+  const langDir = path.resolve('i18n');
   const langs = fs.readdirSync(langDir)
     .filter((e) => (e.endsWith('.po') && !e.startsWith('ssr')))
     .map((l) => l.slice(0, -3));
@@ -223,7 +227,7 @@ function buildWebpackClientConfigAllLangs() {
  * @param analyze launch BundleAnalyzerPlugin after build
  * @return webpack configuration
  */
-export default ({
+module.exports = ({
   development, analyze, extract, locale,
 }) => {
   if (extract || analyze || locale || development) {
@@ -233,3 +237,6 @@ export default ({
   }
   return buildWebpackClientConfigAllLangs(development);
 };
+
+module.exports.buildWebpackClientConfig = buildWebpackClientConfig;
+module.exports.getAllAvailableLocals = getAllAvailableLocals;
diff --git a/webpack.config.server.babel.js b/webpack.config.server.js
similarity index 59%
rename from webpack.config.server.babel.js
rename to webpack.config.server.js
index 755f326..fd135f4 100644
--- a/webpack.config.server.babel.js
+++ b/webpack.config.server.js
@@ -1,14 +1,19 @@
 /*
+ * webpack config to build server files
  */
 
-import fs from 'fs';
-import path from 'path';
-import webpack from 'webpack';
-import nodeExternals from 'webpack-node-externals';
-import GeneratePackageJsonPlugin from 'generate-package-json-webpack-plugin';
-import CopyPlugin from 'copy-webpack-plugin';
+const fs = require('fs');
+const path = require('path');
+const process = require('process');
+const webpack = require('webpack');
+const nodeExternals = require('webpack-node-externals');
+const GeneratePackageJsonPlugin = require('generate-package-json-webpack-plugin');
+const CopyPlugin = require('copy-webpack-plugin');
 
-import pkg from './package.json';
+const pkg = require('./package.json');
+
+// make sure we build in root dir
+process.chdir(__dirname);
 
 const basePackageValues = {
   name: pkg.name,
@@ -20,19 +25,17 @@ const basePackageValues = {
   },
   dependencies: {
     mysql2: '',
-    bufferutil: '',
     'utf-8-validate': '',
     bufferutil: '',
   },
 };
 
 const ttag = {};
-
 const babelPlugins = [
   ['ttag', ttag],
 ];
 
-export default ({
+module.exports = ({
   development, extract,
 }) => {
   /*
@@ -40,7 +43,7 @@ export default ({
    */
   if (extract) {
     ttag.extract = {
-      output: path.resolve(__dirname, 'i18n', 'template-ssr.pot'),
+      output: path.resolve('i18n', 'template-ssr.pot'),
     };
     ttag.discover = ['t', 'jt'];
   }
@@ -49,7 +52,7 @@ export default ({
    * worker threads need to be their own
    * entry points
    */
-  const workersDir = path.resolve(__dirname, 'src', 'workers');
+  const workersDir = path.resolve('src', 'workers');
   const workerEntries = {};
   fs.readdirSync(workersDir)
     .filter((e) => e.endsWith('.js'))
@@ -63,19 +66,15 @@ export default ({
     name: 'server',
     target: 'node',
 
-    context: __dirname,
     mode: (development) ? 'development' : 'production',
 
     entry: {
-      server: [path.resolve(__dirname, 'src', 'server.js')],
-      backup: [path.resolve(__dirname, 'src', 'backup.js')],
+      server: [path.resolve('src', 'server.js')],
+      backup: [path.resolve('src', 'backup.js')],
       ...workerEntries,
     },
 
     output: {
-      library: {
-        type: 'commonjs2',
-      },
       clean: true,
     },
 
@@ -88,9 +87,7 @@ export default ({
         {
           test: /\.(js|jsx)$/,
           loader: 'babel-loader',
-          include: [
-            path.resolve(__dirname, 'src'),
-          ],
+          include: [ path.resolve('src') ],
           options: {
             cacheDirectory: false,
             plugins: babelPlugins,
@@ -117,11 +114,17 @@ export default ({
       ],
     },
 
+    externalsPresets: {
+      // exclude native node modules (path, fs, etc.)
+      node: true,
+    },
+
     externals: [
-      /\/canvases\.json$/,
-      /\/styleassets\.json$/,
-      /\/assets\.json$/,
-      nodeExternals(),
+      nodeExternals({
+        // passport-reddit is an ESM module
+        // bundle it, then we don't have to import it
+        allowlist: [ /^passport-/ ],
+      }),
     ],
 
     plugins: [
@@ -131,36 +134,28 @@ export default ({
       }),
       // create package.json for deployment
       new GeneratePackageJsonPlugin(basePackageValues, {
-        sourcePackageFilenames: [
-          path.resolve(__dirname, 'package.json'),
-        ],
+        sourcePackageFilenames: [ path.resolve('package.json') ],
+        // provided by node itself
+        excludeDependencies: ['node:buffer'],
       }),
       new CopyPlugin({
         patterns: [
           {
-            from: path.resolve(__dirname, 'public'),
-            to: path.resolve(__dirname, 'dist', 'public'),
+            from: path.resolve('public'),
+            to: path.resolve('dist', 'public'),
           },
-          path.resolve(__dirname, 'src', 'canvases.json'),
+          path.resolve('src', 'canvases.json'),
           {
-            from: path.resolve(
-              __dirname, 'deployment', 'example-ecosystem.yml'
-            ),
-            to: path.resolve(
-              __dirname, 'dist', 'ecosystem.yml'
-            ),
+            from: path.resolve('deployment', 'example-ecosystem.yml'),
+            to: path.resolve('dist', 'ecosystem.yml'),
           },
           {
-            from: path.resolve(
-              __dirname, 'deployment', 'example-ecosystem-backup.yml'
-            ),
-            to: path.resolve(
-              __dirname, 'dist', 'ecosystem-backup.yml'
-            ),
+            from: path.resolve('deployment', 'example-ecosystem-backup.yml'),
+            to: path.resolve('dist', 'ecosystem-backup.yml'),
           },
           {
-            from: path.resolve(__dirname, 'deployment', 'captchaFonts'),
-            to: path.resolve(__dirname, 'dist', 'captchaFonts'),
+            from: path.resolve('deployment', 'captchaFonts'),
+            to: path.resolve('dist', 'captchaFonts'),
           },
         ],
       }),
@@ -176,8 +171,8 @@ export default ({
 
     node: {
       global: false,
-      __filename: false,
       __dirname: false,
+      __filename: false,
     },
   };
 };