diff --git a/app/Http/Controllers/API/GroupsController.php b/app/Http/Controllers/API/GroupsController.php
new file mode 100644
index 0000000000..2f62ee5179
--- /dev/null
+++ b/app/Http/Controllers/API/GroupsController.php
@@ -0,0 +1,438 @@
+<?php
+
+namespace App\Http\Controllers\API;
+
+use App\Http\Controllers\Controller;
+use Illuminate\Http\Request;
+use Illuminate\Http\JsonResponse;
+use Illuminate\Support\Facades\Log;
+use App\Models\Group;
+use Illuminate\Support\Facades\DB;
+use App\Models\Network;
+
+class GroupsController extends Controller
+{
+    public function index(Request $request): JsonResponse
+    {
+        try {
+            $query = Group::with(['networks', 'group_tags'])
+                ->withCount(['allConfirmedHosts', 'allConfirmedRestarters']);
+
+            // Apply search filter
+            if ($request->filled('search')) {
+                $search = $request->input('search');
+                $query->where(function($q) use ($search) {
+                    $q->where('name', 'like', "%{$search}%")
+                      ->orWhere('location', 'like', "%{$search}%")
+                      ->orWhere('postcode', 'like', "%{$search}%")
+                      ->orWhere('area', 'like', "%{$search}%");
+                });
+            }
+
+            // Handle sorting
+            $sortBy = $request->input('sort_by', 'name');
+            $sortDirection = $request->input('sort_direction', 'asc');
+            
+            // Validate sort direction
+            if (!in_array(strtolower($sortDirection), ['asc', 'desc'])) {
+                $sortDirection = 'asc';
+            }
+            
+            // Map frontend column names to database columns
+            $sortableColumns = [
+                'name' => 'name',
+                'location' => 'location',
+                'confirmed_hosts_count' => 'all_confirmed_hosts_count',
+                'confirmed_restarters_count' => 'all_confirmed_restarters_count',
+                'approved' => 'approved',
+                'created_at' => 'created_at',
+            ];
+            
+            // Default to name if invalid sort field
+            $sortColumn = $sortableColumns[$sortBy] ?? 'name';
+            
+            $query->orderBy($sortColumn, $sortDirection);
+
+            $perPage = min($request->input('per_page', 100), 500);
+            $groups = $query->paginate($perPage);
+
+            // Transform data for frontend
+            $transformedGroups = $groups->getCollection()->map(function ($group) {
+                return $this->transformGroup($group);
+            });
+
+            return response()->json([
+                'success' => true,
+                'data' => $transformedGroups,
+                'current_page' => $groups->currentPage(),
+                'last_page' => $groups->lastPage(),
+                'per_page' => $groups->perPage(),
+                'total' => $groups->total(),
+                'from' => $groups->firstItem(),
+                'to' => $groups->lastItem(),
+            ]);
+
+        } catch (\Exception $e) {
+            Log::error('Error fetching groups: ' . $e->getMessage());
+            return response()->json([
+                'success' => false,
+                'message' => 'Failed to fetch groups',
+                'error' => config('app.debug') ? $e->getMessage() : null
+            ], 500);
+        }
+    }
+
+    public static function performSingleAction(int $group_id, string $action): JsonResponse
+    {
+        try {
+            $group = Group::findOrFail($group_id);
+
+            $result = self::performAction($group, $action);
+
+            return response()->json([
+                'success' => true,
+                'message' => $result['message'],
+                'group' => $result
+            ]);
+        } catch (\Exception $e) {
+            Log::error('Error performing action: ' . $e->getMessage());
+            return response()->json([
+                'success' => false,
+                'message' => 'Failed to perform action'
+            ], 500);
+        }
+    }
+
+    public static function performBulkActions(Request $request, string $action): JsonResponse
+    {
+        try {
+            $group_ids = $request->input('group_ids');
+            $groups = Group::whereIn('idgroups', $group_ids)->get();
+
+            $failedGroups = [];
+
+            foreach ($groups as $group) {
+                try {
+                    self::performAction($group, $action);
+                } catch (\Exception $e) {
+                    $failedGroups[] = $e->getMessage();
+                }
+            }
+
+            if (count($failedGroups) > 0) {
+                throw new \Exception(implode(', ', $failedGroups));
+            }
+
+            return response()->json([
+                'success' => true,
+                'message' => 'Bulk actions performed successfully'
+            ]);
+            
+        } catch (\Exception $e) {
+            Log::error('Error performing bulk actions: ' . $e->getMessage());
+            return response()->json([
+                'success' => false,
+                'message' => 'Failed to perform bulk actions. ' . $e->getMessage()
+            ], 500);
+        }
+    }
+
+    private static function performAction(Group $group, string $action): array
+    {
+        switch ($action) {
+            case 'approve':
+                $group->approved = true;
+                $group->save();
+                break;
+
+            case 'unapprove':
+                $group->approved = false;
+                $group->save();
+                break;
+
+            case 'archive':
+                $group->archived_at = now();
+                $group->save();
+                break;
+
+            case 'unarchive':
+                $group->archived_at = null;
+                $group->save();
+                break;
+
+            case 'delete':
+                $groupName = $group->name;
+                if (!$group->canDelete()) {
+                    throw new \Exception("Group '{$groupName}' cannot be deleted because it has events with devices.");
+                }
+                $group->delete();
+                break;
+
+            default:
+                throw new \Exception("Invalid action: {$action}");
+        }
+
+        return [
+            'id' => $group->idgroups,
+            'name' => $group->name,
+            'message' => "Group '{$group->name}' has been {$action} successfully."
+        ];
+    }
+
+    public static function importGroups(Request $request): JsonResponse
+    {
+        try {
+            $file = $request->file('csv_file');
+            $path = $file->getRealPath();
+            $data = array_map('str_getcsv', file($path));
+            $headers = array_shift($data);
+
+            // Validate headers
+            $requiredHeaders = ['Name', 'Location'];
+            $missingHeaders = array_diff($requiredHeaders, $headers);
+            
+            if (!empty($missingHeaders)) {
+                return response()->json([
+                    'success' => false,
+                    'message' => 'Missing required columns: ' . implode(', ', $missingHeaders)
+                ], 422);
+            }
+
+            $created = 0;
+            $errors = [];
+
+            DB::transaction(function() use ($data, $headers, &$created, &$errors) {
+                foreach ($data as $rowIndex => $row) {
+                    if (empty(array_filter($row))) continue; // Skip empty rows
+
+                    try {
+                        $groupData = array_combine($headers, $row);
+                        
+                        // Validate required fields
+                        if (empty($groupData['Name']) || empty($groupData['Location'])) {
+                            $errors[] = "Row " . ($rowIndex + 2) . ": Name and Location are required";
+                            continue;
+                        }
+
+                        // Create group
+                        $group = new Group();
+                        $group->name = $groupData['Name'];
+                        $group->location = $groupData['Location'];
+                        $group->postcode = $groupData['Postcode'] ?? null;
+                        $group->area = $groupData['Area'] ?? null;
+                        $group->country_code = $groupData['Country Code'] ?? null;
+                        $group->latitude = $groupData['Latitude'] ?? null;
+                        $group->longitude = $groupData['Longitude'] ?? null;
+                        $group->website = $groupData['Website'] ?? null;
+                        $group->phone = $groupData['Phone'] ?? null;
+                        $group->email = $groupData['Email'] ?? null;
+                        $group->free_text = $groupData['Description'] ?? null;
+                        $group->approved = false; // New groups require approval
+                        $group->save();
+
+                        // Handle networks if provided
+                        if (!empty($groupData['Networks'])) {
+                            $networkNames = array_map('trim', explode(',', $groupData['Networks']));
+                            $networkIds = Network::whereIn('name', $networkNames)->pluck('id');
+                            if ($networkIds->isNotEmpty()) {
+                                $group->networks()->attach($networkIds);
+                            }
+                        }
+
+                        $created++;
+
+                    } catch (\Exception $e) {
+                        $errors[] = "Row " . ($rowIndex + 2) . ": " . $e->getMessage();
+                    }
+                }
+            });
+
+            if (count($errors) > 0) {
+                return response()->json([
+                    'success' => false,
+                    'message' => 'Failed to process CSV file. ' . implode(', ', $errors),
+                    'errors' => $errors
+                ], 422);
+            }
+
+            return response()->json([
+                'success' => true,
+                'message' => "Successfully created {$created} groups.",
+                'data' => [
+                    'created' => $created,
+                    'errors' => $errors
+                ]
+            ]);
+
+        } catch (\Exception $e) {
+            Log::error('Error uploading CSV: ' . $e->getMessage());
+            return response()->json([
+                'success' => false,
+                'message' => 'Failed to process CSV file'
+            ], 500);
+        }
+    }
+
+    public static function exportGroups(Request $request)
+    {
+        try {
+            // Build query with same logic as index method
+            $query = Group::with(['networks', 'group_tags']);
+
+            // Apply search filter
+            if ($request->filled('search')) {
+                $search = $request->input('search');
+                $query->where(function($q) use ($search) {
+                    $q->where('name', 'like', "%{$search}%")
+                      ->orWhere('location', 'like', "%{$search}%")
+                      ->orWhere('postcode', 'like', "%{$search}%")
+                      ->orWhere('area', 'like', "%{$search}%");
+                });
+            }
+
+            // Apply status filter
+            if ($request->filled('status')) {
+                $status = $request->input('status');
+                if ($status === 'approved') {
+                    $query->where('approved', true);
+                } elseif ($status === 'pending') {
+                    $query->where('approved', false);
+                }
+            }
+
+            // Apply archived filter
+            if ($request->filled('archived')) {
+                $archived = $request->input('archived');
+                if ($archived === 'yes') {
+                    $query->whereNotNull('archived_at');
+                } elseif ($archived === 'no') {
+                    $query->whereNull('archived_at');
+                }
+            }
+
+            // Apply network filter
+            if ($request->filled('network')) {
+                $networkId = $request->input('network');
+                $query->whereHas('networks', function($q) use ($networkId) {
+                    $q->where('networks.id', $networkId);
+                });
+            }
+
+            // Apply country filter
+            if ($request->filled('country')) {
+                $countryCode = $request->input('country');
+                $query->where('country_code', $countryCode);
+            }
+
+            $groups = $query->orderBy('name', 'asc')->get();
+
+            // Create CSV content
+            $filename = 'groups_export_' . date('Y-m-d_H-i-s') . '.csv';
+            $csvContent = self::generateCsvContent($groups);
+
+            // Return CSV as download
+            return response($csvContent)
+                ->header('Content-Type', 'text/csv')
+                ->header('Content-Disposition', 'attachment; filename="' . $filename . '"')
+                ->header('Cache-Control', 'no-cache, no-store, must-revalidate')
+                ->header('Pragma', 'no-cache')
+                ->header('Expires', '0');
+
+        } catch (\Exception $e) {
+            Log::error('Error exporting groups CSV: ' . $e->getMessage());
+            return response()->json([
+                'success' => false,
+                'message' => 'Failed to export groups'
+            ], 500);
+        }
+    }
+
+
+    private static function generateCsvContent($groups)
+    {
+        $csvData = [];
+        
+        // Add headers
+        $csvData[] = [
+            'ID', 'Name', 'Location', 'Postcode', 'Area', 'Country Code',
+            'Latitude', 'Longitude', 'Website', 'Phone', 'Email',
+            'Approved', 'Archived', 'Networks', 'Tags', 'Description',
+            'Hosts Count', 'Restarters Count', 'Created At'
+        ];
+
+        // Add data rows
+        foreach ($groups as $group) {
+            // Get country name from country code
+            $countryDisplay = null;
+            if ($group->country_code) {
+                $countryDisplay = \App\Helpers\Fixometer::getCountryFromCountryCode($group->country_code);
+            }
+
+            // Manually calculate counts
+            $confirmedHostsCount = $group->allConfirmedHosts()->count();
+            $confirmedRestartersCount = $group->allConfirmedRestarters()->count();
+
+            $csvData[] = [
+                $group->idgroups,
+                $group->name,
+                $group->location,
+                $group->postcode,
+                $group->area,
+                $group->country_code,
+                $group->latitude,
+                $group->longitude,
+                $group->website,
+                $group->phone,
+                $group->email,
+                $group->approved ? 'Yes' : 'No',
+                $group->archived_at ? 'Yes' : 'No',
+                $group->networks->pluck('name')->join(', '),
+                $group->group_tags->pluck('tag_name')->join(', '),
+                $group->free_text,
+                $confirmedHostsCount,
+                $confirmedRestartersCount,
+                $group->created_at ? $group->created_at->format('Y-m-d H:i:s') : ''
+            ];
+        }
+
+        // Convert to CSV string
+        $output = fopen('php://temp', 'r+');
+        foreach ($csvData as $row) {
+            fputcsv($output, $row);
+        }
+        rewind($output);
+        $csvContent = stream_get_contents($output);
+        fclose($output);
+
+        return $csvContent;
+    }
+
+    /**
+     * Transform group data for frontend
+     */
+    private function transformGroup($group): array
+    {
+        // Get country name from country code
+        $countryDisplay = null;
+        if ($group->country_code) {
+            $countryDisplay = \App\Helpers\Fixometer::getCountryFromCountryCode($group->country_code);
+        }
+
+        return [
+            'idgroups' => $group->idgroups,
+            'name' => $group->name,
+            'location' => $group->location,
+            'postcode' => $group->postcode,
+            'area' => $group->area,
+            'country_code' => $group->country_code,
+            'country_display' => $countryDisplay,
+            'approved' => (bool) $group->approved,
+            'archived_at' => $group->archived_at,
+            'created_at' => $group->created_at,
+            'networks' => $group->networks,
+            'group_tags' => $group->group_tags,
+            'confirmed_hosts_count' => $group->all_confirmed_hosts_count,
+            'confirmed_restarters_count' => $group->all_confirmed_restarters_count,
+        ];
+    }
+} 
\ No newline at end of file
diff --git a/app/Http/Controllers/AdminController.php b/app/Http/Controllers/AdminController.php
index 3c88e6fd53..92971eb5d5 100644
--- a/app/Http/Controllers/AdminController.php
+++ b/app/Http/Controllers/AdminController.php
@@ -105,4 +105,9 @@ public static function getStats2()
             'wasteTotal' => $stats[0]->powered_waste, // + $stats[0]->unpowered_waste,
         ];
     }
+
+    public static function groups()
+    {
+        return view('admin.groups');
+    }
 }
diff --git a/app/Http/Middleware/AdminMiddleware.php b/app/Http/Middleware/AdminMiddleware.php
new file mode 100644
index 0000000000..fd60bb58df
--- /dev/null
+++ b/app/Http/Middleware/AdminMiddleware.php
@@ -0,0 +1,45 @@
+<?php
+
+namespace App\Http\Middleware;
+
+use Closure;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use App\Helpers\Fixometer;
+
+class AdminMiddleware
+{
+    /**
+     * Handle an incoming request to ensure user is an administrator.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @param  \Closure  $next
+     * @return mixed
+     */
+    public function handle(Request $request, Closure $next)
+    {
+        $user = Auth::user();
+        
+        if (!$user) {
+            if ($request->expectsJson()) {
+                return response()->json([
+                    'success' => false,
+                    'message' => 'Authentication required'
+                ], 401);
+            }
+            return redirect()->guest(route('login'));
+        }
+
+        if (!Fixometer::hasRole($user, 'Administrator')) {
+            if ($request->expectsJson()) {
+                return response()->json([
+                    'success' => false,
+                    'message' => 'Administrator access required'
+                ], 403);
+            }
+            abort(403, 'Administrator access required');
+        }
+
+        return $next($request);
+    }
+} 
\ No newline at end of file
diff --git a/bootstrap/app.php b/bootstrap/app.php
index c1f11a764c..a4bef9cce8 100644
--- a/bootstrap/app.php
+++ b/bootstrap/app.php
@@ -83,6 +83,7 @@
             'AcceptUserInvites' => \App\Http\Middleware\AcceptUserInvites::class,
             'ensureAPIToken' => \App\Http\Middleware\EnsureAPIToken::class,
             'customApiAuth' => \App\Http\Middleware\CustomApiTokenAuth::class,
+            'admin' => \App\Http\Middleware\AdminMiddleware::class,
             'localeSessionRedirect' => \Mcamara\LaravelLocalization\Middleware\LocaleSessionRedirect::class,
             'localeViewPath' => \Mcamara\LaravelLocalization\Middleware\LaravelLocalizationViewPath::class,
             'localizationRedirect' => \Mcamara\LaravelLocalization\Middleware\LaravelLocalizationRedirectFilter::class,
diff --git a/resources/js/api/groups.js b/resources/js/api/groups.js
new file mode 100644
index 0000000000..91a89573f0
--- /dev/null
+++ b/resources/js/api/groups.js
@@ -0,0 +1,44 @@
+import axios from "axios";
+
+const API_BASE = "/api/v2/admin/groups";
+
+export default {
+	// Fetch groups with pagination and filtering
+	async fetchGroups(params = {}) {
+		const response = await axios.get(API_BASE, { params });
+		return response.data;
+	},
+
+	// Perform single action on a group
+	async performAction(groupId, action) {
+		const response = await axios.post(`${API_BASE}/${groupId}/${action}`);
+		return response.data;
+	},
+
+	async performBulkActions(groupIds, action) {
+		const response = await axios.post(`${API_BASE}/bulk/${action}`, {
+			group_ids: groupIds,
+		});
+		return response.data;
+	},
+
+	async importGroups(file, onUploadProgress) {
+		const formData = new FormData();
+		formData.append("csv_file", file);
+
+		const response = await axios.post(`${API_BASE}/import`, formData, {
+			headers: {
+				"Content-Type": "multipart/form-data",
+			},
+			onUploadProgress: onUploadProgress,
+		});
+		return response.data;
+	},
+
+	async exportGroups() {
+		const response = await axios.get(`${API_BASE}/export`, {
+			responseType: "blob",
+		});
+		return response;
+	},
+};
diff --git a/resources/js/app.js b/resources/js/app.js
index 01e88c3914..addd49756c 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -40,6 +40,7 @@ import EventAddEdit from './components/EventAddEdit.vue'
 import EventsRequiringModeration from './components/EventsRequiringModeration'
 import EventPage from './components/EventPage.vue'
 import FixometerPage from './components/FixometerPage'
+import GroupsManagement from './components/admin/GroupsManagement.vue'
 import GroupsPage from './components/GroupsPage.vue'
 import GroupPage from './components/GroupPage.vue'
 import GroupAddEditPage from './components/GroupAddEditPage.vue'
@@ -1309,6 +1310,7 @@ jQuery(document).ready(function () {
         'eventsrequiringmoderation': EventsRequiringModeration,
         'eventpage': EventPage,
         'fixometerpage': FixometerPage,
+        'groupsmanagement': GroupsManagement,
         'groupspage': GroupsPage,
         'grouppage': GroupPage,
         'groupaddeditpage': GroupAddEditPage,
diff --git a/resources/js/components/admin/ConfirmationModal.vue b/resources/js/components/admin/ConfirmationModal.vue
new file mode 100644
index 0000000000..a3775df14d
--- /dev/null
+++ b/resources/js/components/admin/ConfirmationModal.vue
@@ -0,0 +1,248 @@
+<template>
+    <div v-if="show" class="modal fade show d-block" tabindex="-1" role="dialog">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title">
+                        {{ title }}
+                    </h5>
+                    <button type="button" class="btn-close" @click="$emit('cancel')" aria-label="Close">
+                        <span aria-hidden="true">&times;</span>
+                    </button>
+                </div>
+
+                <div class="modal-body">
+                    <div v-if="groups.length <= 5" class="mt-3">
+                        <h6>Affected Groups</h6>
+                        <ul class="list-group">
+                            <li v-for="group in groups" :key="group.id"
+                                class="list-group-item d-flex align-items-center">
+                                <div>
+                                    <strong>{{ group.name }}</strong>
+                                    <div class="small text-muted">{{ group.location }}</div>
+                                </div>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+
+                <div v-if="error" class="alert alert-danger">
+                    {{ error }}
+                </div>
+
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" @click="$emit('cancel')">
+                        Cancel
+                    </button>
+                    <button type="button" :class="confirmButtonClass" class="btn" @click="$emit('confirm')">
+                        {{ confirmButtonText }}
+                    </button>
+                </div>
+            </div>
+        </div>
+
+
+    </div>
+</template>
+
+<script>
+export default {
+    name: "ConfirmationModal",
+
+    props: {
+        show: {
+            type: Boolean,
+            default: false,
+        },
+        action: {
+            type: String,
+            default: null,
+        },
+        groups: {
+            type: Array,
+            default: () => [],
+        },
+        error: {
+            type: String,
+            default: null,
+        },
+    },
+
+    computed: {
+        title() {
+            const actions = {
+                delete: "Deletion",
+                approve: "Approval",
+                unapprove: "Unapproval",
+                archive: "Archiving",
+                unarchive: "Unarchiving",
+            };
+            return `Confirm ${actions[this.action]}` || "Confirm Action";
+        },
+
+        confirmButtonClass() {
+            const classes = {
+                delete: "btn btn-danger",
+                approve: "btn btn-success",
+                unapprove: "btn btn-warning",
+                archive: "btn btn-info",
+                unarchive: "btn-outline-info",
+            };
+            return classes[this.action] || "btn btn-primary";
+        },
+
+        confirmButtonText() {
+            const texts = {
+                delete: "Delete",
+                approve: "Approve",
+                unapprove: "Unapprove",
+                archive: "Archive",
+                unarchive: "Unarchive",
+            };
+            return texts[this.action]
+        },
+    },
+
+    watch: {
+        show(newValue) {
+            if (newValue) {
+                // Prevent body scroll when modal is open
+                document.body.style.overflow = "hidden";
+            } else {
+                // Restore body scroll when modal is closed
+                document.body.style.overflow = "";
+            }
+        },
+    },
+
+    beforeUnmount() {
+        // Ensure body scroll is restored when component is destroyed
+        document.body.style.overflow = "";
+    },
+};
+</script>
+
+<style scoped>
+.modal {
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 1050;
+}
+
+.modal-dialog {
+    margin: 1.75rem auto;
+    max-width: 500px;
+}
+
+.modal-content {
+    border: none;
+    border-radius: 0.5rem;
+    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+}
+
+.modal-header {
+    border-bottom: 1px solid #dee2e6;
+    background-color: #f8f9fa;
+    border-radius: 0.5rem 0.5rem 0 0;
+}
+
+.modal-title {
+    font-weight: 600;
+    color: #495057;
+}
+
+.modal-body {
+    padding: 1.5rem;
+}
+
+.modal-body p {
+    margin-bottom: 1rem;
+    color: #6c757d;
+    line-height: 1.5;
+}
+
+.modal-footer {
+    border-top: 1px solid #dee2e6;
+    background-color: #f8f9fa;
+    border-radius: 0 0 0.5rem 0.5rem;
+}
+
+.btn {
+    font-weight: 500;
+    padding: 0.5rem 1.5rem;
+    border-radius: 0.25rem;
+    transition: all 0.2s ease-in-out;
+    /* Prevent layout shift by maintaining consistent border width */
+    border-width: 1px;
+}
+
+.btn:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+    /* Ensure border width doesn't change on hover */
+    border-width: 1px;
+}
+
+.btn:disabled {
+    transform: none;
+    box-shadow: none;
+    border-width: 1px;
+}
+
+.btn-close {
+    font-size: 1.5rem;
+    line-height: 1;
+    color: #000;
+    text-shadow: 0 1px 0 #fff;
+    opacity: 0.8;
+    background: none;
+    border: none;
+    padding: 0.25rem 0.5rem;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    margin-left: auto;
+}
+
+.btn-close:hover {
+    opacity: 1;
+    background-color: rgba(0, 0, 0, 0.1);
+    border-radius: 0.25rem;
+}
+
+.alert {
+    margin-bottom: 0;
+    border-radius: 0.25rem;
+}
+
+.list-group-item {
+    text-decoration: none;
+
+    &:hover {
+        text-decoration: none;
+    }
+}
+
+/* Animation */
+.modal.fade.show {
+    animation: modalFadeIn 0.15s ease-out;
+}
+
+@keyframes modalFadeIn {
+    from {
+        opacity: 0;
+        transform: scale(0.9);
+    }
+
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+.modal-backdrop {
+    z-index: 1040;
+}
+</style>
\ No newline at end of file
diff --git a/resources/js/components/admin/GroupsBulkAction.vue b/resources/js/components/admin/GroupsBulkAction.vue
new file mode 100644
index 0000000000..7283d6d4d1
--- /dev/null
+++ b/resources/js/components/admin/GroupsBulkAction.vue
@@ -0,0 +1,92 @@
+<template>
+    <div class="groups-bulk-actions" v-if="selectedGroups.length > 0">
+        <div class="card bg-light">
+            <div class="card-body">
+                <div class="row align-items-center">
+                    <div class="col-md-4">
+                        <span class="fw-bold">
+                            {{ selectedGroups.length }} of {{ totalCount }} selected
+                        </span>
+                    </div>
+                    <div class="col-md-6">
+                        <div class="btn-group" role="group">
+                            <button type="button" class="btn btn-success" @click="handleAction('approve')"
+                                :disabled="loading">
+                                Approve
+                            </button>
+                            <button type="button" class="btn btn-warning" @click="handleAction('unapprove')"
+                                :disabled="loading">
+                                Unapprove
+                            </button>
+                            <button type="button" class="btn btn-info" @click="handleAction('archive')"
+                                :disabled="loading">
+                                Archive
+                            </button>
+                            <button type="button" class="btn btn-outline-info" @click="handleAction('unarchive')"
+                                :disabled="loading">
+                                Unarchive
+                            </button>
+                            <button type="button" class="btn btn-danger" @click="handleAction('delete')"
+                                :disabled="loading">
+                                Delete
+                            </button>
+                        </div>
+                    </div>
+                    <div class="col-md-2 text-end">
+                        <button type="button" class="btn btn-outline-secondary" @click="handleClearSelection">
+                            Clear Selection
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "GroupsBulkAction",
+    props: {
+        selectedGroups: {
+            type: Array,
+            default: () => [],
+        },
+        totalCount: {
+            type: Number,
+            default: 0,
+        },
+        loading: {
+            type: Boolean,
+            default: false,
+        },
+    },
+
+    methods: {
+        handleAction(action) {
+            this.$emit("action", action);
+        },
+
+        handleClearSelection() {
+            this.$emit("clear-selection");
+        },
+    },
+};
+</script>
+
+<style scoped>
+.groups-bulk-actions {
+    margin-bottom: 20px;
+}
+
+.btn-group .btn {
+    margin-right: 0.5rem;
+}
+
+.btn-group .btn:last-child {
+    margin-right: 0;
+}
+
+.card {
+    border: 1px solid #dee2e6;
+}
+</style>
\ No newline at end of file
diff --git a/resources/js/components/admin/GroupsCsvUploadModal.vue b/resources/js/components/admin/GroupsCsvUploadModal.vue
new file mode 100644
index 0000000000..69217603fd
--- /dev/null
+++ b/resources/js/components/admin/GroupsCsvUploadModal.vue
@@ -0,0 +1,581 @@
+<template>
+    <div v-if="show" class="modal fade show d-block" tabindex="-1" role="dialog">
+        <div class="modal-dialog modal-lg" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title">
+                        <i class="fa fa-upload mr-2"></i>
+                        Upload CSV File for Bulk Group Creation
+                    </h5>
+                    <button type="button" class="btn-close" @click="$emit('close')" aria-label="Close">
+                        <span aria-hidden="true">&times;</span>
+                    </button>
+                </div>
+
+                <form @submit.prevent="$emit('upload', selectedFile)">
+                    <div class="modal-body">
+                        <!-- CSV Format Requirements -->
+                        <div class="row">
+                            <div class="col-md-12">
+                                <div class="alert alert-info">
+                                    <h6>
+                                        <i class="fa fa-info-circle"></i>
+                                        CSV Format Requirements:
+                                    </h6>
+                                    <p class="mb-2">Your CSV file should contain the following columns in order:</p>
+                                    <ol class="mb-2">
+                                        <li><strong>Name</strong> (required) - Group name</li>
+                                        <li><strong>Location</strong> (required) - Group location</li>
+                                        <li><strong>Postcode</strong> - Postal code</li>
+                                        <li><strong>Area</strong> - Area or region</li>
+                                        <li><strong>Country Code</strong> - ISO 2-letter country code (e.g., GB, US, DE)
+                                        </li>
+                                        <li><strong>Latitude</strong> - Geographic latitude</li>
+                                        <li><strong>Longitude</strong> - Geographic longitude</li>
+                                        <li><strong>Website</strong> - Group website URL</li>
+                                        <li><strong>Phone</strong> - Contact phone number</li>
+                                        <li><strong>Email</strong> - Contact email address</li>
+                                        <li><strong>Networks</strong> - Comma-separated list of network names</li>
+                                        <li><strong>Description</strong> - Group description</li>
+                                    </ol>
+                                    <p class="mb-0">
+                                        <strong>Note:</strong> New groups will be created as unapproved and require
+                                        manual approval.
+                                        <button type="button" class="btn btn-sm btn-outline-primary ml-2"
+                                            @click="downloadTemplate">
+                                            <i class="fa fa-download mr-1"></i>
+                                            Download Template
+                                        </button>
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- File Upload -->
+                        <div class="form-group">
+                            <label for="csv_file" class="form-label">
+                                <strong>Select CSV File:</strong>
+                            </label>
+                            <div class="custom-file">
+                                <input type="file" class="custom-file-input" id="csv_file" ref="fileInput"
+                                    accept=".csv,.txt" @change="handleFileSelect" required>
+                                <label class="custom-file-label" for="csv_file">
+                                    {{ fileName || 'Choose file...' }}
+                                </label>
+                            </div>
+                            <small class="form-text text-muted">
+                                Maximum file size: 10MB. Supported formats: .csv, .txt
+                            </small>
+                        </div>
+
+                        <!-- File Preview -->
+                        <div v-if="filePreview" class="mt-3">
+                            <h6>File Preview:</h6>
+                            <div class="table-responsive">
+                                <table class="table table-sm table-bordered">
+                                    <thead>
+                                        <tr>
+                                            <th v-for="(header, index) in filePreview.headers" :key="index">
+                                                {{ header }}
+                                            </th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        <tr v-for="(row, rowIndex) in filePreview.rows" :key="rowIndex">
+                                            <td v-for="(cell, cellIndex) in row" :key="cellIndex" class="csv-cell">
+                                                <span v-if="cell && cell.trim()" class="cell-content">{{ cell }}</span>
+                                                <span v-else class="text-muted font-italic">(empty)</span>
+                                            </td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </div>
+                            <small class="text-muted">
+                                Showing first {{ filePreview.rows.length }} rows of {{ filePreview.totalRows }} total
+                                rows
+                            </small>
+                        </div>
+
+                        <!-- Upload Progress -->
+                        <div v-if="uploadProgress > 0" class="mt-3">
+                            <div class="progress">
+                                <div class="progress-bar" role="progressbar" :style="{ width: uploadProgress + '%' }"
+                                    :aria-valuenow="uploadProgress" aria-valuemin="0" aria-valuemax="100">
+                                    {{ uploadProgress }}%
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Error Messages -->
+                        <div v-if="errors.length > 0" class="alert alert-danger mt-3">
+                            <h6>Upload Errors:</h6>
+                            <ul class="mb-0">
+                                <li v-for="(error, index) in errors" :key="index">
+                                    {{ error }}
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-secondary" @click="$emit('close')" :disabled="uploading">
+                            Cancel
+                        </button>
+                        <button type="submit" class="btn btn-primary" :disabled="!selectedFile || uploading">
+                            <i v-if="uploading" class="fa fa-spinner fa-spin mr-1"></i>
+                            <i v-else class="fa fa-upload mr-1"></i>
+                            {{ uploading ? 'Uploading...' : 'Upload and Create Groups' }}
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+
+
+    </div>
+</template>
+
+<script>
+
+export default {
+    name: "GroupsCsvUploadModal",
+
+    props: {
+        show: {
+            type: Boolean,
+            default: false,
+        },
+
+        uploadProgress: {
+            type: Number,
+            default: 0,
+        },
+
+        uploading: {
+            type: Boolean,
+            default: false,
+        },
+
+        upload(file) {
+            this.$emit('upload', file);
+        },
+    },
+
+    data() {
+        return {
+            selectedFile: null,
+            fileName: "",
+            filePreview: null,
+            errors: [],
+        };
+    },
+
+    watch: {
+        show(newValue) {
+            if (newValue) {
+                // Reset form when modal opens
+                this.resetForm();
+                // Prevent body scroll
+                document.body.style.overflow = "hidden";
+            } else {
+                // Restore body scroll
+                document.body.style.overflow = "";
+            }
+        },
+    },
+
+    beforeUnmount() {
+        // Ensure body scroll is restored
+        document.body.style.overflow = "";
+    },
+
+    methods: {
+        handleFileSelect(event) {
+            const file = event.target.files[0];
+            if (!file) return;
+
+            // Validate file size (10MB max)
+            if (file.size > 10 * 1024 * 1024) {
+                this.errors = ["File size must be less than 10MB"];
+                return;
+            }
+
+            // Validate file type
+            if (!file.name.match(/\.(csv|txt)$/i)) {
+                this.errors = ["Please select a valid CSV or TXT file"];
+                return;
+            }
+
+            this.selectedFile = file;
+            this.fileName = file.name;
+            this.errors = [];
+
+            // Preview file content
+            this.previewFile(file);
+        },
+
+        previewFile(file) {
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                try {
+                    const csvText = e.target.result;
+                    const lines = csvText.split("\n").filter((line) => line.trim());
+
+                    if (lines.length === 0) {
+                        this.errors = ["CSV file appears to be empty"];
+                        return;
+                    }
+
+                    // Parse CSV properly handling quoted fields and commas
+                    const headers = this.parseCSVLine(lines[0]);
+                    const rows = lines
+                        .slice(1, 4)
+                        .map((line) => this.parseCSVLine(line))
+                        .map((row) => this.normalizeRowToHeaders(row, headers.length));
+
+                    this.filePreview = {
+                        headers,
+                        rows,
+                        totalRows: lines.length - 1, // Exclude header
+                    };
+
+                    // Validate required columns
+                    const requiredColumns = ["Name", "Location"];
+                    const missingColumns = requiredColumns.filter(
+                        (col) =>
+                            !headers.some(
+                                (header) => header.toLowerCase() === col.toLowerCase(),
+                            ),
+                    );
+
+                    if (missingColumns.length > 0) {
+                        this.errors = [
+                            `Missing required columns: ${missingColumns.join(", ")}`,
+                        ];
+                    }
+                } catch (error) {
+                    this.errors = [
+                        "Error reading CSV file. Please check the file format.",
+                    ];
+                }
+            };
+
+            reader.readAsText(file);
+        },
+
+        parseCSVLine(line) {
+            const result = [];
+            let current = "";
+            let inQuotes = false;
+            let i = 0;
+
+            // Trim the line to remove any trailing whitespace/newlines
+            const trimmedLine = line.trim();
+
+            while (i < trimmedLine.length) {
+                const char = trimmedLine[i];
+
+                if (char === '"') {
+                    if (inQuotes) {
+                        // Check if this is an escaped quote (double quote)
+                        if (i + 1 < trimmedLine.length && trimmedLine[i + 1] === '"') {
+                            // Escaped quote - add one quote to current and skip both
+                            current += '"';
+                            i += 2;
+                        } else {
+                            // End of quoted field
+                            inQuotes = false;
+                            i++;
+                        }
+                    } else {
+                        // Start of quoted field
+                        inQuotes = true;
+                        i++;
+                    }
+                } else if (char === "," && !inQuotes) {
+                    // Field separator found outside quotes
+                    result.push(this.cleanCsvField(current));
+                    current = "";
+                    i++;
+                } else {
+                    // Regular character - add to current field
+                    current += char;
+                    i++;
+                }
+            }
+
+            // Add the last field
+            result.push(this.cleanCsvField(current));
+            return result;
+        },
+
+        cleanCsvField(field) {
+            // Remove leading/trailing whitespace
+            let cleanedField = field.trim();
+
+            // Remove surrounding quotes if present
+            if (cleanedField.startsWith('"') && cleanedField.endsWith('"')) {
+                cleanedField = cleanedField.slice(1, -1);
+                // Handle escaped quotes within the field
+                cleanedField = cleanedField.replace(/""/g, '"');
+            }
+
+            return cleanedField;
+        },
+
+        normalizeRowToHeaders(row, headerCount) {
+            // Ensure each row has the same number of columns as headers
+            if (row.length === headerCount) {
+                return row;
+            }
+            if (row.length < headerCount) {
+                // Pad with empty strings
+                return [...row, ...Array(headerCount - row.length).fill("")];
+            }
+            // Truncate if too many columns
+            return row.slice(0, headerCount);
+        },
+
+        async downloadTemplate() {
+            // Create CSV template
+            const headers = [
+                "Name",
+                "Location",
+                "Postcode",
+                "Area",
+                "Country Code",
+                "Latitude",
+                "Longitude",
+                "Website",
+                "Phone",
+                "Email",
+                "Networks",
+                "Description",
+            ];
+
+            const sampleData = [
+                "Example Repair Cafe",
+                "Community Centre, Main Street",
+                "SW1A 1AA",
+                "Westminster",
+                "GB",
+                "51.5074",
+                "-0.1278",
+                "https://example.com",
+                "+44 20 7123 4567",
+                "info@example.com",
+                "Repair Cafe,Community Groups",
+                "A friendly repair cafe in the heart of Westminster",
+            ];
+
+            const csvContent = [
+                headers.join(","),
+                sampleData.map((field) => `"${field}"`).join(","),
+            ].join("\n");
+
+            const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
+            const link = document.createElement("a");
+            link.href = URL.createObjectURL(blob);
+            link.download = "groups_template.csv";
+            link.click();
+            URL.revokeObjectURL(link.href);
+        },
+
+        resetForm() {
+            this.selectedFile = null;
+            this.fileName = "";
+            this.filePreview = null;
+            this.errors = [];
+
+            if (this.$refs.fileInput) {
+                this.$refs.fileInput.value = "";
+            }
+        },
+    },
+};
+</script>
+
+<style scoped>
+.modal {
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 1050;
+}
+
+.modal-dialog {
+    margin: 1.75rem auto;
+}
+
+.modal-content {
+    border: none;
+    border-radius: 0.5rem;
+    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+}
+
+.modal-header {
+    border-bottom: 1px solid #dee2e6;
+    background-color: #f8f9fa;
+    border-radius: 0.5rem 0.5rem 0 0;
+}
+
+.modal-title {
+    font-weight: 600;
+    color: #495057;
+}
+
+.modal-body {
+    max-height: 70vh;
+    overflow-y: auto;
+}
+
+.form-label {
+    font-weight: 600;
+    margin-bottom: 0.5rem;
+}
+
+.custom-file {
+    position: relative;
+    display: inline-block;
+    width: 100%;
+    height: calc(1.5em + 0.75rem + 2px);
+    margin-bottom: 0;
+}
+
+.custom-file-input {
+    position: relative;
+    z-index: 2;
+    width: 100%;
+    height: calc(1.5em + 0.75rem + 2px);
+    margin: 0;
+    opacity: 0;
+}
+
+.custom-file-label {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    z-index: 1;
+    height: calc(1.5em + 0.75rem + 2px);
+    padding: 0.375rem 0.75rem;
+    font-weight: 400;
+    line-height: 1.5;
+    color: #495057;
+    background-color: #fff;
+    border: 1px solid #ced4da;
+    border-radius: 0.25rem;
+    cursor: pointer;
+}
+
+.custom-file-label::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 3;
+    display: block;
+    height: calc(1.5em + 0.75rem);
+    padding: 0.375rem 0.75rem;
+    line-height: 1.5;
+    color: #495057;
+    content: "Browse";
+    background-color: #e9ecef;
+    border-left: inherit;
+    border-radius: 0 0.25rem 0.25rem 0;
+}
+
+.table-responsive {
+    max-height: 200px;
+    overflow-y: auto;
+}
+
+.csv-cell {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 150px;
+    vertical-align: top;
+}
+
+.cell-content {
+    display: inline-block;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.progress {
+    height: 1.5rem;
+    background-color: #e9ecef;
+    border-radius: 0.375rem;
+}
+
+.progress-bar {
+    background-color: #007bff;
+    transition: width 0.3s ease;
+}
+
+.alert {
+    border-radius: 0.375rem;
+}
+
+.alert h6 {
+    margin-bottom: 0.5rem;
+}
+
+.alert ol,
+.alert ul {
+    padding-left: 1.5rem;
+}
+
+.btn {
+    font-weight: 500;
+    padding: 0.5rem 1rem;
+    border-radius: 0.25rem;
+    /* Prevent layout shift by maintaining consistent border width */
+    border-width: 1px;
+}
+
+.btn:hover {
+    /* Ensure border width doesn't change on hover */
+    border-width: 1px;
+}
+
+.btn-sm {
+    /* Ensure small buttons also maintain consistent border width */
+    border-width: 1px;
+}
+
+.btn-sm:hover {
+    /* Prevent layout shift on small buttons */
+    border-width: 1px;
+}
+
+.btn-close {
+    font-size: 1.5rem;
+    line-height: 1;
+    color: #000;
+    text-shadow: 0 1px 0 #fff;
+    opacity: 0.8;
+    background: none;
+    border: none;
+    padding: 0.25rem 0.5rem;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    margin-left: auto;
+}
+
+.btn-close:hover {
+    opacity: 1;
+    background-color: rgba(0, 0, 0, 0.1);
+    border-radius: 0.25rem;
+}
+
+.modal-backdrop {
+    z-index: 1040;
+}
+</style>
diff --git a/resources/js/components/admin/GroupsManagement.vue b/resources/js/components/admin/GroupsManagement.vue
new file mode 100644
index 0000000000..2cacd69fce
--- /dev/null
+++ b/resources/js/components/admin/GroupsManagement.vue
@@ -0,0 +1,508 @@
+<template>
+  <div class="groups-management">
+    <div class="d-flex justify-content-between align-items-center mb-4">
+      <div>
+        <h2>Groups Management</h2>
+        <span class="text-muted"> {{ totalCount }} groups</span>
+      </div>
+      <div class="button-group">
+        <button class="btn btn-primary mr-2" @click="handleExport" :disabled="exporting">Export Groups</button>
+        <button class="btn btn-primary" @click="showCsvUploadModal = true">Import Groups</button>
+      </div>
+    </div>
+
+    <!-- Search Bar -->
+    <div class="row mb-4">
+      <div class="col-md-6">
+        <div class="input-group">
+          <input id="search" class="form-control" placeholder="Search groups by name, location, postcode, or area..."
+            v-model="searchQuery" @input="handleSearchInput" />
+          <div class="input-group-append" v-if="searchQuery">
+            <button class="btn btn-outline-secondary" type="button" @click="clearSearch" title="Clear search">
+              &times;
+            </button>
+          </div>
+        </div>
+        <small class="form-text text-muted" v-if="searchQuery">
+          {{ searchResultsText }}
+        </small>
+      </div>
+    </div>
+
+    <div v-if="alert.message" :class="`alert alert-${alert.type}`" class="alert-dismissible fade show">
+      {{ alert.message }}
+      <button type="button" class="close" @click="clearAlert">
+        <span>&times;</span>
+      </button>
+    </div>
+
+    <GroupsCsvUploadModal :show="showCsvUploadModal" @close="showCsvUploadModal = false" @upload="handleUpload"
+      :upload-progress="uploadProgress" :uploading="uploading" />
+
+    <GroupsBulkAction :selected-groups="selectedGroups" :total-count="totalCount" @action="handleBulkAction"
+      @clear-selection="clearSelection" />
+
+    <GroupsTable :groups="groups" :loading="loading" :selected-groups="selectedGroups" :pagination="pagination"
+      :sort-field="sortField" :sort-direction="sortDirection" @action="handleAction" @select="handleGroupSelect"
+      @select-all="handleSelectAll" @page-change="handlePageChange" @page-size-change="handlePageSizeChange"
+      @sort-change="handleSortChange" />
+
+    <ConfirmationModal :show="confirmationModal.show" :action="confirmationModal.action"
+      :groups="confirmationModal.groups" :error="confirmationModal.error" @confirm="handleModalConfirm"
+      @cancel="handleModalCancel" />
+
+    <ImportResultsModal :show="importResults.show" :type="importResults.type" :created="importResults.created"
+      :errors="importResults.errors" @close="closeImportResults" />
+
+    <!-- Floating Scroll to Top Button -->
+    <div class="scroll-to-top-btn" :class="{ 'show': showScrollToTop }" @click="scrollToTop" title="Scroll to top">
+      <span class="chevron-up">▲</span>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import GroupsTable from "./GroupsTable.vue";
+import GroupsBulkAction from "./GroupsBulkAction.vue";
+import ConfirmationModal from "./ConfirmationModal.vue";
+import GroupsCsvUploadModal from "./GroupsCsvUploadModal.vue";
+import ImportResultsModal from "./ImportResultsModal.vue";
+import groupsApi from "../../api/groups.js";
+
+export default {
+  name: "GroupsManagement",
+  components: {
+    GroupsTable,
+    GroupsBulkAction,
+    ConfirmationModal,
+    GroupsCsvUploadModal,
+    ImportResultsModal,
+  },
+
+  data() {
+    return {
+      groups: [],
+      loading: false,
+      selectedGroups: [],
+      totalCount: 0,
+      showCsvUploadModal: false,
+      exporting: false,
+      confirmationModal: {
+        show: false,
+        action: null,
+        groups: [],
+        error: null,
+      },
+      alert: {
+        message: "",
+        type: "success",
+      },
+
+      pagination: {
+        currentPage: 1,
+        perPage: 25,
+        totalPages: 0,
+        total: 0,
+        from: 0,
+        to: 0,
+      },
+      sortField: "name",
+      sortDirection: "asc",
+
+      searchQuery: "",
+      searchTimeout: null,
+
+      uploadProgress: 0,
+      uploading: false,
+
+      importResults: {
+        show: false,
+        type: 'success', // 'success', 'partial', 'error'
+        created: 0,
+        errors: [],
+      },
+
+      showScrollToTop: false,
+    };
+  },
+
+  mounted() {
+    this.loadGroups();
+    window.addEventListener('scroll', this.handleScroll);
+  },
+
+  computed: {
+    searchResultsText() {
+      if (!this.searchQuery) return '';
+
+      if (this.loading) {
+        return 'Searching...';
+      }
+
+      return `Found ${this.totalCount} result${this.totalCount !== 1 ? 's' : ''} for "${this.searchQuery}"`;
+    }
+  },
+
+  beforeDestroy() {
+    window.removeEventListener('scroll', this.handleScroll);
+    // Clear search timeout to prevent memory leaks
+    if (this.searchTimeout) {
+      clearTimeout(this.searchTimeout);
+    }
+  },
+
+  methods: {
+    async loadGroups() {
+      this.loading = true;
+      try {
+        const params = {
+          page: this.pagination.currentPage,
+          per_page: this.pagination.perPage,
+          sort_by: this.sortField,
+          sort_direction: this.sortDirection,
+        };
+
+        // Add search parameter if search query exists
+        if (this.searchQuery.trim()) {
+          params.search = this.searchQuery.trim();
+        }
+
+        const response = await groupsApi.fetchGroups(params);
+        this.groups = response.data;
+        this.pagination.total = response.total;
+        this.pagination.totalPages = response.last_page;
+        this.pagination.currentPage = response.current_page;
+        this.pagination.from = response.from || 0;
+        this.pagination.to = response.to || 0;
+        this.totalCount = response.total;
+      } catch (error) {
+        console.error("Error loading groups:", error);
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    handleGroupSelect(group, selected) {
+      if (selected) {
+        this.selectedGroups.push(group);
+      } else {
+        this.selectedGroups = this.selectedGroups.filter(
+          (g) => g.idgroups !== group.idgroups,
+        );
+      }
+    },
+
+    handleSelectAll(selected) {
+      if (selected) {
+        this.selectedGroups = [...this.groups];
+      } else {
+        this.selectedGroups = [];
+      }
+    },
+
+    clearSelection() {
+      this.selectedGroups = [];
+    },
+
+    handlePageChange(page) {
+      this.pagination.currentPage = page;
+      this.loadGroups();
+    },
+
+    handlePageSizeChange(newPageSize) {
+      this.pagination.perPage = newPageSize;
+      this.pagination.currentPage = 1; // Reset to first page when changing page size
+      this.loadGroups();
+    },
+
+    handleSortChange(field, direction) {
+      this.sortField = field;
+      this.sortDirection = direction;
+      this.loadGroups();
+    },
+
+    handleSearchInput() {
+      // Clear existing timeout
+      if (this.searchTimeout) {
+        clearTimeout(this.searchTimeout);
+      }
+
+      // Debounce search to avoid too many API calls
+      this.searchTimeout = setTimeout(() => {
+        this.pagination.currentPage = 1; // Reset to first page when searching
+        this.loadGroups();
+      }, 500); // 500ms delay
+    },
+
+    clearSearch() {
+      this.searchQuery = '';
+      this.pagination.currentPage = 1;
+      this.loadGroups();
+    },
+
+    handleAction(group, action) {
+      this.confirmationModal = {
+        show: true,
+        action: action,
+        groups: [group],
+      };
+    },
+
+    handleBulkAction(action) {
+      this.confirmationModal = {
+        show: true,
+        action: action,
+        groups: [...this.selectedGroups],
+      };
+    },
+
+    async handleModalConfirm(data) {
+      try {
+        this.loading = true;
+
+        if (this.confirmationModal.groups.length === 1) {
+          await groupsApi.performAction(
+            this.confirmationModal.groups[0].idgroups,
+            this.confirmationModal.action,
+          );
+        } else {
+          const groupIds = this.confirmationModal.groups.map((g) => g.idgroups);
+          await groupsApi.performBulkActions(groupIds, this.confirmationModal.action);
+        }
+
+        this.confirmationModal.show = false;
+        this.clearSelection();
+        this.loadGroups();
+      } catch (error) {
+        console.error("Error performing action:", error);
+        this.confirmationModal.error = error.response?.data?.message || "Failed to perform action";
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    handleModalCancel() {
+      this.confirmationModal.show = false;
+      this.confirmationModal.action = null;
+      this.confirmationModal.groups = [];
+    },
+
+    async handleExport() {
+      this.exporting = true;
+
+      try {
+        const response = await groupsApi.exportGroups();
+
+        // Extract filename from response headers if available
+        const contentDisposition = response.headers["content-disposition"];
+        let filename = `groups_export_${new Date().toISOString().split("T")[0]}.csv`;
+
+        if (contentDisposition) {
+          const filenameMatch = contentDisposition.match(/filename="(.+)"/);
+          if (filenameMatch) {
+            filename = filenameMatch[1];
+          }
+        }
+
+        // Create download URL from blob response
+        const url = window.URL.createObjectURL(response.data);
+        const link = document.createElement("a");
+        link.href = url;
+        link.download = filename;
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        window.URL.revokeObjectURL(url);
+
+        this.showAlert("Groups exported successfully!", "success");
+      } catch (error) {
+        console.error("Export error:", error);
+        this.showAlert(
+          `Error exporting groups: ${error.response?.data?.message || error.message}`,
+          "danger",
+        );
+      } finally {
+        this.exporting = false;
+      }
+    },
+
+    async handleUpload(file) {
+      if (!file) return;
+
+      this.uploadProgress = 0;
+      this.uploading = true;
+
+      try {
+        const response = await groupsApi.importGroups(
+          file,
+          (progressEvent) => {
+            // Update progress based on actual upload progress
+            this.uploadProgress = Math.round(
+              (progressEvent.loaded * 100) / progressEvent.total,
+            );
+          },
+        );
+
+        this.showCsvUploadModal = false;
+
+        if (response.success) {
+          const { created, errors } = response?.data ?? {};
+
+          if (errors && errors.length > 0) {
+            // Partial success - some groups created, some failed
+            this.showImportResults({
+              type: 'partial',
+              created: created || 0,
+              errors: errors,
+            });
+          } else {
+            // Complete success
+            this.showAlert(response.message, "success");
+          }
+
+          this.loadGroups();
+        } else {
+          // Complete failure
+          this.showImportResults({
+            type: 'error',
+            created: 0,
+            errors: [response.message || 'Import failed'],
+          });
+        }
+      } catch (error) {
+        console.error("CSV Upload Error:", error);
+        this.showCsvUploadModal = false;
+
+        // Extract meaningful error message from response
+        let errorMessage = 'Upload failed. Please try again.';
+        let errors = [];
+
+        if (error.response?.data) {
+          errorMessage = error.response.data.message || errorMessage;
+
+          // Check if there are detailed errors in the response
+          if (error.response.data.errors) {
+            if (Array.isArray(error.response.data.errors)) {
+              errors = error.response.data.errors;
+            } else if (typeof error.response.data.errors === 'object') {
+              // Laravel validation errors format
+              errors = Object.values(error.response.data.errors).flat();
+            }
+          }
+        } else if (error.message) {
+          errorMessage = error.message;
+        }
+
+        if (errors.length > 0) {
+          this.showImportResults({
+            type: 'error',
+            created: 0,
+            errors: errors,
+          });
+        } else {
+          this.showAlert(errorMessage, "danger");
+        }
+      } finally {
+        this.uploading = false;
+        this.uploadProgress = 0;
+      }
+    },
+
+    clearAlert() {
+      this.alert.message = "";
+      this.alert.type = "success";
+    },
+
+    showAlert(message, type) {
+      this.alert.message = message;
+      this.alert.type = type;
+    },
+
+    showImportResults(results) {
+      this.importResults = {
+        show: true,
+        type: results.type,
+        created: results.created,
+        errors: results.errors || [],
+      };
+    },
+
+    closeImportResults() {
+      this.importResults.show = false;
+    },
+
+    handleScroll() {
+      // Show scroll-to-top button when user scrolls down more than 300px
+      this.showScrollToTop = window.scrollY > 300;
+    },
+
+    scrollToTop() {
+      // Smooth scroll to top of page
+      window.scrollTo({
+        top: 0,
+        behavior: "smooth",
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.groups-management {
+  padding: 20px;
+}
+
+.scroll-to-top-btn {
+  box-shadow: 5px 5px 0 0 #222;
+  border: solid 1px #222;
+  padding: 10px;
+  border-radius: 0;
+  position: fixed;
+  bottom: 30px;
+  right: 30px;
+  width: 50px;
+  height: 50px;
+  background-color: white;
+  color: #222;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(20px);
+  z-index: 1000;
+}
+
+.scroll-to-top-btn:hover {
+  background-color: white;
+  transform: translateY(0);
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
+}
+
+.scroll-to-top-btn.show {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+}
+
+.scroll-to-top-btn .chevron-up {
+  font-size: 16px;
+  font-weight: bold;
+  line-height: 1;
+}
+
+.form-control:focus {
+  border-color: #80bdff;
+  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+}
+
+.input-group-append {
+  background-color: #f8f9fa;
+  border-color: #ced4da;
+  color: #6c757d;
+  height: 40px;
+}
+</style>
diff --git a/resources/js/components/admin/GroupsTable.vue b/resources/js/components/admin/GroupsTable.vue
new file mode 100644
index 0000000000..bee84d86d0
--- /dev/null
+++ b/resources/js/components/admin/GroupsTable.vue
@@ -0,0 +1,520 @@
+<template>
+    <div class="groups-table">
+        <div class="table-responsive">
+            <table class="table table-striped">
+                <thead>
+                    <tr>
+                        <th class="checkbox-column">
+                            <input type="checkbox" :checked="allSelected" @change="handleSelectAll"
+                                :disabled="loading" />
+                        </th>
+                        <th @click="handleSort('name')" class="sortable">
+                            Name
+                            <i :class="getSortIcon('name')"></i>
+                        </th>
+                        <th @click="handleSort('location')" class="sortable">
+                            Location
+                            <i :class="getSortIcon('location')"></i>
+                        </th>
+                        <th @click="handleSort('confirmed_hosts_count')" class="sortable text-center">
+                            Hosts
+                            <i :class="getSortIcon('confirmed_hosts_count')"></i>
+                        </th>
+                        <th @click="handleSort('confirmed_restarters_count')" class="sortable text-center">
+                            Volunteers
+                            <i :class="getSortIcon('confirmed_restarters_count')"></i>
+                        </th>
+                        <th @click="handleSort('approved')" class="sortable text-center">
+                            Status
+                            <i :class="getSortIcon('approved')"></i>
+                        </th>
+                        <th @click="handleSort('created_at')" class="sortable">
+                            Created At
+                            <i :class="getSortIcon('created_at')"></i>
+                        </th>
+                        <th class="actions-column">Actions</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr v-if="loading">
+                        <td colspan="8" class="text-center">
+                            <div class="spinner-border" role="status">
+                                <span class="sr-only">Loading...</span>
+                            </div>
+                        </td>
+                    </tr>
+                    <tr v-else-if="groups.length === 0">
+                        <td colspan="8" class="text-center text-muted">
+                            No groups found
+                        </td>
+                    </tr>
+                    <tr v-else v-for="group in groups" :key="group.idgroups"
+                        :class="{ 'table-active': isSelected(group) }">
+                        <td>
+                            <input type="checkbox" :checked="isSelected(group)" @change="handleSelect(group, $event)"
+                                :disabled="loading" />
+                        </td>
+                        <td>
+                            <div class="d-flex align-items-center">
+                                <div>
+                                    <a :href="'/group/view/' + group.idgroups" class="fw-bold">{{ group.name }}</a>
+                                    <span v-if="group.archived_at"
+                                        class="badge nounderline badge-secondary badge-pill">Archived</span>
+                                    <div v-if="group.networks && group.networks.length > 0" class="small text-muted">
+                                        {{group.networks.map(n => n.name).join(', ')}}
+                                    </div>
+                                </div>
+                            </div>
+                        </td>
+                        <td>
+                            <div v-if="group.location">
+                                {{ group.location }}
+                            </div>
+                            <div v-else class="text-muted">No location</div>
+                        </td>
+                        <td class="text-center">
+                            <span class="badge bg-primary">{{ group.confirmed_hosts_count || 0 }}</span>
+                        </td>
+                        <td class="text-center">
+                            <span class="badge bg-success">{{ group.confirmed_restarters_count || 0 }}</span>
+                        </td>
+                        <td class="text-center">
+                            <span v-if="group.approved" class="badge bg-success">Approved</span>
+                            <span v-else class="badge bg-warning">Pending</span>
+                        </td>
+                        <td>
+                            <div class="small">{{ formatDate(group.created_at) }}</div>
+                        </td>
+                        <td>
+                            <div class="dropdown">
+                                <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button"
+                                    :id="'dropdown-' + group.idgroups" data-toggle="dropdown" data-boundary="viewport"
+                                    data-flip="false" aria-expanded="false">
+                                    Actions
+                                </button>
+                                <ul class="dropdown-menu dropdown-menu-right"
+                                    :aria-labelledby="'dropdown-' + group.idgroups">
+                                    <li>
+                                        <a class="dropdown-item" :href="'/group/edit/' + group.idgroups">
+                                            Edit
+                                        </a>
+                                    </li>
+                                    <li v-if="!group.archived_at">
+                                        <a class="dropdown-item" @click="handleAction(group, 'archive')">
+                                            Archive
+                                        </a>
+                                    </li>
+                                    <li v-if="group.archived_at">
+                                        <a class="dropdown-item" @click="handleAction(group, 'unarchive')">
+                                            Unarchive
+                                        </a>
+                                    </li>
+                                    <li v-if="!group.approved">
+                                        <a class="dropdown-item" @click="handleAction(group, 'approve')">
+                                            Approve
+                                        </a>
+                                    </li>
+                                    <li v-if="group.approved">
+                                        <a class="dropdown-item" @click="handleAction(group, 'unapprove')">
+                                            Unapprove
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a class="dropdown-item text-danger" @click="handleAction(group, 'delete')">
+                                            Delete
+                                        </a>
+                                    </li>
+                                </ul>
+                            </div>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <!-- Page Size Selector Header -->
+        <div class="d-flex justify-content-between align-items-center mt-3 mb-3">
+            <div class="d-flex align-items-center">
+                <label class="mr-2 mb-0">Show:</label>
+                <select class="form-control form-control-sm" style="width: 80px;" :value="pagination.perPage"
+                    @change="handlePageSizeChange">
+                    <option value="10">10</option>
+                    <option value="25">25</option>
+                    <option value="50">50</option>
+                    <option value="100">100</option>
+                    <option value="200">200</option>
+                </select>
+                <span class="ml-2 text-muted">per page</span>
+            </div>
+            <div class="text-muted" v-if="pagination.total > 0">
+                Showing {{ pagination.from }} to {{ pagination.to }} of {{ pagination.total }} groups
+            </div>
+        </div>
+
+        <!-- Pagination Footer -->
+        <div v-if="pagination.total > 0 && pagination.totalPages > 1" class="d-flex justify-content-center mt-3">
+            <nav>
+                <ul class="pagination mb-0">
+                    <li class="page-item" :class="{ disabled: pagination.currentPage === 1 }">
+                        <a class="page-link" @click="changePage(pagination.currentPage - 1)" href="#">
+                            Previous
+                        </a>
+                    </li>
+                    <li v-for="page in visiblePages" :key="page" class="page-item"
+                        :class="{ active: page === pagination.currentPage }">
+                        <a class="page-link" @click="changePage(page)" href="#">
+                            {{ page }}
+                        </a>
+                    </li>
+                    <li class="page-item" :class="{ disabled: pagination.currentPage === pagination.totalPages }">
+                        <a class="page-link" @click="changePage(pagination.currentPage + 1)" href="#">
+                            Next
+                        </a>
+                    </li>
+                </ul>
+            </nav>
+        </div>
+    </div>
+</template>
+
+<script>
+import moment from "moment";
+
+export default {
+    name: "GroupsTable",
+    props: {
+        groups: {
+            type: Array,
+            default: () => [],
+        },
+        loading: {
+            type: Boolean,
+            default: false,
+        },
+        selectedGroups: {
+            type: Array,
+            default: () => [],
+        },
+        pagination: {
+            type: Object,
+            default: () => ({
+                currentPage: 1,
+                totalPages: 0,
+                total: 0,
+                perPage: 25,
+                from: 0,
+                to: 0,
+            }),
+        },
+        sortField: {
+            type: String,
+            default: "name",
+        },
+        sortDirection: {
+            type: String,
+            default: "asc",
+        },
+    },
+
+    computed: {
+        allSelected() {
+            return (
+                this.groups.length > 0 &&
+                this.selectedGroups.length === this.groups.length
+            );
+        },
+
+        visiblePages() {
+            const pages = [];
+            const current = this.pagination.currentPage;
+            const last = this.pagination.totalPages;
+
+            // Show max 7 pages
+            let start = Math.max(1, current - 3);
+            let end = Math.min(last, current + 3);
+
+            // Adjust if we're near the beginning or end
+            if (current <= 4) {
+                end = Math.min(last, 7);
+            }
+            if (current >= last - 3) {
+                start = Math.max(1, last - 6);
+            }
+
+            for (let i = start; i <= end; i++) {
+                pages.push(i);
+            }
+
+            return pages;
+        },
+    },
+
+    methods: {
+        isSelected(group) {
+            return this.selectedGroups.some((g) => g.idgroups === group.idgroups);
+        },
+
+        handleSelect(group, event) {
+            this.$emit("select", group, event.target.checked);
+        },
+
+        handleSelectAll(event) {
+            this.$emit("select-all", event.target.checked);
+        },
+
+        handleSort(field) {
+            const direction =
+                this.sortField === field && this.sortDirection === "asc"
+                    ? "desc"
+                    : "asc";
+            this.$emit("sort-change", field, direction);
+        },
+
+        handleAction(group, action) {
+            this.$emit("action", group, action);
+        },
+
+        getSortIcon(field) {
+            if (this.sortField !== field) {
+                return "sort-icon";
+            }
+            return this.sortDirection === "asc"
+                ? "sort-icon sort-up"
+                : "sort-icon sort-down";
+        },
+
+        changePage(page) {
+            if (page >= 1 && page <= this.pagination.totalPages) {
+                this.$emit("page-change", page);
+            }
+        },
+
+        handlePageSizeChange(event) {
+            const newPageSize = Number.parseInt(event.target.value);
+            this.$emit("page-size-change", newPageSize);
+        },
+
+        formatDate(dateString) {
+            if (!dateString) return "";
+            return moment(dateString).format("MMM DD, YYYY");
+        },
+    },
+};
+</script>
+
+<style scoped>
+.groups-table {
+    background: white;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.table {
+    table-layout: fixed;
+    width: 100%;
+}
+
+.table th {
+    background-color: #f8f9fa;
+    border-bottom: 2px solid #dee2e6;
+    font-weight: 600;
+}
+
+.sortable {
+    cursor: pointer;
+    user-select: none;
+}
+
+.sortable:hover {
+    background-color: #e9ecef;
+}
+
+.checkbox-column {
+    width: 40px;
+}
+
+.actions-column {
+    width: 120px;
+}
+
+/* Column width specifications to prevent layout shift */
+.table th:nth-child(1),
+.table td:nth-child(1) {
+    width: 40px;
+}
+
+/* Checkbox */
+
+.table th:nth-child(2),
+.table td:nth-child(2) {
+    width: 25%;
+}
+
+/* Name */
+
+.table th:nth-child(3),
+.table td:nth-child(3) {
+    width: 20%;
+}
+
+/* Location */
+
+.table th:nth-child(4),
+.table td:nth-child(4) {
+    width: 10%;
+}
+
+/* Hosts */
+
+.table th:nth-child(5),
+.table td:nth-child(5) {
+    width: 10%;
+}
+
+/* Volunteers */
+
+.table th:nth-child(6),
+.table td:nth-child(6) {
+    width: 10%;
+}
+
+/* Status */
+
+.table th:nth-child(7),
+.table td:nth-child(7) {
+    width: 15%;
+}
+
+/* Created At */
+
+.table th:nth-child(8),
+.table td:nth-child(8) {
+    width: 120px;
+}
+
+/* Actions */
+
+/* Prevent text overflow in fixed-width cells */
+.table td {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+/* Allow wrapping for specific content */
+.table td:nth-child(2),
+/* Name column */
+.table td:nth-child(3) {
+    /* Location column */
+    white-space: normal;
+    word-wrap: break-word;
+}
+
+.table-active {
+    background-color: rgba(0, 123, 255, 0.1);
+}
+
+.dropdown-toggle::after {
+    margin-left: 0.5em;
+}
+
+.pagination {
+    margin-top: 20px;
+}
+
+.page-link {
+    cursor: pointer;
+}
+
+.page-item.disabled .page-link {
+    cursor: not-allowed;
+}
+
+/* Custom sort icons */
+.sort-icon {
+    display: inline-block;
+    width: 0;
+    height: 0;
+    margin-left: 8px;
+    vertical-align: middle;
+    border-left: 4px solid transparent;
+    border-right: 4px solid transparent;
+    border-bottom: 4px solid #6c757d;
+    opacity: 0.3;
+    transition: opacity 0.15s ease;
+}
+
+.sort-icon.sort-up {
+    border-bottom: 4px solid #495057;
+    border-top: none;
+    opacity: 1;
+}
+
+.sort-icon.sort-down {
+    border-top: 4px solid #495057;
+    border-bottom: none;
+    opacity: 1;
+}
+
+/* Prevent layout shift by reserving space for sort icons */
+.sortable {
+    position: relative;
+    padding-right: 20px;
+    /* Reserve space for the icon */
+}
+
+.sortable .sort-icon {
+    position: absolute;
+    right: 8px;
+    top: 50%;
+    transform: translateY(-50%);
+    margin-left: 0;
+    /* Remove left margin since we're using absolute positioning */
+}
+
+.dropdown-menu {
+    position: absolute;
+    z-index: 1050;
+}
+
+.table-responsive {
+    /* Remove overflow: hidden to allow dropdowns to escape table bounds */
+    overflow-x: auto;
+    /* Do not set overflow: hidden here! */
+}
+
+/* Form control styling */
+.form-control-sm {
+    height: calc(1.5em + 0.5rem + 2px);
+    padding: 0.25rem 0.5rem;
+    font-size: 0.875rem;
+    border-radius: 0.2rem;
+}
+
+/* Pagination styling to match GroupsManagement */
+.pagination {
+    margin-bottom: 0;
+}
+
+.page-link {
+    cursor: pointer;
+    border-color: #dee2e6 !important;
+}
+
+.page-link:hover {
+    border-color: #adb5bd !important;
+    background-color: #e9ecef !important;
+    color: #222 !important;
+}
+
+.page-item.active .page-link {
+    border-color: #222 !important;
+    background-color: #222 !important;
+    color: white !important;
+}
+
+.page-item.disabled .page-link {
+    cursor: not-allowed;
+    border-color: #dee2e6 !important;
+}
+</style>
\ No newline at end of file
diff --git a/resources/js/components/admin/ImportResultsModal.vue b/resources/js/components/admin/ImportResultsModal.vue
new file mode 100644
index 0000000000..690a2b8663
--- /dev/null
+++ b/resources/js/components/admin/ImportResultsModal.vue
@@ -0,0 +1,322 @@
+<template>
+    <div v-if="show" class="modal fade show d-block" tabindex="-1" role="dialog">
+        <div class="modal-dialog modal-lg" role="document">
+            <div class="modal-content">
+                <div class="modal-header" :class="headerClass">
+                    <h5 class="modal-title">
+                        <i :class="iconClass" class="mr-2"></i>
+                        {{ title }}
+                    </h5>
+                    <button type="button" class="btn-close" @click="$emit('close')" aria-label="Close">
+                        <span aria-hidden="true">&times;</span>
+                    </button>
+                </div>
+
+                <div class="modal-body">
+                    <!-- Success/Partial Success Summary -->
+                    <div v-if="created > 0" class="alert alert-success">
+                        <h6><i class="fa fa-check-circle mr-2"></i>Successfully Created</h6>
+                        <p class="mb-0">{{ created }} group{{ created !== 1 ? 's' : '' }} {{ created === 1 ? 'was' :
+                            'were' }} created successfully.</p>
+                    </div>
+
+                    <!-- Error Summary -->
+                    <div v-if="errors.length > 0" class="alert alert-danger">
+                        <h6><i class="fa fa-exclamation-circle mr-2"></i>Errors Encountered</h6>
+                        <p class="mb-2">{{ errors.length }} error{{ errors.length !== 1 ? 's' : '' }} occurred during
+                            the import:</p>
+
+                        <!-- Expandable Error List -->
+                        <div class="error-list">
+                            <div v-for="(error, index) in displayedErrors" :key="index"
+                                class="error-item mb-2 p-2 bg-light rounded">
+                                <small class="text-muted">Row {{ getRowNumber(error, index) }}:</small>
+                                <div class="error-message">{{ formatError(error) }}</div>
+                            </div>
+
+                            <!-- Show More/Less Button -->
+                            <div v-if="errors.length > maxDisplayedErrors" class="text-center mt-2">
+                                <button type="button" class="btn btn-sm btn-outline-secondary"
+                                    @click="toggleShowAllErrors">
+                                    <i :class="showAllErrors ? 'fa fa-chevron-up' : 'fa fa-chevron-down'"
+                                        class="mr-1"></i>
+                                    {{ showAllErrors ? 'Show Less' : `Show ${errors.length - maxDisplayedErrors} More`
+                                    }}
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Next Steps -->
+                    <div v-if="type === 'partial'" class="alert alert-info">
+                        <h6><i class="fa fa-info-circle mr-2"></i>Next Steps</h6>
+                        <ul class="mb-0">
+                            <li>Review the errors above and fix the data in your CSV file</li>
+                            <li>Re-upload the corrected CSV file to import the remaining groups</li>
+                            <li>Successfully created groups will not be duplicated</li>
+                        </ul>
+                    </div>
+
+                    <div v-else-if="type === 'error'" class="alert alert-warning">
+                        <h6><i class="fa fa-exclamation-triangle mr-2"></i>Troubleshooting</h6>
+                        <ul class="mb-0">
+                            <li>Check that your CSV file follows the required format</li>
+                            <li>Ensure all required fields (Name, Location) are provided</li>
+                            <li>Verify that the file is properly encoded (UTF-8)</li>
+                            <li>Download and use our CSV template if needed</li>
+                        </ul>
+                    </div>
+                </div>
+
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" @click="$emit('close')">
+                        Close
+                    </button>
+                    <button v-if="type === 'partial' || type === 'error'" type="button" class="btn btn-primary"
+                        @click="tryAgain">
+                        <i class="fa fa-upload mr-1"></i>
+                        Try Again
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'ImportResultsModal',
+
+    props: {
+        show: {
+            type: Boolean,
+            default: false
+        },
+        type: {
+            type: String,
+            default: 'success' // 'success', 'partial', 'error'
+        },
+        created: {
+            type: Number,
+            default: 0
+        },
+        errors: {
+            type: Array,
+            default: () => []
+        },
+    },
+
+    data() {
+        return {
+            showAllErrors: false,
+            maxDisplayedErrors: 5
+        };
+    },
+
+    computed: {
+        title() {
+            switch (this.type) {
+                case 'success':
+                    return 'Import Successful';
+                case 'partial':
+                    return 'Import Partially Successful';
+                case 'error':
+                    return 'Import Failed';
+                default:
+                    return 'Import Results';
+            }
+        },
+
+        headerClass() {
+            switch (this.type) {
+                case 'success':
+                    return 'bg-success text-white';
+                case 'partial':
+                    return 'bg-warning text-dark';
+                case 'error':
+                    return 'bg-danger text-white';
+                default:
+                    return 'bg-light';
+            }
+        },
+
+        iconClass() {
+            switch (this.type) {
+                case 'success':
+                    return 'fa fa-check-circle';
+                case 'partial':
+                    return 'fa fa-exclamation-triangle';
+                case 'error':
+                    return 'fa fa-times-circle';
+                default:
+                    return 'fa fa-info-circle';
+            }
+        },
+
+        messageClass() {
+            switch (this.type) {
+                case 'success':
+                    return 'alert-success';
+                case 'partial':
+                    return 'alert-warning';
+                case 'error':
+                    return 'alert-danger';
+                default:
+                    return 'alert-info';
+            }
+        },
+
+        displayedErrors() {
+            if (this.showAllErrors) {
+                return this.errors;
+            }
+            return this.errors.slice(0, this.maxDisplayedErrors);
+        }
+    },
+
+    watch: {
+        show(newValue) {
+            if (newValue) {
+                this.showAllErrors = false;
+                document.body.style.overflow = 'hidden';
+            } else {
+                document.body.style.overflow = '';
+            }
+        }
+    },
+
+    beforeUnmount() {
+        document.body.style.overflow = '';
+    },
+
+    methods: {
+        toggleShowAllErrors() {
+            this.showAllErrors = !this.showAllErrors;
+        },
+
+        formatError(error) {
+            if (typeof error === 'string') {
+                return error;
+            }
+            if (error.message) {
+                return error.message;
+            }
+            if (error.error) {
+                return error.error;
+            }
+            return JSON.stringify(error);
+        },
+
+        getRowNumber(error, index) {
+            if (typeof error === 'object' && error.row) {
+                return error.row;
+            }
+            return index + 2; // +2 because index is 0-based and row 1 is headers
+        },
+
+        tryAgain() {
+            this.$emit('close');
+            // You could emit a 'try-again' event here if you want to automatically open the upload modal
+            // this.$emit('try-again');
+        }
+    }
+};
+</script>
+
+<style scoped>
+.modal {
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 1055;
+}
+
+.modal-dialog {
+    margin: 1.75rem auto;
+}
+
+.modal-content {
+    border: none;
+    border-radius: 0.5rem;
+    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+}
+
+.modal-header {
+    border-bottom: 1px solid #dee2e6;
+    border-radius: 0.5rem 0.5rem 0 0;
+}
+
+.modal-title {
+    font-weight: 600;
+}
+
+.modal-body {
+    max-height: 70vh;
+    overflow-y: auto;
+}
+
+.alert {
+    border-radius: 0.375rem;
+    margin-bottom: 1rem;
+}
+
+.alert h6 {
+    margin-bottom: 0.5rem;
+    font-weight: 600;
+}
+
+.error-list {
+    max-height: 300px;
+    overflow-y: auto;
+}
+
+.error-item {
+    border-left: 3px solid #dc3545;
+}
+
+.error-message {
+    font-size: 0.9rem;
+    line-height: 1.4;
+    white-space: pre-wrap;
+    word-break: break-word;
+}
+
+.btn-close {
+    font-size: 1.5rem;
+    line-height: 1;
+    color: inherit;
+    text-shadow: none;
+    opacity: 0.8;
+    background: none;
+    border: none;
+    padding: 0.25rem 0.5rem;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    margin-left: auto;
+}
+
+.btn-close:hover {
+    opacity: 1;
+    background-color: rgba(255, 255, 255, 0.2);
+    border-radius: 0.25rem;
+}
+
+.bg-warning .btn-close:hover {
+    background-color: rgba(0, 0, 0, 0.1);
+}
+
+.text-muted {
+    font-size: 0.8rem;
+}
+
+ul {
+    padding-left: 1.5rem;
+    margin-bottom: 0;
+}
+
+li {
+    margin-bottom: 0.25rem;
+}
+</style>
\ No newline at end of file
diff --git a/resources/views/admin/groups.blade.php b/resources/views/admin/groups.blade.php
new file mode 100644
index 0000000000..a3aec884bf
--- /dev/null
+++ b/resources/views/admin/groups.blade.php
@@ -0,0 +1,17 @@
+@extends('layouts.app')
+
+@section('title')
+Groups Management
+@endsection
+
+@section('content')
+<div class="container-fluid">
+    <div class="row">
+        <div class="col-12">
+            <div class="vue">
+                <GroupsManagement />
+            </div>
+        </div>
+    </div>
+</div>
+@endsection
diff --git a/resources/views/layouts/navbar.blade.php b/resources/views/layouts/navbar.blade.php
index 211a614e21..bdb0a342f8 100644
--- a/resources/views/layouts/navbar.blade.php
+++ b/resources/views/layouts/navbar.blade.php
@@ -133,6 +133,7 @@
                                   <li><a href="{{ route('brands') }}">Brands</a></li>
                                   <li><a href="{{ route('skills') }}">Skills</a></li>
                                   <li><a href="{{ route('tags') }}">Group tags</a></li>
+                                  <li><a href="{{ route('admin.groups') }}">Groups Management</a></li>
                                   <li><a href="{{ route('category') }}">Categories</a></li>
                                   <li><a href="{{ route('users') }}">Users</a></li>
                                   <li><a href="{{ route('roles') }}">Roles</a></li>
diff --git a/routes/api.php b/routes/api.php
index 75d5db32f8..1d7f5c64e4 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -109,6 +109,15 @@
             });
         });
 
+        // Admin Groups Management API
+        Route::prefix('/admin/groups')->middleware(['auth:api', App\Http\Middleware\AdminMiddleware::class])->group(function() {
+            Route::get('/', [App\Http\Controllers\API\GroupsController::class, 'index']);
+            Route::get('/export', [App\Http\Controllers\API\GroupsController::class, 'exportGroups']);
+            Route::post('import', [App\Http\Controllers\API\GroupsController::class, 'importGroups']);
+            Route::post('bulk/{action}', [App\Http\Controllers\API\GroupsController::class, 'performBulkActions']);
+            Route::post('{id}/{action}', [App\Http\Controllers\API\GroupsController::class, 'performSingleAction']);
+        });
+
         Route::get('/items', [API\ItemController::class, 'listItemsv2']);
 
         Route::prefix('/alerts')->group(function() {
diff --git a/routes/web.php b/routes/web.php
index 08106ca78d..c5b41dd8ae 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -405,8 +405,9 @@
     });
 
     //Admin Controller
-    Route::prefix('admin')->group(function () {
+    Route::prefix('admin')->middleware(App\Http\Middleware\AdminMiddleware::class)->group(function () {
         Route::get('/stats', [AdminController::class, 'stats']);
+        Route::get('/groups', [AdminController::class, 'groups'])->name('admin.groups');
     });
 
     //Category Controller