diff --git a/ui/src/app/(index)/page.tsx b/ui/src/app/(index)/page.tsx
index e9f8b9a5..adbde1a3 100644
--- a/ui/src/app/(index)/page.tsx
+++ b/ui/src/app/(index)/page.tsx
@@ -5,7 +5,6 @@ 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';
 
 const Home = async () => {
@@ -16,23 +15,16 @@ const Home = async () => {
         getAnnouncements()
     ]);
 
-    const handleAnnouncements = () => {
-        if (Object.prototype.hasOwnProperty.call(announcements, 'announcements')) {
-            return announcements.announcements
-                .filter((announcement) => announcement.state !== 'Active')
-                .map((announcement) => announcement.message);
-        } else {
-            return [];
-        }
-    };
+    const activeAnnouncements = announcements.announcements
+        .filter((announcement) => announcement.state === 'Active')
+        .map((announcement) => announcement.message);
+
 
     return (
         <main>
             <div className="container mt-5 mb-5">
-                {handleAnnouncements().map((announcement: string, index: number) => (
-                    <div key={index}>
-                        <Announcement announcement={announcement}/>
-                    </div>
+                {activeAnnouncements.map((announcement: string, index: number) => (
+                    <Announcement announcement={announcement} key={index}/>
                 ))}
                 <div className="flex flex-row py-8 px-0.5 justify-between">
                     <div className="md:w-7/12 flex items-center">
@@ -48,9 +40,8 @@ const Home = async () => {
 
                             <p className="text-xl mt-1"> Manage your groupings in one place, use them in many.</p>
                             <div className="mt-4">
-                                {currentUser ? (
-                                    <LoginButton currentUser={currentUser}/>
-                                ) : null}
+                                {!currentUser.roles.includes(Role.UH) &&
+                                    <LoginButton currentUser={currentUser}/>}
                             </div>
                         </div>
                     </div>
@@ -65,7 +56,7 @@ const Home = async () => {
                 </div>
             </div>
 
-            {currentUser && currentUser.roles.includes(Role.UH) ? (
+            {currentUser.roles.includes(Role.UH) ? (
                 <AfterLogin
                     currentUser={currentUser}
                     numberOfGroupings={numberOfGroupings}
diff --git a/ui/src/components/AboutInfoItem.tsx b/ui/src/components/AboutInfoItem.tsx
index 07f8d051..2b685a93 100644
--- a/ui/src/components/AboutInfoItem.tsx
+++ b/ui/src/components/AboutInfoItem.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import Image from 'next/image';
 
 const AboutInfoItem = ({src, alt, description, pSize}: {
diff --git a/ui/src/components/UHGroupingsInfo.tsx b/ui/src/components/UHGroupingsInfo.tsx
index 36b651e1..734b1ee1 100644
--- a/ui/src/components/UHGroupingsInfo.tsx
+++ b/ui/src/components/UHGroupingsInfo.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import AboutInfoItem from '@/components/AboutInfoItem';
 
 
diff --git a/ui/src/components/home/AfterLogin.tsx b/ui/src/components/home/AfterLogin.tsx
index 2b7cf41e..1a878bb0 100644
--- a/ui/src/components/home/AfterLogin.tsx
+++ b/ui/src/components/home/AfterLogin.tsx
@@ -1,7 +1,6 @@
 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';
 
@@ -17,7 +16,15 @@ const AfterLogin = (
     }) => {
     const isAdmin = currentUser.roles.includes(Role.ADMIN);
     const isOwner = currentUser.roles.includes(Role.OWNER);
-    const getHighestRole = () => isAdmin ? 'Admin' : isOwner ? 'Owner' : 'Member';
+    const getHighestRole = () => {
+        if (isAdmin) {
+            return 'Admin';
+        } else if (isOwner) {
+            return 'Owner';
+        } else {
+            return 'Member';
+        }
+    }
 
     return (
         <main>
diff --git a/ui/src/components/home/Announcement.tsx b/ui/src/components/home/Announcement.tsx
index ac79ae73..97b8cbae 100644
--- a/ui/src/components/home/Announcement.tsx
+++ b/ui/src/components/home/Announcement.tsx
@@ -1,26 +1,15 @@
 'use client';
-import React, {useState} from 'react';
 import {Alert, AlertDescription} from '@/components/ui/alert';
 
 const Announcement = ({announcement}: { announcement: string }
 ) => {
-    const [open, setOpen] = useState(true);
-
-    const handleClose = () => {
-        setOpen(false);
-    };
-
+    
     return (
-        open && (
-            <Alert className="bg-[#fff2b2] mb-3">
-                <AlertDescription className="px-2">
-                    {announcement}
-                </AlertDescription>
-                <button onClick={handleClose} className="absolute top-0 right-0 m-3 text-xl">
-                    <span>&times;</span>
-                </button>
-            </Alert>
-        )
+        <Alert className="bg-[#fff2b2] mb-2">
+            <AlertDescription>
+                {announcement}
+            </AlertDescription>
+        </Alert>
     );
 };
 
diff --git a/ui/src/components/home/BeforeLogin.tsx b/ui/src/components/home/BeforeLogin.tsx
index c8810ac4..5488e670 100644
--- a/ui/src/components/home/BeforeLogin.tsx
+++ b/ui/src/components/home/BeforeLogin.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import {Button} from '@/components/ui/button';
 import Link from 'next/link';
 import {ArrowRight} from 'lucide-react';
diff --git a/ui/src/components/home/UserInfoItem.tsx b/ui/src/components/home/UserInfoItem.tsx
index badcde4e..3362aa67 100644
--- a/ui/src/components/home/UserInfoItem.tsx
+++ b/ui/src/components/home/UserInfoItem.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
 import {Button} from '@/components/ui/button';
@@ -35,7 +34,7 @@ const UserInfoItem = (
                         style={{maxWidth: alt === 'id-card' ? 54 : 48, height: 'auto'}}
                         className="mr-5 mb-4"
                     />
-                    {show && <span className="text-2.5 text-text-primary">{number}</span>}
+                    {show && <span className="text-2.5 text-text-color">{number}</span>}
                 </div>
                 <h2 className="text-2xl text-text-color mb-2">{title}</h2>
                 <p className="mb-4">{description}</p>