diff --git a/src/data/gitmojis.json b/src/data/gitmojis.json
index 3270925..b19b043 100644
--- a/src/data/gitmojis.json
+++ b/src/data/gitmojis.json
@@ -3,97 +3,116 @@
         {
             "emoji": "⬆️",
             "code": ":arrow_up:",
-            "description": "Upgrading dependencies."
+            "description": "Upgrading dependencies.",
+			"name": "arrow-up"
         },
         {
             "emoji": "⬇️",
             "code": ":arrow_down:",
-            "description": "Downgrading dependencies."
+            "description": "Downgrading dependencies.",
+			"name": "arrow-down"
         },
         {
             "emoji": "🎨",
             "code": ":art:",
-            "description": "Improving structure / format of the code."
+            "description": "Improving structure / format of the code.",
+			"name": "art"
         },
         {
             "emoji": "🔥",
             "code": ":fire:",
-            "description": "Removing code or files."
+            "description": "Removing code or files.",
+			"name": "fire"
         },
         {
             "emoji": "💚",
             "code": ":green_heart:",
-            "description": "Fixing CI Build."
+            "description": "Fixing CI Build.",
+			"name": "green-heart"
         },
         {
             "emoji": "🔒",
             "code": ":lock:",
-            "description": "Fixing security issues."
+            "description": "Fixing security issues.",
+			"name": "lock"
         },
         {
             "emoji": "✨",
             "code": ":sparkles:",
-            "description": "Introducing new features."
+            "description": "Introducing new features.",
+			"name": "sparkles"
         },
         {
             "emoji": "🐛",
             "code": ":bug:",
-            "description": "Fixing a bug."
+            "description": "Fixing a bug.",
+			"name": "bug"
         },
         {
             "emoji": "🚧",
             "code": ":construction:",
-            "description": "Work in progress."
+            "description": "Work in progress.",
+			"name": "construction"
         },
         {
             "emoji": "📝",
             "code": ":memo:",
-            "description": "Writing docs."
+            "description": "Writing docs.",
+			"name": "memo"
         },
         {
             "emoji": "✅",
             "code": ":white_check_mark:",
-            "description": "Adding tests."
+            "description": "Adding tests.",
+			"name": "white-check-mark"
         },
         {
             "emoji": "🍎",
             "code": ":apple:",
-            "description": "Fixing something on macOS."
+            "description": "Fixing something on macOS.",
+			"name": "apple"
         },
         {
             "emoji": "🐧",
             "code": ":penguin:",
-            "description": "Fixing something on Linux."
+            "description": "Fixing something on Linux.",
+			"name": "penguin"
         },
         {
             "emoji": "🏁",
             "code": ":checkered_flag:",
-            "description": "Fixing something on Windows."
+            "description": "Fixing something on Windows.",
+			"name": "checkered-flag"
         },
         {
             "emoji": "🔖",
             "code": ":bookmark:",
-            "description": "Releasing / Version tags."
+            "description": "Releasing / Version tags.",
+			"name": "bookmark"
         },
         {
             "emoji": "🚨",
             "code": ":rotating_light:",
-            "description": "Removing linter warnings."
+            "description": "Removing linter warnings.",
+			"name": "rotating-light"
         },
         {
             "emoji": "🚀",
             "code": ":rocket:",
-            "description": "Deploying stuff."
+            "description": "Deploying stuff.",
+			"name": "rocket"
         },
         {
             "emoji": "⚡️",
             "code": ":zap:",
-            "description": "Improving performance."
+            "description": "Improving performance.",
+			"name": "zap"
         },
         {
             "emoji": "🔧",
             "code": ":wrench:",
-            "description": "Changing configuration files."
+            "description": "Changing configuration files.",
+			"name": "wrench"
         }
     ]
 }
diff --git a/src/data/schema.json b/src/data/schema.json
index c10e79c..0a07b93 100644
--- a/src/data/schema.json
+++ b/src/data/schema.json
@@ -28,10 +28,10 @@
                   "id":"http://jsonschema.net/gitmojis/0/emoji",
                   "required": true
                },
-               "image":{
+               "name":{
                   "type":"string",
-                  "id":"http://jsonschema.net/gitmojis/0/image",
-                  "required": false
+                  "id":"http://jsonschema.net/gitmojis/0/name",
+                  "required": true
                }
             }
          }
diff --git a/src/styles/_includes/_flexbox.scss b/src/styles/_includes/_flexbox.scss
index dfb8d91..c8b1af8 100644
--- a/src/styles/_includes/_flexbox.scss
+++ b/src/styles/_includes/_flexbox.scss
@@ -1 +1 @@
-.col-xs-10,.col-xs-12,.col-xs-2,.row{box-sizing:border-box}.container{margin-right:auto;margin-left:auto}.row{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex:0;-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-.5rem;margin-left:-.5rem}.col-xs-12{-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:1.25rem;padding-left:1.25rem;-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-xs-10{-webkit-flex-basis:83.333%;-ms-flex-preferred-size:83.333%;flex-basis:83.333%;max-width:83.333%}.col-xs-2{-webkit-flex-basis:16.667%;-ms-flex-preferred-size:16.667%;flex-basis:16.667%;max-width:16.667%}.center-xs{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center}.middle-xs{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.around-xs{-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around}@media only screen and (min-width:48em){.container{width:49rem}.col-sm-6{box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:1.25rem;padding-left:1.25rem;-webkit-flex-basis:50%;-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}}@media only screen and (min-width:64em){.container{width:65rem}.col-md-4,.col-md-5,.col-md-8{box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:1.25rem;padding-left:1.25rem}.col-md-4{-webkit-flex-basis:33.333%;-ms-flex-preferred-size:33.333%;flex-basis:33.333%;max-width:33.333%}.col-md-5{-webkit-flex-basis:41.667%;-ms-flex-preferred-size:41.667%;flex-basis:41.667%;max-width:41.667%}.col-md-8{-webkit-flex-basis:66.667%;-ms-flex-preferred-size:66.667%;flex-basis:66.667%;max-width:66.667%}}
+.col-xs-10,.col-xs-12,.col-xs-2,.col-xs-4,.col-xs-8,.row{box-sizing:border-box}.container{margin-right:auto;margin-left:auto}.row{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex:0;-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-.5rem;margin-left:-.5rem}.col-xs-12{-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:1.25rem;padding-left:1.25rem;-webkit-flex-basis:100%;-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.col-xs-10{-webkit-flex-basis:83.333%;-ms-flex-preferred-size:83.333%;flex-basis:83.333%;max-width:83.333%}.col-xs-2{-webkit-flex-basis:16.667%;-ms-flex-preferred-size:16.667%;flex-basis:16.667%;max-width:16.667%}.center-xs{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center}.middle-xs{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.around-xs{-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around}@media only screen and (min-width:48em){.container{width:49rem}.col-sm-6{box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:1.25rem;padding-left:1.25rem;-webkit-flex-basis:50%;-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}}@media only screen and (min-width:64em){.container{width:65rem}.col-md-5,.col-md-8,.col-md-3{box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;padding-right:1.25rem;padding-left:1.25rem}.col-md-3 {-ms-flex-preferred-size: 25%;flex-basis: 25%;max-width: 25%;}}
diff --git a/src/styles/_includes/_vars.scss b/src/styles/_includes/_vars.scss
index 498aa70..321e421 100644
--- a/src/styles/_includes/_vars.scss
+++ b/src/styles/_includes/_vars.scss
@@ -4,3 +4,23 @@ $white: #FFF;
 $menu: #ff5a79;
 $black: #000;
 $pink: #ff5a79;
+
+// Emoji colors
+
+$fire: #ff9d44;
+$memo: #fff6d9;
+$lock: #ffce49;
+$greenHeart: #77e856;
+$apple: #f94e43;
+$rotatingLight: #61696d;
+$bug: #8cd842;
+$sparkles: ;
+$construction: ;
+$whiteCheckMark: ;
+$penguin: #fa9a3f;
+$checkeredFlag:;
+$bookmark:;
+$rocket: #00a9f0;
+$zap:;
+$wrench:;
+$art:;
diff --git a/src/styles/style.scss b/src/styles/style.scss
index 40fc0c2..6f7731b 100644
--- a/src/styles/style.scss
+++ b/src/styles/style.scss
@@ -28,13 +28,9 @@ a {
 }
 
 code {
-	padding: 1px 3px;
-	font-size: .85em;
-	white-space: pre-wrap;
-	border: 1px solid #E3EDF3;
-	border-radius: 2px;
-	font-family: Consolas, Inconsolata, monospace, sans-serif;
-	background: #F7FAFB;
+	font-family: Avenir;
+	font-weight: 700;
+	font-size: 1.25em;
 }
 
 section {
@@ -46,6 +42,10 @@ section {
 	padding: 5em 2em;
 }
 
+.emoji-container {
+	background-color: #f5f5f5;
+}
+
 .gitmoji-logo {
 	width: 100%;
 	height: 90px;
@@ -87,7 +87,7 @@ section {
 }
 
 .wrap {
-	max-width: 1200px;
+	max-width: 1100px;
 	margin: 0 auto;
 }
 
@@ -99,7 +99,7 @@ main.wrap {
 	display: flex;
 
 	.gitmoji {
-		font-size: 3em;
+		font-size: 5em;
 	}
 
 	&-card {
@@ -107,8 +107,10 @@ main.wrap {
 		margin: 1em 0;
 		flex: 1;
 		transition: all .25s ease-out;
-		border-radius: 2px;
-		box-shadow: 0 5px 10px 0 rgba(168, 182, 191, .6);
+		border-radius: 4px;
+		box-shadow: 0 1px 2px 0 rgba(168, 182, 191, .6);
+		overflow: hidden;
+		text-align: center;
 
 		&:hover {
 			box-shadow: 0 10px 20px 0 rgba(168, 182, 191, .6)
@@ -116,16 +118,18 @@ main.wrap {
 	}
 
 	&-info {
-		padding: 2em .5em;
+		padding: 1.5em;
+	}
+
+	&-header {
+		align-self: flex-start;
+		padding-top: 2em;
+		padding-bottom: .85em;
 	}
 
 	&-data {
 		display: flex;
 		align-items: center;
-
-		.icon {
-			margin: 0 5px;
-		}
 	}
 }
 
@@ -163,9 +167,6 @@ main.wrap {
 }
 
 @media(max-width: 768px) {
-	body {
-		font-size: 18px;
-	}
 	footer nav, footer h3 {
 		justify-content: center!important;
 		text-align: center!important;
@@ -173,6 +174,12 @@ main.wrap {
 }
 
 
+@each $gitmoji, $color in (fire: $fire, lock: $lock, green-heart: $greenHeart, apple: $apple, rotating-light: $rotatingLight, bug: $bug, penguin: $penguin, rocket: $rocket) {
+	.#{$gitmoji} {
+		background-color: $color;
+	}
+}
+
 #joy, #loved, #haha, #sunglasses, #sexy, #tongue {
 	opacity: 0;
 }
diff --git a/src/templates/index.pug b/src/templates/index.pug
index 56e1615..ffdbf86 100644
--- a/src/templates/index.pug
+++ b/src/templates/index.pug
@@ -21,7 +21,7 @@ html
 		link(href="css/style.css", rel="stylesheet", type="text/css")
 		//-style
 			include ../../dist/css/style.css
-	body
+	body.emoji-container
 		include _includes/_icons.pug
 		include _includes/_nav.pug
 		header.header
@@ -29,13 +29,12 @@ html
 		main.wrap
 			.row.around-xs
 				each gitmoji in emojis.gitmojis
-					article.col-xs-12.col-sm-6.col-md-4.emoji
-						.emoji-card.row.middle-xs
-							.emoji-icon.col-md-4.center-xs
-								span.gitmoji=gitmoji.emoji
-							.emoji-info.col-md-8
-								header.emoji-data
-									code=gitmoji.code
+					article.emoji.col-xs-12.col-sm-6.col-md-3
+						.emoji-card
+							header(class=gitmoji.name+' emoji-header')
+								span.emoji-icon.gitmoji=gitmoji.emoji
+							.emoji-info
+								code=gitmoji.code
 								p=gitmoji.description
 		include _includes/_footer.pug
 	script.