diff --git a/src/App.css b/src/App.css
index 33a9731..31df293 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,122 +1,123 @@
 :root {
-	--discord-white: #ffffff; /* Discord's white color */
-	--discord-blue: #7289da; /* Discord's primary blue color */
-	--discord-gray-1: #424549; /* Discord's primary blue color */
-	--discord-gray-2: #36393e; /* Discord's primary blue color */
-	--discord-gray-3: #282b30; /* Discord's primary blue color */
-	--discord-gray-4: #1e2124; /* Discord's primary blue color */
-	--warning-red: #e32727;
+	--bg: #16171a;
+	--card-bg: #1d1f23;
+	--card-border: #26282e;
+	--input-bg: #25272c;
+	--input-border: #34363c;
+	--text: #f3f2ef;
+	--text-muted: #9a9da4;
+	--text-secondary: #c7c9ce;
+	--accent: #c98a3f;
+	--accent-text: #1b1408;
+	--red: #e2585c;
+	--green: #5cb37a;
+	--orange: #e0aa4a;
+	--warning-red: #e2585c;
+}
+
+@keyframes toastSlideIn {
+	from {
+		opacity: 0;
+		transform: translateY(8px);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
 }
 
 body {
-	background-color: '--discord-gray-1'; /* Replace #ffffff with the color code or name of your desired background color */
+	background-color: var(--bg);
+	margin: 0;
+}
+
+::selection {
+	background: var(--accent);
+	color: var(--accent-text);
 }
 
 h1 {
-	color: var(--discord-white);
+	color: var(--text);
 	margin: 0;
 	padding: 10px 0;
 }
 
 .section-heading {
-	color: var(--discord-white);
-	margin: 0 0 4px 0;
-	padding: 0;
-	text-align: left;
+	margin: 0;
+	font-size: 14px;
+	font-weight: 700;
+	color: var(--text);
+	text-transform: uppercase;
+	letter-spacing: 0.04em;
 }
 
 .property-editor {
 	width: 100%;
 	max-width: 100%;
 	text-align: left;
-	align-self: flex-start;
 }
 
 .property-section {
 	width: 100%;
 	display: flex;
 	flex-direction: column;
-	align-items: flex-start;
-	gap: 10px;
+	align-items: stretch;
+	gap: 16px;
 }
 
 a {
 	text-decoration: none !important;
 }
 
-/* styles.css */
-
-/* styles.css */
-
 .dropdown-item {
-	padding: 5px;
+	padding: 10px 14px;
+	font-size: 13px;
 	cursor: pointer;
+	color: var(--text);
 }
 
 .dropdown-item:hover {
-	background-color: var(--discord-gray-2);
+	background-color: var(--input-bg);
 }
 
-.Top-banner {
-	background-color: var(--discord-gray-3);
-	color: var(--discord-white);
-	text-align: left; /* Align text to the left */
-	padding: 20px; /* Increase header padding for a larger header */
+.chip {
 	display: flex;
-	justify-content: space-between; /* Add space between text and the right edge */
-	align-items: center; /* Center vertically */
-}
-
-#entry-list {
-	display: flex;
-	flex-direction: column;
-	align-items: flex-start; /* Align entries to the left */
-	background-color: var(--discord-gray-1);
-}
-
-#display {
-	display: flex;
-	flex-direction: column;
-	align-items: flex-start; /* Align entries to the left */
-	background-color: var(--discord-gray-1);
-	color: var(--discord-white);
-	/* width: 100vw; Stretch the entry list to the bottom of the screen */
+	align-items: center;
+	gap: 6px;
+	background: var(--input-bg);
+	border: 1px solid var(--input-border);
+	border-radius: 999px;
+	padding: 4px 6px 4px 12px;
+	font-size: 12px;
+	color: var(--text);
 }
 
-#display-list {
-	display: flex;
-	flex-direction: column;
-	align-items: flex-start; /* Align entries to the left */
-	background-color: var(--discord-gray-1);
-	color: var(--discord-white);
-	width: 420px; /* Stretch the entry list to the bottom of the screen */
+.chip button {
+	background: none;
+	border: none;
+	color: var(--text-muted);
+	cursor: pointer;
+	font-size: 13px;
+	padding: 0 4px;
 }
 
-.entry {
-	/* margin-bottom: 10px; */
-	padding: 10px;
-	background-color: var(--discord-gray-2);
-	width: 500px;
-	text-align: left;
-	color: var(--discord-white);
+.segmented-control {
 	display: flex;
-	flex-direction: column;
-	gap: 5px;
-	border-radius: 8px;
-}
-
-.special-text {
-	width: 237.5px !important;
+	align-items: center;
+	gap: 2px;
+	background: var(--input-bg);
+	border: 1px solid var(--input-border);
+	border-radius: 9px;
+	padding: 3px;
 }
 
-#entry {
-	margin-bottom: 10px;
-	padding: 10px;
-	width: 400px;
-	background-color: var(--discord-gray-2);
-	text-align: left;
-	color: var(--discord-white);
-	border-radius: 8px;
+.segmented-control button {
+	border: none;
+	border-radius: 6px;
+	padding: 7px 14px;
+	font-size: 12.5px;
+	font-weight: 600;
+	cursor: pointer;
 }
 
 .toggle-button-shell {
@@ -126,33 +127,130 @@ a {
 }
 
 .toggle-switch {
-	width: 60px;
-	height: 30px;
-	background-color: #ccc;
-	border-radius: 30px;
+	width: 34px;
+	height: 19px;
+	background-color: var(--input-border);
+	border-radius: 999px;
 	position: relative;
 	cursor: pointer;
-	transition: background-color 0.3s;
+	transition: background-color 0.2s;
 	flex-shrink: 0;
 }
 
 .toggle-switch.toggled {
-	background-color: var(--discord-blue);
+	background-color: var(--accent);
 }
 
 .toggle-knob {
-	width: 28px;
-	height: 28px;
-	background-color: white;
+	width: 15px;
+	height: 15px;
+	background-color: var(--text);
 	border-radius: 50%;
 	position: absolute;
-	top: 1px;
-	left: 1px;
-	transition: left 0.3s;
+	top: 2px;
+	left: 2px;
+	transition: left 0.2s;
 }
 
 .toggle-switch.toggled .toggle-knob {
-	left: 31px;
+	left: 17px;
+}
+
+.toggle-switch.toggle-switch-lg {
+	width: 38px;
+	height: 21px;
+}
+
+.toggle-switch.toggle-switch-lg .toggle-knob {
+	width: 17px;
+	height: 17px;
+}
+
+.toggle-switch.toggle-switch-lg.toggled .toggle-knob {
+	left: 19px;
+}
+
+.main-grid {
+	grid-template-columns: minmax(0, 1fr) 420px;
+}
+
+@media (max-width: 820px) {
+	.main-grid {
+		grid-template-columns: 1fr;
+	}
+}
+
+.card-section {
+	background: var(--card-bg);
+	border: 1px solid var(--card-border);
+	border-radius: 12px;
+	padding: 20px;
+}
+
+.header-button {
+	height: 36px;
+	padding: 0 14px;
+	border-radius: 7px;
+	border: 1px solid var(--input-border);
+	background: var(--input-bg);
+	color: var(--text);
+	font-size: 12.5px;
+	font-weight: 600;
+	cursor: pointer;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.header-button-primary {
+	border: none;
+	background: var(--accent);
+	color: var(--accent-text);
+	font-weight: 700;
+}
+
+.field-label {
+	display: block;
+	font-size: 12px;
+	color: var(--text-muted);
+	margin-bottom: 6px;
+}
+
+.field-input {
+	width: 100%;
+	box-sizing: border-box;
+	background: var(--input-bg);
+	border: 1px solid var(--input-border);
+	color: var(--text);
+	border-radius: 8px;
+	padding: 10px 12px;
+	font-size: 13px;
+	outline: none;
+}
+
+.preview-card {
+	display: flex;
+	gap: 12px;
+	background: var(--card-bg);
+	border: 1px solid var(--card-border);
+	border-radius: 12px;
+	padding: 14px;
+}
+
+.toast {
+	animation: toastSlideIn 0.25s ease;
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	padding: 12px 14px;
+	border-radius: 10px;
+	background: var(--card-bg);
+	border: 1px solid var(--input-border);
+	border-left: 3px solid var(--accent);
+	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
+	font-size: 13px;
+	line-height: 1.4;
+	color: var(--text);
 }
 
 .App {
@@ -171,18 +269,18 @@ a {
 }
 
 .App-header {
-	background-color: var(--discord-gray-1);
+	background-color: var(--bg);
 	min-height: 100vh;
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
 	font-size: calc(10px + 2vmin);
-	color: var(--discord-white);
+	color: var(--text);
 }
 
 .App-link {
-	color: var(--discord-blue);
+	color: var(--accent);
 }
 
 @keyframes App-logo-spin {
diff --git a/src/App.tsx b/src/App.tsx
index 9e41132..12bbaa1 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react'
+import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
 import MaterialEntry from './Components/TextInputs/MaterialId'
 import MaterialDisplayName from './Components/TextInputs/MaterialDisplayName'
 import SliderEntry from './Components/Sliders/SliderEntry'
@@ -128,10 +128,6 @@ const AppContent: React.FC = () => {
 		setColorPalette(colors)
 	}
 
-	const hasPropertyContent = (field: 'properties' | 'display_properties' | 'hidden_properties') => {
-		return Object.keys(propertyFields[field]).length > 0
-	}
-
 	const handlePropertyFieldSubmit = (field: 'properties' | 'display_properties' | 'hidden_properties') => {
 		return (value: Record<string, unknown>) => {
 			setPropertyFields((prev) => ({
@@ -155,42 +151,6 @@ const AppContent: React.FC = () => {
 		}))
 	}
 
-	const buttonStyle = {
-		padding: '10px',
-		margin: '5px',
-		backgroundColor: '#7289DA', // Discord's primary blue color
-		color: '#ffffff', // Discord's white color
-		border: 'none',
-		borderRadius: '5px',
-		cursor: 'pointer'
-	}
-
-	const rootStyle = {
-		'--button-background': '#7289DA', // Discord's primary blue color
-		'--button-text-color': '#ffffff' // Discord's white color
-	}
-
-	const floatingToggleBoxStyle = {
-		display: 'flex',
-		flexDirection: 'column' as const,
-		gap: '8px',
-		padding: '10px',
-		borderRadius: '10px',
-		backgroundColor: '#2f3136',
-		border: '1px solid #3a3f4b',
-		color: '#ffffff',
-		minWidth: '280px',
-		boxShadow: '0 4px 12px rgba(0, 0, 0, 0.25)'
-	}
-
-	const floatingToggleRowStyle = {
-		display: 'flex',
-		alignItems: 'center',
-		justifyContent: 'flex-start',
-		gap: '10px',
-		padding: '6px 0'
-	}
-
 	const loadedPropertyFields = useMemo(
 		() => ({
 			properties: loadData?.properties && typeof loadData.properties === 'object' && !Array.isArray(loadData.properties) ? loadData.properties : {},
@@ -206,12 +166,6 @@ const AppContent: React.FC = () => {
 		[loadData]
 	)
 
-	const hasAnyPropertySectionEnabled = Object.values(enabledPropertyFields).some(Boolean)
-	const hasAnyPropertyContent = (['properties', 'display_properties', 'hidden_properties'] as const).some(
-		(field) => hasPropertyContent(field) || Object.keys(loadedPropertyFields[field]).length > 0
-	)
-	const shouldShowPropertySection = hasAnyPropertySectionEnabled || hasAnyPropertyContent
-
 	useEffect(() => {
 		if (!loadData) {
 			return
@@ -258,11 +212,7 @@ const AppContent: React.FC = () => {
 		}
 
 		// Add files
-		if (is121Plus) {
-			materialFolder?.file(displayID + '.json', JSON.stringify(generateMaterialObject())) // Add your file content here
-		} else {
-			materialFolder?.file(displayID + '.json', JSON.stringify(generateMaterialObject())) // Add your file content here
-		}
+		materialFolder?.file(displayID + '.json', JSON.stringify(generateMaterialObject()))
 		zip?.file('pack.mcmeta', JSON.stringify(mcMeta))
 
 		// Generate ZIP file
@@ -366,152 +316,192 @@ const AppContent: React.FC = () => {
 		addWarning('Successfully Copied! You might want to use a command block!', '#fcba03')
 	}
 
+	// Height sync: keep the Properties panel's min-height matching the left
+	// column's overflow past the preview cards, mirroring the two-column layout.
+	const leftColRef = useRef<HTMLDivElement>(null)
+	const previewsBlockRef = useRef<HTMLDivElement>(null)
+	const [propertiesMinHeight, setPropertiesMinHeight] = useState(0)
+
+	useLayoutEffect(() => {
+		const leftEl = leftColRef.current
+		const previewsEl = previewsBlockRef.current
+		if (!leftEl || !previewsEl) {
+			return
+		}
+
+		const sync = () => {
+			const leftHeight = leftEl.getBoundingClientRect().height
+			const previewsHeight = previewsEl.getBoundingClientRect().height
+			const target = Math.max(0, Math.round(leftHeight - previewsHeight - 14))
+			setPropertiesMinHeight((prev) => (Math.abs(prev - target) > 2 ? target : prev))
+		}
+
+		const observer = new ResizeObserver(sync)
+		observer.observe(leftEl)
+		observer.observe(previewsEl)
+		sync()
+
+		return () => observer.disconnect()
+	}, [])
+
+	const propertyFieldOrder = ['properties', 'display_properties', 'hidden_properties'] as const
+
 	return (
 		<div>
-			<div className="Top-banner">
-				<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '10px' }}>
-					<a
-						style={{
-							display: 'flex',
-							alignItems: 'center',
-							justifyContent: 'center',
-							color: 'white',
-							fontWeight: 'bold'
-						}}
-						href={'https://modrinth.com/organization/truly-modular'}
-						target="_blank"
-						rel="noreferrer"
+			<header
+				style={{
+					display: 'flex',
+					flexWrap: 'wrap',
+					alignItems: 'center',
+					gap: '16px',
+					justifyContent: 'space-between',
+					padding: '18px 28px',
+					background: 'var(--card-bg)',
+					borderBottom: '1px solid var(--card-border)'
+				}}
+			>
+				<a
+					href="https://modrinth.com/organization/truly-modular"
+					target="_blank"
+					rel="noreferrer"
+					style={{ display: 'flex', alignItems: 'center', gap: '12px', color: 'var(--text)' }}
+				>
+					<img
+						src={process.env.PUBLIC_URL + '/logo_trans.png'}
+						alt="Truly Modular logo"
+						width={36}
+						height={36}
+						style={{ borderRadius: '6px' }}
+					/>
+					<div style={{ display: 'flex', flexDirection: 'column', lineHeight: 1.2 }}>
+						<span style={{ fontWeight: 700, fontSize: '15px' }}>Truly Modular</span>
+						<span style={{ fontSize: '12px', color: 'var(--text-muted)' }}>Material Helper</span>
+					</div>
+				</a>
+
+				<div className="segmented-control">
+					<button
+						onClick={() => setIs121Plus(false)}
+						style={{ background: !is121Plus ? 'var(--accent)' : 'transparent', color: !is121Plus ? 'var(--accent-text)' : 'var(--text-secondary)' }}
 					>
-						<img src={process.env.PUBLIC_URL + '/logo_trans.png'} alt="Truly Modular logo" width={40} height={40} />
-						<span>Truly Modular Material Helper</span>
-					</a>
-					<div
-						style={{
-							display: 'flex',
-							alignItems: 'center',
-							gap: '10px',
-							fontSize: '16pt',
-							transform: 'scale(75%)'
-						}}
+						1.20.1
+					</button>
+					<button
+						onClick={() => setIs121Plus(true)}
+						style={{ background: is121Plus ? 'var(--accent)' : 'transparent', color: is121Plus ? 'var(--accent-text)' : 'var(--text-secondary)' }}
 					>
-						<span>1.20.1</span>
-						<ToggleButton isToggled={is121Plus} setIsToggled={setIs121Plus} />
-						<span>1.21+</span>
-					</div>
-				</div>
-				<div>
-					<FileUpload
-						onWarning={(warning, color) => {
-							addWarning(warning, color)
-						}}
-						is121Plus={is121Plus}
-					></FileUpload>
+						1.21+
+					</button>
 				</div>
-				<div style={{ ...rootStyle, display: 'flex', flexDirection: 'row' }}>
-					<button style={buttonStyle} onClick={() => generateResourcePack()}>
+
+				<FileUpload
+					onWarning={(warning, color) => {
+						addWarning(warning, color)
+					}}
+					is121Plus={is121Plus}
+				/>
+
+				<div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
+					<button className="header-button header-button-primary" onClick={() => generateResourcePack()}>
 						Download Data Pack
 					</button>
-					<button style={buttonStyle} onClick={() => generateMaterialJSON()}>
-						Download Material Json
+					<button className="header-button" onClick={() => generateMaterialJSON()}>
+						Download JSON
 					</button>
-					<button style={buttonStyle} onClick={() => generateMaterialJSONAndCopy()}>
-						Copy Json to Clipboard
+					<button className="header-button" onClick={() => generateMaterialJSONAndCopy()}>
+						Copy JSON
 					</button>
-					<button style={buttonStyle} onClick={() => handleGiveButtonPress()}>
-						Copy /give Command
+					<button className="header-button" onClick={() => handleGiveButtonPress()}>
+						Copy /give
 					</button>
 				</div>
-			</div>
+			</header>
 
-			<div
+			<main
+				className="main-grid"
 				style={{
-					display: 'flex',
-					flexDirection: 'row',
-					padding: '20px',
-					gap: '20px'
+					display: 'grid',
+					gap: '22px',
+					padding: '24px 28px 60px',
+					alignItems: 'start'
 				}}
 			>
-				<div id="entry-list">
-					<div style={{ display: 'flex', gap: '20px' }}>
-						<div>
-							<h1>Details</h1>
-							<div style={{ display: 'flex', flexDirection: 'column', gap: '5px' }}>
-								<div style={{ display: 'flex', gap: '5px' }}>
-									<MaterialEntry onSubmit={(entryText) => setMaterialId(entryText)} />
-									<MaterialDisplayName onSubmit={(entryText) => setMaterialDisplayName(entryText)} />
-								</div>
-								<MaterialGroups onSubmit={handleMaterialGroupsSubmit} />
-							</div>
-						</div>
-						<ColorPickerGroup
-							initialColors={colorPalette}
-							onSubmit={handleColorPaletteSubmit}
-							setColorAutoGenerate={setIsAutoGenerateColors}
-							autoGenerateColors={isAutoGenerateColors}
-						/>
-					</div>
-
-					<div style={{ display: 'flex', gap: '20px', alignItems: 'flex-start' }}>
-						<div style={{ display: 'flex', flexDirection: 'column', gap: '20px', flex: '1 1 420px', alignItems: 'stretch' }}>
-							<div>
-								<h1>Stats</h1>
-								<SliderEntry onSubmit={handleSliderSubmit} is121Plus={is121Plus} setIs121Plus={setIs121Plus} />
-							</div>
-							{shouldShowPropertySection && (
-								<div
-									className="property-section"
-									style={{ width: '100%', maxWidth: '560px', display: 'flex', flexDirection: 'column', alignItems: 'stretch', gap: '10px' }}
-								>
-									<h2 className="section-heading">Properties</h2>
-									{(['properties', 'display_properties', 'hidden_properties'] as const)
-										.filter(
-											(field) => enabledPropertyFields[field] || hasPropertyContent(field) || Object.keys(loadedPropertyFields[field]).length > 0
-										)
-										.map((field) => (
-											<PropertyComponent
-												key={field}
-												label={field}
-												initialValue={loadedPropertyFields[field] as Record<string, unknown>}
-												onSubmit={handlePropertyFieldSubmit(field)}
-											/>
-										))}
-								</div>
-							)}
+				<div ref={leftColRef} style={{ display: 'flex', flexDirection: 'column', gap: '22px', minWidth: 0 }}>
+					<section className="card-section">
+						<h2 className="section-heading" style={{ marginBottom: '14px' }}>
+							Details
+						</h2>
+						<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '14px', marginBottom: '14px' }}>
+							<MaterialEntry onSubmit={(entryText) => setMaterialId(entryText)} />
+							<MaterialDisplayName onSubmit={(entryText) => setMaterialDisplayName(entryText)} />
 						</div>
-						<div style={{ flex: '0 0 420px' }}>
-							<h1>Previews</h1>
-							{isAutoGenerateColors && (
-								<div style={{ marginBottom: '5px', color: 'var(--warning-red)', fontWeight: 'bold' }}>
-									Previews aren't representing ingame colors anymore, since automatic generation is toggled!
-								</div>
+						<MaterialGroups onSubmit={handleMaterialGroupsSubmit} />
+					</section>
+
+					<ColorPickerGroup
+						initialColors={colorPalette}
+						onSubmit={handleColorPaletteSubmit}
+						setColorAutoGenerate={setIsAutoGenerateColors}
+						autoGenerateColors={isAutoGenerateColors}
+					/>
+
+					<section className="card-section">
+						<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '14px' }}>
+							<h2 className="section-heading">Stats</h2>
+							{is121Plus && (
+								<label style={{ display: 'flex', alignItems: 'center', gap: '8px', cursor: 'pointer' }}>
+									<span style={{ fontSize: '12.5px', color: 'var(--text-secondary)' }}>Generate converters</span>
+									<ToggleButton isToggled={generateConverters} setIsToggled={setGenerateConverters} size="lg" />
+								</label>
 							)}
-							<StatBoxComponent sliderValues={sliderValues} colorPalette={colorPalette} translation={materialDisplayName} is121={is121Plus} />
 						</div>
-					</div>
+						<SliderEntry onSubmit={handleSliderSubmit} is121Plus={is121Plus} setIs121Plus={setIs121Plus} />
+					</section>
 				</div>
-				<div style={{ position: 'fixed', top: 100, right: 15, zIndex: 9999, display: 'flex', flexDirection: 'column', gap: '8px' }}>
-					<div style={floatingToggleBoxStyle}>
-						<div style={{ fontSize: '12px', textTransform: 'uppercase', letterSpacing: '0.08em', color: '#b9bbbe', marginBottom: '4px' }}>
-							Toggles
-						</div>
-						{is121Plus && (
-							<div style={floatingToggleRowStyle}>
-								<ToggleButton isToggled={generateConverters} setIsToggled={setGenerateConverters} />
-								<span style={{ fontWeight: 600, color: '#ffffff' }}>Generate converters</span>
+
+				<div style={{ display: 'flex', flexDirection: 'column', gap: '14px', minWidth: 0 }}>
+					<div ref={previewsBlockRef} style={{ boxSizing: 'border-box', display: 'flex', flexDirection: 'column', gap: '14px' }}>
+						{isAutoGenerateColors && (
+							<div
+								style={{
+									color: 'var(--orange)',
+									fontSize: '12.5px',
+									fontWeight: 600,
+									background: 'var(--input-bg)',
+									border: '1px solid var(--input-border)',
+									borderRadius: '8px',
+									padding: '10px 12px'
+								}}
+							>
+								Previews aren't representing in-game colors anymore, since automatic generation is toggled!
 							</div>
 						)}
-						{(['properties', 'display_properties', 'hidden_properties'] as const).map((field) => (
-							<div key={field} style={floatingToggleRowStyle}>
-								<ToggleButton isToggled={enabledPropertyFields[field]} setIsToggled={() => togglePropertyField(field)} />
-								<span style={{ textTransform: 'capitalize', fontWeight: 600, color: '#ffffff' }}>{field}</span>
-							</div>
-						))}
+						<StatBoxComponent sliderValues={sliderValues} colorPalette={colorPalette} translation={materialDisplayName} is121={is121Plus} />
 					</div>
-					{warnings.map((warning) => (
-						<Warning key={warning.id} id={warning.id} message={warning.message} onRemove={removeWarning} color={warning.color} />
-					))}
+
+					<section
+						className="card-section"
+						style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}
+					>
+						<h2 className="section-heading" style={{userSelect: 'none'}}>Properties</h2>
+						{propertyFieldOrder.map((field) => (
+							<PropertyComponent
+								key={field}
+								label={field}
+								initialValue={loadedPropertyFields[field] as Record<string, unknown>}
+								onSubmit={handlePropertyFieldSubmit(field)}
+								enabled={enabledPropertyFields[field]}
+								onToggle={() => togglePropertyField(field)}
+							/>
+						))}
+					</section>
 				</div>
-				<div style={{ display: 'flex', flexDirection: 'column', gap: '35px' }}></div>
+			</main>
+
+			<div style={{ position: 'fixed', bottom: '20px', right: '20px', zIndex: 9999, display: 'flex', flexDirection: 'column', gap: '8px', maxWidth: '340px' }}>
+				{warnings.map((warning) => (
+					<Warning key={warning.id} id={warning.id} message={warning.message} onRemove={removeWarning} color={warning.color} />
+				))}
 			</div>
 		</div>
 	)
diff --git a/src/Components/Buttons/ToggleButton.tsx b/src/Components/Buttons/ToggleButton.tsx
index f277ba2..0878dff 100644
--- a/src/Components/Buttons/ToggleButton.tsx
+++ b/src/Components/Buttons/ToggleButton.tsx
@@ -1,11 +1,22 @@
-const ToggleButton = ({ isToggled, setIsToggled }: { isToggled: boolean; setIsToggled: (value: boolean) => void }) => {
+const ToggleButton = ({
+	isToggled,
+	setIsToggled,
+	size = 'sm'
+}: {
+	isToggled: boolean
+	setIsToggled: (value: boolean) => void
+	size?: 'sm' | 'lg'
+}) => {
 	const handleToggle = () => {
 		setIsToggled(!isToggled)
 	}
 
 	return (
 		<div className="toggle-button-shell">
-			<div className={`toggle-switch ${isToggled ? 'toggled' : ''}`} onClick={handleToggle}>
+			<div
+				className={`toggle-switch ${size === 'lg' ? 'toggle-switch-lg' : ''} ${isToggled ? 'toggled' : ''}`}
+				onClick={handleToggle}
+			>
 				<div className="toggle-knob"></div>
 			</div>
 		</div>
diff --git a/src/Components/ColorPicker/ColoPickerProps.tsx b/src/Components/ColorPicker/ColoPickerProps.tsx
index b2efdfa..6fdb022 100644
--- a/src/Components/ColorPicker/ColoPickerProps.tsx
+++ b/src/Components/ColorPicker/ColoPickerProps.tsx
@@ -43,44 +43,50 @@ const ColorPicker: React.FC<ColorPickerProps> = ({ initialColor, onChange, disab
 	}
 
 	return (
-		<div style={{ position: 'relative', display: 'inline-block' }} ref={colorPickerRef}>
-			<div
-				style={{
-					backgroundColor: color,
-					width: '40px',
-					height: '40px',
-					cursor: disabled ? 'not-allowed' : 'pointer',
-					filter: disabled ? 'grayscale(100%)' : 'none',
-					opacity: disabled ? 0.5 : 1
-				}}
-				onClick={handleColorClick}
-			/>
-			{showPicker && !disabled && (
+		<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '5px' }}>
+			<div style={{ position: 'relative', display: 'inline-block' }} ref={colorPickerRef}>
 				<div
 					style={{
-						position: 'absolute',
-						zIndex: 2,
-						top: '50px', // Adjust the position as needed
-						left: '0'
-					}}
-				>
-					<SketchPicker color={color} onChange={handleColorChange} />
-				</div>
-			)}
-			{disabled && (
-				<div
-					style={{
-						position: 'absolute',
-						top: 0,
-						left: 0,
-						width: '100%',
-						height: '100%',
-						backgroundColor: 'rgba(128, 128, 128, 0.5)',
-						zIndex: 1,
-						pointerEvents: 'none'
+						backgroundColor: color,
+						width: '42px',
+						height: '42px',
+						borderRadius: '8px',
+						border: '1px solid var(--input-border)',
+						cursor: disabled ? 'not-allowed' : 'pointer',
+						filter: disabled ? 'grayscale(100%)' : 'none',
+						opacity: disabled ? 0.5 : 1
 					}}
+					onClick={handleColorClick}
 				/>
-			)}
+				{showPicker && !disabled && (
+					<div
+						style={{
+							position: 'absolute',
+							zIndex: 2,
+							top: '50px', // Adjust the position as needed
+							left: '0'
+						}}
+					>
+						<SketchPicker color={color} onChange={handleColorChange} />
+					</div>
+				)}
+				{disabled && (
+					<div
+						style={{
+							position: 'absolute',
+							top: 0,
+							left: 0,
+							width: '100%',
+							height: '100%',
+							borderRadius: '8px',
+							backgroundColor: 'rgba(128, 128, 128, 0.5)',
+							zIndex: 1,
+							pointerEvents: 'none'
+						}}
+					/>
+				)}
+			</div>
+			<span style={{ fontSize: '10px', color: 'var(--text-muted)', fontFamily: 'ui-monospace, Menlo, monospace' }}>{color}</span>
 		</div>
 	)
 }
diff --git a/src/Components/ColorPicker/ColorPickerGroup.tsx b/src/Components/ColorPicker/ColorPickerGroup.tsx
index 2404ab0..3f9462d 100644
--- a/src/Components/ColorPicker/ColorPickerGroup.tsx
+++ b/src/Components/ColorPicker/ColorPickerGroup.tsx
@@ -71,68 +71,87 @@ const ColorPickerGroup: React.FC<ColorPickerGroupProps> = ({ initialColors, onSu
 	}
 
 	return (
-		<div>
-			<h1>Material Colors</h1>
-			<div className="entry">
-				{/* Generate Automatically Checkbox and Plus/Minus Buttons */}
-				<div
-					style={{
-						display: 'flex',
-						justifyContent: 'space-between', // Space between elements
-						alignItems: 'center', // Align items vertically in the center
-						margin: '10px 20px' // Adjust margins as needed
-					}}
-				>
-					{/* Left-aligned checkbox */}
-					<div style={{ display: 'flex', alignItems: 'center' }}>
-						<label style={{ marginRight: '5px' }}>Generate Automatically</label>
-						<input type="checkbox" checked={autoGenerateColors} onChange={(e) => setColorAutoGenerate(e.target.checked)} />
-					</div>
-
-					{/* Right-aligned buttons */}
-					<div>
-						<button onClick={addColor} disabled={gradientColors.length >= 10 || autoGenerateColors} style={{ marginRight: '10px' }}>
+		<section className="card-section">
+			<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '14px', flexWrap: 'wrap', gap: '10px' }}>
+				<h2 className="section-heading">Material Colors</h2>
+				<div style={{ display: 'flex', alignItems: 'center', gap: '14px' }}>
+					<label style={{ display: 'flex', alignItems: 'center', gap: '7px', fontSize: '12.5px', color: 'var(--text-secondary)', cursor: 'pointer' }}>
+						<input
+							type="checkbox"
+							checked={autoGenerateColors}
+							onChange={(e) => setColorAutoGenerate(e.target.checked)}
+							style={{ accentColor: 'var(--accent)', width: '15px', height: '15px', cursor: 'pointer' }}
+						/>
+						Generate Automatically
+					</label>
+					<div style={{ display: 'flex', gap: '6px' }}>
+						<button
+							onClick={addColor}
+							disabled={gradientColors.length >= 10 || autoGenerateColors}
+							style={{
+								width: '28px',
+								height: '28px',
+								borderRadius: '6px',
+								border: '1px solid var(--input-border)',
+								background: 'var(--input-bg)',
+								color: 'var(--text)',
+								cursor: 'pointer',
+								fontSize: '14px'
+							}}
+						>
 							+
 						</button>
-						<button onClick={removeColor} disabled={gradientColors.length <= 1 || autoGenerateColors}>
-							-
+						<button
+							onClick={removeColor}
+							disabled={gradientColors.length <= 2 || autoGenerateColors}
+							style={{
+								width: '28px',
+								height: '28px',
+								borderRadius: '6px',
+								border: '1px solid var(--input-border)',
+								background: 'var(--input-bg)',
+								color: 'var(--text)',
+								cursor: 'pointer',
+								fontSize: '14px'
+							}}
+						>
+							−
 						</button>
 					</div>
 				</div>
-				{/* Color Pickers */}
-				<div
-					style={{
-						margin: '20px',
-						marginTop: '0px',
-						display: 'flex',
-						flexDirection: 'row',
-						justifyContent: 'space-between'
-					}}
-				>
-					{gradientColors.map((color, index) => (
-						<ColorPicker
-							key={colorPickerKeys[index]}
-							initialColor={color}
-							onChange={(newColor) => handleColorChange(index, newColor)}
-							disabled={autoGenerateColors}
-						/>
-					))}
-				</div>
-				{/* Banner with dynamic gradient background */}
-				<div
-					style={{
-						marginLeft: '10px',
-						marginRight: '10px',
-						height: '50px', // Adjust the height as needed
-						background: `linear-gradient(to right, ${gradientColors.join(', ')})`,
-						borderRadius: '8px', // Optional: Add rounded corners
-						filter: autoGenerateColors ? 'grayscale(100%)' : 'none',
-						opacity: autoGenerateColors ? 0.5 : 1,
-						position: 'relative'
-					}}
-				/>
 			</div>
-		</div>
+			{/* Color Pickers */}
+			<div
+				style={{
+					display: 'flex',
+					gap: '10px',
+					flexWrap: 'wrap',
+					marginBottom: '14px',
+					opacity: autoGenerateColors ? 0.5 : 1,
+					filter: autoGenerateColors ? 'grayscale(100%)' : 'none'
+				}}
+			>
+				{gradientColors.map((color, index) => (
+					<ColorPicker
+						key={colorPickerKeys[index] ?? index}
+						initialColor={color}
+						onChange={(newColor) => handleColorChange(index, newColor)}
+						disabled={autoGenerateColors}
+					/>
+				))}
+			</div>
+			{/* Banner with dynamic gradient background */}
+			<div
+				style={{
+					height: '40px',
+					borderRadius: '8px',
+					border: '1px solid var(--input-border)',
+					background: `linear-gradient(to right, ${gradientColors.join(', ')})`,
+					opacity: autoGenerateColors ? 0.5 : 1,
+					filter: autoGenerateColors ? 'grayscale(100%)' : 'none'
+				}}
+			/>
+		</section>
 	)
 }
 
diff --git a/src/Components/Displays/DisplayComponent.tsx b/src/Components/Displays/DisplayComponent.tsx
index ec98caa..292c899 100644
--- a/src/Components/Displays/DisplayComponent.tsx
+++ b/src/Components/Displays/DisplayComponent.tsx
@@ -17,22 +17,30 @@ interface CustomComponentProps {
 	lines: LineProps[]
 }
 
-const Line: React.FC<LineProps> = ({ text }) => <div>{text}</div>
+const Line: React.FC<LineProps> = ({ text }) => (
+	<div style={{ fontSize: '12px', color: 'var(--text-secondary)', fontFamily: 'ui-monospace, Menlo, monospace', whiteSpace: 'pre' }}>{text}</div>
+)
 
 const CustomComponent: React.FC<CustomComponentProps> = ({ imageProps, headerText, lines }) => {
 	const { imageUrl, colorPalette } = imageProps
 
 	return (
-		<div id="entry">
-			<div style={{ float: 'left' }}>
-				<MaterialImage
-					imageUrl={imageUrl}
-					colorPalette={colorPalette}
-					style={{ width: '100px', height: '100px', objectFit: 'contain', padding: '5px' }}
-				/>
-			</div>
-			<div style={{ float: 'left', marginLeft: '5px' }}>
-				<h3>{headerText}</h3>
+		<div className="preview-card">
+			<MaterialImage
+				imageUrl={imageUrl}
+				colorPalette={colorPalette}
+				style={{
+					width: '56px',
+					height: '56px',
+					objectFit: 'contain',
+					imageRendering: 'pixelated',
+					flexShrink: 0,
+					background: 'var(--input-bg)',
+					borderRadius: '8px'
+				}}
+			/>
+			<div style={{ minWidth: 0 }}>
+				<h3 style={{ margin: '0 0 4px', fontSize: '13px', fontWeight: 700, color: 'var(--text)' }}>{headerText}</h3>
 				{lines.map((line, index) => (
 					<Line key={index} text={line.text} />
 				))}
diff --git a/src/Components/Displays/StatDisplays.tsx b/src/Components/Displays/StatDisplays.tsx
index 769fc57..9df3b7b 100644
--- a/src/Components/Displays/StatDisplays.tsx
+++ b/src/Components/Displays/StatDisplays.tsx
@@ -36,10 +36,8 @@ const StatBoxComponent: React.FC<StatBox> = ({ sliderValues, colorPalette, trans
 	}
 
 	return (
-		<div id="display">
-			<div style={{ display: 'flex', gap: '20px' }}>
-				<div id="display-list" style={{ flex: 1 }}>
-					<CustomComponent
+		<div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+			<CustomComponent
 						imageProps={{
 							imageUrl: process.env.PUBLIC_URL + '/images/sword.png',
 							colorPalette: colorPalette
@@ -70,8 +68,6 @@ const StatBoxComponent: React.FC<StatBox> = ({ sliderValues, colorPalette, trans
 							{ text: 'Mining Speed  : ' + sliderValues.mining_speed }
 						]}
 					/>
-				</div>
-				<div id="display-list" style={{ flex: 2 }}>
 					<CustomComponent
 						imageProps={{
 							imageUrl: process.env.PUBLIC_URL + '/images/helmet.png',
@@ -80,7 +76,7 @@ const StatBoxComponent: React.FC<StatBox> = ({ sliderValues, colorPalette, trans
 						headerText={translation + 'Helmet'}
 						lines={[
 							{
-								text: 'Armor                : ' + Math.floor(sliderValues.hardness / 2).toFixed(2)
+								text: 'Armor                  : ' + Math.floor(sliderValues.hardness / 2).toFixed(2)
 							},
 							{
 								text:
@@ -112,7 +108,7 @@ const StatBoxComponent: React.FC<StatBox> = ({ sliderValues, colorPalette, trans
 						headerText={translation + 'Chestplate'}
 						lines={[
 							{
-								text: 'Armor                : ' + (sliderValues.hardness + 2 - Math.ceil(sliderValues.flexibility / 4)).toFixed(2)
+								text: 'Armor                  : ' + (sliderValues.hardness + 2 - Math.ceil(sliderValues.flexibility / 4)).toFixed(2)
 							},
 							{
 								text:
@@ -145,7 +141,7 @@ const StatBoxComponent: React.FC<StatBox> = ({ sliderValues, colorPalette, trans
 						lines={[
 							{
 								text:
-									'Armor                : ' +
+									'Armor                  : ' +
 									(((sliderValues.hardness - Math.ceil(sliderValues.hardness / 6.5) + Math.ceil(sliderValues.hardness / 4.5) - 1) / 7) * 7).toFixed(2)
 							},
 							{
@@ -178,7 +174,7 @@ const StatBoxComponent: React.FC<StatBox> = ({ sliderValues, colorPalette, trans
 						headerText={translation + 'Boots'}
 						lines={[
 							{
-								text: 'Armor                : ' + Math.floor(sliderValues.hardness / 2 - Math.floor(sliderValues.density / 4)).toFixed(2)
+								text: 'Armor                  : ' + Math.floor(sliderValues.hardness / 2 - Math.floor(sliderValues.density / 4)).toFixed(2)
 							},
 							{
 								text:
@@ -202,8 +198,6 @@ const StatBoxComponent: React.FC<StatBox> = ({ sliderValues, colorPalette, trans
 							}
 						]}
 					/>
-				</div>
-			</div>
 		</div>
 	)
 }
diff --git a/src/Components/Load/FileUploadButton.tsx b/src/Components/Load/FileUploadButton.tsx
index 7b18b49..2f0afd8 100644
--- a/src/Components/Load/FileUploadButton.tsx
+++ b/src/Components/Load/FileUploadButton.tsx
@@ -39,25 +39,25 @@ const FileUpload: React.FC<UploadButtonProps> = ({ onWarning, is121Plus }) => {
 	const apiFileCacheKey = `miapi-material-file-cache-v1:${versionLabel}`
 
 	const buttonStyle = {
-		padding: '0 12px',
-		margin: '5px',
-		backgroundColor: '#7289DA',
-		color: '#ffffff',
-		border: 'none',
-		borderRadius: '5px',
+		padding: '0 14px',
+		margin: '0',
+		backgroundColor: 'var(--input-bg)',
+		color: 'var(--text)',
+		border: '1px solid var(--input-border)',
+		borderRadius: '7px',
 		cursor: 'pointer',
 		display: 'inline-flex',
 		alignItems: 'center',
 		justifyContent: 'center',
-		fontSize: '13px',
+		fontSize: '12.5px',
 		fontFamily: 'inherit',
 		fontWeight: 600,
 		lineHeight: 1.1,
-		minHeight: '42px',
-		height: '42px',
-		minWidth: '180px',
-		width: '180px',
-		maxWidth: '180px',
+		minHeight: '36px',
+		height: '36px',
+		minWidth: '150px',
+		width: '150px',
+		maxWidth: '150px',
 		boxSizing: 'border-box' as const,
 		whiteSpace: 'nowrap',
 		textAlign: 'center' as const,
@@ -400,20 +400,24 @@ const FileUpload: React.FC<UploadButtonProps> = ({ onWarning, is121Plus }) => {
 								background: 'transparent',
 								border: 'none',
 								padding: '4px 0',
-								color: '#f2f2f2',
-								fontWeight: 600,
+								color: 'var(--accent)',
+								fontWeight: 700,
+								textTransform: 'uppercase',
+								letterSpacing: '.06em',
 								textAlign: 'left',
 								cursor: 'pointer',
 								display: 'flex',
 								alignItems: 'center',
 								gap: '6px',
 								fontFamily: 'inherit',
-								fontSize: '13px'
+								fontSize: '11px'
 							}}
 						>
-							<span style={{ color: '#b9bbbe', width: '12px', display: 'inline-block' }}>{isExpanded ? '▾' : '▸'}</span>
+							<span style={{ color: 'var(--text-muted)', width: '12px', display: 'inline-block' }}>{isExpanded ? '▾' : '▸'}</span>
 							<span>{node.name}</span>
-							<span style={{ color: '#b9bbbe', fontSize: '12px', marginLeft: '6px' }}>{node.path}</span>
+							<span style={{ color: 'var(--text-muted)', fontSize: '11px', marginLeft: '6px', textTransform: 'none', letterSpacing: 'normal', fontWeight: 400 }}>
+								{node.path}
+							</span>
 						</button>
 						{isExpanded && (
 							<div style={{ display: 'flex', flexDirection: 'column', gap: '4px', marginTop: '4px' }}>{renderTree(node.children, depth + 1)}</div>
@@ -442,21 +446,21 @@ const FileUpload: React.FC<UploadButtonProps> = ({ onWarning, is121Plus }) => {
 					}}
 					disabled={isDisabledEntry}
 					style={{
-						background: isDisabledEntry ? '#2b2f36' : '#36393f',
-						color: isDisabledEntry ? '#9aa0a6' : '#fff',
-						border: isDisabledEntry ? '1px dashed #4f545c' : '1px solid #4f545c',
-						borderRadius: '6px',
-						padding: '6px 8px',
+						background: isDisabledEntry ? '#1d1f23' : 'var(--input-bg)',
+						color: isDisabledEntry ? 'var(--text-muted)' : 'var(--text)',
+						border: isDisabledEntry ? '1px dashed var(--input-border)' : '1px solid var(--input-border)',
+						borderRadius: '7px',
+						padding: '7px 9px',
 						textAlign: 'left',
 						cursor: isDisabledEntry ? 'not-allowed' : 'pointer',
 						marginLeft: depth * 8,
-						fontSize: '13px',
+						fontSize: '12.5px',
 						opacity: isDisabledEntry ? 0.85 : 1
 					}}
 				>
-					<strong>{node.materialId || `miapi:${node.path.replace(/\.json$/, '')}`}</strong>
-					<span style={{ color: isDisabledEntry ? '#b0b3b8' : '#b9bbbe', display: 'block', fontSize: '12px' }}>{node.path}</span>
-					{isDisabledEntry && <span style={{ color: '#d8d8d8', display: 'block', fontSize: '11px', marginTop: '2px' }}>Child material</span>}
+					<div style={{ fontWeight: 600 }}>{node.materialId || `miapi:${node.path.replace(/\.json$/, '')}`}</div>
+					<div style={{ color: 'var(--text-muted)', fontSize: '11px' }}>{node.path}</div>
+					{isDisabledEntry && <div style={{ color: 'var(--text-muted)', fontSize: '11px', marginTop: '2px' }}>Child material</div>}
 				</button>
 			)
 		})
@@ -469,7 +473,7 @@ const FileUpload: React.FC<UploadButtonProps> = ({ onWarning, is121Plus }) => {
 	return (
 		<div>
 			<form onSubmit={handleSubmit} style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap' }}>
-				<label style={buttonStyle}>
+				<label style={{...buttonStyle, marginRight: "10px"}}>
 					Load From File
 					<input type="file" onChange={handleFileChange} style={{ display: 'none' }} />
 				</label>
@@ -497,19 +501,19 @@ const FileUpload: React.FC<UploadButtonProps> = ({ onWarning, is121Plus }) => {
 								gap: '6px',
 								padding: '10px',
 								borderRadius: '10px',
-								backgroundColor: '#2f3136',
-								border: '1px solid #3a3f4b',
-								boxShadow: '0 8px 18px rgba(0, 0, 0, 0.35)'
+								backgroundColor: 'var(--card-bg)',
+								border: '1px solid var(--input-border)',
+								boxShadow: '0 12px 28px rgba(0, 0, 0, 0.45)'
 							}}
 						>
-							<div style={{ color: '#d7d7d7', fontSize: '12px' }}>Available examples (cached locally):</div>
+							<div style={{ color: 'var(--text-muted)', fontSize: '11.5px', padding: '2px 4px 6px' }}>Available examples (cached locally):</div>
 							<div style={{ display: 'flex', flexDirection: 'column', gap: '4px', maxHeight: '320px', overflowY: 'auto' }}>
 								{renderTree(materialTree)}
 							</div>
 						</div>
 					)}
 				</div>
-				<span style={{ color: '#d6d6d6', marginLeft: '6px' }}>{filename}</span>
+				<span style={{ color: 'var(--text-muted)', fontSize: '12px', marginLeft: '6px' }}>{filename}</span>
 			</form>
 		</div>
 	)
diff --git a/src/Components/Load/LoadDataProvider.tsx b/src/Components/Load/LoadDataProvider.tsx
index e41ede1..7de3ddd 100644
--- a/src/Components/Load/LoadDataProvider.tsx
+++ b/src/Components/Load/LoadDataProvider.tsx
@@ -1,4 +1,4 @@
-import React, { createContext, useState, useContext, ReactNode } from 'react'
+import React, { createContext, useState, useContext, useCallback, useMemo, ReactNode } from 'react'
 
 interface LoadDataContextType {
 	loadData: any | null
@@ -23,27 +23,34 @@ const LoadDataProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
 	const [loadData, setLoadData] = useState<any | null>(null)
 	const [listeners, setListeners] = useState<((message: string, color: string) => void)[]>([])
 
-	const addWarning = (message: string) => {
-		listeners.forEach((listener) => listener(message, 'orange'))
-	}
+	const addWarning = useCallback(
+		(message: string) => {
+			listeners.forEach((listener) => listener(message, 'orange'))
+		},
+		[listeners]
+	)
 
-	const addCustomMessage = (message: string, color: string) => {
-		listeners.forEach((listener) => listener(message, color))
-	}
+	const addCustomMessage = useCallback(
+		(message: string, color: string) => {
+			listeners.forEach((listener) => listener(message, color))
+		},
+		[listeners]
+	)
 
-	const registerWarningListener = (callback: (message: string, color: string) => void) => {
+	const registerWarningListener = useCallback((callback: (message: string, color: string) => void) => {
 		setListeners((prevListeners) => [...prevListeners, callback])
-	}
+	}, [])
 
-	const clearWarningListeners = () => {
+	const clearWarningListeners = useCallback(() => {
 		setListeners([])
-	}
+	}, [])
 
-	return (
-		<LoadDataContext.Provider value={{ loadData, setLoadData, addWarning, addCustomMessage, registerWarningListener, clearWarningListeners }}>
-			{children}
-		</LoadDataContext.Provider>
+	const contextValue = useMemo(
+		() => ({ loadData, setLoadData, addWarning, addCustomMessage, registerWarningListener, clearWarningListeners }),
+		[loadData, addWarning, addCustomMessage, registerWarningListener, clearWarningListeners]
 	)
+
+	return <LoadDataContext.Provider value={contextValue}>{children}</LoadDataContext.Provider>
 }
 
 export default LoadDataProvider
diff --git a/src/Components/SelfDeletingWarning.tsx b/src/Components/SelfDeletingWarning.tsx
index c2a3661..e0b78f3 100644
--- a/src/Components/SelfDeletingWarning.tsx
+++ b/src/Components/SelfDeletingWarning.tsx
@@ -7,6 +7,19 @@ interface WarningProps {
 	color: string
 }
 
+const dotColorFor = (color: string): string => {
+	switch (color) {
+		case "red":
+			return "var(--red)"
+		case "green":
+			return "var(--green)"
+		case "orange":
+			return "var(--orange)"
+		default:
+			return color || "var(--accent)"
+	}
+}
+
 const Warning: React.FC<WarningProps> = ({ id, message, onRemove, color }) => {
 	useEffect(() => {
 		const timeoutId = setTimeout(() => {
@@ -17,15 +30,15 @@ const Warning: React.FC<WarningProps> = ({ id, message, onRemove, color }) => {
 	}, [id, onRemove])
 
 	return (
-		<div
-			style={{
-				backgroundColor: color,
-				color: "white",
-				padding: "10px",
-				marginBottom: "5px",
-			}}
-		>
-			{message}
+		<div className="toast">
+			<div style={{ width: "8px", height: "8px", borderRadius: "50%", flexShrink: 0, background: dotColorFor(color) }}></div>
+			<div style={{ flex: 1, whiteSpace: "pre-wrap" }}>{message}</div>
+			<button
+				onClick={() => onRemove(id)}
+				style={{ background: "none", border: "none", color: "var(--text-muted)", cursor: "pointer", fontSize: "16px", lineHeight: 1, padding: 0 }}
+			>
+				×
+			</button>
 		</div>
 	)
 }
diff --git a/src/Components/Sliders/HighLimitSliderEntry.tsx b/src/Components/Sliders/HighLimitSliderEntry.tsx
index 32bc5f4..e826418 100644
--- a/src/Components/Sliders/HighLimitSliderEntry.tsx
+++ b/src/Components/Sliders/HighLimitSliderEntry.tsx
@@ -8,16 +8,32 @@ interface HighLimitSliderEntryProps {
 
 const HighLimitSliderEntry: React.FC<HighLimitSliderEntryProps> = ({ label, value, onChange }) => {
 	return (
-		<div style={{ marginBottom: '20px', display: 'flex', alignItems: 'center' }}>
-			<label
+		<div>
+			<div
 				style={{
-					color: 'var(--discord-white)',
-					marginRight: '10px',
-					width: '27%'
+					display: 'flex',
+					justifyContent: 'space-between',
+					alignItems: 'center',
+					fontSize: '12.5px',
+					color: 'var(--text-secondary)',
+					marginBottom: '6px'
 				}}
 			>
-				{label}:
-			</label>
+				<span>{label}</span>
+				<input
+					type="text"
+					value={value}
+					onChange={(e) => {
+						const inputValue = e.target.value
+						const intValue = parseInt(inputValue, 10)
+						if (!isNaN(intValue)) {
+							onChange(intValue)
+						}
+					}}
+					className="field-input"
+					style={{ width: '70px', flexShrink: 0, fontFamily: 'ui-monospace, Menlo, monospace', padding: '6px 8px' }}
+				/>
+			</div>
 			<input
 				type="range"
 				value={value}
@@ -25,36 +41,7 @@ const HighLimitSliderEntry: React.FC<HighLimitSliderEntryProps> = ({ label, valu
 				onChange={(e) => onChange(parseInt(e.target.value, 10))}
 				min={0}
 				max={2000} // Set a higher max value
-				style={{
-					backgroundColor: 'transparent',
-					width: '60%',
-					height: '50%'
-				}}
-			/>
-			<div
-				style={{
-					color: 'var(--discord-white)',
-					width: '3%'
-				}}
-			></div>
-			<input
-				type="text"
-				value={value}
-				onChange={(e) => {
-					const inputValue = e.target.value
-					const intValue = parseInt(inputValue, 10)
-					if (!isNaN(intValue)) {
-						onChange(intValue)
-					}
-				}}
-				min={0}
-				max={2000} // Set a higher max value
-				style={{
-					backgroundColor: 'var(--discord-gray-3)',
-					color: 'var(--discord-white)',
-					border: 'none',
-					width: '10%'
-				}}
+				style={{ accentColor: 'var(--accent)', width: '100%' }}
 			/>
 		</div>
 	)
diff --git a/src/Components/Sliders/IntegerSliderEntry.tsx b/src/Components/Sliders/IntegerSliderEntry.tsx
index 9f07c56..fe5239e 100644
--- a/src/Components/Sliders/IntegerSliderEntry.tsx
+++ b/src/Components/Sliders/IntegerSliderEntry.tsx
@@ -39,70 +39,55 @@ const IntegerSliderEntry: React.FC<IntegerSliderEntryProps> = ({
 		}
 	}
 
-	return (
-		<div style={{ marginBottom: "20px", display: "flex", alignItems: "center" }}>
-			{editableLabel ? (
+	const rangeInput = (
+		<input
+			type="range"
+			value={value}
+			defaultValue={value}
+			onChange={(e) => {
+				onChange(parseInt(e.target.value, 10))
+			}}
+			min={0}
+			max={5}
+			style={{ accentColor: "var(--accent)", flex: 1, width: "100%" }}
+		/>
+	)
+
+	const textInput = (
+		<input
+			type="text"
+			value={text}
+			onChange={(e) => {
+				textParse(e.target.value)
+			}}
+			className="field-input"
+			style={{ width: editableLabel ? "64px" : "70px", flexShrink: 0, fontFamily: "ui-monospace, Menlo, monospace", padding: "6px 8px" }}
+		/>
+	)
+
+	if (editableLabel) {
+		return (
+			<div style={{ display: "flex", alignItems: "center", gap: "10px" }}>
 				<input
 					type="text"
-					style={{
-						backgroundColor: "var(--discord-gray-3)",
-						color: "var(--discord-white)",
-						border: "none",
-						width: "21%",
-						marginRight: "10px",
-					}}
 					value={label}
-					onChange={(event) => {
-						onLabelChange?.(event.target.value)
-					}}
+					onChange={(event) => onLabelChange?.(event.target.value)}
+					className="field-input"
+					style={{ width: "120px", flexShrink: 0, padding: "6px 8px", fontSize: "12px" }}
 				/>
-			) : (
-				<label
-					style={{
-						color: "var(--discord-white)",
-						marginRight: "10px",
-						width: "27%",
-					}}
-				>
-					{label}:
-				</label>
-			)}
-			<input
-				type="range"
-				value={value}
-				defaultValue={value}
-				onChange={(e) => {
-					onChange(parseInt(e.target.value, 10))
-				}}
-				min={0}
-				max={5}
-				style={{
-					backgroundColor: "transparent",
-					width: editableLabel ? "62%" : "60%",
-					height: "50%",
-				}}
-			/>
-			<div
-				style={{
-					color: "var(--discord-white)",
-					width: "3%",
-				}}
-			></div>
-			<input
-				type="text"
-				value={text}
-				onChange={(e) => {
-					textParse(e.target.value)
-				}}
-				min={0}
-				max={15}
-				style={{
-					backgroundColor: "var(--discord-gray-3)",
-					color: "var(--discord-white)",
-					border: "none",
-					width: "10%",
-				}}
-			/>
+				{rangeInput}
+				{textInput}
+			</div>
+		)
+	}
+
+	return (
+		<div>
+			<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: "12.5px", color: "var(--text-secondary)", marginBottom: "6px" }}>
+				<span>{label}</span>
+				{textInput}
+			</div>
+			{rangeInput}
 		</div>
 	)
 }
diff --git a/src/Components/Sliders/SingleSlider.tsx b/src/Components/Sliders/SingleSlider.tsx
index ff8290e..d492c60 100644
--- a/src/Components/Sliders/SingleSlider.tsx
+++ b/src/Components/Sliders/SingleSlider.tsx
@@ -38,65 +38,52 @@ const SingleSlider: React.FC<SingleSliderProps> = ({ label, value, onChange, edi
 		setText('' + parseFloat(test))
 	}
 
-	return (
-		<div style={{ marginBottom: '20px', display: 'flex', alignItems: 'center' }}>
-			{editableLabel ? (
+	const rangeInput = (
+		<input
+			type="range"
+			value={value}
+			defaultValue={value}
+			onChange={(e: ChangeEvent<HTMLInputElement>) => sliderUpdate(e.target.value)}
+			min={0}
+			max={15}
+			step={0.01} // Set a step value to allow for two decimal places
+			style={{ accentColor: 'var(--accent)', flex: 1, width: '100%' }}
+		/>
+	)
+
+	const textInput = (
+		<input
+			type="text"
+			value={textvalue}
+			onChange={(e: ChangeEvent<HTMLInputElement>) => textParse(e.target.value)}
+			className="field-input"
+			style={{ width: editableLabel ? '64px' : '70px', flexShrink: 0, fontFamily: 'ui-monospace, Menlo, monospace', padding: '6px 8px' }}
+		/>
+	)
+
+	if (editableLabel) {
+		return (
+			<div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
 				<input
 					type="text"
 					value={label}
-					style={{
-						backgroundColor: 'var(--discord-gray-3)',
-						color: 'var(--discord-white)',
-						border: 'none',
-						width: '21%',
-						marginRight: '10px'
-					}}
-					onChange={(event) => {
-						onLabelChange?.(event.target.value)
-					}}
+					onChange={(event) => onLabelChange?.(event.target.value)}
+					className="field-input"
+					style={{ width: '120px', flexShrink: 0, padding: '6px 8px', fontSize: '12px' }}
 				/>
-			) : (
-				<label
-					style={{
-						color: 'var(--discord-white)',
-						marginRight: '10px',
-						width: '27%'
-					}}
-				>
-					{label}:
-				</label>
-			)}
-			<input
-				type="range"
-				value={value}
-				defaultValue={value}
-				onChange={(e: ChangeEvent<HTMLInputElement>) => sliderUpdate(e.target.value)}
-				min={0}
-				max={15}
-				step={0.01} // Set a step value to allow for two decimal places
-				style={{
-					backgroundColor: 'transparent',
-					width: editableLabel ? '62%' : '60%',
-					height: '50%'
-				}}
-			/>
-			<div
-				style={{
-					color: 'var(--discord-white)',
-					width: '3%'
-				}}
-			></div>
-			<input
-				type="text"
-				value={textvalue}
-				onChange={(e: ChangeEvent<HTMLInputElement>) => textParse(e.target.value)}
-				style={{
-					backgroundColor: 'var(--discord-gray-3)',
-					color: 'var(--discord-white)',
-					border: 'none',
-					width: '10%'
-				}}
-			/>
+				{rangeInput}
+				{textInput}
+			</div>
+		)
+	}
+
+	return (
+		<div>
+			<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: '12.5px', color: 'var(--text-secondary)', marginBottom: '6px' }}>
+				<span>{label}</span>
+				{textInput}
+			</div>
+			{rangeInput}
 		</div>
 	)
 }
diff --git a/src/Components/Sliders/SliderEntry.tsx b/src/Components/Sliders/SliderEntry.tsx
index cc10555..53f8800 100644
--- a/src/Components/Sliders/SliderEntry.tsx
+++ b/src/Components/Sliders/SliderEntry.tsx
@@ -264,9 +264,20 @@ const SliderEntry: React.FC<SliderEntryProps> = ({ onSubmit, is121Plus }) => {
 			}
 
 			return (
-				<div key={slider.id} style={{ display: 'flex', gap: '5px', justifyItems: 'center' }}>
-					<div
-						style={{ cursor: 'pointer' }}
+				<div
+					key={slider.id}
+					style={{
+						display: 'flex',
+						alignItems: 'center',
+						gap: '10px',
+						background: 'var(--input-bg)',
+						border: '1px solid var(--input-border)',
+						borderRadius: '9px',
+						padding: '10px 12px'
+					}}
+				>
+					<button
+						type="button"
 						onClick={() => {
 							setCustomSliders((prevSliders) => {
 								const newSliders = { ...prevSliders }
@@ -274,9 +285,10 @@ const SliderEntry: React.FC<SliderEntryProps> = ({ onSubmit, is121Plus }) => {
 								return newSliders
 							})
 						}}
+						style={{ background: 'none', border: 'none', color: 'var(--red)', cursor: 'pointer', padding: 0, flexShrink: 0, display: 'flex' }}
 					>
 						<DeleteIcon />
-					</div>
+					</button>
 					{sliderComponent}
 				</div>
 			)
@@ -288,38 +300,32 @@ const SliderEntry: React.FC<SliderEntryProps> = ({ onSubmit, is121Plus }) => {
 	}
 
 	return (
-		<div
-			className="entry"
-			style={{
-				position: 'relative',
-				backgroundColor: 'var(--discord-gray-2)',
-				borderRadius: '8px',
-				padding: '10px',
-				color: 'var(--discord-white)'
-			}}
-		>
-			<SingleSlider label="Hardness" value={sliderValues.hardness} onChange={(value) => handleSliderChange('hardness', value)} />
-			<SingleSlider label="Density" value={sliderValues.density} onChange={(value) => handleSliderChange('density', value)} />
-			<SingleSlider label="Flexibility" value={sliderValues.flexibility} onChange={(value) => handleSliderChange('flexibility', value)} />
-			<HighLimitSliderEntry label="Durability" value={sliderValues.durability} onChange={(value) => handleSliderChange('durability', value)} />
-			<SingleSlider label="Mining Speed" value={sliderValues.mining_speed} onChange={(value) => handleSliderChange('mining_speed', value)} />
-			{is121Plus ? (
-				<StringStatEntry
-					label="Mining Level"
-					value={String(sliderValues.mining_level)}
-					onChange={(value) => handleSliderChange('mining_level', value)}
-					editableLabel={false}
-				/>
-			) : (
-				<IntegerSliderEntry
-					label="Mining Level"
-					value={typeof sliderValues.mining_level === 'number' ? sliderValues.mining_level : 2}
-					onChange={(value) => handleSliderChange('mining_level', value)}
-				/>
-			)}
-
-			{renderCustomSliders()}
-			<div style={{ position: 'relative' }}>
+		<div>
+			<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px 20px' }}>
+				<SingleSlider label="Hardness" value={sliderValues.hardness} onChange={(value) => handleSliderChange('hardness', value)} />
+				<SingleSlider label="Density" value={sliderValues.density} onChange={(value) => handleSliderChange('density', value)} />
+				<SingleSlider label="Flexibility" value={sliderValues.flexibility} onChange={(value) => handleSliderChange('flexibility', value)} />
+				<HighLimitSliderEntry label="Durability" value={sliderValues.durability} onChange={(value) => handleSliderChange('durability', value)} />
+				<SingleSlider label="Mining Speed" value={sliderValues.mining_speed} onChange={(value) => handleSliderChange('mining_speed', value)} />
+				{is121Plus ? (
+					<StringStatEntry
+						label="Mining Level"
+						value={String(sliderValues.mining_level)}
+						onChange={(value) => handleSliderChange('mining_level', value)}
+						editableLabel={false}
+					/>
+				) : (
+					<IntegerSliderEntry
+						label="Mining Level"
+						value={typeof sliderValues.mining_level === 'number' ? sliderValues.mining_level : 2}
+						onChange={(value) => handleSliderChange('mining_level', value)}
+					/>
+				)}
+			</div>
+
+			<div style={{ display: 'flex', flexDirection: 'column', gap: '12px', marginTop: '18px' }}>{renderCustomSliders()}</div>
+
+			<div style={{ position: 'relative', marginTop: '12px' }}>
 				<button
 					ref={dropdownButtonRef}
 					onClick={(e) => {
@@ -328,59 +334,61 @@ const SliderEntry: React.FC<SliderEntryProps> = ({ onSubmit, is121Plus }) => {
 					}}
 					style={{
 						width: '100%',
-						height: '30px',
-						backgroundColor: 'var(--discord-gray-3)',
-						color: '#ffffff',
-						border: 'none',
-						borderRadius: '5px',
-						cursor: 'pointer'
+						padding: '9px',
+						borderRadius: '8px',
+						border: '1px dashed var(--input-border)',
+						background: 'var(--input-bg)',
+						color: 'var(--text-secondary)',
+						cursor: 'pointer',
+						fontSize: '13px',
+						fontWeight: 600
 					}}
 				>
-					<span style={{ fontSize: '14pt' }}>+</span>
+					+ Add custom stat
 				</button>
 				{isDropdownOpen && (
 					<div
 						ref={dropdownRef}
 						style={{
 							position: 'absolute',
-							top: '35px', // Adjust the position as needed
-							left: '0',
-							backgroundColor: 'var(--discord-gray-3)',
-							// border: "1px solid #ccc",
-							borderRadius: '5px',
-							boxShadow: '0 2px 5px rgba(0, 0, 0, 0.2)',
-							zIndex: 1,
-							width: '100%' // Make the dropdown the same width as the button
+							top: 'calc(100% + 6px)',
+							left: 0,
+							right: 0,
+							zIndex: 10,
+							background: 'var(--input-bg)',
+							border: '1px solid var(--input-border)',
+							borderRadius: '8px',
+							overflow: 'hidden',
+							boxShadow: '0 10px 24px rgba(0, 0, 0, 0.4)'
 						}}
 					>
-						<ul style={{ listStyle: 'none', padding: '10px', margin: 0 }}>
-							{Object.keys(CustomSliderType)
-								.filter((key) => isNaN(Number(key)))
-								.map((key) => (
-									<li
-										key={key}
-										onClick={() => {
-											let uuid
-											do {
-												uuid = generateId()
-											} while (customSliders[uuid] !== undefined)
-											setCustomSliders({
-												...customSliders,
-												[uuid]: {
-													id: uuid,
-													name: 'new',
-													value: key === 'STRING' ? '' : 0,
-													type: CustomSliderType[key as keyof typeof CustomSliderType]
-												}
-											})
-											setIsDropdownOpen(false)
-										}}
-										className="dropdown-item"
-									>
-										{key}
-									</li>
-								))}
-						</ul>
+						{Object.keys(CustomSliderType)
+							.filter((key) => isNaN(Number(key)))
+							.map((key) => (
+								<div
+									key={key}
+									onClick={() => {
+										let uuid
+										do {
+											uuid = generateId()
+										} while (customSliders[uuid] !== undefined)
+										setCustomSliders({
+											...customSliders,
+											[uuid]: {
+												id: uuid,
+												name: 'new',
+												value: key === 'STRING' ? '' : 0,
+												type: CustomSliderType[key as keyof typeof CustomSliderType]
+											}
+										})
+										setIsDropdownOpen(false)
+									}}
+									className="dropdown-item"
+									style={{ textTransform: 'capitalize' }}
+								>
+									{key.toLowerCase()}
+								</div>
+							))}
 					</div>
 				)}
 			</div>
@@ -393,8 +401,8 @@ export default SliderEntry
 const DeleteIcon = (props: any) => (
 	<svg
 		xmlns="http://www.w3.org/2000/svg"
-		width="24"
-		height="24"
+		width="16"
+		height="16"
 		viewBox="0 0 24 24"
 		fill="none"
 		stroke="currentColor"
diff --git a/src/Components/Sliders/StringStatInput.tsx b/src/Components/Sliders/StringStatInput.tsx
index 479c4f0..7375eaa 100644
--- a/src/Components/Sliders/StringStatInput.tsx
+++ b/src/Components/Sliders/StringStatInput.tsx
@@ -15,48 +15,40 @@ const StringStatEntry: React.FC<StringStatEntryProps> = ({
 	editableLabel,
 	onLabelChange,
 }) => {
-	return (
-		<div style={{ marginBottom: "20px", width: "100%", display: "flex", alignItems: "center" }}>
-			{editableLabel ? (
+	const valueInput = (
+		<input
+			type="text"
+			value={value}
+			defaultValue={value}
+			onChange={(e) => {
+				onChange(e.target.value)
+			}}
+			className="field-input"
+			style={{ flex: 1, fontFamily: "ui-monospace, Menlo, monospace", fontSize: "12.5px", padding: editableLabel ? "6px 8px" : undefined }}
+		/>
+	)
+
+	if (editableLabel) {
+		return (
+			<div style={{ display: "flex", alignItems: "center", gap: "10px", width: "100%" }}>
 				<input
 					type="text"
-					style={{
-						backgroundColor: "var(--discord-gray-3)",
-						color: "var(--discord-white)",
-						border: "none",
-						width: "28%",
-						marginRight: "10px",
-					}}
 					value={label}
-					onChange={(event) => {
-						onLabelChange?.(event.target.value)
-					}}
+					onChange={(event) => onLabelChange?.(event.target.value)}
+					className="field-input"
+					style={{ width: "120px", flexShrink: 0, padding: "6px 8px", fontSize: "12px" }}
 				/>
-			) : (
-				<label
-					style={{
-						color: "var(--discord-white)",
-						marginRight: "10px",
-						width: "27%",
-					}}
-				>
-					{label}:
-				</label>
-			)}
-			<input
-				type="text"
-				value={value}
-				defaultValue={value}
-				onChange={(e) => {
-					onChange(e.target.value)
-				}}
-				style={{
-					backgroundColor: "var(--discord-gray-3)",
-					color: "var(--discord-white)",
-					border: "none",
-					width: "100%",
-				}}
-			/>
+				{valueInput}
+			</div>
+		)
+	}
+
+	return (
+		<div>
+			<div style={{ fontSize: "12.5px", color: "var(--text-secondary)", marginBottom: "6px", display: "flex", justifyContent: "space-between" }}>
+				<span>{label}</span>
+			</div>
+			{valueInput}
 		</div>
 	)
 }
diff --git a/src/Components/TextInputs/MaterialDisplayName.tsx b/src/Components/TextInputs/MaterialDisplayName.tsx
index cc38148..3b5fd56 100644
--- a/src/Components/TextInputs/MaterialDisplayName.tsx
+++ b/src/Components/TextInputs/MaterialDisplayName.tsx
@@ -34,34 +34,11 @@ const MaterialDisplayName: React.FC<MaterialDisplayNameProps> = ({ onSubmit }) =
 	}
 
 	return (
-		<div
-			className="entry special-text"
-			style={{
-				position: 'relative',
-				backgroundColor: 'var(--discord-gray-2)',
-				borderRadius: '8px',
-				padding: '10px'
-			}}
-		>
-			<label htmlFor="materialNameInput" style={{ display: 'block', color: 'var(--discord-white)', marginBottom: '5px' }}>
+		<div>
+			<label htmlFor="materialNameInput" className="field-label">
 				Material Display Name
 			</label>
-			<input
-				type="text"
-				id="materialNameInput"
-				value={displayName}
-				onChange={handleInputChange}
-				placeholder="Cool Name"
-				style={{
-					backgroundColor: 'var(--discord-gray-3)',
-					color: 'var(--discord-white)',
-					border: 'none',
-					width: '90%',
-					padding: '10px',
-					borderRadius: '8px',
-					outline: 'none' // Remove default focus outline
-				}}
-			/>
+			<input type="text" id="materialNameInput" value={displayName} onChange={handleInputChange} placeholder="Cool Name" className="field-input" />
 		</div>
 	)
 }
diff --git a/src/Components/TextInputs/MaterialGroupsProps.tsx b/src/Components/TextInputs/MaterialGroupsProps.tsx
index 39be894..38aaec9 100644
--- a/src/Components/TextInputs/MaterialGroupsProps.tsx
+++ b/src/Components/TextInputs/MaterialGroupsProps.tsx
@@ -50,22 +50,20 @@ const MaterialGroups: React.FC<MaterialGroupsProps> = ({ onSubmit }) => {
 		onSubmit(validDisplayNames)
 	}
 
+	const removeGroup = (index: number) => {
+		const next = displayNames.filter((_, i) => i !== index)
+		setDisplayNames(next)
+		onSubmit(next)
+	}
+
 	useEffect(() => {
 		// Trigger onSubmit when the component mounts with the default entry
 		onSubmit(displayNames)
 	}, []) // eslint-disable-line react-hooks/exhaustive-deps
 
 	return (
-		<div
-			className="entry"
-			style={{
-				position: 'relative',
-				backgroundColor: 'var(--discord-gray-2)',
-				borderRadius: '8px',
-				padding: '10px'
-			}}
-		>
-			<label htmlFor="materialGroupsInput" style={{ display: 'block', color: 'var(--discord-white)', marginBottom: '5px' }}>
+		<div>
+			<label htmlFor="materialGroupsInput" className="field-label">
 				Material Groups
 			</label>
 			<input
@@ -84,16 +82,19 @@ const MaterialGroups: React.FC<MaterialGroupsProps> = ({ onSubmit }) => {
 						setDisplayNames((prevNames) => [...prevNames, ''])
 					}
 				}}
-				style={{
-					backgroundColor: 'var(--discord-gray-3)',
-					color: 'var(--discord-white)',
-					border: 'none',
-					width: '90%',
-					padding: '10px',
-					borderRadius: '8px',
-					outline: 'none' // Remove the default focus outline
-				}}
+				className="field-input"
+				style={{ marginBottom: '8px' }}
 			/>
+			<div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px' }}>
+				{displayNames.map((name, index) => (
+					<div key={index} className="chip">
+						<span>{name}</span>
+						<button type="button" onClick={() => removeGroup(index)}>
+							×
+						</button>
+					</div>
+				))}
+			</div>
 		</div>
 	)
 }
diff --git a/src/Components/TextInputs/MaterialId.tsx b/src/Components/TextInputs/MaterialId.tsx
index 8ecde15..7c47b09 100644
--- a/src/Components/TextInputs/MaterialId.tsx
+++ b/src/Components/TextInputs/MaterialId.tsx
@@ -48,16 +48,8 @@ const MaterialEntry: React.FC<MaterialEntryProps> = ({ onSubmit }) => {
 	}
 
 	return (
-		<div
-			className="entry special-text"
-			style={{
-				position: 'relative',
-				backgroundColor: 'var(--discord-gray-2)',
-				borderRadius: '8px',
-				padding: '10px'
-			}}
-		>
-			<label htmlFor="materialInput" style={{ display: 'block', color: 'var(--discord-white)', marginBottom: '5px' }}>
+		<div>
+			<label htmlFor="materialInput" className="field-label">
 				Material Item ID
 			</label>
 			<input
@@ -66,15 +58,8 @@ const MaterialEntry: React.FC<MaterialEntryProps> = ({ onSubmit }) => {
 				value={entryText}
 				onChange={handleInputChange}
 				placeholder="modid:item_id"
-				style={{
-					backgroundColor: 'var(--discord-gray-3)',
-					color: 'var(--discord-white)',
-					border: 'none',
-					width: '90%',
-					padding: '10px',
-					borderRadius: '8px',
-					outline: 'none' // Remove default focus outline
-				}}
+				className="field-input"
+				style={{ fontFamily: 'ui-monospace, Menlo, monospace' }}
 			/>
 		</div>
 	)
diff --git a/src/Components/TextInputs/PropertyComponent.tsx b/src/Components/TextInputs/PropertyComponent.tsx
index b8fa2b6..a905a89 100644
--- a/src/Components/TextInputs/PropertyComponent.tsx
+++ b/src/Components/TextInputs/PropertyComponent.tsx
@@ -1,10 +1,13 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react'
+import ToggleButton from '../Buttons/ToggleButton'
 
 interface PropertyComponentProps {
 	label: string
 	description?: string
 	initialValue?: Record<string, unknown>
 	onSubmit?: (value: Record<string, unknown>) => void
+	enabled: boolean
+	onToggle: () => void
 }
 
 const parseJsonObject = (value: string): Record<string, unknown> => {
@@ -23,7 +26,7 @@ const parseJsonObject = (value: string): Record<string, unknown> => {
 	return parsed as Record<string, unknown>
 }
 
-const PropertyComponent: React.FC<PropertyComponentProps> = ({ label, description, initialValue, onSubmit }) => {
+const PropertyComponent: React.FC<PropertyComponentProps> = ({ label, description, initialValue, onSubmit, enabled, onToggle }) => {
 	const [textValue, setTextValue] = useState('{}')
 	const [errorMessage, setErrorMessage] = useState('')
 	const textareaRef = useRef<HTMLTextAreaElement>(null)
@@ -67,36 +70,38 @@ const PropertyComponent: React.FC<PropertyComponentProps> = ({ label, descriptio
 	}
 
 	return (
-		<div className="entry property-editor" style={{ marginTop: '8px', width: '100%', maxWidth: '100%', textAlign: 'left' }}>
-			<div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
-				<label style={{ display: 'block', color: 'var(--discord-white)', fontWeight: 600, textTransform: 'capitalize' }}>{label}</label>
-				<span style={{ color: '#d8dee9', fontSize: '12px', lineHeight: 1.4 }}>{helperText}</span>
-				<textarea
-					ref={textareaRef}
-					value={textValue}
-					onChange={handleChange}
-					spellCheck={false}
-					rows={2}
-					placeholder="{}"
-					style={{
-						width: '100%',
-						backgroundColor: 'var(--discord-gray-3)',
-						color: 'var(--discord-white)',
-						border: 'none',
-						borderRadius: '8px',
-						padding: '10px',
-						fontFamily: 'monospace',
-						fontSize: '12px',
-						minHeight: '48px',
-						height: 'auto',
-						overflow: 'hidden',
-						resize: 'none',
-						outline: 'none',
-						boxSizing: 'border-box'
-					}}
-				/>
-				{errorMessage ? <span style={{ color: '#ffb4b4', fontSize: '12px' }}>{errorMessage}</span> : null}
+		<div className="property-editor">
+			<div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '8px' }}>
+				<ToggleButton isToggled={enabled} setIsToggled={onToggle} />
+				<span style={{ userSelect: 'none', fontWeight: 600, fontSize: '13px', textTransform: 'capitalize', color: 'var(--text)' }}>{label.replace(/_/g, ' ')}</span>
 			</div>
+			{enabled && (
+				<div>
+					<div style={{ color: 'var(--text-muted)', fontSize: '11.5px', marginBottom: '6px' }}>{helperText}</div>
+					<textarea
+						ref={textareaRef}
+						value={textValue}
+						onChange={handleChange}
+						spellCheck={false}
+						rows={3}
+						placeholder="{}"
+						style={{
+							width: '100%',
+							boxSizing: 'border-box',
+							background: 'var(--input-bg)',
+							border: '1px solid var(--input-border)',
+							color: 'var(--text)',
+							borderRadius: '8px',
+							padding: '10px',
+							fontFamily: 'ui-monospace, Menlo, monospace',
+							fontSize: '12px',
+							outline: 'none',
+							resize: 'vertical'
+						}}
+					/>
+					{errorMessage ? <div style={{ color: '#ffb4b4', fontSize: '11.5px', marginTop: '4px' }}>{errorMessage}</div> : null}
+				</div>
+			)}
 		</div>
 	)
 }