diff --git a/src/container/ListingContainer/index.js b/src/container/ListingContainer/index.js
index 856c72c..bcdacfc 100644
--- a/src/container/ListingContainer/index.js
+++ b/src/container/ListingContainer/index.js
@@ -645,7 +645,6 @@ export default class ListingContainer extends React.Component {
     this.props.taxesStore
       .edit(text, this.props.stateStore.listing_state[0].taxObjects)
       .then(result => {
-        // this.setState({ taxObjects: result.slice() });
         this.props.stateStore.changeValue(
           "taxObjects",
           result.slice(),
@@ -672,12 +671,13 @@ export default class ListingContainer extends React.Component {
     }
   };
 
-  onEndReached = value => {
-    if (value === "itemStore") {
+  onEndReached = () => {
+    const { tabStatus } = this.props.stateStore.listing_state[0];
+    if (tabStatus === "0") {
       this.props.itemStore.getFromDb(20);
-    } else if (value === "categoryStore") {
+    } else if (tabStatus === "1") {
       this.props.categoryStore.getFromDb(20);
-    } else if (value === "discountStore") {
+    } else if (tabStatus === "2") {
       this.props.discountStore.getFromDb(20);
     }
   };
@@ -695,7 +695,7 @@ export default class ListingContainer extends React.Component {
           currency={getCountryCode(this.props.printerStore)}
           onClick={this.onItemClick}
           onLongPress={this.onItemLongPress}
-          onEndReached={() => this.onEndReached("itemStore")}
+          onEndReached={this.onEndReached}
         >
           <InputItem
             changeBluetoothStatus={this.getBluetoothState}
@@ -729,7 +729,7 @@ export default class ListingContainer extends React.Component {
         data={this.props.categoryStore.rows.slice().sort(sortByName)}
         onClick={this.onCategoryClick}
         onLongPress={this.onCategoryLongPress}
-        onEndReached={() => this.onEndReached("categoryStore")}
+        onEndReached={this.onEndReached}
       >
         <InputCategory
           data={this.props.categoryStore.selectedCat}
@@ -747,7 +747,7 @@ export default class ListingContainer extends React.Component {
         data={this.props.discountStore.rows.slice().sort(sortByName)}
         onClick={this.onDiscountClick}
         onLongPress={this.onDiscountLongPress}
-        onEndReached={() => this.onEndReached("discountStore")}
+        onEndReached={this.onEndReached}
       >
         <InputDiscount
           currency={getCountryCode(this.props.printerStore)}
diff --git a/src/stories/components/ColorShapeInputComponent.js b/src/stories/components/ColorShapeInputComponent.js
index 7d187d8..2c81256 100644
--- a/src/stories/components/ColorShapeInputComponent.js
+++ b/src/stories/components/ColorShapeInputComponent.js
@@ -4,10 +4,13 @@ import { Picker } from "native-base";
 import { Row, Col, Grid } from "react-native-easy-grid";
 import { currentLanguage } from "../../translations/CurrentLanguage";
 
+import ListingLabel from "@components/ListingLabelComponent";
+
 import Icon from "react-native-vector-icons/FontAwesome";
 import translation from "../.././translations/translation";
 import LocalizedStrings from "react-native-localization";
 let strings = new LocalizedStrings(translation);
+
 export default class ColorShapeInputComponent extends React.PureComponent {
   colorPicker() {
     const { onChangeColor } = this.props;
@@ -36,7 +39,7 @@ export default class ColorShapeInputComponent extends React.PureComponent {
     return (
       <Grid>
         <Col>
-          <Text style={styles.text}>{strings.Color}</Text>
+          <ListingLabel text={strings.Color} />
           <View style={styles.colorPickerView}>{this.colorPicker()}</View>
         </Col>
         <Col style={styles.rightCol}>
@@ -57,9 +60,9 @@ export default class ColorShapeInputComponent extends React.PureComponent {
                 width: Dimensions.get("window").width / 15,
               }}
             >
-              <Text style={{ color: "black" }}>{strings.Color}:</Text>
+              <Text style={styles.view}>{strings.Color}:</Text>
             </Col>
-            <Col style={{ justifyContent: "center" }}>{this.colorPicker()}</Col>
+            <Col style={styles.col}>{this.colorPicker()}</Col>
           </Row>
           <Row>
             <Col
@@ -68,13 +71,13 @@ export default class ColorShapeInputComponent extends React.PureComponent {
                 width: Dimensions.get("window").width / 15,
               }}
             >
-              <Text style={{ color: "black" }}>{strings.Shape}:</Text>
+              <Text style={styles.view}>{strings.Shape}:</Text>
             </Col>
-            <Col style={{ justifyContent: "center" }}>
+            <Col style={styles.col}>
               <Picker
                 mode="dropdown"
                 selectedValue={this.props.value[0].shape}
-                onValueChange={text => this.props.onChangeShape(text)}
+                onValueChange={this.props.onChangeShape}
               >
                 <Picker.Item label="Square" value="square" />
                 <Picker.Item label="Circle" value="circle" />
@@ -85,15 +88,15 @@ export default class ColorShapeInputComponent extends React.PureComponent {
           </Row>
         </Col>
         {this.props.value[0].shape && this.props.value[0].color ? (
-          <Col style={{ justifyContent: "center" }}>
+          <Col style={styles.col}>
             <Icon
-              name={this.props.value[0].shape}
               size={120}
+              name={this.props.value[0].shape}
               style={{ color: this.props.value[0].color }}
             />
           </Col>
         ) : (
-          <Col style={{ justifyContent: "center" }} />
+          <Col style={styles.color} />
         )}
       </Grid>
     );
@@ -115,10 +118,11 @@ const styles = StyleSheet.create({
     borderWidth: 1.5,
     borderColor: "#D9D5DC",
   },
+  col: {
+    justifyContent: "center",
+  },
   text: {
-    color: "black",
     fontWeight: "bold",
-    marginBottom: 10,
   },
   rightCol: {
     paddingLeft: 10,
diff --git a/src/stories/components/IdleComponent.js b/src/stories/components/IdleComponent.js
index 4e138ea..7049d3b 100644
--- a/src/stories/components/IdleComponent.js
+++ b/src/stories/components/IdleComponent.js
@@ -1,36 +1,21 @@
 import * as React from "react";
+import { StyleSheet } from "react-native";
 import { View, Text, Button } from "native-base";
 import { currentLanguage } from "../../translations/CurrentLanguage";
 
 import translation from "../.././translations/translation";
 import LocalizedStrings from "react-native-localization";
 let strings = new LocalizedStrings(translation);
+
 const IdleComponent = props => (
-  <View
-    style={{
-      flex: 1,
-      justifyContent: "center",
-      alignItems: "center",
-      backgroundColor: "#00000025",
-    }}
-  >
+  <View style={styles.view}>
     {strings.setLanguage(currentLanguage().companyLanguage)}
 
-    <View style={{ alignSelf: "center" }}>
-      <Text
-        style={{
-          textAlign: "center",
-          fontWeight: "bold",
-          color: "#043c6c",
-          marginBottom: 10,
-        }}
-      >
+    <View style={styles.innerView}>
+      <Text style={styles.text}>
         {strings.WouldYouLikeToCreateNew} {props.type}?
       </Text>
-      <Button
-        style={{ alignSelf: "center", backgroundColor: "#4B4C9D" }}
-        onPress={props.onPress}
-      >
+      <Button style={styles.button} onPress={props.onPress}>
         <Text>
           {strings.CreateNew} {props.type}
         </Text>
@@ -39,4 +24,26 @@ const IdleComponent = props => (
   </View>
 );
 
+const styles = StyleSheet.create({
+  view: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "#00000025",
+  },
+  innerView: {
+    alignSelf: "center",
+  },
+  text: {
+    textAlign: "center",
+    fontWeight: "bold",
+    color: "#043c6c",
+    marginBottom: 10,
+  },
+  button: {
+    alignSelf: "center",
+    backgroundColor: "#4b4c9d",
+  },
+});
+
 export default IdleComponent;
diff --git a/src/stories/components/ListingColumnComponent.js b/src/stories/components/ListingColumnComponent.js
new file mode 100644
index 0000000..e8971e5
--- /dev/null
+++ b/src/stories/components/ListingColumnComponent.js
@@ -0,0 +1,21 @@
+import * as React from "react";
+import { View, StyleSheet } from "react-native";
+
+const ListingColumnComponent = props => {
+  const { view, last } = styles;
+  const viewStyle = props.last ? StyleSheet.flatten([view, last]) : view;
+
+  return <View style={viewStyle}>{props.children}</View>;
+};
+
+const styles = StyleSheet.create({
+  view: {
+    flex: 1,
+    marginRight: 30,
+  },
+  last: {
+    marginRight: 0,
+  },
+});
+
+export default ListingColumnComponent;
diff --git a/src/stories/components/ListingItemComponent.js b/src/stories/components/ListingItemComponent.js
new file mode 100644
index 0000000..5d2c288
--- /dev/null
+++ b/src/stories/components/ListingItemComponent.js
@@ -0,0 +1,25 @@
+import * as React from "react";
+import { StyleSheet } from "react-native";
+import { Item } from "native-base";
+
+const ListingItemComponent = props => {
+  const { item, half } = styles;
+  const itemStyle = props.half ? StyleSheet.flatten([item, half]) : item;
+
+  return (
+    <Item regular style={itemStyle}>
+      {props.children}
+    </Item>
+  );
+};
+
+const styles = StyleSheet.create({
+  item: {
+    marginBottom: 10,
+  },
+  half: {
+    width: "50%",
+  },
+});
+
+export default ListingItemComponent;
diff --git a/src/stories/components/ListingLabelComponent.js b/src/stories/components/ListingLabelComponent.js
new file mode 100644
index 0000000..99e49d7
--- /dev/null
+++ b/src/stories/components/ListingLabelComponent.js
@@ -0,0 +1,16 @@
+import * as React from "react";
+import { StyleSheet } from "react-native";
+import { Text } from "native-base";
+
+const ListingLabelComponent = props => (
+  <Text style={styles.text}>{props.text}</Text>
+);
+
+const styles = StyleSheet.create({
+  text: {
+    fontWeight: "bold",
+    marginBottom: 10,
+  },
+});
+
+export default ListingLabelComponent;
diff --git a/src/stories/components/ListingRowComponent.js b/src/stories/components/ListingRowComponent.js
new file mode 100644
index 0000000..c71011c
--- /dev/null
+++ b/src/stories/components/ListingRowComponent.js
@@ -0,0 +1,12 @@
+import * as React from "react";
+import { View, StyleSheet } from "react-native";
+
+const ListingRowComponent = props => (
+  <View style={styles.view}>{props.children}</View>
+);
+
+const styles = StyleSheet.create({
+  view: { flexDirection: "row" },
+});
+
+export default ListingRowComponent;
diff --git a/src/stories/components/SectionBreakComponent.js b/src/stories/components/SectionBreakComponent.js
new file mode 100644
index 0000000..b19aa0d
--- /dev/null
+++ b/src/stories/components/SectionBreakComponent.js
@@ -0,0 +1,15 @@
+import * as React from "react";
+import { View, StyleSheet } from "react-native";
+
+const SectionBreakComponent = props => <View style={styles.view} />;
+
+const styles = StyleSheet.create({
+  view: {
+    borderTopWidth: 1,
+    borderTopColor: "#D9D5DC",
+    paddingTop: 10,
+    marginTop: 15,
+  },
+});
+
+export default SectionBreakComponent;
diff --git a/src/stories/screens/InputCategory/index.js b/src/stories/screens/InputCategory/index.js
index 716af82..fb360b9 100644
--- a/src/stories/screens/InputCategory/index.js
+++ b/src/stories/screens/InputCategory/index.js
@@ -1,22 +1,21 @@
 import * as React from "react";
-import { Content, Form, Item, Input } from "native-base";
+import { Content, Form, Input } from "native-base";
 import { Text, StyleSheet } from "react-native";
 import { currentLanguage } from "../../../translations/CurrentLanguage";
 
 import ButtonComponent from "@components/ButtonComponent";
 import ColorShapeInput from "@components/ColorShapeInputComponent";
 import IdleComponent from "@components/IdleComponent";
+import ListingLabel from "@components/ListingLabelComponent";
+import ListingItem from "@components/ListingItemComponent";
+
 import translation from "../../../translations/translation";
 import LocalizedStrings from "react-native-localization";
 let strings = new LocalizedStrings(translation);
 export default class InputCategory extends React.Component {
   constructor(props) {
     super(props);
-    this.state = {
-      name: "",
-      status: "category",
-      colorAndShape: [{ color: "gray", shape: "square" }],
-    };
+    this.state = this._getInitialState();
   }
 
   componentWillReceiveProps(nextProps) {
@@ -31,11 +30,16 @@ export default class InputCategory extends React.Component {
     }
   }
 
-  clear = () => {
-    this.setState({
+  _getInitialState = () => {
+    return {
       name: "",
+      status: "category",
       colorAndShape: [{ color: "gray", shape: "square" }],
-    }); // doesn't work if props is present (read more below)
+    };
+  };
+
+  clear = () => {
+    this.setState(this._getInitialState());
   };
 
   onChangeName = name => {
@@ -66,50 +70,46 @@ export default class InputCategory extends React.Component {
 
   render() {
     strings.setLanguage(currentLanguage().companyLanguage);
+
     if (this.props.status === "idle") {
       return <IdleComponent type="Category" onPress={this.props.onIdleClick} />;
-    } else {
-      return (
-        <Content padder>
-          <Form>
-            <Text style={styles.text}>{strings.CategoryName}</Text>
-            <Item regular style={styles.item}>
-              <Input
-                value={this.state.name}
-                placeholder={strings.CategoryName}
-                onChangeText={this.onChangeName}
-              />
-            </Item>
-            <ColorShapeInput
-              status={this.state.status}
-              value={this.state.colorAndShape}
-              onChangeColor={this.onChangeColor}
+    }
+
+    return (
+      <Content padder>
+        <Form>
+          <ListingLabel text={strings.CategoryName} />
+          <ListingItem>
+            <Input
+              value={this.state.name}
+              placeholder={strings.CategoryName}
+              onChangeText={this.onChangeName}
             />
-            <Text style={styles.helpText}>
-              {
-                strings.ColorWillApplyToAllItemsUnderThisCategoryForWhichColorIsNotSet
-              }
-            </Text>
-          </Form>
-          <ButtonComponent
-            text={strings.Category}
-            status={this.props.status}
-            onAdd={this.onAdd}
-            onEdit={this.onEdit}
-            onCancel={this.onCancel}
+          </ListingItem>
+          <ColorShapeInput
+            status={this.state.status}
+            value={this.state.colorAndShape}
+            onChangeColor={this.onChangeColor}
           />
-        </Content>
-      );
-    }
+          <Text style={styles.helpText}>
+            {
+              strings.ColorWillApplyToAllItemsUnderThisCategoryForWhichColorIsNotSet
+            }
+          </Text>
+        </Form>
+        <ButtonComponent
+          text={strings.Category}
+          status={this.props.status}
+          onAdd={this.onAdd}
+          onEdit={this.onEdit}
+          onCancel={this.onCancel}
+        />
+      </Content>
+    );
   }
 }
 
 const styles = StyleSheet.create({
-  text: {
-    fontWeight: "bold",
-    marginBottom: 10,
-    color: "black",
-  },
   item: {
     width: "50%",
     marginBottom: 10,
diff --git a/src/stories/screens/InputDiscount/index.js b/src/stories/screens/InputDiscount/index.js
index f8c7a04..57e51d1 100644
--- a/src/stories/screens/InputDiscount/index.js
+++ b/src/stories/screens/InputDiscount/index.js
@@ -1,63 +1,101 @@
 import * as React from "react";
-import { View } from "react-native";
-import { Content, Form, Item, Input, Picker, Text } from "native-base";
+import { Content, Form, Input, Picker } from "native-base";
 
 import { unformat, formatNumber } from "accounting-js";
 import { currentLanguage } from "../../../translations/CurrentLanguage";
 
 import ButtonComponent from "@components/ButtonComponent";
 import IdleComponent from "@components/IdleComponent";
+import ListingLabel from "@components/ListingLabelComponent";
+import ListingItem from "@components/ListingItemComponent";
+import ListingRow from "@components/ListingRowComponent";
+import ListingColumn from "@components/ListingColumnComponent";
+
 let MoneyCurrency = require("money-currencies");
 import translation from "../../../translations/translation";
 import LocalizedStrings from "react-native-localization";
 let strings = new LocalizedStrings(translation);
+
 export default class InputDiscount extends React.Component {
   constructor(props) {
     super(props);
-    this.state = {
+    this.state = this._getInitialState();
+  }
+
+  _getInitialState = () => {
+    return {
       name: "",
       value: "",
       percentageType: "percentage",
     };
-  }
+  };
 
-  clear() {
-    this.setState({ name: "", value: "", percentageType: "percentage" });
-  }
+  componentWillReceiveProps(nextProps) {
+    const { data } = nextProps;
+
+    if (data) {
+      const value = formatNumber(data.value);
 
-  onValueChange(value) {
-    this.setState({
-      percentageType: value,
-    });
+      this.setState({
+        name: data.name,
+        value: value,
+        percentageType: data.percentageType.toString(),
+      });
+    }
   }
 
-  onBlur() {
+  clear = () => {
+    this.setState(this._getInitialState());
+  };
+
+  onValueChange = percentageType => {
+    this.setState({ percentageType });
+  };
+
+  onBlur = () => {
     const value = formatNumber(this.state.value);
     this.setState({ value });
-  }
+  };
 
-  onFocus() {
+  onFocus = () => {
     if (this.state.value === "") {
       this.setState({ value: "" });
     } else {
       const value = unformat(this.state.value);
       this.setState({ value: value.toFixed(2) });
     }
-  }
+  };
 
-  componentWillReceiveProps(nextProps) {
-    const { data } = nextProps;
+  onButtonAdd = () => {
+    const hasError = this.props.onAdd(this.state);
+    if (hasError === false) {
+      this.clear();
+    }
+  };
 
-    if (data) {
-      const value = formatNumber(data.value);
+  onButtonEdit = () => {
+    const hasError = this.props.onEdit(this.state);
+    if (hasError === false) {
+      this.clear();
+    }
+  };
 
-      this.setState({
-        name: data.name,
-        value: value,
-        percentageType: data.percentageType.toString(),
-      });
+  onButtonCancel = () => {
+    this.props.onCancel();
+    this.clear();
+  };
+
+  _onChangeName = name => {
+    this.setState({ name });
+  };
+
+  _onChangeValue = value => {
+    let newPrice = value;
+    if (this.state.percentageType === "fixDiscount") {
+      newPrice = value.slice(1);
     }
-  }
+    this.setState({ value: newPrice });
+  };
 
   render() {
     strings.setLanguage(currentLanguage().companyLanguage);
@@ -66,34 +104,27 @@ export default class InputDiscount extends React.Component {
     );
 
     if (this.props.status === "idle") {
-      return (
-        <IdleComponent
-          type="Discount"
-          onPress={() => this.props.onIdleClick()}
-        />
-      );
+      return <IdleComponent type="Discount" onPress={this.props.onIdleClick} />;
     } else {
       return (
         <Content padder>
           <Form>
-            <View>
-              <Text style={{ fontWeight: "bold", marginBottom: 10 }}>
-                {strings.DiscountName}
-              </Text>
-              <Item regular style={{ marginBottom: 10 }}>
-                <Input
-                  placeholder={strings.DiscountName}
-                  value={this.state.name}
-                  onChangeText={text => this.setState({ name: text })}
-                />
-              </Item>
-            </View>
-            <View style={{ flexDirection: "row" }}>
-              <View style={{ flex: 1, marginRight: 30 }}>
-                <Text style={{ fontWeight: "bold", marginBottom: 10 }}>
-                  {strings.DiscountValue}
-                </Text>
-                <Item regular style={{ marginBottom: 10 }}>
+            <ListingRow>
+              <ListingColumn last>
+                <ListingLabel text={strings.DiscountName} />
+                <ListingItem>
+                  <Input
+                    value={this.state.name}
+                    placeholder={strings.DiscountName}
+                    onChangeText={this._onChangeName}
+                  />
+                </ListingItem>
+              </ListingColumn>
+            </ListingRow>
+            <ListingRow>
+              <ListingColumn>
+                <ListingLabel text={strings.DiscountValue} />
+                <ListingItem>
                   <Input
                     keyboardType="numeric"
                     value={
@@ -103,29 +134,20 @@ export default class InputDiscount extends React.Component {
                           : this.state.value
                         : this.state.value
                     }
-                    onBlur={() => this.onBlur()}
+                    onBlur={this.onBlur}
+                    onFocus={this.onFocus}
                     placeholder={strings.DiscountValue}
-                    onFocus={() => this.onFocus()}
-                    onChangeText={text => {
-                      let newPrice = text;
-
-                      if (this.state.percentageType === "fixDiscount") {
-                        newPrice = text.slice(1);
-                      }
-                      this.setState({ value: newPrice });
-                    }}
+                    onChangeText={this._onChangeValue}
                   />
-                </Item>
-              </View>
-              <View style={{ flex: 1 }}>
-                <Text style={{ fontWeight: "bold", marginBottom: 10 }}>
-                  {strings.DiscountType}
-                </Text>
+                </ListingItem>
+              </ListingColumn>
+              <ListingColumn last>
+                <ListingLabel text={strings.DiscountType} />
                 <Picker
                   iosHeader="Select one"
                   mode="dropdown"
                   selectedValue={this.state.percentageType}
-                  onValueChange={this.onValueChange.bind(this)}
+                  onValueChange={this.onValueChange}
                 >
                   <Picker.Item label={strings.Percentage} value="percentage" />
                   <Picker.Item
@@ -133,27 +155,14 @@ export default class InputDiscount extends React.Component {
                     value="fixDiscount"
                   />
                 </Picker>
-              </View>
-            </View>
+              </ListingColumn>
+            </ListingRow>
           </Form>
           <ButtonComponent
             status={this.props.status}
-            onAdd={() => {
-              const hasError = this.props.onAdd(this.state);
-              if (hasError === false) {
-                this.clear();
-              }
-            }}
-            onEdit={() => {
-              const hasError = this.props.onEdit(this.state);
-              if (hasError === false) {
-                this.clear();
-              }
-            }}
-            onCancel={() => {
-              this.props.onCancel();
-              this.clear();
-            }}
+            onAdd={this.onButtonAdd}
+            onEdit={this.onButtonEdit}
+            onCancel={this.onButtonCancel}
             text={strings.Discount}
           />
         </Content>
diff --git a/src/stories/screens/InputItem/frm.js b/src/stories/screens/InputItem/frm.js
new file mode 100644
index 0000000..532299b
--- /dev/null
+++ b/src/stories/screens/InputItem/frm.js
@@ -0,0 +1,62 @@
+export default class Form {
+  constructor(component) {
+    this.component = component;
+  }
+
+  _setState = state => {
+    this.component.setState(state);
+  };
+
+  _getShape = () => {
+    return this.component.state.colorAndShape[0].shape;
+  };
+
+  _getColor = () => {
+    return this.component.state.colorAndShape[0].color;
+  };
+
+  onChangeName = name => {
+    this._setState({ name });
+  };
+
+  onChangeCategory = category => {
+    this._setState({ category });
+  };
+
+  onChangePrice = price => {
+    const newPrice = price.slice(1);
+    this._setState({ price: newPrice });
+  };
+
+  setSoldByEach = () => {
+    this._setState({ soldBy: "Each" });
+  };
+
+  setSoldByWeight = () => {
+    this._setState({ soldBy: "Weight" });
+  };
+
+  onChangeBarcode = barcode => {
+    this._setState({ barcode, barcodeState: "Form" });
+  };
+
+  onChangeBarcodeState = barcodeState => {
+    this._setState({ barcodeState });
+  };
+
+  onChangeSku = sku => {
+    this._setState({ sku });
+  };
+
+  onChangeColor = color => {
+    this._setState({
+      colorAndShape: [{ color, shape: this._getShape() }],
+    });
+  };
+
+  onChangeShape = shape => {
+    this._setState({
+      colorAndShape: [{ color: this._getColor(), shape }],
+    });
+  };
+}
diff --git a/src/stories/screens/InputItem/index.js b/src/stories/screens/InputItem/index.js
index e2a81d4..089f4dd 100644
--- a/src/stories/screens/InputItem/index.js
+++ b/src/stories/screens/InputItem/index.js
@@ -1,15 +1,6 @@
 import * as React from "react";
 import { View, TouchableOpacity } from "react-native";
-import {
-  Content,
-  Form,
-  Item,
-  Input,
-  Text,
-  Picker,
-  Radio,
-  Button,
-} from "native-base";
+import { Content, Form, Input, Text, Picker, Radio, Button } from "native-base";
 
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { currentLanguage } from "../../../translations/CurrentLanguage";
@@ -20,15 +11,61 @@ import ColorShapeInput from "@components/ColorShapeInputComponent";
 import BarcodeInput from "@components/BarcodeInputComponent";
 import ButtonComponent from "@components/ButtonComponent";
 import IdleComponent from "@components/IdleComponent";
+import ListingLabel from "@components/ListingLabelComponent";
+import ListingRow from "@components/ListingRowComponent";
+import ListingItem from "@components/ListingItemComponent";
+import ListingColumn from "@components/ListingColumnComponent";
+import SectionBreak from "@components/SectionBreakComponent";
+
+import Frm from "./frm";
 
 let MoneyCurrency = require("money-currencies");
 import translation from "../../../translations/translation";
 import LocalizedStrings from "react-native-localization";
 let strings = new LocalizedStrings(translation);
+
 export default class InputItem extends React.Component {
   constructor(props) {
     super(props);
-    this.state = {
+    this.state = this._getInitialState();
+    this.frm = new Frm(this);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    const { data } = nextProps;
+
+    const { dataDetails } = nextProps;
+
+    if (data) {
+      const priceCurrency = formatNumber(data.price);
+
+      this.setState({
+        name: data.name,
+        price: priceCurrency,
+        sku: data.sku,
+        barcode: data.barcode,
+        category: data.category,
+        soldBy: data.soldBy,
+        colorAndShape: JSON.parse(data.colorAndShape),
+      });
+    }
+
+    if (dataDetails) {
+      const dataDupBarcode = JSON.parse(dataDetails);
+      this.setState({
+        name: dataDupBarcode.name,
+        price: dataDupBarcode.price.toString(),
+        sku: dataDupBarcode.sku,
+        barcode: dataDupBarcode.barcode,
+        category: dataDupBarcode.category,
+        soldBy: dataDupBarcode.soldBy,
+        colorAndShape: dataDupBarcode.colorAndShape,
+      });
+    }
+  }
+
+  _getInitialState = () => {
+    return {
       showToast: false,
       status: "item",
       name: "",
@@ -39,10 +76,14 @@ export default class InputItem extends React.Component {
       soldBy: "Each",
       color: "red",
       shape: "circle",
-      colorAndShape: [{ color: "gray", shape: "square" }],
       barcodeState: "Form",
       showOptions: false,
+      colorAndShape: [{ color: "gray", shape: "square" }],
     };
+  };
+
+  clear() {
+    this.setState(this._getInitialState());
   }
 
   onFocus = () => {
@@ -62,51 +103,34 @@ export default class InputItem extends React.Component {
     this.setState({ price: formatNumber(this.state.price) });
   };
 
-  clear() {
-    this.setState({
-      name: "",
-      price: "0.00",
-      sku: "",
-      barcode: "",
-      category: "No Category",
-      soldBy: "Each",
-      colorAndShape: [{ color: "gray", shape: "square" }],
-      showOptions: false,
-    });
-  }
-
-  componentWillReceiveProps(nextProps) {
-    const { data } = nextProps;
+  _getCategoryItems = () => {
+    return this.props.categories.map(category => (
+      <Picker.Item
+        label={category.name}
+        value={category._id}
+        key={category._id}
+      />
+    ));
+  };
 
-    const { dataDetails } = nextProps;
+  _getPrinterColorStatus = () => {
+    return this.props.printerStatus === "Online" ? "green" : "#aaa";
+  };
 
-    if (data) {
-      const priceCurrency = formatNumber(data.price);
+  _onButtonAdd = () => {
+    this.props.onAdd(this.state);
+    this.clear();
+  };
 
-      this.setState({
-        name: data.name,
-        price: priceCurrency,
-        sku: data.sku,
-        barcode: data.barcode,
-        category: data.category,
-        soldBy: data.soldBy,
-        colorAndShape: JSON.parse(data.colorAndShape),
-      });
-    }
+  _onButtonEdit = () => {
+    this.props.onEdit(this.state);
+    this.clear();
+  };
 
-    if (dataDetails) {
-      const dataDupBarcode = JSON.parse(dataDetails);
-      this.setState({
-        name: dataDupBarcode.name,
-        price: dataDupBarcode.price.toString(),
-        sku: dataDupBarcode.sku,
-        barcode: dataDupBarcode.barcode,
-        category: dataDupBarcode.category,
-        soldBy: dataDupBarcode.soldBy,
-        colorAndShape: dataDupBarcode.colorAndShape,
-      });
-    }
-  }
+  _onButtonCancel = () => {
+    this.props.onCancel();
+    this.clear();
+  };
 
   render() {
     strings.setLanguage(currentLanguage().companyLanguage);
@@ -114,237 +138,176 @@ export default class InputItem extends React.Component {
       this.props.currency ? this.props.currency : "PHP",
     );
 
-    const PrinterColorStatus =
-      this.props.printerStatus === "Online" ? "green" : "#aaa";
-    // Categories go here
-    const categoryItems = this.props.categories.map(category => (
-      <Picker.Item
-        label={category.name}
-        value={category._id}
-        key={category._id}
-      />
-    ));
+    const PrinterColorStatus = this._getPrinterColorStatus();
+    const CategoryItems = this._getCategoryItems();
+
     if (this.props.status === "idle") {
-      return (
-        <IdleComponent type="Item" onPress={() => this.props.onIdleClick()} />
-      );
-    } else {
-      return (
-        <Content padder>
-          <Form>
-            <Text style={{ fontWeight: "bold", marginBottom: 10 }}>
-              {strings.Item}
-            </Text>
-            <View style={{ flexDirection: "row" }}>
-              <Item regular style={{ marginBottom: 10, width: "50%" }}>
-                <Input
-                  value={this.state.name}
-                  placeholder={strings.ItemName}
-                  onChangeText={text => this.setState({ name: text })}
-                />
-              </Item>
-            </View>
-            <Text style={{ fontWeight: "bold", marginBottom: 10 }}>
-              {strings.Category}
-            </Text>
+      return <IdleComponent type="Item" onPress={this.props.onIdleClick} />;
+    }
+
+    return (
+      <Content padder>
+        <Form>
+          <ListingLabel text={strings.Item} />
+          <ListingRow>
+            <ListingItem half>
+              <Input
+                value={this.state.name}
+                placeholder={strings.ItemName}
+                onChangeText={this.frm.onChangeName}
+              />
+            </ListingItem>
+          </ListingRow>
+          <ListingLabel text={strings.Category} />
+          <ListingRow>
             <View
               style={{
                 borderWidth: 2,
                 borderColor: "#D9D5DC",
                 width: "50%",
                 paddingRight: 5,
+                marginBottom: 10,
               }}
             >
               <Picker
                 mode="dropdown"
                 selectedValue={this.state.category}
-                onValueChange={value => this.setState({ category: value })}
+                onValueChange={this.frm.onChangeCategory}
               >
                 <Picker.Item label={strings.NoCategory} value="No Category">
                   <Icon name="square" />
                 </Picker.Item>
-                {categoryItems}
+                {CategoryItems}
               </Picker>
             </View>
-            <View style={{ flexDirection: "row", marginTop: 15 }}>
-              <View style={{ width: "50%", marginRight: 15 }}>
-                <Text style={{ fontWeight: "bold", marginBottom: 10 }}>
-                  {strings.Price}
-                </Text>
-                <Item regular style={{ marginBottom: 10 }}>
-                  <Input
-                    value={mc.moneyFormat(this.state.price)}
-                    keyboardType="numeric"
-                    placeholder={strings.Price}
-                    onBlur={this.onBlur}
-                    onFocus={this.onFocus}
-                    onChangeText={text => {
-                      let newPrice = text.slice(1);
-                      this.setState({ price: newPrice });
-                    }}
-                  />
-                </Item>
+          </ListingRow>
+          <ListingRow>
+            <ListingColumn>
+              <ListingLabel text={strings.Price} />
+              <ListingItem>
+                <Input
+                  value={mc.moneyFormat(this.state.price)}
+                  keyboardType="numeric"
+                  placeholder={strings.Price}
+                  onBlur={this.onBlur}
+                  onFocus={this.onFocus}
+                  onChangeText={this.frm.onChangePrice}
+                />
+              </ListingItem>
+            </ListingColumn>
+            <ListingColumn>
+              <ListingLabel text={strings.SoldBy} />
+              <View style={{ flexDirection: "row", marginBottom: 5 }}>
+                <Radio
+                  onPress={this.frm.setSoldByEach}
+                  selected={this.state.soldBy === "Each"}
+                />
+                <Text> {strings.Each}</Text>
               </View>
-              <View style={{ flexDirection: "column" }}>
-                <Text style={{ fontWeight: "bold", marginBottom: 10 }}>
-                  {strings.SoldBy}
-                </Text>
-                <View style={{ flexDirection: "row", marginBottom: 5 }}>
-                  <Radio
-                    onPress={() => this.setState({ soldBy: "Each" })}
-                    selected={this.state.soldBy === "Each"}
-                  />
-                  <Text> {strings.Each}</Text>
-                </View>
-                <View style={{ flexDirection: "row", marginBottom: 5 }}>
-                  <Radio
-                    onPress={() => this.setState({ soldBy: "Weight" })}
-                    selected={this.state.soldBy === "Weight"}
-                  />
-                  <Text> {strings.Weight}</Text>
-                </View>
+              <View style={{ flexDirection: "row", marginBottom: 5 }}>
+                <Radio
+                  onPress={this.frm.setSoldByWeight}
+                  selected={this.state.soldBy === "Weight"}
+                />
+                <Text> {strings.Weight}</Text>
               </View>
-            </View>
-            <View style={{ flex: 1 }}>
-              <Text style={{ fontWeight: "bold", marginBottom: 10 }}>
-                {strings.Barcode}
-              </Text>
+            </ListingColumn>
+          </ListingRow>
+          <ListingRow>
+            <ListingColumn>
+              <ListingLabel text={strings.Barcode} />
               <BarcodeInput
                 status={this.state.barcodeState}
                 value={this.state.barcode}
                 placeholder={strings.Barcode}
-                onChangeText={text =>
-                  this.setState({ barcode: text, barcodeState: "Form" })
-                }
-                onChangeState={text => this.setState({ barcodeState: text })}
+                onChangeText={this.frm.onChangeBarcode}
+                onChangeState={this.frm.onChangeBarcodeState}
               />
-            </View>
-            <View
-              style={{
-                borderTopWidth: 1,
-                borderTopColor: "#D9D5DC",
-                marginTop: 15,
-                paddingTop: 10,
-              }}
-            >
-              <Text
-                style={{
-                  color: "#afafaf",
-                  fontWeight: "bold",
-                  marginBottom: 10,
-                }}
-              >
-                {strings.OtherInformation}
-              </Text>
-            </View>
-            <View style={{ flexDirection: "row", marginBottom: 15 }}>
-              <View style={{ width: "50%" }}>
-                <Text style={{ fontWeight: "bold", marginBottom: 10 }}>
-                  {strings.StockKeepingUnit}
-                </Text>
-                <Item regular style={{ marginBottom: 10 }}>
-                  <Input
-                    value={this.state.sku}
-                    placeholder={strings.SKU}
-                    onChangeText={text => this.setState({ sku: text })}
-                  />
-                </Item>
-              </View>
-            </View>
-            <ColorShapeInput
-              status={this.state.status}
-              value={this.state.colorAndShape}
-              onChangeColor={text => {
-                this.setState({
-                  colorAndShape: [
-                    { color: text, shape: this.state.colorAndShape[0].shape },
-                  ],
-                });
-              }}
-              onChangeShape={text =>
-                this.setState({
-                  colorAndShape: [
-                    { color: this.state.colorAndShape[0].color, shape: text },
-                  ],
-                })
-              }
-            />
-          </Form>
+            </ListingColumn>
+          </ListingRow>
+          <SectionBreak />
+          <ListingRow>
+            <ListingColumn>
+              <ListingLabel text={strings.StockKeepingUnit} />
+              <ListingItem half>
+                <Input
+                  value={this.state.sku}
+                  placeholder={strings.SKU}
+                  onChangeText={this.frm.onChangeSku}
+                />
+              </ListingItem>
+            </ListingColumn>
+          </ListingRow>
+          <ColorShapeInput
+            status={this.state.status}
+            value={this.state.colorAndShape}
+            onChangeColor={this.frm.onChangeColor}
+            onChangeShape={this.frm.onChangeShape}
+          />
+        </Form>
 
-          <View
-            style={{
-              marginTop: 15,
-              paddingLeft: 10,
-              paddingTop: 15,
-              paddingBottom: 15,
-              borderTopWidth: 0.5,
-              borderBottomWidth: 0.5,
-              borderColor: "#ddd",
+        <View
+          style={{
+            marginTop: 15,
+            paddingLeft: 10,
+            paddingTop: 15,
+            paddingBottom: 15,
+            borderTopWidth: 0.5,
+            borderBottomWidth: 0.5,
+            borderColor: "#ddd",
+          }}
+        >
+          <TouchableOpacity
+            onPress={() => {
+              this.props.changeBluetoothStatus(!this.state.showOptions);
+              this.setState({ showOptions: !this.state.showOptions });
             }}
           >
-            <TouchableOpacity
-              onPress={() => {
-                this.props.changeBluetoothStatus(!this.state.showOptions);
-                this.setState({ showOptions: !this.state.showOptions });
+            <Text style={{ color: "#4b4c9d", fontWeight: "bold" }}>
+              <Icon
+                name={this.state.showOptions ? "chevron-down" : "chevron-right"}
+                size={21}
+              />
+              {this.state.showOptions
+                ? strings.HideOptions
+                : strings.ShowOptions}
+            </Text>
+          </TouchableOpacity>
+
+          {this.state.showOptions ? (
+            <View
+              style={{
+                width: 250,
+                flexDirection: "row",
+                justifyContent: "space-between",
+                alignItems: "center",
               }}
             >
-              <Text style={{ color: "#4b4c9d", fontWeight: "bold" }}>
-                <Icon
-                  name={
-                    this.state.showOptions ? "chevron-down" : "chevron-right"
-                  }
-                  size={21}
-                />
-                {this.state.showOptions
-                  ? strings.HideOptions
-                  : strings.ShowOptions}
-              </Text>
-            </TouchableOpacity>
-
-            {this.state.showOptions ? (
-              <View
-                style={{
-                  width: 250,
-                  flexDirection: "row",
-                  justifyContent: "space-between",
-                  alignItems: "center",
-                }}
+              <Button
+                onPress={() => this.props.onPrintBarcode(this.state.barcode)}
+                style={{ marginTop: 10 }}
               >
-                <Button
-                  onPress={() => this.props.onPrintBarcode(this.state.barcode)}
-                  style={{ marginTop: 10 }}
-                >
-                  <Text>
-                    <Icon name="barcode" color="white" size={21} />{" "}
-                    {strings.PrintBarcode}
-                  </Text>
-                </Button>
-                <Icon name="printer" color={PrinterColorStatus} size={21} />
-                <Text style={{ color: PrinterColorStatus }}>
-                  {this.props.printerStatus}
+                <Text>
+                  <Icon name="barcode" color="white" size={21} />{" "}
+                  {strings.PrintBarcode}
                 </Text>
-              </View>
-            ) : null}
-          </View>
+              </Button>
+              <Icon name="printer" color={PrinterColorStatus} size={21} />
+              <Text style={{ color: PrinterColorStatus }}>
+                {this.props.printerStatus}
+              </Text>
+            </View>
+          ) : null}
+        </View>
 
-          <ButtonComponent
-            status={this.props.status}
-            onAdd={() => {
-              this.props.onAdd(this.state);
-              this.clear();
-            }}
-            onEdit={() => {
-              this.props.onEdit(this.state);
-              this.clear();
-            }}
-            onCancel={() => {
-              this.props.onCancel();
-              this.clear();
-            }}
-            text="Item"
-          />
-        </Content>
-      );
-    }
+        <ButtonComponent
+          status={this.props.status}
+          onAdd={this._onButtonAdd}
+          onEdit={this._onButtonEdit}
+          onCancel={this._onButtonCancel}
+          text="Item"
+        />
+      </Content>
+    );
   }
 }
diff --git a/src/stories/screens/Listing/index.js b/src/stories/screens/Listing/index.js
index 142adf1..021a1e4 100644
--- a/src/stories/screens/Listing/index.js
+++ b/src/stories/screens/Listing/index.js
@@ -9,7 +9,7 @@ import {
   Title,
   Right,
 } from "native-base";
-import { Dimensions, TouchableOpacity } from "react-native";
+import { TouchableOpacity } from "react-native";
 import Icon from "react-native-vector-icons/FontAwesome";
 
 import SearchComponent from "@components/SearchComponent";
@@ -20,14 +20,8 @@ import styles from "./styles";
 import translation from "../../../translations/translation";
 import LocalizedStrings from "react-native-localization";
 let strings = new LocalizedStrings(translation);
-// TODO: Make a future utils for measuring boys
-export default class ItemListing extends React.PureComponent {
-  constructor(props) {
-    super(props);
-    const { width, height } = Dimensions.get("window");
-    this.state = { width, height };
-  }
 
+export default class ItemListing extends React.PureComponent {
   navigate = () => {
     this.props.navigation.navigate("DrawerOpen");
   };
@@ -36,12 +30,7 @@ export default class ItemListing extends React.PureComponent {
     this.props.itemMaintenanceStatusChange(true);
   };
 
-  onLayout() {
-    const { width, height } = Dimensions.get("window");
-    this.setState({ width, height });
-  }
-
-  renderSearch() {
+  renderSearch = () => {
     const { onChangeText, itemMaintenanceStatusChange } = this.props;
     return (
       <SearchComponent
@@ -50,9 +39,9 @@ export default class ItemListing extends React.PureComponent {
         itemMaintenanceStatusChange={itemMaintenanceStatusChange}
       />
     );
-  }
+  };
 
-  renderSearchButton() {
+  renderSearchButton = () => {
     return (
       <Right>
         <TouchableOpacity onPress={this.onPressSearchButton}>
@@ -60,9 +49,9 @@ export default class ItemListing extends React.PureComponent {
         </TouchableOpacity>
       </Right>
     );
-  }
+  };
 
-  renderHeader() {
+  renderHeader = () => {
     return (
       <Header hasTabs style={styles.header}>
         <Left>
@@ -76,21 +65,20 @@ export default class ItemListing extends React.PureComponent {
         {this.props.tabStatus === 0 ? this.renderSearchButton() : <Right />}
       </Header>
     );
-  }
+  };
+
+  _onChangeTab = ({ i, ref, from }) => {
+    this.props.changeTabStatus(i.toString());
+  };
 
   render() {
     strings.setLanguage(currentLanguage().companyLanguage);
     return (
-      <Container style={styles.container} onLayout={() => this.onLayout()}>
+      <Container style={styles.container}>
         {this.props.itemMaintenanceStatus
           ? this.renderSearch()
           : this.renderHeader()}
-        <Tabs
-          initialPage={0}
-          onChangeTab={({ i, ref, from }) =>
-            this.props.changeTabStatus(i.toString())
-          }
-        >
+        <Tabs initialPage={0} onChangeTab={this._onChangeTab}>
           <Tab
             heading={strings.Items}
             tabStyle={styles.tab}