diff --git a/package-lock.json b/package-lock.json
index 72df5a6..85b252f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,10 +12,15 @@
         "@testing-library/jest-dom": "^5.11.9",
         "@testing-library/react": "^11.2.5",
         "@testing-library/user-event": "^12.7.2",
+        "@types/jest": "^26.0.20",
+        "@types/node": "^14.14.31",
+        "@types/react": "^17.0.2",
+        "@types/react-dom": "^17.0.1",
         "react": "^17.0.1",
         "react-dom": "^17.0.1",
         "react-feather": "^2.0.9",
         "react-scripts": "4.0.2",
+        "typescript": "^4.1.5",
         "web-vitals": "^1.1.0"
       },
       "devDependencies": {
@@ -3142,11 +3147,33 @@
       "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.2.1.tgz",
       "integrity": "sha512-DxZZbyMAM9GWEzXL+BMZROWz9oo6A9EilwwOMET2UVu2uZTqMWS5S69KVtuVKaRjCUpcrOXRalet86/OpG4kqw=="
     },
+    "node_modules/@types/prop-types": {
+      "version": "15.7.3",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",
+      "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw=="
+    },
     "node_modules/@types/q": {
       "version": "1.5.4",
       "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.4.tgz",
       "integrity": "sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug=="
     },
+    "node_modules/@types/react": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.2.tgz",
+      "integrity": "sha512-Xt40xQsrkdvjn1EyWe1Bc0dJLcil/9x2vAuW7ya+PuQip4UYUaXyhzWmAbwRsdMgwOFHpfp7/FFZebDU6Y8VHA==",
+      "dependencies": {
+        "@types/prop-types": "*",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "17.0.1",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.1.tgz",
+      "integrity": "sha512-yIVyopxQb8IDZ7SOHeTovurFq+fXiPICa+GV3gp0Xedsl+MwQlMLKmvrnEjFbQxjliH5YVAEWFh975eVNmKj7Q==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/resolve": {
       "version": "0.0.8",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-0.0.8.tgz",
@@ -6215,6 +6242,11 @@
       "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.8.tgz",
       "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg=="
     },
+    "node_modules/csstype": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.6.tgz",
+      "integrity": "sha512-+ZAmfyWMT7TiIlzdqJgjMb7S4f1beorDbWbsocyK4RaiqA5RTX3K14bnBWmmA9QEM0gRdsjyyrEmcyga8Zsxmw=="
+    },
     "node_modules/cyclist": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz",
@@ -19422,7 +19454,6 @@
       "version": "4.1.5",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.1.5.tgz",
       "integrity": "sha512-6OSu9PTIzmn9TCDiovULTnET6BgXtDYL4Gg4szY+cGsc3JP1dQL8qvE8kShTRx1NIw4Q9IBHlwODjkjWEtMUyA==",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -24101,11 +24132,33 @@
       "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.2.1.tgz",
       "integrity": "sha512-DxZZbyMAM9GWEzXL+BMZROWz9oo6A9EilwwOMET2UVu2uZTqMWS5S69KVtuVKaRjCUpcrOXRalet86/OpG4kqw=="
     },
+    "@types/prop-types": {
+      "version": "15.7.3",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",
+      "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw=="
+    },
     "@types/q": {
       "version": "1.5.4",
       "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.4.tgz",
       "integrity": "sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug=="
     },
+    "@types/react": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.2.tgz",
+      "integrity": "sha512-Xt40xQsrkdvjn1EyWe1Bc0dJLcil/9x2vAuW7ya+PuQip4UYUaXyhzWmAbwRsdMgwOFHpfp7/FFZebDU6Y8VHA==",
+      "requires": {
+        "@types/prop-types": "*",
+        "csstype": "^3.0.2"
+      }
+    },
+    "@types/react-dom": {
+      "version": "17.0.1",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.1.tgz",
+      "integrity": "sha512-yIVyopxQb8IDZ7SOHeTovurFq+fXiPICa+GV3gp0Xedsl+MwQlMLKmvrnEjFbQxjliH5YVAEWFh975eVNmKj7Q==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/resolve": {
       "version": "0.0.8",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-0.0.8.tgz",
@@ -26571,6 +26624,11 @@
         }
       }
     },
+    "csstype": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.6.tgz",
+      "integrity": "sha512-+ZAmfyWMT7TiIlzdqJgjMb7S4f1beorDbWbsocyK4RaiqA5RTX3K14bnBWmmA9QEM0gRdsjyyrEmcyga8Zsxmw=="
+    },
     "cyclist": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz",
@@ -36871,8 +36929,7 @@
     "typescript": {
       "version": "4.1.5",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.1.5.tgz",
-      "integrity": "sha512-6OSu9PTIzmn9TCDiovULTnET6BgXtDYL4Gg4szY+cGsc3JP1dQL8qvE8kShTRx1NIw4Q9IBHlwODjkjWEtMUyA==",
-      "peer": true
+      "integrity": "sha512-6OSu9PTIzmn9TCDiovULTnET6BgXtDYL4Gg4szY+cGsc3JP1dQL8qvE8kShTRx1NIw4Q9IBHlwODjkjWEtMUyA=="
     },
     "unicode-canonical-property-names-ecmascript": {
       "version": "1.0.4",
diff --git a/package.json b/package.json
index d82da37..caf48bd 100644
--- a/package.json
+++ b/package.json
@@ -7,10 +7,15 @@
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.5",
     "@testing-library/user-event": "^12.7.2",
+    "@types/jest": "^26.0.20",
+    "@types/node": "^14.14.31",
+    "@types/react": "^17.0.2",
+    "@types/react-dom": "^17.0.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-feather": "^2.0.9",
     "react-scripts": "4.0.2",
+    "typescript": "^4.1.5",
     "web-vitals": "^1.1.0"
   },
   "scripts": {
diff --git a/src/App.js b/src/App.tsx
similarity index 98%
rename from src/App.js
rename to src/App.tsx
index 5b8a1f7..f2682cb 100644
--- a/src/App.js
+++ b/src/App.tsx
@@ -10,6 +10,7 @@ import {
   Trash,
 } from "react-feather";
 import ResultExplorerTable from "./components/ResultExplorerTable";
+
 import ResultListTest from "./assets/resultList.json";
 
 function App() {
@@ -92,7 +93,7 @@ function App() {
           <div className="mb-3 pb-1 font-semibold text-2xl border-b-2 dark:text-white">
             Job Browser
           </div>
-          <ResultExplorerTable resultList={ResultListTest} />
+          <ResultExplorerTable results={ResultListTest} />
         </div>
       </div>
     </div>
diff --git a/src/components/ResultExplorerLine.js b/src/components/ResultExplorerLine.tsx
similarity index 56%
rename from src/components/ResultExplorerLine.js
rename to src/components/ResultExplorerLine.tsx
index c6b463f..cb70d2a 100644
--- a/src/components/ResultExplorerLine.js
+++ b/src/components/ResultExplorerLine.tsx
@@ -1,28 +1,39 @@
 import { PlusCircle, XCircle } from "react-feather";
 import ResultExplorerTag from "./ResultExplorerTag";
 
-function ResultExplorerLine(props) {
+type LineProps = {
+  result: Result;
+};
+
+export type Result = {
+  id: string;
+  name: string;
+  tags: string[];
+  submitted_at: string;
+};
+
+function ResultExplorerLine(props: LineProps) {
   return (
     <tr>
       <td className="border py-2 text-center">
         <input type="checkbox" className="h-4 w-4" />
       </td>
-      <td className="border px-4 text-left truncate">{ props.result.name }</td>
+      <td className="border px-4 text-left truncate">{props.result.name}</td>
       <td className="border px-4">
         <div className="flex flex-row justify-start space-x-2 overflow-x-auto scrollbar-thin scrollbar-thumb-ovh_blue scrollbar-track-gray-200">
-          { props.result.tags.map((tag, index) => (
-              <ResultExplorerTag key={index+'_'+tag} text={ tag } />
-          )) }
+          {props.result.tags.map((tag, index) => (
+            <ResultExplorerTag key={index + "_" + tag} text={tag} />
+          ))}
         </div>
       </td>
-      <td className="border px-4 text-xs">{ props.result.submitted_at }</td>
+      <td className="border px-4 text-xs">{props.result.submitted_at}</td>
       <td className="border px-4">
         <div className="flex flex-row justify-evenly">
           <button className="text-red-500">
-            <XCircle/>
+            <XCircle />
           </button>
           <button className="text-blue-500">
-            <PlusCircle/>
+            <PlusCircle />
           </button>
         </div>
       </td>
@@ -30,4 +41,4 @@ function ResultExplorerLine(props) {
   );
 }
 
-export default ResultExplorerLine;
\ No newline at end of file
+export default ResultExplorerLine;
diff --git a/src/components/ResultExplorerTable.js b/src/components/ResultExplorerTable.tsx
similarity index 70%
rename from src/components/ResultExplorerTable.js
rename to src/components/ResultExplorerTable.tsx
index 210dc22..4360fa3 100644
--- a/src/components/ResultExplorerTable.js
+++ b/src/components/ResultExplorerTable.tsx
@@ -1,6 +1,11 @@
 import ResultExplorerLine from "./ResultExplorerLine";
+import { Result } from "./ResultExplorerLine";
 
-function ResultExplorerTable(props) {
+type TableProps = {
+  results: Result[];
+};
+
+function ResultExplorerTable(props: TableProps) {
   return (
     <table className="shadow-md bg-white table-fixed w-full">
       <tr className="bg-ovh_blue text-white text-left border">
@@ -13,10 +18,9 @@ function ResultExplorerTable(props) {
         <th className="py-4 w-32 text-center">Actions</th>
       </tr>
 
-      { props.resultList.map((result) => (
-        <ResultExplorerLine key={ result.id } result={result} />
-      )) }
-
+      {props.results.map((result) => (
+        <ResultExplorerLine key={result.id} result={result} />
+      ))}
     </table>
   );
 }
diff --git a/src/components/ResultExplorerTag.js b/src/components/ResultExplorerTag.tsx
similarity index 57%
rename from src/components/ResultExplorerTag.js
rename to src/components/ResultExplorerTag.tsx
index 8ab5ee0..90b72d0 100644
--- a/src/components/ResultExplorerTag.js
+++ b/src/components/ResultExplorerTag.tsx
@@ -1,10 +1,15 @@
 import { Tag } from "react-feather";
 
-function ResultExplorerTag(props) {
+type TagProps = {
+  key: string;
+  text: string;
+};
+
+function ResultExplorerTag(props: TagProps) {
   return (
     <div className="flex flex-row flex-none bg-gray-300 rounded-full px-2 my-1 items-center">
       <Tag className="w-4 pr-1" />
-      <div className="font-bold text-black text-xs">{ props.text }</div>
+      <div className="font-bold text-black text-xs">{props.text}</div>
     </div>
   );
 }
diff --git a/src/index.js b/src/index.tsx
similarity index 100%
rename from src/index.js
rename to src/index.tsx
diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
new file mode 100644
index 0000000..6431bc5
--- /dev/null
+++ b/src/react-app-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="react-scripts" />
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..a273b0c
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "src"
+  ]
+}