diff --git a/.storybook/main.ts b/.storybook/main.ts
index f3d4e8e..474ae7e 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -24,7 +24,7 @@ const config: StorybookConfig = {
   docs: {},
 
   typescript: {
-    reactDocgen: 'react-docgen-typescript'
-  }
+    reactDocgen: 'react-docgen-typescript',
+  },
 }
 export default config
diff --git a/package.json b/package.json
index 8bb7266..9813a9c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ooni-components",
-  "version": "0.7.0-alpha.3",
+  "version": "0.7.0-alpha.5",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
diff --git a/src/components/Checkbox.tsx b/src/components/Checkbox.tsx
index 4122186..6d5d658 100644
--- a/src/components/Checkbox.tsx
+++ b/src/components/Checkbox.tsx
@@ -1,17 +1,24 @@
 import React, { forwardRef } from 'react'
 import { twMerge } from 'tailwind-merge'
-export interface CheckboxProps {
+import ErrorMessage from './ErrorMessage'
+
+type CheckboxProps = Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  'type'
+> & {
   error?: string
-  name: string
   label: string
-  disabled?: boolean
-  className?: string
 }
 
 const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
   ({ name, label, error, disabled = false, className, ...props }, ref) => (
     <>
-      <div className={twMerge(`relative flex items-start ${disabled && 'opacity-50'}`, className)}>
+      <div
+        className={twMerge(
+          `relative flex items-start ${disabled && 'opacity-50'}`,
+          className,
+        )}
+      >
         <div className="flex items-center h-5">
           <input
             ref={ref}
@@ -50,8 +57,8 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
         <div className="ml-2">
           <label htmlFor={name}>{label}</label>
         </div>
-        {/* {error} */}
       </div>
+      {error && <ErrorMessage>{error}</ErrorMessage>}
     </>
   ),
 )
diff --git a/src/components/ErrorMessage.tsx b/src/components/ErrorMessage.tsx
index e954727..032acdd 100644
--- a/src/components/ErrorMessage.tsx
+++ b/src/components/ErrorMessage.tsx
@@ -1,11 +1,15 @@
-import React, { ReactNode } from 'react'
+import React from 'react'
+import { twMerge } from 'tailwind-merge'
 
-interface ErrorMessageProps {
-  children: ReactNode
-}
-
-const ErrorMessage = ({ children }: ErrorMessageProps) => {
-  return <p className="mt-1 text-sm text-red-700">{children}</p>
+const ErrorMessage = ({
+  children,
+  className,
+}: React.HTMLAttributes<HTMLElement>) => {
+  return (
+    <p className={twMerge('mt-1 text-sm text-red-700', className)}>
+      {children}
+    </p>
+  )
 }
 
 export default ErrorMessage
diff --git a/src/components/IconButton.tsx b/src/components/IconButton.tsx
index 2e56d4c..ed41b4d 100644
--- a/src/components/IconButton.tsx
+++ b/src/components/IconButton.tsx
@@ -1,6 +1,7 @@
 import React, { ReactNode } from 'react'
 
-export interface IconButtonProps {
+export interface IconButtonProps
+  extends React.HtmlHTMLAttributes<HTMLButtonElement> {
   icon: ReactNode
 }
 
diff --git a/src/components/Input.tsx b/src/components/Input.tsx
index 8237166..2db9ec8 100644
--- a/src/components/Input.tsx
+++ b/src/components/Input.tsx
@@ -1,18 +1,20 @@
 import React, { forwardRef } from 'react'
 import ErrorMessage from './ErrorMessage'
 
-export interface InputProps {
+type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> & {
   error?: string
   label?: string
-  name: string
 }
 
 const Input = forwardRef<HTMLInputElement, InputProps>(
-  ({ error, name, label, ...props }, ref) => {
+  ({ error, name, label, className, ...props }, ref) => {
     return (
-      <div>
+      <div className={className}>
         {label && (
-          <label className="font-semibold mb-1 block" htmlFor={name}>
+          <label
+            className="font-semibold mb-1 block leading-none"
+            htmlFor={name}
+          >
             {label}
           </label>
         )}
diff --git a/src/components/Label.tsx b/src/components/Label.tsx
deleted file mode 100644
index 5d9ef1d..0000000
--- a/src/components/Label.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React, { forwardRef } from 'react'
-
-interface LabelProps {
-  children?: React.ReactNode
-}
-
-const Label = forwardRef<HTMLLabelElement, LabelProps>((props, ref) => (
-  <label
-    ref={ref}
-    {...props}
-    style={{
-      width: '100%',
-    }}
-  />
-))
-
-export default Label
diff --git a/src/components/MultiSelect.tsx b/src/components/MultiSelect.tsx
index 61591a1..b22e20a 100644
--- a/src/components/MultiSelect.tsx
+++ b/src/components/MultiSelect.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import Select from 'react-select'
+import { twMerge } from 'tailwind-merge'
 import ErrorMessage from './ErrorMessage'
 
 export interface MultiSelectProps {
@@ -20,7 +21,7 @@ const MultiSelect = ({
 }: MultiSelectProps) => (
   <div className={className}>
     {label && (
-      <label className="font-semibold mb-1 block" htmlFor={name}>
+      <label className="font-semibold mb-1 block leading-none" htmlFor={name}>
         {label}
       </label>
     )}
@@ -28,13 +29,14 @@ const MultiSelect = ({
       options={options}
       isMulti
       styles={{
-        control: (baseStyles) => ({
-          ...baseStyles,
+        control: () => ({
+          outline: '0',
+          transition: 'all 100ms',
+          borderStyle: 'solid',
+          boxSizing: 'border-box',
           borderRadius: '32px',
           minHeight: '36.5px',
-          borderWidth: '1px',
           boxShadow: 'none',
-          paddingLeft: '5px',
         }),
         indicatorSeparator: () => ({
           display: 'none',
@@ -52,17 +54,21 @@ const MultiSelect = ({
           '&:before': {
             content: '"✕"',
             fontSize: '80%',
-            padding: '0 6px 0 4px',
+            padding: '0 8px 0 4px',
           },
         }),
       }}
       classNames={{
         control: (state) =>
-          state.isFocused
-            ? 'border-blue-500 hover:border-blue-500'
-            : 'border-grey-700 hover:border-gray-800',
+          twMerge(
+            'flex flex-wrap cursor-default items-center relative border',
+            state.isFocused
+              ? 'border-blue-500 hover:border-blue-500'
+              : 'border-gray-600 hover:border-gray-800',
+          ),
         multiValue: () => 'bg-gray-300',
-        multiValueRemove: () => 'hover:cursor-pointer text-red-700',
+        multiValueRemove: () =>
+          'hover:cursor-pointer hover:text-red-700 self-center',
       }}
       {...props}
     />
diff --git a/src/components/MultiSelectCreatable.tsx b/src/components/MultiSelectCreatable.tsx
index 3572972..58b0d7e 100644
--- a/src/components/MultiSelectCreatable.tsx
+++ b/src/components/MultiSelectCreatable.tsx
@@ -1,6 +1,7 @@
 import React, { FocusEvent, KeyboardEventHandler, useEffect } from 'react'
 import { MultiValue } from 'react-select'
 import CreatableSelect from 'react-select/creatable'
+import { twMerge } from 'tailwind-merge'
 import ErrorMessage from './ErrorMessage'
 
 interface Option {
@@ -64,7 +65,7 @@ const MultiSelectCreatable = ({
   return (
     <div className={className}>
       {label && (
-        <label className="font-semibold mb-1 block" htmlFor={name}>
+        <label className="font-semibold mb-1 block leading-none" htmlFor={name}>
           {label}
         </label>
       )}
@@ -80,20 +81,25 @@ const MultiSelectCreatable = ({
         value={value}
         classNames={{
           control: (state) =>
-            state.isFocused
-              ? 'border-blue-500 hover:border-blue-500'
-              : 'border-gray-600 hover:border-gray-800',
+            twMerge(
+              'flex flex-wrap cursor-default items-center relative border',
+              state.isFocused
+                ? 'border-blue-500 hover:border-blue-500'
+                : 'border-gray-600 hover:border-gray-800',
+            ),
           multiValue: () => 'bg-gray-300',
-          multiValueRemove: () => 'hover:cursor-pointer text-red-700',
+          multiValueRemove: () =>
+            'hover:cursor-pointer hover:text-red-700 self-center',
         }}
         styles={{
-          control: (baseStyles) => ({
-            ...baseStyles,
+          control: () => ({
+            outline: '0',
+            transition: 'all 100ms',
+            borderStyle: 'solid',
+            boxSizing: 'border-box',
             borderRadius: '32px',
             minHeight: '36.5px',
-            borderWidth: '1px',
             boxShadow: 'none',
-            paddingLeft: '5px',
           }),
           indicatorSeparator: () => ({
             display: 'none',
@@ -111,7 +117,7 @@ const MultiSelectCreatable = ({
             '&:before': {
               content: '"✕"',
               fontSize: '80%',
-              padding: '0 6px 0 4px',
+              padding: '0 8px 0 4px',
             },
           }),
         }}
diff --git a/src/components/RadioButton.tsx b/src/components/RadioButton.tsx
index 6b52692..f64e39e 100644
--- a/src/components/RadioButton.tsx
+++ b/src/components/RadioButton.tsx
@@ -1,8 +1,10 @@
 import React, { forwardRef } from 'react'
 
-export interface RadioButtonProps extends React.HTMLProps<HTMLInputElement> {
-  label?: string
-  name: string
+type RadioButtonProps = Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  'type'
+> & {
+  label: string
 }
 
 const RadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(
diff --git a/src/components/RadioGroup.tsx b/src/components/RadioGroup.tsx
index a0fd511..c57ee34 100644
--- a/src/components/RadioGroup.tsx
+++ b/src/components/RadioGroup.tsx
@@ -1,13 +1,8 @@
 import React, { ChangeEvent, Children, ReactNode, cloneElement } from 'react'
 import { twMerge } from 'tailwind-merge'
 
-export interface RadioGroupProps {
-  children?: ReactNode
-  name?: string
-  value?: string
+type RadioGroupProps = React.InputHTMLAttributes<HTMLInputElement> & {
   flexDirection?: 'row' | 'column'
-  className?: string
-  onChange: (arg: string) => void
 }
 
 const RadioGroup = ({
diff --git a/src/components/Select.tsx b/src/components/Select.tsx
index ceb203e..552a762 100644
--- a/src/components/Select.tsx
+++ b/src/components/Select.tsx
@@ -1,16 +1,16 @@
 import React, { forwardRef } from 'react'
 import ErrorMessage from './ErrorMessage'
 
-export interface SelectProps extends React.HTMLProps<HTMLSelectElement> {
-  label?: string
+type SelectProps = React.InputHTMLAttributes<HTMLSelectElement> & {
   error?: string
+  label?: string
 }
 
 const Select = forwardRef<HTMLSelectElement, SelectProps>(
   ({ label, name, className, error, ...props }, ref) => (
     <div className={className}>
       {label && (
-        <label className="font-semibold mb-1 block" htmlFor={name}>
+        <label className="font-semibold mb-1 block leading-none" htmlFor={name}>
           {label}
         </label>
       )}
diff --git a/src/components/Textarea.tsx b/src/components/Textarea.tsx
index 51efdc5..b413999 100644
--- a/src/components/Textarea.tsx
+++ b/src/components/Textarea.tsx
@@ -1,18 +1,20 @@
 import React, { forwardRef } from 'react'
 import ErrorMessage from './ErrorMessage'
 
-export interface TextareaProps {
+type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
   error?: string
   label?: string
-  name: string
 }
 
 const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ error, label, name, ...props }, ref) => {
+  ({ error, label, name, className, ...props }, ref) => {
     return (
-      <div>
+      <div className={className}>
         {label && (
-          <label className="font-semibold mb-1 block" htmlFor={name}>
+          <label
+            className="font-semibold mb-1 block leading-none"
+            htmlFor={name}
+          >
             {label}
           </label>
         )}
@@ -27,7 +29,7 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
             p-2
             block 
             w-full
-          bg-white
+            bg-white
             align-middle 
             box-border
             rounded
diff --git a/src/index.ts b/src/index.ts
index 2562d33..720786f 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,6 +1,5 @@
 export { default as Checkbox } from './components/Checkbox'
 export { default as Input } from './components/Input'
-export { default as Label } from './components/Label'
 export { default as LogoOONIRun } from './components/LogoOONIRun'
 export { default as Modal } from './components/Modal'
 export { default as MultiSelect } from './components/MultiSelect'
@@ -11,4 +10,3 @@ export { default as Select } from './components/Select'
 export { default as Textarea } from './components/Textarea'
 export { default as theme } from './theme'
 export { default as colors } from './theme/colors'
-
diff --git a/src/tailwind.css b/src/tailwind.css
index f8cfb66..c0c240e 100644
--- a/src/tailwind.css
+++ b/src/tailwind.css
@@ -43,33 +43,39 @@
   @apply px-16 py-3.5 text-2xl;
 }
 
+@layer components {
+  .container {
+    @apply max-w-7xl mx-auto w-full px-4;
+  }
+}
+
 @layer base {
   a {
     @apply text-blue-500 hover:text-blue-800;
   }
 
   h1 {
-    @apply text-5xl font-light leading-normal
+    @apply text-4xl/normal md:text-5xl/normal font-light;
   }
 
   h2 {
-    @apply text-4xl font-light leading-normal
+    @apply text-3xl/normal md:text-4xl/normal font-light;
   }
 
   h3 {
-    @apply text-2xl font-semibold leading-normal
+    @apply text-xl/normal md:text-2xl/normal font-semibold;
   }
 
   h4 {
-    @apply text-xl font-semibold leading-normal
+    @apply text-lg/normal md:text-xl/normal font-semibold;
   }
 
   h5 {
-    @apply text-base font-semibold leading-normal
+    @apply text-base/normal font-semibold;
   }
 
   h6 {
-    @apply text-xs font-semibold leading-normal
+    @apply text-xs/normal font-semibold;
   }
 
   * {
diff --git a/src/theme/colors.ts b/src/theme/colors.ts
index 570b2dc..f6b5f16 100644
--- a/src/theme/colors.ts
+++ b/src/theme/colors.ts
@@ -155,4 +155,4 @@ export default {
     800: '#0c8599',
     900: '#0b7285',
   },
-}
\ No newline at end of file
+}
diff --git a/src/theme/index.ts b/src/theme/index.ts
index 4e205b0..a45773f 100644
--- a/src/theme/index.ts
+++ b/src/theme/index.ts
@@ -1,7 +1,7 @@
-import colors from "./colors"
+import colors from './colors'
 
 export default {
   extend: {
-    colors
+    colors,
   },
 }
diff --git a/stories/LogoOONIRun.stories.tsx b/stories/LogoOONIRun.stories.tsx
index a80f458..68d6761 100644
--- a/stories/LogoOONIRun.stories.tsx
+++ b/stories/LogoOONIRun.stories.tsx
@@ -10,5 +10,9 @@ const meta: Meta = {
 export default meta
 
 export const Default = () => {
-  return <div className='bg-black'><LogoOONIRun height="70px" /></div>
+  return (
+    <div className="bg-black">
+      <LogoOONIRun height="70px" />
+    </div>
+  )
 }
diff --git a/stories/Modal.stories.tsx b/stories/Modal.stories.tsx
index fe3d0eb..1803610 100644
--- a/stories/Modal.stories.tsx
+++ b/stories/Modal.stories.tsx
@@ -25,7 +25,9 @@ export const Default = () => {
   return (
     <>
       <div className="flex items-center">
-        <button className='btn btn-primary' onClick={() => setShow(true)}>Show Modal</button>
+        <button className="btn btn-primary" onClick={() => setShow(true)}>
+          Show Modal
+        </button>
       </div>
       <Modal show={show} onHideClick={onClose}>
         <div className="p-4">Modal Content</div>