diff --git a/src/components/Experience.jsx b/src/components/Experience.jsx
deleted file mode 100644
index 163b151..0000000
--- a/src/components/Experience.jsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { For } from "solid-js";
-import JobCard from "./JobCard";
-import { createSignal } from "solid-js";
-
-const Experience = () => {
-	const [jobs, _] = createSignal([
-		{
-			title: "Software Developer Engineer Intern",
-			company: "Amazon Canada",
-			location: "Toronto, Ontario, Canada",
-			range: "May 2025 - August 2025",
-			url: "https://flex.amazon.ca/",
-		},
-		{
-			title: "Software Engineer Intern",
-			company: "Cisco Canada",
-			location: "Remote",
-			range: "January 2023 - May 2023",
-			url: "https://developer.cisco.com/docs/modeling-labs/cat-9000v/",
-		},
-	]);
-
-	return (
-		<section class="mt-16 px-4">
-			<h2 class="text-xl text-nord-1 font-bold mb-6">Experience</h2>
-
-			<div class="!flex !flex-col !gap-0.5v ml-2h">
-				<For each={jobs()}>{(job) => <JobCard job={job} />}</For>
-			</div>
-		</section>
-	);
-};
-
-export default Experience;
diff --git a/src/components/Experience.tsx b/src/components/Experience.tsx
new file mode 100644
index 0000000..77a6def
--- /dev/null
+++ b/src/components/Experience.tsx
@@ -0,0 +1,17 @@
+import { For } from "solid-js";
+import JobCard from "./JobCard";
+import { jobs } from "~/data/jobs";
+
+const Experience = () => {
+	return (
+		<section class="mt-16 px-4">
+			<h2 class="text-xl text-nord-1 font-bold mb-6">Experience</h2>
+
+			<div class="!flex !flex-col !gap-0.5v ml-2h">
+				<For each={jobs}>{(job) => <JobCard job={job} />}</For>
+			</div>
+		</section>
+	);
+};
+
+export default Experience;
diff --git a/src/components/JobCard.jsx b/src/components/JobCard.tsx
similarity index 73%
rename from src/components/JobCard.jsx
rename to src/components/JobCard.tsx
index 24e65c7..4867ad1 100644
--- a/src/components/JobCard.jsx
+++ b/src/components/JobCard.tsx
@@ -1,4 +1,10 @@
-const JobCard = (props) => {
+import type { Job } from "~/types";
+
+interface JobCardProps {
+	job: Job;
+}
+
+const JobCard = (props: JobCardProps) => {
 	return (
 		<div class="p-4">
 			<h3 class="font-bold text-xl">
diff --git a/src/data/jobs.json b/src/data/jobs.json
new file mode 100644
index 0000000..5829582
--- /dev/null
+++ b/src/data/jobs.json
@@ -0,0 +1,16 @@
+[
+  {
+    "title": "Software Developer Engineer Intern",
+    "company": "Amazon Canada",
+    "location": "Toronto, Ontario, Canada",
+    "range": "May 2025 - August 2025",
+    "url": "https://flex.amazon.ca/"
+  },
+  {
+    "title": "Software Engineer Intern",
+    "company": "Cisco Canada",
+    "location": "Remote",
+    "range": "January 2023 - May 2023",
+    "url": "https://developer.cisco.com/docs/modeling-labs/cat-9000v/"
+  }
+]
diff --git a/src/data/jobs.ts b/src/data/jobs.ts
new file mode 100644
index 0000000..7a90dd2
--- /dev/null
+++ b/src/data/jobs.ts
@@ -0,0 +1,4 @@
+import Jobs from "./jobs.json";
+import type { Job } from "~/types";
+
+export const jobs: Job[] = Jobs;
diff --git a/src/types.ts b/src/types.ts
index f2a4e93..39feb45 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -8,6 +8,14 @@ export type Post = {
 	description: string;
 };
 
+export type Job = {
+	title: string;
+	company: string;
+	location: string;
+	range: string;
+	url: string;
+};
+
 export type Tag = {
 	// id/name of tag
 	id: string;