diff --git a/web/newWebsite/graph-main.js b/web/newWebsite/graph-main.js
index 3eb71ae..eadfb77 100644
--- a/web/newWebsite/graph-main.js
+++ b/web/newWebsite/graph-main.js
@@ -1,95 +1,99 @@
 // Sample data - you can replace this with your actual dataset
 const data = [
-    { node: 'A', timestamp: '2022-01-01 08:00:00', temperature: 25, humidity: 50, eco2: 400, tvoc: 1 },
-    { node: 'B', timestamp: '2022-01-01 09:00:00', temperature: 26, humidity: 45, eco2: 450, tvoc: 2 },
-    { node: 'A', timestamp: '2022-01-01 08:00:00', temperature: 24, humidity: 55, eco2: 500, tvoc: 3 },
-    { node: 'B', timestamp: '2022-01-01 09:00:00', temperature: 27, humidity: 40, eco2: 550, tvoc: 4 },
-    { node: 'A', timestamp: '2022-01-01 08:00:00', temperature: 23, humidity: 60, eco2: 600, tvoc: 5 },
-    { node: 'B', timestamp: '2022-01-01 09:00:00', temperature: 25, humidity: 50, eco2: 650, tvoc: 6 }
-  ];
-  
-  // Function to filter data based on user input
-  function filterData(data, startDate, endDate, nodes, selectedFields) {
-    const filteredData = data.filter(item => {
-      const timestamp = new Date(item.timestamp);
-      return timestamp >= startDate && timestamp <= endDate && nodes.includes(item.node);
-    }).map(item => {
-      const filteredItem = { node: item.node, timestamp: item.timestamp };
-      selectedFields.forEach(field => {
-        filteredItem[field] = item[field];
-      });
-      return filteredItem;
-    });
-    return filteredData;
-  }
-  
-  // Create HTML input elements for user input
-  // Include checkboxes for each data field
-  const temperatureCheckbox = createCheckBox('temperature', 'Temperature');
-  const humidityCheckbox = createCheckBox('humidity', 'Humidity');
-  const eco2Checkbox = createCheckBox('eco2', 'eCO2');
-  const tvocCheckbox = createCheckBox('tvoc', 'TVOC');
-  
-  // Create a checkbox element with label
-  function createCheckBox(id, label) {
-    const checkbox = document.createElement('input');
-    checkbox.setAttribute('type', 'checkbox');
-    checkbox.setAttribute('id', id);
-    checkbox.setAttribute('class', 'checkbox');
-    
-    const checkboxLabel = document.createElement('label');
-    checkboxLabel.setAttribute('for', id);
-    checkboxLabel.textContent = label;
-    
-    return { checkbox, checkboxLabel };
-  }
-  
-  const startDateInput = document.createElement('input');
-  startDateInput.setAttribute('type', 'datetime-local');
-  startDateInput.setAttribute('id', 'start-date');
-  startDateInput.setAttribute('class', 'input-field');
-  
-  const endDateInput = document.createElement('input');
-  endDateInput.setAttribute('type', 'datetime-local');
-  endDateInput.setAttribute('id', 'end-date');
-  endDateInput.setAttribute('class', 'input-field');
-  
-  const nodeInput = document.createElement('input');
-  nodeInput.setAttribute('type', 'text');
-  nodeInput.setAttribute('placeholder', 'Enter node (A, B, etc.)');
-  nodeInput.setAttribute('id', 'node-input');
-  nodeInput.setAttribute('class', 'input-field');
-  
-  const filterButton = document.createElement('button');
-  filterButton.textContent = 'Filter Data';
-  filterButton.setAttribute('class', 'filter-button');
-  filterButton.addEventListener('click', () => {
-    const startDate = new Date(document.getElementById('start-date').value);
-    const endDate = new Date(document.getElementById('end-date').value);
-    const selectedNodes = document.getElementById('node-input').value.split(',').map(node => node.trim());
-    
-    const selectedFields = [];
-    const checkboxes = [temperatureCheckbox, humidityCheckbox, eco2Checkbox, tvocCheckbox];
-    checkboxes.forEach(checkbox => {
-      if (checkbox.checkbox.checked) {
-        selectedFields.push(checkbox.checkbox.id);
-      }
-    });
-  
-    const filteredData = filterData(data, startDate, endDate, selectedNodes, selectedFields);
-    console.log(filteredData);
+  { node: 'A', timestamp: '2022-01-01 08:00:00', temperature: 25, humidity: 50, eco2: 400, tvoc: 1 },
+  { node: 'B', timestamp: '2022-01-01 09:00:00', temperature: 26, humidity: 45, eco2: 450, tvoc: 2 },
+  { node: 'A', timestamp: '2022-01-01 08:00:00', temperature: 24, humidity: 55, eco2: 500, tvoc: 3 },
+  { node: 'B', timestamp: '2022-01-01 09:00:00', temperature: 27, humidity: 40, eco2: 550, tvoc: 4 },
+  { node: 'A', timestamp: '2022-01-01 08:00:00', temperature: 23, humidity: 60, eco2: 600, tvoc: 5 },
+  { node: 'B', timestamp: '2022-01-01 09:00:00', temperature: 25, humidity: 50, eco2: 650, tvoc: 6 }
+];
+
+// Function to create checkbox with label
+function createCheckBox(id, label) {
+  const checkbox = document.createElement('input');
+  checkbox.setAttribute('type', 'checkbox');
+  checkbox.setAttribute('id', id);
+  checkbox.setAttribute('class', 'checkbox');
+
+  const checkboxLabel = document.createElement('label');
+  checkboxLabel.setAttribute('for', id);
+  checkboxLabel.textContent = label;
+
+  return { checkbox, checkboxLabel };
+}
+
+// Create HTML input elements for user input
+const container = document.createElement('div');
+container.setAttribute('class', 'container');
+
+const dataTypesContainer = document.createElement('div');
+dataTypesContainer.setAttribute('class', 'data-types');
+
+const temperatureCheckbox = createCheckBox('temperature', 'Temperature');
+const humidityCheckbox = createCheckBox('humidity', 'Humidity');
+const eco2Checkbox = createCheckBox('eco2', 'eCO2');
+const tvocCheckbox = createCheckBox('tvoc', 'TVOC');
+
+dataTypesContainer.appendChild(temperatureCheckbox.checkbox);
+dataTypesContainer.appendChild(temperatureCheckbox.checkboxLabel);
+dataTypesContainer.appendChild(humidityCheckbox.checkbox);
+dataTypesContainer.appendChild(humidityCheckbox.checkboxLabel);
+dataTypesContainer.appendChild(eco2Checkbox.checkbox);
+dataTypesContainer.appendChild(eco2Checkbox.checkboxLabel);
+dataTypesContainer.appendChild(tvocCheckbox.checkbox);
+dataTypesContainer.appendChild(tvocCheckbox.checkboxLabel);
+
+const filterButton = document.createElement('button');
+filterButton.textContent = 'Filter Data';
+filterButton.setAttribute('class', 'filter-button');
+filterButton.addEventListener('click', () => {
+  const startDate = new Date(document.getElementById('start-date').value);
+  const endDate = new Date(document.getElementById('end-date').value);
+  const selectedNodes = document.getElementById('node-input').value.split(',').map(node => node.trim());
+
+  const selectedFields = [];
+  const checkboxes = [temperatureCheckbox, humidityCheckbox, eco2Checkbox, tvocCheckbox];
+  checkboxes.forEach(checkbox => {
+    if (checkbox.checkbox.checked) {
+      selectedFields.push(checkbox.checkbox.id);
+    }
   });
-  
-  // Append input elements to the document body
-  document.body.appendChild(startDateInput);
-  document.body.appendChild(endDateInput);
-  document.body.appendChild(nodeInput);
-  document.body.appendChild(temperatureCheckbox.checkbox);
-  document.body.appendChild(temperatureCheckbox.checkboxLabel);
-  document.body.appendChild(humidityCheckbox.checkbox);
-  document.body.appendChild(humidityCheckbox.checkboxLabel);
-  document.body.appendChild(eco2Checkbox.checkbox);
-  document.body.appendChild(eco2Checkbox.checkboxLabel);
-  document.body.appendChild(tvocCheckbox.checkbox);
-  document.body.appendChild(tvocCheckbox.checkboxLabel);
-  document.body.appendChild(filterButton);
\ No newline at end of file
+
+  const filteredData = filterData(data, startDate, endDate, selectedNodes, selectedFields);
+  console.log(filteredData);
+});
+
+container.appendChild(dataTypesContainer);
+
+const dateFilter = document.createElement('div');
+dateFilter.setAttribute('class', 'date-filter');
+
+const startDateInput = document.createElement('input');
+startDateInput.setAttribute('type', 'datetime-local');
+startDateInput.setAttribute('id', 'start-date');
+startDateInput.setAttribute('class', 'input-field');
+
+const endDateInput = document.createElement('input');
+endDateInput.setAttribute('type', 'datetime-local');
+endDateInput.setAttribute('id', 'end-date');
+endDateInput.setAttribute('class', 'input-field');
+
+dateFilter.appendChild(startDateInput);
+dateFilter.appendChild(endDateInput);
+container.appendChild(dateFilter);
+
+const nodeFilter = document.createElement('div');
+nodeFilter.setAttribute('class', 'node-filter');
+
+const nodeInput = document.createElement('input');
+nodeInput.setAttribute('type', 'text');
+nodeInput.setAttribute('placeholder', 'Enter node (A, B, etc.)');
+nodeInput.setAttribute('id', 'node-input');
+nodeInput.setAttribute('class', 'input-field');
+
+nodeFilter.appendChild(nodeInput);
+container.appendChild(nodeFilter);
+
+container.appendChild(filterButton);
+
+document.body.appendChild(container);
\ No newline at end of file
diff --git a/web/newWebsite/styles/graph-styles.css b/web/newWebsite/styles/graph-styles.css
index ec79d48..eaf79e0 100644
--- a/web/newWebsite/styles/graph-styles.css
+++ b/web/newWebsite/styles/graph-styles.css
@@ -167,8 +167,28 @@ body {
     font-size: 18px;
 }
 
-.input-field {
-    margin: 10px;
+.container {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    border: 2px solid #ccc;
+    border-radius: 10px;
+    padding: 10px;
+    margin: 20px;
+  }
+  
+  .data-types {
+    display: flex;
+    flex-direction: column;
+  }
+  
+  .date-filter,
+  .node-filter {
+    margin-left: 10px;
+  }
+  
+  .input-field {
+    margin: 5px;
     padding: 5px;
     border: 1px solid #ccc;
     border-radius: 5px;