diff --git a/app/admin/components/page.tsx b/app/admin/components/page.tsx
new file mode 100644
index 00000000..b1513dba
--- /dev/null
+++ b/app/admin/components/page.tsx
@@ -0,0 +1,21 @@
+'use client';
+
+import SiteGrid from '@/components/SiteGrid';
+import StatusIcon from '@/components/StatusIcon';
+import clsx from 'clsx/lite';
+
+export default function ComponentsPage() {
+  return (
+    <SiteGrid
+      contentMain={<div className={clsx(
+        'flex gap-0.5',
+        '*:inline-flex *:bg-medium',
+      )}>
+        <StatusIcon type="checked" />
+        <StatusIcon type="missing" />
+        <StatusIcon type="warning" />
+        <StatusIcon type="optional" />
+      </div>}
+    />
+  );
+}
diff --git a/src/admin/AdminAppConfigurationClient.tsx b/src/admin/AdminAppConfigurationClient.tsx
index 0982188e..6f5b4da7 100644
--- a/src/admin/AdminAppConfigurationClient.tsx
+++ b/src/admin/AdminAppConfigurationClient.tsx
@@ -114,12 +114,10 @@ export default function AdminAppConfigurationClient({
   const renderSubStatus = (
     type: ComponentProps<typeof StatusIcon>['type'],
     label: ReactNode,
-    iconClassName?: string,
+    iconClassName = 'translate-y-[3.5px]',
   ) =>
-    <div className="flex gap-2 translate-x-[-3px]">
-      <span className={iconClassName}>
-        <StatusIcon {...{ type }} />
-      </span>
+    <div className="flex gap-2 translate-x-[-2.5px]">
+      <StatusIcon {...{ type, className: iconClassName }} />
       <span className="min-w-0">
         {label}
       </span>
@@ -132,7 +130,7 @@ export default function AdminAppConfigurationClient({
     renderSubStatus(
       type,
       renderEnvVars([variable]),
-      'translate-y-[3px]',
+      'translate-y-[4.5px]',
     );
 
   const renderError = ({
@@ -165,498 +163,496 @@ export default function AdminAppConfigurationClient({
 
   return (
     <>
-      <div className="space-y-3 -mt-3">
-        <ChecklistGroup
-          title="Storage"
-          icon={<BiData size={16} />}
+      <ChecklistGroup
+        title="Storage"
+        icon={<BiData size={16} />}
+      >
+        <ChecklistRow
+          title={hasDatabase && isAnalyzingConfiguration
+            ? 'Testing database connection'
+            : 'Setup database'}
+          status={hasDatabase}
+          isPending={hasDatabase && isAnalyzingConfiguration}
         >
-          <ChecklistRow
-            title={hasDatabase && isAnalyzingConfiguration
-              ? 'Testing database connection'
-              : 'Setup database'}
-            status={hasDatabase}
-            isPending={hasDatabase && isAnalyzingConfiguration}
-          >
-            {databaseError && renderError({
-              connection: { provider: 'Database', error: databaseError},
-            })}
-            {hasVercelPostgres
-              ? renderSubStatus('checked', 'Vercel Postgres: connected')
-              : renderSubStatus('optional', <>
-                Vercel Postgres:
-                {' '}
-                <AdminLink
-                  // eslint-disable-next-line max-len
-                  href="https://vercel.com/docs/storage/vercel-postgres/quickstart#create-a-postgres-database"
-                  externalIcon
-                >
-                  create store
-                </AdminLink>
-                {' '}
-                and connect to project
-              </>)}
-            {hasDatabase && !hasVercelPostgres &&
-              renderSubStatus('checked', <>
-                Postgres-compatible: connected
-                {' '}
-                (SSL {isPostgresSslEnabled ? 'enabled' : 'disabled'})
-              </>)}
-          </ChecklistRow>
-          <ChecklistRow
-            title={
-              hasStorageProvider && isAnalyzingConfiguration
-                ? 'Testing storage connection'
-                : !hasStorageProvider
-                  ? 'Setup storage (one of the following)'
-                  : hasMultipleStorageProviders
-                    // eslint-disable-next-line max-len
-                    ? `Setup storage (new uploads go to: ${labelForStorage(currentStorage)})`
-                    : 'Setup storage'}
-            status={hasStorageProvider}
-            isPending={hasStorageProvider && isAnalyzingConfiguration}
-          >
-            {storageError && renderError({
-              connection: { provider: 'Storage', error: storageError},
-            })}
-            {hasVercelBlobStorage
-              ? renderSubStatus('checked', 'Vercel Blob: connected')
-              : renderSubStatus('optional', <>
-                {labelForStorage('vercel-blob')}:
-                {' '}
-                <AdminLink
-                  // eslint-disable-next-line max-len
-                  href="https://vercel.com/docs/storage/vercel-blob/quickstart#create-a-blob-store"
-                  externalIcon
-                >
-                  create store
-                </AdminLink>
-                {' '} 
-                and connect to project
-              </>,
-              )}
-            {hasCloudflareR2Storage
-              ? renderSubStatus('checked', 'Cloudflare R2: connected')
-              : renderSubStatus('optional', <>
-                {labelForStorage('cloudflare-r2')}:
-                {' '}
-                <AdminLink
-                  // eslint-disable-next-line max-len
-                  href="https://github.com/sambecker/exif-photo-blog#cloudflare-r2"
-                  externalIcon
-                >
-                  create/configure bucket
-                </AdminLink>
-              </>)}
-            {hasAwsS3Storage
-              ? renderSubStatus('checked', 'AWS S3: connected')
-              : renderSubStatus('optional', <>
-                {labelForStorage('aws-s3')}:
-                {' '}
-                <AdminLink
-                  href="https://github.com/sambecker/exif-photo-blog#aws-s3"
-                  externalIcon
-                >
-                  create/configure bucket
-                </AdminLink>
-              </>)}
-          </ChecklistRow>
-        </ChecklistGroup>
-        <ChecklistGroup
-          title="Authentication"
-          icon={<BiLockAlt size={16} />}
-        >
-          <ChecklistRow
-            title={!hasAuthSecret && isAnalyzingConfiguration
-              ? 'Generating secret'
-              : 'Setup auth'}
-            status={hasAuthSecret}
-            isPending={!hasAuthSecret && isAnalyzingConfiguration}
-          >
-            Store auth secret in environment variable:
-            {!hasAuthSecret &&
-              <div className="overflow-x-auto">
-                <SecretGenerator />
-              </div>}
-            {renderEnvVars(['AUTH_SECRET'])}
-          </ChecklistRow>
-          <ChecklistRow
-            title="Setup admin user"
-            status={hasAdminUser}
-          >
-            Store admin email/password
-            {' '}
-            in environment variables:
-            {renderEnvVars([
-              'ADMIN_EMAIL',
-              'ADMIN_PASSWORD',
-            ])}
-          </ChecklistRow>
-        </ChecklistGroup>
-        <ChecklistGroup
-          title="Content"
-          icon={<BiPencil size={16} />}
-        >
-          <ChecklistRow
-            title="Configure domain"
-            status={hasDomain}
-            showWarning
-          >
-            {!hasDomain &&
-              renderWarning({message:
-                'Not explicitly setting a domain may cause ' + 
-                'certain features to behave unexpectedly',
-              })}
-            Store in environment variable (seen in top-right nav):
-            {renderEnvVars(['NEXT_PUBLIC_SITE_DOMAIN'])}
-          </ChecklistRow>
-          <ChecklistRow
-            title="Add title"
-            status={hasTitle}
-            optional
-          >
-            Store in environment variable (seen in browser tab):
-            {renderEnvVars(['NEXT_PUBLIC_SITE_TITLE'])}
-          </ChecklistRow>
-          <ChecklistRow
-            title="Add description"
-            status={hasDescription}
-            optional
-          >
-            Store in environment variable (seen in nav, under title):
-            {renderEnvVars(['NEXT_PUBLIC_SITE_DESCRIPTION'])}
-          </ChecklistRow>
-          <ChecklistRow
-            title="Add about"
-            status={hasAbout}
-            optional
-          >
-            Store in environment variable (seen in grid sidebar):
-            {renderEnvVars(['NEXT_PUBLIC_SITE_ABOUT'])}
-          </ChecklistRow>
-        </ChecklistGroup>
-        {!simplifiedView && <>
-          <ChecklistGroup
-            title="AI text generation"
-            titleShort="AI"
-            icon={<HiSparkles />}
-            optional
-          >
-            <ChecklistRow
-              title={isAiTextGenerationEnabled && isAnalyzingConfiguration
-                ? 'Testing OpenAI connection'
-                : 'Add OpenAI secret key'}
-              status={isAiTextGenerationEnabled}
-              isPending={isAiTextGenerationEnabled && isAnalyzingConfiguration}
-              optional
-            >
-              {aiError && renderError({
-                connection: { provider: 'OpenAI', error: aiError},
-              })}
-              Store your OpenAI secret key in order to add experimental support
-              for AI-generated text descriptions and enable an invisible field
-              called {'"Semantic Description"'} used to support CMD-K search:
-              {renderEnvVars(['OPENAI_SECRET_KEY'])}
-            </ChecklistRow>
-            <ChecklistRow
-              title={hasRedisStorage && isAnalyzingConfiguration
-                ? 'Testing Redis connection'
-                : 'Enable rate limiting'}
-              status={hasRedisStorage}
-              isPending={hasRedisStorage && isAnalyzingConfiguration}
-              optional
-            >
-              {redisError && renderError({
-                connection: { provider: 'Redis', error: redisError},
-              })}
-              Create Upstash Redis store from storage tab
-              on Vercel dashboard and connect to this project
-              to enable rate limiting
-            </ChecklistRow>
-            <ChecklistRow
-              // eslint-disable-next-line max-len
-              title={`Auto-generated fields: ${aiTextAutoGeneratedFields.join(', ')}`}
-              status={hasAiTextAutoGeneratedFields}
-              optional
-            >
-              Comma-separated fields to auto-generate when
-              uploading photos. Accepted values: title, caption,
-              tags, description, all, or none
+          {databaseError && renderError({
+            connection: { provider: 'Database', error: databaseError},
+          })}
+          {hasVercelPostgres
+            ? renderSubStatus('checked', 'Vercel Postgres: connected')
+            : renderSubStatus('optional', <>
+              Vercel Postgres:
               {' '}
-              (default: {'"title, tags, semantic"'}):
-              {renderEnvVars(['AI_TEXT_AUTO_GENERATED_FIELDS'])}
-            </ChecklistRow>
-          </ChecklistGroup>
-          <ChecklistGroup
-            title="Performance"
-            icon={<RiSpeedMiniLine size={18} />}
-            optional
-          >
-            <ChecklistRow
-              title="Static optimization"
-              status={isStaticallyOptimized}
-              optional
-            >
-              Set environment variable to {'"1"'} to make site more responsive
-              by enabling static optimization
-              (i.e., rendering pages and images at build time):
-              {renderSubStatusWithEnvVar(
-                arePhotosStaticallyOptimized ? 'checked' : 'optional',
-                'NEXT_PUBLIC_STATICALLY_OPTIMIZE_PHOTOS',
-              )}
-              {renderSubStatusWithEnvVar(
-                arePhotoOGImagesStaticallyOptimized ? 'checked' : 'optional',
-                'NEXT_PUBLIC_STATICALLY_OPTIMIZE_PHOTO_OG_IMAGES',
-              )}
-              {renderSubStatusWithEnvVar(
-                arePhotoCategoriesStaticallyOptimized ? 'checked' : 'optional',
-                'NEXT_PUBLIC_STATICALLY_OPTIMIZE_PHOTO_CATEGORIES',
-              )}
-              {renderSubStatusWithEnvVar(
+              <AdminLink
                 // eslint-disable-next-line max-len
-                arePhotoCategoryOgImagesStaticallyOptimized ? 'checked' : 'optional',
-                'NEXT_PUBLIC_STATICALLY_OPTIMIZE_PHOTO_CATEGORY_OG_IMAGES',
-              )}
+                href="https://vercel.com/docs/storage/vercel-postgres/quickstart#create-a-postgres-database"
+                externalIcon
+              >
+                create store
+              </AdminLink>
+              {' '}
+              and connect to project
+            </>)}
+          {hasDatabase && !hasVercelPostgres &&
+            renderSubStatus('checked', <>
+              Postgres-compatible: connected
+              {' '}
+              (SSL {isPostgresSslEnabled ? 'enabled' : 'disabled'})
+            </>)}
+        </ChecklistRow>
+        <ChecklistRow
+          title={
+            hasStorageProvider && isAnalyzingConfiguration
+              ? 'Testing storage connection'
+              : !hasStorageProvider
+                ? 'Setup storage (one of the following)'
+                : hasMultipleStorageProviders
+                  // eslint-disable-next-line max-len
+                  ? `Setup storage (new uploads go to: ${labelForStorage(currentStorage)})`
+                  : 'Setup storage'}
+          status={hasStorageProvider}
+          isPending={hasStorageProvider && isAnalyzingConfiguration}
+        >
+          {storageError && renderError({
+            connection: { provider: 'Storage', error: storageError},
+          })}
+          {hasVercelBlobStorage
+            ? renderSubStatus('checked', 'Vercel Blob: connected')
+            : renderSubStatus('optional', <>
+              {labelForStorage('vercel-blob')}:
+              {' '}
+              <AdminLink
+                // eslint-disable-next-line max-len
+                href="https://vercel.com/docs/storage/vercel-blob/quickstart#create-a-blob-store"
+                externalIcon
+              >
+                create store
+              </AdminLink>
+              {' '} 
+              and connect to project
+            </>,
+            )}
+          {hasCloudflareR2Storage
+            ? renderSubStatus('checked', 'Cloudflare R2: connected')
+            : renderSubStatus('optional', <>
+              {labelForStorage('cloudflare-r2')}:
+              {' '}
+              <AdminLink
+                // eslint-disable-next-line max-len
+                href="https://github.com/sambecker/exif-photo-blog#cloudflare-r2"
+                externalIcon
+              >
+                create/configure bucket
+              </AdminLink>
+            </>)}
+          {hasAwsS3Storage
+            ? renderSubStatus('checked', 'AWS S3: connected')
+            : renderSubStatus('optional', <>
+              {labelForStorage('aws-s3')}:
+              {' '}
+              <AdminLink
+                href="https://github.com/sambecker/exif-photo-blog#aws-s3"
+                externalIcon
+              >
+                create/configure bucket
+              </AdminLink>
+            </>)}
+        </ChecklistRow>
+      </ChecklistGroup>
+      <ChecklistGroup
+        title="Authentication"
+        icon={<BiLockAlt size={16} />}
+      >
+        <ChecklistRow
+          title={!hasAuthSecret && isAnalyzingConfiguration
+            ? 'Generating secret'
+            : 'Setup auth'}
+          status={hasAuthSecret}
+          isPending={!hasAuthSecret && isAnalyzingConfiguration}
+        >
+          Store auth secret in environment variable:
+          {!hasAuthSecret &&
+            <div className="overflow-x-auto">
+              <SecretGenerator />
+            </div>}
+          {renderEnvVars(['AUTH_SECRET'])}
+        </ChecklistRow>
+        <ChecklistRow
+          title="Setup admin user"
+          status={hasAdminUser}
+        >
+          Store admin email/password
+          {' '}
+          in environment variables:
+          {renderEnvVars([
+            'ADMIN_EMAIL',
+            'ADMIN_PASSWORD',
+          ])}
+        </ChecklistRow>
+      </ChecklistGroup>
+      <ChecklistGroup
+        title="Content"
+        icon={<BiPencil size={16} />}
+      >
+        <ChecklistRow
+          title="Configure domain"
+          status={hasDomain}
+          showWarning
+        >
+          {!hasDomain &&
+            renderWarning({message:
+              'Not explicitly setting a domain may cause ' + 
+              'certain features to behave unexpectedly',
+            })}
+          Store in environment variable (seen in top-right nav):
+          {renderEnvVars(['NEXT_PUBLIC_SITE_DOMAIN'])}
+        </ChecklistRow>
+        <ChecklistRow
+          title="Add title"
+          status={hasTitle}
+          optional
+        >
+          Store in environment variable (seen in browser tab):
+          {renderEnvVars(['NEXT_PUBLIC_SITE_TITLE'])}
+        </ChecklistRow>
+        <ChecklistRow
+          title="Add description"
+          status={hasDescription}
+          optional
+        >
+          Store in environment variable (seen in nav, under title):
+          {renderEnvVars(['NEXT_PUBLIC_SITE_DESCRIPTION'])}
+        </ChecklistRow>
+        <ChecklistRow
+          title="Add about"
+          status={hasAbout}
+          optional
+        >
+          Store in environment variable (seen in grid sidebar):
+          {renderEnvVars(['NEXT_PUBLIC_SITE_ABOUT'])}
+        </ChecklistRow>
+      </ChecklistGroup>
+      {!simplifiedView && <>
+        <ChecklistGroup
+          title="AI text generation"
+          titleShort="AI"
+          icon={<HiSparkles />}
+          optional
+        >
+          <ChecklistRow
+            title={isAiTextGenerationEnabled && isAnalyzingConfiguration
+              ? 'Testing OpenAI connection'
+              : 'Add OpenAI secret key'}
+            status={isAiTextGenerationEnabled}
+            isPending={isAiTextGenerationEnabled && isAnalyzingConfiguration}
+            optional
+          >
+            {aiError && renderError({
+              connection: { provider: 'OpenAI', error: aiError},
+            })}
+            Store your OpenAI secret key in order to add experimental support
+            for AI-generated text descriptions and enable an invisible field
+            called {'"Semantic Description"'} used to support CMD-K search:
+            {renderEnvVars(['OPENAI_SECRET_KEY'])}
+          </ChecklistRow>
+          <ChecklistRow
+            title={hasRedisStorage && isAnalyzingConfiguration
+              ? 'Testing Redis connection'
+              : 'Enable rate limiting'}
+            status={hasRedisStorage}
+            isPending={hasRedisStorage && isAnalyzingConfiguration}
+            optional
+          >
+            {redisError && renderError({
+              connection: { provider: 'Redis', error: redisError},
+            })}
+            Create Upstash Redis store from storage tab
+            on Vercel dashboard and connect to this project
+            to enable rate limiting
+          </ChecklistRow>
+          <ChecklistRow
+            // eslint-disable-next-line max-len
+            title={`Auto-generated fields: ${aiTextAutoGeneratedFields.join(', ')}`}
+            status={hasAiTextAutoGeneratedFields}
+            optional
+          >
+            Comma-separated fields to auto-generate when
+            uploading photos. Accepted values: title, caption,
+            tags, description, all, or none
+            {' '}
+            (default: {'"title, tags, semantic"'}):
+            {renderEnvVars(['AI_TEXT_AUTO_GENERATED_FIELDS'])}
+          </ChecklistRow>
+        </ChecklistGroup>
+        <ChecklistGroup
+          title="Performance"
+          icon={<RiSpeedMiniLine size={18} />}
+          optional
+        >
+          <ChecklistRow
+            title="Static optimization"
+            status={isStaticallyOptimized}
+            optional
+          >
+            Set environment variable to {'"1"'} to make site more responsive
+            by enabling static optimization
+            (i.e., rendering pages and images at build time):
+            {renderSubStatusWithEnvVar(
+              arePhotosStaticallyOptimized ? 'checked' : 'optional',
+              'NEXT_PUBLIC_STATICALLY_OPTIMIZE_PHOTOS',
+            )}
+            {renderSubStatusWithEnvVar(
+              arePhotoOGImagesStaticallyOptimized ? 'checked' : 'optional',
+              'NEXT_PUBLIC_STATICALLY_OPTIMIZE_PHOTO_OG_IMAGES',
+            )}
+            {renderSubStatusWithEnvVar(
+              arePhotoCategoriesStaticallyOptimized ? 'checked' : 'optional',
+              'NEXT_PUBLIC_STATICALLY_OPTIMIZE_PHOTO_CATEGORIES',
+            )}
+            {renderSubStatusWithEnvVar(
+              // eslint-disable-next-line max-len
+              arePhotoCategoryOgImagesStaticallyOptimized ? 'checked' : 'optional',
+              'NEXT_PUBLIC_STATICALLY_OPTIMIZE_PHOTO_CATEGORY_OG_IMAGES',
+            )}
+          </ChecklistRow>
+          <ChecklistRow
+            title="Preserve original uploads"
+            status={areOriginalUploadsPreserved}
+            optional
+          >
+            Set environment variable to {'"1"'} to prevent
+            image uploads being compressed before storing:
+            {renderEnvVars(['NEXT_PUBLIC_PRESERVE_ORIGINAL_UPLOADS'])}
+          </ChecklistRow>
+          <ChecklistRow
+            title={`Image quality: ${imageQuality}`}
+            status={hasImageQuality}
+            optional
+          >
+            Set environment variable from {'"1-100"'}
+            {' '}
+            to control the quality of large photos
+            ({'"100"'} represents highest quality/largest size):
+            {renderEnvVars(['NEXT_PUBLIC_IMAGE_QUALITY'])}
+          </ChecklistRow>
+          <ChecklistRow
+            title="Image blur"
+            status={isBlurEnabled}
+            optional
+          >
+            Set environment variable to {'"1"'} to prevent
+            image blur data being stored and displayed:
+            {renderEnvVars(['NEXT_PUBLIC_BLUR_DISABLED'])}
+          </ChecklistRow>
+        </ChecklistGroup>
+        <ChecklistGroup
+          title="Visual"
+          icon={<PiPaintBrushHousehold size={19} />}
+          optional
+        >
+          <ChecklistRow
+            title={`Default theme: ${defaultTheme}`}
+            status={hasDefaultTheme}
+            optional
+          >
+            {'Set environment variable to \'light\' or \'dark\''}
+            {' '}
+            to configure initial theme
+            {' '}
+            (defaults to {'\'system\''}):
+            {renderEnvVars(['NEXT_PUBLIC_DEFAULT_THEME'])}
+          </ChecklistRow>
+          <ChecklistRow
+            title="Photo matting"
+            status={arePhotosMatted}
+            optional
+          >
+            Set environment variable to {'"1"'} to constrain the size
+            {' '}
+            of each photo, and display a surrounding border:
+            {renderEnvVars(['NEXT_PUBLIC_MATTE_PHOTOS'])}
+          </ChecklistRow>
+        </ChecklistGroup>
+        <ChecklistGroup
+          title="Display"
+          icon={<BiHide size={18} />}
+          optional
+        >
+          <ChecklistRow
+            title="Show EXIF data"
+            status={showExifInfo}
+            optional
+          >
+            Set environment variable to {'"1"'} to hide EXIF data:
+            {renderEnvVars(['NEXT_PUBLIC_HIDE_EXIF_DATA'])}
+          </ChecklistRow>
+          <ChecklistRow
+            title="Show zoom controls"
+            status={showZoomControls}
+            optional
+          >
+            Set environment variable to {'"1"'} to hide
+            fullscreen photo zoom controls:
+            {renderEnvVars(['NEXT_PUBLIC_HIDE_ZOOM_CONTROLS'])}
+          </ChecklistRow>
+          <ChecklistRow
+            title="Show taken at time"
+            status={showTakenAtTimeHidden}
+            optional
+          >
+            Set environment variable to {'"1"'} to hide
+            taken at time from photo meta:
+            {renderEnvVars(['NEXT_PUBLIC_HIDE_TAKEN_AT_TIME'])}
+          </ChecklistRow>
+          <ChecklistRow
+            title="Show social"
+            status={showSocial}
+            optional
+          >
+            Set environment variable to {'"1"'} to hide
+            {' '}
+            X (formerly Twitter) button from share modal:
+            {renderEnvVars(['NEXT_PUBLIC_HIDE_SOCIAL'])}
+          </ChecklistRow>
+          <ChecklistRow
+            title="Show Fujifilm simulations"
+            status={showFilmSimulations}
+            optional
+          >
+            Set environment variable to {'"1"'} to prevent
+            simulations showing up in /grid sidebar and
+            CMD-K results:
+            {renderEnvVars(['NEXT_PUBLIC_HIDE_FILM_SIMULATIONS'])}
+          </ChecklistRow>
+          <ChecklistRow
+            title="Show repo link"
+            status={showRepoLink}
+            optional
+          >
+            Set environment variable to {'"1"'} to hide footer link:
+            {renderEnvVars(['NEXT_PUBLIC_HIDE_REPO_LINK'])}
+          </ChecklistRow>
+        </ChecklistGroup>
+        <ChecklistGroup
+          title="Grid"
+          icon={<IoMdGrid size={17} />}
+          optional
+        >
+          <ChecklistRow
+            title="Grid homepage"
+            status={isGridHomepageEnabled}
+            optional
+          >
+            Set environment variable to {'"1"'} to show grid layout
+            on homepage:
+            {renderEnvVars(['NEXT_PUBLIC_GRID_HOMEPAGE'])}
+          </ChecklistRow>
+          <ChecklistRow
+            title={`Grid aspect ratio: ${gridAspectRatio}`}
+            status={hasGridAspectRatio}
+            optional
+          >
+            Set environment variable to any number to enforce aspect ratio
+            {' '}
+            (default is {'"1"'}, i.e., square)—set to {'"0"'} to disable:
+            {renderEnvVars(['NEXT_PUBLIC_GRID_ASPECT_RATIO'])}
+          </ChecklistRow>
+          <ChecklistRow
+            title={`Grid density: ${hasHighGridDensity ? 'high' : 'low'}`}
+            status={hasGridDensityPreference}
+            optional
+          >
+            Set environment variable to {'"1"'} to ensure large thumbnails
+            on photo grid views (if not configured, density is based on
+            aspect ratio):
+            {renderEnvVars(['NEXT_PUBLIC_SHOW_LARGE_THUMBNAILS'])}
+          </ChecklistRow>
+        </ChecklistGroup>
+        <ChecklistGroup
+          title="Settings"
+          icon={<HiOutlineCog size={17} className="translate-y-[0.5px]" />}
+          optional
+        >
+          <ChecklistRow
+            title="Geo privacy"
+            status={isGeoPrivacyEnabled}
+            optional
+          >
+            Set environment variable to {'"1"'} to disable
+            collection/display of location-based data:
+            {renderEnvVars(['NEXT_PUBLIC_GEO_PRIVACY'])}
+          </ChecklistRow>
+          <ChecklistRow
+            title="Public downloads"
+            status={arePublicDownloadsEnabled}
+            optional
+          >
+            Set environment variable to {'"1"'} to enable
+            public photo downloads for all visitors:
+            {renderEnvVars(['NEXT_PUBLIC_ALLOW_PUBLIC_DOWNLOADS'])}
+          </ChecklistRow>
+          <ChecklistRow
+            title="Public API"
+            status={isPublicApiEnabled}
+            optional
+          >
+            Set environment variable to {'"1"'} to enable
+            a public API available at <code>/api</code>:
+            {renderEnvVars(['NEXT_PUBLIC_PUBLIC_API'])}
+          </ChecklistRow>
+          <ChecklistRow
+            title="Priority order"
+            status={isPriorityOrderEnabled}
+            optional
+          >
+            Set environment variable to {'"1"'} to prevent
+            priority order photo field affecting photo order:
+            {renderEnvVars(['NEXT_PUBLIC_IGNORE_PRIORITY_ORDER'])}
+          </ChecklistRow>
+          <ChecklistRow
+            title="Legacy OG text alignment"
+            status={isOgTextBottomAligned}
+            optional
+          >
+            Set environment variable to {'"BOTTOM"'} to
+            keep OG image text bottom aligned (default is {'"top"'}):
+            {renderEnvVars(['NEXT_PUBLIC_OG_TEXT_ALIGNMENT'])}
+          </ChecklistRow>
+        </ChecklistGroup>
+        {areInternalToolsEnabled &&
+          <ChecklistGroup
+            title="Internal"
+            icon={<CgDebug size={16} />}
+            optional
+          >
+            <ChecklistRow
+              title="Debug tools"
+              status={areAdminDebugToolsEnabled}
+              optional
+            >
+              Set environment variable to {'"1"'} to temporarily enable
+              features like photo matting, baseline grid, etc.:
+              {renderEnvVars(['ADMIN_DEBUG_TOOLS'])}
             </ChecklistRow>
             <ChecklistRow
-              title="Preserve original uploads"
-              status={areOriginalUploadsPreserved}
+              title="DB optimize"
+              status={isAdminDbOptimizeEnabled}
               optional
             >
               Set environment variable to {'"1"'} to prevent
-              image uploads being compressed before storing:
-              {renderEnvVars(['NEXT_PUBLIC_PRESERVE_ORIGINAL_UPLOADS'])}
+              homepages from seeding infinite scroll on load:
+              {renderEnvVars(['ADMIN_DB_OPTIMIZE'])}
             </ChecklistRow>
             <ChecklistRow
-              title={`Image quality: ${imageQuality}`}
-              status={hasImageQuality}
-              optional
-            >
-              Set environment variable from {'"1-100"'}
-              {' '}
-              to control the quality of large photos
-              ({'"100"'} represents highest quality/largest size):
-              {renderEnvVars(['NEXT_PUBLIC_IMAGE_QUALITY'])}
-            </ChecklistRow>
-            <ChecklistRow
-              title="Image blur"
-              status={isBlurEnabled}
-              optional
-            >
-              Set environment variable to {'"1"'} to prevent
-              image blur data being stored and displayed:
-              {renderEnvVars(['NEXT_PUBLIC_BLUR_DISABLED'])}
-            </ChecklistRow>
-          </ChecklistGroup>
-          <ChecklistGroup
-            title="Visual"
-            icon={<PiPaintBrushHousehold size={19} />}
-            optional
-          >
-            <ChecklistRow
-              title={`Default theme: ${defaultTheme}`}
-              status={hasDefaultTheme}
-              optional
-            >
-              {'Set environment variable to \'light\' or \'dark\''}
-              {' '}
-              to configure initial theme
-              {' '}
-              (defaults to {'\'system\''}):
-              {renderEnvVars(['NEXT_PUBLIC_DEFAULT_THEME'])}
-            </ChecklistRow>
-            <ChecklistRow
-              title="Photo matting"
-              status={arePhotosMatted}
-              optional
-            >
-              Set environment variable to {'"1"'} to constrain the size
-              {' '}
-              of each photo, and display a surrounding border:
-              {renderEnvVars(['NEXT_PUBLIC_MATTE_PHOTOS'])}
-            </ChecklistRow>
-          </ChecklistGroup>
-          <ChecklistGroup
-            title="Display"
-            icon={<BiHide size={18} />}
-            optional
-          >
-            <ChecklistRow
-              title="Show EXIF data"
-              status={showExifInfo}
-              optional
-            >
-              Set environment variable to {'"1"'} to hide EXIF data:
-              {renderEnvVars(['NEXT_PUBLIC_HIDE_EXIF_DATA'])}
-            </ChecklistRow>
-            <ChecklistRow
-              title="Show zoom controls"
-              status={showZoomControls}
-              optional
-            >
-              Set environment variable to {'"1"'} to hide
-              fullscreen photo zoom controls:
-              {renderEnvVars(['NEXT_PUBLIC_HIDE_ZOOM_CONTROLS'])}
-            </ChecklistRow>
-            <ChecklistRow
-              title="Show taken at time"
-              status={showTakenAtTimeHidden}
-              optional
-            >
-              Set environment variable to {'"1"'} to hide
-              taken at time from photo meta:
-              {renderEnvVars(['NEXT_PUBLIC_HIDE_TAKEN_AT_TIME'])}
-            </ChecklistRow>
-            <ChecklistRow
-              title="Show social"
-              status={showSocial}
-              optional
-            >
-              Set environment variable to {'"1"'} to hide
-              {' '}
-              X (formerly Twitter) button from share modal:
-              {renderEnvVars(['NEXT_PUBLIC_HIDE_SOCIAL'])}
-            </ChecklistRow>
-            <ChecklistRow
-              title="Show Fujifilm simulations"
-              status={showFilmSimulations}
-              optional
-            >
-              Set environment variable to {'"1"'} to prevent
-              simulations showing up in /grid sidebar and
-              CMD-K results:
-              {renderEnvVars(['NEXT_PUBLIC_HIDE_FILM_SIMULATIONS'])}
-            </ChecklistRow>
-            <ChecklistRow
-              title="Show repo link"
-              status={showRepoLink}
-              optional
-            >
-              Set environment variable to {'"1"'} to hide footer link:
-              {renderEnvVars(['NEXT_PUBLIC_HIDE_REPO_LINK'])}
-            </ChecklistRow>
-          </ChecklistGroup>
-          <ChecklistGroup
-            title="Grid"
-            icon={<IoMdGrid size={17} />}
-            optional
-          >
-            <ChecklistRow
-              title="Grid homepage"
-              status={isGridHomepageEnabled}
-              optional
-            >
-              Set environment variable to {'"1"'} to show grid layout
-              on homepage:
-              {renderEnvVars(['NEXT_PUBLIC_GRID_HOMEPAGE'])}
-            </ChecklistRow>
-            <ChecklistRow
-              title={`Grid aspect ratio: ${gridAspectRatio}`}
-              status={hasGridAspectRatio}
-              optional
-            >
-              Set environment variable to any number to enforce aspect ratio
-              {' '}
-              (default is {'"1"'}, i.e., square)—set to {'"0"'} to disable:
-              {renderEnvVars(['NEXT_PUBLIC_GRID_ASPECT_RATIO'])}
-            </ChecklistRow>
-            <ChecklistRow
-              title={`Grid density: ${hasHighGridDensity ? 'high' : 'low'}`}
-              status={hasGridDensityPreference}
-              optional
-            >
-              Set environment variable to {'"1"'} to ensure large thumbnails
-              on photo grid views (if not configured, density is based on
-              aspect ratio):
-              {renderEnvVars(['NEXT_PUBLIC_SHOW_LARGE_THUMBNAILS'])}
-            </ChecklistRow>
-          </ChecklistGroup>
-          <ChecklistGroup
-            title="Settings"
-            icon={<HiOutlineCog size={17} className="translate-y-[0.5px]" />}
-            optional
-          >
-            <ChecklistRow
-              title="Geo privacy"
-              status={isGeoPrivacyEnabled}
-              optional
-            >
-              Set environment variable to {'"1"'} to disable
-              collection/display of location-based data:
-              {renderEnvVars(['NEXT_PUBLIC_GEO_PRIVACY'])}
-            </ChecklistRow>
-            <ChecklistRow
-              title="Public downloads"
-              status={arePublicDownloadsEnabled}
+              title="SQL debugging"
+              status={isAdminSqlDebugEnabled}
               optional
             >
               Set environment variable to {'"1"'} to enable
-              public photo downloads for all visitors:
-              {renderEnvVars(['NEXT_PUBLIC_ALLOW_PUBLIC_DOWNLOADS'])}
+              console output for all sql queries:
+              {renderEnvVars(['ADMIN_SQL_DEBUG'])}
             </ChecklistRow>
-            <ChecklistRow
-              title="Public API"
-              status={isPublicApiEnabled}
-              optional
-            >
-              Set environment variable to {'"1"'} to enable
-              a public API available at <code>/api</code>:
-              {renderEnvVars(['NEXT_PUBLIC_PUBLIC_API'])}
-            </ChecklistRow>
-            <ChecklistRow
-              title="Priority order"
-              status={isPriorityOrderEnabled}
-              optional
-            >
-              Set environment variable to {'"1"'} to prevent
-              priority order photo field affecting photo order:
-              {renderEnvVars(['NEXT_PUBLIC_IGNORE_PRIORITY_ORDER'])}
-            </ChecklistRow>
-            <ChecklistRow
-              title="Legacy OG text alignment"
-              status={isOgTextBottomAligned}
-              optional
-            >
-              Set environment variable to {'"BOTTOM"'} to
-              keep OG image text bottom aligned (default is {'"top"'}):
-              {renderEnvVars(['NEXT_PUBLIC_OG_TEXT_ALIGNMENT'])}
-            </ChecklistRow>
-          </ChecklistGroup>
-          {areInternalToolsEnabled &&
-            <ChecklistGroup
-              title="Internal"
-              icon={<CgDebug size={16} />}
-              optional
-            >
-              <ChecklistRow
-                title="Debug tools"
-                status={areAdminDebugToolsEnabled}
-                optional
-              >
-                Set environment variable to {'"1"'} to temporarily enable
-                features like photo matting, baseline grid, etc.:
-                {renderEnvVars(['ADMIN_DEBUG_TOOLS'])}
-              </ChecklistRow>
-              <ChecklistRow
-                title="DB optimize"
-                status={isAdminDbOptimizeEnabled}
-                optional
-              >
-                Set environment variable to {'"1"'} to prevent
-                homepages from seeding infinite scroll on load:
-                {renderEnvVars(['ADMIN_DB_OPTIMIZE'])}
-              </ChecklistRow>
-              <ChecklistRow
-                title="SQL debugging"
-                status={isAdminSqlDebugEnabled}
-                optional
-              >
-                Set environment variable to {'"1"'} to enable
-                console output for all sql queries:
-                {renderEnvVars(['ADMIN_SQL_DEBUG'])}
-              </ChecklistRow>
-            </ChecklistGroup>}
-        </>}
-      </div>
+          </ChecklistGroup>}
+      </>}
       <div className="pl-11 pr-2 sm:pr-11 mt-4 md:mt-7">
         <div>
           Changes to environment variables require a redeploy
diff --git a/src/admin/AdminInfoPage.tsx b/src/admin/AdminInfoPage.tsx
index 3e046c22..d724b13e 100644
--- a/src/admin/AdminInfoPage.tsx
+++ b/src/admin/AdminInfoPage.tsx
@@ -1,5 +1,6 @@
 import Container from '@/components/Container';
 import SiteGrid from '@/components/SiteGrid';
+import clsx from 'clsx/lite';
 import { ReactNode } from 'react';
 
 export default function AdminInfoPage({
@@ -22,7 +23,10 @@ export default function AdminInfoPage({
             {accessory}
           </div>
           <Container spaceChildren={false}>
-            <div className="max-w-xl w-full">
+            <div className={clsx(
+              'max-w-xl w-full',
+              'space-y-6 md:space-y-8',
+            )}>
               {children}
             </div>
           </Container>
diff --git a/src/admin/insights/AdminAppInsightsClient.tsx b/src/admin/insights/AdminAppInsightsClient.tsx
index b318c1ba..3e5fc375 100644
--- a/src/admin/insights/AdminAppInsightsClient.tsx
+++ b/src/admin/insights/AdminAppInsightsClient.tsx
@@ -120,7 +120,7 @@ export default function AdminAppInsightsClient({
   </a>;
 
   return (
-    <div className="space-y-6 md:space-y-8">
+    <>
       {(codeMeta || debug) && <>
         <ScoreCard title="Source code">
           {codeMeta?.didError
@@ -396,6 +396,6 @@ export default function AdminAppInsightsClient({
           content={descriptionWithSpaces}
         />}
       </ScoreCard>
-    </div>
+    </>
   );
 }
diff --git a/src/app/paths.ts b/src/app/paths.ts
index 50834d5e..22d49cde 100644
--- a/src/app/paths.ts
+++ b/src/app/paths.ts
@@ -41,6 +41,7 @@ export const PATH_ADMIN_TAGS          = `${PATH_ADMIN}/tags`;
 export const PATH_ADMIN_CONFIGURATION = `${PATH_ADMIN}/configuration`;
 export const PATH_ADMIN_INSIGHTS      = `${PATH_ADMIN}/insights`;
 export const PATH_ADMIN_BASELINE      = `${PATH_ADMIN}/baseline`;
+export const PATH_ADMIN_COMPONENTS    = `${PATH_ADMIN}/components`;
 
 // Debug paths
 export const PATH_OG_ALL              = `${PATH_OG}/all`;
@@ -60,6 +61,8 @@ export const PATHS_ADMIN = [
   PATH_ADMIN_UPLOADS,
   PATH_ADMIN_TAGS,
   PATH_ADMIN_CONFIGURATION,
+  PATH_ADMIN_BASELINE,
+  PATH_ADMIN_COMPONENTS,
 ];
 
 export const PATHS_TO_CACHE = [
diff --git a/src/components/ChecklistGroup.tsx b/src/components/ChecklistGroup.tsx
index 2cf3a751..ccb26d05 100644
--- a/src/components/ChecklistGroup.tsx
+++ b/src/components/ChecklistGroup.tsx
@@ -4,6 +4,7 @@ import ExperimentalBadge from './ExperimentalBadge';
 import Badge from './Badge';
 import ResponsiveText from './primitives/ResponsiveText';
 import { parameterize } from '@/utility/string';
+import ScoreCard from './ScoreCard';
 
 export default function ChecklistGroup({
   title,
@@ -23,37 +24,29 @@ export default function ChecklistGroup({
   const slug = parameterize(title);
 
   return (
-    <div>
-      <a
-        id={slug}
-        href={`#${slug}`}
-        className={clsx(
-          'inline-flex items-center',
-          'text-gray-600 dark:text-gray-300',
-          'pl-[18px] py-3 text-lg',
-        )}
-      >
-        <span className="w-7 shrink-0">{icon}</span>
-        <span className="inline-flex flex-wrap items-center gap-y-1 gap-x-1.5">
-          <ResponsiveText shortText={titleShort}>
-            {title}
-          </ResponsiveText>
-          {optional &&
-            <Badge type="small" className="translate-y-[0.5px]">
-              Optional
-            </Badge>}
-          {experimental &&
-            <ExperimentalBadge className="translate-y-[0.5px]" />}
-        </span>
-      </a>
-      <div className={clsx(
-        'bg-white dark:bg-black',
-        'dark:text-gray-400',
-        'border border-gray-200 dark:border-gray-800 rounded-md',
-        'divide-y divide-gray-200 dark:divide-gray-800',
-      )}>
-        {children}
-      </div>
-    </div>
+    <ScoreCard title={<a
+      id={slug}
+      href={`#${slug}`}
+      className={clsx(
+        'inline-flex items-center',
+        'text-gray-600 dark:text-gray-300',
+        'sm:pl-1.5',
+      )}
+    >
+      <span className="w-8 sm:w-9 shrink-0">{icon}</span>
+      <span className="inline-flex flex-wrap items-center gap-y-1 gap-x-1.5">
+        <ResponsiveText shortText={titleShort}>
+          {title}
+        </ResponsiveText>
+        {optional &&
+          <Badge type="small" className="translate-y-[0.5px]">
+            Optional
+          </Badge>}
+        {experimental &&
+          <ExperimentalBadge className="translate-y-[0.5px]" />}
+      </span>
+    </a>}>
+      {children}
+    </ScoreCard>
   );
 }
diff --git a/src/components/ChecklistRow.tsx b/src/components/ChecklistRow.tsx
index 47341bbd..fe0ca90f 100644
--- a/src/components/ChecklistRow.tsx
+++ b/src/components/ChecklistRow.tsx
@@ -2,6 +2,7 @@ import { ReactNode } from 'react';
 import { clsx } from 'clsx/lite';
 import StatusIcon from './StatusIcon';
 import ExperimentalBadge from './ExperimentalBadge';
+import ScoreCardRow from './ScoreCardRow';
 
 export default function ChecklistRow({
   title,
@@ -21,31 +22,28 @@ export default function ChecklistRow({
   children: ReactNode
 }) {
   return (
-    <div className={clsx(
-      'flex gap-2.5',
-      'px-4 pt-2 pb-2.5',
-    )}>
-      <StatusIcon
+    <ScoreCardRow
+      icon={<StatusIcon
         type={status
           ? 'checked'
           : showWarning
             ? 'warning'
             : optional ? 'optional' : 'missing'}
         loading={isPending}
-      />
-      <div className="flex flex-col min-w-0 grow">
+      />}
+      content={<>
         <div className={clsx(
           'flex flex-wrap items-center gap-2 pb-0.5',
-          'font-bold dark:text-gray-300',
+          'font-bold text-main',
         )}>
           {title}
           {experimental &&
             <ExperimentalBadge className="translate-y-[-0.5px]" />}
         </div>
-        <div className="leading-relaxed">
+        <div className="leading-relaxed text-medium">
           {children}
         </div>
-      </div>
-    </div>
+      </>}
+    />
   );
 }
diff --git a/src/components/ScoreCard.tsx b/src/components/ScoreCard.tsx
index c01d7840..de9b2763 100644
--- a/src/components/ScoreCard.tsx
+++ b/src/components/ScoreCard.tsx
@@ -6,15 +6,15 @@ export default function ScoreCard({
   children,
   className,
 }: {
-  title?: string,
+  title?: ReactNode,
   children: ReactNode,
   className?: string,
 }) {
   return (
-    <div className="space-y-3">
+    <div className="space-y-2">
       {title &&
         <div className={clsx(
-          'pl-[15px]',
+          'pl-[15px] h-6',
           'uppercase font-medium tracking-wider text-[0.8rem]',
           'text-medium',
         )}>
diff --git a/src/components/ScoreCardRow.tsx b/src/components/ScoreCardRow.tsx
index 0600e5dd..6eb06fd8 100644
--- a/src/components/ScoreCardRow.tsx
+++ b/src/components/ScoreCardRow.tsx
@@ -44,7 +44,7 @@ export default function ScoreCardRow({
       <div className="grow space-y-2 py-1.5 w-full overflow-auto">
         <div className={clsx(
           'text-main pr-2',
-          !isExpanded && 'max-w-full truncate',
+          expandContent && !isExpanded && 'max-w-full truncate',
         )}>
           {typeof content === 'function'
             ? content(isExpanded)
diff --git a/src/components/StatusIcon.tsx b/src/components/StatusIcon.tsx
index d7031f48..8e9c880e 100644
--- a/src/components/StatusIcon.tsx
+++ b/src/components/StatusIcon.tsx
@@ -4,13 +4,16 @@ import {
   BiSolidXSquare,
 } from 'react-icons/bi';
 import Spinner from './Spinner';
+import clsx from 'clsx/lite';
 
 export default function StatusIcon({
   type,
   loading,
+  className,
 }: {
   type: 'checked' | 'missing' | 'warning' | 'optional'
   loading?: boolean
+  className?: string
 }) {
   const getIcon = () => {
     switch (type) {
@@ -21,13 +24,13 @@ export default function StatusIcon({
       />;
     case 'missing':
       return <BiSolidXSquare
-        size={14}
-        className="text-red-400 translate-x-[2px] translate-y-[1.5px]"
+        size={14.5}
+        className="text-red-400"
       />;
     case 'warning':
       return <BiSolidXSquare
-        size={14}
-        className="text-amber-500 translate-x-[2px] translate-y-[1.5px]"
+        size={14.5}
+        className="text-amber-500"
       />;
     case 'optional':
       return <BiSolidCheckboxMinus
@@ -38,12 +41,18 @@ export default function StatusIcon({
   };
 
   return (
-    <div className="min-w-[1.2rem] pt-[1px]">
+    <span className={clsx(
+      'size-[16px]',
+      'inline-flex items-center justify-center',
+      className,
+    )}>
       {loading
-        ? <div className="translate-y-0.5">
-          <Spinner size={14} />
-        </div>
-        : getIcon()}
-    </div>
+        ? <span className="translate-y-[1px]">
+          <Spinner size={12} />
+        </span>
+        : <span>
+          {getIcon()}
+        </span>}
+    </span>
   );
 }
diff --git a/src/components/cmdk/CommandKClient.tsx b/src/components/cmdk/CommandKClient.tsx
index a8c01399..817ddc0f 100644
--- a/src/components/cmdk/CommandKClient.tsx
+++ b/src/components/cmdk/CommandKClient.tsx
@@ -13,6 +13,7 @@ import {
 } from 'react';
 import {
   PATH_ADMIN_BASELINE,
+  PATH_ADMIN_COMPONENTS,
   PATH_ADMIN_CONFIGURATION,
   PATH_ADMIN_INSIGHTS,
   PATH_ADMIN_PHOTOS,
@@ -376,6 +377,9 @@ export default function CommandKClient({
           ? [{
             label: 'Baseline Overview',
             path: PATH_ADMIN_BASELINE,
+          }, {
+            label: 'Components Overview',
+            path: PATH_ADMIN_COMPONENTS,
           }]
           : [])
         .concat({