diff --git a/src/components/Snippet.jsx b/src/components/Snippet.jsx
index 2055838..f5e0f0c 100644
--- a/src/components/Snippet.jsx
+++ b/src/components/Snippet.jsx
@@ -8,7 +8,7 @@ import 'brace/theme/textmate';
 import Title from './common/Title';
 import Spinner from './common/Spinner';
 import * as actions from '../actions';
-import { downloadSnippet } from '../helpers';
+import { downloadSnippet, copyToClipboard, parseDate } from '../helpers';
 
 import '../styles/Snippet.styl';
 
@@ -18,6 +18,9 @@ class Snippet extends React.Component {
     this.state = { isShowEmbed: false };
     this.toggleEmbed = this.toggleEmbed.bind(this);
     this.download = this.download.bind(this);
+    this.copyClipboard = (e) => {
+      copyToClipboard(e, 'embedded');
+    };
   }
 
   componentDidMount() {
@@ -51,31 +54,41 @@ class Snippet extends React.Component {
         <div className="snippet" key="Snippet">
           <div className="snippet-header">
             <div className="snippet-data">
+              <span className="snippet-data-title">{snippetTitle}</span>
+              <div className="snippet-data-tags">
+                {snippet.get('tags').map(item => <span className="snippet-data-tag" key={item}>{item}</span>)}
+              </div>
+              <span className="snippet-data-meta">{parseDate(snippet.get('created_at'))}, by Guest</span>
+            </div>
+            <div className="snippet-data-actions">
+              <span className="snippet-data-lang">{syntax}</span>
               <div>
-                <span className="snippet-data-title">{snippetTitle}</span>
-                <span className="snippet-data-lang">[ {syntax} ]</span>
+                <button className="snippet-button">Raw</button>
+                <button className="snippet-button" onClick={this.download}>Download</button>
+                <button
+                  className={`snippet-button ${this.state.isShowEmbed}`}
+                  key="snippet-details"
+                  onClick={this.toggleEmbed}
+                  onKeyPress={this.toggleEmbed}
+                >
+                  Embed
+                </button>
               </div>
-              <span className="snippet-data-author">By Guest</span>
             </div>
-            <button
-              className="snippet-button"
-              key="snippet-details"
-              onClick={this.toggleEmbed}
-              onKeyPress={this.toggleEmbed}
-            >
-              Embed
-            </button>
           </div>
           <div className={`snippet-embed ${this.state.isShowEmbed}`}>
+            <span className="snippet-embed-close" onClick={this.toggleEmbed} role="presentation" />
             <p className="snippet-embed-text">
               In order to embed this content into your website or blog,
               simply copy and paste code provided below:
             </p>
             <input
+              id="embedded"
               className="input"
               type="text"
               defaultValue={`<script src='http://xsnippet.org/${snippet.get('id')}/embed/'></script>`}
             />
+            <button className="snippet-button embed" onClick={this.copyClipboard}>Copy</button>
           </div>
           <div className="snippet-code">
             <AceEditor
@@ -94,10 +107,6 @@ class Snippet extends React.Component {
               }}
               value={`${snippet.get('content')}`}
             />
-            <div className="snippet-code-bottom-bar">
-              <button className="snippet-button light">Raw</button>
-              <button className="snippet-button light" onClick={this.download}>Download</button>
-            </div>
           </div>
         </div>,
       ]
diff --git a/src/helpers/index.js b/src/helpers/index.js
index d2f2388..ce2db31 100644
--- a/src/helpers/index.js
+++ b/src/helpers/index.js
@@ -36,4 +36,19 @@ function downloadSnippet(snippet) {
   download(content, name, 'text/plain');
 }
 
-export { regExpEscape, downloadSnippet };
+function copyToClipboard(e, id) {
+  document.getElementById(id).select();
+  document.execCommand('copy');
+  e.target.focus();
+}
+
+// This function is here just because I don't want to pull the whole moment.js
+// only for one tiny date
+function parseDate(d) {
+  const date = new Date(d);
+  const day = date.getDate() < 10 ? `0${date.getDate()}` : date.getDate();
+  const month = date.getMonth() < 10 ? `0${date.getMonth()}` : date.getMonth();
+  return `${day}.${month}.${date.getFullYear()}`;
+}
+
+export { regExpEscape, downloadSnippet, copyToClipboard, parseDate };
diff --git a/src/index.html b/src/index.html
index be1f3b2..8c69f15 100644
--- a/src/index.html
+++ b/src/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link href="https://fonts.googleapis.com/css?family=Quicksand:300,400|Raleway:600" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Quicksand:300,400|Raleway:600|Roboto:400,300,500,700" rel="stylesheet">
     <title>XSnippet</title>
   </head>
   <body>
diff --git a/src/styles/Snippet.styl b/src/styles/Snippet.styl
index 57ce862..82fc23d 100644
--- a/src/styles/Snippet.styl
+++ b/src/styles/Snippet.styl
@@ -10,77 +10,113 @@
     display: flex
     flex-flow: row nowrap
     justify-content: space-between
-    align-items: center
-    min-height: offset
-    color: text-light
-    background: snippet-header-light
-    border-left: 40px solid snippet-header-normal
+    min-height: 110px
     padding: 15px 20px
+    color: text-light
+    background: snippet-header-green-normal
+    border-left: 40px solid snippet-header-border
+    font-family: font-roboto
 
   &-data
-    & > div
-      display: flex
+    display: flex
+    flex-flow: column nowrap
+    justify-content: space-between
     &-title
       font-size: 20px
-      margin-right: 20px
+      letter-spacing: .2px
     &-author
       display: block
       margin-top: 7px
       font-size: 14px
+    &-actions
+      display: flex
+      flex-flow: column nowrap
+      justify-content: space-between
+      align-items: flex-end
+    &-lang
+      font-size: 14px
+    &-meta
+      opacity: .8
+      font-size: 12px
+      font-weight: 300
+    &-tag
+      margin-right: 5px
+      padding: 3px 8px
+      font-size: 12px
+      font-weight: 300
+      color: text-light
+      border-radius: 9.5px
+      background-color: rgba(text-light, .2)
+      letter-spacing: .4px
+      &:last-shild
+        margin-right: 0
 
   &-button
-    padding: 9px 12px
+    margin-right: 10px
+    padding: 11px 21px
     color: text-light
-    font-size: 17px
-    font-family: font-quicksand
+    font-size: 14px
+    font-weight: 400
     border-radius: 0
     border: 1px solid text-light
-    background-color: button-normal
+    background-color: button-active
+    text-transform: uppercase
     cursor: pointer
+    &:last-child
+      margin-right: 0
+    &.true
     &:hover
-      background-color: button-light-normal
+      background-color: text-light
+      color: button-active
+    &.embed
+      margin-left: 10px
+      padding: 8px 18px
+      font-size: 12px
+      text-transform: none
+      border: none
+      &:hover
+        color: text-light
+        background-color: button-embed-hover
 
   &-embed
-    min-height: 80px
-    background-color: snippet-header-normal
-    border-left: 40px solid snippet-header-dark
-    padding: 13px 20px 15px
+    position: relative
+    min-height: 84px
+    padding: 15px 20px
+    background-color: snippet-header-embed
+    border-left: 40px solid snippet-header-embed-dark
     &.false
       display: none
     &-text
-      color: text-light
-      font-family: font-quicksand
-      font-size: 14px
       padding-bottom: 10px
+      color: text-dark
+      font-family: font-roboto
+      font-weight: 300
+      font-size: 12px
     & input
       basic-input()
-      color: text-dark
-      background-color: snippet-content-light
       padding: 4px 9px
-      font-size: 15px
-
-  &-code
-    flex: 1
-    position: relative
-    &-bottom-bar
-      bottom: 0
-      left: 0
-      right: 0
-      text-align: right
-      padding: 10px 20px
-      border-top: 1px solid border-light
+      width: auto
+      min-width: 450px
+      min-height: 30px
+      color: text-dark
       background-color: snippet-content-light
-    &-button
-      color: text-light
-      border: none
-      margin-right: 3px
-      font-size: 17px
-      font-family: font-quicksand
-      padding: 10px 14px
+      font-size: 13px
+    &-close
+      position: absolute
+      width: 12px
+      height: 12px
+      top: 15px
+      right: 15px
       cursor: pointer
-      outline: none
-      text-decoration: none
-      &.light
-        background-color: button-light-normal
-        &:hover
-          background-color: button-light-active
+      &::before
+      &::after
+        content: ''
+        position: absolute
+        width: 1px
+        height: 14px
+        left: 6px
+        background-color: snippet-embed-close
+      &::before
+        transform: rotate(45deg)
+      &::after
+        transform: rotate(-45deg)
diff --git a/src/styles/common/colors.styl b/src/styles/common/colors.styl
index 2a023e4..6d43468 100644
--- a/src/styles/common/colors.styl
+++ b/src/styles/common/colors.styl
@@ -7,6 +7,8 @@ color-gainboro-white-s0 = #e8e8e8
 color-white-smoke-white-s0 = #f3f3f3
 color-white-white-s0 = #fdfdfd
 color-gainsboro-white-s0 = #e4e4e4
+color-gainsboro-white-s1 = #e1e1e1
+color-shady-lady-gray-s0 = #979797
 
 color-regent-st-blue-blue-s28 = #9cd9cd
 color-downy-green-s42 = #7ad6c3
@@ -15,6 +17,7 @@ color-medium-aquamarine-blue-s50 = #62c4b0
 color-puerto-rico-green-s47 = #64beac
 color-niagara-green-s75 = #2aa88e
 color-shamrock-green-s73 = #33c0a3
+color-mountain-meadow-green-s89 = #11a88d
 color-elf-green-green-s82 = #178770
 
 color-shady-lady-grey-s0 = #979797
diff --git a/src/styles/common/variables.styl b/src/styles/common/variables.styl
index e00f9f3..e7d922e 100644
--- a/src/styles/common/variables.styl
+++ b/src/styles/common/variables.styl
@@ -20,9 +20,15 @@ sidebar-active-icon = color-puerto-rico-green-s47
 sidebar-normal-icon = color-dim-gray-gray-s0
 
 snippet-header-normal = color-niagara-green-s75
-snippet-header-dark = color-elf-green-green-s82
 snippet-header-light = color-medium-aquamarine-blue-s47
-snippet-content-light = color-white-white-s100 
+snippet-header-border = color-mountain-meadow-green-s89
+
+snippet-header-green-normal = color-shamrock-green-s73
+snippet-content-light = color-white-white-s100
+
+snippet-header-embed-dark = color-gainsboro-white-s1
+snippet-header-embed = color-white-smoke-white-s0
+snippet-embed-close = color-shady-lady-gray-s0
 
 language-bar-bg-normal = color-white-smoke-white-s0
 language-bar-bg-active = color-white-white-s0
@@ -34,8 +40,11 @@ button-normal = color-medium-aquamarine-blue-s47
 button-active = color-shamrock-green-s73
 button-light-normal = color-regent-st-blue-blue-s28
 button-light-active = color-downy-green-s42
+button-inverse-header = color-mountain-meadow-green-s89
+button-embed-hover = color-mountain-meadow-green-s89
 
 offset = 70px
 
 font-raleway = 'Raleway', sans-serif
 font-quicksand = 'Quicksand', sans-serif
+font-roboto = 'Roboto', sans-serif