diff --git a/README.md b/README.md
index 5b30a70..1defe5d 100644
--- a/README.md
+++ b/README.md
@@ -8,10 +8,8 @@ This is the latest iteration of my personal site built with [Next.js](https://ne
 - Home
 
   - Contrast on Pebblepad
-  - View code animations
 
 - Timeline
 
-  - Animations for posts
-  - Accessability for posts
+  - Accessability for posts and nav
   - Implement ability to add different types of posts
diff --git a/components/Icons/RightArrowIcon.tsx b/components/Icons/RightArrowIcon.tsx
index 50a26af..f72025b 100644
--- a/components/Icons/RightArrowIcon.tsx
+++ b/components/Icons/RightArrowIcon.tsx
@@ -1,3 +1,5 @@
+import { motion } from "framer-motion";
+
 type RightArrowIconProps = {
   className?: string;
 };
@@ -16,7 +18,7 @@ function RightArrowIcon({ className }: RightArrowIconProps) {
       className={className}
       viewBox="0 0 24 24"
     >
-      <path d="M5 12h14m-7-7l7 7-7 7"></path>
+      <motion.path d="M5 12h14m-7-7l7 7-7 7" variants={{ idle: { rotate: 0 }, hover: { rotate: -20 } }}></motion.path>
     </svg>
   );
 }
diff --git a/components/NavBar/NavBar.tsx b/components/NavBar/NavBar.tsx
index ecdfcd1..da293c3 100644
--- a/components/NavBar/NavBar.tsx
+++ b/components/NavBar/NavBar.tsx
@@ -17,15 +17,10 @@ function NavBar() {
 
   return (
     <nav className={styles.nav}>
-      <a onClick={homeClick} onKeyDown={homeClick} style={router.pathname === "/" ? style : null} tabIndex={0}>
+      <a onClick={homeClick} style={router.pathname === "/" ? style : null} tabIndex={0}>
         Home
       </a>
-      <a
-        onClick={postsClick}
-        onKeyDown={postsClick}
-        style={router.pathname === "/timeline" ? style : null}
-        tabIndex={0}
-      >
+      <a onClick={postsClick} style={router.pathname === "/timeline" ? style : null} tabIndex={0}>
         Timeline
       </a>
     </nav>
diff --git a/components/ProjectCard/ProjectCard.tsx b/components/ProjectCard/ProjectCard.tsx
index 2360096..9d6679c 100644
--- a/components/ProjectCard/ProjectCard.tsx
+++ b/components/ProjectCard/ProjectCard.tsx
@@ -1,3 +1,4 @@
+import { motion } from "framer-motion";
 import RightArrowIcon from "../Icons/RightArrowIcon";
 import styles from "./ProjectCard.module.css";
 
@@ -15,9 +16,16 @@ function ProjectCard({ header, desc, link, image, imageAlt }: ProjectCardProps)
       <div>
         <h2>{header}</h2>
         <p>{desc}</p>
-        <a href={link} target="_blank" rel="noopener noreferrer">
+        <motion.a
+          href={link}
+          target="_blank"
+          rel="noopener noreferrer"
+          initial="idle"
+          whileHover="hover"
+          whileFocus="hover"
+        >
           View Code <RightArrowIcon className={styles.icon} />
-        </a>
+        </motion.a>
       </div>
       {image ? <img src={image} alt={imageAlt} width="288" height="88"></img> : null}
     </div>
diff --git a/components/TimeLinePost/TimeLinePost.tsx b/components/TimeLinePost/TimeLinePost.tsx
index f851ca5..10b9523 100644
--- a/components/TimeLinePost/TimeLinePost.tsx
+++ b/components/TimeLinePost/TimeLinePost.tsx
@@ -1,4 +1,5 @@
 import Link from "next/link";
+import { motion } from "framer-motion";
 import PostIcon from "../Icons/PostIcon";
 import styles from "./TimeLinePost.module.css";
 
@@ -14,10 +15,19 @@ function TimeLinePost({ post }) {
       <div className={styles.content}>
         <p className={styles.info}>New Post - {post.data.date}</p>
         <Link as={`/posts/${post.filePath.replace(/\.mdx?$/, "")}`} href="/posts/[slug]">
-          <div className={styles.card}>
+          <motion.div
+            className={styles.card}
+            tabIndex={0}
+            initial="rest"
+            whileHover="hover"
+            whileFocus="hover"
+            whileTap="hover"
+            variants={{ hover: { scale: 1.1 }, rest: { scale: 1 } }}
+            transition={{ duration: 0.2 }}
+          >
             <p className={styles.header}>{post.data.title}</p>
             <p className={styles.desc}>{post.data.description}</p>
-          </div>
+          </motion.div>
         </Link>
       </div>
     </div>
diff --git a/pages/index.tsx b/pages/index.tsx
index 45cae3b..b364d0d 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,4 +1,5 @@
 import Head from "next/head";
+import { motion } from "framer-motion";
 import { GreenBlob, LightBlueBlob, LightPurpleBlob, PurpleBlob, YellowBlob } from "../components/Blobs/Blobs";
 import Bio from "../components/Bio/Bio";
 import RightArrowIcon from "../components/Icons/RightArrowIcon";
@@ -45,9 +46,16 @@ function Home() {
             desc="A package that generates randomised sentences by providing datasets of values and specifying which parts of a sentence you wish to randomise."
             link="https://github.com/ZaphodAndo/scribejs"
           />
-          <a href="https://github.com/ZaphodAndo?tab=repositories" target="_blank" rel="noopener noreferrer">
+          <motion.a
+            href="https://github.com/ZaphodAndo?tab=repositories"
+            target="_blank"
+            rel="noopener noreferrer"
+            initial="idle"
+            whileHover="hover"
+            whileFocus="hover"
+          >
             View More <RightArrowIcon className={styles.icon} />
-          </a>
+          </motion.a>
         </div>
         <div className={styles.info}>
           <div className={styles.main}>
diff --git a/styles/Home.module.css b/styles/Home.module.css
index ba6f441..8fcee74 100644
--- a/styles/Home.module.css
+++ b/styles/Home.module.css
@@ -70,6 +70,10 @@
   margin-left: 5px;
 }
 
+.home .projects a:hover {
+  color: #56ccf2;
+}
+
 .home .info {
   position: relative;
   z-index: 1;