diff --git a/app.vue b/app.vue
index 7af306b..cb5ec34 100644
--- a/app.vue
+++ b/app.vue
@@ -33,7 +33,7 @@ body {
   font-family: Arial, Helvetica, sans-serif;
   box-sizing: border-box;
   color: var(--text-color);
-	background: var(--optional-chat-background);
+	background: var(--optional-body-background);
   background-color: var(--chat-background-color);
   margin: 0;
 }
diff --git a/components/MessageArea.vue b/components/MessageArea.vue
index 18b9ac5..81221f0 100644
--- a/components/MessageArea.vue
+++ b/components/MessageArea.vue
@@ -259,6 +259,7 @@ router.beforeEach((to, from, next) => {
 	margin-bottom: 1dvh;
 	margin-left: 1dvw;
 	margin-right: 1dvw;
+	background: var(--optional-message-box-background);
 }
 
 #message-form {
@@ -268,11 +269,11 @@ router.beforeEach((to, from, next) => {
 
 #message-box-input {
 	width: 80%;
-	background-color: var(--sidebar-background-color);
 	border: none;
 	color: inherit;
 	padding-left: 1dvw;
 	padding-right: 1dvw;
+	background-color: var(--chatbox-background-color);
 }
 
 #messages {
diff --git a/pages/servers/[serverId]/channels/[channelId].vue b/pages/servers/[serverId]/channels/[channelId].vue
index 6bdcc7c..32b8104 100644
--- a/pages/servers/[serverId]/channels/[channelId].vue
+++ b/pages/servers/[serverId]/channels/[channelId].vue
@@ -95,6 +95,7 @@ function handleMemberClick(member: GuildMemberResponse) {
 	padding-left: 1dvw;
 	padding-right: 1dvw;
 	border-left: 1px solid var(--padding-color);
+	background: var(--optional-member-list-background);
 }
 
 #members-list {
diff --git a/public/themes/ash.css b/public/themes/ash.css
index b685551..75e0745 100644
--- a/public/themes/ash.css
+++ b/public/themes/ash.css
@@ -7,6 +7,7 @@
 	--sidebar-background-color: #3e3a37;
 	--sidebar-highlighted-background-color: #46423b;
 	--topbar-background-color: #3a3733;
+	--chatbox-background-color: #3a3733
 
     --padding-color: #e0e0e0;
     
diff --git a/public/themes/dark.css b/public/themes/dark.css
index 8245724..6bf7966 100644
--- a/public/themes/dark.css
+++ b/public/themes/dark.css
@@ -7,6 +7,7 @@
 	--sidebar-background-color: #2e2a27;
 	--sidebar-highlighted-background-color: #36322b;
 	--topbar-background-color: #2a2723;
+	--chatbox-background-color: #2a2723
 
     --padding-color: #484848;
     
diff --git a/public/themes/description.css b/public/themes/description.css
new file mode 100644
index 0000000..1e7db0d
--- /dev/null
+++ b/public/themes/description.css
@@ -0,0 +1,28 @@
+/* this is not a real theme, but rather a template for themes */
+:root {
+	--text-color: #161518;
+	--secondary-text-color: #2b2930;
+
+    --chat-background-color: #80808000;
+    --chat-highlighted-background-color: #ffffff20;
+	--sidebar-background-color: #80808000;
+	--sidebar-highlighted-background-color: #ffffff20;
+	--topbar-background-color: #80808000;
+
+    --padding-color: #80808000;
+    
+    --primary-color: #21b1ff80;
+    --primary-highlighted-color: #18a0df80;
+    --secondary-color: #ffd80080;
+    --secondary-highlighted-color: #dfb80080;
+    --accent-color: #ff218c80;
+    --accent-highlighted-color: #df1b6f80;
+
+    --optional-body-background: ; /* background element for the body */
+    --optional-chat-background: ; /* background element for the chat box */
+	--optional-topbar-background: ; /* background element for the topbar */
+	--optional-sidebar-background: ; /* background element for left server sidebar */
+	--optional-channel-list-background: ; /* background element for channel list and settings list */
+	--optional-member-list-background: ; /* background element for member list */
+	--optional-message-box-background: ; /* background element for message box */
+}
\ No newline at end of file
diff --git a/public/themes/light.css b/public/themes/light.css
index cb51d8c..04c2db6 100644
--- a/public/themes/light.css
+++ b/public/themes/light.css
@@ -7,6 +7,7 @@
 	--sidebar-background-color: #dbd8d4;
 	--sidebar-highlighted-background-color: #d4d0ca;
 	--topbar-background-color: #dfdbd6;
+	--chatbox-background-color: #dfdbd6
 
     --padding-color: #484848;
     
diff --git a/public/themes/rainbow-capitalism.css b/public/themes/rainbow-capitalism.css
index 8aeffc8..32f7449 100644
--- a/public/themes/rainbow-capitalism.css
+++ b/public/themes/rainbow-capitalism.css
@@ -7,6 +7,7 @@
 	--sidebar-background-color: #80808000;
 	--sidebar-highlighted-background-color: #ffffff20;
 	--topbar-background-color: #80808000;
+	--chatbox-background-color: #80808040;
 
     --padding-color: #80808000;
     
@@ -17,8 +18,11 @@
     --accent-color: #ff218c80;
     --accent-highlighted-color: #df1b6f80;
 
-    --optional-chat-background: linear-gradient(45deg, #ed222480, #ed222480, #ed222480, #ed222480, #ed222480, #ed222480, #f35b2280, #f9962180, #f5c11e80, #f1eb1b80, #f1eb1b80, #f1eb1b80, #63c72080, #0c9b4980, #21878d80, #3954a580, #61379b80, #93288e80);
+    /* --optional-body-background: background */
+    --optional-body-background: linear-gradient(45deg, #ed222480, #ed222480, #ed222480, #ed222480, #ed222480, #ed222480, #f35b2280, #f9962180, #f5c11e80, #f1eb1b80, #f1eb1b80, #f1eb1b80, #63c72080, #0c9b4980, #21878d80, #3954a580, #61379b80, #93288e80);
 	--optional-topbar-background: linear-gradient(-12.5deg, cyan, pink, white, pink, cyan);
 	--optional-sidebar-background: linear-gradient(90deg, #55cdfcd0, #f7a8b8d0, #ffffffd0, #f7a8b8d0, #55cdfcd0);
 	--optional-channel-list-background: linear-gradient(82deg, #d52c00b0, #e29688b0, #ffffffb0, #d27fa4b0, #a20062b0);
+	--optional-member-list-background: linear-gradient(3deg, #ff0080, #c8259d, #8c4799, #442e9f, #0032a0);
+    --optional-message-box-background: linear-gradient(3deg, #ff0080, #c8259d, #8c4799, #442e9f, #0032a0);
 }
\ No newline at end of file