diff --git a/frontend/components/ConvoPlaceholder.vue b/frontend/components/ConvoPlaceholder.vue
index bccd513..4ac13de 100644
--- a/frontend/components/ConvoPlaceholder.vue
+++ b/frontend/components/ConvoPlaceholder.vue
@@ -22,95 +22,6 @@ height: 83vh;
     grid-column-end: 2;
 }
 
-/* these are for conversation which we are sidestepping for now */
-
-
-.thread {
-    height:80vh;
-    margin: 0 auto;
-    border-left: solid #3178b1 2px;
-    border-right: solid #3178b1 2px;
-    border-bottom: solid #3178b1 2px;
-    border-bottom-left-radius: 0.5em;
-    border-bottom-right-radius: 0.5em;
-    padding-left: 0.5em;
-    padding-right: 0.5em;
-
-    /* stupid hack to get the text entry box to display inside the bounds of the thread */
-    display: flex;
-    flex-direction: column;
-}
-
-.thread-header {
-    margin: 0 auto;
-    padding: 1em;
-    background-color: #3178b1;
-    color: #fff;
-    border-top-left-radius: 0.5em;
-    border-top-right-radius: 0.5em;
-    font-weight: bold;
-}
-
-.message-container {
-    height: 100%;
-    overflow-y: auto;
-    display: flex;
-    flex-flow: column;
-    justify-content: flex-start;
-    margin-bottom: 0.5em;
-}
-
-.backfill {
-    max-width: 50em;
-    margin: 0 auto;
-    padding: 1em;
-}
-
-.white {
-    color: white;
-}
-
-td:active{
-    background-color:#3178B1;
-    color:white;
-}
-td:hover{
-    background-color: aliceblue;
-}
-table {
-    width: 100%;
-    table-layout: fixed;
-}
-    
-.timestamp {
-    color: #999;
-    font-size: 8pt;
-    padding-left: 0.5em;
-}
-.thread-name {
-    font-size: 12pt;
-    color: #000;
-}
-.thread-name:active{
-    color:white;
-}
-.thread-last-message {
-    color: #000;
-}
-.thread-last-message:active {
-    color: #fff;
-}
-td {
-    border: solid #3178b1;
-    border-radius: 1em;
-    padding: 0.25em;
-    margin-bottom: 0.5em;
-    min-height: calc(50px + 1em);
-}
-table {
-    width: 100%;
-    table-layout: fixed;
-}
 @media screen and (width <=700px){
     #conversation{ 
         display: none;
diff --git a/frontend/components/ThreadList/ThreadList.vue b/frontend/components/ThreadList/ThreadList.vue
index f389630..e1f2022 100644
--- a/frontend/components/ThreadList/ThreadList.vue
+++ b/frontend/components/ThreadList/ThreadList.vue
@@ -1,7 +1,5 @@
 <script lang="ts" >
-import { MessageData, emitter, state, } from '../../lib/global';
 import ThreadPreview, { ThreadPreviewInterface } from '../ThreadPreview/ThreadPreview.vue';
-import { RouterLink } from 'vue-router';
 
 // type ThreadListInterface = {
     
@@ -38,7 +36,16 @@ export default{
         threads: Array<Object>,
             threadPreviews: Array<ThreadPreviewInterface>
     },
-    components:{ThreadPreview}
+    components:{ThreadPreview},
+    data(){
+        return {activeThread: false}
+    },
+    methods:{
+        recieveEmit(activeConversation){
+            // alert(`active conversation: ${activeConversation}`);
+            this.activeThread = activeConversation;
+        }
+    }
 }
 
 
@@ -64,24 +71,16 @@ export default{
     </form>
     */
 </script>
-
+<template>
+    <div class="threadlist_container">
+        <div class='table'>
+            <div class="preview_list_container">
+                <ThreadPreview @thread-change="recieveEmit" v-for="preview in threadPreviews"   :key="preview.toString()" v-bind="preview" :activeThread="this.activeThread"/>
+            </div>
+        </div>
+    </div>
+</template>
 <style>
-
-
-.td_preview:active{
-    background-color:#3178B1;
-    color:white;
-}
-.td_preview:hover{
-    background-color: aliceblue;
-}
-.td_preview{
-    border: solid #3178b1;
-    border-radius: 1em;
-    padding: 0.5em;
-    margin-bottom: 0.5em;
-    min-height: calc(50px + 1em);
-}
 .preview_list_container{
     direction:ltr;
     padding-left:0.25rem;
@@ -94,18 +93,9 @@ export default{
     grid-column-end: 1;
     padding-right: 0.25rem;
 }
-.timestamp {
-    color: #999;
-    font-size: 8pt;
-    padding-left: 0.5em;
-}
-.thread-name {
-    font-size: 12pt;
-    color: #000;
-}
-.thread-last-message {
-    color: #000;
-}
+
+
+
 
 .table {
     /*border-spacing: 1em; */
@@ -125,24 +115,4 @@ export default{
     }
 }
 
-</style>
-
-
-
-<template>
-    
-    <div class="threadlist_container">
-        <div class='action_bar' id='action_bar'>
-            <div class='heading'><b>WebTexting</b> {{displayName}}  </div>
-            <div class='actions'>
-            </div>
-            <div style='clear: both;'></div>
-        </div>
-        <div class='table'>
-            <div class="preview_list_container">
-                <ThreadPreview v-for="preview in threadPreviews"   :key="preview.toString()" v-bind="preview"/> 
-            </div>
-            </div>
-    </div>
-    
-</template>
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/frontend/components/ThreadPreview/ThreadPreview.vue b/frontend/components/ThreadPreview/ThreadPreview.vue
index e292130..8229e93 100644
--- a/frontend/components/ThreadPreview/ThreadPreview.vue
+++ b/frontend/components/ThreadPreview/ThreadPreview.vue
@@ -35,7 +35,7 @@ export type ThreadPreviewInterface = {
 }
 
 export default {
-    name:'ThreadPreview',
+    name: 'ThreadPreview',
     props: {
         displayName: {
             type: String,
@@ -64,20 +64,61 @@ export default {
         },
         groupMembers: {
             type: Array<String>,
+        },
+        activeThread:{
+            type:String||Boolean, 
+            required:true,
         }
 
     },
     components: { Conversation },
+    computed:{
+        currentThread(){
+            if(this.remoteNumber == this.activeThread){
+                console.log("change my background");
+                return this.remoteNumber;
+            }
+            else if(this.groupUUID == this.activeThread){
+                console.log("change my background");
+                return this.groupUUID;
+            }
+            return false;
+        }
+    },
+    emits:{
+        'thread-change':String,
+    },
+    methods:{
+        routerLinkClickHandler(event){
+            if(this.remoteNumber){
+                console.log(event);
+                this.$emit("thread-change", this.remoteNumber)
+            }
+            else if(this.groupUUID){
+                console.log(event);
+
+                this.$emit("thread-change", this.groupUUID)
+
+            }
+        }
+    }
 }
 </script>
 
 <template>
-    <div class='tr_replace'>
-        <div class='td_preview'>
-            <router-link :to="this.link">
-                <span class='thread-name'>{{ this.displayName }}</span><br />
-                <span class='thread-last-message'>{{ this.bodyPreview }}</span><br/>
-                <span class='timestamp' :data-timestamp="this.timestamp"></span>
+    <div class='tr_replace' v-bind:class="currentThread ? 'activeThread' : 'inactiveThread'">
+        <div class='td_preview' v-bind:class="currentThread ? 'activeThread' : 'inactiveThread'">
+            <router-link :to="this.link" class="thread-link" @click="routerLinkClickHandler">
+                <div class="thread-preview-container" v-bind:class="currentThread ? 'activeThread' : 'inactiveThread'">
+                     <!-- <span class="dot"></span> -->
+                    <span class='thread-name' v-bind:class="currentThread ? 'activeThread' : 'inactiveThread'">{{ this.displayName }}</span> 
+                    <span class='timestamp' v-bind:class="currentThread ? 'activeThread' : 'inactiveThread'"
+                        :data-timestamp="this.timestamp"></span>
+
+                    <span class='thread-last-message' v-bind:class="currentThread ? 'activeThread' : 'inactiveThread'" >{{ this.bodyPreview }}</span>
+                </div>
+
+
             </router-link>
         </div>
     </div>
@@ -85,4 +126,105 @@ export default {
 
 <style>
 
+.thread-name {
+    grid-column-start: 2;
+    grid-column-end: 2;
+    grid-row: 1;
+    justify-self: start;
+    color:black;
+}
+
+.timestamp {
+    grid-column-start: 3;
+    grid-column-end: 3;
+    grid-row: 1;
+    justify-self: end;
+}
+
+.thread-last-message {
+    color: darkgray;
+    grid-row-start: 2;
+    grid-column: 2;
+    justify-self: start;
+}
+
+.timestamp.activeThread {
+    color:white;
+}
+.thread-name.activeThread{
+    color:white;
+}
+.thread-last-message.activeThread {
+    color: white;
+}
+/*
+.timestamp.activeThread:hover {
+    color:gray;
+}
+.thread-name.activeThread:hover{
+    color:gray;
+}
+
+.thread-last-message.activeThread:hover {
+    color: gray;
+}*/
+
+.td_preview:hover {
+    background-color: #a1cff7;
+}
+
+
+.thread-preview-container {
+    border-radius: 1em;
+    padding: 0.5625em;
+    /* margin-bottom: 0.5em;
+    min-height: calc(50px + 1em); */
+    display: grid;
+    grid-template-rows: auto;
+    grid-template-columns: 0 auto auto;
+}
+
+.thread-preview-container:hover span{
+    color:black;
+}
+.thread-preview-container.activeThread:hover span{
+    color:white;
+}
+
+.text-center {
+    margin: 0;
+    position: relative;
+    top: 50%;
+    -ms-transform: translateY(-50%);
+    transform: translateY(-50%);
+}
+
+.dot {
+    grid-column: 1;
+    grid-row-start: 1;
+    grid-row-end: 3;
+    height: 50px;
+    width: 50px;
+    background-color: #bbb;
+    border-radius: 50%;
+    display: inline-block;
+    margin: 0;
+    position: relative;
+    top: 50%;
+    -ms-transform: translateY(-50%);
+    transform: translateY(-50%);
+}
+.activeThread{
+    color:white;
+}
+.td_preview.activeThread:hover {
+    background-color: #3178B1;
+}
+.tr_replace.activeThread{
+    background-color:#5f9fd3;
+}
+.tr_replace.activeThread:hover{
+    background-color:#3178B1;
+}
+
 </style>
\ No newline at end of file
diff --git a/frontend/components/conversation/Conversation.vue b/frontend/components/conversation/Conversation.vue
index 52de0ff..d076a1b 100644
--- a/frontend/components/conversation/Conversation.vue
+++ b/frontend/components/conversation/Conversation.vue
@@ -209,6 +209,8 @@ const  getMessages = async (queryParams: MessageQuery) => {
         remoteNumber: async function (rN) {
             this.title= rN;
             this.messages=[];
+
+            this.backfillAvailable=true;
             //console.log(rN);
             //console.log("remote number changed changing this.messages")
             if(this.remoteNumber) {
@@ -220,13 +222,13 @@ const  getMessages = async (queryParams: MessageQuery) => {
                     this.messages = this.state.conversations[rN];
                 }
                 else{
-                    const observedRemoteNumberChangeQueryParams= <MessageQuery>({ extension_uuid: this.$route.query.extension_uuid,
-                number: rN });
+                //     const observedRemoteNumberChangeQueryParams= <MessageQuery>({ extension_uuid: this.$route.query.extension_uuid,
+                // number: rN });
                     //this.state.conversations[rN] = await this.fetchInitialMessages();
                     this.messages = this.state.conversations[rN];
                 }
                 this.conversationKey=rN;
-                //emitter.emit("backfill-requested",rN)
+                emitter.emit("backfill-requested",rN)
                 //console.log(observedChangeQueryParams)
                 
             }
@@ -238,13 +240,15 @@ const  getMessages = async (queryParams: MessageQuery) => {
         groupUUID: function(gUUID) {
             this.messages =[];
             if(this.groupUUID){
-                const observedGroupUUIDChangeQueryParams= <MessageQuery>({ extension_uuid: this.$route.query.extension_uuid,
-                group: gUUID });
+                // const observedGroupUUIDChangeQueryParams= <MessageQuery>({ extension_uuid: this.$route.query.extension_uuid,
+                // group: gUUID });
                 //console.log(observedChangeQueryParams)
                 this.messages = this.state.conversations[gUUID];
                 this.title= gUUID;
             }
             this.conversationKey=gUUID;
+            this.backfillAvailable=true;
+            emitter.emit("backfill-requested",rN)
         }
     },
     methods: {
@@ -414,25 +418,13 @@ table {
     font-size: 8pt;
     padding-left: 0.5em;
 }
-.thread-name {
-    font-size: 12pt;
-    color: #000;
-}
-.thread-name:active{
-    color:white;
-}
-.thread-last-message {
-    color: #000;
-}
-.thread-last-message:active {
-    color: #fff;
-}
+
 td {
     border: solid #3178b1;
     border-radius: 1em;
-    padding: 0.25em;
+   /* padding: 0.25em;
     margin-bottom: 0.5em;
-    min-height: calc(50px + 1em);
+   min-height: calc(50px + 1em);*/
 }
 table {
     width: 100%;
diff --git a/frontend/components/message/Message.vue b/frontend/components/message/Message.vue
index 4d13a77..d26f48a 100644
--- a/frontend/components/message/Message.vue
+++ b/frontend/components/message/Message.vue
@@ -118,15 +118,15 @@ export default {
 
 .message.incoming {
     float: left;
-    border-radius: 1em 1em 0 1em;
+    border-radius: 1em 1em 1em 0;
     background-color: #BB6025;
     color: #fff;
 }
 
 .message.outgoing{
     float:right;
-    border-radius: 1em 1em 1em 0;
-    background-color: #3178B1;
+    background-color: #3178B1;    
+    border-radius: 1em 1em 0 1em;
     color: #fff;
 }
 
diff --git a/frontend/lib/SIP.ts b/frontend/lib/SIP.ts
index 2eb0751..73b2f82 100644
--- a/frontend/lib/SIP.ts
+++ b/frontend/lib/SIP.ts
@@ -28,7 +28,7 @@ function calculatePlainThreadID(message:Message, direction:string, originalTo: s
         }
     }
 
-    
+    console.log("do not add")
     return'do not add';
 }
 
@@ -43,6 +43,7 @@ function calculateCPIMThreadID(cpim:CPIM, direction:string, originalTo: string,
                              //so addMessage it to the correct thread
         return messageFromUser;
     }
+    console.log("do not add")
     return 'do not add';
 }
 
diff --git a/src/footer.css b/src/footer.css
new file mode 100644
index 0000000..9688fe7
--- /dev/null
+++ b/src/footer.css
@@ -0,0 +1,4 @@
+div#footer {
+    margin-bottom:0;
+    display: none;
+}
\ No newline at end of file
diff --git a/threadlist.php b/threadlist.php
index 102a30e..abe626b 100644
--- a/threadlist.php
+++ b/threadlist.php
@@ -199,6 +199,7 @@ function clean_number() { // clean any non-digits out of the phone number box
 require_once "footer.php";
 ?>
 <link rel="stylesheet" href="js/style.css" />
+<link rel="stylesheet" href="src/footer.css"/>
 <script type="text/javascript">
 WebTexting.initializeWebTextingContainer(<?php echo json_encode($frontendOpts); ?>);
 </script>