diff --git a/src/main.js b/src/main.js
index 5d1153be6..2efaf014e 100644
--- a/src/main.js
+++ b/src/main.js
@@ -84,6 +84,7 @@ import 'prismjs/themes/prism-coy.css';
 import '@fullcalendar/core/main.min.css';
 import '@fullcalendar/daygrid/main.min.css';
 import '@fullcalendar/timegrid/main.min.css';
+import './assets/styles/flags.css';
 import Vuelidate from 'vuelidate';
 
 Vue.use(Vuelidate);
diff --git a/src/views/datatable/DataTableDemo.vue b/src/views/datatable/DataTableDemo.vue
index 4b3831495..2299136ed 100755
--- a/src/views/datatable/DataTableDemo.vue
+++ b/src/views/datatable/DataTableDemo.vue
@@ -42,7 +42,7 @@
                         <template #body="slotProps">
                             <span class="p-column-title">Country</span>
                             <img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" />
-                            <span style="vertical-align: middle; margin-left: .5em">{{slotProps.data.country.name}}</span>
+                            <span class="image-text">{{slotProps.data.country.name}}</span>
                         </template>
                         <template #filter>
                             <InputText type="text" v-model="filters['country.name']" class="p-column-filter" placeholder="Search by country"/>
@@ -52,14 +52,14 @@
                         <template #body="slotProps">
                             <span class="p-column-title">Representative</span>
                             <img :alt="slotProps.data.representative.name" :src="'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
-                            <span style="vertical-align: middle; margin-left: .5em">{{slotProps.data.representative.name}}</span>
+                            <span class="image-text">{{slotProps.data.representative.name}}</span>
                         </template>
                             <template #filter>
                             <MultiSelect v-model="filters['representative.name']" :options="representatives" optionLabel="name" optionValue="name" placeholder="All" class="p-column-filter">
                                 <template #option="slotProps">
                                     <div class="p-multiselect-representative-option">
                                         <img :alt="slotProps.option.name" :src="'demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
-                                        <span style="vertical-align: middle; margin-left: .5em">{{slotProps.option.name}}</span>
+                                        <span class="image-text">{{slotProps.option.name}}</span>
                                     </div>
                                 </template>
                             </MultiSelect>
@@ -68,7 +68,7 @@
                     <Column field="date" header="Date" :sortable="true" filterMatchMode="custom" :filterFunction="filterDate">
                         <template #body="slotProps">
                             <span class="p-column-title">Date</span>
-                            <span style="vertical-align: middle; margin-left: .5em">{{slotProps.data.date}}</span>
+                            <span>{{slotProps.data.date}}</span>
                         </template>
                         <template #filter>
                             <Calendar v-model="filters['date']" dateFormat="yy-mm-dd" class="p-column-filter" placeholder="Registration Date"/>
@@ -112,7 +112,6 @@
 <script>
 import CustomerService from '../../service/CustomerService';
 import DataTableDoc from './DataTableDoc';
-import '../../assets/styles/flags.css';
 
 export default {
     data() {
@@ -179,6 +178,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.image-text {
+    visibility: middle;
+    margin-left: 5rem;
+}
+
 .customer-badge {
     border-radius: 2px;
     padding: .25em .5rem;
diff --git a/src/views/datatable/DataTableDoc.vue b/src/views/datatable/DataTableDoc.vue
index 319a5d7e8..5ef41b095 100755
--- a/src/views/datatable/DataTableDoc.vue
+++ b/src/views/datatable/DataTableDoc.vue
@@ -2426,7 +2426,7 @@ export default {
 
 <CodeHighlight>
 <template v-pre>
-&lt;DataTable :value="customers" :paginator="true" class="p-datatable-responsive p-datatable-customers" :rows="10"
+&lt;DataTable :value="customers" :paginator="true" class="p-datatable-customers" :rows="10"
     dataKey="id" :rowHover="true" :selection.sync="selectedCustomers" :filters="filters" :loading="loading"
     paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown" :rowsPerPageOptions="[10,25,50]"
     currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"&gt;
@@ -2449,7 +2449,7 @@ export default {
     &lt;Column field="name" header="Name" :sortable="true"&gt;
         &lt;template #body="slotProps"&gt;
             &lt;span class="p-column-title"&gt;Name&lt;/span&gt;
-            &#123;&#123;slotProps.data.name&#125;&#125;
+            {{slotProps.data.name}}
         &lt;/template&gt;
         &lt;template #filter&gt;
             &lt;InputText type="text" v-model="filters['name']" class="p-column-filter" placeholder="Search by name"/&gt;
@@ -2458,8 +2458,8 @@ export default {
     &lt;Column header="Country" :sortable="true" sortField="country.name" filterField="country.name" filterMatchMode="contains"&gt;
         &lt;template #body="slotProps"&gt;
             &lt;span class="p-column-title"&gt;Country&lt;/span&gt;
-            &lt;img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code"  /&gt;
-            &lt;span style="vertical-align: middle; margin-left: .5em"&gt;&#123;&#123;slotProps.data.country.name&#125;&#125;&lt;/span&gt;
+            &lt;img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" /&gt;
+            &lt;span class="image-text"&gt;{{slotProps.data.country.name}}&lt;/span&gt;
         &lt;/template&gt;
         &lt;template #filter&gt;
             &lt;InputText type="text" v-model="filters['country.name']" class="p-column-filter" placeholder="Search by country"/&gt;
@@ -2469,20 +2469,24 @@ export default {
         &lt;template #body="slotProps"&gt;
             &lt;span class="p-column-title"&gt;Representative&lt;/span&gt;
             &lt;img :alt="slotProps.data.representative.name" :src="'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" /&gt;
-            &lt;span style="vertical-align: middle; margin-left: .5em"&gt;&#123;&#123;slotProps.data.representative.name&#125;&#125;&lt;/span&gt;
+            &lt;span class="image-text"&gt;{{slotProps.data.representative.name}}&lt;/span&gt;
         &lt;/template&gt;
             &lt;template #filter&gt;
             &lt;MultiSelect v-model="filters['representative.name']" :options="representatives" optionLabel="name" optionValue="name" placeholder="All" class="p-column-filter"&gt;
                 &lt;template #option="slotProps"&gt;
                     &lt;div class="p-multiselect-representative-option"&gt;
                         &lt;img :alt="slotProps.option.name" :src="'demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" /&gt;
-                        &lt;span style="vertical-align: middle; margin-left: .5em"&gt;&#123;&#123;slotProps.option.name&#125;&#125;&lt;/span&gt;
+                        &lt;span class="image-text"&gt;{{slotProps.option.name}}&lt;/span&gt;
                     &lt;/div&gt;
                 &lt;/template&gt;
             &lt;/MultiSelect&gt;
         &lt;/template&gt;
     &lt;/Column&gt;
     &lt;Column field="date" header="Date" :sortable="true" filterMatchMode="custom" :filterFunction="filterDate"&gt;
+        &lt;template #body="slotProps"&gt;
+            &lt;span class="p-column-title"&gt;Date&lt;/span&gt;
+            &lt;span&gt;{{slotProps.data.date}}&lt;/span&gt;
+        &lt;/template&gt;
         &lt;template #filter&gt;
             &lt;Calendar v-model="filters['date']" dateFormat="yy-mm-dd" class="p-column-filter" placeholder="Registration Date"/&gt;
         &lt;/template&gt;
@@ -2490,12 +2494,12 @@ export default {
     &lt;Column field="status" header="Status" :sortable="true" filterMatchMode="equals"&gt;
         &lt;template #body="slotProps"&gt;
             &lt;span class="p-column-title"&gt;Status&lt;/span&gt;
-            &lt;span :class="'customer-badge status-' + slotProps.data.status"&gt;&#123;&#123;slotProps.data.status&#125;&#125;&lt;/span&gt;
+            &lt;span :class="'customer-badge status-' + slotProps.data.status"&gt;{{slotProps.data.status}}&lt;/span&gt;
         &lt;/template&gt;
         &lt;template #filter&gt;
             &lt;Dropdown v-model="filters['status']" :options="statuses" placeholder="Select a Status" class="p-column-filter" :showClear="true"&gt;
                 &lt;template #option="slotProps"&gt;
-                    &lt;span :class="'customer-badge status-' + slotProps.option"&gt;&#123;&#123;slotProps.option&#125;&#125;&lt;/span&gt;
+                    &lt;span :class="'customer-badge status-' + slotProps.option"&gt;{{slotProps.option}}&lt;/span&gt;
                 &lt;/template&gt;
             &lt;/Dropdown&gt;
         &lt;/template&gt;
diff --git a/src/views/datatable/DataTableFilterDemo.vue b/src/views/datatable/DataTableFilterDemo.vue
index 81975cb13..492ccae9a 100755
--- a/src/views/datatable/DataTableFilterDemo.vue
+++ b/src/views/datatable/DataTableFilterDemo.vue
@@ -9,43 +9,95 @@
 
 		<div class="content-section implementation">
             <div class="card">
-                <DataTable :value="cars" :filters="filters" :paginator="true" :rows="10">
+                <DataTable :value="customers" :paginator="true" class="p-datatable-customers" :rows="10"
+                    dataKey="id" :filters="filters" :loading="loading">
                     <template #header>
-                        <div style="text-align: right">
-                            <i class="pi pi-search" style="margin: 4px 4px 0 0"></i>
-                            <InputText v-model="filters['global']" placeholder="Global Search" size="50" />
+                        <div class="table-header">
+                            List of Customers
+                            <span class="p-input-icon-left">
+                                <i class="pi pi-search" />
+                                <InputText v-model="filters['global']" placeholder="Global Search" />
+                            </span>
                         </div>
                     </template>
-                    <Column field="vin" header="Vin" filterMatchMode="startsWith">
+                    <template #empty>
+                        No customers found.
+                    </template>
+                    <template #loading>
+                        Loading customers data. Please wait.
+                    </template>
+                    <Column field="name" header="Name">
+                        <template #body="slotProps">
+                            <span class="p-column-title">Name</span>
+                            {{slotProps.data.name}}
+                        </template>
                         <template #filter>
-                            <InputText type="text" v-model="filters['vin']" class="p-column-filter" placeholder="Starts with" />
+                            <InputText type="text" v-model="filters['name']" class="p-column-filter" placeholder="Search by name"/>
                         </template>
                     </Column>
-                    <Column field="year" header="Year" filterMatchMode="contains">
+                    <Column header="Country" filterField="country.name" filterMatchMode="contains">
+                        <template #body="slotProps">
+                            <span class="p-column-title">Country</span>
+                            <img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" />
+                            <span class="image-text">{{slotProps.data.country.name}}</span>
+                        </template>
                         <template #filter>
-                            <InputText type="text" v-model="filters['year']" class="p-column-filter" placeholder="Contains" />
+                            <InputText type="text" v-model="filters['country.name']" class="p-column-filter" placeholder="Search by country"/>
                         </template>
                     </Column>
-                    <Column field="brand" header="Brand" filterMatchMode="equals">
-                        <template #filter>
-                            <Dropdown v-model="filters['brand']" :options="brands" optionLabel="brand" optionValue="value" placeholder="Select a Brand" class="p-column-filter" :showClear="true">
+                    <Column header="Representative" filterField="representative.name" filterMatchMode="in">
+                        <template #body="slotProps">
+                            <span class="p-column-title">Representative</span>
+                            <img :alt="slotProps.data.representative.name" :src="'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
+                            <span class="image-text">{{slotProps.data.representative.name}}</span>
+                        </template>
+                            <template #filter>
+                            <MultiSelect v-model="filters['representative.name']" :options="representatives" optionLabel="name" optionValue="name" placeholder="All" class="p-column-filter">
                                 <template #option="slotProps">
-                                    <div class="p-clearfix p-dropdown-car-option">
-                                        <img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" />
-                                        <span>{{slotProps.option.brand}}</span>
+                                    <div class="p-multiselect-representative-option">
+                                        <img :alt="slotProps.option.name" :src="'demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" />
+                                        <span class="image-text">{{slotProps.option.name}}</span>
                                     </div>
                                 </template>
+                            </MultiSelect>
+                        </template>
+                    </Column>
+                    <Column field="date" header="Date" filterMatchMode="custom" :filterFunction="filterDate">
+                        <template #body="slotProps">
+                            <span class="p-column-title">Date</span>
+                            <span>{{slotProps.data.date}}</span>
+                        </template>
+                        <template #filter>
+                            <Calendar v-model="filters['date']" dateFormat="yy-mm-dd" class="p-column-filter" placeholder="Registration Date"/>
+                        </template>
+                    </Column>
+                    <Column field="status" header="Status" filterMatchMode="equals">
+                        <template #body="slotProps">
+                            <span class="p-column-title">Status</span>
+                            <span :class="'customer-badge status-' + slotProps.data.status">{{slotProps.data.status}}</span>
+                        </template>
+                        <template #filter>
+                            <Dropdown v-model="filters['status']" :options="statuses" placeholder="Select a Status" class="p-column-filter" :showClear="true">
+                                <template #option="slotProps">
+                                    <span :class="'customer-badge status-' + slotProps.option">{{slotProps.option}}</span>
+                                </template>
                             </Dropdown>
                         </template>
                     </Column>
-                    <Column field="color" header="Color" filterMatchMode="in">
+                    <Column field="activity" header="Activity" filterMatchMode="gte">
+                        <template #body="slotProps">
+                            <span class="p-column-title">Activity</span>
+                            <ProgressBar :value="slotProps.data.activity" :showValue="false" />
+                        </template>
                         <template #filter>
-                            <MultiSelect v-model="filters['color']" :options="colors" optionLabel="name" optionValue="value" placeholder="Select a Color" />
+                            <InputText type="text" v-model="filters['activity']" class="p-column-filter" placeholder="Minimum"/>
+                        </template>
+                    </Column>
+                    <Column headerStyle="width: 8rem; text-align: center" bodyStyle="text-align: center; overflow: visible">
+                        <template #body>
+                            <Button type="button" icon="pi pi-cog" class="p-button-secondary"></Button>
                         </template>
                     </Column>
-                    <template #empty>
-                        No records found.
-                    </template>
                 </DataTable>
             </div>
 		</div>
@@ -55,85 +107,158 @@
                 <TabPanel header="Source">
 <CodeHighlight>
 <template v-pre>
-&lt;DataTable :value="cars" :filters="filters" :paginator="true" :rows="10"&gt;
+&lt;DataTable :value="customers" :paginator="true" class="p-datatable-customers" :rows="10"
+    dataKey="id" :filters="filters" :loading="loading"&gt;
     &lt;template #header&gt;
-        &lt;div style="text-align: right"&gt;
-            &lt;i class="pi pi-search" style="margin: 4px 4px 0 0"&gt;&lt;/i&gt;
-            &lt;InputText v-model="filters['global']" placeholder="Global Search" size="50" /&gt;
+        &lt;div class="table-header"&gt;
+            List of Customers
+            &lt;span class="p-input-icon-left"&gt;
+                &lt;i class="pi pi-search" /&gt;
+                &lt;InputText v-model="filters['global']" placeholder="Global Search" /&gt;
+            &lt;/span&gt;
         &lt;/div&gt;
     &lt;/template&gt;
-    &lt;Column field="vin" header="Vin" filterMatchMode="startsWith"&gt;
+    &lt;template #empty&gt;
+        No customers found.
+    &lt;/template&gt;
+    &lt;template #loading&gt;
+        Loading customers data. Please wait.
+    &lt;/template&gt;
+    &lt;Column field="name" header="Name"&gt;
+        &lt;template #body="slotProps"&gt;
+            &lt;span class="p-column-title"&gt;Name&lt;/span&gt;
+            {{slotProps.data.name}}
+        &lt;/template&gt;
         &lt;template #filter&gt;
-            &lt;InputText type="text" v-model="filters['vin']" class="p-column-filter" placeholder="Starts with" /&gt;
+            &lt;InputText type="text" v-model="filters['name']" class="p-column-filter" placeholder="Search by name"/&gt;
         &lt;/template&gt;
     &lt;/Column&gt;
-    &lt;Column field="year" header="Year" filterMatchMode="contains"&gt;
+    &lt;Column header="Country" filterField="country.name" filterMatchMode="contains"&gt;
+        &lt;template #body="slotProps"&gt;
+            &lt;span class="p-column-title"&gt;Country&lt;/span&gt;
+            &lt;img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" /&gt;
+            &lt;span class="image-text"&gt;{{slotProps.data.country.name}}&lt;/span&gt;
+        &lt;/template&gt;
         &lt;template #filter&gt;
-            &lt;InputText type="text" v-model="filters['year']" class="p-column-filter" placeholder="Contains" /&gt;
+            &lt;InputText type="text" v-model="filters['country.name']" class="p-column-filter" placeholder="Search by country"/&gt;
         &lt;/template&gt;
     &lt;/Column&gt;
-    &lt;Column field="brand" header="Brand" filterMatchMode="equals"&gt;
-        &lt;template #filter&gt;
-            &lt;Dropdown v-model="filters['brand']" :options="brands" optionLabel="brand" optionValue="value" placeholder="Select a Brand" class="p-column-filter" :showClear="true"&gt;
+    &lt;Column header="Representative" filterField="representative.name" filterMatchMode="in"&gt;
+        &lt;template #body="slotProps"&gt;
+            &lt;span class="p-column-title"&gt;Representative&lt;/span&gt;
+            &lt;img :alt="slotProps.data.representative.name" :src="'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" /&gt;
+            &lt;span class="image-text"&gt;{{slotProps.data.representative.name}}&lt;/span&gt;
+        &lt;/template&gt;
+            &lt;template #filter&gt;
+            &lt;MultiSelect v-model="filters['representative.name']" :options="representatives" optionLabel="name" optionValue="name" placeholder="All" class="p-column-filter"&gt;
                 &lt;template #option="slotProps"&gt;
-                    &lt;div class="p-clearfix p-dropdown-car-option"&gt;
-                        &lt;img :alt="slotProps.option.brand" :src="'demo/images/car/' + slotProps.option.brand + '.png'" /&gt;
-                        &lt;span&gt;{{slotProps.option.brand}}&lt;/span&gt;
+                    &lt;div class="p-multiselect-representative-option"&gt;
+                        &lt;img :alt="slotProps.option.name" :src="'demo/images/avatar/' + slotProps.option.image" width="32" style="vertical-align: middle" /&gt;
+                        &lt;span class="image-text"&gt;{{slotProps.option.name}}&lt;/span&gt;
                     &lt;/div&gt;
                 &lt;/template&gt;
+            &lt;/MultiSelect&gt;
+        &lt;/template&gt;
+    &lt;/Column&gt;
+    &lt;Column field="date" header="Date" filterMatchMode="custom" :filterFunction="filterDate"&gt;
+        &lt;template #body="slotProps"&gt;
+            &lt;span class="p-column-title"&gt;Date&lt;/span&gt;
+            &lt;span&gt;{{slotProps.data.date}}&lt;/span&gt;
+        &lt;/template&gt;
+        &lt;template #filter&gt;
+            &lt;Calendar v-model="filters['date']" dateFormat="yy-mm-dd" class="p-column-filter" placeholder="Registration Date"/&gt;
+        &lt;/template&gt;
+    &lt;/Column&gt;
+    &lt;Column field="status" header="Status" filterMatchMode="equals"&gt;
+        &lt;template #body="slotProps"&gt;
+            &lt;span class="p-column-title"&gt;Status&lt;/span&gt;
+            &lt;span :class="'customer-badge status-' + slotProps.data.status"&gt;{{slotProps.data.status}}&lt;/span&gt;
+        &lt;/template&gt;
+        &lt;template #filter&gt;
+            &lt;Dropdown v-model="filters['status']" :options="statuses" placeholder="Select a Status" class="p-column-filter" :showClear="true"&gt;
+                &lt;template #option="slotProps"&gt;
+                    &lt;span :class="'customer-badge status-' + slotProps.option"&gt;{{slotProps.option}}&lt;/span&gt;
+                &lt;/template&gt;
             &lt;/Dropdown&gt;
         &lt;/template&gt;
     &lt;/Column&gt;
-    &lt;Column field="color" header="Color" filterMatchMode="in"&gt;
+    &lt;Column field="activity" header="Activity" filterMatchMode="gte"&gt;
+        &lt;template #body="slotProps"&gt;
+            &lt;span class="p-column-title"&gt;Activity&lt;/span&gt;
+            &lt;ProgressBar :value="slotProps.data.activity" :showValue="false" /&gt;
+        &lt;/template&gt;
         &lt;template #filter&gt;
-            &lt;MultiSelect v-model="filters['color']" :options="colors" optionLabel="name" optionValue="value" placeholder="Select a Color" /&gt;
+            &lt;InputText type="text" v-model="filters['activity']" class="p-column-filter" placeholder="Minimum"/&gt;
+        &lt;/template&gt;
+    &lt;/Column&gt;
+    &lt;Column headerStyle="width: 8rem; text-align: center" bodyStyle="text-align: center; overflow: visible"&gt;
+        &lt;template #body&gt;
+            &lt;Button type="button" icon="pi pi-cog" class="p-button-secondary"&gt;&lt;/Button&gt;
         &lt;/template&gt;
     &lt;/Column&gt;
-    &lt;template #empty&gt;
-        No records found.
-    &lt;/template&gt;
 &lt;/DataTable&gt;
 </template>
 </CodeHighlight>
 
 <CodeHighlight lang="javascript">
-import CarService from '../../service/CarService';
+import CustomerService from '../../service/CustomerService';
 
 export default {
     data() {
         return {
+            customers: null,
             filters: {},
-            brands: [
-                {brand: 'Audi', value: 'Audi'},
-                {brand: 'BMW', value: 'BMW'},
-                {brand: 'Fiat', value: 'Fiat'},
-                {brand: 'Honda', value: 'Honda'},
-                {brand: 'Jaguar', value: 'Jaguar'},
-                {brand: 'Mercedes', value: 'Mercedes'},
-                {brand: 'Renault', value: 'Renault'},
-                {brand: 'Volkswagen', value: 'Volkswagen'},
-                {brand: 'Volvo', value: 'Volvo'}
+            loading: true,
+            representatives: [
+                {name: "Amy Elsner", image: 'amyelsner.png'},
+                {name: "Anna Fali", image: 'annafali.png'},
+                {name: "Asiya Javayant", image: 'asiyajavayant.png'},
+                {name: "Bernardo Dominic", image: 'bernardodominic.png'},
+                {name: "Elwin Sharvill", image: 'elwinsharvill.png'},
+                {name: "Ioni Bowcher", image: 'ionibowcher.png'},
+                {name: "Ivan Magalhaes",image: 'ivanmagalhaes.png'},
+                {name: "Onyama Limba", image: 'onyamalimba.png'},
+                {name: "Stephen Shaw", image: 'stephenshaw.png'},
+                {name: "XuXue Feng", image: 'xuxuefeng.png'}
             ],
-            colors: [
-                {name: 'White', value: 'White'},
-                {name: 'Green', value: 'Green'},
-                {name: 'Silver', value: 'Silver'},
-                {name: 'Black', value: 'Black'},
-                {name: 'Red', value: 'Red'},
-                {name: 'Maroon', value: 'Maroon'},
-                {name: 'Brown', value: 'Brown'},
-                {name: 'Orange', value: 'Orange'},
-                {name: 'Blue', value: 'Blue'}
-            ],
-            cars: null
+            statuses: [
+                'unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal'
+            ]
         }
     },
-    carService: null,
     created() {
-        this.carService = new CarService();
+        this.customerService = new CustomerService();
     },
     mounted() {
-        this.carService.getCarsLarge().then(data => this.cars = data);
+        this.customerService.getCustomersLarge().then(data => this.customers = data);
+        this.loading = false;
+    },
+    methods: {
+        filterDate(value, filter) {
+            if (filter === undefined || filter === null || (typeof filter === 'string' && filter.trim() === '')) {
+                return true;
+            }
+
+            if (value === undefined || value === null) {
+                return false;
+            }
+
+            return value === this.formatDate(filter);
+        },
+        formatDate(date) {
+            let month = date.getMonth() + 1;
+            let day = date.getDate();
+
+            if (month < 10) {
+                month = '0' + month;
+            }
+
+            if (day < 10) {
+                day = '0' + day;
+            }
+
+            return date.getFullYear() + '-' + month + '-' + day;
+        }
     }
 }
 </CodeHighlight>
@@ -144,68 +269,222 @@ export default {
 </template>
 
 <script>
-import CarService from '../../service/CarService';
+import CustomerService from '../../service/CustomerService';
 
 export default {
     data() {
         return {
+            customers: null,
             filters: {},
-            brands: [
-                {brand: 'Audi', value: 'Audi'},
-                {brand: 'BMW', value: 'BMW'},
-                {brand: 'Fiat', value: 'Fiat'},
-                {brand: 'Honda', value: 'Honda'},
-                {brand: 'Jaguar', value: 'Jaguar'},
-                {brand: 'Mercedes', value: 'Mercedes'},
-                {brand: 'Renault', value: 'Renault'},
-                {brand: 'Volkswagen', value: 'Volkswagen'},
-                {brand: 'Volvo', value: 'Volvo'}
+            loading: true,
+            representatives: [
+                {name: "Amy Elsner", image: 'amyelsner.png'},
+                {name: "Anna Fali", image: 'annafali.png'},
+                {name: "Asiya Javayant", image: 'asiyajavayant.png'},
+                {name: "Bernardo Dominic", image: 'bernardodominic.png'},
+                {name: "Elwin Sharvill", image: 'elwinsharvill.png'},
+                {name: "Ioni Bowcher", image: 'ionibowcher.png'},
+                {name: "Ivan Magalhaes",image: 'ivanmagalhaes.png'},
+                {name: "Onyama Limba", image: 'onyamalimba.png'},
+                {name: "Stephen Shaw", image: 'stephenshaw.png'},
+                {name: "XuXue Feng", image: 'xuxuefeng.png'}
             ],
-            colors: [
-                {name: 'White', value: 'White'},
-                {name: 'Green', value: 'Green'},
-                {name: 'Silver', value: 'Silver'},
-                {name: 'Black', value: 'Black'},
-                {name: 'Red', value: 'Red'},
-                {name: 'Maroon', value: 'Maroon'},
-                {name: 'Brown', value: 'Brown'},
-                {name: 'Orange', value: 'Orange'},
-                {name: 'Blue', value: 'Blue'}
-            ],
-            cars: null
+            statuses: [
+                'unqualified', 'qualified', 'new', 'negotiation', 'renewal', 'proposal'
+            ]
         }
     },
-    carService: null,
     created() {
-        this.carService = new CarService();
+        this.customerService = new CustomerService();
     },
     mounted() {
-        this.carService.getCarsLarge().then(data => this.cars = data);
+        this.customerService.getCustomersLarge().then(data => this.customers = data);
+        this.loading = false;
+    },
+    methods: {
+        filterDate(value, filter) {
+            if (filter === undefined || filter === null || (typeof filter === 'string' && filter.trim() === '')) {
+                return true;
+            }
+
+            if (value === undefined || value === null) {
+                return false;
+            }
+
+            return value === this.formatDate(filter);
+        },
+        formatDate(date) {
+            let month = date.getMonth() + 1;
+            let day = date.getDate();
+
+            if (month < 10) {
+                month = '0' + month;
+            }
+
+            if (day < 10) {
+                day = '0' + day;
+            }
+
+            return date.getFullYear() + '-' + month + '-' + day;
+        }
     }
 }
 </script>
 
 <style lang="scss" scoped>
-/deep/ .p-dropdown-label {
-    text-align: left;
+.image-text {
+    visibility: middle;
+    margin-left: 5rem;
 }
 
-.p-filter-column {
-    .p-multiselect, .p-dropdown, .p-inputtext {
-        width: 100%;
+.customer-badge {
+    border-radius: 2px;
+    padding: .25em .5rem;
+    text-transform: uppercase;
+    font-weight: 700;
+    font-size: 12px;
+    letter-spacing: .3px;
+
+    &.status-qualified {
+        background-color: #C8E6C9;
+        color: #256029;
+    }
+
+    &.status-unqualified {
+        background-color: #FFCDD2;
+        color: #C63737;
+    }
+
+    &.status-negotiation {
+        background-color: #FEEDAF;
+        color: #8A5340;
+    }
+
+    &.status-new {
+        background-color: #B3E5FC;
+        color: #23547B;
+    }
+
+    &.status-renewal {
+        background-color: #ECCFFF;
+        color: #694382;
+    }
+
+    &.status-proposal {
+        background-color: #FFD8B2;
+        color: #805B36;
     }
 }
 
-.p-dropdown-car-option {
+.p-multiselect-representative-option {
+    display: inline-block;
+    vertical-align: middle;
+
     img {
         vertical-align: middle;
-        margin-right: .5rem;
         width: 24px;
     }
 
     span {
-        float: right;
         margin-top: .125rem;
     }
 }
-</style>
+
+/deep/ .p-paginator {
+    .p-paginator-current {
+        margin-left: auto;
+    }
+}
+
+/deep/ .p-progressbar {
+    height: .5rem;
+    background-color: #D8DADC;
+
+    .p-progressbar-value {
+        background-color: #607D8B;
+    }
+}
+
+/deep/ .p-column-filter {
+    width: 100%;
+}
+
+.table-header {
+    display: flex;
+    justify-content: space-between;
+}
+
+/deep/ .p-datepicker {
+    min-width: 25rem;
+
+    td {
+        font-weight: 400;
+    }
+}
+
+/deep/ .p-datatable.p-datatable-customers {
+    .p-datatable-header {
+        padding: 1rem;
+        text-align: left;
+        font-size: 1.5rem;
+    }
+
+    .p-paginator {
+        padding: 1rem;
+    }
+
+    .p-datatable-thead > tr > th {
+        text-align: left;
+    }
+
+    .p-datatable-tbody > tr > td {
+        cursor: auto;
+    }
+
+    .p-dropdown-label:not(.p-placeholder) {
+        text-transform: uppercase;
+    }
+}
+
+/* Responsive */
+.p-datatable-customers .p-datatable-tbody > tr > td .p-column-title {
+    display: none;
+}
+
+@media screen and (max-width: 960px) {
+    /deep/ .p-datatable {
+        &.p-datatable-customers {
+            .p-datatable-thead > tr > th,
+            .p-datatable-tfoot > tr > td {
+                display: none !important;
+            }
+
+            .p-datatable-tbody > tr {
+                border-bottom: 1px solid var(--layer-2);
+
+                > td {
+                    text-align: left;
+                    display: block;
+                    border: 0 none !important;
+                    width: 100% !important;
+                    float: left;
+                    clear: left;
+                    border: 0 none;
+
+                    .p-column-title {
+                        padding: .4rem;
+                        min-width: 30%;
+                        display: inline-block;
+                        margin: -.4rem 1rem -.4rem -.4rem;
+                        font-weight: bold;
+                    }
+
+                    .p-progressbar {
+                        margin-top: .5rem;
+                    }
+                }
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file