diff --git a/client/default.config.js b/client/default.config.js
index 4a04c729..8442456b 100644
--- a/client/default.config.js
+++ b/client/default.config.js
@@ -33,7 +33,7 @@ module.exports = {
             APPROVED: 'Approved',
         },
         appTypeToDisplayName: {
-            APP: 'Standard',
+            APP: 'Application',
             DASHBOARD_WIDGET: 'Dashboard',
             TRACKER_DASHBOARD_WIDGET: 'Tracker Dashboard',
         },
diff --git a/client/src/components/PluginTag/PluginTag.js b/client/src/components/PluginTag/PluginTag.js
index d22d53af..f3b776fc 100644
--- a/client/src/components/PluginTag/PluginTag.js
+++ b/client/src/components/PluginTag/PluginTag.js
@@ -6,7 +6,7 @@ const PluginTag = ({ hasPlugin, pluginType }) => {
     }
     const tagString = pluginType ? `Plugin: ${pluginType}` : 'Plugin'
 
-    return <Tag neutral>{tagString}</Tag>
+    return <Tag>{tagString}</Tag>
 }
 
 export default PluginTag
diff --git a/client/src/components/Versions/ChangeLogViewer.js b/client/src/components/Versions/ChangeLogViewer.js
index 59e482fb..180c17fe 100644
--- a/client/src/components/Versions/ChangeLogViewer.js
+++ b/client/src/components/Versions/ChangeLogViewer.js
@@ -1,45 +1,29 @@
 import {
     CircularLoader,
-    DataTable,
-    DataTableCell,
-    DataTableColumnHeader,
-    DataTableHead,
-    DataTableRow,
-    Modal,
-    ModalContent,
-    ModalTitle,
+    Table,
+    TableCell,
+    TableRow,
     SingleSelectField,
     SingleSelectOption,
 } from '@dhis2/ui'
-import { useQuery } from 'src/api'
-
-import React from 'react'
-import Changelog from '../../utils/changelog'
 import classnames from 'classnames'
+import PropTypes from 'prop-types'
+import React, { useState } from 'react'
+import Changelog from '../../utils/changelog'
 import styles from './ChangeLogViewer.module.css'
+import { useQuery } from 'src/api'
 
-const ChangeLogViewer = ({
-    appId,
-    onCloseChangelog,
-    baseVersion,
-    setBaseVersion,
-    setCompareVersion,
-    compareVersion,
-}) => {
+const ChangeLogViewer = ({ appId, latestVersion }) => {
     const { data, loading } = useQuery(`apps/${appId}/changelog`)
 
-    if (!data || loading) {
-        return <CircularLoader large />
-    }
+    const changelog = new Changelog(data?.changelog)
 
-    if (!data.changelog) {
-        return null
-    }
+    const allVersions = changelog?.data?.map(({ version }) => version)
+    const changesCount = allVersions?.length
 
-    const changelog = new Changelog(data.changelog)
+    const [baseVersion, setBaseVersion] = useState(latestVersion)
 
-    const allVersions = changelog.data.map(({ version }) => version)
-    const changesCount = allVersions.length
+    const [compareVersion, setCompareVersion] = useState()
 
     const firstVersionToShow = changelog.data.findIndex(
         (change) => change.version === baseVersion
@@ -63,50 +47,47 @@ const ChangeLogViewer = ({
     )
 
     const availableVersionsToCompareWith = allVersions.slice(
-        firstVersionToShow + 1,
-        changelog.data?.length - firstVersionToShow
+        firstVersionToShow + 1
     )
 
-    const getType = (type) => {
+    const getFormattedChangeType = ({ type, isTranslation }) => {
+        if (isTranslation) {
+            return null
+        }
         if (type === 'Bug Fixes') {
-            return 'Fix'
+            return 'Fix: '
         }
         if (type == 'Features') {
-            return 'Feature'
+            return 'Feature: '
         }
-        return type
+        return type + ': '
+    }
+
+    if (!data || loading || !baseVersion) {
+        return <CircularLoader large />
+    }
+
+    if (!data.changelog) {
+        return (
+            <div className={styles.container}>
+                <div className={styles.disabledText}>
+                    No change log available for this app.
+                </div>
+            </div>
+        )
     }
+
     return (
-        <Modal onClose={onCloseChangelog}>
-            <ModalTitle>
-                <div className={styles.header}>
-                    <div>Changes in</div>
-                    <div className={styles.headerTitle}>
-                        <SingleSelectField
-                            onChange={({ selected }) =>
-                                setBaseVersion(selected)
-                            }
-                            selected={baseVersion}
-                            dense
-                        >
-                            {allVersions.map((version) => {
-                                return (
-                                    <SingleSelectOption
-                                        key={version}
-                                        label={version}
-                                        value={version}
-                                    />
-                                )
-                            })}
-                        </SingleSelectField>
-                    </div>
+        <div className={styles.container}>
+            <div className={styles.header}>
+                <div>Show changes included from: </div>
+                <div className={styles.headerTitle}>
                     <SingleSelectField
-                        prefix="compared to"
-                        onChange={({ selected }) => setCompareVersion(selected)}
-                        selected={versionToCompareWith}
+                        onChange={({ selected }) => setBaseVersion(selected)}
+                        selected={baseVersion}
                         dense
                     >
-                        {availableVersionsToCompareWith.map((version) => {
+                        {allVersions.map((version) => {
                             return (
                                 <SingleSelectOption
                                     key={version}
@@ -117,92 +98,96 @@ const ChangeLogViewer = ({
                         })}
                     </SingleSelectField>
                 </div>
-            </ModalTitle>
-            <ModalContent>
-                <div className={styles.cardContainer}>
-                    <div className={styles.changelogContainer}>
-                        <DataTable>
-                            <DataTableHead>
-                                <DataTableColumnHeader>
-                                    Version
-                                </DataTableColumnHeader>
-                                <DataTableColumnHeader>
-                                    Changes
-                                </DataTableColumnHeader>
-                            </DataTableHead>
-                            {changesToShow.map((entry) => {
-                                const { version } = entry
-
-                                return (
-                                    <DataTableRow
-                                        key={version}
-                                        className={classnames({
-                                            [styles.breaking]: entry.isBreaking,
-                                        })}
-                                    >
-                                        <DataTableCell
-                                            className={styles.versionHeader}
-                                        >
-                                            {version}
-                                        </DataTableCell>
-                                        <DataTableCell>
-                                            <ul className={styles.list}>
-                                                {entry.changeSummary.map(
-                                                    (change, i) => {
-                                                        if (
-                                                            change.isTranslation
-                                                        ) {
-                                                            return (
-                                                                <li
-                                                                    key={i} // ToDo: find a better key
+                <div>to</div>
+                <SingleSelectField
+                    onChange={({ selected }) => setCompareVersion(selected)}
+                    selected={versionToCompareWith}
+                    dense
+                >
+                    {availableVersionsToCompareWith.map((version) => {
+                        return (
+                            <SingleSelectOption
+                                key={version}
+                                label={version}
+                                value={version}
+                            />
+                        )
+                    })}
+                </SingleSelectField>
+            </div>
+            <div className={styles.changelogContainer}>
+                <Table suppressZebraStriping>
+                    {changesToShow.map((entry) => {
+                        const { version } = entry
+
+                        return (
+                            <TableRow
+                                key={version}
+                                className={classnames({
+                                    [styles.breaking]: entry.isBreaking,
+                                })}
+                            >
+                                <TableCell className={styles.versionHeader}>
+                                    Version {version}
+                                </TableCell>
+                                <TableCell>
+                                    <ul className={styles.list}>
+                                        {entry.changeSummary.map(
+                                            (change, i) => {
+                                                return (
+                                                    // todo: find a better key than i
+                                                    <li key={i}>
+                                                        <strong>
+                                                            {getFormattedChangeType(
+                                                                change
+                                                            )}
+                                                        </strong>
+                                                        {change.isTranslation ? (
+                                                            <span
+                                                                className={
+                                                                    styles.translation
+                                                                }
+                                                            >
+                                                                Translations
+                                                                sync
+                                                            </span>
+                                                        ) : (
+                                                            change.text
+                                                        )}
+                                                        {change.link ? (
+                                                            <>
+                                                                {' | '}
+                                                                <a
                                                                     className={
-                                                                        styles.translation
+                                                                        styles.changeLink
+                                                                    }
+                                                                    rel="noreferrer"
+                                                                    target="_blank"
+                                                                    href={
+                                                                        change.link
                                                                     }
                                                                 >
-                                                                    Translations
-                                                                    update
-                                                                </li>
-                                                            )
-                                                        }
-                                                        return (
-                                                            <li key={i}>
-                                                                <strong>
-                                                                    {getType(
-                                                                        change.type
-                                                                    )}
-                                                                </strong>
-                                                                : {change.text}
-                                                                {change.link ? (
-                                                                    <>
-                                                                        {' | '}
-                                                                        <a
-                                                                            className={
-                                                                                styles.changeLink
-                                                                            }
-                                                                            target="_blank"
-                                                                            href={
-                                                                                change.link
-                                                                            }
-                                                                        >
-                                                                            link
-                                                                        </a>
-                                                                    </>
-                                                                ) : null}
-                                                            </li>
-                                                        )
-                                                    }
-                                                )}
-                                            </ul>
-                                        </DataTableCell>
-                                    </DataTableRow>
-                                )
-                            })}
-                        </DataTable>
-                    </div>
-                </div>
-            </ModalContent>
-        </Modal>
+                                                                    link
+                                                                </a>
+                                                            </>
+                                                        ) : null}
+                                                    </li>
+                                                )
+                                            }
+                                        )}
+                                    </ul>
+                                </TableCell>
+                            </TableRow>
+                        )
+                    })}
+                </Table>
+            </div>
+        </div>
     )
 }
 
+ChangeLogViewer.propTypes = {
+    appId: PropTypes.string,
+    latestVersion: PropTypes.string,
+}
 export default ChangeLogViewer
diff --git a/client/src/components/Versions/ChangeLogViewer.module.css b/client/src/components/Versions/ChangeLogViewer.module.css
index 31e9ceb9..636e6edb 100644
--- a/client/src/components/Versions/ChangeLogViewer.module.css
+++ b/client/src/components/Versions/ChangeLogViewer.module.css
@@ -1,6 +1,13 @@
-.cardContainer {
-    margin: var(--spacers-dp8);
-    padding: var(--spacers-dp8);
+@value m-medium from 'src/styles/breakpoints.css';
+
+.container {
+    padding: var(--spacers-dp12);
+}
+
+@media m-medium {
+    .container {
+        padding: var(--spacers-dp24);
+    }
 }
 
 .header {
@@ -37,6 +44,7 @@
 
 .versionHeader {
     font-size: 1.1em;
+    font-weight: bold;
 }
 
 .translation {
@@ -45,10 +53,19 @@
 
 a.changeLink {
     color: var(--colors-blue600);
+    text-decoration: underline;
 }
 
 a.changeLink:hover,
 a.changeLink:focus {
     color: var(--colors-blue700);
-    text-decoration: underline;
+    text-decoration: none;
+}
+
+.disabledText {
+    color: var(--colors-grey700);
 }
+
+.changelogContainer :global(table) {
+    border: 0 !important
+}
\ No newline at end of file
diff --git a/client/src/components/Versions/Filters/Filters.js b/client/src/components/Versions/Filters/Filters.js
index 6d380d5d..ae6a9096 100644
--- a/client/src/components/Versions/Filters/Filters.js
+++ b/client/src/components/Versions/Filters/Filters.js
@@ -37,17 +37,26 @@ const Filters = ({
                 </div>
             )}
             <div className={styles.filtersWrapper}>
-                <div className={styles.dhisVersionSelect}>
+                <div className={styles.dhisVersionsSelect}>
                     <SingleSelectField
                         dense
                         placeholder="Select a version"
-                        label="Compatible with DHIS2 version"
+                        prefix="DHIS2 compatibility"
                         clearable
                         selected={dhisVersionFilter}
-                        onChange={({ selected }) =>
-                            setDhisVersionFilter(selected)
-                        }
+                        onChange={({ selected }) => {
+                            if (!selected) {
+                                setDhisVersionFilter('-1')
+                            } else {
+                                setDhisVersionFilter(selected)
+                            }
+                        }}
                     >
+                        <SingleSelectOption
+                            key={-1}
+                            label="All versions"
+                            value="-1"
+                        />
                         {dhisVersions.map((dhisVersion) => (
                             <SingleSelectOption
                                 key={dhisVersion}
diff --git a/client/src/components/Versions/Filters/Filters.module.css b/client/src/components/Versions/Filters/Filters.module.css
index 08fb5dd4..5bc70e72 100644
--- a/client/src/components/Versions/Filters/Filters.module.css
+++ b/client/src/components/Versions/Filters/Filters.module.css
@@ -13,7 +13,7 @@
 }
 
 .versionsFilters {
-    padding: var(--spacers-dp16) var(--spacers-dp8);
+    padding-bottom: var(--spacers-dp16);
 }
 
 .channelsFilter {
diff --git a/client/src/components/Versions/Versions.js b/client/src/components/Versions/Versions.js
index e87a30a8..c179bf18 100644
--- a/client/src/components/Versions/Versions.js
+++ b/client/src/components/Versions/Versions.js
@@ -7,7 +7,6 @@ import styles from './Versions.module.css'
 import VersionsTable from './VersionsTable/VersionsTable'
 import config from 'config'
 import { usePagination, useQuery } from 'src/api'
-import ChangeLogViewer from './ChangeLogViewer'
 
 const { defaultAppChannel } = config.ui
 
@@ -39,25 +38,22 @@ const useChannels = (appId) => {
     return { availableChannels, channelsFilter, setChannelsFilter }
 }
 
-const Versions = ({
-    appId,
-    renderDeleteVersionButton,
-    showDownloadCount,
-    hasChangelog,
-}) => {
+const Versions = ({ appId, renderDeleteVersionButton, showDownloadCount }) => {
     const { availableChannels, channelsFilter, setChannelsFilter } =
         useChannels(appId)
 
-    const [dhisVersionFilter, setDhisVersionFilter] = useState('')
+    const [dhisVersionFilter, setDhisVersionFilter] = useState('-1')
     const params = useMemo(
         () => ({
             pageSize: 5,
-            minDhisVersion: dhisVersionFilter
-                ? `lte:${dhisVersionFilter}`
-                : undefined,
-            maxDhisVersion: dhisVersionFilter
-                ? `gte:${dhisVersionFilter}`
-                : undefined,
+            minDhisVersion:
+                dhisVersionFilter != '-1'
+                    ? `lte:${dhisVersionFilter}`
+                    : undefined,
+            maxDhisVersion:
+                dhisVersionFilter != '-1'
+                    ? `gte:${dhisVersionFilter}`
+                    : undefined,
             channel: Array.from(channelsFilter).join(),
         }),
         [dhisVersionFilter, Array.from(channelsFilter).join()]
@@ -79,23 +75,6 @@ const Versions = ({
 
     const versions = data ?? []
 
-    const [changelogVisible, setChangelogVisible] = useState(false)
-    const showChangeLog = () => {
-        setChangelogVisible(!changelogVisible)
-    }
-
-    const onCloseChangelog = () => {
-        setChangelogVisible(false)
-    }
-
-    const [compareVersion, setCompareVersion] = useState()
-    const [baseVersion, setBaseVersion] = useState(versions?.[0]?.version)
-
-    const changeBaseVersion = (version) => {
-        setBaseVersion(version)
-        setCompareVersion()
-    }
-
     if (error) {
         return (
             <NoticeBox title={'Error loading versions'} error>
@@ -113,15 +92,13 @@ const Versions = ({
     }
 
     return (
-        <div className={styles.versionsContainer}>
+        <div>
             <Filters
                 availableChannels={availableChannels}
                 channelsFilter={channelsFilter}
                 setChannelsFilter={setChannelsFilter}
                 dhisVersionFilter={dhisVersionFilter}
                 setDhisVersionFilter={setDhisVersionFilter}
-                showChangeLog={showChangeLog}
-                hasChangelog={hasChangelog}
             />
             {versions.length > 0 ? (
                 <VersionsTable
@@ -147,16 +124,6 @@ const Versions = ({
                     </Button>
                 </div>
             )}
-            {changelogVisible && (
-                <ChangeLogViewer
-                    appId={appId}
-                    onCloseChangelog={onCloseChangelog}
-                    baseVersion={baseVersion ?? versions?.[0]?.version}
-                    setCompareVersion={setCompareVersion}
-                    setBaseVersion={changeBaseVersion}
-                    compareVersion={compareVersion}
-                />
-            )}
         </div>
     )
 }
@@ -164,7 +131,6 @@ const Versions = ({
 Versions.propTypes = {
     appId: PropTypes.string.isRequired,
     renderDeleteVersionButton: PropTypes.func,
-    hasChangelog: PropTypes.bool,
 }
 
 export default Versions
diff --git a/client/src/components/Versions/Versions.module.css b/client/src/components/Versions/Versions.module.css
index 2bcb0934..4413193f 100644
--- a/client/src/components/Versions/Versions.module.css
+++ b/client/src/components/Versions/Versions.module.css
@@ -1,7 +1,3 @@
-.versionsContainer {
-    border: 1px solid var(--colors-grey300);
-}
-
 .noVersions {
     display: inline-block;
     padding: var(--spacers-dp8);
diff --git a/client/src/components/Versions/VersionsTable/VersionsTable.js b/client/src/components/Versions/VersionsTable/VersionsTable.js
index 6842ff3f..401c3ea4 100644
--- a/client/src/components/Versions/VersionsTable/VersionsTable.js
+++ b/client/src/components/Versions/VersionsTable/VersionsTable.js
@@ -48,9 +48,9 @@ const VersionsTable = ({
             <TableHead>
                 <TableRowHead>
                     <TableCellHead>Version</TableCellHead>
-                    <TableCellHead>Channel</TableCellHead>
-                    <TableCellHead>DHIS2 version compatibility</TableCellHead>
-                    <TableCellHead>Upload date</TableCellHead>
+                    <TableCellHead>Date released</TableCellHead>
+                    <TableCellHead>DHIS2 compatibility</TableCellHead>
+                    <TableCellHead>Release channel</TableCellHead>
                     {showDownloadCount && (
                         <TableCellHead>Downloads</TableCellHead>
                     )}
@@ -61,8 +61,12 @@ const VersionsTable = ({
                 {versions.map((version) => (
                     <TableRow key={version.id}>
                         <TableCell>{version.version}</TableCell>
-                        <TableCell className={styles.channelNameCell}>
-                            {appChannelToDisplayName[version.channel]}
+                        <TableCell>
+                            <span title={new Date(version.createdAt)}>
+                                {new Date(
+                                    version.createdAt
+                                ).toLocaleDateString()}
+                            </span>
                         </TableCell>
                         <TableCell>
                             {renderDhisVersionsCompatibility(
@@ -70,13 +74,10 @@ const VersionsTable = ({
                                 version.maxDhisVersion
                             )}
                         </TableCell>
-                        <TableCell>
-                            <span title={new Date(version.createdAt)}>
-                                {new Date(
-                                    version.createdAt
-                                ).toLocaleDateString()}
-                            </span>
+                        <TableCell className={styles.channelNameCell}>
+                            {appChannelToDisplayName[version.channel]}
                         </TableCell>
+
                         {showDownloadCount && (
                             <TableCell>
                                 <span>{version.downloadCount}</span>
@@ -84,13 +85,12 @@ const VersionsTable = ({
                         )}
                         <TableCell>
                             <a
+                                className={styles.link}
                                 download
                                 href={getDownloadUrl(version.downloadUrl)}
                                 tabIndex="-1"
                             >
-                                <Button small secondary>
-                                    Download
-                                </Button>
+                                Download
                             </a>
                             {renderDeleteVersionButton &&
                                 renderDeleteVersionButton(version)}
diff --git a/client/src/components/Versions/VersionsTable/VersionsTable.module.css b/client/src/components/Versions/VersionsTable/VersionsTable.module.css
index 30bb7259..39b8608e 100644
--- a/client/src/components/Versions/VersionsTable/VersionsTable.module.css
+++ b/client/src/components/Versions/VersionsTable/VersionsTable.module.css
@@ -12,3 +12,16 @@
 .channelNameCell {
     color: var(--colors-grey700);
 }
+
+
+a.link {
+    color: var(--colors-blue600);
+    text-decoration: underline;
+}
+
+a.link:hover,
+a.link:focus {
+    color: var(--colors-blue700);
+    text-decoration: none;
+}
+
diff --git a/client/src/pages/AppView/AppView.js b/client/src/pages/AppView/AppView.js
index eceb3cd2..923ff05a 100644
--- a/client/src/pages/AppView/AppView.js
+++ b/client/src/pages/AppView/AppView.js
@@ -3,12 +3,18 @@ import {
     CircularLoader,
     NoticeBox,
     Card,
-    Tag,
     Divider,
     Button,
+    TabBar,
+    Tab,
+    IconUser16,
+    IconTerminalWindow16,
 } from '@dhis2/ui'
 import classnames from 'classnames'
 import PropTypes from 'prop-types'
+import { useHistory } from 'react-router-dom'
+import PluginTag from '../../components/PluginTag/PluginTag'
+import ChangeLogViewer from '../../components/Versions/ChangeLogViewer'
 import styles from './AppView.module.css'
 import config from 'config'
 import { useQueryV1 } from 'src/api'
@@ -17,7 +23,6 @@ import AppIcon from 'src/components/AppIcon/AppIcon'
 import Screenshots from 'src/components/Screenshots/Screenshots'
 import Versions from 'src/components/Versions/Versions'
 import { renderDhisVersionsCompatibility } from 'src/lib/render-dhis-versions-compatibility'
-import PluginTag from '../../components/PluginTag/PluginTag'
 
 const HeaderSection = ({
     appName,
@@ -27,43 +32,93 @@ const HeaderSection = ({
     hasPlugin,
     pluginType,
     organisationSlug,
-}) => (
-    <section
-        className={classnames(styles.appCardSection, styles.appCardHeader)}
-    >
-        <AppIcon src={logoSrc} />
-        <div>
-            <h2 className={styles.appCardName}>{appName}</h2>
-            <span className={styles.appCardDeveloper}>
-                by{' '}
-                <a
-                    className={styles.link}
-                    href={`/organisation/${organisationSlug}/view`}
-                >
-                    {appDeveloper}
-                </a>
-            </span>
-            <div className={styles.appCardTypeContainer}>
-                <span className={styles.appCardType}>{appType}</span>
-                {hasPlugin && (
-                    <PluginTag hasPlugin={hasPlugin} pluginType={pluginType} />
+    latestVersion,
+    sourceUrl,
+}) => {
+    const history = useHistory()
+    return (
+        <section
+            className={classnames(styles.appCardSection, styles.appCardHeader)}
+        >
+            <AppIcon src={logoSrc} />
+            <div>
+                <h2 className={styles.appCardName}>{appName}</h2>
+                <div className={styles.appTags}>
+                    <div className={styles.tagWithIcon}>
+                        <IconUser16 />
+                        <a
+                            className={styles.organisationLink}
+                            href={`/organisation/${organisationSlug}/view`}
+                        >
+                            {appDeveloper}
+                        </a>
+                    </div>
+                    <div className={styles.tagWithIcon}>
+                        <IconTerminalWindow16 />
+                        {appType}
+                    </div>
+                    {hasPlugin && (
+                        <PluginTag
+                            hasPlugin={hasPlugin}
+                            pluginType={pluginType}
+                        />
+                    )}
+                </div>
+            </div>
+            <div>
+                <div className={styles.topActionButtons}>
+                    <a download href={latestVersion.downloadUrl} tabIndex="-1">
+                        <Button primary>Download latest version</Button>
+                    </a>
+                    <Button
+                        onClick={() => history.push('?tab=previous-releases')}
+                    >
+                        See previous releases
+                    </Button>
+                </div>
+                <div className={styles.latestVersionDescription}>
+                    <span>
+                        {
+                            config.ui.appChannelToDisplayName[
+                                latestVersion.channel
+                            ]
+                        }{' '}
+                        release v{latestVersion.version}.
+                    </span>
+                    <span>
+                        Compatible with DHIS2{' '}
+                        {renderDhisVersionsCompatibility(
+                            latestVersion.minDhisVersion,
+                            latestVersion.maxDhisVersion
+                        )}
+                        .
+                    </span>
+                </div>
+                {sourceUrl && (
+                    <>
+                        <a href={sourceUrl} className={styles.sourceUrl}>
+                            Source code
+                        </a>
+                    </>
                 )}
             </div>
-        </div>
-    </section>
-)
+        </section>
+    )
+}
 
 HeaderSection.propTypes = {
     appDeveloper: PropTypes.string.isRequired,
     appName: PropTypes.string.isRequired,
     appType: PropTypes.string.isRequired,
-    pluginType: PropTypes.string,
+    organisationSlug: PropTypes.string.isRequired,
     hasPlugin: PropTypes.bool,
+    latestVersion: PropTypes.object,
     logoSrc: PropTypes.string,
-    organisationSlug: PropTypes.string.isRequired,
+    pluginType: PropTypes.string,
+    sourceUrl: PropTypes.string,
 }
 
-const AboutSection = ({ appDescription, latestVersion, sourceUrl }) => (
+const AboutSection = ({ appDescription }) => (
     <section className={classnames(styles.appCardSection, styles.aboutSection)}>
         <div>
             <h2 className={styles.appCardHeading}>About this app</h2>
@@ -78,40 +133,22 @@ const AboutSection = ({ appDescription, latestVersion, sourceUrl }) => (
                 </em>
             )}
         </div>
-        <div>
-            <a download href={latestVersion.downloadUrl} tabIndex="-1">
-                <Button primary>Download latest version</Button>
-            </a>
-            <div className={styles.latestVersionDescription}>
-                <span>
-                    {config.ui.appChannelToDisplayName[latestVersion.channel]}{' '}
-                    release v{latestVersion.version}.
-                </span>
-                <span>
-                    Compatible with DHIS2{' '}
-                    {renderDhisVersionsCompatibility(
-                        latestVersion.minDhisVersion,
-                        latestVersion.maxDhisVersion
-                    )}
-                    .
-                </span>
-            </div>
-            {sourceUrl && (
-                <>
-                    <Divider margin="12px 0" className={styles.divider} />
-                    <a href={sourceUrl} className={styles.sourceUrl}>
-                        Source code
-                    </a>
-                </>
-            )}
-        </div>
     </section>
 )
 
+AboutSection.propTypes = {
+    appDescription: PropTypes.string,
+}
+
 const AppView = ({ match }) => {
     const { appId } = match.params
     const { data: app, error } = useQueryV1(`apps/${appId}`)
 
+    const history = useHistory()
+
+    const selectedTab =
+        new URLSearchParams(window.location.search).get('tab') ?? 'about'
+
     if (error) {
         return (
             <CenteredContent>
@@ -136,6 +173,10 @@ const AppView = ({ match }) => {
     const versions = app.versions.sort((a, b) => b.created - a.created)
     const latestVersion = versions[0]
 
+    const selectTab = (tabName) => () => {
+        history.push('?tab=' + tabName)
+    }
+
     return (
         <Card className={styles.appCard}>
             <HeaderSection
@@ -146,33 +187,73 @@ const AppView = ({ match }) => {
                 logoSrc={logoSrc}
                 hasPlugin={app.hasPlugin}
                 pluginType={app.pluginType}
-            />
-            <Divider />
-            <AboutSection
-                appDescription={app.description}
                 latestVersion={latestVersion}
                 sourceUrl={app.sourceUrl}
             />
-            <Divider />
-            {screenshots.length > 0 && (
+            <TabBar>
+                <Tab
+                    onClick={selectTab('about')}
+                    selected={selectedTab == 'about'}
+                >
+                    About
+                </Tab>
+                <Tab
+                    onClick={selectTab('previous-releases')}
+                    selected={selectedTab == 'previous-releases'}
+                >
+                    Previous releases
+                </Tab>
+                <Tab
+                    onClick={selectTab('changelog')}
+                    selected={selectedTab == 'changelog'}
+                >
+                    Change log
+                </Tab>
+                {/* <Tab
+                    onClick={selectTab('moreapps')}
+                    selected={selectedTab == 'moreapps'}
+                >
+                    More apps by {appDeveloper}
+                </Tab> */}
+            </TabBar>
+            {selectedTab === 'about' && (
                 <>
-                    <section className={styles.appCardSection}>
-                        <h2 className={styles.appCardHeading}>Screenshots</h2>
-                        <Screenshots screenshots={screenshots} />
-                    </section>
-                    <Divider />
+                    {screenshots.length > 0 && (
+                        <>
+                            <section className={styles.appCardSection}>
+                                <h2 className={styles.appCardHeading}>
+                                    Screenshots
+                                </h2>
+                                <Screenshots screenshots={screenshots} />
+                            </section>
+                        </>
+                    )}
+                    <AboutSection
+                        appDescription={app.description}
+                        latestVersion={latestVersion}
+                        sourceUrl={app.sourceUrl}
+                    />
                 </>
             )}
-            <section className={styles.appCardSection}>
-                <h2 className={styles.appCardHeading}>
-                    All versions of this application
-                </h2>
-                <Versions
-                    versions={versions}
-                    appId={appId}
-                    hasChangelog={app.hasChangelog}
-                />
-            </section>
+
+            {selectedTab === 'previous-releases' && (
+                <section className={styles.appCardSection}>
+                    <Versions
+                        versions={versions}
+                        appId={appId}
+                        hasChangelog={app.hasChangelog}
+                    />
+                </section>
+            )}
+
+            {selectedTab === 'changelog' && (
+                <div>
+                    <ChangeLogViewer
+                        latestVersion={latestVersion.version}
+                        appId={appId}
+                    />
+                </div>
+            )}
         </Card>
     )
 }
diff --git a/client/src/pages/AppView/AppView.module.css b/client/src/pages/AppView/AppView.module.css
index 1108b54f..d10b97f2 100644
--- a/client/src/pages/AppView/AppView.module.css
+++ b/client/src/pages/AppView/AppView.module.css
@@ -18,7 +18,7 @@
 
 .appCardHeader {
     display: grid;
-    grid-template-columns: 72px auto 67px;
+    grid-template-columns: 72px auto 267px;
     grid-gap: var(--spacers-dp12);
 }
 
@@ -29,25 +29,36 @@
     margin-bottom: 6px;
 }
 
-.appCardDeveloper {
-    display: block;
+.appTags {
+    flex-direction: row;
+    display: flex;
+    align-items: center;
+    gap: var(--spacers-dp16)
+}
+
+.tagWithIcon {
+    display: flex;
+    gap: var(--spacers-dp4);
     font-size: 16px;
-    margin-bottom: var(--spacers-dp8);
     color: var(--colors-grey800);
 }
 
+.topActionButtons {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacers-dp4);
+}
+
+.topActionButtons :global(button) {
+    width: 100%;
+}
+
 .appCardType {
     font-size: 13px;
     color: var(--colors-grey700);
     margin-right: 5px;
 }
 
-.appCardTypeContainer {
-    flex-direction: 'row';
-    display: 'flex';
-    align-items: 'center';
-}
-
 .appCardHeading {
     font-weight: 500;
     font-size: 16px;
@@ -77,7 +88,7 @@
 
 .latestVersionDescription {
     margin-top: var(--spacers-dp8);
-    margin-bottom: 0;
+    margin-bottom: var(--spacers-dp8);
 }
 
 .latestVersionDescription span {
@@ -109,3 +120,11 @@
 .sourceUrl:focus {
     color: var(--colors-grey900);
 }
+
+.organisationLink {
+    color: var(--colors-grey800);
+}
+
+.organisationLink:hover {
+    text-decoration: underline;
+}
\ No newline at end of file