diff --git a/package-lock.json b/package-lock.json
index d7255fb..93659d1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -29,13 +29,17 @@
         "lucide-react": "^0.303.0",
         "next": "14.0.4",
         "next-themes": "^0.2.1",
+        "oxide.ts": "^1.1.0",
         "postcss": "8.4.31",
         "react": "18.2.0",
         "react-dom": "18.2.0",
+        "secure-string": "^1.2.1",
+        "swr": "^2.2.4",
         "tailwind-merge": "^2.2.0",
         "tailwindcss": "3.3.3",
         "tailwindcss-animate": "^1.0.7",
         "typescript": "5.2.2",
+        "zod": "^3.22.4",
         "zustand": "^4.4.7"
       },
       "devDependencies": {
@@ -8376,6 +8380,11 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/oxide.ts": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/oxide.ts/-/oxide.ts-1.1.0.tgz",
+      "integrity": "sha512-+MkqFRQVHEe/x4/cJ6KuYz2m2VpnoBi7aKLbttGYTxmpNZalQ2RbKH2HxyfsTqXJhjh9DYxulPWfQV/hWMmzCg=="
+    },
     "node_modules/p-limit": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
@@ -9318,6 +9327,11 @@
         "loose-envify": "^1.1.0"
       }
     },
+    "node_modules/secure-string": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/secure-string/-/secure-string-1.2.1.tgz",
+      "integrity": "sha512-hLvUbrSDGtM4TwB+xCA2ODc5m+PYiSRreXmosq8Dav33pk4qJ4M2KeDctj7Roj+PcIcP1V1Gwxu5AVtlPCO2PQ=="
+    },
     "node_modules/semver": {
       "version": "7.5.4",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
@@ -9713,6 +9727,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/swr": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/swr/-/swr-2.2.4.tgz",
+      "integrity": "sha512-njiZ/4RiIhoOlAaLYDqwz5qH/KZXVilRLvomrx83HjzCWTfa+InyfAjv05PSFxnmLzZkNO9ZfvgoqzAaEI4sGQ==",
+      "dependencies": {
+        "client-only": "^0.0.1",
+        "use-sync-external-store": "^1.2.0"
+      },
+      "peerDependencies": {
+        "react": "^16.11.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -10639,6 +10665,14 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/zod": {
+      "version": "3.22.4",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.22.4.tgz",
+      "integrity": "sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    },
     "node_modules/zustand": {
       "version": "4.4.7",
       "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.4.7.tgz",
diff --git a/package.json b/package.json
index 4e21e1e..5661ca0 100644
--- a/package.json
+++ b/package.json
@@ -39,13 +39,17 @@
     "lucide-react": "^0.303.0",
     "next": "14.0.4",
     "next-themes": "^0.2.1",
+    "oxide.ts": "^1.1.0",
     "postcss": "8.4.31",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "secure-string": "^1.2.1",
+    "swr": "^2.2.4",
     "tailwind-merge": "^2.2.0",
     "tailwindcss": "3.3.3",
     "tailwindcss-animate": "^1.0.7",
     "typescript": "5.2.2",
+    "zod": "^3.22.4",
     "zustand": "^4.4.7"
   },
   "devDependencies": {
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 33b2db5..26bd3fd 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -4,6 +4,7 @@ import React, { ReactNode } from 'react';
 import Sidebar from '@/sections/dashboard/components/sidebar/sidebar';
 import Header from '@/sections/dashboard/components/header/header';
 import { ThemeProvider } from '@/sections/dashboard/components/header/theme-provider';
+import { ProfileProvider } from '@/sections/dashboard/context/profile-context';
 
 export const metadata: Metadata = {
   title: 'Create Next App',
@@ -24,11 +25,13 @@ export default function RootLayout({ children }: Readonly<RootLayoutProps>) {
           enableSystem
           disableTransitionOnChange
         >
-          <Header />
-          <div className='flex min-h-screen bg-background'>
-            <Sidebar />
-            <main className='flex-1'>{children}</main>
-          </div>
+          <ProfileProvider>
+            <Header />
+            <div className='flex min-h-screen bg-background'>
+              <Sidebar />
+              <main className='flex-1'>{children}</main>
+            </div>
+          </ProfileProvider>
         </ThemeProvider>
       </body>
     </html>
diff --git a/src/sections/dashboard/components/header/profile-nav.tsx b/src/sections/dashboard/components/header/profile-nav.tsx
index 24d71d1..b10732f 100644
--- a/src/sections/dashboard/components/header/profile-nav.tsx
+++ b/src/sections/dashboard/components/header/profile-nav.tsx
@@ -9,30 +9,33 @@ import {
 } from '@/components/ui/dropdown-menu';
 import { Button } from '@/components/ui/button';
 import { Avatar, AvatarFallback } from '@/components/ui/avatar';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { ChevronDown, ChevronUp } from 'lucide-react';
+import { useProfileContext } from '@/sections/dashboard/context/profile-context';
+import { z } from 'zod';
 
 // TODO:
-//  - Load available profiles
 //  - Truncate profile names longer than 4 characters
-//  - Switch profile on click in dropdown
-//  - Pick default profile as default
+//  - Handle errors
 
 interface ProfileNavItemProps {
   profileName: string;
   accessKeyId: string;
   region: string;
+  onClick: () => void;
 }
 
 export const ProfileNavItem: React.FC<ProfileNavItemProps> = ({
   profileName,
   accessKeyId,
   region,
+  onClick,
 }) => (
   <DropdownMenuItem>
     <Button
       variant='ghost'
       className='relative w-full items-center justify-start gap-2 p-2'
+      onClick={onClick}
     >
       <Avatar className='h-9 w-9'>
         <AvatarFallback>{profileName}</AvatarFallback>
@@ -47,48 +50,112 @@ export const ProfileNavItem: React.FC<ProfileNavItemProps> = ({
   </DropdownMenuItem>
 );
 
+type Settings = {
+  credentials: {
+    access_key_id: string;
+    secret_access_key: string;
+  };
+  config: {
+    region: string;
+    output_format: string;
+  };
+};
+
+type ProfileSet = {
+  profiles: Record<string, Settings>;
+  errors: Record<string, string[]>;
+};
+
+const profileSetSchema = z.object({
+  profiles: z.record(
+    z.object({
+      credentials: z.object({
+        access_key_id: z.string(),
+        secret_access_key: z.string(),
+      }),
+      config: z.object({
+        region: z.string(),
+        output_format: z.string(),
+      }),
+    })
+  ),
+  errors: z.record(z.string().array()),
+});
+
 export function ProfileNav() {
-  const [open, setOpen] = React.useState(false);
+  const [open, setOpen] = useState(false);
+  const { data, error, isLoading } = useProfileContext();
+  const [currentProfile, setCurrentProfile] = useState<string>();
+  const [profileSet, setProfileSet] = useState<ProfileSet>();
+
+  useEffect(() => {
+    console.info('0', data, error, isLoading);
+    if (!isLoading) {
+      const parsed: ProfileSet = profileSetSchema.parse(data);
+      setProfileSet(parsed);
+
+      const initialProfile = Object.keys(parsed.profiles)[0];
+      setCurrentProfile(initialProfile);
+    }
+  }, [data, error, isLoading]);
 
   return (
     <DropdownMenu onOpenChange={setOpen}>
       <DropdownMenuTrigger asChild>
-        <Button
-          variant='outline'
-          aria-expanded={open}
-          aria-haspopup='true'
-          className='flex items-center justify-start gap-2 p-2'
-        >
-          <Avatar className='h-9 w-9'>
-            <AvatarFallback>DEV</AvatarFallback>
-          </Avatar>
+        {isLoading ? (
+          <div>Loading...</div>
+        ) : (
+          <Button
+            variant='outline'
+            aria-expanded={open}
+            aria-haspopup='true'
+            className='flex items-center justify-start gap-2 p-2'
+            // disabled={profileSet!.profiles.size < 2}
+          >
+            <Avatar className='h-9 w-9'>
+              <AvatarFallback>{currentProfile}</AvatarFallback>
+            </Avatar>
 
-          <div className='flex items-center justify-start gap-2 p-2'>
-            <div className='flex flex-col space-y-1 leading-none'>
-              <p className='truncate font-medium'>123456789</p>
-              <p className='truncate text-sm text-zinc-700'>eu-west-1</p>
+            <div className='flex items-center justify-start gap-2 p-2'>
+              <div className='flex flex-col space-y-1 leading-none'>
+                <p className='truncate font-medium'>
+                  {profileSet?.profiles?.[currentProfile!].config.region ?? '?'}
+                </p>
+                <p className='truncate text-sm text-zinc-700'>
+                  {profileSet?.profiles?.[currentProfile!].config
+                    .output_format ?? '?'}
+                </p>
+              </div>
             </div>
-          </div>
 
-          {open ? (
-            <ChevronUp className='ml-2 h-4 w-4 shrink-0 opacity-50' />
-          ) : (
-            <ChevronDown className='ml-2 h-4 w-4 shrink-0 opacity-50' />
-          )}
-        </Button>
+            {open ? (
+              profileSet && Object.keys(profileSet.profiles).length > 1 ? (
+                <ChevronUp className='ml-2 h-4 w-4 shrink-0 opacity-50' />
+              ) : (
+                <></>
+              )
+            ) : profileSet && Object.keys(profileSet.profiles).length > 1 ? (
+              <ChevronDown className='ml-2 h-4 w-4 shrink-0 opacity-50' />
+            ) : (
+              <></>
+            )}
+          </Button>
+        )}
       </DropdownMenuTrigger>
       <DropdownMenuContent className='w-56' align='end' forceMount>
         <DropdownMenuGroup>
-          <ProfileNavItem
-            profileName='QA'
-            accessKeyId='124816321'
-            region='eu-west-1'
-          />
-          <ProfileNavItem
-            profileName='PROD'
-            accessKeyId='987654321'
-            region='eu-west-1'
-          />
+          {profileSet &&
+            Object.entries(profileSet?.profiles)
+              .filter(([profile]) => profile !== currentProfile)
+              .map(([profile, settings]) => (
+                <ProfileNavItem
+                  key={profile}
+                  profileName={profile}
+                  accessKeyId={settings.config.region ?? '?'}
+                  region={settings.config.output_format ?? '?'}
+                  onClick={() => setCurrentProfile(profile)}
+                />
+              ))}
         </DropdownMenuGroup>
       </DropdownMenuContent>
     </DropdownMenu>
diff --git a/src/sections/dashboard/context/profile-context.tsx b/src/sections/dashboard/context/profile-context.tsx
new file mode 100644
index 0000000..62450d3
--- /dev/null
+++ b/src/sections/dashboard/context/profile-context.tsx
@@ -0,0 +1,50 @@
+'use client';
+
+import React, {
+  createContext,
+  PropsWithChildren,
+  useContext,
+  useMemo,
+} from 'react';
+import useSWR, { Fetcher } from 'swr';
+// see https://stackoverflow.com/a/77264549
+import { invoke } from '@tauri-apps/api/tauri';
+
+type ProfileContextType = {
+  data: Record<string, unknown> | undefined;
+  error: Error | undefined;
+  isLoading: boolean;
+};
+
+export const ProfileContext = createContext<ProfileContextType>({
+  data: undefined,
+  error: undefined,
+  isLoading: true,
+});
+
+export const ProfileProvider = ({ children }: PropsWithChildren) => {
+  const fetcher: Fetcher<Record<string, never>, string> = (cmd: string) =>
+    invoke<Record<string, never>>(cmd);
+  const { data, error, isLoading } = useSWR<Record<string, never>, Error>(
+    'get_profiles',
+    fetcher
+  );
+
+  const value = useMemo(
+    () => ({ data, error, isLoading }),
+    [data, error, isLoading]
+  );
+  return (
+    <ProfileContext.Provider value={value}>{children}</ProfileContext.Provider>
+  );
+};
+
+export const useProfileContext = () => {
+  const context = useContext(ProfileContext);
+
+  if (!context) {
+    throw new Error('useThemeContext must be used inside the ThemeProvider');
+  }
+
+  return context;
+};
diff --git a/src/sections/dashboard/hooks/use-profile.tsx b/src/sections/dashboard/hooks/use-profile.tsx
new file mode 100644
index 0000000..3f42b67
--- /dev/null
+++ b/src/sections/dashboard/hooks/use-profile.tsx
@@ -0,0 +1,18 @@
+'use client';
+
+import useSWR, { Fetcher } from 'swr';
+import { invoke } from '@tauri-apps/api/tauri'; // see https://stackoverflow.com/a/77264549
+
+import { ProfileSet } from '@/modules/profiles/profile';
+export const useProfile = () => {
+  const fetcher: Fetcher<ProfileSet, string> = (cmd: string) =>
+    invoke<ProfileSet>(cmd);
+
+  const {
+    data: profileSet,
+    error,
+    isLoading,
+  } = useSWR<ProfileSet>('get_profiles', fetcher);
+
+  return { profileSet, error, isLoading };
+};
diff --git a/tsconfig.json b/tsconfig.json
index 198314c..c00f458 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -20,7 +20,8 @@
     ],
     "paths": {
       "@/*": ["./src/*"]
-    }
+    },
+    "typeRoots": ["./node_modules/@types", "./types"]
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
   "exclude": ["node_modules", "src-tauri"]
diff --git a/types.d.ts b/types.d.ts
new file mode 100644
index 0000000..dbd4082
--- /dev/null
+++ b/types.d.ts
@@ -0,0 +1,3 @@
+declare module 'secure-string' {
+  export declare class SecureString {}
+}