diff --git a/src/components/editor/ComponentPreview.tsx b/src/components/editor/ComponentPreview.tsx
index f386757902..b2334fd512 100644
--- a/src/components/editor/ComponentPreview.tsx
+++ b/src/components/editor/ComponentPreview.tsx
@@ -23,6 +23,8 @@ import InputLeftAddonPreview from './previews/InputLeftAddonPreview'
 import InputRightAddonPreview from './previews/InputRightAddonPreview'
 import { getComponentBy } from '../../core/selectors/components'
 import WithBoxRefSimplePreviewContainer from './WithRefSimplePreviewContainer'
+import { InputRightElementPreview } from './previews/InputRightElement'
+import { InputLeftElementPreview } from './previews/InputLeftElement'
 
 const ComponentPreview: React.FC<{
   componentName: string
@@ -61,7 +63,7 @@ const ComponentPreview: React.FC<{
       return (
         <SimplePreviewContainer component={component} type={Chakra[type]} />
       )
-    // Wrapped functional components
+    // Wrapped functional components (forward ref issue)
     case 'AlertIcon':
     case 'Progress':
     case 'CloseButton':
@@ -83,18 +85,21 @@ const ComponentPreview: React.FC<{
     case 'AccordionItem':
     case 'FormControl':
     case 'Tabs':
+    case 'List':
     case 'TabList':
     case 'TabPanels':
-    case 'InputLeftElement':
-    case 'InputRightElement':
-    case 'List':
       return (
         <WithChildrenPreviewContainer
+          enableVisualHelper
           component={component}
           type={Chakra[type]}
         />
       )
     // More complex components
+    case 'InputRightElement':
+      return <InputRightElementPreview component={component} />
+    case 'InputLeftElement':
+      return <InputLeftElementPreview component={component} />
     case 'Avatar':
       return <AvatarPreview component={component} />
     case 'AvatarBadge':
diff --git a/src/components/editor/WithChildrenPreviewContainer.tsx b/src/components/editor/WithChildrenPreviewContainer.tsx
index ba887ab522..3dacc9e5c8 100644
--- a/src/components/editor/WithChildrenPreviewContainer.tsx
+++ b/src/components/editor/WithChildrenPreviewContainer.tsx
@@ -6,9 +6,10 @@ import ComponentPreview from './ComponentPreview'
 const WithChildrenPreviewContainer: React.FC<{
   component: IComponent
   type: string | FunctionComponent<any> | ComponentClass<any, any>
-}> = ({ component, type }) => {
+  enableVisualHelper?: boolean
+}> = ({ component, type, enableVisualHelper = false }) => {
   const { drop, isOver } = useDropComponent(component.id)
-  const { props, ref } = useInteractive(component, true)
+  const { props, ref } = useInteractive(component, enableVisualHelper)
 
   if (isOver) {
     props.bg = 'teal.50'
diff --git a/src/components/editor/previews/InputLeftElement.tsx b/src/components/editor/previews/InputLeftElement.tsx
new file mode 100644
index 0000000000..de974ba7b9
--- /dev/null
+++ b/src/components/editor/previews/InputLeftElement.tsx
@@ -0,0 +1,24 @@
+import React from 'react'
+import { useInteractive } from '../../../hooks/useInteractive'
+import { useDropComponent } from '../../../hooks/useDropComponent'
+import ComponentPreview from '../ComponentPreview'
+import { InputLeftElement } from '@chakra-ui/core'
+
+export const InputLeftElementPreview: React.FC<{ component: IComponent }> = ({
+  component,
+}) => {
+  const { drop, isOver } = useDropComponent(component.id)
+  const { props, ref } = useInteractive(component, true)
+
+  if (isOver) {
+    props.bg = 'teal.50'
+  }
+
+  return (
+    <InputLeftElement top="10px" right="10px" {...props} ref={drop(ref)}>
+      {component.children.map((key: string) => (
+        <ComponentPreview componentName={key} />
+      ))}
+    </InputLeftElement>
+  )
+}
diff --git a/src/components/editor/previews/InputRightElement.tsx b/src/components/editor/previews/InputRightElement.tsx
new file mode 100644
index 0000000000..827306516d
--- /dev/null
+++ b/src/components/editor/previews/InputRightElement.tsx
@@ -0,0 +1,24 @@
+import React from 'react'
+import { useInteractive } from '../../../hooks/useInteractive'
+import { useDropComponent } from '../../../hooks/useDropComponent'
+import ComponentPreview from '../ComponentPreview'
+import { InputRightElement } from '@chakra-ui/core'
+
+export const InputRightElementPreview: React.FC<{ component: IComponent }> = ({
+  component,
+}) => {
+  const { drop, isOver } = useDropComponent(component.id)
+  const { props, ref } = useInteractive(component, true)
+
+  if (isOver) {
+    props.bg = 'teal.50'
+  }
+
+  return (
+    <InputRightElement top="10px" right="10px" {...props} ref={drop(ref)}>
+      {component.children.map((key: string) => (
+        <ComponentPreview componentName={key} />
+      ))}
+    </InputRightElement>
+  )
+}
diff --git a/src/components/inspector/panels/components/AlertIconPanel.tsx b/src/components/inspector/panels/components/AlertIconPanel.tsx
index 4e459e5760..16c352a2b0 100644
--- a/src/components/inspector/panels/components/AlertIconPanel.tsx
+++ b/src/components/inspector/panels/components/AlertIconPanel.tsx
@@ -1,35 +1,8 @@
 import React from 'react'
-import {
-  Slider,
-  SliderTrack,
-  SliderFilledTrack,
-  SliderThumb,
-} from '@chakra-ui/core'
-import FormControl from '../../controls/FormControl'
-import { useForm } from '../../../../hooks/useForm'
-import usePropsSelector from '../../../../hooks/usePropsSelector'
+import TextControl from '../../controls/TextControl'
 
 const AlertIconPanel = () => {
-  const { setValue } = useForm()
-  const size = usePropsSelector('size')
-
-  return (
-    <>
-      <FormControl label="Size">
-        <Slider
-          onChange={size => setValue('size', size)}
-          min={1}
-          max={800}
-          step={1}
-          value={size}
-        >
-          <SliderTrack />
-          <SliderFilledTrack />
-          <SliderThumb />
-        </Slider>
-      </FormControl>
-    </>
-  )
+  return <TextControl name="size" label="Size" />
 }
 
 export default AlertIconPanel
diff --git a/src/components/inspector/panels/components/ButtonPanel.tsx b/src/components/inspector/panels/components/ButtonPanel.tsx
index a3a60340bf..c26c33e12e 100644
--- a/src/components/inspector/panels/components/ButtonPanel.tsx
+++ b/src/components/inspector/panels/components/ButtonPanel.tsx
@@ -3,10 +3,9 @@ import { Icons } from '@chakra-ui/core/dist/theme/icons'
 
 import ColorsControl from '../../controls/ColorsControl'
 import SizeControl from '../../controls/SizeControl'
-import { Icon, Select } from '@chakra-ui/core'
+import { Icon, Select, useTheme } from '@chakra-ui/core'
 import ChildrenControl from '../../controls/ChildrenControl'
 import InputSuggestion from '../../inputs/InputSuggestion'
-import theme from '../../../../theme/theme'
 import { ComboboxOption, ComboboxOptionText } from '@reach/combobox'
 import FormControl from '../../controls/FormControl'
 import { useForm } from '../../../../hooks/useForm'
@@ -14,6 +13,7 @@ import usePropsSelector from '../../../../hooks/usePropsSelector'
 
 const ButtonPanel = () => {
   const { setValueFromEvent } = useForm()
+  const theme = useTheme()
 
   const size = usePropsSelector('size')
   const variant = usePropsSelector('variant')
diff --git a/src/components/inspector/panels/components/IconButtonPanel.tsx b/src/components/inspector/panels/components/IconButtonPanel.tsx
index 1cbaa88437..734fd56c70 100644
--- a/src/components/inspector/panels/components/IconButtonPanel.tsx
+++ b/src/components/inspector/panels/components/IconButtonPanel.tsx
@@ -1,8 +1,7 @@
 import React, { memo } from 'react'
 import ColorsControl from '../../controls/ColorsControl'
 import InputSuggestion from '../../inputs/InputSuggestion'
-import theme from '../../../../theme/theme'
-import { Icon } from '@chakra-ui/core'
+import { Icon, useTheme } from '@chakra-ui/core'
 import { Icons } from '@chakra-ui/core/dist/theme/icons'
 import { ComboboxOption, ComboboxOptionText } from '@reach/combobox'
 import FormControl from '../../controls/FormControl'
@@ -14,6 +13,7 @@ import SwitchControl from '../../controls/SwitchControl'
 
 const IconButtonPanel = () => {
   const { setValueFromEvent } = useForm()
+  const theme = useTheme()
 
   const name = usePropsSelector('name')
   const size = usePropsSelector('size')
diff --git a/src/components/inspector/panels/components/ListIconPanel.tsx b/src/components/inspector/panels/components/ListIconPanel.tsx
index 3db9d6f511..2b8b4a70c4 100644
--- a/src/components/inspector/panels/components/ListIconPanel.tsx
+++ b/src/components/inspector/panels/components/ListIconPanel.tsx
@@ -1,7 +1,6 @@
 import React, { memo } from 'react'
 import InputSuggestion from '../../inputs/InputSuggestion'
-import theme from '../../../../theme/theme'
-import { Icon } from '@chakra-ui/core'
+import { Icon, useTheme } from '@chakra-ui/core'
 import { Icons } from '@chakra-ui/core/dist/theme/icons'
 import { ComboboxOption, ComboboxOptionText } from '@reach/combobox'
 import FormControl from '../../controls/FormControl'
@@ -11,6 +10,7 @@ import ColorsControl from '../../controls/ColorsControl'
 
 const ListIconPanel = () => {
   const { setValueFromEvent } = useForm()
+  const theme = useTheme()
   const icon = usePropsSelector('icon')
 
   return (
diff --git a/src/components/inspector/panels/components/SelectPanel.tsx b/src/components/inspector/panels/components/SelectPanel.tsx
index b04fd0aa17..dc30d97b03 100644
--- a/src/components/inspector/panels/components/SelectPanel.tsx
+++ b/src/components/inspector/panels/components/SelectPanel.tsx
@@ -1,16 +1,16 @@
 import React, { memo } from 'react'
-import { Select, Icon } from '@chakra-ui/core'
+import { Select, Icon, useTheme } from '@chakra-ui/core'
 import FormControl from '../../controls/FormControl'
 import { useForm } from '../../../../hooks/useForm'
 import usePropsSelector from '../../../../hooks/usePropsSelector'
 import SwitchControl from '../../controls/SwitchControl'
 import InputSuggestion from '../../inputs/InputSuggestion'
-import theme from '../../../../theme/theme'
 import { ComboboxOption, ComboboxOptionText } from '@reach/combobox'
 import { Icons } from '@chakra-ui/core/dist/theme/icons'
 
 const SelectPanel = () => {
   const { setValueFromEvent } = useForm()
+  const theme = useTheme()
 
   const size = usePropsSelector('size')
   const icon = usePropsSelector('icon')
diff --git a/src/components/inspector/panels/components/StackPanel.tsx b/src/components/inspector/panels/components/StackPanel.tsx
index 33114b39c9..3e7f6dd8f2 100644
--- a/src/components/inspector/panels/components/StackPanel.tsx
+++ b/src/components/inspector/panels/components/StackPanel.tsx
@@ -1,16 +1,51 @@
 import React from 'react'
 import SwitchControl from '../../controls/SwitchControl'
 import TextControl from '../../controls/TextControl'
-import FlexPanel from '../styles/FlexPanel'
+import FormControl from '../../controls/FormControl'
+import { Select } from '@chakra-ui/core'
+import usePropsSelector from '../../../../hooks/usePropsSelector'
+import { useForm } from '../../../../hooks/useForm'
 
 const StackPanel = () => {
+  const { setValueFromEvent } = useForm()
+
+  const alignItems = usePropsSelector('alignItems')
+  const justifyContent = usePropsSelector('justifyContent')
+
   return (
     <>
       <SwitchControl label="Inline" name="isInline" />
       <SwitchControl label="Reversed" name="isReversed" />
       <SwitchControl label="Wrap children" name="shouldWrapChildren" />
       <TextControl name="spacing" label="Spacing" />
-      <FlexPanel />
+      <FormControl label="Justify content">
+        <Select
+          name="justifyContent"
+          size="sm"
+          value={justifyContent || ''}
+          onChange={setValueFromEvent}
+        >
+          <option>flex-start</option>
+          <option>center</option>
+          <option>flex-end</option>
+          <option>space-between</option>
+          <option>space-around</option>
+        </Select>
+      </FormControl>
+      <FormControl label="Align items">
+        <Select
+          name="alignItems"
+          size="sm"
+          value={alignItems || ''}
+          onChange={setValueFromEvent}
+        >
+          <option>flex-start</option>
+          <option>center</option>
+          <option>flex-end</option>
+          <option>space-between</option>
+          <option>space-around</option>
+        </Select>
+      </FormControl>{' '}
     </>
   )
 }
diff --git a/src/components/inspector/panels/styles/TextPanel.tsx b/src/components/inspector/panels/styles/TextPanel.tsx
index dcbddf5c4f..021c83fc0d 100644
--- a/src/components/inspector/panels/styles/TextPanel.tsx
+++ b/src/components/inspector/panels/styles/TextPanel.tsx
@@ -1,31 +1,31 @@
-import React, { memo } from "react";
-import { IconButton, ButtonGroup } from "@chakra-ui/core";
-import ColorsControl from "../../controls/ColorsControl";
-import { GoBold, GoItalic } from "react-icons/go";
+import React, { memo } from 'react'
+import { IconButton, ButtonGroup, useTheme } from '@chakra-ui/core'
+import ColorsControl from '../../controls/ColorsControl'
+import { GoBold, GoItalic } from 'react-icons/go'
 import {
   MdFormatAlignLeft,
   MdFormatAlignRight,
   MdFormatAlignCenter,
-  MdFormatAlignJustify
-} from "react-icons/md";
-import FormControl from "../../controls/FormControl";
-import { ComboboxOption } from "@reach/combobox";
-import InputSuggestion from "../../inputs/InputSuggestion";
-import theme from "../../../../theme/theme";
-import { useForm } from "../../../../hooks/useForm";
-import usePropsSelector from "../../../../hooks/usePropsSelector";
+  MdFormatAlignJustify,
+} from 'react-icons/md'
+import FormControl from '../../controls/FormControl'
+import { ComboboxOption } from '@reach/combobox'
+import InputSuggestion from '../../inputs/InputSuggestion'
+import { useForm } from '../../../../hooks/useForm'
+import usePropsSelector from '../../../../hooks/usePropsSelector'
 
-import "@reach/combobox/styles.css";
+import '@reach/combobox/styles.css'
 
 const TextPanel = () => {
-  const { setValue, setValueFromEvent } = useForm();
+  const { setValue, setValueFromEvent } = useForm()
+  const theme = useTheme()
 
-  const fontWeight = usePropsSelector("fontWeight");
-  const fontStyle = usePropsSelector("fontStyle");
-  const textAlign = usePropsSelector("textAlign");
-  const fontSize = usePropsSelector("fontSize");
-  const letterSpacing = usePropsSelector("letterSpacing");
-  const lineHeight = usePropsSelector("lineHeight");
+  const fontWeight = usePropsSelector('fontWeight')
+  const fontStyle = usePropsSelector('fontStyle')
+  const textAlign = usePropsSelector('textAlign')
+  const fontSize = usePropsSelector('fontSize')
+  const letterSpacing = usePropsSelector('letterSpacing')
+  const lineHeight = usePropsSelector('lineHeight')
 
   return (
     <>
@@ -35,11 +35,11 @@ const TextPanel = () => {
           aria-label="bold"
           icon={GoBold}
           onClick={() => {
-            setValue("fontWeight", fontWeight ? null : "bold");
+            setValue('fontWeight', fontWeight ? null : 'bold')
           }}
           size="xs"
-          variantColor={fontWeight ? "whatsapp" : "gray"}
-          variant={fontWeight ? "solid" : "outline"}
+          variantColor={fontWeight ? 'whatsapp' : 'gray'}
+          variant={fontWeight ? 'solid' : 'outline'}
         >
           Bold
         </IconButton>
@@ -47,11 +47,11 @@ const TextPanel = () => {
           aria-label="italic"
           icon={GoItalic}
           onClick={() => {
-            setValue("fontStyle", fontStyle === "italic" ? null : "italic");
+            setValue('fontStyle', fontStyle === 'italic' ? null : 'italic')
           }}
           size="xs"
-          variantColor={fontStyle === "italic" ? "whatsapp" : "gray"}
-          variant={fontStyle === "italic" ? "solid" : "outline"}
+          variantColor={fontStyle === 'italic' ? 'whatsapp' : 'gray'}
+          variant={fontStyle === 'italic' ? 'solid' : 'outline'}
         >
           Italic
         </IconButton>
@@ -63,40 +63,40 @@ const TextPanel = () => {
             aria-label="bold"
             icon={MdFormatAlignLeft}
             onClick={() => {
-              setValue("textAlign", "left");
+              setValue('textAlign', 'left')
             }}
-            variantColor={textAlign === "left" ? "whatsapp" : "gray"}
-            variant={textAlign === "left" ? "solid" : "outline"}
+            variantColor={textAlign === 'left' ? 'whatsapp' : 'gray'}
+            variant={textAlign === 'left' ? 'solid' : 'outline'}
           />
 
           <IconButton
             aria-label="italic"
             icon={MdFormatAlignCenter}
             onClick={() => {
-              setValue("textAlign", "center");
+              setValue('textAlign', 'center')
             }}
-            variantColor={textAlign === "center" ? "whatsapp" : "gray"}
-            variant={textAlign === "center" ? "solid" : "outline"}
+            variantColor={textAlign === 'center' ? 'whatsapp' : 'gray'}
+            variant={textAlign === 'center' ? 'solid' : 'outline'}
           />
 
           <IconButton
             aria-label="italic"
             icon={MdFormatAlignRight}
             onClick={() => {
-              setValue("textAlign", "right");
+              setValue('textAlign', 'right')
             }}
-            variantColor={textAlign === "right" ? "whatsapp" : "gray"}
-            variant={textAlign === "right" ? "solid" : "outline"}
+            variantColor={textAlign === 'right' ? 'whatsapp' : 'gray'}
+            variant={textAlign === 'right' ? 'solid' : 'outline'}
           />
 
           <IconButton
             aria-label="italic"
             icon={MdFormatAlignJustify}
             onClick={() => {
-              setValue("textAlign", "justify");
+              setValue('textAlign', 'justify')
             }}
-            variantColor={textAlign === "justify" ? "whatsapp" : "gray"}
-            variant={textAlign === "justify" ? "solid" : "outline"}
+            variantColor={textAlign === 'justify' ? 'whatsapp' : 'gray'}
+            variant={textAlign === 'justify' ? 'solid' : 'outline'}
           />
         </ButtonGroup>
       </FormControl>
@@ -139,7 +139,7 @@ const TextPanel = () => {
         </InputSuggestion>
       </FormControl>
     </>
-  );
-};
+  )
+}
 
-export default memo(TextPanel);
+export default memo(TextPanel)
diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx
index 54ead7c65a..9c9a1e6712 100644
--- a/src/components/sidebar/Sidebar.tsx
+++ b/src/components/sidebar/Sidebar.tsx
@@ -77,6 +77,8 @@ const menuItems: MenuItems = {
       Input: {},
       InputLeftAddon: {},
       InputRightAddon: {},
+      InputRightElement: {},
+      InputLeftElement: {},
     },
   },
   Link: {},
diff --git a/src/core/models/components.ts b/src/core/models/components.ts
index df3ade85c4..b90c6ad6f5 100644
--- a/src/core/models/components.ts
+++ b/src/core/models/components.ts
@@ -54,7 +54,7 @@ const components = createModel({
           ...state.components,
           [componentId]: {
             ...component,
-            props: DEFAULT_PROPS[component.type],
+            props: DEFAULT_PROPS[component.type] || {},
           },
         },
       }
diff --git a/src/core/models/composer/builder.ts b/src/core/models/composer/builder.ts
index c19d343a0e..6d4f04e99c 100644
--- a/src/core/models/composer/builder.ts
+++ b/src/core/models/composer/builder.ts
@@ -83,9 +83,11 @@ export const buildInputGroup = (parent: string): ComposedComponent => {
   const composer = new Composer('Input')
 
   const nodeId = composer.addNode('InputGroup')
-  composer.addNode('InputLeftAddon', nodeId)
+  composer.addNode('InputLeftAddon', nodeId, { children: 'Email' })
   composer.addNode('Input', nodeId)
-  composer.addNode('InputRightAddon', nodeId)
+
+  const elementId = composer.addNode('InputRightElement', nodeId)
+  composer.addNode('Icon', elementId, { name: 'email' })
 
   const components = composer.getComponents()
 
diff --git a/src/core/models/composer/composer.ts b/src/core/models/composer/composer.ts
index e5425ce3e5..09a8b141f5 100644
--- a/src/core/models/composer/composer.ts
+++ b/src/core/models/composer/composer.ts
@@ -12,7 +12,11 @@ class Composer {
     }
   }
 
-  addNode = (type: ComponentType, parent: string = 'root'): string => {
+  addNode = (
+    type: ComponentType,
+    parent: string = 'root',
+    props: any = {},
+  ): string => {
     const id = generateId()
 
     if (parent === 'root' && !this.rootComponentType) {
@@ -26,7 +30,7 @@ class Composer {
         type,
         parent,
         id,
-        props: DEFAULT_PROPS[type] || {},
+        props: { ...DEFAULT_PROPS[type], ...props },
         rootParentType: this.rootComponentType,
       },
     }
diff --git a/src/utils/defaultProps.ts b/src/utils/defaultProps.ts
index 7837f37c83..4bdaa0292e 100644
--- a/src/utils/defaultProps.ts
+++ b/src/utils/defaultProps.ts
@@ -16,7 +16,6 @@ import {
   Tag,
   SimpleGrid,
   Switch,
-  CircularProgress,
   Checkbox,
   AvatarBadge,
   AvatarGroup,
@@ -266,6 +265,6 @@ export const DEFAULT_PROPS: PreviewDefaultProps = {
     ...InputRightAddon.defaultProps,
     children: 'right',
   },
-  Stack: { ...Stack.defaultProps, display: 'flex' },
+  Stack: { ...Stack.defaultProps },
   Flex: { ...Flex.defaultProps, display: 'flex' },
 }
diff --git a/src/utils/editor.ts b/src/utils/editor.ts
index 5b344dd657..bc5753e7b3 100644
--- a/src/utils/editor.ts
+++ b/src/utils/editor.ts
@@ -52,6 +52,8 @@ export const COMPONENTS: ComponentType[] = [
   'AccordionHeader',
   'AccordionPanel',
   'AccordionIcon',
+  'InputRightElement',
+  'InputLeftElement',
 ]
 
 export const rootComponents = COMPONENTS