diff --git a/components/common/TopBar.tsx b/components/common/TopBar.tsx
index a5b7bc7..70c0cc0 100644
--- a/components/common/TopBar.tsx
+++ b/components/common/TopBar.tsx
@@ -4,10 +4,11 @@ import toast from 'react-hot-toast';
 import Icon from './Icon';
 
 type TopbarProps = {
-   showSettings: Function
+   showSettings: Function,
+   showAddModal: Function,
 }
 
-const TopBar = ({ showSettings }:TopbarProps) => {
+const TopBar = ({ showSettings, showAddModal }:TopbarProps) => {
    const [showMobileMenu, setShowMobileMenu] = useState<boolean>(false);
    const router = useRouter();
 
@@ -31,6 +32,7 @@ const TopBar = ({ showSettings }:TopbarProps) => {
 
          <h3 className="p-4 text-base font-bold text-blue-700 lg:hidden">
             <span className=' relative top-[3px] mr-1'><Icon type="logo" size={24} color="#364AFF" /></span> SerpBear
+            <button className='px-3 py-1 font-bold text-blue-700  lg:hidden ml-3 text-lg' onClick={() => showAddModal()}>+</button>
          </h3>
          <div className="topbar__right">
             <button className={' lg:hidden p-3'} onClick={() => setShowMobileMenu(!showMobileMenu)}>
diff --git a/pages/domain/[slug]/index.tsx b/pages/domain/[slug]/index.tsx
index e81571f..af69f8e 100644
--- a/pages/domain/[slug]/index.tsx
+++ b/pages/domain/[slug]/index.tsx
@@ -60,7 +60,7 @@ const SingleDomain: NextPage = () => {
                <title>{`${activDomain.domain} - SerpBear` } </title>
             </Head>
          }
-         <TopBar showSettings={() => setShowSettings(true)} />
+         <TopBar showSettings={() => setShowSettings(true)} showAddModal={() => setShowAddDomain(true)} />
          <div className="flex w-full max-w-7xl mx-auto">
             <Sidebar domains={theDomains} showAddModal={() => setShowAddDomain(true)} />
             <div className="domain_kewywords px-5 pt-10 lg:px-0 lg:pt-20 w-full">