diff --git a/i18n/en.pot b/i18n/en.pot
index c673c94..f77f727 100644
--- a/i18n/en.pot
+++ b/i18n/en.pot
@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2024-11-29T23:15:51.985Z\n"
-"PO-Revision-Date: 2024-11-29T23:15:51.986Z\n"
+"POT-Creation-Date: 2024-11-30T16:31:03.946Z\n"
+"PO-Revision-Date: 2024-11-30T16:31:03.947Z\n"
 
 msgid "ERROR"
 msgstr "ERROR"
@@ -14,14 +14,14 @@ msgstr "ERROR"
 msgid "Namespaces"
 msgstr "Namespaces"
 
-msgid "Search"
-msgstr "Search"
-
-msgid "Namespace"
-msgstr "Namespace"
-
 msgid "DataStore"
 msgstr "DataStore"
 
 msgid "User DataStore"
 msgstr "User DataStore"
+
+msgid "Search"
+msgstr "Search"
+
+msgid "Namespace"
+msgstr "Namespace"
diff --git a/src/App.tsx b/src/App.tsx
index aa18058..bdfee63 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,7 +1,7 @@
 import React, { FC } from 'react'
 import { RouterProvider } from 'react-router-dom'
-import AppWrapper from './components/appWrapper'
-import { router } from './routes/router'
+import AppWrapper from './components/AppWrapper'
+import { router } from './routes/Router'
 
 const App: FC = () => {
     return (
diff --git a/src/components/Loader.tsx b/src/components/Loader.tsx
new file mode 100644
index 0000000..7f8a2f8
--- /dev/null
+++ b/src/components/Loader.tsx
@@ -0,0 +1,17 @@
+import { CircularLoader } from '@dhis2/ui'
+import React from 'react'
+
+const CenteredLoader = () => {
+    return (
+        <div
+            style={{
+                display: 'flex',
+                justifyContent: 'center',
+            }}
+        >
+            <CircularLoader />
+        </div>
+    )
+}
+
+export default CenteredLoader
diff --git a/src/components/keys/keysTable.tsx b/src/components/keys/keysTable.tsx
index af99ed5..58ddb13 100644
--- a/src/components/keys/keysTable.tsx
+++ b/src/components/keys/keysTable.tsx
@@ -7,9 +7,9 @@ import {
     TableBody,
     TableHead,
 } from '@dhis2/ui'
-import PropTypes from 'prop-types'
 import React, { useEffect } from 'react'
 import { useParams } from 'react-router-dom'
+import CenteredLoader from '../Loader'
 
 interface QueryResults {
     results: []
@@ -31,18 +31,18 @@ const useNameSpaceQuery = ({ store, namespace }) => {
     )
 }
 
-const Keys = () => {
+const KeysTable = () => {
     const { store, namespace } = useParams()
-    const { data, refetch } = useNameSpaceQuery({ store, namespace })
+    const { data, loading, refetch } = useNameSpaceQuery({ store, namespace })
 
     useEffect(() => {
         refetch({ id: namespace })
     }, [namespace])
 
-    return <KeysTable data={data} />
-}
+    if (loading) {
+        return <CenteredLoader />
+    }
 
-export const KeysTable = ({ data }) => {
     return (
         <DataTable>
             <TableHead>
@@ -56,8 +56,10 @@ export const KeysTable = ({ data }) => {
                     <>
                         {data.results.map((key, index) => (
                             <DataTableRow key={`${key}-${index}`}>
-                                <DataTableCell>{key}</DataTableCell>
-                                <DataTableCell>Edit, Delete</DataTableCell>
+                                <DataTableCell bordered>{key}</DataTableCell>
+                                <DataTableCell bordered>
+                                    Edit, Delete
+                                </DataTableCell>
                             </DataTableRow>
                         ))}
                     </>
@@ -67,8 +69,4 @@ export const KeysTable = ({ data }) => {
     )
 }
 
-KeysTable.propTypes = {
-    data: PropTypes.object,
-}
-
-export default Keys
+export default KeysTable
diff --git a/src/components/namespaces/DataStoreLinks.tsx b/src/components/namespaces/DataStoreLinks.tsx
new file mode 100644
index 0000000..e84b448
--- /dev/null
+++ b/src/components/namespaces/DataStoreLinks.tsx
@@ -0,0 +1,28 @@
+import { useDataQuery } from '@dhis2/app-runtime'
+import PropTypes from 'prop-types'
+import React from 'react'
+import LinksList from './LinksList'
+
+interface QueryResults {
+    results: []
+}
+
+const dataStoreQuery = {
+    results: {
+        resource: 'dataStore',
+    },
+}
+
+function DataStoreLinks({ store }) {
+    const { error, loading, data } = useDataQuery<QueryResults>(dataStoreQuery)
+
+    return (
+        <LinksList store={store} error={error} data={data} loading={loading} />
+    )
+}
+
+DataStoreLinks.propTypes = {
+    store: PropTypes.string,
+}
+
+export default DataStoreLinks
diff --git a/src/components/namespaces/LinksList.tsx b/src/components/namespaces/LinksList.tsx
new file mode 100644
index 0000000..ec055e4
--- /dev/null
+++ b/src/components/namespaces/LinksList.tsx
@@ -0,0 +1,40 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import classes from '../../App.module.css'
+import i18n from '../../locales'
+import CenteredLoader from '../Loader'
+import SidebarNavLink from '../sidebar/SidebarNavLink'
+
+function LinksList({ data, error, loading, store }) {
+    return (
+        <div className={classes.sidebarList}>
+            {error && <span>{i18n.t('ERROR')}</span>}
+            {loading && <CenteredLoader />}
+            {data && (
+                <>
+                    <h4 className={classes.bottom}>{i18n.t('Namespaces')}</h4>
+                    <ul>
+                        {data.results.map((namespace: string, index) => {
+                            return (
+                                <SidebarNavLink
+                                    key={`${index}-${namespace}`}
+                                    to={`/${store}/${namespace}`}
+                                    label={namespace}
+                                />
+                            )
+                        })}
+                    </ul>
+                </>
+            )}
+        </div>
+    )
+}
+
+LinksList.propTypes = {
+    data: PropTypes.object,
+    error: PropTypes.any,
+    loading: PropTypes.any,
+    store: PropTypes.string,
+}
+
+export default LinksList
diff --git a/src/components/namespaces/NamespacesLinks.tsx b/src/components/namespaces/NamespacesLinks.tsx
new file mode 100644
index 0000000..a8aed92
--- /dev/null
+++ b/src/components/namespaces/NamespacesLinks.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import { useParams } from 'react-router-dom'
+import DataStoreLinks from './DataStoreLinks'
+import UserDataStoreLinks from './UserDataStoreLinks'
+
+const NameSpaceLinks = () => {
+    const { store } = useParams()
+
+    if (store === 'userDataStore') {
+        return <UserDataStoreLinks store={store} />
+    }
+
+    if (store === 'dataStore') {
+        return <DataStoreLinks store={store} />
+    }
+}
+
+export default NameSpaceLinks
diff --git a/src/components/namespaces/UserDataStoreLinks.tsx b/src/components/namespaces/UserDataStoreLinks.tsx
new file mode 100644
index 0000000..c6b0fdd
--- /dev/null
+++ b/src/components/namespaces/UserDataStoreLinks.tsx
@@ -0,0 +1,29 @@
+import { useDataQuery } from '@dhis2/app-runtime'
+import PropTypes from 'prop-types'
+import React from 'react'
+import LinksList from './LinksList'
+
+interface QueryResults {
+    results: []
+}
+
+const userDataStoreQuery = {
+    results: {
+        resource: 'userDataStore',
+    },
+}
+
+function UserDataStoreLinks({ store }) {
+    const { error, loading, data } =
+        useDataQuery<QueryResults>(userDataStoreQuery)
+
+    return (
+        <LinksList store={store} error={error} data={data} loading={loading} />
+    )
+}
+
+UserDataStoreLinks.propTypes = {
+    store: PropTypes.string,
+}
+
+export default UserDataStoreLinks
diff --git a/src/components/namespaces/list.tsx b/src/components/namespaces/list.tsx
deleted file mode 100644
index 3efa6a1..0000000
--- a/src/components/namespaces/list.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import { useDataQuery } from '@dhis2/app-runtime'
-import { CircularLoader } from '@dhis2/ui'
-import PropTypes from 'prop-types'
-import React from 'react'
-import { useParams } from 'react-router-dom'
-import classes from '../../App.module.css'
-import i18n from '../../locales'
-import { SidebarNavLink } from '../sidebar/sidebar'
-
-interface QueryResults {
-    results: []
-}
-
-const dataStoreQuery = {
-    results: {
-        resource: 'dataStore',
-    },
-}
-
-const userDataStoreQuery = {
-    results: {
-        resource: 'userDataStore',
-    },
-}
-
-function List({ data, error, loading, store }) {
-    return (
-        <div className={classes.sidebarList}>
-            {error && <span>{i18n.t('ERROR')}</span>}
-            {loading && <CircularLoader />}
-            {data && (
-                <>
-                    <h4 className={classes.bottom}>{i18n.t('Namespaces')}</h4>
-                    {data.results.map((namespace: string, index) => {
-                        return (
-                            <SidebarNavLink
-                                key={`${index}-${namespace}`}
-                                to={`/${store}/${namespace}`}
-                                label={namespace}
-                            />
-                        )
-                    })}
-                </>
-            )}
-        </div>
-    )
-}
-
-List.propTypes = {
-    data: PropTypes.object,
-    error: PropTypes.any,
-    loading: PropTypes.any,
-    store: PropTypes.string,
-}
-
-export function DataStoreList({ store }) {
-    const { error, loading, data } = useDataQuery<QueryResults>(dataStoreQuery)
-
-    return <List store={store} error={error} data={data} loading={loading} />
-}
-
-DataStoreList.propTypes = {
-    store: PropTypes.string,
-}
-
-export function UserDataStoreList({ store }) {
-    const { error, loading, data } =
-        useDataQuery<QueryResults>(userDataStoreQuery)
-
-    return <List store={store} error={error} data={data} loading={loading} />
-}
-
-UserDataStoreList.propTypes = {
-    store: PropTypes.string,
-}
-
-export function NameSpaceLinks() {
-    const { store } = useParams()
-
-    if (store === 'userDataStore') {
-        return <UserDataStoreList store={store} />
-    }
-
-    if (store === 'dataStore') {
-        return <DataStoreList store={store} />
-    }
-}
diff --git a/src/components/sidebar/select.tsx b/src/components/sidebar/DataStoreSelect.tsx
similarity index 87%
rename from src/components/sidebar/select.tsx
rename to src/components/sidebar/DataStoreSelect.tsx
index 3453be8..5fa46da 100644
--- a/src/components/sidebar/select.tsx
+++ b/src/components/sidebar/DataStoreSelect.tsx
@@ -4,7 +4,7 @@ import React from 'react'
 import classes from '../../App.module.css'
 import i18n from '../../locales'
 
-const SelectDataStore = ({ option, handleChange }) => {
+const DataStoreSelect = ({ option, handleChange }) => {
     return (
         <div className={classes.bottom}>
             <SingleSelectField
@@ -25,9 +25,9 @@ const SelectDataStore = ({ option, handleChange }) => {
     )
 }
 
-SelectDataStore.propTypes = {
+DataStoreSelect.propTypes = {
     handleChange: PropTypes.func,
     option: PropTypes.string,
 }
 
-export default SelectDataStore
+export default DataStoreSelect
diff --git a/src/components/sidebar/SidebarNavLink.tsx b/src/components/sidebar/SidebarNavLink.tsx
new file mode 100644
index 0000000..598bb5b
--- /dev/null
+++ b/src/components/sidebar/SidebarNavLink.tsx
@@ -0,0 +1,25 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import { NavLink } from 'react-router-dom'
+
+const SidebarNavLink = ({ to, label }) => {
+    return (
+        <li>
+            <NavLink
+                to={to}
+                className={({ isActive, isPending }) =>
+                    isActive ? 'active' : isPending ? 'pending' : ''
+                }
+            >
+                {label}
+            </NavLink>
+        </li>
+    )
+}
+
+SidebarNavLink.propTypes = {
+    label: PropTypes.string,
+    to: PropTypes.string,
+}
+
+export default SidebarNavLink
diff --git a/src/components/sidebar/sidebar.tsx b/src/components/sidebar/sidebar.tsx
index 79f210c..568ac7a 100644
--- a/src/components/sidebar/sidebar.tsx
+++ b/src/components/sidebar/sidebar.tsx
@@ -1,40 +1,10 @@
 import { Card, Divider } from '@dhis2/ui'
-import PropTypes from 'prop-types'
 import React, { useState } from 'react'
-import { NavLink, useNavigate, useParams } from 'react-router-dom'
+import { useNavigate, useParams } from 'react-router-dom'
 import classes from '../../App.module.css'
-import { NameSpaceLinks } from '../namespaces/list'
-import SearchField from './searchField'
-import SelectDataStore from './select'
-
-export const SidebarNavLink = ({ to, label }) => {
-    return (
-        <li>
-            <NavLink
-                to={to}
-                className={({ isActive, isPending }) =>
-                    isActive ? 'active' : isPending ? 'pending' : ''
-                }
-            >
-                {label}
-            </NavLink>
-        </li>
-    )
-}
-
-SidebarNavLink.propTypes = {
-    label: PropTypes.string,
-    to: PropTypes.string,
-}
-
-export const SidebarNavigation = () => {
-    return (
-        <>
-            <SearchField />
-            <NameSpaceLinks />
-        </>
-    )
-}
+import NameSpaceLinks from '../namespaces/NamespacesLinks'
+import DataStoreSelect from './DataStoreSelect'
+import SearchField from './SearchField'
 
 const Sidebar = () => {
     const navigate = useNavigate()
@@ -47,12 +17,17 @@ const Sidebar = () => {
     }
     return (
         <Card className={classes.sidebarContent}>
-            <SelectDataStore
+            <DataStoreSelect
                 option={option}
                 handleChange={handleDataStoreSelect}
             />
             <Divider />
-            {store && <SidebarNavigation />}
+            {store && (
+                <>
+                    <SearchField />
+                    <NameSpaceLinks />
+                </>
+            )}
         </Card>
     )
 }
diff --git a/src/routes/layout.tsx b/src/routes/layout.tsx
index 87d0402..5678c4a 100644
--- a/src/routes/layout.tsx
+++ b/src/routes/layout.tsx
@@ -1,17 +1,23 @@
 import React from 'react'
-import { Outlet } from 'react-router-dom'
+import { Outlet, useParams } from 'react-router-dom'
 import classes from '../App.module.css'
-import Sidebar from '../components/sidebar/sidebar'
+import Sidebar from '../components/sidebar/Sidebar'
 
-export default function Layout() {
+function Layout() {
+    const { store, namespace } = useParams()
     return (
         <div className={classes.container}>
             <div id="sidebar" className={classes.sidebar}>
                 <Sidebar />
             </div>
             <div id="main" className={classes.main}>
+                {/* Empty Display component */}
+                {!store && <p>Select a datastore to show namespaces</p>}
+                {store && !namespace && <p>Click a namespace to show keys</p>}
                 <Outlet />
             </div>
         </div>
     )
 }
+
+export default Layout
diff --git a/src/routes/router.tsx b/src/routes/router.tsx
index b69493b..8d198f5 100644
--- a/src/routes/router.tsx
+++ b/src/routes/router.tsx
@@ -1,8 +1,8 @@
 import React from 'react'
 import { createHashRouter } from 'react-router-dom'
-import Keys from '../components/keys/keysTable'
-import ErrorPage from '../pages/errorPage'
-import Layout from './layout'
+import KeysTable from '../components/keys/KeysTable'
+import ErrorPage from '../pages/ErrorPage'
+import Layout from './Layout'
 
 export const router = createHashRouter([
     {
@@ -15,7 +15,7 @@ export const router = createHashRouter([
                 children: [
                     {
                         path: ':namespace',
-                        element: <Keys />,
+                        element: <KeysTable />,
                     },
                 ],
             },