diff --git a/src/components/AboutMeComponents/SideScrolling.vue b/src/components/AboutMeComponents/SideScrolling.vue
index 6e6ede0..37db11c 100644
--- a/src/components/AboutMeComponents/SideScrolling.vue
+++ b/src/components/AboutMeComponents/SideScrolling.vue
@@ -1,6 +1,6 @@
 <template>
     <div id="scroll-container">
-        <div id="scroll-text">This is scrolling text.</div>
+        <div id="scroll-text">Scrolling text test.</div>
     </div>
 </template>
 
@@ -9,7 +9,6 @@ export default {
 
 }
 
-
 </script>
 
 <style>
diff --git a/src/components/CalendarComponents/DailyCalendar.vue b/src/components/CalendarComponents/DailyCalendar.vue
index f182e0f..e2cf8d2 100644
--- a/src/components/CalendarComponents/DailyCalendar.vue
+++ b/src/components/CalendarComponents/DailyCalendar.vue
@@ -1,12 +1,184 @@
 <template>
+  <div class="daily-calendar">
+    <div class="calendar-container" ref="calendarContainer">
+      <div class="time-slots">
+        <!-- Generate time slots (24 hours) -->
+        <div
+          v-for="hour in 24"
+          :key="hour"
+          class="time-slot"
+          :style="{ top: calculateTopPosition(hour) }"
+        >
+          {{ formatHour(hour) }}
+        </div>
+      </div>
 
+      <div class="events">
+        <!-- Render pending and completed tasks dynamically from different lists -->
+        <div
+          v-for="(task, index) in combinedEvents"
+          :key="task.id"
+          class="event"
+          :style="getEventStyle(task)"
+          @click="handleEventClick(task, index)"
+        >
+          <span :class="{ completed: task.completed }">{{ task.title }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-//https://css-tricks.com/lets-make-a-vue-powered-monthly-calendar/
+export default {
+  name: 'DailyCalendar',
+  props: {
+    completedAllTasks: {
+      type: Array,
+      required: true
+    },
+    pendingAllTasks: {
+      type: Array,
+      required: true
+    },
+    completedDailyList: {
+      type: Array,
+      required: true
+    },
+    pendingDailyList: {
+      type: Array,
+      required: true
+    }
+  },
+  computed: {
+    combinedEvents() {
+      // Combine all task arrays and filter by today's date
+      const today = this.getTodayDate();
+      return [
+        ...this.pendingAllTasks.filter(task => task.scheduledDate === today),
+        ...this.completedAllTasks.filter(task => task.scheduledDate === today),
+        ...this.pendingDailyList.filter(task => task.scheduledDate === today),
+        ...this.completedDailyList.filter(task => task.scheduledDate === today)
+      ];
+    }
+  },
+  methods: {
+    calculateTopPosition(hour) {
+      // Ensure this function works to calculate the top position based on the hour
+      return `${hour * 60}px`;
+    },
+    formatHour(hour) {
+      const ampm = hour >= 12 ? 'PM' : 'AM';
+      const formattedHour = hour % 12 || 12;
+      return `${formattedHour} ${ampm}`;
+    },
+    getEventStyle(task) {
+      const startHour = this.parseTime(task.startTime);
+      const endHour = this.parseTime(task.endTime);
+      const topPosition = startHour * 60; // Top position in px
+      const height = (endHour - startHour) * 60; // Event height in px
 
+      return {
+        top: `${topPosition}px`,
+        height: `${height}px`,
+        backgroundColor: task.completed ? '#888888' : '#4caf50' // Gray if completed
+      };
+    },
+    handleEventClick(task, index) {
+      // Emit the task's index and its list type to the parent (Dashboard)
+      const listType = this.getListType(task);
+      this.$emit('task-clicked', { taskIndex: index, listType });
+    },
+    getListType(task) {
+      if (this.pendingAllTasks.includes(task)) return 'pendingAllTasks';
+      if (this.completedAllTasks.includes(task)) return 'completedAllTasks';
+      if (this.pendingDailyList.includes(task)) return 'pendingDailyList';
+      if (this.completedDailyList.includes(task)) return 'completedDailyList';
+      return '';
+    },
+    getTodayDate() {
+      const today = new Date();
+      const year = today.getFullYear();
+      const month = (today.getMonth() + 1).toString().padStart(2, '0');
+      const day = today.getDate().toString().padStart(2, '0');
+      return `${year}-${month}-${day}`; // Format: YYYY-MM-DD
+    },
+    parseTime(time) {
+      const [hours, minutes] = time.split(':').map(Number);
+      return hours + minutes / 60;
+    },
+    scrollToDefaultTime() {
+      const currentTime = new Date();
+      const defaultScrollTime = currentTime.getHours() - 1; // 1 hour before current time
+      const scrollPosition = defaultScrollTime * 60; // Scroll to this position (in px)
+
+      // Scroll the container to the desired position
+      this.$refs.calendarContainer.scrollTop = scrollPosition;
+    }
+  },
+  mounted() {
+    this.scrollToDefaultTime();
+  }
+};
 </script>
 
-<style>
+<style scoped>
+.daily-calendar {
+  position: relative;
+  height: 100%;
+  width: 100%;
+}
+
+.calendar-container {
+  position: relative;
+  height: 100%;
+  overflow-y: auto;
+}
+
+.time-slots {
+  position: absolute;
+  width: 100%;
+  pointer-events: none;
+}
+
+.time-slot {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 60px;
+  border-bottom: 1px solid #e0e0e0;
+  text-align: left;
+  padding-left: 10px;
+  box-sizing: border-box;
+  font-size: 12px;
+  color: #888;
+}
+
+.events {
+  position: absolute;
+  width: 100%;
+}
+
+.event {
+  position: absolute;
+  left: 20%;
+  width: 60%;
+  background-color: #4caf50;
+  color: white;
+  border-radius: 4px;
+  padding: 10px;
+  box-sizing: border-box;
+  cursor: pointer;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.event:hover {
+  background-color: #388e3c;
+}
 
-</style>
\ No newline at end of file
+.completed {
+  text-decoration: line-through;
+}
+</style>
diff --git a/src/components/ListItems/BooleanSlider.vue b/src/components/ListItems/BooleanSlider.vue
new file mode 100644
index 0000000..658f64a
--- /dev/null
+++ b/src/components/ListItems/BooleanSlider.vue
@@ -0,0 +1,111 @@
+<template>
+  <div class="slider-container" tabindex="0" @keydown.left.prevent="moveSlider(false)" @keydown.right.prevent="moveSlider(true)">
+    <label class="slider-label">{{ label }}</label>
+    <div class="slider" @click="toggleSlider" :aria-checked="isChecked" role="switch">
+      <div class="slider-tab" :class="{ 'slider-checked': isChecked }">{{ isChecked ? 'Yes' : 'No' }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'BooleanSlider',
+  props: {
+    label: {
+      type: String,
+      default: 'Yes/No',
+    },
+    value: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      isChecked: this.value,
+    };
+  },
+  watch: {
+    value(newValue) {
+      this.isChecked = newValue; // Update local state when parent prop changes
+    },
+  },
+  methods: {
+    emitSliderChange() {
+      this.$emit('input', this.isChecked); // Emit input event for v-model binding
+      this.$emit('checkbox-toggled', this.isChecked);
+    },
+    toggleSlider() {
+      this.isChecked = !this.isChecked;
+      this.emitSliderChange(); // Emit the change
+      console.log('toggled');
+    },
+    moveSlider(direction) {
+      if (direction && !this.isChecked) {
+        this.isChecked = true;
+      } else if (!direction && this.isChecked) {
+        this.isChecked = false;
+      }
+      this.emitSliderChange(); // Emit the change
+    },
+  },
+  mounted() {
+    this.isChecked = this.value; // Set initial state based on prop value
+  },
+};
+</script>
+
+
+<style scoped>
+.slider-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  cursor: pointer;
+  outline: none; /* Remove the default browser outline */
+}
+
+.slider-label {
+  text-align: center;
+  margin-bottom: 2px;
+  font-size: 16px;
+}
+
+.slider {
+  position: relative;
+  width: 80px;
+  height: 30px;
+  border-radius: 15px;
+  display: flex;
+  align-items: center;
+  padding: 0 5px;
+  transition: background-color 0.3s ease;
+}
+
+.slider-checked {
+  transform: translateX(40px);
+}
+
+.slider-tab {
+  width: 40px;
+  height: 24px;
+  border-radius: 12px;
+  background-color: #fff;
+  position: absolute;
+  transition: transform 0.3s ease;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 14px;
+  user-select: none;
+  pointer-events: none;
+}
+
+.slider[aria-checked="true"] {
+  background-color: blue;
+}
+
+.slider[aria-checked="false"] {
+  background-color: #383444;
+}
+</style>
diff --git a/src/components/ListItems/CheckBox.vue b/src/components/ListItems/CheckBox.vue
deleted file mode 100644
index 452a1a7..0000000
--- a/src/components/ListItems/CheckBox.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<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
-    },
-    value: {
-      type: Boolean,
-      default: false // Default checked state
-    }
-  },
-  data() {
-    return {
-      isChecked: this.value // Initialize with the prop value
-    };
-  },
-  watch: {
-    value(newValue) {
-      this.isChecked = newValue; // Update local state when prop changes
-    }
-  },
-  methods: {
-    emitCheckboxChange() {
-      this.$emit('checkbox-toggled', this.isChecked); // Emit the checked state to the parent
-      this.$emit('input', this.isChecked); // Emit input event for v-model binding
-    },
-    toggleCheckbox() {
-      // Toggle the checkbox value when Enter is pressed
-      this.isChecked = !this.isChecked;
-      this.emitCheckboxChange(); // Emit the change
-    }
-  },
-  mounted() {
-    this.isChecked = this.value; // Set initial state based on prop value
-  }
-};
-</script>
-
-<style scoped>
-.checkbox-container {
-  background-color: red; /* Change as needed */
-}
-</style>
diff --git a/src/components/ListItems/DateInput.vue b/src/components/ListItems/DateInput.vue
index cb840f6..d6bf147 100644
--- a/src/components/ListItems/DateInput.vue
+++ b/src/components/ListItems/DateInput.vue
@@ -44,14 +44,14 @@ export default {
       isCalendarVisible: false,
       currentYear: new Date().getFullYear(),
       currentMonth: new Date().getMonth(),
-      selectedDate: this.initialDate,
+      selectedDate: null,
       hoveredDate: null,
     };
   },
   computed: {
     formattedDate() {
       // Display the selected date directly without modification
-      return this.hoveredDate || this.formatDate(this.incrementDate(this.selectedDate));
+      return this.hoveredDate || this.formatDate((this.incrementDate(this.selectedDate)));
     },
     monthNames() {
       return [
@@ -86,6 +86,11 @@ export default {
 
       return dates;
     },
+    logDefaultDate() {
+      // Computed property to log the current selected date (for debugging purposes)
+      console.log('Default Date:', this.selectedDate);
+      return this.selectedDate;
+    }
   },
   methods: {
     formatDate(date) {
@@ -125,9 +130,9 @@ export default {
         this.currentMonth++;
       }
     },
-        incrementDate(dateString) {
+    incrementDate(dateString) {
       const date = new Date(dateString);
-      date.setDate(date.getDate()+1); // Increment the date by 1
+      date.setDate(date.getDate() + 1); // Increment the date by 1
       return date.toISOString().split('T')[0]; // Return the incremented date as a string in YYYY-MM-DD format
     },
   },
@@ -140,7 +145,10 @@ export default {
     },
   },
   mounted() {
-    this.selectedDate = this.initialDate; // Set the initial selected date
+    const date = new Date();
+      date.setDate(date.getDate()); 
+      this.selectedDate = date.toISOString().split('T')[0];
+    console.log('Component mounted with default date:', this.selectedDate); // Log the default date when component is mounted
   },
 };
 </script>
@@ -164,13 +172,11 @@ export default {
   position: absolute;
   top: 40px;
   left: -10%;
-  width: 90%;
-  max-width: 300px;
   background-color: #2b2b2b;
   border: 1px solid #4a4a4a;
   border-radius: 4px;
   padding-left: 2px;
-  padding-right: 25%;
+  padding-right: 2px;
   z-index: 1;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
 }
diff --git a/src/components/ListItems/ListElement.css b/src/components/ListItems/ListElement.css
index 12721ca..9501f35 100644
--- a/src/components/ListItems/ListElement.css
+++ b/src/components/ListItems/ListElement.css
@@ -23,7 +23,7 @@
   box-shadow: 0 -8px 16px 0 rgba(0, 0, 0, 0.2); /* Shadow adjusted upwards */
   z-index: 1;
   bottom: 100%; 
-  max-height: 200px; 
+  max-height: 400px; 
   overflow-y: auto; 
 }
 
@@ -33,10 +33,12 @@
   text-decoration: none;
   display: block;
   font-size: 14px;
+  text-decoration: line-through;
 }
 
 .dropdown-content a:hover {
-  background-color: #f1f1f1;
+  background-color: grey;
+  text-decoration: none;
 }
 
 .dropdown:hover .dropdown-content {
@@ -95,9 +97,9 @@
 .ListContainer {
   display: flex;
   flex-direction: column;
-  min-height: 50px;
-  max-height: 390px;
-  max-width: 400px;
+  min-height: 60%;
+  max-height: 64%;
+  max-width: 100%;
   overflow-y:auto;
   flex:1;
 }
@@ -112,7 +114,7 @@
 }
 
 .item-text {
-  margin-left: 10px;
+  margin-left: 6%;
   outline: none;
   word-break: break-all;
 }
@@ -143,23 +145,27 @@ li:hover {
   border-radius: 15px;
 }
 
-
-.settings{
-  max-width: 15px;
-  max-height: 20px;
-}
-
 .input-grid {
   display: grid;
-  grid-template-columns: repeat(2, 1fr); /* Adjust based on the number of elements */
+  grid-template-columns: repeat(3, 1fr); /* Change to 3 columns */
   gap: 10px; /* Space between items */
-  margin-bottom: 10px; /* Space below the grid */
+  align-items: center; /* Vertically center items */
+  justify-items: center; /* Horizontally center items */
+  user-select: none; 
+}
+
+.boolean-slider {
+  display: contents; /* Allows children to participate in the grid layout */
+}
+
+.settings {
+  max-width: 100%; /* Make settings fully responsive */
+  max-height: 20px; /* Adjust as necessary */
 }
 
 .title{
-  max-width: 200px;
+  max-width: 100%;
   font-size:25px;
-  text-decoration: underline;
 }
 
 .input-grid > * {
diff --git a/src/components/ListItems/ListElement.vue b/src/components/ListItems/ListElement.vue
index 44c2af7..248c813 100644
--- a/src/components/ListItems/ListElement.vue
+++ b/src/components/ListItems/ListElement.vue
@@ -4,38 +4,46 @@
 
   <div class="template-container">
     <div class="input-grid">
-      <div class='title' @blur="updateTitle" contenteditable="true" ref="titleInput" @keydown.enter.prevent=""
-        spellcheck="false">
+      <div class='title' @blur="updateTitle" :contenteditable="parentPage !== 'dashboard'" ref="titleInput"
+        @keydown.enter.prevent="" spellcheck="false">
         {{ title }}
       </div>
+
+      <div>
+        <button @click="removeItem" class="add-button">Remove Task</button>
+      </div>
+
       <i class="fa-solid fa-gear add-button settings" @click="taskListSettingsPopUp"></i>
-      <CheckedBox label="Due Date?" @checkbox-toggled="handleCheckboxToggled" />
-      <DateInput v-if="dueDateCheckbox" @date-selected="handleDateChange" :initialDate="dueDateDate" />
-      <TimeInput v-if="dueDateCheckbox" @time-changed="handleTimeChange" :initialDateTime="dueDateTime" />
-      <CheckedBox label="Recurring task?" @checkbox-toggled="handleRecurringTask" />
-      <MinuteInput :initialMinutes="taskTimeEstimate" :key="taskTimeEstimate"
-        @time-selected="handleUpdateTimeEstimate" />
+      <div class="boolean-slider">
+        <BooleanSlider v-model="scheduledCheckbox" label="Scheduled Time?" @checkbox-toggled="handlescheduledToggled"
+          :value="scheduledCheckbox" />
+        <DateInput v-if="scheduledCheckbox" @date-selected="handleDateChange" :initialDate="scheduledDate" />
+        <TimeInput v-if="scheduledCheckbox" @time-changed="handleTimeChange" :initialDateTime="scheduledTime" />
+        <MinuteInput v-if="scheduledCheckbox" :initialMinutes="taskTimeEstimate" :key="taskTimeEstimate"
+          @time-selected="handleUpdateTimeEstimate" />
+      </div>
+      <BooleanSlider label="Recurring Task" @checkbox-toggled="handleRecurringTask" :value="recurringTask" />
       <div v-if="recurringTask">Recurring task frequency (days of the week popup)</div>
       <div v-if="recurringTask">Recurring task end date</div>
       <!--<div v-if="pageIsNotDashboard">List type display</div>-->
-      <CheckedBox label="Visible on Calendar?" @calendar-checkbox-toggled="handleCalendarVisible" />
+      <BooleanSlider v-model="dueDateCheckbox" label="Due Day?" @checkbox-toggled="handleDueCheckbox"
+        :value="dueDateCheckbox" />
+      <DateInput v-if="dueDateCheckbox" @date-selected="handleDueDateChange" :initialDate="dueDate" />
       <button v-if="debugMode" @click="clearStorage">clearStorage</button>
     </div>
-    <div>
-      <button @click="removeItem" class="add-button">Remove Task</button>
-    </div>
-
     <div class="ListContainer">
       <ul class="ListItem">
         <li v-for="(item, index) in itemsArray" :key="index" draggable="true" @dragstart="dragStart(index)"
           :style="index === selectedItemIndex ? 'border: 3px solid blue; border-radius:5px; transition: border-color 0.1s ease;' : 'border: 3px solid transparent;'"
           @dragover="dragOver" @drop="drop(index)">
-          <div class="item-container" @click="focusEditable(index)">
-            <CheckBoxOneWay label="" @checkbox-toggled="completeItem(index)" />
+          <div class="item-container" @click="focusEditable(index);">
+            <CheckBoxOneWay label="" @click.stop @checkbox-toggled="completeItem(index)" />
             <div class="text-cursor item-text" ref="itemSpan" contenteditable="true"
               @keydown.enter.prevent="handleEnter(index, $event)" @keydown.backspace="handleBackspace(index, $event)"
               @keydown.up="handleArrowUp(index, $event)" @keydown.down="handleArrowDown(index, $event)"
-              spellcheck="false">{{ item.textString }}</div>
+              @input="saveEditableText(index, $event)" spellcheck="false">
+              {{ item.textString }}
+            </div>
           </div>
         </li>
       </ul>
@@ -56,7 +64,7 @@
 /* eslint-disable*/
 
 import DateInput from './DateInput.vue';
-import CheckedBox from './CheckBox.vue';
+import BooleanSlider from './BooleanSlider.vue';
 import CheckBoxOneWay from './CheckboxOneWay.vue';
 import TimeInput from './TimeInput.vue';
 import MinuteInput from './MinuteInput.vue';
@@ -72,6 +80,8 @@ export default {
   data() {
     return {
       title: this.listName,
+      listType: null,
+      parentPage: 'dashboard',
       itemsArray: [],
       titlesArray: [],
       completedItemsArray: [],
@@ -82,35 +92,34 @@ export default {
       debugMode: false,
 
       textString: '',
-      dueDateCheckbox: false,
-      dueDateDate: null,
-      dueDateTime: null,
-      timeEstimate: null,
+      listOrigin: '',
+      scheduledCheckbox: false,
+      scheduledDate: null,
+      scheduledTime: null,
+      timeEstimate: 30,
       recurringTask: false,
       recurringTaskEndDate: null,
-      addToCalendarCheckbox: false,
-      completedDateTime: null,
-      timeUntilComplete: null,
-
+      dueDateCheckbox: false,
+      dueDate: null,
 
-      defaultDueDateCheckbox: false,
-      defaultDueDateDate: null,
-      defaultDueDateTime: null,
-      defaultTaskTimeEstimate: 0,
+      defaultscheduledCheckbox: false,
+      defaultscheduledDate: null,
+      defaultscheduledTime: null,
+      defaultTaskTimeEstimate: 30,
       defaultRecurringTask: false,
       defaultRecurringTaskEndDate: null,
-      defaultAddToCalendarCheckbox: false,
-      defaultCompletedDateTime: null,
+      defaultDueDateCheckbox: false,
+      defaultDueDate: null
     };
   },
   created() {
     // Call a method to load initial data
-    this.clearStorage();
+    //this.clearStorage();
     this.loadInitialData();
   },
   components: {
     DateInput,
-    CheckedBox,
+    BooleanSlider,
     CheckBoxOneWay,
     TimeInput,
     MinuteInput,
@@ -120,7 +129,6 @@ export default {
   },
   watch: {
     initialMinutes(newValue) {
-      console.log("initialMinutes changed to: ", newValue); // Check if this is called
       if (newValue > 0) {
         handleUpdateTimeEstimate(newValue);
       }
@@ -131,11 +139,22 @@ export default {
     initialDateTime(newDateTime) {
       handleTimeChange(newDateTime); // Update the selected date when prop changes
     },
+    scheduledToggled(scheduledCheckbox) {
+      handlescheduledToggled();
+    },
+    dueDateCheckToggled() {
+      handleDueCheckbox();
+    },
+    dueDateChange(dueDate) {
+      handleDueDateChange(dueDate);
+    }
+
   },
   methods: {
     loadInitialData() {
       const storedTitle = localStorage.getItem('title');
       if (storedTitle) {
+        console.log(title);
         this.title = storedTitle;
       }
 
@@ -155,12 +174,12 @@ export default {
       }
     },
     handleDateChange(date) {
-      this.dueDateDate = date; // Update the parent component's selectedDate
-      this.itemsArray[this.selectedItemIndex].dueDateDate = date;
+      this.scheduledDate = date; // Update the parent component's selectedDate
+      this.itemsArray[this.selectedItemIndex].scheduledDate = date;
     },
-    handleCheckboxToggled() {
-      this.dueDateCheckbox = !this.dueDateCheckbox;
-      this.itemsArray[this.selectedItemIndex].dueDateCheckbox = this.dueDateCheckbox; // Update the checkbox state in the items array
+    handlescheduledToggled() {
+      this.scheduledCheckbox = !this.scheduledCheckbox;
+      this.itemsArray[this.selectedItemIndex].scheduledCheckbox = this.scheduledCheckbox; // Update the checkbox state in the items array
     },
     handleRecurringTask() {
       this.recurringTask = !this.recurringTask;
@@ -168,25 +187,40 @@ export default {
     },
 
     handleTimeChange(time) {
-      this.dueDateTime = time;
-      this.itemsArray[this.selectedItemIndex].dueDateTime = time; // Update the time in the items array
+      this.scheduledTime = time;
+      this.itemsArray[this.selectedItemIndex].scheduledTime = time; // Update the time in the items array
     },
 
     handleUpdateTimeEstimate(newMinutes) {
       this.taskTimeEstimate = newMinutes;
       this.itemsArray[this.selectedItemIndex].taskTimeEstimate = newMinutes;
-      console.log('time updated: ' + this.taskTimeEstimate + " for index " + this.selectedItemIndex);
     },
-    handleCalendarVisible() {
-      //needs implementation
+    handleDueCheckbox() {
+      this.dueDateCheckbox = !this.dueDateCheckbox;
+      console.log(this.dueDateCheckbox);
+      this.itemsArray[this.selectedItemIndex].dueDateCheckbox = this.dueDateCheckbox;
+    },
+    saveEditableText(index, event) {
+      this.itemsArray[index].textString = event.target.innerText;
+      this.saveList(); // Persist changes immediately
+    },
+    handleDueDateChange(dueDate) {
+      this.dueDate = dueDate;
+      this.itemsArray[this.selectedItemIndex].dueDate = dueDate; // Update the time in the items array
     },
     swapItemValues(index) {
       const item = this.itemsArray[index];
-      this.dueDateDate = item.dueDateDate;
-      this.dueDateTime = item.dueDateTime;
-      this.dueDateCheckbox = item.dueDateCheckbox;
-      this.recurringTask = item.recurringTask;
-      this.taskTimeEstimate = item.taskTimeEstimate;
+
+      // Ensure all the required fields are swapped properly
+      this.scheduledDate = item.scheduledDate ?? this.defaultscheduledDate;
+      this.scheduledTime = item.scheduledTime ?? this.defaultscheduledTime;
+      this.scheduledCheckbox = item.scheduledCheckbox ?? this.defaultscheduledCheckbox;
+      //console.log(this.scheduledCheckbox);
+      this.recurringTask = item.recurringTask ?? this.defaultRecurringTask;
+      this.taskTimeEstimate = item.taskTimeEstimate ?? this.defaultTaskTimeEstimate;
+      this.dueDateCheckbox = item.dueDateCheckbox ?? this.defaultDueDateCheckbox;
+      this.dueDate = item.dueDate ?? this.defaultDueDate;
+      this.saveList();
     },
     completeItem(index) {
       if (this.itemsArray[index].textString != '') {
@@ -195,14 +229,15 @@ export default {
       this.removeItemByIndex(index);
     },
     updateTitle() {
+      //Deprecated method.
+
       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;
+      this.createNewItem();
       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;
           }
@@ -217,8 +252,15 @@ export default {
       this.itemsArray = JSON.parse(textStrings);
     },
     saveList() {
-      localStorage.setItem(this.title, JSON.stringify(this.itemsArray));
+      //localStorage.setItem(this.title, JSON.stringify(this.itemsArray));
       //localStorage.setItem(this.title) needs to retrieve previous items
+      this.emitTaskUpdates();
+    },
+    emitTaskUpdates() {
+      this.$emit('update-tasks', {
+        currentTasks: this.itemsArray,
+        completedTasks: this.completedItemsArray,
+      });
     },
     saveTitlesArray() {
       localStorage.setItem('titlesArray', JSON.stringify(this.titlesArray));
@@ -227,16 +269,17 @@ export default {
       //future makes api call to get this user's default values
     },
     createNewItem(text) {
-      console.log('newitem created');
       return {
         textString: text,
-        dueDateCheckbox: false,
-        dueDateDate: null,
-        dueDateTime: null,
-        taskTimeEstimate: 0, 
+        scheduledCheckbox: false,
+        scheduledDate: null,
+        scheduledTime: null,
+        taskTimeEstimate: 0,
         recurringTask: false,
         recurringTaskEndDate: null,
         addToCalendarCheckbox: false,
+        dueDateCheckbox: false,
+        dueDate: null,
       };
     },
     createItemWithExistingValues(text) {
@@ -244,16 +287,23 @@ export default {
 
         //These could all instead be replaced with 
         textString: text,
-        dueDateCheckbox: this.dueDateCheckbox,
-        dueDateDate: this.dueDateDate,
-        dueDateTime: this.dueDateTime,
+        scheduledCheckbox: this.scheduledCheckbox,
+        scheduledDate: this.scheduledDate,
+        scheduledTime: this.scheduledTime,
         taskTimeEstimate: this.taskTimeEstimate,
         recurringTask: this.recurringTask,
         recurringTaskEndDate: this.recurringTaskEndDate,
         addToCalendarCheckbox: this.addToCalendarCheckbox,
+        dueDateCheckbox: this.dueDateCheckbox,
+        dueDate: this.dueDate,
       }
     },
     dragStart(index) {
+      const element = this.$refs.itemSpan[index];
+      if (element) {
+        this.itemsArray[index].textString = element.innerText; // Capture the current text
+        this.saveList(); // Save the latest changes before drag starts
+      }
       this.draggedIndex = index;
     },
     dragOver(event) {
@@ -261,27 +311,27 @@ export default {
     },
     drop(index) {
       const draggedItem = this.itemsArray[this.draggedIndex];
+      this.swapItemValues(index);
       this.itemsArray.splice(this.draggedIndex, 1);
       this.itemsArray.splice(index, 0, draggedItem);
       this.draggedIndex = null;
       this.saveList();
-    },/*
+    },
+    /*
     populateCurrentValues(index) {
       this.textString = this.itemsArray.textString[index];
-      this.dueDateCheckbox = this.itemsArray.textString[index];
-      this.dueDateDate = this.itemsArray[index];
-      this.dueDateTime = this.itemsArray[index];
+      this.scheduledCheckbox = this.itemsArray.textString[index];
+      this.scheduledDate = this.itemsArray[index];
+      this.scheduledTime = this.itemsArray[index];
       this.taskTimeEstimate = this.itemsArray[index];
       this.recurringTask = this.itemsArray[index];
       this.recurringTaskEndDate = this.itemsArray[index];
       this.addToCalendarCheckbox = this.itemsArray[index];
     },*/
     focusEditable(index, position = null) {
-     // if (this.selectedItemIndex != index) {
-     console.log('focusing on index:' + index);
-        this.swapItemValues(index);
-   //   }
+      this.swapItemValues(index); // Now swap the new values
       this.selectedItemIndex = index;
+
       this.$nextTick(() => {
         const element = this.$refs.itemSpan[index];
         if (element) {
@@ -305,7 +355,6 @@ export default {
 
       this.$nextTick(() => {
         this.focusEditable(index + 1, 0);
-        console.log('focusing from enter');
       });
       this.saveList();
     },
@@ -334,7 +383,7 @@ export default {
       if (event.target.innerText.length === 0 && index - 1 >= 0) {
         event.preventDefault(); // Prevent default arrow key behavior
         this.focusEditable(index - 1, this.itemsArray[index - 1].length);
-        console.log('focusing on arrow up and length = 0');
+
       }
       const selection = window.getSelection();
       const range = selection.getRangeAt(0);
@@ -347,14 +396,12 @@ export default {
       if ((isTopRow || event.target.innerText.length === 0) && index - 1 >= 0) {
         event.preventDefault(); // Prevent default arrow key behavior
         this.focusEditable(index - 1, this.itemsArray[index - 1].length);
-        console.log('focusing on arrow up and length = 0 + its top row');
       }
     },
     handleArrowDown(index, event) {
       if (event.target.innerText.length === 0 && index + 1 < this.itemsArray.length) {
         event.preventDefault(); // Prevent default arrow key behavior
         this.focusEditable(index + 1, 0);
-        console.log('focusing on arrow down and length = 0');
       }
       const selection = window.getSelection();
       const range = selection.getRangeAt(0);
@@ -366,12 +413,10 @@ export default {
       if ((isBottomRow || event.target.innerText.length === 0) && index + 1 < this.itemsArray.length) {
         event.preventDefault(); // Prevent default arrow key behavior
         this.focusEditable(index + 1, 0);
-        console.log('focusing on arrow down and length = 0 and is bottom row');
       }
     },
     removeItem() {
       this.itemsArray.splice(this.selectedItemIndex, 1);
-      this.saveList();
 
       // Ensure at least one empty item remains
       if (this.itemsArray.length === 0) {
@@ -383,33 +428,31 @@ export default {
         const newIndex = this.selectedItemIndex === this.itemsArray.length ? this.selectedItemIndex - 1 : this.selectedItemIndex;
         this.$nextTick(() => {
           this.focusEditable(newIndex);
-          console.log('focusing on remove normal');
         });
       }
+      this.saveList();
     },
     removeItemByIndex(index) {
-      this.saveList();
-
       // Ensure at least one empty item remains
       if (this.itemsArray.length === 0) {
         this.itemsArray.push(this.createNewItem(''));
       }
 
       if (this.itemsArray.length > 0) {
-        let newIndex = index >= this.itemsArray.length ? this.itemsArray.length - 1 : index;
+        let newIndex = index - 1;
+
         if (newIndex < 0) newIndex = 0;
 
         this.$nextTick(() => {
           this.focusEditable(newIndex);
-          console.log('focusing on remove by index');
         });
         this.itemsArray.splice(index, 1);
         if (this.itemsArray.length === 0) {
           this.itemsArray.push(this.createNewItem('')); // Add an empty item as a base case
         }
+        this.saveList();
       }
     },
-
     setCaretPosition(element, position) {
       const range = document.createRange();
       const sel = window.getSelection();
diff --git a/src/components/ListItems/MinuteInput.vue b/src/components/ListItems/MinuteInput.vue
index c37a43e..814be73 100644
--- a/src/components/ListItems/MinuteInput.vue
+++ b/src/components/ListItems/MinuteInput.vue
@@ -8,7 +8,7 @@
       @focus="showTooltip"
       @blur="hideTooltip"
       class="minute-input-field"
-      placeholder="Minute Estimate"
+      placeholder="Duration"
     />
   </div>
 </template>
diff --git a/src/components/ListItems/SliderSelect.vue b/src/components/ListItems/SliderSelect.vue
index f345212..e4de965 100644
--- a/src/components/ListItems/SliderSelect.vue
+++ b/src/components/ListItems/SliderSelect.vue
@@ -11,37 +11,69 @@
 
 <script>
 export default {
+  name: 'YesNoSlider',
+  props: {
+    label: {
+      type: String,
+      default: 'Yes/No' // Default label text
+    },
+    value: {
+      type: Boolean,
+      default: false // Default checked state
+    }
+  },
   data() {
     return {
-      modes: ['Mode 1', 'Mode 2', 'Mode 3'],
-      currentModeIndex: 0,
-      sliderPosition: 0,
+      isChecked: this.value // Initialize with the prop value
     };
   },
+  watch: {
+    value(newValue) {
+      this.isChecked = newValue; // Update local state when parent prop changes
+    },
+    isChecked(newVal) {
+      // Ensure slider tab moves whenever isChecked changes (direct or via task load)
+      this.updateSliderTabPosition(newVal);
+    }
+  },
   computed: {
-    currentMode() {
-      return this.modes[this.currentModeIndex];
+    sliderTabStyle() {
+      return {
+        transform: this.isChecked ? 'translateX(40px)' : 'translateX(0px)',
+        transition: 'transform 0.3s ease'
+      };
     }
   },
   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;
+    emitSliderChange() {
+      this.$emit('checkbox-toggled', this.isChecked); // Emit the slider state to the parent
+      this.$emit('input', this.isChecked); // Emit input event for v-model binding
+    },
+    toggleSlider() {
+      this.isChecked = !this.isChecked;
+      this.emitSliderChange(); // Emit the change
+    },
+    moveSlider(direction) {
+      // Handle arrow key navigation: true for right (Yes), false for left (No)
+      if (direction && !this.isChecked) {
+        this.isChecked = true;
+      } else if (!direction && this.isChecked) {
+        this.isChecked = false;
       }
-      this.updateSliderPosition();
-      this.$emit('mode-changed', this.currentMode); // Emit the current mode to the parent
+      this.emitSliderChange(); // Emit the change
     },
-    updateSliderPosition() {
-      this.sliderPosition = this.currentModeIndex * 100;
+    updateSliderTabPosition(isChecked) {
+      // Additional method to handle external updates to the slider's checked state
+      this.isChecked = isChecked;
     }
   },
   mounted() {
-    this.$refs.container.focus(); // Automatically focus on the component
+    this.isChecked = this.value; // Set initial state based on prop value
   }
 };
+
 </script>
+
 <style scoped>
 .button-container {
   display: inline-block;
diff --git a/src/components/ListItems/TimeInput.vue b/src/components/ListItems/TimeInput.vue
index aaf21d2..710203a 100644
--- a/src/components/ListItems/TimeInput.vue
+++ b/src/components/ListItems/TimeInput.vue
@@ -158,7 +158,7 @@ export default {
   border: 1px solid #4a4a4a;
   border-radius: 4px;
   padding: 8px;
-  width: 90%;
+  width: 80%;
   cursor: text;
 }
 
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index 734f974..6279ac5 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -1,19 +1,27 @@
 <template>
   <div>
+    <!-- Top row: Hero text and navigation buttons -->
     <div class="top-row" :style="{ 'background-color': colors.sideBar }">
-      <div class="heroText" :style="{ 'background-color': colors.sidebar }">Current Task: Work on Dashboard</div>
+      <div class="heroText" :style="{ 'background-color': colors.sidebar }">10/4/2024 9:05</div>
       <div class="button-container">
         <div class="bigButton" id="previousDay" :style="{ 'background-color': colors.background }">Previous Day</div>
         <div class="bigButton" id="nextDay" :style="{ 'background-color': colors.background }">Next Day</div>
-      </div>  
+      </div>
     </div>
+
     <div class="page-container" :style="{ 'background-color': colors.background }">
-      <div class="content-container">
-        <!-- In the future these will be loaded as inputs from the server -->
-        <ListElement list-name="Daily List" selectedItem=""/>
-        <ListElement list-name="All Tasks" />
+      <div class="lists-container">
+        <ListElement listName="All Tasks" @update-tasks="handleTaskUpdates"/>
+        <ListElement listName="Daily List" @update-tasks="handleTaskUpdates"/>
       </div>
-      <div class="calendarTemp">Insert Daily Calendar Here</div>
+
+        <DailyCalendar
+          :completed-all-tasks="completedAllTasks"
+          :pending-all-tasks="pendingAllTasks"
+          :completed-daily-list="completedDailyList"
+          :pending-daily-list="pendingDailyList"
+          @task-clicked="handleTaskClicked"
+        />
     </div>
   </div>
 </template>
@@ -21,71 +29,45 @@
 <script>
 import colors from '@/assets/colors.json';
 import ListElement from '@/components/ListItems/ListElement.vue';
+import DailyCalendar from '@/components/CalendarComponents/DailyCalendar.vue';
+import './cssViews/Dashboard.css';
 
 export default {
   name: 'DashboardWorld',
   components: {
-    ListElement
+    ListElement,
+    DailyCalendar
   },
   data() {
     return {
-      colors: colors
+      colors: colors,
+      completedAllTasks: [],   // Completed tasks from All Tasks
+      pendingAllTasks: [],     // Pending tasks from All Tasks
+      completedDailyList: [],  // Completed tasks from Daily List
+      pendingDailyList: [],    // Pending tasks from Daily List
     };
+  },
+  methods: {
+    handleTaskUpdates(updatedTasks, listName) {
+      // Handle task updates from ListElement components and distribute to respective arrays
+      if (listName === 'All Tasks') {
+        this.completedAllTasks = updatedTasks.filter(task => task.completed);
+        this.pendingAllTasks = updatedTasks.filter(task => !task.completed);
+      } else if (listName === 'Daily List') {
+        this.completedDailyList = updatedTasks.filter(task => task.completed);
+        this.pendingDailyList = updatedTasks.filter(task => !task.completed);
+      }
+    },
+    handleTaskClicked(taskData) {
+      const { taskIndex, listType } = taskData;
+      // Process the clicked task and send it to the right ListElement
+      if (listType === 'pendingAllTasks') {
+        this.pendingAllTasks.splice(taskIndex, 1);
+        // Optionally move to the completed list or handle accordingly
+      } else if (listType === 'pendingDailyList') {
+        this.pendingDailyList.splice(taskIndex, 1);
+      }
+    }
   }
 };
 </script>
-
-<style>
-.top-row {
-  grid-row: 1;
-  display: flex;
-  flex-direction: row;
-  height:10vh;
-}
-
-.button-container {
-  min-width: 300px;
-  display: flex;
-  flex-direction: row;
-}
-
-.heroText {
-  font-size: 30px;
-  margin: 10px 0px 10px 20px;
-}
-
-.bigButton {
-  color: white;
-  border-radius: 10px;
-  padding: 10px;
-  margin: 10px 100px 10px;
-}
-
-.page-container {
-  display: flex;
-  flex-direction: row;
-  padding-left: 10px;
-  height:90vh;
-}
-
-.innerListContainer {}
-
-.content-container {
-  grid-row: 2;
-  display: flex;
-  flex-flow: row;
-  min-width: 600px;
-  justify-content: space-around;
-}
-
-.calendarTemp {
-  border-radius: 10px;
-  border-color: white;
-  border-style: solid;
-  background-color: black;
-  flex: 1;
-  min-width: 450px;
-  max-width: 700px;
-  margin-left: 10px
-}
-</style>
diff --git a/src/views/Settings.vue b/src/views/Settings.vue
index f7e2dfb..b35da27 100644
--- a/src/views/Settings.vue
+++ b/src/views/Settings.vue
@@ -1,37 +1,5 @@
 <template>
-   <div class="container">
-        <h1>Settings</h1>
-        <div class="settings-section">
-            <h2>General</h2>
-            <div class="setting">
-                <label for="username">Username</label>
-                <input type="text" id="username" name="username">
-            </div>
-            <div class="setting">
-                <label for="email">Email</label>
-                <input type="email" id="email" name="email">
-            </div>
-        </div>
-        <div class="settings-section">
-            <h2>Appearance</h2>
-            <div class="setting">
-                <label for="theme">Theme</label>
-                <select id="theme" name="theme">
-                    <option value="light">Light</option>
-                    <option value="dark">Dark</option>
-                </select>
-            </div>
-        </div>
-        <div class="settings-section">
-            <h2>Notifications</h2>
-            <div class="setting">
-                <label for="email-notifications">Email Notifications</label>
-                <input type="checkbox" id="email-notifications" name="email-notifications">
-            </div>
-        </div>
-    </div>
-    <colorPicker />
-    
+   <h1> Settings page under construction</h1>
   </template>
 
   
@@ -77,7 +45,7 @@
   export default {
     name: 'SettingsWorld',
     components: {
-      colorPicker,
+      //colorPicker,
     }
   }
   </script>
diff --git a/src/views/cssViews/Dashboard.css b/src/views/cssViews/Dashboard.css
new file mode 100644
index 0000000..a933589
--- /dev/null
+++ b/src/views/cssViews/Dashboard.css
@@ -0,0 +1,69 @@
+/* Ensure body and html fill the entire viewport */
+html, body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}
+
+/* Top row styling */
+.top-row {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  height: 10vh; /* Fixed height of 10% of the viewport */
+  padding: 0 20px;
+}
+
+.heroText {
+  font-size: 24px;
+  color: white;
+}
+
+.button-container {
+  display: flex;
+  gap: 20px;
+}
+
+.bigButton {
+  color: white;
+  border-radius: 10px;
+  padding: 10px;
+  background-color: #555;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.bigButton:hover {
+  background-color: #777;
+}
+
+/* Page container styling */
+.page-container {
+  display: flex;
+  height: calc(100vh - 10vh); /* Take the full viewport height minus the top row height */
+  overflow: hidden;
+}
+
+/* Lists container (1/4 + 1/4 of the page) */
+.lists-container {
+  display: flex;
+  flex: 2;
+  flex-direction: row;
+  width: 50%;
+  background-color: #f4f4f4;
+  border-right: 1px solid #ccc;
+  box-sizing: border-box;
+  height: 100%; /* Ensure it stretches to fill the remaining height */
+}
+
+/* Each ListElement should take 1/4 of the page width */
+.lists-container > * {
+  flex: 1;
+}
+
+/* Ensure no horizontal scroll */
+body {
+  overflow-x: hidden;
+}
\ No newline at end of file