diff --git a/client/src/components/App.jsx b/client/src/components/App.jsx
index 9a815282..d8458c1d 100755
--- a/client/src/components/App.jsx
+++ b/client/src/components/App.jsx
@@ -1,26 +1,29 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import HeaderContainer from '../containers/HeaderContainer';
-import ProjectsContainer from '../containers/ProjectsContainer';
+import ModalTypes from '../constants/ModalTypes';
+import FixedWrapperContainer from '../containers/FixedWrapperContainer';
+import StaticWrapperContainer from '../containers/StaticWrapperContainer';
 import UsersModalContainer from '../containers/UsersModalContainer';
 import UserSettingsModalContainer from '../containers/UserSettingsModalContainer';
 import AddProjectModalContainer from '../containers/AddProjectModalContainer';
 
-const App = ({ isUsersModalOpened, isUserSettingsModalOpened, isAddProjectModalOpened }) => (
+const App = ({ currentModal }) => (
   <>
-    <HeaderContainer />
-    <ProjectsContainer />
-    {isUsersModalOpened && <UsersModalContainer />}
-    {isUserSettingsModalOpened && <UserSettingsModalContainer />}
-    {isAddProjectModalOpened && <AddProjectModalContainer />}
+    <FixedWrapperContainer />
+    <StaticWrapperContainer />
+    {currentModal === ModalTypes.USERS && <UsersModalContainer />}
+    {currentModal === ModalTypes.USER_SETTINGS && <UserSettingsModalContainer />}
+    {currentModal === ModalTypes.ADD_PROJECT && <AddProjectModalContainer />}
   </>
 );
 
 App.propTypes = {
-  isUsersModalOpened: PropTypes.bool.isRequired,
-  isUserSettingsModalOpened: PropTypes.bool.isRequired,
-  isAddProjectModalOpened: PropTypes.bool.isRequired,
+  currentModal: PropTypes.oneOf(Object.values(ModalTypes)),
+};
+
+App.defaultProps = {
+  currentModal: undefined,
 };
 
 export default App;
diff --git a/client/src/components/Board/AddList.jsx b/client/src/components/Board/AddList.jsx
index e3c2e1f4..a11998e1 100755
--- a/client/src/components/Board/AddList.jsx
+++ b/client/src/components/Board/AddList.jsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { Button, Form, Input } from 'semantic-ui-react';
@@ -12,48 +12,23 @@ const DEFAULT_DATA = {
   name: '',
 };
 
-const AddList = React.forwardRef(({ children, onCreate }, ref) => {
+const AddList = React.memo(({ onCreate, onClose }) => {
   const [t] = useTranslation();
-  const [isOpened, setIsOpened] = useState(false);
   const [data, handleFieldChange, setData] = useForm(DEFAULT_DATA);
   const [selectNameFieldState, selectNameField] = useToggle();
 
   const nameField = useRef(null);
 
-  const open = useCallback(() => {
-    setIsOpened(true);
-  }, []);
-
-  const close = useCallback(() => {
-    setIsOpened(false);
-  }, []);
-
-  useImperativeHandle(
-    ref,
-    () => ({
-      open,
-      close,
-    }),
-    [open, close],
-  );
-
-  const handleChildrenClick = useCallback(() => {
-    open();
-  }, [open]);
-
   const handleFieldKeyDown = useCallback(
     (event) => {
       if (event.key === 'Escape') {
-        close();
+        onClose();
       }
     },
-    [close],
+    [onClose],
   );
 
-  const [handleFieldBlur, handleControlMouseOver, handleControlMouseOut] = useClosableForm(
-    isOpened,
-    close,
-  );
+  const [handleFieldBlur, handleControlMouseOver, handleControlMouseOut] = useClosableForm(onClose);
 
   const handleSubmit = useCallback(() => {
     const cleanData = {
@@ -73,21 +48,13 @@ const AddList = React.forwardRef(({ children, onCreate }, ref) => {
   }, [onCreate, data, setData, selectNameField]);
 
   useEffect(() => {
-    if (isOpened) {
-      nameField.current.select();
-    }
-  }, [isOpened]);
+    nameField.current.select();
+  }, []);
 
   useDidUpdate(() => {
     nameField.current.select();
   }, [selectNameFieldState]);
 
-  if (!isOpened) {
-    return React.cloneElement(children, {
-      onClick: handleChildrenClick,
-    });
-  }
-
   return (
     <Form className={styles.wrapper} onSubmit={handleSubmit}>
       <Input
@@ -115,8 +82,8 @@ const AddList = React.forwardRef(({ children, onCreate }, ref) => {
 });
 
 AddList.propTypes = {
-  children: PropTypes.element.isRequired,
   onCreate: PropTypes.func.isRequired,
+  onClose: PropTypes.func.isRequired,
 };
 
-export default React.memo(AddList);
+export default AddList;
diff --git a/client/src/components/Board/Board.jsx b/client/src/components/Board/Board.jsx
index 8a386877..be936b89 100755
--- a/client/src/components/Board/Board.jsx
+++ b/client/src/components/Board/Board.jsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { DragDropContext, Droppable } from 'react-beautiful-dnd';
@@ -35,6 +35,18 @@ const Board = React.memo(
     onLabelDelete,
   }) => {
     const [t] = useTranslation();
+    const [isAddListOpened, setIsAddListOpened] = useState(false);
+
+    const wrapper = useRef(null);
+    const prevPosition = useRef(null);
+
+    const handleAddListClick = useCallback(() => {
+      setIsAddListOpened(true);
+    }, []);
+
+    const handleAddListClose = useCallback(() => {
+      setIsAddListOpened(false);
+    }, []);
 
     const handleDragStart = useCallback(() => {
       closePopup();
@@ -66,45 +78,110 @@ const Board = React.memo(
       [onListMove, onCardMove],
     );
 
+    const handleMouseDown = useCallback(
+      (event) => {
+        if (event.target !== wrapper.current && !event.target.dataset.dragScroller) {
+          return;
+        }
+
+        prevPosition.current = event.clientX;
+      },
+      [wrapper],
+    );
+
+    const handleWindowMouseMove = useCallback(
+      (event) => {
+        if (!prevPosition.current) {
+          return;
+        }
+
+        event.preventDefault();
+
+        window.scrollBy({
+          left: prevPosition.current - event.clientX,
+        });
+
+        prevPosition.current = event.clientX;
+      },
+      [prevPosition],
+    );
+
+    const handleWindowMouseUp = useCallback(() => {
+      prevPosition.current = null;
+    }, [prevPosition]);
+
+    useEffect(() => {
+      if (isAddListOpened) {
+        window.scroll(document.body.scrollWidth, 0);
+      }
+    }, [listIds, isAddListOpened]);
+
+    useEffect(() => {
+      window.addEventListener('mouseup', handleWindowMouseUp);
+      window.addEventListener('mousemove', handleWindowMouseMove);
+
+      return () => {
+        window.removeEventListener('mouseup', handleWindowMouseUp);
+        window.removeEventListener('mousemove', handleWindowMouseMove);
+      };
+    }, [handleWindowMouseUp, handleWindowMouseMove]);
+
     return (
       <>
-        <Filter
-          users={filterUsers}
-          labels={filterLabels}
-          allProjectMemberships={allProjectMemberships}
-          allLabels={allLabels}
-          onUserAdd={onUserToFilterAdd}
-          onUserRemove={onUserFromFilterRemove}
-          onLabelAdd={onLabelToFilterAdd}
-          onLabelRemove={onLabelFromFilterRemove}
-          onLabelCreate={onLabelCreate}
-          onLabelUpdate={onLabelUpdate}
-          onLabelDelete={onLabelDelete}
-        />
-        <div className={styles.wrapper}>
-          <DragDropContext onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
-            <Droppable droppableId="board" type={DroppableTypes.LIST} direction="horizontal">
-              {({ innerRef, droppableProps, placeholder }) => (
-                // eslint-disable-next-line react/jsx-props-no-spreading
-                <div {...droppableProps} data-drag-scroller ref={innerRef} className={styles.lists}>
-                  {listIds.map((listId, index) => (
-                    <ListContainer key={listId} id={listId} index={index} />
-                  ))}
-                  {placeholder}
-                  <div data-drag-scroller className={styles.list}>
-                    <AddList onCreate={onListCreate}>
-                      <button type="button" className={styles.addListButton}>
-                        <PlusMathIcon className={styles.addListButtonIcon} />
-                        <span className={styles.addListButtonText}>
-                          {listIds.length > 0 ? t('action.addAnotherList') : t('action.addList')}
-                        </span>
-                      </button>
-                    </AddList>
+        {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
+        <div ref={wrapper} className={styles.wrapper} onMouseDown={handleMouseDown}>
+          <Filter
+            users={filterUsers}
+            labels={filterLabels}
+            allProjectMemberships={allProjectMemberships}
+            allLabels={allLabels}
+            onUserAdd={onUserToFilterAdd}
+            onUserRemove={onUserFromFilterRemove}
+            onLabelAdd={onLabelToFilterAdd}
+            onLabelRemove={onLabelFromFilterRemove}
+            onLabelCreate={onLabelCreate}
+            onLabelUpdate={onLabelUpdate}
+            onLabelDelete={onLabelDelete}
+          />
+          <div>
+            <DragDropContext onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
+              <Droppable droppableId="board" type={DroppableTypes.LIST} direction="horizontal">
+                {({ innerRef, droppableProps, placeholder }) => (
+                  <div
+                    {...droppableProps} // eslint-disable-line react/jsx-props-no-spreading
+                    data-drag-scroller
+                    ref={innerRef}
+                    className={styles.lists}
+                  >
+                    {listIds.map((listId, index) => (
+                      <ListContainer key={listId} id={listId} index={index} />
+                    ))}
+                    {placeholder}
+                    <div data-drag-scroller className={styles.list}>
+                      {isAddListOpened ? (
+                        <AddList
+                          isOpened={isAddListOpened}
+                          onCreate={onListCreate}
+                          onClose={handleAddListClose}
+                        />
+                      ) : (
+                        <button
+                          type="button"
+                          className={styles.addListButton}
+                          onClick={handleAddListClick}
+                        >
+                          <PlusMathIcon className={styles.addListButtonIcon} />
+                          <span className={styles.addListButtonText}>
+                            {listIds.length > 0 ? t('action.addAnotherList') : t('action.addList')}
+                          </span>
+                        </button>
+                      )}
+                    </div>
                   </div>
-                </div>
-              )}
-            </Droppable>
-          </DragDropContext>
+                )}
+              </Droppable>
+            </DragDropContext>
+          </div>
         </div>
         {isCardModalOpened && <CardModalContainer />}
       </>
diff --git a/client/src/components/Board/Board.module.css b/client/src/components/Board/Board.module.css
index 505dff65..d844b366 100644
--- a/client/src/components/Board/Board.module.css
+++ b/client/src/components/Board/Board.module.css
@@ -48,5 +48,5 @@
 }
 
 .wrapper {
-  height: 100%;
+  margin: 0 20px;
 }
diff --git a/client/src/components/Board/Filter.jsx b/client/src/components/Board/Filter.jsx
index c5bc5f28..01e2fb81 100644
--- a/client/src/components/Board/Filter.jsx
+++ b/client/src/components/Board/Filter.jsx
@@ -25,14 +25,14 @@ const Filter = React.memo(
   }) => {
     const [t] = useTranslation();
 
-    const handleUserRemoveClick = useCallback(
+    const handleRemoveUserClick = useCallback(
       (id) => {
         onUserRemove(id);
       },
       [onUserRemove],
     );
 
-    const handleLabelRemoveClick = useCallback(
+    const handleRemoveLabelClick = useCallback(
       (id) => {
         onLabelRemove(id);
       },
@@ -62,7 +62,7 @@ const Filter = React.memo(
                 name={user.name}
                 avatarUrl={user.avatarUrl}
                 size="tiny"
-                onClick={() => handleUserRemoveClick(user.id)}
+                onClick={() => handleRemoveUserClick(user.id)}
               />
             </span>
           ))}
@@ -91,7 +91,7 @@ const Filter = React.memo(
                 name={label.name}
                 color={label.color}
                 size="small"
-                onClick={() => handleLabelRemoveClick(label.id)}
+                onClick={() => handleRemoveLabelClick(label.id)}
               />
             </span>
           ))}
diff --git a/client/src/components/Boards/Boards.jsx b/client/src/components/Boards/Boards.jsx
index 223c0588..364e313e 100755
--- a/client/src/components/Boards/Boards.jsx
+++ b/client/src/components/Boards/Boards.jsx
@@ -2,16 +2,13 @@ import pick from 'lodash/pick';
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { useTranslation, Trans } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
 import { Button, Icon } from 'semantic-ui-react';
 import { closePopup } from '../../lib/popup';
-import { DragScroller } from '../../lib/custom-ui';
 
 import Paths from '../../constants/Paths';
 import DroppableTypes from '../../constants/DroppableTypes';
-import BoardWrapperContainer from '../../containers/BoardWrapperContainer';
 import AddPopup from './AddPopup';
 import EditPopup from './EditPopup';
 
@@ -19,8 +16,6 @@ import styles from './Boards.module.css';
 
 const Boards = React.memo(
   ({ items, currentId, isEditable, onCreate, onUpdate, onMove, onDelete }) => {
-    const [t] = useTranslation();
-
     const handleDragStart = useCallback(() => {
       closePopup();
     }, []);
@@ -139,28 +134,6 @@ const Boards = React.memo(
         ) : (
           <div className={styles.tabs}>{renderItems(items)}</div>
         )}
-        <DragScroller className={styles.board}>
-          {currentId ? (
-            <BoardWrapperContainer />
-          ) : (
-            <div className={styles.message}>
-              <Icon
-                inverted
-                name="hand point up outline"
-                size="huge"
-                className={styles.messageIcon}
-              />
-              <h1 className={styles.messageTitle}>
-                {t('common.openBoard', {
-                  context: 'title',
-                })}
-              </h1>
-              <div className={styles.messageContent}>
-                <Trans i18nKey="common.createNewOneOrSelectExistingOne" />
-              </div>
-            </div>
-          )}
-        </DragScroller>
       </div>
     );
   },
diff --git a/client/src/components/Boards/Boards.module.css b/client/src/components/Boards/Boards.module.css
index 122cdc95..d1bdf6ce 100644
--- a/client/src/components/Boards/Boards.module.css
+++ b/client/src/components/Boards/Boards.module.css
@@ -9,15 +9,6 @@
   background: rgba(34, 36, 38, 0.3) !important;
 }
 
-.board {
-  display: flex;
-  flex: 1 1 auto;
-  flex-direction: column;
-  margin: 0 -20px 8px;
-  overflow: auto;
-  padding: 0 20px;
-}
-
 .editButton {
   background: transparent !important;
   color: #fff !important;
@@ -45,32 +36,6 @@
   overflow: hidden;
 }
 
-.message {
-  align-content: space-between;
-  align-items: center;
-  color: #fff;
-  display: flex;
-  flex: 1 1 auto;
-  flex-direction: column;
-  justify-content: center;
-}
-
-.messageIcon {
-  margin-top: -84px;
-}
-
-.messageTitle {
-  font-size: 32px;
-  margin: 24px 0 8px;
-}
-
-.messageContent {
-  font-size: 18px;
-  line-height: 1.4;
-  margin: 4px 0 0;
-  text-align: center;
-}
-
 .tab {
   border-radius: 3px 3px 0 0;
   min-width: 100px;
@@ -104,7 +69,6 @@
   display: flex;
   height: 38px;
   flex: 0 0 auto;
-  margin-bottom: 16px;
   white-space: nowrap;
 }
 
diff --git a/client/src/components/Card/ActionsPopup.jsx b/client/src/components/Card/ActionsPopup.jsx
index 48e636d5..f0286e57 100644
--- a/client/src/components/Card/ActionsPopup.jsx
+++ b/client/src/components/Card/ActionsPopup.jsx
@@ -51,7 +51,7 @@ const ActionsStep = React.memo(
     const [t] = useTranslation();
     const [step, openStep, handleBack] = useSteps();
 
-    const handleNameEditClick = useCallback(() => {
+    const handleEditNameClick = useCallback(() => {
       onNameEdit();
       onClose();
     }, [onNameEdit, onClose]);
@@ -178,7 +178,7 @@ const ActionsStep = React.memo(
         </Popup.Header>
         <Popup.Content>
           <Menu secondary vertical className={styles.menu}>
-            <Menu.Item className={styles.menuItem} onClick={handleNameEditClick}>
+            <Menu.Item className={styles.menuItem} onClick={handleEditNameClick}>
               {t('action.editTitle', {
                 context: 'title',
               })}
diff --git a/client/src/components/Card/EditName.jsx b/client/src/components/Card/EditName.jsx
index a7673559..84bc6b2d 100644
--- a/client/src/components/Card/EditName.jsx
+++ b/client/src/components/Card/EditName.jsx
@@ -69,8 +69,8 @@ const EditName = React.forwardRef(({ children, defaultValue, onUpdate }, ref) =>
   );
 
   const [handleFieldBlur, handleControlMouseOver, handleControlMouseOut] = useClosableForm(
-    isOpened,
     close,
+    isOpened,
   );
 
   const handleSubmit = useCallback(() => {
diff --git a/client/src/components/CardModal/Actions/EditComment.jsx b/client/src/components/CardModal/Actions/EditComment.jsx
index 2d8f887a..fe255401 100755
--- a/client/src/components/CardModal/Actions/EditComment.jsx
+++ b/client/src/components/CardModal/Actions/EditComment.jsx
@@ -66,8 +66,8 @@ const EditComment = React.forwardRef(({ children, defaultData, onUpdate }, ref)
   );
 
   const [handleFieldBlur, handleControlMouseOver, handleControlMouseOut] = useClosableForm(
-    isOpened,
     close,
+    isOpened,
   );
 
   const handleSubmit = useCallback(() => {
diff --git a/client/src/components/CardModal/CardModal.jsx b/client/src/components/CardModal/CardModal.jsx
index 159fba5a..0344f766 100755
--- a/client/src/components/CardModal/CardModal.jsx
+++ b/client/src/components/CardModal/CardModal.jsx
@@ -117,7 +117,7 @@ const CardModal = React.memo(
       [onUpdate],
     );
 
-    const handleToggleSubscribeClick = useCallback(() => {
+    const handleToggleSubscriptionClick = useCallback(() => {
       onUpdate({
         isSubscribed: !isSubscribed,
       });
@@ -359,7 +359,7 @@ const CardModal = React.memo(
                   <Button
                     fluid
                     className={styles.actionButton}
-                    onClick={handleToggleSubscribeClick}
+                    onClick={handleToggleSubscriptionClick}
                   >
                     <Icon name="paper plane outline" className={styles.actionIcon} />
                     {isSubscribed ? t('action.unsubscribe') : t('action.subscribe')}
@@ -378,7 +378,7 @@ const CardModal = React.memo(
                     <Button
                       fluid
                       className={styles.actionButton}
-                      onClick={handleToggleSubscribeClick}
+                      onClick={handleToggleSubscriptionClick}
                     >
                       <Icon name="share square outline" className={styles.actionIcon} />
                       {t('action.move')}
diff --git a/client/src/components/CardModal/EditDescription.jsx b/client/src/components/CardModal/EditDescription.jsx
index c833421c..53086ed7 100755
--- a/client/src/components/CardModal/EditDescription.jsx
+++ b/client/src/components/CardModal/EditDescription.jsx
@@ -56,8 +56,8 @@ const EditDescription = React.forwardRef(({ children, defaultValue, onUpdate },
   );
 
   const [handleFieldBlur, handleControlMouseOver, handleControlMouseOut] = useClosableForm(
-    isOpened,
     close,
+    isOpened,
   );
 
   const handleSubmit = useCallback(() => {
diff --git a/client/src/components/CardModal/Tasks/ActionsPopup.jsx b/client/src/components/CardModal/Tasks/ActionsPopup.jsx
index 1d573898..566d3e1d 100755
--- a/client/src/components/CardModal/Tasks/ActionsPopup.jsx
+++ b/client/src/components/CardModal/Tasks/ActionsPopup.jsx
@@ -18,7 +18,7 @@ const ActionsStep = React.memo(({ onNameEdit, onDelete, onClose }) => {
   const [t] = useTranslation();
   const [step, openStep, handleBack] = useSteps();
 
-  const handleNameEditClick = useCallback(() => {
+  const handleEditNameClick = useCallback(() => {
     onNameEdit();
     onClose();
   }, [onNameEdit, onClose]);
@@ -50,7 +50,7 @@ const ActionsStep = React.memo(({ onNameEdit, onDelete, onClose }) => {
       </Popup.Header>
       <Popup.Content>
         <Menu secondary vertical className={styles.menu}>
-          <Menu.Item className={styles.menuItem} onClick={handleNameEditClick}>
+          <Menu.Item className={styles.menuItem} onClick={handleEditNameClick}>
             {t('action.editDescription', {
               context: 'title',
             })}
diff --git a/client/src/components/CardModal/Tasks/Add.jsx b/client/src/components/CardModal/Tasks/Add.jsx
index 4f253710..3f3377b1 100755
--- a/client/src/components/CardModal/Tasks/Add.jsx
+++ b/client/src/components/CardModal/Tasks/Add.jsx
@@ -71,8 +71,8 @@ const Add = React.forwardRef(({ children, onCreate }, ref) => {
   );
 
   const [handleFieldBlur, handleControlMouseOver, handleControlMouseOut] = useClosableForm(
-    isOpened,
     close,
+    isOpened,
   );
 
   const handleSubmit = useCallback(() => {
diff --git a/client/src/components/CardModal/Tasks/EditName.jsx b/client/src/components/CardModal/Tasks/EditName.jsx
index 7a1c5bf2..8cedd80b 100755
--- a/client/src/components/CardModal/Tasks/EditName.jsx
+++ b/client/src/components/CardModal/Tasks/EditName.jsx
@@ -61,8 +61,8 @@ const EditName = React.forwardRef(({ children, defaultValue, onUpdate }, ref) =>
   );
 
   const [handleFieldBlur, handleControlMouseOver, handleControlMouseOut] = useClosableForm(
-    isOpened,
     close,
+    isOpened,
   );
 
   const handleSubmit = useCallback(() => {
diff --git a/client/src/components/FixedWrapper/FixedWrapper.jsx b/client/src/components/FixedWrapper/FixedWrapper.jsx
new file mode 100644
index 00000000..9e6135bc
--- /dev/null
+++ b/client/src/components/FixedWrapper/FixedWrapper.jsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import HeaderContainer from '../../containers/HeaderContainer';
+import ProjectContainer from '../../containers/ProjectContainer';
+
+import styles from './FixedWrapper.module.css';
+
+const FixedWrapper = ({ projectId }) => (
+  <div className={styles.wrapper}>
+    <HeaderContainer />
+    {projectId && <ProjectContainer />}
+  </div>
+);
+
+FixedWrapper.propTypes = {
+  projectId: PropTypes.string,
+};
+
+FixedWrapper.defaultProps = {
+  projectId: undefined,
+};
+
+export default FixedWrapper;
diff --git a/client/src/components/FixedWrapper/FixedWrapper.module.css b/client/src/components/FixedWrapper/FixedWrapper.module.css
new file mode 100644
index 00000000..3b483372
--- /dev/null
+++ b/client/src/components/FixedWrapper/FixedWrapper.module.css
@@ -0,0 +1,5 @@
+.wrapper {
+  position: fixed;
+  width: 100%;
+  z-index: 1;
+}
diff --git a/client/src/components/FixedWrapper/index.js b/client/src/components/FixedWrapper/index.js
new file mode 100644
index 00000000..766f012b
--- /dev/null
+++ b/client/src/components/FixedWrapper/index.js
@@ -0,0 +1,3 @@
+import FixedWrapper from './FixedWrapper';
+
+export default FixedWrapper;
diff --git a/client/src/components/Header/NotificationsPopup.jsx b/client/src/components/Header/NotificationsPopup.jsx
index 24d9334b..7d9c46a0 100755
--- a/client/src/components/Header/NotificationsPopup.jsx
+++ b/client/src/components/Header/NotificationsPopup.jsx
@@ -111,4 +111,6 @@ NotificationsStep.propTypes = {
   onClose: PropTypes.func.isRequired,
 };
 
-export default withPopup(NotificationsStep);
+export default withPopup(NotificationsStep, {
+  position: 'bottom right',
+});
diff --git a/client/src/components/List/ActionsPopup.jsx b/client/src/components/List/ActionsPopup.jsx
index b1f40921..7ec2b9b8 100755
--- a/client/src/components/List/ActionsPopup.jsx
+++ b/client/src/components/List/ActionsPopup.jsx
@@ -18,12 +18,12 @@ const ActionsStep = React.memo(({ onNameEdit, onCardAdd, onDelete, onClose }) =>
   const [t] = useTranslation();
   const [step, openStep, handleBack] = useSteps();
 
-  const handleNameEditClick = useCallback(() => {
+  const handleEditNameClick = useCallback(() => {
     onNameEdit();
     onClose();
   }, [onNameEdit, onClose]);
 
-  const handleCardAddClick = useCallback(() => {
+  const handleAddCardClick = useCallback(() => {
     onCardAdd();
     onClose();
   }, [onCardAdd, onClose]);
@@ -55,12 +55,12 @@ const ActionsStep = React.memo(({ onNameEdit, onCardAdd, onDelete, onClose }) =>
       </Popup.Header>
       <Popup.Content>
         <Menu secondary vertical className={styles.menu}>
-          <Menu.Item className={styles.menuItem} onClick={handleNameEditClick}>
+          <Menu.Item className={styles.menuItem} onClick={handleEditNameClick}>
             {t('action.editTitle', {
               context: 'title',
             })}
           </Menu.Item>
-          <Menu.Item className={styles.menuItem} onClick={handleCardAddClick}>
+          <Menu.Item className={styles.menuItem} onClick={handleAddCardClick}>
             {t('action.addCard', {
               context: 'title',
             })}
diff --git a/client/src/components/List/AddCard.jsx b/client/src/components/List/AddCard.jsx
index 83891730..05c7d502 100755
--- a/client/src/components/List/AddCard.jsx
+++ b/client/src/components/List/AddCard.jsx
@@ -1,5 +1,6 @@
-import React, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 import TextareaAutosize from 'react-textarea-autosize';
 import { Button, Form, TextArea } from 'semantic-ui-react';
@@ -13,22 +14,13 @@ const DEFAULT_DATA = {
   name: '',
 };
 
-const AddCard = React.forwardRef(({ children, onCreate }, ref) => {
+const AddCard = React.memo(({ isOpened, onCreate, onClose }) => {
   const [t] = useTranslation();
-  const [isOpened, setIsOpened] = useState(false);
   const [data, handleFieldChange, setData] = useForm(DEFAULT_DATA);
   const [selectNameFieldState, selectNameField] = useToggle();
 
   const nameField = useRef(null);
 
-  const open = useCallback(() => {
-    setIsOpened(true);
-  }, []);
-
-  const close = useCallback(() => {
-    setIsOpened(false);
-  }, []);
-
   const submit = useCallback(() => {
     const cleanData = {
       ...data,
@@ -46,19 +38,6 @@ const AddCard = React.forwardRef(({ children, onCreate }, ref) => {
     selectNameField();
   }, [onCreate, data, setData, selectNameField]);
 
-  useImperativeHandle(
-    ref,
-    () => ({
-      open,
-      close,
-    }),
-    [open, close],
-  );
-
-  const handleChildrenClick = useCallback(() => {
-    open();
-  }, [open]);
-
   const handleFieldKeyDown = useCallback(
     (event) => {
       switch (event.key) {
@@ -69,19 +48,16 @@ const AddCard = React.forwardRef(({ children, onCreate }, ref) => {
 
           break;
         case 'Escape':
-          close();
+          onClose();
 
           break;
         default:
       }
     },
-    [close, submit],
+    [onClose, submit],
   );
 
-  const [handleFieldBlur, handleControlMouseOver, handleControlMouseOut] = useClosableForm(
-    isOpened,
-    close,
-  );
+  const [handleFieldBlur, handleControlMouseOver, handleControlMouseOut] = useClosableForm(onClose);
 
   const handleSubmit = useCallback(() => {
     submit();
@@ -97,14 +73,11 @@ const AddCard = React.forwardRef(({ children, onCreate }, ref) => {
     nameField.current.ref.current.select();
   }, [selectNameFieldState]);
 
-  if (!isOpened) {
-    return React.cloneElement(children, {
-      onClick: handleChildrenClick,
-    });
-  }
-
   return (
-    <Form className={styles.wrapper} onSubmit={handleSubmit}>
+    <Form
+      className={classNames(styles.wrapper, !isOpened && styles.wrapperClosed)}
+      onSubmit={handleSubmit}
+    >
       <div className={styles.fieldWrapper}>
         <TextArea
           ref={nameField}
@@ -135,8 +108,9 @@ const AddCard = React.forwardRef(({ children, onCreate }, ref) => {
 });
 
 AddCard.propTypes = {
-  children: PropTypes.element.isRequired,
+  isOpened: PropTypes.bool.isRequired,
   onCreate: PropTypes.func.isRequired,
+  onClose: PropTypes.func.isRequired,
 };
 
-export default React.memo(AddCard);
+export default AddCard;
diff --git a/client/src/components/List/AddCard.module.css b/client/src/components/List/AddCard.module.css
index c7668245..0c8b5768 100644
--- a/client/src/components/List/AddCard.module.css
+++ b/client/src/components/List/AddCard.module.css
@@ -24,3 +24,7 @@
 .wrapper {
   padding-bottom: 8px !important;
 }
+
+.wrapperClosed {
+  display: none;
+}
diff --git a/client/src/components/List/List.jsx b/client/src/components/List/List.jsx
index 0eac9ce6..26c93a25 100755
--- a/client/src/components/List/List.jsx
+++ b/client/src/components/List/List.jsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useRef } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
@@ -17,9 +17,10 @@ import styles from './List.module.css';
 const List = React.memo(
   ({ id, index, name, isPersisted, cardIds, onUpdate, onDelete, onCardCreate }) => {
     const [t] = useTranslation();
+    const [isAddCardOpened, setIsAddCardOpened] = useState(false);
 
-    const addCard = useRef(null);
     const editName = useRef(null);
+    const listWrapper = useRef(null);
 
     const handleHeaderClick = useCallback(() => {
       if (isPersisted) {
@@ -36,14 +37,28 @@ const List = React.memo(
       [onUpdate],
     );
 
+    const handleAddCardClick = useCallback(() => {
+      setIsAddCardOpened(true);
+    }, []);
+
+    const handleAddCardClose = useCallback(() => {
+      setIsAddCardOpened(false);
+    }, []);
+
     const handleNameEdit = useCallback(() => {
       editName.current.open();
     }, []);
 
     const handleCardAdd = useCallback(() => {
-      addCard.current.open();
+      setIsAddCardOpened(true);
     }, []);
 
+    useEffect(() => {
+      if (isAddCardOpened) {
+        listWrapper.current.scrollTop = listWrapper.current.scrollHeight;
+      }
+    }, [cardIds, isAddCardOpened]);
+
     const cardsNode = (
       <Droppable
         droppableId={`list:${id}`}
@@ -58,15 +73,12 @@ const List = React.memo(
                 <CardContainer key={cardId} id={cardId} index={cardIndex} />
               ))}
               {placeholder}
+              <AddCard
+                isOpened={isAddCardOpened}
+                onCreate={onCardCreate}
+                onClose={handleAddCardClose}
+              />
             </div>
-            <AddCard ref={addCard} onCreate={onCardCreate}>
-              <button type="button" disabled={!isPersisted} className={styles.addCardButton}>
-                <PlusMathIcon className={styles.addCardButtonIcon} />
-                <span className={styles.addCardButtonText}>
-                  {cardIds.length > 0 ? t('action.addAnotherCard') : t('action.addCard')}
-                </span>
-              </button>
-            </AddCard>
           </div>
         )}
       </Droppable>
@@ -99,7 +111,25 @@ const List = React.memo(
                 </ActionsPopup>
               )}
             </div>
-            <div className={styles.list}>{cardsNode}</div>
+            <div
+              ref={listWrapper}
+              className={classNames(styles.listWrapper, isAddCardOpened && styles.listWrapperFull)}
+            >
+              <div className={styles.list}>{cardsNode}</div>
+            </div>
+            {!isAddCardOpened && (
+              <button
+                type="button"
+                disabled={!isPersisted}
+                className={styles.addCardButton}
+                onClick={handleAddCardClick}
+              >
+                <PlusMathIcon className={styles.addCardButtonIcon} />
+                <span className={styles.addCardButtonText}>
+                  {cardIds.length > 0 ? t('action.addAnotherCard') : t('action.addCard')}
+                </span>
+              </button>
+            )}
           </div>
         )}
       </Draggable>
diff --git a/client/src/components/List/List.module.css b/client/src/components/List/List.module.css
index 8d236be6..53521ebd 100644
--- a/client/src/components/List/List.module.css
+++ b/client/src/components/List/List.module.css
@@ -1,6 +1,7 @@
 .addCardButton {
-  background: none !important;
+  background: #dfe3e6 !important;
   border: none !important;
+  border-radius: 0 0 3px 3px !important;
   color: #6b808c !important;
   cursor: pointer;
   display: block !important;
@@ -8,18 +9,14 @@
   flex: 0 0 auto;
   font-weight: normal !important;
   height: 36px !important;
-  margin: 0 -8px !important;
+  outline: none !important;
   padding: 8px !important;
   text-align: left !important;
-  width: calc(100% + 16px);
-}
-
-.addCardButton:active {
-  outline: none !important;
+  width: 100%;
 }
 
 .addCardButton:hover {
-  background-color: #092d4221 !important;
+  background-color: #c3cbd0 !important;
   color: #17394d !important;
   fill: #17394d !important;
 }
@@ -40,6 +37,7 @@
 
 .cards {
   flex: 1 1 auto;
+  min-height: 1px;
 }
 
 .header {
@@ -96,18 +94,48 @@
 
 .list {
   background: #dfe3e6 !important;
-  border-radius: 0 0 3px 3px !important;
   box-sizing: border-box !important;
   display: flex;
   flex-direction: column;
   padding: 0 8px !important;
   position: relative !important;
   white-space: normal !important;
+  width: 272px;
+}
+
+.listWrapper {
+  background: #dfe3e6;
+  max-height: calc(100vh - 300px);
+  overflow-x: hidden;
+  overflow-y: auto;
+  width: 290px;
+}
+
+.listWrapper:hover {
+  width: 272px;
+}
+
+.listWrapper::-webkit-scrollbar {
+  width: 5px;
+}
+
+.listWrapper::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.listWrapper::-webkit-scrollbar-thumb {
+  border-radius: 3px;
+}
+
+.listWrapperFull {
+  max-height: calc(100vh - 264px);
 }
 
 .wrapper {
+  border-radius: 3px;
   flex: 0 0 auto;
   margin: 0 4px !important;
+  overflow: hidden;
   vertical-align: top !important;
   width: 272px !important;
 }
diff --git a/client/src/components/ProjectWrapper.jsx b/client/src/components/ProjectWrapper.jsx
deleted file mode 100755
index fabf15a3..00000000
--- a/client/src/components/ProjectWrapper.jsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
-
-import ProjectContainer from '../containers/ProjectContainer';
-
-const ProjectWrapper = React.memo(({ isProjectNotFound, isBoardNotFound, isCardNotFound }) => {
-  const [t] = useTranslation();
-
-  if (isCardNotFound) {
-    return (
-      <h1>
-        {t('common.cardNotFound', {
-          context: 'title',
-        })}
-      </h1>
-    );
-  }
-
-  if (isBoardNotFound) {
-    return (
-      <h1>
-        {t('common.boardNotFound', {
-          context: 'title',
-        })}
-      </h1>
-    );
-  }
-
-  if (isProjectNotFound) {
-    return (
-      <h1>
-        {t('common.projectNotFound', {
-          context: 'title',
-        })}
-      </h1>
-    );
-  }
-
-  return <ProjectContainer />;
-});
-
-ProjectWrapper.propTypes = {
-  isProjectNotFound: PropTypes.bool.isRequired,
-  isBoardNotFound: PropTypes.bool.isRequired,
-  isCardNotFound: PropTypes.bool.isRequired,
-};
-
-export default ProjectWrapper;
diff --git a/client/src/components/Projects/Projects.jsx b/client/src/components/Projects/Projects.jsx
index 2a00789c..9cc76c5d 100755
--- a/client/src/components/Projects/Projects.jsx
+++ b/client/src/components/Projects/Projects.jsx
@@ -1,4 +1,3 @@
-import isUndefined from 'lodash/isUndefined';
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -7,72 +6,56 @@ import { Link } from 'react-router-dom';
 import { Container, Grid } from 'semantic-ui-react';
 
 import Paths from '../../constants/Paths';
-import ProjectWrapperContainer from '../../containers/ProjectWrapperContainer';
 import { ReactComponent as PlusIcon } from '../../assets/images/plus-icon.svg';
 
 import styles from './Projects.module.css';
 
-const Projects = React.memo(({ items, currentId, isEditable, onAdd }) => {
+const Projects = React.memo(({ items, isEditable, onAdd }) => {
   const [t] = useTranslation();
 
-  if (isUndefined(currentId)) {
-    return (
-      <Container className={styles.cardsWrapper}>
-        <Grid className={styles.gridFix}>
-          {items.map((item) => (
-            <Grid.Column key={item.id} mobile={8} computer={4}>
-              <Link
-                to={
-                  item.firstBoardId
-                    ? Paths.BOARDS.replace(':id', item.firstBoardId)
-                    : Paths.PROJECTS.replace(':id', item.id)
-                }
-              >
-                <div className={classNames(styles.card, styles.open)}>
-                  {item.notificationsTotal > 0 && (
-                    <span className={styles.notification}>{item.notificationsTotal}</span>
-                  )}
-                  <div className={styles.cardOverlay} />
-                  <div className={styles.openTitle}>{item.name}</div>
-                </div>
-              </Link>
-            </Grid.Column>
-          ))}
-          {isEditable && (
-            <Grid.Column mobile={8} computer={4}>
-              <button type="button" className={classNames(styles.card, styles.add)} onClick={onAdd}>
-                <div className={styles.addTitleWrapper}>
-                  <div className={styles.addTitle}>
-                    <PlusIcon className={styles.addGridIcon} />
-                    {t('action.createProject')}
-                  </div>
-                </div>
-              </button>
-            </Grid.Column>
-          )}
-        </Grid>
-      </Container>
-    );
-  }
-
   return (
-    <div className={styles.wrapper}>
-      <div className={styles.project}>
-        <ProjectWrapperContainer />
-      </div>
-    </div>
+    <Container className={styles.cardsWrapper}>
+      <Grid className={styles.gridFix}>
+        {items.map((item) => (
+          <Grid.Column key={item.id} mobile={8} computer={4}>
+            <Link
+              to={
+                item.firstBoardId
+                  ? Paths.BOARDS.replace(':id', item.firstBoardId)
+                  : Paths.PROJECTS.replace(':id', item.id)
+              }
+            >
+              <div className={classNames(styles.card, styles.open)}>
+                {item.notificationsTotal > 0 && (
+                  <span className={styles.notification}>{item.notificationsTotal}</span>
+                )}
+                <div className={styles.cardOverlay} />
+                <div className={styles.openTitle}>{item.name}</div>
+              </div>
+            </Link>
+          </Grid.Column>
+        ))}
+        {isEditable && (
+          <Grid.Column mobile={8} computer={4}>
+            <button type="button" className={classNames(styles.card, styles.add)} onClick={onAdd}>
+              <div className={styles.addTitleWrapper}>
+                <div className={styles.addTitle}>
+                  <PlusIcon className={styles.addGridIcon} />
+                  {t('action.createProject')}
+                </div>
+              </div>
+            </button>
+          </Grid.Column>
+        )}
+      </Grid>
+    </Container>
   );
 });
 
 Projects.propTypes = {
   items: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
-  currentId: PropTypes.string,
   isEditable: PropTypes.bool.isRequired,
   onAdd: PropTypes.func.isRequired,
 };
 
-Projects.defaultProps = {
-  currentId: undefined,
-};
-
 export default Projects;
diff --git a/client/src/components/StaticWrapper/StaticWrapper.jsx b/client/src/components/StaticWrapper/StaticWrapper.jsx
new file mode 100644
index 00000000..6c59c24c
--- /dev/null
+++ b/client/src/components/StaticWrapper/StaticWrapper.jsx
@@ -0,0 +1,106 @@
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { useTranslation, Trans } from 'react-i18next';
+import { Icon } from 'semantic-ui-react';
+
+import ProjectsContainer from '../../containers/ProjectsContainer';
+import BoardWrapperContainer from '../../containers/BoardWrapperContainer';
+
+import styles from './StaticWrapper.module.css';
+
+const StaticWrapper = ({ cardId, boardId, projectId }) => {
+  const [t] = useTranslation();
+
+  useEffect(() => {
+    document.body.style.overflowX = 'auto'; // TODO: only for board
+  }, []);
+
+  if (projectId === undefined) {
+    return (
+      <div className={styles.root}>
+        <ProjectsContainer />
+      </div>
+    );
+  }
+
+  if (cardId === null) {
+    return (
+      <div className={classNames(styles.root, styles.flex)}>
+        <div className={styles.message}>
+          <h1>
+            {t('common.cardNotFound', {
+              context: 'title',
+            })}
+          </h1>
+        </div>
+      </div>
+    );
+  }
+
+  if (boardId === null) {
+    return (
+      <div className={classNames(styles.root, styles.flex)}>
+        <div className={styles.message}>
+          <h1>
+            {t('common.boardNotFound', {
+              context: 'title',
+            })}
+          </h1>
+        </div>
+      </div>
+    );
+  }
+
+  if (projectId === null) {
+    return (
+      <div className={classNames(styles.root, styles.flex)}>
+        <div className={styles.message}>
+          <h1>
+            {t('common.projectNotFound', {
+              context: 'title',
+            })}
+          </h1>
+        </div>
+      </div>
+    );
+  }
+
+  if (boardId === undefined) {
+    return (
+      <div className={classNames(styles.board, styles.flex)}>
+        <div className={styles.message}>
+          <Icon inverted name="hand point up outline" size="huge" className={styles.messageIcon} />
+          <h1 className={styles.messageTitle}>
+            {t('common.openBoard', {
+              context: 'title',
+            })}
+          </h1>
+          <div className={styles.messageContent}>
+            <Trans i18nKey="common.createNewOneOrSelectExistingOne" />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={classNames(styles.board, styles.flex)}>
+      <BoardWrapperContainer />
+    </div>
+  );
+};
+
+StaticWrapper.propTypes = {
+  cardId: PropTypes.string,
+  boardId: PropTypes.string,
+  projectId: PropTypes.string,
+};
+
+StaticWrapper.defaultProps = {
+  cardId: undefined,
+  boardId: undefined,
+  projectId: undefined,
+};
+
+export default StaticWrapper;
diff --git a/client/src/components/StaticWrapper/StaticWrapper.module.css b/client/src/components/StaticWrapper/StaticWrapper.module.css
new file mode 100644
index 00000000..ed80a578
--- /dev/null
+++ b/client/src/components/StaticWrapper/StaticWrapper.module.css
@@ -0,0 +1,38 @@
+.board {
+  margin-top: 168px;
+}
+
+.flex {
+  display: flex;
+  height: 100%;
+}
+
+.message {
+  align-content: space-between;
+  align-items: center;
+  color: #fff;
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.messageIcon {
+  margin-top: -84px;
+}
+
+.messageTitle {
+  font-size: 32px;
+  margin: 24px 0 8px;
+}
+
+.messageContent {
+  font-size: 18px;
+  line-height: 1.4;
+  margin: 4px 0 0;
+  text-align: center;
+}
+
+.root {
+  margin-top: 50px;
+}
diff --git a/client/src/components/StaticWrapper/index.js b/client/src/components/StaticWrapper/index.js
new file mode 100644
index 00000000..fc732a31
--- /dev/null
+++ b/client/src/components/StaticWrapper/index.js
@@ -0,0 +1,3 @@
+import StaticWrapper from './StaticWrapper';
+
+export default StaticWrapper;
diff --git a/client/src/components/UserPopup/UserPopup.jsx b/client/src/components/UserPopup/UserPopup.jsx
index 0a8cf2de..2f0ff164 100755
--- a/client/src/components/UserPopup/UserPopup.jsx
+++ b/client/src/components/UserPopup/UserPopup.jsx
@@ -46,4 +46,6 @@ UserStep.propTypes = {
   onClose: PropTypes.func.isRequired,
 };
 
-export default withPopup(UserStep);
+export default withPopup(UserStep, {
+  position: 'bottom right',
+});
diff --git a/client/src/constants/ModalTypes.js b/client/src/constants/ModalTypes.js
index 789e5700..83032401 100755
--- a/client/src/constants/ModalTypes.js
+++ b/client/src/constants/ModalTypes.js
@@ -1,7 +1,5 @@
 const USERS = 'USERS';
-
 const USER_SETTINGS = 'USER_SETTINGS';
-
 const ADD_PROJECT = 'ADD_PROJECT';
 
 export default {
diff --git a/client/src/containers/AppContainer.js b/client/src/containers/AppContainer.js
index d66b4aab..093f8bb3 100755
--- a/client/src/containers/AppContainer.js
+++ b/client/src/containers/AppContainer.js
@@ -1,16 +1,13 @@
 import { connect } from 'react-redux';
 
 import { currentModalSelector } from '../selectors';
-import ModalTypes from '../constants/ModalTypes';
 import App from '../components/App';
 
 const mapStateToProps = (state) => {
   const currentModal = currentModalSelector(state);
 
   return {
-    isUsersModalOpened: currentModal === ModalTypes.USERS,
-    isUserSettingsModalOpened: currentModal === ModalTypes.USER_SETTINGS,
-    isAddProjectModalOpened: currentModal === ModalTypes.ADD_PROJECT,
+    currentModal,
   };
 };
 
diff --git a/client/src/containers/FixedWrapperContainer.js b/client/src/containers/FixedWrapperContainer.js
new file mode 100644
index 00000000..232aeafa
--- /dev/null
+++ b/client/src/containers/FixedWrapperContainer.js
@@ -0,0 +1,14 @@
+import { connect } from 'react-redux';
+
+import { pathSelector } from '../selectors';
+import FixedWrapper from '../components/FixedWrapper';
+
+const mapStateToProps = (state) => {
+  const { projectId } = pathSelector(state);
+
+  return {
+    projectId,
+  };
+};
+
+export default connect(mapStateToProps)(FixedWrapper);
diff --git a/client/src/containers/ProjectWrapperContainer.js b/client/src/containers/ProjectWrapperContainer.js
deleted file mode 100755
index 9baf4f0e..00000000
--- a/client/src/containers/ProjectWrapperContainer.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import { connect } from 'react-redux';
-
-import { pathSelector } from '../selectors';
-import ProjectWrapper from '../components/ProjectWrapper';
-
-const mapStateToProps = (state) => {
-  const { cardId, boardId, projectId } = pathSelector(state);
-
-  return {
-    isProjectNotFound: projectId === null,
-    isBoardNotFound: boardId === null,
-    isCardNotFound: cardId === null,
-  };
-};
-
-export default connect(mapStateToProps)(ProjectWrapper);
diff --git a/client/src/containers/ProjectsContainer.js b/client/src/containers/ProjectsContainer.js
index 4eb7ca3c..69446559 100755
--- a/client/src/containers/ProjectsContainer.js
+++ b/client/src/containers/ProjectsContainer.js
@@ -1,18 +1,16 @@
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 
-import { currentUserSelector, pathSelector, projectsForCurrentUserSelector } from '../selectors';
+import { currentUserSelector, projectsForCurrentUserSelector } from '../selectors';
 import { openAddProjectModal } from '../actions/entry';
 import Projects from '../components/Projects';
 
 const mapStateToProps = (state) => {
-  const { projectId } = pathSelector(state);
   const { isAdmin } = currentUserSelector(state);
   const projects = projectsForCurrentUserSelector(state);
 
   return {
     items: projects,
-    currentId: projectId,
     isEditable: isAdmin,
   };
 };
diff --git a/client/src/containers/StaticWrapperContainer.js b/client/src/containers/StaticWrapperContainer.js
new file mode 100644
index 00000000..86e9f4ae
--- /dev/null
+++ b/client/src/containers/StaticWrapperContainer.js
@@ -0,0 +1,16 @@
+import { connect } from 'react-redux';
+
+import { pathSelector } from '../selectors';
+import StaticWrapper from '../components/StaticWrapper';
+
+const mapStateToProps = (state) => {
+  const { cardId, boardId, projectId } = pathSelector(state);
+
+  return {
+    cardId,
+    boardId,
+    projectId,
+  };
+};
+
+export default connect(mapStateToProps)(StaticWrapper);
diff --git a/client/src/hooks/use-closable-form.js b/client/src/hooks/use-closable-form.js
index f22a37e2..45ddd0f3 100644
--- a/client/src/hooks/use-closable-form.js
+++ b/client/src/hooks/use-closable-form.js
@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useRef } from 'react';
 
-export default (isOpened, close) => {
+export default (close, isOpened = true) => {
   const isClosable = useRef(null);
 
   const handleFieldBlur = useCallback(() => {
diff --git a/client/src/index.css b/client/src/index.css
index 7dcc43f2..983a73ab 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -5,7 +5,7 @@ body {
 #root {
   display: flex;
   flex-direction: column;
-  height: 100vh;
+  height: 100%;
 }
 
 .react-datepicker {
@@ -100,3 +100,30 @@ body {
   top: 0;
   margin: 9px 0;
 }
+
+::-webkit-scrollbar {
+  height: 10px;
+  width: 10px;
+  -webkit-appearance: none;
+}
+
+::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0.1);
+  border-radius: 0px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.25);
+  border-radius: 5px;
+  cursor: pointer;
+  transition: color 0.2s ease;
+  -webkit-transition: color 0.2s ease;
+}
+
+::-webkit-scrollbar-thumb:window-inactive {
+  background: rgba(0, 0, 0, 0.15);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(128, 135, 139, 0.8);
+}
diff --git a/client/src/lib/custom-ui/components/DragScroller/DragScroller.jsx b/client/src/lib/custom-ui/components/DragScroller/DragScroller.jsx
deleted file mode 100644
index e7bb467e..00000000
--- a/client/src/lib/custom-ui/components/DragScroller/DragScroller.jsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import React, { useCallback, useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
-
-const DragScroller = React.memo(({ children, ...props }) => {
-  const wrapper = useRef(null);
-  const prevPosition = useRef(null);
-
-  const handleMouseDown = useCallback(
-    (event) => {
-      if (event.target !== wrapper.current && !event.target.dataset.dragScroller) {
-        return;
-      }
-
-      prevPosition.current = event.clientX;
-    },
-    [wrapper],
-  );
-
-  const handleWindowMouseMove = useCallback(
-    (event) => {
-      if (!prevPosition.current) {
-        return;
-      }
-
-      event.preventDefault();
-
-      const position = event.clientX;
-
-      wrapper.current.scrollLeft -= -prevPosition.current + position;
-      prevPosition.current = position;
-    },
-    [wrapper, prevPosition],
-  );
-
-  const handleWindowMouseUp = useCallback(() => {
-    prevPosition.current = null;
-  }, [prevPosition]);
-
-  useEffect(() => {
-    window.addEventListener('mouseup', handleWindowMouseUp);
-    window.addEventListener('mousemove', handleWindowMouseMove);
-
-    return () => {
-      window.removeEventListener('mouseup', handleWindowMouseUp);
-      window.removeEventListener('mousemove', handleWindowMouseMove);
-    };
-  }, [handleWindowMouseUp, handleWindowMouseMove]);
-
-  return (
-    /* eslint-disable jsx-a11y/no-static-element-interactions, react/jsx-props-no-spreading */
-    <div {...props} ref={wrapper} onMouseDown={handleMouseDown}>
-      {/* eslint-enable jsx-a11y/no-static-element-interactions, react/jsx-props-no-spreading */}
-      {children}
-    </div>
-  );
-});
-
-DragScroller.propTypes = {
-  children: PropTypes.node.isRequired,
-};
-
-export default DragScroller;
diff --git a/client/src/lib/custom-ui/components/DragScroller/index.js b/client/src/lib/custom-ui/components/DragScroller/index.js
deleted file mode 100644
index 6b07d375..00000000
--- a/client/src/lib/custom-ui/components/DragScroller/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import DragScroller from './DragScroller';
-
-export default DragScroller;
diff --git a/client/src/lib/custom-ui/index.css b/client/src/lib/custom-ui/index.css
index 60df7a16..eefe0c9d 100644
--- a/client/src/lib/custom-ui/index.css
+++ b/client/src/lib/custom-ui/index.css
@@ -707,7 +707,7 @@ input::selection {
 
 /* Force Simple Scrollbars */
 
-body ::-webkit-scrollbar {
+/* body ::-webkit-scrollbar {
   -webkit-appearance: none;
   width: 10px;
   height: 10px;
@@ -732,11 +732,11 @@ body ::-webkit-scrollbar-thumb:window-inactive {
 
 body ::-webkit-scrollbar-thumb:hover {
   background: rgba(128, 135, 139, 0.8);
-}
+} */
 
 /* Inverted UI */
 
-body .ui.inverted::-webkit-scrollbar-track {
+/* body .ui.inverted::-webkit-scrollbar-track {
   background: rgba(255, 255, 255, 0.1);
 }
 
@@ -750,7 +750,7 @@ body .ui.inverted::-webkit-scrollbar-thumb:window-inactive {
 
 body .ui.inverted::-webkit-scrollbar-thumb:hover {
   background: rgba(255, 255, 255, 0.35);
-}
+} */
 
 /*******************************
         Global Overrides
diff --git a/client/src/lib/custom-ui/index.js b/client/src/lib/custom-ui/index.js
index c2661513..5c37d2cf 100755
--- a/client/src/lib/custom-ui/index.js
+++ b/client/src/lib/custom-ui/index.js
@@ -2,6 +2,5 @@ import Input from './components/Input';
 import Popup from './components/Popup';
 import Markdown from './components/Markdown';
 import FilePicker from './components/FilePicker';
-import DragScroller from './components/DragScroller';
 
-export { Input, Popup, Markdown, FilePicker, DragScroller };
+export { Input, Popup, Markdown, FilePicker };
diff --git a/client/src/lib/popup/with-popup.jsx b/client/src/lib/popup/with-popup.jsx
index bf6ed730..51a9c4f6 100755
--- a/client/src/lib/popup/with-popup.jsx
+++ b/client/src/lib/popup/with-popup.jsx
@@ -4,7 +4,7 @@ import { Button, Popup as SemanticUIPopup } from 'semantic-ui-react';
 
 import styles from './Popup.module.css';
 
-export default (WrappedComponent) => {
+export default (WrappedComponent, defaultProps) => {
   const Popup = React.memo(({ children, ...props }) => {
     const [isOpened, setIsOpened] = useState(false);
 
@@ -49,11 +49,17 @@ export default (WrappedComponent) => {
         on="click"
         open={isOpened}
         position="bottom left"
+        popperModifiers={{
+          preventOverflow: {
+            boundariesElement: 'window',
+          },
+        }}
         className={styles.wrapper}
         onOpen={handleOpen}
         onClose={handleClose}
         onMouseDown={handleMouseDown}
         onClick={handleClick}
+        {...defaultProps} // eslint-disable-line react/jsx-props-no-spreading
       >
         <Button icon="close" onClick={handleClose} className={styles.closeButton} />
         {/* eslint-disable-next-line react/jsx-props-no-spreading */}
diff --git a/server/api/helpers/update-card.js b/server/api/helpers/update-card.js
index 894299d0..c98f2314 100644
--- a/server/api/helpers/update-card.js
+++ b/server/api/helpers/update-card.js
@@ -53,7 +53,7 @@ module.exports = {
           }
 
           if (inputs.toBoard.id === inputs.board.id) {
-            delete inputs.toList; // eslint-disable-line no-param-reassign
+            delete inputs.toBoard; // eslint-disable-line no-param-reassign
           } else {
             values.boardId = inputs.toBoard.id;
           }