diff --git a/src/App.jsx b/src/App.jsx
index bec0762..bcfa62f 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -2414,7 +2414,7 @@ function RelationTreePanel({
                     <path d="M 0 0 L 7 3.5 L 0 7 z" fill="#f97316" />
                   </marker>
                   <marker id="sidebar-relation-arrow-search" markerWidth="7" markerHeight="7" refX="6.5" refY="3.5" orient="auto" markerUnits="strokeWidth">
-                    <path d="M 0 0 L 7 3.5 L 0 7 z" fill="#0ea5e9" />
+                    <path d="M 0 0 L 7 3.5 L 0 7 z" fill="#eab308" />
                   </marker>
                 </defs>
                 {relations.map((relation) => {
@@ -2482,7 +2482,7 @@ function RelationTreePanel({
                         <path
                           d={pathD}
                           fill="none"
-                          stroke={isSelectedRelation ? '#fed7aa' : '#bae6fd'}
+                          stroke={isSelectedRelation ? '#fed7aa' : '#fef08a'}
                           strokeWidth={isSelectedRelation ? '5.5' : '6'}
                           strokeLinecap="round"
                           opacity={isSelectedRelation ? '0.65' : '0.8'}
@@ -2492,7 +2492,7 @@ function RelationTreePanel({
                       <path
                         d={pathD}
                         fill="none"
-                        stroke={isSelectedRelation ? '#f97316' : isSearchedRelation ? '#0ea5e9' : isSkipEdge ? '#7c3aed' : '#2563eb'}
+                        stroke={isSelectedRelation ? '#f97316' : isSearchedRelation ? '#eab308' : isSkipEdge ? '#7c3aed' : '#2563eb'}
                         strokeWidth={isSelectedRelation ? '2.9' : isSearchedRelation ? '3.2' : isSkipEdge ? '2.2' : '2'}
                         strokeDasharray={isSkipEdge ? '6 5' : undefined}
                         opacity={isSelectedRelation || isSearchedRelation ? '1' : isSkipEdge ? '0.82' : '1'}
@@ -2562,15 +2562,15 @@ function RelationTreePanel({
               <div className="mt-3 space-y-2">
                 {stepSearchResult?.programPath?.length ? (
                   <>
-                    <div className="rounded-2xl bg-sky-50/70 px-3 py-2 ring-1 ring-sky-100">
+                    <div className="rounded-2xl bg-yellow-50/70 px-3 py-2 ring-1 ring-yellow-100">
                       <div className="flex flex-wrap items-center gap-1.5">
                         {stepSearchResult.programPath.map((program, index) => (
                           <React.Fragment key={program.id}>
-                            <span className={`rounded-full px-2.5 py-1 text-[11px] font-black ring-1 ${index === stepSearchResult.programPath.length - 1 ? 'bg-sky-100 text-sky-800 ring-sky-200' : 'bg-white text-slate-700 ring-slate-200'}`}>
+                          <span className={`rounded-full px-2.5 py-1 text-[11px] font-black ring-1 ${index === stepSearchResult.programPath.length - 1 ? 'bg-yellow-100 text-yellow-800 ring-yellow-200' : 'bg-white text-slate-700 ring-slate-200'}`}>
                               {program.name}
                             </span>
                             {index < stepSearchResult.programPath.length - 1 && (
-                              <ArrowRight className="h-3.5 w-3.5 text-sky-500" />
+                            <ArrowRight className="h-3.5 w-3.5 text-yellow-500" />
                             )}
                           </React.Fragment>
                         ))}