diff --git a/jero-web/src/views/businessSupport/problemKnowledgeBase/index.vue b/jero-web/src/views/businessSupport/problemKnowledgeBase/index.vue
new file mode 100644
index 000000000..7a4a2757f
--- /dev/null
+++ b/jero-web/src/views/businessSupport/problemKnowledgeBase/index.vue
@@ -0,0 +1,40 @@
+<template>
+  <a-card :bordered="false">
+    <a-tabs v-model="tabModel" @change="callback">
+      <a-tab-pane :key="$t('problemKnowledgeBase')" :tab="$t('problemKnowledgeBase')">
+        <problemKnowledgeBaseList v-if="tabModel == $t('problemKnowledgeBase')" ref="problemKnowledgeBaseListRef"/>
+      </a-tab-pane>
+      <a-tab-pane key="Country Card" tab="Country Card">
+        <countryCardList v-if="tabModel == 'Country Card'" ref="countryCardListRef"/>
+      </a-tab-pane>
+    </a-tabs>
+  </a-card>
+</template>
+<script>
+  import problemKnowledgeBaseList from './components/problemKnowledgeBaseList'
+  import countryCardList from './components/countryCardList'
+
+  export default {
+    name: 'index',
+    components: {
+      problemKnowledgeBaseList,
+      countryCardList
+    },
+    data() {
+      return {
+        tabModel: this.$t('problemKnowledgeBase')
+      }
+    },
+    mounted() {
+    },
+    methods: {
+      callback(key) {
+
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file