diff --git a/assets/styles/base/type.scss b/assets/styles/base/type.scss
index 4712cb4..c2550ae 100644
--- a/assets/styles/base/type.scss
+++ b/assets/styles/base/type.scss
@@ -12,7 +12,7 @@ body {
   line-height: calculateRem($body-line-height);
   letter-spacing: -.03em;
   color: $text-color;
-  background-color: $dark-navy;
+  background-color: $navy-dark;
 }
 
 h1,
@@ -27,3 +27,17 @@ h6 {
 strong {
   font-weight: 700;
 }
+
+.main-heading {
+  text-transform: uppercase;
+  font-family: $secondary-font;
+  font-size: calculateRem(50);
+  color: $red;
+  letter-spacing: 4px;
+  line-height: 1.1;
+
+  @media (min-width: $desktop) {
+    font-size: calculateRem(68);
+    letter-spacing: 10px;
+  }
+}
diff --git a/assets/styles/base/variables.scss b/assets/styles/base/variables.scss
index 0e06cfd..4329f07 100644
--- a/assets/styles/base/variables.scss
+++ b/assets/styles/base/variables.scss
@@ -13,7 +13,7 @@ $blue: #3830cf;
 $blue-highlight: #0069d9; // button hover
 $blue-light: #2D3657;
 $navy: #1c2449;
-$dark-navy: #0c143a;
+$navy-dark: #0c143a;
 $red: #d4434a;
 $dark-red: #AA2E49;
 
diff --git a/components/browseArchives/style.scss b/components/browseArchives/style.scss
index be4e7c9..568dc5c 100644
--- a/components/browseArchives/style.scss
+++ b/components/browseArchives/style.scss
@@ -9,11 +9,11 @@
   }
 
   h4 {
-    font-size: calculateRem(20);
-    margin-bottom: calculateRem(24);
+    font-size: calculateRem(30);
+    margin-bottom: calculateRem(28);
     color: #fff;
     font-family: $secondary-font;
-    letter-spacing: 1px;
+    letter-spacing: 4px;
   }
 }
 
diff --git a/components/interviews/interviewsList/style.scss b/components/interviews/interviewsList/style.scss
index b6aaed3..42d1388 100644
--- a/components/interviews/interviewsList/style.scss
+++ b/components/interviews/interviewsList/style.scss
@@ -43,7 +43,23 @@
     left: 0;
     height: 100%;
     overflow: auto;
-    width: 96%;
+    width: 94%;
+  }
+
+  /* width */
+  &::-webkit-scrollbar {
+    width: calculateRem(16);
+  }
+
+  /* Track */
+  &::-webkit-scrollbar-track {
+    background: $navy-dark;
+    border: 2px solid $navy;
+  }
+
+  /* Handle */
+  &::-webkit-scrollbar-thumb {
+    background: $navy;
   }
 
   .letter-block {
diff --git a/components/interviews/singleInterview/style.scss b/components/interviews/singleInterview/style.scss
index da9169f..5434646 100644
--- a/components/interviews/singleInterview/style.scss
+++ b/components/interviews/singleInterview/style.scss
@@ -12,6 +12,7 @@
     position: absolute;
     top: 0;
     left: 0;
+    z-index: -1;
 
     &::before {
       bottom: calculateRem(17);
diff --git a/components/modal/style.scss b/components/modal/style.scss
index f6f4042..d4c7cfc 100644
--- a/components/modal/style.scss
+++ b/components/modal/style.scss
@@ -11,7 +11,7 @@
     width: 100vw;
     height: 100vh;
     z-index: 3;
-    background-color: $dark-navy;
+    background-color: $navy-dark;
     overflow: auto;
   }
 
diff --git a/components/pageHeader/index.js b/components/pageHeader/index.js
index ed7b0d4..b2b3dd4 100644
--- a/components/pageHeader/index.js
+++ b/components/pageHeader/index.js
@@ -13,7 +13,7 @@ const PageHeader = () => (
         <AnchorLink href="#browse">Browse Archives</AnchorLink>
       </nav>
       <img className="logo" src={`${publicRuntimeConfig.subDirPath}/static/img/ETHPrize-logo.png`} alt="ETHPrize logo" />
-      <h1>Ethereum Report</h1>
+      <h1 className="main-heading">Eth Report 2018</h1>
       <p>
         We&rsquo;ve interviewed 100+ developers to showcase the biggest opportunities in the
         Ethereum ecosystem
diff --git a/components/pageHeader/style.scss b/components/pageHeader/style.scss
index 56e6a19..22b55f6 100644
--- a/components/pageHeader/style.scss
+++ b/components/pageHeader/style.scss
@@ -14,19 +14,7 @@
   }
 
   h1 {
-    color: #fff;
     margin-bottom: calculateRem(24);
-    text-transform: uppercase;
-    font-family: $secondary-font;
-    font-size: calculateRem(40);
-    color: $red;
-    letter-spacing: 4px;
-    line-height: 1.1;
-
-    @media (min-width: $desktop) {
-      font-size: calculateRem(50);
-      letter-spacing: 10px;
-    }
   }
 
   p {
diff --git a/components/projectsList/style.scss b/components/projectsList/style.scss
index ba8becf..a602833 100644
--- a/components/projectsList/style.scss
+++ b/components/projectsList/style.scss
@@ -1,7 +1,7 @@
 @import './assets/styles/global.scss';
 
 .projects-list {
-  margin-bottom: calculateRem(24);
+  margin-bottom: calculateRem(32);
 
   ul {
     display: flex;
diff --git a/components/resources/index.js b/components/resources/index.js
index 7131d0b..b939e61 100644
--- a/components/resources/index.js
+++ b/components/resources/index.js
@@ -55,7 +55,7 @@ class Resources extends React.Component {
     return (
       <div className="resources-wrap" id="resources">
         <div className="container">
-          <h2>Resources</h2>
+          <h2 className="main-heading">Resources</h2>
           <div className="wordclouds-wrap">
             {
               Data.map((wordCloud, index) =>
diff --git a/components/resources/style.scss b/components/resources/style.scss
index c221233..475e5dc 100644
--- a/components/resources/style.scss
+++ b/components/resources/style.scss
@@ -4,19 +4,8 @@
   padding: calculateRem(40) 0;
 
   h2 {
-    text-transform: uppercase;
-    font-family: $secondary-font;
-    font-size: calculateRem(40);
-    color: $red;
-    letter-spacing: 4px;
     text-align: center;
-    line-height: 1.1;
     margin-bottom: calculateRem(24);
-
-    @media (min-width: $desktop) {
-      font-size: calculateRem(50);
-      letter-spacing: 10px;
-    }
   }
 }
 
diff --git a/components/searchBar/index.js b/components/searchBar/index.js
index 885bb09..8ef79b8 100644
--- a/components/searchBar/index.js
+++ b/components/searchBar/index.js
@@ -8,7 +8,7 @@ const { publicRuntimeConfig } = getConfig();
 const SearchBar = props => (
   <div className="search-bar" style={{ backgroundImage: `url(${publicRuntimeConfig.subDirPath}/static/img/header-bg.jpg)` }}>
     <div className="container">
-      <h3>Archives</h3>
+      <h3 className="main-heading">Archives</h3>
       <form className="search-form">
         <input
           className="search-input"
@@ -17,12 +17,13 @@ const SearchBar = props => (
           value={props.term}
           onChange={props.onSearchInputChange}
         />
+        <img className="search-icon" src={`${publicRuntimeConfig.subDirPath}/static/img/search-icon.svg`} alt="Search" />
         { props.isSearchActive && (
           <button
             className="search-clear-button"
             onClick={props.clearSearchInput}
           >
-            Clear search
+            <img src={`${publicRuntimeConfig.subDirPath}/static/img/clear-search-icon.svg`} alt="Clear search" />
           </button>
           )
         }
diff --git a/components/searchBar/style.scss b/components/searchBar/style.scss
index 5873573..c9fadf6 100644
--- a/components/searchBar/style.scss
+++ b/components/searchBar/style.scss
@@ -6,19 +6,19 @@
   background-position: center;
   background-size: cover;
   margin-bottom: calculateRem(56);
+  height: calculateRem(164);
+  padding-top: calculateRem(52);
 
-  h3 {
-    padding: calculateRem(24) 0 0;
-    text-transform: uppercase;
-    font-family: $secondary-font;
-    font-size: calculateRem(40);
-    color: $red;
-    letter-spacing: 4px;
-    line-height: 1.1;
+  @media (min-width: $desktop) {
+    height: calculateRem(240);
+    padding-top: calculateRem(88);
+  }
+
+  .main-heading {
+    margin-bottom: calculateRem(12);
 
     @media (min-width: $desktop) {
-      font-size: calculateRem(50);
-      letter-spacing: 10px;
+      margin-bottom: calculateRem(32);
     }
   }
 }
@@ -32,20 +32,31 @@
   width: 100%;
   height: calculateRem(44);
   border: 0;
-  box-shadow: 0 0 5px 5px $dark-navy;
+  box-shadow: 0 0 0 8px $navy-dark;
   padding: calculateRem(12);
   font-size: calculateRem(16);
 
   &:focus,
   &:active {
     outline: none;
+
+    .search-icon {
+      display: none;
+    }
   }
 }
 
+.search-icon {
+  position: absolute;
+  top: 50%;
+  right: calculateRem(12);
+  margin-top: calculateRem(-10);
+}
+
 .search-clear-button {
   position: absolute;
   top: 10%;
-  right: calculateRem(4);
+  right: 0;
   height: 80%;
   border: 0;
   padding: 0 calculateRem(16);
diff --git a/components/searchResults/index.js b/components/searchResults/index.js
index e76ee36..e7ba0f5 100644
--- a/components/searchResults/index.js
+++ b/components/searchResults/index.js
@@ -1,8 +1,11 @@
 import React from 'react';
 import Parser from 'html-react-parser';
 import { PropTypes } from 'prop-types';
+import getConfig from 'next/config';
 import './style.scss';
 
+const { publicRuntimeConfig } = getConfig();
+
 const SearchResults = (props) => {
   if (!props.data || props.data[0] === null) {
     return <div>Loading...</div>;
@@ -55,21 +58,24 @@ const SearchResults = (props) => {
     <div className="search-results">
       <ul>
         { sortedInterviews.map(interview => (
-          // eslint-disable-next-line
-          <li
-            id={interview.id}
-            key={interview.id}
-            onClick={props.toggleSingleInterview}
-          >
-            <h3 className={interviewNameContainsTerm(interview.name, props.term) ? 'matched-name' : ''}>
-              { Parser(interview.name) }
-            </h3>
-            <h5>{interview.matchedIndex + 1})&nbsp;
-              { findFirstQuestion(interview).question }
-            </h5>
-            <div>
-              { Parser(findFirstQuestion(interview).answer) }
-            </div>
+          <li key={interview.id}>
+            <button id={interview.id} onClick={props.toggleSingleInterview}>
+              <div className="li-header">
+                <h3 className={interviewNameContainsTerm(interview.name, props.term) ? 'matched-name' : ''}>
+                  { Parser(interview.name) }
+                </h3>
+                <div>
+                  <span>View</span>
+                  <img src={`${publicRuntimeConfig.subDirPath}/static/img/right-chevron-icon.svg`} alt="right chevron icon" />
+                </div>
+              </div>
+              <h5>{interview.matchedIndex + 1})&nbsp;
+                { findFirstQuestion(interview).question }
+              </h5>
+              <div>
+                { Parser(findFirstQuestion(interview).answer) }
+              </div>
+            </button>
           </li>
         ))
         }
diff --git a/components/searchResults/style.scss b/components/searchResults/style.scss
index c112352..9188852 100644
--- a/components/searchResults/style.scss
+++ b/components/searchResults/style.scss
@@ -4,45 +4,73 @@
 
   li {
     margin-bottom: calculateRem(32);
-    cursor: pointer;
 
-    h3 {
-      font-size: calculateRem(24);
-      margin-bottom: calculateRem(8);
-      color: #fff;
-      display: inline-block;
+    button {
+      text-align: left;
+      width: 100%;
+      padding: 0;
 
-      &.matched-name {
-        @include hasRedUnderline;
-        position: relative;
+      &:hover h3 {
+        text-decoration: underline;
       }
-    }
 
-    h5 {
-      font-size: calculateRem(16);
-      margin-bottom: calculateRem(8);
-      color: #fff;
-    }
+      h3,
+      h5 {
+        color: #fff;
+        margin-bottom: calculateRem(8);
+      }
 
-    p {
-      font-size: calculateRem(14);
-      display: inline;
+      h3 {
+        font-size: calculateRem(24);
+        display: inline-block;
 
-      span {
-        position: relative;
-        
-        &::before {
-          content: '';
-          position: absolute;
-          top: -10%;
-          left: -2%;
-          height: 120%;
-          width: 104%;
-          background-color: $red;
-          color: $navy;
-          z-index: -1;
+        &.matched-name {
+          @include hasRedUnderline;
+          position: relative;
+        }
+      }
+
+      h5 {
+        font-size: calculateRem(16);
+      }
+
+      p {
+        color: hsla(0, 0, 100, .6);
+        font-size: calculateRem(14);
+        line-height: 1.6;
+        display: inline;
+
+        span {
+          position: relative;
+
+          &::before {
+            content: '';
+            position: absolute;
+            top: -10%;
+            left: -2%;
+            height: 120%;
+            width: 104%;
+            background-color: $red;
+            color: $navy;
+            z-index: -1;
+          }
         }
       }
     }
   }
+
+  .li-header {
+    display: flex;
+    justify-content: space-between;
+
+    > div {
+      color: #fff;
+      display: flex;
+      align-items: center;
+
+      span {
+        margin: 0 calculateRem(12);
+      }
+    }
+  }
 }
diff --git a/components/topicsList/style.scss b/components/topicsList/style.scss
index 3cbb655..0f216da 100644
--- a/components/topicsList/style.scss
+++ b/components/topicsList/style.scss
@@ -1,7 +1,7 @@
 @import './assets/styles/global.scss';
 
 .topics-list {
-  margin-bottom: calculateRem(24);
+  margin-bottom: calculateRem(32);
 
   ul {
     display: flex;
diff --git a/static/img/clear-search-icon.svg b/static/img/clear-search-icon.svg
new file mode 100644
index 0000000..8ce432a
--- /dev/null
+++ b/static/img/clear-search-icon.svg
@@ -0,0 +1 @@
+<svg width="13" height="13" viewBox="0 0 13 13" xmlns="http://www.w3.org/2000/svg"><title>Group 2 Copy 4</title><g fill="none" fill-rule="evenodd"><path d="M-1051-2745H389V798h-1440z"/><g stroke="#969696" stroke-linecap="round" stroke-width="2"><path d="M1 1l11 11M12 1L1 12"/></g></g></svg>
\ No newline at end of file
diff --git a/static/img/search-icon.svg b/static/img/search-icon.svg
new file mode 100644
index 0000000..dccd434
--- /dev/null
+++ b/static/img/search-icon.svg
@@ -0,0 +1 @@
+<svg width="20" height="20" viewBox="0 0 19 19" xmlns="http://www.w3.org/2000/svg"><title>musica-searcher</title><g fill="none" fill-rule="evenodd"><path d="M-1049-2742H391v5891h-1440z"/><path d="M18.535 16.29l-4.128-4.128c-.022-.022-.047-.037-.07-.058a7.812 7.812 0 1 0-2.233 2.232c.02.024.036.05.058.071l4.127 4.128a1.588 1.588 0 0 0 2.246-2.245zM7.811 12.915a5.103 5.103 0 1 1 0-10.207 5.103 5.103 0 0 1 0 10.207z" fill="#B8BAC6" fill-rule="nonzero"/></g></svg>
\ No newline at end of file