diff --git a/src/App.module.css b/src/App.module.css
index c97f94e..97f1344 100644
--- a/src/App.module.css
+++ b/src/App.module.css
@@ -25,10 +25,6 @@
     width: 20%;
 }
 
-/* .sidebarList {
-    margin-top: 1em;
-} */
-
 .sidebarList h4 {
     padding: 0;
     margin: 0.5em;
@@ -43,7 +39,6 @@
     height: 70px;
     padding: 0;
     margin: 0;
-    /* border: 1px solid var(--colors-grey200)   */
 }
 
 /* main area */
@@ -53,7 +48,7 @@
     margin: 0.1em;
 }
 
-/* keys */
+/* --- keys */
 
 .keysTable {
     margin-top: 10px;
@@ -108,14 +103,11 @@
 .toolbar {
     margin-top: 5px;
     height: 70px;
-    /* border: 1px solid var(--colors-grey200) */
     display: flex;
     flex-direction: row;
-    /* align-content: center; */
 }
 
 .toolbar button {
-    /* border: none; */
     align-self: center;
     margin: 0 0 0 15px;
 }
diff --git a/src/App.test.tsx b/src/App.test.tsx
deleted file mode 100644
index e1dbed0..0000000
--- a/src/App.test.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { CustomDataProvider } from '@dhis2/app-runtime'
-import React from 'react'
-import { createRoot } from 'react-dom/client'
-import App from './App'
-
-it('renders without crashing', () => {
-    const container = document.createElement('div')
-
-    const data = {
-        resource: 'test',
-    }
-
-    const root = createRoot(container)
-    root.render(
-        <CustomDataProvider data={data}>
-            <App />
-        </CustomDataProvider>
-    )
-
-    root.unmount()
-})
diff --git a/src/components/EmptyArea.tsx b/src/components/EmptyArea.tsx
index a8f1bd2..baec6ef 100644
--- a/src/components/EmptyArea.tsx
+++ b/src/components/EmptyArea.tsx
@@ -10,14 +10,15 @@ const EmptyArea = () => {
             {!store && (
                 <Center>
                     <NoticeBox title={i18n.t('View namespaces')}>
-                        Select a datastore to show namespaces
+                        {i18n.t("Select a datastore to show namespaces")}
                     </NoticeBox>
                 </Center>
             )}
             {store && !namespace && (
                 <Center>
                     <NoticeBox title={i18n.t('View keys')}>
-                        Click a namespace to show keys
+                        {i18n.t("Click a namespace to show keys")}
+                        
                     </NoticeBox>
                 </Center>
             )}
diff --git a/src/components/create/CreateModal.tsx b/src/components/create/CreateModal.tsx
index 89f2a69..e6c2666 100644
--- a/src/components/create/CreateModal.tsx
+++ b/src/components/create/CreateModal.tsx
@@ -12,50 +12,62 @@ import React from 'react'
 import i18n from '../../locales'
 
 const CreateModal = ({
-    saveFn,
-    showNamespaceModal,
-    showAddKeyModal,
-    namespace,
-    newKey,
-    setNamespace,
-    setNewKey,
+    addNewKey,
+    addNewNamespace,
+    createFn,
+    values,
+    setValues,
     closeModal,
 }) => {
     return (
         <Modal>
-            <ModalTitle>Add New Namespace</ModalTitle>
+            <ModalTitle>
+                {addNewKey && i18n.t('Add New Key')}
+                {addNewNamespace && i18n.t('Add New Namespace')}
+            </ModalTitle>
             <ModalContent>
-                {showNamespaceModal && (
+                {addNewNamespace && (
                     <InputField
-                        label="Namespace"
+                        label={i18n.t("Namespace")}
                         required
-                        value={namespace}
-                        onChange={({ value }) => setNamespace(value)}
+                        initialFocus
+                        value={values?.namespace}
+                        onChange={({ value }) => {
+                            setValues({
+                                ...values,
+                                ["namespace"]: value
+                            })
+                        }
+                        }
                     />
                 )}
                 <InputField
-                    label="Key"
+                    label={i18n.t("Key")}
                     required
-                    value={newKey}
-                    onChange={({ value }) => setNewKey(value)}
+                    initialFocus={addNewKey}
+                    value={values?.key}
+                        onChange={({ value }) => {
+                            setValues({
+                                ...values,
+                                ["key"]: value
+                            })
+                        }
+                        }
                 />
             </ModalContent>
             <ModalActions>
                 <ButtonStrip end>
                     <Button secondary onClick={closeModal}>
-                        Cancel
+                        {i18n.t('Cancel')}
                     </Button>
                     <Button
                         primary
                         onClick={() =>
-                            saveFn({
-                                newKey,
-                                namespace,
-                            })
+                            createFn(values)
                         }
                     >
-                        {showAddKeyModal && i18n.t('Add Key')}
-                        {showNamespaceModal && i18n.t('Add Namespace')}
+                        {addNewKey && i18n.t('Add Key')}
+                        {addNewNamespace && i18n.t('Add Namespace')}
                     </Button>
                 </ButtonStrip>
             </ModalActions>
@@ -64,14 +76,12 @@ const CreateModal = ({
 }
 
 CreateModal.propTypes = {
-    closeModal: PropTypes.func,
-    namespace: PropTypes.string,
-    newKey: PropTypes.string,
-    saveFn: PropTypes.func,
-    setNamespace: PropTypes.func,
-    setNewKey: PropTypes.func,
-    showAddKeyModal: PropTypes.bool,
-    showNamespaceModal: PropTypes.bool,
+    addNewKey: PropTypes.bool,
+    addNewNamespace: PropTypes.bool,
+    createFn: PropTypes.func,
+    values: PropTypes.object,
+    setValues: PropTypes.func,
+    closeModal: PropTypes.func
 }
 
 export default CreateModal
diff --git a/src/components/create/Toolbar.tsx b/src/components/create/Toolbar.tsx
index a8201d9..6a00cad 100644
--- a/src/components/create/Toolbar.tsx
+++ b/src/components/create/Toolbar.tsx
@@ -9,23 +9,22 @@ import CreateModal from './CreateModal'
 const Toolbar = () => {
     const { store, namespace } = useParams()
 
-    const [showAddNamespaceModal, setShowAddNamespaceModal] = useState(false)
-    const [showAddKeyModal, setShowAddKeyModal] = useState(false)
-    const [newNamespace, setNewNamespace] = useState('')
-    const [newKey, setNewKey] = useState('')
+    const [addNewNamespace, setAddNewNamespace] = useState(false)
+    const [addNewKey, setAddNewKey] = useState(false)
+    const [values, setValues] = useState({})
 
     const engine = useDataEngine()
     const navigate = useNavigate()
 
-    const handleAddNamespace = async (values: {
+    const handleAddNamespaceOrKey = async (values: {
         namespace?: string
-        newKey?: unknown
+        key?: unknown
     }) => {
-        let resource = `${store}`
-        if (showAddNamespaceModal) {
-            resource = `${resource}/${values?.namespace}/${values?.newKey}`
-        } else if (showAddKeyModal) {
-            resource = `${resource}/${namespace}/${values?.newKey}`
+        let resource = ""
+        if (addNewNamespace) {
+            resource = `${store}/${values?.namespace}/${values?.key}`
+        } else if (addNewKey) {
+            resource = `${store}/${namespace}/${values?.key}`
         }
 
         await engine.mutate(
@@ -36,25 +35,24 @@ const Toolbar = () => {
             },
             {
                 onComplete: () => {
-                    if (showAddNamespaceModal) {
-                        navigate(
-                            `${store}/${values?.namespace}/edit/${values?.newKey}`
-                        )
-                    } else if (showAddKeyModal) {
-                        navigate(`${store}/${namespace}/edit/${values?.newKey}`)
+                    let url = ''
+                    if (addNewNamespace) {
+                        url = `${store}/${values?.namespace}/edit/${values?.key}`
+                    } else if (addNewKey) {
+                        url = `${store}/${namespace}/edit/${values?.key}`
                     }
-                    setNewKey('')
-                    setNewNamespace('')
+                    navigate(url)
+
+                    setValues({})
                 },
             }
         )
-
-        handleCloseModal()
+        closeModal()
     }
 
-    const handleCloseModal = () => {
-        setShowAddNamespaceModal(false)
-        setShowAddKeyModal(false)
+    const closeModal = () => {
+        setAddNewKey(false)
+        setAddNewNamespace(false)
     }
 
     return (
@@ -63,23 +61,23 @@ const Toolbar = () => {
                 <>
                     <div className={classes.toolbar}>
                         <Button
-                            aria-label="Add new namespace"
+                            aria-label={i18n.t('Add new namespace')}
                             name="New namespace button"
                             onClick={() => {
-                                setShowAddNamespaceModal(true)
+                                setAddNewNamespace(true)
                             }}
-                            title="New namespace"
+                            title={i18n.t('New namespace')}
                         >
                             {i18n.t('Add new namespace')}
                         </Button>
                         {namespace && (
                             <Button
-                                aria-label="Add new key"
+                                aria-label={i18n.t('Add new key')}
                                 name="New key button"
                                 onClick={() => {
-                                    setShowAddKeyModal(true)
+                                    setAddNewKey(true)
                                 }}
-                                title="New key"
+                                title={i18n.t('New key')}
                             >
                                 {i18n.t('Add new key')}
                             </Button>
@@ -88,16 +86,14 @@ const Toolbar = () => {
                     <Divider />
                 </>
             )}
-            {(showAddNamespaceModal || showAddKeyModal) && (
+            {(addNewKey || addNewNamespace) && (
                 <CreateModal
-                    showNamespaceModal={showAddNamespaceModal}
-                    showAddKeyModal={showAddKeyModal}
-                    saveFn={handleAddNamespace}
-                    closeModal={handleCloseModal}
-                    namespace={newNamespace}
-                    setNamespace={setNewNamespace}
-                    newKey={newKey}
-                    setNewKey={setNewKey}
+                    addNewKey={addNewKey}
+                    addNewNamespace={addNewNamespace}
+                    createFn={handleAddNamespaceOrKey}
+                    closeModal={closeModal}
+                    values={values}
+                    setValues={setValues}
                 />
             )}
         </>
diff --git a/src/components/keys/DeleteAction.tsx b/src/components/delete/DeleteButton.tsx
similarity index 61%
rename from src/components/keys/DeleteAction.tsx
rename to src/components/delete/DeleteButton.tsx
index 0324a16..a2fe5e6 100644
--- a/src/components/keys/DeleteAction.tsx
+++ b/src/components/delete/DeleteButton.tsx
@@ -3,19 +3,19 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import i18n from '../../locales'
 
-export default function DeleteAction({ openModal }) {
+export default function DeleteButton({ openModal }) {
     return (
         <Button
-            aria-label="Delete key"
-            name="Delete key"
+            aria-label={i18n.t('Delete')}
+            name="Delete"
             onClick={openModal}
-            title="Delete key"
+            title={i18n.t('Delete')}
         >
             {i18n.t('Delete')}
         </Button>
     )
 }
 
-DeleteAction.propTypes = {
+DeleteButton.propTypes = {
     openModal: PropTypes.func,
 }
diff --git a/src/components/edit/Edit.tsx b/src/components/edit/Edit.tsx
index 7505e36..b836f9c 100644
--- a/src/components/edit/Edit.tsx
+++ b/src/components/edit/Edit.tsx
@@ -2,75 +2,71 @@ import { useDataMutation, useDataQuery } from '@dhis2/app-runtime'
 import { Button } from '@dhis2-ui/button'
 import React, { useEffect, useState } from 'react'
 import { useParams } from 'react-router-dom'
+import i18n from '../../locales'
 import Editor from './Editor'
 
-const useSaveChangesMutation = ({ store, namespace, mutationOptions }) => {
-    return useDataMutation(
-        // @ts-expect-error("")
-        {
-            type: 'update',
-            resource: `${store}/${namespace}`,
-            id: ({ id }) => id,
-            data: ({ data }) => {
-                console.log(data)
-                return {
-                    data: JSON.parse(data),
-                }
-            },
-        },
-        mutationOptions
-    )
-}
+const modifyKeyMutation = ({ store }) => ({
+    type: 'update' as const,
+    resource: `${store}`,
+    id: ({ key, namespace }: { key: string, namespace: string }) => `${namespace}/${key}`,
+    data: ({ value }) => JSON.parse(value),
+})
 
-const useFetchKeyValueQuery = ({ store, namespace, key }) => {
-    return useDataQuery(
-        {
-            results: {
-                resource: `${store}/${namespace}`,
-                id: ({ id }) => id,
-            },
-        },
-        {
-            variables: {
-                id: key,
-            },
-        }
-    )
-}
+const keyValuesQuery = ({
+    store
+}: {
+    store: string
+}) => ({
+    results: {
+        resource: `${store}`,
+        id: ({ key, namespace }: { key: string, namespace: string }) => `${namespace}/${key}`,
+    },
+})
 
 const Edit = () => {
     const { key, namespace, store } = useParams()
-    const { data, refetch } = useFetchKeyValueQuery({ store, namespace, key })
+
+    const {
+        data,
+        loading: queryLoading,
+        refetch,
+    } = useDataQuery(keyValuesQuery({ store }), {
+        variables: {
+            key,
+            namespace
+        },
+    })
 
     const [value, setValue] = useState(
-        JSON.stringify(data?.results?.['data'], null, 4) || ''
+        JSON.stringify(data?.results, null, 4) || ''
     )
-    const onChange = (value) => {
-        setValue(value)
-    }
 
     const saveChanges = () => {
         // todo: show alert
-        console.log('save edited key stuff')
+        console.log('show success alert')
     }
 
-    useEffect(() => {
-        refetch({ id: key })
-    }, [key, namespace, store])
+    const [updateKey, { loading }] = useDataMutation(
+        // @ts-expect-error("")
+        modifyKeyMutation({ store }),
+        {
+            onComplete: saveChanges,
+        }
+    )
 
+    const handleEditorChange = (value) => {
+        setValue(value)
+    }
+   
     useEffect(() => {
-        setValue(JSON.stringify(data?.results?.['data'], null, 4))
+        setValue(JSON.stringify(data?.results, null, 4))
     }, [data])
 
-    const mutationOptions = {
-        onComplete: saveChanges,
-    }
+    useEffect(() => {
+        refetch({ key, namespace })
+    }, [key, namespace, store, refetch])
 
-    const [mutate, { loading }] = useSaveChangesMutation({
-        store,
-        namespace,
-        mutationOptions,
-    })
+    const loadingText = i18n.t("Loading")
 
     return (
         <div
@@ -78,7 +74,10 @@ const Edit = () => {
                 border: '1px solid grey',
             }}
         >
-            <Editor value={value} handleChange={onChange} />
+            <Editor
+                value={queryLoading ? `${loadingText}...` : value}
+                handleChange={handleEditorChange}
+            />
             <div
                 style={{
                     position: 'absolute',
@@ -89,16 +88,17 @@ const Edit = () => {
                     aria-label="Save"
                     name="save"
                     onClick={async () => {
-                        await mutate({
-                            id: key,
-                            data: value,
+                        await updateKey({
+                            key,
+                            namespace,
+                            value,
                         })
                     }}
                     title="Save"
                     primary
                     loading={loading}
                 >
-                    Save changes
+                    {i18n.t('Save changes')}
                 </Button>
             </div>
         </div>
diff --git a/src/components/keys/keysTable.tsx b/src/components/keys/keysTable.tsx
index fbed2e9..18b479e 100644
--- a/src/components/keys/keysTable.tsx
+++ b/src/components/keys/keysTable.tsx
@@ -13,35 +13,35 @@ import classes from '../../App.module.css'
 import i18n from '../../locales'
 import DeleteModal from '../delete/DeleteModal'
 import CenteredLoader from '../Loader'
-import DeleteAction from './DeleteAction'
+import DeleteButton from '../delete/DeleteButton'
 
 interface QueryResults {
     results: []
 }
 
-const useNameSpaceQuery = ({ store, namespace }) => {
-    return useDataQuery<QueryResults>(
-        {
-            results: {
-                resource: `${store}`,
-                id: ({ id }) => id,
-            },
-        },
+const fetchNamespaceQuery = ({ store }) => ({
+    results: {
+        resource: `${store}`,
+        id: ({ id }) => id,
+    },
+})
+
+const KeysTable = () => {
+    const { store, namespace } = useParams()
+    const navigate = useNavigate()
+    const engine = useDataEngine()
+
+    const { data, loading, refetch } = useDataQuery(
+        fetchNamespaceQuery({ store }),
         {
             variables: {
                 id: namespace,
             },
         }
     )
-}
 
-const KeysTable = () => {
-    const { store, namespace } = useParams()
-    const navigate = useNavigate()
-    const engine = useDataEngine()
-    const { data, loading, refetch } = useNameSpaceQuery({ store, namespace })
     const [deleteNamespace, setDeleteNamespace] = useState(false)
-    const [deleteKey, setDeleteKey] = useState('')
+    const [selectedKey, setSelectedKey] = useState('')
     const [openModal, setOpenModal] = useState(false)
 
     useEffect(() => {
@@ -97,14 +97,14 @@ const KeysTable = () => {
                                                 {key}
                                             </DataTableCell>
                                             <DataTableCell bordered>
-                                                <DeleteAction
+                                                <DeleteButton
                                                     openModal={() => {
                                                         setOpenModal(true)
                                                         setDeleteNamespace(
                                                             data?.results
                                                                 ?.length < 2
                                                         )
-                                                        setDeleteKey(key)
+                                                        setSelectedKey(key)
                                                     }}
                                                 />
                                             </DataTableCell>
@@ -118,12 +118,12 @@ const KeysTable = () => {
             )}
             {openModal && (
                 <DeleteModal
-                    deleteFn={() => handleDeleteAction(deleteKey)}
+                    deleteFn={() => handleDeleteAction(selectedKey)}
                     closeModal={() => setOpenModal(false)}
                 >
                     <p>
                         {i18n.t(
-                            `Are you sure you want to delete '${deleteKey}' in ${namespace}?`
+                            `Are you sure you want to delete '${selectedKey}' in ${namespace}?`
                         )}
                     </p>
                     {deleteNamespace && (
diff --git a/src/components/sidebar/sidebar.tsx b/src/components/sidebar/sidebar.tsx
index 1600532..ffde4db 100644
--- a/src/components/sidebar/sidebar.tsx
+++ b/src/components/sidebar/sidebar.tsx
@@ -23,7 +23,6 @@ const Sidebar = () => {
                     handleChange={handleDataStoreSelect}
                 />
             </div>
-
             <Divider />
             {store && (
                 <>