diff --git a/Parts/Button.js b/Parts/Button.js
index 14b101d..8562218 100644
--- a/Parts/Button.js
+++ b/Parts/Button.js
@@ -22,7 +22,6 @@ function ButtonBase(props) {
             color = "bg-accent5 hover:bg-accent5-dark"
             break;
         default:
-            color = ""
             break;
     }
     return (
diff --git a/Parts/Input.js b/Parts/Input.js
index 37b936a..8eaf093 100644
--- a/Parts/Input.js
+++ b/Parts/Input.js
@@ -1,10 +1,10 @@
 import React from 'react'
 
-function Input(props) {
+export default function Input(props) {
     return (
-        <div className={props.title != null ? "mb-3": ""}>
+        <div className={props.title != null ? "my-1": ""}>
             {props.title != null ? (
-            <label {...props.label} className={"block text-secondary text-sm font-bold mb-2 "+props.label?.className} htmlFor={props.id || props.name || props.title}>
+            <label {...props.label} className={"block text-secondary text-sm font-bold mb-1 "+props.label?.className} htmlFor={props.id || props.name || props.title}>
                 {props.title}
             </label>
             ) : null}
@@ -13,19 +13,28 @@ function Input(props) {
         </div>
     )
 }
-function TextArea(props) {
+export function TextArea({label, title, name, id, children, ...props}) {
     return (
-        <div className="mb-3">
-            <label {...props.label} className={"block text-secondary text-sm font-bold mb-2 "+props.label?.className} htmlFor={props.id || props.name || props.title}>
-                {props.title}
+        <div className="my-1">
+            <label {...label} className={"block text-secondary text-sm font-bold mb-2 "+ label?.className} htmlFor={id ?? name ?? title}>
+                {title}
             </label>
-            <textarea {...props} name={props.name || props.title} id={props.id || props.name || props.title} className={"bg-primary appearance-none border-2 border-secondary rounded w-full py-2 px-4 text-primary leading-tight focus:outline-none focus:bg-secondary focus:border-accent transition duration-150 "+props.className}/>
-            {props.children}
+            <textarea {...props} name={name ?? title} id={id ?? name ?? props.title} className={"bg-primary appearance-none border-2 border-secondary rounded w-full py-2 px-4 text-primary leading-tight focus:outline-none focus:bg-secondary focus:border-accent transition duration-150 "+props.className}/>
+            {children}
         </div>
     )
 }
 
-export default Input
-export {
-    TextArea
+export function CheckBox({label, title, name, id, children, ...props}){
+    return(
+    <div class="my-1 flex text-secondary">
+        <input {...props} type="checkbox" name={name ?? title} id={id ?? name ?? title} className={"checked:bg-accent w-6 h-6 rounded-full bg-secondary border-secondary border-4 appearance-none cursor-pointer "+props.className}/>
+        {title != null ? (
+        <label {...props.label} htmlFor={id ?? name ?? title} class="block font-bold px-2">
+            {title}
+        </label>
+        ) : null}
+        {children}
+    </div>
+    )
 }
diff --git a/Parts/Text.js b/Parts/Text.js
index 52de582..9456c3b 100644
--- a/Parts/Text.js
+++ b/Parts/Text.js
@@ -8,7 +8,33 @@ function Text() {
     )
 }
 export function Divider() {
-    return <hr className="my-4 md:min-w-full border-secondary" />;
+    return <hr className="my-2 md:min-w-full border-secondary" />;
+}
+export function ClickableText({className, ...props}){
+    let color = "text-secondary hover:text-primary"
+    switch (props.type) {
+        case "warning":
+            color = "text-accent4 hover:text-accent4-dark"
+            break;
+        case "danger":
+            color = "text-red-700 hover:text-red-800"
+            break;
+        case "accent":
+            color = "text-accent hover:text-accent-dark"
+            break;
+        case "accent2":
+            color = "text-accent2 hover:text-accent2-dark"
+            break;
+        case "accent3":
+            color = "text-accent3 hover:text-accent3-dark"
+            break;
+        case "accent5":
+            color = "text-accent5 hover:btextg-accent5-dark"
+            break;
+        default:
+            break;
+    }
+    return <a {...props} className={color + " text-secondary hover:text-primary font-semibold cursor-pointer " + (className ?? "")}>{props.children}</a>
 }
 
 export default Text