diff --git a/components/Navigation.tsx b/components/Navigation.tsx
index 5ac84234..38a844af 100644
--- a/components/Navigation.tsx
+++ b/components/Navigation.tsx
@@ -5,6 +5,7 @@ import { Popover } from "@headlessui/react";
 import { ChevronDownIcon } from "@heroicons/react/24/solid";
 
 import SearchInput from "components/SearchInput";
+import ProgressBar from "components/ProgressBar";
 import Wallet from "./Wallet";
 
 const mockedAccounts = [
@@ -58,7 +59,7 @@ const Navigation = () => {
         <Wallet />
       </div>
       {/* Sub navigation bar */}
-      <div className="flex justify-between px-6 py-3 text-sm text-white/40">
+      <div className="flex justify-between px-6 py-3 text-sm text-white/40 border-b border-white/20">
         <div className="flex items-center">
           <SearchInput />
           {mockedAccounts.map((account, index) => (
@@ -102,8 +103,14 @@ const Navigation = () => {
         </div>
         <div className="flex gap-4 items-center">
           <p>$: 2500</p>
-          <div>Lvg Gauge</div>
-          <div>Risk Gauge</div>
+          <div>Lvg</div>
+          <div>Risk</div>
+          <ProgressBar value={0.43} />
+          <div className="flex justify-center w-16">
+            <svg width="14" height="13" viewBox="0 0 14 13" fill="currentColor">
+              <path d="M0.234863 6.57567C0.234863 7.07288 0.581403 7.41188 1.08615 7.41188H8.04708L9.62912 7.33655L7.45194 9.31785L5.93771 10.8547C5.77951 11.0129 5.68157 11.2163 5.68157 11.4574C5.68157 11.9244 6.02811 12.2634 6.50272 12.2634C6.72872 12.2634 6.93213 12.173 7.12047 11.9922L11.859 7.20094C11.9871 7.07288 12.0775 6.92221 12.1152 6.74894V11.5478C12.1152 12.0148 12.4692 12.3538 12.9363 12.3538C13.4109 12.3538 13.765 12.0148 13.765 11.5478V1.6111C13.765 1.14403 13.4109 0.797485 12.9363 0.797485C12.4692 0.797485 12.1152 1.14403 12.1152 1.6111V6.39486C12.0775 6.22913 11.9871 6.07846 11.859 5.95039L7.12047 1.15156C6.93213 0.970755 6.72872 0.880354 6.50272 0.880354C6.02811 0.880354 5.68157 1.22689 5.68157 1.68644C5.68157 1.92751 5.77951 2.13845 5.93771 2.28911L7.45194 3.83348L9.62912 5.80725L8.04708 5.73192H1.08615C0.581403 5.73192 0.234863 6.07846 0.234863 6.57567Z" />
+            </svg>
+          </div>
         </div>
       </div>
     </div>
diff --git a/components/ProgressBar.tsx b/components/ProgressBar.tsx
new file mode 100644
index 00000000..fdc78eaa
--- /dev/null
+++ b/components/ProgressBar.tsx
@@ -0,0 +1,42 @@
+import React, { useEffect, useState } from "react";
+import { ArrowRightIcon } from "@heroicons/react/24/solid";
+
+type Props = {
+  value: number;
+};
+
+const ProgressBar = ({ value }: Props) => {
+  const percentageValue = `${(value * 100).toFixed(0)}%`;
+  const [newValue, setNewValue] = useState(0.77);
+
+  useEffect(() => {
+    setInterval(() => {
+      // randomizing value between value and 1
+      setNewValue(Math.random() * (1 - value) + value);
+    }, 3000);
+  }, [value]);
+
+  console.log(newValue);
+
+  const percentageNewValue = `${(newValue * 100).toFixed(0)}%`;
+
+  return (
+    <div className="relative w-[130px] h-4 bg-black rounded-full z-0">
+      <div
+        className="absolute bg-green-500 h-4 rounded-full z-10"
+        style={{ width: percentageValue }}
+      />
+      <div
+        className="absolute bg-red-500 h-4 rounded-full transition-[width] duration-500"
+        style={{ width: percentageNewValue }}
+      />
+      <div className="absolute w-full text-xs font-medium text-white flex justify-center items-center gap-x-2 z-20">
+        {percentageValue}
+        <ArrowRightIcon className="h-3 w-3" />
+        {percentageNewValue}
+      </div>
+    </div>
+  );
+};
+
+export default ProgressBar;