diff --git a/components/common/NavBar.tsx b/components/common/NavBar.tsx
index 04afd73..65ee3a1 100644
--- a/components/common/NavBar.tsx
+++ b/components/common/NavBar.tsx
@@ -13,7 +13,7 @@ function NavBar({ options }: NavProps) {
   const [isActive, setActive] = useState(false);
   return (
     <m.div
-      className="pointer-events-none fixed inline-grid w-screen grid-cols-2 bg-zinc-900 font-plusJakarta text-xl sm:text-2xl lg:grid-cols-3"
+      className="pointer-events-none fixed z-50 inline-grid w-screen grid-cols-2 bg-zinc-900 bg-opacity-90 font-plusJakarta text-2xl lg:grid-cols-3"
       variants={containerVariants}
       initial="initial"
       animate="animate"
@@ -24,13 +24,13 @@ function NavBar({ options }: NavProps) {
       >
         <m.div className="ml-4 mr-4 sm:m-0" variants={logoContainerVariants}>
           <Link
-            key="InvestBotImg"
+            key="toffeeImg"
             href="/"
             className="pointer-events-auto flex flex-row items-center justify-center"
           >
             <Image
               src="/img/logo.webp"
-              alt="InvestBot Logo"
+              alt="toffee logo"
               width={64}
               height={64}
               className="mr-8 rounded-b-full"
@@ -39,26 +39,26 @@ function NavBar({ options }: NavProps) {
         </m.div>
         <div className="pointer-events-auto flex select-none flex-col items-start justify-center pr-2 font-plusJakarta text-white sm:pr-5">
           <Link
-            key="InvestBot"
+            key="toffee"
             href="/"
             className="hidden flex-row items-center justify-center sm:flex"
           >
-            InvestBot
+            toffee
           </Link>
           <h1
-            className="flex cursor-pointer flex-row items-center justify-center sm:hidden"
+            className="mr-3 flex cursor-pointer flex-row items-center justify-center sm:mr-auto sm:hidden"
             onClick={() => {
               setActive(!isActive);
             }}
           >
-            InvestBot
+            toffee
           </h1>
           <p className="hidden text-xs text-gray-400 sm:block">
             Serving anny&apos;s community est. 2022
           </p>
         </div>
         <m.svg
-          className="pointer-events-auto cursor-pointer lg:hidden"
+          className="pointer-events-auto mt-2 cursor-pointer lg:hidden"
           origin="center"
           width="25"
           height="26"
@@ -98,7 +98,7 @@ function NavBar({ options }: NavProps) {
         {isActive && (
           <m.div
             // hiddden by default, when active is true, animate in
-            className="pointer-events-auto z-10 flex w-screen flex-col items-center overflow-hidden bg-zinc-800 bg-opacity-70 pt-5 backdrop-blur lg:hidden"
+            className="pointer-events-auto z-10 flex w-screen flex-col items-center overflow-hidden bg-zinc-800 bg-opacity-70 pt-5 lg:hidden"
             // have it take up the entire screen, animate in by expanding from the bottom of the nav bar to the bottom of the screen
             variants={mobileContainerVariants}
             initial="initial"
@@ -159,11 +159,11 @@ const itemVariants: Variants = {
 const logoContainerVariants: Variants = {
   initial: {
     scale: 1,
-    rotate: 0,
+    rotate: -90,
   },
   animate: {
     scale: 1,
-    rotate: 360,
+    rotate: 0,
     transition: {
       duration: 4,
       type: "spring",
diff --git a/layouts/DashLayout.tsx b/layouts/DashLayout.tsx
index 3d6536f..9235338 100644
--- a/layouts/DashLayout.tsx
+++ b/layouts/DashLayout.tsx
@@ -19,25 +19,25 @@ function DashLayout(props: DashLayoutProps) {
   const router = useRouter();
   return (
     <m.div
-      className="bg-gradient-to-t from-zinc-900 to-[#202737b6]"
+      className="bg-gradient-to-t from-zinc-900 to-[#3015457b]"
       initial="initial"
       animate="animate"
       exit="exit"
       variants={containerVariants}
     >
       <Head>
-        <title>Dashboard - InvestBot</title>
-        <meta name="description" content="Dashboard statistics for InvestBot" />
+        <title>Dashboard - toffee</title>
+        <meta name="description" content="Dashboard statistics for toffee" />
         <link rel="icon" href="/favicon.ico" />
         <meta name="theme-color" content="#c084fc" />
-        <meta property="og:title" content="InvestBot" />
+        <meta property="og:title" content="toffee" />
         <meta
           property="og:description"
           content="Serving anny's community est. 2022"
         />
         <meta property="og:image" content="/img/logo.webp" />
         <meta property="og:type" content="website" />
-        <meta property="og:site_name" content="InvestBot" />
+        <meta property="og:site_name" content="toffee" />
       </Head>
 
       <div className="flex h-screen w-screen flex-col overflow-hidden lg:flex-row">
diff --git a/layouts/HomeLayout.tsx b/layouts/HomeLayout.tsx
index da130f1..3606082 100644
--- a/layouts/HomeLayout.tsx
+++ b/layouts/HomeLayout.tsx
@@ -30,18 +30,18 @@ function HomeLayout(props: HomeLayoutProps) {
       variants={containerVariants}
     >
       <Head>
-        <title>InvestBot</title>
+        <title>toffee</title>
         <meta name="description" content="Serving anny's community est. 2022" />
         <link rel="icon" href="/favicon.ico" />
         <meta name="theme-color" content="#c084fc" />
-        <meta property="og:title" content="InvestBot" />
+        <meta property="og:title" content="toffee" />
         <meta
           property="og:description"
           content="Serving anny's community est. 2022"
         />
         <meta property="og:image" content="/img/logo.webp" />
         <meta property="og:type" content="website" />
-        <meta property="og:site_name" content="InvestBot" />
+        <meta property="og:site_name" content="toffee" />
       </Head>
 
       <LazyMotion features={domAnimation}>
diff --git a/pages/about.tsx b/pages/about.tsx
index 31ac4db..c3cc05e 100644
--- a/pages/about.tsx
+++ b/pages/about.tsx
@@ -7,7 +7,7 @@ function About() {
   return (
     <>
       <Head>
-        <title>About - InvestBot</title>
+        <title>About - toffee</title>
       </Head>
       <div className="flex min-h-screen flex-col items-center justify-center py-2">
         <p>about</p>
diff --git a/pages/contact.tsx b/pages/contact.tsx
index 1440cf4..24a1fe9 100644
--- a/pages/contact.tsx
+++ b/pages/contact.tsx
@@ -7,7 +7,7 @@ function About() {
   return (
     <>
       <Head>
-        <title>Contact - InvestBot</title>
+        <title>Contact - toffee</title>
       </Head>
       <div className="flex min-h-screen flex-col items-center justify-center py-2">
         <p>contact</p>
diff --git a/pages/dashboard/index.tsx b/pages/dashboard/index.tsx
index 8ad0a5a..92e64e3 100644
--- a/pages/dashboard/index.tsx
+++ b/pages/dashboard/index.tsx
@@ -8,7 +8,7 @@ function Dashboard() {
   return (
     <>
       <Head>
-        <title>Dashboard - InvestBot</title>
+        <title>Dashboard - toffee</title>
       </Head>
       <m.div
         className="inline-grid w-full grid-cols-1 pt-2 pl-2 lg:h-full lg:grid-cols-5 lg:pl-0 lg:pr-2"
diff --git a/pages/dashboard/ranking.tsx b/pages/dashboard/ranking.tsx
index 6428f23..832718d 100644
--- a/pages/dashboard/ranking.tsx
+++ b/pages/dashboard/ranking.tsx
@@ -75,7 +75,7 @@ function Ranking() {
   return (
     <>
       <Head>
-        <title>Ranking - InvestBot</title>
+        <title>Ranking - toffee</title>
       </Head>
       <div className="flex w-full justify-center">
         <div className="ml-3 flex w-full flex-col items-center justify-start font-robotoMono font-semibold lg:ml-0">
@@ -146,10 +146,13 @@ function Ranking() {
             {
               // if data is not loaded, loading div
               !dataLoaded ? (
-                <div className="mt-5 flex h-[100vh] w-full flex-col items-center justify-start">
+                <m.div
+                  className="mt-5 flex h-[100vh] w-full flex-col items-center justify-start"
+                  variants={rankingDataContainerVariants}
+                >
                   <Loading />
                   <h1 className="my-5">This is fake delay :)</h1>
-                </div>
+                </m.div>
               ) : (
                 <m.div
                   initial="initial"
diff --git a/pages/index.tsx b/pages/index.tsx
index bb4c830..197ffd0 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -54,7 +54,7 @@ const Home: NextPageWithLayout = () => {
   let slideShow = (
     <Image
       src="/img/logo.webp"
-      alt="InvestBot Logo"
+      alt="toffee Logo"
       width={128}
       height={128}
       className="ml-4 mr-6"
@@ -76,34 +76,52 @@ const Home: NextPageWithLayout = () => {
   return (
     <>
       <Head>
-        <title>Home - InvestBot</title>
+        <title>Home - toffee</title>
       </Head>
       <div className="flex h-full w-full flex-col items-center justify-center">
         <div className="inline-grid grid-cols-1 gap-10 text-white md:grid-cols-3">
           <m.div
-            className="flex flex-col font-plusJakarta text-7xl font-semibold sm:text-8xl md:col-span-2"
+            className="flex flex-col from-purple-400 to-pink-600 font-plusJakarta text-7xl font-semibold sm:text-8xl md:col-span-2"
             variants={sloganContainerVariants}
             initial="initial"
             animate="animate"
           >
             <m.div
-              className="bg-gradient-to-r from-purple-400 to-pink-600 bg-clip-text p-3 text-transparent"
+              className="flex flex-row items-center"
               variants={sloganHeaderVariants}
             >
-              <h1>Buy high</h1>
+              <h1 className="bg-gradient-to-b bg-clip-text text-transparent">
+                t
+              </h1>
+              <h1>ax-free</h1>
             </m.div>
             <m.div
-              className="bg-gradient-to-r from-purple-400 to-pink-600 bg-clip-text p-3 text-transparent"
+              className="flex flex-row items-center"
               variants={sloganHeaderVariants}
             >
-              <h1>Sell low</h1>
+              <h1 className="bg-gradient-to-tl bg-clip-text text-transparent">
+                off
+              </h1>
+              <h1>line</h1>
             </m.div>
-            <m.h2
-              className="pt-2 text-sm font-medium text-gray-200"
-              variants={sloganSecondaryVariants}
+            <m.div
+              className="flex flex-row items-center"
+              variants={sloganHeaderVariants}
             >
-              ...or something like that
-            </m.h2>
+              <h1 className="bg-gradient-to-l bg-clip-text text-transparent">
+                e
+              </h1>
+              <h1>mote</h1>
+            </m.div>
+            <m.div
+              className="flex flex-row items-center"
+              variants={sloganHeaderVariants}
+            >
+              <h1 className="bg-gradient-to-bl bg-clip-text text-transparent">
+                e
+              </h1>
+              <h1>xchange</h1>
+            </m.div>
           </m.div>
           <m.div
             className="flex items-center justify-center"
@@ -112,6 +130,17 @@ const Home: NextPageWithLayout = () => {
             animate="animate"
           >
             {slideShow}
+            <m.div
+              className="fixed"
+              variants={sloganSecondaryContainerVariants}
+            >
+              <m.h2
+                className="font-minecraft text-sm font-normal text-yellow-300 drop-shadow-[0_2px_2px_rgba(0,0,0,0.99)]"
+                variants={sloganSecondaryVariants}
+              >
+                currently in development!
+              </m.h2>
+            </m.div>
           </m.div>
         </div>
       </div>
@@ -133,8 +162,8 @@ const sloganContainerVariants = {
       type: "spring",
       bounce: 0.5,
       stiffness: 150,
-      delayChildren: 0.5,
-      staggerChildren: 1.0,
+      delayChildren: 1.0,
+      staggerChildren: 0.45,
     },
   },
 };
@@ -148,14 +177,27 @@ const sloganHeaderVariants = {
   },
 };
 
-const sloganSecondaryVariants = {
+const sloganSecondaryContainerVariants = {
   initial: {
     opacity: 0,
+    rotate: 0,
   },
   animate: {
     opacity: 1,
+    rotate: -15,
     transition: {
       delay: 3.5,
+      duration: 1.0,
+    },
+  },
+};
+
+const sloganSecondaryVariants = {
+  animate: {
+    fontSize: ["1.5rem", "1.575rem", "1.5rem"],
+    transition: {
+      duration: 0.5,
+      repeat: Infinity,
     },
   },
 };
diff --git a/pages/team.tsx b/pages/team.tsx
index 17b023f..935bb55 100644
--- a/pages/team.tsx
+++ b/pages/team.tsx
@@ -9,7 +9,7 @@ function Team() {
   return (
     <>
       <Head>
-        <title>Team - InvestBot</title>
+        <title>Team - toffee</title>
       </Head>
       <div className="flex min-h-screen flex-col items-center justify-center py-2">
         <m.div
@@ -87,7 +87,7 @@ const containerVariants: Variants = {
     transition: {
       duration: 2,
       delayChildren: 0.5,
-      staggerChildren: 0.25,
+      staggerChildren: 0.2,
       type: "spring",
       bounce: 0.5,
       stiffness: 80,
diff --git a/public/favicon.ico b/public/favicon.ico
index 3ceb202..0cf083f 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/public/img/logo.webp b/public/img/logo.webp
index 740f4d7..65899c5 100644
Binary files a/public/img/logo.webp and b/public/img/logo.webp differ
diff --git a/styles/globals.css b/styles/globals.css
index 3f3f1af..6333c3b 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -1,6 +1,7 @@
 @import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap");
 @import url("https://fonts.googleapis.com/css?family=Roboto+Mono:300,400,500,700&display=swap");
 @import url("https://fonts.googleapis.com/css?family=Plus+Jakarta+Sans:300,400,500,700&display=swap");
+@import url("https://fonts.cdnfonts.com/css/minecraft-3");
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
diff --git a/tailwind.config.js b/tailwind.config.js
index 6f239a7..325ade7 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -11,6 +11,7 @@ module.exports = {
         roboto: ["Roboto", "sans-serif"],
         plusJakarta: ["Plus Jakarta Sans", "sans-serif"],
         robotoMono: ["Roboto Mono", "monospace"],
+        minecraft: ["Minecraft", "Roboto", "sans-serif"],
       },
     },
   },
