diff --git a/structures-frontend-next/components.d.ts b/structures-frontend-next/components.d.ts
index 87c479c8..3aa4ace6 100644
--- a/structures-frontend-next/components.d.ts
+++ b/structures-frontend-next/components.d.ts
@@ -53,10 +53,11 @@ declare module 'vue' {
     SidebarItem: typeof import('./src/components/SidebarItem.vue')['default']
     SideNav: typeof import('./src/components/SideNav.vue')['default']
     Structure: typeof import('./src/components/structures/flow-components/Structure.vue')['default']
+    StructureDataViewModal: typeof import('./src/components/modals/StructureDataViewModal.vue')['default']
     StructureItemModal: typeof import('./src/components/modals/StructureItemModal.vue')['default']
     StructureNode: typeof import('./src/components/structures/flow-components/StructureNode.vue')['default']
     StructureSettings: typeof import('./src/components/structures/sidebar-dashboard/StructureSettings.vue')['default']
-    StructureSidebarDashboard: typeof import('./src/components/structures/StructureSidebarDashboard.vue')['default']
+    StructureSidebarDashboard: typeof import('./src/components/structures/sidebar-dashboard/StructureSidebarDashboard.vue')['default']
     StructuresList: typeof import('./src/components/StructuresList.vue')['default']
     Tab: typeof import('primevue/tab')['default']
     TabList: typeof import('primevue/tablist')['default']
diff --git a/structures-frontend-next/src/components/ProjectStructuresTable.vue b/structures-frontend-next/src/components/ProjectStructuresTable.vue
index 3d142001..e6997314 100644
--- a/structures-frontend-next/src/components/ProjectStructuresTable.vue
+++ b/structures-frontend-next/src/components/ProjectStructuresTable.vue
@@ -2,6 +2,7 @@
 import { Component, Vue, Prop, Watch, Ref } from 'vue-facing-decorator'
 import CrudTable from '@/components/CrudTable.vue'
 import StructureItemModal from '@/components/modals/StructureItemModal.vue'
+import StructureDataViewModal from '@/components/modals/StructureDataViewModal.vue'
 import { Structure, Structures } from '@kinotic/structures-api'
 import type { CrudHeader } from '@/types/CrudHeader'
 import { APPLICATION_STATE } from '@/states/IApplicationState'
@@ -9,7 +10,7 @@ import type { Identifiable, IterablePage, Pageable } from '@kinotic/continuum-cl
 import DatetimeUtil from "@/util/DatetimeUtil"
 
 @Component({
-  components: { CrudTable, StructureItemModal }
+  components: { CrudTable, StructureItemModal, StructureDataViewModal }
 })
 export default class ProjectStructuresTable extends Vue {
   @Prop({ required: true }) applicationId!: string
@@ -24,14 +25,18 @@ export default class ProjectStructuresTable extends Vue {
     { field: 'description', header: 'Description', sortable: false },
     { field: 'created', header: 'Created', sortable: false },
     { field: 'updated', header: 'Updated', sortable: false },
-    { field: 'published', header: 'Status', sortable: false }
+    { field: 'published', header: 'Status', sortable: false, centered: true }
   ]
 
   searchText: string = ''
   showModal = false
+  showItemModal = false
   selectedStructure: Structure | null = null
   isInitialized = false
   public DatetimeUtil = DatetimeUtil
+  actionMenus: any[] = []
+  currentActionItem: Structure | null = null
+  private dataSource1 = Structures.getStructureService()
 
   mounted() {
     this.searchText = (this.$route.query['search-structure'] as string) || ''
@@ -100,6 +105,16 @@ export default class ProjectStructuresTable extends Vue {
     this.selectedStructure = null
   }
 
+  openItemModal(item: Structure) {
+    this.selectedStructure = item
+    this.showItemModal = true
+  }
+
+  closeItemModal() {
+    this.showItemModal = false
+    this.selectedStructure = null
+  }
+
   onAddItem() {
     // this.$router.push("/new-structure")
   }
@@ -112,6 +127,63 @@ export default class ProjectStructuresTable extends Vue {
     this.openModal(item)
   }
 
+  toggleMenu(event: Event, item: Structure, index: number) {
+    this.currentActionItem = item
+    const menu = this.actionMenus[index]
+    if (menu) {
+      menu.toggle(event)
+    }
+  }
+
+  async publish(item: any) {
+    item['publishing'] = true
+    if (confirm('Are you sure you want to Publish this Structure?')) {
+      let table: any = this.$refs?.crudTable
+      try {
+        await this.dataSource1.publish(item.id)
+        table?.find()
+        delete item['publishing']
+      } catch (error: any) {
+        delete item['publishing']
+        table?.displayAlert(error.message)
+      }
+    }
+  }
+
+  async unPublish(item: any) {
+    item['publishing'] = true
+    if (confirm('Are you sure you want to Remove Published Status for this Structure? \nAll data saved under this Structure will be permanently deleted, proceed with caution.')) {
+      let table: any = this.$refs?.crudTable
+      try {
+        await this.dataSource1.unPublish(item.id)
+        table?.find()
+        delete item['publishing']
+      } catch (error: any) {
+        delete item['publishing']
+        table?.displayAlert(error.message)
+      }
+    }
+  }
+
+  getActionMenu(item: Structure) {
+    return [
+      {
+        label: item.published ? 'Unpublish' : 'Publish',
+        icon: item.published ? 'pi pi-eye-slash' : 'pi pi-eye',
+        command: () => (item.published ? this.unPublish(item) : this.publish(item))
+      },
+      {
+        label: 'View',
+        icon: 'pi pi-file',
+        command: (e: any) => {
+          e?.originalEvent?.stopPropagation?.()
+          e?.originalEvent?.preventDefault?.()
+          this.openItemModal(item)
+        }
+      }
+    ]
+  }
+
   async markProjectAsActive() {
     try {
       const header = this.$root?.$refs?.header as { setActiveProjectById?: (appId: string, projId: string) => Promise<void> } | undefined
@@ -154,14 +226,51 @@ export default class ProjectStructuresTable extends Vue {
           {{ DatetimeUtil.formatRelativeDate(item.updated) }}
         </span>
       </template>
+      <template #item.published="{ item }">
+        <div class="w-full text-center">
+          <Tag
+            :value="item.published ? 'Published' : 'Unpublished'"
+            :severity="item.published ? 'success' : 'secondary'"
+            class="px-2 py-1 text-sm"
+            rounded
+          />
+        </div>
+      </template>
       <template #item.description="{ item }">
         <span>{{ item.description }}</span>
       </template>
+      <template #additional-actions="{ item }">
+        <div class="flex items-center justify-center">
+          <Button
+            icon="pi pi-ellipsis-v"
+            @click.stop="(event) => toggleMenu(event, item, item.id)"
+            aria-haspopup="true"
+            :aria-controls="'action_menu_' + item.id"
+            type="button"
+            severity="secondary"
+            variant="text"
+          />
+          <Menu
+            :ref="(el) => (actionMenus[item.id] = el)"
+            :model="getActionMenu(item)"
+            :popup="true"
+            :id="'action_menu_' + item.id"
+          />
+        </div>
+      </template>
     </CrudTable>
 
     <StructureItemModal
-      v-if="showModal && selectedStructure"
+      v-if="showItemModal && selectedStructure"
       :item="selectedStructure"
+      @close="closeItemModal"
+    />
+
+    <StructureDataViewModal
+      v-if="showModal && selectedStructure"
+      v-model="showModal"
+      :title="selectedStructure?.name || 'Data View'"
+      :entity-props="{ structureId: selectedStructure?.id }"
       @close="closeModal"
     />
   </div>
diff --git a/structures-frontend-next/src/components/SideBar.vue b/structures-frontend-next/src/components/SideBar.vue
index 46d8faaf..abb8edca 100644
--- a/structures-frontend-next/src/components/SideBar.vue
+++ b/structures-frontend-next/src/components/SideBar.vue
@@ -79,7 +79,7 @@ export default class Sidebar extends Vue {
 
 <template>
   <div class="p-2 fixed rounded-xl top-[64px] left-0 z-40 h-[calc(100vh-64px)]"
-    :class="[collapsed ? 'w-[64px]' : 'w-[256px]']">
+    :class="[collapsed ? 'w-[67px]' : 'w-[256px]']">
     <div :class="['bg-surface-50 rounded-xl flex flex-col justify-between px-2 py-2 h-full', 'transition-[width] duration-300 ease-in-out w-full']">
       <div class="flex flex-col w-full">
         <SidebarItem
diff --git a/structures-frontend-next/src/components/SidebarItem.vue b/structures-frontend-next/src/components/SidebarItem.vue
index 2f3b8909..1838e0e9 100644
--- a/structures-frontend-next/src/components/SidebarItem.vue
+++ b/structures-frontend-next/src/components/SidebarItem.vue
@@ -22,13 +22,16 @@ const iconClass = computed(() => {
 <template>
   <div
     :class="[
-      'flex items-center py-[9px] cursor-pointer w-full rounded-md hover:bg-surface-200 px-2 pl-1 transition-colors duration-200', 
+      'flex items-center py-[9px] cursor-pointer w-full rounded-md hover:bg-surface-200 px-2 pl-1 transition-colors duration-200',
       props.isActive ? '' : 'bg-transparent'
     ]"
     @click="$emit('click')"
   >
-    <div class="min-w-[20px] flex justify-center">
-      <i :class="['pi', icon, 'text-base', iconClass]" />
+    <div class="min-w-[20px] flex justify-center items-center">
+      <i
+        :class="['pi', icon, props.collapsed ? '' : 'text-base', iconClass]"
+        :style="props.collapsed ? { fontSize: '14px', lineHeight: '14px' } : {}"
+      />
     </div>
     <div class="w-[8px]"></div>
     <div class="overflow-hidden">
diff --git a/structures-frontend-next/src/components/StructuresList.vue b/structures-frontend-next/src/components/StructuresList.vue
index 0b584df1..b715577c 100644
--- a/structures-frontend-next/src/components/StructuresList.vue
+++ b/structures-frontend-next/src/components/StructuresList.vue
@@ -1,6 +1,7 @@
 <script lang="ts">
 import { Component, Vue, Prop, Ref, Watch } from "vue-facing-decorator";
 import CrudTable from "@/components/CrudTable.vue";
+import StructureDataViewModal from "@/components/modals/StructureDataViewModal.vue";
 import StructureItemModal from "@/components/modals/StructureItemModal.vue";
 import type {
   Identifiable,
@@ -13,7 +14,7 @@ import type { CrudHeader } from "@/types/CrudHeader";
 import DatetimeUtil from "@/util/DatetimeUtil";
 
 @Component({
-  components: { CrudTable, StructureItemModal },
+  components: { CrudTable, StructureDataViewModal, StructureItemModal },
 })
 export default class StructuresList extends Vue {
   @Prop({ required: true }) applicationId!: string;
@@ -33,6 +34,7 @@ export default class StructuresList extends Vue {
   ];
 
   showModal = false;
+  showItemModal = false;
   selectedStructure: Structure | null = null;
   searchText = "";
   isInitialized = false;
@@ -125,6 +127,16 @@ export default class StructuresList extends Vue {
     this.selectedStructure = null;
   }
 
+  openItemModal(item: Structure) {
+    this.selectedStructure = item;
+    this.showItemModal = true;
+  }
+
+  closeItemModal() {
+    this.showItemModal = false;
+    this.selectedStructure = null;
+  }
+
   handleRowClick(item: Structure): void {
     this.openModal(item);
   }
@@ -186,7 +198,11 @@ export default class StructuresList extends Vue {
       {
         label: "View",
         icon: "pi pi-file",
-        command: () => this.handleRowClick(item),
+        command: (e: any) => {
+          e?.originalEvent?.stopPropagation?.();
+          e?.originalEvent?.preventDefault?.();
+          this.openItemModal(item);
+        }
       },
     ];
   }
@@ -227,7 +243,6 @@ export default class StructuresList extends Vue {
           />
         </div>
       </template>
-
       <template #additional-actions="{ item }">
         <div class="flex items-center justify-center">
           <Button
@@ -249,10 +264,18 @@ export default class StructuresList extends Vue {
       </template>
     </CrudTable>
 
+    <StructureDataViewModal
+      v-if="selectedStructure"
+      v-model="showModal"
+      :title="selectedStructure?.name || 'Data View'"
+      :entity-props="{ structureId: selectedStructure?.id }"
+      @close="closeModal"
+    />
+
     <StructureItemModal
-      v-if="showModal && selectedStructure"
+      v-if="showItemModal && selectedStructure"
       :item="selectedStructure"
-      @close="closeModal"
+      @close="closeItemModal"
     />
   </div>
 </template>
\ No newline at end of file
diff --git a/structures-frontend-next/src/components/modals/StructureDataViewModal.vue b/structures-frontend-next/src/components/modals/StructureDataViewModal.vue
new file mode 100644
index 00000000..0ffccca1
--- /dev/null
+++ b/structures-frontend-next/src/components/modals/StructureDataViewModal.vue
@@ -0,0 +1,73 @@
+<script lang="ts">
+import EntityList from "@/pages/EntityList.vue";
+import { Component, Vue, Prop, Emit } from "vue-facing-decorator";
+
+@Component({
+    components: { EntityList }
+})
+export default class StructureDataViewModal extends Vue {
+    @Prop({ default: false }) readonly modelValue!: boolean;
+    @Prop({ default: "Data View" }) readonly title!: string;
+    @Prop({ default: () => ({}) }) readonly entityProps!: Record<string, unknown>;
+
+    get visible(): boolean {
+        return this.modelValue;
+    }
+
+    set visible(val: boolean) {
+        this.updateModelValue(val);
+    }
+
+    @Emit("update:modelValue")
+    updateModelValue(val: boolean) {
+        return val;
+    }
+
+    @Emit("open")
+    emitOpen() {
+        return true;
+    }
+
+    @Emit("close")
+    emitClose() {
+        return true;
+    }
+
+    mounted() {
+        if (this.visible) this.emitOpen();
+        window.addEventListener("keydown", this.onKeydown);
+    }
+
+    beforeUnmount() {
+        window.removeEventListener("keydown", this.onKeydown);
+    }
+
+    onKeydown = (e: KeyboardEvent) => {
+        if (e.key === "Escape" && this.visible) {
+            this.onHide();
+        }
+    };
+
+    onHide() {
+        this.visible = false;
+        this.emitClose();
+    }
+}
+</script>
+<template>
+    <div v-show="visible" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
+        <div class="relative w-full h-screen bg-white shadow-lg overflow-hidden overflow-y-scroll">
+            <div class="flex items-center justify-between p-4 border-b border-gray-200">
+                <h3 class="text-xl font-semibold text-gray-900">{{ title }}</h3>
+                <button @click="onHide" class="text-gray-400 hover:text-gray-900 hover:bg-gray-200 rounded-lg text-sm w-8 h-8 flex items-center justify-center">
+                    <svg class="w-3 h-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
+                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
+                    </svg>
+                </button>
+            </div>
+            <div class="h-full">
+                <EntityList v-bind="entityProps" />
+            </div>
+        </div>
+    </div>
+</template>
\ No newline at end of file
diff --git a/structures-frontend-next/src/pages/ApplicationList.vue b/structures-frontend-next/src/pages/ApplicationList.vue
index 46a565bb..aaa331c7 100644
--- a/structures-frontend-next/src/pages/ApplicationList.vue
+++ b/structures-frontend-next/src/pages/ApplicationList.vue
@@ -1,209 +1,221 @@
 <script lang="ts">
-import { Component, Vue, Ref, Watch } from 'vue-facing-decorator'
-import CrudTable from '@/components/CrudTable.vue'
-import ContainerMedium from '@/components/ContainerMedium.vue'
-import ApplicationSidebar from '@/components/ApplicationSidebar.vue'
-import GraphQLModal from '@/components/modals/GraphQLModal.vue'
-import { Structures, type IApplicationService } from '@kinotic/structures-api'
-import { APPLICATION_STATE } from '@/states/IApplicationState'
-import { mdiGraphql, mdiApi } from '@mdi/js'
-import { onClickOutside } from '@vueuse/core'
-import type { CrudHeader } from '@/types/CrudHeader'
-import type { Identifiable } from '@kinotic/continuum-client'
-import { shallowRef } from 'vue'
-import DatetimeUtil from "@/util/DatetimeUtil"
+import { Component, Vue, Ref, Watch } from "vue-facing-decorator";
+import CrudTable from "@/components/CrudTable.vue";
+import ContainerMedium from "@/components/ContainerMedium.vue";
+import ApplicationSidebar from "@/components/ApplicationSidebar.vue";
+import GraphQLModal from "@/components/modals/GraphQLModal.vue";
+import {
+  Structures,
+  type IApplicationService,
+  type Application,
+} from "@kinotic/structures-api";
+import { APPLICATION_STATE } from "@/states/IApplicationState";
+import { mdiGraphql, mdiApi } from "@mdi/js";
+import { onClickOutside } from "@vueuse/core";
+import type { CrudHeader } from "@/types/CrudHeader";
+import type { Identifiable } from "@kinotic/continuum-client";
+import { shallowRef } from "vue";
+import DatetimeUtil from "@/util/DatetimeUtil";
 
 @Component({
-    components: {
-        CrudTable,
-        ContainerMedium,
-        ApplicationSidebar,
-        GraphQLModal
-    }
+  components: {
+    CrudTable,
+    ContainerMedium,
+    ApplicationSidebar,
+    GraphQLModal,
+  },
 })
 export default class NamespaceList extends Vue {
-    headers: CrudHeader[] = [
-        { field: 'id', header: 'Name', sortable: false },
-        { field: 'description', header: 'Description', sortable: false },
-        { field: 'created', header: 'Created', sortable: false },
-        { field: 'updated', header: 'Updated', sortable: false }
-    ]
-
-    dataSource: IApplicationService = Structures.getApplicationService()
-    icons = { graph: mdiGraphql, api: mdiApi }
-    showGraphQLModal = false
-    showSidebar = false
-    searchText: string = this?.$route?.query.search as string || ''
-    itemCount: number = 0
-    @Ref('sidebarWrapper') sidebarWrapper!: HTMLElement
-    @Ref('crudTable') crudTable!: InstanceType<typeof CrudTable>
-  public DatetimeUtil = DatetimeUtil
-
-    async mounted(): Promise<void> {
-        try {
-            this.refreshTable()
-            const el = shallowRef<HTMLElement | null>(this.sidebarWrapper)
-
-            onClickOutside(el, () => {
-                if (this.showSidebar) {
-                    this.onSidebarClose()
-                }
-            })
-
-            if (this?.$route?.query.created === 'true') {
-                this.$router.replace({ query: {} })
-            }
-        } catch (error) {
-            const message = error instanceof Error ? error.message : 'Unknown error'
-            console.error('[NamespaceList] Initialization error:', message)
+  headers: CrudHeader[] = [
+    { field: "id", header: "Name", sortable: false },
+    { field: "description", header: "Description", sortable: false },
+    { field: "created", header: "Created", sortable: false },
+    { field: "updated", header: "Updated", sortable: false },
+  ];
+
+  dataSource: IApplicationService = Structures.getApplicationService();
+  icons = { graph: mdiGraphql, api: mdiApi };
+  showGraphQLModal = false;
+  showSidebar = false;
+  searchText: string = (this?.$route?.query.search as string) || "";
+  itemCount: number = 0;
+  @Ref("sidebarWrapper") sidebarWrapper!: HTMLElement;
+  @Ref("crudTable") crudTable!: InstanceType<typeof CrudTable>;
+  public DatetimeUtil = DatetimeUtil;
+
+  async mounted(): Promise<void> {
+    try {
+      this.refreshTable();
+      const el = shallowRef<HTMLElement | null>(this.sidebarWrapper);
+
+      onClickOutside(el, () => {
+        if (this.showSidebar) {
+          this.onSidebarClose();
         }
+      });
+
+      if (this?.$route?.query.created === "true") {
+        this.$router.replace({ query: {} });
+      }
+    } catch (error) {
+      const message = error instanceof Error ? error.message : "Unknown error";
+      console.error("[NamespaceList] Initialization error:", message);
     }
-
-    @Watch('$route.query.search')
-    onRouteSearchQueryChanged(newVal: string) {
-        this.searchText = newVal || ''
-    }
-
-    private refreshTable(): void {
-        this.crudTable?.find()
+  }
+
+  @Watch("$route.query.search")
+  onRouteSearchQueryChanged(newVal: string) {
+    this.searchText = newVal || "";
+  }
+
+  private refreshTable(): void {
+    this.crudTable?.find();
+  }
+  onItemsCount(count: number): void {
+    this.itemCount = count;
+    console.log("ITEM COUNT =", count);
+  }
+
+  updateRouteQuery(search: string) {
+    const query = { ...this?.$route?.query };
+
+    if (search) {
+      query.search = search;
+    } else {
+      delete query.search;
     }
-onItemsCount(count: number): void {
-  this.itemCount = count
-  console.log('ITEM COUNT =', count)
-}
-
-
-    updateRouteQuery(search: string) {
-        const query = { ...this?.$route?.query }
-
-        if (search) {
-            query.search = search
-        } else {
-            delete query.search
-        }
 
-        this.$router.replace({ query })
+    this.$router.replace({ query });
+  }
+  get shouldShowPagination(): boolean {
+    return this.itemCount > 3;
+  }
+
+  onAddItem(): void {
+    this.showSidebar = true;
+  }
+
+  async toApplicationPage(item: Identifiable<string>): Promise<void> {
+    try {
+      const appId = item.id ?? "";
+      const app = await this.dataSource.findById(appId);
+      APPLICATION_STATE.currentApplication = app;
+      this.$router.push(`/application/${encodeURIComponent(appId)}`);
+    } catch (e) {
+      console.error("[NamespaceList] Failed to navigate to application:", e);
     }
-get shouldShowPagination(): boolean {
-  return this.itemCount > 3  // 👈 change 10 → 3 here
-}
-
-
-    onAddItem(): void {
-        this.showSidebar = true
+  }
+
+  onSidebarClose(): void {
+    this.showSidebar = false;
+  }
+
+  onApplicationSubmit(created: Application): void {
+    if (created && created.id) {
+      const exists = APPLICATION_STATE.allApplications.some(
+        (a) => a.id === created.id
+      );
+      if (!exists) {
+        APPLICATION_STATE.allApplications = [
+          created,
+          ...APPLICATION_STATE.allApplications,
+        ];
+      }
     }
+    this.refreshTable();
+    this.showSidebar = false;
+  }
 
-    async toApplicationPage(item: Identifiable<string>): Promise<void> {
-        try {
-            const appId = item.id ?? ''
-            const app = await this.dataSource.findById(appId)
-            APPLICATION_STATE.currentApplication = app
-            this.$router.push(`/application/${encodeURIComponent(appId)}`)
-        } catch (e) {
-            console.error('[NamespaceList] Failed to navigate to application:', e)
-        }
-    }
+  onEditItem(item: Identifiable<string>): void {
+    this.$router.push(`${this.$route.path}/edit/${item.id}`);
+  }
 
-    onSidebarClose(): void {
-        this.showSidebar = false
-    }
+  openGraphQL(): void {
+    this.showGraphQLModal = true;
+  }
 
-    onApplicationSubmit(): void {
-        this.refreshTable()
-        this.showSidebar = false
-    }
-
-    onEditItem(item: Identifiable<string>): void {
-        this.$router.push(`${this.$route.path}/edit/${item.id}`)
-    }
-
-    openGraphQL(): void {
-        this.showGraphQLModal = true
-    }
-
-    closeGraphQL(): void {
-        this.showGraphQLModal = false
-    }
-    
+  closeGraphQL(): void {
+    this.showGraphQLModal = false;
+  }
 }
 </script>
 
 <template>
-    <ContainerMedium>
-        <h1 class="text-2xl font-semibold mb-5 text-surface-950">Applications</h1>
-        <CrudTable
-            ref="crudTable"
-            createNewButtonText="New application"
-            rowHoverColor=""
-            :data-source="dataSource"
-            :headers="headers"
-            :singleExpand="false"
-            :enableViewSwitcher="true"
-            emptyStateText="No applications yet"
-            :search="searchText"
-            @update:search="updateRouteQuery"
-            @add-item="onAddItem"
-            @edit-item="onEditItem"
-            @onRowClick="toApplicationPage"
-            class="!text-sm"
-            :show-pagination="false"
-        >
-            <template #item.id="{ item }">
-                <span>{{ item.id }}</span>
-            </template>
+  <ContainerMedium>
+    <h1 class="text-2xl font-semibold mb-5 text-surface-950">Applications</h1>
+    <CrudTable
+      ref="crudTable"
+      createNewButtonText="New application"
+      rowHoverColor=""
+      :data-source="dataSource"
+      :headers="headers"
+      :singleExpand="false"
+      :enableViewSwitcher="true"
+      emptyStateText="No applications yet"
+      :search="searchText"
+      @update:search="updateRouteQuery"
+      @add-item="onAddItem"
+      @edit-item="onEditItem"
+      @onRowClick="toApplicationPage"
+      class="!text-sm"
+      :show-pagination="false"
+    >
+      <template #item.id="{ item }">
+        <span>{{ item.id }}</span>
+      </template>
       <template #item.description="{ item }">
-        <!-- Truncate description text with dynamic width and ellipsis -->
-        <span class="block max-w-[300px] sm:max-w-[500px] md:max-w-[190px] lg:max-w-[390px] xl:max-w-[590px] truncate">
+        <span
+          class="block max-w-[300px] sm:max-w-[500px] md:max-w-[190px] lg:max-w-[390px] xl:max-w-[590px] truncate"
+        >
           {{ item.description }}
         </span>
       </template>
-                    <template #item.created="{ item }">
-                <span>
-                {{ DatetimeUtil.formatMonthDayYear(item.created) }}
-                </span>
-            </template>
-            <template #item.updated="{ item }">
-                <span>
-                {{ DatetimeUtil.formatRelativeDate(item.updated) }}
-                </span>
-            </template>
-            <template #additional-actions="{ item }">
-                <Button
-                    v-if="item.enableGraphQL"
-                    text
-                    title="GraphQL"
-                    @click="openGraphQL"
-                >
-                    <img class="!w-[24px] !h-[24px]" src="@/assets/graphql.svg" />
-                </Button>
-
-                <Button
-                    v-if="item.enableOpenAPI"
-                    text
-                    title="OpenAPI"
-                >
-                    <RouterLink target="_blank" :to="'/scalar-ui.html?namespace=' + item.id">
-                        <img class="!w-[24px] !h-[24px]" src="@/assets/scalar.svg" />
-                    </RouterLink>
-                </Button>
-            </template>
-        </CrudTable>
-
-        <GraphQLModal :visible="showGraphQLModal" @close="closeGraphQL" />
-
-        <div v-show="showSidebar" ref="sidebarWrapper">
-            <ApplicationSidebar
-                :visible="showSidebar"
-                @close="onSidebarClose"
-                @submit="onApplicationSubmit"
-            />
-        </div>
-    </ContainerMedium>
+      <template #item.created="{ item }">
+        <span>
+          {{ DatetimeUtil.formatMonthDayYear(item.created) }}
+        </span>
+      </template>
+      <template #item.updated="{ item }">
+        <span>
+          {{ DatetimeUtil.formatRelativeDate(item.updated) }}
+        </span>
+      </template>
+      <template #additional-actions="{ item }">
+        <Button
+          v-if="item.enableGraphQL"
+          text
+          title="GraphQL"
+          @click="openGraphQL"
+        >
+          <img class="!w-[24px] !h-[24px]" src="@/assets/graphql.svg" />
+        </Button>
+
+        <Button v-if="item.enableOpenAPI" text title="OpenAPI">
+          <RouterLink
+            target="_blank"
+            :to="'/scalar-ui.html?namespace=' + item.id"
+          >
+            <img class="!w-[24px] !h-[24px]" src="@/assets/scalar.svg" />
+          </RouterLink>
+        </Button>
+      </template>
+    </CrudTable>
+
+    <GraphQLModal :visible="showGraphQLModal" @close="closeGraphQL" />
+
+    <div v-show="showSidebar" ref="sidebarWrapper">
+      <ApplicationSidebar
+        :visible="showSidebar"
+        @close="onSidebarClose"
+        @submit="onApplicationSubmit"
+      />
+    </div>
+  </ContainerMedium>
 </template>
 
 <style scoped>
 .p-row-even,
 .p-row-odd {
-    cursor: pointer;
+  cursor: pointer;
 }
 </style>
diff --git a/structures-frontend-next/src/pages/ApplicationSettings.vue b/structures-frontend-next/src/pages/ApplicationSettings.vue
index 749926d8..8570de4f 100644
--- a/structures-frontend-next/src/pages/ApplicationSettings.vue
+++ b/structures-frontend-next/src/pages/ApplicationSettings.vue
@@ -5,11 +5,11 @@
 
     <form @submit.prevent="saveSettings" class="space-y-4">
       <div class="field">
-        <label for="appName" class="block text-sm font-medium text-gray-700">Application Name</label>
+        <label for="appDescription" class="block text-sm font-medium text-gray-700">Application Description</label>
         <InputText 
           v-model="appName" 
-          id="appName" 
-          placeholder="Enter name" 
+          id="appDescription" 
+          placeholder="Enter Description" 
           required
           class="p-inputtext w-full" 
         />
diff --git a/structures-frontend-next/src/pages/EntityList.vue b/structures-frontend-next/src/pages/EntityList.vue
index 43305702..ab2ba1f8 100644
--- a/structures-frontend-next/src/pages/EntityList.vue
+++ b/structures-frontend-next/src/pages/EntityList.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="overflow-y-auto">
     <Toolbar>
       <template #start>
         <InputText v-model="searchText" placeholder="Search" @keyup.enter="search" @focus="($event.target as HTMLInputElement)?.select()" />
@@ -17,7 +17,7 @@
           <template #body="slotProps">
             <div :class="[
               header.isCollapsable
-                ? 'whitespace-normal break-words w-[400px] max-w-[400px] text-sm'
+                ? 'whitespace-normal break-words w-[240px] max-w-[240px] text-sm'
                 : 'truncate'
             ]">
               <span v-if="typeof slotProps.data[header.field] === 'object'">
@@ -114,12 +114,13 @@ const id = this.structureId || (Array.isArray(paramId) ? paramId[0] : paramId)
             ) {
               sortable = false
             }
+            const isComplex = ['ref', 'array', 'object'].includes(property.type.type)
             const headerDef: any = {
               header: fieldName,
               field: property.name,
               sortable: sortable,
-              width: property.name === 'id' ? 300 : (sortable ? 150 : 200),
-              isCollapsable: property?.name === 'addresses' || property?.name === 'pet'
+              width: property.name === 'id' ? 220 : (isComplex ? 240 : (sortable ? 120 : 160)),
+              isCollapsable: isComplex || property?.name === 'addresses' || property?.name === 'pet'
             }
             this.headers.push(headerDef)
             this.keys.push(property.name)
diff --git a/structures-frontend-next/src/pages/routes.ts b/structures-frontend-next/src/pages/routes.ts
index 90908ae6..79b68700 100644
--- a/structures-frontend-next/src/pages/routes.ts
+++ b/structures-frontend-next/src/pages/routes.ts
@@ -91,7 +91,7 @@ const pageRoutes: RouteRecordRaw[] = [
         {
           label: 'Structures',
           icon: 'pi pi-table',
-          path: `/application/${route.params.applicationId}/project/${route.params.projectId}/structures/overview`
+          path: `/application/${route.params.applicationId}/project/${route.params.projectId}/structures`
         },
         {
           label: 'Lambdas',