diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index db3084d..f8280dd 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -33,5 +33,8 @@ jobs:
       - name: Lint
         run: deno lint
 
+      - name: Run the app locally
+        run: deno task dev &
+
       - name: Test
         run: deno task start && CHROME_BIN=$(which chrome) deno task test --quiet
diff --git a/fresh.gen.ts b/fresh.gen.ts
index 799a93f..5768853 100644
--- a/fresh.gen.ts
+++ b/fresh.gen.ts
@@ -2,13 +2,20 @@
 // This file SHOULD be checked into source version control.
 // This file is automatically updated during development when running `dev.ts`.
 
-import * as $0 from "./routes/index.tsx";
+import * as $0 from "./routes/[page].tsx";
+import * as $1 from "./routes/index.tsx";
+import * as $2 from "./routes/jobs/[job].tsx";
+import * as $$0 from "./islands/search.tsx";
 
 const manifest = {
   routes: {
-    "./routes/index.tsx": $0,
+    "./routes/[page].tsx": $0,
+    "./routes/index.tsx": $1,
+    "./routes/jobs/[job].tsx": $2,
+  },
+  islands: {
+    "./islands/search.tsx": $$0,
   },
-  islands: {},
   baseUrl: import.meta.url,
 };
 
diff --git a/islands/search.tsx b/islands/search.tsx
new file mode 100644
index 0000000..6785eb7
--- /dev/null
+++ b/islands/search.tsx
@@ -0,0 +1,21 @@
+/** @jsx h */
+import { h } from "preact";
+
+const search = () => {
+  return (
+    <div>
+      <input
+        type="text"
+        placeholder="search a job"
+        id="input"
+      />
+      <button
+        onClick={() =>
+          location.replace("/jobs/" + document.getElementById("input").value)}
+      >
+        Search
+      </button>
+    </div>
+  );
+};
+export default search;
diff --git a/routes/[page].tsx b/routes/[page].tsx
new file mode 100644
index 0000000..a878b87
--- /dev/null
+++ b/routes/[page].tsx
@@ -0,0 +1,16 @@
+/** @jsx h */
+import { h } from "preact";
+import { PageProps } from "$fresh/server.ts";
+import Search from "../islands/search.tsx";
+
+export default function JobPage(props: PageProps) {
+  const jobInfo = (props.params.page.toLowerCase() == "jobs")
+    ? "error: empty input"
+    : "error: page doesn't exist!";
+  return (
+    <div>
+      <p>{jobInfo}</p>
+      <Search />
+    </div>
+  );
+}
diff --git a/routes/index.tsx b/routes/index.tsx
index 6071486..c67eace 100644
--- a/routes/index.tsx
+++ b/routes/index.tsx
@@ -1,5 +1,6 @@
 /** @jsx h */
 import { h } from "preact";
+import Search from "../islands/search.tsx";
 
 export default function Home() {
   return (
@@ -13,6 +14,7 @@ export default function Home() {
       <h2>
         Skill Test (Software Engineer)
       </h2>
+      <Search />
     </div>
   );
 }
diff --git a/routes/jobs/[job].tsx b/routes/jobs/[job].tsx
new file mode 100644
index 0000000..c325b66
--- /dev/null
+++ b/routes/jobs/[job].tsx
@@ -0,0 +1,11 @@
+/** @jsx h */
+import { h } from "preact";
+import { PageProps } from "$fresh/server.ts";
+
+export default function JobPage(props: PageProps) {
+  const jobInput = props.params.job;
+  const jobInfo = jobInput.toLowerCase() == "engineer"
+    ? 'Job "engineer" is open for you!'
+    : "Job " + '"' + jobInput + '"' + " is not available";
+  return <div>{jobInfo}</div>;
+}