diff --git a/src/assets/icon/common/uploadImg.svg b/src/assets/icon/common/uploadImg.svg
index 37c18ee5..98740532 100644
--- a/src/assets/icon/common/uploadImg.svg
+++ b/src/assets/icon/common/uploadImg.svg
@@ -1,3 +1,3 @@
 <svg width="23" height="20" viewBox="0 0 23 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4.28368 18.7942L14.2958 10.2162L19.0074 14.5052M4.28368 18.7942H16.0626C18.0142 18.7942 19.5963 17.354 19.5963 15.5774V10.2162M4.28368 18.7942C2.33208 18.7942 0.75 17.354 0.75 15.5774V4.855C0.75 3.07845 2.33208 1.63828 4.28368 1.63828H11.94M18.4184 6.81552L18.4184 3.78276M18.4184 3.78276L18.4184 0.75M18.4184 3.78276L15.0868 3.78276M18.4184 3.78276L21.75 3.78276M7.81736 6.46337C7.81736 7.35165 7.02632 8.07173 6.05052 8.07173C5.07472 8.07173 4.28368 7.35165 4.28368 6.46337C4.28368 5.57509 5.07472 4.855 6.05052 4.855C7.02632 4.855 7.81736 5.57509 7.81736 6.46337Z" stroke="#C3C3C3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.28368 18.7942L14.2958 10.2162L19.0074 14.5052M4.28368 18.7942H16.0626C18.0142 18.7942 19.5963 17.354 19.5963 15.5774V10.2162M4.28368 18.7942C2.33208 18.7942 0.75 17.354 0.75 15.5774V4.855C0.75 3.07845 2.33208 1.63828 4.28368 1.63828H11.94M18.4184 6.81552L18.4184 3.78276M18.4184 3.78276L18.4184 0.75M18.4184 3.78276L15.0868 3.78276M18.4184 3.78276L21.75 3.78276M7.81736 6.46337C7.81736 7.35165 7.02632 8.07173 6.05052 8.07173C5.07472 8.07173 4.28368 7.35165 4.28368 6.46337C4.28368 5.57509 5.07472 4.855 6.05052 4.855C7.02632 4.855 7.81736 5.57509 7.81736 6.46337Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
diff --git a/src/components/common/button/Button.tsx b/src/components/common/button/Button.tsx
index 16b8f0c2..5b96b782 100644
--- a/src/components/common/button/Button.tsx
+++ b/src/components/common/button/Button.tsx
@@ -36,13 +36,13 @@ export default function Button({
 
   const variantClasses = {
     primary:
-      "bg-chart-3 text-white hover:opacity-80 disabled:bg-bg-disabled disabled:text-text-disabled disabled:hover:opacity-50",
+      "bg-chart-3 text-white hover:bg-[#0e6add] disabled:bg-bg-disabled disabled:text-text-disabled disabled:hover:bg-bg-disabled",
     secondary:
-      "bg-gray-100 text-brand-900 hover:bg-gray-200 disabled:bg-bg-disabled disabled:text-text-disabled disabled:hover:opacity-50 disabled:hover:opacity-50",
+      "bg-gray-100 text-brand-900 hover:bg-gray-200 disabled:bg-bg-disabled disabled:text-text-disabled disabled:hover:bg-bg-disabled",
     outline:
-      "bg-transparent border border-chart-3 text-chart-3 hover:bg-brand-300 disabled:border-gray-300 disabled:text-text-disabled disabled:hover:bg-transparent",
+      "bg-transparent border border-chart-3 text-chart-3 hover:bg-chart-3/5 disabled:border-gray-300 disabled:text-text-disabled disabled:hover:bg-transparent",
     danger:
-      "bg-status-red text-white hover:opacity-80 disabled:bg-bg-disabled disabled:text-text-disabled disabled:hover:opacity-50",
+      "bg-status-red text-white hover:bg-[#d91632] disabled:bg-bg-disabled disabled:text-text-disabled disabled:hover:bg-bg-disabled",
     dangerSoft:
       "bg-status-red/10 text-status-red border border-status-red hover:bg-status-red/20 disabled:bg-bg-disabled disabled:text-text-disabled disabled:border-gray-300 disabled:hover:bg-bg-disabled",
     gradient:
diff --git a/src/components/common/dropdownmenu/DropdownMenu.tsx b/src/components/common/dropdownmenu/DropdownMenu.tsx
index 896adf9e..e8abf297 100644
--- a/src/components/common/dropdownmenu/DropdownMenu.tsx
+++ b/src/components/common/dropdownmenu/DropdownMenu.tsx
@@ -57,7 +57,7 @@ export function DropdownMenu({
         <div
           id={menuId}
           role="menu"
-          className="absolute right-0 top-full mt-2 w-56 max-w-[calc(100vw-40px)] rounded-component-md bg-brand-200 py-3 px-1 shadow-Medium z-50"
+          className="absolute right-0 top-full mt-2 w-56 max-w-[calc(100vw-40px)] rounded-component-md bg-brand-200 border border-gray-100 py-3 px-1 shadow-Medium z-50 animate-modal-content origin-top-right"
         >
           <div className="space-y-1">
             {items.map((it, idx) => (
@@ -70,33 +70,35 @@ export function DropdownMenu({
                     setOpen(false);
                   }}
                   className={twMerge(
-                    "group flex w-full items-center gap-3 rounded-component-md px-5 py-4 text-left font-body2 transition-fast",
+                    "group flex w-full justify-between items-center rounded-component-md px-5 py-4 text-left font-body2 transition-fast",
                     it.active
-                      ? "bg-brand-300 text-status-blue"
-                      : "text-text-main hover:bg-brand-300 hover:text-status-blue",
+                      ? "bg-status-blue/10 text-status-blue"
+                      : "text-text-main hover:bg-status-blue/5 hover:text-status-blue",
                   )}
                 >
-                  {it.icon ? (
+                  <div className="flex items-center gap-3">
+                    {it.icon ? (
+                      <span
+                        className={twMerge(
+                          "inline-flex h-5 w-5 items-center justify-center text-text-main",
+                          it.active
+                            ? "text-status-blue"
+                            : "group-hover:text-status-blue",
+                        )}
+                        aria-hidden="true"
+                      >
+                        {it.icon}
+                      </span>
+                    ) : null}
                     <span
                       className={twMerge(
-                        "inline-flex h-5 w-5 items-center justify-center text-text-main",
-                        it.active
-                          ? "text-status-blue"
-                          : "group-hover:text-status-blue",
+                        "whitespace-nowrap",
+                        it.active ? "font-semibold" : "font-medium",
                       )}
-                      aria-hidden="true"
                     >
-                      {it.icon}
+                      {it.label}
                     </span>
-                  ) : null}
-                  <span
-                    className={twMerge(
-                      "whitespace-nowrap",
-                      it.active ? "font-semibold" : "font-medium",
-                    )}
-                  >
-                    {it.label}
-                  </span>
+                  </div>
                 </button>
               </div>
             ))}
diff --git a/src/components/workspace/MemberRoleSelect.tsx b/src/components/workspace/MemberRoleSelect.tsx
index 71b0e59f..ce6300dd 100644
--- a/src/components/workspace/MemberRoleSelect.tsx
+++ b/src/components/workspace/MemberRoleSelect.tsx
@@ -49,7 +49,7 @@ export default function MemberRoleSelect({
         >
           <span>{ROLE_LABEL_MAP[role]}</span>
           <ChevonIcon
-            className={`h-4 w-4 shrink-0 transition-transform ${open ? "rotate-0" : "-rotate-180"}`}
+            className={`h-4 w-4 shrink-0 ${open ? "rotate-0" : "-rotate-180"}`}
           />
         </div>
       )}
diff --git a/src/components/workspace/WorkspaceCard.tsx b/src/components/workspace/WorkspaceCard.tsx
index f13d8854..6269608e 100644
--- a/src/components/workspace/WorkspaceCard.tsx
+++ b/src/components/workspace/WorkspaceCard.tsx
@@ -4,28 +4,16 @@ import { twMerge } from "tailwind-merge";
 import type { TWorkspace } from "@/types/workspace/workspace";
 import { ROLE_LABEL_MAP } from "@/constants/workspaceRole";
 
-import {
-  DropdownMenu,
-  type TMenuItem,
-} from "@/components/common/dropdownmenu/DropdownMenu";
-
 import BuildingIcon from "@/assets/icon/common/building.svg?react";
-import VectorIcon from "@/assets/icon/common/more.svg?react";
 import { getImageUrl } from "@/lib/getImageUrl";
 
 type TProps = {
   workspace: TWorkspace;
-  menuItems: TMenuItem[];
   isSelected?: boolean;
   onClick?: () => void;
 };
 
-function WorkspaceCard({
-  workspace: w,
-  menuItems,
-  isSelected = false,
-  onClick,
-}: TProps) {
+function WorkspaceCard({ workspace: w, isSelected = false, onClick }: TProps) {
   const [imageError, setImageError] = useState(false);
 
   useEffect(() => {
@@ -36,68 +24,61 @@ function WorkspaceCard({
   const showPlaceholder = !imageSrc || imageError;
 
   return (
-    <li
-      className={twMerge(
-        "flex items-center justify-between rounded-component-md bg-white px-6 py-5 shadow-Soft border tablet:px-4 tablet:py-4",
-        onClick &&
-          "cursor-pointer hover:bg-gray-50 active:scale-93 duration-50 transition-transform",
-        isSelected ? "border-chart-3/80 bg-chart-3/2" : "border-gray-100",
-      )}
-      onClick={onClick}
-    >
-      <div className="flex items-center gap-5 min-w-0 tablet:gap-3">
-        <div className="w-24 h-24 bg-gray-100 shrink-0 rounded-component-sm tablet:h-16 tablet:w-16">
-          {showPlaceholder ? (
-            <div className="w-full h-full flex items-center justify-center">
-              <BuildingIcon className="w-8 h-8 text-text-placeholder" />
-            </div>
-          ) : (
-            <img
-              src={imageSrc}
-              alt={`${w.name} 로고`}
-              className="w-full h-full object-cover rounded-component-sm"
-              onError={() => {
-                setImageError(true);
-              }}
-            />
-          )}
-        </div>
-
-        <div className="min-w-0">
-          <div className="flex items-center gap-2">
-            <div className="font-heading4 font-semibold! text-text-main truncate">
-              {w.name}
-            </div>
-            {isSelected && (
-              <span
-                role="status"
-                className="shrink-0 rounded-full bg-chart-3/12 px-2 py-1 font-caption text-chart-3"
-              >
-                현재 대시보드 기준
-              </span>
+    <li className="block w-full">
+      <button
+        type="button"
+        className={twMerge(
+          "w-full text-left flex items-center justify-between rounded-component-md bg-white px-6 py-5 shadow-Soft border tablet:px-4 tablet:py-4 focus-visible:ring-2 focus-visible:ring-chart-3 focus-visible:outline-none",
+          onClick &&
+            "cursor-pointer hover:bg-chart-3/5 hover:-translate-y-1 hover:shadow-Medium hover:border-chart-3/30 active:scale-[0.98] transition-all duration-300 ease-out",
+          isSelected
+            ? "border-chart-3/80 bg-chart-3/5"
+            : "border-gray-100 focus-within:border-chart-3/50",
+        )}
+        onClick={onClick}
+      >
+        <div className="flex items-center gap-5 min-w-0 tablet:gap-3">
+          <div className="w-24 h-24 bg-gray-100 shrink-0 rounded-component-sm tablet:h-16 tablet:w-16">
+            {showPlaceholder ? (
+              <div className="w-full h-full flex items-center justify-center">
+                <BuildingIcon className="w-8 h-8 text-text-placeholder" />
+              </div>
+            ) : (
+              <img
+                src={imageSrc}
+                alt={`${w.name} 로고`}
+                className="w-full h-full object-cover rounded-component-sm pointer-events-none"
+                onError={() => {
+                  setImageError(true);
+                }}
+              />
             )}
           </div>
 
-          <div className="font-body2 text-text-main mt-1 truncate">
-            {w.description ?? ""}
-          </div>
-          <div className="font-body1 text-text-sub mt-2">
-            {ROLE_LABEL_MAP[w.myRole]}
+          <div className="min-w-0">
+            <div className="flex items-center gap-2">
+              <div className="font-heading4 font-semibold! text-text-main truncate">
+                {w.name}
+              </div>
+              {isSelected && (
+                <span
+                  role="status"
+                  className="shrink-0 rounded-full bg-chart-3/12 px-2 py-1 font-caption text-chart-3"
+                >
+                  현재 대시보드 기준
+                </span>
+              )}
+            </div>
+
+            <div className="font-body2 text-text-main mt-1 truncate">
+              {w.description ?? ""}
+            </div>
+            <div className="font-body1 text-text-sub mt-2">
+              {ROLE_LABEL_MAP[w.myRole]}
+            </div>
           </div>
         </div>
-      </div>
-
-      <div
-        className="flex items-center gap-4 shrink-0"
-        onClick={(e) => e.stopPropagation()}
-      >
-        <DropdownMenu
-          trigger={<VectorIcon aria-hidden="true" />}
-          aria-label={`${w.name} 워크스페이스 메뉴`}
-          className="h-10 w-10 cursor-pointer rounded-component-sm hover:bg-gray-100 transition-colors flex items-center justify-center"
-          items={menuItems}
-        />
-      </div>
+      </button>
     </li>
   );
 }
diff --git a/src/components/workspace/WorkspaceListLoading.tsx b/src/components/workspace/WorkspaceListLoading.tsx
index 9eecf294..4f117add 100644
--- a/src/components/workspace/WorkspaceListLoading.tsx
+++ b/src/components/workspace/WorkspaceListLoading.tsx
@@ -1,13 +1,33 @@
+import { Skeleton } from "@/components/common/skeleton/Skeleton";
+
+function WorkspaceCardSkeleton() {
+  return (
+    <>
+      <li className="flex items-center justify-between rounded-component-md bg-white px-6 py-5 shadow-Soft border border-gray-100 tablet:px-4 tablet:py-4">
+        <div className="flex items-center gap-5 min-w-0 tablet:gap-3">
+          <Skeleton className="w-24 h-24 shrink-0 rounded-component-sm tablet:h-16 tablet:w-16" />
+          <div className="flex flex-col gap-2 min-w-0">
+            <Skeleton className="h-5 w-40" />
+            <Skeleton className="h-4 w-64" />
+            <Skeleton className="h-4 w-16" />
+          </div>
+        </div>
+        <Skeleton className="h-10 w-10 shrink-0 rounded-component-sm" />
+      </li>
+    </>
+  );
+}
+
 export default function WorkspaceListLoading() {
   return (
-    <div
+    <ul
       role="status"
-      aria-live="polite"
-      className="bg-white p-10 text-center border border-gray-100 rounded-component-lg"
+      aria-label="워크스페이스 목록 불러오는 중"
+      className="space-y-5"
     >
-      <p className="font-body2 text-text-sub">
-        워크스페이스 목록을 불러오는 중입니다.
-      </p>
-    </div>
+      {Array.from({ length: 3 }).map((_, i) => (
+        <WorkspaceCardSkeleton key={i} />
+      ))}
+    </ul>
   );
 }
diff --git a/src/layout/workspace/WorkspaceManageLayout.tsx b/src/layout/workspace/WorkspaceManageLayout.tsx
new file mode 100644
index 00000000..21dfc395
--- /dev/null
+++ b/src/layout/workspace/WorkspaceManageLayout.tsx
@@ -0,0 +1,33 @@
+import { NavLink, Outlet, useParams } from "react-router-dom";
+
+const tabLinkClass = ({ isActive }: { isActive: boolean }) =>
+  `px-4 py-2 font-body1 border-b-2 -mb-px transition-colors ${
+    isActive
+      ? "border-chart-3 text-chart-3"
+      : "border-transparent text-text-sub hover:text-text-main"
+  }`;
+
+export default function WorkspaceManageLayout() {
+  const { workspaceId } = useParams();
+
+  return (
+    <section className="w-full flex flex-col gap-8">
+      <nav className="flex border-b border-gray-100">
+        <NavLink
+          to={`/workspace/${workspaceId}/settings`}
+          className={tabLinkClass}
+        >
+          기본 정보
+        </NavLink>
+        <NavLink
+          to={`/workspace/${workspaceId}/members`}
+          className={tabLinkClass}
+        >
+          멤버 관리
+        </NavLink>
+      </nav>
+
+      <Outlet />
+    </section>
+  );
+}
diff --git a/src/pages/workspace/MemberManagement.tsx b/src/pages/workspace/MemberManagement.tsx
index f8b8ed2a..2fefb584 100644
--- a/src/pages/workspace/MemberManagement.tsx
+++ b/src/pages/workspace/MemberManagement.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useRef, useState } from "react";
-import { useNavigate, useParams } from "react-router-dom";
+import { useParams } from "react-router-dom";
 import {
   useInfiniteQuery,
   useMutation,
@@ -15,7 +15,6 @@ import {
   type TWorkspaceMember,
 } from "@/types/workspace/workspace";
 
-import PageHeader from "@/components/common/PageHeader";
 import DeleteMemberModal from "@/components/workspace/DeleteMemberModal";
 import MemberList from "@/components/workspace/MemberList";
 import PermissionTable from "@/components/workspace/PermissionTable";
@@ -30,7 +29,6 @@ import {
 const PAGE_SIZE = 20;
 
 export default function MemberManagement() {
-  const navigate = useNavigate();
   const { workspaceId } = useParams<{ workspaceId: string }>();
   const orgId = Number(workspaceId);
   const queryClient = useQueryClient();
@@ -248,23 +246,6 @@ export default function MemberManagement() {
 
   return (
     <section className="w-full min-w-0 flex flex-col gap-8">
-      <div className="flex flex-col gap-3">
-        <button
-          type="button"
-          onClick={() => {
-            void navigate(-1);
-          }}
-          className="inline-flex w-fit items-center gap-1 text-text-sub transition-colors hover:text-text-main"
-        >
-          <span aria-hidden="true">←</span>
-          <span className="font-body2">뒤로 이동</span>
-        </button>
-        <PageHeader
-          title="멤버 관리"
-          description="팀 멤버를 효율적으로 관리하세요"
-        />
-      </div>
-
       <div className="flex w-full min-w-0 flex-col gap-10">
         <MemberList
           orgId={orgId}
diff --git a/src/pages/workspace/Workspace.tsx b/src/pages/workspace/Workspace.tsx
index 0752c9a2..5efb6cf1 100644
--- a/src/pages/workspace/Workspace.tsx
+++ b/src/pages/workspace/Workspace.tsx
@@ -6,7 +6,6 @@ import type { IApiErrorResponse } from "@/types/common/common";
 import type { TWorkspace } from "@/types/workspace/workspace";
 
 import Button from "@/components/common/button/Button";
-import { type TMenuItem } from "@/components/common/dropdownmenu/DropdownMenu";
 import Input from "@/components/common/input/Input";
 import Modal from "@/components/common/modal/Modal";
 import PageHeader from "@/components/common/PageHeader";
@@ -21,11 +20,9 @@ import {
   getMyWorkspaces,
   uploadImage,
 } from "@/api/workspace/org";
-import EditContainIcon from "@/assets/icon/common/edit.svg?react";
 import PlusIcon from "@/assets/icon/common/plus.svg?react";
 import SearchIcon from "@/assets/icon/common/search.svg?react";
 import UpLoadImgIcon from "@/assets/icon/common/uploadImg.svg?react";
-import UserProfileIcon from "@/assets/icon/common/userProfile.svg?react";
 import useWorkspaceStore from "@/store/useWorkspaceStore";
 
 export default function WorkspacePage() {
@@ -97,23 +94,6 @@ export default function WorkspacePage() {
     });
   }, [filtered, selectedOrgId]);
 
-  const menuItems = (id: TWorkspace["orgId"]): TMenuItem[] => [
-    {
-      icon: <EditContainIcon className="h-5 w-5 fill-none stroke-current" />,
-      label: "정보 수정하기",
-      onClick: () => {
-        void navigate(`/workspace/${id}/settings`);
-      },
-    },
-    {
-      icon: <UserProfileIcon className="h-5 w-5 fill-none stroke-current" />,
-      label: "멤버 관리",
-      onClick: () => {
-        void navigate(`/workspace/${id}/members`);
-      },
-    },
-  ];
-
   const onCloseCreate = () => {
     setLogoPreview(null);
     setLogoPreview((prev) => {
@@ -181,7 +161,6 @@ export default function WorkspacePage() {
           <WorkspaceCard
             key={String(w.orgId)}
             workspace={w}
-            menuItems={menuItems(w.orgId)}
             isSelected={w.orgId === selectedOrgId}
             onClick={() => {
               void navigate(`/workspace/${w.orgId}/settings`);
@@ -223,26 +202,19 @@ export default function WorkspacePage() {
 
       {renderWorkspaceContent()}
 
-      <Modal
-        isOpen={createOpen}
-        onClose={onCloseCreate}
-        size="xl"
-        padding="lg"
-        className="tablet:w-150"
-      >
-        <div className="px-1 tablet:px-0">
-          <h2 className="font-heading4 text-text-main mb-2">
+      <Modal isOpen={createOpen} onClose={onCloseCreate} size="md" padding="lg">
+        <div className="flex flex-col items-start px-2 tablet:px-0">
+          <h2 className="font-heading3 text-text-main mb-2">
             워크스페이스 생성
           </h2>
-          <p className="font-body1 text-text-sub mb-5">
-            워크스페이스를 생성한 사용자는 자동으로 관리자 권한을 갖습니다.{" "}
-            <br /> 로고 이미지와 기본 정보를 입력해 주세요.
+          <p className="font-body2 text-text-sub mb-10 text-start">
+            워크스페이스를 생성한 사용자는 자동으로 관리자 권한을 갖습니다.
+            <br className="tablet:hidden" />
+            로고 이미지와 기본 정보를 입력해 주세요.
           </p>
-          <div className="flex flex-row gap-8 items-start tablet:flex-col tablet:gap-5">
-            <div className="flex flex-col items-center w-45 shrink-0 tablet:w-full">
-              <div className="w-full mb-3 select-none text-text-main tablet:text-center">
-                로고 이미지
-              </div>
+
+          <div className="flex flex-col items-center w-full gap-8">
+            <div className="flex flex-col items-center">
               <input
                 ref={fileRef}
                 type="file"
@@ -254,29 +226,39 @@ export default function WorkspacePage() {
                 type="button"
                 aria-label="로고 이미지 업로드"
                 onClick={openFile}
-                className="flex h-48 w-48 items-center justify-center overflow-hidden rounded-component-sm border border-gray-100 bg-gray-100 hover:bg-gray-200 transition-colors"
+                className={`relative flex h-40 w-40 flex-col items-center justify-center overflow-hidden rounded-component-lg border-2 transition-all duration-300 group focus-visible:ring-2 focus-visible:ring-chart-3 focus-visible:outline-none ${
+                  logoPreview
+                    ? "border-transparent shadow-sm"
+                    : "border-dashed border-gray-300 bg-gray-50 hover:border-chart-3 hover:bg-chart-3/5"
+                }`}
               >
                 {logoPreview ? (
-                  <img
-                    src={logoPreview}
-                    alt="새 로고 미리 보기"
-                    className="h-full w-full object-cover"
-                  />
+                  <>
+                    <img
+                      src={logoPreview}
+                      alt="새 로고 미리 보기"
+                      className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110"
+                    />
+                    <div className="absolute inset-0 bg-black/40 backdrop-blur-[2px] flex flex-col items-center justify-center opacity-0 group-hover:opacity-100 transition-all duration-300">
+                      <UpLoadImgIcon className="w-6 h-6 text-white mb-1 transition-transform duration-300" />
+                      <span className="text-white font-caption font-semibold">
+                        사진 변경
+                      </span>
+                    </div>
+                  </>
                 ) : (
-                  <UpLoadImgIcon className="text-text-placeholder w-8 h-8 tablet:w-7 tablet:h-7" />
+                  <div className="flex flex-col items-center justify-center transform transition-all duration-300">
+                    <UpLoadImgIcon className="text-text-placeholder w-8 h-8 group-hover:text-chart-3 transition-colors duration-300" />
+                    <span className="mt-2 text-text-placeholder font-caption group-hover:text-chart-3 transition-colors duration-300">
+                      이미지 업로드
+                    </span>
+                  </div>
                 )}
               </button>
-
-              <Button
-                variant="custom"
-                className="h-7! mt-4 border border-gray-200 text-text-auth-sub px-4 rounded-component-lg bg-white font-body2 hover:bg-gray-100 transition-colors duration-200 ease-in-out"
-                onClick={openFile}
-                type="button"
-              >
-                업로드
-              </Button>
             </div>
-            <div className="flex-1 w-full space-y-5">
+
+            {/* 입력 폼 */}
+            <div className="w-full space-y-7">
               <Input
                 label="워크스페이스 이름"
                 placeholder="사용할 워크스페이스의 이름을 입력하세요."
@@ -287,7 +269,7 @@ export default function WorkspacePage() {
               <TextareaField
                 id="workspace-desc"
                 label="워크스페이스 설명"
-                placeholder="워크스페이스에 대한 간단한 설명을 입력하세요"
+                placeholder="워크스페이스에 대한 간단한 설명을 입력하세요."
                 value={newDesc}
                 onChange={(e) => setNewDesc(e.target.value)}
                 disabled={isCreating}
@@ -296,18 +278,19 @@ export default function WorkspacePage() {
                 <p className="font-body2 text-status-red">{createErrorMsg}</p>
               )}
             </div>
-          </div>
-          <div className="flex justify-center mt-12 tablet:mt-6">
-            <Button
-              size="big"
-              variant="primary"
-              onClick={onSubmitCreate}
-              disabled={!newName.trim() || isCreating}
-              className="px-12 w-auto tablet:w-full"
-              type="button"
-            >
-              {isCreating ? "생성 중.. " : "생성하기"}
-            </Button>
+
+            <div className="w-full mt-8">
+              <Button
+                size="big"
+                variant="primary"
+                onClick={onSubmitCreate}
+                disabled={!newName.trim() || isCreating}
+                fullWidth
+                type="button"
+              >
+                {isCreating ? "생성 중.." : "생성하기"}
+              </Button>
+            </div>
           </div>
         </div>
       </Modal>
diff --git a/src/pages/workspace/WorkspaceSetting.tsx b/src/pages/workspace/WorkspaceSetting.tsx
index 2fbe7d64..67387a17 100644
--- a/src/pages/workspace/WorkspaceSetting.tsx
+++ b/src/pages/workspace/WorkspaceSetting.tsx
@@ -9,7 +9,6 @@ import Button from "@/components/common/button/Button";
 import ControlBox from "@/components/common/controlbox/ControlBox";
 import Input from "@/components/common/input/Input";
 import Modal from "@/components/common/modal/Modal";
-import PageHeader from "@/components/common/PageHeader";
 import TextareaField from "@/components/common/textarea/TextareaField";
 
 import {
@@ -177,23 +176,6 @@ export default function WorkspaceSetting() {
 
   return (
     <section className="w-full flex flex-col gap-8">
-      <div className="flex flex-col gap-3">
-        <button
-          type="button"
-          onClick={() => {
-            void navigate(-1);
-          }}
-          className="inline-flex w-fit items-center gap-1 text-text-sub transition-colors hover:text-text-main"
-        >
-          <span aria-hidden="true">←</span>
-          <span className="font-body2">뒤로 이동</span>
-        </button>
-        <PageHeader
-          title="워크스페이스 관리"
-          description="워크스페이스 정보를 확인하고 관리하세요."
-        />
-      </div>
-
       {loading && (
         <div className="bg-white p-10 text-center border border-gray-100 rounded-component-lg">
           <p className="font-body2 text-text-sub">불러오는중..</p>
@@ -214,10 +196,6 @@ export default function WorkspaceSetting() {
       {!loading && !errorMsg && (
         <>
           <div className="bg-white border border-gray-100 rounded-component-lg p-8 shadow-Soft">
-            <h2 className="font-heading4 text-text-main">기본 정보</h2>
-            <p className="font-body2 text-text-sub mt-2">
-              워크스페이스의 대표적인 정보를 설정합니다.
-            </p>
             <div className="mt-9 flex flex-row gap-12 items-start tablet:flex-col tablet:gap-8">
               <div className="flex flex-col items-center w-60 tablet:w-full shrink-0">
                 <div className="w-full text-text-main mb-3 ml-1 select-none tablet:text-center">
@@ -297,19 +275,6 @@ export default function WorkspaceSetting() {
               </div>
             </div>
             <div className="flex justify-end mt-6 gap-4 tablet:flex-col">
-              <Button
-                size="big"
-                variant="secondary"
-                type="button"
-                onClick={() => {
-                  if (!orgId) return;
-                  void navigate(`/workspace/${orgId}/members`);
-                }}
-                aria-label="멤버 관리로 이동하기"
-                className="w-auto tablet:w-full"
-              >
-                멤버 관리로 이동
-              </Button>
               <Button
                 size="big"
                 variant="primary"
diff --git a/src/routes/MainRoutes.tsx b/src/routes/MainRoutes.tsx
index c537660f..65992a29 100644
--- a/src/routes/MainRoutes.tsx
+++ b/src/routes/MainRoutes.tsx
@@ -3,6 +3,8 @@ import type { RouteObject } from "react-router-dom";
 
 import { loadable } from "@/utils/loadable";
 
+import WorkspaceListLoading from "@/components/workspace/WorkspaceListLoading";
+
 const OverviewDashboard = loadable(
   lazy(() => import("@/pages/dashboard/overview/OverviewDashboard")),
 );
@@ -21,11 +23,16 @@ const CampaignDetail = loadable(
 const CampaignGroup = loadable(
   lazy(() => import("@/pages/ads/new/CampaignGroup")),
 );
-const Workspace = loadable(lazy(() => import("@/pages/workspace/Workspace")));
+const Workspace = loadable(
+  lazy(() => import("@/pages/workspace/Workspace")),
+  <WorkspaceListLoading />,
+);
+const WorkspaceManageLayout = loadable(
+  lazy(() => import("@/layout/workspace/WorkspaceManageLayout")),
+);
 const WorkspaceSetting = loadable(
   lazy(() => import("@/pages/workspace/WorkspaceSetting")),
 );
-
 const MemberManagement = loadable(
   lazy(() => import("@/pages/workspace/MemberManagement")),
 );
@@ -57,17 +64,17 @@ const MainRoutes: RouteObject[] = [
     element: <CampaignDetail />,
   },
 
-  {
-    path: "workspace/:workspaceId/settings",
-    element: <WorkspaceSetting />,
-  },
   {
     path: "workspace",
     element: <Workspace />,
   },
   {
-    path: "workspace/:workspaceId/members",
-    element: <MemberManagement />,
+    path: "workspace/:workspaceId",
+    element: <WorkspaceManageLayout />,
+    children: [
+      { path: "settings", element: <WorkspaceSetting /> },
+      { path: "members", element: <MemberManagement /> },
+    ],
   },
   {
     path: "workspace/billing",
diff --git a/src/utils/loadable.tsx b/src/utils/loadable.tsx
index e904b8cc..8c540947 100644
--- a/src/utils/loadable.tsx
+++ b/src/utils/loadable.tsx
@@ -4,7 +4,7 @@ type TPropsOf<T> = T extends ComponentType<infer P> ? P : never;
 
 export function loadable<T extends ComponentType<any>>(
   Component: T,
-  fallback: ReactNode = <div>Loading...</div>,
+  fallback: ReactNode = null,
 ) {
   function Wrapped(props: TPropsOf<T>) {
     return (