diff --git a/frontend/src/pages/public/Career.vue b/frontend/src/pages/public/Career.vue
index 78c8767..58656dd 100644
--- a/frontend/src/pages/public/Career.vue
+++ b/frontend/src/pages/public/Career.vue
@@ -1,11 +1,52 @@
 <template>
-  <div class="">Career</div>
+  <div class="directories_containter">
+    <div class="directory_container" v-for="(directory, index) in directories" :key="index" @click="view_link(directory)">
+      <p class="directory_title_txt" v-tooltip :title="directory.summary_text" delay='{"show":"500", "hide":"100"}'><u>{{
+        directory.title_text }}</u>
+      </p>
+    </div>
+  </div>
 </template>
 <script>
+import { ContentApi } from '../../utils/index'
 export default {
   name: 'Career',
   components: {},
   computed: {},
-  methods: {}
+  mounted() {
+    this.retrieve_directories()
+  },
+  methods: {
+    retrieve_directories() {
+      ContentApi.retrieve_career_directories()
+        .then((response) => {
+          this.directories = response.data
+        })
+        .catch((error) => {
+          this.mnx_backendErrorHandler(error)
+        })
+    },
+    view_link(directory) {
+      this.mnx_navToLinkContentViewer(btoa(directory.content_link))
+    }
+  },
+  data() {
+    return {
+      directories: null
+    }
+  }
+
 }
 </script>
+<style scoped lang="scss">
+.directories_containter {
+  @extend .container;
+}
+
+.directory_container {
+  @extend .container;
+  cursor: pointer;
+}
+
+.directory_title_txt {}
+</style>
diff --git a/frontend/src/utils/backend/content.js b/frontend/src/utils/backend/content.js
index 8506d22..7cafecf 100644
--- a/frontend/src/utils/backend/content.js
+++ b/frontend/src/utils/backend/content.js
@@ -19,5 +19,9 @@ class ContentApi {
     const request = backendAxios.post('/api/content/retrieve-about-directories', {}, {})
     return request
   }
+  static retrieve_career_directories() {
+    const request = backendAxios.post('/api/content/retrieve-career-directories', {}, {})
+    return request
+  }
 }
 export { ContentApi }