diff --git a/src/components/ListItems/CheckBox.vue b/src/components/ListItems/CheckBox.vue
index 2fd1ef0..452a1a7 100644
--- a/src/components/ListItems/CheckBox.vue
+++ b/src/components/ListItems/CheckBox.vue
@@ -1,44 +1,58 @@
 <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
-      }
+  <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
-      };
+    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
     },
-    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
-      }
+    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
+  },
+  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/CheckboxOneWay.vue b/src/components/ListItems/CheckboxOneWay.vue
new file mode 100644
index 0000000..c3dd629
--- /dev/null
+++ b/src/components/ListItems/CheckboxOneWay.vue
@@ -0,0 +1,83 @@
+<template>
+  <div class="pretty-button-container">
+    <button 
+      class="pretty-button" 
+      @mouseenter="hoverButton" 
+      @mouseleave="resetButton" 
+      @click="toggleCheck" 
+      @keyup.enter="toggleCheck"
+    >
+      <span class="button-label">{{ buttonLabel }}</span>
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PrettyButton',
+  data() {
+    return {
+      isChecked: false, // Keeps track of whether the button is "checked"
+    };
+  },
+  computed: {
+    buttonLabel() {
+      // Label changes based on whether the button is checked
+      return this.isChecked ? '✓' : '';
+    }
+  },
+  methods: {
+    emitButtonChange() {
+      this.$emit('checkbox-toggled', this.isChecked); // Emit the checked state to the parent
+    },
+    hoverButton(event) {
+      // Temporarily show the checkmark on hover
+      event.target.innerHTML = '✓';
+    },
+    resetButton(event) {
+      // Reset the button to its actual checked state after hover
+      event.target.innerHTML = '';
+    },
+    toggleCheck() {
+      // Permanently check or uncheck the button on click
+      this.isChecked = !this.isChecked;
+      this.emitButtonChange();
+    }
+  }
+};
+</script>
+
+<style scoped>
+.pretty-button-container {
+  display: inline-block;
+  padding-left: 3px;
+  margin-bottom: 2px;
+}
+
+.pretty-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 25px;
+  height: 25px;
+  background-color: #ddd;
+  border: 2px solid #2d5dc7;
+  border-radius: 5px;
+  cursor: pointer;
+  user-select: none;
+  transition: background-color 0.3s, border-color 0.3s;
+}
+
+.pretty-button:hover {
+  background-color: #2d5dc7;
+}
+
+.button-label {
+  font-size: 16px;
+  color: white;
+}
+
+.pretty-button:hover .button-label {
+  color: white;
+}
+</style>
diff --git a/src/components/ListItems/DateInput.vue b/src/components/ListItems/DateInput.vue
index d26aa45..cb840f6 100644
--- a/src/components/ListItems/DateInput.vue
+++ b/src/components/ListItems/DateInput.vue
@@ -1,25 +1,206 @@
 <template>
-  <div class="date-input-container">
-    <label for="date-input"></label>
-    <input type="date" id="date-input" v-model="selectedDate" @change="emitDateChange" />
+  <div class="date-picker">
+    <input
+      type="text"
+      v-model="formattedDate"
+      @focus="showCalendar"
+      class="date-input"
+      readonly
+    />
+    <div v-if="isCalendarVisible" class="calendar">
+      <div class="calendar-header">
+        <button @click="prevMonth">&lt;</button>
+        <span>{{ monthNames[currentMonth] }} {{ currentYear }}</span>
+        <button @click="nextMonth">&gt;</button>
+      </div>
+      <div class="calendar-grid">
+        <div class="day" v-for="(day, index) in weekDays" :key="index">{{ day }}</div>
+        <div
+          v-for="date in displayedDates"
+          :key="date.dateString"
+          class="day"
+          :class="{ 'hover': date.isHover, 'selected': date.isSelected }"
+          @mouseover="hoverDate(date.dateString)"
+          @mouseleave="clearHover"
+          @click="selectDate(date.dateString)"
+        >
+          {{ date.day }}
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
+  props: {
+    initialDate: {
+      type: String,
+      default: () => new Date().toISOString().split('T')[0], // Default to today
+    },
+  },
   data() {
     return {
-      selectedDate: null,
+      isCalendarVisible: false,
+      currentYear: new Date().getFullYear(),
+      currentMonth: new Date().getMonth(),
+      selectedDate: this.initialDate,
+      hoveredDate: null,
     };
   },
+  computed: {
+    formattedDate() {
+      // Display the selected date directly without modification
+      return this.hoveredDate || this.formatDate(this.incrementDate(this.selectedDate));
+    },
+    monthNames() {
+      return [
+        'January', 'February', 'March', 'April', 'May', 'June',
+        'July', 'August', 'September', 'October', 'November', 'December',
+      ];
+    },
+    weekDays() {
+      return ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+    },
+    displayedDates() {
+      const dates = [];
+      const firstDayOfMonth = new Date(this.currentYear, this.currentMonth, 1);
+      const lastDayOfMonth = new Date(this.currentYear, this.currentMonth + 1, 0);
+
+      // Fill in the days leading up to the first day of the month
+      for (let i = 0; i < firstDayOfMonth.getDay(); i++) {
+        dates.push({ day: '', dateString: '' });
+      }
+
+      // Fill in the days of the month
+      for (let day = 1; day <= lastDayOfMonth.getDate(); day++) {
+        const dateString = new Date(this.currentYear, this.currentMonth, day).toISOString().split('T')[0];
+
+        dates.push({
+          day,
+          dateString,
+          isSelected: dateString === this.selectedDate,
+          isHover: dateString === this.hoveredDate,
+        });
+      }
+
+      return dates;
+    },
+  },
   methods: {
-    emitDateChange() {
+    formatDate(date) {
+      const options = { year: 'numeric', month: 'short', day: 'numeric' };
+      return new Date(date).toLocaleDateString(undefined, options);
+    },
+    showCalendar() {
+      this.isCalendarVisible = true;
+    },
+    hoverDate(dateString) {
+      this.hoveredDate = dateString; // Set the hovered date
+    },
+    clearHover() {
+      this.hoveredDate = null; // Clear the hover state
+    },
+    selectDate(dateString) {
+      this.selectedDate = dateString; // Set the selected date
+      this.hoveredDate = null; // Clear hover state
+      this.isCalendarVisible = false; // Hide calendar after selection
+
       this.$emit('date-selected', this.selectedDate); // Emit the selected date to the parent
-    }
-  }
+      this.$emit('update:initialDate', this.selectedDate); // Sync with the parent
+    },
+    prevMonth() {
+      if (this.currentMonth === 0) {
+        this.currentMonth = 11;
+        this.currentYear--;
+      } else {
+        this.currentMonth--;
+      }
+    },
+    nextMonth() {
+      if (this.currentMonth === 11) {
+        this.currentMonth = 0;
+        this.currentYear++;
+      } else {
+        this.currentMonth++;
+      }
+    },
+        incrementDate(dateString) {
+      const date = new Date(dateString);
+      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
+    },
+  },
+  watch: {
+    initialDate(newValue) {
+      this.selectedDate = newValue;
+      const date = new Date(newValue);
+      this.currentYear = date.getFullYear();
+      this.currentMonth = date.getMonth();
+    },
+  },
+  mounted() {
+    this.selectedDate = this.initialDate; // Set the initial selected date
+  },
 };
 </script>
 
 <style scoped>
-/* Add your styling here */
+.date-picker {
+  position: relative;
+}
+
+.date-input {
+  background-color: #1e1e1e;
+  color: #cfcfcf;
+  border: 1px solid #4a4a4a;
+  border-radius: 4px;
+  padding: 8px;
+  width: 90%;
+  cursor: text;
+}
+
+.calendar {
+  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%;
+  z-index: 1;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+}
+
+.calendar-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 1.0em;
+}
+
+.calendar-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 2px;
+}
+
+.day {
+  padding: 1px;
+  text-align: center;
+  cursor: pointer;
+  transition: background-color 0.3s;
+  min-height: 5%;
+}
+
+.day.hover {
+  background-color: rgba(0, 123, 255, 0.5);
+}
+
+.day.selected {
+  background-color: rgba(0, 86, 179, 0.7);
+}
 </style>
diff --git a/src/components/ListItems/ListElement.css b/src/components/ListItems/ListElement.css
index 5ba4ef1..12721ca 100644
--- a/src/components/ListItems/ListElement.css
+++ b/src/components/ListItems/ListElement.css
@@ -1,166 +1,168 @@
 .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;
-    word-break: break-all;
-  }
-  
-  .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
+  padding: 8px 16px;
+  background-color: #383444;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  width: 100%;
+}
+
+.dropdown {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+}
+
+.dropdown-content {
+  display: none;
+  position: absolute;
+  background-color:#383444;
+  width: 100%;
+  box-shadow: 0 -8px 16px 0 rgba(0, 0, 0, 0.2); /* Shadow adjusted upwards */
+  z-index: 1;
+  bottom: 100%; 
+  max-height: 200px; 
+  overflow-y: auto; 
+}
+
+.dropdown-content a {
+  color: white;
+  padding: 12px 16px;
+  text-decoration: none;
+  display: block;
+  font-size: 14px;
+}
+
+.dropdown-content a:hover {
+  background-color: #f1f1f1;
+}
+
+.dropdown:hover .dropdown-content {
+  display: block;
+}
+
+.text-cursor {
+  cursor: text;
+}
+
+.item-text:focus {
+  outline: none;
+}
+
+.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;
+  height:90vh;
+  width: 400px;
+  overflow:hidden;
+  color:white;
+  padding-left: 5px;
+  padding-right: 5px;
+}
+
+.add-button,
+.toggle-popup-button {
+  padding: 8px 16px;
+  background-color: #343541;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  margin-right: 8px;
+}
+
+.ListContainer {
+  display: flex;
+  flex-direction: column;
+  min-height: 50px;
+  max-height: 390px;
+  max-width: 400px;
+  overflow-y:auto;
+  flex:1;
+}
+
+.ListItem {
+  padding: 0;
+}
+
+.item-container {
+  display: flex;
+  align-items: center;
+}
+
+.item-text {
+  margin-left: 10px;
+  outline: none;
+  word-break: break-all;
+}
+
+.ListItem li {
+  position: relative;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
+.ListItem {
+  padding-left:20px;
+}
+
+.ListItem,
+.RemoveButtonContainer {
+  list-style-type: none;
+  padding: 0;
+}
+
+li {
+  list-style-type: none;
+  padding-right: 10px;
+}
+
+li:hover {
+  background-color: grey;
+  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 */
+  gap: 10px; /* Space between items */
+  margin-bottom: 10px; /* Space below the grid */
+}
+
+.title{
+  max-width: 200px;
+  font-size:25px;
+  text-decoration: underline;
+}
+
+.input-grid > * {
+  min-width: 0; /* Prevent overflow */
+}
+
diff --git a/src/components/ListItems/ListElement.vue b/src/components/ListItems/ListElement.vue
index e22c7e9..44c2af7 100644
--- a/src/components/ListItems/ListElement.vue
+++ b/src/components/ListItems/ListElement.vue
@@ -1,51 +1,65 @@
 <template>
+  <!-- Include Font Awesome CDN in your HTML -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+
   <div class="template-container">
-    <div :style="{ display: 'inline-block', flexDirection: 'row' }">
-      <h2 @blur="updateTitle" contenteditable="true" ref="titleInput" @keydown.enter.prevent="" spellcheck="false">
+    <div class="input-grid">
+      <div class='title' @blur="updateTitle" contenteditable="true" ref="titleInput" @keydown.enter.prevent=""
+        spellcheck="false">
         {{ title }}
-      </h2>
+      </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" />
-
+      <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" />
-      <!--Later: Recurring task checked = make ui and functions appear for making the list appear every day-->
-
+      <MinuteInput :initialMinutes="taskTimeEstimate" :key="taskTimeEstimate"
+        @time-selected="handleUpdateTimeEstimate" />
+      <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" />
       <button v-if="debugMode" @click="clearStorage">clearStorage</button>
     </div>
     <div>
-      <div class="input-container">
-        <button @click="removeItem" class="add-button">Remove</button>
-      </div>
-      <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)">
-            <span v-if="index === selectedItemIndex">✔️</span>
-            <CheckedBox label="" @checkbox-toggled="completeItem(index)" />
+            <CheckBoxOneWay label="" @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)"
-              @blur="updateItem(index, $event)" spellcheck="false">{{ item.textString }}</div>
+              spellcheck="false">{{ item.textString }}</div>
           </div>
         </li>
       </ul>
     </div>
+
     <div class="dropdown">
-      <button @click="toggleDropdown" class="dropbtn">Dropdown</button>
+      <button @click="toggleDropdown" @keydown.enter.prevent="toggleDropdown" class="dropbtn">Completed Tasks</button>
       <div v-if="isDropdownOpen" class="dropdown-content">
-        <a v-for="(option, index) in titlesArray" :key="index" @click="selectOption(option)">{{ option }}</a>
+        <a v-for="(item, index) in completedItemsArray" :key="index" @click="selectOption(index)">{{ item.textString
+          }}</a>
       </div>
     </div>
   </div>
 </template>
 
+
 <script>
+/* eslint-disable*/
+
 import DateInput from './DateInput.vue';
 import CheckedBox from './CheckBox.vue';
+import CheckBoxOneWay from './CheckboxOneWay.vue';
+import TimeInput from './TimeInput.vue';
+import MinuteInput from './MinuteInput.vue';
 import './ListElement.css';
 export default {
   name: 'ListElement',
@@ -61,39 +75,62 @@ export default {
       itemsArray: [],
       titlesArray: [],
       completedItemsArray: [],
+      recurringTasksArray: [],
       selectedItemIndex: 0,
       draggedIndex: null,
       isDropdownOpen: false,
-      debugMode: true,
+      debugMode: false,
 
       textString: '',
       dueDateCheckbox: false,
       dueDateDate: null,
       dueDateTime: null,
-      taskTimeEstimate: null,
+      timeEstimate: null,
       recurringTask: false,
       recurringTaskEndDate: null,
       addToCalendarCheckbox: false,
+      completedDateTime: null,
+      timeUntilComplete: null,
+
 
       defaultDueDateCheckbox: false,
       defaultDueDateDate: null,
       defaultDueDateTime: null,
-      defaultTaskTimeEstimate: null,
+      defaultTaskTimeEstimate: 0,
       defaultRecurringTask: false,
       defaultRecurringTaskEndDate: null,
-      defaultAddToCalendarCheckbox: false
+      defaultAddToCalendarCheckbox: false,
+      defaultCompletedDateTime: null,
     };
   },
   created() {
     // Call a method to load initial data
+    this.clearStorage();
     this.loadInitialData();
   },
   components: {
     DateInput,
-    CheckedBox
+    CheckedBox,
+    CheckBoxOneWay,
+    TimeInput,
+    MinuteInput,
   },
   computed: {
 
+  },
+  watch: {
+    initialMinutes(newValue) {
+      console.log("initialMinutes changed to: ", newValue); // Check if this is called
+      if (newValue > 0) {
+        handleUpdateTimeEstimate(newValue);
+      }
+    },
+    initialDate(newDate) {
+      handleDateChange(newDate); // Update the selected date when prop changes
+    },
+    initialDateTime(newDateTime) {
+      handleTimeChange(newDateTime); // Update the selected date when prop changes
+    },
   },
   methods: {
     loadInitialData() {
@@ -112,22 +149,50 @@ export default {
         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
+      // Ensure itemsArray has at least one valid item
+      if (!this.itemsArray || this.itemsArray.length === 0) {
+        this.itemsArray.push(this.createNewItem('')); // Initialize with an empty item
       }
     },
     handleDateChange(date) {
-      this.selectedDate = date; // Update the parent component's selectedDate
+      this.dueDateDate = date; // Update the parent component's selectedDate
+      this.itemsArray[this.selectedItemIndex].dueDateDate = date;
     },
     handleCheckboxToggled() {
       this.dueDateCheckbox = !this.dueDateCheckbox;
+      this.itemsArray[this.selectedItemIndex].dueDateCheckbox = this.dueDateCheckbox; // Update the checkbox state in the items array
     },
     handleRecurringTask() {
       this.recurringTask = !this.recurringTask;
+      this.itemsArray[this.selectedItemIndex].recurringTask = this.recurringTask; // Update the recurring task state in the items array
+    },
+
+    handleTimeChange(time) {
+      this.dueDateTime = time;
+      this.itemsArray[this.selectedItemIndex].dueDateTime = 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
+    },
+    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;
     },
     completeItem(index) {
-      //Adds item to the dropdownlist
+      if (this.itemsArray[index].textString != '') {
+        this.completedItemsArray.push(this.itemsArray[index]);
+      }
+      this.removeItemByIndex(index);
     },
     updateTitle() {
       this.saveList();//Save the current list items to the title before changing the title
@@ -153,6 +218,7 @@ export default {
     },
     saveList() {
       localStorage.setItem(this.title, JSON.stringify(this.itemsArray));
+      //localStorage.setItem(this.title) needs to retrieve previous items
     },
     saveTitlesArray() {
       localStorage.setItem('titlesArray', JSON.stringify(this.titlesArray));
@@ -161,16 +227,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: null,
+        taskTimeEstimate: 0, 
         recurringTask: false,
         recurringTaskEndDate: null,
         addToCalendarCheckbox: false,
-      }
+      };
     },
     createItemWithExistingValues(text) {
       return {
@@ -198,9 +265,6 @@ export default {
       this.itemsArray.splice(index, 0, draggedItem);
       this.draggedIndex = null;
       this.saveList();
-    },
-    selectCurrentIndex(index) {
-      this.selectedItemIndex = index;
     },/*
     populateCurrentValues(index) {
       this.textString = this.itemsArray.textString[index];
@@ -213,6 +277,10 @@ export default {
       this.addToCalendarCheckbox = this.itemsArray[index];
     },*/
     focusEditable(index, position = null) {
+     // if (this.selectedItemIndex != index) {
+     console.log('focusing on index:' + index);
+        this.swapItemValues(index);
+   //   }
       this.selectedItemIndex = index;
       this.$nextTick(() => {
         const element = this.$refs.itemSpan[index];
@@ -220,10 +288,7 @@ export default {
           element.focus();
           if (position !== null) {
             this.setCaretPosition(element, position);
-          }/* else {
-            // Ensure the caret is placed at the end if position is not specified
-            this.setCaretPosition(element, element.innerText.length);
-          }*/
+          }
         }
       });
     },
@@ -240,15 +305,15 @@ export default {
 
       this.$nextTick(() => {
         this.focusEditable(index + 1, 0);
+        console.log('focusing from enter');
       });
-
       this.saveList();
     },
     handleBackspace(index, event) {
       if (window.getSelection().anchorOffset === 0 && index > 0) {
 
         const currentText = event.target.innerText;
-        const previousText = this.itemsArray[index - 1];
+        const previousText = this.itemsArray[index - 1].textString;
         const newText = previousText + currentText;
 
         this.itemsArray.splice(index - 1, 1, this.createItemWithExistingValues(newText));
@@ -269,6 +334,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);
@@ -281,12 +347,14 @@ 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);
@@ -298,19 +366,16 @@ 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');
       }
     },
-    updateItem(index, event) {
-      this.itemsArray.splice(index, 1, this.createNewItem(event.target.innerText));
-      this.saveList();
-    },
     removeItem() {
       this.itemsArray.splice(this.selectedItemIndex, 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
+        this.itemsArray.push(this.createNewItem('')); // Add an empty item as a base case
       }
 
       // Check if the array is not empty and the index is valid before focusing
@@ -318,9 +383,33 @@ 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');
+        });
+      }
+    },
+    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;
+        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
+        }
       }
     },
+
     setCaretPosition(element, position) {
       const range = document.createRange();
       const sel = window.getSelection();
@@ -346,10 +435,10 @@ export default {
     toggleDropdown() {
       this.isDropdownOpen = !this.isDropdownOpen;
     },
-    selectOption(option) {
-      // Do something with the selected option
-      console.log('Selected option:', option);
-      this.isDropdownOpen = false; // Close the dropdown after selecting an option
+    selectOption(index) {
+      this.itemsArray.push(this.completedItemsArray[index]);
+      this.completedItemsArray.splice(index, 1);
+      this.saveList();
     }
   }
 }
diff --git a/src/components/ListItems/MinuteInput.vue b/src/components/ListItems/MinuteInput.vue
new file mode 100644
index 0000000..c37a43e
--- /dev/null
+++ b/src/components/ListItems/MinuteInput.vue
@@ -0,0 +1,110 @@
+<template>
+  <div class="minute-input">
+    <input
+      type="text"
+      v-model="minutes"
+      @input="validateInput"
+      @keypress="restrictToNumbers"
+      @focus="showTooltip"
+      @blur="hideTooltip"
+      class="minute-input-field"
+      placeholder="Minute Estimate"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    initialMinutes: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      minutes: this.initialMinutes, // Holds the minute value
+      tooltipVisible: false, // Controls tooltip visibility
+    };
+  },
+  methods: {
+    // Method to ensure input contains only valid numbers
+    validateInput() {
+      // Ensure that only valid numbers are input
+      const num = Number(this.minutes);
+      
+      // If the input is not a valid number or is less than or equal to 0, reset it
+      if (isNaN(num) || num <= 0) {
+        this.minutes = ''; // Reset to empty if invalid
+      } else {
+        this.minutes = num; // Set valid number as minutes
+      }
+      this.$emit('time-selected', this.minutes); // Emit the selected minutes to the parent component
+    },
+    
+    // Restrict input to numbers only in real-time
+    restrictToNumbers(event) {
+      const key = event.key;
+      // Allow only numeric characters and prevent any others from being typed
+      if (!/[0-9]/.test(key)) {
+        event.preventDefault();
+      }
+    },
+    
+    // Tooltip visibility management
+    showTooltip() {
+      if (this.minutes <= 0) {
+        this.tooltipVisible = true;
+      }
+    },
+    hideTooltip() {
+      this.tooltipVisible = false;
+    },
+  },
+  watch: {
+    // Update minutes if the parent passes a new initialMinutes value
+    initialMinutes(newValue) {
+      if (newValue > 0) {
+        this.minutes = newValue;
+      }
+    },
+  },
+  mounted() {
+    // Emit the initial value when the component is mounted
+    this.$emit('time-selected', this.minutes);
+  },
+};
+</script>
+
+<style scoped>
+.minute-input {
+  position: relative;
+}
+
+.minute-input-field {
+  background-color: #1e1e1e;
+  color: #cfcfcf;
+  border: 1px solid #4a4a4a;
+  border-radius: 4px;
+  padding: 8px;
+  width: 90%;
+  cursor: text;
+  -moz-appearance: textfield; /* Remove number input styling */
+}
+
+.minute-input-field::-webkit-inner-spin-button,
+.minute-input-field::-webkit-outer-spin-button {
+  display: none; /* Hide the spin buttons in Chrome */
+}
+
+.tooltip {
+  position: absolute;
+  top: 40px; /* Adjust based on layout */
+  left: 0;
+  background-color: #ffcc00;
+  color: #000;
+  padding: 5px;
+  border-radius: 4px;
+  z-index: 10;
+}
+</style>
diff --git a/src/components/ListItems/TimeInput.vue b/src/components/ListItems/TimeInput.vue
new file mode 100644
index 0000000..aaf21d2
--- /dev/null
+++ b/src/components/ListItems/TimeInput.vue
@@ -0,0 +1,194 @@
+<template>
+  <div class="time-picker">
+    <input
+      type="text"
+      v-model="formattedTime"
+      @focus="showDropdown"
+      @click="showDropdown"
+      @input="onInputChange"
+      @blur="handleBlur"
+      @keydown.down.prevent="navigateDown"
+      @keydown.up.prevent="navigateUp"
+      @keydown.enter.prevent="selectCurrentTime"
+      class="time-input"
+      ref="timeInput"
+    />
+    <div v-if="isDropdownVisible" class="time-dropdown">
+      <div
+        v-for="(time, index) in selectableTimes"
+        :key="time"
+        class="time-option"
+        :class="{ selected: time === selectedTime, highlighted: index === highlightedIndex }"
+        @click="selectTime(time)"
+        @mousedown.prevent
+        @mouseover="highlightedIndex = index"
+      >
+        {{ time }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    initialTime: {
+      type: String,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      isDropdownVisible: false,
+      selectedTime: this.initialTime || this.getNearestTime(),
+      formattedTime: '',
+      highlightedIndex: 0, // Track the currently highlighted index
+    };
+  },
+  computed: {
+    selectableTimes() {
+      const times = [];
+      for (let i = 0; i < 24; i++) {
+        for (let j = 0; j < 60; j += 30) {
+          const hour = i === 0 ? 12 : i > 12 ? i - 12 : i; // Format 24-hour to 12-hour
+          const period = i < 12 ? 'am' : 'pm';
+          const formattedTime = `${hour}:${String(j).padStart(2, '0')}${period}`;
+          times.push(formattedTime);
+        }
+      }
+      return times.filter(time => this.isFutureTime(time));
+    },
+  },
+  methods: {
+    getNearestTime() {
+      const now = new Date();
+      const nearestTime = new Date(now.getFullYear(), now.getMonth(), now.getDate(), now.getHours(), Math.ceil(now.getMinutes() / 30) * 30);
+      return this.formatTime(nearestTime);
+    },
+    formatTime(date) {
+      const hours = date.getHours();
+      const minutes = date.getMinutes();
+      const period = hours < 12 ? 'am' : 'pm';
+      const formattedHour = hours % 12 === 0 ? 12 : hours % 12;
+      return `${formattedHour}:${String(minutes).padStart(2, '0')}${period}`;
+    },
+    isFutureTime(time) {
+      const [hour, minutePart] = time.split(':');
+      const minute = parseInt(minutePart);
+      const period = minutePart.slice(-2);
+      const formattedHour = period === 'am' ? (hour === '12' ? 0 : parseInt(hour)) : (hour === '12' ? 12 : parseInt(hour) + 12);
+      
+      const now = new Date();
+      return new Date(now.getFullYear(), now.getMonth(), now.getDate(), formattedHour, minute) > now;
+    },
+    showDropdown() {
+      this.isDropdownVisible = true;
+      this.highlightedIndex = this.selectableTimes.findIndex(time => time === this.selectedTime);
+      this.$nextTick(() => {
+        const dropdown = this.$el.querySelector('.time-dropdown');
+        if (dropdown) {
+          dropdown.scrollTop = this.highlightedIndex * dropdown.children[0].offsetHeight; // Scroll to the highlighted index
+        }
+      });
+    },
+    onInputChange(event) {
+      this.formattedTime = event.target.value; // Allow user to type a time
+    },
+    handleBlur() {
+      if (this.isValidTime(this.formattedTime)) {
+        this.selectedTime = this.formattedTime; // Update selected time if valid
+      } else {
+        this.formattedTime = this.selectedTime; // Revert to last valid time
+      }
+      this.isDropdownVisible = false; // Hide dropdown on blur
+      this.$emit('time-selected', this.selectedTime); // Emit the selected time
+    },
+    isValidTime(timeString) {
+      const timeRegex = /^(0?[1-9]|1[0-2]):([0-5][0-9])(am|pm)$/; // Regex for validating time format
+      return timeRegex.test(timeString);
+    },
+    selectTime(time) {
+      this.selectedTime = time; // Set the selected time
+      this.formattedTime = time; // Update input with selected time
+      this.isDropdownVisible = false; // Hide dropdown after selection
+      this.$emit('time-selected', this.selectedTime); // Emit the selected time
+      this.$nextTick(() => {
+        this.$refs.timeInput.focus(); // Refocus the input after selection
+      });
+    },
+    navigateDown() {
+      if (this.highlightedIndex < this.selectableTimes.length - 1) {
+        this.highlightedIndex++;
+      }
+    },
+    navigateUp() {
+      if (this.highlightedIndex > 0) {
+        this.highlightedIndex--;
+      }
+    },
+    selectCurrentTime() {
+      const time = this.selectableTimes[this.highlightedIndex];
+      if (time) {
+        this.selectTime(time);
+      }
+    },
+  },
+  watch: {
+    initialTime(newTime) {
+      if (this.isValidTime(newTime)) {
+        this.selectedTime = newTime;
+        this.formattedTime = newTime;
+      }
+    },
+  },
+  mounted() {
+    this.formattedTime = this.selectedTime; // Initialize with the nearest valid time
+  },
+};
+</script>
+
+<style scoped>
+.time-picker {
+  position: relative;
+}
+
+.time-input {
+  background-color: #1e1e1e;
+  color: #cfcfcf;
+  border: 1px solid #4a4a4a;
+  border-radius: 4px;
+  padding: 8px;
+  width: 90%;
+  cursor: text;
+}
+
+.time-dropdown {
+  position: absolute;
+  top: 40px; /* Adjust based on your layout */
+  left: 0;
+  background-color: #2b2b2b;
+  border: 1px solid #4a4a4a;
+  border-radius: 4px;
+  max-height: 150px;
+  overflow-y: auto;
+  z-index: 10;
+}
+
+.time-option {
+  padding: 10px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.time-option:hover {
+  background-color: #007bff; /* Change color on hover */
+}
+
+.time-option.selected {
+  background-color: #0056b3; /* Change color for selected time */
+}
+
+.time-option.highlighted {
+  background-color: #0056b3; /* Highlight the currently selected option */
+}
+</style>
diff --git a/src/components/ListItems/popup.js b/src/components/ListItems/popup.js
deleted file mode 100644
index e69de29..0000000
diff --git a/src/components/Login.vue b/src/components/Login.vue
index 26bc50e..84680d6 100644
--- a/src/components/Login.vue
+++ b/src/components/Login.vue
@@ -10,7 +10,7 @@
           <input v-model="password" name="password" type="password" />
           <button>Login</button>
         </form>
-        <a class="button google" href="/login/federated/google">Sign in with Google</a>
+      
         <button @click="redirectToSignUp()">Sign up</button>
       </div>
     </div>
diff --git a/src/components/SidebarComponents/SideBar.vue b/src/components/SidebarComponents/SideBar.vue
index 37fef6c..9459e65 100644
--- a/src/components/SidebarComponents/SideBar.vue
+++ b/src/components/SidebarComponents/SideBar.vue
@@ -25,11 +25,11 @@ export default {
   name: 'SideBar',
   setup() {
     const routes = [
-      { path: '/Dashboard', label: 'Dashboard' },
+      { path: '/', label: 'Dashboard' },
       { path: '/Lists', label: 'Lists' },
       { path: '/Learn', label: 'Learn' },
       { path: '/Type', label: 'Type' },
-      { path: '/', label: 'About Me' },
+      { path: '/About-me', label: 'About Me' },
       { path: '/Settings', label: 'Settings' },
       { path: '/Login', label: 'Login' },
     ];
diff --git a/src/router/index.js b/src/router/index.js
index c23abd9..1026f7e 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -10,7 +10,7 @@ import SignUp from '../views/SignUp.vue'
 
 const routes = [
   {
-    path: '/dashboard',
+    path: '/',
     name: 'dashboard',
     component: DashboardWorld
   },
@@ -25,7 +25,7 @@ const routes = [
     component: SettingsWorld
   },
   {
-    path: '/',
+    path: '/About-me',
     name: 'About Me',
     component: AboutMe
   },
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index 5a01377..734f974 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -5,16 +5,16 @@
       <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" />
+        <ListElement list-name="Daily List" selectedItem=""/>
         <ListElement list-name="All Tasks" />
       </div>
+      <div class="calendarTemp">Insert Daily Calendar Here</div>
     </div>
-    <div class="calendarTemp">Insert Daily Calendar Here</div>
   </div>
 </template>
 
@@ -40,7 +40,7 @@ export default {
   grid-row: 1;
   display: flex;
   flex-direction: row;
-  flex-grow: 1;
+  height:10vh;
 }
 
 .button-container {
@@ -63,22 +63,9 @@ export default {
 
 .page-container {
   display: flex;
-  padding-top: 10px;
   flex-direction: row;
   padding-left: 10px;
-}
-
-.listContainer {
-  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;
+  height:90vh;
 }
 
 .innerListContainer {}
@@ -92,7 +79,6 @@ export default {
 }
 
 .calendarTemp {
-  grid-row: 2;
   border-radius: 10px;
   border-color: white;
   border-style: solid;
diff --git a/src/views/Learn.vue b/src/views/Learn.vue
index 10e6de1..b7dc561 100644
--- a/src/views/Learn.vue
+++ b/src/views/Learn.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="learn">
-      <h1>Haha quizlet learn</h1>
+      <h1>Under construction Learn</h1>
     </div>
 
   </div>
diff --git a/src/views/Lists.vue b/src/views/Lists.vue
index 726f107..5013b4b 100644
--- a/src/views/Lists.vue
+++ b/src/views/Lists.vue
@@ -1,5 +1,6 @@
 <template>
   <div>
+    <H1>Under construction Lists Page</H1>
     <ul>
       <li v-for="list in lists" :key="list.id">{{ list.name }}</li>
     </ul>
diff --git a/src/views/Settings.vue b/src/views/Settings.vue
index 7fa954a..f7e2dfb 100644
--- a/src/views/Settings.vue
+++ b/src/views/Settings.vue
@@ -33,8 +33,45 @@
     <colorPicker />
     
   </template>
+
+  
   
   <script>
+
+  /*
+<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 />
+  */
  import colorPicker from '@/components/SettingsComponents/ColorPicker.vue';
   
   export default {
diff --git a/src/views/SignUp.vue b/src/views/SignUp.vue
index 3398714..0c24640 100644
--- a/src/views/SignUp.vue
+++ b/src/views/SignUp.vue
@@ -55,18 +55,14 @@ export default {
 </script>
 
 <style scoped>
-/* Add your styles here */
 .signup-container {
-    /* Your CSS styling */
 }
 
 button {
-    /* Your button styling */
 }
 
 .message {
     margin-top: 10px;
     color: green;
-    /* Add any additional styling for your message */
 }
 </style>
\ No newline at end of file
diff --git a/src/views/Type.vue b/src/views/Type.vue
index b0033e5..fbd9a83 100644
--- a/src/views/Type.vue
+++ b/src/views/Type.vue
@@ -1,4 +1,5 @@
 <template>
+  <H1>Under construction Type</H1>
   <div class="Type">
     <div class="quote">
       <span v-for="(word, index) in words" :key="index" :class="{ 'highlighted': index === currentIndex }">