diff --git a/Discord/createCartMessage.js b/Discord/createCartMessage.js
index 9fd9a1f..c630245 100644
--- a/Discord/createCartMessage.js
+++ b/Discord/createCartMessage.js
@@ -61,12 +61,22 @@ module.exports = async (Discord, client, data) => {
         let carrinhos = require('./discordIndex').carrinhos
 
         if (carrinhos[user]) {
+            let total = 0
+            let produtcs = 0
             await carrinhos[user].forEach(async (element, index) => {
                 let produto = await serverData.products.find(product => product.productID == element.product)
-                const valorReal = produto.price / 100;
+                let valorReal = parseInt(produto.price) / 100;
                 let valorFormatado = valorReal.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
+                total = total + (parseInt(produto.price) * element.quantidade)
+                produtcs = produtcs + parseInt(element.quantidade)
                 fields.push({ name: `${index + 1} - ${produto.productName} - ${element.quantidade}x`, value: valorFormatado },)
             });
+            let valorTotalReal = total / 100;
+            let valorTotalFormatado = valorTotalReal.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
+            produtcs = produtcs.toString()
+            fields.unshift({ name: '\u200B', value: '\u200B' },)
+            fields.unshift({ name: `Quantidade de produtos: `, value: "` " + produtcs + " `", inline:true })
+            fields.unshift({ name: `Valor total: `, value: "` " + valorTotalFormatado + " `", inline:true })
         } else {
             DiscordChannel.delete()
             return
@@ -80,8 +90,8 @@ module.exports = async (Discord, client, data) => {
                 Abaixo são os itens do seu carrinho.`)
 
                     .setAuthor({ name: "SDKApps", iconURL: `https://res.cloudinary.com/dgcnfudya/image/upload/v1711769157/vyzyvzxajoboweorxh9s.png`, url: 'https://discord.gg/sdkapps' })
-                    .addFields(...[{ name: '\u200B', value: '\u200B' }, ...fields, { name: '\u200B', value: '\u200B' },])
-                    .setColor("#6E58C7")
+                    .addFields(...[...fields, { name: '\u200B', value: '\u200B' },])
+                    .setColor('personalize' in serverData && 'colorDest' in serverData.personalize ? serverData.personalize.colorDest : '#6E58C7')
                     .setThumbnail(`https://cdn.discordapp.com/icons/${DiscordServer.id}/${DiscordServer.icon}.webp`)
                     .setFooter({ text: DiscordServer.name, iconURL: `https://cdn.discordapp.com/icons/${DiscordServer.id}/${DiscordServer.icon}.webp` })
             ],
@@ -101,7 +111,7 @@ module.exports = async (Discord, client, data) => {
 
 
     } catch (error) {
-
+        console.log("MainCartERROR: ",error);
     }
 
 
diff --git a/Discord/createProductMessage.js b/Discord/createProductMessage.js
index a2bf381..512f897 100644
--- a/Discord/createProductMessage.js
+++ b/Discord/createProductMessage.js
@@ -248,6 +248,10 @@ module.exports = async (Discord2, client, data) => {
                 
             }
         }
+        if (totalEstoque.length > 25) {
+            const numToRemove = totalEstoque.length - 25;
+            await totalEstoque.splice(-numToRemove);
+        }
         let embed = await DiscordChannel.send({
             files: [attachment],
             components: [
diff --git a/Discord/discordIndex.js b/Discord/discordIndex.js
index 007b037..5f26764 100644
--- a/Discord/discordIndex.js
+++ b/Discord/discordIndex.js
@@ -101,7 +101,7 @@ module.exports = (Discord, client) => {
                                     .setTitle('Selecione abaixo o item que deseja excluir!')
                                     .setDescription(`Clique em cancelar caso desista de excluir um item!`)
                                     .setAuthor({ name: "SDKApps", iconURL: `https://res.cloudinary.com/dgcnfudya/image/upload/v1711769157/vyzyvzxajoboweorxh9s.png`, url: 'https://discord.gg/sdkapps' })
-                                    .setColor("#6E58C7")
+                                    .setColor('personalize' in server && 'colorDest' in server.personalize ? server.personalize.colorDest : '#6E58C7')
                                     .setThumbnail(`https://cdn.discordapp.com/icons/${DiscordServer.id}/${DiscordServer.icon}.webp`)
                                     .setFooter({ text: DiscordServer.name, iconURL: `https://cdn.discordapp.com/icons/${DiscordServer.id}/${DiscordServer.icon}.webp` })
                             ],
@@ -242,13 +242,12 @@ module.exports = (Discord, client) => {
                                 content: `🛒 | Criando o Carrinho...`,
                                 ephemeral: true
                             })
-
                             setTimeout(() => {
                                 interaction.editReply({
                                     content: ` `,
                                     embeds: [
                                         new Discord.EmbedBuilder()
-                                            .setColor("#6E58C7")
+                                            .setColor('personalize' in server && 'colorDest' in server.personalize ? server.personalize.colorDest : '#6E58C7')
                                             .setTitle(`😍 | Carrinho Criado!`)
                                             .setDescription(`<@${interaction.user.id}> **Seu carrinho foi criado com sucesso, fique avontade para adicionar mais produtos.**`)
                                     ],
@@ -388,7 +387,7 @@ module.exports = (Discord, client) => {
                                 content: getData.isProduct1n == true ? '⚠️ 1 ou mais produtos tem o valor inferior a 1 real no pix para cobrir as taxas do cartão temos que reajustar o valor para no minimo 1 real' : '',
                                 embeds: [
                                     new Discord.EmbedBuilder()
-                                        .setColor("#6E58C7")
+                                        .setColor('personalize' in server && 'colorDest' in server.personalize ? server.personalize.colorDest : '#6E58C7')
                                         .setTitle(`💕 | Produto Criado!`)
                                         .setDescription(`<@${interaction.user.id}> **Acesse o link abaixo para fazer o pagamento do seu produto.**`)
                                 ],
@@ -501,10 +500,7 @@ module.exports = (Discord, client) => {
                         })
                     }
                 }
-
-
-
-
+                
                 if (interaction.customId && interaction.customId.includes('remove')) {
                     if (!carrinhos[interaction.user.id]) {
                         await DiscordChannel.delete()
@@ -597,7 +593,7 @@ module.exports = (Discord, client) => {
                                                 .setDescription(`Você recebeu um novo produto de ${SendUser.globalName}`)
                                                 .addFields(...fields)
                                                 .setAuthor({ name: "SDKApps", iconURL: `https://res.cloudinary.com/dgcnfudya/image/upload/v1711769157/vyzyvzxajoboweorxh9s.png`, url: 'https://discord.gg/sdkapps' })
-                                                .setColor("#6E58C7")
+                                                .setColor('personalize' in server && 'colorDest' in server.personalize ? server.personalize.colorDest : '#6E58C7' )
                                                 .setTimestamp()
                                                 .setFooter({ text: DiscordServer.name, iconURL: `https://cdn.discordapp.com/icons/${DiscordServer.id}/${DiscordServer.icon}.webp  ` })
                                         ],
@@ -609,7 +605,7 @@ module.exports = (Discord, client) => {
                                                     .setDescription(`Você enviou um produto para ${user.globalName} Abaixo esta uma copia do que foi enviado:`)
                                                     .addFields(...fields)
                                                     .setAuthor({ name: "SDKApps", iconURL: `https://res.cloudinary.com/dgcnfudya/image/upload/v1711769157/vyzyvzxajoboweorxh9s.png`, url: 'https://discord.gg/sdkapps' })
-                                                    .setColor("#6E58C7")
+                                                    .setColor('personalize' in server && 'colorDest' in server.personalize ? server.personalize.colorDest : '#6E58C7')
                                                     .setTimestamp()
                                                     .setFooter({ text: DiscordServer.name, iconURL: `https://cdn.discordapp.com/icons/${DiscordServer.id}/${DiscordServer.icon}.webp  ` })
                                             ],
@@ -877,7 +873,7 @@ module.exports.sendProductPayment = async (params, id, type) => {
                                 ...fields
                             )
                             .setAuthor({ name: "SDKApps", iconURL: `https://res.cloudinary.com/dgcnfudya/image/upload/v1711769157/vyzyvzxajoboweorxh9s.png`, url: 'https://discord.gg/sdkapps' })
-                            .setColor("#6E58C7")
+                            .setColor('personalize' in serverData && 'colorDest' in serverData.personalize ? serverData.personalize.colorDest : '#6E58C7')
                             .setFooter({ text: DiscordServer.name, iconURL: `https://cdn.discordapp.com/icons/${DiscordServer.id}/${DiscordServer.icon}.webp` })
                     ],
                 }).catch(() => { })
@@ -887,7 +883,7 @@ module.exports.sendProductPayment = async (params, id, type) => {
                             .setTitle('📦 | Sua entrega chegou!')
                             .setDescription(`Abaixo estão os dados da sua entrega:`)
                             .setAuthor({ name: "SDKApps", iconURL: `https://res.cloudinary.com/dgcnfudya/image/upload/v1711769157/vyzyvzxajoboweorxh9s.png`, url: 'https://discord.gg/sdkapps' })
-                            .setColor("#6E58C7")
+                            .setColor('personalize' in serverData && 'colorDest' in serverData.personalize ? serverData.personalize.colorDest : '#6E58C7')
                             .addFields(...fields)
                             .setFooter({ text: DiscordServer.name, iconURL: `https://cdn.discordapp.com/icons/${DiscordServer.id}/${DiscordServer.icon}.webp` })
                     ],
@@ -900,7 +896,7 @@ module.exports.sendProductPayment = async (params, id, type) => {
                             .setTitle('📦 | Sua entrega chegou!')
                             .setDescription(`Enviamos a entrega no seu privado caso não tenha recebido o seu privado pode esta bloqueado então tenha certeza de baixar os arquivos antes que o carrinho seja fechado`)
                             .setAuthor({ name: "SDKApps", iconURL: `https://res.cloudinary.com/dgcnfudya/image/upload/v1711769157/vyzyvzxajoboweorxh9s.png`, url: 'https://discord.gg/sdkapps' })
-                            .setColor("#6E58C7")
+                            .setColor('personalize' in serverData && 'colorDest' in serverData.personalize ? serverData.personalize.colorDest : '#6E58C7')
                             .addFields(...fields)
                             .setFooter({ text: DiscordServer.name, iconURL: `https://cdn.discordapp.com/icons/${DiscordServer.id}/${DiscordServer.icon}.webp` })
                     ],
@@ -925,7 +921,7 @@ module.exports.sendProductPayment = async (params, id, type) => {
                         let valorTotal = 0
                         await carrinho.forEach(async (element, index) => {
                             var product = await serverData.products.find(product => product.productID == element.product)
-                            valorTotal = valorTotal + parseInt(product.price)
+                            valorTotal = valorTotal + (parseInt(product.price) * element.quantidade)
                             fieldsPublic.value += `${index + 1} - ${product.productName} - ${element.quantidade}x\n`
                         });
                         fieldsPublic = { name: fieldsPublic.name, value: "`" + fieldsPublic.value + "`" }
@@ -951,7 +947,7 @@ module.exports.sendProductPayment = async (params, id, type) => {
                                         .setDescription(`Uma nova compra foi feita abaixo está os dados da compra:`)
                                         .addFields(...allfieldsPublic)
                                         .setAuthor({ name: user.globalName, iconURL: userPic })
-                                        .setColor("#6E58C7")
+                                        .setColor('personalize' in serverData && 'colorDest' in serverData.personalize ? serverData.personalize.colorDest : '#6E58C7')
                                         .setTimestamp()
                                         .setFooter({ text: DiscordServer.name, iconURL: `https://cdn.discordapp.com/icons/${DiscordServer.id}/${DiscordServer.icon}.webp  ` })
                                 ],
@@ -963,6 +959,18 @@ module.exports.sendProductPayment = async (params, id, type) => {
                     }
                 }
 
+                if ('personalize' in serverData && 'cargoPay' in serverData.personalize) {
+                    try {
+                        const member = await DiscordServer.members.fetch(params.userID);
+                        const role = await DiscordServer.roles.cache.get(serverData.personalize.cargoPay);
+                        await member.roles.add(role)
+
+                    } catch (error) {
+                        
+                    }
+                }
+
+
                 let analytics = await db.findOne({ colecao: "analytics", doc: serverData.id })
 
                 if (analytics.error == false) {
@@ -1016,6 +1024,7 @@ module.exports.sendProductPayment = async (params, id, type) => {
 
 module.exports.sendDiscordMensageChannel = async (server, channel, title, mensage, user, deleteChannel = false) => {
     try {
+        let serverData = await db.findOne({colecao:'servers',doc:server})
         var DiscordServer = await client.guilds.cache.get(server);
         var DiscordChannel
         if (user) {
@@ -1028,7 +1037,7 @@ module.exports.sendDiscordMensageChannel = async (server, channel, title, mensag
                 new Discord.EmbedBuilder()
                     .setTitle(`${DiscordServer.name} | ${title}`)
                     .setDescription(mensage)
-                    .setColor("#6E58C7")
+                    .setColor('personalize' in serverData && 'colorDest' in serverData.personalize ? serverData.personalize.colorDest : '#6E58C7')
             ]
         }).catch(() => { })
 
diff --git a/handler/commands/util/aprovar.js b/handler/commands/util/aprovar.js
index 70b6419..718a91d 100644
--- a/handler/commands/util/aprovar.js
+++ b/handler/commands/util/aprovar.js
@@ -12,12 +12,12 @@ module.exports = {
                 try {
                     let carrinhos = require("../../../Discord/discordIndex").carrinhos
                     let carrinho = carrinhos[DiscordChannel.topic]
+                    interaction.reply('Compra Aprovada!')
                     await require("../../../Discord/discordIndex").sendProductPayment({
                         serverID:interaction.guildId,
                         userID:DiscordChannel.topic,
                         carrinhos:JSON.stringify(carrinho),
                     }, null, 'aprovado')
-                    interaction.reply('Compra Aprovada!')
                 } catch (error) {
                     console.log(error);
                 }
diff --git a/index.js b/index.js
index e61a45e..44c4558 100644
--- a/index.js
+++ b/index.js
@@ -116,11 +116,11 @@ client.on("interactionCreate", async (interaction) => {
 
 
 client.on(Events.ShardError, error => {
-	console.error('A websocket connection encountered an error:', error);
+    console.error('A websocket connection encountered an error:', error);
 });
 
 process.on('unhandledRejection', error => {
-	console.error('Unhandled promise rejection:', error);
+    console.error('Unhandled promise rejection:', error);
 });
 
 //TODO------------WEB PAGE--------------
@@ -402,7 +402,25 @@ app.get('/server/personalize/:id', functions.subscriptionStatus, async (req, res
         return
     }
 
-    res.render('personalize', { host: `${webConfig.host}`, user: user, server: server })
+    const guilds = client.guilds.cache;
+    const isBotInServer = guilds.has(serverID);
+    if (!isBotInServer) {
+        res.redirect(`/addbot/${serverID}`)
+        return
+    }
+    let guild = guilds.get(serverID)
+    const roles = guild.roles.cache;
+    const filteredRoles = roles.filter(role => {
+        return role.name !== '@everyone' && role.managed !== true;
+    });
+    const roleObjects = filteredRoles.map(role => {
+        return {
+            name: role.name,
+            id: role.id
+        };
+    });
+
+    res.render('personalize', { host: `${webConfig.host}`, cargos: roleObjects, user: user, server: server })
 })
 
 app.get('/server/analytics/:id', functions.subscriptionStatus, async (req, res) => {
@@ -585,8 +603,8 @@ app.post('/config/change', async (req, res) => {
         let server = await db.findOne({ colecao: "servers", doc: req.body.serverID })
         if (server.error == false) {
             let configs = {
-                noticeChannel:null,
-                publicBuyChannel:null
+                noticeChannel: null,
+                publicBuyChannel: null
             }
             if ('configs' in server) {
                 configs = server.configs
@@ -605,19 +623,19 @@ app.post('/config/change', async (req, res) => {
     }
 })
 
-app.post('/config/blockbank',async(req,res)=>{
+app.post('/config/blockbank', async (req, res) => {
     try {
         let bank = req.body.bank
-        let possiveisBanks = ['Banco Inter S.A.',"Picpay Serviços S.A."]
+        let possiveisBanks = ['Banco Inter S.A.', "Picpay Serviços S.A."]
         if (!possiveisBanks.includes(bank)) {
-            res.status(200).json({ success: false, data:'Banco invalido!' })
+            res.status(200).json({ success: false, data: 'Banco invalido!' })
             return
         }
 
-        let server = await db.findOne({colecao:"servers",doc:req.body.serverID})
+        let server = await db.findOne({ colecao: "servers", doc: req.body.serverID })
 
         if (!server) {
-            res.status(200).json({ success: false, data:'Erro ao bloquear o banco!' })
+            res.status(200).json({ success: false, data: 'Erro ao bloquear o banco!' })
             return
         }
 
@@ -627,20 +645,20 @@ app.post('/config/blockbank',async(req,res)=>{
         }
 
         if (blockBank.includes(bank)) {
-            res.status(200).json({ success: false, data:'Este banco ja foi bloqueado!' })
-            return 
+            res.status(200).json({ success: false, data: 'Este banco ja foi bloqueado!' })
+            return
         }
 
 
         blockBank.push(bank)
 
-        db.update('servers',req.body.serverID,{
-            blockBank:blockBank
+        db.update('servers', req.body.serverID, {
+            blockBank: blockBank
         })
         res.status(200).json({ success: true })
     } catch (error) {
         console.log(error);
-        res.status(200).json({ success: false, data:'Erro ao bloquear o banco!' })
+        res.status(200).json({ success: false, data: 'Erro ao bloquear o banco!' })
     }
 
 
@@ -729,7 +747,43 @@ app.post('/perms/get', async (req, res) => {
     }
 })
 
+app.post('/personalize/change',async(req,res)=>{
+    try {
+        let server = await db.findOne({ colecao: "servers", doc: req.body.serverID })
+        if (server) {
+            let Newpersonalize = {
+                colorDest:null,
+                cargoPay:null
+            }
+            if ('personalize' in server) {
+                Newpersonalize = server.personalize
+            }
+
+            if ('colorDest' in req.body) {
+                Newpersonalize.colorDest = req.body.colorDest
+            }
+            if ('cargoPay' in req.body) {
+                Newpersonalize.cargoPay = req.body.cargoPay
+            }
 
+            db.update('servers',req.body.serverID,{
+                personalize:Newpersonalize
+            })
+            if (!res.headersSent) {
+                res.status(200).json({success:true,})
+            }
+        }else{
+            if (!res.headersSent) {
+                res.status(200).json({success:false,data:'Erro ao tentar recuperar o servidor!'})
+            }
+        }
+    } catch (error) {
+        console.log("PersonalizeChangeERROR: ",error);
+        if (!res.headersSent) {
+            res.status(200).json({success:false,data:'Erro ao tentar mudar a personalização!'})
+        }
+    }
+})
 
 
 
diff --git a/public/css/personalize.css b/public/css/personalize.css
new file mode 100644
index 0000000..67406a3
--- /dev/null
+++ b/public/css/personalize.css
@@ -0,0 +1,64 @@
+#main-containner {
+    width: calc(100% - 18em);
+    position: relative;
+    top: 5em;
+    left: 18em;
+    display: flex;
+    justify-content: start;
+    flex-direction: column;
+    align-items: center;
+    padding: 1em;
+    min-height: calc(100vh - 5em);
+    
+}
+
+#main-content-row {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    min-height: calc(100vh - 12em);
+    gap: 2em;
+    padding: 1em;
+    padding-right: 3em;
+    padding-left: 3em;
+    margin-top: 5em;
+}
+
+.itens-col{
+    padding: 1em;
+    width: 26em;
+    height: 20em;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    border-radius: var(--border-radius-mid);
+    background-color: var(--tertiary-color);
+}
+.itens-content-col{
+    width: 100%;
+    flex: 1;
+    margin-top: 1em;
+    display: flex;
+    flex-direction: column;
+}
+#color-dest-preview{
+    display: block;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    background-color: var(--main-color-purple);
+    border-radius: var(--border-radius-mid);
+    &::before{
+        content:"Clique aqui";
+        color: var(--color-text-primary);
+        font-family: 'poppins';
+    }
+}
+
+#saveCargoPay{
+    margin-top: 1em;
+    
+}
\ No newline at end of file
diff --git a/public/css/reusable/styleRoot.css b/public/css/reusable/styleRoot.css
index 11f615f..e16e8bc 100644
--- a/public/css/reusable/styleRoot.css
+++ b/public/css/reusable/styleRoot.css
@@ -62,6 +62,15 @@
 
 }
 
+.main-color-purple {
+    background-color: var(--main-color-purple) !important;
+}
+.secundary-color-purple {
+    background-color: var(--secundary-color-purple) !important;
+}
+.tert-color-purple {
+    background-color: var(tert-color-purple) !important;
+}
 .greenColor {
     background-color: var(--green-color) !important;
 }
diff --git a/public/js/personalize.js b/public/js/personalize.js
new file mode 100644
index 0000000..206f07b
--- /dev/null
+++ b/public/js/personalize.js
@@ -0,0 +1,61 @@
+let serverID = location.pathname.replace('/server/personalize/', "")
+
+
+
+if ('personalize' in server) {
+    if ('colorDest' in server.personalize) {
+        document.getElementById('color-dest-preview').style.backgroundColor = server.personalize.colorDest
+    }   
+    if ('cargoPay' in server.personalize) {
+        const opcoes = document.getElementById('cargos-input-list').querySelectorAll('option');
+        opcoes.forEach(option => {
+            if (option.getAttribute('data-cargos') == server.personalize.cargoPay) {
+                document.getElementById('cargos-name-input').value = option.value
+            }
+        });
+    }
+}
+
+
+
+async function sendPersonalize(type,data) {
+    let session = await fetch('/personalize/change', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+            [type]: data,
+            serverID:serverID
+        }),
+    }).then(response => { return response.json() })
+    if (session.success == true) {
+        successNotify('Personalização alterada!')
+    }else{
+        errorNotify(session.data)
+    }
+}
+
+document.getElementById('saveCargoPay').addEventListener('click',async()=>{
+    const opcoes = document.getElementById('cargos-input-list').querySelectorAll('option');
+    let cargosID = null;
+
+    await opcoes.forEach(option => {
+        if (option.value === document.getElementById('cargos-name-input').value) {
+            cargosID = option.getAttribute('data-cargos');
+        }
+    });
+    if (!cargosID) {
+        errorNotify("Selecione um cargo primeiro")
+        return
+    }
+    sendPersonalize('cargoPay',cargosID)
+})
+
+document.getElementById('color-dest-input').addEventListener('change',()=>{
+    sendPersonalize('colorDest',document.getElementById('color-dest-input').value)
+})
+
+document.getElementById('color-dest-input').addEventListener('input',()=>{
+    document.getElementById('color-dest-preview').style.backgroundColor = document.getElementById('color-dest-input').value
+})
\ No newline at end of file
diff --git a/public/js/sales.js b/public/js/sales.js
index 52b0bcf..93109b2 100644
--- a/public/js/sales.js
+++ b/public/js/sales.js
@@ -2,6 +2,11 @@
 let serverID = location.pathname.replace('/server/sales/', "")
 
 
+
+document.getElementById('add-pix-popup-tutorial').addEventListener('click',()=>{
+    window.open('https://www.youtube.com/watch?v=jK4JmvWDvAc',"_blank")
+})
+
 if (document.getElementById('bank-input-list')) {
     loadBanks();
     async function loadBanks() {
diff --git a/views/personalize.ejs b/views/personalize.ejs
index 018d74f..d93c538 100644
--- a/views/personalize.ejs
+++ b/views/personalize.ejs
@@ -3,7 +3,7 @@
 <head>
     <%- include('./reusable/head.ejs') %>
     <title>SDK - Personalizar</title>
-    <link rel="stylesheet" href="<%= host %>/public/css/">
+    <link rel="stylesheet" href="<%= host %>/public/css/personalize.css">
 </head>
 <body>
     <div id="body-containner">
@@ -11,11 +11,43 @@
         <div id="containner">
             <%- include('./reusable/header.ejs',{index:3}) %>
             <main id="main-containner">
-                
+                <h1 class="title-col">Modifique o seu bot da maneira que desejar!</h1>
+                <p class="desc-col">As alterações são salvas assim que modificadas!</p>
+                <div id="main-content-row">
+                    <div class="itens-col">
+                        <h1 class="title-col">Cor destaque!</h1>
+                        <p class="desc-col">Isso modifica as cores principais quando o bot enviar uma mensagem!</p>
+                        <div class="linha" style="margin-top: 1em;"></div>
+                        <div class="itens-content-col">
+                            <label for="color-dest-input" id="color-dest-preview"></label>
+                            <input type="color" id="color-dest-input" hidden>
+                        </div>
+                    </div>
+                    <div class="itens-col">
+                        <h1 class="title-col">Cargo de comprador!</h1>
+                        <p class="desc-col">⚠ O cargo do bot tem que está acima do cargo que sera dado ao usuario!</p>
+                        <div class="linha" style="margin-top: 1em;"></div>
+                        <div class="itens-content-col">
+                            <input required type="text" class="input-padrao" list="cargos-input-list" placeholder="Pesquise o cargo..." id="cargos-name-input">
+                            <datalist id="cargos-input-list">
+                                <% cargos.forEach(element => { %>
+                                    <option data-cargos="<%= element.id %>" value="<%= element.name %>"></option>
+                                <% }) %>
+                            </datalist>
+                            <button id="saveCargoPay" class="button-padrao">Salvar Cargo</button>
+                        </div>
+                    </div>
+                </div>
             </main>
         </div>
     </div>
+    <div>
+        <div id="serverData" data-server="<%= JSON.stringify(server) %>"></div>
+        <script>
+            let server = JSON.parse(document.getElementById('serverData').getAttribute('data-server'))
+        </script>
+    </div>
     <%- include('./reusable/script.ejs') %>
-    <script src="<%= host %>/public/js/"></script>
+    <script src="<%= host %>/public/js/personalize.js"></script>
 </body>
 </html>
\ No newline at end of file