diff --git a/src/components/Forms/IconForm.tsx b/src/components/Forms/IconForm.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..9ac822df8367b1335e236e0eb1370b945c8794bb
--- /dev/null
+++ b/src/components/Forms/IconForm.tsx
@@ -0,0 +1,120 @@
+import React, { useState } from "react";
+import { View, StyleSheet, TextInput, TouchableOpacity } from "react-native";
+import Colors from "../../constants/Colors";
+import { Text } from "../Themed";
+import { MaterialIcons } from "@expo/vector-icons";
+
+type props = {
+  formTitle?: string;
+  text: string;
+  setText: React.Dispatch<React.SetStateAction<string>>;
+  placeholder: string;
+  disabled?: boolean;
+  validator?: (a: string) => boolean;
+  iconType: React.ComponentProps<typeof MaterialIcons>["name"];
+  password?: boolean;
+};
+
+const IconForm = ({
+  formTitle = "",
+  text,
+  setText,
+  placeholder,
+  disabled = false,
+  iconType,
+  password = false,
+}: props) => {
+  const [isFocused, setIsFocused] = useState(false);
+  const [showPass, setShowPass] = useState(password);
+  let backgroundColor: string;
+  if (disabled) {
+    backgroundColor = Colors.form.disabled.bg;
+  } else {
+    backgroundColor =
+      isFocused || text ? Colors.form.filled.bg : Colors.form.empty.bg;
+  }
+  return (
+    <View style={styles.container}>
+      {formTitle.length > 0 && (
+        <Text style={styles.formTitle}>{formTitle}</Text>
+      )}
+      <View
+        style={{
+          ...styles.formContainer,
+          backgroundColor: backgroundColor,
+          borderColor: isFocused
+            ? Colors.form.active.border
+            : Colors.form.filled.border,
+          shadowColor: isFocused
+            ? "rgba(7, 145, 249, 0.12)"
+            : "rgba(0, 0, 0, 0)",
+          shadowOffset: isFocused
+            ? { width: 0, height: 4 }
+            : { width: 0, height: 0 },
+          shadowOpacity: isFocused ? 1 : 0,
+          shadowRadius: isFocused ? 8 : 0,
+        }}
+      >
+        <View style={styles.textContainer}>
+          <TextInput
+            onFocus={() => setIsFocused(true)}
+            onEndEditing={() => setIsFocused(false)}
+            placeholder={placeholder}
+            value={text}
+            onChangeText={(n: string): void => setText(n)}
+            style={styles.textStyle}
+            placeholderTextColor={Colors.text.disabled}
+            editable={!disabled}
+            secureTextEntry={showPass}
+          />
+        </View>
+        <TouchableOpacity onPress={() => password && setShowPass(!showPass)}>
+          <MaterialIcons
+            name={
+              password ? (showPass ? "visibility" : "visibility-off") : iconType
+            }
+            size={21}
+            color={Colors.text.disabled}
+          />
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: "100%",
+  },
+  formTitle: {
+    paddingBottom: 8,
+    fontSize: 14,
+    width: "100%",
+    height: 21,
+    color: Colors.text.subtitle,
+  },
+  formContainer: {
+    flexDirection: "row",
+    paddingVertical: 12,
+    paddingLeft: 16,
+    paddingRight: 16,
+    borderRadius: 22.5,
+    borderStyle: "solid",
+    borderWidth: 1,
+    borderColor: Colors.form.empty.border,
+    justifyContent: "space-between",
+  },
+  textStyle: {
+    height: 21,
+    fontSize: 14,
+    fontWeight: "300",
+    textAlign: "left",
+    color: Colors.text.subtitle,
+    paddingRight: 12,
+  },
+  textContainer: {
+    flex: 1,
+  },
+});
+
+export default IconForm;
diff --git a/src/components/Forms/PlainForm.tsx b/src/components/Forms/PlainForm.tsx
index 2175d32b276102432cd24aa2bb01648da9f18ed0..fe5dea0228ee2637aaad678b25f5a67dc8cc1fbf 100644
--- a/src/components/Forms/PlainForm.tsx
+++ b/src/components/Forms/PlainForm.tsx
@@ -9,6 +9,7 @@ type props = {
   setText: React.Dispatch<React.SetStateAction<string>>;
   placeholder: string;
   disabled?: boolean;
+  phone?: boolean;
 };
 
 const PlainForm = ({
@@ -17,6 +18,7 @@ const PlainForm = ({
   setText,
   placeholder,
   disabled = false,
+  phone = false,
 }: props) => {
   const [isFocused, setIsFocused] = useState(false);
   let backgroundColor: string;
@@ -57,6 +59,7 @@ const PlainForm = ({
           style={styles.textStyle}
           placeholderTextColor={Colors.text.disabled}
           editable={!disabled}
+          keyboardType={phone ? "phone-pad" : "default"}
         />
       </View>
     </View>
diff --git a/src/components/Spacer/Spacer.tsx b/src/components/Spacer/Spacer.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..45d28c9b173f435eb4bb1dc07517912c7f5e2fdd
--- /dev/null
+++ b/src/components/Spacer/Spacer.tsx
@@ -0,0 +1,12 @@
+import React from "react";
+import { View } from "react-native";
+
+type props = {
+  variant: "small" | "big";
+};
+
+const Spacer = ({ variant }: props) => {
+  return <View style={{ height: variant == "small" ? 16 : 24 }} />;
+};
+
+export default Spacer;