diff --git a/README.md b/README.md
index 7fef1a6..3673fc7 100644
--- a/README.md
+++ b/README.md
@@ -4,8 +4,8 @@ My space on web
 
 ## TODO
 
-- [ ] Add Preloader
-- [ ] Add animations (framer motion)
+- [x] Add Preloader
+- [x] Add animations (framer motion)
 - [ ] Add custom error page
 - [ ] Add custom 404 page
 - [ ] Add custom 500 page
diff --git a/src/components/Contact.tsx b/src/components/Contact.tsx
index ae6700e..fc602e8 100644
--- a/src/components/Contact.tsx
+++ b/src/components/Contact.tsx
@@ -4,7 +4,7 @@ import { Title } from './common/Title'
 export const Contact = () => {
   return (
     <section id='contact'>
-        <Title title='Contact' />
+        <Title title='Get in Touch' />
 
         <div className='text-center tracking-tighter'>
             <p className='my-4'>For any inquiries, please contact me at:</p>
diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
index 2c9ec2b..51be374 100644
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@@ -17,10 +17,10 @@ const container = (delay: number) => ({
 
 export const Hero = () => {
   return (
-    <div className="h-screen">
+    <div className="h-full pb-40">
       <div className="flex flex-wrap">
         <div className="w-full lg:w-1/2">
-          <div className="flex flex-col items-center lg:items-start mt-10 lg:mt-0">
+          <div className="flex flex-col justify-between items-center text-center lg:text-left lg:items-start mt-10 lg:mt-0">
             <motion.h1
               variants={container(0)}
               initial="hidden"
diff --git a/src/components/common/NavIcons.tsx b/src/components/common/NavIcons.tsx
index 0918b4d..dc89c25 100644
--- a/src/components/common/NavIcons.tsx
+++ b/src/components/common/NavIcons.tsx
@@ -1,28 +1,26 @@
-import React, { FC } from "react";
-import { ToolTip } from "./ToolTip";
+import { FC } from "react";
+import { motion } from "framer-motion";
 
 interface NavIconsProps {
   icons: React.ElementType;
   className?: string;
   href?: string;
-  tooltip?: string;
 }
 
 export const NavIcons: FC<NavIconsProps> = ({
   icons: ReactIconsCompoents,
   className = "",
   href = "#",
-  tooltip = "",
 }) => {
   return (
-    <ToolTip
-      content={tooltip}
-      placement="bottom"
-      className="inline-block relative"
+    <motion.a
+      whileHover={{ scale: 1.3 }}
+      rel="noreferrer noopener"
+      target="_blank"
+      href={href}
+      className="text-slate-200 hover:text-purple-300"
     >
-      <a rel="noreferrer noopener" target="_blank" href={href} className="text-fuchsia-200">
-        <ReactIconsCompoents className={className} />
-      </a>
-    </ToolTip>
+      <ReactIconsCompoents className={className} />
+    </motion.a>
   );
 };
diff --git a/src/components/common/Title.tsx b/src/components/common/Title.tsx
index c001b34..6dca4c4 100644
--- a/src/components/common/Title.tsx
+++ b/src/components/common/Title.tsx
@@ -12,10 +12,13 @@ export const Title: FC<TitleProps> = ({ title, subTitle }) => {
       whileInView={{ opacity: 1, y: 0 }}
       initial={{ opacity: 0, y: -100 }}
       transition={{ duration: 0.5 }}
-      className="mb-10 font-nasalization text-center text-4xl"
+      whileHover={{
+        scale: 1.05
+      }}
+      className="mb-10 font-nasalization text-slate-200 text-center text-4xl"
     >
       {title}
-      {subTitle && <span className="text-neutral-500"> Me</span>}
+      {subTitle && <span className="text-purple-200"> Me</span>}
     </motion.h2>
   );
 };
diff --git a/src/components/common/ToolTip.tsx b/src/components/common/ToolTip.tsx
deleted file mode 100644
index 60d7596..0000000
--- a/src/components/common/ToolTip.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-import React, { useState, useRef, useEffect } from "react";
-
-interface ToolTipProps {
-  content: string;
-  placement?: "top" | "right" | "bottom" | "left";
-  children: React.ReactNode;
-  className?: string;
-}
-
-export const ToolTip: React.FC<ToolTipProps> = ({
-  content,
-  placement = "bottom",
-  children,
-  className = "",
-}) => {
-  const [isVisible, setIsVisible] = useState(false);
-  const tooltipRef = useRef<HTMLDivElement>(null);
-
-  const handleMouseOver = () => setIsVisible(true);
-  const handleMouseOut = () => setIsVisible(false);
-
-  useEffect(() => {
-    if (tooltipRef.current && isVisible) {
-      const tooltipRect = tooltipRef.current.getBoundingClientRect();
-      const arrowElement = tooltipRef.current.querySelector(".tooltip-arrow");
-
-      if (arrowElement && arrowElement instanceof HTMLElement) {
-        // Type Guard
-        const arrow = arrowElement.style;
-
-        const adjustArrowPosition = () => {
-          switch (placement) {
-            case "top":
-              arrow.bottom = "100%";
-              arrow.left = "50%";
-              arrow.transform = "translateX(-50%)";
-              break;
-            case "right":
-              arrow.left = "100%";
-              arrow.top = "50%";
-              arrow.transform = "translateY(-50%)";
-              break;
-            case "left":
-              arrow.right = "100%";
-              arrow.top = "50%";
-              arrow.transform = "translateY(-50%)";
-              break;
-            default: // bottom
-              arrow.top = "100%";
-              arrow.left = "50%";
-              arrow.transform = "translateX(-50%)";
-          }
-        };
-        adjustArrowPosition();
-        window.addEventListener("resize", adjustArrowPosition);
-
-        return () => {
-          window.removeEventListener("resize", adjustArrowPosition);
-        };
-      }
-    }
-  }, [isVisible, placement]);
-
-  if (content.trim() === "") {
-    return <>{children}</>;
-  }
-
-  return (
-    <div
-      className={className}
-      onMouseOver={handleMouseOver}
-      onMouseOut={handleMouseOut}
-    >
-      {children}
-      <div
-        ref={tooltipRef}
-        role="tooltip"
-        className={`absolute z-10 inline-block px-3 py-2 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm tooltip dark:bg-gray-700 ${
-          isVisible ? "opacity-100" : "opacity-0"
-        }`}
-        style={{
-          top: placement === "bottom" ? "100%" : undefined,
-          bottom: placement === "top" ? "100%" : undefined,
-          left: placement === "right" ? "100%" : undefined,
-          right: placement === "left" ? "100%" : undefined,
-        }} // Dynamically set position based on placement
-      >
-        {content}
-        <div className="tooltip-arrow" data-popper-arrow></div>
-      </div>
-    </div>
-  );
-};