diff --git a/.gitignore b/.gitignore
index 0872c36c..c46e82dd 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
 /node_modules
 app.js
 app.js.map
+dist.min.js
diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 00000000..7a9dfa04
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "pwa-chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:8080",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 00000000..7f5e3f8d
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+	"compile-hero.disable-compile-files-on-did-save-code": false
+}
diff --git a/app.ts b/app.ts
new file mode 100644
index 00000000..680c4299
--- /dev/null
+++ b/app.ts
@@ -0,0 +1,194 @@
+import { data } from "jquery";
+
+namespace onboardproject {
+
+	module onboardprojects {
+
+		// Load Variable declarations
+		let Load = 50;
+
+		// Previous Variable declarations
+		let previous: number;
+
+		// Previous Process Variable declarations
+		let previousprocess: number;
+
+		// Trigger async function
+		async function getRecordCountCall(): Promise<void> {
+			const response = await fetch('http://localhost:2050/recordCount');
+			if (!response.ok) {
+				const message = `An error has occured: ${response.status}`;
+				throw new Error(message);
+			}
+		}
+
+		// Trigger async function
+		async function getColumnNamesCall(): Promise<void> {
+			const response = await fetch('http://localhost:2050/columns');
+			if (!response.ok) {
+				const message = `An error has occured: ${response.status}`;
+				throw new Error(message);
+			}
+		}
+
+		// Trigger async function
+		async function getRecordsCall(fromID: number, toID: number): Promise<number[]> {
+			const response = await fetch(`http://localhost:2050/records?from=${(fromID)}&to=${(toID)}`);
+			if (!response.ok) {
+				const message = `An error has occured: ${response.status}`;
+				throw new Error(message);
+			}
+			return response.json();
+		}
+
+		// Region Data Loading methods
+		async function LoadRecordsData(fromID: number, toID: number): Promise<void> {
+			const recordsvalue = await getRecordsCall(fromID, toID);
+			let DisplayContent = '';
+			for (const records of recordsvalue) {
+				DisplayContent += `<tr id="table-row-${records}">`;
+				for (const column of record) {
+					DisplayContent += `<td align="center">${column}</td>`;
+				}
+				DisplayContent += '</tr>';
+				$("#wrapper-table-content-body").empty();
+				$("#wrapper-table-content-body").append(DisplayContent);
+			}
+		}
+
+		// Load Records Function
+		function RecordsFromCursor(cursor: number[]): Promise<void> {
+			cursor = cursor.sort((a, b) => { return a - b });
+		}
+
+		// Handlers
+		async function LoadPageContent(fromID: number, toID: number): Promise<void> {
+			let DisplayContent = "";
+			const columns = await getColumnNamesCall();
+			for (const column of columns) {
+				DisplayContent += `<th align="center">${column}</th>`;
+				$("#wrapper-table-header-row").empty();
+				$("#wrapper-table-header-row").append(DisplayContent);
+			}
+		}
+
+		// Conversion Function
+		function ConvertNumber(input: string | number, parseAsInt: boolean = true): number {
+			switch (typeof input) {
+				case ('string'):
+					if (parseAsInt == true) {
+						return parseInt(input as string);
+					}
+					return parseFloat(input as string);
+				case ("number"):
+					return input as number;
+			}
+			return 0;
+		}
+
+		// Height Diplay Function
+		function calculateToId(fromId: number): number {
+			const possibleRecordsData = Math.max((window.innerHeight - ($("#form-content").innerHeight() as number)) / 37);
+			let recordDisplayset = 0;
+			return recordDisplayset;
+		}
+
+		// Next_Page_Resize Function
+		function nextPageResize(previous: number[]): number {
+			const fromID = ConvertNumber(previous.sort((a, b) => { return a - b })[0]);
+			const toID = ConvertNumber(previous.sort((a, b) => { return a - b })[1]);
+			const documentHeight = Math.max((window.innerHeight - ($(`#table-row-${fromID}`).height() as number)));
+			for (let i = fromID; i <= toID; i++) {
+				const elementHeightOffset = ($(`#table-row-${i}`).offset() as JQueryCoordinates).top;
+				if (elementHeightOffset < documentHeight) continue;
+				return i;
+			}
+			return toID;
+		}
+
+		// Onload Function
+		window.onload = async () => {
+
+			// Previous_Page_Resize Function
+			function previousPageResize(previous: number[]): number[] {
+				let nextPage = nextPageResize([]);
+				const toId = calculateToId(previous[0] - nextPage);
+				return [previous[0] - (nextPage - previous[0]), toId];
+			}
+
+			// On Resize_Function
+			window.onresize = () => {
+
+				try {
+					const nextToId = calculateToId(previous);
+					clearTimeout(Load);
+					Load = setTimeout(async () => {
+						const recordCount = await getRecordCountCall();
+						if (nextToId >= recordCount - 1) {
+							const fromId = recordCount - 1 - (calculateToId(previous) - previous);
+							const toId = recordCount - 1;
+							//previous = await LoadRecordsData(fromId, toId);
+						} else {
+							//previous = await LoadRecordsData(previous[0], nextToId);
+						}
+					}, 250);
+				} catch (error) {
+					// throw new Error("Error" + error);
+				}
+			}
+
+			//Loading Content Function
+			//previous = await LoadPageContent(0, calculateToId(0));
+
+			// Click function for previewing page
+			$("#previous").click(async () => {
+				const CountData = await getRecordCountCall();
+				previous = previousPageResize(previous);
+				let fromId = previous >= 0 ? previous : 0;
+				const possibleStep = calculateToId(fromId) - fromId;
+				let toId = (previous >= 0 ? previous : possibleStep);
+				fromId = fromId == CountData - 1 ? fromId - possibleStep : fromId;
+				toId = toId <= CountData - 1 ? toId : CountData - 1;
+				//previous = await LoadRecordsData(fromId, toId);
+			});
+
+			// Click function for Skipping to next page
+			$("#next").click(async () => {
+				try {
+					const recordCount = await getRecordCountCall();
+					const fromId = nextPageResize(previous);
+					const possibleStep = calculateToId(fromId) - fromId;
+					if (fromId <= recordCount - possibleStep - 1) {
+						const toId = fromId + possibleStep <= recordCount - 1 ? fromId + possibleStep : recordCount - 1;
+						//	previous = await LoadRecordsData(fromId, toId);
+					} else if (fromId <= recordCount - 1) {
+						//previous = await LoadRecordsData(recordCount - 1 - (calculateToId(fromId) - fromId), recordCount - 1);
+					} else {
+						throw new Error("Error 404");
+					}
+				} catch (error) {
+				}
+			});
+
+			$("#go-button").click(async () => {
+				const recordCount = await getRecordCountCall();
+				const fromId = ConvertNumber($("#index").val() as string, false);
+				const possibleStep = calculateToId(fromId) - fromId;
+				if (fromId < 0) {
+					alert('only insert Id greater than or equal to 0');
+				}
+				else {
+					if (Math.floor(fromId).toString() == fromId.toString() === true) {
+						if (fromId > recordCount - possibleStep) {
+							alert(`You may not insert a desired Id greater than ${recordCount - possibleStep}`);
+						} else {
+							let toId = (fromId) + possibleStep < recordCount ? (fromId) + possibleStep : recordCount - 1;
+
+							//	previous = await LoadRecordsData(fromId, toId);
+						}
+					}
+				}
+			});
+		}
+	}
+}
diff --git a/dist/app.min.js b/dist/app.min.js
new file mode 100644
index 00000000..da011ac4
--- /dev/null
+++ b/dist/app.min.js
@@ -0,0 +1 @@
+var __awaiter=this&&this.__awaiter||function(t,a,u,c){return new(u=u||Promise)(function(n,r){function e(t){try{i(c.next(t))}catch(t){r(t)}}function o(t){try{i(c.throw(t))}catch(t){r(t)}}function i(t){var r;t.done?n(t.value):((r=t.value)instanceof u?r:new u(function(t){t(r)})).then(e,o)}i((c=c.apply(t,a||[])).next())})},__generator=this&&this.__generator||function(n,e){var o,i,a,u={label:0,sent:function(){if(1&a[0])throw a[1];return a[1]},trys:[],ops:[]},t={next:r(0),throw:r(1),return:r(2)};return"function"==typeof Symbol&&(t[Symbol.iterator]=function(){return this}),t;function r(r){return function(t){return function(r){if(o)throw new TypeError("Generator is already executing.");for(;u;)try{if(o=1,i&&(a=2&r[0]?i.return:r[0]?i.throw||((a=i.return)&&a.call(i),0):i.next)&&!(a=a.call(i,r[1])).done)return a;switch(i=0,a&&(r=[2&r[0],a.value]),r[0]){case 0:case 1:a=r;break;case 4:return u.label++,{value:r[1],done:!1};case 5:u.label++,i=r[1],r=[0];continue;case 7:r=u.ops.pop(),u.trys.pop();continue;default:if(!(a=0<(a=u.trys).length&&a[a.length-1])&&(6===r[0]||2===r[0])){u=0;continue}if(3===r[0]&&(!a||r[1]>a[0]&&r[1]<a[3])){u.label=r[1];break}if(6===r[0]&&u.label<a[1]){u.label=a[1],a=r;break}if(a&&u.label<a[2]){u.label=a[2],u.ops.push(r);break}a[2]&&u.ops.pop(),u.trys.pop();continue}r=e.call(n,u)}catch(t){r=[6,t],i=0}finally{o=a=0}if(5&r[0])throw r[1];return{value:r[0]?r[1]:void 0,done:!0}}([r,t])}}},onboardproject=onboardproject||{};(function(){var c,t=this,e=50;function s(){return __awaiter(this,void 0,Promise,function(){var r,n;return __generator(this,function(t){switch(t.label){case 0:return[4,fetch("http://localhost:2050/recordCount")];case 1:if(!(r=t.sent()).ok)throw n="An error has occured: "+r.status,new Error(n);return[2]}})})}function i(t,r){switch(void 0===r&&(r=!0),typeof t){case"string":return 1==r?parseInt(t):parseFloat(t);case"number":return t}return 0}function l(){Math.max((window.innerHeight-$("#form-content").innerHeight())/37);return 0}function f(t){for(var r=i(t.sort(function(t,r){return t-r})[0]),n=i(t.sort(function(t,r){return t-r})[1]),e=Math.max(window.innerHeight-$("#table-row-"+r).height()),o=r;o<=n;o++){if(!($("#table-row-"+o).offset().top<e))return o}return n}window.onload=function(){return __awaiter(t,void 0,void 0,function(){var r=this;return __generator(this,function(t){return window.onresize=function(){try{var n=l();clearTimeout(e),e=setTimeout(function(){return __awaiter(r,void 0,void 0,function(){var r;return __generator(this,function(t){switch(t.label){case 0:return[4,s()];case 1:return(r=t.sent())-1<=n&&(l(),0),[2]}})})},250)}catch(t){}},$("#previous").click(function(){return __awaiter(r,void 0,void 0,function(){var o,i,a,u;return __generator(this,function(t){switch(t.label){case 0:return[4,s()];case 1:return o=t.sent(),r=c,n=f([]),e=l(r[0]),c=[r[0]-(n-r[0]),e],i=0<=c?c:0,a=l()-i,i=i==o-1?i-a:i,u=(u=0<=c?c:a)<=o-1?u:o-1,[2]}var r,n,e})})}),$("#next").click(function(){return __awaiter(r,void 0,void 0,function(){var r,n,e;return __generator(this,function(t){switch(t.label){case 0:return t.trys.push([0,2,,3]),[4,s()];case 1:if(r=t.sent(),n=f(c),e=l()-n,n<=r-e-1)0;else if(!(n<=r-1))throw new Error("Error 404");return[3,3];case 2:return t.sent(),[3,3];case 3:return[2]}})})}),$("#go-button").click(function(){return __awaiter(r,void 0,void 0,function(){var r,n,e;return __generator(this,function(t){switch(t.label){case 0:return[4,s()];case 1:return r=t.sent(),n=i($("#index").val(),!1),e=l()-n,n<0?alert("only insert Id greater than or equal to 0"):Math.floor(n).toString()==n.toString()==!0&&(r-e<n?alert("You may not insert a desired Id greater than "+(r-e)):0),[2]}})})}),[2]})})}})();
\ No newline at end of file
diff --git a/index.html b/index.html
index add5e736..787d4bd8 100644
--- a/index.html
+++ b/index.html
@@ -1,13 +1,27 @@
 <!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>
+	<script src="app.js"> </script>
+	<link rel="stylesheet" type="text/css" href="/style.css">
 </head>
 
-<body>
-	<p>Hello</p>
+<body id="body">
+	<div id="form-content">
+		Go To Start Index:<input type="number" id="index" value="0" min="0">
+		<button id="go-button" type="button">GOT TO INDEX PAGE </button>
+		<button id="previous" type="button">Go to Previous </button>
+		<button id="next" type="button">Go to Next </button>
+	</div>
+	<table id='wrapper-table'>
+		<thead id="wrapper-table-header-row">
+		</thead>
+		<tbody id="wrapper-table-content-body">
+		</tbody>
+	</table>
+	<div id="table-arbitrary-footer"></div>
 </body>
 
 </html>
-
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 00000000..78fcafc1
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,124 @@
+{
+  "name": "onboard-javascript",
+  "version": "1.0.0",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {
+    "": {
+      "version": "1.0.0",
+      "license": "ISC",
+      "dependencies": {
+        "@types/jquery": "^3.5.6",
+        "query-string": "^7.0.1"
+      }
+    },
+    "node_modules/@types/jquery": {
+      "version": "3.5.6",
+      "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.6.tgz",
+      "integrity": "sha512-SmgCQRzGPId4MZQKDj9Hqc6kSXFNWZFHpELkyK8AQhf8Zr6HKfCzFv9ZC1Fv3FyQttJZOlap3qYb12h61iZAIg==",
+      "dependencies": {
+        "@types/sizzle": "*"
+      }
+    },
+    "node_modules/@types/sizzle": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.3.tgz",
+      "integrity": "sha512-JYM8x9EGF163bEyhdJBpR2QX1R5naCJHC8ucJylJ3w9/CVBaskdQ8WqBf8MmQrd1kRvp/a4TS8HJ+bxzR7ZJYQ=="
+    },
+    "node_modules/decode-uri-component": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
+      "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=",
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/filter-obj": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/filter-obj/-/filter-obj-1.1.0.tgz",
+      "integrity": "sha1-mzERErxsYSehbgFsbF1/GeCAXFs=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/query-string": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/query-string/-/query-string-7.0.1.tgz",
+      "integrity": "sha512-uIw3iRvHnk9to1blJCG3BTc+Ro56CBowJXKmNNAm3RulvPBzWLRqKSiiDk+IplJhsydwtuNMHi8UGQFcCLVfkA==",
+      "dependencies": {
+        "decode-uri-component": "^0.2.0",
+        "filter-obj": "^1.1.0",
+        "split-on-first": "^1.0.0",
+        "strict-uri-encode": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/split-on-first": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-1.1.0.tgz",
+      "integrity": "sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/strict-uri-encode": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz",
+      "integrity": "sha1-ucczDHBChi9rFC3CdLvMWGbONUY=",
+      "engines": {
+        "node": ">=4"
+      }
+    }
+  },
+  "dependencies": {
+    "@types/jquery": {
+      "version": "3.5.6",
+      "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.5.6.tgz",
+      "integrity": "sha512-SmgCQRzGPId4MZQKDj9Hqc6kSXFNWZFHpELkyK8AQhf8Zr6HKfCzFv9ZC1Fv3FyQttJZOlap3qYb12h61iZAIg==",
+      "requires": {
+        "@types/sizzle": "*"
+      }
+    },
+    "@types/sizzle": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.3.tgz",
+      "integrity": "sha512-JYM8x9EGF163bEyhdJBpR2QX1R5naCJHC8ucJylJ3w9/CVBaskdQ8WqBf8MmQrd1kRvp/a4TS8HJ+bxzR7ZJYQ=="
+    },
+    "decode-uri-component": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
+      "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU="
+    },
+    "filter-obj": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/filter-obj/-/filter-obj-1.1.0.tgz",
+      "integrity": "sha1-mzERErxsYSehbgFsbF1/GeCAXFs="
+    },
+    "query-string": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/query-string/-/query-string-7.0.1.tgz",
+      "integrity": "sha512-uIw3iRvHnk9to1blJCG3BTc+Ro56CBowJXKmNNAm3RulvPBzWLRqKSiiDk+IplJhsydwtuNMHi8UGQFcCLVfkA==",
+      "requires": {
+        "decode-uri-component": "^0.2.0",
+        "filter-obj": "^1.1.0",
+        "split-on-first": "^1.0.0",
+        "strict-uri-encode": "^2.0.0"
+      }
+    },
+    "split-on-first": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-1.1.0.tgz",
+      "integrity": "sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw=="
+    },
+    "strict-uri-encode": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz",
+      "integrity": "sha1-ucczDHBChi9rFC3CdLvMWGbONUY="
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 00000000..274aac87
--- /dev/null
+++ b/package.json
@@ -0,0 +1,24 @@
+{
+  "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",
+    "build": "tsc -w --project ./"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/SAMMOLOI/onboard-javascript.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/SAMMOLOI/onboard-javascript/issues"
+  },
+  "homepage": "https://github.com/SAMMOLOI/onboard-javascript#readme",
+  "dependencies": {
+    "@types/jquery": "^3.5.6",
+    "query-string": "^7.0.1"
+  }
+}
diff --git a/style.css b/style.css
new file mode 100644
index 00000000..cdaee093
--- /dev/null
+++ b/style.css
@@ -0,0 +1,90 @@
+body {
+	overflow: hidden;
+	background: -webkit-linear-gradient(left, #25c481, #25b7c4);
+	background: linear-gradient(to right, #25c481, #25b7c4);
+	font-family: 'Roboto', sans-serif;
+	color: white;
+}
+
+#wrapper-table {
+	width: 100%;
+	height: 1000%;
+	table-layout: fixed;
+}
+
+#form-content {
+	text-align: center;
+}
+
+table {
+	width: 100%;
+	table-layout: fixed;
+}
+
+h4 {
+	font-size: 20px;
+	color: #fff;
+	text-transform: uppercase;
+	font-weight: 300;
+	text-align: center;
+	margin-bottom: 15px;
+}
+
+#wrapper-table-content-body {
+	font-size: 12px;
+}
+
+table tr td {
+	text-align: center;
+	color: white;
+	border: 1px solid;
+}
+
+tr td {
+	height: 26px;
+}
+
+@media only screen and (max-width: 500px) {
+
+	table,
+	thead,
+	tbody,
+	th,
+	td,
+	tr {
+		display: block;
+		COLOR: white;
+	}
+
+	thead tr {
+		display: none;
+		COLOR: white;
+	}
+
+	tr {
+		border: 1px solid #ccc;
+	}
+
+	td {
+		border: none;
+		border-bottom: 1px solid #eee;
+		position: relative;
+		padding-left: 50%;
+		white-space: normal;
+		text-align: left;
+		min-height: 10px;
+		overflow: hidden;
+		word-break: break-all;
+	}
+
+	td:before {
+		position: absolute;
+		top: 6px;
+		left: 6px;
+		width: 45%;
+		padding-right: 10px;
+		text-align: left;
+		font-weight: bold;
+		content: attr(data-title);
+	}
+}
diff --git a/tsconfig.json b/tsconfig.json
index dbf43618..3a7c4ca5 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -17,6 +17,6 @@
 		],
 	},
 	"include": [
-		"./**/*.ts"
+		 "./**/*.ts"
 	]
 }