diff --git a/package.json b/package.json
index 99c2a4d..b2b6b3f 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "@firq/fgosite",
 	"type": "module",
-	"version": "0.2.0-pre.44",
+	"version": "0.2.0-pre.45",
 	"private": true,
 	"scripts": {
 		"dev": "astro dev",
diff --git a/src/components/cards/blogCard.astro b/src/components/cards/blogCard.astro
index f6fd8e8..2ffda36 100644
--- a/src/components/cards/blogCard.astro
+++ b/src/components/cards/blogCard.astro
@@ -27,6 +27,9 @@ const date = new Date(pubdate).toLocaleDateString('en-GB', options_date)
 </a>
 
 <style>
+  * {
+    transition: all var(--a-time-default) var(--a-animation-1);
+  }
   .circle {
     display: none;
   }
diff --git a/src/components/cards/favouriteCard.astro b/src/components/cards/favouriteCard.astro
index 0e24927..510b3b5 100644
--- a/src/components/cards/favouriteCard.astro
+++ b/src/components/cards/favouriteCard.astro
@@ -32,6 +32,10 @@ const loadedImage = plsLoadImage(images, imagePath)
 </a>
 
 <style>
+  * {
+    transition: all var(--a-time-default) var(--a-animation-1);
+  }
+
   .heading {
     display: flex;
     height: fit-content;
diff --git a/src/components/cards/servantCard.astro b/src/components/cards/servantCard.astro
index 7b9a9e8..47c933e 100644
--- a/src/components/cards/servantCard.astro
+++ b/src/components/cards/servantCard.astro
@@ -47,6 +47,7 @@ let loading: "eager" | "lazy" = index <= 3 ? "eager" : "lazy";
 
 <style>
   article:hover {
+    transition: all var(--a-time-default) var(--a-animation-1);
     transform: scale(1);
     border-color: var(--c-accent-1);
   }
@@ -82,7 +83,7 @@ let loading: "eager" | "lazy" = index <= 3 ? "eager" : "lazy";
 
   .expand-on-hover {
     background-color: var(--c-primary-background);
-    border: 2px var(--c-accent-1) solid;
+    border: 2px var(--c-primary-background) solid;
     border-top: 0px;
     z-index: 99;
     transform: scaleY(0);
@@ -95,6 +96,7 @@ let loading: "eager" | "lazy" = index <= 3 ? "eager" : "lazy";
 
   article:hover .expand-on-hover {
     transform: scaleY(1);
+    border-color: var(--c-accent-1);
     transition: all var(--a-time-default) var(--a-animation-1);
   }
 
diff --git a/src/components/cards/taCard.astro b/src/components/cards/taCard.astro
index 70ff6b3..8e210bc 100644
--- a/src/components/cards/taCard.astro
+++ b/src/components/cards/taCard.astro
@@ -57,6 +57,9 @@ const hasuser = user !== undefined ? 'display: flex' : 'display: none'
 </a>
 
 <style>
+  * {
+    transition: all var(--a-time-default) var(--a-animation-1);
+  }
   a {
     text-decoration: none;
     display: flex;
@@ -141,7 +144,7 @@ const hasuser = user !== undefined ? 'display: flex' : 'display: none'
     align-items: top;
     justify-content: space-evenly;
     background-color: var(--c-primary-background);
-    border: 2px var(--c-accent-1) solid;
+    border: 2px var(--c-primary-background) solid;
     border-top: 0px;
     z-index: 99;
     transform: scaleY(0);
@@ -168,8 +171,9 @@ const hasuser = user !== undefined ? 'display: flex' : 'display: none'
 
   a:hover .expand-on-hover {
     transform: scaleY(1);
-    transition: transform var(--a-time-default) var(--a-animation-1);
+    transition: all var(--a-time-default) var(--a-animation-1);
     background-color: var(--c-primary-background);
+    border-color: var(--c-accent-1);
   }
 
   @media (min-width: 512px) {
diff --git a/src/components/cards/technologyCard.astro b/src/components/cards/technologyCard.astro
index a7e67e8..fca882c 100644
--- a/src/components/cards/technologyCard.astro
+++ b/src/components/cards/technologyCard.astro
@@ -28,6 +28,10 @@ const loadedImage = plsLoadImage(images_logos, imagePath)
 </a>
 
 <style>
+  * {
+    transition: all var(--a-time-default) var(--a-animation-1);
+  }
+
   a {
     text-decoration: none;
   }
diff --git a/src/components/fgotaHero.astro b/src/components/fgotaHero.astro
index 1d0d6b3..c387564 100644
--- a/src/components/fgotaHero.astro
+++ b/src/components/fgotaHero.astro
@@ -41,10 +41,12 @@ const display = fadeout ? "": "display: none"
     background: var(--c-primary-background);
     border-radius: 10px;
     border: 2px var(--c-accent-1) solid;
+    transition: all var(--a-time-default) var(--a-animation-1);
   }
 
   a:hover {
     border-color: var(--c-accent-1-alt);
+    transition: all var(--a-time-default) var(--a-animation-1);
   }
 
   .fade {
diff --git a/src/components/links/linkCard.astro b/src/components/links/linkCard.astro
index f5a03c7..d2fbdbf 100644
--- a/src/components/links/linkCard.astro
+++ b/src/components/links/linkCard.astro
@@ -19,6 +19,9 @@ const icon_src_url = `url("${icon.src}")`
 </a>
 
 <style define:vars={{ icon_src_url }}>
+  * {
+    transition: all var(--a-time-default) var(--a-animation-1);
+  }
   a {
     display: flex;
     align-items: center;
diff --git a/src/components/navbar/navbarEntry.astro b/src/components/navbar/navbarEntry.astro
index 04209f1..2339040 100644
--- a/src/components/navbar/navbarEntry.astro
+++ b/src/components/navbar/navbarEntry.astro
@@ -39,6 +39,9 @@ let extraattributes = navtype === 'mobile' ? { tabindex: '0' } : {}
 </li>
 
 <style define:vars={{ icon_src_url }}>
+  * {
+    transition: all var(--a-time-default) var(--a-animation-1);
+  }
   li {
     align-items: center;
     justify-content: center;