diff --git a/front-end/dashboard.html b/front-end/dashboard.html
index 94a0b90..5827ed7 100644
--- a/front-end/dashboard.html
+++ b/front-end/dashboard.html
@@ -3,17 +3,21 @@
 
 <head>
     <link rel="stylesheet" href="./codebase/skins/material.css" type="text/css">
-    <link rel="stylesheet" href="https://cdn.materialdesignicons.com/5.4.55/css/materialdesignicons.min.css" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdn.materialdesignicons.com/5.4.55/css/materialdesignicons.min.css"
+        crossorigin="anonymous">
     <link rel="stylesheet" href="./css/dashboard.css" type="text/css">
     <link rel="stylesheet" href="./css/loan_add.css" type="text/css">
     <script src="./codebase/webix.js" type="text/javascript"></script>
-    
+
 </head>
 
 <body>
+    <script type="text/javascript" charset="utf-8" src="js/demo_data.js"></script>
     <script type="text/javascript" charset="utf-8" src="js/loan_add.js"></script>
     <script type="text/javascript" charset="utf-8" src="js/dashboard.js"></script>
 
+
+
     <div class="vimeo-container">
 
         <!-- iframe id=bgVideo src="https://player.vimeo.com/video/468176795?background=1&controls=0" frameborder="0"
diff --git a/front-end/js/dashboard.js b/front-end/js/dashboard.js
index 654c5da..06b0f4a 100644
--- a/front-end/js/dashboard.js
+++ b/front-end/js/dashboard.js
@@ -168,4 +168,6 @@ var dashboard = {
 		}
 	]
 };
-webix.ui(dashboard);
\ No newline at end of file
+webix.ui(dashboard);
+
+
diff --git a/front-end/js/demo_data.js b/front-end/js/demo_data.js
new file mode 100644
index 0000000..7941591
--- /dev/null
+++ b/front-end/js/demo_data.js
@@ -0,0 +1,55 @@
+var demo_loan_time_line = [
+    { id:1, value:"received", date:"2017-08-01"},
+    { id:2, value:"submitted", details:"by Malcolm Merlyn, Need followup", date:"2017-09-10" },
+    { id:3, value:"valuation", details:"Exceed $1,000,000", date:"2017-12-11" },
+    { id:5, value:"AIP", details: "reported to reginal manager already" , date:"2018-02-10" },
+    { id:6, value:"Settled", details: "warren approved" , date:"2018-03-15" },
+    { id:7, value:"Finished", details:"by Rosa White, poisslb new refinance in next month.", date:"2018-03-21"}
+  ];
+
+var demo_peple =
+[
+	{ "id": "1", "value": "John Smith" },
+	{ "id": "2", "value": "Will Carter" },
+	{ "id": "3", "value": "Joe  Biden" },
+	{ "id": "4", "value": "Donald Trump" },
+	{ "id": "5", "value": "John Smith" },
+	{ "id": "6", "value": "Nick Carter" },
+	{ "id": "7", "value": "Warren Zhu" },
+	{ "id": "8", "value": "Lisa  Chen" },
+	{ "id": "9", "value": "Nasriden Black" },
+	{ "id": "10", "value": "Wanti Catty" }
+];
+
+var demo_clients = [
+	{ "id": "1", "value": "John Smith" },
+	{ "id": "2", "value": "Will Carter" },
+	{ "id": "3", "value": "Joe  Biden" },
+	{ "id": "4", "value": "Donald Trump" },
+	{ "id": "5", "value": "John Smith" },
+	{ "id": "6", "value": "Nick Carter" },
+	{ "id": "7", "value": "Warren Zhu" },
+	{ "id": "8", "value": "Lisa  Chen" },
+	{ "id": "9", "value": "Nasriden Black" },
+	{ "id": "10", "value": "Wanti Catty" }
+]
+
+var trans_state1 =[
+	[
+		{ "id": 1, "value": "Processing" },
+		{ "id": 2, "value": "Application in Progress (AIP)" },
+		{ "id": 3, "value": "Valuation" },
+		{ "id": 4, "value": "Approved" },
+		{ "id": 5, "value": "Settled" },
+		{ "id": 6, "value": "Finished" }
+	]
+]
+
+var trans_state =[
+	"Processing",
+	"AIP",
+	"Valuation",
+	"Approved",
+	"Settled",
+	"Finished"
+]
\ No newline at end of file
diff --git a/front-end/js/loan_add.js b/front-end/js/loan_add.js
index 0053bd6..99bf9a4 100644
--- a/front-end/js/loan_add.js
+++ b/front-end/js/loan_add.js
@@ -1,6 +1,8 @@
 function close(id, event) {
 	loan_add_popup.hide();
 }
+
+
 var loan_add_form = {
 	"view": "popup",
 	"id": "loan_add_popup",
@@ -10,7 +12,7 @@ var loan_add_form = {
 	close : true , 
 	"modal" :true,
 	"move" : true, 
-	"width": 800,
+	"width": 1000,
 	"body": {
 		"rows": [
 			{
@@ -18,9 +20,9 @@ var loan_add_form = {
 				"css": "webix_dark",
 				"paddingX": 5,
 				"cols": [
-					{ "view": "icon", "icon": "wxi-clock" },
+					{ "view": "icon", "icon": "wxi-plus" },
 					{ "view": "label", "label": "Add new Transactions" },
-					{ "view": "button", "label": "Close", "width": 80 , "click": "close"  }
+					{ "view": "button", "label": "Close", "width": 80 , "click": "close"}
 				]
 			},
 			{
@@ -32,103 +34,134 @@ var loan_add_form = {
 						"cols": [
 							{
 								"margin": 10,
+								width: 400,
 								"rows": [
-									{ "view": "template", "type": "section", "template": "Event" },
-									{ "view": "text", "placeholder": "Type here...", "label": "Event Name", "labelWidth": 100 },
+									{ "view": "template", "type": "section", "template": "Transaction" },
 									{
-										"view": "datepicker",
-										"label": "Start Date",
-										"value": "2020-10-15T17:10:48.414Z",
-										"timepicker": true,
-										"format": "%H:%i %D, %d %M",
-										"labelWidth": 100
+										"view": "text",
+										"placeholder": "Type here...",
+										"label": "Transaction ID",
+										"labelWidth": 120,
+										"value": "XADF61574328507420"
 									},
 									{
 										"view": "datepicker",
-										"label": "End Date",
-										"value": "2020-10-15T18:10:48.414Z",
-										"format": "%H:%i %D, %d %M",
+										"label": "Submission  Date",
+										"value": "2020-10-15",
 										"timepicker": true,
-										"labelWidth": 100
+										"format": "%Y-%M-%d",
+										"labelWidth": 120
 									},
 									{
-										"view": "rangeslider",
-										"label": "Time Slot",
-										"min": 8,
-										"max": 20,
-										"value": [
-											10,
-											15
-										],
-										"title": "#value#",
-										"labelWidth": 100
+										"options": demo_clients,
+										"label": "Client Names",
+										"value": "1,2",
+										"view": "multicombo",
+										"height": 38,
+										"labelWidth": 120
 									},
 									{
+										"options": demo_clients,
+										"label": "Brokers",
+										"value": "3",
 										"view": "multicombo",
-										"label": "Speakers",
-										"value": "1,2",
-										"options": "demo->5f82268d61c7b80018b278db",
-										"labelWidth": 100
+										"height": 38,
+										"labelWidth": 120
+									},
+									{
+										"options": demo_clients,
+										"label": "Referal /BDM",
+										"value": "4",
+										"view": "multicombo",
+										"height": 38,
+										"labelWidth": 120
 									},
 									{
-										"view": "richselect",
-										"label": "Room",
-										"value": "1",
-										"options": "demo->5f82268d61c7b80018b278d7",
-										"labelWidth": 100
+										"label": "Status",
+										"value": "Valuation",
+										"options": trans_state,
+										"view": "combo",
+										"height": 38,
+										"labelWidth": 120
 									},
-									{ "view": "counter", "label": "Participants", "value": 30, "labelWidth": 100 }
+									{ "label": "Lender", "view": "text", "height": 38, "labelWidth": 120, "value": "NAB Bank" },
+									{
+										"label": "Loan Limit ($)",
+										"view": "text",
+										"height": 38,
+										"labelWidth": 120,
+										"value": "800,000"
+									},
+									{
+										"view": "datepicker",
+										"label": "SettlementDate",
+										"value": "2020-01-02 00:00:00",
+										"format": "%Y-%M-%d",
+										"timepicker": true,
+										"labelWidth": 120,
+										"icons": false
+									}
 								]
 							},
 							{
 								"margin": 10,
 								"rows": [
-									{ "view": "template", "type": "section", "template": "Handouts" },
+									{ "view": "template", "type": "section", "template": "Commission Splits" },
 									{
-										"view": "radio",
-										"label": "Font Family",
-										"value": "Arial",
-										"options": [
-											"Roboto",
-											"Arial",
-											"Calibri"
+										view:"datatable", 
+										editable:true,
+										scroll:false,
+										columns:[
+											{ id:"org",     editor:"text", header:"Revelant Parties",       fillspace:true},
+											{ id:"upfront", editor:"text",  header:"Upfront$",   width :150},
+											{ id:"upfrontp", editor:"text", header:"Upfront%",   width :150}
 										],
-										"labelWidth": 130
+										data: [
+											{ id:1, org: "SFM" , upfront:"$6000", upfrontp: "20%",  trail: "$500"},
+											{ id:2, org: "Broker John", upfront:"$7000" , upfrontp: "30%", trail: "$500"},
+											{ id:3, org: "Referal Smith", upfront:"$8000", upfrontp: "40%", trail: "$500"},
+											{ id:4, org: "People Jessie", upfront:"$9000", upfrontp: "50%", trail: "$500"},
+											{ id:5, org: "People Warron", upfront:"$16000", upfrontp: "60%", trail: "$500"},
+											{ id:6, org: "People Richard", upfront:"$5000", upfrontp: "15%", trail: "$500"}
+										]
 									},
 									{
-										"view": "radio",
-										"label": "Font Weight",
-										"value": "400",
-										"options": [
-											"400",
-											"500",
-											"700"
-										],
-										"labelWidth": 130
-									},
-									{ "view": "text", "label": "Font Size (px)", "value": "14", "labelWidth": 130 },
-									{ "view": "colorpicker", "label": "Background", "value": "#CE9EFF", "labelWidth": 130 },
-									{ "view": "colorpicker", "label": "Font Color", "value": "#6C6C6C", "labelWidth": 130 },
-									{ "view": "colorpicker", "label": "Header Font", "value": "#00004C", "labelWidth": 130 },
-									{ "view": "checkbox", "value": 1, "label": "Material Icons", "labelWidth": 130 }
+										"view":"timeline", 
+										"layout": "x",
+										"height": 150,
+										"data": demo_loan_time_line
+									}									
 								]
 							}
 						]
 					},
 					{
-						"options": "demo->5f82268d61c7b80018b278d7",
-						"label": "Values",
-						"value": "1,2",
-						"view": "multicombo",
-						"height": 38
-					},
-					{ "view": "textarea", "placeholder": "Type here...", "label": "Additional Details", "labelPosition": "top", "labelWidth": 100 },
+						view:"datatable", 
+						editable:true,
+						height: 200,
+						scroll:true,
+						columns:[
+							{ id:"org",    editor:"text", header:"Revelant Parties",       fillspace:true},
+							{ id:"trail",  editor:"text", header:"Trail $",   width :150},
+							{ id:"date",  editor:"date", header:"Date", format:webix.Date.dateToStr("%Y-%m-%d"),  width :150},
+							{ id:"src",    editor:"select", header:"Data Source (Excel/PDF)",   width :150}
+						],
+						data: [
+							{ id:1, org: "SFM" , trail: "$500", date :"2020-02", src: "AA220202.xls" },
+							{ id:2, org: "Broker John",  trail: "$500", date :"2020-02" , src: "AA220202.xls"},
+							{ id:3, org: "Referal Smith",  trail: "$500", date: "2020-02", src: "AA220202.xls"},
+							{ id:4, org: "People Jessie", trail: "$500", date :"2020-02", src: "AA220202.xls"},
+							{ id:5, org: "People Warron",  trail: "$500", date: "2020-02", src: "AA220202.xls"},
+							{ id:6, org: "People Richard", trail: "$500",date :"2020-02", src: "AA220202.xls"}
+						]
+					},				
+					
 					{
 						"margin": 10,
 						"cols": [
 							{ "view": "template", "template": " ", "role": "placeholder", "borderless": true },
-							{ "view": "button", "label": "Discard", "css": "webix_transparent", "align": "right", "width": 120 , "click" : "close"},
-							{ "view": "button", "css": "webix_primary", "label": "Save", "align": "right", "width": 120, "click" :"close" }
+							{ "view": "button", "label": "Discard", "css": "webix_transparent", "align": "right", "width": 120 },
+							{ "view": "button", "css": "webix_primary", "label": "Save", "align": "right", "width": 120, "click": "close" }
 						]
 					}
 				]
diff --git a/front-end/js/login.js b/front-end/js/login.js
index b7a4a5e..198b802 100644
--- a/front-end/js/login.js
+++ b/front-end/js/login.js
@@ -1,5 +1,3 @@
-
-
 var loginform = {
 	width: 500, 
 	view:"form", scroll:false,
@@ -26,4 +24,6 @@ var loginform = {
 		{ "template": "Please enter your password and email to login", "view": "template", "borderless": 1 }
 	]
 };
-webix.ui(loginform);
\ No newline at end of file
+webix.ui(loginform);
+
+
diff --git a/front-end/loan_add.html b/front-end/loan_add.html
index 5d77087..a052840 100644
--- a/front-end/loan_add.html
+++ b/front-end/loan_add.html
@@ -8,6 +8,7 @@
   <script src="./codebase/webix.js" type="text/javascript"></script>  
  </head>
  <body >
+   <script type="text/javascript" charset="utf-8" src="js/demo_data.js"></script>
    <div id="loan_add"></div>
    <script type="text/javascript" charset="utf-8" src="js/loan_add.js"></script>
 
