diff --git a/messages-app-frontend/src/App.tsx b/messages-app-frontend/src/App.tsx
index 56296aabce931d81261903ac2cad69478dfdf0d8..a9bb053ad1bbbfb0f6533d64e817646dc678b040 100644
--- a/messages-app-frontend/src/App.tsx
+++ b/messages-app-frontend/src/App.tsx
@@ -5,7 +5,7 @@ import NewMessage from "./NewMessage";
 import Welcome from "./Welcome";
 import Message from "./Message";
 
-export const outsideColors = {
+const outsideColors = {
   discordMessageBox: "#313339",
   discordOutside: "#2b2d31",
   discordOutside2: "#232428",
@@ -17,8 +17,9 @@ export const outsideColors = {
 }
 
 export const appColors = {
-  //messageColor: "#008B8B"
-  messageColor: "#A5A6A8"
+  outsideColor: outsideColors.discordOutside,
+  outsideBoxColor: outsideColors.discordMessageBox,
+  singleMessageBoxColor: "#A5A6A8"
 }
 
 export type messageType = {
@@ -48,7 +49,7 @@ const api = axios.create({
 });
 
 const messageBox = {
-  bgcolor: outsideColors.discordMessageBox, 
+  bgcolor: appColors.outsideBoxColor, 
   marginX: 10, 
   padding: 3, 
   display: "grid", 
@@ -117,7 +118,8 @@ export class App extends React.Component{
           sx={{
             padding: 1, 
             margin: 1.5, 
-            width: "fit-content"
+            width: "fit-content",
+            backgroundColor: appColors.singleMessageBoxColor
           }}
         >
 
diff --git a/messages-app-frontend/src/Message.tsx b/messages-app-frontend/src/Message.tsx
index 5e340d0719f62d79c14b39cb008433366ce560b8..0d7beb4363a3d1cfae1946637120e4c6688a9085 100644
--- a/messages-app-frontend/src/Message.tsx
+++ b/messages-app-frontend/src/Message.tsx
@@ -3,7 +3,7 @@ import {IconButton, Paper, Typography} from '@mui/material';
 import DeleteIcon from '@mui/icons-material/Delete';
 import EditIcon from '@mui/icons-material/Edit';
 import type {messageType} from "./App";
-import {outsideColors, appColors} from "./App";
+import {appColors} from "./App";
 
 
 type IProps = {
@@ -63,7 +63,7 @@ export default class Message extends React.Component<IProps>{
                     padding: 1, 
                     margin: 1.5, 
                     width: "fit-content",
-                    bgcolor: appColors.messageColor
+                    bgcolor: appColors.singleMessageBoxColor
                 }}
             >
                 {this.props.singleMessage.message}
diff --git a/messages-app-frontend/src/Welcome.tsx b/messages-app-frontend/src/Welcome.tsx
index cefc14dccd1a2a07f2e325e55c4fdab1b014879e..1c9515f077ec0319f809ef173e16ddccbf086bcd 100644
--- a/messages-app-frontend/src/Welcome.tsx
+++ b/messages-app-frontend/src/Welcome.tsx
@@ -1,13 +1,13 @@
 import React from 'react';
 import {Typography, Box} from '@mui/material';
-import {outsideColors, appColors} from "./App";
+import {appColors} from "./App";
 
 export default class Welcome extends React.Component{
     render(): React.ReactNode {
         return(
             <Box 
                 sx={{
-                    bgcolor: outsideColors.discordMessageBox,
+                    bgcolor: appColors.outsideBoxColor,
                     //color: "white",
                     marginX: 10, 
                     padding: 1, 
@@ -16,7 +16,7 @@ export default class Welcome extends React.Component{
                     boxShadow: 20
                 }}
             >
-                <Typography variant="h3" sx={{textAlign: "center", margin: 3, color: appColors.messageColor}}>
+                <Typography variant="h3" sx={{textAlign: "center", margin: 3, color: appColors.singleMessageBoxColor}}>
                     Welcome to my Messaging Application!
                 </Typography>
             </Box>
diff --git a/messages-app-frontend/src/index.tsx b/messages-app-frontend/src/index.tsx
index 451e5db67d53a92489c205f27bcf0465afc49aef..e57cf7908b189c36983793e260db7e5968a78e3c 100644
--- a/messages-app-frontend/src/index.tsx
+++ b/messages-app-frontend/src/index.tsx
@@ -1,9 +1,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import {App} from './App';
+import {App, appColors} from './App';
 import CssBaseline from "@mui/material/CssBaseline";
 import { ThemeProvider, createTheme } from "@mui/material/styles";
-import {outsideColors} from "./App";
 
 /*
 export const colors = {
@@ -30,7 +29,7 @@ const myTheme = createTheme({
   palette: {
     background: {
       //default: "lightgrey"
-      default: outsideColors.discordOutside
+      default: appColors.outsideColor
     }
   }
 });