diff --git a/lightcurve/src/lightcurve_api/static/main.css b/lightcurve/src/lightcurve_api/static/main.css
index 270cdd86c..d64ceb4a0 100644
--- a/lightcurve/src/lightcurve_api/static/main.css
+++ b/lightcurve/src/lightcurve_api/static/main.css
@@ -21,6 +21,14 @@
   pointer-events: auto;
 }
 
+.tw-preflight :is(.tw-visible) {
+  visibility: visible;
+}
+
+.tw-preflight :is(.tw-invisible) {
+  visibility: hidden;
+}
+
 .tw-preflight :is(.tw-absolute) {
   position: absolute;
 }
@@ -29,6 +37,10 @@
   position: relative;
 }
 
+.tw-preflight :is(.tw-left-0) {
+  left: 0px;
+}
+
 .tw-preflight :is(.tw-left-10) {
   left: 2.5rem;
 }
@@ -45,6 +57,10 @@
   top: 50%;
 }
 
+.tw-preflight :is(.tw-top-\[100\%\]) {
+  top: 100%;
+}
+
 .tw-preflight :is(.tw-z-10) {
   z-index: 10;
 }
@@ -53,6 +69,10 @@
   z-index: 10;
 }
 
+.tw-preflight :is(.tw-z-\[2\]) {
+  z-index: 2;
+}
+
 .tw-preflight :is(.tw-z-\[9999\]) {
   z-index: 9999;
 }
@@ -73,6 +93,14 @@
   grid-column: span 5 / span 5;
 }
 
+.tw-preflight :is(.tw-float-right) {
+  float: right;
+}
+
+.tw-preflight :is(.tw-float-left) {
+  float: left;
+}
+
 .tw-preflight :is(.tw-m-0) {
   margin: 0px;
 }
@@ -81,11 +109,21 @@
   margin: auto;
 }
 
+.tw-preflight :is(.tw-mx-0) {
+  margin-left: 0px;
+  margin-right: 0px;
+}
+
 .tw-preflight :is(.tw-mx-2) {
   margin-left: 0.5rem;
   margin-right: 0.5rem;
 }
 
+.tw-preflight :is(.tw-mx-4) {
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+
 .tw-preflight :is(.tw-mx-auto) {
   margin-left: auto;
   margin-right: auto;
@@ -101,6 +139,18 @@
   margin-bottom: 1rem;
 }
 
+.tw-preflight :is(.tw-mb-\[10px\]) {
+  margin-bottom: 10px;
+}
+
+.tw-preflight :is(.tw-mb-\[20px\]) {
+  margin-bottom: 20px;
+}
+
+.tw-preflight :is(.tw-mb-\[5px\]) {
+  margin-bottom: 5px;
+}
+
 .tw-preflight :is(.tw-me-2) {
   margin-inline-end: 0.5rem;
 }
@@ -109,6 +159,10 @@
   margin-left: 0.5rem;
 }
 
+.tw-preflight :is(.tw-ml-4) {
+  margin-left: 1rem;
+}
+
 .tw-preflight :is(.tw-mt-2) {
   margin-top: 0.5rem;
 }
@@ -117,6 +171,18 @@
   margin-top: 0.75rem;
 }
 
+.tw-preflight :is(.tw-mt-\[6px\]) {
+  margin-top: 6px;
+}
+
+.tw-preflight :is(.tw-ml-1) {
+  margin-left: 0.25rem;
+}
+
+.tw-preflight :is(.tw-block) {
+  display: block;
+}
+
 .tw-preflight :is(.tw-inline-block) {
   display: inline-block;
 }
@@ -153,10 +219,35 @@
   height: 2rem;
 }
 
+.tw-preflight :is(.tw-h-\[30px\]) {
+  height: 30px;
+}
+
+.tw-preflight :is(.tw-h-\[3px\]) {
+  height: 3px;
+}
+
+.tw-preflight :is(.tw-h-\[40px\]) {
+  height: 40px;
+}
+
+.tw-preflight :is(.tw-h-\[64px\]) {
+  height: 64px;
+}
+
 .tw-preflight :is(.tw-h-auto) {
   height: auto;
 }
 
+.tw-preflight :is(.tw-h-fit) {
+  height: -moz-fit-content;
+  height: fit-content;
+}
+
+.tw-preflight :is(.tw-h-\[20px\]) {
+  height: 20px;
+}
+
 .tw-preflight :is(.tw-w-1\/3) {
   width: 33.333333%;
 }
@@ -185,6 +276,10 @@
   width: 20rem;
 }
 
+.tw-preflight :is(.tw-w-\[30px\]) {
+  width: 30px;
+}
+
 .tw-preflight :is(.tw-w-\[400px\]) {
   width: 400px;
 }
@@ -193,10 +288,18 @@
   width: 50%;
 }
 
+.tw-preflight :is(.tw-w-\[80px\]) {
+  width: 80px;
+}
+
 .tw-preflight :is(.tw-w-\[95\%\]) {
   width: 95%;
 }
 
+.tw-preflight :is(.tw-w-\[98\%\]) {
+  width: 98%;
+}
+
 .tw-preflight :is(.tw-w-full) {
   width: 100%;
 }
@@ -209,6 +312,14 @@
   max-width: 40%;
 }
 
+.tw-preflight :is(.tw-max-w-\[95\%\]) {
+  max-width: 95%;
+}
+
+.tw-preflight :is(.tw-grow) {
+  flex-grow: 1;
+}
+
 .tw-preflight :is(.-tw-translate-y-1) {
   --tw-translate-y: -0.25rem;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -273,6 +384,10 @@
   place-items: center;
 }
 
+.tw-preflight :is(.tw-content-center) {
+  align-content: center;
+}
+
 .tw-preflight :is(.tw-items-center) {
   align-items: center;
 }
@@ -326,16 +441,28 @@
   overflow: auto;
 }
 
+.tw-preflight :is(.tw-overflow-hidden) {
+  overflow: hidden;
+}
+
 .tw-preflight :is(.tw-truncate) {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+.tw-preflight :is(.tw-whitespace-nowrap) {
+  white-space: nowrap;
+}
+
 .tw-preflight :is(.tw-text-wrap) {
   text-wrap: wrap;
 }
 
+.tw-preflight :is(.tw-break-words) {
+  overflow-wrap: break-word;
+}
+
 .tw-preflight :is(.tw-rounded) {
   border-radius: 0.25rem;
 }
@@ -348,6 +475,10 @@
   border-radius: 9999px;
 }
 
+.tw-preflight :is(.tw-rounded-lg) {
+  border-radius: 0.5rem;
+}
+
 .tw-preflight :is(.tw-rounded-md) {
   border-radius: 0.375rem;
 }
@@ -360,6 +491,16 @@
   border-width: 8px;
 }
 
+.tw-preflight :is(.tw-border-x-0) {
+  border-left-width: 0px;
+  border-right-width: 0px;
+}
+
+.tw-preflight :is(.tw-border-y-0) {
+  border-top-width: 0px;
+  border-bottom-width: 0px;
+}
+
 .tw-preflight :is(.tw-border-b) {
   border-bottom-width: 1px;
 }
@@ -391,6 +532,11 @@
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
 }
 
+.tw-preflight :is(.tw-border-b-\[\#1e1e1e\]) {
+  --tw-border-opacity: 1;
+  border-bottom-color: rgb(30 30 30 / var(--tw-border-opacity));
+}
+
 .tw-preflight :is(.tw-border-b-black) {
   --tw-border-opacity: 1;
   border-bottom-color: rgb(0 0 0 / var(--tw-border-opacity));
@@ -404,6 +550,25 @@
   --tw-border-opacity: 0.2;
 }
 
+.tw-preflight :is(.tw-bg-\[\#0097A7\]) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 151 167 / var(--tw-bg-opacity));
+}
+
+.tw-preflight :is(.tw-bg-\[\#1976D2\]\/30) {
+  background-color: rgb(25 118 210 / 0.3);
+}
+
+.tw-preflight :is(.tw-bg-\[\#1e1e1e\]) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(30 30 30 / var(--tw-bg-opacity));
+}
+
+.tw-preflight :is(.tw-bg-\[\#2196f3\]) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(33 150 243 / var(--tw-bg-opacity));
+}
+
 .tw-preflight :is(.tw-bg-\[\#757575\]\/60) {
   background-color: rgb(117 117 117 / 0.6);
 }
@@ -413,14 +578,9 @@
   background-color: rgb(59 130 246 / var(--tw-bg-opacity));
 }
 
-.tw-preflight :is(.tw-bg-blue-700) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(29 78 216 / var(--tw-bg-opacity));
-}
-
-.tw-preflight :is(.tw-bg-cyan-700) {
+.tw-preflight :is(.tw-bg-blue-600) {
   --tw-bg-opacity: 1;
-  background-color: rgb(14 116 144 / var(--tw-bg-opacity));
+  background-color: rgb(37 99 235 / var(--tw-bg-opacity));
 }
 
 .tw-preflight :is(.tw-bg-gray-100) {
@@ -455,6 +615,10 @@
   padding: 1rem;
 }
 
+.tw-preflight :is(.tw-p-\[5px\]) {
+  padding: 5px;
+}
+
 .tw-preflight :is(.tw-px-2) {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -465,6 +629,11 @@
   padding-right: 1rem;
 }
 
+.tw-preflight :is(.tw-px-\[8px\]) {
+  padding-left: 8px;
+  padding-right: 8px;
+}
+
 .tw-preflight :is(.tw-py-1) {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
@@ -485,6 +654,11 @@
   padding-bottom: 1rem;
 }
 
+.tw-preflight :is(.tw-py-\[2px\]) {
+  padding-top: 2px;
+  padding-bottom: 2px;
+}
+
 .tw-preflight :is(.tw-pl-\[10px\]) {
   padding-left: 10px;
 }
@@ -505,6 +679,14 @@
   padding-top: 25px;
 }
 
+.tw-preflight :is(.tw-pt-\[30px\]) {
+  padding-top: 30px;
+}
+
+.tw-preflight :is(.tw-pt-2) {
+  padding-top: 0.5rem;
+}
+
 .tw-preflight :is(.tw-text-left) {
   text-align: left;
 }
@@ -517,6 +699,10 @@
   text-align: right;
 }
 
+.tw-preflight :is(.tw-font-roboto) {
+  font-family: Roboto, sans-serif;
+}
+
 .tw-preflight :is(.tw-text-2xl) {
   font-size: 1.5rem;
   line-height: 2rem;
@@ -527,6 +713,11 @@
   line-height: 1.25rem;
 }
 
+.tw-preflight :is(.tw-text-xl) {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
 .tw-preflight :is(.tw-text-xs) {
   font-size: 0.75rem;
   line-height: 1rem;
@@ -540,11 +731,28 @@
   font-weight: 300;
 }
 
+.tw-preflight :is(.tw-font-medium) {
+  font-weight: 500;
+}
+
+.tw-preflight :is(.tw-font-semibold) {
+  font-weight: 600;
+}
+
 .tw-preflight :is(.tw-ordinal) {
   --tw-ordinal: ordinal;
   font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
 }
 
+.tw-preflight :is(.tw-leading-9) {
+  line-height: 2.25rem;
+}
+
+.tw-preflight :is(.tw-text-\[\#1976D2\]) {
+  --tw-text-opacity: 1;
+  color: rgb(25 118 210 / var(--tw-text-opacity));
+}
+
 .tw-preflight :is(.tw-text-\[\#1e1e1e\]) {
   --tw-text-opacity: 1;
   color: rgb(30 30 30 / var(--tw-text-opacity));
@@ -580,6 +788,11 @@
   color: rgb(236 254 255 / var(--tw-text-opacity));
 }
 
+.tw-preflight :is(.tw-text-gray-300) {
+  --tw-text-opacity: 1;
+  color: rgb(209 213 219 / var(--tw-text-opacity));
+}
+
 .tw-preflight :is(.tw-text-gray-400) {
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity));
@@ -595,11 +808,6 @@
   color: rgb(239 68 68 / var(--tw-text-opacity));
 }
 
-.tw-preflight :is(.tw-text-red-900) {
-  --tw-text-opacity: 1;
-  color: rgb(127 29 29 / var(--tw-text-opacity));
-}
-
 .tw-preflight :is(.tw-text-white) {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -609,6 +817,10 @@
   text-decoration-line: underline;
 }
 
+.tw-preflight :is(.tw-opacity-0) {
+  opacity: 0;
+}
+
 .tw-preflight :is(.tw-opacity-100) {
   opacity: 1;
 }
@@ -623,6 +835,17 @@
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.tw-preflight :is(.tw-outline-none) {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+.tw-preflight :is(.tw-transition-all) {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .tw-preflight :is(.tw-duration-200) {
   transition-duration: 200ms;
 }
@@ -1235,6 +1458,11 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   background-color: rgb(117 117 117 / var(--tw-bg-opacity));
 }
 
+.tw-preflight :is(.hover\:tw-bg-\[\#b2b2b2\]:hover) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(178 178 178 / var(--tw-bg-opacity));
+}
+
 .tw-preflight :is(.hover\:tw-bg-\[\#e5e4e2\]:hover) {
   --tw-bg-opacity: 1;
   background-color: rgb(229 228 226 / var(--tw-bg-opacity));
@@ -1250,6 +1478,11 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));
 }
 
+.tw-preflight :is(.hover\:tw-bg-gray-600:hover) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(75 85 99 / var(--tw-bg-opacity));
+}
+
 .tw-preflight :is(.hover\:tw-bg-green-600:hover) {
   --tw-bg-opacity: 1;
   background-color: rgb(22 163 74 / var(--tw-bg-opacity));
@@ -1265,6 +1498,11 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   color: rgb(75 85 99 / var(--tw-text-opacity));
 }
 
+.tw-preflight :is(.focus\:tw-outline-none:focus) {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
 .tw-preflight :is(.disabled\:tw-bg-transparent:disabled) {
   background-color: transparent;
 }
@@ -1304,6 +1542,16 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   border-color: rgb(255 255 255 / var(--tw-border-opacity));
 }
 
+.tw-preflight :is(.tw-dark .dark\:tw-border-b-gray-600) {
+  --tw-border-opacity: 1;
+  border-bottom-color: rgb(75 85 99 / var(--tw-border-opacity));
+}
+
+.tw-preflight :is(.tw-dark .dark\:tw-border-b-white) {
+  --tw-border-opacity: 1;
+  border-bottom-color: rgb(255 255 255 / var(--tw-border-opacity));
+}
+
 .tw-preflight :is(.tw-dark .dark\:tw-border-opacity-20) {
   --tw-border-opacity: 0.2;
 }
@@ -1322,16 +1570,31 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   background-color: rgb(117 117 117 / 0.6);
 }
 
+.tw-preflight :is(.tw-dark .dark\:tw-bg-gray-700) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
+}
+
 .tw-preflight :is(.tw-dark .dark\:tw-bg-green-700) {
   --tw-bg-opacity: 1;
   background-color: rgb(21 128 61 / var(--tw-bg-opacity));
 }
 
+.tw-preflight :is(.tw-dark .dark\:tw-text-\[\#EEEEEE\]) {
+  --tw-text-opacity: 1;
+  color: rgb(238 238 238 / var(--tw-text-opacity));
+}
+
 .tw-preflight :is(.tw-dark .dark\:tw-text-\[\#FAFAFA\]) {
   --tw-text-opacity: 1;
   color: rgb(250 250 250 / var(--tw-text-opacity));
 }
 
+.tw-preflight :is(.tw-dark .dark\:tw-text-gray-300) {
+  --tw-text-opacity: 1;
+  color: rgb(209 213 219 / var(--tw-text-opacity));
+}
+
 .tw-preflight :is(.tw-dark .dark\:tw-text-white) {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -1346,3 +1609,23 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
   --tw-bg-opacity: 1;
   background-color: rgb(59 57 57 / var(--tw-bg-opacity));
 }
+
+@media (min-width: 640px) {
+  .tw-preflight :is(.sm\:tw-h-\[100\%\]) {
+    height: 100%;
+  }
+
+  .tw-preflight :is(.sm\:tw-w-\[100\%\]) {
+    width: 100%;
+  }
+}
+
+@media (min-width: 768px) {
+  .tw-preflight :is(.md\:tw-h-\[250px\]) {
+    height: 250px;
+  }
+
+  .tw-preflight :is(.md\:tw-w-\[365px\]) {
+    width: 365px;
+  }
+}
diff --git a/lightcurve/src/lightcurve_api/templates/checkbox.html.jinja b/lightcurve/src/lightcurve_api/templates/checkbox.html.jinja
index 87fe49817..70ec51ca2 100644
--- a/lightcurve/src/lightcurve_api/templates/checkbox.html.jinja
+++ b/lightcurve/src/lightcurve_api/templates/checkbox.html.jinja
@@ -13,8 +13,7 @@
             </label>
         </div>
         <div class="tooltip tw-col-span-1">
-            <!--<i class="fa fa-question-circle tw-me-2"></i>-->
-            <span class="material-symbols-outlined tw-cursor-pointer tw-me-2">help</span>
+            <svg xmlns="http://www.w3.org/2000/svg" class="tw-cursor-pointer" height="20px" width="20px" id="{{title}}" viewBox="0 -960 960 960" fill="#FFFFFF"><path d="M478-240q21 0 35.5-14.5T528-290q0-21-14.5-35.5T478-340q-21 0-35.5 14.5T428-290q0 21 14.5 35.5T478-240Zm-36-154h74q0-33 7.5-52t42.5-52q26-26 41-49.5t15-56.5q0-56-41-86t-97-30q-57 0-92.5 30T342-618l66 26q5-18 22.5-39t53.5-21q32 0 48 17.5t16 38.5q0 20-12 37.5T506-526q-44 39-54 59t-10 73Zm38 314q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>
             <div class="tooltip-text">{{ tooltip }}</div>
         </div>
     </div>
diff --git a/lightcurve/src/lightcurve_api/templates/lightcurve_app.html.jinja b/lightcurve/src/lightcurve_api/templates/lightcurve_app.html.jinja
index b3282813e..fd7d94bd8 100644
--- a/lightcurve/src/lightcurve_api/templates/lightcurve_app.html.jinja
+++ b/lightcurve/src/lightcurve_api/templates/lightcurve_app.html.jinja
@@ -1,9 +1,5 @@
 <script id="htmx-script" src="https://unpkg.com/htmx.org@2.0.2"></script>
-<meta name="htmx-config" content='{"selfRequestsOnly": false}'
-<link rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&icon_names=help" />
-
+<meta name="htmx-config" content='{"selfRequestsOnly": false}'>
 <link rel="stylesheet" href="{{ API_URL }}/static/main.css">
 <script>
     function configRequest(event) {
@@ -20,8 +16,9 @@
 </script>
 <div id="lightcurve-app"
      class="tw-preflight tw-bg-white dark:tw-bg-[#1e1e1e] dark:tw-text-white"
-     style="height: 100%">
+     style="height: 100%">    
     <div id="lc-main" style="width: 100%;  min-width: 0; min-height: 380px;"></div>
+
     <p id="spot-loader" class="indicator tw-text-center tw-w-full">Loading...</p>
     <div class="tw-grid tw-grid-cols-10 tw-gap-1 tw-px-4 tw-py-4">
         <div class="tw-col-span-4">
@@ -54,16 +51,16 @@
                         hx-target="#lightcurve-app"
                         hx-swap="outerHTML"
                         hx-indicator="#spot-loader">
-                    <i class="fa fa-eye tw-me-2"></i>
-                    Filter DR
+                    <svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 -960 960 960" width="16px" fill="#FFFFFF" class="tw-inline-block"><path d="M480-320q75 0 127.5-52.5T660-500q0-75-52.5-127.5T480-680q-75 0-127.5 52.5T300-500q0 75 52.5 127.5T480-320Zm0-72q-45 0-76.5-31.5T372-500q0-45 31.5-76.5T480-608q45 0 76.5 31.5T588-500q0 45-31.5 76.5T480-392Zm0 192q-146 0-266-81.5T40-500q54-137 174-218.5T480-800q146 0 266 81.5T920-500q-54 137-174 218.5T480-200Zm0-300Zm0 220q113 0 207.5-59.5T832-500q-50-101-144.5-160.5T480-720q-113 0-207.5 59.5T128-500q50 101 144.5 160.5T480-280Z"/></svg>
+                    <span class="tw-inline-block tw-ml-1">Filter DR</span>
                 </button>
             </div>
             <div>
                 <a id="lc-download-ref" style="display: none;"></a>
                 <button id="lc-download"
-                        class="tw-text-xs tw-bg-green-500 hover:tw-bg-green-700 tw-text-white tw-font-bold tw-py-1 tw-px-2 tw-rounded">
-                    <i class="fa fa-download tw-me-2"></i>
-                    Download
+                        class="tw-text-xs tw-bg-green-500 hover:tw-bg-green-700 tw-text-white tw-font-bold tw-px-2 tw-rounded">
+                    <svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 -960 960 960" width="16px" fill="#FFFFFF" class="tw-inline-block"><path d="M480-320 280-520l56-58 104 104v-326h80v326l104-104 56 58-200 200ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z"/></svg>
+                    <span class="tw-inline-block tw-ml-1 tw-py-1">Download</span>
                 </button>
             </div>
         </div>
@@ -313,8 +310,23 @@
             return setColorScheme;
         }
 
+        function isDarkIcon(container) {
+            let color_scheme_icon = container.classList.contains("tw-dark") || container.classList.contains("theme--dark")? "tw-dark" : "tw-light";
+            let icons_svg = document.querySelectorAll("svg")
+            
+            if(color_scheme_icon != "tw-dark"){
+                icons_svg.forEach((icon) => {
+                    if(icon.id != ""){
+                        icon.attributes.fill.value = "#000"
+                    }
+                })
+            }
+        }
+
         const color_scheme_observer = new MutationObserver(setColorSchemeWrapper(container));
         color_scheme_observer.observe(container, { attributes: true, attributeFilter: ["class"] });
         setColorSchemeWrapper(container)()
+
+        isDarkIcon(container)
     </script>
 </div>
diff --git a/lightcurve/src/lightcurve_api/templates/radio_button.html.jinja b/lightcurve/src/lightcurve_api/templates/radio_button.html.jinja
index 9eda03b04..fb41fe92c 100644
--- a/lightcurve/src/lightcurve_api/templates/radio_button.html.jinja
+++ b/lightcurve/src/lightcurve_api/templates/radio_button.html.jinja
@@ -12,8 +12,7 @@
         </div>
         
         <div class="tooltip tw-col-span-1">
-            <!--<i class="fa fa-question-circle tw-me-2"></i>-->
-            <span class="material-symbols-outlined tw-cursor-pointer tw-me-2">help</span>
+            <svg xmlns="http://www.w3.org/2000/svg" id="{{title}}" class="tw-cursor-pointer" height="20px" width="20px" viewBox="0 -960 960 960" fill="#FFFFFF"><path d="M478-240q21 0 35.5-14.5T528-290q0-21-14.5-35.5T478-340q-21 0-35.5 14.5T428-290q0 21 14.5 35.5T478-240Zm-36-154h74q0-33 7.5-52t42.5-52q26-26 41-49.5t15-56.5q0-56-41-86t-97-30q-57 0-92.5 30T342-618l66 26q5-18 22.5-39t53.5-21q32 0 48 17.5t16 38.5q0 20-12 37.5T506-526q-44 39-54 59t-10 73Zm38 314q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>
             <div class="tooltip-text">{{ tooltip }}</div>
         </div>
     </div>