diff --git a/src/angular/hq/src/app/app.component.html b/src/angular/hq/src/app/app.component.html
index 5542b2fa..f1dfa3c2 100644
--- a/src/angular/hq/src/app/app.component.html
+++ b/src/angular/hq/src/app/app.component.html
@@ -1,12 +1,12 @@
 <!-- header -->
-<header class="justify-between items-end grid grid-cols-3 py-4 px-6">
+<header class="justify-between items-end grid grid-cols-3 py-[20px] px-[30px]">
     <!-- col one -->
     <div>&nbsp;</div>
     <!-- col two -->
     <nav class="nav flex flex-1 justify-center h-[30px]">
         <div class="px-5 border-r border-r-gray-100"><a routerLink="/clients" routerLinkActive="text-gray-100 border-b border-b-orange-500/100" class="inline-block text-center font-bold text-sm text-gray-100 border-b border-b-orange-500/0 px-3 py-1 min-w-[100px]">Clients</a></div>
         <div class="px-5 border-r border-r-gray-100"><a routerLink="/psr" routerLinkActive="text-gray-100 border-b border-b-orange-500/100" class="inline-block text-center font-bold text-sm text-gray-100 border-b border-b-orange-500/0 px-3 py-1 min-w-[100px]">PSR</a></div>
-        <div class="px-5"><a routerLink="/my-stuff" routerLinkActive="text-gray-100 border-b border-b-orange-500/100" class="inline-block text-center font-bold text-sm text-gray-100 border-b border-b-orange-500/0 px-3 py-1 min-w-[100px]">My Stuff</a></div>
+        <div class="px-5"><a routerLink="/my-stuff" routerLinkActive="text-gray-100 border-b border-b-orange-500/100" class="inline-block text-center font-bold text-sm text-nav-disabled border-b border-b-orange-500/0 px-3 py-1 min-w-[100px]">My Stuff</a></div>
     </nav>
     <!-- col three -->
     <div class="flex column justify-end items-center">
@@ -37,7 +37,7 @@
 </div>
 
 <!-- footer -->
-<footer class="px-6 py-4">
+<footer class="py-[20px] px-[30px]">
     <div class="flex justify-between">
         <div class="text-[10px] text-gray-50">&copy;Sanctuary Software Studio Inc.</div>
         <div class="text-[10px] text-gray-50">1-20 / 200 items</div>
diff --git a/src/angular/hq/src/app/clients/client-details/client-details.component.html b/src/angular/hq/src/app/clients/client-details/client-details.component.html
index 11fcc7dd..9284f480 100644
--- a/src/angular/hq/src/app/clients/client-details/client-details.component.html
+++ b/src/angular/hq/src/app/clients/client-details/client-details.component.html
@@ -1,4 +1,4 @@
-<div class="px-6">
+<div class="px-[30px]">
     <h1 class="font-rajdhani font-semibold text-3xl">[Client Name Here]</h1>
 
     <div class="grid gap-2 grid-flow-row lg:grid-flow-col lg:gap-7 auto-cols-max pt-3 text-sm">
@@ -8,7 +8,7 @@ <h1 class="font-rajdhani font-semibold text-3xl">[Client Name Here]</h1>
     </div>
 </div>
 
-<div class="px-6 pt-3">
+<div class="px-[30px] pt-3">
     <div class="flex flex-col lg:flex-row justify-between items-center">
         <div class="order-2 lg:order-1">
             Search, Dropdown, Toggle Here
diff --git a/src/angular/hq/src/app/clients/client-list/client-list.component.html b/src/angular/hq/src/app/clients/client-list/client-list.component.html
index 504fc70e..0fd40494 100644
--- a/src/angular/hq/src/app/clients/client-list/client-list.component.html
+++ b/src/angular/hq/src/app/clients/client-list/client-list.component.html
@@ -1,4 +1,4 @@
-<div class="px-6">
+<div class="px-[30px]">
     <h1 class="font-rajdhani font-semibold text-3xl">Clients</h1>
 
     <div class="grid gap-7 grid-flow-col auto-cols-max pt-3 text-sm">
@@ -6,7 +6,7 @@ <h1 class="font-rajdhani font-semibold text-3xl">Clients</h1>
     </div>
 </div>
 
-<div class="px-6 pt-3">
+<div class="px-[30px] pt-3">
     <a routerLink="someId1">Some ID 1</a><br />
     <a routerLink="someId2">Some ID 2</a><br />
     <a routerLink="someId3">Some ID 3</a>
diff --git a/src/angular/hq/src/app/psr/psrdetails/psrdetails.component.html b/src/angular/hq/src/app/psr/psrdetails/psrdetails.component.html
index 1caccee8..7c872e4e 100644
--- a/src/angular/hq/src/app/psr/psrdetails/psrdetails.component.html
+++ b/src/angular/hq/src/app/psr/psrdetails/psrdetails.component.html
@@ -1,4 +1,4 @@
-<div class="px-6">
+<div class="px-[30px]">
     <h1 class="font-rajdhani font-semibold text-3xl">P 1006; POS</h1>
 
     <div class="grid gap-7 grid-flow-col auto-cols-max pt-3 text-sm">
diff --git a/src/angular/hq/src/app/psr/psrlist/psrlist.component.html b/src/angular/hq/src/app/psr/psrlist/psrlist.component.html
index 531187b4..c2e0ad02 100644
--- a/src/angular/hq/src/app/psr/psrlist/psrlist.component.html
+++ b/src/angular/hq/src/app/psr/psrlist/psrlist.component.html
@@ -1,4 +1,4 @@
-<div class="px-6">
+<div class="px-[30px]">
     <h1 class="font-rajdhani font-semibold text-3xl">PSR</h1>
 
     <div class="grid gap-7 grid-flow-col auto-cols-max pt-3 text-sm">
@@ -8,7 +8,7 @@ <h1 class="font-rajdhani font-semibold text-3xl">PSR</h1>
     </div>
 </div>
 
-<div class="px-6 pt-3">
+<div class="px-[30px] pt-3">
     <a routerLink="someId1">Some ID 1</a><br />
     <a routerLink="someId2">Some ID 2</a><br />
     <a routerLink="someId3">Some ID 3</a>
diff --git a/src/angular/hq/src/styles.scss b/src/angular/hq/src/styles.scss
index 052efd29..6ada4425 100644
--- a/src/angular/hq/src/styles.scss
+++ b/src/angular/hq/src/styles.scss
@@ -110,4 +110,4 @@ html, body {
   height: 100%; 
   @apply text-gray-100;
 }
-body { margin: 0; font-family: "Open Sans", Roboto, "Helvetica Neue", sans-serif; }
+body { margin: 0; font-family: "Open Sans", Roboto, "Helvetica Neue", sans-serif; font-size:0.9rem; }
diff --git a/src/angular/hq/tailwind.config.js b/src/angular/hq/tailwind.config.js
index e88ac8f6..9cf19ffd 100644
--- a/src/angular/hq/tailwind.config.js
+++ b/src/angular/hq/tailwind.config.js
@@ -75,7 +75,8 @@ module.exports = {
           '900': '#3e3e3e',
           '950': '#262626',
         },
-        'black-alt': "#242424"
+        'black-alt': "#242424",
+        'nav-disabled': "#707070"
       }
     },
   },