diff --git a/src/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/authentication.tsx b/src/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/authentication.tsx
index 6ac9145f..fe31fb6e 100644
--- a/src/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/authentication.tsx
+++ b/src/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/authentication.tsx
@@ -1,35 +1,73 @@
+import LoginRoundedIcon from "@mui/icons-material/LoginRounded";
+import {
+  ButtonProps as MButtonProps,
+  IconButton as MIconButton,
+  IconButtonProps as MIconButtonProps,
+} from "@mui/material";
 import { useRouter } from "next/router";
-import React, { useCallback } from "react";
+import React, { ElementType, useCallback } from "react";
 import { useAuthentication } from "../../../../../../../../../../hooks/useAuthentication/useAuthentication";
 import { AuthenticationMenu } from "./components/AuthenticationMenu/authenticationMenu";
-import { RequestAuthentication } from "./components/RequestAuthentication/requestAuthentication";
+import { StyledButton } from "./components/Button/button.styles";
 
 export interface AuthenticationProps {
   authenticationEnabled?: boolean;
+  Button: ElementType<MButtonProps> | ElementType<MIconButtonProps>;
   closeMenu: () => void;
 }
 
 export const Authentication = ({
   authenticationEnabled,
+  Button,
   closeMenu,
-}: AuthenticationProps): JSX.Element => {
+}: AuthenticationProps): JSX.Element | null => {
   const { isAuthenticated, requestAuthentication, userProfile } =
     useAuthentication();
   const router = useRouter();
   const onLogout = useCallback((): void => {
     location.href = router.basePath;
   }, [router]);
+
+  if (!authenticationEnabled) return null;
+
   return (
     <>
-      {authenticationEnabled &&
-        (isAuthenticated && userProfile ? (
-          <AuthenticationMenu onLogout={onLogout} userProfile={userProfile} />
-        ) : (
-          <RequestAuthentication
-            closeMenu={closeMenu}
-            requestAuthorization={requestAuthentication}
-          />
-        ))}
+      {isAuthenticated && userProfile ? (
+        <AuthenticationMenu onLogout={onLogout} userProfile={userProfile} />
+      ) : (
+        <Button
+          onClick={(): void => {
+            requestAuthentication();
+            closeMenu();
+          }}
+        />
+      )}
     </>
   );
 };
+
+/**
+ * Renders authentication button.
+ * @param props - Button props.
+ * @returns button.
+ */
+export function renderButton(props: MButtonProps): JSX.Element {
+  return (
+    <StyledButton startIcon={<LoginRoundedIcon />} variant="nav" {...props}>
+      Sign in
+    </StyledButton>
+  );
+}
+
+/**
+ * Renders authentication icon button.
+ * @param props - Button props.
+ * @returns icon button.
+ */
+export function renderIconButton(props: MIconButtonProps): JSX.Element {
+  return (
+    <MIconButton color="ink" {...props}>
+      <LoginRoundedIcon />
+    </MIconButton>
+  );
+}
diff --git a/src/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/Button/button.styles.ts b/src/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/Button/button.styles.ts
new file mode 100644
index 00000000..f06bdf7f
--- /dev/null
+++ b/src/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/Button/button.styles.ts
@@ -0,0 +1,8 @@
+import styled from "@emotion/styled";
+import { Button as MButton } from "@mui/material";
+
+export const StyledButton = styled(MButton)`
+  &.MuiButton-nav {
+    padding: 6px 12px;
+  }
+`;
diff --git a/src/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/RequestAuthentication/requestAuthentication.styles.ts b/src/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/RequestAuthentication/requestAuthentication.styles.ts
deleted file mode 100644
index 34ea8ab3..00000000
--- a/src/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/RequestAuthentication/requestAuthentication.styles.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import styled from "@emotion/styled";
-import { Button as MButton } from "@mui/material";
-import { textBody500 } from "../../../../../../../../../../../../styles/common/mixins/fonts";
-
-export const Button = styled(MButton)`
-  & {
-    ${textBody500};
-    padding: 6px 12px;
-  }
-`;
diff --git a/src/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/RequestAuthentication/requestAuthentication.tsx b/src/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/RequestAuthentication/requestAuthentication.tsx
deleted file mode 100644
index 74266b72..00000000
--- a/src/components/Layout/components/Header/components/Content/components/Actions/components/Authentication/components/RequestAuthentication/requestAuthentication.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import LoginRoundedIcon from "@mui/icons-material/LoginRounded";
-import { IconButton as MIconButton } from "@mui/material";
-import React from "react";
-import { useBreakpoint } from "../../../../../../../../../../../../hooks/useBreakpoint";
-import { Button } from "./requestAuthentication.styles";
-
-export interface RequestAuthenticationProps {
-  closeMenu: () => void;
-  requestAuthorization: () => void;
-}
-
-export const RequestAuthentication = ({
-  closeMenu,
-  requestAuthorization,
-}: RequestAuthenticationProps): JSX.Element => {
-  const { mdUp } = useBreakpoint();
-  return mdUp ? (
-    <Button
-      onClick={requestAuthorization}
-      startIcon={<LoginRoundedIcon />}
-      variant="nav"
-    >
-      Sign in
-    </Button>
-  ) : (
-    <MIconButton
-      color="ink"
-      onClick={(): void => {
-        closeMenu();
-        requestAuthorization();
-      }}
-    >
-      <LoginRoundedIcon />
-    </MIconButton>
-  );
-};
diff --git a/src/components/Layout/components/Header/components/Content/components/Actions/components/Menu/components/Toolbar/toolbar.tsx b/src/components/Layout/components/Header/components/Content/components/Actions/components/Menu/components/Toolbar/toolbar.tsx
index 01f8f271..0ded3568 100644
--- a/src/components/Layout/components/Header/components/Content/components/Actions/components/Menu/components/Toolbar/toolbar.tsx
+++ b/src/components/Layout/components/Header/components/Content/components/Actions/components/Menu/components/Toolbar/toolbar.tsx
@@ -5,8 +5,14 @@ import { ComponentsConfig } from "../../../../../../../../../../../../config/ent
 import { Left, Right } from "../../../../../../../../header.styles";
 import { Announcements } from "../../../../../../../Announcements/announcements";
 import { Actions } from "../../../../actions";
-import { Authentication } from "../../../Authentication/authentication";
-import { Search } from "../../../Search/search";
+import {
+  Authentication,
+  renderIconButton as renderAuthenticationIconButton,
+} from "../../../Authentication/authentication";
+import {
+  renderIconButton as renderSearchIconButton,
+  Search,
+} from "../../../Search/search";
 
 export interface DialogTitleProps {
   actions?: ReactNode;
@@ -36,6 +42,7 @@ export const Toolbar = ({
           <Actions>
             {/* Search */}
             <Search
+              Button={renderSearchIconButton}
               closeMenu={onClose}
               searchEnabled={searchEnabled}
               searchURL={searchURL}
@@ -43,6 +50,7 @@ export const Toolbar = ({
             {/* Authentication */}
             <Authentication
               authenticationEnabled={authenticationEnabled}
+              Button={renderAuthenticationIconButton}
               closeMenu={onClose}
             />
             {/* Additional actions i.e. call-to-action button */}
diff --git a/src/components/Layout/components/Header/components/Content/components/Actions/components/Search/components/Button/button.styles.ts b/src/components/Layout/components/Header/components/Content/components/Actions/components/Search/components/Button/button.styles.ts
new file mode 100644
index 00000000..f06bdf7f
--- /dev/null
+++ b/src/components/Layout/components/Header/components/Content/components/Actions/components/Search/components/Button/button.styles.ts
@@ -0,0 +1,8 @@
+import styled from "@emotion/styled";
+import { Button as MButton } from "@mui/material";
+
+export const StyledButton = styled(MButton)`
+  &.MuiButton-nav {
+    padding: 6px 12px;
+  }
+`;
diff --git a/src/components/Layout/components/Header/components/Content/components/Actions/components/Search/components/SearchButton/searchButton.styles.ts b/src/components/Layout/components/Header/components/Content/components/Actions/components/Search/components/SearchButton/searchButton.styles.ts
deleted file mode 100644
index 34ea8ab3..00000000
--- a/src/components/Layout/components/Header/components/Content/components/Actions/components/Search/components/SearchButton/searchButton.styles.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import styled from "@emotion/styled";
-import { Button as MButton } from "@mui/material";
-import { textBody500 } from "../../../../../../../../../../../../styles/common/mixins/fonts";
-
-export const Button = styled(MButton)`
-  & {
-    ${textBody500};
-    padding: 6px 12px;
-  }
-`;
diff --git a/src/components/Layout/components/Header/components/Content/components/Actions/components/Search/components/SearchButton/searchButton.tsx b/src/components/Layout/components/Header/components/Content/components/Actions/components/Search/components/SearchButton/searchButton.tsx
deleted file mode 100644
index a2bb274a..00000000
--- a/src/components/Layout/components/Header/components/Content/components/Actions/components/Search/components/SearchButton/searchButton.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { IconButton } from "@mui/material";
-import React from "react";
-import { useBreakpoint } from "../../../../../../../../../../../../hooks/useBreakpoint";
-import { SearchIcon } from "../../../../../../../../../../../common/CustomIcon/components/SearchIcon/searchIcon";
-import { Button } from "./searchButton.styles";
-
-export interface SearchProps {
-  openSearch: () => void;
-}
-
-export const SearchButton = ({ openSearch }: SearchProps): JSX.Element => {
-  const { mdUp } = useBreakpoint();
-  return mdUp ? (
-    <Button onClick={openSearch} startIcon={<SearchIcon />} variant="nav">
-      Search
-    </Button>
-  ) : (
-    <IconButton color="ink" onClick={openSearch}>
-      <SearchIcon fontSize="medium" />
-    </IconButton>
-  );
-};
diff --git a/src/components/Layout/components/Header/components/Content/components/Actions/components/Search/search.tsx b/src/components/Layout/components/Header/components/Content/components/Actions/components/Search/search.tsx
index 98373a69..c56f9737 100644
--- a/src/components/Layout/components/Header/components/Content/components/Actions/components/Search/search.tsx
+++ b/src/components/Layout/components/Header/components/Content/components/Actions/components/Search/search.tsx
@@ -1,24 +1,33 @@
-import React, { useState } from "react";
+import {
+  ButtonProps as MButtonProps,
+  IconButton as MIconButton,
+  IconButtonProps as MIconButtonProps,
+} from "@mui/material";
+import React, { ElementType, useState } from "react";
+import { SearchIcon } from "../../../../../../../../../common/CustomIcon/components/SearchIcon/searchIcon";
+import { StyledButton } from "./components/Button/button.styles";
 import SearchBar from "./components/SearchBar/searchBar";
-import { SearchButton } from "./components/SearchButton/searchButton";
 
 export interface SearchProps {
+  Button: ElementType<MButtonProps> | ElementType<MIconButtonProps>;
   closeMenu: () => void;
   searchEnabled?: boolean;
   searchURL?: string;
 }
 
 export const Search = ({
+  Button,
   closeMenu,
   searchEnabled,
   searchURL,
-}: SearchProps): JSX.Element => {
+}: SearchProps): JSX.Element | null => {
   const [searchOpen, setSearchOpen] = useState<boolean>(false);
+
+  if (!searchEnabled) return null;
+
   return (
     <>
-      {searchEnabled && (
-        <SearchButton openSearch={(): void => setSearchOpen(true)} />
-      )}
+      <Button onClick={(): void => setSearchOpen(true)} />
       <SearchBar
         closeMenu={closeMenu}
         closeSearch={(): void => setSearchOpen(false)}
@@ -28,3 +37,29 @@ export const Search = ({
     </>
   );
 };
+
+/**
+ * Renders search button.
+ * @param props - Button props.
+ * @returns button.
+ */
+export function renderButton(props: MButtonProps): JSX.Element {
+  return (
+    <StyledButton startIcon={<SearchIcon />} variant="nav" {...props}>
+      Search
+    </StyledButton>
+  );
+}
+
+/**
+ * Renders search icon button.
+ * @param props - Button props.
+ * @returns icon button.
+ */
+export function renderIconButton(props: MIconButtonProps): JSX.Element {
+  return (
+    <MIconButton color="ink" {...props}>
+      <SearchIcon fontSize="medium" />
+    </MIconButton>
+  );
+}
diff --git a/src/components/Layout/components/Header/header.tsx b/src/components/Layout/components/Header/header.tsx
index a75fa8a3..a78d0b0b 100644
--- a/src/components/Layout/components/Header/header.tsx
+++ b/src/components/Layout/components/Header/header.tsx
@@ -10,9 +10,17 @@ import {
 import { Navigation, SocialMedia } from "./common/entities";
 import { Announcements } from "./components/Announcements/announcements";
 import { Actions } from "./components/Content/components/Actions/actions";
-import { Authentication } from "./components/Content/components/Actions/components/Authentication/authentication";
+import {
+  Authentication,
+  renderButton as renderAuthenticationButton,
+  renderIconButton as renderAuthenticationIconButton,
+} from "./components/Content/components/Actions/components/Authentication/authentication";
 import { Menu } from "./components/Content/components/Actions/components/Menu/menu";
-import { Search } from "./components/Content/components/Actions/components/Search/search";
+import {
+  renderButton as renderSearchButton,
+  renderIconButton as renderSearchIconButton,
+  Search,
+} from "./components/Content/components/Actions/components/Search/search";
 import { Navigation as DXNavigation } from "./components/Content/components/Navigation/navigation";
 import { Slogan } from "./components/Content/components/Slogan/slogan";
 import { Divider } from "./components/Content/components/Slogan/slogan.styles";
@@ -107,12 +115,22 @@ export const Header = ({ ...headerProps }: HeaderProps): JSX.Element => {
               <Actions>
                 {/* Search */}
                 <Search
+                  Button={({ ...props }): JSX.Element =>
+                    isIn.isMenuIn
+                      ? renderSearchIconButton(props)
+                      : renderSearchButton(props)
+                  }
                   closeMenu={onClose}
                   searchEnabled={searchEnabled}
                   searchURL={searchURL}
                 />
                 {/* Authentication */}
                 <Authentication
+                  Button={({ ...props }): JSX.Element =>
+                    isIn.isMenuIn
+                      ? renderAuthenticationIconButton(props)
+                      : renderAuthenticationButton(props)
+                  }
                   authenticationEnabled={authenticationEnabled}
                   closeMenu={onClose}
                 />