diff --git a/package-lock.json b/package-lock.json
index e17aa2f..f70c07e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,7 +5,6 @@
   "requires": true,
   "packages": {
     "": {
-      "name": "onlinecodeeditor",
       "version": "0.1.0",
       "dependencies": {
         "@testing-library/jest-dom": "^5.14.1",
@@ -2227,6 +2226,7 @@
         "jest-resolve": "^26.6.2",
         "jest-util": "^26.6.2",
         "jest-worker": "^26.6.2",
+        "node-notifier": "^8.0.0",
         "slash": "^3.0.0",
         "source-map": "^0.6.0",
         "string-length": "^4.0.1",
@@ -5746,6 +5746,7 @@
       "dependencies": {
         "anymatch": "~3.1.2",
         "braces": "~3.0.2",
+        "fsevents": "~2.3.2",
         "glob-parent": "~5.1.2",
         "is-binary-path": "~2.1.0",
         "is-glob": "~4.0.1",
@@ -7622,7 +7623,8 @@
         "esprima": "^4.0.1",
         "estraverse": "^5.2.0",
         "esutils": "^2.0.2",
-        "optionator": "^0.8.1"
+        "optionator": "^0.8.1",
+        "source-map": "~0.6.1"
       },
       "bin": {
         "escodegen": "bin/escodegen.js",
@@ -11622,6 +11624,7 @@
         "@types/node": "*",
         "anymatch": "^3.0.3",
         "fb-watchman": "^2.0.0",
+        "fsevents": "^2.1.2",
         "graceful-fs": "^4.2.4",
         "jest-regex-util": "^26.0.0",
         "jest-serializer": "^26.6.2",
@@ -13057,6 +13060,7 @@
       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
       "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
       "dependencies": {
+        "graceful-fs": "^4.1.6",
         "universalify": "^2.0.0"
       },
       "optionalDependencies": {
@@ -16815,6 +16819,7 @@
         "eslint-webpack-plugin": "^2.5.2",
         "file-loader": "6.1.1",
         "fs-extra": "^9.0.1",
+        "fsevents": "^2.1.3",
         "html-webpack-plugin": "4.5.0",
         "identity-obj-proxy": "3.0.0",
         "jest": "26.6.0",
@@ -20282,8 +20287,10 @@
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",
       "integrity": "sha512-9P3MWk6SrKjHsGkLT2KHXdQ/9SNkyoJbabxnKOoJepsvJjJG8uYTR3yTPxPQvNDI3w4Nz1xnE0TLHK4RIVe/MQ==",
       "dependencies": {
+        "chokidar": "^3.4.1",
         "graceful-fs": "^4.1.2",
-        "neo-async": "^2.5.0"
+        "neo-async": "^2.5.0",
+        "watchpack-chokidar2": "^2.0.1"
       },
       "optionalDependencies": {
         "chokidar": "^3.4.1",
@@ -20373,6 +20380,7 @@
         "anymatch": "^2.0.0",
         "async-each": "^1.0.1",
         "braces": "^2.3.2",
+        "fsevents": "^1.2.7",
         "glob-parent": "^3.1.0",
         "inherits": "^2.0.3",
         "is-binary-path": "^1.0.0",
@@ -20785,6 +20793,7 @@
         "anymatch": "^2.0.0",
         "async-each": "^1.0.1",
         "braces": "^2.3.2",
+        "fsevents": "^1.2.7",
         "glob-parent": "^3.1.0",
         "inherits": "^2.0.3",
         "is-binary-path": "^1.0.0",
@@ -21291,6 +21300,9 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
       "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
+      "dependencies": {
+        "graceful-fs": "^4.1.6"
+      },
       "optionalDependencies": {
         "graceful-fs": "^4.1.6"
       }
@@ -21787,6 +21799,9 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
       "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
+      "dependencies": {
+        "graceful-fs": "^4.1.6"
+      },
       "optionalDependencies": {
         "graceful-fs": "^4.1.6"
       }
diff --git a/src/App.css b/src/App.css
index 74b5e05..f63cbbd 100644
--- a/src/App.css
+++ b/src/App.css
@@ -14,7 +14,7 @@
 }
 
 .App-header {
-  background-color: #282c34;
+  background-color: #293428;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
diff --git a/src/Components/Editor.css b/src/Components/Editor.css
index 309eb3d..c1fcb2d 100644
--- a/src/Components/Editor.css
+++ b/src/Components/Editor.css
@@ -1,5 +1,5 @@
 .top-pane{
-  background-color: hsl(255,6%,25%);
+  background-color: #709b2c;
 }
 .pane{
   height: 50vh;
@@ -18,7 +18,7 @@
   display:flex;
   flex-direction: column;
   padding:.5rem;
-  background-color:hsl(255,6%,25%);
+  background-color:rgb(61, 68, 60);
 }
 .editor-title{
   display:flex;
diff --git a/src/Components/Editor.js b/src/Components/Editor.js
index d2b4e1c..cf31108 100644
--- a/src/Components/Editor.js
+++ b/src/Components/Editor.js
@@ -1,3 +1,4 @@
+//this is editor component
 import {React,useState} from 'react';
 import "codemirror/lib/codemirror.css"
 import "codemirror/theme/material.css";
diff --git a/src/Components/Home.js b/src/Components/Home.js
index 3631bd3..9faf1be 100644
--- a/src/Components/Home.js
+++ b/src/Components/Home.js
@@ -50,7 +50,7 @@ function Home() {
 
   return (
     <div
-      style={{ backgroundColor: "#2a283e", minHeight: "100vh", height: "auto" }}
+      style={{ backgroundColor: "#709b2c", minHeight: "100vh", height: "auto" }}
     >
       <Container style={wrapper}>
 
@@ -95,3 +95,4 @@ function Home() {
 }
 
 export default Home;
+//this is home component
\ No newline at end of file