diff --git a/frontend/src/app/admin/configuracoes/page.tsx b/frontend/src/app/admin/configuracoes/page.tsx
index af58695..0faf0a2 100644
--- a/frontend/src/app/admin/configuracoes/page.tsx
+++ b/frontend/src/app/admin/configuracoes/page.tsx
@@ -17,6 +17,7 @@ const PRESET_COLORS = [
 
 export default function ConfiguracoesPage() {
   const { success, error: showError } = useToast();
+  const [activeTab, setActiveTab] = useState<'personalizacao' | 'backup'>('personalizacao');
   const [primaryColor, setPrimaryColor] = useState('#FF6B35');
   const [customColor, setCustomColor] = useState('#FF6B35');
   const [loading, setLoading] = useState(true);
@@ -88,185 +89,213 @@ export default function ConfiguracoesPage() {
       <div className="flex items-center justify-between">
         <div>
           <h1 className="text-3xl font-bold font-headline text-secondary dark:text-white">Configurações</h1>
-          <p className="text-gray-500 dark:text-gray-400 mt-1">Personalize a aparência do seu site</p>
+          <p className="text-gray-500 dark:text-gray-400 mt-1">Gerencie as configurações do seu site</p>
         </div>
       </div>
 
-      {/* Color Settings */}
-      <div className="bg-white dark:bg-secondary p-8 rounded-2xl border border-gray-200 dark:border-white/10 shadow-sm">
-        <div className="flex items-start gap-4 mb-6">
-          <div className="w-12 h-12 bg-linear-to-br from-primary to-orange-600 rounded-xl flex items-center justify-center shadow-lg shadow-primary/30">
-            <i className="ri-palette-line text-2xl text-white"></i>
-          </div>
-          <div className="flex-1">
-            <h2 className="text-xl font-bold text-secondary dark:text-white mb-1">Cor Primária</h2>
-            <p className="text-gray-500 dark:text-gray-400 text-sm">
-              Escolha a cor principal que representa sua marca. Ela será aplicada em botões, links e destaques.
-            </p>
-          </div>
+      {/* Tabs Navigation */}
+      <div className="bg-white dark:bg-secondary border border-gray-200 dark:border-white/10 rounded-xl overflow-hidden">
+        <div className="flex gap-0">
+          <button
+            onClick={() => setActiveTab('personalizacao')}
+            className={`flex-1 px-6 py-4 font-bold flex items-center justify-center gap-2 border-b-2 transition-all ${
+              activeTab === 'personalizacao'
+                ? 'bg-primary/5 dark:bg-primary/10 text-primary border-primary'
+                : 'text-gray-600 dark:text-gray-400 border-transparent hover:bg-gray-50 dark:hover:bg-white/5'
+            }`}
+          >
+            <i className="ri-palette-line text-xl"></i>
+            <span className="hidden sm:inline">Personalização</span>
+            <span className="sm:hidden">Design</span>
+          </button>
+          <button
+            onClick={() => setActiveTab('backup')}
+            className={`flex-1 px-6 py-4 font-bold flex items-center justify-center gap-2 border-b-2 transition-all ${
+              activeTab === 'backup'
+                ? 'bg-primary/5 dark:bg-primary/10 text-primary border-primary'
+                : 'text-gray-600 dark:text-gray-400 border-transparent hover:bg-gray-50 dark:hover:bg-white/5'
+            }`}
+          >
+            <i className="ri-database-backup-line text-xl"></i>
+            <span className="hidden sm:inline">Backup</span>
+            <span className="sm:hidden">Bkp</span>
+          </button>
         </div>
+      </div>
 
-        {/* Preset Colors */}
-        <div className="mb-8">
-          <label className="block text-sm font-bold text-gray-700 dark:text-gray-300 mb-4">
-            Cores Predefinidas
-          </label>
-          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-            {PRESET_COLORS.map((color) => (
-              <button
-                key={color.value}
-                type="button"
-                onClick={() => applyPreviewColor(color.value)}
-                className={`group relative p-4 rounded-xl border-2 transition-all ${
-                  primaryColor === color.value
-                    ? 'border-primary shadow-lg shadow-primary/20'
-                    : 'border-gray-200 dark:border-white/10 hover:border-gray-300 dark:hover:border-white/20'
-                }`}
-              >
-                <div className={`w-full h-16 rounded-lg bg-linear-to-br ${color.gradient} mb-3 shadow-md group-hover:scale-105 transition-transform`}></div>
-                <p className="text-sm font-medium text-gray-900 dark:text-white text-center">
-                  {color.name}
+      {/* Tab Content - Personalização */}
+      {activeTab === 'personalizacao' && (
+        <div className="space-y-6">
+          {/* Color Settings */}
+          <div className="bg-white dark:bg-secondary p-8 rounded-2xl border border-gray-200 dark:border-white/10 shadow-sm">
+            <div className="flex items-start gap-4 mb-6">
+              <div className="w-12 h-12 bg-linear-to-br from-primary to-orange-600 rounded-xl flex items-center justify-center shadow-lg shadow-primary/30">
+                <i className="ri-palette-line text-2xl text-white"></i>
+              </div>
+              <div className="flex-1">
+                <h2 className="text-xl font-bold text-secondary dark:text-white mb-1">Cor Primária</h2>
+                <p className="text-gray-500 dark:text-gray-400 text-sm">
+                  Escolha a cor principal que representa sua marca. Ela será aplicada em botões, links e destaques.
                 </p>
-                {primaryColor === color.value && (
-                  <div className="absolute top-2 right-2 w-6 h-6 bg-primary rounded-full flex items-center justify-center shadow-lg">
-                    <i className="ri-check-line text-white text-sm"></i>
-                  </div>
-                )}
-              </button>
-            ))}
-          </div>
-        </div>
-
-        {/* Custom Color Picker */}
-        <div className="border-t border-gray-200 dark:border-white/10 pt-8">
-          <label className="block text-sm font-bold text-gray-700 dark:text-gray-300 mb-4">
-            Cor Personalizada
-          </label>
-          <div className="flex items-center gap-4">
-            <div className="relative">
-              <input
-                type="color"
-                value={customColor}
-                onChange={(e) => applyPreviewColor(e.target.value)}
-                className="w-20 h-20 rounded-xl border-2 border-gray-200 dark:border-white/10 cursor-pointer shadow-md"
-              />
+              </div>
             </div>
+
+            {/* Preset Colors */}
+            <div className="mb-8">
+              <label className="block text-sm font-bold text-gray-700 dark:text-gray-300 mb-4">
+                Cores Predefinidas
+              </label>
+              <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+                {PRESET_COLORS.map((color) => (
+                  <button
+                    key={color.value}
+                    type="button"
+                    onClick={() => applyPreviewColor(color.value)}
+                    className={`group relative p-4 rounded-xl border-2 transition-all ${
+                      primaryColor === color.value
+                        ? 'border-primary shadow-lg shadow-primary/20'
+                        : 'border-gray-200 dark:border-white/10 hover:border-gray-300 dark:hover:border-white/20'
+                    }`}
+                  >
+                    <div className={`w-full h-16 rounded-lg bg-linear-to-br ${color.gradient} mb-3 shadow-md group-hover:scale-105 transition-transform`}></div>
+                    <p className="text-sm font-medium text-gray-900 dark:text-white text-center">
+                      {color.name}
+                    </p>
+                    {primaryColor === color.value && (
+                      <div className="absolute top-2 right-2 w-6 h-6 bg-primary rounded-full flex items-center justify-center shadow-lg">
+                        <i className="ri-check-line text-white text-sm"></i>
+                      </div>
+                    )}
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            {/* Custom Color Picker */}
+            <div className="border-t border-gray-200 dark:border-white/10 pt-8">
+              <label className="block text-sm font-bold text-gray-700 dark:text-gray-300 mb-4">
+                Cor Personalizada
+              </label>
+              <div className="flex items-center gap-4">
+                <div className="relative">
+                  <input
+                    type="color"
+                    value={customColor}
+                    onChange={(e) => applyPreviewColor(e.target.value)}
+                    className="w-20 h-20 rounded-xl border-2 border-gray-200 dark:border-white/10 cursor-pointer shadow-md"
+                  />
+                </div>
+                <div className="flex-1">
+                  <input
+                    type="text"
+                    value={customColor}
+                    onChange={(e) => {
+                      setCustomColor(e.target.value);
+                      if (/^#[0-9A-F]{6}$/i.test(e.target.value)) {
+                        applyPreviewColor(e.target.value);
+                      }
+                    }}
+                    placeholder="#FF6B35"
+                    className="w-full px-4 py-3 bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-xl text-gray-900 dark:text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all font-mono"
+                  />
+                  <p className="text-xs text-gray-500 dark:text-gray-400 mt-2">
+                    Digite o código hexadecimal da cor (ex: #FF6B35)
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            {/* Preview Section */}
+            <div className="border-t border-gray-200 dark:border-white/10 mt-8 pt-8">
+              <label className="block text-sm font-bold text-gray-700 dark:text-gray-300 mb-4">
+                Prévia dos Elementos
+              </label>
+              <div className="bg-gray-50 dark:bg-white/5 p-6 rounded-xl space-y-4">
+                <button 
+                  className="px-6 py-3 bg-primary text-white rounded-xl font-bold hover:opacity-90 transition-all shadow-lg shadow-primary/30"
+                  style={{ backgroundColor: primaryColor }}
+                >
+                  Botão Primário
+                </button>
+                <div className="flex items-center gap-3">
+                  <div 
+                    className="w-12 h-12 rounded-xl flex items-center justify-center text-white shadow-md"
+                    style={{ backgroundColor: primaryColor }}
+                  >
+                    <i className="ri-star-fill text-xl"></i>
+                  </div>
+                  <div>
+                    <p className="font-bold" style={{ color: primaryColor }}>Texto em Destaque</p>
+                    <p className="text-sm text-gray-600 dark:text-gray-400">Exemplo de link ou texto importante</p>
+                  </div>
+                </div>
+                <div className="flex items-center gap-2">
+                  <span 
+                    className="px-3 py-1 rounded-full text-sm font-medium text-white"
+                    style={{ backgroundColor: primaryColor }}
+                  >
+                    Badge
+                  </span>
+                  <span 
+                    className="px-3 py-1 rounded-full text-sm font-medium border-2"
+                    style={{ borderColor: primaryColor, color: primaryColor }}
+                  >
+                    Outline Badge
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Save Button */}
+          <div className="flex items-center justify-end gap-4">
+            <button
+              onClick={fetchConfig}
+              className="px-6 py-3 border border-gray-200 dark:border-white/10 text-gray-600 dark:text-gray-300 rounded-xl font-bold hover:bg-gray-50 dark:hover:bg-white/5 transition-colors"
+            >
+              Cancelar
+            </button>
+            <button
+              onClick={handleSave}
+              disabled={saving}
+              className="px-6 py-3 bg-primary text-white rounded-xl font-bold hover-primary transition-colors shadow-lg shadow-primary/20 flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
+              style={{ backgroundColor: saving ? undefined : primaryColor }}
+            >
+              {saving ? (
+                <>
+                  <i className="ri-loader-4-line animate-spin"></i>
+                  Salvando...
+                </>
+              ) : (
+                <>
+                  <i className="ri-save-line"></i>
+                  Salvar Alterações
+                </>
+              )}
+            </button>
+          </div>
+
+          {/* Info Alert */}
+          <div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-xl p-4 flex items-start gap-3">
+            <i className="ri-information-line text-blue-600 dark:text-blue-400 text-xl mt-0.5"></i>
             <div className="flex-1">
-              <input
-                type="text"
-                value={customColor}
-                onChange={(e) => {
-                  setCustomColor(e.target.value);
-                  if (/^#[0-9A-F]{6}$/i.test(e.target.value)) {
-                    applyPreviewColor(e.target.value);
-                  }
-                }}
-                placeholder="#FF6B35"
-                className="w-full px-4 py-3 bg-gray-50 dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-xl text-gray-900 dark:text-white focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all font-mono"
-              />
-              <p className="text-xs text-gray-500 dark:text-gray-400 mt-2">
-                Digite o código hexadecimal da cor (ex: #FF6B35)
+              <p className="text-sm text-blue-900 dark:text-blue-200 font-medium mb-1">
+                Aplicação Global
+              </p>
+              <p className="text-sm text-blue-700 dark:text-blue-300">
+                A cor primária será aplicada automaticamente em todo o site institucional e painel administrativo.
               </p>
             </div>
           </div>
         </div>
+      )}
 
-        {/* Preview Section */}
-        <div className="border-t border-gray-200 dark:border-white/10 mt-8 pt-8">
-          <label className="block text-sm font-bold text-gray-700 dark:text-gray-300 mb-4">
-            Prévia dos Elementos
-          </label>
-          <div className="bg-gray-50 dark:bg-white/5 p-6 rounded-xl space-y-4">
-            <button 
-              className="px-6 py-3 bg-primary text-white rounded-xl font-bold hover:opacity-90 transition-all shadow-lg shadow-primary/30"
-              style={{ backgroundColor: primaryColor }}
-            >
-              Botão Primário
-            </button>
-            <div className="flex items-center gap-3">
-              <div 
-                className="w-12 h-12 rounded-xl flex items-center justify-center text-white shadow-md"
-                style={{ backgroundColor: primaryColor }}
-              >
-                <i className="ri-star-fill text-xl"></i>
-              </div>
-              <div>
-                <p className="font-bold" style={{ color: primaryColor }}>Texto em Destaque</p>
-                <p className="text-sm text-gray-600 dark:text-gray-400">Exemplo de link ou texto importante</p>
-              </div>
-            </div>
-            <div className="flex items-center gap-2">
-              <span 
-                className="px-3 py-1 rounded-full text-sm font-medium text-white"
-                style={{ backgroundColor: primaryColor }}
-              >
-                Badge
-              </span>
-              <span 
-                className="px-3 py-1 rounded-full text-sm font-medium border-2"
-                style={{ borderColor: primaryColor, color: primaryColor }}
-              >
-                Outline Badge
-              </span>
-            </div>
-          </div>
+      {/* Tab Content - Backup */}
+      {activeTab === 'backup' && (
+        <div>
+          <BackupManager />
         </div>
-      </div>
-
-      {/* Save Button */}
-      <div className="flex items-center justify-end gap-4">
-        <button
-          onClick={fetchConfig}
-          className="px-6 py-3 border border-gray-200 dark:border-white/10 text-gray-600 dark:text-gray-300 rounded-xl font-bold hover:bg-gray-50 dark:hover:bg-white/5 transition-colors"
-        >
-          Cancelar
-        </button>
-        <button
-          onClick={handleSave}
-          disabled={saving}
-          className="px-6 py-3 bg-primary text-white rounded-xl font-bold hover-primary transition-colors shadow-lg shadow-primary/20 flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
-          style={{ backgroundColor: saving ? undefined : primaryColor }}
-        >
-          {saving ? (
-            <>
-              <i className="ri-loader-4-line animate-spin"></i>
-              Salvando...
-            </>
-          ) : (
-            <>
-              <i className="ri-save-line"></i>
-              Salvar Alterações
-            </>
-          )}
-        </button>
-      </div>
-
-      {/* Info Alert */}
-      <div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-xl p-4 flex items-start gap-3">
-        <i className="ri-information-line text-blue-600 dark:text-blue-400 text-xl mt-0.5"></i>
-        <div className="flex-1">
-          <p className="text-sm text-blue-900 dark:text-blue-200 font-medium mb-1">
-            Aplicação Global
-          </p>
-          <p className="text-sm text-blue-700 dark:text-blue-300">
-            A cor primária será aplicada automaticamente em todo o site institucional e painel administrativo.
-          </p>
-        </div>
-      </div>
-
-      {/* Backup Manager Section */}
-      <div className="border-t-2 border-gray-200 dark:border-white/10 pt-12">
-        <div className="flex items-center gap-4 mb-8">
-          <div className="w-12 h-12 bg-linear-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center shadow-lg shadow-blue-500/30">
-            <i className="ri-database-backup-line text-2xl text-white"></i>
-          </div>
-          <div>
-            <h2 className="text-2xl font-bold font-headline text-secondary dark:text-white">Backup & Restauração</h2>
-            <p className="text-gray-500 dark:text-gray-400 mt-1">Gerencie backups completos do seu banco de dados e arquivos</p>
-          </div>
-        </div>
-        <BackupManager />
-      </div>
+      )}
     </div>
   );
 }