diff --git a/app/controllers/patients_controller.rb b/app/controllers/patients_controller.rb
index e8c07f70..d00f5628 100644
--- a/app/controllers/patients_controller.rb
+++ b/app/controllers/patients_controller.rb
@@ -3,15 +3,7 @@ class PatientsController < ApplicationController
 
   # GET /patients/
   def index
-    @search_text = params.fetch(:search, "")
-    @facility_id = params.fetch(:facility, "")
-
-    @facilities = policy_scope(Facility).map { |f| [f.name, f.id] }
-    @facilities.unshift(["all", nil])
-
-    # filter and paginate
-    @patients = filter_patients(@search_text, @facility_id)
-    authorize Patient
+    @patients = Patient.get_formatted
   end
 
   # GET /patients/new
@@ -102,13 +94,4 @@ def patient_params
         :facility_id,
       )
   end
-
-  def filter_patients(search_text, facility_id)
-    return policy_scope(Patient).where(facility_id: facility_id) if (facility_id != "")
-
-    policy_scope(Patient).where(
-      "full_name ILIKE :search_text",
-      search_text: "%#{search_text}%",
-    )
-  end
 end
diff --git a/app/javascript/Patient/Patients.res b/app/javascript/Patient/Patients.res
new file mode 100644
index 00000000..94168cef
--- /dev/null
+++ b/app/javascript/Patient/Patients.res
@@ -0,0 +1,31 @@
+type patient = Patients__Types.patient
+type props = Patients__Types.props
+
+let s = React.string
+
+@react.component
+let make = (~props: props) => {
+    
+    <div className=" py-6">
+        <div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
+            <div className="flex mb-5 ml-1 items-center justify-between">
+                <div className="font-semibold text-xl">{s("Patients")}</div>
+
+                <div className="flex space-x-4">
+                    <Link
+                        className="cursor-pointer inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+                        href="patients/new"
+                        text="Create New Patient"
+                    />
+                </div>
+            </div>
+            <div className="flex flex-col">
+                <div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+                    <div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
+                        <Patients__PatientsTable patients={props.patients} />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+}
\ No newline at end of file
diff --git a/app/javascript/Patient/Patients__Types.res b/app/javascript/Patient/Patients__Types.res
new file mode 100644
index 00000000..fa5e91cf
--- /dev/null
+++ b/app/javascript/Patient/Patients__Types.res
@@ -0,0 +1,23 @@
+type patient = {
+    id: string,
+    name: string,
+    dob: Js.Date.t,
+    phone: string,
+    address: string,
+}
+
+type patients = array<patient>
+
+type props = {patients: patients}
+
+
+let decode = json => {
+    open Json.Decode
+    {
+        id: field("id", string, json),
+        name: field("name", string, json),
+        dob: field("dob", date, json),
+        phone: field("phone", string, json),
+        address: field("address", string, json)
+    }
+}
\ No newline at end of file
diff --git a/app/javascript/Patient/components/Link.res b/app/javascript/Patient/components/Link.res
new file mode 100644
index 00000000..db8984db
--- /dev/null
+++ b/app/javascript/Patient/components/Link.res
@@ -0,0 +1,15 @@
+@val external window: {..} = "window"
+
+let s = React.string
+
+@react.component
+let make = (~className: string, ~href: string, ~text: string) => {
+    <a 
+        className={className}
+        onClick={event => {
+            event->ReactEvent.Mouse.stopPropagation
+            window["location"]["href"] = href
+        }}>
+        {s(text)}
+    </a>
+}
\ No newline at end of file
diff --git a/app/javascript/Patient/components/Patients__PatientsTable.res b/app/javascript/Patient/components/Patients__PatientsTable.res
new file mode 100644
index 00000000..da062f07
--- /dev/null
+++ b/app/javascript/Patient/components/Patients__PatientsTable.res
@@ -0,0 +1,84 @@
+type patient = Patients__Types.patient
+type patients = Patients__Types.patients
+
+let s = React.string
+
+
+module Patient = {
+    @react.component
+    let make = (~patient: patient) => {
+        <tr className="bg-white">
+            <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
+                {s(patient.name)}
+            </td>
+
+            <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                {s(patient.dob->Js.Date.toDateString)}
+            </td>
+
+            <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                {s(patient.phone)}
+            </td>
+
+            <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                {s(patient.address)}
+            </td>
+
+            <td className="px-6 py-4 whitespace-nowrap text-center text-sm font-medium">
+                <Link
+                    className="cursor-pointer text-indigo-600 hover:text-indigo-900"
+                    href={`patients/${patient.id}`}
+                    text="Visit"
+                />
+            </td>
+        </tr>
+    }
+}
+
+
+@react.component
+let make = (~patients: patients) => {
+
+
+    <div className="shadow overflow-hidden border-b border-gray-200 rounded-lg">
+        <table className="min-w-full divide-y divide-gray-200">
+            <thead className="bg-gray-50">
+                <tr>
+                    <th
+                        scope="col"
+                        className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                        {s("Full Name")}
+                    </th>
+                    <th
+                        scope="col"
+                        className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                        {s("Date of Birth")}
+                    </th>
+                    <th
+                        scope="col"
+                        className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                        {s("Phone")}
+                    </th>
+                    <th
+                        scope="col"
+                        className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                        {s("Address")}
+                    </th>
+                    <th
+                        scope="col"
+                        colSpan={2}
+                        className="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">
+                        {s("Actions")}
+                    </th>
+                </tr>
+            </thead>
+            <tbody>
+                {
+                    patients->Js.Array2.map(patient =>
+                        <Patient key={patient.id} patient />
+                    )->React.array
+                }
+            </tbody>
+        </table>
+    </div>
+}
\ No newline at end of file
diff --git a/app/javascript/packs/PatientsPack.res b/app/javascript/packs/PatientsPack.res
new file mode 100644
index 00000000..55b08493
--- /dev/null
+++ b/app/javascript/packs/PatientsPack.res
@@ -0,0 +1,15 @@
+type props = Patients__Types.props
+
+let decode: Js.Json.t => props = json => {
+  open Json.Decode
+  {
+    patients: field("patients", array(Patients__Types.decode), json),
+  }
+}
+let props = DomUtils.parseJSONTag(~id="patients-data", ()) |> decode
+
+
+switch ReactDOM.querySelector(`#patients`) {
+| Some(id) => ReactDOM.render(<Patients props />, id)
+| None => ()
+}
\ No newline at end of file
diff --git a/app/javascript/schedule/Schedule.res b/app/javascript/schedule/Schedule.res
index b052841c..67578503 100644
--- a/app/javascript/schedule/Schedule.res
+++ b/app/javascript/schedule/Schedule.res
@@ -10,10 +10,10 @@ let make = (~props: props) => {
   let (sortOption, setSortOption) = React.useState(_ => "next_visit")
   let (sortAscending, setSortAscending) = React.useState(_ => true)
   let (patients, updatePatients) = React.useReducer(
-    Patients.reducer,
+    Schedule__Patients.reducer,
     {unselectedPatients: props.patients, selectedPatients: []},
   )
-  let (filters, updateFilters) = React.useReducer(Filter.reducer, {procedures: [], wards: []})
+  let (filters, updateFilters) = React.useReducer(Schedule__Filter.reducer, {procedures: [], wards: []})
 
   React.useEffect4(() => {
     let procedure_filtered_patients = !(filters.procedures->length == 0)
@@ -41,20 +41,20 @@ let make = (~props: props) => {
 
     let sorted_patients = filtered_patients->Schedule__Utils.jssort(sortOption, sortAscending)
 
-    Patients.SetUnSelectedPatients(sorted_patients)->updatePatients
+    Schedule__Patients.SetUnSelectedPatients(sorted_patients)->updatePatients
     None
   }, (searchTerm, sortOption, sortAscending, filters))
 
   <div>
     <div className="p-8 sm:flex items-center justify-center self-center text-center bg-white">
-      <Search setSearchTerm placeholder="Search Patients" />
-      <Sort setSortOption sortAscending setSortAscending />
-      <Filter
+      <Schedule__Search setSearchTerm placeholder="Search Patients" />
+      <Schedule__Sort setSortOption sortAscending setSortAscending />
+      <Schedule__Filter
         procedures={props.patients->Schedule__Utils.jsunion("procedures")}
         selectedFilters={filters}
         updateFilters
       />
     </div>
-    <Patients patients updatePatients />
+    <Schedule__Patients patients updatePatients />
   </div>
 }
diff --git a/app/javascript/schedule/components/Filter.res b/app/javascript/schedule/components/Schedule__Filter.res
similarity index 97%
rename from app/javascript/schedule/components/Filter.res
rename to app/javascript/schedule/components/Schedule__Filter.res
index 88069aa4..9b4912ff 100644
--- a/app/javascript/schedule/components/Filter.res
+++ b/app/javascript/schedule/components/Schedule__Filter.res
@@ -82,7 +82,7 @@ module FilterSection = {
 
     <div className="py-1">
       <div className="text-center p-2 font-bold"> {s(name ++ "(s)")} </div>
-      {searchbar ? <Search setSearchTerm placeholder={"Search " ++ name ++ "(s)"} /> : <div />}
+      {searchbar ? <Schedule__Search setSearchTerm placeholder={"Search " ++ name ++ "(s)"} /> : <div />}
       <div className="grid grid-cols-1 justify-items-start md:grid-cols-2">
         {options
         ->Belt.Array.map(option =>
diff --git a/app/javascript/schedule/components/Pagination.res b/app/javascript/schedule/components/Schedule__Pagination.res
similarity index 100%
rename from app/javascript/schedule/components/Pagination.res
rename to app/javascript/schedule/components/Schedule__Pagination.res
diff --git a/app/javascript/schedule/components/Patients.res b/app/javascript/schedule/components/Schedule__Patients.res
similarity index 95%
rename from app/javascript/schedule/components/Patients.res
rename to app/javascript/schedule/components/Schedule__Patients.res
index 7d4aeb3e..ad65f0bb 100644
--- a/app/javascript/schedule/components/Patients.res
+++ b/app/javascript/schedule/components/Schedule__Patients.res
@@ -43,20 +43,20 @@ let make = (~patients, ~updatePatients) => {
     upatients
     ->Js.Array2.slice(~start=(pageNumber - 1) * perPage, ~end_=pageNumber * perPage)
     ->Js.Array2.map(patient =>
-      <UnselectedPatient
+      <Schedule__UnselectedPatient
         key={patient.id} patient selectPatient={patient => patient->SelectPatient->updatePatients}
       />
     )
 
   <div>
-    <SelectedPatients
+    <Schedule__SelectedPatients
       selectedPatients={spatients}
       unselectPatient={patient => patient->UnselectPatient->updatePatients}
     />
     <ul className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
       {patientList->React.array}
     </ul>
-    <Pagination
+    <Schedule__Pagination
       pageNumber
       setPageNumber
       maxPages={
diff --git a/app/javascript/schedule/components/Search.res b/app/javascript/schedule/components/Schedule__Search.res
similarity index 100%
rename from app/javascript/schedule/components/Search.res
rename to app/javascript/schedule/components/Schedule__Search.res
diff --git a/app/javascript/schedule/components/SelectedPatients.res b/app/javascript/schedule/components/Schedule__SelectedPatients.res
similarity index 100%
rename from app/javascript/schedule/components/SelectedPatients.res
rename to app/javascript/schedule/components/Schedule__SelectedPatients.res
diff --git a/app/javascript/schedule/components/Sort.res b/app/javascript/schedule/components/Schedule__Sort.res
similarity index 100%
rename from app/javascript/schedule/components/Sort.res
rename to app/javascript/schedule/components/Schedule__Sort.res
diff --git a/app/javascript/schedule/components/UnselectedPatient.res b/app/javascript/schedule/components/Schedule__UnselectedPatient.res
similarity index 100%
rename from app/javascript/schedule/components/UnselectedPatient.res
rename to app/javascript/schedule/components/Schedule__UnselectedPatient.res
diff --git a/app/models/patient.rb b/app/models/patient.rb
index ebc457f8..97361253 100644
--- a/app/models/patient.rb
+++ b/app/models/patient.rb
@@ -16,6 +16,18 @@ class Patient < ApplicationRecord
     very_poor: "Very Poor",
   }
 
+  def self.get_formatted
+    all.map do |patient|
+      {
+        name: patient.full_name,
+        dob: patient.dob,
+        phone: patient.phone,
+        address: patient.address,
+        id: patient.id
+      }
+    end
+  end
+
   def add_users(user_ids)
     user_ids.each do |user_id|
       self.users << User.find(user_id)
diff --git a/app/views/patients/_table-row.html.erb b/app/views/patients/_table-row.html.erb
index aa26c1d8..e0ef8212 100644
--- a/app/views/patients/_table-row.html.erb
+++ b/app/views/patients/_table-row.html.erb
@@ -1,6 +1,6 @@
 <tr class="bg-white" x-description="Odd row">
   <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
-    <%= patient.full_name %>
+    <%= patient.name %>
   </td>
 
   <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
diff --git a/app/views/patients/index.html.erb b/app/views/patients/index.html.erb
index 5d0bf09c..afb48950 100644
--- a/app/views/patients/index.html.erb
+++ b/app/views/patients/index.html.erb
@@ -1,78 +1,11 @@
-<div class="bg-gray-100 py-6">
-  <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
-    <div class="flex mb-5 ml-1 justify-between">
-      <div class="font-semibold text-xl">Patients</div>
+<%=content_for(:tail) do %>
+  <%= javascript_pack_tag 'PatientsPack', "data-turbo-track": "reload", nonce: true %>
+<% end %>
 
-      <div class="flex space-x-4">
-        <%= form_with url: "/patients", method: :get, class: "flex space-x-4 items-center" do |form| %>
-          <%= form.label "Filter By Facility" %>
-          <%= form.select :facility, @facilities, {selected: @facility_id}, {class: "border border-gray-300 rounded-md shadow-md w-32", onchange: "this.form.submit()"} %>
-        <% end %>
-        <%= link_to 'Create New Patient', new_patient_path, class: 'inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500' %>
-      </div>
-    </div>
-    <div class="flex flex-col">
-      <div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
-        <div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
-          <%= form_tag patients_path, method: :get do %>
-            <div class="relative">
-              <%= text_field_tag :search, @search_text,placeholder: "Search for Patient name", class: "block w-full bg-white border border-gray-300 rounded-md py-2 pl-3 text-sm placeholder-gray-500 focus:outline-none focus:text-gray-900 focus:placeholder-gray-400 focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" %>
-              <div class="absolute inset-y-0 right-0 pr-3 flex items-center">
-                <button type="submit" class="focus:outline-none">
-                  <i class="fas fa-search"></i>
-                </button>
-              </div>
-            </div>
-          <% end %>
-          <br />
-          <div
-            class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg"
-          >
-            <table class="min-w-full divide-y divide-gray-200">
-              <thead class="bg-gray-50">
-                <tr>
-                  <th
-                    scope="col"
-                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-                  >
-                    Full Name
-                  </th>
-                  <th
-                    scope="col"
-                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-                  >
-                    Date of Birth
-                  </th>
-                  <th
-                    scope="col"
-                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-                  >
-                    Phone
-                  </th>
-                  <th
-                    scope="col"
-                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
-                  >
-                    Address
-                  </th>
-                  <th
-                    scope="col"
-                    colspan="2"
-                    class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider"
-                  >
-                    Actions
-                  </th>
-                </tr>
-              </thead>
-              <tbody x-max="2">
-                <% @patients.each do |patient| %>
-                  <%= render partial: 'table-row', locals: { patient: patient} %>
-                <% end %>
-              </tbody>
-            </table>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
+<script type="text/json" id="patients-data">
+  {
+    "patients": <%= @patients.to_json.html_safe %>
+  }
+</script>
+
+<div id="patients"></div>
\ No newline at end of file