diff --git a/CHANGES.rst b/CHANGES.rst
index 8ecc95cec6..4fceafe4cc 100644
--- a/CHANGES.rst
+++ b/CHANGES.rst
@@ -34,6 +34,9 @@ Mosviz
 Specviz
 ^^^^^^^
 
+- Line List Spectral Range filter displays only lines with an observed
+  wavelength within the range of the spectrum viewer [#1327]
+
 API Changes
 -----------
 
diff --git a/jdaviz/components/tooltip.vue b/jdaviz/components/tooltip.vue
index 2579040a88..0dbbd57238 100644
--- a/jdaviz/components/tooltip.vue
+++ b/jdaviz/components/tooltip.vue
@@ -66,6 +66,8 @@ const tooltips = {
   'plugin-line-lists-line-identify-chip-inactive': 'No line currently highlighted.  Use selection tool in spectrum viewer to identify a line.',
   'plugin-line-lists-line-visible': 'Toggle showing the line in the spectrum viewer',
   'plugin-line-lists-line-identify': 'Highlight this line in the spectrum viewer for easy identification',
+  'plugin-line-lists-color-picker': 'Change the color of this list',
+  'plugin-line-lists-spectral-range': 'Toggle filter to only lines observable within the range of the Spectrum Viewer',
   'plugin-line-analysis-sync-identify': 'Lock/unlock selection with identified line',
   'plugin-line-analysis-assign': 'Assign the centroid wavelength and update the redshift',
   'plugin-moment-save-fits': 'Save moment map as FITS file',
diff --git a/jdaviz/components/tray_plugin.vue b/jdaviz/components/tray_plugin.vue
index 1026bd91db..73d38b5afa 100644
--- a/jdaviz/components/tray_plugin.vue
+++ b/jdaviz/components/tray_plugin.vue
@@ -35,6 +35,13 @@ module.exports = {
     padding-left: 0px !important;
   }
 
+  .row-no-vertical-padding-margin {
+    padding-top: 0px !important;
+    padding-bottom: 0px !important;
+    margin-bottom: 0px !important;
+    margin-top: 0px !important;
+  }
+
   .row-no-outside-padding .col:last-of-type {
     padding-right: 0px !important;
   }
diff --git a/jdaviz/configs/default/plugins/line_lists/line_lists.py b/jdaviz/configs/default/plugins/line_lists/line_lists.py
index 4e6bfb0c80..d4c3df4139 100644
--- a/jdaviz/configs/default/plugins/line_lists/line_lists.py
+++ b/jdaviz/configs/default/plugins/line_lists/line_lists.py
@@ -54,9 +54,13 @@ class LineListTool(PluginTemplateMixin):
     custom_unit = Unicode().tag(sync=True)
 
     lines_filter = Any().tag(sync=True)  # string or None
+    filter_range = Bool(False).tag(sync=True)
+    spectrum_viewer_min = Float(0.01).tag(sync=True)
+    spectrum_viewer_max = Float(0.01).tag(sync=True)
 
     identify_label = Unicode().tag(sync=True)
     identify_line_icon = Unicode(read_icon(os.path.join(ICON_DIR, 'line_select.svg'), 'svg+xml')).tag(sync=True)  # noqa
+    filter_range_icon = Unicode(read_icon(os.path.join(ICON_DIR, 'spectral_range.svg'), 'svg+xml')).tag(sync=True)  # noqa
 
     def __init__(self, *args, **kwargs):
         super().__init__(*args, **kwargs)
@@ -103,7 +107,10 @@ def __init__(self, *args, **kwargs):
                            handler=self._process_identify_change)
 
         # if set to auto (default), update the slider range when zooming on the spectrum viewer
-        self._viewer.scales['x'].observe(self._auto_slider_range, names=['min', 'max'])
+        self._viewer.state.add_callback("x_min",
+                                        lambda x_min: self._on_spectrum_viewer_limits_changed())
+        self._viewer.state.add_callback("x_max",
+                                        lambda x_max: self._on_spectrum_viewer_limits_changed())
 
     def _on_viewer_data_changed(self, msg=None):
         """
@@ -155,7 +162,7 @@ def _on_viewer_data_changed(self, msg=None):
         self.rs_redshift = (viewer_data.redshift.value
                             if hasattr(viewer_data.redshift, 'value')
                             else viewer_data.redshift)
-        self._auto_slider_range()  # will also trigger _auto_slider_step
+        self._on_spectrum_viewer_limits_changed()  # will also trigger _auto_slider_step
 
         # set the choices (and default) for the units for new custom lines
         self.custom_unit_choices = create_spectral_equivalencies_list(viewer_data)
@@ -367,12 +374,23 @@ def vue_slider_reset(self, event):
         # updating during slide, so update them now
         self.vue_unpause_tables()
 
+    def _on_spectrum_viewer_limits_changed(self, event=None):
+        sv = self.app.get_viewer('spectrum-viewer')
+        self.spectrum_viewer_min = sv.state.x_min
+        self.spectrum_viewer_max = sv.state.x_max
+
+        # Also update the slider range
+        self._auto_slider_range()
+
     def _auto_slider_range(self, event=None):
+        """
+        Automatically adjusts the Redshift slider range to the values of the
+        spectrum_viewer_min and spectrum_viewer_max traitlets
+        """
         if not self.rs_slider_range_auto:
             return
         # if set to auto, default the range based on the limits of the spectrum plot
-        sv = self.app.get_viewer('spectrum-viewer')
-        x_min, x_max = sv.state.x_min, sv.state.x_max
+        x_min, x_max = self.spectrum_viewer_min, self.spectrum_viewer_max
         x_mid = abs(x_max + x_min) / 2.
         # we'll *estimate* the redshift range to shift the range of the viewer
         # (for a line with a rest wavelength in the center of the viewer),
@@ -393,7 +411,7 @@ def _auto_slider_range(self, event=None):
     @observe('rs_slider_range_auto')
     def _on_rs_slider_range_auto_updated(self, event):
         if event['new']:
-            self._auto_slider_range()
+            self._on_spectrum_viewer_limits_changed()
 
     @observe('rs_slider_half_range')
     def _auto_slider_step(self, event=None):
@@ -740,7 +758,8 @@ def vue_set_color(self, data):
         color = data['color']
         if "listname" in data:
             listname = data["listname"]
-            lc = self.list_contents[listname]
+            # force a copy so that the change is picked up by traitlets
+            lc = self.list_contents[listname].copy()
             lc["color"] = color
 
             for line in lc["lines"]:
@@ -752,6 +771,8 @@ def vue_set_color(self, data):
                 if name_rest in self.line_mark_dict:
                     self.line_mark_dict[name_rest].colors = [color]
 
+            self.list_contents = {**self.list_contents, listname: lc}
+
         elif "linename" in data:
             pass
 
diff --git a/jdaviz/configs/default/plugins/line_lists/line_lists.vue b/jdaviz/configs/default/plugins/line_lists/line_lists.vue
index 52d0eead8d..276e0176e0 100644
--- a/jdaviz/configs/default/plugins/line_lists/line_lists.vue
+++ b/jdaviz/configs/default/plugins/line_lists/line_lists.vue
@@ -113,36 +113,42 @@
       <v-expansion-panels accordion>
         <v-expansion-panel v-for="item in loaded_lists" key=":item">
           <v-expansion-panel-header v-slot="{ open }">
-            <v-row no-gutters align="center">
-              <v-col cols=3>
+            <v-row no-gutters align="center" style="max-width: calc(100% - 26px)">
+              <v-col cols=2>
                 <v-btn 
                   v-if="item != 'Custom'" 
                   @click.native.stop="remove_list(item)" 
+                  small="true"
                   icon
-                  style="width: 60%"
                 >
                   <v-icon>mdi-close-circle</v-icon>
                 </v-btn>
               </v-col>
-              <v-col cols=9 class="text--secondary">
-                <v-row>
-                  <span>{{ item }}</span>
-                </v-row>
+              <v-col cols=2>
+                <j-tooltip tipid='plugin-line-lists-color-picker'>
+                  <v-menu>
+                    <template v-slot:activator="{ on }">
+                        <span class="linelist-color-menu"
+                              :style="`background:${list_contents[item].color}`"
+                              @click.stop="on.click"
+                        >&nbsp;</span>
+                    </template>
+                    <div @click.stop="" style="text-align: end; background-color: white">
+                        <v-color-picker :value="list_contents[item].color"
+                                    @update:color="throttledSetColor({listname:item, color: $event.hexa})"></v-color-picker>
+                    </div>
+                  </v-menu>
+                </j-tooltip>
+              </v-col>
+              <v-col cols=8>
+                <div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">{{ item }}</div>
               </v-col>
+
+
             </v-row>
           </v-expansion-panel-header>
           <v-expansion-panel-content style="padding-left: 0px">
 
-            <v-row justify="space-around" style="padding-top: 16px">
-              <v-color-picker
-                hide-inputs
-                mode="hexa"
-                width="200px"
-                flat
-                @update:color="set_color({listname:item, color: $event.hexa})">
-              </v-color-picker>
-            </v-row>
-
             <div v-if="item == 'Custom'" style="padding-top: 16px">
               <v-row class="row-min-bottom-padding" style="display: block">
                   <j-tooltip tipid='plugin-line-lists-line-name'>
@@ -185,89 +191,114 @@
             </div>
 
             <div v-if="list_contents[item].lines.length">
-              <v-row class="row-no-padding">
-                <v-col cols=6>
-                  <j-tooltip tipid='plugin-line-lists-erase-all-in-list'>
-                    <v-btn 
-                     color="accent" 
-                     style="padding-left: 8px; padding-right: 8px;"
-                     text @click="hide_all_in_list(item)">Erase All</v-btn>
+
+              <v-row class="row-no-padding" style="margin-top: 4px">
+                <v-col cols=6 style="padding: 0">
+                  <j-tooltip tipid='plugin-line-lists-plot-all-in-list'>
+                    <v-btn
+                      tile
+                      :elevation=0
+                      x-small
+                      dense 
+                      color="turquoise"
+                      dark
+                      style="padding-left: 8px; padding-right: 6px;"
+                      @click="show_all_in_list(item)">
+                      <v-icon left small dense style="margin-right: 2px">mdi-eye</v-icon>
+                      Plot All
+                    </v-btn>
                   </j-tooltip>
                 </v-col>
-                <v-col cols=6 style="text-align: right">
-                  <j-tooltip tipid='plugin-line-lists-plot-all-in-list'>
-                    <v-btn 
-                     color="accent"
-                     style="padding-left: 8px; padding-right: 8px;"
-                     text @click="show_all_in_list(item)">Plot All</v-btn>
+                <v-col cols=6 style="text-align: right; padding: 0">
+                  <j-tooltip tipid='plugin-line-lists-erase-all-in-list'>
+                    <v-btn
+                      tile
+                      :elevation=0
+                      x-small
+                      dense
+                      color="turquoise"
+                      dark
+                      style="padding-left: 8px; padding-right: 6px;"
+                      @click="hide_all_in_list(item)">
+                      <v-icon left small dense style="margin-right: 2px">mdi-eye-off</v-icon>
+                      Erase All                     
+                    </v-btn>
                   </j-tooltip>
                 </v-col>
               </v-row>
 
               <v-row>
+                <j-tooltip tipid='plugin-line-lists-spectral-range'>
+                  <v-btn
+                    icon
+                    @click="filter_range = !filter_range"
+                    style="width: 30px; margin-top: 4px"
+                    ><img :class="filter_range ? 'color-to-accent' : 'invert-if-dark'" :src="filter_range_icon"/>
+                    
+                  </v-btn>
+                </j-tooltip>
+
                 <v-text-field
                   v-model="lines_filter"
                   append-icon='mdi-magnify'
-                  style="padding: 0px 8px"
+                  style="padding: 0px 0px; margin-left: 8px; max-width: calc(100% - 38px)"
                   clearable
                   hide-details
                 ></v-text-field>
               </v-row>
 
               <v-row v-for="(line, line_ind) in list_contents[item].lines" style="margin-bottom: 0px !important;">
-                <div v-if="lineItemVisible(line, lines_filter)">
-                  <v-row class="row-min-bottom-padding" style="margin: 0px">
-                    <j-tooltip tipid='plugin-line-lists-line-visible'>
-                      <v-btn :color="line.show ? 'accent' : 'default'" icon @click="change_visible([item, line, line_ind])">
-                        <v-icon>{{line.show ? "mdi-eye" : "mdi-eye-off"}}</v-icon>
-                      </v-btn>
-                    </j-tooltip>
-                    <j-tooltip tipid='plugin-line-lists-line-identify'>
-                      <v-btn icon @click="set_identify([item, line, line_ind])">
-                        <img :class="line.identify ? 'color-to-accent' : 'invert-if-dark'" :src="identify_line_icon" width="20"/>
-                      </v-btn>
-                    </j-tooltip>
-                    <span class='text--primary' style="overflow-wrap: anywhere; font-size: 12pt; padding-top: 6px; padding-left: 6px">
-                      {{line.linename}}
-                    </span>
-                  </v-row>
-                  <v-row class="row-min-bottom-padding">
-                    <v-col cols=3>
-                      <v-subheader>rest</v-subheader>
+                <div v-if="lineItemVisible(line, lines_filter, filter_range)">
+                  
+                  <v-row class="row-no-vertical-padding-margin" style="margin: 0px">
+                    <v-col cols=7  style="padding: 0">
+                      <span class='text--primary' style="overflow-wrap: anywhere; font-size: 16pt; padding-top: 3px;">
+                        <b>{{line.linename}}</b>
+                      </span>                    
+                    </v-col>
+                    
+                    <v-col cols=2 align="right" style="padding: 0">
+                      <j-tooltip tipid='plugin-line-lists-line-identify'>
+                        <v-btn icon @click="set_identify([item, line, line_ind])">
+                          <img :class="line.identify ? 'color-to-accent' : 'invert-if-dark'" :src="identify_line_icon" width="20"/>
+                        </v-btn>
+                      </j-tooltip>
                     </v-col>
-                    <v-col cols=6>
+                    <v-col cols=3 align="right" style="padding: 0">
+                      <j-tooltip tipid='plugin-line-lists-line-visible'>
+                        <v-btn :color="line.show ? 'accent' : 'default'" icon @click="change_visible([item, line, line_ind])">
+                          <v-icon>{{line.show ? "mdi-eye" : "mdi-eye-off"}}</v-icon>
+                        </v-btn>
+                      </j-tooltip style="padding: 0">
+                    </v-col>
+
+                  </v-row>
+                  <v-row class="row-min-bottom-padding" >
+                    <v-col cols=6 style="padding-bottom: 3px; padding-top: 0px">
+                      <v-subheader class="pl-0 slider-label" style="height: 16px"><b>Rest</b/></v-subheader>
                       <v-text-field
                         v-model="line.rest"
                         class="mt-0 pt-0"
-                        type="number"
-                        hide-details
-                        single-line
+                        dense
+                        :hint="line.unit"
+                        persistent-hint
                         disabled
                       ></v-text-field>
                     </v-col>
-                    <v-col cols=3>
-                      {{ line.unit.replace("Angstrom", "&#8491;") }}
-                    </v-col>
-                  </v-row>
-                  <v-row>
-                    <v-col cols=3>
-                      <v-subheader>obs</v-subheader>
-                    </v-col>
-                    <v-col cols=6>
+                    <v-col cols=6 style="padding-top: 0px">
+                      <v-subheader class="pl-0 slider-label" style="height: 16px"><b>Observed</b/></v-subheader>
                       <v-text-field
                         v-model="line.obs"
                         @input="(e) => change_line_obs({list_name: item, line_ind: line_ind, obs_new: parseFloat(e), avoid_feedback: true})"
                         @blur="unpause_tables"
                         step="0.1"
                         class="mt-0 pt-0"
+                        dense
                         type="number"
-                        hide-details
-                        single-line
+                        :hint="line.unit"
+                        persistent-hint
                       ></v-text-field>
                     </v-col>
-                    <v-col cols=3>
-                      {{ line.unit.replace("Angstrom", "&#8491;") }}
-                    </v-col>
                   </v-row>
                 </div>
               </v-row>
@@ -280,18 +311,34 @@
     <v-row class="row-no-padding">
       <v-col cols=6>
         <j-tooltip tipid='plugin-line-lists-erase-all'>
-          <v-btn 
-            color="accent"
-            style="padding-left: 8px; padding-right: 8px;"
-            text @click="erase_all_lines">Erase All</v-btn>
+          <v-btn
+            tile
+            :elevation=0
+            x-small
+            dense 
+            color="turquoise"
+            dark
+            style="padding-left: 8px; padding-right: 6px;"
+            @click="plot_all_lines">
+            <v-icon left small dense style="margin-right: 2px">mdi-eye</v-icon>
+            Plot All
+          </v-btn>
         </j-tooltip>
       </v-col>
       <v-col cols=6 style="text-align: right">
         <j-tooltip tipid='plugin-line-lists-plot-all'>
-          <v-btn 
-            color="accent"
-            style="padding-left: 8px; padding-right: 8px;"
-            text @click="plot_all_lines">Plot All</v-btn>
+          <v-btn
+            tile
+            :elevation=0
+            x-small
+            dense
+            color="turquoise"
+            dark
+            style="padding-left: 8px; padding-right: 6px;"
+            @click="erase_all_lines">
+            <v-icon left small dense style="margin-right: 2px">mdi-eye-off</v-icon>
+            Erase All                     
+          </v-btn>  
         </j-tooltip>
       </v-col>
 
@@ -303,12 +350,23 @@
 <script>
   module.exports = {
     methods: {
-      lineItemVisible(lineItem, lines_filter) {
+      lineItemVisible(lineItem, lines_filter, filter_range) {       
         if (lines_filter === null || lines_filter.length == 0) {
-          return true
+          text_filter = true
         }
-        // simple exact text search match on the line name for now.
-        return lineItem.linename.toLowerCase().indexOf(lines_filter.toLowerCase()) !== -1
+        else{
+          // simple exact text search match on the line name for now.
+          text_filter = lineItem.linename.toLowerCase().indexOf(lines_filter.toLowerCase()) !== -1
+        }
+
+        if (filter_range) {
+          in_range = (lineItem.obs > this.spectrum_viewer_min) && (lineItem.obs < this.spectrum_viewer_max)
+        }
+        else{
+          in_range = true
+        }
+
+        return (text_filter && in_range)
       }
     },
     created() {
@@ -335,6 +393,9 @@
       this.setRVFloat = (v) => {
         this.rs_rv = parseFloat(v)
       }
+      this.throttledSetColor = _.throttle(
+        (v) => { this.set_color(v) },
+        100);
     }
   }
 </script>
@@ -343,4 +404,10 @@
   .v-slider {
     margin: 0px !important;
   }
+
+  .linelist-color-menu {
+      font-size: 16px;
+      padding-left: 16px;
+      border: 2px solid rgba(0,0,0,0.54);
+  }
 </style>
diff --git a/jdaviz/data/icons/spectral_range.svg b/jdaviz/data/icons/spectral_range.svg
new file mode 100644
index 0000000000..f79791af1a
--- /dev/null
+++ b/jdaviz/data/icons/spectral_range.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 71.17 67.9"><path d="M68.64,51.24s-1.25.21-2.91.3V2.68h-10a2,2,0,0,0,0,3.92h6.11V51.43a11.91,11.91,0,0,1-1.35-.25c-.58-.14-2.39-2.28-3.8-10.38-.3-1.72-1.43-1.75-1.9-1.69a1.6,1.6,0,0,0-1.39,1.82c-1.09,5-3.14,10-4.24,10.28a2,2,0,0,1-1.61-.43c-3.39-2.59-4.66-13.88-5.59-22.13L41.74,27c-.57-5-1.58-13.29-1.58-13.29a1.6,1.6,0,0,0-1.67-1.44,1.64,1.64,0,0,0-1.58,1.54c0,.1-.58,10-.92,12.68C35.17,33,33.64,45,31.92,47.83a9.11,9.11,0,0,1-3.46,3.08V6.6h6.11a2,2,0,1,0,0-3.92h-10V51.92c-2.52-.09-5.21-.74-5.85-3.86s-1.64-12.91-1.65-13a1.63,1.63,0,0,0-3.25.09c0,.11-.48,10.87-.88,13.46-.26,1.69-.94,2.24-2.78,2.24H2.71a1.63,1.63,0,0,0,0,3.26h7.42c3.68,0,5.19-2,5.77-4,1.22,3.17,4.13,4.84,8.64,5v9.64h10a2,2,0,0,0,0-3.92H28.46V54.51a13.12,13.12,0,0,0,6.26-5c1.71-2.85,2.94-10.56,4.09-19.34,1.08,9.51,2.41,19.91,6.73,23.21a5.27,5.27,0,0,0,4.1,1c2.31-.36,4-3.54,5.24-6.85,1.88,6.06,4,6.58,4.81,6.77a16.76,16.76,0,0,0,2.12.36v6.18H55.7a2,2,0,1,0,0,3.92h10v-10a30.43,30.43,0,0,0,3.47-.35,1.63,1.63,0,0,0-.56-3.22Z"/></svg>
\ No newline at end of file