diff --git a/.claude/settings.local.json b/.claude/settings.local.json
new file mode 100644
index 00000000..9b75faa4
--- /dev/null
+++ b/.claude/settings.local.json
@@ -0,0 +1,13 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(git add:*)",
+      "Bash(git commit:*)",
+      "Bash(npm run lint:*)",
+      "Bash(npx tsc:*)",
+      "Bash(grep:*)",
+      "Bash(mv:*)"
+    ],
+    "deny": []
+  }
+}
\ No newline at end of file
diff --git a/src/app/Routes.tsx b/src/app/Routes.tsx
index ed7cb399..09a5c1cc 100644
--- a/src/app/Routes.tsx
+++ b/src/app/Routes.tsx
@@ -45,6 +45,7 @@ import {
   OrcidLinkError,
 } from '../features/account/OrcidLink';
 import { ManageTokens } from '../features/account/ManageTokens';
+import { Orgs, OrganizationDetail, CreateOrganization } from '../features/orgs';
 
 export const LOGIN_ROUTE = '/login';
 export const SIGNUP_ROUTE = '/signup';
@@ -144,6 +145,20 @@ const Routes: FC = () => {
         <Route path="*" element={<PageNotFound />} />
       </Route>
 
+      {/* Organizations */}
+      <Route path="/orgs">
+        <Route index element={<Authed element={<Orgs />} />} />
+        <Route
+          path="new"
+          element={<Authed element={<CreateOrganization />} />}
+        />
+        <Route
+          path=":orgId"
+          element={<Authed element={<OrganizationDetail />} />}
+        />
+        <Route path="*" element={<PageNotFound />} />
+      </Route>
+
       {/* CDM */}
       <Route path="/cdm">
         <Route path="redirect" element={<Authed element={<CDMRedirect />} />} />
diff --git a/src/common/api/authService.ts b/src/common/api/authService.ts
index c3bc0b71..5e9b7573 100644
--- a/src/common/api/authService.ts
+++ b/src/common/api/authService.ts
@@ -4,18 +4,13 @@ import { uriEncodeTemplateTag as encode } from '../utils/stringUtils';
 import { baseApi } from './index';
 import { httpService } from './utils/serviceHelpers';
 
-const loginOrigin =
-  process.env.NODE_ENV === 'development'
-    ? 'https://ci.kbase.us'
-    : document.location.origin;
-
 // In prod, the canonical auth domain is kbase.us, not narrative.kbase.us
 // navigating instead to narrative.kbase.us will set the internal cookie
 // on the wrong domain.
 const authOrigin =
-  loginOrigin === 'https://narrative.kbase.us'
+  document.location.origin === 'https://narrative.kbase.us'
     ? 'https://kbase.us'
-    : loginOrigin;
+    : document.location.origin;
 
 const authService = httpService({
   url: '/services/auth',
diff --git a/src/common/api/groupsApi.ts b/src/common/api/groupsApi.ts
new file mode 100644
index 00000000..bd7340ae
--- /dev/null
+++ b/src/common/api/groupsApi.ts
@@ -0,0 +1,529 @@
+import { uriEncodeTemplateTag as encode } from '../utils/stringUtils';
+import { httpService } from './utils/serviceHelpers';
+import { baseApi } from './index';
+
+const groupsService = httpService({
+  url: '/services/groups/',
+});
+
+export type Role = 'None' | 'Member' | 'Admin' | 'Owner';
+
+// Groups service response for list view
+export interface Group {
+  id: string;
+  name: string;
+  private: boolean;
+  owner: string;
+  role: Role;
+  memcount: number;
+  createdate: number;
+  moddate: number;
+  lastvisit: number | null;
+  rescount?: {
+    workspace?: number;
+    catalogmethod?: number;
+  };
+  custom?: {
+    logourl?: string;
+    homeurl?: string;
+    researchinterests?: string;
+    relatedgroups?: string;
+    description?: string;
+  };
+}
+
+// Groups service user structure
+export interface GroupUser {
+  name: string;
+  joined: number | null;
+  lastvisit: number | null;
+  custom: Record<string, unknown>;
+}
+
+// Groups service response for detail view
+export interface GroupDetail {
+  id: string;
+  name: string;
+  private: boolean;
+  privatemembers: boolean;
+  owner: GroupUser;
+  role: Role;
+  memcount: number;
+  createdate: number;
+  moddate: number;
+  lastvisit: number | null;
+  admins: GroupUser[];
+  members: GroupUser[];
+  rescount?: {
+    workspace?: number;
+    catalogmethod?: number;
+  };
+  resources?: {
+    workspace?: Array<{
+      rid: string;
+      added: number | null;
+      [key: string]: unknown;
+    }>;
+    catalogmethod?: Array<{ rid: string; added: number | null }>;
+  };
+  custom?: {
+    logourl?: string;
+    homeurl?: string;
+    researchinterests?: string;
+    relatedgroups?: string;
+    description?: string;
+  };
+}
+
+// Legacy interface for narrative organizations API
+export interface NarrativeOrgInfo {
+  id: string;
+  owner: string;
+  name: string;
+  role: string;
+  private: boolean;
+}
+
+export interface GroupRequest {
+  id: string;
+  groupId: string;
+  requester: string;
+  type: string;
+  status: string;
+  resource: string;
+  resourceType: string;
+  createdAt: string;
+  expiredAt: string;
+  modifiedAt: string;
+}
+
+export interface GroupFilter {
+  roleType: 'myorgs' | 'all' | 'notmyorgs' | 'select';
+  roles: string[];
+  privacy: 'any' | 'public' | 'private';
+}
+
+export interface GroupQuery {
+  searchTerms: string[];
+  sortField: string;
+  sortDirection: 'ascending' | 'descending';
+  filter: GroupFilter;
+}
+
+export interface CreateGroupInput {
+  id: string;
+  name: string;
+  logoUrl?: string;
+  homeUrl?: string;
+  researchInterests?: string;
+  description?: string;
+  isPrivate: boolean;
+}
+
+export interface UpdateGroupInput {
+  name: string;
+  logoUrl?: string;
+  homeUrl?: string;
+  researchInterests?: string;
+  description?: string;
+  isPrivate: boolean;
+}
+
+export interface GroupsApiParams {
+  listGroups: GroupQuery;
+  getGroup: string;
+  createGroup: CreateGroupInput;
+  updateGroup: { id: string; update: UpdateGroupInput };
+  deleteGroup: string;
+  requestMembership: string;
+  inviteUser: { groupId: string; username: string };
+  updateMember: {
+    groupId: string;
+    username: string;
+    update: { title?: string };
+  };
+  removeMember: { groupId: string; username: string };
+  memberToAdmin: { groupId: string; username: string };
+  adminToMember: { groupId: string; username: string };
+  getNarrativeOrgs: number;
+  getUserGroups: void;
+  linkNarrative: { groupId: string; wsId: number };
+  unlinkNarrative: { groupId: string; wsId: number };
+  addApp: { groupId: string; appId: string };
+  removeApp: { groupId: string; appId: string };
+  getRequests: string;
+  getUserOutgoingRequests: void;
+  acceptRequest: string;
+  denyRequest: string;
+  cancelRequest: string;
+}
+
+export interface GroupsApiResults {
+  listGroups: Group[];
+  getGroup: GroupDetail;
+  createGroup: GroupDetail;
+  updateGroup: void;
+  deleteGroup: void;
+  requestMembership: GroupRequest;
+  inviteUser: GroupRequest;
+  updateMember: void;
+  removeMember: void;
+  memberToAdmin: void;
+  adminToMember: void;
+  getNarrativeOrgs: NarrativeOrgInfo[];
+  getUserGroups: Group[];
+  linkNarrative: unknown;
+  unlinkNarrative: void;
+  addApp: unknown;
+  removeApp: void;
+  getRequests: GroupRequest[];
+  getUserOutgoingRequests: GroupRequest[];
+  acceptRequest: GroupRequest;
+  denyRequest: GroupRequest;
+  cancelRequest: GroupRequest;
+}
+
+export const groupsApi = baseApi
+  .enhanceEndpoints({ addTagTypes: ['Group', 'GroupList'] })
+  .injectEndpoints({
+    endpoints: (builder) => ({
+      listGroups: builder.query<
+        GroupsApiResults['listGroups'],
+        GroupsApiParams['listGroups']
+      >({
+        query: (params) => {
+          const searchParams = new URLSearchParams();
+
+          if (params.filter.roleType !== 'all') {
+            if (params.filter.roleType === 'myorgs') {
+              searchParams.append('role', 'Member');
+            } else if (params.filter.roles.length > 0) {
+              searchParams.append('role', params.filter.roles[0]);
+            }
+          }
+
+          if (params.sortDirection === 'descending') {
+            searchParams.append('order', 'desc');
+          } else {
+            searchParams.append('order', 'asc');
+          }
+
+          const queryString = searchParams.toString();
+          const url = queryString ? `/group?${queryString}` : '/group';
+
+          return groupsService({
+            method: 'GET',
+            url,
+          });
+        },
+        providesTags: ['GroupList'],
+      }),
+      getGroup: builder.query<
+        GroupsApiResults['getGroup'],
+        GroupsApiParams['getGroup']
+      >({
+        query: (id) =>
+          groupsService({
+            method: 'GET',
+            url: encode`/group/${id}`,
+          }),
+        providesTags: (result, error, id) => [{ type: 'Group', id }],
+      }),
+      createGroup: builder.mutation<
+        GroupsApiResults['createGroup'],
+        GroupsApiParams['createGroup']
+      >({
+        query: (group) =>
+          groupsService({
+            method: 'PUT',
+            url: encode`/group/${group.id}`,
+            body: {
+              name: group.name,
+              private: group.isPrivate,
+              custom: {
+                logourl: group.logoUrl,
+                homeurl: group.homeUrl,
+                researchinterests: group.researchInterests,
+                description: group.description,
+              },
+            },
+          }),
+        invalidatesTags: ['GroupList'],
+      }),
+      updateGroup: builder.mutation<
+        GroupsApiResults['updateGroup'],
+        GroupsApiParams['updateGroup']
+      >({
+        query: ({ id, update }) =>
+          groupsService({
+            method: 'PUT',
+            url: encode`/group/${id}/update`,
+            body: {
+              name: update.name,
+              private: update.isPrivate,
+              custom: {
+                logourl: update.logoUrl,
+                homeurl: update.homeUrl,
+                researchinterests: update.researchInterests,
+                description: update.description,
+              },
+            },
+          }),
+        invalidatesTags: (result, error, { id }) => [
+          { type: 'Group', id },
+          'GroupList',
+        ],
+      }),
+      requestMembership: builder.mutation<
+        GroupsApiResults['requestMembership'],
+        GroupsApiParams['requestMembership']
+      >({
+        query: (groupId) =>
+          groupsService({
+            method: 'POST',
+            url: encode`/group/${groupId}/requestmembership`,
+          }),
+        invalidatesTags: (result, error, groupId) => [
+          { type: 'Group', id: groupId },
+        ],
+      }),
+      inviteUser: builder.mutation<
+        GroupsApiResults['inviteUser'],
+        GroupsApiParams['inviteUser']
+      >({
+        query: ({ groupId, username }) =>
+          groupsService({
+            method: 'POST',
+            url: encode`/group/${groupId}/user/${username}`,
+          }),
+        invalidatesTags: (result, error, { groupId }) => [
+          { type: 'Group', id: groupId },
+        ],
+      }),
+      updateMember: builder.mutation<
+        GroupsApiResults['updateMember'],
+        GroupsApiParams['updateMember']
+      >({
+        query: ({ groupId, username, update }) =>
+          groupsService({
+            method: 'PUT',
+            url: encode`/group/${groupId}/user/${username}/update`,
+            body: { custom: update },
+          }),
+        invalidatesTags: (result, error, { groupId }) => [
+          { type: 'Group', id: groupId },
+        ],
+      }),
+      removeMember: builder.mutation<
+        GroupsApiResults['removeMember'],
+        GroupsApiParams['removeMember']
+      >({
+        query: ({ groupId, username }) =>
+          groupsService({
+            method: 'DELETE',
+            url: encode`/group/${groupId}/user/${username}`,
+          }),
+        invalidatesTags: (result, error, { groupId }) => [
+          { type: 'Group', id: groupId },
+        ],
+      }),
+      memberToAdmin: builder.mutation<
+        GroupsApiResults['memberToAdmin'],
+        GroupsApiParams['memberToAdmin']
+      >({
+        query: ({ groupId, username }) =>
+          groupsService({
+            method: 'PUT',
+            url: encode`/group/${groupId}/user/${username}/admin`,
+          }),
+        invalidatesTags: (result, error, { groupId }) => [
+          { type: 'Group', id: groupId },
+        ],
+      }),
+      adminToMember: builder.mutation<
+        GroupsApiResults['adminToMember'],
+        GroupsApiParams['adminToMember']
+      >({
+        query: ({ groupId, username }) =>
+          groupsService({
+            method: 'DELETE',
+            url: encode`/group/${groupId}/user/${username}/admin`,
+          }),
+        invalidatesTags: (result, error, { groupId }) => [
+          { type: 'Group', id: groupId },
+        ],
+      }),
+      linkNarrative: builder.mutation<
+        GroupsApiResults['linkNarrative'],
+        GroupsApiParams['linkNarrative']
+      >({
+        query: ({ groupId, wsId }) =>
+          groupsService({
+            method: 'POST',
+            url: encode`/group/${groupId}/resource/workspace/${wsId}`,
+          }),
+        invalidatesTags: (result, error, { groupId }) => [
+          { type: 'Group', id: groupId },
+        ],
+      }),
+      unlinkNarrative: builder.mutation<
+        GroupsApiResults['unlinkNarrative'],
+        GroupsApiParams['unlinkNarrative']
+      >({
+        query: ({ groupId, wsId }) =>
+          groupsService({
+            method: 'DELETE',
+            url: encode`/group/${groupId}/resource/workspace/${wsId}`,
+          }),
+        invalidatesTags: (result, error, { groupId }) => [
+          { type: 'Group', id: groupId },
+        ],
+      }),
+      addApp: builder.mutation<
+        GroupsApiResults['addApp'],
+        GroupsApiParams['addApp']
+      >({
+        query: ({ groupId, appId }) =>
+          groupsService({
+            method: 'POST',
+            url: encode`/group/${groupId}/resource/catalogmethod/${appId}`,
+          }),
+        invalidatesTags: (result, error, { groupId }) => [
+          { type: 'Group', id: groupId },
+        ],
+      }),
+      removeApp: builder.mutation<
+        GroupsApiResults['removeApp'],
+        GroupsApiParams['removeApp']
+      >({
+        query: ({ groupId, appId }) =>
+          groupsService({
+            method: 'DELETE',
+            url: encode`/group/${groupId}/resource/catalogmethod/${appId}`,
+          }),
+        invalidatesTags: (result, error, { groupId }) => [
+          { type: 'Group', id: groupId },
+        ],
+      }),
+      getNarrativeOrgs: builder.query<
+        GroupsApiResults['getNarrativeOrgs'],
+        GroupsApiParams['getNarrativeOrgs']
+      >({
+        query: (id) =>
+          groupsService({
+            method: 'GET',
+            url: encode`/group?resourcetype=workspace&resource=${id}`,
+          }),
+        providesTags: ['GroupList'],
+      }),
+      getUserGroups: builder.query<
+        GroupsApiResults['getUserGroups'],
+        GroupsApiParams['getUserGroups']
+      >({
+        query: () =>
+          groupsService({
+            method: 'GET',
+            url: '/member',
+          }),
+        providesTags: ['GroupList'],
+      }),
+      getRequests: builder.query<
+        GroupsApiResults['getRequests'],
+        GroupsApiParams['getRequests']
+      >({
+        query: (groupId) =>
+          groupsService({
+            method: 'GET',
+            url: encode`/group/${groupId}/requests`,
+          }),
+        providesTags: (result, error, groupId) => [
+          { type: 'Group', id: groupId },
+        ],
+      }),
+      getUserOutgoingRequests: builder.query<
+        GroupsApiResults['getUserOutgoingRequests'],
+        GroupsApiParams['getUserOutgoingRequests']
+      >({
+        query: () =>
+          groupsService({
+            method: 'GET',
+            url: '/request/created',
+          }),
+        providesTags: ['GroupList'],
+      }),
+      acceptRequest: builder.mutation<
+        GroupsApiResults['acceptRequest'],
+        GroupsApiParams['acceptRequest']
+      >({
+        query: (requestId) =>
+          groupsService({
+            method: 'PUT',
+            url: encode`/request/id/${requestId}/accept`,
+          }),
+        invalidatesTags: ['GroupList'],
+      }),
+      denyRequest: builder.mutation<
+        GroupsApiResults['denyRequest'],
+        GroupsApiParams['denyRequest']
+      >({
+        query: (requestId) =>
+          groupsService({
+            method: 'PUT',
+            url: encode`/request/id/${requestId}/deny`,
+          }),
+        invalidatesTags: ['GroupList'],
+      }),
+      cancelRequest: builder.mutation<
+        GroupsApiResults['cancelRequest'],
+        GroupsApiParams['cancelRequest']
+      >({
+        query: (requestId) =>
+          groupsService({
+            method: 'PUT',
+            url: encode`/request/id/${requestId}/cancel`,
+          }),
+        invalidatesTags: ['GroupList'],
+      }),
+    }),
+  });
+
+export const {
+  listGroups,
+  getGroup,
+  createGroup,
+  updateGroup,
+  requestMembership,
+  inviteUser,
+  updateMember,
+  removeMember,
+  memberToAdmin,
+  adminToMember,
+  linkNarrative,
+  unlinkNarrative,
+  addApp,
+  removeApp,
+  getNarrativeOrgs,
+  getUserGroups,
+  getRequests,
+  getUserOutgoingRequests,
+  acceptRequest,
+  denyRequest,
+  cancelRequest,
+} = groupsApi.endpoints;
+
+export const clearCacheAction = groupsApi.util.invalidateTags([
+  'Group',
+  'GroupList',
+]);
+
+// Legacy exports for backwards compatibility
+export const listOrganizations = listGroups;
+export const getOrganization = getGroup;
+export const getUserOrgs = getUserGroups;
+export type GroupsServiceResponse = Group;
+export type GroupsServiceDetailResponse = GroupDetail;
+export type Filter = GroupFilter;
+export type OrganizationQuery = GroupQuery;
+export const createOrganization = createGroup;
+export type OrgInfo = NarrativeOrgInfo;
+export type CreateOrganizationInput = CreateGroupInput;
diff --git a/src/common/api/orgsApi.ts b/src/common/api/orgsApi.ts
deleted file mode 100644
index 9282e07e..00000000
--- a/src/common/api/orgsApi.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-/* orgsApi.ts */
-import { uriEncodeTemplateTag as encode } from '../utils/stringUtils';
-import { httpService } from './utils/serviceHelpers';
-import { baseApi } from './index';
-
-const orgsService = httpService({
-  url: '/services/groups/',
-});
-
-export interface OrgInfo {
-  id: string;
-  owner: string; // user id
-  name: string;
-  role: string;
-  private: boolean;
-}
-
-export interface OrgMemberInfo {
-  id: string;
-  name: string;
-}
-
-export interface OrgsParams {
-  getNarrativeOrgs: number;
-  getUserOrgs: void;
-  linkNarrative: { orgId: string; wsId: number };
-}
-
-export interface OrgsResults {
-  getNarrativeOrgs: OrgInfo[];
-  getUserOrgs: OrgMemberInfo[];
-  linkNarrative: unknown;
-}
-
-export const orgsApi = baseApi
-  .enhanceEndpoints({ addTagTypes: ['Orgs'] })
-  .injectEndpoints({
-    endpoints: (builder) => ({
-      getNarrativeOrgs: builder.query<
-        OrgInfo[],
-        OrgsParams['getNarrativeOrgs']
-      >({
-        query: (id) =>
-          orgsService({
-            method: 'GET',
-            url: encode`/group?resourcetype=workspace&resource=${id}`,
-          }),
-        providesTags: ['Orgs'],
-      }),
-      getUserOrgs: builder.query<
-        OrgsResults['getUserOrgs'],
-        OrgsParams['getUserOrgs']
-      >({
-        query: () =>
-          orgsService({
-            method: 'GET',
-            url: '/member',
-          }),
-        providesTags: ['Orgs'],
-      }),
-      linkNarrative: builder.mutation<
-        OrgsResults['linkNarrative'],
-        OrgsParams['linkNarrative']
-      >({
-        query: ({ orgId, wsId }) =>
-          orgsService({
-            method: 'POST',
-            url: `group/${orgId}/resource/workspace/${wsId}`,
-          }),
-      }),
-    }),
-  });
-
-export const { getNarrativeOrgs, getUserOrgs, linkNarrative } =
-  orgsApi.endpoints;
-export const clearCacheAction = orgsApi.util.invalidateTags(['Orgs']);
diff --git a/src/features/layout/LeftNavBar.tsx b/src/features/layout/LeftNavBar.tsx
index 32817209..19199478 100644
--- a/src/features/layout/LeftNavBar.tsx
+++ b/src/features/layout/LeftNavBar.tsx
@@ -48,7 +48,7 @@ const LeftNavBar: FC = () => {
     <nav>
       <ul className={classes.nav_list}>
         <NavItem path="/" desc="Navigator" icon={faCompass} />
-        <NavItem path="/legacy/orgs" desc="Orgs" icon={faUsers} />
+        <NavItem path="/orgs" desc="Orgs" icon={faUsers} />
         <NavItem path="/legacy/catalog/apps" desc="Catalog" icon={faBook} />
         <NavItem path="/legacy/search" desc="Search" icon={faSearch} />
         <NavItem path="/legacy/jobbrowser" desc="Jobs" icon={faSuitcase} />
diff --git a/src/features/navigator/NarrativeControl/LinkOrg.tsx b/src/features/navigator/NarrativeControl/LinkOrg.tsx
index befd191a..87cf5ece 100644
--- a/src/features/navigator/NarrativeControl/LinkOrg.tsx
+++ b/src/features/navigator/NarrativeControl/LinkOrg.tsx
@@ -10,7 +10,7 @@ import {
   getUserOrgs,
   linkNarrative,
   OrgInfo,
-} from '../../../common/api/orgsApi';
+} from '../../../common/api/groupsApi';
 import { Button, Select } from '../../../common/components';
 import { useAppDispatch, useAppSelector } from '../../../common/hooks';
 import { NarrativeDoc } from '../../../common/types/NarrativeDoc';
@@ -64,7 +64,7 @@ export const LinkOrg: FC<{
       dispatch(linkAction({ org: orgSelected, wsId }));
       try {
         await linkTrigger({
-          orgId: orgSelected,
+          groupId: orgSelected,
           wsId,
         }).unwrap();
         dispatch(setLoading(false));
diff --git a/src/features/navigator/navigatorSlice.ts b/src/features/navigator/navigatorSlice.ts
index 963e0def..562e57fd 100644
--- a/src/features/navigator/navigatorSlice.ts
+++ b/src/features/navigator/navigatorSlice.ts
@@ -6,7 +6,7 @@ import {
   NarrativeDoc,
 } from '../../common/types/NarrativeDoc';
 import { SearchResults } from '../../common/api/searchApi';
-import { OrgInfo } from '../../common/api/orgsApi';
+import { OrgInfo } from '../../common/api/groupsApi';
 import { Category, UserPermission } from './common';
 
 // Define a type for the slice state
diff --git a/src/features/orgs/CreateOrganization.tsx b/src/features/orgs/CreateOrganization.tsx
new file mode 100644
index 00000000..8fe5d284
--- /dev/null
+++ b/src/features/orgs/CreateOrganization.tsx
@@ -0,0 +1,276 @@
+import {
+  Container,
+  Paper,
+  Stack,
+  Typography,
+  TextField,
+  Button,
+  FormControlLabel,
+  Checkbox,
+  Box,
+  Alert,
+} from '@mui/material';
+import { FC } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useForm, Controller } from 'react-hook-form';
+import { usePageTitle } from '../layout/layoutSlice';
+import {
+  createOrganization,
+  CreateOrganizationInput,
+} from '../../common/api/groupsApi';
+
+const defaultValues: CreateOrganizationInput = {
+  id: '',
+  name: '',
+  logoUrl: '',
+  homeUrl: '',
+  researchInterests: '',
+  description: '',
+  isPrivate: false,
+};
+
+export const CreateOrganization: FC = () => {
+  usePageTitle('Create Organization');
+  const navigate = useNavigate();
+  const [trigger, { isLoading, error }] = createOrganization.useMutation();
+
+  const {
+    control,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<CreateOrganizationInput>({
+    defaultValues,
+    mode: 'onBlur',
+  });
+
+  const isValidUrl = (value: string | undefined): boolean | string => {
+    if (!value) return true; // Allow empty values for optional fields
+    try {
+      new URL(value);
+      return true;
+    } catch (_) {
+      return 'Please enter a valid URL';
+    }
+  };
+
+  const onSubmit = async (data: CreateOrganizationInput) => {
+    try {
+      const result = await trigger(data).unwrap();
+      navigate(`/orgs/${result.id}`);
+    } catch (err) {
+      // Error is handled by RTK Query and displayed via the error state
+    }
+  };
+
+  const handleCancel = () => {
+    navigate('/orgs');
+  };
+
+  return (
+    <Container maxWidth="md" sx={{ py: 3 }}>
+      <Paper sx={{ p: 3 }}>
+        <Stack spacing={3}>
+          <Typography variant="h4" component="h1">
+            Create New Organization
+          </Typography>
+
+          <Typography variant="body1" color="text.secondary">
+            Organizations help you collaborate and share resources with your
+            team.
+          </Typography>
+
+          {error && (
+            <Alert severity="error">
+              Failed to create organization. Please try again.
+            </Alert>
+          )}
+
+          <Box component="form" onSubmit={handleSubmit(onSubmit)}>
+            <Stack spacing={3}>
+              <Controller
+                name="id"
+                control={control}
+                rules={{
+                  required: 'Organization ID is required',
+                  pattern: {
+                    value: /^[a-zA-Z0-9_-]+$/,
+                    message:
+                      'Organization ID can only contain letters, numbers, hyphens, and underscores',
+                  },
+                  minLength: {
+                    value: 3,
+                    message: 'Organization ID must be at least 3 characters',
+                  },
+                  maxLength: {
+                    value: 50,
+                    message: 'Organization ID must be less than 50 characters',
+                  },
+                }}
+                render={({ field }) => (
+                  <TextField
+                    {...field}
+                    label="Organization ID"
+                    error={!!errors.id}
+                    helperText={
+                      errors.id?.message ||
+                      'Unique identifier for your organization (cannot be changed later)'
+                    }
+                    required
+                    fullWidth
+                  />
+                )}
+              />
+
+              <Controller
+                name="name"
+                control={control}
+                rules={{
+                  required: 'Organization name is required',
+                  maxLength: {
+                    value: 100,
+                    message:
+                      'Organization name must be less than 100 characters',
+                  },
+                }}
+                render={({ field }) => (
+                  <TextField
+                    {...field}
+                    label="Organization Name"
+                    error={!!errors.name}
+                    helperText={
+                      errors.name?.message ||
+                      'Display name for your organization'
+                    }
+                    required
+                    fullWidth
+                  />
+                )}
+              />
+
+              <Controller
+                name="logoUrl"
+                control={control}
+                rules={{
+                  validate: isValidUrl,
+                }}
+                render={({ field }) => (
+                  <TextField
+                    {...field}
+                    label="Logo URL"
+                    error={!!errors.logoUrl}
+                    helperText={
+                      errors.logoUrl?.message ||
+                      'URL to your organization logo (optional)'
+                    }
+                    fullWidth
+                  />
+                )}
+              />
+
+              <Controller
+                name="homeUrl"
+                control={control}
+                rules={{
+                  validate: isValidUrl,
+                }}
+                render={({ field }) => (
+                  <TextField
+                    {...field}
+                    label="Home Page URL"
+                    error={!!errors.homeUrl}
+                    helperText={
+                      errors.homeUrl?.message ||
+                      'URL to your organization website (optional)'
+                    }
+                    fullWidth
+                  />
+                )}
+              />
+
+              <Controller
+                name="researchInterests"
+                control={control}
+                rules={{
+                  maxLength: {
+                    value: 500,
+                    message:
+                      'Research interests must be less than 500 characters',
+                  },
+                }}
+                render={({ field }) => (
+                  <TextField
+                    {...field}
+                    label="Research Interests"
+                    error={!!errors.researchInterests}
+                    helperText={
+                      errors.researchInterests?.message ||
+                      'Brief description of your research focus (optional)'
+                    }
+                    multiline
+                    rows={2}
+                    fullWidth
+                  />
+                )}
+              />
+
+              <Controller
+                name="description"
+                control={control}
+                rules={{
+                  maxLength: {
+                    value: 1000,
+                    message: 'Description must be less than 1000 characters',
+                  },
+                }}
+                render={({ field }) => (
+                  <TextField
+                    {...field}
+                    label="Description"
+                    error={!!errors.description}
+                    helperText={
+                      errors.description?.message ||
+                      'Detailed description of your organization (optional)'
+                    }
+                    multiline
+                    rows={4}
+                    fullWidth
+                  />
+                )}
+              />
+
+              <Controller
+                name="isPrivate"
+                control={control}
+                render={({ field }) => (
+                  <FormControlLabel
+                    control={<Checkbox {...field} checked={field.value} />}
+                    label="Private Organization"
+                    sx={{ alignSelf: 'flex-start' }}
+                  />
+                )}
+              />
+
+              <Typography
+                variant="caption"
+                color="text.secondary"
+                sx={{ mt: -2 }}
+              >
+                Private organizations are only visible to members. Public
+                organizations can be discovered by anyone.
+              </Typography>
+
+              <Box display="flex" gap={2} justifyContent="flex-end">
+                <Button variant="outlined" onClick={handleCancel}>
+                  Cancel
+                </Button>
+                <Button type="submit" variant="contained" disabled={isLoading}>
+                  {isLoading ? 'Creating...' : 'Create Organization'}
+                </Button>
+              </Box>
+            </Stack>
+          </Box>
+        </Stack>
+      </Paper>
+    </Container>
+  );
+};
diff --git a/src/features/orgs/OrganizationDetail.tsx b/src/features/orgs/OrganizationDetail.tsx
new file mode 100644
index 00000000..74320fe4
--- /dev/null
+++ b/src/features/orgs/OrganizationDetail.tsx
@@ -0,0 +1,388 @@
+import {
+  Container,
+  Paper,
+  Stack,
+  Typography,
+  Box,
+  Chip,
+  Button,
+  Tabs,
+  Tab,
+  Avatar,
+  Link,
+  Grid,
+  Card,
+  CardContent,
+  List,
+  ListItem,
+  ListItemText,
+  ListItemAvatar,
+  Divider,
+} from '@mui/material';
+import { FC, useState } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { getOrganization } from '../../common/api/groupsApi';
+import { Loader } from '../../common/components';
+import { usePageTitle } from '../layout/layoutSlice';
+import { RequestsTab } from './components/RequestsTab';
+import { EditOrganizationDialog } from './components/EditOrganizationDialog';
+import { InviteMemberDialog } from './components/InviteMemberDialog';
+import { MemberManagementActions } from './components/MemberManagementActions';
+
+interface TabPanelProps {
+  children?: React.ReactNode;
+  index: number;
+  value: number;
+}
+
+function TabPanel(props: TabPanelProps) {
+  const { children, value, index, ...other } = props;
+
+  return (
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      id={`org-tabpanel-${index}`}
+      aria-labelledby={`org-tab-${index}`}
+      {...other}
+    >
+      {value === index && <Box sx={{ p: 3 }}>{children}</Box>}
+    </div>
+  );
+}
+
+export const OrganizationDetail: FC = () => {
+  const { orgId } = useParams<{ orgId: string }>();
+  const navigate = useNavigate();
+  const [tabValue, setTabValue] = useState(0);
+  const [editDialogOpen, setEditDialogOpen] = useState(false);
+  const [inviteDialogOpen, setInviteDialogOpen] = useState(false);
+
+  const { data: org, isLoading, error } = getOrganization.useQuery(orgId || '');
+
+  usePageTitle(org?.name || 'Organization');
+
+  const handleTabChange = (_: React.SyntheticEvent, newValue: number) => {
+    setTabValue(newValue);
+  };
+
+  if (isLoading) return <Loader />;
+
+  if (error || !org) {
+    return (
+      <Container>
+        <Typography color="error">Organization not found</Typography>
+        <Button onClick={() => navigate('/orgs')}>Back to Organizations</Button>
+      </Container>
+    );
+  }
+
+  return (
+    <Container maxWidth="xl" sx={{ py: 3 }}>
+      <Stack spacing={3}>
+        <Paper sx={{ p: 3 }}>
+          <Grid container spacing={3} alignItems="center">
+            <Grid item>
+              {org.custom?.logourl ? (
+                <img
+                  src={org.custom.logourl}
+                  alt={`${org.name} logo`}
+                  style={{ width: 80, height: 80, objectFit: 'contain' }}
+                />
+              ) : (
+                <Avatar sx={{ width: 80, height: 80, fontSize: '2rem' }}>
+                  {org.name.charAt(0).toUpperCase()}
+                </Avatar>
+              )}
+            </Grid>
+            <Grid item sx={{ flexGrow: 1 }}>
+              <Stack spacing={1}>
+                <Box display="flex" alignItems="center" gap={2}>
+                  <Typography variant="h4" component="h1">
+                    {org.name}
+                  </Typography>
+                  {org.private && (
+                    <Chip label="Private" color="secondary" size="small" />
+                  )}
+                  <Chip label={org.role} color="primary" size="small" />
+                </Box>
+
+                <Typography variant="body2" color="text.secondary">
+                  Owner: {org.owner.name}
+                </Typography>
+
+                <Stack direction="row" spacing={2}>
+                  <Typography variant="body2">
+                    {org.memcount} members
+                  </Typography>
+                  <Typography variant="body2">
+                    {org.rescount?.workspace || 0} narratives
+                  </Typography>
+                  <Typography variant="body2">
+                    {org.rescount?.catalogmethod || 0} apps
+                  </Typography>
+                </Stack>
+
+                {org.custom?.researchinterests && (
+                  <Typography variant="body1" sx={{ mt: 1 }}>
+                    {org.custom.researchinterests}
+                  </Typography>
+                )}
+
+                {org.custom?.description && (
+                  <Typography variant="body2" color="text.secondary">
+                    {org.custom.description}
+                  </Typography>
+                )}
+
+                {org.custom?.homeurl && (
+                  <Link
+                    href={org.custom.homeurl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    {org.custom.homeurl}
+                  </Link>
+                )}
+              </Stack>
+            </Grid>
+            <Grid item>
+              <Stack spacing={2}>
+                {['Admin', 'Owner'].includes(org.role) && (
+                  <Button
+                    variant="outlined"
+                    size="small"
+                    onClick={() => setEditDialogOpen(true)}
+                  >
+                    Edit Organization
+                  </Button>
+                )}
+                {org.role === 'None' && (
+                  <Button variant="contained" size="small">
+                    Request Membership
+                  </Button>
+                )}
+                {['Admin', 'Owner'].includes(org.role) && (
+                  <Button
+                    variant="outlined"
+                    size="small"
+                    onClick={() => setInviteDialogOpen(true)}
+                  >
+                    Invite Users
+                  </Button>
+                )}
+              </Stack>
+            </Grid>
+          </Grid>
+        </Paper>
+
+        <Paper>
+          <Tabs value={tabValue} onChange={handleTabChange}>
+            <Tab label="Overview" />
+            <Tab label="Members" />
+            <Tab label="Narratives" />
+            <Tab label="Apps" />
+            {['Admin', 'Owner'].includes(org.role) && <Tab label="Requests" />}
+          </Tabs>
+
+          <TabPanel value={tabValue} index={0}>
+            <Grid container spacing={3}>
+              <Grid item xs={12} md={6}>
+                <Card>
+                  <CardContent>
+                    <Typography variant="h6" gutterBottom>
+                      Recent Members
+                    </Typography>
+                    <List dense>
+                      {[
+                        org.owner,
+                        ...org.admins.slice(0, 2),
+                        ...org.members.slice(0, 2),
+                      ].map((member, index) => {
+                        const memberType =
+                          member === org.owner
+                            ? 'owner'
+                            : org.admins.includes(member)
+                            ? 'admin'
+                            : 'member';
+                        return (
+                          <ListItem key={`${member.name}-${index}`}>
+                            <ListItemAvatar>
+                              <Avatar sx={{ width: 32, height: 32 }}>
+                                {member.name.charAt(0)}
+                              </Avatar>
+                            </ListItemAvatar>
+                            <ListItemText
+                              primary={member.name}
+                              secondary={`${memberType} • Joined ${
+                                member.joined
+                                  ? new Date(member.joined).toLocaleDateString()
+                                  : 'N/A'
+                              }`}
+                            />
+                          </ListItem>
+                        );
+                      })}
+                    </List>
+                    {1 + org.admins.length + org.members.length > 5 && (
+                      <Button size="small" onClick={() => setTabValue(1)}>
+                        View all {org.memcount} members
+                      </Button>
+                    )}
+                  </CardContent>
+                </Card>
+              </Grid>
+
+              <Grid item xs={12} md={6}>
+                <Card>
+                  <CardContent>
+                    <Typography variant="h6" gutterBottom>
+                      Recent Narratives
+                    </Typography>
+                    <List dense>
+                      {(org.resources?.workspace || [])
+                        .slice(0, 5)
+                        .map((workspace) => (
+                          <ListItem key={workspace.rid}>
+                            <ListItemText
+                              primary={workspace.rid}
+                              secondary={`Added ${
+                                workspace.added
+                                  ? new Date(
+                                      workspace.added
+                                    ).toLocaleDateString()
+                                  : 'N/A'
+                              }`}
+                            />
+                          </ListItem>
+                        ))}
+                    </List>
+                    {(org.resources?.workspace?.length || 0) > 5 && (
+                      <Button size="small" onClick={() => setTabValue(2)}>
+                        View all {org.rescount?.workspace || 0} narratives
+                      </Button>
+                    )}
+                  </CardContent>
+                </Card>
+              </Grid>
+            </Grid>
+          </TabPanel>
+
+          <TabPanel value={tabValue} index={1}>
+            <Typography variant="h6" gutterBottom>
+              Members ({org.memcount})
+            </Typography>
+            <List>
+              {[
+                { user: org.owner, type: 'owner' },
+                ...org.admins.map((user) => ({ user, type: 'admin' })),
+                ...org.members.map((user) => ({ user, type: 'member' })),
+              ].map(({ user, type }, index) => (
+                <div key={`${user.name}-${index}`}>
+                  <ListItem
+                    secondaryAction={
+                      ['Admin', 'Owner'].includes(org.role) && (
+                        <MemberManagementActions
+                          organization={org}
+                          currentUserRole={org.role}
+                          targetMember={user}
+                          targetMemberRole={
+                            type as 'owner' | 'admin' | 'member'
+                          }
+                        />
+                      )
+                    }
+                  >
+                    <ListItemAvatar>
+                      <Avatar>{user.name.charAt(0)}</Avatar>
+                    </ListItemAvatar>
+                    <ListItemText
+                      primary={user.name}
+                      secondary={`${type} • Joined ${
+                        user.joined
+                          ? new Date(user.joined).toLocaleDateString()
+                          : 'N/A'
+                      }${user.custom?.title ? ` • ${user.custom.title}` : ''}`}
+                    />
+                  </ListItem>
+                  <Divider />
+                </div>
+              ))}
+            </List>
+          </TabPanel>
+
+          <TabPanel value={tabValue} index={2}>
+            <Typography variant="h6" gutterBottom>
+              Narratives ({org.rescount?.workspace || 0})
+            </Typography>
+            <List>
+              {(org.resources?.workspace || []).map((workspace) => (
+                <div key={workspace.rid}>
+                  <ListItem>
+                    <ListItemText
+                      primary={workspace.rid}
+                      secondary={
+                        <Stack direction="row" spacing={1} alignItems="center">
+                          <Typography variant="caption">
+                            Added{' '}
+                            {workspace.added
+                              ? new Date(workspace.added).toLocaleDateString()
+                              : 'N/A'}
+                          </Typography>
+                        </Stack>
+                      }
+                    />
+                  </ListItem>
+                  <Divider />
+                </div>
+              ))}
+            </List>
+          </TabPanel>
+
+          <TabPanel value={tabValue} index={3}>
+            <Typography variant="h6" gutterBottom>
+              Apps ({org.rescount?.catalogmethod || 0})
+            </Typography>
+            <List>
+              {(org.resources?.catalogmethod || []).map((method) => (
+                <div key={method.rid}>
+                  <ListItem>
+                    <ListItemText
+                      primary={method.rid}
+                      secondary={
+                        method.added && (
+                          <Typography variant="caption">
+                            Added {new Date(method.added).toLocaleDateString()}
+                          </Typography>
+                        )
+                      }
+                    />
+                  </ListItem>
+                  <Divider />
+                </div>
+              ))}
+            </List>
+          </TabPanel>
+
+          {['Admin', 'Owner'].includes(org.role) && (
+            <TabPanel value={tabValue} index={4}>
+              <RequestsTab groupId={org.id} />
+            </TabPanel>
+          )}
+        </Paper>
+      </Stack>
+
+      <EditOrganizationDialog
+        open={editDialogOpen}
+        onClose={() => setEditDialogOpen(false)}
+        organization={org}
+      />
+
+      <InviteMemberDialog
+        open={inviteDialogOpen}
+        onClose={() => setInviteDialogOpen(false)}
+        organization={org}
+      />
+    </Container>
+  );
+};
diff --git a/src/features/orgs/Orgs.module.scss b/src/features/orgs/Orgs.module.scss
new file mode 100644
index 00000000..cde3c1c6
--- /dev/null
+++ b/src/features/orgs/Orgs.module.scss
@@ -0,0 +1,3 @@
+/* stylelint-disable selector-class-pattern */
+
+@import "../../common/colors";
diff --git a/src/features/orgs/Orgs.test.tsx b/src/features/orgs/Orgs.test.tsx
new file mode 100644
index 00000000..87749e08
--- /dev/null
+++ b/src/features/orgs/Orgs.test.tsx
@@ -0,0 +1,7 @@
+// Basic test placeholder - will be expanded with proper testing infrastructure
+
+test('Orgs basic test', () => {
+  expect(true).toBe(true);
+});
+
+export {};
diff --git a/src/features/orgs/Orgs.tsx b/src/features/orgs/Orgs.tsx
new file mode 100644
index 00000000..51013c54
--- /dev/null
+++ b/src/features/orgs/Orgs.tsx
@@ -0,0 +1,387 @@
+import {
+  Button,
+  Container,
+  Grid,
+  Paper,
+  Stack,
+  Typography,
+  FormControl,
+  Select,
+  MenuItem,
+  TextField,
+  FormControlLabel,
+  Radio,
+  RadioGroup,
+  Checkbox,
+  FormGroup,
+  Box,
+  Card,
+  CardContent,
+  Chip,
+  Divider,
+} from '@mui/material';
+import { faPlus, faSearch } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { FC, useState, useCallback, useMemo } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { usePageTitle } from '../layout/layoutSlice';
+import {
+  GroupsServiceResponse,
+  Filter,
+  OrganizationQuery,
+  listOrganizations,
+} from '../../common/api/groupsApi';
+import { Loader } from '../../common/components';
+
+export const Orgs: FC = () => {
+  usePageTitle('Organizations');
+  const navigate = useNavigate();
+
+  const [searchText, setSearchText] = useState('');
+  const [sortBy, setSortBy] = useState('recentlyChanged');
+  const [filter, setFilter] = useState<Filter>({
+    roleType: 'myorgs',
+    roles: [],
+    privacy: 'any',
+  });
+  const [showAdvanced, setShowAdvanced] = useState(false);
+
+  const query: OrganizationQuery = useMemo(
+    () => ({
+      searchTerms: searchText.split(/\s+/).filter(Boolean),
+      sortField: sortBy,
+      sortDirection: 'descending' as const,
+      filter,
+    }),
+    [searchText, sortBy, filter]
+  );
+
+  const { data, isLoading, error } = listOrganizations.useQuery(query);
+
+  const handleSearchChange = useCallback((value: string) => {
+    setSearchText(value);
+  }, []);
+
+  const handleSortChange = useCallback((value: string) => {
+    setSortBy(value);
+  }, []);
+
+  const handleFilterChange = useCallback((newFilter: Partial<Filter>) => {
+    setFilter((prev) => ({ ...prev, ...newFilter }));
+  }, []);
+
+  const handleCreateOrg = useCallback(() => {
+    navigate('/orgs/new');
+  }, [navigate]);
+
+  const handleOrgClick = useCallback(
+    (orgId: string) => {
+      navigate(`/orgs/${orgId}`);
+    },
+    [navigate]
+  );
+
+  if (isLoading) return <Loader />;
+
+  if (error) {
+    return (
+      <Container>
+        <Typography color="error">Error loading organizations</Typography>
+      </Container>
+    );
+  }
+
+  return (
+    <Container maxWidth="xl" sx={{ py: 3 }}>
+      <Stack spacing={3}>
+        <Box display="flex" justifyContent="space-between" alignItems="center">
+          <Typography variant="h4" component="h1">
+            Organizations
+          </Typography>
+          <Button
+            variant="contained"
+            startIcon={<FontAwesomeIcon icon={faPlus} />}
+            onClick={handleCreateOrg}
+          >
+            Create Organization
+          </Button>
+        </Box>
+
+        <Typography variant="subtitle1" color="text.secondary">
+          Explore, collaborate, and organize your research with KBase
+          organizations.
+        </Typography>
+
+        <Grid container spacing={3}>
+          <Grid item xs={12} md={9}>
+            <Stack spacing={2}>
+              <Paper sx={{ p: 2 }}>
+                <Stack direction="row" spacing={2} alignItems="center">
+                  <TextField
+                    placeholder="Search Organizations"
+                    value={searchText}
+                    onChange={(e) => handleSearchChange(e.target.value)}
+                    InputProps={{
+                      startAdornment: (
+                        <FontAwesomeIcon
+                          icon={faSearch}
+                          style={{
+                            marginRight: 8,
+                            color: 'rgba(0, 0, 0, 0.38)',
+                          }}
+                        />
+                      ),
+                    }}
+                    size="small"
+                    sx={{ flexGrow: 1 }}
+                  />
+                  <Typography
+                    variant="body2"
+                    color="text.secondary"
+                    sx={{ minWidth: 'max-content' }}
+                  >
+                    {`${data?.length || 0} orgs`}
+                  </Typography>
+                </Stack>
+              </Paper>
+
+              <Grid container spacing={2}>
+                {data?.map((org) => (
+                  <Grid key={org.id} item xs={12} sm={6} md={4}>
+                    <OrganizationCard
+                      org={org}
+                      onClick={() => handleOrgClick(org.id)}
+                    />
+                  </Grid>
+                ))}
+              </Grid>
+
+              {data?.length === 0 && (
+                <Paper sx={{ p: 4, textAlign: 'center' }}>
+                  <Typography variant="h6" gutterBottom>
+                    No organizations found
+                  </Typography>
+                  <Typography color="text.secondary">
+                    Try adjusting your search terms or filters
+                  </Typography>
+                </Paper>
+              )}
+            </Stack>
+          </Grid>
+
+          <Grid item xs={12} md={3}>
+            <Paper sx={{ p: 2 }}>
+              <Stack spacing={3}>
+                <div>
+                  <Typography variant="subtitle2" gutterBottom>
+                    Sort by
+                  </Typography>
+                  <FormControl fullWidth size="small">
+                    <Select
+                      value={sortBy}
+                      onChange={(e) => handleSortChange(e.target.value)}
+                    >
+                      <MenuItem value="recentlyChanged">Date Changed</MenuItem>
+                      <MenuItem value="recentlyAdded">
+                        Date Established
+                      </MenuItem>
+                      <MenuItem value="name">Org Name</MenuItem>
+                      <MenuItem value="memberCount"># members</MenuItem>
+                      <MenuItem value="narrativeCount"># narratives</MenuItem>
+                      <MenuItem value="appCount"># apps</MenuItem>
+                    </Select>
+                  </FormControl>
+                </div>
+
+                <div>
+                  <Typography variant="subtitle2" gutterBottom>
+                    Filter
+                  </Typography>
+                  <RadioGroup
+                    value={filter.roleType}
+                    onChange={(e) =>
+                      handleFilterChange({
+                        roleType: e.target.value as Filter['roleType'],
+                      })
+                    }
+                  >
+                    <FormControlLabel
+                      value="myorgs"
+                      control={<Radio />}
+                      label="My Orgs"
+                    />
+                    <FormControlLabel
+                      value="all"
+                      control={<Radio />}
+                      label="All Orgs"
+                    />
+                    {showAdvanced && (
+                      <>
+                        <FormControlLabel
+                          value="notmyorgs"
+                          control={<Radio />}
+                          label="Not My Orgs"
+                        />
+                        <FormControlLabel
+                          value="select"
+                          control={<Radio />}
+                          label="Specific Role"
+                        />
+                      </>
+                    )}
+                  </RadioGroup>
+
+                  {showAdvanced && filter.roleType === 'select' && (
+                    <FormGroup sx={{ ml: 2, mt: 1 }}>
+                      {['member', 'admin', 'owner'].map((role) => (
+                        <FormControlLabel
+                          key={role}
+                          control={
+                            <Checkbox
+                              checked={filter.roles.includes(role)}
+                              onChange={(e) => {
+                                const newRoles = e.target.checked
+                                  ? [...filter.roles, role]
+                                  : filter.roles.filter((r) => r !== role);
+                                handleFilterChange({ roles: newRoles });
+                              }}
+                            />
+                          }
+                          label={role.charAt(0).toUpperCase() + role.slice(1)}
+                        />
+                      ))}
+                    </FormGroup>
+                  )}
+                </div>
+
+                {showAdvanced && (
+                  <div>
+                    <Typography variant="subtitle2" gutterBottom>
+                      Visibility
+                    </Typography>
+                    <RadioGroup
+                      value={filter.privacy}
+                      onChange={(e) =>
+                        handleFilterChange({
+                          privacy: e.target.value as Filter['privacy'],
+                        })
+                      }
+                    >
+                      <FormControlLabel
+                        value="any"
+                        control={<Radio />}
+                        label="Any"
+                      />
+                      <FormControlLabel
+                        value="public"
+                        control={<Radio />}
+                        label="Visible"
+                      />
+                      <FormControlLabel
+                        value="private"
+                        control={<Radio />}
+                        label="Hidden"
+                      />
+                    </RadioGroup>
+                  </div>
+                )}
+
+                <Button
+                  variant="text"
+                  size="small"
+                  onClick={() => setShowAdvanced(!showAdvanced)}
+                  sx={{ alignSelf: 'flex-start' }}
+                >
+                  {showAdvanced ? 'show fewer options' : 'show more options'}
+                </Button>
+
+                <Divider />
+                <Button
+                  href="https://docs.kbase.us/getting-started/narrative/orgs"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  variant="text"
+                  size="small"
+                  sx={{ alignSelf: 'center' }}
+                >
+                  FAQ
+                </Button>
+              </Stack>
+            </Paper>
+          </Grid>
+        </Grid>
+      </Stack>
+    </Container>
+  );
+};
+
+const OrganizationCard: FC<{
+  org: GroupsServiceResponse;
+  onClick: () => void;
+}> = ({ org, onClick }) => {
+  return (
+    <Card sx={{ height: '100%', cursor: 'pointer' }} onClick={onClick}>
+      <CardContent>
+        <Stack spacing={2}>
+          <Box display="flex" alignItems="center" gap={1}>
+            {org.custom?.logourl && (
+              <img
+                src={org.custom.logourl}
+                alt={`${org.name} logo`}
+                style={{ width: 40, height: 40, objectFit: 'contain' }}
+              />
+            )}
+            <Typography variant="h6" component="h3" sx={{ flexGrow: 1 }}>
+              {org.name}
+            </Typography>
+          </Box>
+
+          <Typography variant="body2" color="text.secondary" noWrap>
+            Owner: {org.owner}
+          </Typography>
+
+          {org.custom?.researchinterests && (
+            <Typography
+              variant="body2"
+              color="text.secondary"
+              sx={{
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                display: '-webkit-box',
+                WebkitLineClamp: 2,
+                WebkitBoxOrient: 'vertical',
+              }}
+            >
+              {org.custom.researchinterests}
+            </Typography>
+          )}
+
+          <Stack direction="row" spacing={1} flexWrap="wrap">
+            <Chip
+              label={`${org.memcount} members`}
+              size="small"
+              variant="outlined"
+            />
+            <Chip
+              label={`${org.rescount?.workspace || 0} narratives`}
+              size="small"
+              variant="outlined"
+            />
+            {org.private && (
+              <Chip label="Private" size="small" color="secondary" />
+            )}
+          </Stack>
+
+          {org.role !== 'None' && (
+            <Chip
+              label={org.role}
+              size="small"
+              color="primary"
+              sx={{ alignSelf: 'flex-start' }}
+            />
+          )}
+        </Stack>
+      </CardContent>
+    </Card>
+  );
+};
diff --git a/src/features/orgs/components/EditOrganizationDialog.tsx b/src/features/orgs/components/EditOrganizationDialog.tsx
new file mode 100644
index 00000000..e8775e9e
--- /dev/null
+++ b/src/features/orgs/components/EditOrganizationDialog.tsx
@@ -0,0 +1,251 @@
+import { FC, useEffect } from 'react';
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  TextField,
+  Button,
+  FormControlLabel,
+  Checkbox,
+  Stack,
+  Box,
+  Alert,
+  Typography,
+} from '@mui/material';
+import { useForm, Controller } from 'react-hook-form';
+import {
+  GroupDetail,
+  UpdateGroupInput,
+  updateGroup,
+} from '../../../common/api/groupsApi';
+
+interface EditOrganizationDialogProps {
+  open: boolean;
+  onClose: () => void;
+  organization: GroupDetail;
+}
+
+export const EditOrganizationDialog: FC<EditOrganizationDialogProps> = ({
+  open,
+  onClose,
+  organization,
+}) => {
+  const [trigger, { isLoading, error, isSuccess }] = updateGroup.useMutation();
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { errors, isDirty },
+  } = useForm<UpdateGroupInput>({
+    mode: 'onBlur',
+  });
+
+  // Reset form when organization changes or dialog opens
+  useEffect(() => {
+    if (open && organization) {
+      reset({
+        name: organization.name,
+        logoUrl: organization.custom?.logourl || '',
+        homeUrl: organization.custom?.homeurl || '',
+        researchInterests: organization.custom?.researchinterests || '',
+        description: organization.custom?.description || '',
+        isPrivate: organization.private,
+      });
+    }
+  }, [open, organization, reset]);
+
+  // Close dialog on successful update
+  useEffect(() => {
+    if (isSuccess) {
+      onClose();
+    }
+  }, [isSuccess, onClose]);
+
+  const isValidUrl = (value: string | undefined): boolean | string => {
+    if (!value) return true; // Allow empty values for optional fields
+    try {
+      new URL(value);
+      return true;
+    } catch (_) {
+      return 'Please enter a valid URL';
+    }
+  };
+
+  const onSubmit = async (data: UpdateGroupInput) => {
+    try {
+      await trigger({ id: organization.id, update: data }).unwrap();
+    } catch (err) {
+      // Error is handled by RTK Query and displayed via the error state
+    }
+  };
+
+  const handleClose = () => {
+    if (!isLoading) {
+      onClose();
+    }
+  };
+
+  return (
+    <Dialog open={open} onClose={handleClose} maxWidth="sm" fullWidth>
+      <DialogTitle>Edit Organization</DialogTitle>
+      <DialogContent>
+        <Stack spacing={3} sx={{ mt: 1 }}>
+          {error && (
+            <Alert severity="error">
+              Failed to update organization. Please try again.
+            </Alert>
+          )}
+
+          <Controller
+            name="name"
+            control={control}
+            rules={{
+              required: 'Organization name is required',
+              maxLength: {
+                value: 100,
+                message: 'Organization name must be less than 100 characters',
+              },
+            }}
+            render={({ field }) => (
+              <TextField
+                {...field}
+                label="Organization Name"
+                error={!!errors.name}
+                helperText={
+                  errors.name?.message || 'Display name for your organization'
+                }
+                required
+                fullWidth
+              />
+            )}
+          />
+
+          <Controller
+            name="logoUrl"
+            control={control}
+            rules={{
+              validate: isValidUrl,
+            }}
+            render={({ field }) => (
+              <TextField
+                {...field}
+                label="Logo URL"
+                error={!!errors.logoUrl}
+                helperText={
+                  errors.logoUrl?.message ||
+                  'URL to your organization logo (optional)'
+                }
+                fullWidth
+              />
+            )}
+          />
+
+          <Controller
+            name="homeUrl"
+            control={control}
+            rules={{
+              validate: isValidUrl,
+            }}
+            render={({ field }) => (
+              <TextField
+                {...field}
+                label="Home Page URL"
+                error={!!errors.homeUrl}
+                helperText={
+                  errors.homeUrl?.message ||
+                  'URL to your organization website (optional)'
+                }
+                fullWidth
+              />
+            )}
+          />
+
+          <Controller
+            name="researchInterests"
+            control={control}
+            rules={{
+              maxLength: {
+                value: 500,
+                message: 'Research interests must be less than 500 characters',
+              },
+            }}
+            render={({ field }) => (
+              <TextField
+                {...field}
+                label="Research Interests"
+                error={!!errors.researchInterests}
+                helperText={
+                  errors.researchInterests?.message ||
+                  'Brief description of your research focus (optional)'
+                }
+                multiline
+                rows={2}
+                fullWidth
+              />
+            )}
+          />
+
+          <Controller
+            name="description"
+            control={control}
+            rules={{
+              maxLength: {
+                value: 1000,
+                message: 'Description must be less than 1000 characters',
+              },
+            }}
+            render={({ field }) => (
+              <TextField
+                {...field}
+                label="Description"
+                error={!!errors.description}
+                helperText={
+                  errors.description?.message ||
+                  'Detailed description of your organization (optional)'
+                }
+                multiline
+                rows={4}
+                fullWidth
+              />
+            )}
+          />
+
+          <Box>
+            <Controller
+              name="isPrivate"
+              control={control}
+              render={({ field }) => (
+                <FormControlLabel
+                  control={<Checkbox {...field} checked={field.value} />}
+                  label="Private Organization"
+                />
+              )}
+            />
+            <Typography
+              variant="caption"
+              color="text.secondary"
+              display="block"
+            >
+              Private organizations are only visible to members. Public
+              organizations can be discovered by anyone.
+            </Typography>
+          </Box>
+        </Stack>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={handleClose} disabled={isLoading}>
+          Cancel
+        </Button>
+        <Button
+          onClick={handleSubmit(onSubmit)}
+          variant="contained"
+          disabled={isLoading || !isDirty}
+        >
+          {isLoading ? 'Saving...' : 'Save Changes'}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
diff --git a/src/features/orgs/components/InviteMemberDialog.tsx b/src/features/orgs/components/InviteMemberDialog.tsx
new file mode 100644
index 00000000..6398cbf3
--- /dev/null
+++ b/src/features/orgs/components/InviteMemberDialog.tsx
@@ -0,0 +1,233 @@
+import { FC, useState, useEffect } from 'react';
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  TextField,
+  Button,
+  Stack,
+  Alert,
+  Typography,
+  FormControl,
+  InputLabel,
+  Select,
+  MenuItem,
+  Box,
+} from '@mui/material';
+import { useForm, Controller } from 'react-hook-form';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faUserPlus } from '@fortawesome/free-solid-svg-icons';
+import { GroupDetail, inviteUser } from '../../../common/api/groupsApi';
+
+interface InviteMemberDialogProps {
+  open: boolean;
+  onClose: () => void;
+  organization: GroupDetail;
+}
+
+interface InviteFormData {
+  username: string;
+  role: 'member' | 'admin';
+  message?: string;
+}
+
+export const InviteMemberDialog: FC<InviteMemberDialogProps> = ({
+  open,
+  onClose,
+  organization,
+}) => {
+  const [trigger, { isLoading, error, isSuccess }] = inviteUser.useMutation();
+  const [showSuccess, setShowSuccess] = useState(false);
+
+  const {
+    control,
+    handleSubmit,
+    reset,
+    watch,
+    formState: { errors },
+  } = useForm<InviteFormData>({
+    defaultValues: {
+      username: '',
+      role: 'member',
+      message: '',
+    },
+    mode: 'onBlur',
+  });
+
+  const username = watch('username');
+
+  // Handle successful invitation
+  useEffect(() => {
+    if (isSuccess) {
+      setShowSuccess(true);
+      reset();
+      setTimeout(() => {
+        setShowSuccess(false);
+        onClose();
+      }, 2000);
+    }
+  }, [isSuccess, reset, onClose]);
+
+  const validateUsername = (value: string): boolean | string => {
+    if (!value.trim()) return 'Username is required';
+
+    // Check if user is already a member
+    const allMembers = [
+      organization.owner.name,
+      ...organization.admins.map((admin) => admin.name),
+      ...organization.members.map((member) => member.name),
+    ];
+
+    if (allMembers.includes(value.trim())) {
+      return 'This user is already a member of the organization';
+    }
+
+    // Basic username validation (alphanumeric, underscore, hyphen)
+    if (!/^[a-zA-Z0-9_-]+$/.test(value.trim())) {
+      return 'Username can only contain letters, numbers, underscores, and hyphens';
+    }
+
+    return true;
+  };
+
+  const onSubmit = async (data: InviteFormData) => {
+    try {
+      await trigger({
+        groupId: organization.id,
+        username: data.username.trim(),
+      }).unwrap();
+    } catch (err) {
+      // Error is handled by RTK Query and displayed via the error state
+    }
+  };
+
+  const handleClose = () => {
+    if (!isLoading && !showSuccess) {
+      reset();
+      onClose();
+    }
+  };
+
+  return (
+    <Dialog open={open} onClose={handleClose} maxWidth="sm" fullWidth>
+      <DialogTitle>
+        <Box display="flex" alignItems="center" gap={1}>
+          <FontAwesomeIcon icon={faUserPlus} />
+          Invite User to {organization.name}
+        </Box>
+      </DialogTitle>
+      <DialogContent>
+        <Stack spacing={3} sx={{ mt: 1 }}>
+          {showSuccess && (
+            <Alert severity="success">
+              Invitation sent successfully! The user will receive a notification
+              and can accept the invitation to join the organization.
+            </Alert>
+          )}
+
+          {error && (
+            <Alert severity="error">
+              Failed to send invitation. Please check the username and try
+              again.
+            </Alert>
+          )}
+
+          <Typography variant="body2" color="text.secondary">
+            Invite a KBase user to join this organization. They will receive a
+            notification and can choose to accept or decline the invitation.
+          </Typography>
+
+          <Controller
+            name="username"
+            control={control}
+            rules={{
+              validate: validateUsername,
+            }}
+            render={({ field }) => (
+              <TextField
+                {...field}
+                label="KBase Username"
+                error={!!errors.username}
+                helperText={
+                  errors.username?.message ||
+                  'Enter the exact KBase username of the person to invite'
+                }
+                required
+                fullWidth
+                autoFocus
+                disabled={isLoading || showSuccess}
+              />
+            )}
+          />
+
+          <Controller
+            name="role"
+            control={control}
+            render={({ field }) => (
+              <FormControl fullWidth disabled={isLoading || showSuccess}>
+                <InputLabel>Initial Role</InputLabel>
+                <Select {...field} label="Initial Role">
+                  <MenuItem value="member">Member</MenuItem>
+                  <MenuItem value="admin">Admin</MenuItem>
+                </Select>
+              </FormControl>
+            )}
+          />
+
+          <Typography variant="caption" color="text.secondary">
+            <strong>Member:</strong> Can view organization content and
+            participate in discussions.
+            <br />
+            <strong>Admin:</strong> Can manage members, approve requests, and
+            edit organization settings.
+            <br />
+            Note: Role can be changed after the invitation is accepted.
+          </Typography>
+
+          <Controller
+            name="message"
+            control={control}
+            rules={{
+              maxLength: {
+                value: 500,
+                message: 'Message must be less than 500 characters',
+              },
+            }}
+            render={({ field }) => (
+              <TextField
+                {...field}
+                label="Personal Message (Optional)"
+                error={!!errors.message}
+                helperText={
+                  errors.message?.message ||
+                  'Add a personal note to the invitation (optional)'
+                }
+                multiline
+                rows={3}
+                fullWidth
+                disabled={isLoading || showSuccess}
+                placeholder="Hi! I'd like to invite you to join our organization..."
+              />
+            )}
+          />
+        </Stack>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={handleClose} disabled={isLoading || showSuccess}>
+          {showSuccess ? 'Close' : 'Cancel'}
+        </Button>
+        {!showSuccess && (
+          <Button
+            onClick={handleSubmit(onSubmit)}
+            variant="contained"
+            disabled={isLoading || !username.trim()}
+            startIcon={<FontAwesomeIcon icon={faUserPlus} />}
+          >
+            {isLoading ? 'Sending Invitation...' : 'Send Invitation'}
+          </Button>
+        )}
+      </DialogActions>
+    </Dialog>
+  );
+};
diff --git a/src/features/orgs/components/MemberManagementActions.tsx b/src/features/orgs/components/MemberManagementActions.tsx
new file mode 100644
index 00000000..62a4168d
--- /dev/null
+++ b/src/features/orgs/components/MemberManagementActions.tsx
@@ -0,0 +1,180 @@
+import { FC, useState } from 'react';
+import {
+  IconButton,
+  Menu,
+  MenuItem,
+  ListItemIcon,
+  ListItemText,
+  Divider,
+} from '@mui/material';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import {
+  faEllipsisV,
+  faUserPlus,
+  faUserMinus,
+  faUserShield,
+  faUserCheck,
+} from '@fortawesome/free-solid-svg-icons';
+import {
+  GroupDetail,
+  GroupUser,
+  memberToAdmin,
+  adminToMember,
+} from '../../../common/api/groupsApi';
+import { InviteMemberDialog } from './InviteMemberDialog';
+import { RemoveMemberDialog } from './RemoveMemberDialog';
+
+interface MemberManagementActionsProps {
+  organization: GroupDetail;
+  currentUserRole: string;
+  targetMember?: GroupUser;
+  targetMemberRole?: 'owner' | 'admin' | 'member';
+  showInviteOnly?: boolean;
+}
+
+export const MemberManagementActions: FC<MemberManagementActionsProps> = ({
+  organization,
+  currentUserRole,
+  targetMember,
+  targetMemberRole,
+  showInviteOnly = false,
+}) => {
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const [inviteDialogOpen, setInviteDialogOpen] = useState(false);
+  const [removeDialogOpen, setRemoveDialogOpen] = useState(false);
+
+  const [promoteToAdmin] = memberToAdmin.useMutation();
+  const [demoteToMember] = adminToMember.useMutation();
+
+  const open = Boolean(anchorEl);
+  const canManageMembers = ['Admin', 'Owner'].includes(currentUserRole);
+  const isOwner = currentUserRole === 'Owner';
+  const isTargetOwner = targetMemberRole === 'owner';
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const handleInviteUser = () => {
+    setInviteDialogOpen(true);
+    handleClose();
+  };
+
+  const handleRemoveMember = () => {
+    setRemoveDialogOpen(true);
+    handleClose();
+  };
+
+  const handlePromoteToAdmin = async () => {
+    if (!targetMember) return;
+    try {
+      await promoteToAdmin({
+        groupId: organization.id,
+        username: targetMember.name,
+      }).unwrap();
+    } catch (err) {
+      // Error handling could be improved with toast notifications
+    }
+    handleClose();
+  };
+
+  const handleDemoteToMember = async () => {
+    if (!targetMember) return;
+    try {
+      await demoteToMember({
+        groupId: organization.id,
+        username: targetMember.name,
+      }).unwrap();
+    } catch (err) {
+      // Error handling could be improved with toast notifications
+    }
+    handleClose();
+  };
+
+  if (!canManageMembers) return null;
+
+  return (
+    <>
+      <IconButton
+        size="small"
+        onClick={handleClick}
+        aria-label="member management actions"
+      >
+        <FontAwesomeIcon icon={faEllipsisV} />
+      </IconButton>
+
+      <Menu
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+        transformOrigin={{ horizontal: 'right', vertical: 'top' }}
+        anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
+      >
+        <MenuItem onClick={handleInviteUser}>
+          <ListItemIcon>
+            <FontAwesomeIcon icon={faUserPlus} fontSize="small" />
+          </ListItemIcon>
+          <ListItemText>Invite User</ListItemText>
+        </MenuItem>
+
+        {!showInviteOnly && targetMember && (
+          <>
+            <Divider />
+
+            {/* Role management options */}
+            {targetMemberRole === 'member' && isOwner && (
+              <MenuItem onClick={handlePromoteToAdmin}>
+                <ListItemIcon>
+                  <FontAwesomeIcon icon={faUserShield} fontSize="small" />
+                </ListItemIcon>
+                <ListItemText>Promote to Admin</ListItemText>
+              </MenuItem>
+            )}
+
+            {targetMemberRole === 'admin' && isOwner && (
+              <MenuItem onClick={handleDemoteToMember}>
+                <ListItemIcon>
+                  <FontAwesomeIcon icon={faUserCheck} fontSize="small" />
+                </ListItemIcon>
+                <ListItemText>Demote to Member</ListItemText>
+              </MenuItem>
+            )}
+
+            {/* Remove member option */}
+            {!isTargetOwner && (
+              <MenuItem
+                onClick={handleRemoveMember}
+                sx={{ color: 'error.main' }}
+              >
+                <ListItemIcon>
+                  <FontAwesomeIcon icon={faUserMinus} fontSize="small" />
+                </ListItemIcon>
+                <ListItemText>Remove Member</ListItemText>
+              </MenuItem>
+            )}
+          </>
+        )}
+      </Menu>
+
+      <InviteMemberDialog
+        open={inviteDialogOpen}
+        onClose={() => setInviteDialogOpen(false)}
+        organization={organization}
+      />
+
+      {targetMember && (
+        <RemoveMemberDialog
+          open={removeDialogOpen}
+          onClose={() => setRemoveDialogOpen(false)}
+          organization={organization}
+          memberToRemove={targetMember}
+          memberRole={targetMemberRole === 'admin' ? 'admin' : 'member'}
+        />
+      )}
+    </>
+  );
+};
diff --git a/src/features/orgs/components/RemoveMemberDialog.tsx b/src/features/orgs/components/RemoveMemberDialog.tsx
new file mode 100644
index 00000000..888a4a0e
--- /dev/null
+++ b/src/features/orgs/components/RemoveMemberDialog.tsx
@@ -0,0 +1,199 @@
+import { FC, useState, useEffect } from 'react';
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Button,
+  Stack,
+  Alert,
+  Typography,
+  Box,
+  Avatar,
+  Chip,
+} from '@mui/material';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import {
+  faUserMinus,
+  faExclamationTriangle,
+} from '@fortawesome/free-solid-svg-icons';
+import {
+  GroupDetail,
+  GroupUser,
+  removeMember,
+} from '../../../common/api/groupsApi';
+
+interface RemoveMemberDialogProps {
+  open: boolean;
+  onClose: () => void;
+  organization: GroupDetail;
+  memberToRemove: GroupUser | null;
+  memberRole: 'admin' | 'member';
+}
+
+export const RemoveMemberDialog: FC<RemoveMemberDialogProps> = ({
+  open,
+  onClose,
+  organization,
+  memberToRemove,
+  memberRole,
+}) => {
+  const [trigger, { isLoading, error, isSuccess }] = removeMember.useMutation();
+  const [showSuccess, setShowSuccess] = useState(false);
+
+  // Handle successful removal
+  useEffect(() => {
+    if (isSuccess) {
+      setShowSuccess(true);
+      setTimeout(() => {
+        setShowSuccess(false);
+        onClose();
+      }, 2000);
+    }
+  }, [isSuccess, onClose]);
+
+  const handleRemove = async () => {
+    if (!memberToRemove) return;
+
+    try {
+      await trigger({
+        groupId: organization.id,
+        username: memberToRemove.name,
+      }).unwrap();
+    } catch (err) {
+      // Error is handled by RTK Query and displayed via the error state
+    }
+  };
+
+  const handleClose = () => {
+    if (!isLoading && !showSuccess) {
+      onClose();
+    }
+  };
+
+  if (!memberToRemove) return null;
+
+  const isOwner = memberToRemove.name === organization.owner.name;
+  const isLastAdmin =
+    memberRole === 'admin' && organization.admins.length === 1;
+
+  // Prevent removal of owner or last admin
+  if (isOwner) {
+    return (
+      <Dialog open={open} onClose={handleClose} maxWidth="sm" fullWidth>
+        <DialogTitle>
+          <Box display="flex" alignItems="center" gap={1}>
+            <FontAwesomeIcon icon={faExclamationTriangle} color="orange" />
+            Cannot Remove Owner
+          </Box>
+        </DialogTitle>
+        <DialogContent>
+          <Alert severity="warning">
+            The organization owner cannot be removed. To remove this user, you
+            must first transfer ownership to another admin.
+          </Alert>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleClose}>Close</Button>
+        </DialogActions>
+      </Dialog>
+    );
+  }
+
+  return (
+    <Dialog open={open} onClose={handleClose} maxWidth="sm" fullWidth>
+      <DialogTitle>
+        <Box display="flex" alignItems="center" gap={1}>
+          <FontAwesomeIcon icon={faUserMinus} />
+          Remove Member
+        </Box>
+      </DialogTitle>
+      <DialogContent>
+        <Stack spacing={3}>
+          {showSuccess && (
+            <Alert severity="success">
+              {memberToRemove.name} has been successfully removed from the
+              organization.
+            </Alert>
+          )}
+
+          {error && (
+            <Alert severity="error">
+              Failed to remove member. Please try again.
+            </Alert>
+          )}
+
+          {!showSuccess && (
+            <>
+              <Box display="flex" alignItems="center" gap={2}>
+                <Avatar>{memberToRemove.name.charAt(0).toUpperCase()}</Avatar>
+                <Box>
+                  <Typography variant="h6">{memberToRemove.name}</Typography>
+                  <Chip
+                    label={memberRole}
+                    size="small"
+                    color={memberRole === 'admin' ? 'primary' : 'default'}
+                  />
+                </Box>
+              </Box>
+
+              <Alert severity="warning">
+                Are you sure you want to remove{' '}
+                <strong>{memberToRemove.name}</strong> from{' '}
+                <strong>{organization.name}</strong>?
+              </Alert>
+
+              <Typography variant="body2" color="text.secondary">
+                <strong>This action will:</strong>
+              </Typography>
+              <Box component="ul" sx={{ mt: 1, pl: 2 }}>
+                <li>
+                  Remove {memberToRemove.name} from the organization immediately
+                </li>
+                <li>Revoke their access to all organization resources</li>
+                <li>
+                  Remove them from organization discussions and notifications
+                </li>
+                {memberRole === 'admin' && (
+                  <li>
+                    Remove their admin privileges and management permissions
+                  </li>
+                )}
+              </Box>
+
+              {isLastAdmin && (
+                <Alert severity="error">
+                  <strong>Warning:</strong> This is the last admin in the
+                  organization. Removing them will leave no administrators to
+                  manage the organization. Consider promoting another member to
+                  admin first.
+                </Alert>
+              )}
+
+              <Typography variant="body2" color="text.secondary">
+                <strong>Note:</strong> The user can request to rejoin the
+                organization later, but they will need to be re-approved.
+              </Typography>
+            </>
+          )}
+        </Stack>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={handleClose} disabled={isLoading}>
+          {showSuccess ? 'Close' : 'Cancel'}
+        </Button>
+        {!showSuccess && (
+          <Button
+            onClick={handleRemove}
+            variant="contained"
+            color="error"
+            disabled={isLoading || isLastAdmin}
+            startIcon={<FontAwesomeIcon icon={faUserMinus} />}
+          >
+            {isLoading ? 'Removing...' : 'Remove Member'}
+          </Button>
+        )}
+      </DialogActions>
+    </Dialog>
+  );
+};
diff --git a/src/features/orgs/components/RequestInbox.tsx b/src/features/orgs/components/RequestInbox.tsx
new file mode 100644
index 00000000..820fa52c
--- /dev/null
+++ b/src/features/orgs/components/RequestInbox.tsx
@@ -0,0 +1,172 @@
+import { FC, useState } from 'react';
+import {
+  Box,
+  Typography,
+  List,
+  Avatar,
+  Button,
+  Card,
+  CardContent,
+  Stack,
+  Chip,
+  Alert,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  DialogContentText,
+  Divider,
+} from '@mui/material';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faUserPlus } from '@fortawesome/free-solid-svg-icons';
+import {
+  GroupRequest,
+  acceptRequest,
+  denyRequest,
+} from '../../../common/api/groupsApi';
+
+interface RequestInboxProps {
+  groupId: string;
+  requests: GroupRequest[];
+}
+
+export const RequestInbox: FC<RequestInboxProps> = ({ groupId, requests }) => {
+  const [selectedRequest, setSelectedRequest] = useState<GroupRequest | null>(
+    null
+  );
+  const [actionType, setActionType] = useState<'approve' | 'deny' | null>(null);
+  const [dialogOpen, setDialogOpen] = useState(false);
+
+  const [approveRequestMutation] = acceptRequest.useMutation();
+  const [denyRequestMutation] = denyRequest.useMutation();
+
+  const pendingRequests = requests.filter((req) => req.status === 'pending');
+
+  const handleAction = (request: GroupRequest, action: 'approve' | 'deny') => {
+    setSelectedRequest(request);
+    setActionType(action);
+    setDialogOpen(true);
+  };
+
+  const handleConfirmAction = async () => {
+    if (!selectedRequest || !actionType) return;
+
+    try {
+      if (actionType === 'approve') {
+        await approveRequestMutation(selectedRequest.id).unwrap();
+      } else {
+        await denyRequestMutation(selectedRequest.id).unwrap();
+      }
+      setDialogOpen(false);
+      setSelectedRequest(null);
+      setActionType(null);
+    } catch (error) {
+      // TODO: Add proper error handling with toast notification
+    }
+  };
+
+  const handleCancelAction = () => {
+    setDialogOpen(false);
+    setSelectedRequest(null);
+    setActionType(null);
+  };
+
+  const formatDate = (dateString: string) => {
+    try {
+      return new Date(dateString).toLocaleDateString();
+    } catch {
+      return 'N/A';
+    }
+  };
+
+  if (pendingRequests.length === 0) {
+    return (
+      <Box sx={{ p: 2 }}>
+        <Alert severity="info">
+          No pending membership requests for this organization.
+        </Alert>
+      </Box>
+    );
+  }
+
+  return (
+    <Box sx={{ p: 2 }}>
+      <Typography variant="h6" gutterBottom>
+        Pending Membership Requests ({pendingRequests.length})
+      </Typography>
+
+      <List>
+        {pendingRequests.map((request, index) => (
+          <Card key={request.id} sx={{ mb: 2 }}>
+            <CardContent>
+              <Stack direction="row" spacing={2} alignItems="center">
+                <Avatar>
+                  <FontAwesomeIcon icon={faUserPlus} />
+                </Avatar>
+
+                <Box sx={{ flexGrow: 1 }}>
+                  <Typography variant="subtitle1" fontWeight="medium">
+                    {request.requester}
+                  </Typography>
+                  <Typography variant="body2" color="text.secondary">
+                    Requested membership on {formatDate(request.createdAt)}
+                  </Typography>
+                  <Stack direction="row" spacing={1} sx={{ mt: 1 }}>
+                    <Chip label={request.type} size="small" color="primary" />
+                    <Chip label={request.status} size="small" color="warning" />
+                  </Stack>
+                </Box>
+
+                <Stack direction="row" spacing={1}>
+                  <Button
+                    variant="contained"
+                    color="success"
+                    size="small"
+                    onClick={() => handleAction(request, 'approve')}
+                  >
+                    Approve
+                  </Button>
+                  <Button
+                    variant="outlined"
+                    color="error"
+                    size="small"
+                    onClick={() => handleAction(request, 'deny')}
+                  >
+                    Deny
+                  </Button>
+                </Stack>
+              </Stack>
+            </CardContent>
+            {index < pendingRequests.length - 1 && <Divider />}
+          </Card>
+        ))}
+      </List>
+
+      <Dialog open={dialogOpen} onClose={handleCancelAction}>
+        <DialogTitle>
+          {actionType === 'approve' ? 'Approve Request' : 'Deny Request'}
+        </DialogTitle>
+        <DialogContent>
+          <DialogContentText>
+            Are you sure you want to {actionType} the membership request from{' '}
+            <strong>{selectedRequest?.requester}</strong>?
+            {actionType === 'approve' &&
+              ' This will grant them member access to the organization.'}
+            {actionType === 'deny' &&
+              ' This action cannot be undone and the user will need to request membership again.'}
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleCancelAction}>Cancel</Button>
+          <Button
+            onClick={handleConfirmAction}
+            color={actionType === 'approve' ? 'success' : 'error'}
+            variant="contained"
+          >
+            {actionType === 'approve' ? 'Approve Request' : 'Deny Request'}
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </Box>
+  );
+};
diff --git a/src/features/orgs/components/RequestOutbox.tsx b/src/features/orgs/components/RequestOutbox.tsx
new file mode 100644
index 00000000..5232aa23
--- /dev/null
+++ b/src/features/orgs/components/RequestOutbox.tsx
@@ -0,0 +1,192 @@
+import { FC, useState } from 'react';
+import {
+  Box,
+  Typography,
+  List,
+  Avatar,
+  Button,
+  Card,
+  CardContent,
+  Stack,
+  Chip,
+  Alert,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  DialogContentText,
+  Divider,
+} from '@mui/material';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faUserPlus, faTimes } from '@fortawesome/free-solid-svg-icons';
+import { GroupRequest, cancelRequest } from '../../../common/api/groupsApi';
+
+interface RequestOutboxProps {
+  groupId: string;
+  requests: GroupRequest[];
+}
+
+export const RequestOutbox: FC<RequestOutboxProps> = ({
+  groupId,
+  requests,
+}) => {
+  const [selectedRequest, setSelectedRequest] = useState<GroupRequest | null>(
+    null
+  );
+  const [cancelDialogOpen, setCancelDialogOpen] = useState(false);
+
+  const [cancelRequestMutation] = cancelRequest.useMutation();
+
+  const outgoingRequests = requests.filter((req) => req.groupId === groupId);
+
+  const handleCancelRequest = (request: GroupRequest) => {
+    setSelectedRequest(request);
+    setCancelDialogOpen(true);
+  };
+
+  const handleConfirmCancel = async () => {
+    if (!selectedRequest) return;
+
+    try {
+      await cancelRequestMutation(selectedRequest.id).unwrap();
+      setCancelDialogOpen(false);
+      setSelectedRequest(null);
+    } catch (error) {
+      // TODO: Add proper error handling with toast notification
+    }
+  };
+
+  const handleCancelDialog = () => {
+    setCancelDialogOpen(false);
+    setSelectedRequest(null);
+  };
+
+  const formatDate = (dateString: string) => {
+    try {
+      return new Date(dateString).toLocaleDateString();
+    } catch {
+      return 'N/A';
+    }
+  };
+
+  const getStatusColor = (
+    status: string
+  ): 'warning' | 'success' | 'error' | 'default' => {
+    switch (status.toLowerCase()) {
+      case 'pending':
+        return 'warning';
+      case 'accepted':
+        return 'success';
+      case 'denied':
+        return 'error';
+      case 'expired':
+        return 'default';
+      default:
+        return 'default';
+    }
+  };
+
+  const getRequestTypeLabel = (type: string) => {
+    switch (type.toLowerCase()) {
+      case 'invite':
+        return 'Invitation';
+      case 'request':
+        return 'Join Request';
+      default:
+        return type;
+    }
+  };
+
+  if (outgoingRequests.length === 0) {
+    return (
+      <Box sx={{ p: 2 }}>
+        <Alert severity="info">
+          No outgoing invitations or requests for this organization.
+        </Alert>
+      </Box>
+    );
+  }
+
+  return (
+    <Box sx={{ p: 2 }}>
+      <Typography variant="h6" gutterBottom>
+        Outgoing Invitations & Requests ({outgoingRequests.length})
+      </Typography>
+
+      <List>
+        {outgoingRequests.map((request, index) => (
+          <Card key={request.id} sx={{ mb: 2 }}>
+            <CardContent>
+              <Stack direction="row" spacing={2} alignItems="center">
+                <Avatar>
+                  <FontAwesomeIcon icon={faUserPlus} />
+                </Avatar>
+
+                <Box sx={{ flexGrow: 1 }}>
+                  <Typography variant="subtitle1" fontWeight="medium">
+                    {request.type === 'invite'
+                      ? `Invitation to ${request.requester}`
+                      : `Request from ${request.requester}`}
+                  </Typography>
+                  <Typography variant="body2" color="text.secondary">
+                    {request.type === 'invite' ? 'Sent' : 'Created'} on{' '}
+                    {formatDate(request.createdAt)}
+                    {request.expiredAt && (
+                      <span> • Expires on {formatDate(request.expiredAt)}</span>
+                    )}
+                  </Typography>
+                  <Stack direction="row" spacing={1} sx={{ mt: 1 }}>
+                    <Chip
+                      label={getRequestTypeLabel(request.type)}
+                      size="small"
+                      color="primary"
+                    />
+                    <Chip
+                      label={request.status}
+                      size="small"
+                      color={getStatusColor(request.status)}
+                    />
+                  </Stack>
+                </Box>
+
+                {request.status === 'pending' && (
+                  <Button
+                    variant="outlined"
+                    color="error"
+                    size="small"
+                    startIcon={<FontAwesomeIcon icon={faTimes} />}
+                    onClick={() => handleCancelRequest(request)}
+                  >
+                    Cancel
+                  </Button>
+                )}
+              </Stack>
+            </CardContent>
+            {index < outgoingRequests.length - 1 && <Divider />}
+          </Card>
+        ))}
+      </List>
+
+      <Dialog open={cancelDialogOpen} onClose={handleCancelDialog}>
+        <DialogTitle>Cancel Request</DialogTitle>
+        <DialogContent>
+          <DialogContentText>
+            Are you sure you want to cancel this{' '}
+            {selectedRequest?.type === 'invite' ? 'invitation' : 'request'}?
+            This action cannot be undone.
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleCancelDialog}>Keep Request</Button>
+          <Button
+            onClick={handleConfirmCancel}
+            color="error"
+            variant="contained"
+          >
+            Cancel Request
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </Box>
+  );
+};
diff --git a/src/features/orgs/components/RequestsTab.tsx b/src/features/orgs/components/RequestsTab.tsx
new file mode 100644
index 00000000..0f256a7a
--- /dev/null
+++ b/src/features/orgs/components/RequestsTab.tsx
@@ -0,0 +1,81 @@
+import { FC, useState } from 'react';
+import { Box, Tabs, Tab, Badge } from '@mui/material';
+import { RequestInbox } from './RequestInbox';
+import { RequestOutbox } from './RequestOutbox';
+import {
+  getRequests,
+  getUserOutgoingRequests,
+} from '../../../common/api/groupsApi';
+
+interface TabPanelProps {
+  children?: React.ReactNode;
+  index: number;
+  value: number;
+}
+
+function TabPanel(props: TabPanelProps) {
+  const { children, value, index, ...other } = props;
+
+  return (
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      id={`requests-tabpanel-${index}`}
+      aria-labelledby={`requests-tab-${index}`}
+      {...other}
+    >
+      {value === index && <Box>{children}</Box>}
+    </div>
+  );
+}
+
+interface RequestsTabProps {
+  groupId: string;
+}
+
+export const RequestsTab: FC<RequestsTabProps> = ({ groupId }) => {
+  const [tabValue, setTabValue] = useState(0);
+
+  const { data: incomingRequests = [] } = getRequests.useQuery(groupId);
+  const { data: outgoingRequests = [] } = getUserOutgoingRequests.useQuery();
+
+  const handleTabChange = (_: React.SyntheticEvent, newValue: number) => {
+    setTabValue(newValue);
+  };
+
+  const pendingIncoming = incomingRequests.filter(
+    (req) => req.status === 'pending'
+  ).length;
+  const pendingOutgoing = outgoingRequests.filter(
+    (req) => req.groupId === groupId && req.status === 'pending'
+  ).length;
+
+  return (
+    <Box>
+      <Tabs value={tabValue} onChange={handleTabChange}>
+        <Tab
+          label={
+            <Badge badgeContent={pendingIncoming} color="error">
+              Inbox
+            </Badge>
+          }
+        />
+        <Tab
+          label={
+            <Badge badgeContent={pendingOutgoing} color="warning">
+              Outbox
+            </Badge>
+          }
+        />
+      </Tabs>
+
+      <TabPanel value={tabValue} index={0}>
+        <RequestInbox groupId={groupId} requests={incomingRequests} />
+      </TabPanel>
+
+      <TabPanel value={tabValue} index={1}>
+        <RequestOutbox groupId={groupId} requests={outgoingRequests} />
+      </TabPanel>
+    </Box>
+  );
+};
diff --git a/src/features/orgs/index.tsx b/src/features/orgs/index.tsx
new file mode 100644
index 00000000..33d8c44e
--- /dev/null
+++ b/src/features/orgs/index.tsx
@@ -0,0 +1,3 @@
+export { Orgs } from './Orgs';
+export { OrganizationDetail } from './OrganizationDetail';
+export { CreateOrganization } from './CreateOrganization';