diff --git a/rollup.config.js b/rollup.config.js
new file mode 100644
index 0000000..f9251a1
--- /dev/null
+++ b/rollup.config.js
@@ -0,0 +1,10 @@
+import json from '@rollup/plugin-json';
+
+export default {
+  input: 'src/index.js',
+  output: {
+    dir: 'output',
+    format: 'cjs'
+  },
+  plugins: [json()]
+};
\ No newline at end of file
diff --git a/src/lib/data.ts b/src/lib/data.ts
new file mode 100644
index 0000000..38ef0c9
--- /dev/null
+++ b/src/lib/data.ts
@@ -0,0 +1,5 @@
+export async function getJson(path: string) {
+    let response = await fetch(path);
+    let users = await response.json();
+    return users;
+}
\ No newline at end of file
diff --git a/src/main.svelte b/src/main.svelte
index 2d3dcbd..9e23912 100644
--- a/src/main.svelte
+++ b/src/main.svelte
@@ -1,5 +1,5 @@
 <script>
-    import * as info from '../static/json/me.json';
+    import { getJson } from "$lib/data"  
 </script>
 
 <style>
@@ -50,10 +50,16 @@
 </style>
 
 <div class="card">
-    <h1>{info.name}</h1>
+    {#await getJson('/json/me.json')}
+        <h1>Loading...</h1>
+    {:then info}
+        <h1>{info.name}</h1>
 
-    <div class="flex-container">
-        <img class="profile" src={info.profile_photo} alt="{info.name}'s Profile Photo">
-        <p class="about">{info.about}</p>
-    </div>
+        <div class="flex-container">
+            <img class="profile" src={info.profile_photo} alt="{info.name}'s Profile Photo">
+            <p class="about">{info.about}</p>
+        </div>
+    {:catch error}
+        <h1>{error.message}</h1>
+    {/await}
 </div>
\ No newline at end of file
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 5bb793c..b7a4abf 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,5 +1,4 @@
 <script>
-    import json from '@rollup/plugin-json'
 </script>
 
 <style>