diff --git a/Parts/Button.js b/Parts/Button.js
index e56a919..00a10b1 100644
--- a/Parts/Button.js
+++ b/Parts/Button.js
@@ -1,13 +1,13 @@
-import React from 'react'
+import React from "react"
 import tw, {styled} from "twin.macro"
-import 'styled-components/macro'
-import { colors, colorsDisabled, colorsHover } from './Colors'
+import "styled-components/macro"
+import { colors, colorsDisabled, colorsHover } from "./Colors"
 
 
 
 const BtnBase = styled.button(({ type }) => [
-    tw`bg-secondary hover:bg-trinary disabled:bg-trinary m-2 outline-none focus:outline-none text-primary font-bold ease-linear transition-all duration-150`,
-    colors[type], colorsHover[type], colorsDisabled[type]
+  tw`bg-secondary hover:bg-trinary disabled:bg-trinary m-2 outline-none focus:outline-none text-primary font-bold ease-linear transition-all duration-150`,
+  colors[type], colorsHover[type], colorsDisabled[type]
 ])
 
 /*
diff --git a/Parts/Card.js b/Parts/Card.js
index 4253e72..62bc23f 100644
--- a/Parts/Card.js
+++ b/Parts/Card.js
@@ -1,19 +1,18 @@
 import React from "react";
 import tw, {styled} from "twin.macro"
-import 'styled-components/macro'
+import "styled-components/macro"
+
+let Card = styled.div(tw`relative flex flex-col min-w-0 break-words bg-primary w-full shadow-xl rounded-2xl`)
+
+export default Card;
 
-export default function Card(props) {
-  return <div {...props} css={[tw`relative flex flex-col min-w-0 break-words bg-primary w-full shadow-xl rounded-2xl`, props.css]}>
-    {props.children}
-  </div>;
-}
 export function CardHeader(props) {
-    return <div tw="rounded-t px-6 py-4 pb-2 bg-transparent">
-      <div tw="flex flex-wrap items-center">
-        <div tw="relative w-full max-w-full flex-grow flex-1">
-          { props.desc != null ? <h2 tw="text-primary text-xl font-semibold">{props.desc}</h2> : ""}        
-        </div>
-        {props.children}
+  return <div tw="rounded-t px-6 py-4 pb-2 bg-transparent">
+    <div tw="flex flex-wrap items-center">
+      <div tw="relative w-full max-w-full flex-grow flex-1">
+        { props.desc != null ? <h2 tw="text-primary text-xl font-semibold">{props.desc}</h2> : ""}        
       </div>
-    </div>;
-  }
\ No newline at end of file
+      {props.children}
+    </div>
+  </div>;
+}
\ No newline at end of file
diff --git a/Parts/Charts.js b/Parts/Charts.js
index ac3d2fb..f801d63 100644
--- a/Parts/Charts.js
+++ b/Parts/Charts.js
@@ -1,5 +1,5 @@
 import React, { useRef, useState } from "react";
-import Chart from 'chart.js/auto';
+import Chart from "chart.js/auto";
 
 import Card, { CardHeader } from "./Card";
 import { createPopper } from "@popperjs/core";
@@ -25,16 +25,16 @@ function generateGetBoundingClientRect(x = 0, y = 0) { return () => ({ width: 0,
 
 function GetPlacement(tooltipModel) {
   switch (tooltipModel.xAlign) {
-    case "right":
-      return "left";
-    case "left":
-      return "right";
+  case "right":
+    return "left";
+  case "left":
+    return "right";
   }
   switch (tooltipModel.yAlign) {
-    case "top":
-      return "bottom";
-    case "bottom":
-      return "top";
+  case "top":
+    return "bottom";
+  case "bottom":
+    return "top";
   }
 }
 
diff --git a/Parts/Colors.js b/Parts/Colors.js
index 707f367..8a35638 100644
--- a/Parts/Colors.js
+++ b/Parts/Colors.js
@@ -1,47 +1,47 @@
 
 import tw, {styled} from "twin.macro"
-import 'styled-components/macro'
+import "styled-components/macro"
 
 
 export let colors = {
-    error: tw`bg-red-600`,
-    accent: tw`bg-accent`,
-    accent2: tw`bg-accent2`,
-    accent3: tw`bg-accent3`,
-    accent4: tw`bg-accent4`,
-    accent5: tw`bg-accent5`,
+  error: tw`bg-red-600`,
+  accent: tw`bg-accent`,
+  accent2: tw`bg-accent2`,
+  accent3: tw`bg-accent3`,
+  accent4: tw`bg-accent4`,
+  accent5: tw`bg-accent5`,
 }
 
 export let colorsHover = {
-    error: tw`hover:bg-red-700`,
-    accent: tw`hover:bg-accent-dark`,
-    accent2: tw`hover:bg-accent2-dark`,
-    accent3: tw`hover:bg-accent3-dark`,
-    accent4: tw`hover:bg-accent4-dark`,
-    accent5: tw`hover:bg-accent5-dark`,
+  error: tw`hover:bg-red-700`,
+  accent: tw`hover:bg-accent-dark`,
+  accent2: tw`hover:bg-accent2-dark`,
+  accent3: tw`hover:bg-accent3-dark`,
+  accent4: tw`hover:bg-accent4-dark`,
+  accent5: tw`hover:bg-accent5-dark`,
 }
 export let colorsDisabled = {
-    error: tw`disabled:bg-red-700`,
-    accent: tw`disabled:bg-accent-dark`,
-    accent2: tw`disabled:bg-accent2-dark`,
-    accent3: tw`disabled:bg-accent3-dark`,
-    accent4: tw`disabled:bg-accent4-dark`,
-    accent5: tw`disabled:bg-accent5-dark`,
+  error: tw`disabled:bg-red-700`,
+  accent: tw`disabled:bg-accent-dark`,
+  accent2: tw`disabled:bg-accent2-dark`,
+  accent3: tw`disabled:bg-accent3-dark`,
+  accent4: tw`disabled:bg-accent4-dark`,
+  accent5: tw`disabled:bg-accent5-dark`,
 }
 
 export let textColors = {
-    error: tw`text-red-600`,
-    accent: tw`text-accent`,
-    accent2: tw`text-accent2`,
-    accent3: tw`text-accent3`,
-    accent4: tw`text-accent4`,
-    accent5: tw`text-accent5`,    
+  error: tw`text-red-600`,
+  accent: tw`text-accent`,
+  accent2: tw`text-accent2`,
+  accent3: tw`text-accent3`,
+  accent4: tw`text-accent4`,
+  accent5: tw`text-accent5`,    
 }
 export let textColorsHover = {
-    error: tw`hover:text-red-700`,
-    accent: tw`hover:text-accent-dark`,
-    accent2: tw`hover:text-accent2-dark`,
-    accent3: tw`hover:text-accent3-dark`,
-    accent4: tw`hover:text-accent4-dark`,
-    accent5: tw`hover:text-accent5-dark`,    
+  error: tw`hover:text-red-700`,
+  accent: tw`hover:text-accent-dark`,
+  accent2: tw`hover:text-accent2-dark`,
+  accent3: tw`hover:text-accent3-dark`,
+  accent4: tw`hover:text-accent4-dark`,
+  accent5: tw`hover:text-accent5-dark`,    
 }
\ No newline at end of file
diff --git a/Parts/DropDown.js b/Parts/DropDown.js
index 5f7de52..a18187e 100644
--- a/Parts/DropDown.js
+++ b/Parts/DropDown.js
@@ -2,7 +2,7 @@ import React, { cloneElement, isValidElement, useEffect, useImperativeHandle, us
 import { createPopper } from "@popperjs/core";
 
 import tw, { styled } from "twin.macro"
-import 'styled-components/macro'
+import "styled-components/macro"
 import { colors, colorsDisabled, colorsHover, textColors, textColorsHover } from "./Colors";
 
 const DropDownItem = styled.button(({ type }) => [
@@ -14,7 +14,7 @@ const DropDownItem = styled.button(({ type }) => [
 ])
 export { DropDownItem }
 
-let Dropdown = React.forwardRef(({ children, dropdownCss, onValueChanged, button, popper, placement, hover, ...props }, ref) => {
+let Dropdown = React.forwardRef(({ children, dropdownCss, onValueChanged, button, buttonProps, popper, placement, hover, ...props }, ref) => {
   // dropdown props
   const [overButton, setOverButton] = React.useState(false);
   const [overDropDown, setOverDropDown] = React.useState(false);
@@ -45,17 +45,16 @@ let Dropdown = React.forwardRef(({ children, dropdownCss, onValueChanged, button
     }
   }
 
-
   useEffect(() => {
-    if ('ontouchend' in window) {
-      document.addEventListener('touchend', handleOutsideClick)
+    if ("ontouchend" in window) {
+      document.addEventListener("touchend", handleOutsideClick)
     } else {
-      document.addEventListener('click', handleOutsideClick)
+      document.addEventListener("click", handleOutsideClick)
     }
     // Specify how to clean up after this effect:
     return function cleanup() {
-      document.removeEventListener('touchend', handleOutsideClick)
-      document.removeEventListener('click', handleOutsideClick)
+      document.removeEventListener("touchend", handleOutsideClick)
+      document.removeEventListener("click", handleOutsideClick)
     };
   });
 
@@ -82,6 +81,7 @@ let Dropdown = React.forwardRef(({ children, dropdownCss, onValueChanged, button
         }}
         onMouseEnter={() => { setOverButton(true); hover && openDropdownPopover() }}
         onMouseLeave={() => { setOverButton(false); (!overDropDown && hover) && closeDropdownPopover() }}
+        {...buttonProps}
       >
         {button}
       </button>
diff --git a/Parts/Input.js b/Parts/Input.js
index 2d71eb0..3c706f8 100644
--- a/Parts/Input.js
+++ b/Parts/Input.js
@@ -1,46 +1,47 @@
-import React from 'react'
-import tw from 'twin.macro'
-import 'styled-components/macro'
+import React from "react"
 
-export default function Input({ label, title, name, id, children, ...props }) {
-    return (
-        <div css={title != null && tw`my-1`}>
-            {title && (
-                <label {...label} css={[tw`block text-secondary text-sm font-bold mb-2`, label?.css]} htmlFor={id ?? name ?? title}>
-                    {title}
-                </label>
-            )}
-            <input {...props} name={name || title} id={id || name || title} tw="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 " />
-            {children}
-        </div>
-    )
+import tw, { styled } from "twin.macro"
+import "styled-components/macro"
+
+export default function Input({ label, title, className, name, id, children, ...props }) {
+  return (
+    <div css={[title && tw`my-1`]} className={className}>
+      {title && (
+        <label {...label} css={[tw`block text-secondary text-sm font-bold mb-2`, label?.css]} htmlFor={id ?? name ?? title}>
+          {title}
+        </label>
+      )}
+      <input {...props} name={name || title} id={id || name || title} tw="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 " />
+      {children}
+    </div>
+  )
 }
-export function TextArea({ label, title, name, id, children, ...props }) {
-    return (
-        <div tw="my-1">
-            {title && (
-                <label {...label} css={[tw`block text-secondary text-sm font-bold mb-2`, label?.css]} htmlFor={id ?? name ?? title}>
-                    {title}
-                </label>
-            )}
-            <textarea {...props} name={name ?? title} id={id ?? name ?? title} tw="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 " />
-            {children}
-        </div>
-    )
+export function TextArea({ label, title, className, name, id, children, ...props }) {
+  return (
+    <div css={[title && tw`my-1`]} className={className}>
+      {title && (
+        <label {...label} css={[tw`block text-secondary text-sm font-bold mb-2`, label?.css]} htmlFor={id ?? name ?? title}>
+          {title}
+        </label>
+      )}
+      <textarea {...props} name={name ?? title} id={id ?? name ?? title} tw="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 " />
+      {children}
+    </div>
+  )
 }
 
-export function CheckBox({ label, title, name, id, children, ...props }) {
-    return (
-        <div tw="my-1 flex text-secondary">
-            <input {...props} type="checkbox" name={name ?? title} id={id ?? name ?? title} tw="checked:bg-accent w-6 h-6 rounded-full bg-secondary border-secondary border-4 appearance-none cursor-pointer " />
-            {title != null ? (
-                <label {...label} htmlFor={id ?? name ?? title} css={[tw`block font-bold px-2`, label?.css]}>
-                    {title}
-                </label>
-            ) : null
-            }
-            {children}
-        </div >
-    )
+export function CheckBox({ label, title, className, name, id, children, ...props }) {
+  return (
+    <div tw="my-1 flex text-secondary" className={className}>
+      <input {...props} type="checkbox" name={name ?? title} id={id ?? name ?? title} tw="checked:bg-accent w-6 h-6 rounded-full bg-secondary border-secondary border-4 appearance-none cursor-pointer " />
+      {title != null ? (
+        <label {...label} htmlFor={id ?? name ?? title} css={[tw`block font-bold px-2`, label?.css]}>
+          {title}
+        </label>
+      ) : null
+      }
+      {children}
+    </div >
+  )
 }
 
diff --git a/Parts/Layout.js b/Parts/Layout.js
index 69cf5e4..9afc4a8 100644
--- a/Parts/Layout.js
+++ b/Parts/Layout.js
@@ -1,6 +1,6 @@
-import React from 'react'
+import React from "react"
 import tw, {styled} from "twin.macro"
-import 'styled-components/macro'
+import "styled-components/macro"
 
 const Full = styled.div(tw`w-full lg:px-2 py-2`)
 export {Full}
@@ -11,6 +11,9 @@ export {Half}
 const Quarter = styled.div(tw`w-full lg:w-6/12 xl:w-3/12 lg:px-2 py-2 `)
 export {Quarter}
 
+const Sixth = styled.div(tw`w-full lg:w-1/5 xl:w-1/6 lg:px-2 py-2 `)
+export {Sixth}
+
 const Third = styled.div(tw`w-full lg:w-4/12 lg:px-2 py-2 `)
 export {Third}
 
diff --git a/Parts/Modal.js b/Parts/Modal.js
index bb75be5..30498e7 100644
--- a/Parts/Modal.js
+++ b/Parts/Modal.js
@@ -1,17 +1,17 @@
-import React from 'react'
-import { Third } from './Layout'
+import React from "react"
+import { Third } from "./Layout"
 
 import tw, { styled } from "twin.macro"
-import 'styled-components/macro'
+import "styled-components/macro"
 
 function Modal({ isOpen, onBackdropClick, ...props }) {
-    if (isOpen) {
-        return <div onClick={onBackdropClick} tw="fixed flex flex-col justify-center items-center inset-0 bg-gray-800 bg-opacity-75">
-            <Third {...props} onClick={e=>e.stopPropagation()}>
-                {props.children}
-            </Third>
-        </div>
-    }
-    return null;
+  if (isOpen) {
+    return <div onClick={onBackdropClick} tw="fixed flex flex-col justify-center items-center inset-0 bg-gray-800 bg-opacity-75 z-50">
+      <Third {...props} onClick={e=>e.stopPropagation()}>
+        {props.children}
+      </Third>
+    </div>
+  }
+  return null;
 }
 export default Modal
diff --git a/Parts/Pagination.js b/Parts/Pagination.js
index f3a9bcf..1e111f6 100644
--- a/Parts/Pagination.js
+++ b/Parts/Pagination.js
@@ -1,62 +1,62 @@
 import Button from "./Button";
 import tw, { styled } from "twin.macro"
-import 'styled-components/macro'
+import "styled-components/macro"
 
 function CustomBtn({children, setPage, currentPage, page, css, ...props}){
-    console.log(css)
-    return <Button onClick={()=>{setPage(page??children); console.log(page??children)}} css={[tw`rounded-none mx-0`, currentPage==children && tw`bg-accent`, css]} {...props}>{children}</Button>
+  console.log(css)
+  return <Button onClick={()=>setPage(Number(page??children))} css={[tw`rounded-none mx-0`, currentPage==children && tw`bg-accent`, css]} {...props}>{children}</Button>
 }
 
 export default function Pagination({ currentPage, maxPages, setPage, ...props }) {
 
-    function RenderButtons() {
-        switch (maxPages) {
-            case 1:
-                return <CustomBtn tw="rounded-xl" setPage={setPage} currentPage={currentPage}>1</CustomBtn>;
-            case 2:
-                return <>
-                    <CustomBtn tw="rounded-l-xl" setPage={setPage} currentPage={currentPage}>1</CustomBtn>
-                    <CustomBtn tw="rounded-r-xl" setPage={setPage} currentPage={currentPage}>2</CustomBtn>
-                </>
-            case 3:
-                return <>
-                    <CustomBtn tw="rounded-l-xl" setPage={setPage} currentPage={currentPage}>1</CustomBtn>
-                    <CustomBtn setPage={setPage} currentPage={currentPage}>2</CustomBtn>
-                    <CustomBtn tw="rounded-r-xl" setPage={setPage} currentPage={currentPage}>3</CustomBtn>
-                </>
-            case 4:
-                return <>
-                    <CustomBtn tw="rounded-l-xl" setPage={setPage} currentPage={currentPage}>1</CustomBtn>
-                    <CustomBtn setPage={setPage} currentPage={currentPage}>2</CustomBtn>
-                    <CustomBtn setPage={setPage} currentPage={currentPage}>3</CustomBtn>
-                    <CustomBtn tw="rounded-r-xl" setPage={setPage} currentPage={currentPage}>4</CustomBtn>
-                </>
-            case 5:
-                return <>
-                    <CustomBtn tw="rounded-l-xl" setPage={setPage} currentPage={currentPage}>1</CustomBtn>
-                    <CustomBtn setPage={setPage} currentPage={currentPage}>2</CustomBtn>
-                    <CustomBtn setPage={setPage} currentPage={currentPage}>3</CustomBtn>
-                    <CustomBtn setPage={setPage} currentPage={currentPage}>4</CustomBtn>
-                    <CustomBtn tw="rounded-r-xl" setPage={setPage} currentPage={currentPage}>5</CustomBtn>
-                </>
-            default: {
-                return <>
-                    {currentPage > 3 && <CustomBtn css={[tw`rounded-l-xl`]} page={1} setPage={setPage} currentPage={currentPage}>&lt;</CustomBtn>}
-                    <CustomBtn css={[currentPage <= 3 &&tw`rounded-l-xl`]} setPage={setPage} currentPage={currentPage}>{Math.max(currentPage-2,1)}</CustomBtn>
-                    <CustomBtn setPage={setPage} currentPage={currentPage}>{Math.max(currentPage-2,1)+1}</CustomBtn>
-                    <CustomBtn setPage={setPage} currentPage={currentPage}>{Math.max(currentPage-2,1)+2}</CustomBtn>
-                    {(maxPages - currentPage) >= 1 && <CustomBtn css={[(Math.max(currentPage-2,1)+3)==maxPages && tw`rounded-r-xl`]} setPage={setPage} currentPage={currentPage}>{Math.max(currentPage-2,1)+3}</CustomBtn>}
-                    {(maxPages - currentPage) >= 2 && <CustomBtn css={[(Math.max(currentPage-2,1)+4)==maxPages && tw`rounded-r-xl`]} tw="rounded-r-xl" setPage={setPage} currentPage={currentPage}>{Math.max(currentPage-2,1)+4}</CustomBtn>}
-                    {(maxPages - currentPage) >= 3 && <CustomBtn css={[tw`rounded-r-xl`]} page={maxPages} setPage={setPage} currentPage={currentPage}>&gt;</CustomBtn>}
-                </>
-            }
-
-        }
+  function RenderButtons() {
+    switch (maxPages) {
+    case 1:
+      return <CustomBtn tw="rounded-xl" setPage={setPage} currentPage={currentPage}>1</CustomBtn>;
+    case 2:
+      return <>
+        <CustomBtn tw="rounded-l-xl" setPage={setPage} currentPage={currentPage}>1</CustomBtn>
+        <CustomBtn tw="rounded-r-xl" setPage={setPage} currentPage={currentPage}>2</CustomBtn>
+      </>
+    case 3:
+      return <>
+        <CustomBtn tw="rounded-l-xl" setPage={setPage} currentPage={currentPage}>1</CustomBtn>
+        <CustomBtn setPage={setPage} currentPage={currentPage}>2</CustomBtn>
+        <CustomBtn tw="rounded-r-xl" setPage={setPage} currentPage={currentPage}>3</CustomBtn>
+      </>
+    case 4:
+      return <>
+        <CustomBtn tw="rounded-l-xl" setPage={setPage} currentPage={currentPage}>1</CustomBtn>
+        <CustomBtn setPage={setPage} currentPage={currentPage}>2</CustomBtn>
+        <CustomBtn setPage={setPage} currentPage={currentPage}>3</CustomBtn>
+        <CustomBtn tw="rounded-r-xl" setPage={setPage} currentPage={currentPage}>4</CustomBtn>
+      </>
+    case 5:
+      return <>
+        <CustomBtn tw="rounded-l-xl" setPage={setPage} currentPage={currentPage}>1</CustomBtn>
+        <CustomBtn setPage={setPage} currentPage={currentPage}>2</CustomBtn>
+        <CustomBtn setPage={setPage} currentPage={currentPage}>3</CustomBtn>
+        <CustomBtn setPage={setPage} currentPage={currentPage}>4</CustomBtn>
+        <CustomBtn tw="rounded-r-xl" setPage={setPage} currentPage={currentPage}>5</CustomBtn>
+      </>
+    default: {
+      return <>
+        {currentPage > 3 && <CustomBtn css={[tw`rounded-l-xl`]} page={1} setPage={setPage} currentPage={currentPage}>&lt;</CustomBtn>}
+        <CustomBtn css={[currentPage <= 3 &&tw`rounded-l-xl`]} setPage={setPage} currentPage={currentPage}>{Math.max(currentPage-2,1)}</CustomBtn>
+        <CustomBtn setPage={setPage} currentPage={currentPage}>{Math.max(currentPage-2,1)+1}</CustomBtn>
+        <CustomBtn setPage={setPage} currentPage={currentPage}>{Math.max(currentPage-2,1)+2}</CustomBtn>
+        {(maxPages - currentPage) >= 1 && <CustomBtn css={[(Math.max(currentPage-2,1)+3)==maxPages && tw`rounded-r-xl`]} setPage={setPage} currentPage={currentPage}>{Math.max(currentPage-2,1)+3}</CustomBtn>}
+        {(maxPages - currentPage) >= 2 && <CustomBtn css={[(Math.max(currentPage-2,1)+4)==maxPages && tw`rounded-r-xl`]} tw="rounded-r-xl" setPage={setPage} currentPage={currentPage}>{Math.max(currentPage-2,1)+4}</CustomBtn>}
+        {(maxPages - currentPage) >= 3 && <CustomBtn css={[tw`rounded-r-xl`]} page={maxPages} setPage={setPage} currentPage={currentPage}>&gt;</CustomBtn>}
+      </>
     }
 
-    return (
-        <div {...props}>
-            <RenderButtons />
-        </div>
-    )
+    }
+  }
+
+  return (
+    <div {...props}>
+      <RenderButtons />
+    </div>
+  )
 }
\ No newline at end of file
diff --git a/Parts/RangeSlider.js b/Parts/RangeSlider.js
index 3d66dda..0e922d8 100644
--- a/Parts/RangeSlider.js
+++ b/Parts/RangeSlider.js
@@ -2,25 +2,25 @@ import React, { useState, useEffect, useRef } from "react";
 
 import styles from "./RangeSlider.scss"
 
-import tw from 'twin.macro'
-import 'styled-components/macro'
+import tw from "twin.macro"
+import "styled-components/macro"
 
 
 export function RangeSlider({ value=0, rangeType="", onChange, min=0, max=10, right = true, ...props }) {
-    let ref = useRef(null)
+  let ref = useRef(null)
 
-    useEffect(() => {
-        if (ref.current) {
-            ref.current.style.left = (((Math.max(Math.min(value-min, max-min), 0)) * 100) / ((max-min)+2)) + `%`;
-        }
-    })
+  useEffect(() => {
+    if (ref.current) {
+      ref.current.style.left = (((Math.max(Math.min(value-min, max-min), 0)) * 100) / ((max-min)+2)) + "%";
+    }
+  })
 
-    return (
-        <div tw="flex flex-col py-2" {...props}>
-            <div className="rs-label w-full" ref={ref}>
-                {!right ? (rangeType + "" + value) : (value + "" + rangeType)}
-            </div>
-            <input type="range" className="rs-range relative range" min={min} max={max} value={value} onChange={({target: {value: radius}})=>onChange(radius)}  />
-        </div>
-    );
+  return (
+    <div tw="flex flex-col py-2" {...props}>
+      <div className="rs-label w-full" ref={ref}>
+        {!right ? (rangeType + "" + value) : (value + "" + rangeType)}
+      </div>
+      <input type="range" className="rs-range relative range" min={min} max={max} value={value} onChange={({target: {value: radius}})=>onChange(radius)}  />
+    </div>
+  );
 }
diff --git a/Parts/Table.js b/Parts/Table.js
index bca582f..1a8d684 100644
--- a/Parts/Table.js
+++ b/Parts/Table.js
@@ -1,6 +1,6 @@
 import React from "react";
 import tw, {styled} from "twin.macro"
-import 'styled-components/macro'
+import "styled-components/macro"
 
 export function Table(props) {
   return <div tw="block w-full overflow-x-auto text-secondary">
diff --git a/Parts/Text.js b/Parts/Text.js
index 4c031e9..52da39d 100644
--- a/Parts/Text.js
+++ b/Parts/Text.js
@@ -1,15 +1,15 @@
-import React from 'react'
+import React from "react"
 import tw, {styled} from "twin.macro"
-import 'styled-components/macro'
-import { textColors, textColorsHover } from './Colors'
+import "styled-components/macro"
+import { textColors, textColorsHover } from "./Colors"
 
 
 function Text() {
-    return (
-        <div>
+  return (
+    <div>
 
-        </div>
-    )
+    </div>
+  )
 }
 
 const Divider = styled.hr(tw`my-2 md:min-w-full border-secondary`)
@@ -21,12 +21,12 @@ export {DividerGreen}
 
 
 const ClickableText = styled.button(({ type }) => [
-    // The common button styles added with the tw import
-    tw`text-secondary hover:text-primary font-semibold cursor-pointer`,
+  // The common button styles added with the tw import
+  tw`text-secondary hover:text-primary font-semibold cursor-pointer`,
     
-    // Use props to conditionally style your components
-    textColors[type], textColorsHover[type]
-  ])
+  // Use props to conditionally style your components
+  textColors[type], textColorsHover[type]
+])
 export {ClickableText}
 
 export default Text
diff --git a/globalStyle.js b/globalStyle.js
index 6c31b73..3d65f85 100644
--- a/globalStyle.js
+++ b/globalStyle.js
@@ -1,6 +1,6 @@
-import React, { useState } from 'react'
-import { createGlobalStyle } from 'styled-components'
-import tw, { theme, GlobalStyles as BaseStyles } from 'twin.macro'
+import React, { useState } from "react"
+import { createGlobalStyle } from "styled-components"
+import tw, { theme, GlobalStyles as BaseStyles } from "twin.macro"
 
 const CustomStyles = createGlobalStyle`
 body {