diff --git a/components/Card.js b/components/Card.js
index 143681e..f07409d 100644
--- a/components/Card.js
+++ b/components/Card.js
@@ -42,7 +42,7 @@ const Card = ({ title, description, imgSrc, href }) => (
         {href && (
           <Link
             href={href}
-            className="text-base font-medium leading-6 text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
+            className="text-base font-medium leading-6 text-lime-500 hover:text-lime-600 dark:hover:text-lime-400"
             aria-label={`Link to ${title}`}
           >
             Learn more &rarr;
diff --git a/components/LayoutWrapper.js b/components/LayoutWrapper.js
index ca3a49b..332f2b9 100644
--- a/components/LayoutWrapper.js
+++ b/components/LayoutWrapper.js
@@ -1,7 +1,10 @@
 import siteMetadata from '@/data/siteMetadata'
 import headerNavLinks from '@/data/headerNavLinks'
-import Logo from '@/data/logo.svg'
+import Logo from '@/data/jane.png'
+import Image from 'next/image'
+
 import Link from './Link'
+import TypingEffect from './TypingEffect'
 import SectionContainer from './SectionContainer'
 import Footer from './Footer'
 import MobileNav from './MobileNav'
@@ -10,18 +13,20 @@ import WebringSwitch from './WebringSwitch'
 
 const LayoutWrapper = ({ children }) => {
   return (
+    
     <SectionContainer>
+      
       <div className="flex h-screen flex-col justify-between">
         <header className="flex items-center justify-between py-10">
           <div>
             <Link href="/" aria-label={siteMetadata.headerTitle}>
               <div className="flex items-center justify-between">
                 <div className="mr-3">
-                  <Logo />
+                <Image src={Logo} alt="Picture of the author" width={150} height={150}/>
                 </div>
                 {typeof siteMetadata.headerTitle === 'string' ? (
-                  <div className="hidden h-8 text-3xl font-semibold sm:block">
-                    {siteMetadata.headerTitle}
+                  <div className="hidden h-8 ml-3 text-4xl font-bold sm:block ">
+                    <TypingEffect/>
                   </div>
                 ) : (
                   siteMetadata.headerTitle
diff --git a/components/NewsletterForm.js b/components/NewsletterForm.js
index 9c99f30..ff1c81d 100644
--- a/components/NewsletterForm.js
+++ b/components/NewsletterForm.js
@@ -44,7 +44,7 @@ const NewsletterForm = ({ title = 'Subscribe to the newsletter' }) => {
           </label>
           <input
             autoComplete="email"
-            className="w-72 rounded-md px-4 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-primary-600 dark:bg-black"
+            className="w-72 rounded-md px-4 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-lime-600 dark:bg-black"
             id="email-input"
             name="email"
             placeholder={subscribed ? "You're subscribed !  🎉" : 'Enter your email'}
@@ -56,9 +56,9 @@ const NewsletterForm = ({ title = 'Subscribe to the newsletter' }) => {
         </div>
         <div className="mt-2 flex w-full rounded-md shadow-sm sm:mt-0 sm:ml-3">
           <button
-            className={`w-full rounded-md bg-primary-500 py-2 px-4 font-medium text-white sm:py-0 ${
-              subscribed ? 'cursor-default' : 'hover:bg-primary-700 dark:hover:bg-primary-400'
-            } focus:outline-none focus:ring-2 focus:ring-primary-600 focus:ring-offset-2 dark:ring-offset-black`}
+            className={`w-full rounded-md bg-lime-500 py-2 px-4 font-medium text-white sm:py-0 ${
+              subscribed ? 'cursor-default' : 'hover:bg-lime-700 dark:hover:bg-lime-400'
+            } focus:outline-none focus:ring-2 focus:ring-lime-600 focus:ring-offset-2 dark:ring-offset-black`}
             type="submit"
             disabled={subscribed}
           >
diff --git a/components/Tag.js b/components/Tag.js
index c9ace4b..3eb7d7a 100644
--- a/components/Tag.js
+++ b/components/Tag.js
@@ -4,7 +4,7 @@ import kebabCase from '@/lib/utils/kebabCase'
 const Tag = ({ text }) => {
   return (
     <Link href={`/tags/${kebabCase(text)}`}>
-      <a className="dark:text-secondary-400 dark:hover:text-secondary-500 font-semibold mr-2  py-1 text-xs uppercase text-primary-500 no-underline hover:text-primary-600 ">
+      <a className="dark:hover:text-lime-600 font-semibold mr-2  py-1 text-sm  dark:text-lime-400  text-red-400 no-underline hover:text-lime-600 ">
         {text.split(' ').join('-')}
       </a>
     </Link>
diff --git a/components/TypingEffect.js b/components/TypingEffect.js
new file mode 100644
index 0000000..db11a86
--- /dev/null
+++ b/components/TypingEffect.js
@@ -0,0 +1,15 @@
+import Typewriter from 'typewriter-effect'; 
+  
+export default function TypingEffect() { 
+  return ( 
+    <div> 
+      <Typewriter
+  options={{
+    strings: ['Janesce', 'Janescience'],
+    autoStart: true,
+    loop: true,
+  }}
+/>
+    </div> 
+  ); 
+}
\ No newline at end of file
diff --git a/css/prism.css b/css/prism.css
index 9a371f1..84a6725 100644
--- a/css/prism.css
+++ b/css/prism.css
@@ -32,7 +32,7 @@
 }
 
 .highlight-line {
-  @apply -mx-4 border-l-4 border-primary-500  bg-gray-700 bg-opacity-50;
+  @apply -mx-4 border-l-4 border-lime-500  bg-gray-700 bg-opacity-50;
 }
 
 .line-number::before {
diff --git a/css/tailwind.css b/css/tailwind.css
index 85c6b43..a3fbaf2 100644
--- a/css/tailwind.css
+++ b/css/tailwind.css
@@ -24,5 +24,3 @@ input:-webkit-autofill:focus {
   transition: background-color 600000s 0s, color 600000s 0s;
 }
 
-@import url('https://fonts.googleapis.com/css2?family=Mitr:wght@200;300;400&display=swap');
-
diff --git a/data/jane.png b/data/jane.png
new file mode 100644
index 0000000..38bda2c
Binary files /dev/null and b/data/jane.png differ
diff --git a/layouts/ListBlogLayout.js b/layouts/ListBlogLayout.js
index 4f193e9..0c359f9 100644
--- a/layouts/ListBlogLayout.js
+++ b/layouts/ListBlogLayout.js
@@ -33,7 +33,7 @@ export default function ListLayout({ posts, title,subTitle, initialDisplayPosts
               type="text"
               onChange={(e) => setSearchValue(e.target.value)}
               placeholder="Search articles"
-              className="block w-full rounded-md border border-gray-300 bg-white px-4 py-2 text-gray-900 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-900 dark:bg-gray-800 dark:text-gray-100"
+              className="block w-full rounded-md border border-gray-300 bg-white px-4 py-2 text-gray-900 focus:border-lime-500 focus:ring-lime-500 dark:border-gray-900 dark:bg-gray-800 dark:text-gray-100"
             />
             <svg
               className="absolute right-3 top-3 h-5 w-5 text-gray-400 dark:text-gray-300"
diff --git a/layouts/ListNoteLayout.js b/layouts/ListNoteLayout.js
index b7f4b4e..dc3873f 100644
--- a/layouts/ListNoteLayout.js
+++ b/layouts/ListNoteLayout.js
@@ -33,7 +33,7 @@ export default function ListLayout({ posts, title,subTitle, initialDisplayPosts
               type="text"
               onChange={(e) => setSearchValue(e.target.value)}
               placeholder="Search articles"
-              className="block w-full rounded-md border border-gray-300 bg-white px-4 py-2 text-gray-900 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-900 dark:bg-gray-800 dark:text-gray-100"
+              className="block w-full rounded-md border border-gray-300 bg-white px-4 py-2 text-gray-900 focus:border-lime-500 focus:ring-lime-500 dark:border-gray-900 dark:bg-gray-800 dark:text-gray-100"
             />
             <svg
               className="absolute right-3 top-3 h-5 w-5 text-gray-400 dark:text-gray-300"
diff --git a/layouts/PostLayout.js b/layouts/PostLayout.js
index 6cd6616..ff165de 100644
--- a/layouts/PostLayout.js
+++ b/layouts/PostLayout.js
@@ -73,7 +73,7 @@ export default function PostLayout({ frontMatter, authorDetails, next, prev, chi
                           {author.twitter && (
                             <Link
                               href={author.twitter}
-                              className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
+                              className="text-lime-500 hover:text-lime-600 dark:hover:text-lime-400"
                             >
                               {author.twitter.replace('https://twitter.com/', '@')}
                             </Link>
@@ -117,7 +117,7 @@ export default function PostLayout({ frontMatter, authorDetails, next, prev, chi
                         <h2 className="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">
                           Previous Article
                         </h2>
-                        <div className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400">
+                        <div className="text-lime-500 hover:text-lime-600 dark:hover:text-lime-400">
                           <Link href={`/blog/${prev.slug}`}>{prev.title}</Link>
                         </div>
                       </div>
@@ -127,7 +127,7 @@ export default function PostLayout({ frontMatter, authorDetails, next, prev, chi
                         <h2 className="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">
                           Next Article
                         </h2>
-                        <div className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400">
+                        <div className="text-lime-500 hover:text-lime-600 dark:hover:text-lime-400">
                           <Link href={`/blog/${next.slug}`}>{next.title}</Link>
                         </div>
                       </div>
@@ -138,7 +138,7 @@ export default function PostLayout({ frontMatter, authorDetails, next, prev, chi
               <div className="pt-4 xl:pt-8">
                 <Link
                   href="/blog"
-                  className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
+                  className="text-lime-500 hover:text-lime-600 dark:hover:text-lime-400"
                 >
                   &larr; Back to the blog
                 </Link>
diff --git a/layouts/PostSimple.js b/layouts/PostSimple.js
index 07c510f..61e50d1 100644
--- a/layouts/PostSimple.js
+++ b/layouts/PostSimple.js
@@ -45,7 +45,7 @@ export default function PostLayout({ frontMatter, authorDetails, next, prev, chi
                   <div className="pt-4 xl:pt-8">
                     <Link
                       href={`/blog/${prev.slug}`}
-                      className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
+                      className="text-lime-500 hover:text-lime-600 dark:hover:text-lime-400"
                     >
                       &larr; {prev.title}
                     </Link>
@@ -55,7 +55,7 @@ export default function PostLayout({ frontMatter, authorDetails, next, prev, chi
                   <div className="pt-4 xl:pt-8">
                     <Link
                       href={`/blog/${next.slug}`}
-                      className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
+                      className="text-lime-500 hover:text-lime-600 dark:hover:text-lime-400"
                     >
                       {next.title} &rarr;
                     </Link>
diff --git a/package-lock.json b/package-lock.json
index c4fd5ef..9f06ec9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "1.5.4",
       "dependencies": {
         "@fontsource/inter": "4.5.2",
+        "@fontsource/mitr": "^5.0.8",
         "@mailchimp/mailchimp_marketing": "^3.0.58",
         "@tailwindcss/forms": "^0.4.0",
         "@tailwindcss/typography": "^0.5.0",
@@ -37,6 +38,7 @@
         "sharp": "^0.28.3",
         "smoothscroll-polyfill": "^0.4.4",
         "tailwindcss": "^3.0.23",
+        "typewriter-effect": "^2.21.0",
         "unist-util-visit": "^4.0.0"
       },
       "devDependencies": {
@@ -2084,6 +2086,11 @@
       "resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-4.5.2.tgz",
       "integrity": "sha512-4LLfZYr5dRsobtC9JNkATL5OwOqrxs2tF29eNljjogxWXm4tlHxRo4dgOFTlWxQOxcj5Zv7dM8IMiSoOqMGy3g=="
     },
+    "node_modules/@fontsource/mitr": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/@fontsource/mitr/-/mitr-5.0.8.tgz",
+      "integrity": "sha512-7w8wPPa3yjQLvIGR+XVM+VRLc9j2Ul9Kk1mHGvoza6oC77vCduUoc5Ak3npQ1+XBKvVSMJY+F5PutN7Av0cdCg=="
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.5.0.tgz",
@@ -10744,6 +10751,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/performance-now": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+      "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow=="
+    },
     "node_modules/periscopic": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/periscopic/-/periscopic-3.1.0.tgz",
@@ -11054,7 +11066,6 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
       "dependencies": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -11142,6 +11153,14 @@
         }
       ]
     },
+    "node_modules/raf": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
+      "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
+      "dependencies": {
+        "performance-now": "^2.1.0"
+      }
+    },
     "node_modules/randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -11226,8 +11245,7 @@
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "dev": true
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
     "node_modules/read-cache": {
       "version": "1.0.0",
@@ -13695,6 +13713,19 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/typewriter-effect": {
+      "version": "2.21.0",
+      "resolved": "https://registry.npmjs.org/typewriter-effect/-/typewriter-effect-2.21.0.tgz",
+      "integrity": "sha512-Y3VL1fuJpUBj0gS4OTXBLzy1gnYTYaBuVuuO99tGNyTkkub5CXi+b/hsV7Og9fp6HlhogOwWJwgq7iXI5sQlEg==",
+      "dependencies": {
+        "prop-types": "^15.8.1",
+        "raf": "^3.4.1"
+      },
+      "peerDependencies": {
+        "react": "^17.x || ^18.x",
+        "react-dom": "^17.x || ^18.x"
+      }
+    },
     "node_modules/uglify-js": {
       "version": "3.17.4",
       "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.17.4.tgz",
diff --git a/package.json b/package.json
index 4f39b75..b3f5e64 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@fontsource/inter": "4.5.2",
+    "@fontsource/mitr": "^5.0.8",
     "@mailchimp/mailchimp_marketing": "^3.0.58",
     "@tailwindcss/forms": "^0.4.0",
     "@tailwindcss/typography": "^0.5.0",
@@ -41,6 +42,7 @@
     "sharp": "^0.28.3",
     "smoothscroll-polyfill": "^0.4.4",
     "tailwindcss": "^3.0.23",
+    "typewriter-effect": "^2.21.0",
     "unist-util-visit": "^4.0.0"
   },
   "devDependencies": {
diff --git a/pages/_app.js b/pages/_app.js
index 342cb2f..ad54cf4 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -2,7 +2,7 @@ import '@/css/tailwind.css'
 import '@/css/prism.css'
 import 'katex/dist/katex.css'
 
-import '@fontsource/inter/variable-full.css'
+import '@fontsource/mitr'
 
 import { ThemeProvider } from 'next-themes'
 import Head from 'next/head'
@@ -21,7 +21,7 @@ export default function App({ Component, pageProps }) {
         <meta content="width=device-width, initial-scale=1" name="viewport" />
       </Head>
       {isDevelopment && isSocket && <ClientReload />}
-      <LayoutWrapper>
+      <LayoutWrapper >
         <Component {...pageProps} />
       </LayoutWrapper>
     </ThemeProvider>
diff --git a/pages/index.js b/pages/index.js
index 0ec261c..40164f0 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -55,12 +55,15 @@ export default function Home({ posts }) {
                         {title}
                       </Link>
                     </h2>
-                    <div className="flex items-center ">
-                      {tags.map((tag) => (
-                        <Tag key={tag} text={tag} />
-                      ))}
+                    <div className="flex items-center justify-between">
+                      <div>
+                        {tags.map((tag) => (
+                          <Tag key={tag} text={tag} />
+                        ))}
+                      </div>
                       
-                      <dd className="text-xs ml-1 text-gray-500 p-1 dark:text-gray-300 ">
+                      
+                      <dd className="text-xs ml-1 font-thin text-gray-400 p-1 dark:text-gray-500 ">
                         <time dateTime={date}>{formatDate(date)}</time>
                       </dd>
                     </div>
@@ -75,7 +78,7 @@ export default function Home({ posts }) {
         <div className="flex justify-end text-base font-medium leading-6">
           <Link
             href="/blog"
-            className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
+            className="text-lime-500 hover:text-lime-600 dark:hover:text-lime-400"
             aria-label="all posts"
           >
             All Posts &rarr;
diff --git a/public/static/favicons/android-chrome-192x192.png b/public/static/favicons/android-chrome-192x192.png
index e0f1675..bdbf58d 100644
Binary files a/public/static/favicons/android-chrome-192x192.png and b/public/static/favicons/android-chrome-192x192.png differ
diff --git a/public/static/favicons/android-chrome-512x512.png b/public/static/favicons/android-chrome-512x512.png
index 5039fea..daa3c46 100644
Binary files a/public/static/favicons/android-chrome-512x512.png and b/public/static/favicons/android-chrome-512x512.png differ
diff --git a/public/static/favicons/apple-touch-icon.png b/public/static/favicons/apple-touch-icon.png
index 171e8e6..1e1f966 100644
Binary files a/public/static/favicons/apple-touch-icon.png and b/public/static/favicons/apple-touch-icon.png differ
diff --git a/public/static/favicons/favicon-16x16.png b/public/static/favicons/favicon-16x16.png
index c9c95e4..7d181ac 100644
Binary files a/public/static/favicons/favicon-16x16.png and b/public/static/favicons/favicon-16x16.png differ
diff --git a/public/static/favicons/favicon-32x32.png b/public/static/favicons/favicon-32x32.png
index 25fa8cb..6094b10 100644
Binary files a/public/static/favicons/favicon-32x32.png and b/public/static/favicons/favicon-32x32.png differ
diff --git a/public/static/favicons/favicon.ico b/public/static/favicons/favicon.ico
index 70518e2..0feaf9d 100644
Binary files a/public/static/favicons/favicon.ico and b/public/static/favicons/favicon.ico differ
diff --git a/tailwind.config.js b/tailwind.config.js
index 8e387dc..b0913a4 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -27,6 +27,19 @@ module.exports = {
       fontFamily: {
         sans: 'Mitr, sans-serif',
       },
+      fontSize:{
+               'xs': '.75rem',
+       'sm': '.875rem',
+        'base': '1.1rem',
+        'lg': '1.125rem',
+        'xl': '1.25rem',
+        '2xl': '1.5rem',
+       '3xl': '1.875rem',
+       '4xl': '2.25rem',
+        '5xl': '3rem',
+        '6xl': '4rem',
+       '7xl': '5rem',
+      },
       colors: {
         primary: colors.teal,
         gray: colors.neutral,
@@ -34,13 +47,23 @@ module.exports = {
       typography: (theme) => ({
         DEFAULT: {
           css: {
+            ul:{
+              fontSize : '20px'
+            },
+            ol:{
+              fontSize : '20px'
+            },
+            p:{
+              fontSize : '20px',
+              fontWeight: '100',
+            },
             color: theme('colors.gray.700'),
             a: {
-              color: theme('colors.primary.500'),
+              color: theme('colors.lime.500'),
               '&:hover': {
-                color: `${theme('colors.primary.600')} !important`,
+                color: `${theme('colors.lime.600')} !important`,
               },
-              code: { color: theme('colors.primary.400') },
+              code: { color: theme('colors.lime.400') },
             },
             h1: {
               fontWeight: '700',
@@ -104,11 +127,11 @@ module.exports = {
           css: {
             color: theme('colors.gray.300'),
             a: {
-              color: theme('colors.primary.500'),
+              color: theme('colors.lime.500'),
               '&:hover': {
-                color: `${theme('colors.primary.400')} !important`,
+                color: `${theme('colors.lime.400')} !important`,
               },
-              code: { color: theme('colors.primary.400') },
+              code: { color: theme('colors.lime.400') },
             },
             h1: {
               fontWeight: '700',