diff --git a/index.html b/index.html
index 4ab7666..bbcec10 100644
--- a/index.html
+++ b/index.html
@@ -1,4 +1,5 @@
 <!doctype html>
+<!-- https://coolors.co/2b2d42-8d99ae-edf2f4-ef233c-d90429 -->
 <html lang="en">
 
 <head>
@@ -15,7 +16,7 @@
       margin: 0;
       padding: 0;
       font-family: sans-serif;
-      background-color: #ededed;
+      background-color: #EDF2F4;
     }
   </style>
   <title>simple-food-diary</title>
diff --git a/src/diary-item.ts b/src/diary-item.ts
index 69fc344..7c10239 100644
--- a/src/diary-item.ts
+++ b/src/diary-item.ts
@@ -9,7 +9,14 @@ class DiaryItem extends LitElement{
     @property({type: String}) name = "";
     @property({type:String}) icon = "";
 
-    static styles = css``;
+    static styles = css`
+        .selected{
+            background-color: #8D99AE;
+        }
+
+        .unselected{
+        }
+    `;
 
     constructor(){
         super();
@@ -18,8 +25,10 @@ class DiaryItem extends LitElement{
 
     render(){
         return html`
-            <fa-icon class="${this.icon}"></fa-icon>
-            <p> ${this.name}</p>
+            <div class="${this.selected ? 'selected' : 'unselected'}">
+                <fa-icon class="${this.icon}"></fa-icon>
+                <p> ${this.name}</p>
+            </div>
         `;
     }
 }
\ No newline at end of file
