diff --git a/src/components/AboutMeComponents/SideScrolling.vue b/src/components/AboutMeComponents/SideScrolling.vue
index 2fca5a1..6e6ede0 100644
--- a/src/components/AboutMeComponents/SideScrolling.vue
+++ b/src/components/AboutMeComponents/SideScrolling.vue
@@ -1,10 +1,7 @@
 <template>
     <div id="scroll-container">
-        
         <div id="scroll-text">This is scrolling text.</div>
     </div>
-    
-
 </template>
 
 <script>
diff --git a/src/components/ListItems/CheckBox.vue b/src/components/ListItems/CheckBox.vue
new file mode 100644
index 0000000..2fd1ef0
--- /dev/null
+++ b/src/components/ListItems/CheckBox.vue
@@ -0,0 +1,44 @@
+<template>
+    <div class="checkbox-container">
+      <label for="checkbox-input">{{ label }}</label>
+      <input
+        type="checkbox"
+        id="checkbox-input"
+        v-model="isChecked"
+        @change="emitCheckboxChange"
+        @keyup.enter="toggleCheckbox"
+        tabindex="0" />
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    name: 'CheckboxInput',
+    props: {
+      label: {
+        type: String,
+        default: 'Checkbox' // Default label text
+      }
+    },
+    data() {
+      return {
+        isChecked: false
+      };
+    },
+    methods: {
+      emitCheckboxChange() {
+        this.$emit('checkbox-toggled', this.isChecked); // Emit the checked state to the parent
+      },
+      toggleCheckbox() {
+        // Toggle the checkbox value when Enter is pressed
+        this.isChecked = !this.isChecked;
+        this.emitCheckboxChange(); // Emit the change
+      }
+    }
+  };
+  </script>
+  
+  <style scoped>
+  /* Add your styling here */
+  </style>
+  
\ No newline at end of file
diff --git a/src/components/ListItems/DateInput.vue b/src/components/ListItems/DateInput.vue
new file mode 100644
index 0000000..d26aa45
--- /dev/null
+++ b/src/components/ListItems/DateInput.vue
@@ -0,0 +1,25 @@
+<template>
+  <div class="date-input-container">
+    <label for="date-input"></label>
+    <input type="date" id="date-input" v-model="selectedDate" @change="emitDateChange" />
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      selectedDate: null,
+    };
+  },
+  methods: {
+    emitDateChange() {
+      this.$emit('date-selected', this.selectedDate); // Emit the selected date to the parent
+    }
+  }
+};
+</script>
+
+<style scoped>
+/* Add your styling here */
+</style>
diff --git a/src/components/ListItems/ListElement.css b/src/components/ListItems/ListElement.css
new file mode 100644
index 0000000..bec0678
--- /dev/null
+++ b/src/components/ListItems/ListElement.css
@@ -0,0 +1,165 @@
+.dropbtn {
+    margin-bottom: 10px;
+    min-width: 20px;
+    max-width: 200px;
+    width: 200px;
+  }
+  
+  
+  .dropdown {
+    position: relative;
+    display: inline-block;
+  }
+  
+  .dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #f9f9f9;
+    min-width: 160px;
+    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
+    z-index: 1;
+  }
+  
+  .dropdown-content a {
+    color: black;
+    padding: 12px 16px;
+    text-decoration: none;
+    display: block;
+  }
+  
+  .dropdown-content a:hover {
+    background-color: #f1f1f1;
+  }
+  
+  .dropdown:hover .dropdown-content {
+    display: block;
+  }
+  
+  .text-cursor {
+    cursor: text;
+  }
+  
+  .item-text:focus {
+    outline: none;
+    /* Remove default outline for focused element */
+  }
+  
+  .drag-button {
+    padding: 4px;
+    background-color: #ccc;
+    color: #333;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    margin-right: 4px;
+  }
+  
+  /* Styles for dragging */
+  .ListItem li {
+    cursor: move;
+  }
+  
+  .template-container {
+    background-color: black;
+    border-radius: 10px;
+    border-color: white;
+    border-width: 1px;
+    border-style: solid;
+    min-height: 400px;
+    max-height: 600px;
+    min-width: 400px;
+    max-width: 500px;
+    padding: 5px 10px;
+  }
+  
+  .input-container {
+    margin-bottom: 0px;
+    display: flex;
+    align-items: center;
+  }
+  
+  
+  
+  .input-field {
+    padding: 8px 12px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    margin-right: 8px;
+    font-size: 14px;
+  }
+  
+  .add-button,
+  .toggle-popup-button {
+    padding: 8px 16px;
+    background-color: #2d5dc7;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 14px;
+    margin-right: 8px;
+  }
+  
+  .remove-button {
+    padding: 4px 8px;
+    background-color: #343541;
+    color: white;
+    border: none;
+    border-radius: 50%;
+    cursor: pointer;
+    font-size: 12px;
+    margin-right: 8px;
+  }
+  
+  .ListContainer {
+    display: flex;
+    flex-direction: column;
+  }
+  
+  .ListItem {
+    padding: 0;
+  }
+  
+  .item-container {
+    display: flex;
+    align-items: center;
+  }
+  
+  .item-text {
+    margin-left: 10px;
+    outline: none;
+  }
+  
+  .ListItem li {
+    position: relative;
+    padding-top: 1.45px;
+    padding-bottom: 1.45px;
+  }
+  
+  .ListContainer {
+    max-height: 300px;
+    max-width: 400px;
+    overflow-y: auto;
+    display: flex;
+  }
+  
+  .ListItem {
+    padding: 0;
+  }
+  
+  .ListItem,
+  .RemoveButtonContainer {
+    list-style-type: none;
+    padding: 0;
+  }
+  
+  li {
+    list-style-type: none;
+    padding-right: 10px;
+    spellcheck: false;
+  }
+  
+  li:hover {
+    background-color: grey;
+    border-radius: 15px;
+  }
\ No newline at end of file
diff --git a/src/components/ListItems/ListElement.vue b/src/components/ListItems/ListElement.vue
index ebc321e..daf4815 100644
--- a/src/components/ListItems/ListElement.vue
+++ b/src/components/ListItems/ListElement.vue
@@ -1,21 +1,23 @@
 <template>
   <div class="template-container">
-    <h2 @blur="updateTitle" contenteditable="true" ref="titleInput" @keydown.enter.prevent="" spellcheck="false">
-      {{ title }}
-    </h2>
-    <button @click="clearStorage">clearStorage</button>
+    <div :style="{ display: 'inline-block', flexDirection: 'row' }">
+      <h2 @blur="updateTitle" contenteditable="true" ref="titleInput" @keydown.enter.prevent="" spellcheck="false">
+        {{ title }}
+      </h2>
+      <CheckedBox label="Due Date?" @checkbox-toggled="handleCheckboxToggled"/>
+          <DateInput  v-if="dueDate" @date-selected="handleDateChange" />
+
+          <CheckedBox label="Recurring task?" @checkbox-toggled="handleRecurringTask"/>
+          <!--Later: Recurring task checked = make ui and functions appear for making the list appear every day-->
+
+      <button v-if="debugMode" @click="clearStorage">clearStorage</button>
+    </div>
     <div>
       <div class="input-container">
-        <input type="text" v-model="newItem" placeholder="Enter an item" @keyup.enter="addItem" class="input-field"
-          spellcheck="false">
-        <button @click="addItem" class="add-button">Add Item</button>
+        <button @click="addItem" class="add-button">Remove</button>
+      </div>
+      <div>
       </div>
-      <div class="dropdown">
-          <button @click="toggleDropdown" class="dropbtn">Dropdown</button>
-          <div v-if="isDropdownOpen" class="dropdown-content">
-            <a v-for="(option, index) in titlesArray" :key="index" @click="selectOption(option)">{{ option }}</a>
-          </div>
-        </div>
     </div>
     <div class="ListContainer">
       <ul class="ListItem">
@@ -31,10 +33,19 @@
         </li>
       </ul>
     </div>
+    <div class="dropdown">
+      <button @click="toggleDropdown" class="dropbtn">Dropdown</button>
+      <div v-if="isDropdownOpen" class="dropdown-content">
+        <a v-for="(option, index) in titlesArray" :key="index" @click="selectOption(option)">{{ option }}</a>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+import DateInput from './DateInput.vue';
+import CheckedBox from './CheckBox.vue';
+import './ListElement.css'; 
 export default {
   name: 'ListElement',
   props: {
@@ -50,13 +61,21 @@ export default {
       itemsArray: [],
       titlesArray: [],
       draggedIndex: null,
-      isDropdownOpen: false
+      isDropdownOpen: false,
+      selectedMode: 'Mode 1', 
+      debugMode: false,
+      dueDate: false,
+      recurringTask: true
     };
   },
   created() {
     // Call a method to load initial data
     this.loadInitialData();
   },
+  components: {
+    DateInput,
+    CheckedBox
+  },
   methods: {
     loadInitialData() {
       const storedTitle = localStorage.getItem('title');
@@ -70,44 +89,57 @@ export default {
       }
 
       const storedTitlesArray = localStorage.getItem('titlesArray');
-      if(storedTitlesArray){
+      if (storedTitlesArray) {
         this.titlesArray = JSON.parse(storedTitlesArray);
       }
+
+      // Ensure there's at least one empty item in the array
+      if (this.itemsArray.length === 0) {
+        this.itemsArray.push(''); // Base case
+      }
+    },
+    handleDateChange(date) {
+      this.selectedDate = date; // Update the parent component's selectedDate
+    },
+    handleCheckboxToggled() {
+      this.dueDate= !this.dueDate;
+    },
+    handleRecurringTask(){
+      this.recurringTask =!this.recurringTask;
     },
     updateTitle() {
       this.saveList();//Save the current list items to the title before changing the title
       const titleElement = this.$refs.titleInput.innerText;
       this.title = titleElement;
-      let flag=true;
-    if(this.titlesArray.length !== 0){
-      for(let i=0;i<this.titlesArray.length;i++){
-      //  console.log(this.titlesArray[i]);
-      //  console.log(this.title);
-        if(this.titlesArray[i]===this.title){
-          flag=false;
+      let flag = true;
+      if (this.titlesArray.length !== 0) {
+        for (let i = 0; i < this.titlesArray.length; i++) {
+          //  console.log(this.titlesArray[i]);
+          //  console.log(this.title);
+          if (this.titlesArray[i] === this.title) {
+            flag = false;
+          }
         }
       }
-    }
-      if(flag){
+      if (flag) {
         this.titlesArray.push(this.title);
         this.saveTitlesArray();
       }
       localStorage.setItem('title', this.title);
       let newItems = localStorage.getItem(this.title)
-      this.itemsArray=JSON.parse(newItems);
+      this.itemsArray = JSON.parse(newItems);
     },
     saveList() {
       localStorage.setItem(this.title, JSON.stringify(this.itemsArray));
     },
-    saveTitlesArray(){
+    saveTitlesArray() {
       localStorage.setItem('titlesArray', JSON.stringify(this.titlesArray));
     },
     addItem() {
       if (this.newItem.trim() !== '') {
         if (!this.itemsArray) {
-          this.itemsArray = []; // Ensure itemsArray is initialized
+          this.itemsArray = [];
         }
-        console.log(this.title + " " + this.itemsArray + " " + this.titlesArray);
         this.itemsArray.push(this.newItem.trim());
         this.newItem = '';
         this.saveList();
@@ -221,6 +253,11 @@ export default {
       this.itemsArray.splice(index, 1);
       this.saveList();
 
+      // Ensure at least one empty item remains
+      if (this.itemsArray.length === 0) {
+        this.itemsArray.push(''); // Add an empty item as a base case
+      }
+
       // Check if the array is not empty and the index is valid before focusing
       if (this.itemsArray.length > 0) {
         const newIndex = index === this.itemsArray.length ? index - 1 : index;
@@ -261,174 +298,4 @@ export default {
     }
   }
 }
-</script>
-
-<style scoped>
-.dropbtn{
-  margin-bottom: 10px;
-  min-width: 20px;
-  max-width:200px;
-  width:200px;
-} 
-
-
-.dropdown {
-  position: relative;
-  display: inline-block;
-}
-
-.dropdown-content {
-  display: none;
-  position: absolute;
-  background-color: #f9f9f9;
-  min-width: 160px;
-  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
-  z-index: 1;
-}
-
-.dropdown-content a {
-  color: black;
-  padding: 12px 16px;
-  text-decoration: none;
-  display: block;
-}
-
-.dropdown-content a:hover {
-  background-color: #f1f1f1;
-}
-
-.dropdown:hover .dropdown-content {
-  display: block;
-}
-
-.text-cursor {
-  cursor: text;
-}
-
-.item-text:focus {
-  outline: none;
-  /* Remove default outline for focused element */
-}
-
-.drag-button {
-  padding: 4px;
-  background-color: #ccc;
-  color: #333;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  margin-right: 4px;
-}
-
-/* Styles for dragging */
-.ListItem li {
-  cursor: move;
-}
-
-.template-container {
-  background-color: black;
-  border-radius: 10px;
-  border-color: white;
-  border-width: 1px;
-  border-style: solid;
-  min-height: 400px;
-  max-height: 600px;
-  min-width: 300px;
-  max-width: 400px;
-  padding: 5px 10px;
-  margin: 10px 10px 20px 10px;
-}
-
-.input-container {
-  margin-bottom: 0px;
-  display: flex;
-  align-items: center;
-}
-
-
-
-.input-field {
-  padding: 8px 12px;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  margin-right: 8px;
-  font-size: 14px;
-}
-
-.add-button,
-.toggle-popup-button {
-  padding: 8px 16px;
-  background-color: #2d5dc7;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 14px;
-  margin-right: 8px;
-}
-
-.remove-button {
-  padding: 4px 8px;
-  background-color: #343541;
-  color: white;
-  border: none;
-  border-radius: 50%;
-  cursor: pointer;
-  font-size: 12px;
-  margin-right: 8px;
-}
-
-.ListContainer {
-  display: flex;
-  flex-direction: column;
-}
-
-.ListItem {
-  padding: 0;
-}
-
-.item-container {
-  display: flex;
-  align-items: center;
-}
-
-.item-text {
-  margin-left: 10px;
-  outline: none;
-}
-
-.ListItem li {
-  position: relative;
-  padding-top: 1.45px;
-  padding-bottom: 1.45px;
-  padding-left: 10px;
-}
-
-.ListContainer {
-  max-height: 300px;
-  max-width: 300px;
-  overflow-y: auto;
-  display: flex;
-}
-
-.ListItem {
-  padding: 0;
-}
-
-.ListItem,
-.RemoveButtonContainer {
-  list-style-type: none;
-  padding: 0;
-}
-
-li {
-  list-style-type: none;
-  padding-right: 10px;
-  spellcheck: false;
-}
-
-li:hover {
-  background-color: grey;
-  border-radius: 15px;
-}
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/src/components/ListItems/SliderSelect.vue b/src/components/ListItems/SliderSelect.vue
new file mode 100644
index 0000000..f345212
--- /dev/null
+++ b/src/components/ListItems/SliderSelect.vue
@@ -0,0 +1,102 @@
+<template>
+  <div class="button-container" @keydown="handleKeydown" tabindex="0" ref="container">
+    <div class="slider" :style="{ left: sliderPosition + 'px' }">
+      <div class="slider-text">{{ currentMode }}</div>
+    </div>
+    <div class="option-button option-1" :class="{ active: currentMode === 'Mode 1' }">Mode 1</div>
+    <div class="option-button option-2" :class="{ active: currentMode === 'Mode 2' }">Mode 2</div>
+    <div class="option-button option-3" :class="{ active: currentMode === 'Mode 3' }">Mode 3</div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      modes: ['Mode 1', 'Mode 2', 'Mode 3'],
+      currentModeIndex: 0,
+      sliderPosition: 0,
+    };
+  },
+  computed: {
+    currentMode() {
+      return this.modes[this.currentModeIndex];
+    }
+  },
+  methods: {
+    handleKeydown(event) {
+      if (event.key === 'ArrowRight') {
+        this.currentModeIndex = (this.currentModeIndex + 1) % this.modes.length;
+      } else if (event.key === 'ArrowLeft') {
+        this.currentModeIndex = (this.currentModeIndex - 1 + this.modes.length) % this.modes.length;
+      }
+      this.updateSliderPosition();
+      this.$emit('mode-changed', this.currentMode); // Emit the current mode to the parent
+    },
+    updateSliderPosition() {
+      this.sliderPosition = this.currentModeIndex * 100;
+    }
+  },
+  mounted() {
+    this.$refs.container.focus(); // Automatically focus on the component
+  }
+};
+</script>
+<style scoped>
+.button-container {
+  display: inline-block;
+  position: relative;
+  background-color: #f1f1f1;
+  border-radius: 30px;
+  width: 300px;
+  height: 50px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  font-family: Arial, sans-serif;
+  outline: none; /* Remove default focus outline */
+}
+
+.option-button {
+  position: absolute;
+  display: inline-block;
+  width: 100px;
+  height: 100%;
+  line-height: 50px;
+  text-align: center;
+  font-weight: bold;
+  color: #666;
+  transition: color 0.3s ease;
+}
+
+.option-button.active {
+  color: #2d5dc7;
+}
+
+.slider {
+  position: absolute;
+  width: 100px;
+  height: 100%;
+  background-color: #2d5dc7;
+  border-radius: 30px;
+  transition: 0.3s ease;
+}
+
+.slider-text {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: white;
+  font-weight: bold;
+}
+
+.option-1 {
+  left: 0;
+}
+
+.option-2 {
+  left: 100px;
+}
+
+.option-3 {
+  left: 200px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index 63e4497..5a01377 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -9,8 +9,9 @@
     </div>
     <div class="page-container" :style="{ 'background-color': colors.background }">
       <div class="content-container">
-        <!-- Pass list name as prop to ListElement component -->
+        <!-- In the future these will be loaded as inputs from the server -->
         <ListElement list-name="Daily List" />
+        <ListElement list-name="All Tasks" />
       </div>
     </div>
     <div class="calendarTemp">Insert Daily Calendar Here</div>