diff --git a/web/apps/accounts/src/pages/_app.tsx b/web/apps/accounts/src/pages/_app.tsx
index 31ceecf32d..a9a64937cc 100644
--- a/web/apps/accounts/src/pages/_app.tsx
+++ b/web/apps/accounts/src/pages/_app.tsx
@@ -1,5 +1,6 @@
 import { staticAppTitle } from "@/base/app";
 import { CustomHead } from "@/base/components/Head";
+import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
 import { AppNavbar } from "@/base/components/Navbar";
 import { setupI18n } from "@/base/i18n";
 import { disableDiskLogs } from "@/base/log";
@@ -7,7 +8,6 @@ import { logUnhandledErrorsAndRejections } from "@/base/log-web";
 import { Overlay } from "@ente/shared/components/Container";
 import DialogBoxV2 from "@ente/shared/components/DialogBoxV2";
 import type { DialogBoxAttributesV2 } from "@ente/shared/components/DialogBoxV2/types";
-import EnteSpinner from "@ente/shared/components/EnteSpinner";
 import { getTheme } from "@ente/shared/themes";
 import { THEME_COLOR } from "@ente/shared/themes/constants";
 import { CssBaseline } from "@mui/material";
@@ -71,7 +71,7 @@ const App: React.FC<AppProps> = ({ Component, pageProps }) => {
                                 backgroundColor: theme.colors.background.base,
                             })}
                         >
-                            <EnteSpinner />
+                            <ActivityIndicator />
                         </Overlay>
                     )}
                     {showNavbar && <AppNavbar />}
diff --git a/web/apps/accounts/src/pages/passkeys/index.tsx b/web/apps/accounts/src/pages/passkeys/index.tsx
index b1f54403fc..504e79dec9 100644
--- a/web/apps/accounts/src/pages/passkeys/index.tsx
+++ b/web/apps/accounts/src/pages/passkeys/index.tsx
@@ -5,7 +5,6 @@ import log from "@/base/log";
 import { ensure } from "@/utils/ensure";
 import { CenteredFlex } from "@ente/shared/components/Container";
 import FormPaper from "@ente/shared/components/Form/FormPaper";
-import InfoItem from "@ente/shared/components/Info/InfoItem";
 import { EnteMenuItem } from "@ente/shared/components/Menu/EnteMenuItem";
 import SingleInputForm from "@ente/shared/components/SingleInputForm";
 import { formatDateTimeFull } from "@ente/shared/time/format";
@@ -303,15 +302,9 @@ const ManagePasskeyDrawer: React.FC<ManagePasskeyDrawerProps> = ({
                             title={t("manage_passkey")}
                             onRootClose={onClose}
                         />
-                        <InfoItem
-                            icon={<CalendarTodayIcon />}
-                            title={t("CREATED_AT")}
-                            caption={formatDateTimeFull(
-                                passkey.createdAt / 1000,
-                            )}
-                            loading={false}
-                            hideEditOption
-                        />
+                        <CreatedAtEntry>
+                            {formatDateTimeFull(passkey.createdAt / 1000)}
+                        </CreatedAtEntry>
                         <MenuItemGroup>
                             <EnteMenuItem
                                 onClick={() => {
@@ -348,6 +341,18 @@ const ManagePasskeyDrawer: React.FC<ManagePasskeyDrawerProps> = ({
     );
 };
 
+const CreatedAtEntry: React.FC<React.PropsWithChildren> = ({ children }) => (
+    <Box sx={{ display: "flex", alignItems: "center", gap: 0.5, pb: 1 }}>
+        <CalendarTodayIcon color="secondary" sx={{ m: "16px" }} />
+        <Box py={0.5}>
+            <Typography>{t("CREATED_AT")}</Typography>
+            <Typography variant="small" color="text.muted">
+                {children}
+            </Typography>
+        </Box>
+    </Box>
+);
+
 interface RenamePasskeyDialogProps {
     /** If `true`, then the dialog is shown. */
     open: boolean;
diff --git a/web/apps/accounts/src/pages/passkeys/verify.tsx b/web/apps/accounts/src/pages/passkeys/verify.tsx
index a533d0f645..196682be28 100644
--- a/web/apps/accounts/src/pages/passkeys/verify.tsx
+++ b/web/apps/accounts/src/pages/passkeys/verify.tsx
@@ -1,10 +1,10 @@
+import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
 import { FocusVisibleButton } from "@/base/components/mui/FocusVisibleButton";
 import log from "@/base/log";
 import type { TwoFactorAuthorizationResponse } from "@/base/types/credentials";
 import { ensure } from "@/utils/ensure";
 import { nullToUndefined } from "@/utils/transform";
 import { VerticallyCentered } from "@ente/shared/components/Container";
-import EnteSpinner from "@ente/shared/components/EnteSpinner";
 import InfoIcon from "@mui/icons-material/Info";
 import KeyIcon from "@mui/icons-material/Key";
 import { Paper, Typography, styled } from "@mui/material";
@@ -272,7 +272,7 @@ const redirectToURL = (url: URL) => {
 const Loading: React.FC = () => {
     return (
         <VerticallyCentered>
-            <EnteSpinner />
+            <ActivityIndicator />
         </VerticallyCentered>
     );
 };
diff --git a/web/apps/auth/public/images/auth/192.png b/web/apps/auth/public/images/auth/192.png
deleted file mode 100644
index 7931c4e4e9..0000000000
Binary files a/web/apps/auth/public/images/auth/192.png and /dev/null differ
diff --git a/web/apps/auth/public/images/auth/256.png b/web/apps/auth/public/images/auth/256.png
deleted file mode 100644
index a58c577f9d..0000000000
Binary files a/web/apps/auth/public/images/auth/256.png and /dev/null differ
diff --git a/web/apps/auth/public/images/auth/512.png b/web/apps/auth/public/images/auth/512.png
deleted file mode 100644
index 446b463274..0000000000
Binary files a/web/apps/auth/public/images/auth/512.png and /dev/null differ
diff --git a/web/apps/auth/public/manifest.json b/web/apps/auth/public/manifest.json
deleted file mode 100644
index 1190f96815..0000000000
--- a/web/apps/auth/public/manifest.json
+++ /dev/null
@@ -1,39 +0,0 @@
-{
-    "short_name": "ente Auth",
-    "name": "ente Auth | encrypted 2FA app",
-    "icons": [
-        {
-            "src": "/images/auth/192.png",
-            "type": "image/png",
-            "sizes": "192x192"
-        },
-        {
-            "src": "/images/auth/256.png",
-            "type": "image/png",
-            "sizes": "256x256"
-        },
-        {
-            "src": "/images/auth/512.png",
-            "type": "image/png",
-            "sizes": "512x512"
-        }
-    ],
-    "start_url": "/",
-    "background_color": "#191919",
-    "display": "standalone",
-    "scope": "/",
-    "theme_color": "#111",
-    "description": "Open-source 2FA app with end-to-end encrypted backups",
-    "prefer_related_applications": true,
-    "related_applications": [
-        {
-            "platform": "play",
-            "url": "https://play.google.com/store/apps/details?id=io.ente.auth",
-            "id": "io.ente.photos"
-        },
-        {
-            "platform": "itunes",
-            "url": "https://apps.apple.com/in/app/ente-photos/id6444121398"
-        }
-    ]
-}
\ No newline at end of file
diff --git a/web/apps/auth/public/offline.html b/web/apps/auth/public/offline.html
deleted file mode 100644
index 50d7ed6257..0000000000
--- a/web/apps/auth/public/offline.html
+++ /dev/null
@@ -1,59 +0,0 @@
-<!DOCTYPE html>
-<html>
-    <head>
-        <title>ente Auth</title>
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <style>
-            * {
-                box-sizing: border-box;
-            }
-            body {
-                background-color: #252525;
-                padding: 0;
-                margin: 0;
-                height: 100vh;
-                display: flex;
-                flex-direction: column;
-                color: #fff;
-            }
-            nav {
-                background-color: #171717;
-                height: 64px;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                box-shadow: rgb(0 0 0 / 70%) 0px 0px 5px;
-            }
-
-            nav > img {
-                height: 24px;
-                padding: 3px;
-                margin: 0 auto;
-            }
-
-            body > div {
-                flex: 1;
-                padding: 10px;
-                text-align: center;
-                max-width: 1000px;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                flex-direction: column;
-                margin: 0 auto;
-            }
-            h2 {
-                margin-top: 0;
-            }
-        </style>
-    </head>
-    <body>
-        <nav>
-            <img src="/images/ente.svg" />
-        </nav>
-        <div>
-            <h2>seems like you are offline :(</h2>
-            <span>please check your internet connection</span>
-        </div>
-    </body>
-</html>
diff --git a/web/apps/auth/src/pages/_app.tsx b/web/apps/auth/src/pages/_app.tsx
index 415264fcdb..8474047c72 100644
--- a/web/apps/auth/src/pages/_app.tsx
+++ b/web/apps/auth/src/pages/_app.tsx
@@ -2,6 +2,7 @@ import { accountLogout } from "@/accounts/services/logout";
 import type { AccountsContextT } from "@/accounts/types/context";
 import { clientPackageName, staticAppTitle } from "@/base/app";
 import { CustomHead } from "@/base/components/Head";
+import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
 import { AppNavbar } from "@/base/components/Navbar";
 import { setupI18n } from "@/base/i18n";
 import {
@@ -12,7 +13,6 @@ import { ensure } from "@/utils/ensure";
 import { Overlay } from "@ente/shared/components/Container";
 import DialogBoxV2 from "@ente/shared/components/DialogBoxV2";
 import type { DialogBoxAttributesV2 } from "@ente/shared/components/DialogBoxV2/types";
-import EnteSpinner from "@ente/shared/components/EnteSpinner";
 import { MessageContainer } from "@ente/shared/components/MessageContainer";
 import { useLocalState } from "@ente/shared/hooks/useLocalState";
 import HTTPService from "@ente/shared/network/HTTPService";
@@ -183,7 +183,7 @@ const App: React.FC<AppProps> = ({ Component, pageProps }) => {
                                 backgroundColor: theme.colors.background.base,
                             })}
                         >
-                            <EnteSpinner />
+                            <ActivityIndicator />
                         </Overlay>
                     )}
                     {isI18nReady && (
diff --git a/web/apps/auth/src/pages/auth.tsx b/web/apps/auth/src/pages/auth.tsx
index 1360ee1cec..b080fd4ab8 100644
--- a/web/apps/auth/src/pages/auth.tsx
+++ b/web/apps/auth/src/pages/auth.tsx
@@ -1,12 +1,12 @@
 import { stashRedirect } from "@/accounts/services/redirect";
+import { EnteLogo } from "@/base/components/EnteLogo";
+import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
 import { NavbarBase } from "@/base/components/Navbar";
 import { ensure } from "@/utils/ensure";
 import {
     HorizontalFlex,
     VerticallyCentered,
 } from "@ente/shared/components/Container";
-import { EnteLogo } from "@ente/shared/components/EnteLogo";
-import EnteSpinner from "@ente/shared/components/EnteSpinner";
 import { sessionExpiredDialogAttributes } from "@ente/shared/components/LoginComponents";
 import OverflowMenu from "@ente/shared/components/OverflowMenu/menu";
 import { OverflowMenuOption } from "@ente/shared/components/OverflowMenu/option";
@@ -68,7 +68,7 @@ const Page: React.FC = () => {
     if (!hasFetched) {
         return (
             <VerticallyCentered>
-                <EnteSpinner />
+                <ActivityIndicator />
             </VerticallyCentered>
         );
     }
diff --git a/web/apps/auth/src/pages/share.tsx b/web/apps/auth/src/pages/share.tsx
index b023acaed6..97d32e415d 100644
--- a/web/apps/auth/src/pages/share.tsx
+++ b/web/apps/auth/src/pages/share.tsx
@@ -1,5 +1,5 @@
+import { EnteLogo } from "@/base/components/EnteLogo";
 import { decryptMetadataJSON_New } from "@/base/crypto";
-import { EnteLogo } from "@ente/shared/components/EnteLogo";
 import React, { useEffect, useMemo, useState } from "react";
 
 interface SharedCode {
diff --git a/web/apps/cast/src/pages/index.tsx b/web/apps/cast/src/pages/index.tsx
index 2a49e3d43f..c3782be674 100644
--- a/web/apps/cast/src/pages/index.tsx
+++ b/web/apps/cast/src/pages/index.tsx
@@ -1,5 +1,5 @@
+import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
 import log from "@/base/log";
-import EnteSpinner from "@ente/shared/components/EnteSpinner";
 import { styled } from "@mui/material";
 import { PairingCode } from "components/PairingCode";
 import { useRouter } from "next/router";
@@ -102,7 +102,7 @@ const Container = styled("div")`
 
 const Spinner: React.FC = () => (
     <Spinner_>
-        <EnteSpinner />
+        <ActivityIndicator />
     </Spinner_>
 );
 
diff --git a/web/apps/photos/public/images/ente/192.png b/web/apps/photos/public/images/ente/192.png
deleted file mode 100644
index 28ec8a021c..0000000000
Binary files a/web/apps/photos/public/images/ente/192.png and /dev/null differ
diff --git a/web/apps/photos/public/images/ente/256.png b/web/apps/photos/public/images/ente/256.png
deleted file mode 100644
index 4e3b2a6921..0000000000
Binary files a/web/apps/photos/public/images/ente/256.png and /dev/null differ
diff --git a/web/apps/photos/public/images/ente/512.png b/web/apps/photos/public/images/ente/512.png
deleted file mode 100644
index dd45f4cd55..0000000000
Binary files a/web/apps/photos/public/images/ente/512.png and /dev/null differ
diff --git a/web/apps/photos/public/offline.html b/web/apps/photos/public/offline.html
deleted file mode 100644
index dc8577af8f..0000000000
--- a/web/apps/photos/public/offline.html
+++ /dev/null
@@ -1,59 +0,0 @@
-<!DOCTYPE html>
-<html>
-    <head>
-        <title>Ente Photos</title>
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <style>
-            * {
-                box-sizing: border-box;
-            }
-            body {
-                background-color: #252525;
-                padding: 0;
-                margin: 0;
-                height: 100vh;
-                display: flex;
-                flex-direction: column;
-                color: #fff;
-            }
-            nav {
-                background-color: #171717;
-                height: 64px;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                box-shadow: rgb(0 0 0 / 70%) 0px 0px 5px;
-            }
-
-            nav > img {
-                height: 24px;
-                padding: 3px;
-                margin: 0 auto;
-            }
-
-            body > div {
-                flex: 1;
-                padding: 10px;
-                text-align: center;
-                max-width: 1000px;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                flex-direction: column;
-                margin: 0 auto;
-            }
-            h2 {
-                margin-top: 0;
-            }
-        </style>
-    </head>
-    <body>
-        <nav>
-            <img src="/images/ente.svg" />
-        </nav>
-        <div>
-            <h2>seems like you are offline :(</h2>
-            <span>please check your internet connection</span>
-        </div>
-    </body>
-</html>
diff --git a/web/apps/photos/src/components/Collections/AlbumCastDialog.tsx b/web/apps/photos/src/components/Collections/AlbumCastDialog.tsx
index f09544a4e5..18253c351d 100644
--- a/web/apps/photos/src/components/Collections/AlbumCastDialog.tsx
+++ b/web/apps/photos/src/components/Collections/AlbumCastDialog.tsx
@@ -1,9 +1,9 @@
+import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
 import { boxSeal } from "@/base/crypto/libsodium";
 import log from "@/base/log";
 import type { Collection } from "@/media/collection";
 import { loadCast } from "@/new/photos/utils/chromecast-sender";
 import DialogBoxV2 from "@ente/shared/components/DialogBoxV2";
-import EnteSpinner from "@ente/shared/components/EnteSpinner";
 import SingleInputForm, {
     type SingleInputFormProps,
 } from "@ente/shared/components/SingleInputForm";
@@ -167,7 +167,7 @@ export const AlbumCastDialog: React.FC<AlbumCastDialogProps> = ({
             {view == "auto" && (
                 <Stack sx={{ pt: 1, gap: 3, textAlign: "center" }}>
                     <div>
-                        <EnteSpinner />
+                        <ActivityIndicator />
                     </div>
                     <Typography>{t("choose_device_from_browser")}</Typography>
                     <Button color="secondary" onClick={() => setView("choose")}>
diff --git a/web/apps/photos/src/components/Collections/CollectionHeader.tsx b/web/apps/photos/src/components/Collections/CollectionHeader.tsx
index 3a934d371f..96d69e693a 100644
--- a/web/apps/photos/src/components/Collections/CollectionHeader.tsx
+++ b/web/apps/photos/src/components/Collections/CollectionHeader.tsx
@@ -1,4 +1,5 @@
 import { assertionFailed } from "@/base/assert";
+import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
 import log from "@/base/log";
 import type { Collection } from "@/media/collection";
 import { ItemVisibility } from "@/media/file-metadata";
@@ -12,7 +13,6 @@ import type {
     CollectionSummaryType,
 } from "@/new/photos/services/collection/ui";
 import { HorizontalFlex } from "@ente/shared/components/Container";
-import EnteSpinner from "@ente/shared/components/EnteSpinner";
 import OverflowMenu, {
     StyledMenu,
 } from "@ente/shared/components/OverflowMenu/menu";
@@ -433,7 +433,7 @@ const QuickOptions: React.FC<QuickOptionsProps> = ({
         )}
         {showDownloadQuickOption(type) &&
             (isDownloadInProgress() ? (
-                <EnteSpinner size="20px" sx={{ m: "12px" }} />
+                <ActivityIndicator size="20px" sx={{ m: "12px" }} />
             ) : (
                 <DownloadQuickOption
                     onClick={onDownloadClick}
@@ -554,7 +554,7 @@ const DownloadOption: React.FC<
     <OverflowMenuOption
         startIcon={
             isDownloadInProgress && isDownloadInProgress() ? (
-                <EnteSpinner size="20px" sx={{ cursor: "not-allowed" }} />
+                <ActivityIndicator size="20px" sx={{ cursor: "not-allowed" }} />
             ) : (
                 <FileDownloadOutlinedIcon />
             )
diff --git a/web/apps/photos/src/components/EnteSpinner.tsx b/web/apps/photos/src/components/EnteSpinner.tsx
deleted file mode 100644
index 5e7b5e8036..0000000000
--- a/web/apps/photos/src/components/EnteSpinner.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import CircularProgress, {
-    type CircularProgressProps,
-} from "@mui/material/CircularProgress";
-
-export default function EnteSpinner(props: CircularProgressProps) {
-    return <CircularProgress color="accent" size={32} {...props} />;
-}
diff --git a/web/apps/photos/src/components/GalleryEmptyState.tsx b/web/apps/photos/src/components/GalleryEmptyState.tsx
index 0dd01ba15d..39dabd077a 100644
--- a/web/apps/photos/src/components/GalleryEmptyState.tsx
+++ b/web/apps/photos/src/components/GalleryEmptyState.tsx
@@ -1,8 +1,8 @@
+import { EnteLogo } from "@/base/components/EnteLogo";
 import {
     FlexWrapper,
     VerticallyCentered,
 } from "@ente/shared/components/Container";
-import { EnteLogo } from "@ente/shared/components/EnteLogo";
 import AddPhotoAlternateIcon from "@mui/icons-material/AddPhotoAlternateOutlined";
 import FolderIcon from "@mui/icons-material/FolderOutlined";
 import { Box, Button, Stack, Typography, styled } from "@mui/material";
diff --git a/web/apps/photos/src/components/PhotoViewer/FileInfo/InfoItem.tsx b/web/apps/photos/src/components/PhotoViewer/FileInfo/InfoItem.tsx
index 061b1dcac2..75ae8fac21 100644
--- a/web/apps/photos/src/components/PhotoViewer/FileInfo/InfoItem.tsx
+++ b/web/apps/photos/src/components/PhotoViewer/FileInfo/InfoItem.tsx
@@ -1,7 +1,6 @@
 import { FlexWrapper } from "@ente/shared/components/Container";
 import Edit from "@mui/icons-material/Edit";
-import { Box, IconButton, Typography } from "@mui/material";
-import { SmallLoadingSpinner } from "../styledComponents/SmallLoadingSpinner";
+import { Box, CircularProgress, IconButton, Typography } from "@mui/material";
 
 interface Iprops {
     icon: JSX.Element;
@@ -63,7 +62,11 @@ export default function InfoItem({
                 ? customEndButton
                 : !hideEditOption && (
                       <IconButton onClick={openEditor} color="secondary">
-                          {!loading ? <Edit /> : <SmallLoadingSpinner />}
+                          {!loading ? (
+                              <Edit />
+                          ) : (
+                              <CircularProgress size={"24px"} color="inherit" />
+                          )}
                       </IconButton>
                   )}
         </FlexWrapper>
diff --git a/web/apps/photos/src/components/PhotoViewer/FileInfo/RenderCaption.tsx b/web/apps/photos/src/components/PhotoViewer/FileInfo/RenderCaption.tsx
index 0535f20836..afad6267db 100644
--- a/web/apps/photos/src/components/PhotoViewer/FileInfo/RenderCaption.tsx
+++ b/web/apps/photos/src/components/PhotoViewer/FileInfo/RenderCaption.tsx
@@ -3,13 +3,12 @@ import { EnteFile } from "@/new/photos/types/file";
 import { FlexWrapper } from "@ente/shared/components/Container";
 import Close from "@mui/icons-material/Close";
 import Done from "@mui/icons-material/Done";
-import { Box, IconButton, TextField } from "@mui/material";
+import { Box, CircularProgress, IconButton, TextField } from "@mui/material";
 import { Formik } from "formik";
 import { t } from "i18next";
 import { useState } from "react";
 import { changeCaption, updateExistingFilePubMetadata } from "utils/file";
 import * as Yup from "yup";
-import { SmallLoadingSpinner } from "../styledComponents/SmallLoadingSpinner";
 
 export const MAX_CAPTION_SIZE = 5000;
 
@@ -103,7 +102,10 @@ export function RenderCaption({
                             <FlexWrapper justifyContent={"flex-end"}>
                                 <IconButton type="submit" disabled={loading}>
                                     {loading ? (
-                                        <SmallLoadingSpinner />
+                                        <CircularProgress
+                                            size={"18px"}
+                                            color="inherit"
+                                        />
                                     ) : (
                                         <Done />
                                     )}
diff --git a/web/apps/photos/src/components/PhotoViewer/FileInfo/index.tsx b/web/apps/photos/src/components/PhotoViewer/FileInfo/index.tsx
index a528aa1c2e..97869c4467 100644
--- a/web/apps/photos/src/components/PhotoViewer/FileInfo/index.tsx
+++ b/web/apps/photos/src/components/PhotoViewer/FileInfo/index.tsx
@@ -1,4 +1,5 @@
 import { EnteDrawer } from "@/base/components/EnteDrawer";
+import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
 import { Titlebar } from "@/base/components/Titlebar";
 import { EllipsizedTypography } from "@/base/components/Typography";
 import { nameAndExtension } from "@/base/file";
@@ -29,7 +30,6 @@ import { EnteFile } from "@/new/photos/types/file";
 import { formattedByteSize } from "@/new/photos/utils/units";
 import CopyButton from "@ente/shared/components/CodeBlock/CopyButton";
 import { FlexWrapper } from "@ente/shared/components/Container";
-import EnteSpinner from "@ente/shared/components/EnteSpinner";
 import { getPublicMagicMetadataSync } from "@ente/shared/file-metadata";
 import { formatDate, formatTime } from "@ente/shared/time/format";
 import CalendarTodayIcon from "@mui/icons-material/CalendarToday";
@@ -259,7 +259,7 @@ export const FileInfo: React.FC<FileInfoProps> = ({
                     title={t("DETAILS")}
                     caption={
                         !exif ? (
-                            <EnteSpinner size={12} />
+                            <ActivityIndicator size={12} />
                         ) : !exif.tags ? (
                             t("no_exif")
                         ) : (
diff --git a/web/apps/photos/src/components/PhotoViewer/index.tsx b/web/apps/photos/src/components/PhotoViewer/index.tsx
index 95eeeb6f01..75a285ef24 100644
--- a/web/apps/photos/src/components/PhotoViewer/index.tsx
+++ b/web/apps/photos/src/components/PhotoViewer/index.tsx
@@ -14,6 +14,7 @@ import {
 } from "utils/file";
 
 import { isDesktop } from "@/base/app";
+import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
 import { lowercaseExtension } from "@/base/file";
 import { FileType } from "@/media/file-type";
 import { isHEICExtension, needsJPEGConversion } from "@/media/formats";
@@ -22,7 +23,6 @@ import { extractRawExif, parseExif } from "@/new/photos/services/exif";
 import type { LoadedLivePhotoSourceURL } from "@/new/photos/types/file";
 import { fileLogID } from "@/new/photos/utils/file";
 import { FlexWrapper } from "@ente/shared/components/Container";
-import EnteSpinner from "@ente/shared/components/EnteSpinner";
 import AlbumOutlined from "@mui/icons-material/AlbumOutlined";
 import ChevronLeft from "@mui/icons-material/ChevronLeft";
 import ChevronRight from "@mui/icons-material/ChevronRight";
@@ -799,7 +799,7 @@ function PhotoViewer(props: PhotoViewerProps) {
                                 )}
                             />
                         ) : (
-                            !isSourceLoaded && <EnteSpinner />
+                            !isSourceLoaded && <ActivityIndicator />
                         )}
                     </Box>
 
diff --git a/web/apps/photos/src/components/PhotoViewer/styledComponents/SmallLoadingSpinner.tsx b/web/apps/photos/src/components/PhotoViewer/styledComponents/SmallLoadingSpinner.tsx
deleted file mode 100644
index 2314d3974e..0000000000
--- a/web/apps/photos/src/components/PhotoViewer/styledComponents/SmallLoadingSpinner.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import EnteSpinner from "@ente/shared/components/EnteSpinner";
-
-export const SmallLoadingSpinner = () => (
-    <EnteSpinner
-        style={{
-            width: "20px",
-            height: "20px",
-        }}
-    />
-);
diff --git a/web/apps/photos/src/components/Sidebar/index.tsx b/web/apps/photos/src/components/Sidebar/index.tsx
index 2e911e1615..51fb9d3eee 100644
--- a/web/apps/photos/src/components/Sidebar/index.tsx
+++ b/web/apps/photos/src/components/Sidebar/index.tsx
@@ -1,14 +1,14 @@
 import { openAccountsManagePasskeysPage } from "@/accounts/services/passkey";
 import { isDesktop } from "@/base/app";
 import { EnteDrawer } from "@/base/components/EnteDrawer";
+import { EnteLogo } from "@/base/components/EnteLogo";
+import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
 import log from "@/base/log";
 import { savedLogs } from "@/base/log-web";
 import { customAPIHost } from "@/base/origins";
 import type { CollectionSummaries } from "@/new/photos/services/collection/ui";
 import { initiateEmail, openURL } from "@/new/photos/utils/web";
 import { SpaceBetweenFlex } from "@ente/shared/components/Container";
-import { EnteLogo } from "@ente/shared/components/EnteLogo";
-import EnteSpinner from "@ente/shared/components/EnteSpinner";
 import { EnteMenuItem } from "@ente/shared/components/Menu/EnteMenuItem";
 import RecoveryKey from "@ente/shared/components/RecoveryKey";
 import ThemeSwitcher from "@ente/shared/components/ThemeSwitcher";
@@ -615,7 +615,7 @@ const HelpSection: React.FC = () => {
                 label={t("EXPORT")}
                 endIcon={
                     exportService.isExportInProgress() && (
-                        <EnteSpinner size="20px" />
+                        <ActivityIndicator size="20px" />
                     )
                 }
                 variant="secondary"
diff --git a/web/apps/photos/src/pages/_app.tsx b/web/apps/photos/src/pages/_app.tsx
index 73bfd1a6af..83f1855a5f 100644
--- a/web/apps/photos/src/pages/_app.tsx
+++ b/web/apps/photos/src/pages/_app.tsx
@@ -1,6 +1,7 @@
 import type { AccountsContextT } from "@/accounts/types/context";
 import { clientPackageName, staticAppTitle } from "@/base/app";
 import { CustomHead } from "@/base/components/Head";
+import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
 import { AppNavbar } from "@/base/components/Navbar";
 import { setupI18n } from "@/base/i18n";
 import log from "@/base/log";
@@ -21,7 +22,6 @@ import {
 } from "@ente/shared/components/DialogBox/types";
 import DialogBoxV2 from "@ente/shared/components/DialogBoxV2";
 import type { DialogBoxAttributesV2 } from "@ente/shared/components/DialogBoxV2/types";
-import EnteSpinner from "@ente/shared/components/EnteSpinner";
 import { MessageContainer } from "@ente/shared/components/MessageContainer";
 import { useLocalState } from "@ente/shared/hooks/useLocalState";
 import HTTPService from "@ente/shared/network/HTTPService";
@@ -372,7 +372,7 @@ export default function App({ Component, pageProps }: AppProps) {
                                 backgroundColor: theme.colors.background.base,
                             })}
                         >
-                            <EnteSpinner />
+                            <ActivityIndicator />
                         </Overlay>
                     )}
                     {isI18nReady && (
diff --git a/web/apps/photos/src/pages/deduplicate.tsx b/web/apps/photos/src/pages/deduplicate.tsx
index b725ae5cf0..c518ed9fa5 100644
--- a/web/apps/photos/src/pages/deduplicate.tsx
+++ b/web/apps/photos/src/pages/deduplicate.tsx
@@ -1,7 +1,7 @@
 import { stashRedirect } from "@/accounts/services/redirect";
+import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
 import { getLocalFiles } from "@/new/photos/services/files";
 import { VerticallyCentered } from "@ente/shared/components/Container";
-import EnteSpinner from "@ente/shared/components/EnteSpinner";
 import { PHOTOS_PAGES as PAGES } from "@ente/shared/constants/pages";
 import { ApiError } from "@ente/shared/error";
 import useMemoSingleThreaded from "@ente/shared/hooks/useMemoSingleThreaded";
@@ -170,7 +170,7 @@ export default function Deduplicate() {
     if (!duplicates) {
         return (
             <VerticallyCentered>
-                <EnteSpinner />
+                <ActivityIndicator />
             </VerticallyCentered>
         );
     }
diff --git a/web/apps/photos/src/pages/gallery.tsx b/web/apps/photos/src/pages/gallery.tsx
index 457f35a805..e95403eb5c 100644
--- a/web/apps/photos/src/pages/gallery.tsx
+++ b/web/apps/photos/src/pages/gallery.tsx
@@ -1,5 +1,6 @@
 import { stashRedirect } from "@/accounts/services/redirect";
 import { NavbarBase } from "@/base/components/Navbar";
+import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
 import { useIsMobileWidth } from "@/base/hooks";
 import log from "@/base/log";
 import type { Collection } from "@/media/collection";
@@ -42,7 +43,6 @@ import {
     FlexWrapper,
     HorizontalFlex,
 } from "@ente/shared/components/Container";
-import EnteSpinner from "@ente/shared/components/EnteSpinner";
 import { PHOTOS_PAGES as PAGES } from "@ente/shared/constants/pages";
 import { getRecoveryKey } from "@ente/shared/crypto/helpers";
 import { CustomError } from "@ente/shared/error";
@@ -1159,7 +1159,7 @@ export default function Gallery() {
                 />
                 {blockingLoad && (
                     <LoadingOverlay>
-                        <EnteSpinner />
+                        <ActivityIndicator />
                     </LoadingOverlay>
                 )}
                 {isFirstLoad && (
diff --git a/web/apps/photos/src/pages/index.tsx b/web/apps/photos/src/pages/index.tsx
index b38cb55b5b..6adb1635d2 100644
--- a/web/apps/photos/src/pages/index.tsx
+++ b/web/apps/photos/src/pages/index.tsx
@@ -1,10 +1,10 @@
 import { Login } from "@/accounts/components/Login";
 import { SignUp } from "@/accounts/components/SignUp";
+import { EnteLogo } from "@/base/components/EnteLogo";
+import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
 import log from "@/base/log";
 import { albumsAppOrigin, customAPIHost } from "@/base/origins";
 import { DevSettings } from "@/new/photos/components/DevSettings";
-import { EnteLogo } from "@ente/shared/components/EnteLogo";
-import EnteSpinner from "@ente/shared/components/EnteSpinner";
 import { PHOTOS_PAGES as PAGES } from "@ente/shared/constants/pages";
 import { saveKeyInSessionStore } from "@ente/shared/crypto/helpers";
 import localForage from "@ente/shared/storage/localForage";
@@ -120,7 +120,7 @@ export default function LandingPage() {
     return (
         <TappableContainer onMaybeChangeHost={refreshHost}>
             {loading ? (
-                <EnteSpinner />
+                <ActivityIndicator />
             ) : (
                 <>
                     <SlideContainer>
diff --git a/web/apps/photos/src/pages/shared-albums.tsx b/web/apps/photos/src/pages/shared-albums.tsx
index 38cd6abefe..d12ef703ee 100644
--- a/web/apps/photos/src/pages/shared-albums.tsx
+++ b/web/apps/photos/src/pages/shared-albums.tsx
@@ -1,3 +1,5 @@
+import { EnteLogoSvg } from "@/base/components/EnteLogo";
+import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
 import { NavbarBase, SelectionBar } from "@/base/components/Navbar";
 import { sharedCryptoWorker } from "@/base/crypto";
 import { useIsMobileWidth, useIsTouchscreen } from "@/base/hooks";
@@ -17,7 +19,6 @@ import {
     FluidContainer,
     VerticallyCentered,
 } from "@ente/shared/components/Container";
-import EnteSpinner from "@ente/shared/components/EnteSpinner";
 import FormPaper from "@ente/shared/components/Form/FormPaper";
 import FormPaperTitle from "@ente/shared/components/Form/FormPaper/Title";
 import OverflowMenu from "@ente/shared/components/OverflowMenu/menu";
@@ -34,10 +35,9 @@ import DownloadIcon from "@mui/icons-material/Download";
 import FileDownloadOutlinedIcon from "@mui/icons-material/FileDownloadOutlined";
 import MoreHoriz from "@mui/icons-material/MoreHoriz";
 import type { ButtonProps, IconButtonProps } from "@mui/material";
-import { Box, Button, IconButton, Stack, Tooltip } from "@mui/material";
+import { Box, Button, IconButton, Stack, styled, Tooltip } from "@mui/material";
 import Typography from "@mui/material/Typography";
 import bs58 from "bs58";
-import { EnteLogo } from "components/EnteLogo";
 import {
     FilesDownloadProgress,
     FilesDownloadProgressAttributes,
@@ -439,7 +439,7 @@ export default function PublicCollectionGallery() {
         if (!publicFiles) {
             return (
                 <VerticallyCentered>
-                    <EnteSpinner />
+                    <ActivityIndicator />
                 </VerticallyCentered>
             );
         }
@@ -536,7 +536,7 @@ export default function PublicCollectionGallery() {
                 />
                 {blockingLoad && (
                     <LoadingOverlay>
-                        <EnteSpinner />
+                        <ActivityIndicator />
                     </LoadingOverlay>
                 )}
                 <Uploader
@@ -581,39 +581,23 @@ interface SharedAlbumNavbarProps {
 }
 const SharedAlbumNavbar: React.FC<SharedAlbumNavbarProps> = ({
     onAddPhotos,
-}) => {
-    return (
-        <NavbarBase>
-            <FluidContainer>
-                <EnteLinkLogo />
-            </FluidContainer>
-            {onAddPhotos ? (
-                <AddPhotosButton onClick={onAddPhotos} />
-            ) : (
-                <GoToEnte />
-            )}
-        </NavbarBase>
-    );
-};
+}) => (
+    <NavbarBase>
+        <FluidContainer>
+            <EnteLogoLink href="https://ente.io">
+                <EnteLogoSvg />
+            </EnteLogoLink>
+        </FluidContainer>
+        {onAddPhotos ? <AddPhotosButton onClick={onAddPhotos} /> : <GoToEnte />}
+    </NavbarBase>
+);
 
-const EnteLinkLogo: React.FC = () => {
-    return (
-        <a href="https://ente.io">
-            <Box
-                sx={(theme) => ({
-                    ":hover": {
-                        cursor: "pointer",
-                        svg: {
-                            fill: theme.colors.text.faint,
-                        },
-                    },
-                })}
-            >
-                <EnteLogo />
-            </Box>
-        </a>
-    );
-};
+const EnteLogoLink = styled("a")(({ theme }) => ({
+    color: theme.colors.text.base,
+    ":hover": {
+        color: theme.palette.accent.main,
+    },
+}));
 
 const AddPhotosButton: React.FC<ButtonProps & IconButtonProps> = (props) => {
     const disabled = !uploadManager.shouldAllowNewUpload();
diff --git a/web/packages/accounts/components/two-factor/setup/QRMode.tsx b/web/packages/accounts/components/two-factor/setup/QRMode.tsx
index 04cf2cb876..53b11048b4 100644
--- a/web/packages/accounts/components/two-factor/setup/QRMode.tsx
+++ b/web/packages/accounts/components/two-factor/setup/QRMode.tsx
@@ -1,9 +1,8 @@
 import type { TwoFactorSecret } from "@/accounts/types/user";
-import EnteSpinner from "@ente/shared/components/EnteSpinner";
-import { t } from "i18next";
-
+import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
 import LinkButton from "@ente/shared/components/LinkButton";
 import { Typography } from "@mui/material";
+import { t } from "i18next";
 import { LoadingQRCode, QRCode } from "../styledComponents";
 
 interface Iprops {
@@ -20,7 +19,7 @@ export default function SetupQRMode({
             <Typography>{t("TWO_FACTOR_QR_INSTRUCTION")}</Typography>
             {!twoFactorSecret ? (
                 <LoadingQRCode>
-                    <EnteSpinner />
+                    <ActivityIndicator />
                 </LoadingQRCode>
             ) : (
                 <QRCode
diff --git a/web/packages/accounts/pages/credentials.tsx b/web/packages/accounts/pages/credentials.tsx
index 1afdeedf12..5ffb93b73b 100644
--- a/web/packages/accounts/pages/credentials.tsx
+++ b/web/packages/accounts/pages/credentials.tsx
@@ -1,10 +1,10 @@
+import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
 import { sharedCryptoWorker } from "@/base/crypto";
 import type { B64EncryptionResult } from "@/base/crypto/libsodium";
 import { clearLocalStorage } from "@/base/local-storage";
 import log from "@/base/log";
 import { ensure } from "@/utils/ensure";
 import { VerticallyCentered } from "@ente/shared/components/Container";
-import EnteSpinner from "@ente/shared/components/EnteSpinner";
 import FormPaper from "@ente/shared/components/Form/FormPaper";
 import LinkButton from "@ente/shared/components/LinkButton";
 import {
@@ -324,7 +324,7 @@ const Page: React.FC<PageProps> = ({ appContext }) => {
     if (!keyAttributes && !srpAttributes) {
         return (
             <VerticallyCentered>
-                <EnteSpinner />
+                <ActivityIndicator />
             </VerticallyCentered>
         );
     }
@@ -342,7 +342,7 @@ const Page: React.FC<PageProps> = ({ appContext }) => {
         if (!globalThis.electron) {
             return (
                 <VerticallyCentered>
-                    <EnteSpinner />
+                    <ActivityIndicator />
                 </VerticallyCentered>
             );
         }
diff --git a/web/packages/accounts/pages/generate.tsx b/web/packages/accounts/pages/generate.tsx
index 73d933937b..89b727ea55 100644
--- a/web/packages/accounts/pages/generate.tsx
+++ b/web/packages/accounts/pages/generate.tsx
@@ -5,10 +5,10 @@ import SetPasswordForm, {
 import { PAGES } from "@/accounts/constants/pages";
 import { configureSRP } from "@/accounts/services/srp";
 import { generateKeyAndSRPAttributes } from "@/accounts/utils/srp";
+import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
 import log from "@/base/log";
 import { ensure } from "@/utils/ensure";
 import { VerticallyCentered } from "@ente/shared/components/Container";
-import EnteSpinner from "@ente/shared/components/EnteSpinner";
 import FormPaper from "@ente/shared/components/Form/FormPaper";
 import FormPaperFooter from "@ente/shared/components/Form/FormPaper/Footer";
 import FormTitle from "@ente/shared/components/Form/FormPaper/Title";
@@ -98,7 +98,7 @@ const Page: React.FC<PageProps> = ({ appContext }) => {
         <>
             {loading || !user ? (
                 <VerticallyCentered>
-                    <EnteSpinner />
+                    <ActivityIndicator />
                 </VerticallyCentered>
             ) : recoverModalView ? (
                 <RecoveryKey
diff --git a/web/packages/accounts/pages/login.tsx b/web/packages/accounts/pages/login.tsx
index 40e52ef603..d46ab84fb1 100644
--- a/web/packages/accounts/pages/login.tsx
+++ b/web/packages/accounts/pages/login.tsx
@@ -1,6 +1,6 @@
+import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
 import { customAPIHost } from "@/base/origins";
 import { VerticallyCentered } from "@ente/shared/components/Container";
-import EnteSpinner from "@ente/shared/components/EnteSpinner";
 import FormPaper from "@ente/shared/components/Form/FormPaper";
 import { LS_KEYS, getData } from "@ente/shared/storage/localStorage";
 import { useRouter } from "next/router";
@@ -33,7 +33,7 @@ const Page: React.FC<PageProps> = ({ appContext }) => {
 
     return loading ? (
         <VerticallyCentered>
-            <EnteSpinner />
+            <ActivityIndicator />
         </VerticallyCentered>
     ) : (
         <VerticallyCentered>
diff --git a/web/packages/accounts/pages/passkeys/finish.tsx b/web/packages/accounts/pages/passkeys/finish.tsx
index 134f2ee9c1..9c074bcfa3 100644
--- a/web/packages/accounts/pages/passkeys/finish.tsx
+++ b/web/packages/accounts/pages/passkeys/finish.tsx
@@ -1,8 +1,8 @@
+import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
 import { fromB64URLSafeNoPaddingString } from "@/base/crypto/libsodium";
 import log from "@/base/log";
 import { nullToUndefined } from "@/utils/transform";
 import { VerticallyCentered } from "@ente/shared/components/Container";
-import EnteSpinner from "@ente/shared/components/EnteSpinner";
 import {
     LS_KEYS,
     getData,
@@ -41,7 +41,7 @@ const Page: React.FC<PageProps> = () => {
 
     return (
         <VerticallyCentered>
-            <EnteSpinner />
+            <ActivityIndicator />
         </VerticallyCentered>
     );
 };
diff --git a/web/packages/accounts/pages/signup.tsx b/web/packages/accounts/pages/signup.tsx
index 7b6d17795f..55a26c77dd 100644
--- a/web/packages/accounts/pages/signup.tsx
+++ b/web/packages/accounts/pages/signup.tsx
@@ -1,8 +1,8 @@
 import { PAGES } from "@/accounts/constants/pages";
+import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
 import { customAPIHost } from "@/base/origins";
 import { LS_KEYS, getData } from "@ente/shared//storage/localStorage";
 import { VerticallyCentered } from "@ente/shared/components/Container";
-import EnteSpinner from "@ente/shared/components/EnteSpinner";
 import FormPaper from "@ente/shared/components/Form/FormPaper";
 import { useRouter } from "next/router";
 import React, { useEffect, useState } from "react";
@@ -34,7 +34,7 @@ const Page: React.FC<PageProps> = ({ appContext }) => {
     return (
         <VerticallyCentered>
             {loading ? (
-                <EnteSpinner />
+                <ActivityIndicator />
             ) : (
                 <FormPaper>
                     <SignUp {...{ login, router, host }} />
diff --git a/web/packages/accounts/pages/verify.tsx b/web/packages/accounts/pages/verify.tsx
index d71fe40700..860459d3c9 100644
--- a/web/packages/accounts/pages/verify.tsx
+++ b/web/packages/accounts/pages/verify.tsx
@@ -1,8 +1,8 @@
 import type { UserVerificationResponse } from "@/accounts/types/user";
+import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
 import log from "@/base/log";
 import { ensure } from "@/utils/ensure";
 import { VerticallyCentered } from "@ente/shared/components/Container";
-import EnteSpinner from "@ente/shared/components/EnteSpinner";
 import FormPaper from "@ente/shared/components/Form/FormPaper";
 import FormPaperTitle from "@ente/shared/components/Form/FormPaper/Title";
 import LinkButton from "@ente/shared/components/LinkButton";
@@ -172,7 +172,7 @@ const Page: React.FC<PageProps> = ({ appContext }) => {
     if (!email) {
         return (
             <VerticallyCentered>
-                <EnteSpinner />
+                <ActivityIndicator />
             </VerticallyCentered>
         );
     }
@@ -190,7 +190,7 @@ const Page: React.FC<PageProps> = ({ appContext }) => {
         if (!globalThis.electron) {
             return (
                 <VerticallyCentered>
-                    <EnteSpinner />
+                    <ActivityIndicator />
                 </VerticallyCentered>
             );
         }
diff --git a/web/apps/photos/src/components/EnteLogo.tsx b/web/packages/base/components/EnteLogo.tsx
similarity index 71%
rename from web/apps/photos/src/components/EnteLogo.tsx
rename to web/packages/base/components/EnteLogo.tsx
index 6636631467..6b98cba619 100644
--- a/web/apps/photos/src/components/EnteLogo.tsx
+++ b/web/packages/base/components/EnteLogo.tsx
@@ -1,12 +1,53 @@
+import { styled } from "@mui/material";
+import React from "react";
+
+interface EnteLogoProps {
+    /**
+     * The height of the logo image, in pixels.
+     *
+     * Default: 18px
+     */
+    height?: number;
+}
+
+/**
+ * The Ente logo ("ente" in Montserrat).
+ *
+ * **This relies on the presence of images/ente.svg in the public folder.**
+ *
+ * This is meant as a standard img element that can be used in places where we
+ * need to show the Ente branding. The img is backed by an an SVG.
+ *
+ * @see {@link EnteLogoSvg} for a variant but visually similar component that
+ * uses an inline svg instead.
+ *
+ * The img has a default height of 18px, but can be customized using the
+ * {@link height} prop.
+ *
+ * The img also has a 3px vertical margin on both sides.
+ */
+export const EnteLogo: React.FC<EnteLogoProps> = ({ height }) => (
+    <LogoImage height={height ?? 18} alt="Ente" src="/images/ente.svg" />
+);
+
+const LogoImage = styled("img")`
+    margin: 3px 0;
+    vertical-align: middle;
+`;
+
 /**
  * The Ente logo ("ente" in Montserrat), as an inline svg.
+ *
+ * Having it as an inline SVG has two advantages:
+ * - It does not rely on a corresponding asset in the public folder
+ * - It can be styled using CSS.
  */
-export const EnteLogo: React.FC = () => (
+export const EnteLogoSvg: React.FC = () => (
     <svg
         width="50"
         height="26"
         viewBox="0 0 43 13"
-        fill="#fff"
+        fill="currentColor"
         xmlns="http://www.w3.org/2000/svg"
     >
         <path d="M6.102 12.144C4.998 12.144 4.026 11.928 3.186 11.496C2.358 11.064 1.716 10.476 1.26 9.732C0.804 8.976 0.576 8.118 0.576 7.158C0.576 6.186 0.798 5.328 1.242 4.584C1.698 3.828 2.316 3.24 3.096 2.82C3.876 2.388 4.758 2.172 5.742 2.172C6.69 2.172 7.542 2.376 8.298 2.784C9.066 3.18 9.672 3.756 10.116 4.512C10.56 5.256 10.782 6.15 10.782 7.194C10.782 7.302 10.776 7.428 10.764 7.572C10.752 7.704 10.74 7.83 10.728 7.95H2.862V6.312H9.252L8.172 6.798C8.172 6.294 8.07 5.856 7.866 5.484C7.662 5.112 7.38 4.824 7.02 4.62C6.66 4.404 6.24 4.296 5.76 4.296C5.28 4.296 4.854 4.404 4.482 4.62C4.122 4.824 3.84 5.118 3.636 5.502C3.432 5.874 3.33 6.318 3.33 6.834V7.266C3.33 7.794 3.444 8.262 3.672 8.67C3.912 9.066 4.242 9.372 4.662 9.588C5.094 9.792 5.598 9.894 6.174 9.894C6.69 9.894 7.14 9.816 7.524 9.66C7.92 9.504 8.28 9.27 8.604 8.958L10.098 10.578C9.654 11.082 9.096 11.472 8.424 11.748C7.752 12.012 6.978 12.144 6.102 12.144ZM18.5375 2.172C19.3055 2.172 19.9895 2.328 20.5895 2.64C21.2015 2.94 21.6815 3.408 22.0295 4.044C22.3775 4.668 22.5515 5.472 22.5515 6.456V12H19.7435V6.888C19.7435 6.108 19.5695 5.532 19.2215 5.16C18.8855 4.788 18.4055 4.602 17.7815 4.602C17.3375 4.602 16.9355 4.698 16.5755 4.89C16.2275 5.07 15.9515 5.352 15.7475 5.736C15.5555 6.12 15.4595 6.612 15.4595 7.212V12H12.6515V2.316H15.3335V4.998L14.8295 4.188C15.1775 3.54 15.6755 3.042 16.3235 2.694C16.9715 2.346 17.7095 2.172 18.5375 2.172ZM29.0568 12.144C27.9168 12.144 27.0288 11.856 26.3928 11.28C25.7568 10.692 25.4388 9.822 25.4388 8.67V0.174H28.2468V8.634C28.2468 9.042 28.3548 9.36 28.5708 9.588C28.7868 9.804 29.0808 9.912 29.4528 9.912C29.8968 9.912 30.2748 9.792 30.5868 9.552L31.3428 11.532C31.0548 11.736 30.7068 11.892 30.2988 12C29.9028 12.096 29.4888 12.144 29.0568 12.144ZM23.9448 4.692V2.532H30.6588V4.692H23.9448ZM37.4262 12.144C36.3222 12.144 35.3502 11.928 34.5102 11.496C33.6822 11.064 33.0402 10.476 32.5842 9.732C32.1282 8.976 31.9002 8.118 31.9002 7.158C31.9002 6.186 32.1222 5.328 32.5662 4.584C33.0222 3.828 33.6402 3.24 34.4202 2.82C35.2002 2.388 36.0822 2.172 37.0662 2.172C38.0142 2.172 38.8662 2.376 39.6222 2.784C40.3902 3.18 40.9962 3.756 41.4402 4.512C41.8842 5.256 42.1062 6.15 42.1062 7.194C42.1062 7.302 42.1002 7.428 42.0882 7.572C42.0762 7.704 42.0642 7.83 42.0522 7.95H34.1862V6.312H40.5762L39.4962 6.798C39.4962 6.294 39.3942 5.856 39.1902 5.484C38.9862 5.112 38.7042 4.824 38.3442 4.62C37.9842 4.404 37.5642 4.296 37.0842 4.296C36.6042 4.296 36.1782 4.404 35.8062 4.62C35.4462 4.824 35.1642 5.118 34.9602 5.502C34.7562 5.874 34.6542 6.318 34.6542 6.834V7.266C34.6542 7.794 34.7682 8.262 34.9962 8.67C35.2362 9.066 35.5662 9.372 35.9862 9.588C36.4182 9.792 36.9222 9.894 37.4982 9.894C38.0142 9.894 38.4642 9.816 38.8482 9.66C39.2442 9.504 39.6042 9.27 39.9282 8.958L41.4222 10.578C40.9782 11.082 40.4202 11.472 39.7482 11.748C39.0762 12.012 38.3022 12.144 37.4262 12.144Z" />
diff --git a/web/packages/base/components/Navbar.tsx b/web/packages/base/components/Navbar.tsx
index b4d4bdf346..4d93f87c37 100644
--- a/web/packages/base/components/Navbar.tsx
+++ b/web/packages/base/components/Navbar.tsx
@@ -1,5 +1,5 @@
+import { EnteLogo } from "@/base/components/EnteLogo";
 import { CenteredFlex, FlexWrapper } from "@ente/shared/components/Container";
-import { EnteLogo } from "@ente/shared/components/EnteLogo";
 import { styled } from "@mui/material";
 import React from "react";
 
diff --git a/web/packages/base/components/mui/ActivityIndicator.tsx b/web/packages/base/components/mui/ActivityIndicator.tsx
new file mode 100644
index 0000000000..7482ca704a
--- /dev/null
+++ b/web/packages/base/components/mui/ActivityIndicator.tsx
@@ -0,0 +1,13 @@
+import { CircularProgress, type CircularProgressProps } from "@mui/material";
+import type React from "react";
+
+/**
+ * A standard {@link CircularProgress} for use in our code.
+ *
+ * While it does take and forward props to the the underlying
+ * {@link CircularProgress}, if you find yourself needing to customize it too
+ * much, consider directly using a {@link CircularProgress} instead.
+ */
+export const ActivityIndicator: React.FC<CircularProgressProps> = (props) => (
+    <CircularProgress color="accent" size={32} {...props} />
+);
diff --git a/web/packages/new/photos/components/MLSettings.tsx b/web/packages/new/photos/components/MLSettings.tsx
index 6125f5e27f..a8bb5db89e 100644
--- a/web/packages/new/photos/components/MLSettings.tsx
+++ b/web/packages/new/photos/components/MLSettings.tsx
@@ -1,5 +1,6 @@
 import { EnteDrawer } from "@/base/components/EnteDrawer";
 import { MenuItemGroup } from "@/base/components/Menu";
+import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
 import { Titlebar } from "@/base/components/Titlebar";
 import log from "@/base/log";
 import {
@@ -9,7 +10,6 @@ import {
     mlStatusSubscribe,
     type MLStatus,
 } from "@/new/photos/services/ml";
-import EnteSpinner from "@ente/shared/components/EnteSpinner";
 import { EnteMenuItem } from "@ente/shared/components/Menu/EnteMenuItem";
 import {
     Box,
@@ -143,7 +143,7 @@ export const MLSettings: React.FC<MLSettingsProps> = ({
 const Loading: React.FC = () => {
     return (
         <Box textAlign="center" pt={4}>
-            <EnteSpinner />
+            <ActivityIndicator />
         </Box>
     );
 };
diff --git a/web/packages/shared/components/CodeBlock/index.tsx b/web/packages/shared/components/CodeBlock/index.tsx
index e556638702..8cf8c9d992 100644
--- a/web/packages/shared/components/CodeBlock/index.tsx
+++ b/web/packages/shared/components/CodeBlock/index.tsx
@@ -1,4 +1,4 @@
-import EnteSpinner from "@ente/shared/components/EnteSpinner";
+import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
 import { type BoxProps, styled } from "@mui/material";
 import React from "react";
 import CopyButton from "./CopyButton";
@@ -12,7 +12,7 @@ export default function CodeBlock({ code, ...props }: BoxProps<"div", Iprops>) {
     if (!code) {
         return (
             <Wrapper>
-                <EnteSpinner />
+                <ActivityIndicator />
             </Wrapper>
         );
     }
diff --git a/web/packages/shared/components/EnteLogo.tsx b/web/packages/shared/components/EnteLogo.tsx
deleted file mode 100644
index 0c72403d87..0000000000
--- a/web/packages/shared/components/EnteLogo.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { styled } from "@mui/material";
-import React from "react";
-
-interface EnteLogoProps {
-    /**
-     * The height of the logo image.
-     *
-     * Default: 18
-     */
-    height?: number;
-}
-
-export const EnteLogo: React.FC<EnteLogoProps> = ({ height }) => {
-    return (
-        <LogoImage height={height ?? 18} alt="logo" src="/images/ente.svg" />
-    );
-};
-
-const LogoImage = styled("img")`
-    margin: 3px 0;
-    pointer-events: none;
-    vertical-align: middle;
-`;
diff --git a/web/packages/shared/components/EnteSpinner.tsx b/web/packages/shared/components/EnteSpinner.tsx
deleted file mode 100644
index 5e7b5e8036..0000000000
--- a/web/packages/shared/components/EnteSpinner.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import CircularProgress, {
-    type CircularProgressProps,
-} from "@mui/material/CircularProgress";
-
-export default function EnteSpinner(props: CircularProgressProps) {
-    return <CircularProgress color="accent" size={32} {...props} />;
-}
diff --git a/web/packages/shared/components/Info/InfoItem.tsx b/web/packages/shared/components/Info/InfoItem.tsx
deleted file mode 100644
index 3cc9f5d35c..0000000000
--- a/web/packages/shared/components/Info/InfoItem.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { FlexWrapper } from "@ente/shared/components/Container";
-import Edit from "@mui/icons-material/Edit";
-import { Box, IconButton, Typography } from "@mui/material";
-import { SmallLoadingSpinner } from "../styledComponents/SmallLoadingSpinner";
-
-interface Iprops {
-    icon: JSX.Element;
-    title?: string;
-    caption?: string | JSX.Element;
-    openEditor?: any;
-    loading?: boolean;
-    hideEditOption?: any;
-    customEndButton?: any;
-    children?: any;
-}
-
-export default function InfoItem({
-    icon,
-    title,
-    caption,
-    openEditor,
-    loading,
-    hideEditOption,
-    customEndButton,
-    children,
-}: Iprops): JSX.Element {
-    return (
-        <FlexWrapper justifyContent="space-between">
-            <Box display={"flex"} alignItems="flex-start" gap={0.5} pr={1}>
-                <IconButton
-                    color="secondary"
-                    sx={{ "&&": { cursor: "default", m: 0.5 } }}
-                    disableRipple
-                >
-                    {icon}
-                </IconButton>
-                <Box py={0.5}>
-                    {children ? (
-                        children
-                    ) : (
-                        <>
-                            <Typography sx={{ wordBreak: "break-all" }}>
-                                {title}
-                            </Typography>
-                            <Typography variant="small" color="text.muted">
-                                {caption}
-                            </Typography>
-                        </>
-                    )}
-                </Box>
-            </Box>
-            {customEndButton
-                ? customEndButton
-                : !hideEditOption && (
-                      <IconButton onClick={openEditor} color="secondary">
-                          {!loading ? <Edit /> : <SmallLoadingSpinner />}
-                      </IconButton>
-                  )}
-        </FlexWrapper>
-    );
-}
diff --git a/web/packages/shared/components/styledComponents/SmallLoadingSpinner.tsx b/web/packages/shared/components/styledComponents/SmallLoadingSpinner.tsx
deleted file mode 100644
index 2314d3974e..0000000000
--- a/web/packages/shared/components/styledComponents/SmallLoadingSpinner.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import EnteSpinner from "@ente/shared/components/EnteSpinner";
-
-export const SmallLoadingSpinner = () => (
-    <EnteSpinner
-        style={{
-            width: "20px",
-            height: "20px",
-        }}
-    />
-);