diff --git a/components/LanguageButton.tsx b/components/LanguageButton.tsx
new file mode 100644
index 0000000..84fee50
--- /dev/null
+++ b/components/LanguageButton.tsx
@@ -0,0 +1,60 @@
+import React, { Fragment, useState } from 'react';
+import { Menu, Transition } from '@headlessui/react'
+import { ChevronDownIcon } from '@heroicons/react/solid'
+
+import { 
+    US_ICON, 
+    ES_ICON,
+} from '../constants';
+
+const LanguageButton = ({}) => {
+
+    const [active, setActive] = useState(null)
+
+    return (
+        <Menu as='div' className='relative inline-block'>
+            <div>
+                <Menu.Button className='inline-flex justify-center w-full rounded px-4 py-2 bg-primary'>
+                    <img 
+                        src={US_ICON}
+                        alt='Icon'
+                    />
+                    <ChevronDownIcon className='-mr-1 ml-2 h-5 w-5 text-solid-white' />
+                </Menu.Button>
+            </div>
+
+            <Transition
+                as={Fragment}
+                enter="transition ease-out duration-100"
+                enterFrom="transform opacity-0 scale-95"
+                enterTo="transform opacity-100 scale-100"
+                leave="transition ease-in duration-75"
+                leaveFrom="transform opacity-100 scale-100"
+                leaveTo="transform opacity-0 scale-95"
+            >
+                <Menu.Items className="origin-top-left absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
+                    <div className="py-1">
+                        <Menu.Button className='block px-4 py-2 text-sm'>
+                            <img 
+                                src={US_ICON}
+                                alt='US_icon'
+                                className='inline'
+                            />
+                            English
+                        </Menu.Button>
+                        <Menu.Button className='block px-4 py-2 text-sm'>
+                            <img 
+                                src={ES_ICON}
+                                alt='ES_icon'
+                                className='inline'
+                            />
+                            Spanish
+                        </Menu.Button>
+                    </div>
+                </Menu.Items>
+            </Transition>
+        </Menu>
+    )
+}
+
+export default LanguageButton
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 6bc1555..06dc18c 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -7,6 +7,7 @@ import {
 } from '../constants/strings'
 
 import HamburgerButton from './HamburgerButton'
+import LanguageButton from './LanguageButton'
 
 const renderNavItems = () => {
     return (
@@ -31,8 +32,8 @@ function MobileNav({open, setOpen}: any) {
                 absolute top-0 bg-solid-white left-0 h-screen w-screen transform ${open ? '-translate-x-0' : '-translate-x-full'} transition-transform duration-300 ease-in-out filter drop-shadow-md
             `}
         >
-            <div className="flex items-center justify-center filter drop-shadow-md bg-solid-black h-20">
-                <a href="/">
+            <div className='flex items-center justify-center filter drop-shadow-md bg-solid-black h-20'>
+                <a href='/'>
                     <img 
                         src={LOGO_URL}
                         alt='Logo'
@@ -51,7 +52,7 @@ export default function Navbar() {
     const [open, setOpen] = useState(false)
     
     return (
-        <nav className='flex filter bg-solid-black px-4 py-4 h-20 items-center md:bg-solid-white'>
+        <nav className='flex filter bg-solid-black px-4 py-4 h-20 items-center md:bg-solid-white md:mx-20'>
             <MobileNav open={open} setOpen={setOpen} />
             <div className='w-3/12 flex md:hidden items-center'>
                 <a href='/'>
@@ -65,14 +66,15 @@ export default function Navbar() {
                 <a href='/' className='font-semibold text-2xl text-solid-white md:text-solid-black'>{SETLIFE}</a>
                 <a href='/' className='text-2xl font-thin text-primary'>{SOLUTIONS}</a>
             </div>
-            <div className="w-3/12 flex justify-end items-center md:w-6/12">
+            <div className='w-3/12 flex justify-end items-center md:w-6/12'>
                 <HamburgerButton 
                     open={open}
                     setOpen={setOpen}
                 />
-                <div className="hidden md:flex">
+                <div className='hidden md:flex place-items-center'>
                     { renderNavItems() }
                 </div>
+                <LanguageButton />
             </div>
         </nav>
     )
diff --git a/constants/index.ts b/constants/index.ts
index ec9e73b..7eb36eb 100644
--- a/constants/index.ts
+++ b/constants/index.ts
@@ -11,5 +11,7 @@ export const API_v1_URL: string = 'http://localhost:3000/api/v1'
 // Images
 export const HERO_IMAGE_URL = 'https://user-images.githubusercontent.com/49292858/183115188-87aa75f2-7123-472a-b20d-16766828f96c.png'
 export const LOGO_URL: string = 'https://setlife-solutions.s3.amazonaws.com/images/Logo.png'
+export const US_ICON: string = 'https://setlife-solutions.s3.amazonaws.com/images/US_icon.png'
+export const ES_ICON: string = 'https://setlife-solutions.s3.amazonaws.com/images/ES_icon.png'
 
 export const NAV_ITEMS: Array<string> = [ABOUT, PORTFOLIO, CONSULTATION, SERVICES, SERVICE_PACKAGES]
diff --git a/package.json b/package.json
index 3c8d1ac..e63374a 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,8 @@
     "@apollo/client": "^3.6.9",
     "@graphql-tools/merge": "^8.3.0",
     "@graphql-tools/schema": "^8.5.0",
+    "@headlessui/react": "^1.6.6",
+    "@heroicons/react": "^1.0.6",
     "apollo-server": "^3.9.0",
     "apollo-server-micro": "^3.9.0",
     "dotenv": "^16.0.1",