diff --git a/package-lock.json b/package-lock.json
index 934540f..2ca03a1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,7 @@
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "react-hook-form": "7.45.1",
+        "swr": "^2.3.6",
         "ts-node": "^10.9.1",
         "typescript": "5.1.6"
       },
@@ -2763,6 +2764,14 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/destroy": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
@@ -6549,6 +6558,18 @@
       "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==",
       "dev": true
     },
+    "node_modules/swr": {
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/swr/-/swr-2.3.6.tgz",
+      "integrity": "sha512-wfHRmHWk/isGNMwlLGlZX5Gzz/uTgo0o2IRuTMcf4CPuPFJZlq0rDaKUx+ozB5nBOReNV1kiOyzMfj+MBMikLw==",
+      "dependencies": {
+        "dequal": "^2.0.3",
+        "use-sync-external-store": "^1.4.0"
+      },
+      "peerDependencies": {
+        "react": "^16.11.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -6877,6 +6898,14 @@
         "requires-port": "^1.0.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/utils-merge": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
diff --git a/package.json b/package.json
index c3493bc..24df785 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "7.45.1",
+    "swr": "^2.3.6",
     "ts-node": "^10.9.1",
     "typescript": "5.1.6"
   },
diff --git a/src/Aplications.module.css b/src/Aplications.module.css
deleted file mode 100644
index e69de29..0000000
diff --git a/src/App.tsx b/src/App.tsx
index de815c2..64438c5 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,6 +1,6 @@
 import "./App.css";
 import Applications from "./Applications";
-import Header from "./Header";
+import Header from "./components/Header";
 
 function App() {
   return (
diff --git a/src/Applications.tsx b/src/Applications.tsx
index 8c9f646..1f21756 100644
--- a/src/Applications.tsx
+++ b/src/Applications.tsx
@@ -1,14 +1,20 @@
 import React from "react";
 import SingleApplication from "./SingleApplication";
-import { getSingleApplicationFixture } from "./__fixtures__/applications.fixture";
 import styles from "./Applications.module.css";
+import { useApplications } from "./network/applications";
+import { Loading } from "./components/Loading/Loading";
 
 const Applications = () => {
-  const applications = getSingleApplicationFixture;
-
+  const { data, isLoading } = useApplications(1, 10);
   return (
     <div className={styles.Applications}>
-      <SingleApplication application={applications[0]} />
+      {isLoading ? (
+        <Loading />
+      ) : (
+        data?.map((application) => (
+          <SingleApplication key={application.guid} application={application} />
+        ))
+      )}
     </div>
   );
 };
diff --git a/src/logo.svg.tsx b/src/assets/logo.svg.tsx
similarity index 100%
rename from src/logo.svg.tsx
rename to src/assets/logo.svg.tsx
diff --git a/src/Header.module.css b/src/components/Header/Header.module.css
similarity index 100%
rename from src/Header.module.css
rename to src/components/Header/Header.module.css
diff --git a/src/Header.tsx b/src/components/Header/Header.tsx
similarity index 85%
rename from src/Header.tsx
rename to src/components/Header/Header.tsx
index 206a084..62e619f 100644
--- a/src/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import LogoSvg from "./logo.svg";
+import LogoSvg from "../../assets/logo.svg";
 import styles from "./Header.module.css";
 
 const Header = () => {
diff --git a/src/components/Header/index.ts b/src/components/Header/index.ts
new file mode 100644
index 0000000..2764567
--- /dev/null
+++ b/src/components/Header/index.ts
@@ -0,0 +1 @@
+export { default } from "./Header";
diff --git a/src/components/Loading/Loading.module.css b/src/components/Loading/Loading.module.css
new file mode 100644
index 0000000..4cf269b
--- /dev/null
+++ b/src/components/Loading/Loading.module.css
@@ -0,0 +1,9 @@
+.LoadingContainer {
+  background-color: white;
+  box-shadow: 0px 5px 16px 0px rgba(173, 200, 215, 0.25);
+  border-radius: 10px;
+  margin-bottom: 1rem;
+  padding: 1rem;
+  text-align: center;
+  font-weight: bold;
+}
diff --git a/src/components/Loading/Loading.tsx b/src/components/Loading/Loading.tsx
new file mode 100644
index 0000000..3a78aa3
--- /dev/null
+++ b/src/components/Loading/Loading.tsx
@@ -0,0 +1,5 @@
+import styles from "./Loading.module.css";
+
+export const Loading = () => {
+  return <div className={styles.LoadingContainer}>Loading...</div>;
+};
diff --git a/src/model/Applications.ts b/src/model/Applications.ts
new file mode 100644
index 0000000..54fd49b
--- /dev/null
+++ b/src/model/Applications.ts
@@ -0,0 +1,10 @@
+export interface ApplicationDTO {
+  guid: string;
+  loan_amount: number;
+  first_name: string;
+  last_name: string;
+  company: string;
+  email: string;
+  date_created: string;
+  expiry_date: string;
+}
diff --git a/src/network/applications.ts b/src/network/applications.ts
new file mode 100644
index 0000000..b76dd9c
--- /dev/null
+++ b/src/network/applications.ts
@@ -0,0 +1,21 @@
+import swr from "swr";
+import { ApplicationDTO } from "../model/Applications";
+import { BASE_URL } from "./common";
+
+export const getApplications = ({
+  page,
+  limit,
+}: {
+  page: number;
+  limit: number;
+}) =>
+  fetch(`${BASE_URL}/applications?page=${page}&limit=${limit}`).then((res) =>
+    res.json()
+  ) as Promise<ApplicationDTO[]>;
+
+export const useApplications = (page: number, limit: number) => {
+  return swr<ApplicationDTO[], Error>(
+    `${BASE_URL}/applications?page=${page}&limit=${limit}`,
+    () => getApplications({ page, limit })
+  );
+};
diff --git a/src/network/common.ts b/src/network/common.ts
new file mode 100644
index 0000000..18a479f
--- /dev/null
+++ b/src/network/common.ts
@@ -0,0 +1 @@
+export const BASE_URL = "http://localhost:3001/api";