diff --git a/components/jobs/JobDetail.vue b/components/jobs/JobDetail.vue
new file mode 100644
index 00000000..885bb303
--- /dev/null
+++ b/components/jobs/JobDetail.vue
@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { get } from '@vueuse/core';
+import { type JobMarkdownContent } from '~/composables/markdown';
+
+const props = defineProps<{
+  data: JobMarkdownContent;
+}>();
+
+const { data } = toRefs(props);
+
+const separatedData: ComputedRef<{
+  default: JobMarkdownContent;
+  blockquote: JobMarkdownContent;
+}> = computed(() => {
+  const regularItems = [];
+  const blockquoteItems = [];
+
+  const dataVal = get(data);
+
+  for (const item of dataVal.body.children) {
+    if (item.tag !== 'blockquote') {
+      regularItems.push(item);
+    } else {
+      blockquoteItems.push(item);
+    }
+  }
+
+  return {
+    default: {
+      ...dataVal,
+      body: {
+        ...dataVal.body,
+        children: regularItems,
+      },
+    },
+    blockquote: {
+      ...dataVal,
+      body: {
+        ...dataVal.body,
+        children: blockquoteItems,
+      },
+    },
+  };
+});
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <div class="py-8 lg:py-20">
+    <div class="container flex flex-col lg:flex-row">
+      <div class="grow">
+        <ContentRenderer
+          v-if="separatedData.default"
+          :value="separatedData.default"
+        >
+          <ContentRendererMarkdown :value="separatedData.default" />
+        </ContentRenderer>
+      </div>
+      <div
+        v-if="separatedData.blockquote.body.children.length > 0"
+        class="mt-8 lg:mt-0 lg:pl-16 xl:pl-24"
+      >
+        <div class="bg-rui-primary/[.04] p-6 lg:w-[384px]">
+          <div class="flex">
+            <div class="bg-white rounded-lg p-3 text-rui-primary">
+              <RuiIcon name="lightbulb-line" />
+            </div>
+          </div>
+          <ContentRenderer
+            v-if="separatedData.blockquote"
+            :value="separatedData.blockquote"
+          >
+            <ContentRendererMarkdown :value="separatedData.blockquote" />
+          </ContentRenderer>
+          <ButtonLink
+            to="mailto:careers@rotki.com"
+            external
+            color="primary"
+            variant="default"
+          >
+            {{ t('actions.apply') }}
+          </ButtonLink>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/composables/markdown.ts b/composables/markdown.ts
index 8fa2eb12..e06f5b4b 100644
--- a/composables/markdown.ts
+++ b/composables/markdown.ts
@@ -66,19 +66,25 @@ export const useMarkdownContent = () => {
   const queryPrefixForJob = async (
     prefix: typeof CONTENT_PREFIX,
     path: string,
-  ): Promise<JobMarkdownContent> => {
+  ): Promise<JobMarkdownContent | null> => {
     const prefixedPath = `${prefix}${path}`;
-    const data = await queryContent<JobMarkdownContent>(prefixedPath).findOne();
-    return {
-      ...data,
-      link: replacePathPrefix(prefix, data?._path),
-    };
+    try {
+      const data = await queryContent<JobMarkdownContent>(
+        prefixedPath,
+      ).findOne();
+      return {
+        ...data,
+        link: replacePathPrefix(prefix, data?._path),
+      };
+    } catch {
+      return null;
+    }
   };
 
   /**
    * fetches a single markdown files within the jobs directory
    */
-  const loadJob = async (path: string): Promise<JobMarkdownContent> => {
+  const loadJob = async (path: string): Promise<JobMarkdownContent | null> => {
     try {
       // try to fetch from prefix
       return await queryPrefixForJob(CONTENT_PREFIX, path);
diff --git a/pages/jobs/[id].vue b/pages/jobs/[id].vue
index 5cdba662..40b3ceaa 100644
--- a/pages/jobs/[id].vue
+++ b/pages/jobs/[id].vue
@@ -1,9 +1,6 @@
 <script lang="ts" setup>
 import { commonAttrs, getMetadata } from '~/utils/metadata';
-import {
-  type JobMarkdownContent,
-  useMarkdownContent,
-} from '~/composables/markdown';
+import { useMarkdownContent } from '~/composables/markdown';
 
 const {
   public: { baseUrl },
@@ -12,38 +9,6 @@ const { path } = useRoute();
 const { loadJob } = useMarkdownContent();
 
 const data = await loadJob(path);
-const separatedData: ComputedRef<{
-  default: JobMarkdownContent;
-  blockquote: JobMarkdownContent;
-}> = computed(() => {
-  const regularItems = [];
-  const blockquoteItems = [];
-
-  for (const item of data.body.children) {
-    if (item.tag !== 'blockquote') {
-      regularItems.push(item);
-    } else {
-      blockquoteItems.push(item);
-    }
-  }
-
-  return {
-    default: {
-      ...data,
-      body: {
-        ...data.body,
-        children: regularItems,
-      },
-    },
-    blockquote: {
-      ...data,
-      body: {
-        ...data.body,
-        children: blockquoteItems,
-      },
-    },
-  };
-});
 
 if (!data?.open) {
   showError({ message: `Page not found: ${path}`, statusCode: 404 });
@@ -65,50 +30,11 @@ if (!data?.open) {
 definePageMeta({
   layout: false,
 });
-
-const { t } = useI18n();
 </script>
 
 <template>
-  <NuxtLayout name="jobs">
+  <NuxtLayout v-if="data" name="jobs">
     <template #title>{{ data.title }}</template>
-    <div class="py-8 lg:py-20">
-      <div class="container flex flex-col lg:flex-row">
-        <div class="grow">
-          <ContentRenderer
-            v-if="separatedData.default"
-            :value="separatedData.default"
-          >
-            <ContentRendererMarkdown :value="separatedData.default" />
-          </ContentRenderer>
-        </div>
-        <div
-          v-if="separatedData.blockquote.body.children.length > 0"
-          class="mt-8 lg:mt-0 lg:pl-16 xl:pl-24"
-        >
-          <div class="bg-rui-primary/[.04] p-6 lg:w-[384px]">
-            <div class="flex">
-              <div class="bg-white rounded-lg p-3 text-rui-primary">
-                <RuiIcon name="lightbulb-line" />
-              </div>
-            </div>
-            <ContentRenderer
-              v-if="separatedData.blockquote"
-              :value="separatedData.blockquote"
-            >
-              <ContentRendererMarkdown :value="separatedData.blockquote" />
-            </ContentRenderer>
-            <ButtonLink
-              to="mailto:careers@rotki.com"
-              external
-              color="primary"
-              variant="default"
-            >
-              {{ t('actions.apply') }}
-            </ButtonLink>
-          </div>
-        </div>
-      </div>
-    </div>
+    <JobDetail :data="data" />
   </NuxtLayout>
 </template>