diff --git a/app/assets/javascripts/ramp_utils.js b/app/assets/javascripts/ramp_utils.js
index ab9cd78e07..581fe0eddd 100644
--- a/app/assets/javascripts/ramp_utils.js
+++ b/app/assets/javascripts/ramp_utils.js
@@ -14,25 +14,87 @@
  * ---  END LICENSE_HEADER BLOCK  ---
 */
 
+/** Get the current active structure item from DOM */
+function getActiveItem() {
+  let currentPlayer = document.getElementById('iiif-media-player');
+  let duration = currentPlayer.player.duration();
+  let currentStructureItem = $('li[class="ramp--structured-nav__list-item active"]');
+  let currentSection = $('div[class="ramp--structured-nav__section active"]');
+
+  if(currentStructureItem?.length > 0) {
+    /**
+     * When there's an active timespan in the structured navigation
+     * use its details to populate the create timeline and add to
+     * playlist optioins
+     */
+    let label = currentStructureItem[0].dataset.label;
+    let activeCanvasOnly = currentSection.parent().is(currentStructureItem);
+    // When canvas item is the only active structure item, add it as an option
+    if(activeCanvasOnly) {
+      let { mediafrag, label } = currentSection[0].dataset;
+      let [ itemId, timeHash ] = mediafrag.split('#t=');
+      return { 
+        label, 
+        times: {
+          begin: parseFloat(timeHash.split(',')[0]) || 0,
+          end: parseFloat(timeHash.split(',')[1]) || duration
+        },
+        tags: ['current-track', 'current-section'],
+        streamId: itemId.split('/').pop()
+      }
+    }
+  
+    // When structure has an active timespan child
+    if(currentStructureItem.find('a').length > 0) {
+      let item = currentStructureItem.find('a')[0];
+      let timeHash = item.hash.split('#t=').pop();
+      let times = {
+        begin: parseFloat(timeHash.split(',')[0]) || 0,
+        end: parseFloat(timeHash.split(',')[1]) || duration
+      }
+      let streamId = item.pathname.split('/').pop();
+      return { label, times, tags: ['current-track'], streamId };
+    }
+  } else if (currentSection?.length > 0) {
+    /** When the structured navigation doesn't have an active timespan
+     * get the current active section to populate the timeline and add
+     * to playlist options */
+    let label = currentSection[0].dataset.label;
+    return {
+      label,
+      times: {
+        begin: currentPlayer.player.currentTime(),
+        end: duration,
+      },
+      tags: ['current-section'],
+      streamId: '',
+    }
+  }
+}
+
 /**
- * Get new timeline scopes for active section playing
+ * Get new timeline scopes for active section
  * @function getTimelineScopes
- * @param title title of the mediaobject
- * @return { [{string, int, string}], string } { [{label, tracks, t}], streamId } = [scope label, number of tracks, mediafragment], masterfile id
+ * @returns {object} { [{label: string, tracks: int, times: { begin: float, end: float }, tag: string }], streamId: string }
+ * {[{ scope label, number of tracks, { start, end times of the mediafragment }, tag }], masterfile id }
  */
-function getTimelineScopes(title) {
+function getTimelineScopes() {
   let scopes = new Array();
   let trackCount = 1;
-  let currentStructureItem = $('li[class="ramp--structured-nav__list-item active"]');
+  let currentStructureItem = $('li[class="ramp--structured-nav__list-item active"]') ||
+  $('div[class="ramp--structured-nav__section active"]');
   let activeItem = getActiveItem();
-  let streamId = activeItem.streamId;
+  let streamId = '';
 
-  scopes.push({
-    label: activeItem.label,
-    tracks: trackCount,
-    times: activeItem.times,
-    tag: 'current-track',
-  });
+  if(activeItem != undefined) {
+    streamId = activeItem.streamId;
+    scopes.push({
+      label: activeItem.label,
+      tracks: trackCount,
+      times: activeItem.times,
+      tags: activeItem.tags,
+    });
+  }
 
   let parent = currentStructureItem.closest('ul').closest('li');
   while (parent.length > 0) {
@@ -42,36 +104,18 @@ function getTimelineScopes(title) {
     let begin = parseFloat(tracks[0].hash.split('#t=').reverse()[0].split(',')[0]) || 0;
     let end = parseFloat(tracks[trackCount - 1].hash.split('#t=').reverse()[0].split(',')[1]) || '';
     streamId = tracks[0].pathname.split('/').reverse()[0];
-    let label = cleanLabel(
-      parent[0].childNodes[0].textContent, 
-      parent.find('.ramp--structured-nav__section-duration')
-    );
+    let label = parent[0].dataset.label;
     scopes.push({
-      label: next.length == 0 ? `${title} - ${label}` : label,
+      label: label,
       tracks: trackCount,
       times: { begin, end },
+      tags: next.length == 0 ? ['current-section'] : [], // mark the outermost item representing the current section
     });
     parent = next;
   }
   return { scopes: scopes.reverse(), streamId };
 }
 
-/**
- * Clean label text from structured navigation
- * @param {String} label full label text of active item
- * @param {Object} timestamp HTML span element with duration for section items
- * @returns {String} label without index numbers and duration information
- */
-function cleanLabel(label, timestamp) {
-  let labelWoIndex = label.replace(/^[0-9]+./, '');
-  if(timestamp?.length > 0) {
-    let time = timestamp[0].textContent;
-    return labelWoIndex.replace(time, '');
-  } else {
-    return labelWoIndex.split(' (')[0];
-  }
-}
-
 /**
  * Parse time in seconds to hh:mm:ss.ms format
  * @param {Number} secTime time in seconds
@@ -136,7 +180,7 @@ function collapseMoreDetails() {
 /** AJAX request for add to playlist for submission for playlist item for 
  * a selected clip
  */
-function addPlaylistItem (playlistId, masterfileId) {
+function addPlaylistItem (playlistId, masterfileId, starttime, endtime) {
   $.ajax({
     url: '/playlists/' + playlistId + '/items',
     type: 'POST',
@@ -145,8 +189,8 @@ function addPlaylistItem (playlistId, masterfileId) {
         master_file_id: masterfileId,
         title: $('#playlist_item_title').val(),
         comment: $('#playlist_item_description').val(),
-        start_time: $('#playlist_item_start').val(),
-        end_time: $('#playlist_item_end').val()
+        start_time: starttime,
+        end_time: endtime,
       }
     },
     success: function(res) {
@@ -214,8 +258,6 @@ function handleAddError(error) {
 
 /** Reset add to playlist form */
 function resetAddToPlaylistForm() {
-  $('#playlist_item_start')[0].value = '';
-  $('#playlist_item_end')[0].value = '';
   $('#playlist_item_description').value = '';
   $('#playlist_item_title').value = '';
   $('input[name="post[playlistitem_scope]"]').prop('checked', false);
@@ -229,22 +271,3 @@ function closeAlert() {
   $('#add_to_playlist_alert').slideUp();
   $('#add_to_playlist_form_group').slideDown();
 }
-
-/** Get the current active structure item from DOM */
-function getActiveItem() {
-  let currentPlayer = document.getElementById('iiif-media-player');
-  let duration = currentPlayer.player.duration();
-  let currentStructureItem = $('li[class="ramp--structured-nav__list-item active"]');
-  if(currentStructureItem.find('a').length > 0) {
-    let item = currentStructureItem.find('a')[0];
-    let label = cleanLabel(item.text, 
-      currentStructureItem.find('.ramp--structured-nav__section-duration'));
-    let timeHash = item.hash.split('#t=').reverse()[0];
-    let times = {
-      begin: parseFloat(timeHash.split(',')[0]) || 0,
-      end: parseFloat(timeHash.split(',')[1]) || duration
-    }
-    let streamId = item.pathname.split('/').reverse()[0];
-    return { label, times, streamId };
-  }
-}
diff --git a/app/assets/stylesheets/avalon/_form.scss b/app/assets/stylesheets/avalon/_form.scss
index bceb1e904a..b89bff9aa9 100644
--- a/app/assets/stylesheets/avalon/_form.scss
+++ b/app/assets/stylesheets/avalon/_form.scss
@@ -124,3 +124,30 @@ label {
     flex-wrap: nowrap;
   }
 }
+
+/* Add to playlist form on item-view page */
+#add-to-playlist-form-group {
+  .form-check {
+    padding-bottom: 0.1rem;
+  }
+
+  #playlist_item_end, #playlist_item_start {
+    border-radius: 0.25rem;
+    border: 1px solid $gray;
+    padding: 0 0.5rem;
+  }
+
+  #playlist_item_end:invalid:focus,
+  #playlist_item_start:invalid:focus {
+    color: $danger;
+    box-shadow: 0 0 10px $danger;
+    border: 1px solid $danger;
+  }
+
+  #playlist_item_end:valid:focus,
+  #playlist_item_start:valid:focus {
+    color: $dark;
+    box-shadow: none;
+    border: 1px solid $gray;
+  }
+}
diff --git a/app/javascript/components/Ramp.jsx b/app/javascript/components/Ramp.jsx
index d8ddbe59c0..924a9a8d13 100644
--- a/app/javascript/components/Ramp.jsx
+++ b/app/javascript/components/Ramp.jsx
@@ -101,12 +101,12 @@ const Ramp = ({
                           </div>
                           <Row className="mx-0">
                             <Col md={12} lg={12} sm={12}>
-                              <div className="collapse multi-collapse" id="addToPlaylistPanel">
+                              <div className="collapse" id="addToPlaylistPanel">
                                 <div className="card card-body" dangerouslySetInnerHTML={{ __html: playlist.tab }} />
                               </div>
                             </Col>
                             <Col md={12} lg={12} sm={12}>
-                              <div className="collapse multi-collapse" id="shareResourcePanel">
+                              <div className="collapse" id="shareResourcePanel">
                                 <div className="card card-body share-tabs" dangerouslySetInnerHTML={{ __html: share.content }} />
                               </div>
                             </Col>
diff --git a/app/views/media_objects/_add_to_playlist.html.erb b/app/views/media_objects/_add_to_playlist.html.erb
index a342b913a4..ff0c2e121f 100644
--- a/app/views/media_objects/_add_to_playlist.html.erb
+++ b/app/views/media_objects/_add_to_playlist.html.erb
@@ -43,14 +43,14 @@ Unless required by applicable law or agreed to in writing, software distributed
                 Current Track (<span id="current-track-name"></span>)
             </label>
           </div>
-          <div class="form-check" onclick="collapseMoreDetails()">
-            <label class="form-check-label">
+          <div class="form-check">
+            <label class="form-check-label" onclick="collapseMoreDetails()">
               <input type="radio" name="post[playlistitem_scope]" id="playlistitem_timeselection" aria-label="playlist item time selection">
               Time Selection
-              <input type="text" name="playlist_item_start" id="playlist_item_start" value="" aria-label="start time">
-                to 
-              <input type="text" name="playlist_item_end" id="playlist_item_end" value="" aria-label="end time">
             </label>
+            <input type="text" name="playlist_item_start" id="playlist_item_start" pattern="(\d+:){0,2}\d+(\.\d+)?" value="" aria-label="start time">
+              to 
+            <input type="text" name="playlist_item_end" id="playlist_item_end" pattern="(\d+:){0,2}\d+(\.\d+)?" value="" aria-label="end time">
           </div>
           <div class="form-check" onclick="collapseMultiItemCheck()" >
             <label class="form-check-label">
@@ -143,8 +143,10 @@ Unless required by applicable law or agreed to in writing, software distributed
 <% content_for :page_scripts do %>
   <script>
     $(document).ready(function() {
+      const sectionIds = <%= @media_object.ordered_master_file_ids.to_json.html_safe %>;
       let mediaObjectId, streamId, mediaObjectTitle;
       let listenersAdded = false;
+      let activeTrack = null;
       // Enable add to playlist button after derivative is loaded
       let timeCheck = setInterval(initAddToPlaylist, 500);
       function initAddToPlaylist() {
@@ -164,10 +166,19 @@ Unless required by applicable law or agreed to in writing, software distributed
         player.on('timeupdate', () => {
           if(getActiveItem() != undefined) {
             let { label, times, streamId } = getActiveItem();
-            $('#playlist_item_start').val(createTimestamp(times.begin, true));
+            let starttime = player.currentTime() || times.begin;
+            $('#playlist_item_start').val(createTimestamp(starttime, true));
             $('#playlist_item_end').val(createTimestamp(times.end, true));
             $('#playlist_item_title').val(`${mediaObjectTitle} - ${label}`);
             $('#current-track-name').text(`${mediaObjectTitle} - ${label}`);
+            // When player's currentTime equals the active item's begin, then
+            // playhead is not encompassed within an active track. When this happens
+            // disable the current track option
+            if(times.begin === starttime) {
+              $('#playlistitem_scope_track')[0].disabled = true;
+            } else {
+              $('#playlistitem_scope_track')[0].disabled = false;
+            }
           }
         });
         player.on('dispose', () => {
@@ -187,45 +198,63 @@ Unless required by applicable law or agreed to in writing, software distributed
         }
       }
 
-      function addListeners() {
+      function addListeners() {        
         $('#addToPlaylistPanel').on('show.bs.collapse', function (e) {
+          // Hide add to playlist alert on panel show
+          $('#add_to_playlist_alert').slideUp(0);
           // Hide share resource panel on add to playlist panel show
           $('#shareResourcePanel').collapse('hide');
-          // Hide add to playlist alert on panel show
-          $('#add_to_playlist_alert').slideUp(100);
 
           let playlistForm = $('#add_to_playlist')[0];
           if(!playlistForm) {
             return;
           }
-          mediaObjectTitle = playlistForm.dataset.title;
-          mediaObjectId = playlistForm.dataset.moid;
-          let timelineScopes = getTimelineScopes(mediaObjectTitle);
-          scopes = timelineScopes.scopes;
-          streamId = timelineScopes.streamId;
-          let currentPlayer = document.getElementById('iiif-media-player').player;
+          
+          // For custom scope set start, end times as current time and media duration respectively
+          let currentPlayer = document.getElementById('iiif-media-player');
           let start, end = 0;
-          if(currentPlayer) {
-            start = currentPlayer.currentTime();
-            end = currentPlayer.duration();
+          if(currentPlayer && currentPlayer.player) {
+            start = currentPlayer.player.currentTime();
+            end = currentPlayer.player.duration();
           }
           // Add 'Add new playlist' option to dropdown
           window.add_new_playlist_option();
+
+          let canvasIndex = parseInt(currentPlayer.dataset.canvasindex);
+          mediaObjectTitle = playlistForm.dataset.title;
+          mediaObjectId = playlistForm.dataset.moid;
+          let timelineScopes = getTimelineScopes();
+          scopes = timelineScopes.scopes;
+          streamId = timelineScopes.streamId || sectionIds[canvasIndex];
+
+          // Fill in the current track and section titles and custom scope times
           if(scopes?.length > 0) {
-            let trackInfo = scopes.filter(s => s.tag === 'current-track');
+            let sectionInfo = scopes.filter(s => s.tags.includes('current-section'));
+            let currentSectionLabel = mediaObjectTitle;
+            if(sectionInfo?.length > 0) {
+              currentSectionLabel = sectionInfo[0].label || currentSectionLabel;
+              $('#current-section-name').text(currentSectionLabel);
+            }
+
+            let trackInfo = scopes.filter(s => s.tags.includes('current-track'));
             if(trackInfo.length > 0) {
-              let currentTrack = trackInfo[0];
-              let trackName = `${mediaObjectTitle} - ${currentTrack.label || streamId}`
+              activeTrack = trackInfo[0];
+              let trackName = `${currentSectionLabel} - ${activeTrack.label || streamId}`;
               $('#current-track-name').text(trackName);
-              start = currentTrack.times.begin;
-              end = currentTrack.times.end;
+              // Update start, end times for custom scope from the active timespan 
+              start = activeTrack.times.begin;
+              end = activeTrack.times.end;
+              $('#playlistitem_scope_track')[0].disabled = false;
+            } else {
+              activeTrack = null;
+              $('#playlistitem_scope_track')[0].disabled = true;
             }
-            $('#playlist_item_start').val(createTimestamp(start, true))
-            $('#playlist_item_end').val(createTimestamp(end, true))
-
-            let sectionInfo = scopes[0];
-            $('#current-section-name').text(sectionInfo.label || mediaObjectId);
           }
+          $('#playlist_item_start').val(createTimestamp(start, true));
+          $('#playlist_item_end').val(createTimestamp(end, true));
+
+          // Show add to playlist form on show and reset initially
+          $('#add_to_playlist_form_group').slideDown();
         });
 
         $('#addToPlaylistSave').on('click', function (e) {
@@ -233,12 +262,13 @@ Unless required by applicable law or agreed to in writing, software distributed
           let playlistId = $('#post_playlist_id').val();
           let label, t, id;
           if ($('#playlistitem_timeselection')[0].checked || $('#playlistitem_scope_track')[0].checked) {
-            let pattern = /^(\d+:){0,2}\d+(\.\d+)?$/;
-            let beginval = $('#playlist_item_start')[0].value;
-            let endval = $('#playlist_item_end')[0].value;
-            $('#playlist_item_start').css('color', (pattern.test(beginval) ? 'black' : 'red'))
-            $('#playlist_item_end').css('color', (pattern.test(endval) ? 'black' : 'red'))
-            addPlaylistItem(playlistId, streamId);
+            let starttime = $('#playlist_item_start').val();
+            let endtime = $('#playlist_item_end').val();
+            if(activeTrack) {
+              starttime = createTimestamp(activeTrack.times.begin, true);
+              endtime = createTimestamp(activeTrack.times.end, true);
+            }
+            addPlaylistItem(playlistId, streamId, starttime, endtime);
           } else if ($('#playlistitem_scope_section')[0].checked) {
             let multiItemCheck = $('#playlistitem_scope_structure')[0].checked;
             let scope = multiItemCheck ? 'structure' : 'section';
@@ -247,10 +277,10 @@ Unless required by applicable law or agreed to in writing, software distributed
             let multiItemCheck = $('#playlistitem_scope_structure')[0].checked;
             let scope = multiItemCheck ? 'structure' : 'section';
             addToPlaylist(playlistId, scope, '', mediaObjectId);
-          } 
+          } else {
+            handleAddError({ responseJSON: { message: ['Please select a playlist option'] }})
+          }
         });
-        // Show add to playlist form on show and reset initially
-        $('#add_to_playlist_form_group').slideDown();
         listenersAdded = true;
       }
     });
diff --git a/app/views/media_objects/_timeline.html.erb b/app/views/media_objects/_timeline.html.erb
index 08517047f8..fbf45f8093 100644
--- a/app/views/media_objects/_timeline.html.erb
+++ b/app/views/media_objects/_timeline.html.erb
@@ -70,7 +70,7 @@ $(document).ready(function() {
       let bodyText = "<p>Choose scope for new timeline:</p>";
 
       title = this.dataset.title;
-      let timelineScopes = getTimelineScopes(title);
+      let timelineScopes = getTimelineScopes();
       scopes = timelineScopes.scopes;
       streamId = timelineScopes.streamId;
       let currentPlayer = document.getElementById('iiif-media-player').player;
@@ -78,6 +78,10 @@ $(document).ready(function() {
       for (let index = 0; index < scopes.length; index++) {
         scope = scopes[index];
         label = scope.label
+        // Add mediaobject title for the option representing the current section
+        if(scope.tags.includes('current-section')) {
+          label = `${title} - ${label}`
+        }
         if (scope.tracks > 1) {
           label += " (" + scope.tracks + " tracks)"
         }