diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3b09b1748..9ae362f29 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -42,5 +42,7 @@ All notable, unreleased changes to this project will be documented in this file.
 - Fix empty attribute values - #218 by @dominik-zeglen
 - Add language switch - #213 by @dominik-zeglen
 - Fix copy - #223, #224 by @dominik-zeglen
+- Fix ui improvements - #226 by @benekex2
 - Fix attribute errors - #216 by @dominik-zeglen
+- Fix column picker - #228 by @dominik-zeglen
 - Add readonly mode - #229 by @dominik-zeglen
diff --git a/src/attributes/components/AttributeProperties/AttributeProperties.tsx b/src/attributes/components/AttributeProperties/AttributeProperties.tsx
index 45cdd9906..0e5d2d958 100644
--- a/src/attributes/components/AttributeProperties/AttributeProperties.tsx
+++ b/src/attributes/components/AttributeProperties/AttributeProperties.tsx
@@ -74,7 +74,7 @@ const AttributeProperties: React.FC<AttributePropertiesProps> = ({
         <ControlledCheckbox
           name={"filterableInStorefront" as keyof FormData}
           label={intl.formatMessage({
-            defaultMessage: "Use in faceted navigation",
+            defaultMessage: "Use in Faceted Navigation",
             description: "attribute is filterable in storefront"
           })}
           checked={data.filterableInStorefront}
diff --git a/src/components/AppLayout/AppLayout.tsx b/src/components/AppLayout/AppLayout.tsx
index 6185b8d3b..b8c7f7193 100644
--- a/src/components/AppLayout/AppLayout.tsx
+++ b/src/components/AppLayout/AppLayout.tsx
@@ -42,15 +42,25 @@ import ThemeSwitch from "./ThemeSwitch";
 const styles = (theme: Theme) =>
   createStyles({
     appAction: {
+      [theme.breakpoints.down("sm")]: {
+        left: 0,
+        width: "100%"
+      },
       bottom: 0,
       gridColumn: 2,
+      height: 70,
       position: "sticky",
       zIndex: 10
     },
     appLoader: {
       height: appLoaderHeight,
+      marginBottom: theme.spacing.unit * 2,
       zIndex: 1201
     },
+    appLoaderPlaceholder: {
+      height: appLoaderHeight,
+      marginBottom: theme.spacing.unit * 2
+    },
     arrow: {
       marginLeft: theme.spacing.unit * 2,
       transition: theme.transitions.duration.standard + "ms"
@@ -75,11 +85,7 @@ const styles = (theme: Theme) =>
     header: {
       display: "flex",
       height: 40,
-      marginBottom: theme.spacing.unit * 3,
-      marginTop: theme.spacing.unit * 2
-    },
-    hide: {
-      opacity: 0
+      marginBottom: theme.spacing.unit * 3
     },
     isMenuSmall: {
       "& path": {
@@ -256,6 +262,11 @@ const styles = (theme: Theme) =>
       [theme.breakpoints.up("sm")]: {
         paddingBottom: theme.spacing.unit * 3
       }
+    },
+    viewContainer: {
+      minHeight: `calc(100vh - ${theme.spacing.unit * 2 +
+        appLoaderHeight +
+        70}px)`
     }
   });
 
@@ -316,12 +327,6 @@ const AppLayout = withStyles(styles, {
           {({ isProgress }) => (
             <AppHeaderContext.Provider value={appHeaderAnchor}>
               <AppActionContext.Provider value={appActionAnchor}>
-                <LinearProgress
-                  className={classNames(classes.appLoader, {
-                    [classes.hide]: !isProgress
-                  })}
-                  color="primary"
-                />
                 <div className={classes.root}>
                   <div className={classes.sideBar}>
                     <ResponsiveDrawer
@@ -370,106 +375,121 @@ const AppLayout = withStyles(styles, {
                       [classes.contentToggle]: isMenuSmall
                     })}
                   >
-                    <div>
-                      <Container>
-                        <div className={classes.header}>
-                          <div
-                            className={classNames(classes.menuIcon, {
-                              [classes.menuIconOpen]: isDrawerOpened,
-                              [classes.menuIconDark]: isDark
-                            })}
-                            onClick={() => setDrawerState(!isDrawerOpened)}
-                          >
-                            <span />
-                            <span />
-                            <span />
-                            <span />
-                          </div>
-                          <div ref={appHeaderAnchor} />
-                          <div className={classes.spacer} />
-                          <div className={classes.userBar}>
-                            <ThemeSwitch
-                              className={classes.darkThemeSwitch}
-                              checked={isDark}
-                              onClick={toggleTheme}
-                            />
+                    {isProgress ? (
+                      <LinearProgress
+                        className={classes.appLoader}
+                        color="primary"
+                      />
+                    ) : (
+                      <div className={classes.appLoaderPlaceholder} />
+                    )}
+                    <div className={classes.viewContainer}>
+                      <div>
+                        <Container>
+                          <div className={classes.header}>
                             <div
-                              className={classes.userMenuContainer}
-                              ref={anchor}
+                              className={classNames(classes.menuIcon, {
+                                [classes.menuIconOpen]: isDrawerOpened,
+                                [classes.menuIconDark]: isDark
+                              })}
+                              onClick={() => setDrawerState(!isDrawerOpened)}
                             >
-                              <Chip
-                                avatar={
-                                  user.avatar && (
-                                    <Avatar alt="user" src={user.avatar.url} />
-                                  )
-                                }
-                                className={classes.userChip}
-                                label={
-                                  <>
-                                    {user.email}
-                                    <ArrowDropdown
-                                      className={classNames(classes.arrow, {
-                                        [classes.rotate]: isMenuOpened
-                                      })}
-                                    />
-                                  </>
-                                }
-                                onClick={() => setMenuState(!isMenuOpened)}
+                              <span />
+                              <span />
+                              <span />
+                              <span />
+                            </div>
+                            <div ref={appHeaderAnchor} />
+                            <div className={classes.spacer} />
+                            <div className={classes.userBar}>
+                              <ThemeSwitch
+                                className={classes.darkThemeSwitch}
+                                checked={isDark}
+                                onClick={toggleTheme}
                               />
-                              <Popper
-                                className={classes.popover}
-                                open={isMenuOpened}
-                                anchorEl={anchor.current}
-                                transition
-                                disablePortal
-                                placement="bottom-end"
+                              <div
+                                className={classes.userMenuContainer}
+                                ref={anchor}
                               >
-                                {({ TransitionProps, placement }) => (
-                                  <Grow
-                                    {...TransitionProps}
-                                    style={{
-                                      transformOrigin:
-                                        placement === "bottom"
-                                          ? "right top"
-                                          : "right bottom"
-                                    }}
-                                  >
-                                    <Paper>
-                                      <ClickAwayListener
-                                        onClickAway={() => setMenuState(false)}
-                                        mouseEvent="onClick"
-                                      >
-                                        <Menu>
-                                          <MenuItem
-                                            className={classes.userMenuItem}
-                                            onClick={handleViewerProfile}
-                                          >
-                                            <FormattedMessage
-                                              defaultMessage="Account Settings"
-                                              description="button"
-                                            />
-                                          </MenuItem>
-                                          <MenuItem
-                                            className={classes.userMenuItem}
-                                            onClick={handleLogout}
-                                          >
-                                            <FormattedMessage
-                                              defaultMessage="Log out"
-                                              description="button"
-                                            />
-                                          </MenuItem>
-                                        </Menu>
-                                      </ClickAwayListener>
-                                    </Paper>
-                                  </Grow>
-                                )}
-                              </Popper>
+                                <Chip
+                                  avatar={
+                                    user.avatar && (
+                                      <Avatar
+                                        alt="user"
+                                        src={user.avatar.url}
+                                      />
+                                    )
+                                  }
+                                  className={classes.userChip}
+                                  label={
+                                    <>
+                                      {user.email}
+                                      <ArrowDropdown
+                                        className={classNames(classes.arrow, {
+                                          [classes.rotate]: isMenuOpened
+                                        })}
+                                      />
+                                    </>
+                                  }
+                                  onClick={() => setMenuState(!isMenuOpened)}
+                                />
+                                <Popper
+                                  className={classes.popover}
+                                  open={isMenuOpened}
+                                  anchorEl={anchor.current}
+                                  transition
+                                  disablePortal
+                                  placement="bottom-end"
+                                >
+                                  {({ TransitionProps, placement }) => (
+                                    <Grow
+                                      {...TransitionProps}
+                                      style={{
+                                        transformOrigin:
+                                          placement === "bottom"
+                                            ? "right top"
+                                            : "right bottom"
+                                      }}
+                                    >
+                                      <Paper>
+                                        <ClickAwayListener
+                                          onClickAway={() =>
+                                            setMenuState(false)
+                                          }
+                                          mouseEvent="onClick"
+                                        >
+                                          <Menu>
+                                            <MenuItem
+                                              className={classes.userMenuItem}
+                                              onClick={handleViewerProfile}
+                                            >
+                                              <FormattedMessage
+                                                defaultMessage="Account Settings"
+                                                description="button"
+                                              />
+                                            </MenuItem>
+                                            <MenuItem
+                                              className={classes.userMenuItem}
+                                              onClick={handleLogout}
+                                            >
+                                              <FormattedMessage
+                                                defaultMessage="Log out"
+                                                description="button"
+                                              />
+                                            </MenuItem>
+                                          </Menu>
+                                        </ClickAwayListener>
+                                      </Paper>
+                                    </Grow>
+                                  )}
+                                </Popper>
+                              </div>
                             </div>
                           </div>
-                        </div>
-                      </Container>
+                        </Container>
+                      </div>
+                      <main className={classes.view}>{children}</main>
                     </div>
-                    <main className={classes.view}>{children}</main>
                     <div className={classes.appAction} ref={appActionAnchor} />
                   </div>
                 </div>
diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
index c698f1a89..c0ebe2025 100644
--- a/src/components/Checkbox/Checkbox.tsx
+++ b/src/components/Checkbox/Checkbox.tsx
@@ -83,7 +83,7 @@ const styles = (theme: Theme) =>
       display: "flex",
       height: 30,
       justifyContent: "center",
-      margin: 9,
+      margin: "5px 9px",
       width: 30
     }
   });
diff --git a/src/components/ColumnPicker/ColumnPickerContent.tsx b/src/components/ColumnPicker/ColumnPickerContent.tsx
index bef6aa779..bffe1bc82 100644
--- a/src/components/ColumnPicker/ColumnPickerContent.tsx
+++ b/src/components/ColumnPicker/ColumnPickerContent.tsx
@@ -87,10 +87,11 @@ const ColumnPickerContent: React.FC<ColumnPickerContentProps> = props => {
   const anchor = React.useRef<HTMLDivElement>();
   const scrollPosition = useElementScroll(anchor);
 
-  const dropShadow = anchor.current
-    ? scrollPosition.y + anchor.current.clientHeight <
-      anchor.current.scrollHeight
-    : false;
+  const dropShadow =
+    anchor.current && scrollPosition
+      ? scrollPosition.y + anchor.current.clientHeight <
+        anchor.current.scrollHeight
+      : false;
 
   return (
     <Card className={classes.root}>
diff --git a/src/components/ControlledSwitch.tsx b/src/components/ControlledSwitch.tsx
index 07a244006..b9d9e6a36 100644
--- a/src/components/ControlledSwitch.tsx
+++ b/src/components/ControlledSwitch.tsx
@@ -6,7 +6,7 @@ import React from "react";
 const styles = (theme: Theme) =>
   createStyles({
     label: {
-      marginLeft: theme.spacing.unit * 2
+      marginLeft: theme.spacing.unit * 3.5
     },
     labelText: {
       fontSize: 14
diff --git a/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx b/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx
index ada7a0e46..d9ee6d375 100644
--- a/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx
+++ b/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx
@@ -93,7 +93,6 @@ const SingleAutocompleteSelectFieldComponent = withStyles(styles, {
               inputValue,
               selectedItem,
               toggleMenu,
-              openMenu,
               closeMenu,
               highlightedIndex,
               reset
@@ -127,13 +126,13 @@ const SingleAutocompleteSelectFieldComponent = withStyles(styles, {
                       }),
                       endAdornment: (
                         <div>
-                          <ArrowDropdownIcon onClick={toggleMenu} />
+                          <ArrowDropdownIcon />
                         </div>
                       ),
                       error,
                       id: undefined,
                       onBlur: closeMenu,
-                      onFocus: openMenu
+                      onClick: toggleMenu
                     }}
                     error={error}
                     disabled={disabled}
diff --git a/src/components/Timeline/Timeline.tsx b/src/components/Timeline/Timeline.tsx
index 1c449c8e8..5489fa695 100644
--- a/src/components/Timeline/Timeline.tsx
+++ b/src/components/Timeline/Timeline.tsx
@@ -71,6 +71,7 @@ interface TimelineProps extends WithStyles<typeof styles> {
 
 interface TimelineAddNoteProps extends WithStyles<typeof styles> {
   message: string;
+  reset: () => void;
   onChange(event: React.ChangeEvent<any>);
   onSubmit(event: React.FormEvent<any>);
 }
@@ -82,9 +83,14 @@ export const Timeline = withStyles(styles, { name: "Timeline" })(
 );
 
 export const TimelineAddNote = withStyles(styles, { name: "TimelineAddNote" })(
-  ({ classes, message, onChange, onSubmit }: TimelineAddNoteProps) => {
+  ({ classes, message, onChange, onSubmit, reset }: TimelineAddNoteProps) => {
     const intl = useIntl();
 
+    const submit = e => {
+      reset();
+      onSubmit(e);
+    };
+
     return (
       <div className={classes.noteRoot}>
         <CardContent className={classes.noteTitle}>
@@ -106,7 +112,7 @@ export const TimelineAddNote = withStyles(styles, { name: "TimelineAddNote" })(
             multiline
             InputProps={{
               endAdornment: (
-                <Button color="primary" onClick={onSubmit}>
+                <Button color="primary" onClick={e => submit(e)}>
                   <FormattedMessage
                     defaultMessage="Send"
                     description="add order note, button"
diff --git a/src/components/Timeline/TimelineNote.tsx b/src/components/Timeline/TimelineNote.tsx
index 185064156..56568a199 100644
--- a/src/components/Timeline/TimelineNote.tsx
+++ b/src/components/Timeline/TimelineNote.tsx
@@ -14,7 +14,6 @@ import CRC from "crc-32";
 import React from "react";
 
 import { DateTime } from "../Date";
-import Hr from "../Hr";
 
 const palette = [
   colors.amber,
@@ -49,20 +48,22 @@ const styles = (theme: Theme) =>
     },
     cardContent: {
       "&:last-child": {
-        paddingBottom: 16
-      }
-    },
-    content: {
-      marginTop: theme.spacing.unit * 2
+        padding: 16
+      },
+      boxShadow: "0px 5px 10px rgba(0, 0, 0, 0.05)"
     },
     root: {
       position: "relative"
     },
     title: {
+      "& p": {
+        fontSize: "14px"
+      },
       alignItems: "center",
       display: "flex",
       justifyContent: "space-between",
-      marginBottom: theme.spacing.unit
+      marginBottom: theme.spacing.unit,
+      paddingLeft: theme.spacing.unit * 3
     }
   });
 
@@ -83,17 +84,15 @@ export const TimelineNote = withStyles(styles, { name: "TimelineNote" })(
       >
         <PersonIcon />
       </Avatar>
+      <div className={classes.title}>
+        <Typography>{user.email}</Typography>
+        <Typography>
+          <DateTime date={date} />
+        </Typography>
+      </div>
       <Card className={classes.card}>
         <CardContent className={classes.cardContent}>
-          <div className={classes.title}>
-            <Typography>{user.email}</Typography>
-            <Typography>
-              <DateTime date={date} />
-            </Typography>
-          </div>
-          <Hr />
           <Typography
-            className={classes.content}
             dangerouslySetInnerHTML={{
               __html: message.replace("\n", "<br />")
             }}
diff --git a/src/home/components/HomeAnalyticsCard/HomeAnalyticsCard.tsx b/src/home/components/HomeAnalyticsCard/HomeAnalyticsCard.tsx
index ea3d3be15..a44b61b3e 100644
--- a/src/home/components/HomeAnalyticsCard/HomeAnalyticsCard.tsx
+++ b/src/home/components/HomeAnalyticsCard/HomeAnalyticsCard.tsx
@@ -28,7 +28,6 @@ const styles = (theme: Theme) =>
       marginBottom: theme.spacing.unit * 3
     },
     cardSubtitle: {
-      color: theme.palette.primary.main,
       fontSize: 12,
       height: "20px",
       lineHeight: 0.9
diff --git a/src/orders/components/OrderHistory/OrderHistory.tsx b/src/orders/components/OrderHistory/OrderHistory.tsx
index d66b6848c..aad80fb77 100644
--- a/src/orders/components/OrderHistory/OrderHistory.tsx
+++ b/src/orders/components/OrderHistory/OrderHistory.tsx
@@ -207,9 +207,10 @@ const OrderHistory = withStyles(styles, { name: "OrderHistory" })(
         {history ? (
           <Timeline>
             <Form initial={{ message: "" }} onSubmit={onNoteAdd} resetOnSubmit>
-              {({ change, data, submit }) => (
+              {({ change, data, reset, submit }) => (
                 <TimelineAddNote
                   message={data.message}
+                  reset={reset}
                   onChange={change}
                   onSubmit={submit}
                 />
diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap
index 3d0634383..50452b961 100644
--- a/src/storybook/__snapshots__/Stories.test.ts.snap
+++ b/src/storybook/__snapshots__/Stories.test.ts.snap
@@ -6727,37 +6727,34 @@ exports[`Storyshots Generics / Timeline with order notes 1`] = `
           />
         </svg>
       </div>
+      <div
+        class="TimelineNote-title-id"
+      >
+        <p
+          class="MuiTypography-root-id MuiTypography-body2-id"
+        >
+          admin@example.com
+        </p>
+        <p
+          class="MuiTypography-root-id MuiTypography-body2-id"
+        >
+          <time
+            class=""
+            datetime="1525712282000"
+            title="May 7, 2018 12:58 PM"
+          >
+            3 months ago
+          </time>
+        </p>
+      </div>
       <div
         class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id TimelineNote-card-id"
       >
         <div
           class="MuiCardContent-root-id TimelineNote-cardContent-id"
         >
-          <div
-            class="TimelineNote-title-id"
-          >
-            <p
-              class="MuiTypography-root-id MuiTypography-body2-id"
-            >
-              admin@example.com
-            </p>
-            <p
-              class="MuiTypography-root-id MuiTypography-body2-id"
-            >
-              <time
-                class=""
-                datetime="1525712282000"
-                title="May 7, 2018 12:58 PM"
-              >
-                3 months ago
-              </time>
-            </p>
-          </div>
-          <hr
-            class="Hr-root-id"
-          />
           <p
-            class="MuiTypography-root-id MuiTypography-body2-id TimelineNote-content-id"
+            class="MuiTypography-root-id MuiTypography-body2-id"
           >
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
           </p>
@@ -6787,37 +6784,34 @@ exports[`Storyshots Generics / Timeline with order notes 1`] = `
           />
         </svg>
       </div>
+      <div
+        class="TimelineNote-title-id"
+      >
+        <p
+          class="MuiTypography-root-id MuiTypography-body2-id"
+        >
+          ceo@example.com
+        </p>
+        <p
+          class="MuiTypography-root-id MuiTypography-body2-id"
+        >
+          <time
+            class=""
+            datetime="1525712282000"
+            title="May 7, 2018 12:58 PM"
+          >
+            3 months ago
+          </time>
+        </p>
+      </div>
       <div
         class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id TimelineNote-card-id"
       >
         <div
           class="MuiCardContent-root-id TimelineNote-cardContent-id"
         >
-          <div
-            class="TimelineNote-title-id"
-          >
-            <p
-              class="MuiTypography-root-id MuiTypography-body2-id"
-            >
-              ceo@example.com
-            </p>
-            <p
-              class="MuiTypography-root-id MuiTypography-body2-id"
-            >
-              <time
-                class=""
-                datetime="1525712282000"
-                title="May 7, 2018 12:58 PM"
-              >
-                3 months ago
-              </time>
-            </p>
-          </div>
-          <hr
-            class="Hr-root-id"
-          />
           <p
-            class="MuiTypography-root-id MuiTypography-body2-id TimelineNote-content-id"
+            class="MuiTypography-root-id MuiTypography-body2-id"
           >
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
           </p>
@@ -8378,7 +8372,7 @@ exports[`Storyshots Views / Attributes / Attribute details create 1`] = `
                 <span
                   class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                 >
-                  Use in faceted navigation
+                  Use in Faceted Navigation
                 </span>
               </label>
               <div
@@ -9023,7 +9017,7 @@ exports[`Storyshots Views / Attributes / Attribute details default 1`] = `
                 <span
                   class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                 >
-                  Use in faceted navigation
+                  Use in Faceted Navigation
                 </span>
               </label>
               <div
@@ -9673,7 +9667,7 @@ exports[`Storyshots Views / Attributes / Attribute details form errors 1`] = `
                 <span
                   class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                 >
-                  Use in faceted navigation
+                  Use in Faceted Navigation
                 </span>
               </label>
               <div
@@ -10263,7 +10257,7 @@ exports[`Storyshots Views / Attributes / Attribute details loading 1`] = `
                 <span
                   class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
                 >
-                  Use in faceted navigation
+                  Use in Faceted Navigation
                 </span>
               </label>
               <div
@@ -10915,7 +10909,7 @@ exports[`Storyshots Views / Attributes / Attribute details multiple select input
                 <span
                   class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                 >
-                  Use in faceted navigation
+                  Use in Faceted Navigation
                 </span>
               </label>
               <div
@@ -11488,7 +11482,7 @@ exports[`Storyshots Views / Attributes / Attribute details no values 1`] = `
                 <span
                   class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                 >
-                  Use in faceted navigation
+                  Use in Faceted Navigation
                 </span>
               </label>
               <div
diff --git a/src/theme.ts b/src/theme.ts
index 937f04fc6..a6e8a37b1 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -60,7 +60,7 @@ export default (colors: IThemeColors): Theme =>
         },
         flat: {
           "& span": {
-            color: colors.font.gray
+            color: colors.font.default
           }
         },
         flatPrimary: {
@@ -100,6 +100,9 @@ export default (colors: IThemeColors): Theme =>
       },
       MuiDialogContent: {
         root: {
+          "& label": {
+            overflowX: "hidden"
+          },
           padding: "5px 24px 24px"
         }
       },