diff --git a/public/pause.svg b/public/pause.svg
new file mode 100644
index 0000000..38302a0
--- /dev/null
+++ b/public/pause.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" version="1.1" width="512" height="512" x="0" y="0" viewBox="0 0 511.448 511.448" style="enable-background:new 0 0 512 512" xml:space="preserve" class=""><g><path xmlns="http://www.w3.org/2000/svg" d="m436.507 74.94c-99.913-99.913-261.64-99.927-361.567 0-99.913 99.913-99.927 261.64 0 361.567 99.913 99.913 261.639 99.928 361.567 0 99.914-99.911 99.93-261.639 0-361.567zm-189.224 197.361-96 74.667c-13.642 10.609-33.893.986-33.893-16.577v-149.333c0-17.441 20.117-27.29 33.893-16.577l96 74.667c10.809 8.407 10.795 24.756 0 33.153zm82.774 58.09c0 11.598-9.402 21-21 21s-21-9.402-21-21v-149.333c0-11.598 9.402-21 21-21s21 9.402 21 21zm74.667 0c0 11.598-9.402 21-21 21s-21-9.402-21-21v-149.333c0-11.598 9.402-21 21-21s21 9.402 21 21z" fill="#993299" data-original="#000000" style="" class=""/></g></svg>
diff --git a/src/timer/Timer.svelte b/src/timer/Timer.svelte
index d1cf945..ef9f6e0 100644
--- a/src/timer/Timer.svelte
+++ b/src/timer/Timer.svelte
@@ -1,10 +1,11 @@
+
 <script>
   'use strict';
   import { onMount } from 'svelte';
   import {
+    newDriverNotification,
     sendDriverNotification,
     sendNotification,
-    newDriverNotification,
 } from '../utils/notification.js';
   import {
     minsToMillis,
@@ -15,14 +16,21 @@
     initWebsocket,
     closeWs,
 }from '../utils/websocket.js';
-  import { updateSession } from '../utils/handleSession.js';
+  import {
+    updateSession,
+    pauseSession,
+    unpauseSession,
+} from '../utils/handleSession.js';
   import TimerSVG from './TimerSVG.svelte';
-
+  import { calculateRemainingTime } from '../utils/timer-utils.js';
+  
+  const notifySound = new Audio('/deduction.mp3');
   const MAX_DURATION_LIMIT = minsToMillis(120);
   const TIMER_REFRESH_RATE_MS = 50;
   const TIMES_UP_LIMIT_MS = TIMER_REFRESH_RATE_MS * 2;
+  let intervals = [];
+
   // sound needs to stored in var here so they can be accessed when the tab is inactive
-  const notifySound = new Audio('/deduction.mp3');
   const newDriverSound = new Audio('/open-ended.mp3');
 
   export let sessionData = {};
@@ -31,9 +39,9 @@
   export let message = '';
   let ws;
   const uuid = sessionStorage.getItem('uuid');
-  let intervals = [ ];
   let displayTime = 'Start the timer';
   let updatedDuration;
+  let pause = false;
 
   /**
    * Process received WebSocket messages
@@ -42,17 +50,43 @@
    * @param {object} event - incoming message
     */
   async function wsOnMessageOverwrite (event) {
+    console.log({ event });
     showReset = false;
-    clearTimer();
+    //clearTimer();
     try {
-      sessionData = JSON.parse(event.data);
-      if (sessionData.CurrentDriver.UUID === uuid) {
-        newDriverNotification(newDriverSound);
-        message = 'You are the driver!';
-      } else {
-        message = '';
+      const dataReceived = JSON.parse(event.data);
+      if (dataReceived.CurrentDriver){
+        sessionData = dataReceived;
+        // endTime = sessionData.EndTime;
+        if (sessionData.CurrentDriver.UUID === uuid) {
+          newDriverNotification(newDriverSound);
+          message = 'You are the driver!';
+        } else {
+          message = '';
+        }
+        await calculateRemainingTime(sessionData);
+      } else if (dataReceived.PauseTime){
+        sessionData = {
+          ...sessionData,
+          ...dataReceived,
+        };
+        console.log('PAUSED', sessionData);
+      } else if (dataReceived.UnpauseTime){
+        pause = false;
+        startTimer(
+          sessionData.Duration - (dataReceived.UnpauseTime - sessionData.StartTime),
+          sessionData.EndTime);
+        sessionData = {
+          ...sessionData,
+          StartTime: sessionData.StartTime + (dataReceived.UnpauseTime - sessionData.StartTime),
+          EndTime: sessionData.EndTime + (dataReceived.UnpauseTime - sessionData.PauseTime),
+          ...dataReceived,
+        };
+        console.log('RESUME', sessionData);
+        console.log(
+          'RESUME2',
+          sessionData.StartTime + (dataReceived.UnpauseTime - sessionData.StartTime));
       }
-      await calculateRemainingTime(sessionData);
     } catch (e) {
       console.log('message received but event.data could not be parsed', e);
     }
@@ -72,7 +106,7 @@
     if (!sessionData.newTimer) {
       calculateRemainingTime(sessionData);
     } else {
-      startTimer(sessionData.Duration);
+      startTimer(sessionData.Duration, sessionData.EndTime);
       try {
         await navigator.clipboard.writeText(
           `https://pairprogrammingtimer.com/${sessionData.SessionID}`);
@@ -84,80 +118,63 @@
     return () => closeWs(ws);
   });
 
+  
   /**
-   * Calculate and display remaining time MS
-   * for a pre-existing session
-   *
-   * @param {object} existingSessionData
-   */
-  function calculateRemainingTime(existingSessionData) {
-    const endTime = existingSessionData.EndTime;
-    const remainingTimeMillis = endTime - Date.now();
-    displayRemainingTime(remainingTimeMillis);
-  }
-
-  /**
-   * Start and display the timer
-   * when a new session is created
-   *
-   * @param {number} duration - MS
-   */
-  function startTimer(duration) {
-    displayRemainingTime(duration);
-  }
+ * Start and display the timer
+ * when a new session is created
+ *
+ * @param {number} duration - MS
+ */
+export function startTimer(duration, endtime) {
+    return display(duration, endtime);
+}
 
-  /**
-   * @param {number} remainingTime - MS
-   */
-  function displayRemainingTime(remainingTime) {
-    display(remainingTime);
-  }
-
-  /**
-   * Continously refresh the timer display
-   * for the duration of the timer
-   *
-   * @param {number} remainingTimeMillis
-   */
-  function display(remainingTimeMillis) {
+/**
+ * Continously refresh the timer display
+ * for the duration of the timer, unless timer is paused
+ *
+ * @param {number} remainingTimeMillis
+ * @param {number} endtime
+ */
+function display(remainingTimeMillis, endTime) {
     if (isNaN(remainingTimeMillis)) {
-      return displayTime = remainingTimeMillis;
+      return remainingTimeMillis;
     } else {
       const currentInterval = setInterval(() => {
         if (!isNaN(remainingTimeMillis)) {
-          remainingTimeMillis = updateTime(sessionData.EndTime - Date.now());
+          remainingTimeMillis = updateTime(endTime - Date.now());
+          displayTime = millisToMinutesAndSeconds(remainingTimeMillis);
         }
       }, TIMER_REFRESH_RATE_MS);
       intervals.push(currentInterval);
     }
   }
 
-  /**
-   * Handle updating the timer and indicate when time's up
-   *
-   * @param {number} remainingTimeMillis
-   * @return {void | remainingTimeMillis}
-   */
-  function updateTime(remainingTimeMillis) {
+/**
+ * Handle updating the timer and indicate when time's up
+ *
+ * @param {number} remainingTimeMillis
+ * @return {void | remainingTimeMillis}
+ */
+function updateTime(remainingTimeMillis) {
     if (remainingTimeMillis <= TIMES_UP_LIMIT_MS) {
       clearTimer();
-      timesUp();
+      displayTime = timesUp(uuid, sessionData);
     } else {
-      displayTime = millisToMinutesAndSeconds(remainingTimeMillis);
       return remainingTimeMillis;
     }
-  }
+}
 
-  /**
-   * Handle when the timer has finished:
-   * update the server with session data,
-   * show relevant notification
-   */
-  function timesUp() {
+/**
+ * Handle when the timer has finished:
+ * update the server with session data,
+ * show relevant notification
+ */
+function timesUp() {
     displayTime = 'Time\'s up!';
     if (
       'CurrentDriver' in sessionData &&
-      'UUID' in sessionData.CurrentDriver
+    'UUID' in sessionData.CurrentDriver
     ) {
       if (uuid === sessionData.CurrentDriver.UUID && !(Number.isInteger(displayTime))) {
         showReset = true;
@@ -170,16 +187,46 @@
         sendNotification(notifySound);
       }
     }
-  }
+}
 
   /**
    * Clear the set Intervals responsible for displaying the timer
    */
-  function clearTimer() {
+  export function clearTimer() {
     intervals.forEach(interval => clearInterval(interval));
     intervals = [  ];
+    console.log('clearing');
   }
 
+/**
+ *
+ * Handle pause button, starts a new pause timer for duration of pause
+ */
+function handlePause(pausedState) {
+    if (pausedState === true) {
+      clearTimer();
+      unpauseSession(sessionData.SessionID, Date.now());
+      pause = false;
+      return;
+    }
+    clearTimer();
+    pause = true;
+    // need remaining millis seconds and an interval to keep track of \
+    // it and assign it to StartTime
+    const currentInterval = setInterval(() => {
+      // const remainingTimeMillis = sessionData.EndTime + Date.now();
+      sessionData.EndTime += TIMER_REFRESH_RATE_MS;
+      sessionData.StartTime += TIMER_REFRESH_RATE_MS;
+      //displayTime = millisToMinutesAndSeconds(remainingTimeMillis)
+    }, TIMER_REFRESH_RATE_MS);
+    intervals.push(currentInterval);
+    // http POST to server
+    pauseSession(sessionData.SessionID, Date.now());
+    return;
+}
+
+
+
   /**
    * handle updates to the session duration
    * @param {object} e - event
@@ -198,13 +245,15 @@
 </script>
 <TimerSVG
   duration={sessionData.Duration}
-  startTimestamp={sessionData.StartTime}
-  displayTime={displayTime}
+  bind:startTimestamp={sessionData.StartTime}
+  bind:displayTime
   degrees={360 / sessionData.Duration}
+  bind:pause
 />
 
-{#if showReset}
+
 <div class="reset-container">
+  {#if showReset}
   <input
   type="number"
   min="0"
@@ -217,8 +266,12 @@
   <button class="reset-button" on:click={() => updateSession(sessionData)}>
     <img class="reset-img" data-testid="reset-svg" src="/reset-timer.svg" alt="reset the timer" />
   </button>
-</div>
+  {:else}
+  <button class="pause-button" on:click={() => handlePause(pause)}>
+    <img class="pause-img" data-testid="pause-svg" src="/pause.svg" alt="pause button"/>
+  </button>
 {/if}
+</div>
 
 
 <style>
@@ -232,7 +285,7 @@
     height: 50%;
     justify-content: center;
     align-items: center;
-  
+    width: 20vw;
   }
 
   .reset-input {
@@ -247,7 +300,7 @@
     border-bottom: solid #993299;
   }
 
-  .reset-button {
+  .reset-button, .pause-button {
     background-color: Transparent;
     background-repeat:no-repeat;
     border: none;
@@ -257,7 +310,7 @@
     border-radius: 50%;
   }
 
-  .reset-img {
+  .reset-img, .pause-img {
     position: absolute;
     top: 70%;
     left: 50%;
diff --git a/src/timer/TimerSVG.svelte b/src/timer/TimerSVG.svelte
index f84aedd..37147bb 100644
--- a/src/timer/TimerSVG.svelte
+++ b/src/timer/TimerSVG.svelte
@@ -6,9 +6,21 @@
   export let startTimestamp;
   export let displayTime;
   export let degrees = 360 / duration;
+  export let pause;
+
+  let intervalId;
   let elapsedMillis = 0;
   let draw = null;
 
+  // if paused need to clear the intervals and draw the
+  $: if (!pause) {
+    intervalId = drawTimeElapsed();
+  }
+
+  $: if (pause) {
+    clearInterval(intervalId);
+  }
+
   onDestroy(() => {
     clearInterval(intervalId);
   });
@@ -46,39 +58,19 @@
     return coord;
   };
 
-  const intervalId = setInterval(() => {
-    elapsedMillis = Date.now() - startTimestamp;
-    if (elapsedMillis <= duration) {
-      draw = drawCoord(elapsedMillis * degrees);
-    } else {
-      draw = drawCoord(359.99);
-    }
-  }, 30);
-</script>
+  const drawTimeElapsed = () => (
+    setInterval(() => {
+      elapsedMillis = Date.now() - startTimestamp;
+      if (elapsedMillis <= duration) {
+        draw = drawCoord(elapsedMillis * degrees);
+      } else {
+        draw = drawCoord(359.99);
+      }
+    }, 30));
+  
 
-<svg
-  data-testid="svg-element-parent"
-  version="1.1"
-  xmlns="http://www.w3.org/2000/svg"
-  width="100%"
-  viewBox="-210 0 700 270"
->
-  >
-  <!-- Outer circle -->
-  <circle data-testid="svg-outer-circle" cx="140" cy="140" r="120"
-  stroke={'#40e0d0'} stroke-width={'5'} fill={'none'} /> <path
-  data-testid="svg-path" d={draw} stroke={' #993299'} stroke-width={'3'}
-  fill={'none'} />
-  <text
-    data-testid="svg-text"
-    x="140"
-    y="138"
-    text-anchor="middle"
-    class="timer-text"
-  >
-    {displayTime}
-  </text>
-</svg>
+  //intervalId = drawTimeElapsed()
+</script>
 
 <style>
   text {
@@ -93,3 +85,35 @@
     transform: translate(-50%, -50%);
   }
 </style>
+
+<svg
+  data-testid='svg-element-parent'
+  version='1.1'
+  xmlns='http://www.w3.org/2000/svg'
+  width='100%'
+  viewBox='-210 0 700 270'>
+  >
+  <!-- Outer circle -->
+  <circle
+    data-testid='svg-outer-circle'
+    cx='140'
+    cy='140'
+    r='120'
+    stroke={'#40e0d0'}
+    stroke-width={'5'}
+    fill={'none'} />
+  <path
+    data-testid='svg-path'
+    d={draw}
+    stroke={' #993299'}
+    stroke-width={'3'}
+    fill={'none'} />
+  <text
+    data-testid='svg-text'
+    x='140'
+    y='138'
+    text-anchor='middle'
+    class='timer-text'>
+    {displayTime}
+  </text>
+</svg>
diff --git a/src/utils/handleSession.js b/src/utils/handleSession.js
index c9d5fe6..7320bd3 100644
--- a/src/utils/handleSession.js
+++ b/src/utils/handleSession.js
@@ -29,3 +29,24 @@ export async function newSession(duration) {
   });
   return await response.json();
 }
+
+export async function pauseSession(sessionID, pauseTime){
+  await fetch(`${process.env.ADDR}/session/pause`, {
+    method: 'POST',
+    body: JSON.stringify( {
+      sessionId: sessionID,
+      pauseTime: pauseTime,
+    }),
+  });
+}
+
+export async function unpauseSession(sessionID, unpauseTime){
+  console.log(sessionID)
+  await fetch(`${process.env.ADDR}/session/unpause`, {
+    method: 'POST',
+    body: JSON.stringify( {
+      sessionId: sessionID,
+      unpauseTime: unpauseTime,
+    }),
+  });
+}
\ No newline at end of file
diff --git a/src/utils/timer-utils.js b/src/utils/timer-utils.js
new file mode 100644
index 0000000..0e658d0
--- /dev/null
+++ b/src/utils/timer-utils.js
@@ -0,0 +1,47 @@
+  import {
+    updateSession,
+  } from './handleSession.js';
+
+import {
+  sendDriverNotification,
+  sendNotification,
+  newDriverNotification,
+} from './notification.js';
+
+const notifySound = new Audio('/deduction.mp3');
+
+/**
+ * Calculate and display remaining time MS
+ * for a pre-existing session
+ *
+ * @param {object} existingSessionData
+ */
+export function calculateRemainingTime(existingSessionData) {
+  const endTime = existingSessionData.EndTime;
+  const remainingTimeMillis = endTime - Date.now();
+  displayRemainingTime(remainingTimeMillis);
+}
+
+/**
+ * Handle when the timer has finished:
+ * update the server with session data,
+ * show relevant notification
+ */
+export function timesUp(uuid, sessionData) {
+  if (
+    'CurrentDriver' in sessionData &&
+    'UUID' in sessionData.CurrentDriver
+  ) {
+    if (uuid === sessionData.CurrentDriver.UUID && !(Number.isInteger(displayTime))) {
+      showReset = true;
+      const notification = sendDriverNotification(notifySound);
+      notification.onclick = () => {
+        updateSession(sessionData);
+        notification.close();
+      };
+    } else {
+      sendNotification(notifySound);
+    }
+  }
+  return 'Time\'s up'
+}