diff --git a/src/components/ApproveRegion.vue b/src/components/ApproveRegion.vue
index ccfa6fb..d3aa8df 100644
--- a/src/components/ApproveRegion.vue
+++ b/src/components/ApproveRegion.vue
@@ -2,8 +2,8 @@
   <slot v-if="s.regionApproved"/>
   <v-card v-if="s.regionApproved===null" title="Loading..." prepend-icon="mdi-clock-outline"
           text="If loading takes more than a second, please refresh your browser or contact support@dexorder.trade"/>
-  <v-card v-if="s.regionApproved===false" title="Restricted" prepend-icon="mdi-alert"
-          text="Dexorder is not available in your region."/>
+  <v-card v-if="s.regionApproved===false" title="Restricted" prepend-icon="mdi-alert" color="yellow-darken-1"
+          text="Dexorder is not available in your region." rounded="0"/>
 </template>
 
 <script setup>
diff --git a/src/components/TermsOfService.vue b/src/components/TermsOfService.vue
index ab5331d..2d9f283 100644
--- a/src/components/TermsOfService.vue
+++ b/src/components/TermsOfService.vue
@@ -2,6 +2,7 @@
   <v-dialog v-model="show" max-width="500px" persistent>
     <v-card>
       <v-card-title class="text-center">Dexorder Terms of Service</v-card-title>
+      <!-- MAKE SURE TO UPDATE THE VERSION VARIABLE AS WELL -->
       <v-card-text class="text-center">Last Updated November 18, 2024</v-card-text>
 
       <v-card-text>
@@ -659,31 +660,30 @@ at <a href="mailto:legal@dexorder.trade">legal@dexorder.trade</a> or <a href="ma
 import {usePrefStore} from "@/store/store.js";
 import {computed, ref, watch} from "vue";
 
-import {timestamp} from "@/common.js";
+import {socket} from "@/socket.js";
 
-// INCREMENT THIS WHEN CHANGING THE TOS
-const CURRENT_VERSION=1
+// UPDATE THIS WHEN CHANGING THE TOS
+const CURRENT_VERSION='2024-11-18'  // this must be a parseable date
 
 const prefs = usePrefStore()
 const ok = computed(()=>{
   console.log('check ToS', prefs.acceptedTos)
-  return prefs.acceptedTos!==null&&prefs.acceptedTos.version===CURRENT_VERSION
+  return prefs.acceptedTos===CURRENT_VERSION
 })
 const show = computed(()=>!ok.value)
 const acceptable = computed(()=>!inFlight.value)
 const inFlight = ref(false)
 
-watch(ok, (newVal, oldVal)=> {console.log('check ToS');if(newVal!==oldVal) console.log('ToS accepted', prefs.acceptedTos.version, prefs.acceptedTos.date) })
+watch(ok, (newVal, oldVal)=> {console.log('check ToS');if(newVal!==oldVal) console.log('ToS accepted', prefs.acceptedTos, prefs.acceptedTos) })
 
 function accept() {
-  prefs.acceptedTos = {
-    version: CURRENT_VERSION,
-    date: timestamp(),
-    // todo IP check
-    // ip: '127.0.0.1',
-    // country: 'AD'
-  }
-  inFlight.value = false
+  inFlight.value = true
+  socket.emit('approveTOS', new Date().toISOString(), CURRENT_VERSION, (ok)=>{
+    console.log('approve TOS', ok)
+    if (ok) prefs.acceptedTos = CURRENT_VERSION
+    else console.warn('TOS was not approved')
+    inFlight.value = false
+  })
 }
 
 function decline() {
@@ -698,4 +698,4 @@ function decline() {
   margin-left: 2em;
 }
 
-</style>
\ No newline at end of file
+</style>
diff --git a/src/store/store.js b/src/store/store.js
index adee532..e065da2 100644
--- a/src/store/store.js
+++ b/src/store/store.js
@@ -206,7 +206,7 @@ export const usePrefStore = defineStore({
   state: ()=> {
     // user preferences
     const inverted = ref({})
-    const acceptedTos = ref(null)
+    const acceptedTos = ref('NO TOS ACCEPTED')
     return {inverted, acceptedTos,}
   },
 })