diff --git a/src/app/doubtfire-angular.module.ts b/src/app/doubtfire-angular.module.ts
index ae030bcc3e..8813076139 100644
--- a/src/app/doubtfire-angular.module.ts
+++ b/src/app/doubtfire-angular.module.ts
@@ -229,6 +229,7 @@ import {TaskDefinitionResourcesComponent} from './units/states/edit/directives/u
 import {TaskDefinitionOverseerComponent} from './units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-overseer/task-definition-overseer.component';
 import {TaskDefinitionScormComponent} from './units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-scorm/task-definition-scorm.component';
 import {UnitAnalyticsComponent} from './units/states/analytics/unit-analytics-route.component';
+import {UnitGroupsStateComponent} from './units/states/groups/groups.component';
 import {FileDropComponent} from './common/file-drop/file-drop.component';
 import {UnitTaskEditorComponent} from './units/states/edit/directives/unit-tasks-editor/unit-task-editor.component';
 import {FUsersComponent} from './admin/states/f-users/f-users.component';
@@ -408,6 +409,7 @@ const GANTT_CHART_CONFIG = {
     TaskDefinitionOverseerComponent,
     TaskDefinitionScormComponent,
     UnitAnalyticsComponent,
+    UnitGroupsStateComponent,
     StudentTutorialSelectComponent,
     StudentCampusSelectComponent,
     TaskListItemComponent,
diff --git a/src/app/doubtfire-angularjs.module.ts b/src/app/doubtfire-angularjs.module.ts
index ca57426fd2..84de3efe91 100644
--- a/src/app/doubtfire-angularjs.module.ts
+++ b/src/app/doubtfire-angularjs.module.ts
@@ -205,6 +205,7 @@ import {TaskSubmissionCardComponent} from './projects/states/dashboard/directive
 import {InboxComponent} from './units/states/tasks/inbox/inbox.component';
 import {TaskDefinitionEditorComponent} from './units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-editor.component';
 import {UnitAnalyticsComponent} from './units/states/analytics/unit-analytics-route.component';
+import {UnitGroupsStateComponent} from './units/states/groups/groups.component';
 import {UnitTaskEditorComponent} from './units/states/edit/directives/unit-tasks-editor/unit-task-editor.component';
 import {CreateNewUnitModal} from './admin/modals/create-new-unit-modal/create-new-unit-modal.component';
 import {FUsersComponent} from './admin/states/f-users/f-users.component';
@@ -380,6 +381,10 @@ DoubtfireAngularJSModule.directive(
   'fUnitAnalytics',
   downgradeComponent({component: UnitAnalyticsComponent}),
 );
+DoubtfireAngularJSModule.directive(
+  'fUnitGroups',
+  downgradeComponent({component: UnitGroupsStateComponent}),
+);
 DoubtfireAngularJSModule.directive(
   'extensionComment',
   downgradeComponent({component: ExtensionCommentComponent}),
diff --git a/src/app/units/states/groups/groups.coffee b/src/app/units/states/groups/groups.coffee
index 90e10afbad..04a81d50f3 100644
--- a/src/app/units/states/groups/groups.coffee
+++ b/src/app/units/states/groups/groups.coffee
@@ -6,15 +6,10 @@ angular.module('doubtfire.units.states.groups', [])
   $stateProvider.state 'units/students/groups', {
     parent: 'units/index'
     url: '/students/groups'
-    templateUrl: "units/states/groups/groups.tpl.html"
-    controller: "UnitGroupsStateCtrl"
+    template: "<f-unit-groups [unit]='unit' [unit-role]='unitRole'></f-unit-groups>"
     data:
       task: "Student Groups"
       pageTitle: "_Home_"
       roleWhitelist: ['Tutor', 'Convenor', 'Admin', 'Auditor']
    }
 )
-.controller("UnitGroupsStateCtrl", ($scope) ->
-  # No controller needed if there is no groupwork
-  return unless $scope.unit.hasGroupwork()
-)
diff --git a/src/app/units/states/groups/groups.component.html b/src/app/units/states/groups/groups.component.html
new file mode 100644
index 0000000000..e819d02ab0
--- /dev/null
+++ b/src/app/units/states/groups/groups.component.html
@@ -0,0 +1,22 @@
+@if (unit.hasGroupwork()) {
+  <group-set-manager
+    class="row"
+    [unit]="unit"
+    [unitRole]="unitRole"
+    [selectedGroupSet]="selectedGroupSet">
+  </group-set-manager>
+} @else {
+  <div class="flex flex-col items-center justify-center gap-4 mt-8">
+    <mat-icon class="text-6xl text-gray-400" style="font-size: 64px; width: 64px; height: 64px;" aria-hidden="true">group</mat-icon>
+    <p class="text-xl font-medium text-gray-600">No Groupwork Enabled</p>
+    <p class="text-center text-gray-500 max-w-md">
+      There is no group work enabled for this unit. Convenors should create at
+      least one group set first for groups to be created. This can be found under
+      the groups tab in the unit administration settings.
+    </p>
+    <a mat-stroked-button [uiSref]="'units/admin'" [uiParams]="{unitId: unit.id}">
+      <mat-icon aria-hidden="true">settings</mat-icon>
+      Unit Administration
+    </a>
+  </div>
+}
diff --git a/src/app/units/states/groups/groups.component.scss b/src/app/units/states/groups/groups.component.scss
new file mode 100644
index 0000000000..3a7f92cf7f
--- /dev/null
+++ b/src/app/units/states/groups/groups.component.scss
@@ -0,0 +1 @@
+// No custom styles needed — layout handled via Tailwind/Angular Material utilities
diff --git a/src/app/units/states/groups/groups.component.ts b/src/app/units/states/groups/groups.component.ts
new file mode 100644
index 0000000000..0b26cde702
--- /dev/null
+++ b/src/app/units/states/groups/groups.component.ts
@@ -0,0 +1,13 @@
+import {Component, Input} from '@angular/core';
+import {Unit} from 'src/app/api/models/unit';
+import {UnitRole} from 'src/app/api/models/unit-role';
+
+@Component({
+  selector: 'f-unit-groups',
+  templateUrl: 'groups.component.html',
+  styleUrls: ['groups.component.scss'],
+})
+export class UnitGroupsStateComponent {
+  @Input() unit: Unit;
+  @Input() unitRole: UnitRole;
+}
diff --git a/src/app/units/states/groups/groups.tpl.html b/src/app/units/states/groups/groups.tpl.html
deleted file mode 100644
index 319f46e08f..0000000000
--- a/src/app/units/states/groups/groups.tpl.html
+++ /dev/null
@@ -1,22 +0,0 @@
-<div class="container" ng-if="unit.hasGroupwork()">
-  <group-set-manager
-    class="row"
-    unit="unit"
-    unit-role="unitRole"
-    selected-group-set="selectedGroupSet">
-  </group-set-manager>
-</div><!--/has-groupwork-->
-<div class="container" ng-hide="unit.hasGroupwork()">
-  <div class="large-notice-block">
-    <i class="fa fa-2x fa-users"></i>
-    <p>No Groupwork Enabled</p>
-  </div>
-  <div class="text-center col-sm-12 col-md-6 col-md-offset-3">
-    <p class="text-muted">
-      There is no group work enabled for this unit. Convenors should create at
-      least one group set first for groups to be created. This can be found under
-      the groups tab in the unit administration settings.
-    </p>
-    <a class="btn btn-default" ui-sref="units/admin({unitId: unit.id})">Unit Administration</a>
-  </div>
-</div><!--/no-groupwork-->