diff --git a/src/views/ArtistSearch.jsx b/src/views/ArtistSearch.jsx
index 562c3c8..9dc5048 100644
--- a/src/views/ArtistSearch.jsx
+++ b/src/views/ArtistSearch.jsx
@@ -6,6 +6,17 @@ import './ArtistSearch.scss'
 
 const spotifyApi = new SpotifyWebApi()
 
+const searchIcon = (
+  <svg viewBox="0 0 70 70" xmlns="http://www.w3.org/2000/svg">
+    <g>
+      <title>Layer 2</title>
+      <circle fillOpacity="0" id="svg_2" r="14.22443" cy="15.72443" cx="15.72443" strokeWidth="3" stroke="#cccccc" fill="#000000"/>
+      <line stroke="#cccccc" id="svg_4" y2="30.20002" x2="29.72541" y1="26.64045" x1="26.16584" fillOpacity="0" strokeLinecap="null" strokeLinejoin="null" strokeDasharray="null" strokeWidth="3" fill="none"/>
+      <line id="svg_6" y2="29.96271" x2="29.72541" y1="40.64143" x1="40.87873" fillOpacity="0" strokeLinecap="null" strokeLinejoin="null" strokeDasharray="null" strokeWidth="6" stroke="#cccccc" fill="none"/>
+    </g>
+  </svg>
+)
+
 function ArtistSearch({ props }) {
   let [search, setSearch] = useState(null)
   let [artists, setArtists] = useState(null)
@@ -23,7 +34,7 @@ function ArtistSearch({ props }) {
 
   // Search artists
   useEffect(() => {
-    if (search && search.length > 2) {
+    if (search && search.length > 0) {
       spotifyApi.searchArtists(search)
         .then(function(data) {
           setArtists(data.artists.items)
@@ -31,6 +42,9 @@ function ArtistSearch({ props }) {
           console.error(err);
         })
     }
+    else {
+      setArtists(null)
+    }
   }, [search])
 
   // Load search term from props
@@ -59,7 +73,10 @@ function ArtistSearch({ props }) {
     <div className="spotify">
       <h1>Artist search</h1>
 
-      <input placeholder='Search for an artist' onChange={handleChange} />
+      <div className='search-field'>
+        <input placeholder='Search for an artist...' onChange={handleChange} />
+        {searchIcon}
+      </div>
 
       {artists && (
         <div className='artists'>
diff --git a/src/views/ArtistSearch.scss b/src/views/ArtistSearch.scss
index 45f1cae..7f0f07e 100644
--- a/src/views/ArtistSearch.scss
+++ b/src/views/ArtistSearch.scss
@@ -1,15 +1,48 @@
 .spotify {
   text-align: center;
 
-  ul {
-		list-style-type: none;
-		max-width: 60em;
-		margin: auto;
-		padding: 0;
+  .search-field {
+    border: solid thin #b6b6b6;
+    border-radius: 5px;
+    position: relative;
+    width: 31em;
+    height: 3em;
+    margin: 2em auto;
 
-		li {
-			display: inline-block;
+    input {
+      border: none;
+      font-size: 15pt;
+      width: 100%;
+      height: 100%;
+      margin: -1px;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      background: transparent;
+      text-align: center;
+
+      &::placeholder {
+        color: black;
+      }
+    }
+
+    svg {
+      width: 30px;
+      position: absolute;
+      right: 0;
+      bottom: 3px;
+    }
+  }
+
+  ul {
+    list-style-type: none;
+    max-width: 60em;
+    margin: auto;
+    padding: 0;
+
+    li {
+      display: inline-block;
       margin: 10pt 14pt;
-		}
-	}
+    }
+  }
 }
diff --git a/src/views/Login.jsx b/src/views/Login.jsx
index c29dc77..0e085b4 100644
--- a/src/views/Login.jsx
+++ b/src/views/Login.jsx
@@ -1,12 +1,23 @@
 import React from 'react'
 import './Login.scss'
 
+const spotify = (
+  <svg viewBox="0 0 130 130" xmlns="http://www.w3.org/2000/svg">
+    <g>
+      <title>Layer 1</title>
+      <g fill="none" fillRule="evenodd" id="svg_1">
+        <path d="m100.80815,56.12191c-20.41728,-12.11868 -54.09513,-13.23295 -73.58586,-7.32065c-3.12984,0.94872 -6.43968,-0.81718 -7.38816,-3.94531c-0.94848,-3.12965 0.81687,-6.43542 3.94897,-7.38641c22.37399,-6.7877 59.56742,-5.47688 83.07219,8.46817c2.81593,1.67065 3.73946,5.30452 2.07016,8.11364c-1.67005,2.81366 -5.30891,3.74121 -8.11729,2.07056l-0.00001,0zm-0.66863,17.94933c-1.43179,2.32304 -4.47086,3.05103 -6.79214,1.62529c-17.02197,-10.45784 -42.9781,-13.48694 -63.11628,-7.37733c-2.61172,0.78845 -5.37018,-0.68338 -6.16285,-3.2884c-0.78737,-2.6103 0.68602,-5.36196 3.29245,-6.15572c23.00556,-6.97668 51.60367,-3.59757 71.15415,8.41073c2.32128,1.42875 3.05194,4.46767 1.62466,6.78542l0.00001,0.00002zm-7.75045,17.23798c-1.13757,1.86494 -3.56853,2.45004 -5.42767,1.31309c-14.87466,-9.08578 -33.59616,-11.1382 -55.64417,-6.10432c-2.12463,0.48684 -4.24169,-0.8444 -4.72652,-2.96711c-0.48709,-2.12346 0.83957,-4.23938 2.96873,-4.72394c24.128,-5.51316 44.82514,-3.14024 61.52035,7.05605c1.86141,1.13619 2.44759,3.56658 1.30927,5.42622l0.00001,0.00001zm-29.04815,-91.30922c-34.98182,0 -63.34092,28.34217 -63.34092,63.30495c0,34.96507 28.3591,63.30649 63.34092,63.30649c34.98257,0 63.34015,-28.34142 63.34015,-63.30649c0,-34.96279 -28.35758,-63.30495 -63.34015,-63.30495l0,0z" id="svg_5" strokeWidth="0" fill="#3dd466"/>
+      </g>
+    </g>
+  </svg>
+)
+
 function Login() {
   return (
     <div className='login'>
       <h1>Touch Tunes</h1>
 
-      <a href='http://localhost:8888/login' className='App-link'> Login to Spotify </a>
+      <a href='http://localhost:8888/login' className='App-link'>Login{spotify}</a>
     </div>
   )
 }
diff --git a/src/views/Login.scss b/src/views/Login.scss
index f815e5c..aa0a3ab 100644
--- a/src/views/Login.scss
+++ b/src/views/Login.scss
@@ -1,3 +1,25 @@
 .login {
   text-align: center;
+
+  h1 {
+    margin-bottom: 2em;
+  }
+
+  a {
+    width: 150px;
+    border: solid thin #b6b6b6;
+    border-radius: 5px;
+    text-decoration: none;
+    padding: 14px 148px;
+    position: relative;
+    color: black;
+    font-size: 16pt;
+
+    svg {
+      width: 35px;
+      position: absolute;
+      right: 8px;
+      bottom: 8px;
+    }
+  }
 }