diff --git a/src/components/Input/danger.png b/public/images/danger.png
similarity index 100%
rename from src/components/Input/danger.png
rename to public/images/danger.png
diff --git a/src/components/Input/tick.png b/public/images/tick.png
similarity index 100%
rename from src/components/Input/tick.png
rename to public/images/tick.png
diff --git a/src/components/Input/index.scss b/src/components/Input/index.scss
deleted file mode 100644
index e98efca..0000000
--- a/src/components/Input/index.scss
+++ /dev/null
@@ -1,60 +0,0 @@
-$primary: #06BACE;
-$gray: #dbdbdb;
-$danger: #E00A0A;
-$success: #23C933;
-
-.input {
-  &__labelFocus{
-    top: 0px !important;
-    font-size: 9px !important;
-    color: $primary !important;
-  }
-  &__labelDanger{
-    top: 0px !important;
-    font-size: 9px !important;
-    color: $danger !important;
-  }
-  &__labelSuccess{
-    top: 0px !important;
-    font-size: 9px !important;
-    color: $success !important;
-  }
-
-
-  &__inputActive{
-    border-color: $primary !important;
-  }
-  &__inputSuccess{
-    border-color: $success !important;
-  }
-  &__inputDanger{
-    border-color: $danger !important;
-  }
-
-  &__message{
-    &Success{
-      color: $success;
-    }
-    &Danger{
-      color: $danger;
-    }
-  }
-  &__length{
-    &Success{
-      color: $success;
-    }
-    &Danger{
-      color: $danger;
-    }
-  }
-}
-
-.en {
-  direction: ltr;
-  text-align: left;
-}
-
-.fa {
-  direction: rtl;
-  text-align: right;
-}
\ No newline at end of file
diff --git a/src/index.scss b/src/index.scss
index 010b87e..e59ee8e 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -28,6 +28,16 @@ body {
   direction: ltr;
 }
 
+.en {
+  direction: ltr;
+  text-align: left;
+}
+
+.fa {
+  direction: rtl;
+  text-align: right;
+}
+
 // TODO Start FormInput Component
 
 .rmdp-container {
@@ -1096,3 +1106,57 @@ $white: #fff;
   background-position: left 0.5rem center;
   padding-right: 1rem;
 }
+
+// TODO  Start CheckBox Component
+
+$primary: #06bace;
+$gray: #dbdbdb;
+$danger: #e00a0a;
+$success: #23c933;
+
+.input {
+  &__labelFocus {
+    top: 0px !important;
+    font-size: 9px !important;
+    color: $primary !important;
+  }
+  &__labelDanger {
+    top: 0px !important;
+    font-size: 9px !important;
+    color: $danger !important;
+  }
+  &__labelSuccess {
+    top: 0px !important;
+    font-size: 9px !important;
+    color: $success !important;
+  }
+
+  &__inputActive {
+    border-color: $primary !important;
+  }
+  &__inputSuccess {
+    border-color: $success !important;
+  }
+  &__inputDanger {
+    border-color: $danger !important;
+  }
+
+  &__message {
+    &Success {
+      color: $success;
+    }
+    &Danger {
+      color: $danger;
+    }
+  }
+  &__length {
+    &Success {
+      color: $success;
+    }
+    &Danger {
+      color: $danger;
+    }
+  }
+}
+
+// * end CheckBox Component