diff --git a/api/endpoint.go b/api/endpoint.go
index 1fe0690..5a5c625 100644
--- a/api/endpoint.go
+++ b/api/endpoint.go
@@ -83,6 +83,9 @@ func retrieveSummaryEndpoint(svc callhome.Service) endpoint.Endpoint {
 		}
 		return telemetrySummaryRes{
 			Countries:        summary.Countries,
+			Cities:           summary.Cities,
+			Services:         summary.Services,
+			Versions:         summary.Versions,
 			TotalDeployments: summary.TotalDeployments,
 		}, nil
 	}
diff --git a/api/responses.go b/api/responses.go
index c03516d..1fbc7c7 100644
--- a/api/responses.go
+++ b/api/responses.go
@@ -89,6 +89,9 @@ func (res uiRes) Headers() map[string]string {
 
 type telemetrySummaryRes struct {
 	Countries        []callhome.CountrySummary `json:"countries,omitempty"`
+	Cities           []string                  `json:"cities,omitempty"`
+	Services         []string                  `json:"services,omitempty"`
+	Versions         []string                  `json:"versions,omitempty"`
 	TotalDeployments int                       `json:"total_deployments,omitempty"`
 }
 
diff --git a/openapi/openapi.yaml b/openapi/openapi.yaml
index 80ed952..e3a6a41 100644
--- a/openapi/openapi.yaml
+++ b/openapi/openapi.yaml
@@ -238,6 +238,18 @@ components:
                 type: string
               number_of_deployments:
                 type: integer
+          cities:
+            type: array
+            items:
+              type: string
+          services:
+            type: array
+            items:
+              type: string
+          versions:
+            type: array
+            items:
+              type: string
   securitySchemes:
     ApiKeyAuth:
       type: apiKey
diff --git a/service.go b/service.go
index 4d0fbe6..ddc8d03 100644
--- a/service.go
+++ b/service.go
@@ -57,14 +57,18 @@ func (ts *telemetryService) Save(ctx context.Context, t Telemetry) error {
 }
 
 func (ts *telemetryService) RetrieveSummary(ctx context.Context, filters TelemetryFilters) (TelemetrySummary, error) {
-	return ts.repo.RetrieveDistinctIPsCountries(ctx, filters)
+	return ts.repo.RetrieveSummary(ctx, filters)
 }
 
 // ServeUI gets the callhome index html page
 func (ts *telemetryService) ServeUI(ctx context.Context, filters TelemetryFilters) ([]byte, error) {
 	tmpl := template.Must(template.ParseFiles("./web/template/index.html"))
 
-	summary, err := ts.repo.RetrieveDistinctIPsCountries(ctx, filters)
+	summary, err := ts.repo.RetrieveSummary(ctx, filters)
+	if err != nil {
+		return nil, err
+	}
+	unfilteredSummary, err := ts.repo.RetrieveSummary(ctx, TelemetryFilters{})
 	if err != nil {
 		return nil, err
 	}
@@ -81,6 +85,7 @@ func (ts *telemetryService) ServeUI(ctx context.Context, filters TelemetryFilter
 	if err != nil {
 		return nil, err
 	}
+
 	var from, to string
 	if !filters.From.IsZero() {
 		from = filters.From.Format(time.DateOnly)
@@ -89,19 +94,28 @@ func (ts *telemetryService) ServeUI(ctx context.Context, filters TelemetryFilter
 		to = filters.To.Format(time.DateOnly)
 	}
 	data := struct {
-		Countries     string
-		NoDeployments int
-		NoCountries   int
-		MapData       string
-		From          string
-		To            string
+		Countries       string
+		Cities          string
+		FilterCountries []CountrySummary
+		FilterCities    []string
+		FilterServices  []string
+		FilterVersions  []string
+		NoDeployments   int
+		NoCountries     int
+		MapData         string
+		From            string
+		To              string
 	}{
-		Countries:     string(countries),
-		NoDeployments: summary.TotalDeployments,
-		NoCountries:   len(summary.Countries),
-		MapData:       string(pg),
-		From:          from,
-		To:            to,
+		Countries:       string(countries),
+		FilterCountries: unfilteredSummary.Countries,
+		FilterCities:    unfilteredSummary.Cities,
+		FilterServices:  unfilteredSummary.Services,
+		FilterVersions:  unfilteredSummary.Versions,
+		NoDeployments:   summary.TotalDeployments,
+		NoCountries:     len(summary.Countries),
+		MapData:         string(pg),
+		From:            from,
+		To:              to,
 	}
 
 	var res bytes.Buffer
diff --git a/telemetry.go b/telemetry.go
index 7d4a234..5a83c86 100644
--- a/telemetry.go
+++ b/telemetry.go
@@ -47,6 +47,9 @@ type CountrySummary struct {
 
 type TelemetrySummary struct {
 	Countries        []CountrySummary `json:"countries,omitempty"`
+	Cities           []string         `json:"cities,omitempty"`
+	Services         []string         `json:"services,omitempty"`
+	Versions         []string         `json:"versions,omitempty"`
 	TotalDeployments int              `json:"total_deployments,omitempty"`
 }
 
@@ -58,6 +61,6 @@ type TelemetryRepo interface {
 
 	// RetrieveAll retrieves all telemetry events.
 	RetrieveAll(ctx context.Context, pm PageMetadata, filters TelemetryFilters) (TelemetryPage, error)
-	// RetrieveDistinctIPsCOuntries gets distinct ip addresses and countries from database.
-	RetrieveDistinctIPsCountries(ctx context.Context, filters TelemetryFilters) (TelemetrySummary, error)
+	// RetrieveSummary gets distinct countries, cities,services and versions in a summarised form.
+	RetrieveSummary(ctx context.Context, filters TelemetryFilters) (TelemetrySummary, error)
 }
diff --git a/timescale/mocks/mocks.go b/timescale/mocks/mocks.go
index 74796f5..b59c56a 100644
--- a/timescale/mocks/mocks.go
+++ b/timescale/mocks/mocks.go
@@ -30,8 +30,7 @@ func (mr *mockRepo) Save(ctx context.Context, t callhome.Telemetry) error {
 	return r0
 }
 
-// RetrieveDistinctIPsCountries retrieve distinct
-func (*mockRepo) RetrieveDistinctIPsCountries(ctx context.Context, filter callhome.TelemetryFilters) (callhome.TelemetrySummary, error) {
+func (*mockRepo) RetrieveSummary(ctx context.Context, filter callhome.TelemetryFilters) (callhome.TelemetrySummary, error) {
 	return callhome.TelemetrySummary{}, nil
 }
 
diff --git a/timescale/timescale.go b/timescale/timescale.go
index b992c2a..952e23e 100644
--- a/timescale/timescale.go
+++ b/timescale/timescale.go
@@ -126,16 +126,16 @@ func (r repo) Save(ctx context.Context, t callhome.Telemetry) error {
 
 }
 
-// RetrieveDistinctIPsCountries retrieve distinct
-func (r repo) RetrieveDistinctIPsCountries(ctx context.Context, filters callhome.TelemetryFilters) (callhome.TelemetrySummary, error) {
+// RetrieveSummary retrieve distinct
+func (r repo) RetrieveSummary(ctx context.Context, filters callhome.TelemetryFilters) (callhome.TelemetrySummary, error) {
 	filterQuery, params := generateQuery(filters)
+	var summary callhome.TelemetrySummary
 	q := fmt.Sprintf(`select count(distinct ip_address), country from telemetry %s group by country;`, filterQuery)
 	rows, err := r.db.NamedQuery(q, params)
 	if err != nil {
 		return callhome.TelemetrySummary{}, err
 	}
 	defer rows.Close()
-	var summary callhome.TelemetrySummary
 	for rows.Next() {
 		var val callhome.CountrySummary
 		if err := rows.StructScan(&val); err != nil {
@@ -146,6 +146,48 @@ func (r repo) RetrieveDistinctIPsCountries(ctx context.Context, filters callhome
 	for _, country := range summary.Countries {
 		summary.TotalDeployments += country.NoDeployments
 	}
+
+	q1 := fmt.Sprintf(`select distinct city from telemetry %s;`, filterQuery)
+	cityRows, err := r.db.NamedQuery(q1, params)
+	if err != nil {
+		return callhome.TelemetrySummary{}, err
+	}
+	defer cityRows.Close()
+	for cityRows.Next() {
+		var val string
+		if err := cityRows.Scan(&val); err != nil {
+			return callhome.TelemetrySummary{}, err
+		}
+		summary.Cities = append(summary.Cities, val)
+	}
+
+	q2 := fmt.Sprintf(`select distinct service from telemetry %s;`, filterQuery)
+	serviceRows, err := r.db.NamedQuery(q2, params)
+	if err != nil {
+		return callhome.TelemetrySummary{}, err
+	}
+	defer serviceRows.Close()
+	for serviceRows.Next() {
+		var val string
+		if err := serviceRows.Scan(&val); err != nil {
+			return callhome.TelemetrySummary{}, err
+		}
+		summary.Services = append(summary.Services, val)
+	}
+
+	q3 := fmt.Sprintf(`select distinct mf_version from telemetry %s;`, filterQuery)
+	versionRows, err := r.db.NamedQuery(q3, params)
+	if err != nil {
+		return callhome.TelemetrySummary{}, err
+	}
+	defer versionRows.Close()
+	for versionRows.Next() {
+		var val string
+		if err := versionRows.Scan(&val); err != nil {
+			return callhome.TelemetrySummary{}, err
+		}
+		summary.Versions = append(summary.Versions, val)
+	}
 	return summary, nil
 }
 
diff --git a/timescale/tracing/tracing.go b/timescale/tracing/tracing.go
index ab1a213..5c8a488 100644
--- a/timescale/tracing/tracing.go
+++ b/timescale/tracing/tracing.go
@@ -8,9 +8,9 @@ import (
 )
 
 const (
-	retrieveAllOp                  = "retrieve_all_op"
-	retrieveDistinctIPsCountriesOp = "retrieve_distinct_IP_countries_op"
-	saveOp                         = "save_op"
+	retrieveAllOp     = "retrieve_all_op"
+	retrieveSummaryOp = "retrieve_summary_op"
+	saveOp            = "save_op"
 )
 
 var _ callhome.TelemetryRepo = (*repoTracer)(nil)
@@ -35,11 +35,11 @@ func (rt *repoTracer) RetrieveAll(ctx context.Context, pm callhome.PageMetadata,
 	return rt.repo.RetrieveAll(ctx, pm, filter)
 }
 
-// RetrieveDistinctIPsCountries adds tracing middleware to retrieve distinct ips countries method.
-func (rt *repoTracer) RetrieveDistinctIPsCountries(ctx context.Context, filter callhome.TelemetryFilters) (callhome.TelemetrySummary, error) {
-	ctx, span := rt.tracer.Start(ctx, retrieveDistinctIPsCountriesOp)
+// RetrieveSummary adds tracing middleware to retrieve summary method.
+func (rt *repoTracer) RetrieveSummary(ctx context.Context, filter callhome.TelemetryFilters) (callhome.TelemetrySummary, error) {
+	ctx, span := rt.tracer.Start(ctx, retrieveSummaryOp)
 	defer span.End()
-	return rt.repo.RetrieveDistinctIPsCountries(ctx, filter)
+	return rt.repo.RetrieveSummary(ctx, filter)
 }
 
 // Save adds tracing middleware to save method.
diff --git a/web/static/style.css b/web/static/style.css
index 837ed89..02f0012 100644
--- a/web/static/style.css
+++ b/web/static/style.css
@@ -18,31 +18,41 @@ body {
 }
 .main-content {
     flex-grow: 1;
-    height: 95%;
-    width: 100%;
-
-}
-#map {
     height: 100%;
     width: 100%;
 }
-#filter-container {
+.btn {
+    margin-left: 20px;
+    margin-right: 20px;
+    padding: 10px 20px;
+    text-align: center;
+    line-height: 10px; 
+    margin-top: 10px; 
+}
+.list-group-item{
     display: flex;
-    justify-content: center;
-    margin-bottom: 10px;
-    margin-top: 10px;
-    height: 5%;
+    justify-content: space-between;
+}
+.badge {
+    max-height: 20px;
+}
+#map {
+    height: 100%;
     width: 100%;
 }
-
 #filter-form {
-    display: flex;
+    display: fixed;
     gap: 20px;
 }
-
+#myButton {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    z-index: 1000;
+}
 #from-date,
 #to-date {
-    width: 200px;
+    width: 150px;
     height: 30px;
     border: 1px solid #ccc;
     border-radius: 4px;
diff --git a/web/template/index.html b/web/template/index.html
index b6d0873..cddee46 100644
--- a/web/template/index.html
+++ b/web/template/index.html
@@ -4,8 +4,9 @@
         <meta charset="utf-8" />
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.5.1/MarkerCluster.css" />
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.5.1/MarkerCluster.Default.css" />
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
         <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
-        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"/>
         <link rel="stylesheet" href="/style.css"/>
         <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.5.1/leaflet.markercluster.js"></script>
@@ -23,21 +24,65 @@ <h2>Mainflux Deployment Summary</h2>
                 </ul>
             </div>
         </div>
-        <div class="container">
-            <div id="filter-container">
-                <form id="filter-form" onsubmit="applyFilter(event)">
-                    <label for="from-date">From:</label>
-                    <input type="date" id="from-date" name="from-date" value="{{.From}}">
-                    <label for="to-date">To:</label>
-                    <input type="date" id="to-date" name="to-date" value="{{.To}}">
-                    <input class="btn btn-primary" type="submit" value="Apply">
-                </form>
-            </div>
-            <div id="error-message" class="error-message"></div>
+         <!-- Modal -->
+        <div class="modal fade" id="applyFilters" tabindex="-1" aria-labelledby="applyFiltersLabel" aria-hidden="true">
+                    <div class="modal-dialog">
+                    <div class="modal-content">
+                        <div class="modal-header">
+                        <h1 class="modal-title fs-5" id="applyFiltersLabel">Apply Filters</h1>
+                        </div>
+                        <div class="modal-body">
+                            <div id="error-message" class="error-message"></div>
+	                        <div class="mb-3">
+                                <form id="filter-form" onsubmit="applyFilter(event)">
+                                    <label for="from-date">From:</label>
+                                    <input type="date" id="from-date" name="from-date" value="{{.From}}">
+                                    <label for="to-date">To:</label>
+                                    <input type="date" id="to-date" name="to-date" value="{{.To}}">
+                                    <br>
+                                    <label for="country-filter" class="form-label">Country</label>
+                                    <select id="country-filter" class="form-select">
+                                        <option value="">Select a country</option>
+                                        {{range $i, $country := .FilterCountries}}
+                                            <option value="{{$country.Country}}">{{$country.Country}}</option>
+                                        {{end}}
+                                    </select>
+                                    <label for="city-filter" class="form-label">City</label>
+                                    <select id="city-filter" class="form-select">
+                                        <option value="">Select a city</option>
+                                        {{range $i, $city := .FilterCities}}
+                                            <option value="{{$city}}">{{$city}}</option>
+                                        {{end}}
+                                    </select>
+                                    <label for="version-filter" class="form-label">Version</label>
+                                    <select id="version-filter" class="form-select">
+                                        <option value="">Select a Version</option>
+                                        {{range $i, $version := .FilterVersions}}
+                                            <option value="{{$version}}">{{$version}}</option>
+                                        {{end}}
+                                    </select>
+                                    <label for="service-filter" class="form-label">Service</label>
+                                    <select id="service-filter" class="form-select">
+                                        <option value="">Select a Service</option>
+                                        {{range $i, $service := .FilterServices}}
+                                            <option value="{{$service}}">{{$service}}</option>
+                                        {{end}}
+                                    </select>
+                                    <button type="submit" class="btn btn-primary">Apply</button>
+                                </form>
+                            </div>                         
+                        </div>
+                    </div>
+                    </div>
+        </div>
             <div class="main-content">
-                <div id="map"></div>
+                <div id="map">
+                    <!-- Button trigger for modal -->
+                    <button type="button" class="btn btn-light" id="myButton" data-bs-toggle="modal" data-bs-target="#applyFilters">
+                        <i class="fas fa-filter"></i>
+                    </button>
+                </div>
             </div>
-        </div>
         <script type="text/javascript">
             //create map object and set default positions and zoom level
             var map = L.map('map').setView([20, 0], 2);
@@ -48,10 +93,13 @@ <h2>Mainflux Deployment Summary</h2>
                 const errorMessage = document.getElementById("error-message");
                 var fromDateInput = document.getElementById('from-date').value;
                 var toDateInput = document.getElementById('to-date').value;
+                var selectedCountry = document.getElementById('country-filter').value;
+                var selectedCity = document.getElementById('city-filter').value;
+                var selectedService = document.getElementById('service-filter').value;
+                var selectedVersion = document.getElementById('version-filter').value;
 
                 var fromDate = fromDateInput ? new Date(fromDateInput) : null;
-                var toDate = toDateInput ? new Date(toDateInput) : null;
-
+                var toDate = toDateInput ? new Date(toDateInput) : null;               
                 if (fromDate && toDate && fromDate > toDate) {
                     errorMessage.textContent = 'Date range is not valid!';
                     return;
@@ -65,7 +113,7 @@ <h2>Mainflux Deployment Summary</h2>
                 var fromDate = fromDateInput ? new Date(fromDateInput).toISOString() : '';
                 var toDate = toDateInput ? new Date(toDateInput).toISOString() : '';
 
-                var url = `/?from=${encodeURIComponent(fromDate)}&to=${encodeURIComponent(toDate)}`;
+                var url = `/?from=${encodeURIComponent(fromDate)}&to=${encodeURIComponent(toDate)}&country=${encodeURIComponent(selectedCountry)}&city=${encodeURIComponent(selectedCity)}&service=${encodeURIComponent(selectedService)}&version=${encodeURIComponent(selectedVersion)}`;
                 window.location.href = url;
             }
 
@@ -79,7 +127,7 @@ <h2>Mainflux Deployment Summary</h2>
               listItem.className = 'list-group-item';
               listItem.textContent = country.country;
               var listItemContent = document.createElement('span');
-              listItemContent.className = 'badge';
+              listItemContent.className = 'badge bg-secondary';
               listItemContent.textContent = country.number_of_deployments;
               listItem.appendChild(listItemContent);
               listItem.addEventListener('click', function () {
@@ -89,7 +137,6 @@ <h2>Mainflux Deployment Summary</h2>
               });
               countryList.appendChild(listItem);
             });
-
             // Function to retrieve coordinates for a given country using Nominatim API
             function getCountryCoordinates(country, callback) {
               var url = 'https://nominatim.openstreetmap.org/search?format=json&q=' + encodeURIComponent(country);
@@ -111,7 +158,7 @@ <h2>Mainflux Deployment Summary</h2>
                 console.log('Error retrieving coordinates:', error);
               });
             }
-            
+
             function logJSONData() {
                 var mapData = `{{.MapData}}`;
                 const obj = JSON.parse(mapData);
@@ -140,8 +187,8 @@ <h2>Mainflux Deployment Summary</h2>
                     map.addLayer(countryMarkers);
                 });
             }
-            
             logJSONData();
         </script>
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
     </body>
 </html>