diff --git a/assets/images/icon-avatar-default-dark-24x24@2x.png b/assets/images/icon-avatar-default-dark-24x24@2x.png
new file mode 100644
index 0000000000..ea30e356ca
Binary files /dev/null and b/assets/images/icon-avatar-default-dark-24x24@2x.png differ
diff --git a/assets/images/icon-avatar-default-transparent-64x64@2x.png b/assets/images/icon-avatar-default-transparent-64x64@2x.png
new file mode 100644
index 0000000000..f435847af1
Binary files /dev/null and b/assets/images/icon-avatar-default-transparent-64x64@2x.png differ
diff --git a/frontend/pages/LoginPage/LoginPage.tsx b/frontend/pages/LoginPage/LoginPage.tsx
index 43415c977e..115398fce0 100644
--- a/frontend/pages/LoginPage/LoginPage.tsx
+++ b/frontend/pages/LoginPage/LoginPage.tsx
@@ -95,6 +95,21 @@ const LoginPage = ({ router, location }: ILoginPageProps) => {
     return false;
   };
 
+  const testGravatarAvailability = async () => {
+    try {
+      const response = await fetch("https://gravatar.com/avatar");
+      if (response.ok) {
+        localStorage.setItem("gravatar_available", "true");
+      } else {
+        localStorage.setItem("gravatar_available", "false");
+      }
+    } catch (error) {
+      localStorage.setItem("gravatar_available", "false");
+    }
+  };
+
+  testGravatarAvailability();
+
   const onSubmit = async (formData: ILoginData) => {
     const { DASHBOARD, RESET_PASSWORD } = paths;
 
diff --git a/frontend/utilities/constants.ts b/frontend/utilities/constants.ts
index 4970421e3f..10155cd146 100644
--- a/frontend/utilities/constants.ts
+++ b/frontend/utilities/constants.ts
@@ -16,6 +16,12 @@ export const DEFAULT_GRAVATAR_LINK =
 export const DEFAULT_GRAVATAR_LINK_DARK =
   "https://fleetdm.com/images/permanent/icon-avatar-default-dark-24x24%402x.png";
 
+export const DEFAULT_GRAVATAR_LINK_FALLBACK =
+  "/assets/images/icon-avatar-default-transparent-64x64%402x.png";
+
+export const DEFAULT_GRAVATAR_LINK_DARK_FALLBACK =
+  "/assets/images/icon-avatar-default-dark-24x24%402x.png";
+
 export const FREQUENCY_DROPDOWN_OPTIONS = [
   { value: 900, label: "Every 15 minutes" },
   { value: 3600, label: "Every hour" },
diff --git a/frontend/utilities/helpers.ts b/frontend/utilities/helpers.ts
index a187067094..b45cbe6215 100644
--- a/frontend/utilities/helpers.ts
+++ b/frontend/utilities/helpers.ts
@@ -40,7 +40,9 @@ import sortUtils from "utilities/sort";
 import {
   DEFAULT_EMPTY_CELL_VALUE,
   DEFAULT_GRAVATAR_LINK,
+  DEFAULT_GRAVATAR_LINK_FALLBACK,
   DEFAULT_GRAVATAR_LINK_DARK,
+  DEFAULT_GRAVATAR_LINK_DARK_FALLBACK,
   PLATFORM_LABEL_DISPLAY_TYPES,
 } from "utilities/constants";
 import { IScheduledQueryStats } from "interfaces/scheduled_query_stats";
@@ -50,14 +52,26 @@ const ADMIN_ATTRS = ["email", "name", "password", "password_confirmation"];
 
 export const addGravatarUrlToResource = (resource: any): any => {
   const { email } = resource;
+  const gravatarAvailable =
+    localStorage.getItem("gravatar_available") === "true";
 
   const emailHash = md5(email.toLowerCase());
-  const gravatar_url = `https://www.gravatar.com/avatar/${emailHash}?d=${encodeURIComponent(
-    DEFAULT_GRAVATAR_LINK
-  )}&size=200`;
-  const gravatar_url_dark = `https://www.gravatar.com/avatar/${emailHash}?d=${encodeURIComponent(
-    DEFAULT_GRAVATAR_LINK_DARK
-  )}&size=200`;
+
+  let gravatar_url;
+  let gravatar_url_dark;
+
+  if (gravatarAvailable) {
+    gravatar_url = `https://www.gravatar.com/avatar/${emailHash}?d=${encodeURIComponent(
+      DEFAULT_GRAVATAR_LINK
+    )}&size=200`;
+    gravatar_url_dark = `https://www.gravatar.com/avatar/${emailHash}?d=${encodeURIComponent(
+      DEFAULT_GRAVATAR_LINK_DARK
+    )}&size=200`;
+  } else {
+    gravatar_url = DEFAULT_GRAVATAR_LINK_FALLBACK;
+    gravatar_url_dark = DEFAULT_GRAVATAR_LINK_DARK_FALLBACK;
+  }
+
   return {
     ...resource,
     gravatar_url,