diff --git a/src/components/button/DarkButton.tsx b/src/components/button/DarkButton.tsx
new file mode 100644
index 0000000..ce898f5
--- /dev/null
+++ b/src/components/button/DarkButton.tsx
@@ -0,0 +1,39 @@
+import clsx from "clsx";
+import Button, { ButtonProps } from "./Button";
+
+
+export default function DarkButton(props: ButtonProps){
+	const {
+		variant = "solid"
+	} = props;
+
+
+	return (
+		<Button
+			{...props}
+			className={clsx(
+				props.className,
+				//Background
+				{
+					"bg-transparent": variant === "outline" || variant === "icon",
+					"bg-black hover:bg-neutral-700 active:bg-neutral-500": variant === "solid",
+					"bg-transparent hover:bg-black active:bg-neutral-700": variant === "ghost" || variant === "outline-ghost"
+				},
+				//Text
+				{
+					"text-white": variant === "solid",
+					"text-black hover:text-neutral-700 active:text-neutral-500": variant === "outline" || variant === "icon",
+					"text-black hover:text-white active:text-white": variant === "ghost" || variant === "outline-ghost"
+				},
+				//Outline
+				{
+					"outline-none": variant === "ghost" || variant === "icon",
+					"outline outline-black hover:outline-neutral-700 active:outline-neutral-500": variant === "solid" || variant === "outline",
+					"outline hover:outline-black active:outline-neutral-700": variant === "outline-ghost"
+				}
+			)}
+		>
+			{props.children}
+		</Button>
+	);
+}
diff --git a/src/components/button/InfoButton.tsx b/src/components/button/InfoButton.tsx
new file mode 100644
index 0000000..8c34be3
--- /dev/null
+++ b/src/components/button/InfoButton.tsx
@@ -0,0 +1,39 @@
+import clsx from "clsx";
+import Button, { ButtonProps } from "./Button";
+
+
+export default function InfoButton(props: ButtonProps){
+	const {
+		variant = "solid"
+	} = props;
+
+
+	return (
+		<Button
+			{...props}
+			className={clsx(
+				props.className,
+				//Background
+				{
+					"bg-transparent": variant === "outline" || variant === "icon",
+					"bg-cyan-300 hover:bg-cyan-400 active:bg-cyan-500": variant === "solid",
+					"bg-transparent hover:bg-cyan-300 active:bg-cyan-400": variant === "ghost" || variant === "outline-ghost"
+				},
+				//Text
+				{
+					"text-black": variant === "solid",
+					"text-cyan-300 hover:text-cyan-400 active:text-cyan-500": variant === "outline" || variant === "icon",
+					"text-cyan-300 hover:text-black active:text-black": variant === "ghost" || variant === "outline-ghost"
+				},
+				//Outline
+				{
+					"outline-none": variant === "ghost" || variant === "icon",
+					"outline outline-cyan-300 hover:outline-cyan-400 active:outline-cyan-500": variant === "solid" || variant === "outline",
+					"outline hover:outline-cyan-300 active:outline-cyan-400": variant === "outline-ghost"
+				}
+			)}
+		>
+			{props.children}
+		</Button>
+	);
+}
diff --git a/src/components/button/LightButton.tsx b/src/components/button/LightButton.tsx
new file mode 100644
index 0000000..2617c75
--- /dev/null
+++ b/src/components/button/LightButton.tsx
@@ -0,0 +1,39 @@
+import clsx from "clsx";
+import Button, { ButtonProps } from "./Button";
+
+
+export default function LightButton(props: ButtonProps){
+	const {
+		variant = "solid"
+	} = props;
+
+
+	return (
+		<Button
+			{...props}
+			className={clsx(
+				props.className,
+				//Background
+				{
+					"bg-transparent": variant === "outline" || variant === "icon",
+					"bg-white hover:bg-neutral-300 active:bg-neutral-400": variant === "solid",
+					"bg-transparent hover:bg-white active:bg-neutral-300": variant === "ghost" || variant === "outline-ghost"
+				},
+				//Text
+				{
+					"text-black": variant === "solid",
+					"text-white hover:text-neutral-300 active:text-neutral-400": variant === "outline" || variant === "icon",
+					"text-white hover:text-black active:text-black": variant === "ghost" || variant === "outline-ghost"
+				},
+				//Outline
+				{
+					"outline-none": variant === "ghost" || variant === "icon",
+					"outline outline-white hover:outline-neutral-300 active:outline-neutral-400": variant === "solid" || variant === "outline",
+					"outline hover:outline-neutral-300 active:outline-neutral-400": variant === "outline-ghost"
+				}
+			)}
+		>
+			{props.children}
+		</Button>
+	);
+}
diff --git a/src/components/button/MoltenButton.tsx b/src/components/button/MoltenButton.tsx
new file mode 100644
index 0000000..d99993b
--- /dev/null
+++ b/src/components/button/MoltenButton.tsx
@@ -0,0 +1,39 @@
+import clsx from "clsx";
+import Button, { ButtonProps } from "./Button";
+
+
+export default function MoltenButton(props: ButtonProps){
+	const {
+		variant = "solid"
+	} = props;
+
+
+	return (
+		<Button
+			{...props}
+			className={clsx(
+				props.className,
+				//Background
+				{
+					"bg-transparent": variant === "outline" || variant === "icon",
+					"bg-orange-600 hover:bg-orange-700 active:bg-orange-800": variant === "solid",
+					"bg-transparent hover:bg-orange-600 active:bg-orange-700": variant === "ghost" || variant === "outline-ghost"
+				},
+				//Text
+				{
+					"text-white": variant === "solid",
+					"text-orange-600 hover:text-orange-700 active:text-orange-800": variant === "outline" || variant === "icon",
+					"text-orange-600 hover:text-white active:text-white": variant === "ghost" || variant === "outline-ghost"
+				},
+				//Outline
+				{
+					"outline-none": variant === "ghost" || variant === "icon",
+					"outline outline-orange-600 hover:outline-orange-700 active:outline-orange-800": variant === "solid" || variant === "outline",
+					"outline hover:outline-orange-600 active:outline-orange-700": variant === "outline-ghost"
+				}
+			)}
+		>
+			{props.children}
+		</Button>
+	);
+}
diff --git a/src/components/message/DangerMessage.tsx b/src/components/message/DangerMessage.tsx
new file mode 100644
index 0000000..acfc073
--- /dev/null
+++ b/src/components/message/DangerMessage.tsx
@@ -0,0 +1,16 @@
+import clsx from "clsx";
+import { HTMLProps } from "react";
+import Message from "./Message";
+
+
+export default function DangerMessage(props: HTMLProps<HTMLDivElement>){
+	return (
+		<Message
+					{...props}
+					className={clsx(
+						"bg-red-100 text-red-500",
+						props.className
+					)}
+				/>
+	);
+}
diff --git a/src/components/message/DarkMessage.tsx b/src/components/message/DarkMessage.tsx
new file mode 100644
index 0000000..16b468b
--- /dev/null
+++ b/src/components/message/DarkMessage.tsx
@@ -0,0 +1,16 @@
+import clsx from "clsx";
+import { HTMLProps } from "react";
+import Message from "./Message";
+
+
+export default function DarkMessage(props: HTMLProps<HTMLDivElement>){
+	return (
+		<Message
+					{...props}
+					className={clsx(
+						"bg-black text-white",
+						props.className
+					)}
+				/>
+	);
+}
diff --git a/src/components/message/InfoMessage.tsx b/src/components/message/InfoMessage.tsx
new file mode 100644
index 0000000..a3f44f8
--- /dev/null
+++ b/src/components/message/InfoMessage.tsx
@@ -0,0 +1,16 @@
+import clsx from "clsx";
+import { HTMLProps } from "react";
+import Message from "./Message";
+
+
+export default function InfoMessage(props: HTMLProps<HTMLDivElement>){
+	return (
+		<Message
+					{...props}
+					className={clsx(
+						"bg-cyan-100 text-sky-500",
+						props.className
+					)}
+				/>
+	);
+}
diff --git a/src/components/message/LightMessage.tsx b/src/components/message/LightMessage.tsx
new file mode 100644
index 0000000..50872b8
--- /dev/null
+++ b/src/components/message/LightMessage.tsx
@@ -0,0 +1,16 @@
+import clsx from "clsx";
+import { HTMLProps } from "react";
+import Message from "./Message";
+
+
+export default function LightMessage(props: HTMLProps<HTMLDivElement>){
+	return (
+		<Message
+					{...props}
+					className={clsx(
+						"bg-white text-black",
+						props.className
+					)}
+				/>
+	);
+}
diff --git a/src/components/message/Message.tsx b/src/components/message/Message.tsx
new file mode 100644
index 0000000..a4c063f
--- /dev/null
+++ b/src/components/message/Message.tsx
@@ -0,0 +1,15 @@
+import clsx from "clsx";
+import { HTMLProps } from "react";
+
+
+export default function Message(props: HTMLProps<HTMLDivElement>){
+	return (
+		<div
+			{...props}
+			className={clsx(
+				"px-2 py-1 outline rounded-lg",
+				props.className
+			)}
+		/>
+	);
+}
diff --git a/src/components/message/MoltenMessage.tsx b/src/components/message/MoltenMessage.tsx
new file mode 100644
index 0000000..c98f4e6
--- /dev/null
+++ b/src/components/message/MoltenMessage.tsx
@@ -0,0 +1,16 @@
+import clsx from "clsx";
+import { HTMLProps } from "react";
+import Message from "./Message";
+
+
+export default function MoltenMessage(props: HTMLProps<HTMLDivElement>){
+	return (
+		<Message
+					{...props}
+					className={clsx(
+						"bg-orange-100 text-orange-500",
+						props.className
+					)}
+				/>
+	);
+}
diff --git a/src/components/message/PrimaryMessage.tsx b/src/components/message/PrimaryMessage.tsx
new file mode 100644
index 0000000..8f4e915
--- /dev/null
+++ b/src/components/message/PrimaryMessage.tsx
@@ -0,0 +1,16 @@
+import clsx from "clsx";
+import { HTMLProps } from "react";
+import Message from "./Message";
+
+
+export default function PrimaryMessage(props: HTMLProps<HTMLDivElement>){
+	return (
+		<Message
+			{...props}
+			className={clsx(
+				"bg-blue-200 text-blue-500",
+				props.className
+			)}
+		/>
+	);
+}
diff --git a/src/components/message/SecondaryMessage.tsx b/src/components/message/SecondaryMessage.tsx
new file mode 100644
index 0000000..d4f498d
--- /dev/null
+++ b/src/components/message/SecondaryMessage.tsx
@@ -0,0 +1,16 @@
+import clsx from "clsx";
+import { HTMLProps } from "react";
+import Message from "./Message";
+
+
+export default function SecondaryMessage(props: HTMLProps<HTMLDivElement>){
+	return (
+		<Message
+			{...props}
+			className={clsx(
+				"bg-neutral-200 text-neutral-600",
+				props.className
+			)}
+		/>
+	);
+}
diff --git a/src/components/message/SuccessMessage.tsx b/src/components/message/SuccessMessage.tsx
new file mode 100644
index 0000000..2bf8d8e
--- /dev/null
+++ b/src/components/message/SuccessMessage.tsx
@@ -0,0 +1,16 @@
+import clsx from "clsx";
+import { HTMLProps } from "react";
+import Message from "./Message";
+
+
+export default function SuccessMessage(props: HTMLProps<HTMLDivElement>){
+	return (
+		<Message
+			{...props}
+			className={clsx(
+				"bg-green-200 text-green-600",
+				props.className
+			)}
+		/>
+	);
+}
diff --git a/src/components/message/TertiaryMessage.tsx b/src/components/message/TertiaryMessage.tsx
new file mode 100644
index 0000000..32d7e76
--- /dev/null
+++ b/src/components/message/TertiaryMessage.tsx
@@ -0,0 +1,16 @@
+import clsx from "clsx";
+import { HTMLProps } from "react";
+import Message from "./Message";
+
+
+export default function TertiaryMessage(props: HTMLProps<HTMLDivElement>){
+	return (
+		<Message
+			{...props}
+			className={clsx(
+				"bg-purple-200 text-purple-500",
+				props.className
+			)}
+		/>
+	);
+}
diff --git a/src/components/message/WarningMessage.tsx b/src/components/message/WarningMessage.tsx
new file mode 100644
index 0000000..9f9ce54
--- /dev/null
+++ b/src/components/message/WarningMessage.tsx
@@ -0,0 +1,16 @@
+import clsx from "clsx";
+import { HTMLProps } from "react";
+import Message from "./Message";
+
+
+export default function WarningMessage(props: HTMLProps<HTMLDivElement>){
+	return (
+		<Message
+					{...props}
+					className={clsx(
+						"bg-yellow-100 text-yellow-600",
+						props.className
+					)}
+				/>
+	);
+}
diff --git a/src/pages/public/HomePage.tsx b/src/pages/public/HomePage.tsx
index b6e4ae1..5db12de 100644
--- a/src/pages/public/HomePage.tsx
+++ b/src/pages/public/HomePage.tsx
@@ -1,6 +1,8 @@
 export default function HomePage(){
 	return (
-		<main>
+		<main
+			className="flex flex-col items-center justify-center gap-4"
+		>
 			<div>Home Page</div>
 		</main>
 	);