diff --git a/springwolf-ui/package.json b/springwolf-ui/package.json
index f792d8357..52f62ece0 100644
--- a/springwolf-ui/package.json
+++ b/springwolf-ui/package.json
@@ -8,7 +8,7 @@
     "build_pages": "ng build",
     "watch": "ng build --watch",
     "test": "jest --no-cache",
-    "update": "ng update | awk -v re='@[[:alnum:]]' '$0 ~ re {printf $1 \" \"}' | xargs ng update --force=true"
+    "update": "ng update | awk -v re='@[[:alnum:]]' '$0 ~ re {printf $1 \" \"}' | xargs ng update --force=true && npm update"
   },
   "private": true,
   "dependencies": {
diff --git a/springwolf-ui/src/app/app.component.css b/springwolf-ui/src/app/app.component.css
index f5c4a5e7b..57735ab86 100644
--- a/springwolf-ui/src/app/app.component.css
+++ b/springwolf-ui/src/app/app.component.css
@@ -11,6 +11,6 @@ main {
   padding: 0;
 }
 
-section {
+article {
   margin: 2em 1em;
 }
diff --git a/springwolf-ui/src/app/app.component.html b/springwolf-ui/src/app/app.component.html
index 7061e52ba..1bf5ff24b 100644
--- a/springwolf-ui/src/app/app.component.html
+++ b/springwolf-ui/src/app/app.component.html
@@ -2,20 +2,20 @@
 <app-header></app-header>
 <main class="mat-typography">
   <app-sidenav>
-    <section appNavigationTarget id="info">
+    <article appNavigationTarget id="info">
       <app-info></app-info>
-    </section>
+    </article>
 
-    <section appNavigationTarget id="servers">
+    <article appNavigationTarget id="servers">
       <app-servers></app-servers>
-    </section>
+    </article>
 
-    <section appNavigationTarget id="channels">
+    <article appNavigationTarget id="channels">
       <app-channels> </app-channels>
-    </section>
+    </article>
 
-    <section appNavigationTarget id="schemas">
+    <article appNavigationTarget id="schemas">
       <app-schemas></app-schemas>
-    </section>
+    </article>
   </app-sidenav>
 </main>
diff --git a/springwolf-ui/src/app/app.component.spec.ts b/springwolf-ui/src/app/app.component.spec.ts
new file mode 100644
index 000000000..a754f3159
--- /dev/null
+++ b/springwolf-ui/src/app/app.component.spec.ts
@@ -0,0 +1,47 @@
+/* SPDX-License-Identifier: Apache-2.0 */
+import { AppComponent } from "./app.component";
+import { render, screen, waitFor, within } from "@testing-library/angular";
+import { appConfig } from "./app.config";
+import { MatIconTestingModule } from "@angular/material/icon/testing";
+
+describe("AppComponent", () => {
+  test("should render", async () => {
+    await render(AppComponent, {
+      providers: appConfig.providers,
+      imports: [MatIconTestingModule],
+    });
+
+    await waitFor(() => {
+      expect(
+        screen.getAllByText("Springwolf example project", { exact: false })
+          .length
+      ).toBeGreaterThan(0);
+    });
+
+    // get menu items
+    const articles = screen.getAllByRole("article");
+
+    // server menu
+    const servers = articles.find(
+      (article) => within(article).queryByText("Servers") !== null
+    );
+    expect(servers).not.toBeNull();
+    expect(within(servers!!).getAllByRole("article").length).toBeGreaterThan(0);
+
+    // channel menu
+    const channels = articles.find(
+      (article) => within(article).queryByText("Channels") !== null
+    );
+    expect(channels).not.toBeNull();
+    expect(within(channels!!).getAllByRole("article").length).toBeGreaterThan(
+      0
+    );
+
+    // schema menu
+    const schemas = articles.find(
+      (article) => within(article).queryByText("Schemas") !== null
+    );
+    expect(schemas).not.toBeNull();
+    expect(within(schemas!!).getAllByRole("article").length).toBeGreaterThan(0);
+  });
+});