diff --git a/src/apis/workspace/workspace.queries.ts b/src/apis/workspace/workspace.queries.ts
index 76bd577..27d7b00 100644
--- a/src/apis/workspace/workspace.queries.ts
+++ b/src/apis/workspace/workspace.queries.ts
@@ -4,6 +4,7 @@ import { workspaceService } from './workspace.service';
 import {
   CreateWorkspaceRequest,
   InviteWorkspaceRequest,
+  UpdateWorkspaceSettingsRequest,
   WorkspaceMemberStatus,
 } from './workspace.type';
 
@@ -66,6 +67,18 @@ export const useGetAdminName = (workspaceId: number) => {
   });
 };
 
+export const useGetWorkspaceMembers = (workspaceId: number, status: WorkspaceMemberStatus) => {
+  const { data: session } = useSession();
+  const accessToken = session?.accessToken as string | undefined;
+
+  return useQuery({
+    queryKey: workspaceKeys.members(workspaceId, status),
+    queryFn: () => workspaceService.getWorkspaceMembers(workspaceId, status, accessToken!),
+    enabled: !!accessToken && !!workspaceId,
+    staleTime: 1000 * 60 * 5,
+  });
+};
+
 export const useCreateWorkspace = () => {
   const { data: session } = useSession();
   const accessToken = session?.accessToken as string | undefined;
@@ -123,14 +136,41 @@ export const useRejectInvitation = () => {
   });
 };
 
-export const useGetWorkspaceMembers = (workspaceId: number, status: WorkspaceMemberStatus) => {
+export const useUpdateWorkspaceSettings = (workspaceId: number) => {
   const { data: session } = useSession();
   const accessToken = session?.accessToken as string | undefined;
+  const queryClient = useQueryClient();
 
-  return useQuery({
-    queryKey: workspaceKeys.members(workspaceId, status),
-    queryFn: () => workspaceService.getWorkspaceMembers(workspaceId, status, accessToken!),
-    enabled: !!accessToken && !!workspaceId,
-    staleTime: 1000 * 60 * 5,
+  return useMutation({
+    mutationFn: (body: UpdateWorkspaceSettingsRequest) =>
+      workspaceService.updateWorkspaceSettings(workspaceId, body, accessToken!),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: workspaceKeys.detail(workspaceId) });
+      queryClient.invalidateQueries({ queryKey: workspaceKeys.my });
+    },
+  });
+};
+
+export const useDeleteWorkspaceMember = (workspaceId: number) => {
+  const { data: session } = useSession();
+  const accessToken = session?.accessToken as string | undefined;
+
+  return useMutation({
+    mutationFn: (userId: number) =>
+      workspaceService.deleteWorkspaceMember(workspaceId, userId, accessToken!),
+  });
+};
+
+export const useDeleteWorkspace = () => {
+  const { data: session } = useSession();
+  const accessToken = session?.accessToken as string | undefined;
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (workspaceId: number) =>
+      workspaceService.deleteWorkspace(workspaceId, accessToken!),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: workspaceKeys.my });
+    },
   });
 };
diff --git a/src/apis/workspace/workspace.service.ts b/src/apis/workspace/workspace.service.ts
index 338e1c4..0710562 100644
--- a/src/apis/workspace/workspace.service.ts
+++ b/src/apis/workspace/workspace.service.ts
@@ -10,6 +10,10 @@ import {
   AdminNameResponse,
   WorkspaceMembersResponse,
   WorkspaceMemberStatus,
+  UpdateWorkspaceSettingsRequest,
+  UpdateWorkspaceSettingsResponse,
+  DeleteWorkspaceMemberResponse,
+  DeleteWorkspaceResponse,
 } from './workspace.type';
 
 const BASE_URL = process.env.NEXT_PUBLIC_API_URL;
@@ -133,4 +137,55 @@ export const workspaceService = {
     if (!res.ok) throw new Error('멤버 목록 조회에 실패했습니다.');
     return res.json();
   },
+
+  updateWorkspaceSettings: async (
+    workspaceId: number,
+    body: UpdateWorkspaceSettingsRequest,
+    accessToken: string,
+  ): Promise<UpdateWorkspaceSettingsResponse> => {
+    const res = await fetch(`${BASE_URL}/api/v1/workspaces/${workspaceId}/settings`, {
+      method: 'PATCH',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${accessToken}`,
+      },
+      body: JSON.stringify(body),
+    });
+
+    if (res.status === 403) throw new Error('수정 권한이 없습니다.');
+    if (res.status === 404) throw new Error('워크스페이스를 찾을 수 없습니다.');
+    if (!res.ok) throw new Error('워크스페이스 설정 수정에 실패했습니다.');
+    return res.json();
+  },
+
+  deleteWorkspaceMember: async (
+    workspaceId: number,
+    userId: number,
+    accessToken: string,
+  ): Promise<DeleteWorkspaceMemberResponse> => {
+    const res = await fetch(`${BASE_URL}/api/v1/workspaces/${workspaceId}/members/${userId}`, {
+      method: 'DELETE',
+      headers: { Authorization: `Bearer ${accessToken}` },
+    });
+
+    if (res.status === 403) throw new Error('강퇴 권한이 없습니다.');
+    if (res.status === 404) throw new Error('멤버를 찾을 수 없습니다.');
+    if (!res.ok) throw new Error('멤버 강퇴에 실패했습니다.');
+    return res.json();
+  },
+
+  deleteWorkspace: async (
+    workspaceId: number,
+    accessToken: string,
+  ): Promise<DeleteWorkspaceResponse> => {
+    const res = await fetch(`${BASE_URL}/api/v1/workspaces/${workspaceId}`, {
+      method: 'DELETE',
+      headers: { Authorization: `Bearer ${accessToken}` },
+    });
+
+    if (res.status === 403) throw new Error('삭제 권한이 없습니다.');
+    if (res.status === 404) throw new Error('워크스페이스를 찾을 수 없습니다.');
+    if (!res.ok) throw new Error('워크스페이스 삭제에 실패했습니다.');
+    return res.json();
+  },
 };
diff --git a/src/apis/workspace/workspace.type.ts b/src/apis/workspace/workspace.type.ts
index 42905cd..a178b08 100644
--- a/src/apis/workspace/workspace.type.ts
+++ b/src/apis/workspace/workspace.type.ts
@@ -121,3 +121,35 @@ export interface WorkspaceMembersResponse {
     traceId: string;
   };
 }
+
+export interface UpdateWorkspaceSettingsRequest {
+  name: string;
+  color: string;
+}
+
+export interface UpdateWorkspaceSettingsResponse {
+  success: boolean;
+  data: null;
+  meta: {
+    timestamp: string;
+    traceId: string;
+  };
+}
+
+export interface DeleteWorkspaceMemberResponse {
+  success: boolean;
+  data: null;
+  meta: {
+    timestamp: string;
+    traceId: string;
+  };
+}
+
+export interface DeleteWorkspaceResponse {
+  success: boolean;
+  data: null;
+  meta: {
+    timestamp: string;
+    traceId: string;
+  };
+}
diff --git a/src/app/(after-login)/mypage/page.tsx b/src/app/(after-login)/mypage/page.tsx
index 98e6d51..38276bc 100644
--- a/src/app/(after-login)/mypage/page.tsx
+++ b/src/app/(after-login)/mypage/page.tsx
@@ -157,7 +157,7 @@ export default function Page() {
   };
 
   return (
-    <div className='mb-12 w-full max-w-3xl p-3 md:p-5'>
+    <div className='mb-12 w-full max-w-3xl px-6 py-3 md:px-10 md:py-5'>
       <button
         onClick={() => router.back()}
         className='text-md mb-3 flex cursor-pointer items-center gap-2 font-medium text-gray-400 transition-all duration-200 hover:text-gray-500 md:mb-5 md:text-lg'
diff --git a/src/app/(after-login)/workspace/[workspaceId]/settings/page.tsx b/src/app/(after-login)/workspace/[workspaceId]/settings/page.tsx
index 5906acd..bf255d2 100644
--- a/src/app/(after-login)/workspace/[workspaceId]/settings/page.tsx
+++ b/src/app/(after-login)/workspace/[workspaceId]/settings/page.tsx
@@ -1,3 +1,295 @@
+'use client';
+
+import { useState } from 'react';
+import { toast } from 'react-toastify';
+import { useParams, useRouter } from 'next/navigation';
+import {
+  useGetWorkspace,
+  useGetWorkspaceMembers,
+  useUpdateWorkspaceSettings,
+  useDeleteWorkspaceMember,
+  useDeleteWorkspace,
+} from '@/apis/workspace/workspace.queries';
+import { WorkspaceMember } from '@/apis/workspace/workspace.type';
+import Avatar from '@/components/Avatar';
+import Button from '@/components/Buttons';
+import ColorChips from '@/components/ColorChips';
+import Icon from '@/components/Icon';
+import Input from '@/components/Input';
+import ConfirmModal from '@/components/modal/contents/ConfirmModal';
+import InviteModal from '@/components/modal/contents/InviteModal';
+import Modal from '@/components/modal/Modal';
+
 export default function Page() {
-  return <div>워크스페이스 관리 페이지</div>;
+  const params = useParams();
+  const router = useRouter();
+  const workspaceId = Number(
+    Array.isArray(params?.workspaceId) ? params.workspaceId[0] : params?.workspaceId,
+  );
+
+  const { data: workspaceData } = useGetWorkspace(workspaceId);
+  const workspace = workspaceData?.data;
+
+  const [name, setName] = useState<string | undefined>(undefined);
+  const [color, setColor] = useState<string | undefined>(undefined);
+
+  const initializedRef = useState(false);
+  if (workspace && !initializedRef[0]) {
+    initializedRef[1](true);
+    if (name === undefined) setName(workspace.workspaceName);
+    if (color === undefined) setColor(workspace.color);
+  }
+
+  const currentName = name ?? workspace?.workspaceName ?? '';
+  const currentColor = color ?? workspace?.color ?? 'GREEN';
+
+  const isSettingsChanged =
+    workspace != null &&
+    (currentName !== workspace.workspaceName || currentColor !== workspace.color);
+
+  const { mutate: updateSettings, isPending: isUpdating } = useUpdateWorkspaceSettings(workspaceId);
+
+  const handleUpdateSettings = () => {
+    updateSettings(
+      { name: currentName, color: currentColor },
+      {
+        onSuccess: () => {
+          toast.success('워크스페이스 설정이 변경되었습니다.');
+        },
+        onError: (error: Error) => {
+          toast.error(error.message || '워크스페이스 설정 변경에 실패했습니다.');
+        },
+      },
+    );
+  };
+
+  const { data: membersData } = useGetWorkspaceMembers(workspaceId, 'ACCEPTED');
+  const [kickedIds, setKickedIds] = useState<number[]>([]);
+  const members: WorkspaceMember[] = (membersData?.data ?? []).filter(
+    (m: WorkspaceMember) => !kickedIds.includes(m.userId),
+  );
+
+  const [kickTarget, setKickTarget] = useState<WorkspaceMember | null>(null);
+  const { mutate: deleteMember } = useDeleteWorkspaceMember(workspaceId);
+
+  const handleKickMember = async (member: WorkspaceMember) => {
+    return new Promise<void>((resolve, reject) => {
+      deleteMember(member.userId, {
+        onSuccess: () => {
+          setKickedIds((prev) => [...prev, member.userId]);
+          toast.success(`${member.name}님을 강퇴했습니다.`);
+          resolve();
+        },
+        onError: (error: Error) => {
+          toast.error(error.message || '멤버 강퇴에 실패했습니다.');
+          reject(error);
+        },
+      });
+    });
+  };
+
+  const { data: pendingData } = useGetWorkspaceMembers(workspaceId, 'PENDING');
+  const [cancelledIds, setCancelledIds] = useState<number[]>([]);
+  const pendingMembers: WorkspaceMember[] = (pendingData?.data ?? []).filter(
+    (m: WorkspaceMember) => !cancelledIds.includes(m.userId),
+  );
+
+  const [cancelTarget, setCancelTarget] = useState<WorkspaceMember | null>(null);
+  const [showInviteModal, setShowInviteModal] = useState(false);
+  const { mutate: cancelInvite } = useDeleteWorkspaceMember(workspaceId);
+
+  const handleCancelInvite = async (member: WorkspaceMember) => {
+    return new Promise<void>((resolve, reject) => {
+      cancelInvite(member.userId, {
+        onSuccess: () => {
+          setCancelledIds((prev) => [...prev, member.userId]);
+          toast.success('초대를 취소했습니다.');
+          resolve();
+        },
+        onError: (error: Error) => {
+          toast.error(error.message || '초대 취소에 실패했습니다.');
+          reject(error);
+        },
+      });
+    });
+  };
+
+  const [showDeleteWorkspaceModal, setShowDeleteWorkspaceModal] = useState(false);
+  const { mutate: deleteWorkspace } = useDeleteWorkspace();
+
+  const handleDeleteWorkspace = async () => {
+    return new Promise<void>((resolve, reject) => {
+      deleteWorkspace(workspaceId, {
+        onSuccess: () => {
+          toast.success('워크스페이스가 삭제되었습니다.');
+          router.push('/workspace');
+          resolve();
+        },
+        onError: (error: Error) => {
+          toast.error(error.message || '워크스페이스 삭제에 실패했습니다.');
+          reject(error);
+        },
+      });
+    });
+  };
+
+  return (
+    <div className='mb-12 w-full max-w-3xl px-6 py-3 md:px-10 md:py-5'>
+      <button
+        onClick={() => router.back()}
+        className='text-md mb-3 flex cursor-pointer items-center gap-2 font-medium text-gray-400 transition-all duration-200 hover:text-gray-500 md:mb-5 md:text-lg'
+      >
+        <Icon name='arrowLeft' size={16} className='md:h-4.5 md:w-4.5' />
+        <span>돌아가기</span>
+      </button>
+
+      <section className='mb-6 rounded-xl border border-gray-200 bg-white p-5 md:p-6'>
+        <h2 className='mb-4 h-6.5 text-lg font-bold md:h-8 md:text-xl'>
+          {workspace?.workspaceName}
+        </h2>
+
+        <div className='flex flex-col gap-3'>
+          <Input
+            label='워크스페이스 이름'
+            type='text'
+            placeholder='워크스페이스 이름을 입력해 주세요'
+            value={currentName}
+            onChange={(e) => setName(e.target.value)}
+          />
+          <ColorChips selected={currentColor} onSelect={setColor} />
+        </div>
+
+        <Button
+          variant='primary'
+          size='lg'
+          className='mt-4 w-full font-medium md:h-12.5 md:text-lg'
+          onClick={handleUpdateSettings}
+          disabled={!isSettingsChanged || !currentName}
+          loading={isUpdating}
+        >
+          변경
+        </Button>
+      </section>
+
+      <section className='mb-6 rounded-xl border border-gray-200 bg-white p-5 md:p-6'>
+        <div className='mb-3 flex items-center justify-between'>
+          <h2 className='text-lg font-bold md:text-xl'>멤버</h2>
+        </div>
+
+        <p className='mb-2 text-sm text-gray-400'>이름</p>
+
+        <div className='scrollbar-hide max-h-55 overflow-y-auto pr-1 md:max-h-60'>
+          {members.length === 0 ? (
+            <p className='py-4 text-center text-sm text-gray-400'>멤버가 없습니다.</p>
+          ) : (
+            <ul className='flex flex-col divide-y divide-gray-100'>
+              {members.map((member) => (
+                <li key={member.userId} className='flex items-center justify-between py-2.5'>
+                  <Avatar name={member.name} picture={member.picture} member className='md:gap-3' />
+                  {member.role !== 'ADMIN' && (
+                    <Button
+                      group='sub'
+                      className='md:text-md w-13 rounded-sm md:h-8 md:w-16'
+                      variant='white'
+                      size='sm'
+                      onClick={() => setKickTarget(member)}
+                    >
+                      삭제
+                    </Button>
+                  )}
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      </section>
+
+      <section className='mb-6 rounded-xl border border-gray-200 bg-white p-5 md:p-6'>
+        <div className='mb-3 flex items-center justify-between'>
+          <h2 className='text-lg font-bold md:text-xl'>초대 내역</h2>
+          <Button
+            group='sub'
+            className='md:text-md h-6.5 w-18 rounded-sm md:h-8 md:w-21'
+            variant='blue'
+            size='sm'
+            onClick={() => setShowInviteModal(true)}
+          >
+            초대하기
+          </Button>
+        </div>
+
+        <p className='mb-2 text-sm text-gray-400'>이메일</p>
+
+        <div className='scrollbar-hide max-h-49 overflow-y-auto pr-1 md:max-h-53'>
+          {pendingMembers.length === 0 ? (
+            <p className='py-4 text-center text-sm text-gray-400'>초대 내역이 없습니다.</p>
+          ) : (
+            <ul className='flex flex-col divide-y divide-gray-100'>
+              {pendingMembers.map((member) => (
+                <li key={member.userId} className='flex items-center justify-between py-2.5'>
+                  <span className='text-sm md:text-base'>{member.email}</span>
+                  <Button
+                    group='sub'
+                    className='md:text-md w-13 rounded-sm md:h-8 md:w-16'
+                    variant='white'
+                    size='sm'
+                    onClick={() => setCancelTarget(member)}
+                  >
+                    취소
+                  </Button>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      </section>
+
+      <section className='rounded-xl border border-gray-200 bg-white p-5 md:p-6'>
+        <Button
+          variant='secondary'
+          size='lg'
+          className='w-full md:h-12.5 md:text-lg'
+          onClick={() => setShowDeleteWorkspaceModal(true)}
+        >
+          워크스페이스 삭제하기
+        </Button>
+      </section>
+
+      {kickTarget && (
+        <Modal onClose={() => setKickTarget(null)}>
+          <ConfirmModal
+            message={`${kickTarget.name}님을 삭제하시겠습니까?`}
+            onConfirm={() => handleKickMember(kickTarget)}
+            onClose={() => setKickTarget(null)}
+          />
+        </Modal>
+      )}
+
+      {cancelTarget && (
+        <Modal onClose={() => setCancelTarget(null)}>
+          <ConfirmModal
+            message={`초대를 취소하시겠습니까?`}
+            onConfirm={() => handleCancelInvite(cancelTarget)}
+            onClose={() => setCancelTarget(null)}
+          />
+        </Modal>
+      )}
+
+      {showDeleteWorkspaceModal && (
+        <Modal onClose={() => setShowDeleteWorkspaceModal(false)}>
+          <ConfirmModal
+            message='워크스페이스를 삭제하시겠습니까?'
+            onConfirm={handleDeleteWorkspace}
+            onClose={() => setShowDeleteWorkspaceModal(false)}
+          />
+        </Modal>
+      )}
+
+      {showInviteModal && (
+        <Modal onClose={() => setShowInviteModal(false)}>
+          <InviteModal onClose={() => setShowInviteModal(false)} />
+        </Modal>
+      )}
+    </div>
+  );
 }
diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx
index c8c129f..58e9280 100644
--- a/src/components/Avatar.tsx
+++ b/src/components/Avatar.tsx
@@ -2,39 +2,44 @@
 
 import Image from 'next/image';
 import { cn } from '@/utils/cn';
-import Icon from './Icon';
 
 interface AvatarProps {
   name: string;
   picture: string | null;
   member?: boolean;
+  className?: string;
 }
 
 const BASE_URL = process.env.NEXT_PUBLIC_API_URL;
 
-export default function Avatar({ name, picture, member = false }: AvatarProps) {
+export default function Avatar({ name, picture, member = false, className }: AvatarProps) {
   const imageUrl = picture
     ? picture.startsWith('http')
       ? picture
       : `${BASE_URL}${picture}`
     : null;
 
+  const initial = name.charAt(0);
+
+  const sizeClass = member ? 'h-8.5 w-8.5 md:h-9.5 md:w-9.5' : 'h-7.5 w-7.5';
+  const textClass = member ? 'text-sm md:text-base' : 'text-xs';
+
   return (
-    <div className={cn('flex max-w-42.5 items-center gap-2')}>
+    <div className={cn('flex max-w-42.5 items-center gap-2', className)}>
       {imageUrl ? (
+        <div className={cn('relative shrink-0 overflow-hidden rounded-full', sizeClass)}>
+          <Image src={imageUrl} alt={name} sizes='30px' fill className='object-cover' />
+        </div>
+      ) : (
         <div
           className={cn(
-            'relative shrink-0 overflow-hidden rounded-full',
-            member ? 'h-8.5 w-8.5 md:h-9.5 md:w-9.5' : 'h-7.5 w-7.5',
+            'flex shrink-0 items-center justify-center rounded-full bg-blue-100 font-semibold text-blue-200',
+            sizeClass,
+            textClass,
           )}
         >
-          <Image src={imageUrl} alt={name} sizes='30px' fill className='object-cover' />
+          {initial}
         </div>
-      ) : (
-        <Icon
-          name='profile'
-          className={cn(member ? 'h-8.5 w-8.5 md:h-9.5 md:w-9.5' : 'h-7.5 w-7.5')}
-        />
       )}
       <div className={cn(member ? 'text-md md:text-lg' : 'text-md')}>{name}</div>
     </div>
diff --git a/src/components/header/HeaderUserProfile.tsx b/src/components/header/HeaderUserProfile.tsx
index 3e77df3..80415b0 100644
--- a/src/components/header/HeaderUserProfile.tsx
+++ b/src/components/header/HeaderUserProfile.tsx
@@ -5,7 +5,6 @@ import { signOut } from 'next-auth/react';
 import Image from 'next/image';
 import { useRouter } from 'next/navigation';
 import Dropdown from '@/components/Dropdown';
-import Icon from '@/components/Icon';
 
 interface HeaderUserProfileProps {
   name: string;
@@ -26,6 +25,8 @@ export default function HeaderUserProfile({ name, picture }: HeaderUserProfilePr
       : `${BASE_URL}${picture}`
     : null;
 
+  const initial = name.charAt(0);
+
   useEffect(() => {
     const handleClickOutside = (e: MouseEvent) => {
       if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
@@ -51,11 +52,13 @@ export default function HeaderUserProfile({ name, picture }: HeaderUserProfilePr
       onClick={() => setOpen((prev) => !prev)}
     >
       {imageUrl ? (
-        <div className='relative h-7 w-7 shrink-0 overflow-hidden rounded-full border border-gray-300 md:h-8 md:w-8'>
+        <div className='relative h-7 w-7 shrink-0 overflow-hidden rounded-full md:h-8 md:w-8'>
           <Image src={imageUrl} alt={name} fill className='object-cover' />
         </div>
       ) : (
-        <Icon name='profile' size={28} className='md:h-8 md:w-8' />
+        <div className='md:text-md flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-blue-100 text-sm font-semibold text-blue-200 md:h-8 md:w-8'>
+          {initial}
+        </div>
       )}
 
       <span className='text-black-200 hidden w-20 truncate text-lg font-medium md:block md:text-base'>