diff --git a/src/components/DashBoard/Discord/Plugins/Leveling.js b/src/components/DashBoard/Discord/Plugins/Leveling.js
index f887bcb..6bdc0a5 100644
--- a/src/components/DashBoard/Discord/Plugins/Leveling.js
+++ b/src/components/DashBoard/Discord/Plugins/Leveling.js
@@ -4,25 +4,38 @@ import { DiscordContext } from "../../../../contexts/DiscordContext";
 import { Link } from "react-router-dom";
 import StyledSelect from "../../../../styled-components/StyledSelect";
 import { Typography } from "@material-ui/core";
-import PrettoSlider from "../../../../styled-components/PrettoSlider"
+import PrettoSlider from "../../../../styled-components/PrettoSlider";
+import FancySwitch from "../../../../styled-components/FancySwitch";
+import {
+	parseSelectValue,
+	TransformObjectToSelectValue,
+	channelLabel,
+} from "../../../../utils/functions";
+import RoleItem from "../../../../styled-components/RoleItem";
 
-const marks = [...Array(7)].map((item, index) => ({ value: (index / 2), label: `x${(index / 2)}` }));
+const marks = [...Array(7)].map((item, index) => ({ value: index / 2, label: `x${index / 2}` }));
 
 const Leveling = ({ location, guild: userConnectedGuildInfo }) => {
-	const [levelUpAnnouncement, setLevelUpAnnouncement] = useState();
+	const [levelUpAnnouncement, setLevelUpAnnouncement] = useState(false);
 	const [announcementChannel, setAnnouncementChannel] = useState(false);
-	const [levelUpMessage, setLevelUpMessage] = useState("Congrats {player}, you leveled up to level {level}!");
-	const {  setDashboardOpen, saveOnType } = useContext(DiscordContext);
+	const [noXpRoles, setNoXpRoles] = useState([]);
+	const [noXpChannels, setNoXpChannels] = useState([]);
+	const [generalScaling, setGeneralScaling] = useState(1);
+	const [levelUpMessage, setLevelUpMessage] = useState(
+		"Congrats {player}, you leveled up to level {level}!"
+	);
+	const { setDashboardOpen, saveOnType } = useContext(DiscordContext);
 	const guildId = userConnectedGuildInfo?.id;
 
 	const handleTypeSelect = useCallback(
 		async e => {
 			const guildLevelRef = firebase.db.collection("Leveling").doc(guildId);
-			setLevelUpAnnouncement(e);
+			let value = e.target.checked ? 3 : 1;
+			setLevelUpAnnouncement(e.target.checked);
 			try {
-				await guildLevelRef.update({ type: e.value });
+				await guildLevelRef.update({ type: value });
 			} catch (err) {
-				await guildLevelRef.set({ type: e.value });
+				await guildLevelRef.set({ type: value });
 			}
 			setDashboardOpen(true);
 		},
@@ -48,10 +61,12 @@ const Leveling = ({ location, guild: userConnectedGuildInfo }) => {
 		async e => {
 			const guildLevelRef = firebase.db.collection("Leveling").doc(guildId);
 			setAnnouncementChannel(e);
+			const notifications = parseSelectValue(e);
+			console.log(notifications);
 			try {
-				guildLevelRef.update({ notifications: e.value });
+				await guildLevelRef.update({ notifications });
 			} catch (err) {
-				guildLevelRef.set({ notifications: e.value });
+				await guildLevelRef.set({ notifications });
 			}
 			setDashboardOpen(true);
 		},
@@ -60,36 +75,105 @@ const Leveling = ({ location, guild: userConnectedGuildInfo }) => {
 
 	useEffect(() => {
 		(async () => {
-			const guild = await firebase.db
-				.collection("Leveling")
-				.doc(guildId || " ")
-				.get();
-			const data = guild.data();
-			if (data) {
-				const id = data.notifications;
-				if (id) {
-					const apiUrl = `${process.env.REACT_APP_API_URL}/resolvechannel?guild=${guildId}&channel=${id}`;
-					const response = await fetch(apiUrl);
-					const channel = await response.json();
-					setAnnouncementChannel({
-						value: id,
-						label: (
-							<>
-								<span>{channel.name}</span>
-								<span className="channel-category">{channel.parent}</span>
-							</>
-						),
-					});
-					setLevelUpAnnouncement({
-						value: data.type,
-						label: ["Disabled", "Current Channel", "Custom Channel"][data.type - 1],
-					});
-					setLevelUpMessage(data.message);
+			try {
+				const guildRef = await firebase.db.collection("Leveling").doc(guildId || " ");
+				const guild = await guildRef.get();
+				const settings = await guildRef.collection("settings").get();
+				const data = guild.data();
+				const settingsData = settings.docs
+					.map(doc => ({ id: doc.id, ...doc.data() }))
+					.reduce((acc, cur) => ({ [cur.id]: cur, ...acc }), {});
+				if (settingsData) {
+					setGeneralScaling(settingsData.scaling.general || 1);
+					setNoXpRoles(
+						settingsData.bannedItems?.roles
+							?.map(id => userConnectedGuildInfo.roles.find(role => role.id === id))
+							?.map(role => ({
+								value: TransformObjectToSelectValue(role),
+								label: <RoleItem {...role}>{role.name}</RoleItem>,
+							})) || []
+					);
+					setNoXpChannels(
+						settingsData.bannedItems?.channels
+							?.map(id =>
+								userConnectedGuildInfo.channels.find(channel => channel.id === id)
+							)
+							.map(channel => ({
+								value: TransformObjectToSelectValue(channel),
+								label: channelLabel(channel),
+							})) || []
+					);
+				}
+				if (data) {
+					const id = data.notifications;
+					if (id) {
+						const apiUrl = `${process.env.REACT_APP_API_URL}/resolvechannel?guild=${guildId}&channel=${id}`;
+						const response = await fetch(apiUrl);
+						const channel = await response.json();
+						setAnnouncementChannel({
+							value: id,
+							label: channelLabel(channel),
+						});
+						setLevelUpAnnouncement({
+							value: data.type,
+							label: ["Disabled", "Current Channel", "Custom Channel"][data.type - 1],
+						});
+						setLevelUpMessage(data.message);
+					}
 				}
+			} catch (err) {
+				console.log(err.message);
 			}
 		})();
 	}, [location, guildId]);
 
+	const handleGeneralScaling = async (e, value) => {
+		const guildLevelRef = firebase.db
+			.collection("Leveling")
+			.doc(guildId)
+			.collection("settings")
+			.doc("scaling");
+		setGeneralScaling(value);
+		try {
+			await guildLevelRef.update({ general: value });
+		} catch (err) {
+			await guildLevelRef.set({ general: value });
+		}
+		setDashboardOpen(true);
+	};
+
+	const handleNoXpRoleSelect = async e => {
+		const guildLevelRef = firebase.db
+			.collection("Leveling")
+			.doc(guildId)
+			.collection("settings")
+			.doc("bannedItems");
+		setNoXpRoles(e);
+		const value = parseSelectValue(e);
+		try {
+			await guildLevelRef.update({ roles: value });
+		} catch (err) {
+			await guildLevelRef.set({ roles: value });
+		}
+		setDashboardOpen(true);
+	};
+
+	const handleNoXpChannelSelect = async e => {
+		const guildLevelRef = firebase.db
+			.collection("Leveling")
+			.doc(guildId)
+			.collection("settings")
+			.doc("bannedItems");
+		setNoXpChannels(e);
+		const value = parseSelectValue(e);
+		try {
+			await guildLevelRef.update({ channels: value });
+		} catch (err) {
+			await guildLevelRef.set({ channels: value });
+		}
+		setDashboardOpen(true);
+	};
+
 	return (
 		<div>
 			<div className="plugin-item-header">
@@ -102,9 +186,14 @@ const Leveling = ({ location, guild: userConnectedGuildInfo }) => {
 			<div className="plugin-item-subheader flex">
 				<span>
 					<h2>Leveling Up</h2>
-					<h4>Whenever a user gains a level, DisStreamBot can send a personalized message.</h4>
+					<h4>
+						Whenever a user gains a level, DisStreamBot can send a personalized message.
+					</h4>
 				</span>
-				<Link className="leader-board-link" to={`/leaderboard/${userConnectedGuildInfo?.id}`}>
+				<Link
+					className="leader-board-link"
+					to={`/leaderboard/${userConnectedGuildInfo?.id}`}
+				>
 					Leaderboard
 				</Link>
 			</div>
@@ -113,43 +202,36 @@ const Leveling = ({ location, guild: userConnectedGuildInfo }) => {
 					<div className="channels">
 						<div id="announcement-type">
 							<h5 className="bold uppercase">Level up announcement</h5>
+							<FancySwitch
+								checked={levelUpAnnouncement}
+								onChange={handleTypeSelect}
+								name="enable-message"
+							/>
+						</div>
+						<div id="announcement-channel">
+							<h5 className="bold uppercase">ANNOUNCEMENT CHANNEL</h5>
 							<StyledSelect
+								isDisabled={!levelUpAnnouncement}
 								closeMenuOnSelect
-								onChange={handleTypeSelect}
-								placeholder="Select Annoucement type"
-								value={levelUpAnnouncement}
-								options={[
-									{ value: 1, label: "Disabled" },
-									{ value: 3, label: "Custom Channel" },
-								].map(type => type)}
+								onChange={handleAnnoucmentSelect}
+								placeholder="Select Annoucement Channel"
+								value={announcementChannel}
+								options={userConnectedGuildInfo?.channels
+									?.sort((a, b) => a.parent.localeCompare(b.parent))
+									?.map(channel => ({
+										value: TransformObjectToSelectValue(channel),
+										label: channelLabel(channel),
+									}))}
 							/>
 						</div>
-						{levelUpAnnouncement?.value === 3 && (
-							<div id="announcement-channel">
-								<h5 className="bold uppercase">ANNOUNCEMENT CHANNEL</h5>
-								<StyledSelect
-									closeMenuOnSelect
-									onChange={handleAnnoucmentSelect}
-									placeholder="Select Annoucement Channel"
-									value={announcementChannel}
-									options={userConnectedGuildInfo?.channels
-										?.sort((a, b) => a.parent.localeCompare(b.parent))
-										?.map(channel => ({
-											value: channel.id,
-											label: (
-												<>
-													<span>{channel.name}</span>
-													<span className="channel-category">{channel.parent}</span>
-												</>
-											),
-										}))}
-								/>
-							</div>
-						)}
 					</div>
 					<div className="message">
 						<h5>LEVEL UP ANNOUNCEMENT MESSAGE</h5>
-						<textarea disabled={levelUpAnnouncement.value===1} value={levelUpMessage} onChange={handleMessageChange}></textarea>
+						<textarea
+							disabled={!levelUpAnnouncement}
+							value={levelUpMessage}
+							onChange={handleMessageChange}
+						></textarea>
 					</div>
 				</div>
 			</div>
@@ -160,58 +242,59 @@ const Leveling = ({ location, guild: userConnectedGuildInfo }) => {
 						General XP Scaling
 					</Typography>
 					<PrettoSlider
+						value={generalScaling}
+						onChange={handleGeneralScaling}
 						defaultValue={1}
 						getAriaValueText={value => `${value}xp`}
-						aria-labelledby="discrete-slider"
+						aria-labelledby="xp scaling"
 						valueLabelDisplay="auto"
 						step={0.5}
-						// marks
 						min={0}
 						max={3}
 						marks={marks}
 					/>
 				</div>
 				<hr />
-				
+
 				<h4 className="plugin-section-title">No Rank Items</h4>
+
 				<div className="no-rank-items">
 					<div>
-						<StyledSelect
-							closeMenuOnSelect
-							onChange={() => {}}
-							placeholder="No XP Roles"
-							value={""}
-							options={userConnectedGuildInfo?.channels
-								?.sort((a, b) => a.parent.localeCompare(b.parent))
-								?.map(channel => ({
-									value: channel.id,
-									label: (
-										<>
-											<span>{channel.name}</span>
-											<span className="channel-category">{channel.parent}</span>
-										</>
-									),
-								}))}
-						/>
+						<h4 className="plugin-section-title">No XP Roles</h4>
+						<h4 className="plugin-section-title">No XP Channels</h4>
 					</div>
 					<div>
-						<StyledSelect
-							closeMenuOnSelect
-							onChange={() => {}}
-							placeholder="No XP Channels"
-							value={""}
-							options={userConnectedGuildInfo?.channels
-								?.sort((a, b) => a.parent.localeCompare(b.parent))
-								?.map(channel => ({
-									value: channel.id,
-									label: (
-										<>
-											<span>{channel.name}</span>
-											<span className="channel-category">{channel.parent}</span>
-										</>
-									),
-								}))}
-						/>
+						<div>
+							<StyledSelect
+								isMulti
+								closeMenuOnSelect={false}
+								onChange={handleNoXpRoleSelect}
+								placeholder="No XP Roles"
+								value={noXpRoles}
+								options={userConnectedGuildInfo?.roles
+									?.sort((a, b) => b.rawPosition - a.rawPosition)
+									?.map(role => ({
+										value: TransformObjectToSelectValue(role),
+										label: <RoleItem {...role}>{role.name}</RoleItem>,
+									}))}
+							/>
+						</div>
+
+						<div>
+							<StyledSelect
+								isMulti
+								closeMenuOnSelect={false}
+								onChange={handleNoXpChannelSelect}
+								placeholder="No XP Channels"
+								value={noXpChannels}
+								options={userConnectedGuildInfo?.channels
+									?.sort((a, b) => a.parent.localeCompare(b.parent))
+									?.map(channel => ({
+										value: TransformObjectToSelectValue(channel),
+										label: channelLabel(channel),
+									}))}
+							/>
+						</div>
 					</div>
 				</div>
 			</div>
diff --git a/src/components/DashBoard/Discord/Plugins/PluginCard.scss b/src/components/DashBoard/Discord/Plugins/PluginCard.scss
index 29fb1c6..b95c437 100644
--- a/src/components/DashBoard/Discord/Plugins/PluginCard.scss
+++ b/src/components/DashBoard/Discord/Plugins/PluginCard.scss
@@ -2,52 +2,51 @@
 	$background-color: #212121;
 	background: $background-color;
 	transition: 0.25s;
-    margin: 0.5rem;
-    cursor: pointer;
-    position: relative;
-    &.disabled{
-        background: lighten($background-color, 2);
-        opacity: .45;
-        &:after {
+	margin: 0.5rem;
+	cursor: pointer;
+	position: relative;
+	&.disabled {
+		background: lighten($background-color, 2);
+		opacity: 0.45;
+		&:after {
 			content: "Click to Enable";
 			background: #b92838;
-            width: fit-content;
-            position: absolute;
-            top: 0;
-            right: 0;
-            transform: translate(10%, -25%);
-            padding: .25rem .4rem;
-            border-radius: 5rem;
+			width: fit-content;
+			position: absolute;
+			top: 0;
+			right: 0;
+			transform: translate(10%, -25%);
+			padding: 0.25rem 0.4rem;
+			border-radius: 5rem;
 		}
-    }
+	}
 	&.coming-soon {
-        cursor: initial;
-        position: relative;
-        opacity: .8;
+		cursor: initial;
+		position: relative;
+		opacity: 0.8;
 		&:after {
 			content: "Coming Soon";
 			background: var(--disstreamchat-blue);
-            width: fit-content;
-            position: absolute;
-            top: 0;
-            right: 0;
-            transform: translate(10%, -25%);
-            padding: .25rem .4rem;
-            border-radius: 5rem;
+			width: fit-content;
+			position: absolute;
+			top: 0;
+			right: 0;
+			transform: translate(10%, -25%);
+			padding: 0.25rem 0.4rem;
+			border-radius: 5rem;
 		}
 	}
 	&:not(.coming-soon):hover {
 		background: lighten($color: $background-color, $amount: 3);
-    }
-    a{
-
-        display: flex;
-        width: 300px;
-        height: 100px;
-    }
-    display: flex;
-    width: 300px;
-    height: 100px;
+	}
+	a {
+		display: flex;
+		width: 300px;
+		height: 100px;
+	}
+	display: flex;
+	width: 300px;
+	height: 100px;
 	padding: 20px;
 	align-items: center;
 	box-sizing: content-box !important;
@@ -73,121 +72,134 @@
 		color: #aaa;
 		margin-top: 0.25rem;
 		line-height: 1.5rem;
-    }
-    @media screen and (max-width: 440px) {
-        width: 200px;
-        h4{
-            font-size: .75rem;
-            line-height: 1rem;;
-        }
-    }
+	}
+	@media screen and (max-width: 440px) {
+		width: 200px;
+		h4 {
+			font-size: 0.75rem;
+			line-height: 1rem;
+		}
+	}
 }
 
-.plugin-overlay{
-    background: lighten(#21212133, 10) !important;
+.plugin-overlay {
+	background: lighten(#21212133, 10) !important;
 }
 
-.plugin-modal{
-    // display: flex;
-    padding: 0 !important;
-    overflow: hidden;
-    min-width: fit-content;
-    button{
-        outline: none !important
-    }
-    .top-portion{
-        width: 580px;
-        height: 75px;
-        background: #2e3235;
-        display: flex;
-        align-items: center;
-        padding: 0 1rem;
-        box-sizing: border-box !important;
-        justify-content: space-between;
-        h2{
-            font-size: 1.25rem;
-            text-transform: uppercase;
-        }
-        button{
-            background: #212121;
-            border: none;
-            color: white;
-            border-radius: .125rem;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            padding: .25rem;
-        }
-    };
-    .bottom-buttons{
-        padding: 0 1rem;
-        box-sizing: border-box !important;
-        justify-content: space-between;
-        width: 580px;
-        height: 75px;
-        background: #212121;
-        display: flex;
-        align-items: center;
-        justify-content: flex-end;
-        button{
-            $blue: #2d688d;
-            padding: .5rem 1rem;
-            background: $blue;
-            color: white;
-            border: none;
-            border-radius: .125rem;
-            &:hover{
-                background: darken($blue, 5)
-            }
-        }
-    }
+.plugin-modal {
+	// display: flex;
+	padding: 0 !important;
+	overflow: hidden;
+	min-width: fit-content;
+	button {
+		outline: none !important;
+	}
+	.top-portion {
+		width: 580px;
+		height: 75px;
+		background: #2e3235;
+		display: flex;
+		align-items: center;
+		padding: 0 1rem;
+		box-sizing: border-box !important;
+		justify-content: space-between;
+		h2 {
+			font-size: 1.25rem;
+			text-transform: uppercase;
+		}
+		button {
+			background: #212121;
+			border: none;
+			color: white;
+			border-radius: 0.125rem;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			padding: 0.25rem;
+		}
+	}
+	.bottom-buttons {
+		padding: 0 1rem;
+		box-sizing: border-box !important;
+		justify-content: space-between;
+		width: 580px;
+		height: 75px;
+		background: #212121;
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		button {
+			$blue: #2d688d;
+			padding: 0.5rem 1rem;
+			background: $blue;
+			color: white;
+			border: none;
+			border-radius: 0.125rem;
+			&:hover {
+				background: darken($blue, 5);
+			}
+		}
+	}
 }
 
-.scaling-div{
-    padding: 0 1.5rem
+.scaling-div {
+	padding: 0 1.5rem;
 }
 
 #root {
-    .MuiSlider-markLabelActive, .MuiSlider-markLabel{
-        color: white;
-    }
-    .MuiSlider-markActive, .MuiSlider-mark{
-        opacity: 0;
-
-    }
+	.MuiSlider-markLabelActive,
+	.MuiSlider-markLabel {
+		color: white;
+	}
+	.MuiSlider-markActive,
+	.MuiSlider-mark {
+		opacity: 0;
+	}
 }
 
-.no-rank-items{
-    display: flex;
-    justify-content: space-between;
-    width: 100% !important;
-    & > div{
-        margin: 0 1rem;
-        &:first-child{
-            margin-left: 0;
-        }
-        &:last-child{
-            margin-right: 0;
-        }
-        width: 100%
-    }
-    @media screen and (max-width: 700px) {
-        flex-direction: column;
-        align-items: center;
-        & > div{
-            margin: .5rem 0;
-        }
-    }
+.no-rank-items {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	flex-direction: column;
+	width: 100% !important;
+	& > div {
+		flex: 1;
+		width: 100%;
+		display: flex;
+		justify-content: space-between;
+		&:first-child {
+			display: grid;
+			grid-template-columns: 1fr 1fr;
+		}
+	}
+	& > div > div {
+		// margin: 0 1rem;
+		&:first-child {
+			margin-left: 0;
+		}
+		&:last-child {
+			margin-right: 0;
+		}
+		width: 100%;
+		flex: 1;
+	}
+	@media screen and (max-width: 700px) {
+		flex-direction: column;
+		align-items: center;
+		& > div {
+			margin: 0.5rem 0;
+		}
+	}
 }
 
-.MuiSvgIcon-root{
-    font-size: inherit !important
+.MuiSvgIcon-root {
+	font-size: inherit !important
     ;
 }
 
-.plugin-switch{
-    position: absolute;
-    top: -16px;
-    right: -25px;
+.plugin-switch {
+	position: absolute;
+	top: -16px;
+	right: -25px;
 }
-
diff --git a/src/styled-components/FancySwitch.js b/src/styled-components/FancySwitch.js
index 0cf5e98..deeac97 100644
--- a/src/styled-components/FancySwitch.js
+++ b/src/styled-components/FancySwitch.js
@@ -28,6 +28,6 @@ const FancySwitch = withStyles({
 			opacity: "1 !important",
 		},
 	},
-})(Switch);
+})(props => <Switch color="primary" {...props}/>);
 
 export default FancySwitch
\ No newline at end of file