diff --git a/website/src/css/design3.css b/website/src/css/design3.css
index bc660ebf6e..1f5454449d 100644
--- a/website/src/css/design3.css
+++ b/website/src/css/design3.css
@@ -235,6 +235,8 @@ body {
 
 .hidden {
     display: none !important;
+    visibility: hidden !important;
+    opacity: 0 !important;
 }
 
 img {
@@ -630,4 +632,208 @@ main section .image {
     .page-4 .text-container a {
         max-width: 80vw !important;
     }
+}
+
+/* NavBar */
+header#navbar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    z-index: 10;
+    background: none;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 54px;
+
+    border-bottom: 0.1px solid rgba(170, 170, 170, 0.1);
+}
+
+header#navbar>a.logo {
+    position: absolute;
+    left: 16px;
+    height: 100%;
+    display: flex;
+    align-items: center;
+}
+
+header#navbar>a.logo img {
+    height: 32px;
+    width: auto;
+}
+
+header#navbar nav#menu hr {
+    width: 44px;
+    border: none;
+    height: 0.1px;
+    background: rgb(170, 170, 170);
+    opacity: 0.1;
+}
+
+header#navbar ul {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: 5px;
+    list-style: none;
+}
+
+header#navbar ul a {
+    font-family: "Manrope", "GT-Walsheim", sans-serif;
+    color: white;
+    text-decoration: none;
+    font-size: 16px;
+    font-weight: 500;
+    padding: 8px 0;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    white-space: nowrap;
+}
+
+header#navbar ul a span {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+    line-height: 1rem;
+}
+
+header#navbar ul a>span:first-child {
+    transform: translateY(-1.5px);
+}
+
+header#navbar ul a span svg {
+    fill: #fff;
+    width: 10px;
+    height: auto;
+    transition: all 0.5s ease;
+}
+
+header#navbar nav#menu li.nav-link:hover span svg {
+    transform: rotate(180deg);
+}
+
+header#navbar ul.sub-menu {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.5rem;
+    height: fit-content;
+    position: absolute;
+    background: #0e1637;
+    top: 100%;
+    margin-top: 10px;
+    padding: 16px 0;
+    min-width: 180px;
+    height: fit-content;
+    border-radius: 8px;
+    transition: all .3s ease !important;
+    overflow: auto;
+
+    visibility: hidden;
+    opacity: 0;
+}
+
+header#navbar ul.sub-menu li a {
+    padding: 3px 20px;
+    white-space: nowrap;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
+header#navbar ul.sub-menu li a img {
+    height: 1rem;
+}
+
+header#navbar .nav-link.flag-container ul.sub-menu li a {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    white-space: nowrap;
+}
+
+header#navbar nav#menu,
+header#navbar nav#menu>ul,
+header#navbar nav#menu>ul .nav-link {
+    height: 100%;
+}
+
+header#navbar .nav-link {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+header#navbar .nav-link:hover .sub-menu,
+header#navbar .nav-link:focus-within .sub-menu {
+    visibility: visible;
+    opacity: 1;
+    margin-top: 0;
+}
+
+.flag-container>a {
+    width: 36px;
+    height: 36px;
+    background-color: #1e3970d3;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    color: white;
+    text-decoration: none;
+}
+
+.flag-container>a p {
+    font-size: 14px;
+    font-weight: 500;
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    line-height: 1rem;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+}
+
+.flag-container .sub-menu a div {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.flag-container .sub-menu {
+    top: 100%;
+    right: 0;
+}
+
+header#navbar button.theme-switch-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    background-color: #1e3970d3;
+    border-radius: 4px;
+    border: none;
+}
+
+header#navbar button.theme-switch-btn img {
+    width: 20px;
+    height: auto;
+}
+
+.right-links {
+    position: absolute;
+    right: 16px;
+    display: flex;
+    flex-direction: row-reverse;
+    align-items: center;
+    gap: 8px;
 }
\ No newline at end of file
diff --git a/website/src/img/design_3/logo-light.png b/website/src/img/design_3/logo-light.png
new file mode 100644
index 0000000000..93751c0f90
Binary files /dev/null and b/website/src/img/design_3/logo-light.png differ
diff --git a/website/src/index.html b/website/src/index.html
index c2ba52a876..6ee0d3f0d0 100644
--- a/website/src/index.html
+++ b/website/src/index.html
@@ -6,9 +6,153 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
     <title>Simplex Chat</title>
     <link rel="stylesheet" href="/css/design3.css">
+    <script src="/js/flag-anchor.js"></script>
 </head>
 
 <body>
+    <header id="navbar">
+        <a class="logo" href="/"><img src="/img/design_3/logo-light.png" alt="logo" /></a>
+        {# <a href="/" class="hidden dark:inline-block dark:lg:hidden lg:hidden ltr:mr-auto rtl:ml-auto"><img class="h-[32px]" src="/img/new/logo-symbol-dark.svg" alt="" srcset=""></a> #}
+        
+        <nav id="menu">
+            <ul>
+                <li class="nav-link">
+                    <a href="/{{ '' if lang == 'en' else lang }}">
+                        <span class="nav-link-text">{{ "home" | i18n({}, lang ) | safe }}</span>
+                    </a>                        
+                </li>
+
+                <hr>
+
+                <li class="nav-link">
+                    <a href="javascript:void(0);">
+                        <span class="">{{ "guide" | i18n({}, lang ) | safe }}</span>
+                        <span href="" id="btn-mobile">
+                            <svg viewBox="0 0 10 6" xmlns="http://www.w3.org/2000/svg">
+                                <path fill-rule="evenodd" clip-rule="evenodd" d="M1.50447 0.902966C1.21571 0.627397 0.747525 0.627397 0.458761 0.902966C0.169996 1.17853 0.169996 1.62532 0.458761 1.90089L4.21933 5.48961C4.25543 5.52406 4.29433 5.5542 4.33533 5.58003C4.62234 5.76088 5.01237 5.73074 5.26504 5.48961L9.02561 1.90089C9.31438 1.62532 9.31438 1.17853 9.02561 0.902966C8.73685 0.627397 8.26867 0.627397 7.97991 0.902966L4.74219 3.99273L1.50447 0.902966Z"/>
+                            </svg>
+                        </span>
+                    </a>
+
+                    <ul class="sub-menu">
+                        {% for guide in guide_dropdown.items %}
+                            <li><a href="{{ guide.url | url }}" class="{{ "active" if page.url == guide.url | url else '' }}">{{ guide.title | i18n({}, lang ) | safe }}</a></li>
+                        {% endfor %}
+                    </ul>
+                </li>
+
+                <hr>
+
+                <li class="nav-link">
+                    <a href="javascript:void(0);">
+                        <span class="">{{ "reference" | i18n({}, lang ) | safe }}</span>
+                        <span href="" id="btn-mobile">
+                            <svg viewBox="0 0 10 6" xmlns="http://www.w3.org/2000/svg">
+                                <path fill-rule="evenodd" clip-rule="evenodd" d="M1.50447 0.902966C1.21571 0.627397 0.747525 0.627397 0.458761 0.902966C0.169996 1.17853 0.169996 1.62532 0.458761 1.90089L4.21933 5.48961C4.25543 5.52406 4.29433 5.5542 4.33533 5.58003C4.62234 5.76088 5.01237 5.73074 5.26504 5.48961L9.02561 1.90089C9.31438 1.62532 9.31438 1.17853 9.02561 0.902966C8.73685 0.627397 8.26867 0.627397 7.97991 0.902966L4.74219 3.99273L1.50447 0.902966Z"/>
+                            </svg>
+                        </span>
+                    </a>
+
+                    <ul class="sub-menu">
+                        <li><a href="https://github.com/simplex-chat/simplexmq/blob/stable/protocol/overview-tjr.md"
+                            target="_blank">Whitepaper
+                            <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg>
+                        </a></li>
+                        <li><a href="/privacy">{{ "terms-and-privacy-policy" | i18n({}, lang ) | safe }}</a></li>
+                        <li><a href="https://github.com/simplex-chat/simplexmq/blob/stable/protocol/simplex-messaging.md"
+                            target="_blank">{{ "smp-protocol" | i18n({}, lang ) | safe }}
+                            <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg>
+                        </a></li>
+                        <li><a href="/docs/protocol/simplex-chat.html">{{ "chat-protocol" | i18n({}, lang ) | safe }}</a></li>
+                        <li><a href="/docs/glossary.html">{{ "glossary" | i18n({}, lang ) | safe }}</a></li>
+                        
+                        <hr class=" h-[1px] w-full dark:opacity-[0.1]">
+                        
+                        {% for doc in docs_dropdown.items %}
+                            <li><a href="{{ doc.url | url }}" class="{{ "active" if page.url == doc.url | url else '' }} lg:px-[20px] inline-block whitespace-nowrap">{{ doc.title | i18n({}, lang ) | safe }}</a></li>
+                        {% endfor %}
+
+                        <hr class=" h-[1px] w-full dark:opacity-[0.1]">
+
+                        <li><a href="/docs/translations.html"
+                        >{{ "docs-dropdown-7" | i18n({}, lang ) | safe }}
+                        </a></li>
+                        <li><a href="/docs/android.html"
+                        >{{ "docs-dropdown-2" | i18n({}, lang ) | safe }}
+                        </a></li>
+                        <li><a href="https://github.com/simplex-chat/simplex-chat/blob/stable/apps/simplex-bot-advanced/Main.hs"
+                            target="_blank">{{ "chat-bot-example" | i18n({}, lang ) | safe }}
+                            <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg>
+                        </a></li>
+                        <li><a href="https://github.com/simplex-chat/simplex-chat/tree/stable/packages/simplex-chat-client/typescript"
+                            target="_blank">TypeScript SDK
+                            <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg>
+                        </a></li>
+                        <li><a href="/docs/cli.html">{{ "terminal-cli" | i18n({}, lang ) | safe }}</a></li>
+                        <li><a href="https://github.com/simplex-chat/simplexmq"
+                            target="_blank">SimpleXMQ
+                            <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg>
+                        </a></li>
+                    </ul>
+                </li>
+
+                <hr>
+
+                <li class="nav-link">
+                    <a href="/jobs">
+                        <span class="nav-link-text">{{ "jobs" | i18n({}, lang ) | safe }}</span>
+                    </a>                        
+                </li>
+
+                <hr>
+
+                <li class="nav-link">
+                    <a href="/blog">
+                        <span class="nav-link-text">{{ "blog" | i18n({}, lang ) | safe }}</span>
+                    </a>
+                </li>
+            </ul>
+        </nav>
+
+        <div class="right-links">
+            <div class="nav-link flag-container">
+                <a href="javascript:void(0);">
+                    {% for language in languages.languages %}
+                        {% if language.label == page.url | getlang %}
+                            <p style="text-align:center;">{{ language.label }}</p>
+                        {% endif %}
+                    {% endfor %}
+                </a>
+                
+                <ul class="sub-menu">
+                    {% for language in languages.languages %}
+                        {% if language.enabled %}
+                            <li>
+                                {% if language.flag %}
+                                    <a href="{% completeRoute {url:page.url,lang:language.label} %}" class="flag-anchor">
+                                        <img src="{{ language.flag }}" alt="" srcset="">
+                                        <p>{{ language.name }}</p>
+                                    </a>
+                                {% else %}
+                                    <a href="{% completeRoute {url:page.url,lang:language.label} %}" class="flag-anchor">
+                                        <div style="background-color:{{ language.iconBg }}; color:{{ language.textColor }}; width:21.33px; height:16px">
+                                            <p style="text-align:center; font-size:7px">{{ language.iconText }}</p>
+                                        </div>
+                                        <p>{{ language.name }}</p>
+                                    </a>
+                                {% endif %} 
+                            </li>
+                        {% endif %}
+                    {% endfor %}
+                </ul>
+            </div>
+
+            <button href="#" class="theme-switch-btn">
+                <img src="/img/new/sun.svg"  alt="" srcset="" class="sun">
+                <img src="/img/new/moon.svg" alt="" srcset="" class="moon hidden">
+            </button>
+        </div>
+    </header>
     <div class="screen">
         <section class="page-1 cover">
             <div class="content">