diff --git a/public/200.html b/public/200.html
index 36bbd88..261550b 100644
--- a/public/200.html
+++ b/public/200.html
@@ -35,7 +35,7 @@
 
     <script>
       if (process === undefined) {
-        var process = { env: {PRODUCTION: true} };
+        var process = { env: {} };
       }
     </script>
     <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
diff --git a/public/404.html b/public/404.html
index 36bbd88..261550b 100644
--- a/public/404.html
+++ b/public/404.html
@@ -35,7 +35,7 @@
 
     <script>
       if (process === undefined) {
-        var process = { env: {PRODUCTION: true} };
+        var process = { env: {} };
       }
     </script>
     <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
diff --git a/public/assets/styles/index.css b/public/assets/styles/index.css
index 7f39374..135056d 100644
--- a/public/assets/styles/index.css
+++ b/public/assets/styles/index.css
@@ -3,3 +3,4 @@
 @tailwind components;
 
 @tailwind utilities;
+
diff --git a/public/assets/styles/tailwind.css b/public/assets/styles/tailwind.css
index ba0141c..8c4e097 100644
--- a/public/assets/styles/tailwind.css
+++ b/public/assets/styles/tailwind.css
@@ -1237,21 +1237,11 @@ select {
   background-color: rgba(168, 85, 247, var(--tw-bg-opacity));
 }
 
-.bg-purple-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgba(147, 51, 234, var(--tw-bg-opacity));
-}
-
 .bg-indigo-500 {
   --tw-bg-opacity: 1;
   background-color: rgba(99, 102, 241, var(--tw-bg-opacity));
 }
 
-.bg-blue-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgba(37, 99, 235, var(--tw-bg-opacity));
-}
-
 .bg-lightBlue-200 {
   --tw-bg-opacity: 1;
   background-color: rgba(186, 230, 253, var(--tw-bg-opacity));
@@ -1272,11 +1262,26 @@ select {
   background-color: rgba(2, 132, 199, var(--tw-bg-opacity));
 }
 
+.bg-cyan-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(6, 182, 212, var(--tw-bg-opacity));
+}
+
+.bg-teal-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(240, 253, 250, var(--tw-bg-opacity));
+}
+
 .bg-teal-200 {
   --tw-bg-opacity: 1;
   background-color: rgba(153, 246, 228, var(--tw-bg-opacity));
 }
 
+.bg-teal-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(94, 234, 212, var(--tw-bg-opacity));
+}
+
 .bg-teal-500 {
   --tw-bg-opacity: 1;
   background-color: rgba(20, 184, 166, var(--tw-bg-opacity));
@@ -1312,6 +1317,11 @@ select {
   background-color: rgba(249, 115, 22, var(--tw-bg-opacity));
 }
 
+.bg-red-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(254, 242, 242, var(--tw-bg-opacity));
+}
+
 .bg-red-200 {
   --tw-bg-opacity: 1;
   background-color: rgba(254, 202, 202, var(--tw-bg-opacity));
@@ -1387,51 +1397,21 @@ select {
   background-color: rgba(30, 41, 59, var(--tw-bg-opacity));
 }
 
-.hover\:bg-purple-700:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgba(126, 34, 206, var(--tw-bg-opacity));
-}
-
-.hover\:bg-blue-700:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgba(29, 78, 216, var(--tw-bg-opacity));
-}
-
 .focus\:bg-white:focus {
   --tw-bg-opacity: 1;
   background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
 }
 
-.focus\:bg-purple-700:focus {
-  --tw-bg-opacity: 1;
-  background-color: rgba(126, 34, 206, var(--tw-bg-opacity));
-}
-
-.focus\:bg-blue-700:focus {
-  --tw-bg-opacity: 1;
-  background-color: rgba(29, 78, 216, var(--tw-bg-opacity));
-}
-
 .focus\:bg-gray-200:focus {
   --tw-bg-opacity: 1;
   background-color: rgba(228, 228, 231, var(--tw-bg-opacity));
 }
 
-.active\:bg-purple-800:active {
-  --tw-bg-opacity: 1;
-  background-color: rgba(107, 33, 168, var(--tw-bg-opacity));
-}
-
 .active\:bg-indigo-600:active {
   --tw-bg-opacity: 1;
   background-color: rgba(79, 70, 229, var(--tw-bg-opacity));
 }
 
-.active\:bg-blue-800:active {
-  --tw-bg-opacity: 1;
-  background-color: rgba(30, 64, 175, var(--tw-bg-opacity));
-}
-
 .active\:bg-red-500:active {
   --tw-bg-opacity: 1;
   background-color: rgba(239, 68, 68, var(--tw-bg-opacity));
@@ -1556,10 +1536,6 @@ select {
   border-color: rgba(113, 113, 122, var(--tw-border-opacity));
 }
 
-.rounded-none {
-  border-radius: 0px;
-}
-
 .rounded {
   border-radius: 0.25rem;
 }
@@ -1596,16 +1572,6 @@ select {
   border-bottom-left-radius: 0.25rem;
 }
 
-.rounded-t-md {
-  border-top-left-radius: 0.375rem;
-  border-top-right-radius: 0.375rem;
-}
-
-.rounded-b-md {
-  border-bottom-right-radius: 0.375rem;
-  border-bottom-left-radius: 0.375rem;
-}
-
 .rounded-t-lg {
   border-top-left-radius: 0.5rem;
   border-top-right-radius: 0.5rem;
@@ -1675,6 +1641,10 @@ select {
   border-bottom-width: 2px;
 }
 
+.border-t-8 {
+  border-top-width: 8px;
+}
+
 .border-t {
   border-top-width: 1px;
 }
@@ -2019,10 +1989,6 @@ select {
   flex-grow: 1;
 }
 
-.flex-shrink-0 {
-  flex-shrink: 0;
-}
-
 .flex-shrink {
   flex-shrink: 1;
 }
@@ -2063,10 +2029,6 @@ select {
   font-weight: 400;
 }
 
-.font-medium {
-  font-weight: 500;
-}
-
 .font-semibold {
   font-weight: 600;
 }
@@ -2083,10 +2045,6 @@ select {
   height: 0.5rem;
 }
 
-.h-4 {
-  height: 1rem;
-}
-
 .h-5 {
   height: 1.25rem;
 }
@@ -2200,10 +2158,6 @@ select {
   line-height: 1;
 }
 
-.leading-tight {
-  line-height: 1.25;
-}
-
 .leading-snug {
   line-height: 1.375;
 }
@@ -2566,14 +2520,6 @@ select {
   opacity: .8;
 }
 
-.hover\:opacity-75:hover {
-  opacity: 0.75;
-}
-
-.focus\:opacity-100:focus {
-  opacity: 1;
-}
-
 .outline-none {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -2792,11 +2738,6 @@ select {
   padding-right: 0.125rem;
 }
 
-.py-2\.5 {
-  padding-top: 0.625rem;
-  padding-bottom: 0.625rem;
-}
-
 .pt-0 {
   padding-top: 0px;
 }
@@ -3092,21 +3033,6 @@ select {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.focus\:shadow-lg:focus {
-  --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-.focus\:shadow-none:focus {
-  --tw-shadow: 0 0 #0000;
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-.active\:shadow-lg:active {
-  --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
 * {
   --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
   --tw-ring-offset-width: 0px;
@@ -3229,11 +3155,21 @@ select {
   color: rgba(2, 132, 199, var(--tw-text-opacity));
 }
 
+.text-teal-50 {
+  --tw-text-opacity: 1;
+  color: rgba(240, 253, 250, var(--tw-text-opacity));
+}
+
 .text-teal-500 {
   --tw-text-opacity: 1;
   color: rgba(20, 184, 166, var(--tw-text-opacity));
 }
 
+.text-teal-700 {
+  --tw-text-opacity: 1;
+  color: rgba(15, 118, 110, var(--tw-text-opacity));
+}
+
 .text-emerald-500 {
   --tw-text-opacity: 1;
   color: rgba(16, 185, 129, var(--tw-text-opacity));
@@ -3279,11 +3215,6 @@ select {
   color: rgba(63, 63, 70, var(--tw-text-opacity));
 }
 
-.text-gray-800 {
-  --tw-text-opacity: 1;
-  color: rgba(39, 39, 42, var(--tw-text-opacity));
-}
-
 .text-gray-900 {
   --tw-text-opacity: 1;
   color: rgba(24, 24, 27, var(--tw-text-opacity));
@@ -3329,11 +3260,6 @@ select {
   color: rgba(30, 41, 59, var(--tw-text-opacity));
 }
 
-.hover\:text-black:hover {
-  --tw-text-opacity: 1;
-  color: rgba(0, 0, 0, var(--tw-text-opacity));
-}
-
 .hover\:text-red-600:hover {
   --tw-text-opacity: 1;
   color: rgba(220, 38, 38, var(--tw-text-opacity));
@@ -3409,10 +3335,6 @@ select {
   text-decoration: none;
 }
 
-.hover\:no-underline:hover {
-  text-decoration: none;
-}
-
 .antialiased {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -3561,10 +3483,6 @@ select {
   word-break: break-all;
 }
 
-.w-4 {
-  width: 1rem;
-}
-
 .w-5 {
   width: 1.25rem;
 }
@@ -4137,3 +4055,4 @@ select {
 
 @media (min-width: 1536px) {
 }
+
diff --git a/public/index.html b/public/index.html
index 36bbd88..261550b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -35,7 +35,7 @@
 
     <script>
       if (process === undefined) {
-        var process = { env: {PRODUCTION: true} };
+        var process = { env: {} };
       }
     </script>
     <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
diff --git a/src/components/Cards/.CardCreateWGUser.svelte.swp b/src/components/Cards/.CardCreateWGUser.svelte.swp
deleted file mode 100644
index 6971b71..0000000
Binary files a/src/components/Cards/.CardCreateWGUser.svelte.swp and /dev/null differ
diff --git a/src/components/Cards/.CardSettings.svelte.swp b/src/components/Cards/.CardSettings.svelte.swp
deleted file mode 100644
index 95e805a..0000000
Binary files a/src/components/Cards/.CardSettings.svelte.swp and /dev/null differ
diff --git a/src/components/Cards/.CardWGControl.svelte.swp b/src/components/Cards/.CardWGControl.svelte.swp
deleted file mode 100644
index 9f5c558..0000000
Binary files a/src/components/Cards/.CardWGControl.svelte.swp and /dev/null differ
diff --git a/src/components/Cards/.CardWGProfiles.svelte.swp b/src/components/Cards/.CardWGProfiles.svelte.swp
deleted file mode 100644
index aed2b85..0000000
Binary files a/src/components/Cards/.CardWGProfiles.svelte.swp and /dev/null differ
diff --git a/src/components/Cards/CardCreateWGUser.svelte b/src/components/Cards/CardCreateWGUser.svelte
index 63a8c89..23d2a76 100644
--- a/src/components/Cards/CardCreateWGUser.svelte
+++ b/src/components/Cards/CardCreateWGUser.svelte
@@ -1,17 +1,3 @@
-<div
-  class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-blueGray-100 border-0"
->
-  <div class="rounded-t bg-white mb-0 px-6 py-6">
-    <div class="text-center flex justify-between">
-      <h6 class="text-blueGray-700 text-xl font-bold">My account</h6>
-      <button
-        class="bg-red-400 text-white active:bg-red-500 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 ease-linear transition-all duration-150"
-        type="button"
-      >
-        Settings
-      </button>
-    </div>
-  </div>
   <div class="flex-auto px-4 lg:px-10 py-10 pt-0">
     <form>
       <h6 class="text-blueGray-400 text-sm mt-3 mb-6 font-bold uppercase">
@@ -30,7 +16,7 @@
               id="grid-username"
               type="text"
               class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
-              value="lucky.jesse"
+              value="" placeholder="User Name" 
             />
           </div>
         </div>
@@ -55,13 +41,13 @@
               class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
               for="grid-address"
             >
-              Address
+              IP Allocation
             </label>
             <input
               id="grid-address"
               type="text"
               class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
-              value="Bld Mihail Kogalniceanu, nr. 8 Bl 1, Sc 1, Ap 09"
+              value=""
             />
           </div>
           <div class="relative w-full mb-3">
@@ -69,13 +55,13 @@
               class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
               for="grid-address"
             >
-              Address
+              Allowed IP
             </label>
             <input
               id="grid-address"
               type="text"
               class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
-              value="Bld Mihail Kogalniceanu, nr. 8 Bl 1, Sc 1, Ap 09"
+              value=""
             />
           </div>
           <div class="relative w-full mb-3">
@@ -83,13 +69,13 @@
               class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
               for="grid-address"
             >
-              Address
+              Extra Allowed IP
             </label>
             <input
               id="grid-address"
               type="text"
               class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
-              value="Bld Mihail Kogalniceanu, nr. 8 Bl 1, Sc 1, Ap 09"
+              value=""
             />
           </div>
       </div>
@@ -103,9 +89,5 @@
 
       <hr class="mt-6 border-b-1 border-blueGray-300" />
 
-      <h6 class="text-blueGray-400 text-sm mt-3 mb-6 font-bold uppercase">
-        About Me
-      </h6>
     </form>
   </div>
-</div>
diff --git a/src/components/Cards/CardTableInf.svelte b/src/components/Cards/CardTableInf.svelte
index 6523236..29f7c01 100644
--- a/src/components/Cards/CardTableInf.svelte
+++ b/src/components/Cards/CardTableInf.svelte
@@ -4,16 +4,25 @@
     let trColor;
     let footprint;
     let infTable = [];
-    onMount(async () => {
-         await axios.get('/api2/wgLogs')
-             .then( response => {
-                 infTable = response.data
-                 });
-         console.log(infTable);
-         });
+    // onMount(async () => {
+    //      const wgResponse = await axios.get('/api2/wgLogs')
+    //          .then( response => {
+    //              infTable = response.data
+    //              });
+    //         return await wgResponse.json();
+    //      });
+
+    async function getwgResponse() {
+            const wgResponse = await fetch(
+                    '/api2/wgLogs'
+                );
+
+            return await wgResponse.json();
+        }
 
     // core components
     import TableDropdown from "components/Dropdowns/TableDropdown.svelte";
+    import CardWGControl from "components/Cards/CardWGControl.svelte";
 
     // can be one of light or dark
     export let color = "light";
@@ -25,8 +34,30 @@
     function handleMouseOut(e) {
         trColor = "dark";
     }
+    
+    let promise = getwgResponse();
+
 </script>
 
+{#await promise}
+
+    <div
+      class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded {color === 'light' ? 'bg-white' : 'bg-red-800 text-white'}"
+    >
+      <div class="rounded-t mb-0 px-4 py-3 border-0">
+        <div class="flex flex-wrap items-center">
+          <div class="relative w-full px-4 max-w-full flex-grow flex-1">
+            <h3
+              class="font-semibold text-lg {color === 'light' ? 'text-blueGray-700' : 'text-white'}"
+            >
+              Fetching...
+            </h3>
+          </div>
+        </div>
+      </div>
+    </div>
+
+{:then infTable}
 <div
   class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded {color === 'light' ? 'bg-white' : 'bg-red-800 text-white'}"
 >
@@ -43,45 +74,45 @@
   </div>
   <div class="block w-full overflow-x-auto">
     <!-- Projects table -->
-    <table class="table-auto items-center w-full bg-transparent border-collapse">
+    <table class="table-auto border-collapse border border-slate-500 w-full">
       <thead>
         <tr>
           <th
-            class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
+            class="px-6 align-middle border border-solid py-3 text-sm uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
           >
             Name
           </th>
           <th
-            class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
+            class="px-6 align-middle border border-solid py-3 text-sm uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
           >
             Mail
           </th>
           <th
-            class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
+            class="px-6 align-middle border border-solid py-3 text-sm uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
           >
             Public Key
           </th>
           <th
-            class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
+            class="px-6 align-middle border border-solid py-3 text-sm uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
           >
             Data In
           </th>
           <th
-            class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
+            class="px-6 align-middle border border-solid py-3 text-sm uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
           >
             Data Out
           </th>
           <th
-            class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
+            class="px-6 align-middle border border-solid py-3 text-sm uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
             >
             Status
           <th
-            class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
+            class="px-6 align-middle border border-solid py-3 text-sm uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
             >
-            Create Time
+            Created Time
           </th>
           <th
-            class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
+            class="px-6 align-middle border border-solid py-3 text-sm uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
             >
             ...
           </th>
@@ -89,49 +120,49 @@
       </thead>
       <tbody>
         {#each infTable as infRows}
-            <tr class="{infRows.wgDin < 1 ? 'bg-red-700 border-red-600 text-red-200' : 'None'} ">
+            <tr class="{infRows.wgDin < 1 ? 'bg-red-50 text-red-500 text-sm' : infRows.wgStatus == 'true' ? 'bg-teal-50 text-sm text-teal-700 ' : 'text-blueGray-500 bg-blueGray-50 text-sm'} ">
                 <td
-                  class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
+                  class="border-t-8 px-4 align-middle border-l-0 border-r-0 whitespace-nowrap p-4 border-slate-700"
                 >
                     { infRows.wgName }
                 </td>
 
                 <td
-                  class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
+                  class="border-t-8 px-4 align-middle border-l-0 border-r-0   whitespace-nowrap p-4"
                 >
                     { infRows.wgMail }
                 </td>
                 <td
-                  class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
+                  class="border-t-8 px-4 align-middle border-l-0 border-r-0   whitespace-nowrap p-4"
                 >
                     { infRows.wgKey }
                 </td>
 
                 <td
-                  class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
+                  class="border-t-8 px-6 align-middle border-l-0 border-r-0   whitespace-nowrap p-4"
                 >
                     { infRows.wgDin/1000000 } MBytes
                 </td>
 
                 <td
-                  class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
+                  class="border-t-8 px-6 align-middle border-l-0 border-r-0   whitespace-nowrap p-4"
                 >
                     { infRows.wgDout/1000000 } MBytes
                 </td>
 
                 <td
-                  class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
+                  class="border-t-8 px-6 align-middle border-l-0 border-r-0 font-bold   whitespace-nowrap p-4"
                 >
-                    { infRows.wgStatus }
+                { infRows.wgStatus == 'true' ? 'Connected Now': infRows.wgDin < 1 ? 'Never Connected' : 'Not Connected Now' }
                 </td>
 
                 <td
-                  class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
+                  class="border-t-8 px-6 align-middle border-l-0 border-r-0   whitespace-nowrap p-4"
                 >
                     { infRows.wgTStamp }
                 </td>
                 <td
-                  class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-right"
+                  class="border-t-8 px-6 align-middle border-l-0 border-r-0   whitespace-nowrap p-4 text-right"
                 >
                   <TableDropdown />
                 </td>
@@ -141,3 +172,24 @@
     </table>
   </div>
 </div>
+{:catch error}
+    <div class="h-screen">
+        <div
+          class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded {color === 'light' ? 'bg-white' : 'bg-red-800 text-white'}"
+        >
+          <div class="rounded-t bg-red-200 mb-0 px-6 py-6">
+            <div class="text-center flex justify-between">
+              <h6 class="uppercase text-blueGray-500 text-xl font-bold">Error</h6>
+            </div>
+          </div>
+          <div class="rounded-t mt-3 mb-3 px-4 py-3 border-0">
+            <div class="flex flex-wrap items-center">
+              <div class="relative w-full h-full px-4 max-w-full flex-grow flex-1">
+                <p class="text-lg text-red-500"> {error.message} </p>
+              </div>
+            </div>
+          </div>
+        </div>
+    </div>
+{/await}
+
diff --git a/src/components/Cards/CardWGControl.svelte b/src/components/Cards/CardWGControl.svelte
index 24627a6..0f16d0e 100644
--- a/src/components/Cards/CardWGControl.svelte
+++ b/src/components/Cards/CardWGControl.svelte
@@ -1,44 +1,75 @@
 <script>
 
-  import CardSettings from "components/Cards/CardSettings.svelte";
+    import CardSettings from "components/Cards/CardSettings.svelte";
     import CardCreateWGUser from "components/Cards/CardCreateWGUser.svelte";
+    import CardWGFilter from "components/Cards/CardWGFilter.svelte";
     import Modal from "components/Modals/Modals.svelte"
+    import CardWGControl from "components/Cards/CardWGControl.svelte";
 
   let showModal = false;
+  let showFilter = false;
+    export let filter = null;
+
+    let submitFilter = null;
   
   function toggleModal(){
     showModal = !showModal;
-    console.log("Cunts...");
+          showFilter = false;
+    console.log("Modal...");
   }
 
+  function handleOnSubmit() {
+          console.log("Submitted...");
+    }
+
+  function toggleFilter(){
+    showFilter = !showFilter;
+          showModal = false;
+          filter = submitFilter;
+    console.log("toggle Filter...");
+    console.log(filter);
+  }
+
+   function getwgResponse(param) {
+            const wgResponse = fetch(
+                    '/api2/wgClients?filter='+param
+                );
+
+            return wgResponse;
+    }
+
+
 </script>
 
 <div
   class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-blueGray-100 border-0"
 >
-  <div class="flex-auto px-4 lg:px-10 py-10 pt-0">
-      <hr class="mt-6 border-b-1 border-blueGray-300" />
-      <h6 class="text-blueGray-400 text-sm mt-3 mb-6 font-bold uppercase">
-        Contact Information
-      </h6>
-    <div class="text-center flex justify">
-      <div></div>
-      <div>
+  <div class="rounded bg-white mb-0 px-6 py-6">
+    <div class="text-center flex justify-between">
+      <h6 class="text-blueGray-700 text-xl font-bold">Action</h6>
+      <div class="sm:flex sm:flex-col">
         <button
-          class="bg-teal-500 text-white active:bg-red-500 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 ease-linear transition-all duration-150"
+          class="mt-3 bg-teal-500 text-white active:bg-red-500 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 ease-linear transition-all duration-150"
           type="button"
           on:click="{toggleModal}"
         >
           Create Profile
         </button>
         <button
-          class="bg-teal-500 text-white active:bg-red-500 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 ease-linear transition-all duration-150"
+          class="mt-3 bg-teal-500 text-white active:bg-red-500 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 ease-linear transition-all duration-150"
+          type="button"
+          on:click="{toggleFilter}"
+        >
+          Filter
+        </button>
+        <button
+          class="mt-3 bg-teal-500 text-white active:bg-red-500 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 ease-linear transition-all duration-150"
           type="button"
         >
           Apply to System
         </button>
         <button
-          class="bg-teal-500 text-white active:bg-red-500 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 ease-linear transition-all duration-150"
+          class="mt-3 bg-red-500 text-white active:bg-red-500 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 ease-linear transition-all duration-150"
           type="button"
         >
           Backup
@@ -49,36 +80,55 @@
 </div>
 
 {#if showModal}
-<div class="modal z-50 fade fixed top-0 left-0 w-full h-full outline-none overflow-x-hidden overflow-y-auto" id="exampleModalCenteredScrollable" tabindex="-1" aria-labelledby="exampleModalCenteredScrollable" aria-modal="true" role="dialog">
-  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable relative w-auto pointer-events-none">
-    <div class="modal-content border-none shadow-lg relative flex flex-col w-full pointer-events-auto bg-white bg-clip-padding rounded-md outline-none text-current">
-      <div class="modal-header flex flex-shrink-0 items-center justify-between p-4 border-b border-gray-200 rounded-t-md">
-        <h5 class="text-xl font-medium leading-normal text-gray-800" id="exampleModalCenteredScrollableLabel">
-          Modal title
-        </h5>
-        <button type="button"
-          class="btn-close box-content w-4 h-4 p-1 text-black border-none rounded-none opacity-50 focus:shadow-none focus:outline-none focus:opacity-100 hover:text-black hover:opacity-75 hover:no-underline"
-          data-bs-dismiss="modal" aria-label="Close"></button>
-      </div>
-      <div class="modal-body relative p-4">
-        <p>This is some placeholder content to show a vertically centered modal. We've added some extra copy here to show how vertically centering the modal works when combined with scrollable modals. We also use some repeated line breaks to quickly extend the height of the content, thereby triggering the scrolling. When content becomes longer than the predefined max-height of modal, content will be cropped and scrollable within the modal.</p>
-    <br><br><br><br><br><br><br><br><br><br>
-    <p>Just like that.</p>
-      </div>
-      <div
-        class="modal-footer flex flex-shrink-0 flex-wrap items-center justify-end p-4 border-t border-gray-200 rounded-b-md">
-        <button type="button"
-          class="inline-block px-6 py-2.5 bg-purple-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-purple-700 hover:shadow-lg focus:bg-purple-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-purple-800 active:shadow-lg transition duration-150 ease-in-out"
-          data-bs-dismiss="modal">
-          Close
-        </button>
-        <button type="button"
-          class="inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out ml-1">
-          Save changes
-        </button>
-      </div>
+    <div
+      class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-blueGray-100 border-0"
+    >
+        <div class="rounded-t bg-cyan-500 mb-0 px-6 py-6">
+          <div class="text-center flex justify-between">
+            <h6 class="text-teal-50 text-xl font-bold">Create Account</h6>
+          </div>
+        </div>
+        <div class="rounded-t bg-white mb-0 px-6 py-6">
+            <CardCreateWGUser />
+            <button
+              class="bg-teal-500 text-white active:bg-red-500 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 ease-linear transition-all duration-150"
+              type="button"
+              on:click="{toggleModal}"
+            >
+              Apply
+            </button>
+            <button
+              class="bg-red-400 text-white active:bg-red-500 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 ease-linear transition-all duration-150"
+              type="button"
+            >
+              Cancel
+            </button>
+        </div>
+    </div>
+{:else if showFilter}
+    <div
+      class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-blueGray-100 border-0"
+    >
+        <div class="rounded-t bg-teal-500 mb-0 px-6 py-6">
+          <div class="text-center flex justify-between">
+            <h6 class="text-teal-50 text-xl font-bold">Create Filter</h6>
+            <button
+              class="bg-red-400 text-white active:bg-red-500 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 ease-linear transition-all duration-150"
+              type="button"
+              on:click="{toggleFilter}"
+            >
+              Cancel
+            </button>
+          </div>
+        </div>
+        <div class="rounded-t bg-white mb-0 px-6 py-6">
+            <div
+              class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-blueGray-100 border-0"
+            >
+              <div class="flex-auto px-4 lg:px-10 py-10 pt-0">
+                  <CardWGFilter bind:submitFilter={submitFilter} on:submit={handleOnSubmit} />
+              </div>
+            </div>
+        </div>
     </div>
-  </div>
-</div>
-
 {/if}
diff --git a/src/components/Cards/CardWGFilter.svelte b/src/components/Cards/CardWGFilter.svelte
new file mode 100644
index 0000000..a06176e
--- /dev/null
+++ b/src/components/Cards/CardWGFilter.svelte
@@ -0,0 +1,81 @@
+<script>
+    export let submitFilter = null;
+    function validate() {
+            console.log("I'm the tester function");
+            submitFilter = "meta";
+            console.log(submitFilter);
+        }
+</script>
+
+    <form on:submit|preventDefault={validate}>
+      <h6 class="text-blueGray-400 text-sm mt-3 mb-6 font-bold uppercase">
+        User Information
+      </h6>
+      <div class="flex flex-wrap">
+        <div class="w-full lg:w-12/12 px-4">
+          <div class="relative w-full mb-3">
+            <label
+              class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
+              for="grid-username"
+            >
+              Username
+            </label>
+            <select class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150" >
+              <option class="text-blueGray-100" value="" disabled selected>Select the Organization</option>
+
+              <option>GCI</option>
+              <option>META</option>
+              <option>PH-Training</option>
+
+            </select>
+          </div>
+
+          <div class="relative w-full mb-3">
+            <label
+              class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
+              for="grid-username"
+            >
+              Organization
+            </label>
+            <select class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150" >
+              <option class="text-blueGray-100" value="" disabled selected>Select the Organization</option>
+              <option value="gci">GCI</option>
+              <option value="meta">META</option>
+              <option value="ph-training">PH-Training</option>
+            </select>
+          </div>
+
+          <div class="relative w-full mb-3">
+            <label
+              class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
+              for="grid-username"
+            >
+              Email Domain
+            </label>
+          <select class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150" >
+            <option class="text-blueGray-100" value="" disabled selected>Select the Organization</option>
+            <option>GCI</option>
+            <option>META</option>
+            <option>PH-Training</option>
+          </select>
+          </div>
+          <div class="relative w-full mb-3">
+            <label
+              class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
+              for="grid-username"
+            >
+              ---
+            </label>
+            <select class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150" >
+              <option class="text-blueGray-100" value="" disabled selected>Select the Organization</option>
+              <option>GCI</option>
+              <option>META</option>
+              <option>PH-Training</option>
+            </select>
+          </div>
+            <button
+              class="bg-teal-500 text-white active:bg-red-500 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 ease-linear transition-all duration-150"
+              type="submit" >
+              Apply
+            </button>
+    </form>
diff --git a/src/components/Cards/CardWGProfiles.svelte b/src/components/Cards/CardWGProfiles.svelte
index 6a612ee..bde3534 100644
--- a/src/components/Cards/CardWGProfiles.svelte
+++ b/src/components/Cards/CardWGProfiles.svelte
@@ -2,14 +2,22 @@
     // import axios from 'axios';
     // import {onMount} from 'svelte';
     let footprint;
-    export let wgProfileData = [];
-    // onMount(async () => {
-    //         await axios.get('http://127.0.0.1:8000/api2/wgClients')
-    //             .then( response => {
-    //                 wgProfileData = response.data
-    //                 });
-    //         console.log(wgProfileData);
-    //         });
+    let promise;
+
+    export let wgResponse = null;
+    export let filter = null;
+
+    async function getwgResponse(o_filter) {
+            const wgResponse = await fetch(
+                    '/api2/wgClients?filter='+o_filter
+                );
+
+            return await wgResponse.json();
+        }
+
+    // let promise = getwgResponse();
+    $: filter != null ?
+        promise = getwgResponse(filter) : promise = getwgReseponse("");
 
   // core components
 
@@ -19,6 +27,20 @@
   export let color = "light";
 </script>
 
+{#await promise}
+
+    <div
+      class="rounded relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded {color === 'light' ? 'bg-white' : 'bg-red-800 text-white'}"
+    >
+      <div class="rounded bg-white mb-0 px-6 py-6">
+        <div class="text-center flex justify-between">
+          <h6 class="uppercase text-blueGray-500 text-xl font-bold">Fetching . . .</h6>
+        </div>
+      </div>
+    </div>
+
+{:then wgProfileData}
+
 <div
   class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded {color === 'light' ? 'bg-white' : 'bg-red-800 text-white'}"
 >
@@ -39,42 +61,42 @@
       <thead>
         <tr>
           <th
-            class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
+            class="px-6 align-middle border border-solid py-3 text-sm uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
           >
             #
           </th>
           <th
-            class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
+            class="px-6 align-middle border border-solid py-3 text-sm uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
           >
             Name
           </th>
           <th
-            class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
+            class="px-6 align-middle border border-solid py-3 text-sm uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
           >
             Mail
           </th>
           <th
-            class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
+            class="px-6 align-middle border border-solid py-3 text-sm uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
           >
             Assigned IP
           </th>
           <th
-            class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
+            class="px-6 align-middle border border-solid py-3 text-sm uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
           >
             Allowed IP
           </th>
           <th
-            class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
+            class="uppercase px-6 align-middle border border-solid py-3 text-sm uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
           >
             Status
           </th>
           <th
-            class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
+            class="px-6 align-middle border border-solid py-3 text-sm uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
             >
             Created Time
           </th>
           <th
-            class="px-6 align-middle border border-solid py-3 text-xs uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
+            class="px-6 align-middle border border-solid py-3 text-sm uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
             >
             Action
           </th>
@@ -82,49 +104,49 @@
       </thead>
       <tbody>
         {#each wgProfileData as infRows}
-            <tr>
+            <tr class="{infRows.enabled != true ? 'bg-red-50 text-red-500 text-sm' : 'text-blueGray-500 bg-white text-sm'} ">
                 <td
-                  class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
+                  class="border-t-8 px-6 align-middle border-l-0 border-r-0 text-sm whitespace-nowrap p-4"
                 >
                     { infRows.data_id }
                 </td>
 
                 <td
-                  class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
+                  class="border-t-8 px-6 align-middle border-l-0 border-r-0 text-sm whitespace-nowrap p-4"
                 >
                     { infRows.name }
                 </td>
                 <td
-                  class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
+                  class="border-t-8 px-6 align-middle border-l-0 border-r-0 text-sm whitespace-nowrap p-4"
                 >
                     { infRows.email }
                 </td>
 
                 <td
-                  class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
+                  class="border-t-8 px-6 align-middle border-l-0 border-r-0 text-sm whitespace-nowrap p-4"
                 >
                     { infRows.allocated_ips }
                 </td>
 
                 <td
-                  class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
+                  class="border-t-8 px-6 align-middle border-l-0 border-r-0 text-sm whitespace-nowrap p-4"
                 >
                     { infRows.allowed_ips }
                 </td>
 
                 <td
-                  class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
+                  class="border-t-8 px-6 align-middle border-l-0 border-r-0 text-sm whitespace-nowrap p-4 font-bold"
                 >
-                    { infRows.enabled }
+                    { infRows.enabled != true ? 'Disabled' : 'Enabled' }
                 </td>
 
                 <td
-                  class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4"
+                  class="border-t-8 px-6 align-middle border-l-0 border-r-0 text-sm whitespace-nowrap p-4"
                 >
                     { infRows.updated_at }
                 </td>
                 <td
-                  class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-right"
+                  class="border-t-8 px-6 align-middle border-l-0 border-r-0 text-sm whitespace-nowrap p-4 text-right"
                 >
                   <TableDropdown />
                 </td>
@@ -134,3 +156,26 @@
     </table>
   </div>
 </div>
+
+{:catch error}
+
+    <div class="h-screen w-full">
+        <div
+          class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded {color === 'light' ? 'bg-white' : 'bg-red-800 text-white'}"
+        >
+          <div class="rounded-t bg-red-200 mb-0 px-6 py-6">
+            <div class="text-center flex justify-between">
+              <h6 class="uppercase text-blueGray-500 text-xl font-bold">Error</h6>
+            </div>
+          </div>
+          <div class="rounded-t mt-3 mb-3 px-4 py-3 border-0">
+            <div class="flex flex-wrap items-center">
+              <div class="relative w-full h-full px-4 max-w-full flex-grow flex-1">
+                <p class="text-lg text-red-500"> {error.message} </p>
+              </div>
+            </div>
+          </div>
+        </div>
+    </div>
+
+{/await}
diff --git a/src/components/Headers/GlobalHeader.svelte b/src/components/Headers/GlobalHeader.svelte
index f876203..92617e7 100644
--- a/src/components/Headers/GlobalHeader.svelte
+++ b/src/components/Headers/GlobalHeader.svelte
@@ -1,8 +1,10 @@
 <script>
-
+  import HeaderStats from "components/Headers/HeaderStats.svelte";
 </script>
 
 <!-- Header -->
 <div class="relative bg-teal-500 md:pt-32 pb-32 pt-12">
+
+        <HeaderStats />
     
 </div>
diff --git a/src/components/Sidebar/Sidebar.svelte b/src/components/Sidebar/Sidebar.svelte
index f4dd59c..10b8f10 100644
--- a/src/components/Sidebar/Sidebar.svelte
+++ b/src/components/Sidebar/Sidebar.svelte
@@ -109,6 +109,19 @@
           </a>
         </li>
 
+        <li class="items-center">
+          <a
+            use:link
+            href="/admin/wgProfiles"
+            class="text-xs uppercase py-3 font-bold block {location.href.indexOf('/admin/tables') !== -1 ? 'text-red-500 hover:text-red-600':'text-blueGray-700 hover:text-blueGray-500'}"
+          >
+            <i
+              class="fas fa-table mr-2 text-sm {location.href.indexOf('/admin/tables') !== -1 ? 'opacity-75' : 'text-blueGray-300'}"
+            ></i>
+            WireGuard Profiles
+          </a>
+        </li>
+
         <li class="items-center">
           <a
             use:link
@@ -125,16 +138,15 @@
         <li class="items-center">
           <a
             use:link
-            href="/admin/wgProfiles"
+            href="/admin/wgBlast"
             class="text-xs uppercase py-3 font-bold block {location.href.indexOf('/admin/tables') !== -1 ? 'text-red-500 hover:text-red-600':'text-blueGray-700 hover:text-blueGray-500'}"
           >
             <i
               class="fas fa-table mr-2 text-sm {location.href.indexOf('/admin/tables') !== -1 ? 'opacity-75' : 'text-blueGray-300'}"
             ></i>
-            WireGuard Profiles
+            WireGuard Blast
           </a>
         </li>
-
         <li class="items-center">
           <a
             use:link
diff --git a/src/layouts/Admin.svelte b/src/layouts/Admin.svelte
index 84ee32b..063f14c 100644
--- a/src/layouts/Admin.svelte
+++ b/src/layouts/Admin.svelte
@@ -14,6 +14,7 @@
   import Tables from "views/admin/Tables.svelte";
   import wgLogs from "views/admin/wgLogs.svelte";
   import wgProfiles from "views/admin/wgProfiles.svelte";
+  import wgBlast from "views/admin/wgBlast.svelte";
   import Maps from "views/admin/Maps.svelte";
 
   export let location;
@@ -32,6 +33,7 @@
         <Route path="tables" component="{Tables}" />
         <Route path="wgLogs" component="{wgLogs}" />
         <Route path="wgProfiles" component="{wgProfiles}" />
+        <Route path="wgBlast" component="{wgBlast}" />
         <Route path="maps" component="{Maps}" />
       </Router>
       <FooterAdmin />
diff --git a/src/views/admin/.wgProfiles.svelte.swp b/src/views/admin/.wgProfiles.svelte.swp
deleted file mode 100644
index d554fca..0000000
Binary files a/src/views/admin/.wgProfiles.svelte.swp and /dev/null differ
diff --git a/src/views/admin/Dashboard.svelte b/src/views/admin/Dashboard.svelte
index be143e6..e6504b5 100644
--- a/src/views/admin/Dashboard.svelte
+++ b/src/views/admin/Dashboard.svelte
@@ -11,9 +11,6 @@
 
 
 <div>
-    <div class="mt-3 mb-6">
-        <HeaderStats />
-    </div>
   <div class="flex flex-wrap">
     <div class="w-full xl:w-8/12 mb-12 xl:mb-0 px-4">
       <CardLineChart />
diff --git a/src/views/admin/wgBlast.svelte b/src/views/admin/wgBlast.svelte
new file mode 100644
index 0000000..edaca16
--- /dev/null
+++ b/src/views/admin/wgBlast.svelte
@@ -0,0 +1,22 @@
+<script>
+  // core components
+  import axios from 'axios';
+  import {onMount} from 'svelte';
+  import CardWGProfile from "components/Cards/CardWGProfiles.svelte";
+  import CardWGControl from "components/Cards/CardWGControl.svelte";
+  export let location;
+  let wgProfileFetch = [];
+  // onMount(async () => {
+  //         await axios.get('http://192.168.10.2:8000/api2/wgClients')
+  //             .then( response => {
+  //                 wgProfileFetch = response.data
+  //                 });
+  //         console.log(wgProfileFetch);
+  //         });
+</script>
+
+<div class="flex flex-wrap mt-4 mb-8">
+      <CardWGControl />
+      <CardWGProfile />
+
+</div>
diff --git a/src/views/admin/wgProfiles.svelte b/src/views/admin/wgProfiles.svelte
index 788d70a..2f71bb0 100644
--- a/src/views/admin/wgProfiles.svelte
+++ b/src/views/admin/wgProfiles.svelte
@@ -4,20 +4,26 @@
   import {onMount} from 'svelte';
   import CardWGProfile from "components/Cards/CardWGProfiles.svelte";
   import CardWGControl from "components/Cards/CardWGControl.svelte";
-  export let location;
+
+  let wgResponse = null;
+    let filter = "";
+    let unique = {};
+
   let wgProfileFetch = [];
-  onMount(async () => {
-          await axios.get('http://192.168.10.2:8000/api2/wgClients')
-              .then( response => {
-                  wgProfileFetch = response.data
-                  });
-          console.log(wgProfileFetch);
-          });
+
+    async function update_wg_table() {
+
+        }
+  // onMount(async () => {
+  //         await axios.get('http://192.168.10.2:8000/api2/wgClients')
+  //             .then( response => {
+  //                 wgProfileFetch = response.data
+  //                 });
+  //         console.log(wgProfileFetch);
+  //         });
 </script>
 
-<CardWGControl />
 <div class="flex flex-wrap mt-4 mb-8">
-      <CardWGProfile 
-       wgProfileData = { wgProfileFetch }
-          />
+    <CardWGControl bind:filter={filter}/>
+    <CardWGProfile wgResponse={wgResponse} bind:filter={filter}/>
 </div>