diff --git a/app/routes/index.tsx b/app/routes/index.tsx
index 99d1eda..9f505dd 100644
--- a/app/routes/index.tsx
+++ b/app/routes/index.tsx
@@ -18,7 +18,7 @@ export const meta: MetaFunction = () => {
 
 export default function Index() {
   return (
-    <div>
+    <div className="fade-in">
       <HeaderBar
         title="A frontend developer with an interest in design, specialising in web
         technology"
diff --git a/app/routes/now.tsx b/app/routes/now.tsx
index 625fe38..7199447 100644
--- a/app/routes/now.tsx
+++ b/app/routes/now.tsx
@@ -18,7 +18,7 @@ export const meta: MetaFunction = () => {
 
 export default function Thoughts() {
   return (
-    <div className="now-page">
+    <div className="now-page fade-in">
       <HeaderBar title="What im doing now" />
       <ul>
         <li>
diff --git a/app/routes/posts/$postId.tsx b/app/routes/posts/$postId.tsx
index 02ba518..bc18c9c 100644
--- a/app/routes/posts/$postId.tsx
+++ b/app/routes/posts/$postId.tsx
@@ -43,7 +43,7 @@ export const loader: LoaderFunction = async ({ params }) => {
 export default function PostRoute() {
   const data = useLoaderData<LoaderData>();
   return (
-    <div className="post-page">
+    <div className="post-page fade-in">
       <HeaderBar title={data.post.title} />
       <div dangerouslySetInnerHTML={{ __html: data.post.content }} />
     </div>
diff --git a/app/routes/thoughts.tsx b/app/routes/thoughts.tsx
index 345813d..7e97a25 100644
--- a/app/routes/thoughts.tsx
+++ b/app/routes/thoughts.tsx
@@ -47,7 +47,7 @@ export const loader: LoaderFunction = async () => {
 export default function Thoughts() {
   const data = useLoaderData<LoaderData>();
   return (
-    <div>
+    <div className="fade-in">
       <HeaderBar title="My random thoughts and ideas on tech and other things." />
       {data.postListItems.map((post) => (
         <div key={post.id} className="post">
diff --git a/app/styles/global.css b/app/styles/global.css
index fb30740..20efb82 100644
--- a/app/styles/global.css
+++ b/app/styles/global.css
@@ -57,6 +57,7 @@ a {
 
 a:hover,
 a:focus {
+  animation: button-animation 0.2s;
   color: var(--accent-colour);
 }
 
@@ -71,3 +72,27 @@ p {
   line-height: 30px;
   margin: 0;
 }
+
+.fade-in {
+  animation: fade-in 0.3s ease-in;
+}
+
+@keyframes button-animation {
+  from {
+    color: var(--header-colour);
+  }
+  to {
+    color: var(--accent-colour);
+  }
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(1vh);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}