diff --git a/frontend/vite/src/conf.ts b/frontend/vite/src/conf.ts
index eb6bf75a..f7d87309 100644
--- a/frontend/vite/src/conf.ts
+++ b/frontend/vite/src/conf.ts
@@ -1,2 +1,2 @@
-// export const graphql_url = 'http://192.168.0.196:8000/felicity-gql'
-export const graphql_url = 'http://localhost:8000/felicity-gql'
\ No newline at end of file
+export const graphql_url = 'http://192.168.137.97:8000/felicity-gql'
+// export const graphql_url = 'http://localhost:8000/felicity-gql'
\ No newline at end of file
diff --git a/frontend/vite/src/views/_components/nav/NavigationAside.vue b/frontend/vite/src/views/_components/nav/NavigationAside.vue
index 46944d12..a10ef6c2 100644
--- a/frontend/vite/src/views/_components/nav/NavigationAside.vue
+++ b/frontend/vite/src/views/_components/nav/NavigationAside.vue
@@ -12,42 +12,42 @@
         <router-link to="/dashboard" id="dashboard-link" class="flex items-center has-tooltip mt-1 py-2 px-6 text-gray-500 hover:bg-gray-600 hover:bg-opacity-25 hover:text-gray-100 border-l-4 border-gray-700">
           <span class="mr-4"><font-awesome-icon icon="tachometer-alt" /></span>
           <span v-if="viewNavText">Dashboard</span>
-          <span v-else class="tooltip bg-gray-700 text-gray-200 p-1 border-1 rounded">Dashboard</span>
+          <span v-else class="tooltip ">Dashboard</span>
         </router-link>
         <router-link to="/patients-compact" id="patients-compact-link" class="flex items-center has-tooltip mt-1 py-2 px-6 text-gray-500 hover:bg-gray-600 hover:bg-opacity-25 hover:text-gray-100 border-l-4 border-gray-700">
           <span class="mr-4"><font-awesome-icon icon="bullseye" /></span>
           <span v-if="viewNavText">Compact</span>
-          <span v-else class="tooltip bg-gray-700 text-gray-200 p-1 border-1 rounded">Compact</span>
+          <span v-else class="tooltip ">Compact</span>
         </router-link>
         <router-link to="/patients" id="patients-link" class="flex items-center has-tooltip mt-1 py-2 px-6 text-gray-500 hover:bg-gray-600 hover:bg-opacity-25 hover:text-gray-100 border-l-4 border-gray-700">
           <span class="mr-4"><font-awesome-icon icon="user-injured" /></span>
           <span v-if="viewNavText">Patients</span>
-          <span v-else class="tooltip bg-gray-700 text-gray-200 p-1 border-1 rounded">Patients</span>
+          <span v-else class="tooltip ">Patients</span>
         </router-link>
         <router-link to="/clients" id="clients-link" class="flex items-center has-tooltip mt-1 py-2 px-6 text-gray-500 hover:bg-gray-600 hover:bg-opacity-25 hover:text-gray-100 border-l-4 border-gray-700">
           <span class="mr-4"><font-awesome-icon icon="clinic-medical" /></span>
           <span v-if="viewNavText">Clients</span>
-          <span v-else class="tooltip bg-gray-700 text-gray-200 p-1 border-1 rounded">Clients</span>
+          <span v-else class="tooltip ">Clients</span>
         </router-link>
         <router-link to="/samples" id="samples-link" class="flex items-center has-tooltip mt-1 py-2 px-6 text-gray-500 hover:bg-gray-600 hover:bg-opacity-25 hover:text-gray-100 border-l-4 border-gray-700">
           <span class="mr-4"><font-awesome-icon icon="vial" /></span>
           <span v-if="viewNavText">Samples</span>
-          <span v-else class="tooltip bg-gray-700 text-gray-200 p-1 border-1 rounded">Samples</span>
+          <span v-else class="tooltip ">Samples</span>
         </router-link>
         <router-link to="/worksheets" id="worksheets-link" class="flex items-center has-tooltip mt-1 py-2 px-6 text-gray-500 hover:bg-gray-600 hover:bg-opacity-25 hover:text-gray-100 border-l-4 border-gray-700">
           <span class="mr-4"><font-awesome-icon icon="grip-vertical" /></span>
           <span v-if="viewNavText">WorkSheets</span>
-          <span v-else class="tooltip bg-gray-700 text-gray-200 p-1 border-1 rounded">WorkSheets</span>
+          <span v-else class="tooltip ">WorkSheets</span>
         </router-link>
         <router-link to="/kanban-boards" id="kanban-link" class="flex items-center has-tooltip mt-1 py-2 px-6 text-gray-500 hover:bg-gray-600 hover:bg-opacity-25 hover:text-gray-100 border-l-4 border-gray-700">
           <span class="mr-4"><font-awesome-icon icon="tasks" /></span>
           <span v-if="viewNavText">Boards</span>
-          <span v-else class="tooltip bg-gray-700 text-gray-200 p-1 border-1 rounded">Boards</span>
+          <span v-else class="tooltip ">Boards</span>
         </router-link>
         <router-link to="/documents" id="markdown-link" class="flex items-center has-tooltip mt-1 py-2 px-6 text-gray-500 hover:bg-gray-600 hover:bg-opacity-25 hover:text-gray-100 border-l-4 border-gray-700">
           <span class="mr-4"><font-awesome-icon icon="book" /></span>
           <span v-if="viewNavText">Documents</span>
-          <span v-else class="tooltip bg-gray-700 text-gray-200 p-1 border-1 rounded">Documents</span>
+          <span v-else class="tooltip ">Documents</span>
         </router-link>
       </nav>
     </div>
@@ -79,7 +79,7 @@
 }
 
 .has-tooltip:hover .tooltip {
-  @apply visible z-50 left-16;
+  @apply visible z-50 mt-10 left-16 bg-gray-500 text-gray-200 p-1 rounded;
 }
 
 </style>
diff --git a/frontend/vite/src/views/admin/Admin.vue b/frontend/vite/src/views/admin/Admin.vue
index 52ef8697..9037a716 100644
--- a/frontend/vite/src/views/admin/Admin.vue
+++ b/frontend/vite/src/views/admin/Admin.vue
@@ -1,6 +1,6 @@
 <template>
 
-    <div class="container  mx-auto w-full my-4">
+    <div class="container w-full my-4">
         <h5>Laboratory Setup</h5>
         <ul class="grid grid-cols-12 gap-4 my-2.5">
             <item-setting 
diff --git a/frontend/vite/src/views/admin/index.vue b/frontend/vite/src/views/admin/index.vue
index 15264fb2..658bb2ca 100644
--- a/frontend/vite/src/views/admin/index.vue
+++ b/frontend/vite/src/views/admin/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="px-6">
+  <div class="">
     <div class="flex justify-start">
       <span @click="resetSelected" class="mr-4">
         <router-link to="/admin" class="no-underline">
diff --git a/frontend/vite/src/views/admin/worksheets/index.vue b/frontend/vite/src/views/admin/worksheets/index.vue
index 18044feb..31af05cc 100644
--- a/frontend/vite/src/views/admin/worksheets/index.vue
+++ b/frontend/vite/src/views/admin/worksheets/index.vue
@@ -442,6 +442,7 @@ export default defineComponent({
     }
 
     function generatePreview(wst: IWorkSheetTemplate): void {
+      console.log(wst);
       let items = [];
       const indexes = Array.from({length: wst?.numberOfSamples + wst?.reserved?.length}, (x, i) => i + 1);
       
@@ -451,6 +452,9 @@ export default defineComponent({
           item.row = 1;
           item.col = 1;
           item.name ="sample"
+          if(wst?.reserved?.some(x => x.position === i)){
+            item.name ="control"
+          }
           item.sampleUid = "";
           wst?.reserved?.forEach(r => {
             if(r[1]?.position === i) {
@@ -467,6 +471,7 @@ export default defineComponent({
       Object.assign(workSheetTemplate, ws);
       const items = generatePreview(ws);
       workSheetTemplate!.preview = items;
+      console.log(items);
     }
 
     function addReserved(): void {
diff --git a/frontend/vite/src/views/patient/AddPatient.vue b/frontend/vite/src/views/patient/AddPatient.vue
index dfcd7ec4..afb4cfe4 100644
--- a/frontend/vite/src/views/patient/AddPatient.vue
+++ b/frontend/vite/src/views/patient/AddPatient.vue
@@ -1,5 +1,6 @@
 <template>
-  <form action="post" class="p-1">
+  <h1 class="h1 my-4 font-bold text-dark-700">Add New Patient:</h1>
+  <form action="post" class="border-2 border-gray-900 border-dotted rounded p-4" autocomplete="yebo">
         <label class="block mb-2">
           <span class="text-gray-700">Patient Unique Identifier</span>
           <input class="form-input mt-1 block w-full" v-model="patientForm.clientPatientId" placeholder="Patient Unique Identifier" />
@@ -42,7 +43,7 @@
               <option v-for="(sex, indx) in genders" :key="sex.index" :value="indx"> {{ sex }}</option>
             </select>
           </label>
-          <label class="block mb-2 w-full" >
+          <label class="block  mx-2 mb-2 w-full" >
             <span class="text-gray-700">Mobile Number</span>
             <input class="form-input mt-1 block w-full" type="number" v-model="patientForm.phoneMobile" placeholder="Mobile Number" />
           </label>
@@ -112,7 +113,7 @@
 import { useMutation } from '@urql/vue';
 import { defineComponent, ref, reactive, computed } from 'vue';
 import { mapGetters, useStore } from 'vuex';
-import { useRouter } from 'vue-router';
+import { useRouter, useRoute } from 'vue-router';
 import { useQuery } from '@urql/vue';
 import tabSamples from '../_components/AnalyisRequestListing.vue';
 import tabCases from './comps/CaseTable.vue';
@@ -145,6 +146,7 @@ export default defineComponent({
   setup(context) {
     let store = useStore();
     let router = useRouter();
+    let route = useRoute();
 
     const nullPatient = new Patient();
     let createAction = ref(true);
@@ -155,6 +157,7 @@ export default defineComponent({
     let currentTabComponent = computed(() => 'tab-' + currentTab.value);
 
     let patientForm = reactive({ ...nullPatient });
+    patientForm.clientPatientId = route.query.cpid;
 
     let provinces = ref([]);
     let districts = ref([]);
diff --git a/frontend/vite/src/views/patient/Patients.vue b/frontend/vite/src/views/patient/Patients.vue
index 6f4b931e..761a686e 100644
--- a/frontend/vite/src/views/patient/Patients.vue
+++ b/frontend/vite/src/views/patient/Patients.vue
@@ -4,6 +4,7 @@
       <input
         class="w-1/4 pl-4 h-10 pr-2 py-1 my-4 text-sm text-gray-700 placeholder-gray-600 border-1 border-gray-400 rounded-md  focus:placeholder-gray-500 focus:border-green-100 focus:outline-none focus:shadow-outline-purple form-input"
         type="text" placeholder="Patient Search ..." aria-label="Search"
+        v-model="patientSearch"
         @keyup="searchPatients($event)"
         @focus="setPatientToNull()"
       />
@@ -79,7 +80,7 @@
     <hr class="my-2">
 
     <router-link
-      to="/patients/register"
+      :to="{ name: 'patients-register', query: { cpid: patientSearch } }"
       class="px-4 p-1 text-sm border-blue-500 border text-dark-700 transition-colors duration-150 rounded focus:outline-none hover:bg-blue-500 hover:text-gray-100">
       Register New Patiet
     </router-link>
@@ -136,6 +137,7 @@ export default defineComponent({
     let currentTabComponent = computed(() => 'tab-' + currentTab.value);
 
     let patientForm = reactive({ ...nullPatient });
+    let patientSearch = ref('');
 
     let provinces = ref([]);
     let districts = ref([]);
@@ -235,6 +237,7 @@ export default defineComponent({
       patientForm,
       getPatientFullName,
       patients: computed(() => store.getters.getPatients),
+      patientSearch,
       isPatientSelected,
       selectPatient,
       setPatientToNull,