diff --git a/Gemfile b/Gemfile
index fed0290..ec38543 100644
--- a/Gemfile
+++ b/Gemfile
@@ -37,6 +37,8 @@ gem 'pry-rails'
 gem 'jquery-rails'
 gem 'bcrypt'
 gem "aws-sdk-s3", require: false
+gem 'rspotify'
+gem 'ez_download'
 group :development, :test do
   # Call 'byebug' anywhere in the code to stop execution and get a  console
   gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
diff --git a/Gemfile.lock b/Gemfile.lock
index b590f8e..a6ca3d1 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -101,11 +101,20 @@ GEM
     concurrent-ruby (1.1.3)
     crass (1.0.4)
     debug_inspector (0.0.3)
+    domain_name (0.5.20180417)
+      unf (>= 0.0.5, < 1.0.0)
     erubi (1.7.1)
     execjs (2.7.0)
+    ez_download (0.2.0)
+      rails (~> 5.2.0)
+    faraday (0.15.3)
+      multipart-post (>= 1.2, < 3)
     ffi (1.9.25)
     globalid (0.4.1)
       activesupport (>= 4.2.0)
+    hashie (3.5.7)
+    http-cookie (1.0.3)
+      domain_name (~> 0.5)
     i18n (1.1.1)
       concurrent-ruby (~> 1.0)
     io-like (0.3.0)
@@ -117,6 +126,7 @@ GEM
       rails-dom-testing (>= 1, < 3)
       railties (>= 4.2.0)
       thor (>= 0.14, < 2.0)
+    jwt (2.1.0)
     listen (3.1.5)
       rb-fsevent (~> 0.9, >= 0.9.4)
       rb-inotify (~> 0.9, >= 0.9.7)
@@ -129,15 +139,33 @@ GEM
     marcel (0.3.3)
       mimemagic (~> 0.3.2)
     method_source (0.9.2)
+    mime-types (3.2.2)
+      mime-types-data (~> 3.2015)
+    mime-types-data (3.2018.0812)
     mimemagic (0.3.2)
     mini_mime (1.0.1)
     mini_portile2 (2.3.0)
     minitest (5.11.3)
     msgpack (1.2.4)
     multi_json (1.13.1)
+    multi_xml (0.6.0)
+    multipart-post (2.0.0)
+    netrc (0.11.0)
     nio4r (2.3.1)
     nokogiri (1.8.5)
       mini_portile2 (~> 2.3.0)
+    oauth2 (1.4.1)
+      faraday (>= 0.8, < 0.16.0)
+      jwt (>= 1.0, < 3.0)
+      multi_json (~> 1.3)
+      multi_xml (~> 0.5)
+      rack (>= 1.2, < 3)
+    omniauth (1.8.1)
+      hashie (>= 3.4.6, < 3.6.0)
+      rack (>= 1.6.2, < 3)
+    omniauth-oauth2 (1.3.1)
+      oauth2 (~> 1.0)
+      omniauth (~> 1.2)
     pg (1.1.3)
     pry (0.12.2)
       coderay (~> 1.1.0)
@@ -183,6 +211,13 @@ GEM
     rb-inotify (0.9.10)
       ffi (>= 0.5.0, < 2)
     regexp_parser (1.3.0)
+    rest-client (2.0.2)
+      http-cookie (>= 1.0.2, < 2.0)
+      mime-types (>= 1.16, < 4.0)
+      netrc (~> 0.8)
+    rspotify (2.3.1)
+      omniauth-oauth2 (~> 1.3.1)
+      rest-client (~> 2.0.2)
     ruby_dep (1.5.0)
     rubyzip (1.2.2)
     sass (3.7.2)
@@ -218,6 +253,9 @@ GEM
       thread_safe (~> 0.1)
     uglifier (4.1.19)
       execjs (>= 0.3.0, < 3)
+    unf (0.1.4)
+      unf_ext
+    unf_ext (0.0.7.5)
     web-console (3.7.0)
       actionview (>= 5.0)
       activemodel (>= 5.0)
@@ -243,6 +281,7 @@ DEPENDENCIES
   capybara (>= 2.15)
   chromedriver-helper
   coffee-rails (~> 4.2)
+  ez_download
   jbuilder (~> 2.5)
   jquery-rails
   listen (>= 3.0.5, < 3.2)
@@ -251,6 +290,7 @@ DEPENDENCIES
   puma (~> 3.11)
   rails (~> 5.2.1)
   rails_12factor
+  rspotify
   sass-rails (~> 5.0)
   selenium-webdriver
   spring
diff --git a/config/application.rb b/config/application.rb
index 375dc1a..e285c84 100644
--- a/config/application.rb
+++ b/config/application.rb
@@ -10,7 +10,7 @@ module Spoofify
   class Application < Rails::Application
     # Initialize configuration defaults for originally generated Rails version.
     config.load_defaults 5.2
-
+    RSpotify.authenticate("306bb9a7577044d6b9e88c51de20bbe8", "ecc913d5c9574691be14548787e9b29c")
     # Settings in config/environments/* take precedence over those specified here.
     # Application configuration can go into files in config/initializers
     # -- all .rb files in that directory are automatically loaded after loading
diff --git a/db/seeds.rb b/db/seeds.rb
index 1beea2a..ac0b257 100644
--- a/db/seeds.rb
+++ b/db/seeds.rb
@@ -5,3 +5,14 @@
 #
 #   movies = Movie.create([{ name: 'Star Wars' }, { name: 'Lord of the Rings' }])
 #   Character.create(name: 'Luke', movie: movies.first)
+
+Album.destroy_all
+Song.destroy_all
+Artist.destroy_all
+User.destroy_all
+Playlist.destroy_all
+
+def create_album(params, filename)
+  album = Album.new(params)
+  file = EzDownload.open("")
+end
diff --git a/frontend/components/main/browse_container.js b/frontend/components/main/browse_container.js
index 4b7ecb2..a57f23d 100644
--- a/frontend/components/main/browse_container.js
+++ b/frontend/components/main/browse_container.js
@@ -6,10 +6,12 @@ import { fetchPlaylists } from '../../actions/playlist_actions';
 import { selectAllPlaylists } from '../../reducers/selectors';
 import MainContent from './main_content'
 
-const mapStateToProps = state => ({
-  playlists: selectAllPlaylists(state),
-  path: "browse"
-});
+const mapStateToProps = state => {
+  return {
+    playlists: selectAllPlaylists(state),
+    navpath: "browse"
+  };
+};
 
 const mapDispatchToProps = dispatch => {
   return {
diff --git a/frontend/components/main/collection_container.js b/frontend/components/main/collection_container.js
index 564da10..c25c1b7 100644
--- a/frontend/components/main/collection_container.js
+++ b/frontend/components/main/collection_container.js
@@ -8,7 +8,7 @@ import MainContent from './main_content'
 
 const mapStateToProps = state => ({
   playlists: selectAllPlaylists(state),
-  path: "collection"
+  navpath: "collection"
 });
 
 const mapDispatchToProps = dispatch => {
diff --git a/frontend/components/main/main_content.jsx b/frontend/components/main/main_content.jsx
index 7b8416d..8793f4f 100644
--- a/frontend/components/main/main_content.jsx
+++ b/frontend/components/main/main_content.jsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import PlaylistIndexItem from './playlist_index_item';
+// import PlaylistIndex from './playlist_index_item';
 import { NavLink, Redirect } from 'react-router-dom';
+import NavBar from './navbar';
 
 class MainContent extends React.Component {
 
@@ -10,6 +12,7 @@ class MainContent extends React.Component {
       playlists: []
     };
     this.fetchPlaylists = props.fetchPlaylists.bind(this);
+    this.logout = props.logout.bind(this);
   }
 
   componentDidMount() {
@@ -21,47 +24,16 @@ class MainContent extends React.Component {
 
     return (
       <div className="main-container">
-        <nav className="nav-bar">
-          <div className="logo">
-            <img src={window.whiteLogoURL}></img>
-            <h1>Spoofify</h1>
-          </div>
-
-          <div className="icon-holder">
-            <NavLink activeClassName="active-link" exact to ="/search/playlists">
-              <span>
-                <img src={window.searchIcon}></img>
-                <h2>Search</h2>
-              </span>
-            </NavLink>
-
-            <br></br>
-
-            <NavLink activeClassName="active-link" exact to ="/browse/playlists">
-              <span>
-                <img src={window.homeIcon}></img>
-                <h2>Home</h2>
-              </span>
-            </NavLink>
-
-            <br></br>
-
-            <NavLink activeClassName="active-link" exact to ="/collection/playlists">
-              <span>
-                <img src={window.libraryIcon}></img>
-                <h2>Your Library</h2>
-              </span>
-            </NavLink>
-          </div>
-
-          <div>
-            <button className="logout" onClick={()=>this.props.logout()}>Logout</button>
-          </div>
-        </nav>
-        <Redirect to={`/${this.props.path}/playlists`} />
+        <NavBar logout={this.logout}/>
+         <ul> Image Goes Here:
+           {playlists.map(playlist => <PlaylistIndexItem key={playlist.id} playlist={playlist} />)}
+          </ul>
+        <Redirect to={`/${this.props.navpath}/playlists`} />
       </div>
     );
   }
 }
 
 export default MainContent;
+
+// <PlaylistIndex playlists={playlists}/>
diff --git a/frontend/components/main/navbar.jsx b/frontend/components/main/navbar.jsx
new file mode 100644
index 0000000..febb9a2
--- /dev/null
+++ b/frontend/components/main/navbar.jsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { Link, NavLink, Redirect } from 'react-router-dom';
+
+export default (props) => {
+  return (
+    <nav className="nav-bar">
+      <div className="logo">
+        <img src={window.whiteLogoURL}></img>
+        <h1>Spoofify</h1>
+      </div>
+
+      <div className="icon-holder">
+        <NavLink activeClassName="active-link" exact to ="/search/playlists">
+          <span>
+            <img src={window.searchIcon}></img>
+            <h2>Search</h2>
+          </span>
+        </NavLink>
+
+        <br></br>
+
+        <NavLink activeClassName="active-link" exact to ="/browse/playlists">
+          <span>
+            <img src={window.homeIcon}></img>
+            <h2>Home</h2>
+          </span>
+        </NavLink>
+
+        <br></br>
+
+        <NavLink activeClassName="active-link" exact to ="/collection/playlists">
+          <span>
+            <img src={window.libraryIcon}></img>
+            <h2>Your Library</h2>
+          </span>
+        </NavLink>
+      </div>
+
+      <div>
+        <button className="logout" onClick={()=>props.logout()}>Logout</button>
+      </div>
+    </nav>
+  );
+};
diff --git a/frontend/components/main/playlist_index.jsx b/frontend/components/main/playlist_index.jsx
new file mode 100644
index 0000000..3d3a36f
--- /dev/null
+++ b/frontend/components/main/playlist_index.jsx
@@ -0,0 +1,15 @@
+// import React from 'react';
+//
+// class PlaylistIndex extends React.Component {
+//
+//   render(){
+//     const playlists = this.props.map(playlist => {
+//       <PlaylistIndexItem playlist={playlist}/>
+//     });
+//     <ul>
+//       {playlists}
+//     </ul>
+//   }
+// }
+//
+// export default PlaylistIndex
diff --git a/frontend/components/main/playlist_index_item.jsx b/frontend/components/main/playlist_index_item.jsx
index 6f60647..9e3ad16 100644
--- a/frontend/components/main/playlist_index_item.jsx
+++ b/frontend/components/main/playlist_index_item.jsx
@@ -1,11 +1,12 @@
 import React from 'react';
-
-const PlaylistIndexItem = ({ playlist }) => (
+ const PlaylistIndexItem = ({ playlist }) => (
   <li className="playlist-index-item">
-      <audio controls>
-        <source src={playlist.trackUrl} type="audio/mpeg"></source>
-      </audio>
+      <img src={playlist.photoUrl}></img>
   </li>
 );
+ export default PlaylistIndexItem;
+
 
-export default PlaylistIndexItem;
+// <audio controls>
+//   <source src={playlist.trackUrl} type="audio/mpeg"></source>
+// </audio>
diff --git a/frontend/components/main/search_container.js b/frontend/components/main/search_container.js
index db661e7..e48b1d8 100644
--- a/frontend/components/main/search_container.js
+++ b/frontend/components/main/search_container.js
@@ -8,7 +8,7 @@ import MainContent from './main_content'
 
 const mapStateToProps = state => ({
   playlists: selectAllPlaylists(state),
-  path: "search"
+  navpath: "search",
 });
 
 const mapDispatchToProps = dispatch => {
@@ -19,3 +19,5 @@ const mapDispatchToProps = dispatch => {
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(MainContent);
+
+// pagepath: props.pagepath || "playlists"