diff --git a/src/frontend/static/frontend/src/components/Base.tsx b/src/frontend/static/frontend/src/components/Base.tsx
index 282066ca..2ffa1855 100644
--- a/src/frontend/static/frontend/src/components/Base.tsx
+++ b/src/frontend/static/frontend/src/components/Base.tsx
@@ -13,6 +13,7 @@ import en from '../locales/en'
 // Common dependencies for all the pages
 import 'fomantic-ui-css/semantic.css'
 import '../css/base.css'
+import '../css/responsive.css'
 
 const messages = { en, es }
 
diff --git a/src/frontend/static/frontend/src/components/MainNavbar.tsx b/src/frontend/static/frontend/src/components/MainNavbar.tsx
index aa48b047..678e304d 100644
--- a/src/frontend/static/frontend/src/components/MainNavbar.tsx
+++ b/src/frontend/static/frontend/src/components/MainNavbar.tsx
@@ -169,160 +169,141 @@ const MainNavbar = (props: MainNavbarProps) => {
     const intl = useIntl()
     // Gets current user context
     const currentUser = useContext(CurrentUserContext)
+    const [menuOpen, setMenuOpen] = useState(false)
 
     const cBioPortalOption = (
         <Dropdown.Item
             text={intl.formatMessage({ id: 'mainNavbar.cbioportal' })}
             icon='cloud'
-            as='a' href={urlCGDSPanel}
+            as='a'
+            href={urlCGDSPanel}
             active={props.activeItem === 'cgds'}
         />
     )
 
-    return (
-        <Menu className='margin-bottom-0' inverted borderless aria-label='Main navigation'>
-            {/* Logo */}
-            <Menu.Item as='a' header href={urlIndex}>
-                <Image size='tiny' src='/static/frontend/img/logo.png' alt={intl.formatMessage({ id: 'mainNavbar.logo.alt' })} />
-            </Menu.Item>
-
-            {/* Loading spinners while user is fetch */}
-            {props.isLoadingUser && (
-                <Menu.Item>
-                    <Menu.Item style={{ padding: '0 1.72rem' }}>
-                        <Loader active inline='centered' />
-                    </Menu.Item>
-                    <Menu.Item style={{ padding: '0 1.72rem' }}>
-                        <Loader active inline='centered' />
-                    </Menu.Item>
-                    <Menu.Item style={{ padding: '0 1.7rem' }}>
-                        <Loader active inline='centered' />
-                    </Menu.Item>
-                    <Menu.Item style={{ padding: '0 1.7rem' }}>
-                        <Loader active inline='centered' />
-                    </Menu.Item>
-                </Menu.Item>
-            )}
-            {/* Analysis menu */}
+    const renderNavbarItems = () => (
+        <>
             {currentUser && !currentUser.is_anonymous && (
                 <>
-                    <Menu.Menu>
-                        <Dropdown item text={intl.formatMessage({ id: 'mainNavbar.analysis' })} className='link item' icon={null} aria-label='Analysis'>
-                            <Dropdown.Menu>
-                                {/* GEM panel */}
-                                <Dropdown.Item
-                                    text={intl.formatMessage({ id: 'mainNavbar.gem' })}
-                                    icon='lab'
-                                    as='a' href={urlPipeline}
-                                    active={props.activeItem === 'pipeline'}
-                                />
-
-                                {/* Survival Analysis panel */}
-                                {/* TODO: discuss with team! Maybe this is the "Stats validation panel in Biomarkers page" */}
-                                {/* <Dropdown.Item
-                                    text='Survival'
-                                    icon='heart'
-                                    as='a' href={urlSurvival}
-                                    active={props.activeItem === 'survival'}
-                                    disabled
-                                /> */}
-
-                                {/* Biomarkers panel */}
-                                <Dropdown.Item
-                                    text={intl.formatMessage({ id: 'mainNavbar.biomarkers' })}
-                                    icon='list layout'
-                                    as='a' href={urlBiomarkers}
-                                    active={props.activeItem === 'biomarkers'}
-                                />
-
-                                {/* Differential Expression panel */}
-                                <Dropdown.Item
-                                    text={intl.formatMessage({ id: 'mainNavbar.differentialExpression' })}
-                                    icon='buromobelexperte'
-                                    as='a' href={urlDifferentialExpression}
-                                    active={props.activeItem === 'differential-expression'}
-                                />
-                            </Dropdown.Menu>
-                        </Dropdown>
-                    </Menu.Menu>
-
-                    {/* Datasets menu */}
-                    <Menu.Menu>
-                        <Dropdown text={intl.formatMessage({ id: 'mainNavbar.myDatasets' })} className='link item' icon={null} aria-label={intl.formatMessage({ id: 'mainNavbar.myDatasets' })}>
-                            <Dropdown.Menu>
-                                {/* User's Datasets panel */}
-                                <Dropdown.Item
-                                    text={intl.formatMessage({ id: 'mainNavbar.myDatasets' })}
-                                    icon='database'
-                                    as='a' href={urlDatasets}
-                                    active={props.activeItem === 'files'}
-                                />
-
-                                {/* cBioPortal Datasets panel */}
-                                {cBioPortalOption}
-                            </Dropdown.Menu>
-                        </Dropdown>
-                    </Menu.Menu>
-
-                    {/* Institutions  */}
-                    <Menu.Menu>
-                        <Menu.Item as='a' href={urlInstitutions} style={{ fontSize: '1rem' }}>
-                            {intl.formatMessage({ id: 'mainNavbar.institutions' })}
-                        </Menu.Item>
-                    </Menu.Menu>
-                </>
-            )}
+                    <Dropdown item text={intl.formatMessage({ id: 'mainNavbar.analysis' })} className='link item' icon={null} aria-label='Analysis'>
+                        <Dropdown.Menu>
+                            <Dropdown.Item
+                                text={intl.formatMessage({ id: 'mainNavbar.gem' })}
+                                icon='lab'
+                                as='a'
+                                href={urlPipeline}
+                                active={props.activeItem === 'pipeline'}
+                            />
 
-            {/* Only admin options */}
-            {currentUser && (currentUser.is_superuser || currentUser.is_institution_admin) && (
-                <Menu.Menu>
-                    <Dropdown text={intl.formatMessage({ id: 'mainNavbar.admin' })} className='link item' icon={null} aria-label='Admin'>
+                            <Dropdown.Item
+                                text={intl.formatMessage({ id: 'mainNavbar.biomarkers' })}
+                                icon='list layout'
+                                as='a'
+                                href={urlBiomarkers}
+                                active={props.activeItem === 'biomarkers'}
+                            />
+
+                            <Dropdown.Item
+                                text={intl.formatMessage({ id: 'mainNavbar.differentialExpression' })}
+                                icon='buromobelexperte'
+                                as='a'
+                                href={urlDifferentialExpression}
+                                active={props.activeItem === 'differential-expression'}
+                            />
+                        </Dropdown.Menu>
+                    </Dropdown>
+
+                    <Dropdown item text={intl.formatMessage({ id: 'mainNavbar.myDatasets' })} className='link item' icon={null} aria-label={intl.formatMessage({ id: 'mainNavbar.myDatasets' })}>
                         <Dropdown.Menu>
-                            {currentUser.is_superuser && (
-                                <>
-                                    {/* User's Datasets panel */}
-                                    <Dropdown.Item
-                                        text={intl.formatMessage({ id: 'mainNavbar.databaseGenes' })}
-                                        icon='dna'
-                                        // as='a' href={null}
-                                        disabled
-                                    />
-                                </>
-                            )}
+                            <Dropdown.Item
+                                text={intl.formatMessage({ id: 'mainNavbar.myDatasets' })}
+                                icon='database'
+                                as='a'
+                                href={urlDatasets}
+                                active={props.activeItem === 'files'}
+                            />
+
+                            {cBioPortalOption}
                         </Dropdown.Menu>
                     </Dropdown>
-                </Menu.Menu>
+
+                    <Menu.Item as='a' href={urlInstitutions} style={{ fontSize: '1rem' }}>
+                        {intl.formatMessage({ id: 'mainNavbar.institutions' })}
+                    </Menu.Item>
+                </>
             )}
 
-            {/* About us */}
-            <Menu.Menu>
-                <Menu.Item as='a' href={urlAboutUs} style={{ fontSize: '1rem' }}>
-                    {intl.formatMessage({ id: 'mainNavbar.aboutUs' })}
-                </Menu.Item>
-            </Menu.Menu>
-
-            <Menu.Menu>
-                <Menu.Item
-                    as='a'
-                    href='/faq'
-                    style={{ fontSize: '1rem' }}
-                    active={props.activeItem === 'faq'}
-                >
-                    {intl.formatMessage({ id: 'mainNavbar.faq' })}
-                </Menu.Item>
-            </Menu.Menu>
+            {currentUser && (currentUser.is_superuser || currentUser.is_institution_admin) && (
+                <Dropdown item text={intl.formatMessage({ id: 'mainNavbar.admin' })} className='link item' icon={null} aria-label='Admin'>
+                    <Dropdown.Menu>
+                        {currentUser.is_superuser && (
+                            <Dropdown.Item
+                                text={intl.formatMessage({ id: 'mainNavbar.databaseGenes' })}
+                                icon='dna'
+                                disabled
+                            />
+                        )}
+                    </Dropdown.Menu>
+                </Dropdown>
+            )}
+
+            <Menu.Item as='a' href={urlAboutUs} style={{ fontSize: '1rem' }}>
+                {intl.formatMessage({ id: 'mainNavbar.aboutUs' })}
+            </Menu.Item>
 
-            <Menu.Menu>
-                <Menu.Item as='a' href={urlOpenSource} style={{ fontSize: '1rem' }}>
-                    {intl.formatMessage({ id: 'mainNavbar.openSource' })}
+            <Menu.Item as='a' href='/faq' style={{ fontSize: '1rem' }} active={props.activeItem === 'faq'}>
+                {intl.formatMessage({ id: 'mainNavbar.faq' })}
+            </Menu.Item>
+
+            <Menu.Item as='a' href={urlOpenSource} style={{ fontSize: '1rem' }}>
+                {intl.formatMessage({ id: 'mainNavbar.openSource' })}
+            </Menu.Item>
+
+            <LogInLogOutPanel currentUser={currentUser} />
+        </>
+    )
+
+    return (
+        <>
+            <Menu className='margin-bottom-0' inverted borderless aria-label='Main navigation'>
+                <Menu.Item as='a' header href={urlIndex}>
+                    <Image size='tiny' src='/static/frontend/img/logo.png' alt={intl.formatMessage({ id: 'mainNavbar.logo.alt' })} />
                 </Menu.Item>
-            </Menu.Menu>
 
-            {/* LogIn/LogOut panel */}
-            <Menu.Menu position='right'>
-                <LogInLogOutPanel currentUser={currentUser} />
-            </Menu.Menu>
-        </Menu>
+                <Menu.Menu position='right' className='mobile-navbar-toggle'>
+                    <Menu.Item onClick={() => setMenuOpen(!menuOpen)} aria-label='Open menu'>
+                        <Icon name={menuOpen ? 'close' : 'bars'} />
+                    </Menu.Item>
+                </Menu.Menu>
+
+                {props.isLoadingUser && (
+                    <Menu.Item className='navbar-loading-placeholders'>
+                        <Menu.Item style={{ padding: '0 1.72rem' }}>
+                            <Loader active inline='centered' />
+                        </Menu.Item>
+                        <Menu.Item style={{ padding: '0 1.72rem' }}>
+                            <Loader active inline='centered' />
+                        </Menu.Item>
+                        <Menu.Item style={{ padding: '0 1.7rem' }}>
+                            <Loader active inline='centered' />
+                        </Menu.Item>
+                        <Menu.Item style={{ padding: '0 1.7rem' }}>
+                            <Loader active inline='centered' />
+                        </Menu.Item>
+                    </Menu.Item>
+                )}
+
+                <Menu.Menu className='desktop-navbar-items'>
+                    {renderNavbarItems()}
+                </Menu.Menu>
+            </Menu>
+
+            {menuOpen && (
+                <Menu inverted vertical fluid className='mobile-navbar-menu'>
+                    {renderNavbarItems()}
+                </Menu>
+            )}
+        </>
     )
 }
 
diff --git a/src/frontend/static/frontend/src/css/index.css b/src/frontend/static/frontend/src/css/index.css
index fa4dd829..7b1385f3 100644
--- a/src/frontend/static/frontend/src/css/index.css
+++ b/src/frontend/static/frontend/src/css/index.css
@@ -36,3 +36,9 @@
 #source-button {
     min-width: 30%;
 }
+
+@media only screen and (min-width: 1151px) and (max-width: 1366px) {
+    #homepage-heading {
+        text-align: center;
+    }
+}
diff --git a/src/frontend/static/frontend/src/css/responsive.css b/src/frontend/static/frontend/src/css/responsive.css
new file mode 100644
index 00000000..a04fe8f0
--- /dev/null
+++ b/src/frontend/static/frontend/src/css/responsive.css
@@ -0,0 +1,92 @@
+.ui.menu:not(.vertical) .right.menu.mobile-navbar-toggle,
+.ui.vertical.menu.mobile-navbar-menu {
+    display: none !important;
+}
+
+.ui.menu:not(.vertical) .menu.desktop-navbar-items {
+    display: flex !important;
+}
+
+@media only screen and (max-width: 1024px) {
+    .ui.menu:not(.vertical) .menu.desktop-navbar-items {
+        display: none !important;
+    }
+
+    .ui.menu:not(.vertical) .right.menu.mobile-navbar-toggle {
+        display: flex !important;
+        margin-left: auto !important;
+    }
+
+    .ui.vertical.menu.mobile-navbar-menu {
+        display: block !important;
+        margin-top: 0 !important;
+    }
+
+
+    .ui.vertical.menu.mobile-navbar-menu .dropdown.item > .menu {
+        position: static;
+        width: 100%;
+        min-width: 100%;
+        max-width: 100%;
+        margin-top: 0.75rem;
+        box-shadow: none;
+        border-radius: 0.28571429rem;
+    }
+
+    .navbar-loading-placeholders {
+        display: none !important;
+    }
+
+    .mobile-navbar-toggle .item {
+        padding: 1rem 1.25rem !important;
+    }
+
+    .mobile-navbar-toggle .icon {
+        font-size: 2rem !important;
+    }
+}
+
+@media only screen and (min-width: 1025px) and (max-width: 1150px) {
+    .ui.menu:not(.vertical) .menu.desktop-navbar-items {
+        flex: 1 !important;
+        display: flex !important;
+        justify-content: center !important;
+        align-items: center !important;
+    }
+
+    .ui.menu:not(.vertical) .right.menu.mobile-navbar-toggle,
+    .ui.vertical.menu.mobile-navbar-menu {
+        display: none !important;
+    }
+
+    .desktop-navbar-items .item,
+    .desktop-navbar-items .dropdown {
+        font-size: 0.82rem !important;
+        padding-left: 0.45rem !important;
+        padding-right: 0.45rem !important;
+    }
+
+    .ui.menu .header.item {
+        padding-right: 0.8rem !important;
+    }
+}
+
+@media only screen and (min-width: 1151px) and (max-width: 1366px) {
+    .ui.menu:not(.vertical) .menu.desktop-navbar-items {
+        flex: 1 !important;
+        display: flex !important;
+        justify-content: center !important;
+        align-items: center !important;
+    }
+
+    .desktop-navbar-items .item,
+    .desktop-navbar-items .dropdown {
+        font-size: 0.90rem !important;
+        padding-left: 0.75rem !important;
+        padding-right: 0.75rem !important;
+    }
+
+    .ui.menu .header.item {
+        padding-right: 1.2rem !important;
+    }
+}
diff --git a/src/frontend/templates/frontend/about-us.html b/src/frontend/templates/frontend/about-us.html
index 8e264027..04b06f28 100644
--- a/src/frontend/templates/frontend/about-us.html
+++ b/src/frontend/templates/frontend/about-us.html
@@ -6,10 +6,14 @@
 {% block meta_description %}Omicsdatascience brings together experts in genomics, epigenomics, and data science to develop open-source tools, foster collaboration, and drive innovation in cancer research..{% endblock %}
 
 
+{% block css %}
+        {% render_bundle 'aboutUs' 'css' %}
+{% endblock %}
+
 {% block content %}
         <main id="about-us-app"></main>
 {% endblock %}
 
 {% block js %}
         {% render_bundle 'aboutUs' 'js' %}
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/src/frontend/templates/frontend/faq.html b/src/frontend/templates/frontend/faq.html
index 29c94675..7d7d377e 100644
--- a/src/frontend/templates/frontend/faq.html
+++ b/src/frontend/templates/frontend/faq.html
@@ -7,10 +7,14 @@
 Frequently Asked Questions about Multiomix and our platform.
 {% endblock %}
 
+{% block css %}
+        {% render_bundle 'faq' 'css' %}
+{% endblock %}
+
 {% block content %}
         <main id="faq-app"></main>
 {% endblock %}
 
 {% block js %}
         {% render_bundle 'faq' 'js' %}
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/src/frontend/templates/frontend/open-source.html b/src/frontend/templates/frontend/open-source.html
index bff6e881..d13fcb56 100644
--- a/src/frontend/templates/frontend/open-source.html
+++ b/src/frontend/templates/frontend/open-source.html
@@ -5,10 +5,14 @@
 {% block title %} | Open source{% endblock %}
 {% block meta_description %}Discover and contribute to Omicsdatascience’s open-source initiatives on GitHub—powerful tools and libraries for multi-omics and cancer research, freely available for the community.{% endblock %}
 
+{% block css %}
+        {% render_bundle 'openSource' 'css' %}
+{% endblock %}
+
 {% block content %}
         <main id="open-source-app"></main>
 {% endblock %}
 
 {% block js %}
         {% render_bundle 'openSource' 'js' %}
-{% endblock %}
\ No newline at end of file
+{% endblock %}