diff --git a/src/hooks/useComponent.ts b/src/hooks/useComponent.ts
new file mode 100644
index 0000000..c7dc022
--- /dev/null
+++ b/src/hooks/useComponent.ts
@@ -0,0 +1,97 @@
+import { ref } from 'vue'
+
+// import WysiwygEditor from '@/WysiwygEditor.vue'
+// // import CodeEditor from '@/CodeEditor.vue'
+// import GridSettings from '~/views/GridSettings.vue'
+// import GridView from '~/views/GridView.vue'
+// import TableView from '~/views/TableView.vue'
+// import ListView from '~/views/ListView.vue'
+// import FormView from '~/views/FormView.vue'
+
+// import TaFormView from '/app_modules/bm/ta/views/ta_form.vue'
+// import TaTableView from '/app_modules/bm/ta/views/ta_table.vue'
+// import TaListView from '/app_modules/bm/ta/views/ta_list.vue'
+
+export enum DynComponent {
+  // GridSettings,
+  // GridJs,
+  // TableView,
+  // ListView,
+  // FormView,
+  // WysiwygEditor,
+//   CodeEditor,
+}
+
+const asideComponent = ref({})
+
+const settingsComponent = ref({})
+
+const fullSliderComponent = ref({})
+
+const formViewComponent = ref({})
+
+const dataViewComponent = ref({})
+
+const topPaneComponent = ref({})
+
+const bottomPaneComponent = ref({})
+
+const moduleComponent = ref({})
+
+const getModuleComponent = (key: string, target: string): any => {
+  // switch (key) {
+  //   case 'ta':
+  //     switch (target) {
+  //       case 'form':
+  //         return TaFormView
+  //         break
+  //       case 'table':
+  //         return TaTableView
+  //         break
+  //       case 'list':
+  //         return TaListView
+  //         break
+  //     }
+  //     break
+  // }
+}
+const getComponent = (cmpnt: DynComponent): any => {
+  // switch (cmpnt) {
+  //   case DynComponent.WysiwygEditor:
+  //     return WysiwygEditor
+  //     break
+  //   // case DynComponent.CodeEditor:
+  //   //   return CodeEditor
+  //   //   break
+  //   case DynComponent.GridSettings:
+  //     return GridSettings
+  //     break
+  //   case DynComponent.GridJs:
+  //     return GridView
+  //     break
+  //   case DynComponent.TableView:
+  //     return TableView
+  //     break
+  //   case DynComponent.ListView:
+  //     return ListView
+  //     break
+  //   case DynComponent.FormView:
+  //     return FormView
+  //     break
+  // }
+}
+
+export default function useComponent() {
+  return {
+    getModuleComponent,
+    asideComponent,
+    settingsComponent,
+    fullSliderComponent,
+    dataViewComponent,
+    formViewComponent,
+    getComponent,
+    topPaneComponent,
+    bottomPaneComponent,
+    moduleComponent,
+  }
+}
diff --git a/src/hooks/useData.js b/src/hooks/useData.js
new file mode 100644
index 0000000..0ef6b92
--- /dev/null
+++ b/src/hooks/useData.js
@@ -0,0 +1,80 @@
+const roles = ['Admin', 'Editor', 'User']
+
+const users = [
+  {
+    id: 'c27eb2bd-13d3-4231-aa60-e392b5f60d2e',
+    name: 'Agnes Bogisich',
+    email: 'Drake61@hotmail.com',
+    role: roles[Math.round(Math.random() * (roles.length - 1))],
+    active: true,
+  },
+  {
+    id: 'baca6dbf-4efe-4135-b584-5123dc6e1efa',
+    name: 'Damaris Huels',
+    email: 'Alayna.Rohan@yahoo.com',
+    role: roles[Math.round(Math.random() * (roles.length - 1))],
+    active: true,
+  },
+  {
+    id: 'ac991968-7f22-41e4-84ba-e62a335607c7',
+    name: 'Monique Kozey',
+    email: 'Louisa_Emard@gmail.com',
+    role: roles[Math.round(Math.random() * (roles.length - 1))],
+    active: false,
+  },
+  {
+    id: '2b353eda-d96a-47b0-aaed-1871b257abd1',
+    name: 'Kayden Collier',
+    email: 'Rosina71@yahoo.com',
+    role: roles[Math.round(Math.random() * (roles.length - 1))],
+    active: true,
+  },
+  {
+    id: '697fbe33-fe86-45fc-93e3-bd4335fe4063',
+    name: 'Kiera Baumbach',
+    email: 'Ashleigh10@hotmail.com',
+    role: roles[Math.round(Math.random() * (roles.length - 1))],
+    active: true,
+  },
+  {
+    id: '0dffdd8d-84f4-4b87-8832-c6f560ebe850',
+    name: 'Sage Dietrich',
+    email: 'Ramona70@gmail.com',
+    role: roles[Math.round(Math.random() * (roles.length - 1))],
+    active: false,
+  },
+  {
+    id: '46d0a8b6-b2c2-468e-b6d9-89c8520dccfe',
+    name: 'Jodie Jones',
+    email: 'Lempi89@gmail.com',
+    role: roles[Math.round(Math.random() * (roles.length - 1))],
+    active: true,
+  },
+  {
+    id: 'c8d54e36-f6e8-4c8f-b43a-4228ab11d7a9',
+    name: 'Blaze Reilly',
+    email: 'Dakota_Casper@yahoo.com',
+    role: roles[Math.round(Math.random() * (roles.length - 1))],
+    active: true,
+  },
+  {
+    id: '47e143af-9e03-4c7c-9fe1-99f3374841cb',
+    name: 'Margie Douglas',
+    email: 'Jadyn.Ernser@yahoo.com',
+    role: roles[Math.round(Math.random() * (roles.length - 1))],
+    active: true,
+  },
+  {
+    id: 'd40ff313-4a69-4a70-9fc3-398d51e53114',
+    name: 'Arianna Kilback',
+    email: 'Fritz.Tremblay@gmail.com',
+    role: roles[Math.round(Math.random() * (roles.length - 1))],
+    active: false,
+  },
+]
+
+export default function useData() {
+  return {
+    users,
+  }
+}