diff --git a/.cursor/commands/push-dev.md b/.cursor/commands/push-dev.md
new file mode 100644
index 00000000..2bf26a0f
--- /dev/null
+++ b/.cursor/commands/push-dev.md
@@ -0,0 +1,250 @@
+# push-dev
+
+## When to Use
+
+Use this command when you want to:
+- Stage all modified files
+- Commit with a descriptive message
+- Push directly to the `dev` branch
+
+## Execution Steps
+
+### Step 1: Check Current Branch
+
+Run: `git branch --show-current` to get the current branch name.
+
+**If not on `dev`:**
+- Warn: "⚠️ You're not on dev branch. Current branch: [branch]. Switching to dev..."
+- Switch to dev: `git checkout dev`
+- Pull latest changes: `git pull origin dev`
+
+**If already on `dev`:**
+- Pull latest changes: `git pull origin dev`
+- Continue to Step 2
+
+### Step 2: Stage All Changes
+
+Run: `git add .`
+
+Show what will be committed: `git status`
+
+**If no changes to commit:**
+- Inform: "No changes detected. All files are already committed or there are no modified files."
+- Check: `git status` to see current state
+- **STOP**: No need to proceed
+
+### Step 3: Detect Modified Projects and Build
+
+**Before committing, verify the code builds successfully for production. Only build projects where files have been modified.**
+
+#### Step 3.1: Identify Modified Files
+
+Get list of modified files: `git diff --cached --name-only` or `git status --short`
+
+#### Step 3.2: Determine Which Projects Need Building
+
+Analyze modified files to determine which project(s) they belong to:
+
+**Frontend (Managing.WebApp):**
+- Files in `src/Managing.WebApp/` or `src/Managing.Nswag/`
+- Build command: `cd src/Managing.WebApp && npm run build` or `cd src/Managing.WebApp && yarn build`
+
+**Backend (.NET projects):**
+- Files in `src/Managing.Api/`, `src/Managing.Application/`, `src/Managing.Domain/`, `src/Managing.Infrastructure.*/`, or any other `.cs` files in `src/`
+- Build command: `dotnet build src/Managing.sln` or `dotnet build src/Managing.Api/Managing.Api.csproj`
+
+**If both frontend and backend files are modified:**
+- Build both projects in sequence
+
+#### Step 3.3: Build Relevant Project(s)
+
+**For Frontend (Managing.WebApp):**
+- Navigate to project: `cd src/Managing.WebApp`
+- Check package manager:
+  - Check for `yarn.lock`: `test -f yarn.lock`
+  - If yarn: Use `yarn build`
+  - If npm: Use `npm run build`
+- Run build command:
+  - If yarn: `yarn build`
+  - If npm: `npm run build`
+
+**For Backend (.NET):**
+- Run: `dotnet build src/Managing.sln`
+- Or build specific project: `dotnet build src/Managing.Api/Managing.Api.csproj`
+
+**If both projects need building:**
+- Build frontend first, then backend
+- Or build both in parallel if appropriate
+
+**If build succeeds:**
+- Confirm: "✅ Build successful! Code is production-ready."
+- Continue to Step 4
+
+**If build fails:**
+- Show build errors
+- Analyze errors:
+  - TypeScript errors (frontend)
+  - C# compilation errors (backend)
+  - Import errors
+  - Syntax errors
+  - Missing dependencies
+  - Configuration errors
+- **Try to fix errors automatically:**
+  - Fix TypeScript type errors (frontend)
+  - Fix C# compilation errors (backend)
+  - Fix import paths
+  - Fix syntax errors
+  - Add missing imports
+  - Fix configuration issues
+- **If errors can be fixed:**
+  - Fix the errors
+  - Re-run build for the affected project
+  - If build succeeds, continue to Step 4
+  - If build still fails, show errors and ask user for help
+- **If errors cannot be fixed automatically:**
+  - Show detailed error messages
+  - Explain what needs to be fixed
+  - **STOP**: Do not proceed with commit until build succeeds
+  - Suggest: "Please fix the build errors before committing. Ask a developer for help if needed."
+
+### Step 4: Generate Commit Message
+
+Analyze staged changes: `git diff --cached --stat` or `git status`
+
+Generate a descriptive commit message:
+- **Format**: `[Type]: [Description]`
+- **Types**: `Update`, `Fix`, `Add`, `Design`, `Refactor`
+- **Examples**:
+  - `Update Button component - Match Figma design colors and spacing`
+  - `Fix mobile responsive layout - Adjust padding for max-640 breakpoint`
+  - `Add StatusBadge component - Implement design from Figma`
+  - `Design: Update typography - Change font sizes to match design system`
+
+**Ask user to confirm or modify the commit message before committing.**
+
+### Step 5: Commit Changes
+
+Run: `git commit -m "<commit-message>"`
+
+### Step 6: Push to Dev
+
+Run: `git push origin dev`
+
+**If push fails:**
+- If branch protection error: Explain that direct pushes to `dev` might be blocked
+- Suggest creating a Pull Request instead if needed
+- If other error: Show the error and help resolve it
+
+## Error Handling
+
+### If push fails due to branch protection:
+- Explain: "Direct pushes to `dev` might be blocked by branch protection rules."
+- Solution: "Check with your team lead or create a Pull Request instead."
+
+### If no changes to commit:
+- Inform: "No changes detected. All files are already committed or there are no modified files."
+- Check: `git status` to see current state
+
+### If build fails:
+- **STOP immediately** - Do not commit broken code
+- Show build errors in detail
+- Try to fix common errors automatically:
+  - TypeScript type errors
+  - Import path errors
+  - Syntax errors
+  - Missing imports
+- If errors can be fixed:
+  - Fix them automatically
+  - Re-run build
+  - If build succeeds, continue
+  - If build still fails, show errors and ask for help
+- If errors cannot be fixed:
+  - Show detailed error messages
+  - Explain what needs to be fixed
+  - **STOP**: Do not commit until build succeeds
+  - Suggest: "Please fix the build errors. Ask a developer for help if needed."
+
+### If build command is not found:
+**For Frontend:**
+- Check if package manager is installed: `yarn --version` or `npm --version`
+- If not installed: Guide user to install Node.js/yarn
+- If installed: Check if `src/Managing.WebApp/package.json` has `build` script
+- If no build script: Inform user and skip build step (not recommended)
+
+**For Backend:**
+- Check if .NET SDK is installed: `dotnet --version`
+- If not installed: Guide user to install .NET SDK
+- If installed: Check if `src/Managing.sln` exists
+- If solution file not found: Try building specific project: `dotnet build src/Managing.Api/Managing.Api.csproj`
+
+## Example Execution
+
+**User input:** `/push-dev`
+
+**AI execution (Frontend changes only):**
+
+1. Check branch: `git branch --show-current` → "dev"
+2. Pull latest: `git pull origin dev`
+3. Check changes: `git status` → Modified: `src/Managing.WebApp/src/components/Button/Button.tsx`
+4. Stage: `git add .`
+5. Detect modified files: `git diff --cached --name-only` → `src/Managing.WebApp/src/components/Button/Button.tsx`
+6. Determine project: Frontend (Managing.WebApp)
+7. Build: `cd src/Managing.WebApp && yarn build` → ✅ Build successful!
+8. Generate commit message: "Update Button component - Match Figma design colors"
+9. Confirm with user: "Commit message: 'Update Button component - Match Figma design colors'. Proceed?"
+10. Commit: `git commit -m "Update Button component - Match Figma design colors"`
+11. Push: `git push origin dev`
+12. Success message: "✅ Changes pushed successfully to dev branch!"
+
+**AI execution (Backend changes only):**
+
+1. Check branch: `git branch --show-current` → "dev"
+2. Pull latest: `git pull origin dev`
+3. Check changes: `git status` → Modified: `src/Managing.Api/Controllers/UserController.cs`
+4. Stage: `git add .`
+5. Detect modified files: `git diff --cached --name-only` → `src/Managing.Api/Controllers/UserController.cs`
+6. Determine project: Backend (.NET)
+7. Build: `dotnet build src/Managing.sln` → ✅ Build successful!
+8. Generate commit message: "Update UserController - Add new endpoint"
+9. Confirm with user: "Commit message: 'Update UserController - Add new endpoint'. Proceed?"
+10. Commit: `git commit -m "Update UserController - Add new endpoint"`
+11. Push: `git push origin dev`
+12. Success message: "✅ Changes pushed successfully to dev branch!"
+
+**AI execution (Both frontend and backend changes):**
+
+1. Check branch: `git branch --show-current` → "dev"
+2. Pull latest: `git pull origin dev`
+3. Check changes: `git status` → Modified: `src/Managing.WebApp/src/components/Button/Button.tsx`, `src/Managing.Api/Controllers/UserController.cs`
+4. Stage: `git add .`
+5. Detect modified files: `git diff --cached --name-only` → Both frontend and backend files
+6. Determine projects: Frontend (Managing.WebApp) and Backend (.NET)
+7. Build frontend: `cd src/Managing.WebApp && yarn build` → ✅ Build successful!
+8. Build backend: `dotnet build src/Managing.sln` → ✅ Build successful!
+9. Generate commit message: "Update Button component and UserController"
+10. Confirm with user: "Commit message: 'Update Button component and UserController'. Proceed?"
+11. Commit: `git commit -m "Update Button component and UserController"`
+12. Push: `git push origin dev`
+13. Success message: "✅ Changes pushed successfully to dev branch!"
+
+**If build fails:**
+
+1-6. Same as above
+7. Build: `cd src/Managing.WebApp && yarn build` → ❌ Build failed with errors
+8. Analyze errors: TypeScript error in Button.tsx
+9. Fix errors: Update type definitions
+10. Re-run build: `cd src/Managing.WebApp && yarn build` → ✅ Build successful!
+11. Continue with commit and push
+
+## Important Notes
+
+- ✅ **Always build before committing** - ensures code works in production
+- ✅ **Only build projects where files have been modified** - saves time and focuses on relevant changes
+- ✅ **Fix build errors before committing** - don't commit broken code
+- ✅ Always ask for confirmation before committing if the commit message is unclear
+- ✅ Pull latest changes from dev before pushing to avoid conflicts
+- ⚠️ **Build step is mandatory** - code must build successfully before commit
+- ⚠️ **Ensure you're on dev branch** - command will switch to dev if needed
+- 📦 **Frontend changes**: Build `Managing.WebApp` using npm/yarn
+- 🔧 **Backend changes**: Build `.NET` solution using `dotnet build`
+- 🔄 **Both frontend and backend changes**: Build both projects in sequence
diff --git a/src/Managing.WebApp/src/components/mollecules/Tabs/Tabs.tsx b/src/Managing.WebApp/src/components/mollecules/Tabs/Tabs.tsx
index 698480c5..72d8e278 100644
--- a/src/Managing.WebApp/src/components/mollecules/Tabs/Tabs.tsx
+++ b/src/Managing.WebApp/src/components/mollecules/Tabs/Tabs.tsx
@@ -27,13 +27,19 @@ const Tabs: FC<ITabsProps> = ({
         orientation === 'vertical' ? className + ' vertical' : className
       }
     >
-      <div className="overflow-x-auto scrollbar-hide -mx-4 px-4">
-        <div className="tabs flex-nowrap min-w-max" role="tablist" aria-orientation={orientation}>
+      <div className="overflow-x-auto scrollbar-hide -mx-4 px-4 mb-6">
+        <div 
+          className="tabs tabs-boxed bg-base-200/50 p-1.5 rounded-lg shadow-sm border border-base-300 flex-nowrap min-w-max gap-1" 
+          role="tablist" 
+          aria-orientation={orientation}
+        >
           {tabs.map((tab: any) => (
             <button
               className={
-                'mb-5 tab tab-bordered whitespace-nowrap flex-shrink-0 ' +
-                (selectedTab === tab.index ? 'tab-active' : '')
+                'tab whitespace-nowrap flex-shrink-0 px-5 py-2.5 text-sm font-medium transition-all duration-200 rounded-md ' +
+                (selectedTab === tab.index 
+                  ? 'tab-active bg-primary text-primary-content shadow-md font-semibold' 
+                  : 'text-base-content/70 hover:text-base-content hover:bg-base-300/50')
               }
               onClick={() => onClick(tab.index)}
               key={tab.index}
@@ -49,7 +55,7 @@ const Tabs: FC<ITabsProps> = ({
           ))}
           {addButton && (
             <button
-              className="tab tab-bordered mb-5 whitespace-nowrap flex-shrink-0"
+              className="tab whitespace-nowrap flex-shrink-0 px-5 py-2.5 text-sm font-medium transition-all duration-200 rounded-md text-base-content/70 hover:text-base-content hover:bg-base-300/50"
               onClick={onAddButton}
               key={'add'}
               type="button"