diff --git a/package.json b/package.json
index 58c092c..e34ff3e 100644
--- a/package.json
+++ b/package.json
@@ -86,6 +86,7 @@
     "react-dom": "^16.12.0",
     "react-redux": "^7.2.3",
     "react-select": "^1.3.0",
+    "react-responsive": "^9.0.0-beta.5",
     "redux": "^4.0.5",
     "redux-actions": "^2.6.5",
     "redux-logger": "^3.0.6",
diff --git a/src/components/DateRangePicker/DateInput/styles.scss b/src/components/DateRangePicker/DateInput/styles.scss
index 0f01a28..4ac3434 100644
--- a/src/components/DateRangePicker/DateInput/styles.scss
+++ b/src/components/DateRangePicker/DateInput/styles.scss
@@ -18,7 +18,6 @@
 }
 
 .date-range-input {
-  width: 230px;
   margin-top: -12px;
   font-size: $font-size-sm;
 
diff --git a/src/components/DateRangePicker/index.jsx b/src/components/DateRangePicker/index.jsx
index 96b0d27..15e8815 100644
--- a/src/components/DateRangePicker/index.jsx
+++ b/src/components/DateRangePicker/index.jsx
@@ -551,15 +551,15 @@ function DateRangePicker(props) {
     return isBeforeDay(preview.endDate, range.startDate);
   };
 
-  const className = `
-    ${focusedRange[1] === 1 && styles.endDate}
-    ${" "}
-    ${range.startDate && range.endDate && styles.isRange}
-    ${" "}
-    ${isInvalidPreview() && styles.isInvalidPreview}
-    ${" "}
-    ${(errors.startDate || errors.endDate) && styles.isErrorInput}
-  `;
+  const className = `${
+      focusedRange[1] === 1 && styles.endDate || ""
+    } ${
+      range.startDate && range.endDate && styles.isRange || ""
+    } ${
+      isInvalidPreview() && styles.isInvalidPreview || ""
+    } ${
+      (errors.startDate || errors.endDate) && styles.isErrorInput || ""
+    }`;
 
   return (
     <div styleName="dateRangePicker" className={className}>
diff --git a/src/components/DateRangePicker/style.scss b/src/components/DateRangePicker/style.scss
index c0bd6f1..2e8467a 100644
--- a/src/components/DateRangePicker/style.scss
+++ b/src/components/DateRangePicker/style.scss
@@ -57,24 +57,25 @@ $darkGreen: #0AB88A;;
     @include phone {
       .rdrDateRangePickerWrapper {
         position: relative !important;
-        width: 100vw !important;
+        width: 100% !important;
         flex-direction: column-reverse;
         align-items: center;
         justify-content: flex-end;
         padding: 0 20px;
+        border-radius: 0 !important;
 
         .rdrDefinedRangesWrapper {
-          width: 100vw;
-          padding-bottom: 10px;
-
           .rdrStaticRanges {
             display: inline-flex;
             flex-direction: row;
             justify-content: space-around;
+            flex-wrap: wrap;
             margin-top: 10px !important;
-            border-bottom: 1px solid $tc-gray-20;
-            width: 100vw;
-            padding-bottom: 10px;
+            width: calc(100% - 40px);
+
+            .rdrStaticRange {
+              width: 50%;
+            }
 
             .rdrStaticRangeLabel {
               font-size: 14px;
@@ -83,10 +84,6 @@ $darkGreen: #0AB88A;;
             > button:hover .rdrStaticRangeLabel {
               background-color: $green;
             }
-
-            & > *:last-child {
-              display: none;
-            }
           }
         }
 
@@ -137,14 +134,14 @@ $darkGreen: #0AB88A;;
     .rdrDateRangePickerWrapper {
       z-index: 15;
       position: relative;
-      background: $tc-white;
+      // background: $tc-white;
       border-bottom-left-radius: 4px;
       border-bottom-right-radius: 4px;
       overflow: hidden;
       width: 455px;
 
       .rdrDefinedRangesWrapper {
-        width: unset;
+        width: 100%;
         border: none;
 
         .rdrStaticRanges {
@@ -164,6 +161,10 @@ $darkGreen: #0AB88A;;
             background-color: $green;
           }
         }
+
+        .rdrInputRanges {
+          display: none;
+        }
       }
     }
 
@@ -373,7 +374,6 @@ $darkGreen: #0AB88A;;
 }
 
 .dateInputWrapper {
-  display: inline-flex;
   position: relative;
   text-align: left;
 }
@@ -395,26 +395,32 @@ $darkGreen: #0AB88A;;
   z-index: 10;
 
   @include phone {
-    width: 100vw;
+    width: 100%;
     position: fixed;
     top: 0;
     left: 0;
-    right: 0;
+    right: 20px;
     bottom: 0;
     z-index: 15;
-    padding: 65px 0 0;
+    padding: 187px 0 0;
     border: 0;
     border-radius: 0;
-  }
+    background: rgba(#2A2A2A, 0.6);
 
-  .calendar-footer {
-    width: 100%;
+    @include down(320px) {
+      padding: 40px 0 0;
+    }
 
-    @include phone {
-      padding: 0 20px;
+    .calendar-footer {
+      margin: 0 20px;
+      padding: 20px 0;
     }
   }
 
+  .calendar-footer {
+    background: $tc-white;
+  }
+
   .calendar-button {
     @include roboto-bold;
 
@@ -439,20 +445,18 @@ $darkGreen: #0AB88A;;
   }
 }
 
-.endDate {
+@include tablet {
   .calendar-container,
   .calendar-inner-container {
-    left: 0;
+    right: 0;
   }
 
   :global {
     .rdrDateRangePickerWrapper {
-      @include tablet {
-        .calendar-container,
-        .calendar-inner-container {
-          right: auto;
-          left: 62px;
-        }
+      .calendar-container,
+      .calendar-inner-container {
+        right: 62px;
+        left: auto;
       }
     }
   }
diff --git a/src/components/Pagination/index.jsx b/src/components/Pagination/index.jsx
index ee625ef..503899f 100644
--- a/src/components/Pagination/index.jsx
+++ b/src/components/Pagination/index.jsx
@@ -105,14 +105,14 @@ const Pagination = ({ length, pageIndex, pageSize, onChange }) => {
           onChange={onChangePageSize}
           size="xs"
         />
+        <span styleName="label">per page</span>
       </div>
       <ul styleName="pages">
         <li styleName={`page previous ${pageIndex === 0 ? "hidden" : ""}`}>
           <button onClick={previous}>
             <span styleName="arrow">
               <IconArrow />
-            </span>{" "}
-            PREVIOUS
+            </span>
           </button>
         </li>
         {displayPages.map((p) => (
@@ -132,7 +132,6 @@ const Pagination = ({ length, pageIndex, pageSize, onChange }) => {
           }`}
         >
           <button onClick={next}>
-            NEXT{" "}
             <span styleName="arrow">
               <IconArrow />
             </span>
diff --git a/src/components/Pagination/styles.scss b/src/components/Pagination/styles.scss
index 0e4f979..826fc7b 100644
--- a/src/components/Pagination/styles.scss
+++ b/src/components/Pagination/styles.scss
@@ -5,15 +5,60 @@
   display: flex;
   align-items: center;
   justify-content: center;
+
+  @include down(1024px) {
+    .per-page {
+      width: 60px;
+
+      :global {
+        .Select-arrow-zone {
+          padding: 0 8px !important;
+        }
+
+        .Select ~ img {
+          right: 8px;
+        }
+      }
+
+      .label {
+        display: none;
+      }
+    }
+
+    .pages {
+      margin: 0;
+
+      .page.previous > button,
+      .page.next > button {
+        width: 30px;
+        padding: 0;
+
+        &::before,
+        &::after {
+          content: '';
+        }
+      }
+    }
+  }
+
+  @include down($mfe-screen-xs) {
+    .pages {
+      flex: auto;
+      margin: 0;
+      justify-content: flex-end;
+    }
+  }
 }
 
 .per-page {
-  width: 128px;
+  display: flex;
+  align-items: center;
+  width: 144px;
 
-  :global {
-    .Select-value-label::after {
-      content: ' per page';
-    }
+  .label {
+    white-space: nowrap;
+    margin-left: 9px;
+    font-size: $font-size-sm;
   }
 }
 
@@ -65,18 +110,22 @@
   }
 
   &.previous {
+    > button::after {
+      content: 'PREVIOUS ';
+    }
+
     .arrow {
       transform: rotate(90deg) scale(0.75);
     }
   }
 
   &.next {
+    > button::before {
+      content: ' NEXT';
+    }
+
     .arrow {
       transform: rotate(-90deg) scale(0.75);
     }
   }
 }
-
-
-
-
diff --git a/src/components/Panel/styles.scss b/src/components/Panel/styles.scss
index db6712b..c1837ab 100644
--- a/src/components/Panel/styles.scss
+++ b/src/components/Panel/styles.scss
@@ -7,6 +7,21 @@ $panel-padding-y: 16px;
 .panel {
   background: $white;
   border-radius: $border-radius-lg;
+
+  @include down($mfe-screen-xs) {
+    padding: 0;
+    border-radius: 0;
+
+    .panel-header,
+    .panel-footer {
+      padding: 10px 20px;
+      border-radius: 0;
+    }
+
+    .panel-body {
+      padding: 0;
+    }
+  }
 }
 
 .panel-header {
diff --git a/src/components/challenge-listing/ChallengeLoading/styles.module.scss b/src/components/challenge-listing/ChallengeLoading/styles.module.scss
index f0b4ed9..aa30816 100644
--- a/src/components/challenge-listing/ChallengeLoading/styles.module.scss
+++ b/src/components/challenge-listing/ChallengeLoading/styles.module.scss
@@ -1,4 +1,5 @@
 @import "~styles/mixins";
+@import "~styles/variables";
 
 @keyframes placeholderAnim {
   0% {
@@ -81,4 +82,19 @@
     height: 42px;
     width: 40px;
   }
+
+  @include down($mfe-screen-sm) {
+    .title {
+      width: 50%;
+      max-width: 100px;
+    }
+    .info {
+      width: 100%;
+      max-width: 200px;
+    }
+  }
+
+  @include down($mfe-screen-xs) {
+    margin: 0;
+  }
 }
diff --git a/src/containers/Challenges/Listing/ChallengeItem/Prize/index.jsx b/src/containers/Challenges/Listing/ChallengeItem/Prize/index.jsx
index 66ae139..11bb944 100644
--- a/src/containers/Challenges/Listing/ChallengeItem/Prize/index.jsx
+++ b/src/containers/Challenges/Listing/ChallengeItem/Prize/index.jsx
@@ -5,7 +5,7 @@ import * as utils from "../../../../../utils";
 import "./styles.scss";
 
 const Prize = ({ totalPrizes, currencySymbol }) => (
-  <div>
+  <div styleName="prize">
     <span styleName="text">Purse</span>
     <span styleName="value">
       {utils.formatMoneyValue(totalPrizes, currencySymbol)}
diff --git a/src/containers/Challenges/Listing/ChallengeItem/Prize/styles.scss b/src/containers/Challenges/Listing/ChallengeItem/Prize/styles.scss
index b558dd7..4671530 100644
--- a/src/containers/Challenges/Listing/ChallengeItem/Prize/styles.scss
+++ b/src/containers/Challenges/Listing/ChallengeItem/Prize/styles.scss
@@ -1,6 +1,20 @@
 @import "styles/variables";
 @import "styles/mixins";
 
+.prize {
+  @include down($mfe-screen-xs) {
+    display: inline-flex;
+    flex-direction: row-reverse;
+    align-items: center;
+
+    .value {
+      margin-right: 10px;
+      font-size: 21px;
+      line-height: 25px;
+    }
+  }
+}
+
 .text,
 .value {
   display: block;
diff --git a/src/containers/Challenges/Listing/ChallengeItem/Tags/index.jsx b/src/containers/Challenges/Listing/ChallengeItem/Tags/index.jsx
index 2dca982..8bd719e 100644
--- a/src/containers/Challenges/Listing/ChallengeItem/Tags/index.jsx
+++ b/src/containers/Challenges/Listing/ChallengeItem/Tags/index.jsx
@@ -1,21 +1,46 @@
-import React, { useState } from "react";
+import React, { useState, useMemo } from "react";
 import PT from "prop-types";
 import Tag from "../../../../../components/Tag";
 import * as util from "../../../../../utils/tag";
+import { useTargetSize } from "../../../../../utils/hooks/useTargetSize";
 
 import "./styles.scss";
 
 const Tags = ({ tags, onClickTag, tooltip }) => {
-  const n = util.calculateNumberOfVisibleTags(tags);
+  const Tooltip = tooltip;
+
+  const [size, ref] = useTargetSize();
+
+  const n = useMemo(() => {
+    const tagArray = [...tags];
+    let tagsWidth = util.measureText(tagArray);
+
+    if (!size) {
+      return 0;
+    }
+
+    const maxWidth = Math.min(260, size.width);
+    if (tagsWidth < maxWidth) {
+      return tagArray.length;
+    }
+
+    const widthOfMoreTag = 40;
+    while(tagsWidth > maxWidth - widthOfMoreTag) {
+      tagArray.pop();
+      tagsWidth = util.measureText(tagArray);
+    }
+
+    return tagArray.length;
+  }, [tags, size]);
+
   const more = n < tags.length ? tags.length - n : 0;
+
   const [collapsed, setCollapsed] = useState(more > 0);
   const visibleTags = collapsed ? tags.slice(0, n) : tags;
   const invisibleTags = collapsed ? tags.slice(n) : [];
 
-  const Tooltip = tooltip;
-
   return (
-    <div styleName="tags">
+    <div styleName="tags" ref={ref}>
       {visibleTags.map((tag) => (
         <Tag tag={tag} key={tag} onClick={onClickTag} />
       ))}
diff --git a/src/containers/Challenges/Listing/ChallengeItem/Tags/styles.scss b/src/containers/Challenges/Listing/ChallengeItem/Tags/styles.scss
index 052530f..7664d85 100644
--- a/src/containers/Challenges/Listing/ChallengeItem/Tags/styles.scss
+++ b/src/containers/Challenges/Listing/ChallengeItem/Tags/styles.scss
@@ -1,9 +1,15 @@
 @import "styles/variables";
 
 .tags {
+  margin-top: -5px;
+  min-width: 1px;
+
   > * {
-    margin-right: 4px;
-    margin-bottom: 4px;
+    margin-top: 5px;
+  }
+
+  > *:not(:last-child) {
+    margin-right: 5px;
   }
 }
 
diff --git a/src/containers/Challenges/Listing/ChallengeItem/index.jsx b/src/containers/Challenges/Listing/ChallengeItem/index.jsx
index 1fef4cd..1e4acdc 100644
--- a/src/containers/Challenges/Listing/ChallengeItem/index.jsx
+++ b/src/containers/Challenges/Listing/ChallengeItem/index.jsx
@@ -32,6 +32,13 @@ const ChallengeItem = ({ challenge, onClickTag, onClickTrack, isLoggedIn }) => {
     submissionLink += "?tab=submissions";
   }
 
+  const challengeName = utils.toBreakableWords(
+    challenge.name,
+    w => w.length > 20
+      ? `<span style="word-break: break-all">${w}</span>`
+      : w,
+  );
+
   return (
     <div styleName="challenge-item">
       <div styleName="track">
@@ -46,7 +53,7 @@ const ChallengeItem = ({ challenge, onClickTag, onClickTrack, isLoggedIn }) => {
         <div styleName="name-container">
           <h6 styleName="name">
             <Link to={`${CHALLENGES_URL}/${challenge.id}`}>
-              {challenge.name}
+              <span dangerouslySetInnerHTML={{__html: challengeName}} />
             </Link>
           </h6>
           <PhaseEndDate
diff --git a/src/containers/Challenges/Listing/ChallengeItem/styles.scss b/src/containers/Challenges/Listing/ChallengeItem/styles.scss
index 8039ea4..4b9eb35 100644
--- a/src/containers/Challenges/Listing/ChallengeItem/styles.scss
+++ b/src/containers/Challenges/Listing/ChallengeItem/styles.scss
@@ -1,13 +1,80 @@
 @import "styles/variables";
+@import "styles/mixins";
 
 .challenge-item {
   display: flex;
-  padding: 16px;
+  padding: 16px 0 16px 16px;
   border-top: 1px solid #E9E9E9;
 
   &:last-child {
     border-bottom: 1px solid #E9E9E9;
   }
+
+  @include down($mfe-screen-sm) {
+    .info {
+      .name-container {
+        padding-right: 60px;
+      }
+
+      .tags {
+        max-width: none;
+        min-width: 0;
+        max-width: 100%;
+      }
+
+      .nums {
+        width: 0;
+        flex: none;
+
+        > * {
+          margin: 0 15px;
+        }
+      }
+    }
+
+    .prize {
+      align-self: flex-start;
+      padding-top: 5px;
+    }
+  }
+
+  @include down($mfe-screen-xs) {
+    position: relative;
+    flex-wrap: wrap;
+    padding: 20px 0 20px 68px;
+
+    .track {
+      position: absolute;
+      left: 15px;
+      top: 20px;
+    }
+
+    .info {
+      width: 100%;
+
+      .name-container {
+        padding-right: 20px;
+
+        .name {
+          line-height: 20px;
+        }
+      }
+
+      .tags {
+        max-width: none;
+        min-width: 0;
+      }
+
+      .name-container,
+      .tags {
+        margin-bottom: 10px;
+      }
+
+      .nums {
+        display: none;
+      }
+    }
+  }
 }
 
 .track {
@@ -39,7 +106,7 @@
     min-width: calc(50% - 84px);
     flex: 1 1 auto;
 
-    @media (min-width: $screen-xxl + 1px) {
+    @media (min-width: ($screen-xxl + 1px)) {
       min-width: 294px;
       max-width: 25%;
     }
diff --git a/src/containers/Challenges/Listing/index.jsx b/src/containers/Challenges/Listing/index.jsx
index bfc1318..75093b9 100644
--- a/src/containers/Challenges/Listing/index.jsx
+++ b/src/containers/Challenges/Listing/index.jsx
@@ -14,6 +14,8 @@ import * as utils from "../../../utils";
 
 import * as constants from "../../../constants";
 import IconSearch from "../../../assets/icons/search.svg";
+import Button from "../../../components/Button";
+
 import "./styles.scss";
 
 const Listing = ({
@@ -47,6 +49,11 @@ const Listing = ({
     updateFilter(filterChange);
   };
 
+  const onShowSidebar = () => {
+    const sidebarEl = document.getElementById('sidebar-id');
+    sidebarEl.classList.add('show');
+  };
+
   return (
     <Panel>
       <Panel.Header>
@@ -111,11 +118,13 @@ const Listing = ({
               }}
             />
           </div>
+          <div styleName="filter-button">
+            <Button onClick={onShowSidebar}>FILTER</Button>
+          </div>
         </div>
       </Panel.Header>
-      {loadingChallenges ? (
-        _.times(3, () => <ChallengeLoading />)
-      ) : challenges.length ? (
+      {loadingChallenges && (_.times(3, () => <ChallengeLoading />))}
+      {!loadingChallenges && (challenges.length ? (
         <Panel.Body>
           {challenges.map((challenge, index) => (
             <div
@@ -142,24 +151,28 @@ const Listing = ({
               />
             </div>
           ))}
-          <div styleName="pagination">
-            <Pagination
-              length={total}
-              pageSize={perPage}
-              pageIndex={utils.pagination.pageToPageIndex(page)}
-              onChange={(event) => {
-                const filterChange = {
-                  page: utils.pagination.pageIndexToPage(event.pageIndex),
-                  perPage: event.pageSize,
-                };
-                updateFilter(filterChange);
-              }}
-            />
-          </div>
         </Panel.Body>
       ) : (
         <ChallengeError />
-      )}
+      ))}
+      <Panel.Body>
+        <div styleName="pagination" style={{
+          display: challenges.length === 0 || loadingChallenges ? 'none' : ''
+        }}>
+          <Pagination
+            length={total}
+            pageSize={perPage}
+            pageIndex={utils.pagination.pageToPageIndex(page)}
+            onChange={(event) => {
+              const filterChange = {
+                page: utils.pagination.pageIndexToPage(event.pageIndex),
+                perPage: event.pageSize,
+              };
+              updateFilter(filterChange);
+            }}
+          />
+        </div>
+      </Panel.Body>
     </Panel>
   );
 };
diff --git a/src/containers/Challenges/Listing/styles.scss b/src/containers/Challenges/Listing/styles.scss
index 331471b..f7cf843 100644
--- a/src/containers/Challenges/Listing/styles.scss
+++ b/src/containers/Challenges/Listing/styles.scss
@@ -11,7 +11,46 @@
 
 .header-container {
   display: flex;
-  align-items: top;
+  align-items: flex-start;
+
+  @include down($mfe-screen-xs) {
+    flex-wrap: wrap;
+
+    .separator {
+      display: none;
+    }
+
+    .input-group {
+      width: 100%;
+      max-width: none;
+      flex: auto;
+      margin: 0 0 20px 0;
+    }
+
+    .sort-by {
+      max-width: 241px;
+    }
+
+    .sort-by,
+    .from-to {
+      flex: 1 1 auto;
+      margin: 0 22px 0 0;
+
+      @include down(375px - 1px) {
+        max-width: calc(100% - 92px);
+      }
+    }
+
+    .filter-button {
+      display: block;
+      margin: 0 0 0 auto;
+
+      button {
+        height: 40px;
+        border-radius: 20px;
+      }
+    }
+  }
 }
 
 .input-group {
@@ -19,13 +58,8 @@
   display: inline-block;
   margin-right: 16px;
   margin-bottom: 17px;
-  width: 38%;
-  min-width: 380px;
-
-  @include xs-to-md {
-    width: 62%;
-    min-width: 230px;
-  }
+  flex: auto;
+  max-width: 380px;
 
   .search-icon {
     position: absolute;
@@ -60,7 +94,8 @@
 }
 
 .from-to {
-  display: inline-block;
+  width: 50%;
+  max-width: 241px;
 }
 
 .sort-by,
@@ -72,6 +107,14 @@
   }
 }
 
+.filter-button {
+  display: none;
+}
+
 .pagination {
   padding: 17px 0 15px;
+
+  @include down($mfe-screen-xs) {
+    padding: 20px;
+  }
 }
diff --git a/src/containers/Challenges/index.jsx b/src/containers/Challenges/index.jsx
index 73833b7..6d8ca6b 100644
--- a/src/containers/Challenges/index.jsx
+++ b/src/containers/Challenges/index.jsx
@@ -12,7 +12,12 @@ import * as constants from "../../constants";
 import { Banner } from "@topcoder/micro-frontends-earn-app";
 
 import * as utils from "../../utils";
+import { useMediaQuery } from 'react-responsive';
+import { useCssVariable } from "../../utils/hooks/useCssVariable";
+import IconArrow from "../../assets/icons/arrow.svg";
+
 import "./styles.scss";
+import { useClickOutside } from "../../utils/hooks/useClickOutside";
 
 const Challenges = ({
   challenges,
@@ -74,20 +79,53 @@ const Challenges = ({
     recommended &&
     recommendedChallenges.length === 0;
 
+  const screenXs = useCssVariable('--mfe-screen-xs', value => parseInt(value));
+  const isScreenXs = useMediaQuery({ maxWidth: screenXs });
+
+  const [menuExpanded, setMenuExpanded] = useState(false);
+  const menuRef = useClickOutside(menuExpanded, (event) => {
+    setMenuExpanded(false);
+  });
+
+  const mobileMenu = (
+    <div
+      id="menu-id"
+      styleName={`mobile-menu ${menuExpanded ? '' : 'hidden'}`}
+    />
+  );
+
   return (
     <div styleName="page">
       <Banner />
-      <h1 styleName="title">
-        <span>CHALLENGES</span>
-        {/* <span styleName="view-mode">
-          <button styleName="button-icon active">
-            <IconListView />
-          </button>
-          <button styleName="button-icon">
-            <IconCardView />
-          </button>
-        </span> */}
-      </h1>
+
+      <div ref={menuRef}>
+        <div
+          styleName={`title ${isScreenXs && menuExpanded ? 'menu-title' : ''}`}
+          role="button"
+          tabIndex={-1}
+          onClick={() => isScreenXs && setMenuExpanded(!menuExpanded)}
+        >
+          <span>{isScreenXs && menuExpanded ? 'EARN' : 'CHALLENGES'}</span>
+
+          {isScreenXs ? (
+            <span styleName={`arrow-down ${menuExpanded ? 'up' : ''}`}>
+              <IconArrow />
+            </span>
+          ) : (
+            <span styleName="view-mode">
+              {/*<button styleName="button-icon active">
+                <IconListView />
+              </button>
+              <button styleName="button-icon">
+                <IconCardView />
+              </button>*/}
+            </span>
+          )}
+        </div>
+
+        {mobileMenu}
+      </div>
+
       {initialized ? (
         <>
           {/*noRecommendedChallenges && <ChallengeRecommendedError />*/}
diff --git a/src/containers/Challenges/styles.scss b/src/containers/Challenges/styles.scss
index 13c7fde..d3bca64 100644
--- a/src/containers/Challenges/styles.scss
+++ b/src/containers/Challenges/styles.scss
@@ -3,11 +3,51 @@
 
 .page {
   padding: $page-padding-y $page-padding-x 105px;
+
+  @include down($mfe-screen-xs) {
+    padding: 10px 0;
+    background-color: $tc-white;
+
+    :global(.banner) {
+      margin: 0 20px;
+      width: calc(100% - 40px);
+    }
+  }
 }
 
 .title {
   @include barlow-condensed-medium;
   margin-bottom: 22px;
+  font-size: 34px;
+  line-height: 1;
+
+  @include down($mfe-screen-xs) {
+    font-size: 25px;
+    line-height: 27px;
+    margin: 10px 0 0;
+    padding: 0 20px 10px 20px;
+    background-color: $tc-white;
+    position: relative;
+    z-index: 11;
+    cursor: pointer;
+
+    &.menu-title {
+      text-align: center;
+    }
+  }
+}
+
+.mobile-menu {
+  position: absolute;
+  width: 100%;
+  background-color: $tc-white;
+  border-top: 1px solid $gray3;
+  box-shadow: 0 10px 20px 0 rgba($tc-black, 0.25);
+  z-index: 10;
+
+  &.hidden {
+    display: none;
+  }
 }
 
 .button-icon {
@@ -36,3 +76,12 @@
     margin: 0 2px;
   }
 }
+
+.arrow-down {
+  float: right;
+  vertical-align: middle;
+
+  &.up {
+    transform: rotate(180deg);
+  }
+}
diff --git a/src/containers/Filter/ChallengeFilter/styles.scss b/src/containers/Filter/ChallengeFilter/styles.scss
index fc29ced..ecf1a3d 100644
--- a/src/containers/Filter/ChallengeFilter/styles.scss
+++ b/src/containers/Filter/ChallengeFilter/styles.scss
@@ -96,6 +96,10 @@ $filter-padding-y: 3 * $base-unit;
   position: relative;
   margin-top: -12px;
 
+  :global(.textInputContainer) {
+    width: 100%;
+  }
+
   input {
     padding-right: 36px !important;
   }
diff --git a/src/routers/challenge-list/index.jsx b/src/routers/challenge-list/index.jsx
index 6adcfb0..dc86dd4 100644
--- a/src/routers/challenge-list/index.jsx
+++ b/src/routers/challenge-list/index.jsx
@@ -11,6 +11,8 @@ import * as utils from "../../utils";
 import store from "../../store";
 import { initialChallengeFilter } from "../../reducers/filter";
 import _ from "lodash";
+import { useMediaQuery } from 'react-responsive';
+import { useCssVariable } from "../../utils/hooks/useCssVariable";
 
 import "react-date-range/dist/theme/default.css";
 import "react-date-range/dist/styles.css";
@@ -20,13 +22,6 @@ const App = () => {
   const location = useLocation();
   const previousControllerRef = useRef();
 
-  useLayoutEffect(() => {
-    showMenu(true);
-    return () => {
-      showMenu(false);
-    };
-  }, []);
-
   useEffect(() => {
     if (!location.search) {
       const currentFilter = store.getState().filter.challenge;
@@ -72,18 +67,42 @@ const App = () => {
     store.dispatch(actions.challenges.getChallengesDone(updatedFilter, signal));
   }, [location]);
 
+  const onHideSidebar = () => {
+    const sidebarEl = document.getElementById('sidebar-id');
+    sidebarEl.classList.remove('show');
+  }
+
+  const screenXs = useCssVariable('--mfe-screen-xs', value => parseInt(value));
+  const isScreenXs = useMediaQuery({ maxWidth: screenXs });
+
+  useLayoutEffect(() => {
+
+      showMenu(true);
+      return () => {
+        showMenu(false);
+      };
+
+  }, [isScreenXs]);
+
   return (
     <>
       <div className="layout">
-        <aside className="sidebar">
+        <aside className="sidebar" id="sidebar-id">
           <div className="sidebar-content">
-            <div id="menu-id" />
+            {!isScreenXs && <div id="menu-id" />}
             <hr />
             <Filter />
           </div>
           <div className="sidebar-footer">
             <FeedbackButton />
           </div>
+          <button
+            type="button"
+            className="close-button"
+            onClick={onHideSidebar}
+          >
+            &times;
+          </button>
         </aside>
         <div className="content">
           <Challenges />
diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss
index 8cf3854..b3c9286 100644
--- a/src/styles/_utils.scss
+++ b/src/styles/_utils.scss
@@ -1,5 +1,6 @@
 :global {
   .layout {
+    position: relative;
     display: flex;
 
     .sidebar {
@@ -17,6 +18,7 @@
           border-color: $tc-gray-05;
           opacity: 0.5;
 
+          &:first-child,
           &:last-child {
             display: none;
           }
@@ -24,14 +26,62 @@
       }
 
       .sidebar-footer {
-        margin: 0 auto;
+        margin: 0 20px;
         margin-bottom: 125px;
       }
+
+      &.show {
+        display: block;
+      }
     }
 
     .content {
       flex: 1 1 auto;
     }
+
+    .close-button {
+      display: none;
+    }
+
+    @include down($mfe-screen-xs) {
+      .sidebar {
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        display: none;
+        width: 100%;
+        margin-top: 90px;
+        background-color: $tc-white;
+        z-index: 20;
+
+        &::before {
+          content: '';
+          position: absolute;
+          top: calc(-90px - var(--navbarHeight, 60px));
+          left: 0;
+          right: 0;
+          bottom: 100%;
+          background-color: rgba($tc-gray-90, 0.6);
+          z-index: 19;
+        }
+      }
+
+      .close-button {
+        display: block;
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 32px;
+        height: 32px;
+        font-size: 32px;
+        padding: 0;
+        color: inherit;
+        appearance: none;
+        background: none;
+        border: 0;
+      }
+    }
   }
 
   #tooltips-container-id {
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 5ca32ec..719c04b 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -29,6 +29,10 @@
   }
 }
 
+:root{
+  --mfe-screen-xs: #{$mfe-screen-xs};
+}
+
 #tooltips-container-id {
   position: fixed;
   top: 0;
@@ -36,4 +40,4 @@
   width: 0;
   height: 0;
   z-index: 1001;
-} // end :global
+}
diff --git a/src/styles/mixins/_media.scss b/src/styles/mixins/_media.scss
index 028c8dc..3d54b01 100644
--- a/src/styles/mixins/_media.scss
+++ b/src/styles/mixins/_media.scss
@@ -97,3 +97,22 @@ $screen-lg: 1280px !default;
     @content;
   }
 }
+
+// mfe
+
+$mfe-screen-xs: 767px;
+$mfe-screen-sm: 1080px;
+$mfe-screen-lg: 1280px;
+$mfe-screen-xl: 1366px;
+
+@mixin up($screen-width) {
+  @media (min-width: $screen-width) {
+    @content;
+  }
+}
+
+@mixin down($screen-width) {
+  @media (max-width: $screen-width) {
+    @content;
+  }
+}
diff --git a/src/utils/hooks/useClickOutside.js b/src/utils/hooks/useClickOutside.js
new file mode 100644
index 0000000..2d190d9
--- /dev/null
+++ b/src/utils/hooks/useClickOutside.js
@@ -0,0 +1,35 @@
+import React from 'react';
+
+export const useClickOutside = (open, onClickOutside) => {
+  const ref = React.useRef(null);
+  const onClickOutsideRef = React.useRef(onClickOutside);
+
+  React.useLayoutEffect(() => {
+    onClickOutsideRef.current = onClickOutside;
+  }); // no dependecies
+
+  const handleClickOutside = React.useCallback((event) => {
+    let inside;
+    if (event.composedPath) {
+      inside = event.composedPath().indexOf(ref.current) !== -1;
+    } else {
+      inside = !document.documentElement.contains(event.target)
+        || ref.current.contains(event.target);
+    }
+
+    if (!inside) {
+      onClickOutsideRef.current(event);
+    }
+  }, []);
+
+  React.useEffect(() => {
+    if (open) {
+      document.addEventListener('click', handleClickOutside);
+      return () => {
+        document.removeEventListener('click', handleClickOutside);
+      };
+    }
+  }, [open, handleClickOutside]);
+
+  return ref;
+};
diff --git a/src/utils/hooks/useCssVariable.js b/src/utils/hooks/useCssVariable.js
new file mode 100644
index 0000000..82a357f
--- /dev/null
+++ b/src/utils/hooks/useCssVariable.js
@@ -0,0 +1,13 @@
+import React, { useMemo } from "react";
+
+export const useCssVariable = (name, transformFunc) => {
+  const value = useMemo(() => {
+    const htmlElement = document.getElementsByTagName('html').item(0);
+    const style = getComputedStyle(htmlElement)
+    const val = style.getPropertyValue(name);
+
+    return transformFunc ? transformFunc(val) : val;
+  }, [name, transformFunc]);
+
+  return value;
+};
diff --git a/src/utils/hooks/useTargetSize.js b/src/utils/hooks/useTargetSize.js
new file mode 100644
index 0000000..250b6cb
--- /dev/null
+++ b/src/utils/hooks/useTargetSize.js
@@ -0,0 +1,33 @@
+import React from "react";
+
+export const useTargetSize = () => {
+  const [size, setSize] = React.useState();
+  const ref = React.useRef();
+
+  React.useLayoutEffect(() => {
+    setSize(ref.current.getBoundingClientRect());
+  }, []);
+
+  React.useLayoutEffect(() => {
+    const targetNode = ref.current;
+    const resizeObserver = new ResizeObserver(entries => {
+      for (const entry of entries) {
+        if (entry.contentBoxSize) {
+          const contentBoxSize = Array.isArray(entry.contentBoxSize)
+            ? entry.contentBoxSize[0]
+            : entry.contentBoxSize;
+          setSize({
+            width: Math.floor(contentBoxSize.inlineSize),
+          });
+        }
+      }
+    })
+    resizeObserver.observe(targetNode);
+
+    return () => {
+      resizeObserver.unobserve(targetNode)
+    };
+  }, []);
+
+  return [size, ref];
+}
diff --git a/src/utils/index.js b/src/utils/index.js
index ada0b97..f9e785d 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -179,3 +179,11 @@ export function triggerDownload(fileName, blob) {
   link.click();
   link.parentNode.removeChild(link);
 }
+
+export function toBreakableWords(str, breakFunc) {
+  return str.split(' ').map(hyphenWords => {
+    return hyphenWords.split('-').map(word => {
+      return breakFunc(word);
+    }).join('-');
+  }).join(' ');
+}
diff --git a/src/utils/tag.js b/src/utils/tag.js
index 2b4418a..b0ea90d 100644
--- a/src/utils/tag.js
+++ b/src/utils/tag.js
@@ -1,15 +1,14 @@
-const MAX_LEN = 20;
+const canvas = document.createElement('canvas');
+const context = canvas.getContext('2d');
+context.font = 'normal 12px Roboto';
 
-export function calculateNumberOfVisibleTags(tags) {
-  const tagsString = tags.reduce((s, tag) => s.concat(tag), "");
+export function measureText(tags) {
+  let text = tags.join();
+  const metrics = context.measureText(text);
 
-  let n = tags.length;
-  if (tagsString.length > MAX_LEN) {
-    let ss = "";
-    for (n = 0; n < tags.length && ss.length < MAX_LEN; n += 1) {
-      ss = ss.concat(tags[n]);
-    }
-  }
-
-  return n;
+  // tag's:
+  // - padding-x: '5px 4px'
+  // - border-width: 1px
+  // - margin-right: 5px
+  return metrics.width + tags.length * 16 - 5;
 }