diff --git a/src/data.js b/src/data.js
index 89fd6b52f6897c8363f6082c901e052842a6b37e..5a85987fc1ed74b28086ca9ac02dcf96689336e1 100644
--- a/src/data.js
+++ b/src/data.js
@@ -35,7 +35,26 @@ function displayDataTable(data){
             pagingType: 'full_numbers',
             stateSave: true,
             lengthChange: false,
+            bAutoWidth: false,
             searching: false,
+            drawCallback: function() {
+                $($.fn.dataTable.tables(true)).DataTable().responsive.recalc();
+            },
+            responsive: {
+                details: {
+                    type: 'column',
+                    target: 'tr',
+                    display: $.fn.dataTable.Responsive.display.modal( {
+                        header: function ( row ) {
+                            var data = row.data();
+                            return 'Details for patient '+data.patient_id;
+                        }
+                    }),
+                    renderer: $.fn.dataTable.Responsive.renderer.tableAll( {
+                        tableClass: 'table'
+                    })
+                }
+            },
             "columns": [
             { "data": "patient_id",
             "defaultContent": "NULL"},
@@ -75,6 +94,8 @@ function displayDataTable(data){
             "defaultContent": "NULL"},
             // { data: "user_id" }
             ]
+        }).on( 'select', function ( e, dt, type, indexes ) {
+            //if not responsive view launch responsive modal
         });
     // })
 }
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
index 1ce6b10c4e6f7201745c321f0a01f5cf29f51e9d..4a13ed9a5b3b6f33d38be93ad20fba42882410e5 100644
--- a/src/index.html
+++ b/src/index.html
@@ -6,10 +6,14 @@
         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
         
         <link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.css" />
-  
         <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.js"></script>
+
+        <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.4.1/css/responsive.dataTables.min.css">
+        <script src="https://cdn.datatables.net/responsive/2.4.1/js/dataTables.responsive.min.js"></script>
+        
         <script type="text/javascript" src="data.js"></script>
         <link rel="stylesheet" href="index.css" />
+        
         <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
         <link rel="stylesheet" href="../node_modules/bootstrap-icons/font/bootstrap-icons.css">
     </head>