diff --git a/src/components/ComplaintInfo.vue b/src/components/ComplaintInfo.vue
new file mode 100644
index 0000000..9454659
--- /dev/null
+++ b/src/components/ComplaintInfo.vue
@@ -0,0 +1,110 @@
+<template>
+    <v-card :class="{ 'bg-red-lighten-5' : complaint.at_risk }">
+        <v-card-title>
+            Complaint Info : {{ complaint.id }} 
+            <v-icon v-if="complaint.active" icon="mdi-play" title="Active"></v-icon>
+            <v-icon v-if="complaint.at_risk" color="red" icon="mdi-exclamation" title="At Risk"></v-icon>
+        </v-card-title>
+        <v-card-subtitle>
+            {{ complaint.customer.acc_no }} - {{ complaint.customer.name }}<br/>
+            {{ formatDate(complaint.complaint_date,"DD/MM/YYYY") }}
+        </v-card-subtitle>
+        <v-card-text>
+            Reason: {{ complaint.reason }}<br/>
+            Driver: {{ complaint.driver.name }}<br/>
+            Delivery Date {{ formatDate(complaint.delivery_date,"DD/MM/YYYY") }}<br/>
+            Order : {{ complaint.sop.doc_no }}<br/>
+        </v-card-text>
+        <v-card-subtitle>
+        <v-progress-linear indeterminate :active="info_loading">
+        </v-progress-linear>
+            Comments
+        </v-card-subtitle>
+        <v-card-text>
+            {{ complaint.info.comments }}
+        </v-card-text>
+        <v-card-subtitle>
+            Info
+        </v-card-subtitle>
+        <v-card-text>
+            <v-row>
+                <v-col cols=4>
+                    <v-row dense nogutters>
+                        <v-checkbox label="1" type="checkbox" v-model="complaint.info.one" @change="changeComplaintCheckbox()" />
+                            <v-checkbox label="2" v-model="complaint.info.two" @change="changeComplaintCheckbox()"/>
+                                <v-checkbox label="3" v-model="complaint.info.three" @change="changeComplaintCheckbox()"/>
+                    </v-row>
+                    <v-row dense nogutters>
+                        <v-checkbox label="At Risk" v-model="complaint.at_risk" @change="changeComplaintCheckbox()" />
+                            <v-checkbox label="Permanent" v-model="complaint.info.permanent" @change="changeComplaintCheckbox()" />
+                    </v-row>
+                </v-col>
+            </v-row>
+        </v-card-text>
+        <v-card-actions>
+        </v-card-actions>
+    </v-card>
+</template>
+<script>
+import Complaint from '@/types/ComplaintType.vue'
+import methods from '@/CommonMethods.vue'
+import axios from 'axios'
+export default {
+    props: {
+        in_complaint: new Complaint()
+    },
+    watch: {
+        in_complaint(){
+            this.complaint = this.in_complaint
+        }
+    },
+    mixins: [methods],
+    emits: ["return"],
+    data() {
+        return {
+            complaint: this.in_complaint,
+            info_loading: true
+        }
+    },
+    methods:{
+        getComplaintInfo() {
+            this.info_loading = true
+            let url = this.$api_url + "/customers/complaints/" + this.complaint.id + "/info"
+            console.log("Getting Complaint Info...")
+            axios.get(url)
+                .then(resp =>{
+                    this.complaint.info = resp.data
+                    this.info_loading = false
+                })
+        },
+        changeComplaintCheckbox() {
+            let set = this.setComplaintStatus()
+            if (this.complaint.at_risk && set && this.complaint.info.one && this.complaint.info.two && this.complaint.info.three) {
+                console.log("Contract no longer at risk")
+                this.complaint.at_risk = false
+            }
+        },
+        setComplaintStatus() {
+            this.info_loading = true
+            let url = this.$api_url + "/customers/complaints/" + this.complaint.id + "/info/set"
+            console.log("Getting Complaint Info...")
+            axios.post(url, {
+                one: this.complaint.info.one,
+                two: this.complaint.info.two,
+                three: this.complaint.info.three,
+                at_risk: this.complaint.at_risk,
+                permanent: this.complaint.info.permanent
+            }).then(resp => {
+                let stat = resp.data
+                console.log(stat)
+                this.getComplaintInfo()
+                this.info_loading = false
+            })
+            return true
+        },
+    },
+    created() {
+        this.getComplaintInfo()
+    }
+}
+</script>
diff --git a/src/types/ComplaintInfoType.vue b/src/types/ComplaintInfoType.vue
new file mode 100644
index 0000000..8450cd4
--- /dev/null
+++ b/src/types/ComplaintInfoType.vue
@@ -0,0 +1,9 @@
+<script>
+export default class ComplaintInfo {
+    one = false
+    two = false
+    three = false
+    permanent = false
+    comments = ""
+}
+</script>
diff --git a/src/types/ComplaintType.vue b/src/types/ComplaintType.vue
new file mode 100644
index 0000000..f53850b
--- /dev/null
+++ b/src/types/ComplaintType.vue
@@ -0,0 +1,16 @@
+<script>
+import Customer from '@/types/CustomerType.vue'
+import ComplaintInfo from '@/types/ComplaintInfoType.vue'
+export default class Complaint {
+    id = 0
+    complaint_date = ""
+    delivery_date = ""
+    reason = ""
+    sop = {}
+    at_risk = false
+    driver = ""
+    info = new ComplaintInfo()
+    customer = new Customer()
+
+}
+</script>
diff --git a/src/views/complaints/ComplaintsList.vue b/src/views/complaints/ComplaintsList.vue
index 20f6726..2668eec 100644
--- a/src/views/complaints/ComplaintsList.vue
+++ b/src/views/complaints/ComplaintsList.vue
@@ -1,116 +1,71 @@
 <template>
     <h3>Complaints</h3>
-    <v-tabs v-model="tab" fixed-tabs>
+    <v-tabs v-model="tab" >
         <v-tab title="List" v-model="list" />
-        <v-tab title="Edit" v-model="edit" v-if="edit" />
-        <v-tab title="Report" v-model="report" v-if="report" />
+            <v-tab title="Edit" v-model="edit" v-if="edit" />
+                <v-tab title="Report" v-model="report" v-if="report" />
     </v-tabs>
     <v-window v-model="tab">
         <v-window-item v-model="list">
-            <v-responsive
-                    max-width="500"
-                    >
-                    <v-text-field 
-                    clearable
-                    label="Search"
-                    variant="outlined"
-                    v-model="searchQuery"
-                    density="compact"
-                    append-inner-icon="mdi-magnify"></v-text-field>
-                    <v-switch color="blue" label="Show Only Active" v-model="showActive"></v-switch>
-                    <v-btn v-if="site_info.features.addcomplaint" color="warning">+ Add</v-btn>
-            </v-responsive>
-            <v-table>
-                <thead>
-                    <tr>
-                        <th>Comp No</th>
-                        <th>Date</th>
-                        <th>Order</th>
-                        <th>Acc No</th>
-                        <th>Name</th>
-                        <th>Reason</th>
-                        <th>Active</th>
-                        <th></th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr v-if="loading">
-                        <td colspan=7>
-                            <img class="loading" src="/images/icons/loading.gif"/>
-                        </td>
-                    </tr>
-                    <template v-for="complaint in filteredComplaints" :key="complaint.id">
-                        <tr :class="{ at_risk : complaint.at_risk, cust_at_risk: complaint.customer.at_risk }">
-                            <td>{{ complaint.id }}</td>
-                            <td>{{ complaint.complaint_date }}</td>
-                            <td>{{ complaint.sop.doc_no }}</td>
-                            <td>{{ complaint.customer.acc_no }}</td>
-                            <td>{{ complaint.customer.name }}
-                            </td>
-                            <td>{{ complaint.reason }}</td>
-                            <td>
-                                <img class="icon" v-if="complaint.active" v-bind:alt="complaint.active" v-bind:title="complaint.active" src="/images/icons/Live.png"/>
-                            </td>
-                            <td>
-                                <v-btn @click="showInfo(complaint)">
-                                    <span v-if="complaint.info_shown">
-                                        Hide
-                                    </span>
-                                    <span v-else>
-                                        View
-                                    </span>
-                                </v-btn>
-                            </td>
-                        </tr>
-                        <tr v-if="complaint.info_shown">
-                            <template v-if="complaint.info">
-                                <template v-if="complaint.info_loaded">
-                                    <td colspan=4>
-                                        {{ complaint.info.comments }}
-                                        <br />
-                                        <sub>- {{ complaint.info.added_by }}</sub>
-                                    </td>
-                                    <td colspan=2>
-                                        <v-container>
-                                            <v-form :disabled="complaint.info.loading">
-                                                <v-row dense nogutters>
-                                                    <v-checkbox label="1" type="checkbox" v-model="complaint.info.one" @change="changeComplaintCheckbox(complaint)" />
-                                                        <v-checkbox label="2" v-model="complaint.info.two" @change="changeComplaintCheckbox(complaint)"/>
-                                                            <v-checkbox label="3" v-model="complaint.info.three" @change="changeComplaintCheckbox(complaint)"/>
-                                                </v-row>
-                                                <v-row dense nogutters>
-                                                    <v-checkbox label="At Risk" v-model="complaint.at_risk" @change="changeComplaintCheckbox(complaint)" />
-                                                        <v-checkbox label="Permanent" v-model="complaint.info.permanent" @change="changeComplaintCheckbox(complaint)" />
-                                                </v-row>
-                                            </v-form>
-                                        </v-container>
-                                    </td>
-                                    <td>
-                                        <img v-if="complaint.info.loading" class="loading" src="/images/icons/loading.gif"/>
-                                        <template v-else>
-                                            <v-btn v-if="site_info.features.editcomplaint" color="warning">Edit</v-btn>
-                                        </template>
-                                    </td>
-                                </template>
-                            </template>
-                            <template v-else>
-                                <td colspan=6>
-                                    <img class="loading" src="/images/icons/loading.gif"/>
-                                </td>
-                            </template>
-                        </tr>
-                    </template>
-                </tbody>
-            </v-table>
+            <v-col cols="12" xs="12" sm="12" md="12" lg=8>
+                <v-text-field 
+                                             clearable
+                                             label="Search"
+                                             variant="outlined"
+                                             v-model="searchQuery"
+                                             density="compact"
+                                             append-inner-icon="mdi-magnify"></v-text-field>
+                <v-btn v-if="site_info.features.addcomplaint" color="warning" prepend-icon="mdi-plus" variant="text">Add</v-btn>
+                <v-progress-linear indeterminate color="orange" :active="loading"></v-progress-linear>
+                <v-card variant="outlined">
+                    <RecycleScroller class="scroller"
+                                     :items="filteredComplaints"
+                                     :item-size="100"
+                                     v-slot="{ item }" 
+                                     key-field="id">
+                    <v-row dense class="item" :class="{ 'bg-red-lighten-5' : item.at_risk }">
+                        <v-col cols="4">
+                            Complaint : {{ item.id }}<br/>
+                            <span class="text-caption">
+                                Complaint Date : {{ item.complaint_date }}<br/>
+                                Sales Order: {{ item.sop.doc_no }}<br/>
+                            </span>
+                        </v-col>
+                        <v-col cols="4" class="text-body-2">
+                            {{ item.customer.acc_no }} - {{ item.customer.name }}<br/>
+                            Reason : {{ item.reason }}<br/>
+                            Driver : {{ item.driver.name }}
+                        </v-col>
+                        <v-col cols=4>
+                            <div class="d-flex justify-space-around align-center flex-column flex-sm-row fill-height">
+                                <v-row>
+                                        <v-icon icon="mdi-exclamation" v-if="item.at_risk" color="red" title="At Risk"></v-icon>
+                                        <v-icon icon="mdi-play" v-if="item.active" title="Active"></v-icon>
+                                </v-row>
+                                <v-btn @click="showInfo(item)" color="blue-lighten-1">View</v-btn>
+                                <v-btn v-if="site_info.features.editcomplaint" color="orange-lighten-2">Edit</v-btn>
+                            </div>
+                        </v-col>
+                    </v-row>
+                    </RecycleScroller>
+                </v-card>
+            </v-col>
         </v-window-item>
     </v-window>
+    <v-dialog v-model="showComplaintInfo">
+        <ComplaintInfo :in_complaint="selected_complaint" @return="doInfoReturn" />
+    </v-dialog>
 </template>
 <script>
 import axios from 'axios'
+import ComplaintInfo from '@/components/ComplaintInfo.vue'
 export default {
     props: {
         site_info:{},
     },
+    components: {
+        ComplaintInfo
+    },
     data() {
         return {
             tab: "list",
@@ -121,7 +76,9 @@ export default {
             limit: 300,
             searchQuery: "",
             edit: false,
-            report: false
+            report: false,
+            showComplaintInfo: false,
+            selected_complaint: {}
         }
     },
     computed: {
@@ -145,7 +102,7 @@ export default {
         }
     },
     methods: {
-        async getComplaintsList(){
+        getComplaintsList(){
             this.loading = true
             let url = this.$api_url + "/customers/complaints/list"
             console.log("Getting Complaint list...")
@@ -160,49 +117,26 @@ export default {
                 this.listreceived = true
             })
         },
-        async getComplaintInfo(complaint) {
-            complaint.info.loading = true
-            let url = this.$api_url + "/customers/complaints/" + complaint.id + "/info"
-            console.log("Getting Complaint Info...")
-            axios.get(url)
-                .then(resp =>{
-                    complaint.info = resp.data
-                    complaint.info.loading = false
-                })
-        },
-        async showInfo(complaint) {
-            console.log(complaint.id)
+        showInfo(complaint) {
+            this.showComplaintInfo = true
+            this.selected_complaint = complaint
             complaint.info_loaded = false
-            complaint.info_shown = !complaint.info_shown
-            if (complaint.info_shown) {
-                complaint.info = await this.getComplaintInfo(complaint)
-                complaint.info_loaded = true
-            }
         },
-        async changeComplaintCheckbox(complaint) {
-            let set = await this.setComplaintStatus(complaint)
-            if (complaint.at_risk && set && complaint.info.one && complaint.info.two && complaint.info.three) {
-                console.log("Contract no longer at risk")
-                complaint.at_risk = false
-            }
-        },
-        async setComplaintStatus(complaint) {
-            complaint.info.loading = true
-            let url = this.$api_url + "/customers/complaints/" + complaint.id + "/info/set"
-            console.log("Getting Complaint Info...")
-            axios.post(url, {
-                one: complaint.info.one,
-                two: complaint.info.two,
-                three: complaint.info.three,
-                at_risk: complaint.at_risk,
-                permanent: complaint.info.permanent
-            }).then(resp => {
-                console.log(resp.data)
-                this.getComplaintInfo(complaint)
-                complaint.info_loaded = true
-            })
-            return true
+        doInfoReturn(code) {
+            console.log(code)
         },
     }
 }
 </script>
+<style>
+.item {
+    height: 100px;
+    overflow-y:hidden;
+    padding: 0 1em;
+    margin-bottom:2px;
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid #000;
+}
+</style>
+