diff --git a/src/components/TraitInformation.jsx b/src/components/TraitInformation.jsx
index f6fdc0d3..12369704 100644
--- a/src/components/TraitInformation.jsx
+++ b/src/components/TraitInformation.jsx
@@ -131,6 +131,18 @@ export default function TraitInformation({currentVRM, animationManager}){
onClick={nextAnimation}
>
+
+
+
+ Mouse Follow
+
+
+
+
+
diff --git a/src/components/TraitInformation.module.css b/src/components/TraitInformation.module.css
index 9e1eed72..dee01a70 100644
--- a/src/components/TraitInformation.module.css
+++ b/src/components/TraitInformation.module.css
@@ -98,4 +98,45 @@
.anim-button:hover {
opacity: 1;
+}
+
+/* Hide the default checkbox */
+.custom-checkbox input[type="checkbox"] {
+ display: none;
+}
+
+/* Style the custom checkbox */
+.custom-checkbox .checkbox-container {
+ display: inline-block;
+ width: 20px;
+ height: 20px;
+ border: 2px solid #284b39; /* Change border color as needed */
+ border-radius: 5px;
+ cursor: pointer;
+}
+
+.custom-checkbox .checkbox-container.checked {
+ background-color: #5eb086; /* Change background color when checked */
+}
+
+.custom-checkbox .checkbox-container .checkmark {
+ display: none;
+}
+
+/* Style the checkmark when the checkbox is checked */
+.custom-checkbox input[type="checkbox"]:checked + .checkbox-container {
+ background-color: #5eb086; /* Change background color when checked */
+}
+
+.custom-checkbox input[type="checkbox"]:checked + .checkbox-container .checkmark {
+ display: block;
+}
+
+.checkboxHolder {
+ display: flex;
+ gap: 20px;
+ align-items: center;
+ justify-content: flex-start;
+ align-content: center;
+ height: 40px;
}
\ No newline at end of file