diff --git a/sass/pages/faq-page.scss b/sass/pages/faq-page.scss
index 327c1795..48c49548 100644
--- a/sass/pages/faq-page.scss
+++ b/sass/pages/faq-page.scss
@@ -5,6 +5,9 @@ padding-top: 0;
 }
 
 .faq-page-list {
+  a {
+    text-decoration: none;
+  }
   &__title {
     color: var(--black-white);
     margin-bottom: 20rem;
@@ -13,6 +16,9 @@ padding-top: 0;
 
     }
   }
+  &__table-title {
+    color: var(--black-white);
+  }
 &__row {
   display: flex;
   gap: 10rem;
diff --git a/static/images/faq/hero_image.png b/static/images/faq/hero_image.png
new file mode 100644
index 00000000..d87ea04d
Binary files /dev/null and b/static/images/faq/hero_image.png differ
diff --git a/templates/base.html b/templates/base.html
index f08a295d..377c375d 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -117,11 +117,57 @@
 
     <main class="main">
         {% if page.taxonomies and page.taxonomies.faq %}{# Show FAQ breadcrumbs #}
-        F.A.Q.
-        {% set categories = get_taxonomy(kind='faq') | get(key="items") %}
-        {% for item in categories %}
-        • <a href="{{ get_taxonomy_url(kind="faq", name=item.name) }}">{{ item.name }}</a>
-        {% endfor %}
+        <section class="hero-sub" style="background-image: url(/faq/hero_image.png)" >
+            <div class="container hero-sub__container">
+                <nav class="bred-crum">
+                    <ul class="bred-crum__row">
+                        <li class="bred-crum__item">
+                            <a class="nav-bred bred-crum__link" href="/">Home</a>
+                        </li>
+                        <li class="bred-crum__item">
+                    <span class="nav-bred">
+                        >
+                    </span>
+                        </li>
+                        <li class="bred-crum__item">
+                            <a class="nav-bred bred-crum__link bred-crum--active"
+                               href="/faq">Faq</a>
+                        </li>
+                    </ul>
+                </nav>
+                <div class="hero-sub__content">
+                    <h1 class="h1 hero-sub__title">
+                        Faq
+                    </h1>
+
+
+                </div>
+            </div>
+        </section>
+        <section class="search">
+            <div class="container search__container">
+                <label class="search__label" for="inpSearch">
+                    {% include 'ui/search.html' %}
+                    <input class="search__input" id="inpSearch" type="text" placeholder="Search">
+                </label>
+            </div>
+        </section>
+        <section class="faq-post">
+            <div class="container faq-page-list__row">
+                {% set categories = get_taxonomy(kind='faq') | get(key="items") %}
+                <h2 class="h2-inter faq-page-list__title">App</h2>
+                <div class="line line--full"></div>
+                <h2 class="h1-inter faq-page-list__title">How to edit or move bookmarks?</h2>
+                <div class="faq-page-list__buttons">
+
+                    {% for item in categories %}
+                    <a class="button button--line-min" href="{{ get_taxonomy_url(kind="faq", name=item.name) }}">{{ item.name }}</a>
+                    {% endfor %}
+                </div>
+
+
+            </div>
+        </section>
         {% endif %}
         {% block content %}{% endblock %}
     </main>
diff --git a/templates/faq/list.html b/templates/faq/list.html
index fa678323..6495353c 100644
--- a/templates/faq/list.html
+++ b/templates/faq/list.html
@@ -5,13 +5,65 @@
 {% endblock %}
 
 {% block content %}
-  <h1>F.A.Q.</h1>
-  {%- for term in terms -%}
-  <h3><a href="{{term.permalink}}">{{term.name}} questions</a></h3>
-  <ul>
-    {%- for faq_page in term.pages | sort(attribute="extra.order") -%}
-      <li><a href="{{ faq_page.permalink }}">{{ faq_page.title }}</a></li>
+<section class="hero-sub" style="background-image: url(/faq/hero_image.png)" >
+  <div class="container hero-sub__container">
+    <nav class="bred-crum">
+      <ul class="bred-crum__row">
+        <li class="bred-crum__item">
+          <a class="nav-bred bred-crum__link" href="/">Home</a>
+        </li>
+        <li class="bred-crum__item">
+                    <span class="nav-bred">
+                        >
+                    </span>
+        </li>
+        <li class="bred-crum__item">
+          <a class="nav-bred bred-crum__link bred-crum--active"
+             href="/faq">Faq</a>
+        </li>
+      </ul>
+    </nav>
+    <div class="hero-sub__content">
+      <h1 class="h1 hero-sub__title">
+        Faq
+      </h1>
+
+
+    </div>
+  </div>
+</section>
+
+
+
+<section class="search">
+  <div class="container search__container">
+    <label class="search__label" for="inpSearch">
+      {% include 'ui/search.html' %}
+      <input class="search__input" id="inpSearch" type="text" placeholder="Search">
+    </label>
+  </div>
+</section>
+<section class="faq-page-list">
+  <div class="container faq-page-list__row">
+    <h2 class="h2-inter faq-page-list__title">Faq</h2>
+    {%- for term in terms -%}
+
+    <ul class="faq-page-list__table">
+      <li class="faq-page-list__table-item"><a class="h5-boold faq-page-list__table-title" href="{{term.permalink}}">{{term.name}} questions</a></li>
+      {%- for faq_page in term.pages | sort(attribute="extra.order") -%}
+      <li class="faq-page-list__table-item"><a class="h5 faq-page-list__table-link" href="{{ faq_page.permalink }}">{{ faq_page.title }}</a></li>
+      {%- endfor -%}
+    </ul>
     {%- endfor -%}
-  </ul>
-  {%- endfor -%}
+
+  </div>
+</section>
+
+<section class="faq-page-footer">
+  <div class="container faq-page-footer__row">
+    <h2 class="h2-inter faq-page-footer__title">Need more help? Contact us directly:</h2>
+  </div>
+  {% include 'section/social-icon.html' %}
+</section>
+{% include 'section/donate.html' %}
 {% endblock content %}
diff --git a/templates/faq/single.html b/templates/faq/single.html
index 0e295bb3..971cf7f1 100644
--- a/templates/faq/single.html
+++ b/templates/faq/single.html
@@ -5,18 +5,80 @@
 {% endblock %}
 
 {% block content %}
-  F.A.Q.
-  {% set categories = get_taxonomy(kind='faq') | get(key="items") %}
+{% set categories = get_taxonomy(kind='faq') | get(key="items") %}
+<section class="hero-sub" style="background-image: url(/faq/hero_image.png)" >
+  <div class="container hero-sub__container">
+    <nav class="bred-crum">
+      <ul class="bred-crum__row">
+        <li class="bred-crum__item">
+          <a class="nav-bred bred-crum__link" href="/">Home</a>
+        </li>
+        <li class="bred-crum__item">
+                    <span class="nav-bred">
+                        >
+                    </span>
+        </li>
+        <li class="bred-crum__item">
+
+          {% for item in categories %}
+          {% if term.name == item.name %}
+          <a href="/{{ item.name }}"  class="nav-bred bred-crum__link bred-crum--active">{{ item.name }}</a>
+          {% endif %}
+          {% endfor %}
+        </li>
+      </ul>
+    </nav>
+    <div class="hero-sub__content">
+
+      {% for item in categories %}
+      {% if term.name == item.name %}
+      <h1  class="h1 hero-sub__title">{{ item.name }}</h1>
+      {% endif %}
+      {% endfor %}
+
+    </div>
+  </div>
+</section>
+<section class="search">
+  <div class="container search__container">
+    <label class="search__label" for="inpSearch">
+      {% include 'ui/search.html' %}
+      <input class="search__input" id="inpSearch" type="text" placeholder="Search">
+    </label>
+  </div>
+</section>
+<section class="faq-post">
+  <div class="container faq-page-list__row">
+
+
+
+
+    <div class="faq-page-list__buttons">
+
+
   {% for item in categories %}
-    •
+
     {% if term.name == item.name %}
-    <span>{{ item.name }}</span>
+
+
+
     {% else %}
-    <a href="{{ get_taxonomy_url(kind="faq", name=item.name) }}">{{ item.name }}</a>
+
+      <a class="button button--line-min" href="{{ get_taxonomy_url(kind="faq", name=item.name) }}">{{ item.name }}</a>
+
     {% endif %}
   {% endfor %}
-  <h2>{{ term.name }} questions</h2>
-  {%- for faq_page in term.pages | sort(attribute="extra.order") -%}
-  <h3><a href="{{ faq_page.permalink }}">{{ faq_page.title }}</a></h3>
-  {%- endfor -%}
+    </div>
+    <div class="faq-page-list__table">
+      <div class="faq-page-list__table-item">
+        <h3 class="h5-boold faq-page-list__table-title">{{ term.name }} questions</h3>
+      </div>
+      {%- for faq_page in term.pages | sort(attribute="extra.order") -%}
+      <h3 class="faq-page-list__table-item"><a class="h5 faq-page-list__table-link" href="{{ faq_page.permalink }}">{{ faq_page.title }}</a></h3>
+      {%- endfor -%}
+    </div>
+
+
+  </div>
+</section>
 {% endblock %}
diff --git a/yarn.lock b/yarn.lock
new file mode 100644
index 00000000..e69de29b