diff --git a/index.html b/index.html
index c844abd..6620976 100644
--- a/index.html
+++ b/index.html
@@ -11,7 +11,7 @@
   <div id="app">
     <div class="main">
       <div v-if="userID">
-      <div>
+      <div class="showUserID">
         <button v-if="! showUserID" @click="showUserID = userID">Show User ID (KEEP SAFE & SECRET)</button>
         <span v-else><input type="text" v-model="showUserID"></span>
       </div>
@@ -46,9 +46,10 @@
 
           <div v-else>
             <div v-if="threads.length">
+              <br>
               <span v-for="person in threads">
-                {{ person }}
-                <button @click="openThread(person)">Open Thread</button>
+                <button @click="openThread(person)">{{ formatPhone(person) }} - Open Thread</button>
+                <br><br>
               </span>
               <div v-if="showingThreadNum">
                 <div v-for="message in threadMessages">
@@ -92,224 +93,7 @@ __   __                                     _____ __   __   _____
 </div>
       </div>
     </div>
-    <script>
-    const { createApp } = Vue
-
-
-    let app = createApp({
-      computed: {
-        crypto: () => window.crypto
-      },
-      data() {
-        return {
-          userIDInput: '',
-          userID: "",
-          showUserID: "",
-          backend: 'https://api.sms.voidnet.tech/',
-          availableNumbers: "",
-          credits: "",
-          threads: [],
-          ownedNumber: "Getting number...",
-          numberPurchaseMessage: "",
-          moneroAddress: 'Getting monero address...',
-          darkMode: true,
-          disableSMSSend: false,
-          messageToSend: "",
-          sendToNumber: "",
-          showingThreadNum: "",
-          threadOffset: 0,
-          threadMessages: [],
-          lastThreadLineHeader: 0,
-          threadLineHeader: 0
-        }
-      },
-      methods: {
-        openThread(num){
-          this.showingThreadNum = num
-          this.threadOffset = 0
-          this.threadMessages.length = 0
-          this.threadLineHeader = 0
-          this.lastThreadLineHeader = 0
-          this.getThreadMessages(num)
-        },
-        getThreadMessages(num){
-          if (!num){return}
-          fetch(this.backend + this.userID + '/thread/' + num + '/' + Number(this.threadOffset).toString()).then(response => {
-            if (response.ok) {
-              console.debug(response.headers)
-              console.debug(response.headers.get('x-total-lines'))
-              this.threadLineHeader = parseInt(response.headers.get('x-total-lines'))
-              return response.text()
-            } else {
-              throw new Error('Network response was not ok.')
-            }
-          }).then(messages => {
-            if (this.lastThreadLineHeader === this.threadLineHeader){
-              return
-            }
-            this.lastThreadLineHeader = this.threadLineHeader
-
-            messages = messages.split('\n')
-            if (messages.length > 0){
-              for (let i = 0; i < messages.length; i++){
-                if (messages[i] !== ''){
-                  this.threadMessages.push(messages[i])
-                }
-              }
-              this.threadOffset = this.threadLineHeader
-            }
-          })
-        },
-        sendSMS(){
-          this.disableSMSSend = true
-          fetch(this.backend + this.userID + '/send/' + this.sendToNumber, {
-            method: 'POST',
-            body: this.messageToSend
-          }).then(resp => {
-            this.disableSMSSend = false
-            if (resp.status === 200) {
-              this.messageToSend = ""
-            }
-            else{
-              console.debug(resp)
-            }
-          }).catch(err => {
-            this.disableSMSSend = false
-            console.log(err)
-          })
-          return false
-        },
-        getThreads(doInterval){
-          let updateThreads = async (data) => {
-            if (! this.userID){
-              return
-            }
-            let response = await fetch(this.backend + this.userID + '/list')
-            if (response.ok){
-              let textResp = await response.text()
-              if (! RegExp('You').test(textResp)){
-                // Only update threads that changed
-                let newThreads = textResp.split('\n')
-                for (let i = 0; i < newThreads.length; i++){
-                  newThreads[i] = newThreads[i].trim()
-                  if (! this.threads.includes(newThreads[i])){
-                    if (newThreads[i]){
-                      console.debug('added thread')
-                      this.threads.push(newThreads[i])
-                    }
-                  }
-                }
-                let removeThreads = []
-                for (let i = 0; i < this.threads.length; i++){
-                  this.threads[i] = this.threads[i].trim()
-                  if (! newThreads.includes(this.threads[i])){
-                    if (this.threads[i]){
-                      removeThreads.push(this.threads[i])
-                    }
-                  }
-                }
-                for (let i = 0; i < removeThreads.length; i++){
-                  this.threads.splice(this.threads.indexOf(removeThreads[i]), 1)
-                }
-              }
-            }
-        }
-        updateThreads()
-        if (doInterval){setInterval(updateThreads, 10000)}
-        },
-        async buyNum(e){
-          let numToBuy = e.target.dataset.number
-          console.log("Buying number " + numToBuy)
-          fetch(this.backend + this.userID + '/buynumber/' + numToBuy, {'method': 'POST'}).catch((err) => {
-            console.log(err)
-            this.numberPurchaseMessage = "Error purchasing number"
-          }).then((res) =>{
-            if (res.ok) {
-              console.log("Number bought")
-              this.ownedNumber = numToBuy
-              this.numberPurchaseMessage = "Successfully purchased number"
-            } else {
-              if (res.status === 402){
-                console.debug("Not enough credits")
-                this.numberPurchaseMessage = "Not enough credits"
-              } else {
-                this.numberPurchaseMessage = "Error purchasing number"
-                console.log("Error buying number " + res.status)
-              }
-            }
-          })
-        },
-        async userLogin() {
-          this.getXMRAddress()
-          this.getCredits()
-          this.getThreads(false)
-          await this.getOwnedNumber()
-
-        },
-        async getText(endpoint){
-          let response = await fetch(this.backend + endpoint)
-          if (! response.ok) {
-            throw new Error(`HTTP error! status: ${response.status}`);
-          } else {
-            return response.text();
-          }
-        },
-        formatPhone(phoneNumberString) {
-            let cleaned = ('' + phoneNumberString).replace(/\D/g, '')
-            let match = cleaned.match(/^(\d{3})(\d{3})(\d{4})$/)
-            if (match) {
-              return '(' + match[1] + ') ' + match[2] + '-' + match[3]
-            }
-            return null;
-        },
-        async getCredits(){
-          this.getText(this.userID + '/creditbal').then((data) => {
-            this.credits = data
-          }).catch((error) => {
-            this.credits = 'Error getting credit balance'
-          })
-        },
-        async getXMRAddress() {
-          this.getText(this.userID + '/get_user_wallet').then((data) => {
-            this.moneroAddress = data
-          }).catch((error) => {
-            this.moneroAddress = 'Error getting monero address'
-          })
-        },
-        async getOwnedNumber() {
-          return fetch(this.backend + this.userID + '/number').then((response) => {
-            if (response.status == 402){
-              this.ownedNumber = "No number owned"
-            }
-            else{
-              response.text().then((num) => {
-                this.ownedNumber = num
-              })
-            }
-          }).catch((error) => {
-            console.debug(error)
-            this.ownedNumber = 'Error getting phone number'
-          })
-        },
-        async showNumbers(e) {
-          let req = await fetch(this.backend + 'availablenumbers')
-          let numbers = await req.text()
-          this.availableNumbers = numbers.replaceAll('\n\n', '').split('\n').map((number) => {
-            return number
-          })
-        }
-      },
-      mounted() {
-        // do this to get a connection to the backend so we don't have to wait for DNS later
-        fetch(this.backend + 'ping')
-        this.getThreads(true)
-        setInterval(()=>{
-          this.getThreadMessages(this.showingThreadNum)
-        }, 5000)
-      }
-    })
-    app.mount('#app')
-    </script>
+    <script src="main.js"></script>
 
 
 <!--
diff --git a/main.css b/main.css
index 4178271..8311a08 100644
--- a/main.css
+++ b/main.css
@@ -53,6 +53,6 @@ h1, h2, h3, h4, h5, h6{
     }
 }
 
-.darkMode{
-
+.showUserID{
+  margin-left: 75%;
 }
\ No newline at end of file
diff --git a/main.js b/main.js
new file mode 100644
index 0000000..0a934bc
--- /dev/null
+++ b/main.js
@@ -0,0 +1,219 @@
+const { createApp } = Vue
+
+
+let app = createApp({
+  computed: {
+    crypto: () => window.crypto
+  },
+  data() {
+    return {
+      userIDInput: '',
+      userID: "",
+      showUserID: "",
+      backend: 'https://api.sms.voidnet.tech/',
+      availableNumbers: "",
+      credits: "",
+      threads: [],
+      ownedNumber: "Getting number...",
+      numberPurchaseMessage: "",
+      moneroAddress: 'Getting monero address...',
+      darkMode: true,
+      disableSMSSend: false,
+      messageToSend: "",
+      sendToNumber: "",
+      showingThreadNum: "",
+      threadOffset: 0,
+      threadMessages: [],
+      lastThreadLineHeader: 0,
+      threadLineHeader: 0
+    }
+  },
+  methods: {
+    openThread(num){
+      this.showingThreadNum = num
+      this.threadOffset = 0
+      this.threadMessages.length = 0
+      this.threadLineHeader = 0
+      this.lastThreadLineHeader = 0
+      this.getThreadMessages(num)
+    },
+    getThreadMessages(num){
+      if (!num){return}
+      fetch(this.backend + this.userID + '/thread/' + num + '/' + Number(this.threadOffset).toString()).then(response => {
+        if (response.ok) {
+          this.threadLineHeader = parseInt(response.headers.get('x-total-lines'))
+          return response.text()
+        } else {
+          throw new Error('Network response was not ok.')
+        }
+      }).then(messages => {
+        if (this.lastThreadLineHeader === this.threadLineHeader){
+          return
+        }
+        this.lastThreadLineHeader = this.threadLineHeader
+
+        messages = messages.split('\n')
+        if (messages.length > 0){
+          for (let i = 0; i < messages.length; i++){
+            if (messages[i] !== ''){
+              this.threadMessages.push(messages[i])
+            }
+          }
+          this.threadOffset = this.threadLineHeader
+        }
+      })
+    },
+    sendSMS(){
+      this.disableSMSSend = true
+      fetch(this.backend + this.userID + '/send/' + this.sendToNumber, {
+        method: 'POST',
+        body: this.messageToSend
+      }).then(resp => {
+        this.disableSMSSend = false
+        if (resp.status === 200) {
+          this.messageToSend = ""
+        }
+        else{
+          console.debug(resp)
+        }
+      }).catch(err => {
+        this.disableSMSSend = false
+        console.log(err)
+      })
+      return false
+    },
+    getThreads(doInterval){
+      let updateThreads = async (data) => {
+        if (! this.userID || document.hidden){
+          return
+        }
+        let response = await fetch(this.backend + this.userID + '/list')
+        if (response.ok){
+          let textResp = await response.text()
+          if (! RegExp('You').test(textResp)){
+            // Only update threads that changed
+            let newThreads = textResp.split('\n')
+            for (let i = 0; i < newThreads.length; i++){
+              newThreads[i] = newThreads[i].trim()
+              if (! this.threads.includes(newThreads[i])){
+                if (newThreads[i]){
+                  console.debug('added thread')
+                  this.threads.push(newThreads[i])
+                }
+              }
+            }
+            let removeThreads = []
+            for (let i = 0; i < this.threads.length; i++){
+              this.threads[i] = this.threads[i].trim()
+              if (! newThreads.includes(this.threads[i])){
+                if (this.threads[i]){
+                  removeThreads.push(this.threads[i])
+                }
+              }
+            }
+            for (let i = 0; i < removeThreads.length; i++){
+              this.threads.splice(this.threads.indexOf(removeThreads[i]), 1)
+            }
+          }
+        }
+    }
+    updateThreads()
+    if (doInterval){setInterval(updateThreads, 10000)}
+    },
+    async buyNum(e){
+      let numToBuy = e.target.dataset.number
+      console.log("Buying number " + numToBuy)
+      fetch(this.backend + this.userID + '/buynumber/' + numToBuy, {'method': 'POST'}).catch((err) => {
+        console.log(err)
+        this.numberPurchaseMessage = "Error purchasing number"
+      }).then((res) =>{
+        if (res.ok) {
+          console.log("Number bought")
+          this.ownedNumber = numToBuy
+          this.numberPurchaseMessage = "Successfully purchased number"
+        } else {
+          if (res.status === 402){
+            console.debug("Not enough credits")
+            this.numberPurchaseMessage = "Not enough credits"
+          } else {
+            this.numberPurchaseMessage = "Error purchasing number"
+            console.log("Error buying number " + res.status)
+          }
+        }
+      })
+    },
+    async userLogin() {
+      this.getXMRAddress()
+      this.getThreads(false)
+      this.getCredits()
+      await this.getOwnedNumber()
+
+    },
+    async getText(endpoint){
+      let response = await fetch(this.backend + endpoint)
+      if (! response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      } else {
+        return response.text();
+      }
+    },
+    formatPhone(phoneNumberString) {
+        let cleaned = ('' + phoneNumberString).replace(/\D/g, '')
+        let match = cleaned.match(/^(\d{3})(\d{3})(\d{4})$/)
+        if (match) {
+          return '(' + match[1] + ') ' + match[2] + '-' + match[3]
+        }
+        return null;
+    },
+    getCredits(){
+      if (! this.userID || document.hidden){return}
+      this.getText(this.userID + '/creditbal').then((data) => {
+        this.credits = data
+      }).catch((error) => {
+        this.credits = 'Error getting credit balance'
+      })
+    },
+    async getXMRAddress() {
+      this.getText(this.userID + '/get_user_wallet').then((data) => {
+        this.moneroAddress = data
+      }).catch((error) => {
+        this.moneroAddress = 'Error getting monero address'
+      })
+    },
+    async getOwnedNumber() {
+      return fetch(this.backend + this.userID + '/number').then((response) => {
+        if (response.status == 402){
+          this.ownedNumber = "No number owned"
+        }
+        else{
+          response.text().then((num) => {
+            this.ownedNumber = num
+          })
+        }
+      }).catch((error) => {
+        console.debug(error)
+        this.ownedNumber = 'Error getting phone number'
+      })
+    },
+    async showNumbers(e) {
+      let req = await fetch(this.backend + 'availablenumbers')
+      let numbers = await req.text()
+      this.availableNumbers = numbers.replaceAll('\n\n', '').split('\n').map((number) => {
+        return number
+      })
+    }
+  },
+  mounted() {
+    // do this to get a connection to the backend so we don't have to wait for DNS later
+    fetch(this.backend + 'ping')
+    this.getThreads(true)
+    setInterval(()=>{
+      this.getThreadMessages(this.showingThreadNum)
+    }, 5000)
+    setInterval(()=>{
+        this.getCredits()
+    }, 30000)
+
+  }
+})
+app.mount('#app')
\ No newline at end of file