diff --git a/src/app/[locale]/(protected)/settings/profile/page.tsx b/src/app/[locale]/(protected)/settings/profile/page.tsx
index 3b14e97..6776077 100644
--- a/src/app/[locale]/(protected)/settings/profile/page.tsx
+++ b/src/app/[locale]/(protected)/settings/profile/page.tsx
@@ -1,20 +1,15 @@
 import { UpdateAvatarCard } from '@/components/settings/profile/update-avatar-card';
 import { UpdateNameCard } from '@/components/settings/profile/update-name-card';
-import { websiteConfig } from '@/config/website';
 
 export default function ProfilePage() {
-  const enableUpdateAvatar = websiteConfig.features.enableUpdateAvatar;
-
   return (
     <div className="flex flex-col gap-8">
-      {enableUpdateAvatar && (
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
-          <UpdateAvatarCard />
-        </div>
-      )}
       <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
         <UpdateNameCard />
       </div>
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+        <UpdateAvatarCard />
+      </div>
     </div>
   );
 }
diff --git a/src/components/settings/profile/update-avatar-card.tsx b/src/components/settings/profile/update-avatar-card.tsx
index 2da97f4..ff23b8d 100644
--- a/src/components/settings/profile/update-avatar-card.tsx
+++ b/src/components/settings/profile/update-avatar-card.tsx
@@ -11,6 +11,7 @@ import {
   CardHeader,
   CardTitle,
 } from '@/components/ui/card';
+import { websiteConfig } from '@/config/website';
 import { authClient } from '@/lib/auth-client';
 import { cn } from '@/lib/utils';
 import { uploadFileFromBrowser } from '@/storage/client';
@@ -27,6 +28,14 @@ interface UpdateAvatarCardProps {
  * Update the user's avatar
  */
 export function UpdateAvatarCard({ className }: UpdateAvatarCardProps) {
+  // show nothing if storage is disabled or update avatar is disabled
+  if (
+    !websiteConfig.storage.enable ||
+    !websiteConfig.features.enableUpdateAvatar
+  ) {
+    return null;
+  }
+
   const t = useTranslations('Dashboard.settings.profile');
   const [isUploading, setIsUploading] = useState(false);
   const [error, setError] = useState<string | undefined>('');
diff --git a/src/config/website.tsx b/src/config/website.tsx
index fe0a735..eda1eba 100644
--- a/src/config/website.tsx
+++ b/src/config/website.tsx
@@ -86,6 +86,7 @@ export const websiteConfig: WebsiteConfig = {
     autoSubscribeAfterSignUp: true,
   },
   storage: {
+    enable: true,
     provider: 's3',
   },
   payment: {
diff --git a/src/types/index.d.ts b/src/types/index.d.ts
index f96f5f9..56fe117 100644
--- a/src/types/index.d.ts
+++ b/src/types/index.d.ts
@@ -146,6 +146,7 @@ export interface NewsletterConfig {
  * Storage configuration
  */
 export interface StorageConfig {
+  enable: boolean;                   // Whether to enable the storage
   provider: 's3';                    // The storage provider, only s3 is supported for now
 }