diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index 09eeb04..953c41b 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -1349,6 +1349,10 @@ h6 {
     padding-left: 0px!important;
 }
 
+.select2-dropdown {
+    z-index: 9999!important;
+}
+
 .popover {
     max-width: 50%;
 }
diff --git a/src/assets/js/select_signals.js b/src/assets/js/select_signals.js
index 1a27e34..02cb73b 100644
--- a/src/assets/js/select_signals.js
+++ b/src/assets/js/select_signals.js
@@ -79,16 +79,7 @@ function addSelectedSignals(dataSource, timeType, signalSetEndpoint) {
     $("#showSelectedSignalsButton").show();
 }
 
-function plotData(epivisUrl) {
-    var dataSets = [];
-    for (const signal in JSON.parse(localStorage.getItem("selectedSignals"))) {
-        dataSets.push(JSON.parse(localStorage.getItem("selectedSignals"))[signal]['epivis']);
-    }
-    var urlParamsEncoded = btoa(`{"datasets":${JSON.stringify(dataSets)}}`);
-    
-    var linkToEpivis = `${epivisUrl}#${urlParamsEncoded}`
-    window.open(linkToEpivis, '_blank').focus();
-}
+
 
 document.addEventListener('DOMContentLoaded', function() {
     // Call the function to update the modal content when the page loads
diff --git a/src/signal_sets/views.py b/src/signal_sets/views.py
index 8144114..e8232ce 100644
--- a/src/signal_sets/views.py
+++ b/src/signal_sets/views.py
@@ -68,6 +68,7 @@ def get_context_data(self, **kwargs: Any) -> dict[str, Any]:
             self.request.GET, queryset=self.get_queryset()
         )
         context["signal_sets"] = self.get_queryset()
+        context["available_geographies"] = Geography.objects.all()
         return context
 
 
diff --git a/src/templates/index.html b/src/templates/index.html
index bc5e70a..4b77ea0 100644
--- a/src/templates/index.html
+++ b/src/templates/index.html
@@ -174,7 +174,7 @@
         
         
         <!-- Modal -->
-        <div class="modal fade" id="selectedSignalsModal" tabindex="-1" aria-labelledby="selectedSignalsModalLabel" aria-hidden="true">
+        <div class="modal fade" id="selectedSignalsModal" tabindex="-1" aria-labelledby="selectedSignalsModalLabel">
             <div class="modal-dialog modal-xl modal-fullscreen-xl-down">
             <div class="modal-content">
                 <div class="modal-header">
@@ -186,19 +186,39 @@ <h5 class="modal-title" id="selectedSignalsModalLabel">Selected signals</h5>
                         <thead>
                           <tr>
                             <th scope="col">Signal name</th>
-                            <th scope="col">Signal description</th>
-                            <th scope="col">Data Source</th>
-                            <th scope="col">Signal tech name</th>
-                            <th scope="col">Time Type</th>
-                            <th scope="col">Geo Type</th>
-                            <th scope="col">Geo Value</th>
+                            <th scope="col">Signal name</th>
                           </tr>
                         </thead>
                         <tbody id="selectedSignalsList"></tbody>
                       </table>
+                      
                 </div>
                 <div class="modal-footer">
-                <button type="button" class="btn btn-secondary" id="clearSelectedSignals" data-mdb-ripple-init >Reset selected signals</button>
+                    <div class="row">
+                        <div class="row margin-top-1rem">
+                            <div class="col-2">
+                                <label for="geographic_type" class="form-label"
+                                    >Geographic Type:</label
+                                >
+                            </div>
+                            <div class="col-10">
+                                <select id="geographic_type" name="geographic_type" class="form-select">
+                                    <option selected>Choose...</option>
+                                    {% for geography in available_geographies %}
+                                    <option value="{{ geography.name }}">{{ geography }}</option>
+                                    {% endfor %}
+                                </select>
+                            </div>
+                        </div>
+                        <div class="row margin-top-1rem">
+                            <div class="col-2">
+                                <label for="geographic_value" class="col-form-label">Geographic Value:</label>
+                            </div>
+                            <div class="col-10">
+                                <select id="geographic_value" name="geographic_value" class="form-select" multiple="multiple"></select>
+                            </div>
+                        </div>
+                    </div>
                 <button type="button" class="btn btn-primary" id="plotSelectedSignals" data-mdb-ripple-init>Show plot</button>
                 </div>
             </div>
@@ -241,31 +261,55 @@ <h5 class="modal-title" id="selectedSignalsModalLabel">Selected signals</h5>
 
         <script>
             const epivisUrl = "{{ epivis_url }}";
-            $(document).ready(function () {
-                if (localStorage.getItem("selectedSignals")) {
-                    $("#showSelectedSignalsButton").show();
+            var geoValues = [];
+
+            function getFilteredGeographicValues(geographicType) {
+                var data = geoValues.reduce((data, geoValue) => {
+                    if (geoValue.geoType === geographicType) {
+                        data.push(geoValue);
+                    }
+                    return data;
+                }, []);
+                return data;
+            }
+
+            function initGeographicValueSelect(geographicType = null) {
+                if (geographicType) {
+                    var data = getFilteredGeographicValues(geographicType);
                 } else {
-                    $("#showSelectedSignalsButton").hide();
+                    data = [];
                 }
-            });
+        
+        
+                $('#geographic_value').select2({
+                    data: data,
+                    minimumInputLength: 0,
+                    maximumSelectionLength: 5,
+                });
+            }
 
+            document.getElementById('geographic_type').addEventListener("change", (event) => {
+                $('#geographic_value').empty();
+                $('#modeSubmitResult').html('');
+                initGeographicValueSelect(event.target.value);
+            })
 
-            var plotSelectedSignals = document.getElementById('plotSelectedSignals');
-            plotSelectedSignals.addEventListener('click', function() {
-                plotData(epivisUrl);
-            });
+            $(document).ready(function () {
+                {% for geography in available_geographies %}
+                    {% for unit in geography.geography_units.all %}
+                        geoValues.push({'id': '{{ unit.geo_id }}', 'geoType': '{{ unit.geography.name }}', 'text': '{{ unit.display_name }}'});
+                    {% endfor %}
+                {% endfor %}
 
-            document.addEventListener('DOMContentLoaded', function() {
-                var clearButton = document.getElementById('clearSelectedSignals');
-        
-                clearButton.addEventListener('click', function() {
-                    localStorage.removeItem('selectedSignals');
-                    selectedSignals = {};  // Replace 'selectedSignals' with the key you want to remove
-                    $("#selectedSignalsList").empty();
-                    $("#showSelectedSignalsButton").hide();
-                    alert('Selected signals have been cleared from localStorage.');
+                var plotSelectedSignals = document.getElementById('plotSelectedSignals');
+                    plotSelectedSignals.addEventListener('click', function() {
+                        plotData(epivisUrl);
                 });
             });
+
+            
+
+
         </script>
 
 
diff --git a/src/templates/signal_sets/signal_set_detail.html b/src/templates/signal_sets/signal_set_detail.html
index 7e2f254..7d7683d 100644
--- a/src/templates/signal_sets/signal_set_detail.html
+++ b/src/templates/signal_sets/signal_set_detail.html
@@ -364,7 +364,7 @@ <h5>Signal members</h5>
         }
 
         var geoValues = [];
-    var currentMode = 'preview';
+        var currentMode = 'preview';
 
     function getFilteredGeographicValues(geographicType) {
         var data = geoValues.reduce((data, geoValue) => {
diff --git a/src/templates/signal_sets/signal_sets.html b/src/templates/signal_sets/signal_sets.html
index 8641893..b54aa2d 100644
--- a/src/templates/signal_sets/signal_sets.html
+++ b/src/templates/signal_sets/signal_sets.html
@@ -249,6 +249,7 @@ <h2 class="accordion-header" id="flush-heading_{{ form.temporal_granularity.auto
                         <table class="table table-hover">
                             <thead>
                                 <tr>
+                                    <th scope="col"></th>
                                     <th scope="col">Name</th>
                                     <th scope="col">Description of data*</th>
                                     <th scope="col">Name of maintainer/key contact*</th>
@@ -284,6 +285,9 @@ <h2 class="accordion-header" id="flush-heading_{{ form.temporal_granularity.auto
                             <tbody>
                                 {% for signal_set in signal_sets %}
                                 <tr>
+                                    <td>
+                                        <input type="checkbox" name="showSignalMembers" value="{{ signal_set.id }}">
+                                    </td>
                                     <td class="clickable-table-cell"
                                         onClick="location.href='{% url 'signal_set' pk=signal_set.id %}';">
                                         {{ signal_set.name }}
@@ -428,6 +432,38 @@ <h2 class="accordion-header" id="flush-heading_{{ form.temporal_granularity.auto
                                         {{ signal_set.link_to_documentation }}
                                         <br>
                                     </td>
+                                    <tr style="display: none;">
+                                        <td colspan="2"></td>
+                                        <td colspan="5">
+                                            <div class="table-responsive">
+                                                <table class="table mb-0 caption-top">
+                                                    <caption>
+                                                        Select Signal Set Members
+                                                    </caption>
+                                                    <thead>
+                                                        <th scope="col"></th>
+                                                        <th scope="col">Signal Name</th>
+                                                        <th scope="col">Signal description</th>
+                                                    </thead>
+                                                    <tbody>
+                                                        {% for signal in signal_set.signals.all %}
+                                                            <tr>
+                                                                <td>
+                                                                    <input type="checkbox" name="selectedSignal" data-signalDisplayName="{{ signal.display_name }}" data-signalSet="{{ signal_set.name }}" data-endpoint="{{ signal_set.endpoint }}" data-dataSource="{{ signal.source.name }}" data-signal="{{ signal.name }}" data-timeType="{{ signal.time_type }}">
+                                                                </td>
+                                                                <td>
+                                                                    {{ signal.member_name}}
+                                                                </td>
+                                                                <td>
+                                                                    {{ signal.member_description }}
+                                                                </td>
+                                                            </tr>
+                                                        {% endfor %}
+                                                    </tbody>
+                                                </table>
+                                            </div>
+                                          </td>
+                                    </tr>
                                 </tr>
                                 {% endfor %}
                             </tbody>
@@ -458,6 +494,99 @@ <h2 class="accordion-header" id="flush-heading_{{ form.temporal_granularity.auto
         }
     }
 
+    let showSignalMembers = document.getElementsByName("showSignalMembers");
+    showSignalMembers.forEach((checkbox) => {
+        checkbox.addEventListener('change', function(event) {
+            let signalSetMembersTable = this.parentElement.parentElement.nextElementSibling;
+            signalSetMembersTable.style.display = this.checked ? 'table-row' : 'none';
+        });
+    })
+
+
+
+    let checkedSignalMembers = []
+
+        // Function to update the modal content
+    function updateSelectedSignals(signalSet, signal) {
+        var selectedSignalsList = document.getElementById('selectedSignalsList');
+
+        var tr = document.createElement('tr');
+        tr.setAttribute('id', `${signalSet}_${signal}`);
+        var signalSetName = document.createElement('td');
+        signalSetName.textContent = signalSet;
+        tr.appendChild(signalSetName);
+        var signalName = document.createElement('td');
+        signalName.textContent = signal;
+        tr.appendChild(signalName);
+        selectedSignalsList.appendChild(tr);
+    }
+
+    let dataSignals = Array.from(document.getElementsByName('selectedSignal'));
+    dataSignals.forEach((checkbox) => {
+        checkbox.addEventListener('change', function(event) {
+            if (this.checked) {
+                checkedSignalMembers.push({
+                    _endpoint: this.dataset.endpoint,
+                    data_source: this.dataset.datasource,
+                    signal: this.dataset.signal,
+                    time_type: this.dataset.timetype,
+                });
+                updateSelectedSignals(this.dataset.signalset, this.dataset.signaldisplayname);
+            } else {
+                checkedSignalMembers = checkedSignalMembers.filter(signal => signal["params"]["signal"] !== this.dataset.signal);
+                document.getElementById(`${this.dataset.signalset}_${this.dataset.signal}`).remove();
+            }
+
+
+            if (checkedSignalMembers.length > 0) {
+                $("#showSelectedSignalsButton").show();
+            } else {
+                $("#showSelectedSignalsButton").hide();
+            }
+        });
+    });
+
+    function plotData(epivisUrl) {
+        var dataSets = {};
+
+        var geographicType = document.getElementById('geographic_type').value;
+        var geographicValues = $('#geographic_value').select2('data').map((el) => (typeof el.id === 'string') ? el.id.toLowerCase() : el.id);
+        if (geographicType === 'Choose...' || geographicValues.length === 0) {
+            showWarningAlert("Geographic Type or Geographic Value is not selected.");
+            return;
+        }
+
+        checkedSignalMembers.forEach((signal) => {
+            geographicValues.forEach((geoValue) => {
+                dataSets[`${signal["signal"]}_${geoValue}`] = {
+                    color: '#'+(Math.random() * 0xFFFFFF << 0).toString(16).padStart(6, '0'),
+                    title: "value",
+                    params: {
+                        _endpoint: signal["_endpoint"],
+                        data_source: signal["data_source"],
+                        signal: signal["signal"],
+                        time_type: signal["time_type"],
+                        geo_type: geographicType,
+                        geo_value: geoValue
+                    }
+                }
+            })
+            
+        });
+        
+        var requestParams = [];
+        for (var key in dataSets) {
+            requestParams.push(dataSets[key]);
+        }
+
+        var urlParamsEncoded = btoa(`{"datasets":${JSON.stringify(requestParams)}}`);
+        
+        var linkToEpivis = `${epivisUrl}#${urlParamsEncoded}`
+        window.open(linkToEpivis, '_blank').focus();
+    }
+
+    
+
 
 
     // Add an event listener to each 'bulk-select' element