diff --git a/src/Components/AsyncContent.tsx b/src/Components/AsyncContent.tsx
deleted file mode 100644
index 86b5535..0000000
--- a/src/Components/AsyncContent.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from "react";
-import { ONSLoadingPanel, ONSPanel } from "blaise-design-system-react-components";
-import { AsyncState, hasErrored, isLoading } from "../hooks/useAsyncRequest";
-
-interface AsyncContentProps<T> {
-  content: AsyncState<T>;
-  children: (content: T) => React.ReactNode;
-}
-
-export default function AsyncContent<T>({ content, children }: AsyncContentProps<T>) {
-    if (isLoading(content)) {
-        return <ONSLoadingPanel />;
-    }
-
-    if (hasErrored(content)) {
-        return <ONSPanel status="error">{content.error}</ONSPanel>;
-    }
-
-    return <>{children(content.data)}</>;
-}
\ No newline at end of file
diff --git a/src/hooks/useAsyncRequest.ts b/src/hooks/useAsyncRequest.ts
deleted file mode 100644
index 14ab837..0000000
--- a/src/hooks/useAsyncRequest.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import { useEffect, useState } from "react";
-
-type Loading = {
-  state: "loading";
-};
-
-type Errored = {
-  error: string;
-  state: "errored";
-};
-
-type Succeeded<T> = {
-  data: T;
-  state: "succeeded";
-};
-
-export type AsyncState<T> = Loading | Errored | Succeeded<T>;
-
-export function isLoading<T>(state: AsyncState<T>): state is Loading {
-    return state.state === "loading";
-}
-
-export function hasErrored<T>(state: AsyncState<T>): state is Errored {
-    return state.state === "errored";
-}
-
-function loading(): Loading {
-    return { state: "loading" };
-}
-
-function errored(error: string): Errored {
-    return { state: "errored", error };
-}
-
-function succeeded<T>(data: T): Succeeded<T> {
-    return { state: "succeeded", data };
-}
-
-export function useAsyncRequest<T>(request: () => Promise<T>) {
-    const [state, setState] = useState<AsyncState<T>>(loading());
-
-    useEffect(() => {
-        setState(loading());
-        request()
-            .then((response) => setState(succeeded(response)))
-            .catch((error) => setState(errored(error.message)));
-    }, []);
-
-    return state;
-}
\ No newline at end of file
diff --git a/src/pages/users/UserProfileEdits/UserProfile.tsx b/src/pages/users/UserProfileEdits/UserProfile.tsx
index c01e349..4fa447a 100644
--- a/src/pages/users/UserProfileEdits/UserProfile.tsx
+++ b/src/pages/users/UserProfileEdits/UserProfile.tsx
@@ -1,22 +1,42 @@
-import React from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { Link, useLocation, useParams } from "react-router-dom";
 import Breadcrumbs from "../../../Components/Breadcrumbs";
-import AsyncContent from "../../../Components/AsyncContent";
-import { useAsyncRequest } from "../../../hooks/useAsyncRequest";
 import ProfileTable from "./ProfileTable";
 import { getUser } from "../../../api/http";
-import { ONSPanel } from "blaise-design-system-react-components";
+import { ONSPanel, ONSLoadingPanel, ONSErrorPanel } from "blaise-design-system-react-components";
 import { GetUserResponse } from "../../../Interfaces/usersPage";
 import UserSignInErrorPanel from "../../../Components/UserSignInErrorPanel";
 
 export default function UserProfile() {
-    const { user } = useParams();
+    const { user: viewedUsername } = useParams();
     const { state } = useLocation();
     const { currentUser, updatedPanel } = state || { currentUser: null, updatedPanel: null };
-    const userDetails = useAsyncRequest<GetUserResponse>(() => getUser(user as string));
+    const [viewedUserDetails, setViewedUserDetails] = useState<GetUserResponse | null>(null);
+    const [loading, setLoading] = useState<boolean>(true);
+    const [error, setError] = useState<string>("");
+
+    const fetchUserDetails = async () => {
+        setLoading(true);
+        try {
+            const data = await getUser(viewedUsername as string);
+            setViewedUserDetails(data);
+            setError("");
+        } catch (err) {
+            setError("Unable to load user details, please try again. If this continues, please the contact service desk.");
+            setViewedUserDetails(null);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    useEffect(() => {
+        if (viewedUsername) {
+            fetchUserDetails();
+        }
+    }, [viewedUsername]);
 
     if (!currentUser) {
-        return (<UserSignInErrorPanel/>);
+        return <UserSignInErrorPanel />;
     }
 
     return (
@@ -32,9 +52,14 @@ export default function UserProfile() {
                     <div className="ons-panel__body">{updatedPanel.message}</div>
                 </ONSPanel>)
                 : null }
-            <AsyncContent content={userDetails}>
-                {(userDetails) => <ProfileTable currentUser={currentUser} viewedUserDetails={userDetails} />}
-            </AsyncContent>
+            {error && <ONSPanel status={"error"}>
+                <div className="ons-panel__body">{error}</div>
+            </ONSPanel>}
+            {loading ? (
+                <ONSLoadingPanel />
+            ) : (
+                viewedUserDetails && <ProfileTable currentUser={currentUser} viewedUserDetails={viewedUserDetails} />
+            )}
         </>
     );
 }
\ No newline at end of file