diff --git a/@api/routes/organization/change-logo.ts b/@api/routes/organization/change-logo.ts
new file mode 100644
index 0000000..38f1325
--- /dev/null
+++ b/@api/routes/organization/change-logo.ts
@@ -0,0 +1,54 @@
+import { Organizations } from '@api/database/schema'
+import { authProcedure, organizationMemberMiddleware } from '@api/trpc'
+import { TRPCError } from '@trpc/server'
+import { eq } from 'drizzle-orm'
+import { Buffer } from 'node:buffer'
+import { z } from 'zod'
+
+export const organizationChangeLogoRoute = authProcedure
+  .input(
+    z.object({
+      organization: z.object({
+        id: z.string().uuid(),
+        avatar: z.object({
+          name: z
+            .string()
+            .max(1234)
+            .transform((name) => name.replace(/[^a-zA-Z0-9.-_]/gi, '-')),
+          base64: z
+            .string()
+            .max(1024 * 1024) // 1 MB
+            .transform((base64) => {
+              return Buffer.from(base64, 'base64')
+            }),
+        }),
+      }),
+    }),
+  )
+  .use(organizationMemberMiddleware)
+  .mutation(async ({ ctx, input }) => {
+    const organization = await ctx.db.query.Organizations.findFirst({
+      where(t, { eq }) {
+        return eq(t.id, input.organization.id)
+      },
+    })
+
+    if (!organization) {
+      throw new TRPCError({
+        code: 'INTERNAL_SERVER_ERROR',
+        message: 'Organization not found',
+      })
+    }
+
+    const objectName = `organization/${input.organization.id}/logo/${input.organization.avatar.name}`
+    const deleteOldLogo = ctx.env.PUBLIC_BUCKET.delete(organization.logoUrl)
+    const uploadNewLogo = ctx.env.PUBLIC_BUCKET.put(objectName, input.organization.avatar.base64)
+    const updateLogoUrl = ctx.db
+      .update(Organizations)
+      .set({
+        logoUrl: objectName,
+      })
+      .where(eq(Organizations.id, input.organization.id))
+
+    await Promise.all([deleteOldLogo, uploadNewLogo, updateLogoUrl])
+  })
diff --git a/@api/routes/organization/index.ts b/@api/routes/organization/index.ts
index b83cb24..0e33368 100644
--- a/@api/routes/organization/index.ts
+++ b/@api/routes/organization/index.ts
@@ -1,10 +1,14 @@
 import { router } from '@api/trpc'
+import { organizationChangeLogoRoute } from './change-logo'
 import { organizationCreateRoute } from './create'
 import { organizationDetailRoute } from './detail'
 import { organizationListRoute } from './list'
+import { organizationUpdateRoute } from './update'
 
 export const organizationRouter = router({
   list: organizationListRoute,
   detail: organizationDetailRoute,
   create: organizationCreateRoute,
+  update: organizationUpdateRoute,
+  changeLogo: organizationChangeLogoRoute,
 })
diff --git a/@api/routes/organization/update.ts b/@api/routes/organization/update.ts
new file mode 100644
index 0000000..664fa36
--- /dev/null
+++ b/@api/routes/organization/update.ts
@@ -0,0 +1,23 @@
+import { Organizations } from '@api/database/schema'
+import { authProcedure, organizationMemberMiddleware } from '@api/trpc'
+import { eq } from 'drizzle-orm'
+import { z } from 'zod'
+
+export const organizationUpdateRoute = authProcedure
+  .input(
+    z.object({
+      organization: z.object({
+        id: z.string().uuid(),
+        name: z.string(),
+      }),
+    }),
+  )
+  .use(organizationMemberMiddleware)
+  .mutation(async ({ ctx, input }) => {
+    await ctx.db
+      .update(Organizations)
+      .set({
+        name: input.organization.name,
+      })
+      .where(eq(Organizations.id, input.organization.id))
+  })
diff --git a/@api/trpc.ts b/@api/trpc.ts
index 9685ee3..73617da 100644
--- a/@api/trpc.ts
+++ b/@api/trpc.ts
@@ -1,6 +1,7 @@
-import { TRPCError, initTRPC } from '@trpc/server'
+import { TRPCError, experimental_standaloneMiddleware, initTRPC } from '@trpc/server'
 import SuperJSON from 'superjson'
 import type { Context } from './context'
+import type { Db } from './lib/db'
 
 const t = initTRPC.context<Context & { request: Request }>().create({
   transformer: SuperJSON,
@@ -73,3 +74,21 @@ const authMiddleware = middleware(async ({ ctx, next }) => {
 })
 
 export const authProcedure = procedure.use(authMiddleware)
+
+export const organizationMemberMiddleware = experimental_standaloneMiddleware<{
+  ctx: { auth: { session: { userId: string } }; db: Db } // defaults to 'object' if not defined
+  input: { organizationId: string } | { organization: { id: string } } // defaults to 'unknown' if not defined
+}>().create(async ({ ctx, next, input }) => {
+  const organizationId = 'organizationId' in input ? input.organizationId : input.organization.id
+
+  const organizationMember = await ctx.db.query.OrganizationMembers.findFirst({
+    where(t, { and, eq }) {
+      return and(eq(t.organizationId, organizationId), eq(t.userId, ctx.auth.session.userId))
+    },
+  })
+
+  if (!organizationMember)
+    throw new TRPCError({ code: 'FORBIDDEN', message: 'You are not a member of this organization.' })
+
+  return next()
+})
diff --git a/@ui/styles/globals.css b/@ui/styles/globals.css
index ea91940..103d68b 100644
--- a/@ui/styles/globals.css
+++ b/@ui/styles/globals.css
@@ -80,4 +80,8 @@
     table-layout: fixed;
     width: 100%;
   }
+
+  img {
+    @apply object-center object-cover;
+  }
 }
diff --git a/@web/app/(auth)/(settings)/_components/nav.tsx b/@web/app/(auth)/(settings)/_components/nav.tsx
new file mode 100644
index 0000000..37730f2
--- /dev/null
+++ b/@web/app/(auth)/(settings)/_components/nav.tsx
@@ -0,0 +1,76 @@
+'use client'
+
+import { api } from '@web/lib/api'
+import { isActivePathname } from '@web/lib/utils'
+import Link from 'next/link'
+import { usePathname, useSearchParams } from 'next/navigation'
+import { Skeleton } from '@ui/ui/skeleton'
+import { ViewportBlock } from '@ui/ui/viewport-block'
+
+const staticLinks = [
+  {
+    name: 'Profile',
+    href: '/profile',
+  },
+  {
+    name: 'Notifications',
+    href: '/notifications',
+  },
+]
+
+export function Nav() {
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+  const query = api.organization.list.useInfiniteQuery(
+    {
+      limit: 6,
+    },
+    {
+      getNextPageParam: (lastPage) => lastPage.nextCursor,
+    },
+  )
+
+  const organizationLinks =
+    query.data?.pages.flatMap((page) =>
+      page.items.map((organization) => ({
+        name: organization.name,
+        id: organization.id,
+        href: `organization?id=${organization.id}`,
+      })),
+    ) ?? []
+
+  return (
+    <nav className="flex py-4">
+      <ul
+        role="list"
+        className="flex min-w-full flex-none gap-x-6 px-4 text-sm font-semibold leading-6 text-muted-foreground sm:px-6 lg:px-8"
+      >
+        {staticLinks.map((link) => (
+          <li key={link.name}>
+            <Link href={link.href} className={isActivePathname(link.href, pathname) ? 'text-primary' : ''}>
+              {link.name}
+            </Link>
+          </li>
+        ))}
+
+        {organizationLinks.map((link) => (
+          <li key={link.name}>
+            <Link
+              href={link.href}
+              className={
+                isActivePathname(link.href, pathname) && searchParams.get('id') === link.id ? 'text-primary' : ''
+              }
+            >
+              {link.name}
+            </Link>
+          </li>
+        ))}
+
+        <li>
+          {!query.isFetching && query.hasNextPage && <ViewportBlock onEnterViewport={() => query.fetchNextPage()} />}
+          {(query.hasNextPage || query.isLoading) && <Skeleton className="w-36 h-6" />}
+        </li>
+      </ul>
+    </nav>
+  )
+}
diff --git a/@web/app/(auth)/profile/layout.tsx b/@web/app/(auth)/(settings)/layout.tsx
similarity index 100%
rename from @web/app/(auth)/profile/layout.tsx
rename to @web/app/(auth)/(settings)/layout.tsx
diff --git a/@web/app/(auth)/(settings)/organization/_components/organization-infos-form.tsx b/@web/app/(auth)/(settings)/organization/_components/organization-infos-form.tsx
new file mode 100644
index 0000000..ff55f08
--- /dev/null
+++ b/@web/app/(auth)/(settings)/organization/_components/organization-infos-form.tsx
@@ -0,0 +1,138 @@
+'use client'
+
+import { api } from '@web/lib/api'
+import { constructPublicResourceUrl } from '@web/lib/utils'
+import imageCompression from 'browser-image-compression'
+import { Base64 } from 'js-base64'
+import { useSearchParams } from 'next/navigation'
+import { useId, useRef } from 'react'
+import { match } from 'ts-pattern'
+import { z } from 'zod'
+import { Button } from '@ui/ui/button'
+import { GeneralError } from '@ui/ui/general-error'
+import { GeneralSkeleton } from '@ui/ui/general-skeleton'
+import { Input } from '@ui/ui/input'
+import { Label } from '@ui/ui/label'
+import { MutationStatusIcon } from '@ui/ui/mutation-status-icon'
+
+export function OrganizationInfosForm() {
+  const searchParams = useSearchParams()
+  const organizationId = z.string().uuid().parse(searchParams.get('id'))
+
+  const nameId = useId()
+  const query = api.organization.detail.useQuery({
+    organizationId,
+  })
+  const mutation = api.organization.update.useMutation()
+
+  const action = (form: FormData) => {
+    const name = form.get('name') as string
+
+    mutation.mutate({
+      organization: {
+        id: organizationId,
+        name,
+      },
+    })
+  }
+
+  return (
+    <div className="@container">
+      <section className="grid grid-cols-1 gap-x-8 gap-y-10 px-4 py-16 @2xl:grid-cols-3">
+        <div>
+          <h2 className="font-semibold leading-7">Organization Information</h2>
+          <p className="mt-1 text-sm leading-6 text-muted-foreground">Edit information about your organization.</p>
+        </div>
+
+        <div className="@2xl:col-span-2 max-w-xl">
+          {match(query)
+            .with({ status: 'loading' }, () => <GeneralSkeleton count={5} />)
+            .with({ status: 'error' }, () => <GeneralError />)
+            .with({ status: 'success' }, (query) => (
+              <form action={action}>
+                <div className="space-y-8">
+                  <div className="flex items-center gap-8">
+                    <img
+                      src={constructPublicResourceUrl(query.data.organization.logoUrl)}
+                      alt={query.data.organization.name}
+                      className="h-24 w-24 flex-none rounded-lg bg-background object-cover"
+                    />
+                    <div>
+                      <LogoChangeButton />
+                      <p className="mt-2 text-xs leading-5 text-muted-foreground">JPG, GIF or PNG. 1MB max.</p>
+                    </div>
+                  </div>
+
+                  <div>
+                    <Label htmlFor={nameId}>Name</Label>
+                    <div className="mt-2">
+                      <Input
+                        id={nameId}
+                        key={query.data.organization.id}
+                        name="name"
+                        defaultValue={query.data.organization.name}
+                      />
+                    </div>
+                  </div>
+                </div>
+
+                <div className="mt-8">
+                  <Button disabled={mutation.isLoading} className="gap-2">
+                    Save
+                    <MutationStatusIcon status={mutation.status} />
+                  </Button>
+                </div>
+              </form>
+            ))
+            .exhaustive()}
+        </div>
+      </section>
+    </div>
+  )
+}
+
+export function LogoChangeButton() {
+  const searchParams = useSearchParams()
+  const organizationId = z.string().uuid().parse(searchParams.get('id'))
+  const inputRef = useRef<HTMLInputElement>(null)
+  const mutation = api.organization.changeLogo.useMutation()
+
+  const onChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0]
+    if (!file) return
+
+    const compressedImage = await imageCompression(file, {
+      maxSizeMB: 1,
+      maxWidthOrHeight: 200,
+      useWebWorker: true,
+    })
+
+    const avatarBase64 = Base64.fromUint8Array(new Uint8Array(await compressedImage.arrayBuffer()))
+    mutation.mutate({
+      organization: {
+        id: organizationId,
+        avatar: {
+          name: compressedImage.name,
+          base64: avatarBase64,
+        },
+      },
+    })
+  }
+
+  return (
+    <>
+      <Button
+        type="button"
+        className="gap-2"
+        disabled={mutation.isLoading}
+        onClick={() => {
+          inputRef.current?.click()
+        }}
+      >
+        Change logo
+        <MutationStatusIcon status={mutation.status} />
+      </Button>
+      <input ref={inputRef} type="file" className="hidden" accept="image/*" onChange={onChange} />
+    </>
+  )
+}
diff --git a/@web/app/(auth)/(settings)/organization/page.tsx b/@web/app/(auth)/(settings)/organization/page.tsx
new file mode 100644
index 0000000..b9dce88
--- /dev/null
+++ b/@web/app/(auth)/(settings)/organization/page.tsx
@@ -0,0 +1,16 @@
+import type { Metadata } from 'next'
+import { OrganizationInfosForm } from './_components/organization-infos-form'
+
+export const metadata: Metadata = {
+  title: 'Organization',
+}
+
+export default function OrganizationPage() {
+  return (
+    <main className="p-4">
+      <div className="mx-auto max-w-7xl divide-y">
+        <OrganizationInfosForm />
+      </div>
+    </main>
+  )
+}
diff --git a/@web/app/(auth)/profile/_components/oauth-connections.tsx b/@web/app/(auth)/(settings)/profile/_components/oauth-connections.tsx
similarity index 100%
rename from @web/app/(auth)/profile/_components/oauth-connections.tsx
rename to @web/app/(auth)/(settings)/profile/_components/oauth-connections.tsx
diff --git a/@web/app/(auth)/profile/_components/personal-infos-form.tsx b/@web/app/(auth)/(settings)/profile/_components/personal-infos-form.tsx
similarity index 92%
rename from @web/app/(auth)/profile/_components/personal-infos-form.tsx
rename to @web/app/(auth)/(settings)/profile/_components/personal-infos-form.tsx
index 438e0e8..13b6b87 100644
--- a/@web/app/(auth)/profile/_components/personal-infos-form.tsx
+++ b/@web/app/(auth)/(settings)/profile/_components/personal-infos-form.tsx
@@ -57,7 +57,12 @@ export function PersonalInfosForm() {
                   <div>
                     <Label htmlFor={nameId}>Name</Label>
                     <div className="mt-2">
-                      <Input id={nameId} name="name" defaultValue={query.data.session.organizationMember.user.name} />
+                      <Input
+                        id={nameId}
+                        name="name"
+                        key={query.data.session.organizationMember.user.id}
+                        defaultValue={query.data.session.organizationMember.user.name}
+                      />
                     </div>
                   </div>
 
@@ -66,6 +71,7 @@ export function PersonalInfosForm() {
                     <div className="mt-2">
                       <Input
                         id={emailId}
+                        key={query.data.session.organizationMember.user.id}
                         type="email"
                         name="email"
                         disabled
diff --git a/@web/app/(auth)/profile/page.tsx b/@web/app/(auth)/(settings)/profile/page.tsx
similarity index 100%
rename from @web/app/(auth)/profile/page.tsx
rename to @web/app/(auth)/(settings)/profile/page.tsx
diff --git a/@web/app/(auth)/profile/_components/nav.tsx b/@web/app/(auth)/profile/_components/nav.tsx
deleted file mode 100644
index 204f213..0000000
--- a/@web/app/(auth)/profile/_components/nav.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-'use client'
-
-import { isActivePathname } from '@web/lib/utils'
-import Link from 'next/link'
-import { usePathname } from 'next/navigation'
-
-const links = [
-  {
-    name: 'Profile',
-    href: '/profile',
-  },
-  {
-    name: 'Notifications',
-    href: '/notifications',
-  },
-]
-
-export function Nav() {
-  const pathname = usePathname()
-
-  return (
-    <nav className="flex py-4">
-      <ul
-        role="list"
-        className="flex min-w-full flex-none gap-x-6 px-4 text-sm font-semibold leading-6 text-muted-foreground sm:px-6 lg:px-8"
-      >
-        {links.map((link) => (
-          <li key={link.name}>
-            <Link href={link.href} className={isActivePathname(link.href, pathname) ? 'text-primary' : ''}>
-              {link.name}
-            </Link>
-          </li>
-        ))}
-      </ul>
-    </nav>
-  )
-}
diff --git a/@web/components/organization-create-sheet.tsx b/@web/components/organization-create-sheet.tsx
index 74f2f1b..cb6d461 100644
--- a/@web/components/organization-create-sheet.tsx
+++ b/@web/components/organization-create-sheet.tsx
@@ -48,7 +48,14 @@ export function OrganizationCreateSheet({ children, onSuccess, ...props }: Props
             <Label htmlFor={nameId} className="text-right">
               Name
             </Label>
-            <Input id={nameId} className="col-span-3" placeholder="Your workspace" name="name" required minLength={3} />
+            <Input
+              id={nameId}
+              className="col-span-3"
+              placeholder="Your organization"
+              name="name"
+              required
+              minLength={3}
+            />
           </div>
 
           <div className="flex justify-end gap-4">
diff --git a/@web/components/profile-dropdown-menu.tsx b/@web/components/profile-dropdown-menu.tsx
index 2a906c1..14f383d 100644
--- a/@web/components/profile-dropdown-menu.tsx
+++ b/@web/components/profile-dropdown-menu.tsx
@@ -44,7 +44,7 @@ export function ProfileDropdownMenu({ children, open = false, onOpenChange, ...p
     <DropdownMenu open={_open} onOpenChange={_onOpenChange} {...props}>
       {children}
       <DropdownMenuContent className="w-72">
-        <WorkspaceList onOpenChange={_onOpenChange} />
+        <OrganizationList onOpenChange={_onOpenChange} />
         <DropdownMenuSeparator />
         <DropdownMenuGroup>
           <DropdownMenuItem asChild>
@@ -61,7 +61,7 @@ export function ProfileDropdownMenu({ children, open = false, onOpenChange, ...p
   )
 }
 
-function WorkspaceList({ onOpenChange }: { onOpenChange: (v: boolean) => void }) {
+function OrganizationList({ onOpenChange }: { onOpenChange: (v: boolean) => void }) {
   const sessionInfosQuery = api.auth.infos.useQuery()
   const listQuery = api.organization.list.useInfiniteQuery(
     {
@@ -81,7 +81,7 @@ function WorkspaceList({ onOpenChange }: { onOpenChange: (v: boolean) => void })
       >
         <div className="space-y-2 py-2">
           {match(listQuery)
-            .with({ status: 'loading' }, () => <WorkspaceListItemSkeleton />)
+            .with({ status: 'loading' }, () => <OrganizationListItemSkeleton />)
             .with({ status: 'error' }, () => '')
             .with({ status: 'success' }, (query) => {
               return query.data.pages.map((page, i) => {
@@ -89,7 +89,7 @@ function WorkspaceList({ onOpenChange }: { onOpenChange: (v: boolean) => void })
                   <div key={i} className="space-y-2">
                     {page.items.map((item) => {
                       return (
-                        <WorkspaceListItem
+                        <OrganizationListItem
                           key={item.id}
                           organization={{
                             ...item,
@@ -106,7 +106,7 @@ function WorkspaceList({ onOpenChange }: { onOpenChange: (v: boolean) => void })
                     {!query.isFetching && query.hasNextPage && (
                       <ViewportBlock onEnterViewport={() => query.fetchNextPage()} />
                     )}
-                    {query.hasNextPage && <WorkspaceListItemSkeleton />}
+                    {query.hasNextPage && <OrganizationListItemSkeleton />}
                   </div>
                 )
               })
@@ -118,7 +118,7 @@ function WorkspaceList({ onOpenChange }: { onOpenChange: (v: boolean) => void })
   )
 }
 
-function WorkspaceListItemSkeleton() {
+function OrganizationListItemSkeleton() {
   return (
     <div className="flex gap-2 pl-2">
       <Skeleton className="h-9 w-9" />
@@ -130,7 +130,7 @@ function WorkspaceListItemSkeleton() {
   )
 }
 
-function WorkspaceListItem(props: {
+function OrganizationListItem(props: {
   organization: {
     id: string
     name: string
@@ -189,15 +189,13 @@ function WorkspaceListItem(props: {
         </div>
       </Button>
 
-      {/* TODO: implement */}
       <DropdownMenuSub>
         <DropdownMenuSubTrigger />
         <DropdownMenuPortal>
           <DropdownMenuSubContent>
-            <DropdownMenuItem>Email</DropdownMenuItem>
-            <DropdownMenuItem>Message</DropdownMenuItem>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem>More...</DropdownMenuItem>
+            <DropdownMenuItem asChild>
+              <Link href={`/organization?id=${props.organization.id}`}>Settings</Link>
+            </DropdownMenuItem>
           </DropdownMenuSubContent>
         </DropdownMenuPortal>
       </DropdownMenuSub>
diff --git a/@web/lib/utils.ts b/@web/lib/utils.ts
index 8768d93..c01cc85 100644
--- a/@web/lib/utils.ts
+++ b/@web/lib/utils.ts
@@ -1,6 +1,7 @@
 import { env } from '@web/env'
 
-export function isActivePathname(pathname: string, currentPathname: string) {
+export function isActivePathname(url: string, currentPathname: string) {
+  const { pathname } = new URL(url, 'https://dinsterizer.com')
   return `${currentPathname}/`.startsWith(`${pathname}/`)
 }