diff --git a/frontend/.env.development b/frontend/.env.development
index 4083d677..7b6f3434 100644
--- a/frontend/.env.development
+++ b/frontend/.env.development
@@ -1,4 +1,6 @@
 # Please put appropriate value
 VITE_BASE_URL=http://localhost:5173
 VITE_API_HOST=http://127.0.0.1:7091
-VITE_API_STREAMING=true
\ No newline at end of file
+VITE_API_STREAMING=true
+VITE_NOTIFICATION_TEXT="What's new in 0.14.0 — Changelog"
+VITE_NOTIFICATION_LINK="#"
\ No newline at end of file
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 0a8c22f1..0c3384d1 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -15,6 +15,7 @@ import useTokenAuth from './hooks/useTokenAuth';
 import Navigation from './Navigation';
 import PageNotFound from './PageNotFound';
 import Setting from './settings';
+import Notification from './components/Notification';
 
 function AuthWrapper({ children }: { children: React.ReactNode }) {
   const { isAuthLoading } = useTokenAuth();
@@ -52,11 +53,27 @@ function MainLayout() {
 }
 export default function App() {
   const [, , componentMounted] = useDarkTheme();
+  const [showNotification, setShowNotification] = useState<boolean>(() => {
+    const saved = localStorage.getItem('showNotification');
+    return saved ? JSON.parse(saved) : true;
+  });
+  const notificationText = import.meta.env.VITE_NOTIFICATION_TEXT;
+  const notificationLink = import.meta.env.VITE_NOTIFICATION_LINK;
   if (!componentMounted) {
     return <div />;
   }
   return (
     <div className="relative h-full overflow-hidden">
+      {notificationLink && notificationText && showNotification && (
+        <Notification
+          notificationText={notificationText}
+          notificationLink={notificationLink}
+          handleCloseNotification={() => {
+            setShowNotification(false);
+            localStorage.setItem('showNotification', 'false');
+          }}
+        />
+      )}
       <Routes>
         <Route
           element={
diff --git a/frontend/src/assets/arrow-full-right.svg b/frontend/src/assets/arrow-full-right.svg
new file mode 100644
index 00000000..d6004b4a
--- /dev/null
+++ b/frontend/src/assets/arrow-full-right.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="13" viewBox="0 0 14 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.0303 7.03033C13.3232 6.73744 13.3232 6.26256 13.0303 5.96967L8.25736 1.1967C7.96447 0.903806 7.48959 0.903806 7.1967 1.1967C6.90381 1.48959 6.90381 1.96447 7.1967 2.25736L11.4393 6.5L7.1967 10.7426C6.90381 11.0355 6.90381 11.5104 7.1967 11.8033C7.48959 12.0962 7.96447 12.0962 8.25736 11.8033L13.0303 7.03033ZM0.5 6.5V7.25H12.5V6.5V5.75H0.5V6.5Z" fill="white"/>
+</svg>
diff --git a/frontend/src/assets/notification-bg.jpg b/frontend/src/assets/notification-bg.jpg
new file mode 100644
index 00000000..6e0a5d0f
Binary files /dev/null and b/frontend/src/assets/notification-bg.jpg differ
diff --git a/frontend/src/components/Notification.tsx b/frontend/src/components/Notification.tsx
new file mode 100644
index 00000000..7bd48158
--- /dev/null
+++ b/frontend/src/components/Notification.tsx
@@ -0,0 +1,45 @@
+import close from '../assets/cross.svg';
+import rightArrow from '../assets/arrow-full-right.svg';
+import bg from '../assets/notification-bg.jpg';
+
+interface NotificationProps {
+  notificationText: string;
+  notificationLink: string;
+  handleCloseNotification: () => void;
+}
+
+export default function Notification({
+  notificationText,
+  notificationLink,
+  handleCloseNotification,
+}: NotificationProps) {
+  return (
+    <a
+      className="absolute right-2 bottom-6 z-20 flex w-3/4 items-center justify-center gap-2 rounded-lg bg-cover bg-center bg-no-repeat px-2 py-4 sm:right-4 md:w-2/5 lg:w-1/3 xl:w-1/4 2xl:w-1/5"
+      style={{ backgroundImage: `url(${bg})` }}
+      href={notificationLink}
+      target="_blank"
+      aria-label="Notification"
+      rel="noreferrer"
+    >
+      <p className="text-white-3000 text-xs leading-6 font-semibold xl:text-sm xl:leading-7">
+        {notificationText}
+      </p>
+      <span>
+        <img className="w-full" src={rightArrow} alt="" />
+      </span>
+
+      <button
+        className="absolute top-2 right-2 z-30 h-4 w-4 hover:opacity-70"
+        aria-label="Close notification"
+        onClick={(e) => {
+          e.stopPropagation();
+          e.preventDefault();
+          handleCloseNotification();
+        }}
+      >
+        <img className="w-full" src={close} alt="Close notification" />
+      </button>
+    </a>
+  );
+}
diff --git a/frontend/src/conversation/Conversation.tsx b/frontend/src/conversation/Conversation.tsx
index d7b59a4e..312b92c9 100644
--- a/frontend/src/conversation/Conversation.tsx
+++ b/frontend/src/conversation/Conversation.tsx
@@ -202,6 +202,7 @@ export default function Conversation() {
       queries[queries.length - 1].response && setLastQueryReturnedErr(false);
     }
   }, [queries[queries.length - 1]]);
+
   return (
     <div className="flex h-full flex-col justify-end gap-1">
       <ConversationMessages