diff --git a/app.css b/app.css
new file mode 100644
index 00000000..e4cfa71a
--- /dev/null
+++ b/app.css
@@ -0,0 +1,133 @@
+.maindiv {
+	height: 100%;
+	width: 100%;
+	background-color: #f8f8f8;
+	position: absolute;
+	left: 0px;
+	right: 0px;
+	top: 0px;
+	bottom: 0px;
+	overflow: hidden;
+}
+
+#captiondiv {
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	height: 25px;
+	width: 100%;
+	text-align: center;
+	font-family: sans-serif;
+	font-weight: bold;
+	color: #ffffff;
+	background-color: #282c34;
+}
+
+#tablediv {
+	position: absolute;
+	top: 25px;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	height: calc(100% - 50px);
+	width: 100%;
+}
+
+#buttondiv {
+	position: absolute;
+	top: auto;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	height: 25px;
+	width: 100%;
+	text-align: center;
+	color: #ffffff;
+	background-color: #282c34;
+}
+
+table {
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	height: 100%;
+	width: 100%;
+	color: #000000;
+	font-family: Courier, monospace;
+	font-weight: bold;
+	background-color: #ffffff;
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+
+td {
+	border: 1px solid #000000;
+	font-family: sans-serif;
+	color: #202020;
+	text-align: center;
+	padding: 0;
+	white-space: nowrap;
+	font-size: x-small;
+}
+
+th {
+	border: 1px solid #000000;
+	font-family: sans-serif;
+	color: #ffffff;
+	font-weight: bold;
+	background-color: #282c34;
+	max-height: 25px;
+	padding: 0;
+	font-size: x-small;
+	white-space: nowrap;
+}
+
+button {
+	width: 8%;
+	height: 25px;
+	font-size: small;
+	text-align: center;
+}
+
+@media screen and (max-width: 800px) {
+	#next10 {
+		display: none !important;
+	}
+	#previous10 {
+		display: none !important;
+	}
+}
+
+@media screen and (max-width: 500px) {
+	#next5 {
+		display: none !important;
+	}
+	#previous5 {
+		display: none !important;
+	}
+}
+
+@media screen and (max-width: 300px) {
+	#next {
+		display: none !important;
+	}
+	#previous {
+		display: none !important;
+	}
+}
+
+#jumpToButton {
+	width: 13%;
+	min-width: 50px;
+	font-size: x-small;
+	white-space: nowrap;
+}
+
+#jumpToValue {
+	width: 13%;
+	min-width: 30px;
+}
diff --git a/app.ts b/app.ts
new file mode 100644
index 00000000..ae7fcf7d
--- /dev/null
+++ b/app.ts
@@ -0,0 +1,143 @@
+
+const myTable = new Table();
+
+
+window.onload = function () {
+	addButtons();
+	myTable.initialTableBuild();
+}
+
+$(window).on('resize', function () {
+
+	myTable.buildTable();
+}
+);
+
+function buttonPropertySet() {
+	let previous = <HTMLInputElement>document.getElementById("previous");
+	let previous5 = <HTMLInputElement>document.getElementById("previous5");
+	let previous10 = <HTMLInputElement>document.getElementById("previous10");
+	let next = <HTMLInputElement>document.getElementById("next");
+	let next5 = <HTMLInputElement>document.getElementById("next5");
+	let next10 = <HTMLInputElement>document.getElementById("next10");
+	let jumpToButton = <HTMLInputElement>document.getElementById("jumpToButton");
+
+	let from = myTable.from;
+	let totalRecords = myTable.totalRecords;
+
+	// disable previous buttons when out of range
+	if (from === 0) {
+		previous.disabled = true;
+		previous5.disabled = true;
+		previous10.disabled = true;
+	}
+	else {
+		previous.disabled = false;
+		previous5.disabled = false;
+		previous10.disabled = false;
+	}
+
+	// disable next buttons when out of range
+	if (from + myTable.getNumberOfRows() === (totalRecords - 1)) {
+		next.disabled = true;
+		next5.disabled = true;
+		next10.disabled = true;
+	}
+	else {
+		next.disabled = false;
+		next5.disabled = false;
+		next10.disabled = false;
+	}
+
+	jumpToButton.disabled = false;
+}
+
+// previous button function that takes a multiplier indicating the amount of pages to page at a time
+function previousButton(multiplier: number) {
+	myTable.from = myTable.from - ((myTable.getNumberOfRows() + 1) * multiplier);
+
+	myTable.buildTable();
+}
+
+// next button function that takes a multiplier indicating the amount of pages to page at a time
+function nextButton(multiplier: number) {
+	myTable.from = myTable.from + ((myTable.getNumberOfRows() + 1) * multiplier);
+
+	myTable.buildTable();
+}
+
+function jumpToButton() {
+	let inputElement = <HTMLInputElement>document.getElementById("jumpToValue");
+	let from: number;
+
+	if (inputElement.value === "")
+		from = 0;
+	else
+		from = parseInt(inputElement.value);
+
+	myTable.from = from;
+
+	myTable.buildTable();
+
+}
+
+function addButtons() {
+
+	let button: HTMLButtonElement;
+	let buttonDiv = <HTMLElement>document.getElementById("buttondiv");
+
+	button = document.createElement("button");
+	button.innerHTML = "&lt&lt&lt 10";
+	button.id = "previous10";
+	button.setAttribute("disabled", "true");
+	button.onclick = () => { previousButton(10) };
+	buttonDiv.appendChild(button);
+
+	button = document.createElement("button");
+	button.innerHTML = "&lt&lt 5";
+	button.id = "previous5";
+	button.setAttribute("disabled", "true");
+	button.onclick = () => { previousButton(5) };
+	buttonDiv.appendChild(button);
+
+	button = document.createElement("button");
+	button.innerHTML = "&lt";
+	button.id = "previous";
+	button.setAttribute("disabled", "true");
+	button.onclick = () => { previousButton(1) };
+	buttonDiv.appendChild(button);
+
+	button = document.createElement("button");
+	button.innerHTML = "&gt";
+	button.id = "next";
+	button.setAttribute("disabled", "true");
+	button.onclick = () => { nextButton(1) };
+	buttonDiv.appendChild(button);
+
+	button = document.createElement("button");
+	button.innerHTML = "5 &gt&gt ";
+	button.id = "next5";
+	button.setAttribute("disabled", "true");
+	button.onclick = () => { nextButton(5) };
+	buttonDiv.appendChild(button);
+
+	button = document.createElement("button");
+	button.innerHTML = "10 &gt&gt&gt";
+	button.id = "next10";
+	button.setAttribute("disabled", "true");
+	button.onclick = () => { nextButton(10) };
+	buttonDiv.appendChild(button);
+
+	button = document.createElement("button");
+	button.innerHTML = "Jump To:";
+	button.id = "jumpToButton";
+	button.setAttribute("disabled", "true");
+	button.onclick = () => { jumpToButton() };
+	buttonDiv.appendChild(button);
+
+	let input = document.createElement("INPUT");
+	input.id = "jumpToValue";
+	input.setAttribute("type", "number");
+	buttonDiv.appendChild(input);
+
+}
diff --git a/index.html b/index.html
index add5e736..bb17e78d 100644
--- a/index.html
+++ b/index.html
@@ -1,13 +1,19 @@
 <!DOCTYPE html>
 <html>
-<head>
-	<title>JS Onboard Project</title>
-	<script type="text/javascript" charset="utf-8" src="third_party/jquery-2.0.3.min.js"></script>
-</head>
-
-<body>
-	<p>Hello</p>
-</body>
+	<head>
+		<script type="text/javascript" charset="utf-8" src="third_party/jquery-2.0.3.min.js"></script>
+		<script type="text/javascript" charset="utf-8" src="table.js"></script>
+		<script type="text/javascript" charset="utf-8" src="app.js"></script>
+		<link href="app.css" rel="stylesheet" />		
+	</head>
 
+	<body>
+		<div class="maindiv">
+			<div id="captiondiv">Data Grid</div>
+			<div id="tablediv"><table id="dataTable"><tbody id="dataTableBody"></tbody></table></div>
+			<div id="buttondiv"></div>
+		</div> 
+	</body>
+	
 </html>
 
diff --git a/package.json b/package.json
new file mode 100644
index 00000000..51e68214
--- /dev/null
+++ b/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "onboard-javascript",
+  "version": "1.0.0",
+  "description": "This is a JavaScript project for all new developers to complete before venturing into our web frontend codebase.",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/JeanNicholson/onboard-javascript.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/JeanNicholson/onboard-javascript/issues"
+  },
+  "homepage": "https://github.com/JeanNicholson/onboard-javascript#readme",
+  "devDependencies": {
+    "@types/jquery": "^3.5.5",
+    "typescript": "^4.2.2"
+  },
+  "scripts": {
+  "build": "tsc -w"
+  }
+}
diff --git a/table.ts b/table.ts
new file mode 100644
index 00000000..ad4c65f7
--- /dev/null
+++ b/table.ts
@@ -0,0 +1,138 @@
+class Table {
+
+	private _from: number = 0;
+	private _totalRecords: number = 0;
+	private _columns: string[] = [];
+	private timeout = 0;
+	private rows = 0;
+
+	constructor() {
+		this.from = 0;
+	}
+
+	get totalRecords(): number {
+		return this._totalRecords
+	}
+
+	get columns(): string[] {
+		return this._columns;
+	}
+
+	get from(): number {
+		return this._from;
+	}
+
+	set from(from: number) {
+		let totalRecordsIndex = this._totalRecords - 1;
+
+		if (totalRecordsIndex < 0)
+			totalRecordsIndex = 0;
+
+		if ((from + this.rows) > totalRecordsIndex)
+			this._from = (totalRecordsIndex - this.rows);
+		else if (from < 0)
+			this._from = 0;
+		else
+			this._from = from;
+
+	}
+
+	get to(): number {
+		let to = this._from + this.getNumberOfRows()
+
+		if (to > this._totalRecords)
+			return this._totalRecords - 1;
+		else
+			return to;
+	}
+
+	getColumnData(): void {
+		let headerArray: string[];
+
+		headerArray = [];
+
+		$.ajax({
+			url: 'http://localhost:2050/columns',
+			dataType: 'json',
+			success: (data: string[]) => {
+
+				let tableBody = <HTMLTableSectionElement>document.getElementById("dataTableBody");
+
+				const dataRow = tableBody.insertRow(0);
+
+				for (let i = 0; i < data.length; i++) {
+					const newCell = dataRow.insertCell(-1);
+					newCell.outerHTML = `<th>${data[i]}</th>`;
+				}
+
+				this.buildTable();
+
+			}
+		});
+	}
+
+
+	/** determine the amount of rows to add to the table based on the size on the window */
+	getNumberOfRows(): number {
+
+		// subtract - 1 to cater for header row.
+		let rows = (parseInt(((window.innerHeight - 75) / 30).toFixed(0)) - 1);
+
+		if (rows < 0)
+			return 0;
+		else
+			return rows;
+
+	}
+
+	getTotalRecords(): void {
+
+		$.ajax({
+			url: 'http://localhost:2050/recordCount',
+			dataType: 'json',
+			success: (data: string): void => {
+				this._totalRecords = parseInt(data);
+				this.getColumnData();
+			}
+		});
+	}
+
+	initialTableBuild() {
+		this.getTotalRecords();
+	}
+
+	buildTable(): void {
+
+		clearTimeout(this.timeout);
+		this.timeout = setTimeout(() => {
+
+			let html: string;
+
+			// make the ajax call to retrieve the records and build the table
+			$.ajax({
+				url: `http://localhost:2050/records?from=${this.from}&to=${this.to}`,
+				dataType: 'json',
+				success: (data: string[]): void => {
+
+					for (let row of data) {
+
+						html = html + "<tr>"
+
+						for (let cell of row) {
+							html = html + "<td>" + cell + "</td>";
+						}
+
+						html = html + "</tr>"
+					}
+
+					$("#dataTableBody").find("tr:gt(0)").remove();
+					$("#dataTableBody > tr").eq(0).after(html);
+
+				}
+			});
+
+			buttonPropertySet();
+		}, 250);
+	}
+
+}