diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..834908f
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,54 @@
+.color-grid{
+    width:120px;
+    height:140px;
+    display:flex;
+    flex-direction: column;
+    align-content: space-around;
+}
+
+.color-grid .colorRow{
+    display:flex;
+    justify-content: space-around;
+    margin-top:10px;
+    width:230px;
+  }
+  
+  .color-grid .colorRow  div{
+    width:50px;
+    height:50px;
+    
+   
+  }
+  
+  #themeRed{
+      background-color:#ff0000;
+
+  }
+
+  #themeBlue{
+    background-color: #0000ff;
+}
+
+#themeGreen{
+    background-color: #00ff00;
+}
+
+#themeMustard{
+    background-color: #ffdb58;
+}
+
+#themeSalmon{
+    background-color: #FFA07A;
+}
+
+#themePurple{
+    background-color: #5b00d3;
+}
+
+#themeCyan{
+    background-color: #00FFFF;
+}
+
+#themePink{
+    background-color:#ffc0cb;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index e38aa07..be44ed1 100644
--- a/index.html
+++ b/index.html
@@ -9,6 +9,7 @@
     <link rel="preconnect" href="https://fonts.gstatic.com">
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="css/main.min.css">
+    <link rel="stylesheet" href="css/style.css">
 </head>
 
 <body data-theme="dark" onload="onLoadStartUp()" class="hide-completely">
@@ -656,6 +657,27 @@
                         <p>If this toggle is ON then pressing 'Enter' key will send messages</p>
                         <sm-switch id="is_enter_send_toggle" class="justify-right"></sm-switch>
                     </section>
+                    <section class="color-grid">
+                     <h4>Colors</h4>
+                     <div class="colorGrid">
+                        <div class="colorRow">
+                           <div id="themeRed" onclick="setTheme('Red')"></div>
+                           <div id="themeBlue" onclick="setTheme('Blue')"></div>
+                           <div id="themeGreen" onclick="setTheme('Green')"></div>
+                           <div id="themePurple" onclick="setTheme('Purple')"></div>
+                        </div>
+
+                        <div class="colorRow">
+                            <div id="themeCyan" onclick="setTheme('Cyan')"></div>
+                            <div id="themePink" onclick="setTheme('Pink')"></div>
+                            <div id="themeMustard" onclick="setTheme('Mustard')"></div>
+                            <div id="themeSalmon" onclick="setTheme('Salmon')"></div>
+                         </div>
+
+                    </div>
+                    <!-- <color-grid></color-grid> -->
+                    </section>
+
                 </div>
                 <div id="backup_panel" class="panel hide-completely">
                     <section>
@@ -682,6 +704,7 @@
 		</section>
     </main>
     <script src="scripts/components.js"></script>
+    <script src="scripts/script.js"></script>
     <script id="standard_UI_functions">
 
         const domRefs = {}
@@ -692,6 +715,7 @@
             return domRefs[elementId]
         }
 
+
         //Checks for internet connection status
         if (!navigator.onLine)
             notify('There seems to be a problem connecting to the internet, Please check you internet connection.', 'error', '', true)
diff --git a/scripts/components.js b/scripts/components.js
index 70ac864..bee52b6 100644
--- a/scripts/components.js
+++ b/scripts/components.js
@@ -1,3 +1,99 @@
+//Color Grid
+const colorGrid = document.createElement('template');
+colorGrid.innerHTML =`
+<style>
+*{
+    padding:0;
+    margin:0;
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+}
+
+.color-grid{
+    width:120px;
+    height:140px;
+    display:flex;
+    flex-direction: column;
+    align-content: space-around;
+}
+
+.color-grid .colorRow{
+    display:flex;
+    justify-content: space-around;
+    margin-top:10px;
+    width:230px;
+  }
+  
+  .color-grid .colorRow  div{
+    width:50px;
+    height:50px;
+    
+   
+  }
+  
+  #themeRed{
+      background-color:#ff0000;
+  }
+
+  #themeBlue{
+    background-color: #0000ff;
+}
+
+#themeGreen{
+    background-color: #00ff00;
+}
+
+#themeMustard{
+    background-color: #ffdb58;
+}
+
+#themeSalmon{
+    background-color: #FFA07A;
+}
+
+#themeYellow{
+    background-color: #ffff00;
+}
+
+#themeCyan{
+    background-color: #00FFFF;
+}
+
+#themePink{
+    background-color:#ffc0cb;
+}
+
+</style>
+<div class="colorGrid">
+    <div class="colorRow">
+        <div id="themeRed"></div>
+        <div id="themeBlue"></div>
+        <div id="themeGreen"></div>
+        <div id="themeYellow"></div>
+    </div>
+
+    <div class="colorRow">
+        <div id="themeCyan"></div>
+        <div id="themePink"></div>
+        <div id="themeMustard"></div>
+        <div id="themeSalmon"></div>
+    </div>
+
+</div> `;
+
+customElements.define('color-grid',
+    class extends HTMLElement {
+        constructor() {
+            super()
+            this.attachShadow({
+                mode: 'open'
+            }).append(colorGrid.content.cloneNode(true))
+        }
+
+    
+    })
+
+
 //Button
 const smButton = document.createElement('template')
 smButton.innerHTML = `
diff --git a/scripts/script.js b/scripts/script.js
new file mode 100644
index 0000000..54ebb03
--- /dev/null
+++ b/scripts/script.js
@@ -0,0 +1,79 @@
+
+function getHexCode(colorName){
+    switch(colorName){
+        case "Red":
+            return "#ff0000";
+
+        case "Blue":
+            return "#0000ff";
+
+        case "Purple":
+            return "#5b00d3";
+
+        case "Mustard":
+            return "#ffdb58";
+
+        case "Green":
+            return "#00ff00";
+
+        case "Pink":
+            return "#ffc0cb";
+
+        case "Cyan":
+            return "#00ffff";
+
+        case "Salmon":
+            return "#FFA07A";
+    }
+}
+
+function saveColor(colorName){
+
+    if(colorName){
+        localStorage.setItem("color", colorName);
+    }
+
+}
+
+let selected = false;
+let previousColor;
+function selectedColor(colorName){
+    let colorID = "theme" + colorName;
+    let colorCard = getRef(colorID);
+    let previousColorID;
+    let previousColorCard;
+
+    if(selected){
+        previousColorID = "theme" + previousColor;
+        previousColorCard = getRef(previousColorID);
+        previousColorCard.style.border = "none";
+    }
+
+    if(localStorage.getItem('theme') =='dark'){
+         
+        colorCard.style.border = "4px solid #fff";
+        
+    }else{
+        
+        colorCard.style.border = "4px solid #000";
+    }
+
+    selected = true;
+    previousColor = colorName;
+    
+    
+    
+
+}
+
+function setTheme(colorName){
+
+    colorHex = getHexCode(colorName);
+
+    document.body.style.setProperty('--accent-color', colorHex);
+
+    saveColor(colorName);
+
+    selectedColor(colorName);
+    
+}
\ No newline at end of file
