diff --git a/spotify/api/api.py b/spotify/api/api.py
index bd9526b..75601e8 100644
--- a/spotify/api/api.py
+++ b/spotify/api/api.py
@@ -73,6 +73,7 @@ def playlist():
 
             playlist_name = request_json['name']
             playlist_parts = request_json.get('parts', None)
+            playlist_references = request_json.get('playlist_references', None)
             playlist_id = request_json.get('id', None)
             playlist_shuffle = request_json.get('shuffle', None)
             playlist_type = request_json.get('type', None)
@@ -92,7 +93,8 @@ def playlist():
 
                 to_add = {
                     'name': playlist_name,
-                    'parts': playlist_parts,
+                    'parts': playlist_parts if not None else [],
+                    'playlist_references': playlist_references if not None else [],
                     'playlist_id': None,
                     'shuffle': playlist_shuffle,
                     'type': playlist_type
@@ -118,6 +120,7 @@ def playlist():
                     return jsonify({'error': "multiple playlists exist"}), 500
 
                 if playlist_parts is None and \
+                        playlist_references is None and \
                         playlist_id is None and \
                         playlist_shuffle is None and \
                         playlist_day_boundary is None:
@@ -133,6 +136,12 @@ def playlist():
                     else:
                         dic['parts'] = playlist_parts
 
+                if playlist_references is not None:
+                    if playlist_references == -1:
+                        dic['playlist_references'] = []
+                    else:
+                        dic['playlist_references'] = playlist_references
+
                 if playlist_id:
                     dic['playlist_id'] = playlist_id
 
@@ -336,7 +345,7 @@ def execute_user(username):
                  database.get_user_playlists_collection(database.get_user_query_stream(username)[0].id).stream()]
 
     for iterate_playlist in playlists:
-        if len(iterate_playlist['parts']) > 0:
+        if len(iterate_playlist['parts']) > 0 or len(iterate_playlist['playlist_references']) > 0:
             if iterate_playlist.get('playlist_id'):
                 execute_playlist(username, iterate_playlist['name'])
 
diff --git a/src/js/Playlist/NewPlaylist.js b/src/js/Playlist/NewPlaylist.js
index 817b5f9..8e83441 100644
--- a/src/js/Playlist/NewPlaylist.js
+++ b/src/js/Playlist/NewPlaylist.js
@@ -30,6 +30,7 @@ class NewPlaylist extends Component {
                 axios.put('/api/playlist', {
                     name: this.state.name,
                     parts: [],
+                    playlist_references: [],
                     shuffle: false,
                     type: this.state.type,
                 }).catch((error) => {
diff --git a/src/js/Playlist/PlaylistView.js b/src/js/Playlist/PlaylistView.js
index afe77bb..1b63444 100644
--- a/src/js/Playlist/PlaylistView.js
+++ b/src/js/Playlist/PlaylistView.js
@@ -8,18 +8,22 @@ class PlaylistView extends Component{
         this.state = {
             name: this.props.match.params.name,
             parts: [],
+            playlist_references: [],
             type: null,
             error: false,
             error_text: null,
 
             day_boundary: '',
             newPlaylistName: '',
+            newPlaylistReference: '',
 
             shuffle: false
         }
         this.handleAddPart = this.handleAddPart.bind(this);
+        this.handleAddReference = this.handleAddReference.bind(this);
         this.handleInputChange = this.handleInputChange.bind(this);
         this.handleRemoveRow = this.handleRemoveRow.bind(this);
+        this.handleRemoveRefRow = this.handleRemoveRefRow.bind(this);
 
         this.handleRun = this.handleRun.bind(this);
 
@@ -74,18 +78,61 @@ class PlaylistView extends Component{
     }
 
     handleAddPart(event){
-        var parts = this.state.parts;
-        parts.push(this.state.newPlaylistName);
-        this.setState({
-            parts: parts,
-            add_part_value: ''
+
+        var check = this.state.parts.filter((e) => {
+            return e == event.target.value;
         });
-        axios.post('/api/playlist', {
-            name: this.state.name,
-            parts: parts
-        }).catch((error) => {
-            console.log(error);
+
+        if(check.length == 0) {
+            var parts = this.state.parts.slice();
+            parts.push(this.state.newPlaylistName);
+
+            parts.sort(function(a, b){
+                if(a < b) { return -1; }
+                if(a > b) { return 1; }
+                return 0;
+            });
+
+            this.setState({
+                parts: parts,
+                newPlaylistName: ''
+            });
+            axios.post('/api/playlist', {
+                name: this.state.name,
+                parts: parts
+            }).catch((error) => {
+                console.log(error);
+            });
+        }
+    }
+
+    handleAddReference(event){
+        
+        var check = this.state.playlist_references.filter((e) => {
+            return e == event.target.value;
         });
+
+        if(check.length == 0) {
+            var playlist_references = this.state.playlist_references.slice();
+            playlist_references.push(this.state.newPlaylistReference);
+            
+            playlist_references.sort(function(a, b){
+                if(a < b) { return -1; }
+                if(a > b) { return 1; }
+                return 0;
+            });
+            
+            this.setState({
+                playlist_references: playlist_references,
+                newPlaylistReference: ''
+            });
+            axios.post('/api/playlist', {
+                name: this.state.name,
+                playlist_references: playlist_references
+            }).catch((error) => {
+                console.log(error);
+            });
+        }
     }
 
     handleRemoveRow(id, event){
@@ -107,6 +154,25 @@ class PlaylistView extends Component{
         });
     }
 
+    handleRemoveRefRow(id, event){
+        var playlist_references = this.state.playlist_references;
+        playlist_references = playlist_references.filter(e => e !== id);
+        this.setState({
+            playlist_references: playlist_references
+        });
+
+        if(playlist_references.length == 0) {
+            playlist_references = -1;
+        }
+
+        axios.post('/api/playlist', {
+            name: this.state.name,
+            playlist_references: playlist_references
+        }).catch((error) => {
+            console.log(error);
+        });
+    }
+
     handleRun(event){
         axios.get('/api/playlist/run', {params: {name: this.state.name}})
         .catch((error) => {
@@ -123,8 +189,9 @@ class PlaylistView extends Component{
                         <th colSpan="2"><h1 className="text-no-select">{ this.state.name }</h1></th>
                     </tr>
                 </thead>
+                { this.state.playlist_references.length > 0 && <ListBlock name="managed" handler={this.handleRemoveRefRow} list={this.state.playlist_references}/> }
+                { this.state.parts.length > 0 && <ListBlock name="spotify" handler={this.handleRemoveRow} list={this.state.parts}/> }
                 <tbody>
-                    { this.state.parts.map((part) => <Row part={ part } key={ part } handler={this.handleRemoveRow}/>) }
                     <tr>
                         <td>
                             <input type="text"
@@ -132,12 +199,25 @@ class PlaylistView extends Component{
                                 className="full-width" 
                                 value={this.state.newPlaylistName} 
                                 onChange={this.handleInputChange}
-                                placeholder="new playlist"></input>
+                                placeholder="spotify playlist"></input>
                         </td>
                         <td>
                             <button className="button full-width" onClick={this.handleAddPart}>add</button>
                         </td>
                     </tr>
+                    <tr>
+                        <td>
+                            <input type="text"
+                                name="newPlaylistReference" 
+                                className="full-width" 
+                                value={this.state.newPlaylistReference} 
+                                onChange={this.handleInputChange}
+                                placeholder="managed playlist"></input>
+                        </td>
+                        <td>
+                            <button className="button full-width" onClick={this.handleAddReference}>add</button>
+                        </td>
+                    </tr>
                     <tr>
                         <td className="center-text ui-text text-no-select">
                             shuffle output?
@@ -163,7 +243,7 @@ class PlaylistView extends Component{
                     </tr>  
                     }
                     <tr>
-                        <td colspan="2">
+                        <td colSpan="2">
                             <button className="button full-width" onClick={this.handleRun}>run</button>
                         </td>
                     </tr>
@@ -178,6 +258,15 @@ class PlaylistView extends Component{
 
 }
 
+function ListBlock(props) {
+    return (
+        <tbody>
+            <tr><td colSpan="2" className="ui-text center-text text-no-select" style={{fontStyle: 'italic'}}>{props.name}</td></tr>
+            { props.list.map((part) => <Row part={ part } key={ part } handler={props.handler}/>) }
+        </tbody>
+    );
+}
+
 function Row (props) {
     return (
         <tr>
diff --git a/src/js/Playlist/PlaylistsView.js b/src/js/Playlist/PlaylistsView.js
index 809f15d..5d1abda 100644
--- a/src/js/Playlist/PlaylistsView.js
+++ b/src/js/Playlist/PlaylistsView.js
@@ -19,8 +19,17 @@ class PlaylistsView extends Component {
         var self = this;
         axios.get('/api/playlists')
         .then((response) => {
+
+            var playlists = response.data.playlists.slice();
+            
+            playlists.sort(function(a, b){
+                if(a.name < b.name) { return -1; }
+                if(a.name > b.name) { return 1; }
+                return 0;
+            });
+
             self.setState({
-                playlists: response.data.playlists,
+                playlists: playlists,
                 isLoading: false
             });
         });