diff --git a/frontend/assets/CCwhiteApp.png b/frontend/assets/CCwhiteApp.png
new file mode 100644
index 0000000..e4ef4f1
Binary files /dev/null and b/frontend/assets/CCwhiteApp.png differ
diff --git a/frontend/assets/PalmIsland.png b/frontend/assets/PalmIsland.png
new file mode 100644
index 0000000..e31ab51
Binary files /dev/null and b/frontend/assets/PalmIsland.png differ
diff --git a/frontend/assets/lightbulb.jpg b/frontend/assets/lightbulb.jpg
new file mode 100644
index 0000000..f75425e
Binary files /dev/null and b/frontend/assets/lightbulb.jpg differ
diff --git a/frontend/assets/lightbulb.svg b/frontend/assets/lightbulb.svg
new file mode 100644
index 0000000..fcff408
--- /dev/null
+++ b/frontend/assets/lightbulb.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
+  <title>Idea</title>
+  <path d="M9 18h6"/>
+  <path d="M10 22h4"/>
+  <path d="M8 14a6 6 0 1 1 8 0c-.8.7-1 1.7-1 2.5V17a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1v-.5c0-.8-.2-1.8-1-2.5Z"/>
+</svg>
\ No newline at end of file
diff --git a/frontend/index.html b/frontend/index.html
index 122c885..8c76e8d 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -12,6 +12,21 @@
 </head>
 <body class="font-sans bg-gray-100 m-0 text-gray-900 overflow-hidden touch-pan-y h-screen flex flex-col">
   <div class="max-w-full md:max-w-2xl mx-auto p-4 sm:p-3 text-[17px] flex flex-col flex-1 overflow-hidden">
+  <div class="w-full bg-white border border-gray-200 rounded-lg px-3 py-1.5 mb-3 shadow-sm flex items-center justify-between">
+    <div class="flex items-center gap-2">
+      <div class="h-9 w-[186px] rounded bg-black flex items-center justify-center overflow-hidden">
+        <img src="assets/CCwhiteApp.png" alt="CC" class="h-9 w-auto object-cover scale-105" loading="lazy">
+      </div>
+    </div>
+    <div class="flex items-center gap-2">
+      <a id="ideaLink" href="#" class="inline-flex items-center justify-center h-8 w-8 rounded-full bg-amber-50 border border-amber-200 text-amber-600 hover:bg-amber-100" title="Submit an idea">
+        <img src="assets/lightbulb.svg" alt="Idea" class="h-4 w-4" loading="lazy">
+      </a>
+      <div class="h-9 w-12 rounded-lg overflow-hidden flex items-center justify-center bg-white">
+        <img src="assets/PalmIsland.png" alt="Palm Island" class="h-full w-auto object-cover" loading="lazy">
+      </div>
+    </div>
+  </div>
   <h1 class="m-0 mb-3 text-center text-blue-600 text-[33px] font-bold">Job Info</h1>
 
   <div class="w-full bg-blue-50 h-1.5 rounded overflow-hidden mb-3">
@@ -64,7 +79,7 @@
 
 <!-- Detail Modal -->
 <div id="detailModal" role="dialog" aria-modal="true" class="hidden flex fixed inset-0 bg-black/45 items-start justify-center pt-[2vh] z-[999]">
-  <div id="detailBox" class="m-0 bg-white rounded-lg max-w-[380px] w-[92%] h-[90vh] max-h-[926px] overflow-hidden flex flex-col">
+  <div id="detailBox" class="m-0 bg-white rounded-lg max-w-[380px] w-[92%] h-[calc(90vh-30px)] max-h-[926px] overflow-hidden flex flex-col">
     <!-- INFO Tab Content -->
     <div id="infoContent" class="flex-1 overflow-hidden flex flex-col min-h-0">
       <div id="infoHeading" class="bg-blue-600 text-white text-center py-2 text-sm font-semibold rounded-t-lg flex-shrink-0">INFO</div>
