diff --git a/src/lib/components/Navigation/app.svelte b/src/lib/components/Navigation/app.svelte
index fd0a5367..a6e2cfa6 100644
--- a/src/lib/components/Navigation/app.svelte
+++ b/src/lib/components/Navigation/app.svelte
@@ -36,7 +36,7 @@
   }
 </script>
 
-<nav class="{navClass} flex w-full p-2 md:px-6 bg-blue-600">
+<nav class="{navClass} flex w-full p-2 md:px-6 bg-blue-500">
   <ul class="flex w-full items-center">
     <div class="flex items-center text-white">
       {#if isCoursePage}
diff --git a/src/lib/components/Tabs/index.svelte b/src/lib/components/Tabs/index.svelte
index 50d2cd05..aaef0075 100644
--- a/src/lib/components/Tabs/index.svelte
+++ b/src/lib/components/Tabs/index.svelte
@@ -35,9 +35,12 @@
           <Chip value={tab.badgeValue} className="ml-1 bg-gray-300 dark:text-black" />
         {/if} -->
 
-        {#if currentTab === tab.value}
-          <span class="absolute w-full bottom-0 left-0 h-1 bg-blue-500 rounded-md" />
-        {/if}
+        <span
+          class="absolute w-full bottom-0 left-0 h-1 bg-blue-500 rounded-md transition-all ease-in-out duration-500 {currentTab ===
+          tab.value
+            ? 'w-full'
+            : 'w-0'}"
+        />
       </button>
     {/each}
   </div>