diff --git a/front/src/assets/css/main.css b/front/src/assets/css/main.css
new file mode 100644
index 0000000..3a8c9e5
--- /dev/null
+++ b/front/src/assets/css/main.css
@@ -0,0 +1,12 @@
+:root {
+    --primary-text: #ffffff;
+    --secondary-text: #a9b2bc;
+    /* 9fa9ba */
+    --primary-background: #1d1d23;
+    --secondary-background: #24242b;
+    /* 1d1d23 */
+    --tertiary-background: #2a2a33;
+    --quaternary-background: #303a46;
+    --selected: #41474f;
+}
+/* .badge-primary { */
\ No newline at end of file
diff --git a/front/src/components/Badge.vue b/front/src/components/Badge.vue
index 72bf93e..ee118c3 100644
--- a/front/src/components/Badge.vue
+++ b/front/src/components/Badge.vue
@@ -37,7 +37,7 @@ export default {
 }
 
 .badge-primary {
-    color: #fff;
+    color: var(--primary-text);
     background-color: #007bff;
 }
 
diff --git a/front/src/main.ts b/front/src/main.ts
index 2b71777..7684bf5 100644
--- a/front/src/main.ts
+++ b/front/src/main.ts
@@ -2,6 +2,7 @@ import { createApp } from "vue";
 import router from "./router";
 import App from "./App.vue";
 import store from "./store/store";
+import "@/assets/css/main.css";
 
 const app = createApp(App);
 app.use(router);
diff --git a/front/src/views/modals/AddAccountModal.vue b/front/src/views/modals/AddAccountModal.vue
index 6b07af3..d1cbc17 100644
--- a/front/src/views/modals/AddAccountModal.vue
+++ b/front/src/views/modals/AddAccountModal.vue
@@ -174,6 +174,8 @@ fieldset {
     margin-top: 5px;
     border-radius: 5px;
     display: grid;
+    border-color: var(--primary-text);
+    color: var(--primary-text);
 }
 
 .config {
@@ -193,7 +195,7 @@ button {
     padding: 5px;
     padding: 7px 18px;
     background-color: #09a35b;
-    color: white;
+    color: var(--primary-text);
     border-radius: 5px;
     border: none;
     text-decoration: none;
@@ -207,10 +209,10 @@ button:hover {
 
 input {
     -webkit-box-flex: 1;
-    background-color: #303a46;
+    background-color: var(--quaternary-background);
     border: none;
     border-radius: 4px;
-    color: #fff;
+    color: var(--primary-text);
     -ms-flex: 1;
     flex: 1;
     font-family: inherit;
@@ -220,6 +222,10 @@ input {
     padding: 8px 9px;
 }
 
+label {
+    color: var(--secondary-text);
+}
+
 input:focus {
     outline: none;
 }
diff --git a/front/src/views/modals/Modal.vue b/front/src/views/modals/Modal.vue
index 0974ff0..699144d 100644
--- a/front/src/views/modals/Modal.vue
+++ b/front/src/views/modals/Modal.vue
@@ -45,8 +45,8 @@ function close() {
     display: flex;
     flex-direction: column;
     border-radius: 5px;
-    color: white;
-    background-color: #1d1d23;
+    color: var(--primary-text);
+    background-color: var(--secondary-background);
     padding: 20px;
 }
 
@@ -61,7 +61,7 @@ h2 {
 }
 
 .close-button {
-    background-color: #9fa9ba;
+    background-color: var(--secondary-text);
     cursor: pointer;
     height: 18px;
     mask: url(../../assets/close.svg);
diff --git a/front/src/views/room/Header.vue b/front/src/views/room/Header.vue
index e589507..6a9e58c 100644
--- a/front/src/views/room/Header.vue
+++ b/front/src/views/room/Header.vue
@@ -6,7 +6,7 @@ import { RoomType } from "@/store/models/model";
 
 const props = defineProps({ id: Number });
 const room = ref(store.getters.room(props.id));
-
+// todo auto load
 watch(
     () => props.id,
     (newId) => {
diff --git a/front/src/views/room/Message.vue b/front/src/views/room/Message.vue
index 9779ee9..81a3c27 100644
--- a/front/src/views/room/Message.vue
+++ b/front/src/views/room/Message.vue
@@ -90,15 +90,17 @@ const displayAddresses = (addressesId) => {
 <style scoped>
 .message {
     width: auto;
-    border: white 1px solid;
-    padding: 10px;
-    margin: 5px;
+    /* border: white 1px solid; */
+    margin: 10px 5px 0px 5px;
 }
 
 #context {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
+    background-color: blue;
+    padding: 3px;
+    margin-bottom: 6px;
 }
 
 iframe {
diff --git a/front/src/views/room/RoomView.vue b/front/src/views/room/RoomView.vue
index 5371cf8..50b5e85 100644
--- a/front/src/views/room/RoomView.vue
+++ b/front/src/views/room/RoomView.vue
@@ -53,8 +53,8 @@ const shouldDisplayComposer = () => {
 
 <style scoped>
 #main {
-    background-color: #1d1d23;
-    color: white;
+    background-color: var(--primary-background);
+    color: var(--primary-text);
     width: 100%;
 }
 
diff --git a/front/src/views/sidebar/accounts/Account.vue b/front/src/views/sidebar/accounts/Account.vue
index 18f3ed8..b7cf3bd 100644
--- a/front/src/views/sidebar/accounts/Account.vue
+++ b/front/src/views/sidebar/accounts/Account.vue
@@ -36,11 +36,11 @@ export default {
 }
 
 .container:hover {
-    background-color: aqua !important;
+    background-color: var(--selected);
 }
 
 .active {
-    border: 2px solid white;
+    border: 2px solid var(--primary-text);
     opacity: 0.9;
 }
 </style>
diff --git a/front/src/views/sidebar/accounts/Accounts.vue b/front/src/views/sidebar/accounts/Accounts.vue
index d36a119..e8fc6cf 100644
--- a/front/src/views/sidebar/accounts/Accounts.vue
+++ b/front/src/views/sidebar/accounts/Accounts.vue
@@ -38,8 +38,8 @@ export default {
     flex-direction: column;
     align-items: center;
     padding: 5px;
-    background-color: #2a2a33;
-    color: white;
+    background-color: var(--tertiary-background);
+    color: var(--primary-text);
 }
 
 #userMenu {
@@ -48,7 +48,7 @@ export default {
     background-color: yellow !important;
 }
 .divider {
-    border-top: 1px solid #bbb;
+    border-top: 1px solid var(--secondary-text);
     margin: 5px 0;
     width: 90%;
 }
diff --git a/front/src/views/sidebar/rooms/Room.vue b/front/src/views/sidebar/rooms/Room.vue
index 8d20094..9035f03 100644
--- a/front/src/views/sidebar/rooms/Room.vue
+++ b/front/src/views/sidebar/rooms/Room.vue
@@ -30,9 +30,9 @@ const router = useRouter();
             v-bind:class="store.state.activeRoom == props.data.id ? 'selected' : ''"
         >
             <BaseAvatar url="vue.png" />
-            <div id="content">
-                <div id="sender">{{ props.data.user }}</div>
-                <div id="object">{{ props.data.roomName }}</div>
+            <div class="content">
+                <div class="sender">{{ props.data.user }}</div>
+                <div class="object">{{ props.data.roomName }}</div>
             </div>
             <Badge class="badge" v-if="props.data.unseen > 0"
                 ><template v-slot:body>{{ props.data.unseen }}</template>
@@ -57,11 +57,11 @@ const router = useRouter();
 
 .room:hover,
 .selected {
-    background-color: #41474f;
+    background-color: var(--selected);
     border-radius: 8px;
 }
 
-#content {
+.content {
     display: flex;
     flex-grow: 1;
     flex-direction: column;
@@ -71,18 +71,18 @@ const router = useRouter();
     min-width: 0;
 }
 
-#sender {
+.sender {
     font-size: 1.4rem;
     line-height: 1.8rem;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     width: 100%;
-    color: white;
+    color: var(--primary-text);
 }
 
-#object {
-    color: #a9b2bc;
+.object {
+    color: var(--secondary-text);
     line-height: 1.8rem;
     font-size: 1.3rem;
     text-overflow: ellipsis;
diff --git a/front/src/views/sidebar/rooms/Rooms.vue b/front/src/views/sidebar/rooms/Rooms.vue
index 8e1ceff..8978ddd 100644
--- a/front/src/views/sidebar/rooms/Rooms.vue
+++ b/front/src/views/sidebar/rooms/Rooms.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="test">
+    <div class="content">
         <Room v-for="(room, index) in rooms()" :key="index" :data="room" />
     </div>
 </template>
@@ -21,10 +21,10 @@ export default {
 </script>
 
 <style scoped>
-.test {
+.content {
     display: flex;
     flex-direction: column;
-    background-color: #24242b;
+    background-color: var(--secondary-background);
     overflow: auto;
 }
 </style>
diff --git a/front/src/views/sidebar/rooms/threads/Thread.vue b/front/src/views/sidebar/rooms/threads/Thread.vue
index 3d89357..8e5b691 100644
--- a/front/src/views/sidebar/rooms/threads/Thread.vue
+++ b/front/src/views/sidebar/rooms/threads/Thread.vue
@@ -29,17 +29,17 @@ const router = useRouter();
     margin: -4px 4px 1px 4px;
     padding: 4px;
     cursor: pointer;
-    color: #a9b2bc;
+    color: var(--secondary-text);
 }
 
 .room:hover,
 .selected {
-    background-color: #41474f;
+    background-color: var(--selected);
     border-radius: 8px;
 }
 
 .room::before {
-    border-right: 1px solid white;
+    border-right: 1px solid var(--secondary-text);
     margin: 0 10px;
     content: "";
 }