diff --git a/lib/component/loading/various/Wifi.tsx b/lib/component/loading/various/Wifi.tsx
index c1de083..347c0c4 100644
--- a/lib/component/loading/various/Wifi.tsx
+++ b/lib/component/loading/various/Wifi.tsx
@@ -1,4 +1,5 @@
 import type { LoadingWifiProps } from "$/types/LoadingTypes";
+import { useId } from "react";
 
 
 export default function Wifi({
@@ -9,9 +10,9 @@ export default function Wifi({
 	fadeDuration = 0.001,
 	stroke,
 	fill
-}: LoadingWifiProps){
+}: Readonly<LoadingWifiProps>){
 	//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/wifi.svg
-	const id = crypto.randomUUID().replaceAll("-", "");
+	const id = useId();
 
 
 	return (
diff --git a/src/routes/buttons/index.tsx b/src/routes/buttons/index.tsx
index c433398..7e0cf4e 100644
--- a/src/routes/buttons/index.tsx
+++ b/src/routes/buttons/index.tsx
@@ -120,10 +120,10 @@ function generateTabContent(Fn: (props: ButtonProps) => JSX.Element, onClick: ()
 function ButtonDisplay({
 	title,
 	children
-}:{
+}: Readonly<{
 	title: React.ReactNode;
 	children: React.ReactNode;
-}){
+}>){
 	return (
 		<div
 			className="flex flex-col items-center justify-center gap-y-2"
diff --git a/src/routes/modal/index.tsx b/src/routes/modal/index.tsx
index 8225cde..32dc29f 100644
--- a/src/routes/modal/index.tsx
+++ b/src/routes/modal/index.tsx
@@ -77,10 +77,10 @@ function ModalPage(){
 function DemoCenteredModal({
 	display,
 	onClose
-}:{
+}: Readonly<{
 	display: boolean;
 	onClose: () => void;
-}){
+}>){
 	return (
 		<Modal
 			display={display}
@@ -97,10 +97,10 @@ function DemoCenteredModal({
 function DemoTopModal({
 	display,
 	onClose
-}:{
+}: Readonly<{
 	display: boolean;
 	onClose: () => void;
-}){
+}>){
 	return (
 		<Modal
 			display={display}
diff --git a/src/routes/progress/index.tsx b/src/routes/progress/index.tsx
index e1e5437..9671ed8 100644
--- a/src/routes/progress/index.tsx
+++ b/src/routes/progress/index.tsx
@@ -128,13 +128,13 @@ function ProgressPage() {
 function ProgressBlock({
 	label,
 	children
-}:{
+}: Readonly<{
 	label: string;
 	children: React.ReactNode;
-}){
+}>){
 	return (
 		<div
-			className="flex flex-col items-center justify-center w-128 gap-y-2"
+			className="flex flex-col items-center justify-center w-lg gap-y-2"
 		>
 			<h3
 				className="font-bold text-2xl"
diff --git a/src/util/InputUtils.tsx b/src/util/InputUtils.tsx
index 60811c8..a60dcbf 100644
--- a/src/util/InputUtils.tsx
+++ b/src/util/InputUtils.tsx
@@ -579,13 +579,13 @@ export function TextContent(){
 		<div
 			className="flex flex-col items-center justify-center gap-y-8 mt-8 w-full"
 		>
-			<TextDisplay title="Text Input">
+			<GeneralInputDisplay title="Text Input">
 				<TextInput placeholder="Text Input" labelClassName="bg-(--bg-color) peer-focus:bg-(--bg-color)"/>
-			</TextDisplay>
-			<TextDisplay title="Text Area">
+			</GeneralInputDisplay>
+			<GeneralInputDisplay title="Text Area">
 				<TextArea placeholder="Textarea" className="resize" labelClassName="bg-(--bg-color) peer-focus:bg-(--bg-color)"/>
-			</TextDisplay>
-			<TextDisplay title="Select">
+			</GeneralInputDisplay>
+			<GeneralInputDisplay title="Select">
 				<SelectInput placeholder={selected.label} onChange={(newValue) => setSelected(selectOptions.find((option) => option.value === newValue) || selectOptions[0])}>
 					{
 						selectOptions.map((option) => (
@@ -599,8 +599,8 @@ export function TextContent(){
 						))
 					}
 				</SelectInput>
-			</TextDisplay>
-			<TextDisplay
+			</GeneralInputDisplay>
+			<GeneralInputDisplay
 				title="Number Input"
 			>
 				<NumberInput
@@ -610,9 +610,9 @@ export function TextContent(){
 				>
 					Number Test
 				</NumberInput>
-			</TextDisplay>
+			</GeneralInputDisplay>
 			{/* */
-			<TextDisplay
+			<GeneralInputDisplay
 				title="Number Slider"
 			>
 				<NumberSlider
@@ -621,13 +621,13 @@ export function TextContent(){
 					value={numberValue}
 					onChange={setNumberValue}
 				/>
-			</TextDisplay>
+			</GeneralInputDisplay>
 			/* */}
 		</div>
 	);
 }
 
-function TextDisplay({
+function GeneralInputDisplay({
 	title,
 	children
 }:Readonly<{
@@ -649,13 +649,13 @@ export function FileContent(){
 		<div
 			className="flex flex-col items-center justify-center gap-y-8 mt-8 w-full"
 		>
-			<FileDisplay title="File Input">
+			<GeneralInputDisplay title="File Input">
 				<FileInput
 					showFileName={true}
 					showSize={true}
 				/>
-			</FileDisplay>
-			<FileDisplay title="Drag and Drop File Input">
+			</GeneralInputDisplay>
+			<GeneralInputDisplay title="Drag and Drop File Input">
 				<DragAndDropFileInput
 					showFileName={true}
 					showSize={true}
@@ -664,24 +664,7 @@ export function FileContent(){
 				>
 					Drag And Drop File Input
 				</DragAndDropFileInput>
-			</FileDisplay>
-		</div>
-	);
-}
-
-function FileDisplay({
-	title,
-	children
-}:Readonly<{
-	title: React.ReactNode;
-	children: React.ReactNode;
-}>){
-	return (
-		<div
-			className="flex flex-col items-center justify-center gap-y-2 w-full"
-		>
-			<h2 className="text-2xl">{title}</h2>
-			{children}
+			</GeneralInputDisplay>
 		</div>
 	);
 }
@@ -691,7 +674,7 @@ export function CheckboxContent(){
 		<div
 			className="flex flex-col items-center justify-center gap-y-8 mt-8 w-full"
 		>
-			<CheckboxDisplay title="Checkbox">
+			<GeneralInputDisplay title="Checkbox">
 				<div className="flex flex-row items-center justify-center gap-x-8">
 					<MattrixwvCheckbox className="group-data-checked:stroke-white group-data-checked:bg-amber-400" defaultChecked={true}>Default</MattrixwvCheckbox>
 					<PrimaryCheckbox defaultChecked={true} >Primary</PrimaryCheckbox>
@@ -705,8 +688,8 @@ export function CheckboxContent(){
 					<LightCheckbox defaultChecked={true}>Light</LightCheckbox>
 					<DarkCheckbox defaultChecked={true}>Dark</DarkCheckbox>
 				</div>
-			</CheckboxDisplay>
-			<CheckboxDisplay title="Checks">
+			</GeneralInputDisplay>
+			<GeneralInputDisplay title="Checks">
 				<div className="flex flex-row items-center justify-center gap-x-8">
 					<MattrixwvCheckbox className="group-data-checked:stroke-amber-400" defaultChecked={true} showBox={false}>Default</MattrixwvCheckbox>
 					<PrimaryCheckbox defaultChecked={true} showBox={false}>Primary</PrimaryCheckbox>
@@ -720,24 +703,7 @@ export function CheckboxContent(){
 					<LightCheckbox defaultChecked={true} showBox={false}>Light</LightCheckbox>
 					<DarkCheckbox defaultChecked={true} showBox={false}>Dark</DarkCheckbox>
 				</div>
-			</CheckboxDisplay>
-		</div>
-	);
-}
-
-function CheckboxDisplay({
-	title,
-	children
-}:Readonly<{
-	title: React.ReactNode;
-	children: React.ReactNode;
-}>){
-	return (
-		<div
-			className="flex flex-col items-center justify-center gap-y-2 w-full"
-		>
-			<h2 className="text-2xl">{title}</h2>
-			{children}
+			</GeneralInputDisplay>
 		</div>
 	);
 }
@@ -747,7 +713,7 @@ export function RadioContent(){
 		<div
 			className="flex flex-col items-center justify-center gap-y-8 mt-8 w-full"
 		>
-			<RadioDisplay title="Sizes">
+			<GeneralInputDisplay title="Sizes">
 				<RadioList
 				>
 					<PrimaryRadioButton size="xs" value="xs">Extra Small</PrimaryRadioButton>
@@ -756,8 +722,8 @@ export function RadioContent(){
 					<PrimaryRadioButton size="lg" value="lg">Large</PrimaryRadioButton>
 					<PrimaryRadioButton size="xl" value="xl">Extra Large</PrimaryRadioButton>
 				</RadioList>
-			</RadioDisplay>
-			<RadioDisplay title="Radio Checked">
+			</GeneralInputDisplay>
+			<GeneralInputDisplay title="Radio Checked">
 				<div
 					className="flex flex-row items-center justify-center gap-x-8"
 				>
@@ -772,8 +738,8 @@ export function RadioContent(){
 					<RadioList value="Light"><LightRadioButton value="Light">Light</LightRadioButton></RadioList>
 					<RadioList value="Dark"><DarkRadioButton value="Dark">Dark</DarkRadioButton></RadioList>
 				</div>
-			</RadioDisplay>
-			<RadioDisplay title="Radio Horizontal">
+			</GeneralInputDisplay>
+			<GeneralInputDisplay title="Radio Horizontal">
 				<RadioList
 					direction="horizontal"
 				>
@@ -789,8 +755,8 @@ export function RadioContent(){
 					<LightRadioButton value="light">Light</LightRadioButton>
 					<DarkRadioButton value="dark">Dark</DarkRadioButton>
 				</RadioList>
-			</RadioDisplay>
-			<RadioDisplay title="Radio Vertical">
+			</GeneralInputDisplay>
+			<GeneralInputDisplay title="Radio Vertical">
 				<RadioList
 					direction="vertical"
 				>
@@ -806,24 +772,7 @@ export function RadioContent(){
 					<LightRadioButton value="light">Light</LightRadioButton>
 					<DarkRadioButton value="dark">Dark</DarkRadioButton>
 				</RadioList>
-			</RadioDisplay>
-		</div>
-	);
-}
-
-function RadioDisplay({
-	title,
-	children
-}:Readonly<{
-	title: React.ReactNode;
-	children: React.ReactNode;
-}>){
-	return (
-		<div
-			className="flex flex-col items-center justify-center gap-y-2 w-full"
-		>
-			<h2 className="text-2xl">{title}</h2>
-			{children}
+			</GeneralInputDisplay>
 		</div>
 	);
 }
diff --git a/src/util/LoadingUtils.tsx b/src/util/LoadingUtils.tsx
index 048a8d8..a79e4e0 100644
--- a/src/util/LoadingUtils.tsx
+++ b/src/util/LoadingUtils.tsx
@@ -47,10 +47,10 @@ import type { JSX } from "react";
 function LoadingGroup({
 	label,
 	elements
-}:{
+}: Readonly<{
 	label: React.ReactNode;
 	elements: JSX.Element[];
-}){
+}>){
 	return (
 		<div
 			className="flex flex-col items-center justify-center"