diff --git a/ui/src/app/(index)/page.tsx b/ui/src/app/(index)/page.tsx
index 53d60650..e9f8b9a5 100644
--- a/ui/src/app/(index)/page.tsx
+++ b/ui/src/app/(index)/page.tsx
@@ -3,10 +3,10 @@ import BeforeLogin from '@/components/home/BeforeLogin';
 import AfterLogin from '@/components/home/AfterLogin';
 import {getCurrentUser} from '@/access/AuthenticationService';
 import Role from '@/access/Role';
-import LoginButton from "@/components/home/LoginButton";
-import {getAnnouncements, getNumberOfGroupings, getNumberOfMemberships} from "@/services/GroupingsApiService";
-import React from "react";
-import Announcement from "@/components/home/Announcement";
+import LoginButton from '@/components/home/LoginButton';
+import {getAnnouncements, getNumberOfGroupings, getNumberOfMemberships} from '@/services/GroupingsApiService';
+import React from 'react';
+import Announcement from '@/components/home/Announcement';
 
 const Home = async () => {
     const [currentUser, numberOfGroupings, numberOfMemberships, announcements] = await Promise.all([
@@ -16,15 +16,21 @@ const Home = async () => {
         getAnnouncements()
     ]);
 
-    const handleAnnouncements = () => announcements.hasOwnProperty("announcements") ? announcements.announcements
-        .filter((announcement) => announcement.state === "Active")
-        .map((announcement) => announcement.message) : [];
+    const handleAnnouncements = () => {
+        if (Object.prototype.hasOwnProperty.call(announcements, 'announcements')) {
+            return announcements.announcements
+                .filter((announcement) => announcement.state !== 'Active')
+                .map((announcement) => announcement.message);
+        } else {
+            return [];
+        }
+    };
 
     return (
         <main>
             <div className="container mt-5 mb-5">
-                {handleAnnouncements().map((announcement: String) => (
-                    <div>
+                {handleAnnouncements().map((announcement: string, index: number) => (
+                    <div key={index}>
                         <Announcement announcement={announcement}/>
                     </div>
                 ))}
@@ -60,8 +66,10 @@ const Home = async () => {
             </div>
 
             {currentUser && currentUser.roles.includes(Role.UH) ? (
-                <AfterLogin currentUser={currentUser} numberOfGroupings={numberOfGroupings}
-                            numberOfMemberships={numberOfMemberships}/>
+                <AfterLogin
+                    currentUser={currentUser}
+                    numberOfGroupings={numberOfGroupings}
+                    numberOfMemberships={numberOfMemberships}/>
             ) : (
                 <BeforeLogin/>
             )}
diff --git a/ui/src/components/UHGroupingsInfo.tsx b/ui/src/components/UHGroupingsInfo.tsx
index 7e2c9eee..88aa7930 100644
--- a/ui/src/components/UHGroupingsInfo.tsx
+++ b/ui/src/components/UHGroupingsInfo.tsx
@@ -1,10 +1,8 @@
-import React from "react";
-import Image from "next/image";
-import About from "@/app/about/page";
-import AboutInfoItem from "@/components/AboutInfoItem";
+import React from 'react';
+import AboutInfoItem from '@/components/AboutInfoItem';
 
 const UHGroupingsInfo = ({h1Color, h1Weight, AboutInfoItemSize}: { h1Color: string, h1Weight: string, AboutInfoItemSize?: string }) => {
-    const textSize = AboutInfoItemSize ? AboutInfoItemSize : "text-base";
+    const textSize = AboutInfoItemSize ? AboutInfoItemSize : 'text-base';
     return (
         <div>
             <div className="bg-seafoam pt-10 pb-10">
@@ -20,17 +18,20 @@ const UHGroupingsInfo = ({h1Color, h1Weight, AboutInfoItemSize}: { h1Color: stri
                             pSize={textSize}
                             src={"/uhgroupings/cogs.svg"}
                             alt={"Cogs icon"}
-                            description={"Create groupings, manage grouping memberships, control members' self-service options, designate sync destinations, and more."}/>
+                            description={"Create groupings, manage grouping memberships, control members' " +
+                                "self-service options, designate sync destinations, and more."}/>
                         <AboutInfoItem
                             pSize={textSize}
                             src={"/uhgroupings/id-email.svg"}
                             alt={"Email icon"}
-                            description={"Synchronize groupings email LISTSERV lists, attributes for access control via CAS and LDAP, etc.."}/>
+                            description={"Synchronize groupings email LISTSERV lists," +
+                                " attributes for access control via CAS and LDAP, etc.."}/>
                         <AboutInfoItem
                             pSize={textSize}
                             src={"/uhgroupings/watch.svg"}
                             alt={"Watch icon"}
-                            description={"Leverage group data from official sources, which can substantially reduce the manual overhead of membership management."}/>
+                            description={"Leverage group data from official sources," +
+                                " which can substantially reduce the manual overhead of membership management."}/>
                     </div>
                 </div>
             </div>
diff --git a/ui/src/components/home/AfterLogin.tsx b/ui/src/components/home/AfterLogin.tsx
index c8ad17f0..9bcaf885 100644
--- a/ui/src/components/home/AfterLogin.tsx
+++ b/ui/src/components/home/AfterLogin.tsx
@@ -1,22 +1,23 @@
-import User from "@/access/User";
-import Role from "@/access/Role";
+import User from '@/access/User';
+import Role from '@/access/Role';
 import Image from 'next/image';
-import React from "react";
-import {KeyRound} from "lucide-react";
-import UserInfoItem from "@/components/home/UserInfoItem";
+import React from 'react';
+import {KeyRound} from 'lucide-react';
+import UserInfoItem from '@/components/home/UserInfoItem';
 
-const AfterLogin = ({
-                        currentUser,
-                        numberOfGroupings,
-                        numberOfMemberships
-                    }: {
-    currentUser: User,
-    numberOfGroupings: number,
-    numberOfMemberships: number
-}) => {
+const AfterLogin = (
+    {
+        currentUser,
+        numberOfGroupings,
+        numberOfMemberships
+    }: {
+        currentUser: User,
+        numberOfGroupings: number,
+        numberOfMemberships: number
+    }) => {
     const isAdmin = currentUser.roles.includes(Role.ADMIN);
     const isOwner = currentUser.roles.includes(Role.OWNER);
-    const getHighestRole = () => isAdmin ? "Admin" : isOwner ? "Owner" : "Member";
+    const getHighestRole = () => isAdmin ? 'Admin' : isOwner ? 'Owner' : 'Member';
 
     return (
         <main>
@@ -24,8 +25,7 @@ const AfterLogin = ({
                 <div className="container bg-seafoam pt-7 pb-7">
                     <div className="grid sm:grid-cols-12 text-center justify-center items-center gap-4">
                         <div className="sm:col-span-3 md:col-span-2">
-                            <div
-                                className="flex justify-center items-center rounded-full h-[100px] w-[100px] bg-white mx-auto relative lg:ml-0">
+                            <div className="flex justify-center items-center rounded-full h-[100px] w-[100px] bg-white mx-auto relative lg:ml-0">
                                 <Image
                                     src="/uhgroupings/user-solid.svg"
                                     alt="user-solid"
@@ -50,11 +50,11 @@ const AfterLogin = ({
 
             <div className="container grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8 mt-10 mb-10">
                 {isAdmin && <UserInfoItem
-                    alt={"key-soild"}
-                    src={"uhgroupings/key-solid.svg"}
+                    alt={'key-soild'}
+                    src={'uhgroupings/key-solid.svg'}
                     number={0}
                     show={false}
-                    title={"Administration"}
+                    title={'Administration'}
                     description={"Manage the list of Administrators for this service. Search for and manage any grouping on behalf of the owner."}
                     link={"/admin"}
                     text={"Admin"}
diff --git a/ui/src/components/home/BeforeLogin.tsx b/ui/src/components/home/BeforeLogin.tsx
index 51fd2e3f..c8810ac4 100644
--- a/ui/src/components/home/BeforeLogin.tsx
+++ b/ui/src/components/home/BeforeLogin.tsx
@@ -7,7 +7,7 @@ import UHGroupingsInfo from '@/components/UHGroupingsInfo';
 const BeforeLogin = () => {
     return (
         <main className="bg-seafoam pb-10">
-            <UHGroupingsInfo h1Color={"text-text-color"} AboutInfoItemSize={"text-1.2"} h1Weight={"font-light"}/>
+            <UHGroupingsInfo h1Color={'text-text-color'} AboutInfoItemSize={'text-1.2'} h1Weight={'font-light'}/>
             <div className="row">
                 <div className="text-center">
                     <LearnMoreButton/>
diff --git a/ui/src/components/home/UserInfoItem.tsx b/ui/src/components/home/UserInfoItem.tsx
index 5ed034a7..750d1cc4 100644
--- a/ui/src/components/home/UserInfoItem.tsx
+++ b/ui/src/components/home/UserInfoItem.tsx
@@ -1,20 +1,28 @@
 import React from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
-import {Button} from "@/components/ui/button";
+import {Button} from '@/components/ui/button';
 
 const UserInfoItem = (
-    {alt, src, number, show, title, description, link, text}:
-        {
-            alt: string,
-            src: string,
-            number: number,
-            show: boolean,
-            title: string,
-            description: string,
-            link: string,
-            text: string
-        }) => {
+    {
+        alt,
+        src,
+        number,
+        show,
+        title,
+        description,
+        link,
+        text
+    }: {
+        alt: string,
+        src: string,
+        number: number,
+        show: boolean,
+        title: string,
+        description: string,
+        link: string,
+        text: string
+    }) => {
     return (
         <div className="flex flex-col justify-between">
             <div>