diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..858f024
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,25 @@
+# Multi-stage
+# 1) Node image for building frontend assets
+# 2) nginx stage to serve frontend assets
+
+# Name the node stage "builder"
+FROM node:16 AS builder
+# Set working directory
+WORKDIR /app
+# Copy all files from current directory to working dir in image
+COPY . .
+# install node modules and build assets
+RUN npm install && npm run build
+
+# nginx state for serving content
+FROM nginx:alpine
+# Set working directory to nginx asset directory
+WORKDIR /usr/share/nginx/html
+# Remove default nginx static assets
+RUN rm -rf ./*
+# Copy static assets from builder stage
+COPY --from=builder /app/dist .
+# Add a custom nginx configuration that handles URL rewrites
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+# Containers run nginx with global directives and daemon off
+ENTRYPOINT ["nginx", "-g", "daemon off;"]
\ No newline at end of file
diff --git a/nginx.conf b/nginx.conf
new file mode 100644
index 0000000..497dbbb
--- /dev/null
+++ b/nginx.conf
@@ -0,0 +1,10 @@
+server {
+    listen 80;
+    server_name localhost;
+
+    location / {
+        root   /usr/share/nginx/html;
+        index  index.html;
+        try_files $uri $uri/ /index.html;
+    }
+}
\ No newline at end of file
diff --git a/src/assets/docs/about-text.md b/src/assets/docs/about-text.md
index 06422ba..e7939ad 100644
--- a/src/assets/docs/about-text.md
+++ b/src/assets/docs/about-text.md
@@ -1,4 +1,4 @@
-This is a beta release of the Blue Earth Data platform. The Blue Earth Data platform has been developed by Deltares as a free, web-based application to support the study and sharing of integrated water and subsoil-related data. The platform provides indicative data, which is primarily intended for professional specialists and researchers.
+This is a release of the Blue Earth Data platform. The Blue Earth Data platform has been developed by Deltares as a free, web-based application to support the study and sharing of integrated water and subsoil-related data. The platform provides indicative data, which is primarily intended for professional specialists and researchers.
 
 Users are presented with global water and subsoil-related data through use of our multi-data viewer. The datasets included are subdivided over different themes and areas of interest, which can be selected on the left side of the screen. The global data is grouped under the Flooding, Coastal Management and Offshore themes. These themes incorporate datasets for amongst others global shoreline changes, global bathymetry, global river discharge and storm surge forecasts and global metocean conditions. Additionally, some regional datasets are added for the North Sea. Further information with each dataset is provided through the data selection menu.
 
diff --git a/src/assets/docs/user-agreements - part 1.md b/src/assets/docs/user-agreements - part 1.md
index 2b832c8..3488b1e 100644
--- a/src/assets/docs/user-agreements - part 1.md	
+++ b/src/assets/docs/user-agreements - part 1.md	
@@ -1,4 +1,4 @@
-## Blue Earth Data (beta) User Agreement Deltares
+## Blue Earth Data User Agreement Deltares
 
 This legal agreement (hereinafter “User Agreement”) governs the conditions of use of this Deltares Open Data website and the data products (hereinafter “Data Products”) to be found, accessed and downloaded through our website.
 
diff --git a/src/components/DataSetControls.vue b/src/components/DataSetControls.vue
index 6772587..5cbc1a1 100644
--- a/src/components/DataSetControls.vue
+++ b/src/components/DataSetControls.vue
@@ -186,7 +186,7 @@ export default {
       'getActiveVectorDataIds'
     ]),
     themeName() {
-      return this.getActiveTheme || 'All datasets'
+      return this.getActiveTheme || 'Map layers'
     },
     activePanels() {
       const active = _.values(this.datasets).flatMap((dataset, index) => {
diff --git a/src/components/metocean/graphs/ExtremeValues.vue b/src/components/metocean/graphs/ExtremeValues.vue
index 3b7abad..6a51456 100644
--- a/src/components/metocean/graphs/ExtremeValues.vue
+++ b/src/components/metocean/graphs/ExtremeValues.vue
@@ -1,5 +1,10 @@
 <template>
   <div>
+    <v-select
+      v-model="selectedDirectionalParameter"
+      :items="directionalParameters"
+      label="Parameter"
+    ></v-select>
     <div style="width: 100%; height: 400px; margin: 8px 0px">
       <v-chart :option="lineOption" autoresize group="extremeValues" />
     </div>
@@ -20,6 +25,11 @@ export default {
   },
   data() {
     return {
+      directionalParameters: [
+        'Extreme mean wind speed U10 (m/s)',
+        'Extreme seastates SS (-)'
+      ], // Dummy parameters for the dropdown
+      selectedDirectionalParameter: 'Extreme mean wind speed U10 (m/s)', // Store the selected directional parameter
       lineOption: this.initLineOption()
     }
   },
diff --git a/src/components/metocean/graphs/RosePlot.vue b/src/components/metocean/graphs/RosePlot.vue
index c5201d8..8c544c5 100644
--- a/src/components/metocean/graphs/RosePlot.vue
+++ b/src/components/metocean/graphs/RosePlot.vue
@@ -1,4 +1,4 @@
-<template>
+<!-- <template>
   <div>
     <v-btn-toggle v-model="selectedParameter" mandatory>
       <v-btn
@@ -15,6 +15,75 @@
       <v-chart class="chart" :option="roseOption" autoresize group="rosePlot" />
     </div>
   </div>
+</template> -->
+<template>
+  <div>
+    <v-select
+      v-model="selectedtestParameter"
+      :items="testParameters"
+      label="Parameter"
+    ></v-select>
+    <v-select
+      v-model="selectedDirectionalParameter"
+      :items="directionalParameters"
+      label="Directional Parameter"
+    ></v-select>
+    <!-- Start Date Picker -->
+    <v-menu offset-y>
+      <template v-slot:activator="{ on }">
+        Start Date
+        <v-btn text v-on="on">
+          {{ selectedStartDate }}
+          <v-icon right>mdi-calendar</v-icon>
+        </v-btn>
+      </template>
+      <v-date-picker v-model="selectedStartDate" scrollable>
+        <v-spacer></v-spacer>
+        <v-btn text @click="closeStartDatePicker">Cancel</v-btn>
+        <v-btn text @click="applyStartDatePicker">Apply</v-btn>
+      </v-date-picker>
+    </v-menu>
+
+    <!-- End Date Picker -->
+    <v-menu offset-y>
+      <template v-slot:activator="{ on }">
+        End Date
+        <v-btn text v-on="on">
+          {{ selectedEndDate }}
+          <v-icon right>mdi-calendar</v-icon>
+        </v-btn>
+      </template>
+      <v-date-picker v-model="selectedEndDate" scrollable>
+        <v-spacer></v-spacer>
+        <v-btn text @click="closeEndDatePicker">Cancel</v-btn>
+        <v-btn text @click="applyEndDatePicker">Apply</v-btn>
+      </v-date-picker>
+    </v-menu>
+    <div class="multiselect-dropdown">
+      <div class="dropdown-header">
+        <span class="header-text">Months of interest</span>
+        <br />
+        <button @click="toggleDropdown" class="dropdown-toggle">
+          {{
+            selectedItems.length > 0 ? selectedItems.join(', ') : 'Select Items'
+          }}
+        </button>
+      </div>
+      <div>
+        <ul v-show="isOpen" class="dropdown-menu">
+          <li v-for="(item, index) in items" :key="index">
+            <label class="checkbox-button">
+              <input type="checkbox" v-model="selectedItems" :value="item" />
+              <span class="checkmark"></span> {{ item }}
+            </label>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div style="width: 100%; height: 400px; margin: 32px 0px">
+      <v-chart class="chart" :option="roseOption" autoresize group="rosePlot" />
+    </div>
+  </div>
 </template>
 
 <script>
@@ -29,8 +98,73 @@ export default {
   },
   data() {
     return {
-      parameters: ['U10', 'U120'],
+      parameters: [
+        'Horizontal 10-minute averaged wind speed at 10 m height U10 (m/s)',
+        'Horizontal 10-minute averaged wind speed at 120 m height U120 (m/s)',
+        'Total significant wave height Hs,tot (m)',
+        'Total spectral peak wave period Tp,tot (s)',
+        'U10',
+        'U120'
+      ],
       selectedParameter: 'U10',
+      testParameters: [
+        'Horizontal 10-minute averaged wind speed at 10 m height U10 (m/s)',
+        'Horizontal 10-minute averaged wind speed at 120 m height U120 (m/s)',
+        'Total significant wave height Hs,tot (m)',
+        'Total spectral peak wave period Tp,tot (s)'
+      ],
+      selectedTestParameter:
+        'Horizontal 10-minute averaged wind speed at 10 m height U10 (m/s)',
+      directionalParameters: [
+        'Mean Wave Direction MWD (°N)',
+        'Peak Wave Direction PWD (°N)'
+      ], // Dummy parameters for the dropdown
+      selectedDirectionalParameter: 'Mean Wave Direction MWD (°N)', // Store the selected directional parameter
+      MonthsofInterestParameters: [
+        { parameter: 'Jan', selected: true },
+        { parameter: 'Feb', selected: true },
+        { parameter: 'Mar', selected: true },
+        { parameter: 'Apr', selected: true },
+        { parameter: 'May', selected: true },
+        { parameter: 'Jun', selected: true },
+        { parameter: 'Jul', selected: true },
+        { parameter: 'Aug', selected: true },
+        { parameter: 'Sep', selected: true },
+        { parameter: 'Oct', selected: true },
+        { parameter: 'Nov', selected: true },
+        { parameter: 'Dec', selected: true }
+      ],
+      isOpen: false,
+      selectedItems: [
+        'Jan',
+        'Feb',
+        'Mar',
+        'Apr',
+        'May',
+        'Jun',
+        'Jul',
+        'Aug',
+        'Sep',
+        'Oct',
+        'Nov',
+        'Dec'
+      ],
+      items: [
+        'Jan',
+        'Feb',
+        'Mar',
+        'Apr',
+        'May',
+        'Jun',
+        'Jul',
+        'Aug',
+        'Sep',
+        'Oct',
+        'Nov',
+        'Dec'
+      ],
+      selectedStartDate: '2014-01-01',
+      selectedEndDate: '2015-12-31',
       classes: [
         '<3.25',
         '3.25 - 6.5',
@@ -1009,6 +1143,9 @@ export default {
     }
   },
   methods: {
+    toggleDropdown() {
+      this.isOpen = !this.isOpen
+    },
     createSeriesData() {
       return this.classes.map(c => {
         const seriesData = this.dataset
@@ -1130,4 +1267,68 @@ export default {
 }
 </script>
 
-<style scoped></style>
+<style scoped>
+.selected-options {
+  margin-top: 10px;
+}
+
+.multiselect-dropdown {
+  border-bottom: 1px solid #ccc; /* Add a bottom border to the whole component */
+}
+
+.dropdown-header {
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px;
+  border-bottom: 1px solid lightgray; /* Add a bottom border to the header */
+}
+
+.header-text {
+  color: lightgray;
+  font-size: 12px;
+}
+
+.dropdown-toggle {
+  background: none;
+  border: none;
+  cursor: pointer;
+  outline: none;
+  text-decoration: underline; /* Underline the button text */
+}
+
+.checkbox-button {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  padding: 8px;
+}
+.checkmark {
+  width: 20px;
+  height: 20px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  margin-right: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.checkbox-button input[type='checkbox'] {
+  opacity: 0;
+  position: absolute;
+  cursor: pointer;
+  height: 0;
+  width: 0;
+}
+
+.checkbox-button input[type='checkbox']:checked + .checkmark::before {
+  content: '\2713'; /* Checkmark symbol */
+  font-size: 16px;
+  color: #007bff; /* Color for checked items */
+}
+
+ol,
+ul {
+  list-style: none;
+}
+</style>
diff --git a/src/components/metocean/graphs/TimeSeries.vue b/src/components/metocean/graphs/TimeSeries.vue
index a55a9eb..d60863c 100644
--- a/src/components/metocean/graphs/TimeSeries.vue
+++ b/src/components/metocean/graphs/TimeSeries.vue
@@ -1,4 +1,4 @@
-<template>
+<!-- <template>
   <div>
     <v-btn-toggle v-model="selectedParameters" multiple>
       <v-btn
@@ -15,6 +15,63 @@
       <v-chart :option="timeseriesOption" autoresize group="timeseriesv2" />
     </div>
   </div>
+</template> -->
+<template>
+  <div>
+    <v-menu offset-y>
+      <template v-slot:activator="{ on }">
+        <v-btn text v-on="on">
+          {{ selectedParameters[0] }}
+          <!-- Display the selected option -->
+          <v-icon right>mdi-chevron-down</v-icon>
+        </v-btn>
+      </template>
+      <v-list>
+        <v-list-item
+          v-for="(parameter, i) in parameters"
+          :key="`${parameter}-${i}`"
+          @click="filterLegend(parameter)"
+        >
+          <v-list-item-title>{{ parameter }}</v-list-item-title>
+        </v-list-item>
+      </v-list>
+    </v-menu>
+
+    <!-- Start Date Picker -->
+    <v-menu offset-y>
+      <template v-slot:activator="{ on }">
+        Start Date
+        <v-btn text v-on="on">
+          {{ selectedStartDate }}
+          <v-icon right>mdi-calendar</v-icon>
+        </v-btn>
+      </template>
+      <v-date-picker v-model="selectedStartDate" scrollable>
+        <v-spacer></v-spacer>
+        <v-btn text @click="closeStartDatePicker">Cancel</v-btn>
+        <v-btn text @click="applyStartDatePicker">Apply</v-btn>
+      </v-date-picker>
+    </v-menu>
+
+    <!-- End Date Picker -->
+    <v-menu offset-y>
+      <template v-slot:activator="{ on }">
+        End Date
+        <v-btn text v-on="on">
+          {{ selectedEndDate }}
+          <v-icon right>mdi-calendar</v-icon>
+        </v-btn>
+      </template>
+      <v-date-picker v-model="selectedEndDate" scrollable>
+        <v-spacer></v-spacer>
+        <v-btn text @click="closeEndDatePicker">Cancel</v-btn>
+        <v-btn text @click="applyEndDatePicker">Apply</v-btn>
+      </v-date-picker>
+    </v-menu>
+    <div style="width: 100%; height: 500px; margin: 8px 0px">
+      <v-chart :option="timeseriesOption" autoresize group="timeseriesv2" />
+    </div>
+  </div>
 </template>
 
 <script>
@@ -30,8 +87,26 @@ export default {
   },
   data() {
     return {
-      parameters: ['T0', 'T1', 'T2', 'T3', 'T4'],
-      selectedParameters: ['T0', 'T1', 'T2', 'T3', 'T4'],
+      parameters: [
+        'Horizontal 10-minute averaged wind speed at 10 m height U10 (m/s)',
+        'Horizontal 10-minute averaged wind speed at 120 m height U120 (m/s)',
+        'Total significant wave height Hs,tot (m)',
+        'Total spectral peak wave period Tp,tot (s)',
+        'Depth averaged total current velocity V,total (m/s)',
+        'Depth averaged tidal current velocity V,tidal (m/s)',
+        'Depth averaged residual current velocity V,res (m/s)'
+      ],
+      selectedParameters: [
+        'Horizontal 10-minute averaged wind speed at 10 m height U10 (m/s)',
+        'Horizontal 10-minute averaged wind speed at 120 m height U120 (m/s)',
+        'Total significant wave height Hs,tot (m)',
+        'Total spectral peak wave period Tp,tot (s)',
+        'Depth averaged total current velocity V,total (m/s)',
+        'Depth averaged tidal current velocity V,tidal (m/s)',
+        'Depth averaged residual current velocity V,res (m/s)'
+      ],
+      selectedStartDate: '1984-01-01',
+      selectedEndDate: '2015-12-31',
       timeseriesOption: {
         tooltip: {
           trigger: 'item',
@@ -86,7 +161,7 @@ export default {
         color: ['#FA8D0B'],
         legend: {
           orient: 'vertical',
-          show: true,
+          show: false,
           right: true,
           data: this.parameters
         },
diff --git a/src/store/map/index.js b/src/store/map/index.js
index 99bb664..afdb317 100644
--- a/src/store/map/index.js
+++ b/src/store/map/index.js
@@ -16,12 +16,12 @@ export const getDefaultState = () => ({
   activeLocationIds: [],
   activeRasterData: {},
   vectorDataCollection: {},
-  activeRasterLayerId: 'el',
+  activeRasterLayerId: '',
   activeFlowmapLayer: {},
   activeTheme: '',
   loadingRasterLayers: false,
   geographicalScope: '',
-  activeVectorDataIds: '',
+  activeVectorDataIds: 'mo',
   activeSummary: []
 })