diff --git a/package-lock.json b/package-lock.json
index c3870d0e9..90c87fbaa 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,6 @@
       "hasInstallScript": true,
       "license": "BSD-3-Clause",
       "dependencies": {
-        "@radix-ui/react-dialog": "^1.0.5",
         "@xmldom/xmldom": "^0.8.10",
         "classnames": "^2.3.2",
         "commonmark": "^0.30.0",
@@ -3772,329 +3771,6 @@
       "integrity": "sha512-C16M+IYz0rgRhWZdCmK+h58JMv8vijAA61gmz2rspCSwKwzBebpdcsiUmwrtJRdphuY30i6BSLEOP8ppbNLyLg==",
       "dev": true
     },
-    "node_modules/@radix-ui/primitive": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.1.tgz",
-      "integrity": "sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10"
-      }
-    },
-    "node_modules/@radix-ui/react-compose-refs": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz",
-      "integrity": "sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-context": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.0.1.tgz",
-      "integrity": "sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-dialog": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.0.5.tgz",
-      "integrity": "sha512-GjWJX/AUpB703eEBanuBnIWdIXg6NvJFCXcNlSZk4xdszCdhrJgBoUd1cGk67vFO+WdA2pfI/plOpqz/5GUP6Q==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/primitive": "1.0.1",
-        "@radix-ui/react-compose-refs": "1.0.1",
-        "@radix-ui/react-context": "1.0.1",
-        "@radix-ui/react-dismissable-layer": "1.0.5",
-        "@radix-ui/react-focus-guards": "1.0.1",
-        "@radix-ui/react-focus-scope": "1.0.4",
-        "@radix-ui/react-id": "1.0.1",
-        "@radix-ui/react-portal": "1.0.4",
-        "@radix-ui/react-presence": "1.0.1",
-        "@radix-ui/react-primitive": "1.0.3",
-        "@radix-ui/react-slot": "1.0.2",
-        "@radix-ui/react-use-controllable-state": "1.0.1",
-        "aria-hidden": "^1.1.1",
-        "react-remove-scroll": "2.5.5"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-dismissable-layer": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.5.tgz",
-      "integrity": "sha512-aJeDjQhywg9LBu2t/At58hCvr7pEm0o2Ke1x33B+MhjNmmZ17sy4KImo0KPLgsnc/zN7GPdce8Cnn0SWvwZO7g==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/primitive": "1.0.1",
-        "@radix-ui/react-compose-refs": "1.0.1",
-        "@radix-ui/react-primitive": "1.0.3",
-        "@radix-ui/react-use-callback-ref": "1.0.1",
-        "@radix-ui/react-use-escape-keydown": "1.0.3"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-focus-guards": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.1.tgz",
-      "integrity": "sha512-Rect2dWbQ8waGzhMavsIbmSVCgYxkXLxxR3ZvCX79JOglzdEy4JXMb98lq4hPxUbLr77nP0UOGf4rcMU+s1pUA==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-focus-scope": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.4.tgz",
-      "integrity": "sha512-sL04Mgvf+FmyvZeYfNu1EPAaaxD+aw7cYeIB9L9Fvq8+urhltTRaEo5ysKOpHuKPclsZcSUMKlN05x4u+CINpA==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-compose-refs": "1.0.1",
-        "@radix-ui/react-primitive": "1.0.3",
-        "@radix-ui/react-use-callback-ref": "1.0.1"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-id": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.1.tgz",
-      "integrity": "sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-use-layout-effect": "1.0.1"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-portal": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.0.4.tgz",
-      "integrity": "sha512-Qki+C/EuGUVCQTOTD5vzJzJuMUlewbzuKyUy+/iHM2uwGiru9gZeBJtHAPKAEkB5KWGi9mP/CHKcY0wt1aW45Q==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-primitive": "1.0.3"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-presence": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.0.1.tgz",
-      "integrity": "sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-compose-refs": "1.0.1",
-        "@radix-ui/react-use-layout-effect": "1.0.1"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-primitive": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz",
-      "integrity": "sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-slot": "1.0.2"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-slot": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
-      "integrity": "sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-compose-refs": "1.0.1"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-use-callback-ref": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz",
-      "integrity": "sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-use-controllable-state": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.1.tgz",
-      "integrity": "sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-use-callback-ref": "1.0.1"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-use-escape-keydown": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.3.tgz",
-      "integrity": "sha512-vyL82j40hcFicA+M4Ex7hVkB9vHgSse1ZWomAqV2Je3RleKGO5iM8KMOEtfoSB0PnIelMd2lATjTGMYqN5ylTg==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-use-callback-ref": "1.0.1"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-use-layout-effect": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.1.tgz",
-      "integrity": "sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@redux-devtools/extension": {
       "version": "3.2.6",
       "resolved": "https://registry.npmjs.org/@redux-devtools/extension/-/extension-3.2.6.tgz",
@@ -6188,17 +5864,6 @@
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
       "dev": true
     },
-    "node_modules/aria-hidden": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.3.tgz",
-      "integrity": "sha512-xcLxITLe2HYa1cnYnwCjkOO1PqUHQpozB8x9AR0OgWN2woOBi5kSDVxKfd0b7sb1hw5qFeJhXm9H1nu3xSfLeQ==",
-      "dependencies": {
-        "tslib": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/arr-diff": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz",
@@ -13028,14 +12693,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/get-nonce": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
-      "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==",
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/get-package-type": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/get-package-type/-/get-package-type-0.1.0.tgz",
@@ -14852,14 +14509,6 @@
         "node": ">= 0.10"
       }
     },
-    "node_modules/invariant": {
-      "version": "2.2.4",
-      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
-      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
-      "dependencies": {
-        "loose-envify": "^1.0.0"
-      }
-    },
     "node_modules/inversify": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/inversify/-/inversify-6.0.2.tgz",
@@ -22529,51 +22178,6 @@
       "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz",
       "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA=="
     },
-    "node_modules/react-remove-scroll": {
-      "version": "2.5.5",
-      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz",
-      "integrity": "sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==",
-      "dependencies": {
-        "react-remove-scroll-bar": "^2.3.3",
-        "react-style-singleton": "^2.2.1",
-        "tslib": "^2.1.0",
-        "use-callback-ref": "^1.3.0",
-        "use-sidecar": "^1.1.2"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/react-remove-scroll-bar": {
-      "version": "2.3.4",
-      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.4.tgz",
-      "integrity": "sha512-63C4YQBUt0m6ALadE9XV56hV8BgJWDmmTPY758iIJjfQKt2nYwoUrPk0LXRXcB/yIj82T1/Ixfdpdk68LwIB0A==",
-      "dependencies": {
-        "react-style-singleton": "^2.2.1",
-        "tslib": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/react-router": {
       "version": "6.17.0",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.17.0.tgz",
@@ -22649,28 +22253,6 @@
         "react-dom": ">=16.8"
       }
     },
-    "node_modules/react-style-singleton": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
-      "integrity": "sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==",
-      "dependencies": {
-        "get-nonce": "^1.0.0",
-        "invariant": "^2.2.4",
-        "tslib": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/react-svg-core": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/react-svg-core/-/react-svg-core-3.0.3.tgz",
diff --git a/package.json b/package.json
index 59ae4bdfb..078145414 100644
--- a/package.json
+++ b/package.json
@@ -251,7 +251,6 @@
     }
   },
   "dependencies": {
-    "@radix-ui/react-dialog": "^1.0.5",
     "@xmldom/xmldom": "^0.8.10",
     "classnames": "^2.3.2",
     "commonmark": "^0.30.0",
diff --git a/src/renderer/assets/styles/components/modals.css b/src/renderer/assets/styles/components/modals.css
index d6ee72a50..6f47a87fb 100644
--- a/src/renderer/assets/styles/components/modals.css
+++ b/src/renderer/assets/styles/components/modals.css
@@ -180,15 +180,6 @@
   }
 }
 
-.modal_dialog-collapsed {
-  min-height: 0;
-}
-
-.modal_dialog_body-collapsed {
-  height: 0;
-  display: none;
-}
-
 .___DEBUG___COMPONENTS_MODALS_CSS {
   display: none;
 }
diff --git a/src/renderer/assets/styles/components/modals.css.d.ts b/src/renderer/assets/styles/components/modals.css.d.ts
index af79c1052..84f29abd7 100644
--- a/src/renderer/assets/styles/components/modals.css.d.ts
+++ b/src/renderer/assets/styles/components/modals.css.d.ts
@@ -5,9 +5,7 @@ declare const styles: {
   readonly "close_button": string;
   readonly "field": string;
   readonly "modal_dialog": string;
-  readonly "modal_dialog-collapsed": string;
   readonly "modal_dialog_body": string;
-  readonly "modal_dialog_body-collapsed": string;
   readonly "modal_dialog_body_centered": string;
   readonly "modal_dialog_footer": string;
   readonly "modal_dialog_full": string;
diff --git a/src/renderer/assets/styles/partials/variables.scss b/src/renderer/assets/styles/partials/variables.scss
index abcb95395..8126d4b5f 100644
--- a/src/renderer/assets/styles/partials/variables.scss
+++ b/src/renderer/assets/styles/partials/variables.scss
@@ -23,20 +23,37 @@ $color-palette: (
     --setting-btn-secondary: #f7f5ff,
   ),
   dark: (
-    --color-primary: #fff,
-    --color-secondary: #4d4d4d,
+    --color-primary: #4d4d4d,
+    --color-secondary: #fff,
     --color-tertiary: #67a3e0,
-    --color-disabled: #b7b7b7,
+    --color-disabled: #040303,
     --color-light-grey: #f1f1f1,
     --color-medium-grey: #e5e5e5,
     --color-accent: rgb(0, 188, 212),
     --color-accent-contrast: #fff,
-    --reader-fontColor: #fff,
+    --reader-fontColor: #000,
     --color-button-primary: rgba(16, 83, 200, 1),
     --color-button-secondary: rgba(16, 83, 200, 0.05),
-    --color-bg-tab: rgba(16, 18, 22, 0.6),
-    --setting-btn-primary: #fff,
-    --setting-btn-secondary: var(--color-secondary),
+    --color-bg-tab: rgba(246, 246, 246, 0.84),
+    --setting-btn-primary: #3a00e5,
+    --setting-btn-secondary: #f7f5ff,
+  
+  // disable in develop branch, TODO improve darkmode color
+  //   --color-primary: #fff,
+  //   --color-secondary: #4d4d4d,
+  //   --color-tertiary: #67a3e0,
+  //   --color-disabled: #b7b7b7,
+  //   --color-light-grey: #f1f1f1,
+  //   --color-medium-grey: #e5e5e5,
+  //   --color-accent: rgb(0, 188, 212),
+  //   --color-accent-contrast: #fff,
+  //   --reader-fontColor: #fff,
+  //   --color-button-primary: rgba(16, 83, 200, 1),
+  //   --color-button-secondary: rgba(16, 83, 200, 0.05),
+  //   --color-bg-tab: rgba(16, 18, 22, 0.6),
+  //   --setting-btn-primary: #fff,
+  //   --setting-btn-secondary: var(--color-secondary),
+
   ),
 );
 
diff --git a/src/renderer/common/components/dialog/DialogWithRadix.tsx b/src/renderer/common/components/dialog/DialogWithRadix.tsx
deleted file mode 100644
index 1ea1988bd..000000000
--- a/src/renderer/common/components/dialog/DialogWithRadix.tsx
+++ /dev/null
@@ -1,134 +0,0 @@
-// ==LICENSE-BEGIN==
-// Copyright 2017 European Digital Reading Lab. All rights reserved.
-// Licensed to the Readium Foundation under one or more contributor license agreements.
-// Use of this source code is governed by a BSD-style license
-// that can be found in the LICENSE file exposed on Github (readium) in the project repository.
-// ==LICENSE-END==
-
-import * as React from "react";
-import * as Dialog from "@radix-ui/react-dialog";
-import { useTranslator } from "readium-desktop/renderer/common/hooks/useTranslator";
-import * as QuitIcon from "readium-desktop/renderer/assets/icons/baseline-close-24px.svg";
-import SVG from "readium-desktop/renderer/common/components/SVG";
-import { useSelector } from "readium-desktop/renderer/common/hooks/useSelector";
-import * as stylesModals from "readium-desktop/renderer/assets/styles/components/modals.css";
-import * as stylesButtons from "readium-desktop/renderer/assets/styles/components/buttons.css";
-import * as chevronDownIcon from "readium-desktop/renderer/assets/icons/chevron-down.svg";
-import classNames from "classnames";
-import { IRendererCommonRootState } from "readium-desktop/common/redux/states/rendererCommonRootState";
-
-export const DialogWithRadix: React.FC<React.PropsWithChildren<{}>> = (props) => {
-    const [open, setOpen] = React.useState(false);
-
-    const openFromState = useSelector((state: IRendererCommonRootState) => state.dialog.open);
-    React.useMemo(() => {
-        if (!openFromState) {
-            setOpen(false);
-        }
-    }, [openFromState]);
-
-    return (
-        <Dialog.Root
-            open={open}
-            onOpenChange={
-                (open) => {
-                    if (open) {
-                        setOpen(true);
-                    } else {
-                        setOpen(false);
-                    }
-                }}
-        >
-            {props.children}
-        </Dialog.Root>
-    );
-};
-
-export const DialogWithRadixTrigger = Dialog.Trigger;
-DialogWithRadixTrigger.displayName = Dialog.Trigger.displayName;
-
-const DialogContext = React.createContext<{
-    collapse: {
-        toggleCollapse: () => void;
-        isCollapsed: boolean;
-    };
-}>(undefined);
-
-export const DialogWithRadixContent: React.FC<React.PropsWithChildren<{}>> = (props) => {
-    const appOverlayElement = React.useMemo(() => document.getElementById("app-overlay"), []);
-    const [__] = useTranslator();
-    const [isCollapsed, setCollapse] = React.useState(false);
-
-    const toggleCollapse = () => {
-        setCollapse(!isCollapsed);
-    };
-
-    const dialogContextValue = { collapse: { toggleCollapse, isCollapsed } };
-
-    return (
-        <Dialog.Portal container={appOverlayElement}>
-            <div className={stylesModals.modal_dialog_overlay}></div>
-            <Dialog.Content className={classNames(stylesModals.modal_dialog, isCollapsed ? stylesModals["modal_dialog-collapsed"] : undefined)}
-                style={{
-                    zIndex: "10000",
-                }}
-                id="modalContainer">
-                <DialogContext.Provider value={dialogContextValue}>
-                    {props.children}
-                </DialogContext.Provider>
-            </Dialog.Content>
-        </Dialog.Portal>
-    );
-};
-DialogWithRadixContent.displayName = "DialogWithRadixContent";
-
-export const DialogTitle = Dialog.Title;
-DialogTitle.displayName = "DialogTitle";
-
-
-export const DialogHeader: React.FC<React.PropsWithChildren<{}>> = (props) => {
-    return (
-        <div className={stylesModals.modal_dialog_header}>
-            {props.children}
-
-        </div>
-    );
-};
-
-export const DialogCollapseButton: React.FC<{}> = () => {
-    const { collapse: { toggleCollapse } } = React.useContext(DialogContext);
-    return (
-        <button style={{ width: "20px", height: "20px" }} id="chevronButton" onClick={() => toggleCollapse()}>
-            <SVG ariaHidden={true} svg={chevronDownIcon} />
-        </button>
-    );
-};
-
-export const DialogCloseButton: React.FC<{}> = () => {
-    return (
-        <Dialog.Close asChild>
-            <button className={stylesButtons.button_transparency_icon} aria-label="Close">
-                <SVG ariaHidden={true} svg={QuitIcon} />
-            </button>
-        </Dialog.Close>
-    );
-};
-
-export const DialogContent: React.FC<React.PropsWithChildren<{}>> = (props) => {
-    const { collapse: { isCollapsed } } = React.useContext(DialogContext);
-    return (
-        <div className={classNames(stylesModals.modal_dialog_body, isCollapsed ? stylesModals["modal_dialog_body-collapsed"] : undefined)}>
-            {props.children}
-        </div>
-    );
-};
-
-export const DialogFooter: React.FC<React.PropsWithChildren<{}>> = (props) => {
-    return (
-        <div className={stylesModals.modal_dialog_footer}>
-            {props.children}
-        </div>
-    );
-};
-
-export const DialogClose = Dialog.Close;