diff --git a/src/AppDarkTheme.module.css b/src/AppDarkTheme.module.css
index e319acf..005ce46 100644
--- a/src/AppDarkTheme.module.css
+++ b/src/AppDarkTheme.module.css
@@ -1,3 +1,7 @@
+/**
+ * The coloring elements for dark theme
+ */
+
 .backgroundcolor{
     background-color: #141520;
 }
@@ -6,6 +10,10 @@
     color: white;
 }
 
+.subtextcolor{
+    color: #dedad6;
+}
+
 .navitem::after {
     background: white;
 }
diff --git a/src/AppLightTheme.module.css b/src/AppLightTheme.module.css
index 95b7e55..496bfc8 100644
--- a/src/AppLightTheme.module.css
+++ b/src/AppLightTheme.module.css
@@ -1,3 +1,7 @@
+/**
+ * The coloring elements for light theme
+ */
+
 .navitem::after {
     background: black;
 }
@@ -10,10 +14,14 @@
     color: black;
 }
 
+.subtextcolor {
+    color: #212529;
+}
+
 .hrcolor {
     border-color: rgba(0, 0, 0, 0.1);
 }
 
-.previewhover:hover{
+.previewhover:hover {
     box-shadow: rgba(2, 12, 27, 0.7) 0 0 0 5px;
 }
diff --git a/src/GlobalInfos.js b/src/GlobalInfos.js
index d44f051..0be8b80 100644
--- a/src/GlobalInfos.js
+++ b/src/GlobalInfos.js
@@ -1,7 +1,13 @@
 class GlobalInfos {
+    #darktheme = false;
+
     isDarkTheme() {
-        return true;
+        return this.#darktheme;
     };
+
+    enableDarkTheme(enable = true){
+        this.#darktheme = enable;
+    }
 }
 
 const StaticInfos = new GlobalInfos();
diff --git a/src/pages/SettingsPage/GeneralSettings.js b/src/pages/SettingsPage/GeneralSettings.js
index 5eb211d..c84e0b5 100644
--- a/src/pages/SettingsPage/GeneralSettings.js
+++ b/src/pages/SettingsPage/GeneralSettings.js
@@ -1,6 +1,9 @@
 import React from "react";
 import {Button, Col, Form} from "react-bootstrap";
 import style from "./GeneralSettings.module.css"
+import StaticInfos from "../../GlobalInfos";
+import darktheme from "../../AppDarkTheme.module.css";
+import lighttheme from "../../AppLightTheme.module.css";
 
 class GeneralSettings extends React.Component {
     constructor(props) {
@@ -37,9 +40,10 @@ class GeneralSettings extends React.Component {
     }
 
     render() {
+        const themeStyle = StaticInfos.isDarkTheme() ? darktheme : lighttheme;
         return (
             <>
-                <div className={style.GeneralForm}>
+                <div className={style.GeneralForm + ' ' + themeStyle.subtextcolor}>
                     <Form data-testid='mainformsettings' onSubmit={(e) => {
                         e.preventDefault();
                         this.saveSettings();
diff --git a/src/pages/SettingsPage/SettingsPage.module.css b/src/pages/SettingsPage/SettingsPage.module.css
index b958e19..8807796 100644
--- a/src/pages/SettingsPage/SettingsPage.module.css
+++ b/src/pages/SettingsPage/SettingsPage.module.css
@@ -3,8 +3,11 @@
     float: left;
     width: 10%;
     background-color: #d3dcef;
-    min-height: calc(100vh - 56px);
+    min-height: calc(100vh - 62px);
     min-width: 110px;
+
+    border-top-right-radius: 10px;
+    border-bottom-right-radius: 10px;
 }
 
 .SettingsSidebarTitle {
@@ -37,4 +40,4 @@
     box-shadow: #7d8dd4 0 0 0 5px;
     transition: all 300ms;
     cursor: pointer;
-}
\ No newline at end of file
+}