diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
deleted file mode 100644
index 2cc670a..0000000
--- a/.github/FUNDING.yml
+++ /dev/null
@@ -1,2 +0,0 @@
-custom:
-  ["https://donate.stripe.com/7sI5m5146ehfddm7tj", "https://nextlessjs.com"]
diff --git a/public/assets/images/profile.jpeg b/public/assets/images/profile.jpeg
index dbb3efb..ed2ae74 100644
Binary files a/public/assets/images/profile.jpeg and b/public/assets/images/profile.jpeg differ
diff --git a/public/assets/jsons/profile.json b/public/assets/jsons/profile.json
index 22d1698..1116f85 100644
--- a/public/assets/jsons/profile.json
+++ b/public/assets/jsons/profile.json
@@ -4,6 +4,7 @@
   "introductionBio": "A full-stack developer focused on results, with strong skills in performance optimization and efficiency. Committed to delivering pragmatic solutions that delivers what the customer needs with etichal and responsability.",
   "bio": "In recent years, my journey in development has been marked by a challenging narrative, filled with achievements and significant learnings. When I embarked on this journey, I faced a steep learning curve, delving into the complexities of both front-end and back-end. Every line of code was an accomplishment, and every challenge was an opportunity for growth. Crafting intuitive interfaces and architecting robust solutions became my daily mantra.\n\nHowever, the true essence of development goes beyond the code. I found myself consistently challenged to translate customer needs into tangible solutions. Additionally, the importance of data security and respect for user privacy became integral aspects of my daily work.\n\nThese years in development are not just a chapter but the foundation for what lies ahead. I am excited to embrace future opportunities, apply the knowledge gained, and contribute to shaping the ever-evolving technological landscape.",
   "email": "lucascdemorais@gmail.com",
+  "phone": "5521995366450",
   "experience": [
     {
       "title": "Intelie by Viasat",
diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
new file mode 100644
index 0000000..cf6c336
--- /dev/null
+++ b/src/components/Footer/index.tsx
@@ -0,0 +1,16 @@
+import { HeartFilled } from '@ant-design/icons';
+import React from 'react';
+
+const Footer = () => {
+  return (
+    <footer className=" py-10 text-center text-gray-700">
+      <div className="flex items-center justify-center">
+        <p className="mr-2">Made with </p>
+        <HeartFilled className="text-red-700" />
+        <p className="ml-2"> by Lucas Morais</p>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;
diff --git a/src/components/LanguageChart/index.tsx b/src/components/LanguageChart/index.tsx
index 852726b..e857c20 100644
--- a/src/components/LanguageChart/index.tsx
+++ b/src/components/LanguageChart/index.tsx
@@ -21,6 +21,8 @@ const buildState = (
   options: {
     chart: {
       type: 'bar',
+      fontFamily:
+        'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
       height: 550,
       toolbar: {
         show: false,
diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
index c0e1839..38b91d6 100644
--- a/src/components/Navbar/index.tsx
+++ b/src/components/Navbar/index.tsx
@@ -1,29 +1,59 @@
-import React from 'react';
+import React, { useState } from "react";
 
-import Link from '@/components/Link';
+import Link from "@/components/Link";
 
-import Logo from '../logo';
+import Logo from "../logo";
 
 interface Props {
   logoTitle: string;
 }
 
 export default function Navbar({ logoTitle }: Props) {
+  const [menuOpen, setMenuOpen] = useState(false);
+
   return (
-    <nav className="sticky  top-0 z-50 bg-white p-4 px-16 text-white no-underline shadow-md">
-      <div className="w-full">
+    <nav className="sticky top-0 z-50 bg-white p-4 px-6 text-white no-underline shadow-md md:px-16">
+      <div className="container mx-auto">
         <div className="flex items-center justify-between">
-          <Link href="/" className={'text-primary hover:border-0'}>
+          <Link href="/" className={"text-primary hover:border-0"}>
             <Logo title={logoTitle} />
           </Link>
-          <div className="flex space-x-4">
-            <Link href="#about">{'About'}</Link>
-            <Link href="#experience">{'Experience'}</Link>
-            <Link href="#education">{'Education'}</Link>
-            <Link href="#certification">{'Certification'}</Link>
-            <Link href="#projects">{'Projects'}</Link>
+          <div className="hidden space-x-4 md:flex">
+            <Link href="#about">{"About"}</Link>
+            <Link href="#experience">{"Experience"}</Link>
+            <Link href="#education">{"Education"}</Link>
+            <Link href="#certification">{"Certification"}</Link>
+            <Link href="#projects">{"Projects"}</Link>
           </div>
+          <button
+            className="md:hidden"
+            onClick={() => setMenuOpen(!menuOpen)}
+            aria-label="Toggle Menu"
+          >
+            <svg
+              className="h-6 w-6 fill-current text-gray-600"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M4 6h16a1 1 0 010 2H4a1 1 0 010-2zm0 5h16a1 1 0 010 2H4a1 1 0 010-2zm0 5h16a1 1 0 010 2H4a1 1 0 010-2z"
+              />
+            </svg>
+          </button>
         </div>
+        {menuOpen && (
+          <div className="mt-4 md:hidden">
+            <div className="flex flex-col space-y-4">
+              <Link href="#about">{"About"}</Link>
+              <Link href="#experience">{"Experience"}</Link>
+              <Link href="#education">{"Education"}</Link>
+              <Link href="#certification">{"Certification"}</Link>
+              <Link href="#projects">{"Projects"}</Link>
+            </div>
+          </div>
+        )}
       </div>
     </nav>
   );
diff --git a/src/components/ProjectCard/index.tsx b/src/components/ProjectCard/index.tsx
index 15f84cf..c5197d6 100644
--- a/src/components/ProjectCard/index.tsx
+++ b/src/components/ProjectCard/index.tsx
@@ -21,7 +21,7 @@ export default function ProjectCard({
   url,
 }: Props) {
   return (
-    <div className="flex h-28 flex-row items-center justify-center  border p-4 shadow-lg">
+    <div className="flex h-28 w-full flex-row items-center justify-center border  p-4 shadow-md md:w-fit">
       <div className="w-full">
         <div className="w-full overflow-hidden text-ellipsis whitespace-nowrap text-base font-semibold text-black">
           <Tooltip title={name}>
diff --git a/src/components/ProjectGrid/index.tsx b/src/components/ProjectGrid/index.tsx
index e34c945..6cf896b 100644
--- a/src/components/ProjectGrid/index.tsx
+++ b/src/components/ProjectGrid/index.tsx
@@ -22,7 +22,7 @@ export default function ProjectGrid({
 
   return (
     <div className="flex flex-col items-center">
-      <div className="flex w-full flex-wrap justify-items-start gap-1.5">
+      <div className="my-2 flex w-full flex-wrap justify-items-start gap-1.5">
         {items.slice(0, visibleItems).map((item, index) => (
           <ProjectCard key={index} {...item} />
         ))}
diff --git a/src/components/Timeline/Item/index.tsx b/src/components/Timeline/Item/index.tsx
index b83d775..816b561 100644
--- a/src/components/Timeline/Item/index.tsx
+++ b/src/components/Timeline/Item/index.tsx
@@ -49,7 +49,7 @@ export default function Item(props: Props) {
   } ${formatDuration()}`;
 
   return (
-    <div className="flex h-20 w-7/12 flex-row items-center  justify-center px-4 pb-4">
+    <div className="flex h-20 w-full flex-row items-center justify-center  px-4 pb-4 md:w-8/12">
       <div className="w-full">
         <div className="w-full overflow-hidden text-ellipsis whitespace-nowrap text-base font-semibold text-black">
           <Tooltip title={title}>
diff --git a/src/layouts/Block.tsx b/src/layouts/Block.tsx
index 1df6ad6..872a1ba 100644
--- a/src/layouts/Block.tsx
+++ b/src/layouts/Block.tsx
@@ -5,5 +5,7 @@ interface Props {
 }
 
 export default function Block({ children }: Props) {
-  return <div className="flex flex-1 p-5">{children}</div>;
+  return (
+    <div className="flex flex-1 p-2 sm:align-middle md:p-5 ">{children}</div>
+  );
 }
diff --git a/src/layouts/Row.tsx b/src/layouts/Row.tsx
index 0489f1a..a2defbf 100644
--- a/src/layouts/Row.tsx
+++ b/src/layouts/Row.tsx
@@ -5,5 +5,9 @@ interface Props {
 }
 
 export default function Row({ children }: Props) {
-  return <div className="flex w-full flex-1 flex-row py-10">{children}</div>;
+  return (
+    <div className="flex w-full flex-1 flex-col md:flex-row md:py-10">
+      {children}
+    </div>
+  );
 }
diff --git a/src/pages/about.tsx b/src/pages/about.tsx
deleted file mode 100644
index 71e02da..0000000
--- a/src/pages/about.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Meta } from '@/layouts/Meta';
-import { Main } from '@/templates/Main';
-
-const About = () => (
-  <Main meta={<Meta title="Lorem ipsum" description="Lorem ipsum" />}>
-    <p>
-      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ratione fuga
-      recusandae quidem. Quaerat molestiae blanditiis doloremque possimus labore
-      voluptatibus distinctio recusandae autem esse explicabo molestias officia
-      placeat, accusamus aut saepe.
-    </p>
-    <p>
-      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ratione fuga
-      recusandae quidem. Quaerat molestiae blanditiis doloremque possimus labore
-      voluptatibus distinctio recusandae autem esse explicabo molestias officia
-      placeat, accusamus aut saepe.
-    </p>
-  </Main>
-);
-
-export default About;
diff --git a/src/pages/blog.tsx b/src/pages/blog.tsx
deleted file mode 100644
index baa3c1f..0000000
--- a/src/pages/blog.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import Link from 'next/link';
-
-import { Meta } from '@/layouts/Meta';
-import { Main } from '@/templates/Main';
-
-const Blog = () => (
-  <Main meta={<Meta title="Lorem ipsum" description="Lorem ipsum" />}>
-    <p>
-      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ratione fuga
-      recusandae quidem. Quaerat molestiae blanditiis doloremque possimus labore
-      voluptatibus distinctio recusandae autem esse explicabo molestias officia
-      placeat, accusamus aut saepe.
-    </p>
-
-    {[...Array(10)].map((_, index) => (
-      <div
-        className="my-4 w-full rounded-md border-2 border-gray-400 px-2 py-1"
-        key={index}
-      >
-        <Link href={`/blog/blog-${index}`}>{`Blog - ${index}`}</Link>
-      </div>
-    ))}
-  </Main>
-);
-
-export default Blog;
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index bdbddad..492759c 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,35 +1,35 @@
 import {
   GithubOutlined,
-  InstagramOutlined,
   LinkedinOutlined,
   MailOutlined,
-  TwitterOutlined,
-} from "@ant-design/icons";
-import dynamic from "next/dynamic";
-import { useRouter } from "next/router";
-import { useEffect, useState } from "react";
+  WhatsAppOutlined,
+} from '@ant-design/icons';
+import dynamic from 'next/dynamic';
+import { useRouter } from 'next/router';
+import { useEffect, useState } from 'react';
 
-import CertificateCard from "@/components/CertificateCard";
-import Icon from "@/components/Icon";
-import { SocialLink } from "@/components/Link";
-import ProjectGrid from "@/components/ProjectGrid";
-import Scroll from "@/components/Scroll";
-import Timeline from "@/components/Timeline";
-import Block from "@/layouts/Block";
-import { Meta } from "@/layouts/Meta";
-import Row from "@/layouts/Row";
-import profile from "@/public/assets/jsons/profile.json";
-import { apiFetch } from "@/services";
-import { Main } from "@/templates/Main";
-import { capitalize, isProgrammingLanguage } from "@/utils";
+import CertificateCard from '@/components/CertificateCard';
+import Footer from '@/components/Footer';
+import Icon from '@/components/Icon';
+import { SocialLink } from '@/components/Link';
+import ProjectGrid from '@/components/ProjectGrid';
+import Scroll from '@/components/Scroll';
+import Timeline from '@/components/Timeline';
+import Block from '@/layouts/Block';
+import { Meta } from '@/layouts/Meta';
+import Row from '@/layouts/Row';
+import profile from '@/public/assets/jsons/profile.json';
+import { apiFetch } from '@/services';
+import { Main } from '@/templates/Main';
+import { capitalize, isProgrammingLanguage } from '@/utils';
 import {
   GITHUB_PINNED_REPO,
   GITHUB_REPO,
   WAKATIME_CODING_TIME,
   WAKATIME_LANGUAGES,
-} from "@/utils/url";
+} from '@/utils/url';
 
-const LanguageChart = dynamic(() => import("@/components/LanguageChart"), {
+const LanguageChart = dynamic(() => import('@/components/LanguageChart'), {
   ssr: false,
 });
 
@@ -41,6 +41,7 @@ const Index = () => {
   const {
     name,
     username,
+    phone,
     introductionBio,
     bio,
     email,
@@ -65,7 +66,7 @@ const Index = () => {
           r.map((v: any) => ({
             ...v,
             url: GITHUB_REPO(username, v.name),
-            name: capitalize(v.name?.replace(/-/g, " ")),
+            name: capitalize(v.name?.replace(/-/g, ' ')),
           }))
         );
         const totalSeconds =
@@ -104,38 +105,49 @@ const Index = () => {
   return (
     <>
       <Main meta={<Meta title={name} description={introductionBio} />}>
-        <div className="mx-14">
+        <div className="mx-2 md:mx-14">
           <Row>
             <Block>
               <div className="flex flex-col">
-                <h1 className="text-7xl font-bold text-black">{name}</h1>
-                <h2 className="text-4xl font-semibold italic text-black ">
+                <h1 className="text-4xl font-bold text-black md:text-7xl">
+                  {name}
+                </h1>
+                <h2 className="text-xl font-semibold italic text-black md:text-4xl ">
                   {`@${username}`}
                 </h2>
-                <p className="my-5 text-3xl text-gray-600">{introductionBio}</p>
+                <p className="my-5 text-xl text-gray-600 md:text-3xl">
+                  {introductionBio}
+                </p>
                 <div className="flex flex-1 flex-row items-center justify-start text-3xl text-black hover:no-underline">
                   <SocialLink href={`https://github.com/${username}`}>
-                    <Icon color={"#000000"}>
+                    <Icon color={'#000000'}>
                       <GithubOutlined />
                     </Icon>
                   </SocialLink>
-                  <SocialLink href={`https://x.com/${username}`}>
+                  <SocialLink
+                    href={`https://api.whatsapp.com/send?phone=${phone}`}
+                  >
+                    <Icon color={'#25D366'}>
+                      <WhatsAppOutlined />
+                    </Icon>
+                  </SocialLink>
+                  {/* <SocialLink href={`https://x.com/${username}`}>
                     <Icon color={"#00acee"}>
                       <TwitterOutlined />
                     </Icon>
-                  </SocialLink>
+                  </SocialLink> */}
                   <SocialLink href={`https://linkedin.com/in/${username}`}>
-                    <Icon color={"#0e76a8"}>
+                    <Icon color={'#0e76a8'}>
                       <LinkedinOutlined />
                     </Icon>
                   </SocialLink>
-                  <SocialLink href={`https://instagram.com/${username}`}>
-                    <Icon color={"#dd2a7b"}>
+                  {/* <SocialLink href={`https://instagram.com/${username}`}>
+                    <Icon color={'#dd2a7b'}>
                       <InstagramOutlined />
                     </Icon>
-                  </SocialLink>
+                  </SocialLink> */}
                   <SocialLink href={`mailto:${email}`}>
-                    <Icon color={"#d44638"}>
+                    <Icon color={'#d44638'}>
                       <MailOutlined />
                     </Icon>
                   </SocialLink>
@@ -143,12 +155,12 @@ const Index = () => {
               </div>
             </Block>
             <Block>
-              <div className="flex w-full items-center justify-center">
+              <div className="hidden w-full items-center justify-center md:flex ">
                 <div
                   className=" border-0 bg-cover"
                   style={{
-                    height: "30rem",
-                    width: "32rem",
+                    height: '30rem',
+                    width: '32rem',
                     backgroundImage: `url(${router.basePath}/assets/images/cover.png)`,
                   }}
                 />
@@ -157,7 +169,7 @@ const Index = () => {
           </Row>
           <Row>
             <Block>
-              <div className="flex w-full items-center justify-center">
+              <div className="mt-5 flex w-full items-center justify-center md:mt-0">
                 <div>
                   <div
                     className="h-72 w-72 rounded-full bg-cover"
@@ -172,11 +184,11 @@ const Index = () => {
               <div className="flex flex-1 flex-col">
                 <span
                   id="about"
-                  className="mb-3 text-4xl font-semibold text-black "
+                  className="mb-3 text-xl font-semibold text-black md:text-4xl "
                 >
-                  {"About Me"}
+                  {'About Me'}
                 </span>
-                <p className="text-2xl text-gray-600">{bio}</p>
+                <p className="text-lg text-gray-600 md:text-2xl">{bio}</p>
               </div>
             </Block>
           </Row>
@@ -186,9 +198,9 @@ const Index = () => {
               <div className="flex flex-1 flex-col ">
                 <span
                   id="languages"
-                  className="mb-3 text-4xl font-semibold text-black "
+                  className="mb-3 text-xl font-semibold text-black md:text-4xl "
                 >
-                  {"Languages"}
+                  {'Languages'}
                 </span>
                 <LanguageChart data={data} />
               </div>
@@ -197,9 +209,9 @@ const Index = () => {
               <div className="flex flex-1 flex-col ">
                 <span
                   id="experience"
-                  className="mb-3 text-4xl font-semibold text-black "
+                  className="mb-3 text-xl font-semibold text-black md:text-4xl "
                 >
-                  {"Experience"}
+                  {'Experience'}
                 </span>
                 <Timeline data={experience} />
               </div>
@@ -210,9 +222,9 @@ const Index = () => {
               <div className="flex flex-1 flex-col">
                 <span
                   id="education"
-                  className="mb-3 text-4xl font-semibold text-black "
+                  className="mb-3 text-xl font-semibold text-black md:text-4xl "
                 >
-                  {"Education"}
+                  {'Education'}
                 </span>
                 <Timeline data={education} />
               </div>
@@ -221,9 +233,9 @@ const Index = () => {
               <div className="flex flex-1 flex-col">
                 <span
                   id="certification"
-                  className="mb-3 text-4xl font-semibold text-black "
+                  className="mb-3 text-xl font-semibold text-black md:text-4xl "
                 >
-                  {"Certification"}
+                  {'Certification'}
                 </span>
                 <Scroll style={{ height: 400 }}>
                   {certification?.map((v, key) => (
@@ -240,9 +252,9 @@ const Index = () => {
               <div className="flex flex-1 flex-col">
                 <span
                   id="projects"
-                  className="mb-3 text-4xl font-semibold text-black "
+                  className="mb-3 text-xl font-semibold text-black md:text-4xl "
                 >
-                  {"Open Source Projects"}
+                  {'Open Source Projects'}
                 </span>
                 <ProjectGrid
                   initialItemsCount={8}
@@ -253,6 +265,7 @@ const Index = () => {
             </Block>
           </Row>
         </div>
+        <Footer />
       </Main>
     </>
   );