diff --git a/assets/icons/index.tsx b/assets/icons/index.tsx
index 1b822c3..797cbc2 100644
--- a/assets/icons/index.tsx
+++ b/assets/icons/index.tsx
@@ -9,8 +9,8 @@ const LoadingSpinner: FC = () => (
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
+      fillRule="evenodd"
+      clipRule="evenodd"
       d="M18.65 8.35L15.86 11.14C15.54 11.46 15.76 12 16.21 12H18C18 15.31 15.31 18 12 18C11.21 18 10.44 17.85 9.75003 17.56C9.39003 17.41 8.98003 17.52 8.71003 17.79C8.20003 18.3 8.38003 19.16 9.05003 19.43C9.96003 19.8 10.96 20 12 20C16.42 20 20 16.42 20 12H21.79C22.24 12 22.46 11.46 22.14 11.15L19.35 8.36C19.16 8.16 18.84 8.16 18.65 8.35V8.35ZM6.00003 12C6.00003 8.69 8.69003 6 12 6C12.79 6 13.56 6.15 14.25 6.44C14.61 6.59 15.02 6.48 15.29 6.21C15.8 5.7 15.62 4.84 14.95 4.57C14.04 4.2 13.04 4 12 4C7.58003 4 4.00003 7.58 4.00003 12H2.21003C1.76003 12 1.54003 12.54 1.86003 12.85L4.65003 15.64C4.85003 15.84 5.16003 15.84 5.36003 15.64L8.15003 12.85C8.46003 12.54 8.24003 12 7.79003 12H6.00003Z"
       fill="white"
     />
diff --git a/src/buttons/Button.tsx b/src/buttons/Button.tsx
index 321da6e..f251203 100644
--- a/src/buttons/Button.tsx
+++ b/src/buttons/Button.tsx
@@ -23,7 +23,7 @@ const ImageLoading = styled.div`
 `
 
 const Button: FC<Props> = ({
-  className,
+  className='',
   onClick,
   children,
   disabled,
diff --git a/src/index.tsx b/src/index.tsx
index 2e4be28..1218c4a 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -4,6 +4,7 @@ export { default as Option } from './inputs/dropdown/Dropdown'
 export { default as DatePicker } from './inputs/datePicker/DatePicker'
 export { default as TextArea } from './inputs/textArea/TextArea'
 export { default as Typography } from './typography/Typography'
+export { default as Checkbox } from './inputs/checkbox/Checkbox'
 export { default as HeadingOne } from './typography/HeadingOne'
 export { default as HeadingTwo } from './typography/HeadingTwo'
 export { default as HeadingThree } from './typography/HeadingThree'
@@ -13,3 +14,4 @@ export { default as HeadingSix } from './typography/HeadingSix'
 export { default as BodyText } from './typography/BodyText'
 export { default as Link } from './typography/Link'
 export { default as Button } from './buttons/Button'
+export { default as Tag } from './labels/Tag'
diff --git a/src/inputs/checkbox/Checkbox.tsx b/src/inputs/checkbox/Checkbox.tsx
new file mode 100644
index 0000000..2be6958
--- /dev/null
+++ b/src/inputs/checkbox/Checkbox.tsx
@@ -0,0 +1,34 @@
+import React, { ChangeEventHandler, FC, InputHTMLAttributes } from 'react'
+import '../../index.css'
+
+export interface Props extends InputHTMLAttributes<HTMLInputElement> {
+    className?: string
+    onChange?: ChangeEventHandler,
+    children?: any
+    disabled?: boolean,
+    isChecked?: boolean
+}
+
+const Checkbox: FC<Props> = ({
+    className = '',
+    onChange,
+    children,
+    disabled = false,
+    isChecked = false
+}: Props) => {
+    return (
+        <label className="inline-flex items-center">
+            <input
+                className={` ${className} form-checkbox h-4 w-4`}
+                onChange={onChange}
+                type="checkbox"
+                disabled={disabled}
+                checked={isChecked}
+                data-testid="checkbox"
+            />
+            <span className="ml-2">{children}</span>
+        </label>
+    )
+}
+
+export default Checkbox;
\ No newline at end of file
diff --git a/src/inputs/checkbox/index.tsx b/src/inputs/checkbox/index.tsx
new file mode 100644
index 0000000..696cfda
--- /dev/null
+++ b/src/inputs/checkbox/index.tsx
@@ -0,0 +1,5 @@
+import Checkbox from './Checkbox'
+
+export { Checkbox }
+
+export default { Checkbox }
\ No newline at end of file
diff --git a/src/inputs/datePicker/DatePicker.tsx b/src/inputs/datePicker/DatePicker.tsx
index 62eb9b1..23bd6c3 100644
--- a/src/inputs/datePicker/DatePicker.tsx
+++ b/src/inputs/datePicker/DatePicker.tsx
@@ -14,7 +14,7 @@ export interface Props {
 }
 
 
-const DatePicker: FC<Props> = ({ className, onChange, variant = "datePicker", format = "DD/MM/YYYY", value }: Props) => (
+const DatePicker: FC<Props> = ({ className='', onChange, variant = "datePicker", format = "DD/MM/YYYY", value }: Props) => (
     <Space
         className={`${className}`}
         direction="vertical"
diff --git a/src/inputs/dropdown/Dropdown.tsx b/src/inputs/dropdown/Dropdown.tsx
index 326a378..3e9a598 100644
--- a/src/inputs/dropdown/Dropdown.tsx
+++ b/src/inputs/dropdown/Dropdown.tsx
@@ -14,7 +14,7 @@ export interface Props {
     placeholder?: string
 }
 
-const Dropdown: FC<Props> = ({ className, children, onBlur, onChange, onFocus, onSearch }: Props) => (
+const Dropdown: FC<Props> = ({ className='', children, onBlur, onChange, onFocus, onSearch }: Props) => (
     <Select
         virtual={false}
         defaultValue="Select an Item"
diff --git a/src/inputs/index.tsx b/src/inputs/index.tsx
index d03d567..2a2796d 100644
--- a/src/inputs/index.tsx
+++ b/src/inputs/index.tsx
@@ -2,8 +2,9 @@ import Input from './input/Input'
 import Dropdown, { Option } from './dropdown/Dropdown'
 import DatePicker from './datePicker/DatePicker'
 import TextArea from './textArea/TextArea'
+import Checkbox from './checkbox/Checkbox'
 
-export { Input, Dropdown, Option, DatePicker, TextArea }
+export { Input, Dropdown, Option, DatePicker, TextArea, Checkbox }
 
-export default { Input, Dropdown, Option, DatePicker, TextArea }
+export default { Input, Dropdown, Option, DatePicker, TextArea, Checkbox }
 
diff --git a/src/inputs/input/Input.tsx b/src/inputs/input/Input.tsx
index 6e23de2..4e844a8 100644
--- a/src/inputs/input/Input.tsx
+++ b/src/inputs/input/Input.tsx
@@ -24,7 +24,7 @@ export interface Props extends InputHTMLAttributes<HTMLInputElement> {
 // `
 
 const Input: FC<Props> = ({
-  className,
+  className='',
   onChange,
   variant = "text",
   ...rest
diff --git a/src/inputs/textArea/TextArea.tsx b/src/inputs/textArea/TextArea.tsx
index 14cf20e..66ca2d1 100644
--- a/src/inputs/textArea/TextArea.tsx
+++ b/src/inputs/textArea/TextArea.tsx
@@ -8,14 +8,14 @@ export interface Props extends InputHTMLAttributes<HTMLInputElement> {
 }
 
 const TextArea: FC<Props> = ({
-    className,
+    className='',
     onChange,
     value,
     placeholder
 }: Props) => {
     return (
         <textarea
-            className={` ${className} border border-grey font-poppins  py-12 px-16 rounded-sm focus:outline-none `}
+            className={`${className} border border-grey font-poppins  py-12 px-16 rounded-sm focus:outline-none rounded-lg`}
             onChange={onChange}
             value={value}
             placeholder={placeholder}
diff --git a/src/labels/Tag.tsx b/src/labels/Tag.tsx
new file mode 100644
index 0000000..0293a8e
--- /dev/null
+++ b/src/labels/Tag.tsx
@@ -0,0 +1,64 @@
+import React, { FC } from 'react'
+import '../index.css'
+
+export interface Props {
+    className?: string
+    children?: any
+    variant: string,
+    count?: number
+    isCount?: boolean
+}
+
+const Tag: FC<Props> = ({
+    className = '',
+    children,
+    variant,
+    isCount = false,
+    count = 0
+}: Props) => {
+
+    const types: any = {
+        SuccessTag: {
+            backgroundColor: 'bg-green-300',
+            textUtils: 'text-white font-poppins rounded-md',
+        },
+        WarningTag: {
+            backgroundColor: 'bg-yellow-500',
+            textUtils: 'text-white font-poppins rounded-md',
+        },
+        DangerTag: {
+            backgroundColor: 'bg-red-300',
+            textUtils: 'text-white font-poppins rounded-md',
+        },
+        ActiveTag: {
+            backgroundColor: 'bg-green-300',
+            textUtils: 'text-white font-poppins rounded-md',
+        },
+        InactiveTag: {
+            borderColor: 'border border-solid border-red-200',
+            backgroundColor: 'bg-transparent',
+            textUtils: 'text-gray-300 font-poppins rounded-md',
+        },
+        UnknownTag: {
+            backgroundColor: 'bg-orange-400',
+            textUtils: 'text-gray-300 font-poppins rounded-full',
+        },
+        CountTag: {
+            backgroundColor: 'bg-red-200',
+            textUtils: 'text-white font-poppins rounded-lg',
+        }
+    }
+
+    const classNames: string = Object.values(types[variant]).join(' ')
+
+    return (
+        <div className={`${className} ${classNames} text-sm inline-flex items-center leading-sm px-3 py-1`}>
+            {isCount ? (
+                count
+            ) : (
+                children
+            )}
+        </div>
+    )
+}
+export default Tag;
diff --git a/src/labels/index.tsx b/src/labels/index.tsx
new file mode 100644
index 0000000..1922396
--- /dev/null
+++ b/src/labels/index.tsx
@@ -0,0 +1,5 @@
+import Tag from './Tag'
+
+export { Tag }
+
+export default { Tag }
diff --git a/src/typography/BodyText.tsx b/src/typography/BodyText.tsx
index 63974a7..b30476a 100644
--- a/src/typography/BodyText.tsx
+++ b/src/typography/BodyText.tsx
@@ -6,7 +6,7 @@ export interface Props {
   children: any
 }
 
-const BodyText: FC<Props> = ({ children, className }: Props) => (
+const BodyText: FC<Props> = ({ children, className='' }: Props) => (
   <p className={` ${className} text-black text-base`}>{children}</p>
 )
 
diff --git a/src/typography/HeadingFive.tsx b/src/typography/HeadingFive.tsx
index 98baba7..c400da4 100644
--- a/src/typography/HeadingFive.tsx
+++ b/src/typography/HeadingFive.tsx
@@ -6,7 +6,7 @@ interface Props {
   children: any
 }
 
-const HeadingFive: FC<Props> = ({ children, className }: Props) => (
+const HeadingFive: FC<Props> = ({ children, className='' }: Props) => (
   <h5 className={` ${className} text-2xl text-black font-poppins`}>
     {children}
   </h5>
diff --git a/src/typography/HeadingFour.tsx b/src/typography/HeadingFour.tsx
index 972b281..47877be 100644
--- a/src/typography/HeadingFour.tsx
+++ b/src/typography/HeadingFour.tsx
@@ -5,7 +5,7 @@ interface Props {
     className: string
     children: any
 }
-const HeadingFour: FC<Props> = ({ children, className }: Props) => (
+const HeadingFour: FC<Props> = ({ children, className='' }: Props) => (
     <h4 className={` ${className} text-3xl text-black font-poppins`}>
         {children}
     </h4>
diff --git a/src/typography/HeadingOne.tsx b/src/typography/HeadingOne.tsx
index f3df05f..dd9e5f2 100644
--- a/src/typography/HeadingOne.tsx
+++ b/src/typography/HeadingOne.tsx
@@ -6,7 +6,7 @@ interface Props {
   children: any
 }
 
-const HeadingOne: FC<Props> = ({ children, className }: Props) => (
+const HeadingOne: FC<Props> = ({ children, className='' }: Props) => (
   <h1 className={` ${className} text-6xl text-black font-poppins`}>
     {children}
   </h1>
diff --git a/src/typography/HeadingSix.tsx b/src/typography/HeadingSix.tsx
index 338d77c..80d0caa 100644
--- a/src/typography/HeadingSix.tsx
+++ b/src/typography/HeadingSix.tsx
@@ -6,7 +6,7 @@ interface Props {
   children: any
 }
 
-const HeadingSix: FC<Props> = ({ children, className }: Props) => (
+const HeadingSix: FC<Props> = ({ children, className='' }: Props) => (
   <h6 className={` ${className} text-1xl text-black font-poppins`}>
     {children}
   </h6>
diff --git a/src/typography/HeadingThree.tsx b/src/typography/HeadingThree.tsx
index 9f617ff..5a43d61 100644
--- a/src/typography/HeadingThree.tsx
+++ b/src/typography/HeadingThree.tsx
@@ -5,7 +5,7 @@ interface Props {
     className: string
     children: any
 }
-const HeadingThree: FC<Props> = ({ children, className }: Props) => (
+const HeadingThree: FC<Props> = ({ children, className='' }: Props) => (
     <h3 className={` ${className} text-4xl text-black font-poppins`}>
         {children}
     </h3>
diff --git a/src/typography/HeadingTwo.tsx b/src/typography/HeadingTwo.tsx
index 72515f3..2a034af 100644
--- a/src/typography/HeadingTwo.tsx
+++ b/src/typography/HeadingTwo.tsx
@@ -6,7 +6,7 @@ interface Props {
   children: any
 }
 
-const HeadingTwo: FC<Props> = ({ children, className }: Props) => (
+const HeadingTwo: FC<Props> = ({ children, className='' }: Props) => (
   <h2 className={` ${className} text-5xl text-black font-poppins`}>
     {children}
   </h2>
diff --git a/src/typography/Link.tsx b/src/typography/Link.tsx
index d41d7f9..de8a1d9 100644
--- a/src/typography/Link.tsx
+++ b/src/typography/Link.tsx
@@ -6,7 +6,7 @@ interface Props {
   children: any
   url: string
 }
-const Link: FC<Props> = ({ children, className, url }: Props) => (
+const Link: FC<Props> = ({ children, className='', url }: Props) => (
   <a
     href={url}
     className={` ${className} text-black font-poppins no-underline hover:underline hover:text-blue-400`}
diff --git a/src/typography/Typography.tsx b/src/typography/Typography.tsx
index b513fa7..a8aa493 100644
--- a/src/typography/Typography.tsx
+++ b/src/typography/Typography.tsx
@@ -16,7 +16,7 @@ export interface Props {
 }
 const Typography: FC<Props> = ({
   variant,
-  className,
+  className='',
   children,
   href,
 }: Props) => {
diff --git a/stories/Inputs.stories.tsx b/stories/inputs.stories.tsx
similarity index 62%
rename from stories/Inputs.stories.tsx
rename to stories/inputs.stories.tsx
index 9deaf85..f80e32b 100644
--- a/stories/Inputs.stories.tsx
+++ b/stories/inputs.stories.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Input, Dropdown, DatePicker, TextArea } from '../src/inputs'
+import { Input, Dropdown, DatePicker, TextArea, Checkbox } from '../src/inputs'
 import { Option } from '../src/inputs/dropdown'
 export default {
   title: 'Input/Inputs',
@@ -11,6 +11,16 @@ function onChange(value: any) {
   console.log(`selected ${value}`)
 }
 
+function handleChange(isChecked: any) {
+  isChecked = !isChecked;
+  if ((document.getElementById('checkbox') as HTMLInputElement).checked) {
+    isChecked = !isChecked;
+    console.log("uchecked")
+  } else {
+    console.log("checked");
+  }
+}
+
 function onBlur() {
   console.log('blur')
 }
@@ -25,17 +35,17 @@ function onSearch(val: any) {
 export const Default = () =>
   <ul>
     <li>
-      <li>
+      <p>
         <b>Text Input</b>
-      </li>
+      </p>
       <Input
         placeholder="Type here"
         onChange={onChange} />
     </li><br />
     <li>
-      <li>
+      <p>
         <b>Number Input</b>
-      </li>
+      </p>
       <Input
         onChange={onChange}
         variant="number"
@@ -63,17 +73,17 @@ export const Dropdown_Menu = () => (
 export const Date_Picker = () => (
   <ul>
     <li>
-      <li>
+      <p>
         <b>Date Picker</b>
-      </li>
+      </p>
       <DatePicker
         onChange={onChange}>
       </DatePicker>
     </li><br />
     <li>
-      <li>
+      <p>
         <b>Range Picker</b>
-      </li>
+      </p>
       <DatePicker
         onChange={onChange}
         variant="rangePicker">
@@ -89,3 +99,38 @@ export const Text_Area = () =>
       placeholder="Enter Text here.." />
   </div>
 
+export const CheckBox = () =>
+  <ul>
+    <li>
+      <p>
+        <b>Unchecked</b>
+      </p>
+      <Checkbox
+        onChange={handleChange}
+      >
+        Placeholder
+    </Checkbox>
+    </li><br />
+    <li>
+      <p>
+        <b>Checked</b>
+      </p>
+      <Checkbox
+        onChange={handleChange}
+        isChecked={true}>
+        Placeholder
+    </Checkbox>
+    </li><br />
+    <li>
+      <p>
+        <b>Disabled</b>
+      </p>
+      <Checkbox
+        disabled={true}>
+        Placeholder
+    </Checkbox>
+    </li>
+  </ul>
+
+
+
diff --git a/stories/labels.stories.tsx b/stories/labels.stories.tsx
new file mode 100644
index 0000000..ca1377b
--- /dev/null
+++ b/stories/labels.stories.tsx
@@ -0,0 +1,46 @@
+import React from 'react'
+import { Tag } from '../src/labels'
+
+export default {
+    title: 'Labels/Label',
+    component: Tag
+}
+
+export const SuccessTag = () => (
+    <Tag
+    variant="SuccessTag"
+    >Success!</Tag>
+  )
+
+  export const WarningTag = () => (
+    <Tag
+    variant="WarningTag"
+    >Warning</Tag>
+  )
+  export const DangerTag = () => (
+    <Tag
+    variant="DangerTag"
+    >Danger</Tag>
+  )
+  export const ActiveTag = () => (
+    <Tag
+    variant="ActiveTag"
+    >Active</Tag>
+  )
+  export const InactiveTag = () => (
+    <Tag
+    variant="InactiveTag"
+    >Inactive</Tag>
+  )
+  export const UnknownTag = () => (
+    <Tag
+    variant="UnknownTag"
+    >Unknown</Tag>
+  )
+  const count: number = 9
+  export const CountTag = () => (
+    <Tag
+    variant="CountTag"
+    count={count}
+    >{count}</Tag>
+  )
diff --git a/test/input.test.tsx b/test/input.test.tsx
index b2e6e3e..4027b60 100644
--- a/test/input.test.tsx
+++ b/test/input.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { render, fireEvent } from '@testing-library/react'
 import '@testing-library/jest-dom/extend-expect'
-import { Input, Dropdown, DatePicker, TextArea } from '../src/index';
+import { Input, Dropdown, DatePicker, TextArea, Checkbox } from '../src/index';
 import { Option } from '../src/inputs/dropdown'
 
 function onChange(value: any) {
@@ -174,4 +174,27 @@ describe('Input Components', () => {
     )
     expect(queryByPlaceholderText(testPH))
   })
+
+  it('[Checkbox] - Checks if it Returns the correct classname && tests for correct state', () => {
+    const testCheckboxClass = "form-checkbox h-4 w-4"
+    const { container, getByTestId, rerender } = render(
+      <Checkbox
+        onChange={onChange}>
+      </Checkbox>
+    )
+    fireEvent.click(getByTestId("checkbox"));
+    expect(container.getElementsByClassName(testCheckboxClass))
+
+    //Test for the correct toggle state
+    const toggleState: boolean = true
+    const checkboxState = getByTestId("checkbox") as HTMLInputElement;
+    rerender(
+      <Checkbox
+        onChange={onChange}
+        isChecked={toggleState}>
+      </Checkbox>
+    )
+    fireEvent.change(checkboxState, { target: { value: toggleState } });
+    expect(checkboxState).toBeValid();
+  })
 })
\ No newline at end of file