diff --git a/application/db.py b/application/db.py
index 1fbc096..a1a5a77 100644
--- a/application/db.py
+++ b/application/db.py
@@ -7,7 +7,7 @@ import enum
 from flask_sqlalchemy import SQLAlchemy
 from flask import Flask
 
-engine = db.create_engine('sqlite:///./test.sqlite', echo=True)
+engine = db.create_engine('sqlite:///./test.sqlite', echo=False)
 connection = engine.connect()
 Base = declarative_base()
 Session = sessionmaker(bind=engine)
diff --git a/application/endpoints.py b/application/endpoints.py
index 7459b2b..f7731f3 100644
--- a/application/endpoints.py
+++ b/application/endpoints.py
@@ -65,8 +65,12 @@ class PersonList(Resource):
                     # replace by Biometric function
                     # identify
                     # return identified person object + matching score
-                    data = list(session.query(Person).all())[1].serialize()
-                    data["matching_score"] = 0.95
+                    data = []
+                    for x in list(session.query(Person).all()):
+                        ser = x.serialize()
+                        ser["matching_score"] = 0.95
+                        data.append(ser)
+                    
                     return flask.make_response(flask.jsonify({'data': data}), 200)
 
             if id is None:
diff --git a/application/static/main.css b/application/static/main.css
index da21677..9465eac 100644
--- a/application/static/main.css
+++ b/application/static/main.css
@@ -58,6 +58,7 @@
 }
 #middle-right{
     float:right;
+    overflow: auto;
 }
 .middle{
     padding: 2rem ;
@@ -73,7 +74,7 @@
 }
 #image-right{
     width:100%;
-
+    
 }
 
 .heroInfo{
@@ -83,4 +84,16 @@
 .middle-controls{
     margin-left: 1rem;
     margin-top: 1rem;
+}
+
+
+#middle-right .personalInfo{
+    float: right;
+    width: 9rem;
+    margin:0;
+    padding:0;
+}
+#middle-right  .listIMG{
+    width: 10rem;
+    float: left;
 }
\ No newline at end of file
diff --git a/application/static/main.js b/application/static/main.js
index 57c847f..e3b1785 100644
--- a/application/static/main.js
+++ b/application/static/main.js
@@ -65,20 +65,6 @@ function snapShot(){
     );
 }
 
-function renderPersonRight(data){
-    string = `
-        <img src="${data["face"]}" id="image-right"> </img>
-
-        <h4 class="heroInfo">
-            Gender: ${data["gender"]} <br>
-            YoB: ${data["yob"]} <br>
-            Available FP: ${data["fingerprints"].length} <br>
-            <h3>Score: ${data["matching_score"]} </h3>
-        </h4>
-        
-    `
-    mr.innerHTML = string;
-}
 
 function enrole(){
     data = {}
@@ -101,7 +87,7 @@ function identify(){
     getJSON(rootKontext + "/api/v1/person/?useFace=True",
         function (error, data) {
             data = data["data"]
-            renderPersonRight(data)
+            renderPersonIdentify(data)
             $("#middle-right").removeClass("border-danger").addClass("boarder-success")
         },
         function(){
diff --git a/application/static/render.js b/application/static/render.js
index c75f940..dcd66f7 100644
--- a/application/static/render.js
+++ b/application/static/render.js
@@ -58,4 +58,41 @@ function renderIdentify(){
     `
     ml.innerHTML = string;
     $("#middle-right").removeClass("border-danger").removeClass("border-success")
-}
\ No newline at end of file
+}
+
+function renderPersonIdentify(data){
+    console.log(data)
+    data.forEach(function (item) {
+        string = `
+        <div class="card border-light"  onclick="focusPerson(${item["person_id"]})" id="person${item["person_id"]}">
+            <div class="card-body">
+                <p class="card-text">
+                    <img class="listImg" src="${item["face"]}"></img>
+                    <div class="personalInfo">
+                        Name: ${item["fname"]} ${item["lname"]} <br>
+                        Gender: ${item["gender"]} <br>
+                        YoB: ${item["yob"]} <br>
+                        <h4>${item["matching_score"]}</h4>
+                    </div>
+                </p>
+            </div>
+        </div>
+        `
+        mr.innerHTML += string;
+    })
+}
+
+function renderPersonRight(data){
+    string = `
+        <img src="${data["face"]}" id="image-right"> </img>
+
+        <h4 class="heroInfo">
+            Gender: ${data["gender"]} <br>
+            YoB: ${data["yob"]} <br>
+            Available FP: ${data["fingerprints"].length} <br>
+            <h3>Score: ${data["matching_score"]} </h3>
+        </h4>
+        
+    `
+    mr.innerHTML = string;
+}