diff --git a/src/context/WorkspaceContext.tsx b/src/context/WorkspaceContext.tsx
index 165b79c..898cdb3 100644
--- a/src/context/WorkspaceContext.tsx
+++ b/src/context/WorkspaceContext.tsx
@@ -3,6 +3,7 @@ import { fetchWorkspaces, createWorkspace, type Workspace } from "../api/workspa
 import { useTranslation } from "../hooks/useTranslation"
 import { toast } from "sonner"
 import { Button } from "../components/ui/button"
+import { Input } from "../components/ui/input"
 
 interface WorkspaceContextType {
   workspaces: Workspace[]
@@ -100,7 +101,7 @@ export const WorkspaceProvider = ({ children }: { children: ReactNode }) => {
               <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
                 {t.workspace?.nameLabel || "Workspace Name"}
               </label>
-              <input
+              <Input
                 type="text"
                 value={newWorkspaceName}
                 onChange={(e) => setNewWorkspaceName(e.target.value)}
diff --git a/src/pages/WorkspaceCreate.tsx b/src/pages/WorkspaceCreate.tsx
index 914b94f..145db64 100644
--- a/src/pages/WorkspaceCreate.tsx
+++ b/src/pages/WorkspaceCreate.tsx
@@ -1,13 +1,16 @@
 import React, { useState, useEffect, useRef, Fragment } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useBlocker, useNavigate } from 'react-router-dom';
 import { useTranslation } from '../hooks/useTranslation';
-import { AlertCircle, UserPlus, Trash2, Shield } from 'lucide-react';
+import { AlertCircle, UserPlus, Trash2, Shield, Loader2 } from 'lucide-react';
 import { Dialog, Transition } from '@headlessui/react';
 import { toast } from 'sonner';
 import { createWorkspace } from '../api/workspaces';
 import { searchUserByExactMobile, type SearchedUser } from '../api/users';
 import { useAppContext } from '../context/AppContext';
 import { Button } from '../components/ui/button';
+import { Input } from '../components/ui/input';
+import { Select } from '../components/ui/Select';
+import { TextAreaInput } from '../components/ui/TextAreaInput';
 
 const toEnglishDigits = (str: string) => {
   return str.replace(/[۰-۹]/g, (d) => '۰۱۲۳۴۵۶۷۸۹'.indexOf(d).toString())
@@ -52,6 +55,25 @@ export default function WorkspaceCreate() {
   const [memberIdToDelete, setMemberIdToDelete] = useState<string | null>(null);
 
   const searchTimeoutRef = useRef<NodeJS.Timeout>();
+  const hasUnsavedChanges = name.trim() !== '' || description.trim() !== '' || members.length > 0;
+
+  useEffect(() => {
+    const handleBeforeUnload = (e: BeforeUnloadEvent) => {
+      if (hasUnsavedChanges && !isSaving) {
+        e.preventDefault();
+        e.returnValue = '';
+      }
+    };
+    window.addEventListener('beforeunload', handleBeforeUnload);
+    return () => window.removeEventListener('beforeunload', handleBeforeUnload);
+  }, [hasUnsavedChanges, isSaving]);
+
+  useBlocker(({ currentLocation, nextLocation }) => {
+    if (hasUnsavedChanges && !isSaving && currentLocation.pathname !== nextLocation.pathname) {
+      return !window.confirm(t.confirmLeave || "You have unsaved changes. Are you sure you want to leave?");
+    }
+    return false;
+  });
 
   useEffect(() => {
     if (searchTimeoutRef.current) clearTimeout(searchTimeoutRef.current);
@@ -101,7 +123,7 @@ export default function WorkspaceCreate() {
         description,
         members: members.map(m => ({ user_id: m.user.id, role: m.role }))
       };
-      const newWorkspace = await createWorkspace({ name, description });
+      const newWorkspace = await createWorkspace(payload);
 
       window.dispatchEvent(new CustomEvent('workspace_created', {
         detail: newWorkspace
@@ -152,181 +174,210 @@ export default function WorkspaceCreate() {
     setMembers(members.map(m => m.localId === localId ? { ...m, role: newRole as any } : m));
   };
 
-  // Creator has full rights to manage members before creating
   const canManageMembers = true;
   const isFirstOwner = true;
 
   return (
-    <div className="max-w-2xl mx-auto p-6 space-y-6">
-      <h1 className="text-2xl font-bold text-slate-900 dark:text-white mb-6">
+    <div className="absolute inset-0 flex flex-col p-4 sm:p-6 bg-slate-50 dark:bg-slate-900 overflow-hidden">
+      <h1 className="text-2xl font-bold text-slate-900 dark:text-white mb-4 sm:mb-6 shrink-0">
         {t.workspace?.createTitle || "Create Workspace"}
       </h1>
       
-      <form onSubmit={handleSubmit} className="bg-white dark:bg-slate-900 rounded-xl p-6 border border-slate-200 dark:border-slate-800">
-        <div className="mb-4">
-          <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
-            {t.workspace?.nameLabel || "Name"}
-          </label>
-          <input
-            type="text"
-            value={name}
-            onChange={(e) => setName(e.target.value)}
-            className="w-full px-4 py-2 border border-slate-300 dark:border-slate-700 rounded-lg bg-transparent text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500"
-            required
-          />
+      <div className="flex flex-col lg:flex-row gap-4 sm:gap-6 flex-1 min-h-0">
+        <div className="w-full lg:w-1/3 lg:max-w-md flex flex-col shrink-0 overflow-y-auto bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 shadow-sm">
+          <form onSubmit={handleSubmit} className="flex flex-col h-full p-6">
+            <div className="mb-4">
+              <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
+                {t.workspace?.nameLabel || "Name"}
+              </label>
+              <Input
+                type="text"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                placeholder={t.workspace?.namePlaceholder || "e.g. My Company"}
+                className="w-full px-4 py-2 border border-slate-300 dark:border-slate-700 rounded-lg bg-transparent text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500"
+                required
+              />
+            </div>
+            <div className="mb-6">
+              <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
+                {t.workspace?.descriptionLabel || "Description"}
+              </label>
+              <TextAreaInput
+                value={description}
+                onChange={(e) => setDescription(e.target.value)}
+                placeholder={t.workspace?.descriptionPlaceholder || "Optional description..."}
+                className="w-full px-4 py-2 border border-slate-300 dark:border-slate-700 rounded-lg bg-transparent text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500 h-32 resize-none"
+              />
+            </div>
+            <div className="mt-auto pt-6 flex justify-end gap-3 border-t border-slate-100 dark:border-slate-800 shrink-0">
+              <Button
+                type="button"
+                variant="ghost"
+                onClick={() => navigate('/workspaces')}
+              >
+                {t.actions?.cancel || "Cancel"}
+              </Button>
+              <Button
+                type="submit"
+                disabled={isSaving || !name.trim()}
+              >
+                {isSaving ? (t.workspace?.loading || "Saving...") : (t.workspace?.create || "Create")}
+              </Button>
+            </div>
+          </form>
         </div>
-        <div className="mb-6">
-          <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
-            {t.workspace?.descriptionLabel || "Description"}
-          </label>
-          <textarea
-            value={description}
-            onChange={(e) => setDescription(e.target.value)}
-            placeholder={t.workspace?.descriptionPlaceholder || "Optional description..."}
-            className="w-full px-4 py-2 border border-slate-300 dark:border-slate-700 rounded-lg bg-transparent text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500 h-32 resize-none"
-          />
-        </div>
-        <div className="flex justify-end gap-3">
-          <Button
-            type="button"
-            variant="ghost"
-            onClick={() => navigate('/workspaces')}
-          >
-            {t.workspace?.cancel || "Cancel"}
-          </Button>
-          <Button
-            type="submit"
-            disabled={isSaving || !name.trim()}
-          >
-            {isSaving ? (t.workspace?.loading || "Saving...") : (t.workspace?.create || "Create")}
-          </Button>
-        </div>
-      </form>
 
-      <div className="bg-white dark:bg-slate-900 rounded-xl p-6 border border-slate-200 dark:border-slate-800">
-        <h2 className="text-lg font-semibold text-slate-900 dark:text-white mb-4">{ t.workspace?.members || "Members" }</h2>
-        
-        {canManageMembers && (
-          <div className="mb-6 space-y-3">
-            <input
-              type="text"
-              placeholder={t.workspace?.searchMemberPlaceholder || "Search user by exact mobile number..."}
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(toEnglishDigits(e.target.value))}
-              className="w-full px-4 py-2 border border-slate-300 dark:border-slate-700 rounded-lg bg-transparent text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500"
-              dir="auto"
-            />
+        <div className="w-full lg:w-2/3 flex-1 flex flex-col min-h-100 lg:min-h-0 bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 shadow-sm overflow-hidden">
+          <div className="p-6 shrink-0 border-b border-slate-100 dark:border-slate-800 bg-white dark:bg-slate-900 z-10">
+            <h2 className="text-lg font-semibold text-slate-900 dark:text-white mb-4">
+              { t.workspace?.members || "Members" }
+            </h2>
             
-            {isSearching && <p className="text-sm text-slate-500">{t.workspace?.searching || "Searching..."}</p>}
-
-            {searchError && !isSearching && (
-              <div className="flex items-center gap-2 p-3 text-sm text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-500/10 rounded-lg border border-red-100 dark:border-red-500/20">
-                <AlertCircle className="w-4 h-4" />
-                {t.workspace?.userNotFound || "No user found with this exact number."}
-              </div>
-            )}
-
-            {searchResult && !isSearching && (
-              <div className="flex flex-col sm:flex-row items-start sm:items-center gap-3 p-3 bg-blue-50 dark:bg-blue-500/10 border border-blue-200 dark:border-blue-500/30 rounded-lg">
-                <div className="flex items-center gap-3 flex-1 w-full">
-                  {searchResult.profile_picture ? (
-                    <img src={searchResult.profile_picture} alt={searchResult.first_name} className="w-10 h-10 rounded-full object-cover" />
-                  ) : (
-                    <div className="w-10 h-10 rounded-full bg-blue-200 dark:bg-blue-900/50 flex items-center justify-center text-blue-700 dark:text-blue-300 font-bold text-sm">
-                      {searchResult.first_name?.[0] || "U"}
+            {canManageMembers && (
+              <div className="space-y-3">
+                <div className="relative w-full">
+                  {isSearching && (
+                    <div className="absolute top-1/2 -translate-y-1/2 left-auto right-3 pointer-events-none">
+                      <Loader2 className="h-5 w-5 text-blue-500 animate-spin" />
                     </div>
                   )}
-                  <div className="flex-1 min-w-0">
-                    <p className="text-sm font-medium text-slate-900 dark:text-slate-100 truncate">
-                      {searchResult.first_name} {searchResult.last_name}
-                    </p>
-                    <p className="text-xs text-slate-500 dark:text-slate-400 truncate">
-                      {toPersianNum(searchResult.mobile)}
-                    </p>
-                  </div>
+                  <Input
+                    type="tel"
+                    placeholder={t.workspace?.searchMemberPlaceholder || "Search user by exact mobile number..."}
+                    value={searchQuery}
+                    onChange={(e) => {
+                      const englishDigits = toEnglishDigits(e.target.value);
+                      if (/\D/.test(englishDigits)) {
+                        toast.warning(t.workspace?.onlyNumbersAllowed || "Only numbers are allowed.");
+                      }
+                      const numbersOnly = englishDigits.replace(/\D/g, '');
+                      setSearchQuery(numbersOnly);
+                    }}
+                    className="w-full px-4 pe-10 border border-slate-300 dark:border-slate-700 rounded-lg bg-transparent text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500"
+                    
+                  />
                 </div>
                 
-                <div className="flex items-center gap-2 w-full sm:w-auto mt-2 sm:mt-0">
-                  <select
-                    value={newMemberRole}
-                    onChange={(e) => setNewMemberRole(e.target.value as any)}
-                    className="flex-1 sm:flex-none text-sm bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-700 rounded-md px-2 py-1.5 outline-none focus:ring-2 focus:ring-blue-500 text-slate-700 dark:text-slate-300"
-                  >
-                    {isFirstOwner && <option value="owner">{t.workspace?.roles?.owner || "Owner"}</option>}
-                    <option value="admin">{t.workspace?.roles?.admin || "Admin"}</option>
-                    <option value="member">{t.workspace?.roles?.member || "Member"}</option>
-                    <option value="guest">{t.workspace?.roles?.guest || "Guest"}</option>
-                  </select>
-                  
-                  <Button
-                    type="button"
-                    size="sm"
-                    onClick={handleAddMember}
-                    disabled={members.some(m => m.user?.id === searchResult.id)}
-                    className="gap-1.5"
-                  >
-                    <UserPlus className="w-4 h-4" />
-                    {members.some(m => m.user?.id === searchResult.id) 
-                      ? (t.workspace?.userAlreadyAdded || "Added") 
-                      : (t.workspace?.addMember || "Add")}
-                  </Button>
-                </div>
+                {isSearching && <p className="text-sm text-slate-500">{t.workspace?.searching || "Searching..."}</p>}
+
+                {searchError && !isSearching && (
+                  <div className="flex items-center gap-2 p-3 text-sm text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-500/10 rounded-lg border border-red-100 dark:border-red-500/20">
+                    <AlertCircle className="w-4 h-4" />
+                    {t.workspace?.userNotFound || "No user found with this exact number."}
+                  </div>
+                )}
+
+                {searchResult && !isSearching && (
+                  <div className="flex flex-col sm:flex-row items-start sm:items-center gap-3 p-3 bg-blue-50 dark:bg-blue-500/10 border border-blue-200 dark:border-blue-500/30 rounded-lg">
+                    <div className="flex items-center gap-3 flex-1 w-full">
+                      {searchResult.profile_picture ? (
+                        <img src={searchResult.profile_picture} alt={searchResult.first_name} className="w-10 h-10 rounded-full object-cover shadow-sm" />
+                      ) : (
+                        <div className="w-10 h-10 rounded-full bg-blue-200 dark:bg-blue-900/50 flex items-center justify-center text-blue-700 dark:text-blue-300 font-bold text-sm shadow-sm">
+                          {searchResult.first_name?.[0] || "U"}
+                        </div>
+                      )}
+                      <div className="flex-1 min-w-0">
+                        <p className="text-sm font-medium text-slate-900 dark:text-slate-100 truncate">
+                          {searchResult.first_name} {searchResult.last_name}
+                        </p>
+                        <p className="text-xs text-slate-500 dark:text-slate-400 truncate">
+                          {toPersianNum(searchResult.mobile)}
+                        </p>
+                      </div>
+                    </div>
+                    
+                    <div className="flex items-center gap-2 w-full sm:w-auto mt-2 sm:mt-0">
+                      <Select
+                        value={newMemberRole}
+                        onChange={(val) => setNewMemberRole(val as any)}
+                        options={[
+                          ...(isFirstOwner ? [{ value: "owner", label: t.workspace?.roles?.owner || "Owner" }] : []),
+                          { value: "admin", label: t.workspace?.roles?.admin || "Admin" },
+                          { value: "member", label: t.workspace?.roles?.member || "Member" },
+                          { value: "guest", label: t.workspace?.roles?.guest || "Guest" },
+                        ]}
+                        className="flex-1 sm:flex-none"
+                        buttonClassName="w-full sm:w-[110px] px-3 py-1.5 text-sm"
+                      />
+
+                      <Button
+                        type="button"
+                        size="sm"
+                        onClick={handleAddMember}
+                        disabled={members.some(m => m.user?.id === searchResult.id)}
+                        className="gap-1.5"
+                      >
+                        <UserPlus className="w-4 h-4" />
+                        {members.some(m => m.user?.id === searchResult.id) 
+                          ? (t.workspace?.userAlreadyAdded || "Added") 
+                          : (t.workspace?.addMember || "Add")}
+                      </Button>
+                    </div>
+                  </div>
+                )}
               </div>
             )}
           </div>
-        )}
 
-        <div className="space-y-3">
-          {members.map((m) => {
-            return (
-              <div key={m.localId} className="flex flex-col sm:flex-row sm:items-center justify-between p-3 border border-slate-200 dark:border-slate-800 rounded-lg gap-3">
-                <div className="flex items-center gap-3">
-                  {m.user?.profile_picture ? (
-                    <img src={m.user?.profile_picture} alt={m.user?.first_name} className="w-10 h-10 rounded-full object-cover" />
-                  ) : (
-                    <div className="w-10 h-10 rounded-full bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-600 dark:text-slate-400 font-bold text-sm">
-                      {m.user?.first_name?.[0] || m.user?.last_name?.[0] || "U"}
+          {/* لیست اعضا (با قابلیت اسکرول) */}
+          <div className="flex-1 overflow-y-auto p-6 space-y-3 bg-slate-50/30 dark:bg-slate-900/30">
+            {members.map((m) => {
+              return (
+                <div key={m.localId} className="flex flex-col sm:flex-row sm:items-center justify-between p-3 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-lg gap-3 shadow-sm hover:border-blue-200 dark:hover:border-blue-800 transition-colors">
+                  <div className="flex items-center gap-3">
+                    {m.user?.profile_picture ? (
+                      <img src={m.user?.profile_picture} alt={m.user?.first_name} className="w-10 h-10 rounded-full object-cover shadow-sm" />
+                    ) : (
+                      <div className="w-10 h-10 rounded-full bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-600 dark:text-slate-400 font-bold text-sm shadow-sm">
+                        {m.user?.first_name?.[0] || m.user?.last_name?.[0] || "U"}
+                      </div>
+                    )}
+                    <div>
+                      <p className="text-sm font-medium text-slate-900 dark:text-slate-100">
+                        {`${m.user?.first_name || ''} ${m.user?.last_name || ''}`.trim() || 'Unknown'}
+                      </p>
+                      <p className="text-xs text-slate-500">{toPersianNum(m.user?.mobile)}</p>
                     </div>
-                  )}
-                  <div>
-                    <p className="text-sm font-medium text-slate-900 dark:text-slate-100">
-                      {`${m.user?.first_name || ''} ${m.user?.last_name || ''}`.trim() || 'Unknown'}
-                    </p>
-                    <p className="text-xs text-slate-500">{toPersianNum(m.user?.mobile)}</p>
+                  </div>
+
+                  <div className="flex items-center gap-3 self-end sm:self-auto">
+                    <Select
+                      value={m.role}
+                      onChange={(val) => handleChangeRole(m.localId, val)}
+                      options={[
+                        ...(isFirstOwner ? [{ value: "owner", label: t.workspace?.roles?.owner || "Owner" }] : []),
+                        { value: "admin", label: t.workspace?.roles?.admin || "Admin" },
+                        { value: "member", label: t.workspace?.roles?.member || "Member" },
+                        { value: "guest", label: t.workspace?.roles?.guest || "Guest" },
+                      ]}
+                      buttonClassName="w-[110px] px-3 py-1.5 text-sm"
+                    />
+
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="icon"
+                      onClick={() => openDeleteModal(m.localId)}
+                      className="h-8 w-8 text-slate-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-500/10"
+                      title={t.workspace?.removeMemberTitle || "Remove member"}
+                    >
+                      <Trash2 className="w-4 h-4" />
+                    </Button>
                   </div>
                 </div>
-
-                <div className="flex items-center gap-3 self-end sm:self-auto">
-                  <select
-                    value={m.role}
-                    onChange={(e) => handleChangeRole(m.localId, e.target.value)}
-                    className="text-sm bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-md px-2 py-1 outline-none focus:ring-2 focus:ring-blue-500 text-slate-700 dark:text-slate-300"
-                  >
-                    {isFirstOwner && <option value="owner">{t.workspace?.roles?.owner || "Owner"}</option>}
-                    <option value="admin">{t.workspace?.roles?.admin || "Admin"}</option>
-                    <option value="member">{t.workspace?.roles?.member || "Member"}</option>
-                    <option value="guest">{t.workspace?.roles?.guest || "Guest"}</option>
-                  </select>
-
-                  <Button
-                    type="button"
-                    variant="ghost"
-                    size="icon"
-                    onClick={() => openDeleteModal(m.localId)}
-                    className="h-8 w-8 text-slate-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-500/10"
-                    title={t.workspace?.removeMemberTitle || "Remove member"}
-                  >
-                    <Trash2 className="w-4 h-4" />
-                  </Button>
-                </div>
+              );
+            })}
+            {members.length === 0 && (
+              <div className="flex flex-col items-center justify-center py-10 text-slate-500">
+                <Shield className="w-12 h-12 mb-3 text-slate-200 dark:text-slate-700" />
+                <p className="text-sm">
+                  {t.workspace?.noMembers || "No members added yet."}
+                </p>
               </div>
-            );
-          })}
-          {members.length === 0 && (
-            <p className="text-sm text-center text-slate-500 py-4">
-              {t.workspace?.noMembers || "No members added yet."}
-            </p>
-          )}
+            )}
+          </div>
         </div>
       </div>
 
@@ -367,13 +418,13 @@ export default function WorkspaceCreate() {
                       variant="secondary"
                       onClick={() => setIsDeleteDialogOpen(false)}
                     >
-                      {t.workspace?.cancel || "Cancel"}
+                      {t.actions?.cancel || "Cancel"}
                     </Button>
                     <Button
                       variant="destructive"
                       onClick={handleDeleteMember}
                     >
-                      {t.workspace?.delete || "Delete"}
+                      {t.actions?.delete || "Delete"}
                     </Button>
                   </div>
                 </Dialog.Panel>
diff --git a/src/pages/WorkspaceEdit.tsx b/src/pages/WorkspaceEdit.tsx
index 75d69ae..7f28723 100644
--- a/src/pages/WorkspaceEdit.tsx
+++ b/src/pages/WorkspaceEdit.tsx
@@ -1,5 +1,5 @@
-import React, { useState, useEffect, useRef, Fragment } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
+import React, { useState, useEffect, useRef, Fragment, useMemo } from 'react';
+import { useBlocker, useNavigate, useParams } from 'react-router-dom';
 import { useTranslation } from '../hooks/useTranslation';
 import { AlertCircle, UserPlus, Trash2, Shield } from 'lucide-react';
 import { Dialog, Transition } from '@headlessui/react';
@@ -16,6 +16,9 @@ import { searchUserByExactMobile, type SearchedUser } from '../api/users';
 import { useAppContext } from '../context/AppContext';
 import { Button } from '../components/ui/button';
 import { InfiniteScroll } from '../components/infiniteScroll';
+import { Select } from '../components/ui/Select';
+import { Input } from '../components/ui/input';
+import { TextAreaInput } from '../components/ui/TextAreaInput';
 
 const toEnglishDigits = (str: string) => {
   return str.replace(/[۰-۹]/g, (d) => '۰۱۲۳۴۵۶۷۸۹'.indexOf(d).toString())
@@ -66,6 +69,44 @@ export default function EditWorkspace() {
 
   const searchTimeoutRef = useRef<NodeJS.Timeout>();
 
+  const [initialData, setInitialData] = useState({
+    name: '',
+    description: '',
+  });
+  const hasUnsavedChanges = useMemo(() => {
+    if (isLoading) return false;
+
+    const isNameChanged = name.trim() !== (initialData.name || '').trim();
+    const isDescChanged = description.trim() !== (initialData.description || '').trim();
+
+    return isNameChanged || isDescChanged;
+  }, [name, description, initialData, isLoading]);
+
+  useEffect(() => {
+    const handleBeforeUnload = (e: BeforeUnloadEvent) => {
+      if (hasUnsavedChanges && !isSaving) {
+        e.preventDefault();
+        e.returnValue = '';
+      }
+    };
+    window.addEventListener('beforeunload', handleBeforeUnload);
+    return () => window.removeEventListener('beforeunload', handleBeforeUnload);
+  }, [hasUnsavedChanges, isSaving]);
+
+  useBlocker(({ currentLocation, nextLocation }) => {
+    if (hasUnsavedChanges && !isSaving && currentLocation.pathname !== nextLocation.pathname) {
+      return !window.confirm(t.confirmLeave || "تغییرات ذخیره نشده‌ای دارید. آیا مطمئن هستید که می‌خواهید خارج شوید؟");
+    }
+    return false;
+  });
+
+  useBlocker(({ currentLocation, nextLocation }) => {
+    if (hasUnsavedChanges && !isSaving && currentLocation.pathname !== nextLocation.pathname) {
+      return !window.confirm(t.confirmLeave || "You have unsaved changes. Are you sure you want to leave?");
+    }
+    return false;
+  });
+
   useEffect(() => {
     if (id) loadData();
   }, [id]);
@@ -85,6 +126,11 @@ export default function EditWorkspace() {
       setMembers(results);
       setOffset(LIMIT);
       setHasMore(!!membersData.next);
+      
+      setInitialData({ 
+        name: workspaceData.name, 
+        description: workspaceData.description || '',
+      });
     } catch (error) {
       toast.error(t.workspace?.toast?.errorLoad || "Failed to load workspace data.");
       navigate('/workspaces');
@@ -97,7 +143,7 @@ export default function EditWorkspace() {
     if (isLoadingMembers || !hasMore || !id) return;
     try {
       setIsLoadingMembers(true);
-      const membersData = await fetchWorkspaceMemberships({ workspace: id, limit: LIMIT, offset });
+      const membersData = await fetchWorkspaceMemberships({ workspace: id, limit: `${LIMIT}`, offset: `${offset}` });
       const results = membersData.results || [];
       
       setMembers((prev) => [...prev, ...results]);
@@ -212,196 +258,216 @@ export default function EditWorkspace() {
   if (isLoading) return <div className="p-8 text-center">{t.workspace?.loading || "Loading..."}</div>;
 
   return (
-    <div className="max-w-2xl mx-auto p-6 space-y-6">
-      <h1 className="text-2xl font-bold text-slate-900 dark:text-white mb-6">
+    <div className="absolute inset-0 flex flex-col p-4 sm:p-6 bg-slate-50 dark:bg-slate-900 overflow-hidden">
+      <h1 className="text-2xl font-bold text-slate-900 dark:text-white mb-4 sm:mb-6 shrink-0">
         {t.workspace?.editTitle || "Edit Workspace"}
       </h1>
       
-      <form onSubmit={handleSubmit} className="bg-white dark:bg-slate-900 rounded-xl p-6 border border-slate-200 dark:border-slate-800">
-        <div className="mb-4">
-          <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
-            {t.workspace?.nameLabel || "Name"}
-          </label>
-          <input
-            type="text"
-            value={name}
-            onChange={(e) => setName(e.target.value)}
-            className="w-full px-4 py-2 border border-slate-300 dark:border-slate-700 rounded-lg bg-transparent text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500"
-            required
-          />
-        </div>
-        <div className="mb-6">
-          <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
-            {t.workspace?.descriptionLabel || "Description"}
-          </label>
-          <textarea
-            value={description}
-            onChange={(e) => setDescription(e.target.value)}
-            placeholder={t.workspace?.descriptionPlaceholder || "Optional description..."}
-            className="w-full px-4 py-2 border border-slate-300 dark:border-slate-700 rounded-lg bg-transparent text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500 h-32 resize-none"
-          />
-        </div>
-        <div className="flex justify-end gap-3">
-          <Button
-            type="button"
-            variant="ghost"
-            onClick={() => navigate('/workspaces')}
-          >
-            {t.workspace?.cancel || "Cancel"}
-          </Button>
-          <Button
-            type="submit"
-            disabled={isSaving || !name.trim()}
-          >
-            {isSaving ? (t.workspace?.loading || "Saving...") : (t.workspace?.save || "Save")}
-          </Button>
-        </div>
-      </form>
-
-      <div className="bg-white dark:bg-slate-900 rounded-xl p-6 border border-slate-200 dark:border-slate-800">
-        <h2 className="text-lg font-semibold text-slate-900 dark:text-white mb-4">{ t.workspace?.members || "Members" }</h2>
+      <div className="flex flex-col lg:flex-row gap-4 sm:gap-6 flex-1 min-h-0">
         
-        {canManageMembers && (
-          <div className="mb-6 space-y-3">
-            <input
-              type="text"
-              placeholder={t.workspace?.searchMemberPlaceholder || "Search user by exact mobile number..."}
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(toEnglishDigits(e.target.value))}
-              className="w-full px-4 py-2 border border-slate-300 dark:border-slate-700 rounded-lg bg-transparent text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500"
-              dir="auto"
-            />
+        {/* --- ستون سمت چپ: فرم ویرایش --- */}
+        <div className="w-full lg:w-1/3 lg:max-w-md flex flex-col shrink-0 overflow-y-auto bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 shadow-sm">
+          <form onSubmit={handleSubmit} className="flex flex-col h-full p-6">
+            <div className="mb-4">
+              <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
+                {t.workspace?.nameLabel || "Name"}
+              </label>
+              <Input
+                type="text"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                className="w-full px-4 py-2 border border-slate-300 dark:border-slate-700 rounded-lg bg-transparent text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500"
+                required
+              />
+            </div>
+            <div className="mb-6">
+              <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">
+                {t.workspace?.descriptionLabel || "Description"}
+              </label>
+              <TextAreaInput
+                value={description}
+                onChange={(e) => setDescription(e.target.value)}
+                placeholder={t.workspace?.descriptionPlaceholder || "Optional description..."}
+                className="w-full px-4 py-2 border border-slate-300 dark:border-slate-700 rounded-lg bg-transparent text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500 h-32 resize-none"
+              />
+            </div>
+            <div className="mt-auto pt-6 flex justify-end gap-3 border-t border-slate-100 dark:border-slate-800 shrink-0">
+              <Button
+                type="button"
+                variant="ghost"
+                onClick={() => navigate('/workspaces')}
+              >
+                {t.actions?.cancel || "Cancel"}
+              </Button>
+              <Button
+                type="submit"
+                disabled={isSaving || !name.trim()}
+              >
+                {isSaving ? (t.workspace?.loading || "Saving...") : (t.workspace?.save || "Save")}
+              </Button>
+            </div>
+          </form>
+        </div>
+
+        {/* --- ستون سمت راست: لیست اعضا --- */}
+        <div className="w-full lg:w-2/3 flex-1 flex flex-col min-h-100 lg:min-h-0 bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 shadow-sm overflow-hidden">
+          
+          {/* بخش جستجو و هدر (ثابت در بالا) */}
+          <div className="p-6 shrink-0 border-b border-slate-100 dark:border-slate-800 bg-white dark:bg-slate-900 z-10">
+            <h2 className="text-lg font-semibold text-slate-900 dark:text-white mb-4">
+              { t.workspace?.members || "Members" }
+            </h2>
             
-            {isSearching && <p className="text-sm text-slate-500">{t.workspace?.searching || "Searching..."}</p>}
-
-            {searchError && !isSearching && (
-              <div className="flex items-center gap-2 p-3 text-sm text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-500/10 rounded-lg border border-red-100 dark:border-red-500/20">
-                <AlertCircle className="w-4 h-4" />
-                {t.workspace?.userNotFound || "No user found with this exact number."}
-              </div>
-            )}
-
-            {searchResult && !isSearching && (
-              <div className="flex flex-col sm:flex-row items-start sm:items-center gap-3 p-3 bg-blue-50 dark:bg-blue-500/10 border border-blue-200 dark:border-blue-500/30 rounded-lg">
-                <div className="flex items-center gap-3 flex-1 w-full">
-                  {searchResult.profile_picture ? (
-                    <img src={searchResult.profile_picture} alt={searchResult.first_name} className="w-10 h-10 rounded-full object-cover" />
-                  ) : (
-                    <div className="w-10 h-10 rounded-full bg-blue-200 dark:bg-blue-900/50 flex items-center justify-center text-blue-700 dark:text-blue-300 font-bold text-sm">
-                      {searchResult.first_name?.[0] || "U"}
-                    </div>
-                  )}
-                  <div className="flex-1 min-w-0">
-                    <p className="text-sm font-medium text-slate-900 dark:text-slate-100 truncate">
-                      {searchResult.first_name} {searchResult.last_name}
-                    </p>
-                    <p className="text-xs text-slate-500 dark:text-slate-400 truncate">
-                      {toPersianNum(searchResult.mobile)}
-                    </p>
-                  </div>
-                </div>
+            {canManageMembers && (
+              <div className="space-y-3">
+                <Input
+                  type="text"
+                  placeholder={t.workspace?.searchMemberPlaceholder || "Search user by exact mobile number..."}
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(toEnglishDigits(e.target.value))}
+                  className="w-full px-4 py-2 border border-slate-300 dark:border-slate-700 rounded-lg bg-transparent text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500"
+                  dir="auto"
+                />
                 
-                <div className="flex items-center gap-2 w-full sm:w-auto mt-2 sm:mt-0">
-                  <select
-                    value={newMemberRole}
-                    onChange={(e) => setNewMemberRole(e.target.value as any)}
-                    className="flex-1 sm:flex-none text-sm bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-700 rounded-md px-2 py-1.5 outline-none focus:ring-2 focus:ring-blue-500 text-slate-700 dark:text-slate-300"
-                  >
-                    {isFirstOwner && <option value="owner">{t.workspace?.roles?.owner || "Owner"}</option>}
-                    <option value="admin">{t.workspace?.roles?.admin || "Admin"}</option>
-                    <option value="member">{t.workspace?.roles?.member || "Member"}</option>
-                    <option value="guest">{t.workspace?.roles?.guest || "Guest"}</option>
-                  </select>
-                  
-                  <Button
-                    type="button"
-                    size="sm"
-                    onClick={handleAddMember}
-                    disabled={members.some(m => m.user?.id === searchResult.id)}
-                    className="gap-1.5"
-                  >
-                    <UserPlus className="w-4 h-4" />
-                    {members.some(m => m.user?.id === searchResult.id) 
-                      ? (t.workspace?.userAlreadyAdded || "Added") 
-                      : (t.workspace?.addMember || "Add")}
-                  </Button>
-                </div>
+                {isSearching && <p className="text-sm text-slate-500">{t.workspace?.searching || "Searching..."}</p>}
+
+                {searchError && !isSearching && (
+                  <div className="flex items-center gap-2 p-3 text-sm text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-500/10 rounded-lg border border-red-100 dark:border-red-500/20">
+                    <AlertCircle className="w-4 h-4" />
+                    {t.workspace?.userNotFound || "No user found with this exact number."}
+                  </div>
+                )}
+
+                {searchResult && !isSearching && (
+                  <div className="flex flex-col sm:flex-row items-start sm:items-center gap-3 p-3 bg-blue-50 dark:bg-blue-500/10 border border-blue-200 dark:border-blue-500/30 rounded-lg">
+                    <div className="flex items-center gap-3 flex-1 w-full">
+                      {searchResult.profile_picture ? (
+                        <img src={searchResult.profile_picture} alt={searchResult.first_name} className="w-10 h-10 rounded-full object-cover shadow-sm" />
+                      ) : (
+                        <div className="w-10 h-10 rounded-full bg-blue-200 dark:bg-blue-900/50 flex items-center justify-center text-blue-700 dark:text-blue-300 font-bold text-sm shadow-sm">
+                          {searchResult.first_name?.[0] || "U"}
+                        </div>
+                      )}
+                      <div className="flex-1 min-w-0">
+                        <p className="text-sm font-medium text-slate-900 dark:text-slate-100 truncate">
+                          {searchResult.first_name} {searchResult.last_name}
+                        </p>
+                        <p className="text-xs text-slate-500 dark:text-slate-400 truncate">
+                          {toPersianNum(searchResult.mobile)}
+                        </p>
+                      </div>
+                    </div>
+                    
+                    <div className="flex items-center gap-2 w-full sm:w-auto mt-2 sm:mt-0">
+                      <Select
+                        value={newMemberRole}
+                        onChange={(val) => setNewMemberRole(val as any)}
+                        options={[
+                          ...(isFirstOwner ? [{ value: "owner", label: t.workspace?.roles?.owner || "Owner" }] : []),
+                          { value: "admin", label: t.workspace?.roles?.admin || "Admin" },
+                          { value: "member", label: t.workspace?.roles?.member || "Member" },
+                          { value: "guest", label: t.workspace?.roles?.guest || "Guest" },
+                        ]}
+                        className="flex-1 sm:flex-none"
+                        buttonClassName="w-full sm:w-[110px] px-3 py-1.5 text-sm"
+                      />
+                      
+                      <Button
+                        type="button"
+                        size="sm"
+                        onClick={handleAddMember}
+                        disabled={members.some(m => m.user?.id === searchResult.id)}
+                        className="gap-1.5"
+                      >
+                        <UserPlus className="w-4 h-4" />
+                        {members.some(m => m.user?.id === searchResult.id) 
+                          ? (t.workspace?.userAlreadyAdded || "Added") 
+                          : (t.workspace?.addMember || "Add")}
+                      </Button>
+                    </div>
+                  </div>
+                )}
               </div>
             )}
           </div>
-        )}
 
-        <div className="space-y-3">
-          <InfiniteScroll
-            onLoadMore={loadMoreMembers}
-            hasMore={hasMore}
-            isLoading={isLoadingMembers}
-            className="space-y-3"
-            loader={<div className="py-4 text-center text-sm text-slate-500 dark:text-slate-400">{t.workspace?.loading || "Loading more members..."}</div>}
-          >
-            {members.map((m) => {
-              const isThisMemberTheFirstOwner = m.user?.id === workspaceOwnerId;
-              const canChangeThisUserRole = canManageMembers && !isThisMemberTheFirstOwner && (isFirstOwner || m.role !== 'owner');
+          {/* لیست اعضا (با قابلیت اسکرول مجزا) */}
+          <div className="flex-1 overflow-y-auto p-6 space-y-3 bg-slate-50/30 dark:bg-slate-900/30">
+            <InfiniteScroll
+              onLoadMore={loadMoreMembers}
+              hasMore={hasMore}
+              isLoading={isLoadingMembers}
+              className="space-y-3"
+              loader={<div className="py-4 text-center text-sm text-slate-500 dark:text-slate-400">{t.workspace?.loading || "Loading more members..."}</div>}
+            >
+              {members.map((m) => {
+                const isThisMemberTheFirstOwner = m.user?.id === workspaceOwnerId;
+                const canChangeThisUserRole = canManageMembers && !isThisMemberTheFirstOwner && (isFirstOwner || m.role !== 'owner');
 
-              return (
-                <div key={m.id} className="flex flex-col sm:flex-row sm:items-center justify-between p-3 border border-slate-200 dark:border-slate-800 rounded-lg gap-3">
-                  <div className="flex items-center gap-3">
-                    {m.user?.profile_picture ? (
-                      <img src={m.user?.profile_picture} alt={m.user?.first_name} className="w-10 h-10 rounded-full object-cover" />
-                    ) : (
-                      <div className="w-10 h-10 rounded-full bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-600 dark:text-slate-400 font-bold text-sm">
-                        {m.user?.name?.[0] || m.user?.first_name?.[0] || "U"}
+                return (
+                  <div key={m.id} className="flex flex-col sm:flex-row sm:items-center justify-between p-3 bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-lg gap-3 shadow-sm hover:border-blue-200 dark:hover:border-blue-800 transition-colors">
+                    <div className="flex items-center gap-3">
+                      {m.user?.profile_picture ? (
+                        <img src={m.user?.profile_picture} alt={m.user?.first_name} className="w-10 h-10 rounded-full object-cover shadow-sm" />
+                      ) : (
+                        <div className="w-10 h-10 rounded-full bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-600 dark:text-slate-400 font-bold text-sm shadow-sm">
+                          {m.user?.name?.[0] || m.user?.first_name?.[0] || "U"}
+                        </div>
+                      )}
+                      <div>
+                        <p className="text-sm font-medium text-slate-900 dark:text-slate-100">
+                          {m.user?.name || `${m.user?.first_name || ''} ${m.user?.last_name || ''}`.trim() || 'Unknown'}
+                        </p>
+                        <p className="text-xs text-slate-500">{toPersianNum(m.user?.mobile)}</p>
                       </div>
-                    )}
-                    <div>
-                      <p className="text-sm font-medium text-slate-900 dark:text-slate-100">
-                        {m.user?.name || `${m.user?.first_name || ''} ${m.user?.last_name || ''}`.trim() || 'Unknown'}
-                      </p>
-                      <p className="text-xs text-slate-500">{toPersianNum(m.user?.mobile)}</p>
+                    </div>
+
+                    <div className="flex items-center gap-3 self-end sm:self-auto">
+                      {canChangeThisUserRole ? (
+                        <Select
+                          value={m.role}
+                          onChange={(val) => handleChangeRole(m.id, val)}
+                          options={[
+                            ...(isFirstOwner ? [{ value: "owner", label: t.workspace?.roles?.owner || "Owner" }] : []),
+                            { value: "admin", label: t.workspace?.roles?.admin || "Admin" },
+                            { value: "member", label: t.workspace?.roles?.member || "Member" },
+                            { value: "guest", label: t.workspace?.roles?.guest || "Guest" },
+                          ]}
+                          buttonClassName="w-[110px] px-3 py-1.5 text-sm"
+                        />
+                      ) : (
+                        <span className="text-xs px-2 py-1 bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 rounded-md capitalize flex items-center gap-1">
+                          {m.role === 'owner' && <Shield className="w-3 h-3" />}
+                          {m.role ? t.workspace?.roles?.[m.role] || m.role : "-"}
+                        </span>
+                      )}
+
+                      {canManageMembers && !isThisMemberTheFirstOwner && (isFirstOwner || m.role !== 'owner') && (
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="icon"
+                          onClick={() => openDeleteModal(m.id)}
+                          className="h-8 w-8 text-slate-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-500/10"
+                          title={t.workspace?.removeMemberTitle || "Remove member"}
+                        >
+                          <Trash2 className="w-4 h-4" />
+                        </Button>
+                      )}
                     </div>
                   </div>
-
-                  <div className="flex items-center gap-3 self-end sm:self-auto">
-                    {canChangeThisUserRole ? (
-                      <select
-                        value={m.role}
-                        onChange={(e) => handleChangeRole(m.id, e.target.value)}
-                        className="text-sm bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-md px-2 py-1 outline-none focus:ring-2 focus:ring-blue-500 text-slate-700 dark:text-slate-300"
-                      >
-                        {isFirstOwner && <option value="owner">{t.workspace?.roles?.owner || "Owner"}</option>}
-                        <option value="admin">{t.workspace?.roles?.admin || "Admin"}</option>
-                        <option value="member">{t.workspace?.roles?.member || "Member"}</option>
-                        <option value="guest">{t.workspace?.roles?.guest || "Guest"}</option>
-                      </select>
-                    ) : (
-                      <span className="text-xs px-2 py-1 bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 rounded-md capitalize flex items-center gap-1">
-                        {m.role === 'owner' && <Shield className="w-3 h-3" />}
-                        {m.role ? t.workspace?.roles?.[m.role] || m.role : "-"}
-                      </span>
-                    )}
-
-                    {canManageMembers && !isThisMemberTheFirstOwner && (isFirstOwner || m.role !== 'owner') && (
-                      <Button
-                        type="button"
-                        variant="ghost"
-                        size="icon"
-                        onClick={() => openDeleteModal(m.id)}
-                        className="h-8 w-8 text-slate-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-500/10"
-                        title={t.workspace?.removeMemberTitle || "Remove member"}
-                      >
-                        <Trash2 className="w-4 h-4" />
-                      </Button>
-                    )}
-                  </div>
-                </div>
-              );
-            })}
-          </InfiniteScroll>
-          {members.length === 0 && !isLoadingMembers && (
-            <p className="text-sm text-center text-slate-500 py-4">
-              {t.workspace?.noMembers || "No members found."}
-            </p>
-          )}
+                );
+              })}
+            </InfiniteScroll>
+            {members.length === 0 && !isLoadingMembers && (
+              <div className="flex flex-col items-center justify-center py-10 text-slate-500">
+                <Shield className="w-12 h-12 mb-3 text-slate-200 dark:text-slate-700" />
+                <p className="text-sm">
+                  {t.workspace?.noMembers || "No members found."}
+                </p>
+              </div>
+            )}
+          </div>
         </div>
       </div>
 
@@ -442,13 +508,13 @@ export default function EditWorkspace() {
                       variant="secondary"
                       onClick={() => setIsDeleteDialogOpen(false)}
                     >
-                      {t.workspace?.cancel || "Cancel"}
+                      {t.actions?.cancel || "Cancel"}
                     </Button>
                     <Button
                       variant="destructive"
                       onClick={handleDeleteMember}
                     >
-                      {t.workspace?.delete || "Delete"}
+                      {t.actions?.delete || "Delete"}
                     </Button>
                   </div>
                 </Dialog.Panel>
diff --git a/src/pages/Workspaces.tsx b/src/pages/Workspaces.tsx
index cf3c01f..96c9a94 100644
--- a/src/pages/Workspaces.tsx
+++ b/src/pages/Workspaces.tsx
@@ -1,13 +1,16 @@
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { Plus, Edit2, Trash2, Eye } from 'lucide-react';
+import { Plus, Trash2, Pencil, ChevronRight } from 'lucide-react';
 import { toast } from 'sonner';
 import { fetchWorkspaces, deleteWorkspace, type Workspace } from '../api/workspaces';
 import { useAppContext } from '../context/AppContext';
 import { useTranslation } from '../hooks/useTranslation';
 import FilterBar from '../components/FilterBar';
 import { Button } from '../components/ui/button';
+import { Input } from '../components/ui/input';
+import { Card, CardContent, CardTitle } from '../components/ui/card';
 import { Pagination } from '../components/Pagination';
+import { Modal } from '../components/Modal';
 
 type WorkspaceRole = "owner" | "admin" | "member" | "guest";
 
@@ -33,12 +36,11 @@ export default function Workspaces() {
   const [workspaces, setWorkspaces] = useState<Workspace[]>([]);
   const [isLoading, setIsLoading] = useState(true);
   const [searchQuery, setSearchQuery] = useState('');
-  const [ordering, setOrdering] = useState('-updated_at');
+  const [ordering, setOrdering] = useState('-created_at');
 
-  // تنظیمات پاژینیشن
   const [currentPage, setCurrentPage] = useState(1);
   const [totalItems, setTotalItems] = useState(0);
-  const [limit, setLimit] = useState(9);
+  const [limit, setLimit] = useState(10);
   
   const [deleteModal, setDeleteModal] = useState<{isOpen: boolean; workspace: Workspace | null}>({isOpen: false, workspace: null});
   const [deleteInput, setDeleteInput] = useState('');
@@ -48,13 +50,13 @@ export default function Workspaces() {
   const { t } = useTranslation();
 
   const orderingOptions = [
-    { value: '-updated_at', label: t.workspace?.orderByUpdatedDesc || 'Recently Updated' },
-    { value: '-created_at', label: t.workspace?.orderByCreatedDesc || 'Newest First' },
-    { value: 'created_at', label: t.workspace?.orderByCreatedAsc || 'Oldest First' },
-    { value: 'name', label: t.workspace?.orderByName || 'Name (A-Z)' },
+    { value: '-created_at', label: t.ordering?.createdAtDesc || 'Newest First' },
+    { value: 'created_at', label: t.ordering?.createdAt || 'Oldest First' },
+    { value: 'name', label: t.ordering?.name || 'Name (A-Z)' },
+    { value: '-name', label: t.ordering?.nameDesc || 'Name (Z-A)' },
+    { value: '-updated_at', label: t.ordering?.updatedAtDesc || 'Recently Updated' },
   ];
 
-  // وقتی جستجو یا ترتیب تغییر کرد، به صفحه اول برگرد
   useEffect(() => {
     setCurrentPage(1);
   }, [searchQuery, ordering]);
@@ -79,7 +81,6 @@ export default function Workspaces() {
       
       const data = await fetchWorkspaces(params as any);
       
-      // استخراج هوشمند نتایج و تعداد کل
       const items = Array.isArray(data) ? data : (data?.results || []);
       const count = !Array.isArray(data) && data?.count !== undefined ? data.count : items.length;
       
@@ -92,7 +93,7 @@ export default function Workspaces() {
     }
   };
 
- const confirmDelete = async () => {
+  const confirmDelete = async () => {
     if (!deleteModal.workspace) return;
     try {
       const deletedId = deleteModal.workspace.id;
@@ -100,7 +101,6 @@ export default function Workspaces() {
       
       loadWorkspaces(); 
 
-      // ارسال سیگنال به کل اپلیکیشن برای آپدیت نوار ناوبری
       window.dispatchEvent(new CustomEvent('workspace_deleted', { 
         detail: { id: deletedId } 
       }));
@@ -114,7 +114,7 @@ export default function Workspaces() {
   };
 
   return (
-    <div className="flex flex-col p-6 max-w-6xl mx-auto min-h-[calc(100vh-73px)]">
+    <div className="flex flex-col p-6 min-h-[calc(100vh-73px)] bg-slate-50 dark:bg-slate-900">
       <div className="flex justify-between items-center mb-8">
         <div>
           <h1 className="text-2xl font-bold text-slate-900 dark:text-white">{t.workspace?.title || 'Workspaces'}</h1>
@@ -122,7 +122,7 @@ export default function Workspaces() {
         </div>
         <Button
           onClick={() => navigate('/workspaces/create')}
-          className="gap-2 rounded-xl shadow-sm"
+          className="gap-2 shadow-sm"
         >
           <Plus className="h-5 w-5" />
           {t.workspace?.createNew || 'Create New'}
@@ -143,108 +143,104 @@ export default function Workspaces() {
            <div className="animate-pulse">{t.workspace?.loading || 'Loading...'}</div>
         </div>
       ) : (
-        <>
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
+        <div className="flex flex-col flex-1">
+          <div className="flex flex-col gap-4 mb-6">
             {workspaces.map((workspace) => {
               const isOwner = workspace.owner === user?.id || workspace.my_role === 'owner';
               const isAdmin = workspace.my_role === 'admin' || isOwner;
 
               return (
-                <div 
-                  key={workspace.id} 
-                  className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-2xl p-5 shadow-sm hover:shadow-md transition-shadow flex flex-col"
-                >
-                  <div className="flex-1">
-                    <div className="flex justify-between items-start mb-3 gap-2">
-                      <h3 className="text-lg font-bold text-slate-900 dark:text-white line-clamp-1">
-                        {workspace.name}
-                      </h3>
-                      <RoleBadge role={workspace.my_role} />
+                <Card key={workspace.id} className="flex flex-col text-slate-800 dark:text-slate-100 dark:bg-slate-800 dark:border-slate-700 shadow-sm">
+                  <CardContent className="flex flex-col sm:flex-row items-start sm:items-center justify-between py-4 px-6 gap-4">
+                    <div className="flex-1">
+                      <div className="flex items-center gap-3 mb-2">
+                        <CardTitle className="text-lg line-clamp-1">
+                          {workspace.name}
+                        </CardTitle>
+                        <RoleBadge role={workspace.my_role} />
+                      </div>
+                      <p className="text-sm text-slate-500 dark:text-slate-400 line-clamp-1">
+                        {workspace.description || t.workspace?.noDescription || 'No description'}
+                      </p>
                     </div>
-                    <p className="text-sm text-slate-500 dark:text-slate-400 line-clamp-2">
-                      {workspace.description || t.workspace?.noDescription || 'No description'}
-                    </p>
-                  </div>
 
-                  <div className="mt-6 flex items-center justify-end gap-2 border-t border-slate-100 dark:border-slate-800 pt-4">
-                    <Button
-                      variant="secondary"
-                      size="icon"
-                      onClick={() => navigate(`/workspaces/${workspace.id}`)}
-                      className="rounded-xl hover:text-blue-600 dark:hover:text-blue-400"
-                      title={t.workspace?.view || 'View'}
-                    >
-                      <Eye className="h-4 w-4" />
-                    </Button>
+                    <div className="flex items-center gap-2 shrink-0">
+                      {isOwner && (
+                        <Button 
+                          variant="ghost" 
+                          size="icon"
+                          onClick={() => setDeleteModal({ isOpen: true, workspace })}
+                          className="h-8 w-8 text-slate-400 hover:text-red-600 hover:bg-red-50 dark:hover:text-red-400 dark:hover:bg-red-900/20"
+                          title={t.actions?.delete || 'Delete'}
+                        >
+                          <Trash2 className="w-4 h-4" />
+                        </Button>
+                      )}
+
+                      {isAdmin && (
+                      <Button 
+                          variant="ghost" 
+                          size="icon"
+                          onClick={() => navigate(`/workspaces/${workspace.id}/edit`)}
+                          className="h-8 w-8 text-slate-400 hover:text-blue-600 hover:bg-blue-50 dark:hover:text-blue-400 dark:hover:bg-blue-900/20"
+                          title={t.actions?.edit || 'Edit'}
+                          >
+                          <Pencil className="w-4 h-4" />
+                        </Button>
+                      )}
 
-                    {isAdmin && (
                       <Button
-                        variant="secondary"
                         size="icon"
-                        onClick={() => navigate(`/workspaces/${workspace.id}/edit`)}
-                        className="rounded-xl hover:text-emerald-600 dark:hover:text-emerald-400"
-                        title={t.workspace?.edit || 'Edit'}
+                        onClick={() => navigate(`/workspaces/${workspace.id}`)}
+                        className="h-8 w-8 hover:bg-blue-700 dark:hover:bg-blue-500 border-none shadow-sm transition-all"
+                        title={t.actions?.view || 'View'}
                       >
-                        <Edit2 className="h-4 w-4" />
+                        <ChevronRight className="h-4 w-4 rtl:-scale-x-100" />
                       </Button>
-                    )}
-
-                    {isOwner && (
-                      <Button
-                        variant="secondary"
-                        size="icon"
-                        onClick={() => setDeleteModal({ isOpen: true, workspace })}
-                        className="rounded-xl hover:text-red-600 dark:hover:text-red-400"
-                        title={t.workspace?.delete || 'Delete'}
-                      >
-                        <Trash2 className="h-4 w-4" />
-                      </Button>
-                    )}
-                  </div>
-                </div>
+                    </div>
+                  </CardContent>
+                </Card>
               );
             })}
 
             {workspaces.length === 0 && (
-              <div className="col-span-full py-16 flex flex-col items-center justify-center border-2 border-dashed border-slate-200 dark:border-slate-800 rounded-2xl">
+              <div className="py-16 flex flex-col items-center justify-center border-2 border-dashed border-slate-200 dark:border-slate-800 rounded-2xl">
                 <p className="text-slate-500 dark:text-slate-400 font-medium">{t.workspace?.emptyState || 'No workspaces found'}</p>
               </div>
             )}
           </div>
 
           <Pagination
-            currentPage={currentPage}
-            totalCount={totalItems}
-            limit={limit}
-            onPageChange={setCurrentPage}
-            onLimitChange={setLimit}
-            pageSizeOptions={[9, 12, 24]} // Custom options for Workspaces
-          />
-        </>
+              currentPage={currentPage}
+              totalCount={totalItems}
+              limit={limit}
+              onPageChange={setCurrentPage}
+              onLimitChange={setLimit}
+              pageSizeOptions={[10, 20, 50]}
+            />
+        </div>
       )}
 
-      {/* Delete Modal */}
-      {deleteModal.isOpen && deleteModal.workspace && (
-        <div className="fixed inset-0 bg-slate-900/50 backdrop-blur-sm flex items-center justify-center z-50 p-4">
-          <div className="bg-white dark:bg-slate-900 rounded-2xl p-6 max-w-md w-full shadow-2xl border border-slate-200 dark:border-slate-800">
-            <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-2">{t.workspace?.deleteTitle || 'Delete Workspace'}</h3>
-            <p className="text-slate-600 dark:text-slate-400 mb-5 text-sm leading-relaxed">
-              {t.workspace?.deleteWarning || 'To confirm deletion, please type the workspace name:'} <strong className="text-slate-900 dark:text-white select-all">{deleteModal.workspace.name}</strong>
-            </p>
-            <input
-              type="text"
-              value={deleteInput}
-              onChange={(e) => setDeleteInput(e.target.value)}
-              placeholder={deleteModal.workspace.name}
-              className="w-full border rounded-xl p-3 mb-6 bg-slate-50 dark:bg-slate-800 border-slate-300 dark:border-slate-700 text-slate-900 dark:text-white outline-none focus:ring-2 focus:ring-red-500 transition-shadow"
-            />
-            <div className="flex justify-end gap-3">
+      {deleteModal.workspace && (
+        <Modal
+          isOpen={deleteModal.isOpen}
+          onClose={() => {
+            setDeleteModal({ isOpen: false, workspace: null });
+            setDeleteInput('');
+          }}
+          title={t.workspace?.deleteTitle || 'Delete Workspace'}
+          maxWidth="max-w-md"
+          footer={
+            <>
               <Button 
                 variant="secondary"
-                onClick={() => { setDeleteModal({ isOpen: false, workspace: null }); setDeleteInput(''); }} 
+                onClick={() => { 
+                  setDeleteModal({ isOpen: false, workspace: null }); 
+                  setDeleteInput(''); 
+                }} 
                 className="rounded-xl font-semibold"
               >
-                {t.workspace?.cancel || 'Cancel'}
+                {t.actions?.cancel || 'Cancel'}
               </Button>
               <Button 
                 variant="destructive"
@@ -252,11 +248,24 @@ export default function Workspaces() {
                 onClick={confirmDelete} 
                 className="rounded-xl font-semibold"
               >
-                {t.workspace?.delete || 'Delete'}
+                {t.actions?.delete || 'Delete'}
               </Button>
-            </div>
+            </>
+          }
+        >
+          <div className="flex flex-col gap-4">
+            <p className="text-slate-600 dark:text-slate-400 text-sm leading-relaxed">
+              {t.workspace?.deleteWarning || 'To confirm deletion, please type the workspace name:'} <strong className="text-slate-900 dark:text-white select-all">{deleteModal.workspace.name}</strong>
+            </p>
+            
+            <Input
+              type="text"
+              value={deleteInput}
+              onChange={(e) => setDeleteInput(e.target.value)}
+              placeholder={deleteModal.workspace.name}
+            />
           </div>
-        </div>
+        </Modal>
       )}
     </div>
   );