diff --git a/app/components/Navbar/index.tsx b/app/components/Navbar/index.tsx
index 3b8f12a..eaa0d93 100644
--- a/app/components/Navbar/index.tsx
+++ b/app/components/Navbar/index.tsx
@@ -1,43 +1,100 @@
 import {
+    use,
+    useCallback,
+} from 'react';
+import {
+    Button,
+    DropdownMenu,
     Heading,
     Image,
+    InlineLayout,
     ListView,
-    PageContainer,
 } from '@ifrc-go/ui';
+import { gql } from 'urql';
 
 import Link from '#components/Link';
+import UserContext from '#contexts/UserContext';
+import { useLogoutMutation } from '#generated/types/graphql';
+import useAlert from '#hooks/useAlert';
+import useRouting from '#hooks/useRouting';
 import Logo from '#resources/image/logo.png';
 
 import styles from './styles.module.css';
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const LOGOUT = gql`
+    mutation Logout {
+        logout
+    }
+`;
+
 function Navbar() {
+    const { user, setUser } = use(UserContext);
+    const alert = useAlert();
+    const navigate = useRouting();
+
+    const [{ fetching: pendingLogout }, triggerLogout] = useLogoutMutation();
+
+    const handleLogout = useCallback(async () => {
+        const res = await triggerLogout({});
+        const logoutResponse = res.data?.logout;
+        if (logoutResponse) {
+            setUser(undefined);
+            navigate('login');
+            alert.show('Logout Successful', { variant: 'success' });
+        }
+    }, [navigate, triggerLogout, setUser, alert]);
+
     return (
         <nav className={styles.navbar}>
-            <PageContainer
-                className={styles.top}
-                contentClassName={styles.topContent}
-            >
-                <ListView
-                    withSpaceBetweenContents
-                >
-                    <Link
-                        to="home"
+            <InlineLayout
+                withPadding
+                withAdditionalInlinePadding
+                spacingOffset={1}
+                before={(
+                    <ListView
+                        withSpaceBetweenContents
                     >
-                        <ListView spacing="sm">
-                            <Image
-                                src={Logo}
-                                className={styles.icon}
-                                withoutBackground
-                            />
-                            <Heading
-                                level={4}
-                            >
-                                ERCS EOC
+                        <Link
+                            to="home"
+                        >
+                            <ListView spacing="sm">
+                                <Image
+                                    src={Logo}
+                                    className={styles.icon}
+                                    withoutBackground
+                                />
+                                <Heading
+                                    level={4}
+                                >
+                                    ERCS EOC
+                                </Heading>
+                            </ListView>
+                        </Link>
+                    </ListView>
+                )}
+                after={(
+                    <DropdownMenu
+                        labelStyleVariant="action"
+                        labelColorVariant="secondary"
+                        label={(
+                            <Heading level={6}>
+                                {user?.fullName}
                             </Heading>
-                        </ListView>
-                    </Link>
-                </ListView>
-            </PageContainer>
+                        )}
+                    >
+                        <Button
+                            name="logout"
+                            styleVariant="transparent"
+                            onClick={handleLogout}
+                            disabled={pendingLogout}
+                            withFullWidth
+                        >
+                            {pendingLogout ? 'Logging out' : 'Logout'}
+                        </Button>
+                    </DropdownMenu>
+                )}
+            />
         </nav>
     );
 }
diff --git a/app/components/Navbar/styles.module.css b/app/components/Navbar/styles.module.css
index 415ee55..de23e20 100644
--- a/app/components/Navbar/styles.module.css
+++ b/app/components/Navbar/styles.module.css
@@ -2,21 +2,8 @@
     border-bottom: var(--go-ui-width-separator-thin) solid var(--go-ui-color-separator);
     background-color: var(--go-ui-color-white);
 
-    .top {
-        border-bottom: var(--go-ui-width-separator-md) solid var(--go-ui-color-primary-red);
-
-        .top-content {
-            padding: var(--go-ui-spacing-sm) var(--go-ui-spacing-lg);
-
-            .icon {
-                  width: var(--go-ui-height-brand-icon);
-                  height: var(--go-ui-height-brand-icon);
-            }
-        }
-    }
-
-    .bottom {
-        padding: var(--go-ui-spacing-sm) var(--go-ui-spacing-lg);
+    .icon {
+        width: var(--go-ui-height-brand-icon);
+        height: var(--go-ui-height-brand-icon);
     }
 }
-