diff --git a/Gemfile b/Gemfile
index ff427d4..b5b1520 100644
--- a/Gemfile
+++ b/Gemfile
@@ -38,6 +38,7 @@ gem 'jquery-rails'
 gem 'bcrypt'
 gem "aws-sdk-s3", require: false
 gem 'rspotify'
+gem "font-awesome-rails"
 gem 'ez_download', git: 'https://github.com/OscarAlvarez8830/EZDownload.git'
 group :development, :test do
   # Call 'byebug' anywhere in the code to stop execution and get a  console
diff --git a/Gemfile.lock b/Gemfile.lock
index fd8ffa7..60c1457 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -115,6 +115,8 @@ GEM
     faraday (0.15.3)
       multipart-post (>= 1.2, < 3)
     ffi (1.9.25)
+    font-awesome-rails (4.7.0.4)
+      railties (>= 3.2, < 6.0)
     globalid (0.4.1)
       activesupport (>= 4.2.0)
     hashie (3.5.7)
@@ -287,6 +289,7 @@ DEPENDENCIES
   chromedriver-helper
   coffee-rails (~> 4.2)
   ez_download!
+  font-awesome-rails
   jbuilder (~> 2.5)
   jquery-rails
   listen (>= 3.0.5, < 3.2)
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index d05ea0f..18e0914 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -9,7 +9,7 @@
  * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
  * files in this directory. Styles in this file should be added after the last require_* statement.
  * It is generally better to create a new file per style scope.
- *
+ * @import “font-awesome”
  *= require_tree .
  *= require_self
  */
diff --git a/app/assets/stylesheets/components/modal.scss b/app/assets/stylesheets/components/modal.scss
index 1aa1daf..dd337f8 100644
--- a/app/assets/stylesheets/components/modal.scss
+++ b/app/assets/stylesheets/components/modal.scss
@@ -14,3 +14,15 @@
   top: 50%;
   transform: translate(0%, -50%);
 }
+
+
+.x-btn {
+  width: 80px;
+  height: 80px;
+  margin: auto;
+  font-size: 80px;
+  font-weight: 100;
+  transition: 0.3s;
+}
+
+//songs index and modal
diff --git a/app/assets/stylesheets/components/show_box_content.scss b/app/assets/stylesheets/components/show_box_content.scss
index 1e185c7..e6834c3 100644
--- a/app/assets/stylesheets/components/show_box_content.scss
+++ b/app/assets/stylesheets/components/show_box_content.scss
@@ -3,6 +3,7 @@
   flex-direction: column;
   padding-left: 50px;
   padding-top: 30px;
+  max-width: 260px;
 }
 
 .playlist-show-item-image {
@@ -35,3 +36,68 @@
  margin: auto;
  margin-top: 160px;
 }
+
+.main-container {
+  flex-direction: row;
+}
+
+.show-body{
+  display: flex;
+  flex-direction: column;
+  width: 1200px;
+  height: 900px;
+}
+
+.body-items {
+  display: flex;
+  flex-direction: row;
+}
+
+.header {
+  max-height: 100px;
+  padding-bottom: 200px;
+}
+
+
+.tracks {
+  margin-top: 50px;
+  margin-left: 100px;
+}
+
+.song-index-item {
+  margin-left: 50px;
+  display: flex;
+  height: 60px;
+  justify-content: space-between;
+  max-width: 400px;
+  color: #f2f2f2;
+  flex: 1;
+  align-items: center;
+}
+
+.song-index-item:hover {
+  background-color: #404040;
+  color: white;
+  opacity: .7;
+  .song-item {
+    opacity: 1;
+  }
+}
+.song-item {
+  margin-left: 20px;
+  margin-right: 200px;
+}
+
+.tripledot {
+  width: 25px;
+  margin-right: 20px;
+  color: white;
+}
+
+.song-index-item .song-btns {
+  opacity: 0;
+}
+
+.song-index-item .song-btns:hover{
+  opacity: 1;
+}
diff --git a/app/controllers/api/playlists_controller.rb b/app/controllers/api/playlists_controller.rb
index f940322..9df59e1 100644
--- a/app/controllers/api/playlists_controller.rb
+++ b/app/controllers/api/playlists_controller.rb
@@ -19,6 +19,12 @@ def create
       render json: @playlist.errors.full_messages, status: 422
     end
   end
+  # 
+  # def add_song
+  #   @playlist = Playlist.find(params[:playlist_id])
+  #   @song = Song.find(params[:song_id])
+  #   @playlist.songs += [@song]
+  # end
 
   private
 
diff --git a/app/controllers/api/song_playlists_controller.rb b/app/controllers/api/song_playlists_controller.rb
index baa10da..eccb709 100644
--- a/app/controllers/api/song_playlists_controller.rb
+++ b/app/controllers/api/song_playlists_controller.rb
@@ -1,30 +1,14 @@
 class Api::SongPlaylistsController < ApplicationController
   def create
-     @song_playlists = SongPlaylists.new(song_playlist_params)
-     @playlist_song.save
+     @song_playlists = SongPlaylist.new(song_playlist_params)
+     @song_playlists.save
    end
 
    def destroy
    end
 
-   private
    def song_playlist_params
-     params.require(:song_playlist).permit(:song_id, :playlist_id)
+
+     params.require(:song_playlist).permit(:playlist_id, :song_id)
    end
 end
-
-# class Api::PlaylistSongsController < ApplicationController
-#
-#   def create
-#     @playlist_song = PlaylistSong.new(playlist_song_params)
-#     @playlist_song.save
-#   end
-#
-#   def destroy
-#   end
-#
-#   private
-#   def playlist_song_params
-#     params.require(:playlist_song).permit(:song_id, :playlist_id)
-#   end
-# end
diff --git a/app/models/artist.rb b/app/models/artist.rb
index cf4a4bb..286e88d 100644
--- a/app/models/artist.rb
+++ b/app/models/artist.rb
@@ -15,7 +15,7 @@ class Artist < ApplicationRecord
 
   has_many :song_artists,
     foreign_key: :artist_id,
-    class_name: :Song_artist
+    class_name: :SongArtist
 
   has_many :songs,
     through: :song_artists,
diff --git a/app/models/playlist.rb b/app/models/playlist.rb
index 1e83a90..ff9b70c 100644
--- a/app/models/playlist.rb
+++ b/app/models/playlist.rb
@@ -18,7 +18,7 @@ class Playlist < ApplicationRecord
 
   has_many :song_playlists,
     foreign_key: :playlist_id,
-    class_name: :Song_playlist
+    class_name: :SongPlaylist
 
   has_many :songs,
     through: :song_playlists,
diff --git a/app/models/song.rb b/app/models/song.rb
index 4135084..dd09e08 100644
--- a/app/models/song.rb
+++ b/app/models/song.rb
@@ -18,11 +18,11 @@ class Song < ApplicationRecord
 
   has_many :song_playlists,
     foreign_key: :song_id,
-    class_name: :Song_playlist
+    class_name: :SongPlaylist
 
   has_many :song_artists,
     foreign_key: :song_id,
-    class_name: :Song_artist
+    class_name: :SongArtist
 
   has_many :arists,
     through: :song_artists,
diff --git a/app/models/song_artist.rb b/app/models/song_artist.rb
index 3a06406..cdb490a 100644
--- a/app/models/song_artist.rb
+++ b/app/models/song_artist.rb
@@ -9,7 +9,7 @@
 #  updated_at :datetime         not null
 #
 
-class Song_artist < ApplicationRecord
+class SongArtist < ApplicationRecord
   belongs_to :song
   belongs_to :artist
 end
diff --git a/app/models/song_playlist.rb b/app/models/song_playlist.rb
index 900a820..70f7762 100644
--- a/app/models/song_playlist.rb
+++ b/app/models/song_playlist.rb
@@ -9,7 +9,9 @@
 #  updated_at  :datetime         not null
 #
 
-class Song_playlist < ApplicationRecord
+class SongPlaylist < ApplicationRecord
+  validates :playlist_id, :song_id, presence: true
+
   belongs_to :song
   belongs_to :playlist
 end
diff --git a/app/views/api/songs/show.json.jbuilder b/app/views/api/songs/show.json.jbuilder
index e69de29..79fa0ea 100644
--- a/app/views/api/songs/show.json.jbuilder
+++ b/app/views/api/songs/show.json.jbuilder
@@ -0,0 +1,4 @@
+json.song do
+  json.extract! song, :id, :title
+  json.trackUrl url_for(song.track)
+end
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 6817538..ec1ae66 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -15,6 +15,8 @@
       window.homeIconSelected = "<%= image_url('home-icon-selected.png') %>"
       window.libraryIcon = "<%= image_url('library-icon.png') %>"
       window.libraryIconSelected = "<%= image_url('library-icon-selected.png') %>"
+      window.playBtn = "<%= image_url('btn-play_video.png') %>"
+      window.tripledot = "<%= image_url('tripledot.png') %>"
     </script>
   </head>
 
diff --git a/config/routes.rb b/config/routes.rb
index e812b3b..f585149 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -10,5 +10,6 @@
     resources :albums, only: [:index, :show]
     resources :artists, only: [:index, :show]
     resources :follows, only: [:create, :destroy]
+    resources :song_playlists, only: [:create, :destroy]
   end
 end
diff --git a/db/seeds.rb b/db/seeds.rb
index b52bf6c..23bea6e 100644
--- a/db/seeds.rb
+++ b/db/seeds.rb
@@ -11,8 +11,8 @@
 User.destroy_all
 Playlist.destroy_all
 Follow.destroy_all
-Song_playlist.destroy_all
-Song_artist.destroy_all
+SongPlaylist.destroy_all
+SongArtist.destroy_all
 
 # file = EzDownload.open('https://s3.amazonaws.com/spoofify-dev/face.jpg')
 
diff --git a/frontend/actions/modal_actions.js b/frontend/actions/modal_actions.js
index 6e9e0a4..6e99299 100644
--- a/frontend/actions/modal_actions.js
+++ b/frontend/actions/modal_actions.js
@@ -1,10 +1,12 @@
 export const OPEN_MODAL = 'OPEN_MODAL';
 export const CLOSE_MODAL = 'CLOSE_MODAL';
 
-export const openModal = (payload) => {
+export const openModal = (modal, songId) => {
+
   return {
     type: OPEN_MODAL,
-    payload
+    modal,
+    songId
   };
 };
 
diff --git a/frontend/actions/playlist_actions.js b/frontend/actions/playlist_actions.js
index 6d869b0..7d32e1d 100644
--- a/frontend/actions/playlist_actions.js
+++ b/frontend/actions/playlist_actions.js
@@ -36,7 +36,7 @@ export const fetchPlaylists = () => dispatch => {
 export const fetchPlaylist = (id) => dispatch => {
   return (
     APIUtil.fetchPlaylist(id).then(res => {
-      
+
         dispatch(receivePlaylist(res));
       }
     ));
@@ -62,3 +62,7 @@ export const deletePlaylist = (id) => dispatch => {
       () => dispatch(removePlaylist(id))
     ));
 };
+
+export const createSongOnPlaylist = songOnPlaylist => dispatch => {
+  return APIUtil.createSongOnPlaylist(songOnPlaylist).then(null, err => console.log(err));
+}
diff --git a/frontend/components/main/main_content.jsx b/frontend/components/main/main_content.jsx
index 003a38b..41c35a8 100644
--- a/frontend/components/main/main_content.jsx
+++ b/frontend/components/main/main_content.jsx
@@ -23,7 +23,7 @@ class MainContent extends React.Component {
 
   render() {
     const {playlists, navpath, show} = this.props;
-    
+
     const index = (
       <div className="grid">
         <ul>
diff --git a/frontend/components/main/modal.jsx b/frontend/components/main/modal.jsx
index 23f2df4..75e3ad3 100644
--- a/frontend/components/main/modal.jsx
+++ b/frontend/components/main/modal.jsx
@@ -5,17 +5,21 @@ import PlaylistForm from './playlists/playlist_form';
 import PlaylistSongForm from './playlists/playlist_song_form';
 
 function Modal({ modal, closeModal} ) {
+
   if (!modal) {
     return null;
   }
   let component;
-  if (modal === 'newPlaylist'){
-    component = (<PlaylistForm />);
-  } else if (modal === 'newPlaylistSong') {
-    component = (<PlaylistSongForm />);
-  } else {
-    component = "";
-  }
+  switch(modal.type) {
+      case 'newPlaylist':
+        component = <PlaylistForm />;
+        break;
+      case 'newPlaylistSong':
+        component = <PlaylistSongForm />
+        break;
+      default:
+        return null;
+    }
 
   return (
     <div className="modal-background" onClick={closeModal}>
@@ -26,9 +30,12 @@ function Modal({ modal, closeModal} ) {
   );
 }
 
-const mapStateToProps = state => ({
-  modal: state.ui.modal
-});
+const mapStateToProps = state => {
+
+  return {
+    modal: state.ui.modal
+  };
+};
 
 const mapDispatchToProps = dispatch => ({
   closeModal: () => dispatch(closeModal())
diff --git a/frontend/components/main/playlists/playlist_song_form.jsx b/frontend/components/main/playlists/playlist_song_form.jsx
index e69de29..af6fd9a 100644
--- a/frontend/components/main/playlists/playlist_song_form.jsx
+++ b/frontend/components/main/playlists/playlist_song_form.jsx
@@ -0,0 +1,101 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { closeModal } from '../../../actions/modal_actions';
+import { createSongOnPlaylist, fetchPlaylists } from '../../../actions/playlist_actions';
+import { selectAllAuthoredPlaylists } from '../../../reducers/selectors';
+
+const mapStateToProps = state => {
+
+  return {
+    playlists: selectAllAuthoredPlaylists(state),
+    currUserId: state.session.id,
+    songId: state.ui.modal.songId
+  };
+};
+
+const mapDispatchToProps = dispatch => {
+
+  return {
+    closeModal: () => dispatch(closeModal()),
+    fetchPlaylists: () => dispatch(fetchPlaylists()),
+    createSongOnPlaylist: songOnPlaylist => dispatch(createSongOnPlaylist(songOnPlaylist))
+  };
+};
+
+class PlaylistSongForm extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      song_id: null,
+      playlist_id: null
+    };
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
+
+  handleSubmit(e) {
+
+    e.preventDefault();
+    this.props.createSongOnPlaylist(
+      {playlist_id: e.currentTarget.getAttribute('playlist-id'), song_id: this.props.songId}
+    );
+    this.props.closeModal();
+  }
+
+  componentDidMount() {
+    this.props.fetchPlaylists();
+  }
+
+  // titleInitials(title) {
+  //   return title.split(' ')
+  //     .map( word => word[0].toUpperCase()).join('');
+  // }
+
+  render() {
+    return (
+      <div className="playlist-song-form">
+        <button className="x-btn button-strip" onClick={this.props.closeModal}>X</button>
+
+        <h1 className="playlist-form-header">Add to playlist</h1>
+
+
+        <form>
+          <ul className="item-rows user-playlists">
+            {this.props.playlists.map( playlist => {
+              return (
+                <button
+                  playlist-id={`${playlist.id}`}
+                  onClick={this.handleSubmit}
+                  className="button-strip"
+                  key={playlist.id}
+                >
+                  <div className="collection-index-item">
+
+                    <div className="collection-image-container">
+                      <div className="playlist-img">
+                        <h4 className="playlist-img-title">removed</h4>
+                      </div>
+                      <div className="image-overlay">
+                        <img className='collection-img-overlay' src={window.playBtn}></img>
+                      </div>
+                    </div>
+
+                    <h3 className="collection-title">{playlist.title}</h3>
+                  </div>
+                </button>
+              );
+            })}
+          </ul>
+
+
+        </form>
+
+
+
+      </div>
+    );
+  }
+
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(PlaylistSongForm);
diff --git a/frontend/components/main/show_box_content.jsx b/frontend/components/main/show_box_content.jsx
index 2ff41f6..c2e56fc 100644
--- a/frontend/components/main/show_box_content.jsx
+++ b/frontend/components/main/show_box_content.jsx
@@ -1,7 +1,9 @@
 import React from 'react';
 import NavBar from './navbar';
 import { PulseLoader } from 'react-spinners';
-
+import SongsIndexItem from './songs/songs_index_item';
+import Header from './header';
+import Modal from './modal';
 
 class ShowBoxContent extends React.Component {
   constructor(props) {
@@ -21,10 +23,7 @@ class ShowBoxContent extends React.Component {
     if(songs[0]){
        tracks = songs.map( (song) => {
         return (
-          <label>
-            <audio src={song.trackUrl} controls>
-            </audio>
-          </label>
+          <SongsIndexItem key={song.id} song={song}/>
         );
       });
     } else {
@@ -50,21 +49,32 @@ class ShowBoxContent extends React.Component {
     }
     return (
       <div className="main-container">
-        <NavBar className="nav" logout={logout.bind(this)}/>
+        <div>
+          <NavBar className="nav" logout={logout.bind(this)}/>
+        </div>
 
-        <div className="playlist-show-item" key={playlist.id}>
-            <div className="playlist-show-item-image">
-              <img src={playlist.photoUrl}></img>
+        <div className="show-body">
+    
+          <div className="body-items">
+            <div className="playlist-show-item" key={playlist.id}>
+              <div className="playlist-show-item-image">
+                <img src={playlist.photoUrl}></img>
+              </div>
+              <div className="playlist-show-subtext">
+                <p>{playlist.title}</p>
+                <span>{playlist.author}</span>
+              </div>
             </div>
-            <div className="playlist-show-subtext">
-              <p>{playlist.title}</p>
-              <span>{playlist.author}</span>
+
+            <div className="tracks">
+              {tracks}
             </div>
+
+          </div>
         </div>
-        <div>
-          {tracks}
-        </div>
 
+
+        <Modal/>
       </div>
     );
   }
diff --git a/frontend/components/main/songs/songs_index.jsx b/frontend/components/main/songs/songs_index.jsx
deleted file mode 100644
index e69de29..0000000
diff --git a/frontend/components/main/songs/songs_index_item.jsx b/frontend/components/main/songs/songs_index_item.jsx
new file mode 100644
index 0000000..315ca1b
--- /dev/null
+++ b/frontend/components/main/songs/songs_index_item.jsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import { PulseLoader } from 'react-spinners';
+import { NavLink, withRouter } from 'react-router-dom';
+import { openModal } from '../../../actions/modal_actions';
+import { connect } from 'react-redux';
+
+const mapDispatchToProps = dispatch => {
+  return {
+    openModal: (modal, songId) => dispatch(openModal(modal, songId)),
+  };
+};
+
+
+class SongsIndexItem extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render () {
+      const {song} = this.props;
+      return (
+        <div className="song-index-item">
+
+          <div className="song-item">
+            <label> {song.title}
+              <audio src={song.trackUrl}>
+              </audio>
+            </label>
+          </div>
+
+          <div className="song-btns">
+            <div className="song-btn-wide">
+
+            </div>
+            <button
+              onClick={() => this.props.openModal('newPlaylistSong', `${song.id}`)}
+              className="pl-btn">
+              <img className="tripledot" src={window.tripledot}></img>
+            </button>
+          </div>
+
+        </div>
+      );
+  }
+}
+
+
+export default withRouter(connect(null, mapDispatchToProps)(SongsIndexItem));
+
+
+
+// let playButtonContainer = (
+// <div className="play-btn-container">
+//   <button onClick={this.handlePlay}><i className="fa fa-play"></i></button>
+//   <i className="fa fa-music"></i>
+// </div>
+// )
diff --git a/frontend/reducers/ui/modals_reducer.js b/frontend/reducers/ui/modals_reducer.js
index 3e50bb8..dba985d 100644
--- a/frontend/reducers/ui/modals_reducer.js
+++ b/frontend/reducers/ui/modals_reducer.js
@@ -2,9 +2,14 @@ import { OPEN_MODAL, CLOSE_MODAL } from '../../actions/modal_actions';
 import merge from 'lodash/merge';
 
 const modalsReducer = (state = null, action) => {
+
   switch (action.type) {
     case OPEN_MODAL:
-      return action.payload;
+    if (action.songId) {
+      return {type: action.modal, songId: action.songId};
+    } else {
+      return {type: action.modal};
+    }
     case CLOSE_MODAL:
       return null;
     default:
diff --git a/frontend/util/playlist_api_util.jsx b/frontend/util/playlist_api_util.jsx
index d91bbf6..e6c0956 100644
--- a/frontend/util/playlist_api_util.jsx
+++ b/frontend/util/playlist_api_util.jsx
@@ -34,3 +34,11 @@ export const deletePlaylist = (id) => {
       url: `/api/playlists/${id}`
     });
 };
+
+export const createSongOnPlaylist = songPlaylist => (
+  $.ajax({
+    method: 'POST',
+    url: 'api/song_playlists',
+    data: { song_playlist: songPlaylist }
+  })
+);