diff --git a/app/web/src/components/IdeContainer/IdeContainer.tsx b/app/web/src/components/IdeContainer/IdeContainer.tsx
index 9d0ce9f..187ad89 100644
--- a/app/web/src/components/IdeContainer/IdeContainer.tsx
+++ b/app/web/src/components/IdeContainer/IdeContainer.tsx
@@ -21,7 +21,7 @@ const SmallLoadingPing = (
   </div>
 )
 
-const BigLoadingPing = () => (
+export const BigLoadingPing = (
   <div className="inset-0 absolute flex items-center justify-center bg-ch-gray-800">
     <div className="h-16 w-16 bg-pink-600 rounded-full animate-ping"></div>
   </div>
diff --git a/app/web/src/components/IdeViewer/IdeViewer.tsx b/app/web/src/components/IdeViewer/IdeViewer.tsx
index 305c2f4..38b24b9 100644
--- a/app/web/src/components/IdeViewer/IdeViewer.tsx
+++ b/app/web/src/components/IdeViewer/IdeViewer.tsx
@@ -163,7 +163,7 @@ const IdeViewer = ({ Loading }) => {
   const indigo900 = '#312E81'
   return (
     <div className="relative h-full bg-ch-gray-800">
-      {state.isLoading && <Loading />}
+      {state.isLoading && Loading}
       {image && (
         <div
           className={`absolute inset-0 transition-opacity duration-500 ${
diff --git a/app/web/src/components/ProfileSlashLogin/ProfileSlashLogin.tsx b/app/web/src/components/ProfileSlashLogin/ProfileSlashLogin.tsx
index afd3d9a..eec73a6 100644
--- a/app/web/src/components/ProfileSlashLogin/ProfileSlashLogin.tsx
+++ b/app/web/src/components/ProfileSlashLogin/ProfileSlashLogin.tsx
@@ -7,6 +7,7 @@ import Popover from '@material-ui/core/Popover'
 import useUser from 'src/helpers/hooks/useUser'
 import ImageUploader from 'src/components/ImageUploader'
 import LoginModal from 'src/components/LoginModal'
+import Gravatar from 'src/components//Gravatar/Gravatar'
 
 const ProfileSlashLogin = () => {
   const { logOut, isAuthenticated, currentUser, client } = useAuth()
@@ -43,21 +44,14 @@ const ProfileSlashLogin = () => {
     <div className="flex-shrink-0">
       {isAuthenticated ? (
         <div
-          className="h-8 w-8 border-2 rounded-full border-gray-200 relative text-indigo-200"
+          className="h-8 w-8 relative text-indigo-200"
           aria-describedby={popoverId}
         >
           <button
             className="absolute inset-0 w-full h-full"
             onClick={togglePopover}
           >
-            {!loading && (
-              <ImageUploader
-                className="rounded-full object-cover"
-                aspectRatio={1}
-                imageUrl={user?.image}
-                width={80}
-              />
-            )}
+            {!loading && <Gravatar image={user?.image} />}
           </button>
         </div>
       ) : (
diff --git a/app/web/src/components/ProfileViewer/ProfileViewer.tsx b/app/web/src/components/ProfileViewer/ProfileViewer.tsx
index 87ede95..4caa79f 100644
--- a/app/web/src/components/ProfileViewer/ProfileViewer.tsx
+++ b/app/web/src/components/ProfileViewer/ProfileViewer.tsx
@@ -1,12 +1,7 @@
 import { lazy, Suspense } from 'react'
 const IdeViewer = lazy(() => import('src/components/IdeViewer/IdeViewer'))
 import { use3dViewerResize } from 'src/helpers/hooks/use3dViewerResize'
-
-const BigLoadingPing = () => (
-  <div className="inset-0 absolute flex items-center justify-center bg-ch-gray-800">
-    <div className="h-16 w-16 bg-pink-600 rounded-full animate-ping"></div>
-  </div>
-)
+import { BigLoadingPing } from 'src/components/IdeContainer/IdeContainer'
 
 const ProfileViewer = () => {
   const { viewerDomRef } = use3dViewerResize()