diff --git a/aas-web-ui/src/components/AppNavigation/AppNavigation.vue b/aas-web-ui/src/components/AppNavigation/AppNavigation.vue
index 653cab51..8d4fcfe7 100644
--- a/aas-web-ui/src/components/AppNavigation/AppNavigation.vue
+++ b/aas-web-ui/src/components/AppNavigation/AppNavigation.vue
@@ -311,7 +311,7 @@
         );
         return filteredAndOrderedModuleRoutes;
     });
-    const showAASList = computed(() => ['AASViewer', 'AASEditor', 'SubmodelViewer'].includes(route.name as string));
+    const showAASList = computed(() => ['AASViewer', 'AASEditor', 'AASSubmodelViewer'].includes(route.name as string));
     const drawerState = computed(() => navigationStore.getDrawerState);
     const LogoPath = computed(() => {
         if (isDark.value && envStore.getEnvLogoDarkPath.trim().length > 0) {
@@ -329,7 +329,7 @@
             'ComponentVisualization',
             'Visualization',
             'AASEditor',
-            'SubmodelViewer',
+            'AASSubmodelViewer',
         ].includes(route.name as string);
     });
 
diff --git a/aas-web-ui/src/components/AppNavigation/MainMenu.vue b/aas-web-ui/src/components/AppNavigation/MainMenu.vue
index d8521561..1789abec 100644
--- a/aas-web-ui/src/components/AppNavigation/MainMenu.vue
+++ b/aas-web-ui/src/components/AppNavigation/MainMenu.vue
@@ -40,10 +40,10 @@
                             class="mt-3 py-2"
                             nav
                             :active="false"
-                            :border="isActiveRoutePath('/submodelviewer')"
-                            subtitle="View Submodels"
-                            title="Submodel Viewer"
-                            :to="isActiveRoutePath('/submodelviewer') ? '' : '/submodelviewer'"
+                            :border="isActiveRoutePath('/aassmviewer')"
+                            subtitle="View Submodel Visualizations of Asset Administration Shells"
+                            title="AAS SM Visualizations"
+                            :to="isActiveRoutePath('/aassmviewer') ? '' : '/aassmviewer'"
                             @click="closeMenu">
                             <template #prepend>
                                 <v-avatar color="surface-light" icon="mdi-group" rounded>
@@ -51,6 +51,37 @@
                                 </v-avatar>
                             </template>
                         </v-list-item>
+                        <v-list-item
+                            class="mt-3 py-2"
+                            nav
+                            :active="false"
+                            :border="isActiveRoutePath('/smviewer')"
+                            subtitle="View Submodels"
+                            title="SM Viewer"
+                            :to="isActiveRoutePath('/smviewer') ? '' : '/smviewer'"
+                            @click="closeMenu">
+                            <template #prepend>
+                                <v-avatar color="surface-light" icon="mdi-ungroup" rounded>
+                                    <v-icon color="medium-emphasis" />
+                                </v-avatar>
+                            </template>
+                        </v-list-item>
+                        <v-list-item
+                            v-if="allowEditing"
+                            class="mt-3 py-2"
+                            :active="false"
+                            nav
+                            :border="isActiveRoutePath('/smeditor')"
+                            subtitle="Edit Submodels"
+                            title="SM Editor"
+                            :to="isActiveRoutePath('/smeditor') ? '' : '/smeditor'"
+                            @click="closeMenu">
+                            <template #prepend>
+                                <v-avatar color="surface-light" icon="mdi-pencil" rounded>
+                                    <v-icon color="medium-emphasis" />
+                                </v-avatar>
+                            </template>
+                        </v-list-item>
                         <v-list-item
                             v-if="selectedNode && Object.keys(selectedNode).length > 0"
                             class="mt-3 py-2"
diff --git a/aas-web-ui/src/components/ComponentVisualization.vue b/aas-web-ui/src/components/ComponentVisualization.vue
index b90c9f77..98874b28 100644
--- a/aas-web-ui/src/components/ComponentVisualization.vue
+++ b/aas-web-ui/src/components/ComponentVisualization.vue
@@ -33,7 +33,7 @@
                 :style="
                     isMobile
                         ? 'height: calc(100svh - 154px)'
-                        : submodelViewerMode || visualizationMode
+                        : aasSubmodelViewerMode || visualizationMode
                           ? 'height: calc(100svh - 105px)'
                           : 'height: calc(100svh - 170px)'
                 ">
@@ -76,7 +76,7 @@
     const isMobile = computed(() => navigationStore.getIsMobile);
     const singleAas = computed(() => envStore.getSingleAas);
     const visualizationMode = computed(() => routesToVisualization.includes(route.name));
-    const submodelViewerMode = computed(() => route.name === 'SubmodelViewer');
+    const aasSubmodelViewerMode = computed(() => route.name === 'AASSubmodelViewer');
 
     // Watchers
     watch(
diff --git a/aas-web-ui/src/components/SubmodelElementView.vue b/aas-web-ui/src/components/SubmodelElementView.vue
index a120ee30..3ea18200 100644
--- a/aas-web-ui/src/components/SubmodelElementView.vue
+++ b/aas-web-ui/src/components/SubmodelElementView.vue
@@ -3,8 +3,8 @@
         <!-- Detailed View of the selected Submodel/SubmodelElement (e.g. Property, Operation, etc.) -->
         <template
             v-if="
-                selectedAAS &&
-                Object.keys(selectedAAS).length > 0 &&
+                ((selectedAAS && Object.keys(selectedAAS).length > 0) ||
+                    ['SMViewer', 'SMEditor'].includes(route.name as string)) &&
                 selectedNode &&
                 Object.keys(selectedNode).length > 0 &&
                 submodelElementData &&
@@ -101,27 +101,27 @@
                     <Property
                         v-else-if="submodelElementData.modelType === 'Property'"
                         :property-object="submodelElementData"
-                        :is-editable="aasEditorMode"></Property>
+                        :is-editable="editorMode"></Property>
                     <MultiLanguageProperty
                         v-else-if="submodelElementData.modelType === 'MultiLanguageProperty'"
                         :multi-language-property-object="submodelElementData"
-                        :is-editable="aasEditorMode"></MultiLanguageProperty>
+                        :is-editable="editorMode"></MultiLanguageProperty>
                     <Operation
                         v-else-if="submodelElementData.modelType === 'Operation'"
                         :operation-object="submodelElementData"
-                        :is-editable="aasEditorMode"></Operation>
+                        :is-editable="editorMode"></Operation>
                     <File
                         v-else-if="submodelElementData.modelType === 'File'"
                         :file-object="submodelElementData"
-                        :is-editable="aasEditorMode"></File>
+                        :is-editable="editorMode"></File>
                     <Blob
                         v-else-if="submodelElementData.modelType === 'Blob'"
                         :blob-object="submodelElementData"
-                        :is-editable="aasEditorMode"></Blob>
+                        :is-editable="editorMode"></Blob>
                     <ReferenceElement
                         v-else-if="submodelElementData.modelType === 'ReferenceElement'"
                         :reference-element-object="submodelElementData"
-                        :is-editable="aasEditorMode"></ReferenceElement>
+                        :is-editable="editorMode"></ReferenceElement>
                     <Range
                         v-else-if="submodelElementData.modelType === 'Range'"
                         :range-object="submodelElementData"></Range>
@@ -134,7 +134,7 @@
                     <AnnotatedRelationshipElement
                         v-else-if="submodelElementData.modelType === 'AnnotatedRelationshipElement'"
                         :annotated-relationship-element-object="submodelElementData"
-                        :is-editable="aasEditorMode"></AnnotatedRelationshipElement>
+                        :is-editable="editorMode"></AnnotatedRelationshipElement>
                     <InvalidElement v-else :invalid-element-object="submodelElementData"></InvalidElement>
                 </v-list>
                 <!-- Last Sync -->
@@ -180,6 +180,7 @@
     import { useSMEHandling } from '@/composables/AAS/SMEHandling';
     import { useAASStore } from '@/store/AASDataStore';
     import { useNavigationStore } from '@/store/NavigationStore';
+
     // Vue Router
     const route = useRoute();
 
@@ -204,7 +205,7 @@
     const selectedAAS = computed(() => aasStore.getSelectedAAS);
     const selectedNode = computed(() => aasStore.getSelectedNode);
     const autoSync = computed(() => navigationStore.getAutoSync);
-    const aasEditorMode = computed(() => route.name === 'AASEditor');
+    const editorMode = computed(() => ['AASEditor', 'SMEditor'].includes(route.name as string));
 
     // Watchers
     watch(
diff --git a/aas-web-ui/src/components/SubmodelElementViewAndVisualization.vue b/aas-web-ui/src/components/SubmodelElementViewAndVisualization.vue
index 7952655c..5930a58e 100644
--- a/aas-web-ui/src/components/SubmodelElementViewAndVisualization.vue
+++ b/aas-web-ui/src/components/SubmodelElementViewAndVisualization.vue
@@ -31,8 +31,8 @@
             <v-card-text style="overflow-y: auto; height: calc(100svh - 170px)">
                 <template
                     v-if="
-                        selectedAAS &&
-                        Object.keys(selectedAAS).length > 0 &&
+                        ((selectedAAS && Object.keys(selectedAAS).length > 0) ||
+                            ['SMViewer', 'SMEditor'].includes(route.name as string)) &&
                         selectedNode &&
                         Object.keys(selectedNode).length > 0
                     ">
@@ -41,7 +41,10 @@
                     <SubmodelElementJSONView v-if="componentToShow === 'JSONView'" />
                 </template>
                 <v-empty-state
-                    v-else-if="!selectedAAS || Object.keys(selectedAAS).length === 0"
+                    v-else-if="
+                        !['SMViewer', 'SMEditor'].includes(route.name as string) &&
+                        (!selectedAAS || Object.keys(selectedAAS).length === 0)
+                    "
                     title="No selected AAS"
                     class="text-divider"></v-empty-state>
                 <v-empty-state
@@ -56,8 +59,12 @@
 
 <script lang="ts" setup>
     import { computed, ref } from 'vue';
+    import { useRoute } from 'vue-router';
     import { useAASStore } from '@/store/AASDataStore';
 
+    // Vue Router
+    const route = useRoute();
+
     //Stores
     const aasStore = useAASStore();
 
diff --git a/aas-web-ui/src/components/SubmodelElementVisualization.vue b/aas-web-ui/src/components/SubmodelElementVisualization.vue
index 4eba96aa..a2239b5b 100644
--- a/aas-web-ui/src/components/SubmodelElementVisualization.vue
+++ b/aas-web-ui/src/components/SubmodelElementVisualization.vue
@@ -2,8 +2,8 @@
     <v-container fluid class="pa-0">
         <template
             v-if="
-                selectedAAS &&
-                Object.keys(selectedAAS).length > 0 &&
+                ((selectedAAS && Object.keys(selectedAAS).length > 0) ||
+                    ['SMViewer', 'SMEditor'].includes(route.name as string)) &&
                 selectedNode &&
                 Object.keys(selectedNode).length > 0 &&
                 submodelElementData &&
@@ -62,7 +62,9 @@
                         v-else
                         fluid
                         class="pa-0 ma-0 d-flex justify-center align-center"
-                        :style="submodelViewerMode ? 'height: calc(100svh - 137px)' : 'height: calc(100svh - 202px)'">
+                        :style="
+                            aasSubmodelViewerMode ? 'height: calc(100svh - 137px)' : 'height: calc(100svh - 202px)'
+                        ">
                         <v-empty-state title="No available visualization" class="text-divider"></v-empty-state>
                     </v-container>
                 </template>
@@ -152,7 +154,7 @@
         return plugins;
     });
     const visualizationMode = computed(() => routesToVisualization.includes(route.name));
-    const submodelViewerMode = computed(() => route.name === 'SubmodelViewer');
+    const aasSubmodelViewerMode = computed(() => route.name === 'AASSubmodelViewer');
 
     // Watchers
     watch(
diff --git a/aas-web-ui/src/components/SubmodelTree.vue b/aas-web-ui/src/components/SubmodelTree.vue
index e5d82f1b..f93516e5 100644
--- a/aas-web-ui/src/components/SubmodelTree.vue
+++ b/aas-web-ui/src/components/SubmodelTree.vue
@@ -70,13 +70,13 @@
                                     variant="plain"
                                     v-bind="props"
                                     class="ml-n3"
-                                    :class="editMode ? 'mr-n3' : ''"
+                                    :class="editorMode ? 'mr-n3' : ''"
                                     @click="collapseTree()">
                                 </v-btn>
                             </template>
                             <span>Collapse Submodel trees</span>
                         </v-tooltip>
-                        <v-menu v-if="editMode">
+                        <v-menu v-if="editorMode">
                             <template #activator="{ props }">
                                 <v-btn icon="mdi-dots-vertical" variant="plain" v-bind="props" class="mr-2"></v-btn>
                             </template>
@@ -118,7 +118,11 @@
                 </template>
                 <!-- Show the Submodel Tree -->
                 <template v-else>
-                    <template v-if="selectedAAS && Object.keys(selectedAAS).length > 0">
+                    <template
+                        v-if="
+                            (selectedAAS && Object.keys(selectedAAS).length > 0) ||
+                            ['SMViewer', 'SMEditor'].includes(route.name as string)
+                        ">
                         <template
                             v-if="
                                 submodelTreeUnfiltered &&
@@ -137,20 +141,24 @@
                                 @open-edit-dialog="openEditDialog(false, $event)"
                                 @show-delete-dialog="openDeleteDialog"></Treeview>
                         </template>
+                        <v-empty-state
+                            v-else-if="['SMViewer', 'SMEditor'].includes(route.name as string)"
+                            title="No existing Submodels"
+                            text="The specified Submodel Repository does not contain any Submodels"
+                            class="text-divider"></v-empty-state>
                         <v-empty-state
                             v-else
                             title="No existing Submodels"
                             text="The selected AAS does not contain any Submodels"
-                            :action-text="editMode ? 'Create Submodel' : undefined"
+                            :action-text="editorMode ? 'Create Submodel' : undefined"
                             class="text-divider"
                             @click:action="openEditDialog(true)"></v-empty-state>
                     </template>
-                    <template v-else>
-                        <v-empty-state
-                            title="No selected AAS"
-                            text="Select an AAS to view its Submodels and Submodel Elements"
-                            class="text-divider"></v-empty-state>
-                    </template>
+                    <v-empty-state
+                        v-else
+                        title="No selected AAS"
+                        text="Select an AAS to view its Submodels and Submodel Elements"
+                        class="text-divider"></v-empty-state>
                 </template>
             </v-card-text>
         </v-card>
@@ -219,6 +227,7 @@
     import { useRoute } from 'vue-router';
     import { useAASHandling } from '@/composables/AAS/AASHandling';
     import { useReferableUtils } from '@/composables/AAS/ReferableUtils';
+    import { useSMHandling } from '@/composables/AAS/SMHandling';
     import { useAASStore } from '@/store/AASDataStore';
     import { useEnvStore } from '@/store/EnvironmentStore';
     import { useNavigationStore } from '@/store/NavigationStore';
@@ -229,6 +238,7 @@
 
     // Composables
     const { fetchAasSmListById } = useAASHandling();
+    const { fetchSmList } = useSMHandling();
     const { nameToDisplay, descriptionToDisplay } = useReferableUtils();
 
     // Stores
@@ -272,14 +282,16 @@
     const submodelRegistryURL = computed(() => navigationStore.getSubmodelRegistryURL); // get Submodel Registry URL from Store
     const selectedNode = computed(() => aasStore.getSelectedNode); // get the updated Treeview Node from Store
     const singleAas = computed(() => envStore.getSingleAas); // Get the single AAS state from the Store
-    const editMode = computed(() => route.name === 'AASEditor'); // Check if the current Route is the AAS Editor
+    const editorMode = computed(() => ['AASEditor', 'SMEditor'].includes(route.name as string));
     const triggerTreeviewReload = computed(() => navigationStore.getTriggerTreeviewReload); // Reload the Treeview
 
     // Watchers
     watch(
         () => aasRegistryURL.value,
         () => {
-            submodelTree.value = [];
+            if (!['SMViewer', 'SMEditor'].includes(route.name as string)) {
+                submodelTree.value = [];
+            }
         }
     );
 
@@ -293,8 +305,10 @@
     watch(
         () => selectedAAS.value,
         () => {
-            submodelTree.value = [];
-            initialize();
+            if (!['SMViewer', 'SMEditor'].includes(route.name as string)) {
+                submodelTree.value = [];
+                initialize();
+            }
         }
     );
 
@@ -312,7 +326,11 @@
     });
 
     async function initialize(): Promise<void> {
-        if (!selectedAAS.value || Object.keys(selectedAAS.value).length === 0) {
+        // console.log(selectedNode.value);
+        if (
+            !['SMEditor', 'SMViewer'].includes(route.name as string) &&
+            (!selectedAAS.value || Object.keys(selectedAAS.value).length === 0)
+        ) {
             submodelTree.value = [];
             return;
         }
@@ -320,14 +338,24 @@
         treeLoading.value = true;
 
         try {
-            const submodels: Array<any> = await fetchAasSmListById(selectedAAS.value.id);
+            let submodels: Array<any> = [];
+
+            if (['SMEditor', 'SMViewer'].includes(route.name as string)) {
+                submodels = await fetchSmList();
+            } else {
+                submodels = await fetchAasSmListById(selectedAAS.value.id);
+            }
             const sortedSubmodels = submodels.sort((a, b) => a.id.localeCompare(b.id));
 
             let processedList = [] as Array<any>;
 
             processedList = sortedSubmodels.map((submodel: any) => {
                 // Assumes submodel.path is already set for top-level nodes
-                if (Array.isArray(submodel.submodelElements) && submodel.submodelElements.length) {
+                if (
+                    submodel.submodelElements &&
+                    Array.isArray(submodel.submodelElements) &&
+                    submodel.submodelElements.length > 0
+                ) {
                     submodel.children = prepareForTree(submodel.submodelElements, submodel);
                     submodel.showChildren = shouldExpandNode(submodel.path);
                     return submodel;
diff --git a/aas-web-ui/src/components/UIComponents/Treeview.vue b/aas-web-ui/src/components/UIComponents/Treeview.vue
index e8e44d1e..8885d6bc 100644
--- a/aas-web-ui/src/components/UIComponents/Treeview.vue
+++ b/aas-web-ui/src/components/UIComponents/Treeview.vue
@@ -7,7 +7,7 @@
                         :style="{ 'padding-left': depth * 22 + 'px' }"
                         density="compact"
                         class="py-0"
-                        :class="editMode ? 'pr-0' : ''"
+                        :class="editorMode ? 'pr-0' : ''"
                         nav
                         slim
                         color="primary"
@@ -86,7 +86,7 @@
                                     size="x-small"
                                     :style="{
                                         marginRight:
-                                            isHovering && (!editMode || canElementAddSubmodelElement(item))
+                                            isHovering && (!editorMode || canElementAddSubmodelElement(item))
                                                 ? '8px'
                                                 : '-24px',
                                         transition: 'margin 0.3s ease',
@@ -98,7 +98,7 @@
                                 <div class="icon-placeholder">
                                     <!-- Button to add a submodel Element -->
                                     <v-tooltip
-                                        v-if="editMode && canElementAddSubmodelElement(item)"
+                                        v-if="editorMode && canElementAddSubmodelElement(item)"
                                         text="Add Submodel Element"
                                         :open-delay="600"
                                         location="bottom">
@@ -120,7 +120,7 @@
                                     </v-tooltip>
                                     <!-- Button to Copy the Path to the clipboard -->
                                     <v-tooltip
-                                        v-if="!editMode"
+                                        v-if="!editorMode"
                                         text="Copy Path to Clipboard"
                                         :open-delay="600"
                                         location="bottom">
@@ -143,7 +143,7 @@
                                 </div>
                             </div>
                             <!-- Context menu for Submodels -->
-                            <v-menu v-if="editMode && item.modelType === 'Submodel'">
+                            <v-menu v-if="editorMode && item.modelType === 'Submodel'">
                                 <template #activator="{ props }">
                                     <v-btn
                                         icon="mdi-dots-vertical"
@@ -189,7 +189,7 @@
                                 </v-sheet>
                             </v-menu>
                             <!-- Context menu for Submodel Elements -->
-                            <v-menu v-if="editMode && item.modelType !== 'Submodel'">
+                            <v-menu v-if="editorMode && item.modelType !== 'Submodel'">
                                 <template #activator="{ props }">
                                     <v-btn
                                         icon="mdi-dots-vertical"
@@ -246,7 +246,7 @@
                                     </v-list>
                                 </v-sheet>
                             </v-menu>
-                            <template v-else-if="editMode"></template>
+                            <template v-else-if="editorMode"></template>
                         </template>
                     </v-list-item>
                 </v-lazy>
@@ -311,7 +311,7 @@
 
     // Computed Properties
     const selectedNode = computed(() => aasStore.getSelectedNode);
-    const editMode = computed(() => route.name === 'AASEditor');
+    const editorMode = computed(() => ['AASEditor', 'SMEditor'].includes(route.name as string));
     const isMobile = computed(() => navigationStore.getIsMobile);
     const copyIconAsRef = computed(() => copyIcon);
 
diff --git a/aas-web-ui/src/composables/AAS/SMHandling.ts b/aas-web-ui/src/composables/AAS/SMHandling.ts
index 5008b4b4..92ec9e54 100644
--- a/aas-web-ui/src/composables/AAS/SMHandling.ts
+++ b/aas-web-ui/src/composables/AAS/SMHandling.ts
@@ -13,6 +13,7 @@ export function useSMHandling() {
         getSmEndpointById: getSmEndpointByIdFromRegistry,
     } = useSMRegistryClient();
     const {
+        fetchSmList: fetchSmListFromRepo,
         fetchSm: fetchSmFromRepo,
         getSmEndpointById: getSmEndpointByIdFromRepo,
         fetchSme: fetchSmeFromRepo,
@@ -44,6 +45,29 @@ export function useSMHandling() {
         return smDescriptors;
     }
 
+    /**
+     * Fetches a list of all available Submodels (SM).
+     *
+     * @async
+     * @returns {Promise<Array<any>>} A promise that resolves to an array of SM.
+     * An empty array is returned if the request fails or no AAS Descriptors are found.
+     */
+    async function fetchSmList(): Promise<Array<any>> {
+        const failResponse = [] as Array<any>;
+
+        let smList = await fetchSmListFromRepo();
+
+        if (!smList || !Array.isArray(smList) || smList.length === 0) return failResponse;
+
+        smList = smList.map((aas: any) => {
+            aas.timestamp = formatDate(new Date());
+            aas.path = getSmEndpointByIdFromRepo(aas.id);
+            return aas;
+        });
+
+        return smList;
+    }
+
     /**
      * Fetches an Submodel (SM) Descriptor by the provided SM ID.
      *
@@ -309,6 +333,7 @@ export function useSMHandling() {
         fetchSmById,
         fetchSmDescriptorList,
         fetchSmDescriptor,
+        fetchSmList,
         setData,
     };
 }
diff --git a/aas-web-ui/src/pages/SubmodelViewer.vue b/aas-web-ui/src/pages/AASSubmodelViewer.vue
similarity index 100%
rename from aas-web-ui/src/pages/SubmodelViewer.vue
rename to aas-web-ui/src/pages/AASSubmodelViewer.vue
diff --git a/aas-web-ui/src/pages/SMEditor.vue b/aas-web-ui/src/pages/SMEditor.vue
new file mode 100644
index 00000000..6436e3f4
--- /dev/null
+++ b/aas-web-ui/src/pages/SMEditor.vue
@@ -0,0 +1,124 @@
+<template>
+    <v-container fluid class="pa-0">
+        <!-- Horizontal Flexbox for the three main components (SubmodelTree, PropertyView, ComponentVisualization) -->
+        <div style="display: flex">
+            <!-- SubmodelTree Component -->
+            <div class="pa-0 window" style="width: 35%">
+                <SubmodelTree />
+            </div>
+            <!-- Divider -->
+            <div style="position: relative; height: calc(100vh - 106px); z-index: 1">
+                <v-icon style="position: absolute; top: -3px; left: -16.5px">mdi-pan-left</v-icon>
+                <v-divider vertical style="position: absolute; height: calc(100vh - 106px); z-index: 1"></v-divider>
+                <v-icon style="position: absolute; top: -3px; right: -16.5px">mdi-pan-right</v-icon>
+            </div>
+            <!-- SM/SME view and visualization Component -->
+            <div class="pa-0 window" style="width: 65%">
+                <SubmodelElementViewAndVisualization />
+            </div>
+        </div>
+    </v-container>
+</template>
+
+<script lang="ts" setup>
+    import { computed, onBeforeUnmount, onMounted } from 'vue';
+    import { useTheme } from 'vuetify';
+
+    const theme = useTheme();
+
+    // Computed Properties
+    const primaryColor = computed(() => theme.current.value.colors.primary);
+
+    onMounted(() => {
+        // get the HTML Elements of all Columns (Windows)
+        let windows = document.getElementsByClassName('window');
+        // Add Resize Bars to all Dividers between Windows
+        for (let i = 0; i < windows.length; i++) {
+            if (i != windows.length - 1) resizableWindow(windows[i]);
+        }
+    });
+
+    onBeforeUnmount(() => {
+        // remove all Event Listeners from the Resize Bars
+        let divs = document.getElementsByClassName('resizeBar');
+        for (let i = 0; i < divs.length; i++) {
+            divs[i].removeEventListener('mouseover', function () {});
+            divs[i].removeEventListener('mouseout', function () {});
+            divs[i].removeEventListener('mousedown', function () {});
+            document.removeEventListener('mousemove', function () {});
+            document.removeEventListener('mouseup', function () {});
+        }
+    });
+
+    // creates a div element (Resize Bar) on each Divider between Windows to allow the user to resize the windows
+    function resizableWindow(window: any): void {
+        window.style.position = 'relative';
+        let div = createDiv(); // create div element (Resize Bar) on each Divider between Windows
+        window.appendChild(div); // append the div to the Window
+        setListeners(div); // create event listeners for Resize Bars
+    }
+
+    // creates Event Listeners for the Resize Bars to allow the user to resize the windows
+    function setListeners(div: HTMLDivElement): void {
+        let pageX: number, curCol: any, nxtCol: any, curColWidth: number, nxtColWidth: number;
+
+        // highlight Resize Bar when mouse is over it
+        div.addEventListener('mouseover', (e: Event) => {
+            let target = e.target as HTMLElement;
+            if (target) target.style.borderRight = '2px solid ' + primaryColor.value;
+        });
+
+        // remove highlight from Resize Bar when mouse leaves it
+        div.addEventListener('mouseout', function (e: any) {
+            if (e.target) e.target.style.borderRight = '';
+        });
+
+        // Eventlistener to select the Resize Bar on Mouse down
+        div.addEventListener('mousedown', function (e: any) {
+            curCol = e.target.parentElement; // the current element that will be scaled
+            nxtCol = curCol.nextElementSibling; // selects the divider
+            if (nxtCol) nxtCol = nxtCol.nextElementSibling; // the next element that will be scaled too
+            pageX = parseInt(e.pageX); // the current x position of the mouse
+            curColWidth = parseInt(curCol.offsetWidth); // the current width of the current element
+            if (nxtCol) nxtColWidth = parseInt(nxtCol.offsetWidth); // the current width of the next element
+        });
+        // Eventlistener to scale the current and next Window when the mouse is moved
+        document.addEventListener('mousemove', function (e: any) {
+            if (!curCol) return; // if no element is selected return
+            let screenWidth = document.documentElement.clientWidth; // the width of the screen (Window) excluding the scrollbar
+            let navigationDrawer: any = document.getElementsByClassName('leftMenu')[0]; // the width of the navigation drawer
+            let isDrawerOpen: boolean = navigationDrawer.style.transform == 'translateX(0px)'; // checks if the navigation drawer is open
+            screenWidth = screenWidth - (isDrawerOpen ? navigationDrawer.clientWidth : 0); // if the navigation drawer is open subtract the width of the navigation drawer from the screen width
+            let diffX = parseInt(e.pageX) - pageX; // amount the header was dragged (minus - left, plus - right)
+            let minimalColWith = 200;
+            if (curColWidth + diffX >= minimalColWith && nxtColWidth - diffX >= minimalColWith) {
+                if (curCol)
+                    curCol.style.width = 100 - ((screenWidth - (curColWidth + diffX)) / screenWidth) * 100 + '%'; // scale the current Column (Window)
+                if (nxtCol)
+                    nxtCol.style.width = 100 - ((screenWidth - (nxtColWidth - diffX)) / screenWidth) * 100 + '%'; // scale the next Column (Window) if it exists
+            }
+        });
+        // Eventlistener to clear the local Variables mouse up
+        document.addEventListener('mouseup', function () {
+            curCol = null;
+            nxtCol = null;
+            pageX = 0;
+            nxtColWidth = 0;
+            curColWidth = 0;
+        });
+    }
+
+    // creates the div element (Resize Bar) on each Divider between Windows
+    function createDiv(): HTMLDivElement {
+        let div = document.createElement('div');
+        div.style.top = '0';
+        div.style.right = '-1px';
+        div.style.width = '6px';
+        div.style.position = 'absolute';
+        div.style.cursor = 'col-resize';
+        div.style.userSelect = 'none';
+        div.style.height = 'calc(100vh - 105px)';
+        div.style.zIndex = '3';
+        return div;
+    }
+</script>
diff --git a/aas-web-ui/src/pages/SMViewer.vue b/aas-web-ui/src/pages/SMViewer.vue
new file mode 100644
index 00000000..6436e3f4
--- /dev/null
+++ b/aas-web-ui/src/pages/SMViewer.vue
@@ -0,0 +1,124 @@
+<template>
+    <v-container fluid class="pa-0">
+        <!-- Horizontal Flexbox for the three main components (SubmodelTree, PropertyView, ComponentVisualization) -->
+        <div style="display: flex">
+            <!-- SubmodelTree Component -->
+            <div class="pa-0 window" style="width: 35%">
+                <SubmodelTree />
+            </div>
+            <!-- Divider -->
+            <div style="position: relative; height: calc(100vh - 106px); z-index: 1">
+                <v-icon style="position: absolute; top: -3px; left: -16.5px">mdi-pan-left</v-icon>
+                <v-divider vertical style="position: absolute; height: calc(100vh - 106px); z-index: 1"></v-divider>
+                <v-icon style="position: absolute; top: -3px; right: -16.5px">mdi-pan-right</v-icon>
+            </div>
+            <!-- SM/SME view and visualization Component -->
+            <div class="pa-0 window" style="width: 65%">
+                <SubmodelElementViewAndVisualization />
+            </div>
+        </div>
+    </v-container>
+</template>
+
+<script lang="ts" setup>
+    import { computed, onBeforeUnmount, onMounted } from 'vue';
+    import { useTheme } from 'vuetify';
+
+    const theme = useTheme();
+
+    // Computed Properties
+    const primaryColor = computed(() => theme.current.value.colors.primary);
+
+    onMounted(() => {
+        // get the HTML Elements of all Columns (Windows)
+        let windows = document.getElementsByClassName('window');
+        // Add Resize Bars to all Dividers between Windows
+        for (let i = 0; i < windows.length; i++) {
+            if (i != windows.length - 1) resizableWindow(windows[i]);
+        }
+    });
+
+    onBeforeUnmount(() => {
+        // remove all Event Listeners from the Resize Bars
+        let divs = document.getElementsByClassName('resizeBar');
+        for (let i = 0; i < divs.length; i++) {
+            divs[i].removeEventListener('mouseover', function () {});
+            divs[i].removeEventListener('mouseout', function () {});
+            divs[i].removeEventListener('mousedown', function () {});
+            document.removeEventListener('mousemove', function () {});
+            document.removeEventListener('mouseup', function () {});
+        }
+    });
+
+    // creates a div element (Resize Bar) on each Divider between Windows to allow the user to resize the windows
+    function resizableWindow(window: any): void {
+        window.style.position = 'relative';
+        let div = createDiv(); // create div element (Resize Bar) on each Divider between Windows
+        window.appendChild(div); // append the div to the Window
+        setListeners(div); // create event listeners for Resize Bars
+    }
+
+    // creates Event Listeners for the Resize Bars to allow the user to resize the windows
+    function setListeners(div: HTMLDivElement): void {
+        let pageX: number, curCol: any, nxtCol: any, curColWidth: number, nxtColWidth: number;
+
+        // highlight Resize Bar when mouse is over it
+        div.addEventListener('mouseover', (e: Event) => {
+            let target = e.target as HTMLElement;
+            if (target) target.style.borderRight = '2px solid ' + primaryColor.value;
+        });
+
+        // remove highlight from Resize Bar when mouse leaves it
+        div.addEventListener('mouseout', function (e: any) {
+            if (e.target) e.target.style.borderRight = '';
+        });
+
+        // Eventlistener to select the Resize Bar on Mouse down
+        div.addEventListener('mousedown', function (e: any) {
+            curCol = e.target.parentElement; // the current element that will be scaled
+            nxtCol = curCol.nextElementSibling; // selects the divider
+            if (nxtCol) nxtCol = nxtCol.nextElementSibling; // the next element that will be scaled too
+            pageX = parseInt(e.pageX); // the current x position of the mouse
+            curColWidth = parseInt(curCol.offsetWidth); // the current width of the current element
+            if (nxtCol) nxtColWidth = parseInt(nxtCol.offsetWidth); // the current width of the next element
+        });
+        // Eventlistener to scale the current and next Window when the mouse is moved
+        document.addEventListener('mousemove', function (e: any) {
+            if (!curCol) return; // if no element is selected return
+            let screenWidth = document.documentElement.clientWidth; // the width of the screen (Window) excluding the scrollbar
+            let navigationDrawer: any = document.getElementsByClassName('leftMenu')[0]; // the width of the navigation drawer
+            let isDrawerOpen: boolean = navigationDrawer.style.transform == 'translateX(0px)'; // checks if the navigation drawer is open
+            screenWidth = screenWidth - (isDrawerOpen ? navigationDrawer.clientWidth : 0); // if the navigation drawer is open subtract the width of the navigation drawer from the screen width
+            let diffX = parseInt(e.pageX) - pageX; // amount the header was dragged (minus - left, plus - right)
+            let minimalColWith = 200;
+            if (curColWidth + diffX >= minimalColWith && nxtColWidth - diffX >= minimalColWith) {
+                if (curCol)
+                    curCol.style.width = 100 - ((screenWidth - (curColWidth + diffX)) / screenWidth) * 100 + '%'; // scale the current Column (Window)
+                if (nxtCol)
+                    nxtCol.style.width = 100 - ((screenWidth - (nxtColWidth - diffX)) / screenWidth) * 100 + '%'; // scale the next Column (Window) if it exists
+            }
+        });
+        // Eventlistener to clear the local Variables mouse up
+        document.addEventListener('mouseup', function () {
+            curCol = null;
+            nxtCol = null;
+            pageX = 0;
+            nxtColWidth = 0;
+            curColWidth = 0;
+        });
+    }
+
+    // creates the div element (Resize Bar) on each Divider between Windows
+    function createDiv(): HTMLDivElement {
+        let div = document.createElement('div');
+        div.style.top = '0';
+        div.style.right = '-1px';
+        div.style.width = '6px';
+        div.style.position = 'absolute';
+        div.style.cursor = 'col-resize';
+        div.style.userSelect = 'none';
+        div.style.height = 'calc(100vh - 105px)';
+        div.style.zIndex = '3';
+        return div;
+    }
+</script>
diff --git a/aas-web-ui/src/router.ts b/aas-web-ui/src/router.ts
index 359ecac8..e9c0344e 100644
--- a/aas-web-ui/src/router.ts
+++ b/aas-web-ui/src/router.ts
@@ -7,12 +7,14 @@ import { useAASHandling } from '@/composables/AAS/AASHandling';
 import { useSMEHandling } from '@/composables/AAS/SMEHandling';
 import { useRouteHandling } from '@/composables/routeHandling';
 import AASEditor from '@/pages/AASEditor.vue';
+import AASSubmodelViewer from '@/pages/AASSubmodelViewer.vue';
 import AASViewer from '@/pages/AASViewer.vue';
 import About from '@/pages/About.vue';
 import Dashboard from '@/pages/Dashboard.vue';
 import DashboardGroup from '@/pages/DashboardGroup.vue';
 import Page404 from '@/pages/Page404.vue';
-import SubmodelViewer from '@/pages/SubmodelViewer.vue';
+import SMEditor from '@/pages/SMEditor.vue';
+import SMViewer from '@/pages/SMViewer.vue';
 import { useAASStore } from '@/store/AASDataStore';
 import { useEnvStore } from '@/store/EnvironmentStore';
 import { useNavigationStore } from '@/store/NavigationStore';
@@ -36,11 +38,23 @@ const staticRoutes: Array<RouteRecordRaw> = [
     { path: '/componentvisualization', name: 'ComponentVisualization', component: ComponentVisualization },
     { path: '/visu', name: 'Visualization', component: ComponentVisualization, meta: { name: 'Visualization' } },
     {
-        path: '/submodelviewer',
-        name: 'SubmodelViewer',
-        component: SubmodelViewer,
+        path: '/aassmviewer',
+        name: 'AASSubmodelViewer',
+        component: AASSubmodelViewer,
+        meta: { name: 'AAS Submodel Viewer', subtitle: 'Visualize Submodels of AAS' },
+    },
+    {
+        path: '/smviewer',
+        name: 'SMViewer',
+        component: SMViewer,
         meta: { name: 'Submodel Viewer', subtitle: 'Visualize Submodels' },
     },
+    {
+        path: '/smeditor',
+        name: 'SMEditor',
+        component: SMEditor,
+        meta: { name: 'SM Editor', subtitle: 'Edit Submodels' },
+    },
     {
         path: '/about',
         name: 'About',
@@ -126,23 +140,31 @@ export async function createAppRouter(): Promise<Router> {
     const { idRedirectHandled } = useRouteHandling();
 
     // Data
-    const routesForMobile: Array<RouteRecordNameGeneric> = ['AASList', 'SubmodelList', 'Visualization'];
+    const routesForMobile: Array<RouteRecordNameGeneric> = ['AASList', 'SMList', 'SubmodelList', 'Visualization'];
     const routesForDesktop: Array<RouteRecordNameGeneric> = [
         'AASViewer',
         'AASEditor',
-        'SubmodelViewer',
+        'AASSubmodelViewer',
+        'SMViewer',
+        'SMEditor',
         'Visualization',
     ];
     const routesToSaveAndLoadUrlQuery: Array<RouteRecordNameGeneric> = [
-        'AASList',
-        'AASEditor',
         'AASViewer',
-        'SubmodelViewer',
+        'AASEditor',
+        'AASList',
+        'AASSubmodelViewer',
+        'SMViewer',
+        'SMEditor',
+        'SMList',
         'Visualization',
     ];
+    const routesSMViewerEditor: Array<RouteRecordNameGeneric> = ['SMViewer', 'SMEditor', 'SMList'];
     const routesStayOnPages: Array<RouteRecordNameGeneric> = ['About', 'NotFound404'];
     const routesDesktopToAASViewer: Array<RouteRecordNameGeneric> = ['AASList', 'SubmodelList'];
-    const routesMobileToAASList: Array<RouteRecordNameGeneric> = ['AASViewer', 'AASEditor', 'SubmodelViewer'];
+    const routesDesktopToSMViewer: Array<RouteRecordNameGeneric> = ['SMList'];
+    const routesMobileToAASList: Array<RouteRecordNameGeneric> = ['AASViewer', 'AASEditor', 'AASSubmodelViewer'];
+    const routesMobileToSMList: Array<RouteRecordNameGeneric> = ['SMViewer', 'SMEditor'];
     const routesToVisualization: Array<RouteRecordNameGeneric> = ['ComponentVisualization'];
 
     const possibleGloBalAssetIdQueryParameter = ['globalAssetId', 'globalassetid'];
@@ -199,9 +221,9 @@ export async function createAppRouter(): Promise<Router> {
                 if (Object.keys(from.query).length > 0) {
                     const queryToDispatch = from.query;
 
-                    // Strip idShortPath in case of switching to Submodel Viewer
+                    // Strip idShortPath in case of switching to AAS Submodel Viewer
                     const queryPathToDispatch = queryToDispatch?.path as string;
-                    if (to.name === 'SubmodelViewer' && queryPathToDispatch && queryPathToDispatch.trim() !== '') {
+                    if (to.name === 'AASSubmodelViewer' && queryPathToDispatch && queryPathToDispatch.trim() !== '') {
                         queryToDispatch.path = queryPathToDispatch.trim().split('/submodel-elements/')[0];
                     }
 
@@ -255,6 +277,14 @@ export async function createAppRouter(): Promise<Router> {
                 // Redirect to 'AASList' with query
                 next({ name: 'AASList', query: to.query });
                 return;
+            } else if (
+                routesMobileToSMList.includes(to.name) ||
+                (to.path.includes('/modules/') && !to.meta.isMobileModule)
+            ) {
+                // Redirect to 'SMList' with query
+                if (to.query.aas) delete to.query.ass;
+                next({ name: 'SMList', query: to.query });
+                return;
             } else if (routesToVisualization.includes(to.name)) {
                 // Redirect to 'Visualization' with query
                 next({ name: 'Visualization', query: to.query });
@@ -276,6 +306,15 @@ export async function createAppRouter(): Promise<Router> {
                 // Redirect to 'AASViewer' with query
                 next({ name: 'AASViewer', query: to.query });
                 return;
+            } else if (
+                routesDesktopToSMViewer.includes(to.name) ||
+                (to.name === 'SMEditor' && !allowEditing.value) ||
+                (to.path.includes('/modules/') && !to.meta.isDesktopModule)
+            ) {
+                // Redirect to 'SMViewer' with query
+                if (to.query.aas) delete to.query.ass;
+                next({ name: 'SMViewer', query: to.query });
+                return;
             } else if (routesToVisualization.includes(to.name)) {
                 // Redirect to 'Visualization' with query
                 next({ name: 'Visualization', query: to.query });
@@ -283,13 +322,23 @@ export async function createAppRouter(): Promise<Router> {
             }
         }
 
+        if (to.query.aas && routesSMViewerEditor.includes(to.name)) {
+            delete to.query.aas;
+            const updatedRoute = Object.assign({}, to, {
+                query: to.query,
+            });
+            next(updatedRoute);
+            return;
+        }
+
         // Fetch and dispatch AAS
         if (to.query.aas && to.query.aas !== '' && from.query.aas !== to.query.aas) {
             const aas = await fetchAndDispatchAas(to.query.aas as string);
             if (!aas || Object.keys(aas).length === 0) {
                 // Remove aas query for not available AAS endpoint
+                if (to.query.ass) delete to.query.aas;
                 const updatedRoute = Object.assign({}, to, {
-                    query: {},
+                    query: to.query,
                 });
                 next(updatedRoute);
                 return;
@@ -299,12 +348,17 @@ export async function createAppRouter(): Promise<Router> {
         }
 
         // Fetch and dispatch SM/SME
-        if (to.query.path && to.query.path !== '' && from.query.path !== to.query.path) {
+        if (
+            to.query.path &&
+            to.query.path !== '' &&
+            (from.query.path !== to.query.path || ['SMViewer', 'SMEditor'].includes(to.name as string))
+        ) {
             const sme = await fetchAndDispatchSme(to.query.path as string, true);
             if (!sme || Object.keys(sme).length === 0) {
                 // Remove path query for not available SME path
+                if (to.query.path) delete to.query.path;
                 const updatedRoute = Object.assign({}, to, {
-                    query: { aas: to.query.aas },
+                    query: to.query,
                 });
                 next(updatedRoute);
                 return;