diff --git a/frontend/src/component/application/ApplicationOverview.test.tsx b/frontend/src/component/application/ApplicationOverview.test.tsx
new file mode 100644
index 0000000000..dde0dd0df3
--- /dev/null
+++ b/frontend/src/component/application/ApplicationOverview.test.tsx
@@ -0,0 +1,72 @@
+import { screen } from '@testing-library/react';
+import { render } from 'utils/testRenderer';
+import { testServerRoute, testServerSetup } from 'utils/testServer';
+import { Route, Routes } from 'react-router-dom';
+import { ApplicationOverviewSchema } from '../../openapi';
+import ApplicationOverview from './ApplicationOverview';
+
+const server = testServerSetup();
+
+const setupApi = (application: ApplicationOverviewSchema) => {
+    testServerRoute(
+        server,
+        '/api/admin/metrics/applications/my-app/overview',
+        application,
+    );
+    testServerRoute(server, '/api/admin/ui-config', {});
+};
+
+test('Display application overview with environments', async () => {
+    setupApi({
+        environments: [
+            {
+                name: 'development',
+                instanceCount: 999,
+                lastSeen: '2024-02-22T20:20:24.740',
+                sdks: ['unleash-client-node:5.5.0-beta.0'],
+            },
+        ],
+        featureCount: 1,
+        projects: ['default'],
+    });
+    render(
+        <Routes>
+            <Route
+                path={'/applications/:name'}
+                element={<ApplicationOverview />}
+            />
+        </Routes>,
+        {
+            route: '/applications/my-app',
+        },
+    );
+
+    await screen.findByText('my-app');
+    await screen.findByText('Everything looks good!');
+    await screen.findByText('development environment');
+    await screen.findByText('999');
+    await screen.findByText('unleash-client-node:5.5.0-beta.0');
+    await screen.findByText('2024-02-22T20:20:24.740');
+});
+
+test('Display application overview without environments', async () => {
+    setupApi({
+        environments: [],
+        featureCount: 0,
+        projects: ['default'],
+    });
+    render(
+        <Routes>
+            <Route
+                path={'/applications/:name'}
+                element={<ApplicationOverview />}
+            />
+        </Routes>,
+        {
+            route: '/applications/my-app',
+        },
+    );
+
+    await screen.findByText('my-app');
+    await screen.findByText('No data available.');
+});
diff --git a/frontend/src/component/application/ApplicationOverview.tsx b/frontend/src/component/application/ApplicationOverview.tsx
index 6f527db9fd..a6d98c3c29 100644
--- a/frontend/src/component/application/ApplicationOverview.tsx
+++ b/frontend/src/component/application/ApplicationOverview.tsx
@@ -202,7 +202,10 @@ export const ApplicationOverview = () => {
 
                         <StyledEnvironmentsContainer ref={elementRef}>
                             {data.environments.map((environment) => (
-                                <ArcherElement id={environment.name}>
+                                <ArcherElement
+                                    id={environment.name}
+                                    key={environment.name}
+                                >
                                     <StyledEnvironmentBox
                                         mode={mode}
                                         key={environment.name}
@@ -212,32 +215,40 @@ export const ApplicationOverview = () => {
                                         </EnvironmentHeader>
 
                                         <StyledTable>
-                                            <tr>
-                                                <StyledCell>
-                                                    Instances:
-                                                </StyledCell>
-                                                <StyledCell>
-                                                    {environment.instanceCount}
-                                                </StyledCell>
-                                            </tr>
-                                            <tr>
-                                                <StyledCell>SDK:</StyledCell>
-                                                <StyledCell>
-                                                    {environment.sdks.map(
-                                                        (sdk) => (
-                                                            <div>{sdk}</div>
-                                                        ),
-                                                    )}
-                                                </StyledCell>
-                                            </tr>
-                                            <tr>
-                                                <StyledCell>
-                                                    Last seen:
-                                                </StyledCell>
-                                                <StyledCell>
-                                                    {environment.lastSeen}
-                                                </StyledCell>
-                                            </tr>
+                                            <tbody>
+                                                <tr>
+                                                    <StyledCell>
+                                                        Instances:
+                                                    </StyledCell>
+                                                    <StyledCell>
+                                                        {
+                                                            environment.instanceCount
+                                                        }
+                                                    </StyledCell>
+                                                </tr>
+                                                <tr>
+                                                    <StyledCell>
+                                                        SDK:
+                                                    </StyledCell>
+                                                    <StyledCell>
+                                                        {environment.sdks.map(
+                                                            (sdk) => (
+                                                                <div key={sdk}>
+                                                                    {sdk}
+                                                                </div>
+                                                            ),
+                                                        )}
+                                                    </StyledCell>
+                                                </tr>
+                                                <tr>
+                                                    <StyledCell>
+                                                        Last seen:
+                                                    </StyledCell>
+                                                    <StyledCell>
+                                                        {environment.lastSeen}
+                                                    </StyledCell>
+                                                </tr>
+                                            </tbody>
                                         </StyledTable>
                                     </StyledEnvironmentBox>
                                 </ArcherElement>