diff --git a/src/EclipseTimer.vue b/src/EclipseTimer.vue
index 60d5943..48884d6 100644
--- a/src/EclipseTimer.vue
+++ b/src/EclipseTimer.vue
@@ -1,13 +1,36 @@
 <template>
   <div id="eclipse-timer-container" class="info-overlay-container">
-    <h1> Eclipse Timer</h1>
+    <h1>Eclipse Timer</h1>
     <div v-if="showTimer" class="eclipse-countdown">
-      <div class="ec-timer">{{ timeToEclipse }}</div>
+      <div v-if="!noEclipse" class="ec-timer">{{ timeToShow }}</div>
       <div v-if="!noEclipse">
-        until max eclipse {{ location !== '' ? 'at ' + location : '' }}
+        {{ timeText }} {{ location !== '' ? 'at ' + location : '' }}
       </div>
     </div>
-    
+<!--     
+    print out the time conditions as a table
+    <table>
+      <tr>
+        <td>Before Max:</td>
+        <td>{{ beforeMax() }}</td>
+      </tr>
+      <tr>
+        <td>After Max:</td>
+        <td>{{ afterMax() }}</td>
+      </tr>
+      <tr>
+        <td>Before End Partial:</td>
+        <td>{{ beforeEndPartial() }}</td>
+      </tr>
+      <tr>
+        <td>Before Totality:</td>
+        <td>{{ beforeTotality() }}</td>
+      </tr>
+      <tr>
+        <td>In Totality:</td>
+        <td>{{ inTotality() }}</td>
+      </tr>
+    </table> -->
 
     <div v-if="noEclipse">
       <p>No eclipse is predicted for this location.</p>
@@ -134,12 +157,13 @@ export default defineComponent({
   },
   
   mounted() {
-    this.getTimeToEclipse();
-    setInterval(this.getTimeToEclipse, 1000);
+    this.updateTimeData();
+    
+    setInterval(() => {
+      this.updateTimeData();
+    }, 1000);
   },
   
-  
-  
   data() {
     return {
       pred: this.prediction,
@@ -153,6 +177,11 @@ export default defineComponent({
       // coverage: this.prediction.coverage[0],
       // duration: this.prediction.duration,
       timeToEclipse: '',
+      timeToEndPartial: '',
+      timeToEndTotality: '',
+      timeToStartTotality: '',
+      timeText: '',
+      timeToShow: '',
     };
   },
   
@@ -178,7 +207,7 @@ export default defineComponent({
     isTotal(): boolean {
       return this.prediction.type === 'T';
     },
-    
+
     timeString(): (date: Date | null) => string {
       return (date: Date | null) => {
         if (date === null) return '';
@@ -224,11 +253,66 @@ export default defineComponent({
     
     totalityDuration(): string {
       return spaceHMS(this.prediction.duration);
-    }
+    },
+    
+
     
   },
   
   methods: {
+    
+    beforeMax(): boolean {
+      if (this.type === '') return false;
+      if (this.maxTime[0] === null) return false;
+      return Date.now() <= this.maxTime[0].getTime();
+    },  
+    
+    afterMax(): boolean {
+      if (this.type === '') return false;
+      if (this.maxTime[0] === null) return false;
+      return Date.now() > this.maxTime[0].getTime();
+    },
+    
+    beforeEndPartial(): boolean {
+      if (this.type === '') return false;
+      if (this.partialEnd[0] === null) return false;
+      return Date.now() <= this.partialEnd[0].getTime();
+    },
+
+    afterEndPartial(): boolean {
+      if (this.type === '') return false;
+      if (this.partialEnd[0] === null) return false;
+      return Date.now() > this.partialEnd[0].getTime();
+    },
+    
+    beforeTotality(): boolean {
+      if (this.type !== 'Total') return false;
+      if (this.centralStart[0] === null) return false;
+      return Date.now() < this.centralStart[0].getTime();
+    },
+    
+    inTotality(): boolean {
+      if (this.type !== 'Total') return false;
+      if (this.centralStart[0] === null || this.centralEnd[0] === null) return false;
+      const now = Date.now();
+      return now >= this.centralStart[0].getTime() &&
+             now <= this.centralEnd[0].getTime();
+    },
+
+    afterTotality(): boolean {
+      if (this.type !== 'Total') return false;
+      if (this.centralEnd[0] === null) return false;
+      return Date.now() > this.centralEnd[0].getTime();
+    },
+    
+    updateTimeConditions() {
+      this.beforeMax();
+      this.afterMax();
+      this.beforeEndPartial();
+      this.beforeTotality();
+      this.inTotality();
+    },
+    
     toUtcString(date: Date | null): string {
       if (date === null) return '';
       try {
@@ -258,21 +342,99 @@ export default defineComponent({
       if (c === 'b') return [t, 'Below Horizon'];
       return [t, ''];
     },
+    
+    msToTime(ms: number) {
+      const days = Math.floor(ms / dayInMs);
+      const hours = Math.floor((ms % dayInMs) / hourInMs);
+      const minutes = Math.floor((ms % hourInMs) / minuteInMs);
+      const seconds = Math.floor((ms % minuteInMs) / secondInMs);
+      return `${days} days ${hours}h ${minutes}m ${seconds}s`;
+    },
       
     getTimeToEclipse() {
-      const now = new Date();
       if (this.type === '') return '';
       if (this.maxTime[0] === null) return '';
-      const timeToEclipse = this.maxTime[0].getTime() - now.getTime();
+      const timeToEclipse = this.maxTime[0].getTime() - Date.now();
+      this.timeToEclipse = this.msToTime(timeToEclipse);
+    },
+    
+    getTimeToStartTotality() {
+      if (this.type !== 'Total') return '';
+      if (this.centralStart[0] === null) return '';
+      const timeToStart = this.centralStart[0].getTime() - Date.now();
+      this.timeToStartTotality = this.msToTime(timeToStart);
+    },
+    
+    getTimeToEndTotality() {
+      if (this.type === '') return '';
+      if (this.centralEnd[0] === null) return '';
+      const timeToEnd = this.centralEnd[0].getTime() - Date.now();
       
-      const days = Math.floor(timeToEclipse / dayInMs);
-      const hours = Math.floor((timeToEclipse % dayInMs) / hourInMs);
-      const minutes = Math.floor((timeToEclipse % hourInMs) / minuteInMs);
-      const seconds = Math.floor((timeToEclipse % minuteInMs) / secondInMs);
+      const minutes = Math.floor((timeToEnd % hourInMs) / minuteInMs);
+      const seconds = Math.floor((timeToEnd % minuteInMs) / secondInMs);
+      this.timeToEndTotality = `${minutes}m ${seconds}s`;
+    },
+    
+    // get time left until end of eclipse (end of parital)
+    getTimeToEndPartial() {
+      if (this.type === '') return '';
+      if (this.partialEnd[0] === null) return '';
+      const timeToEnd = this.partialEnd[0].getTime() - Date.now();
       
-      this.timeToEclipse = `${days} days ${hours}h ${minutes}m ${seconds}s`;
+      const hours = Math.floor((timeToEnd % dayInMs) / hourInMs);
+      const minutes = Math.floor((timeToEnd % hourInMs) / minuteInMs);
+      const seconds = Math.floor((timeToEnd % minuteInMs) / secondInMs);
+      this.timeToEndPartial = `${hours}h ${minutes}m ${seconds}s`;
+    },
+    
+    getTimeText(): string {
+      if (this.type === '') return '';
+      if (this.type === 'Total' && this.beforeTotality()) {
+        return 'until totality';
+      } else if (this.inTotality()) {
+        return 'until end of totality';
+      } else if (!this.isTotal && this.beforeMax()) {
+        return 'until max eclipse';
+      } else if ((this.afterMax() && this.beforeEndPartial()) || (this.afterTotality() && !this.afterEndPartial())) {
+        return 'until end of partial eclipse';
+      } else {
+        return '';
+      }
+    },
+
+    getTimeToShow(): string {
+      // before totality or before max
+      if (this.type === 'Total' && this.beforeTotality()) {
+        return this.timeToStartTotality;
+      }  else if (this.inTotality()) {
+        return this.timeToEndTotality;
+      } else if (!this.isTotal && this.beforeMax()) {
+        return this.timeToEclipse;
+      } else if ((this.afterMax() && this.beforeEndPartial()) || (this.afterTotality() && !this.afterEndPartial())) {
+        return this.timeToEndPartial;
+      } else {
+        return 'The Eclipse has passed';
+      }
+    },
+    
+    updateTime() {
+      this.getTimeToEclipse();
+      this.getTimeToStartTotality();
+      this.getTimeToEndTotality();
+      this.getTimeToEndPartial();
+    },
+
+    updateTimeData() {
+      if (this.showTimer) {
+        this.updateTimeConditions();
+        this.updateTime();
+        this.timeText = this.getTimeText();
+        this.timeToShow = this.getTimeToShow();
+      }
     }
-  }
+  },
+  
+  
   
   
 });
@@ -383,4 +545,4 @@ label {
   
 }
 
-</style>
\ No newline at end of file
+</style>