diff --git a/server/tools/dataSync/dataSync.ts b/server/tools/dataSync/dataSync.ts
index a5a2cad..325f0d8 100644
--- a/server/tools/dataSync/dataSync.ts
+++ b/server/tools/dataSync/dataSync.ts
@@ -45,6 +45,7 @@ const updateData = async () => {
 }
 
 const updater = async (period) => {
+    console.log('Updating the database...')
     try {
         await updateCurrency()
 
@@ -56,7 +57,8 @@ const updater = async (period) => {
         console.error(e.message)
     }
 
-    setTimeout(updater, period)
+    console.log(`Completed, sleeping ${period / 1000}s...`)
+    setTimeout(updater, period, period)
 }
 
 export default updater
\ No newline at end of file
diff --git a/web/src/Components/Button/Button.jsx b/web/src/Components/Button/Button.jsx
index 8126456..e9ac362 100644
--- a/web/src/Components/Button/Button.jsx
+++ b/web/src/Components/Button/Button.jsx
@@ -1,12 +1,12 @@
 import React from 'react'
 import styles from './Button.module.css'
 
-const Button = ({ children, onClick, loading, styleType }) => {
+const Button = ({ children, onClick, loading, styleType, disabled }) => {
     return (
         <button
             className={styles[styleType ? styleType : 'button']}
             onClick={onClick}
-            disabled={loading}
+            disabled={loading || disabled}
         >
             {loading ? 'Please wait...' : children}
         </button>
diff --git a/web/src/Components/Button/Button.module.css b/web/src/Components/Button/Button.module.css
index f77a43d..14c0357 100644
--- a/web/src/Components/Button/Button.module.css
+++ b/web/src/Components/Button/Button.module.css
@@ -1,11 +1,11 @@
-.button, .favoriteButton {
+.button, .favoriteButton, .destructiveButton {
     display: inline-block;
     padding: 10px 18px;
     margin: 12px;
     font-size: 16px;
     font-weight: bold;
-    color: var(--tg-theme-button-text-color);
-    background-color: var(--tg-theme-button-color);
+    color: var(--app-button-text-color);
+    background-color: var(--app-button-color);
     border: none;
     border-radius: 8px;
     cursor: pointer;
@@ -14,16 +14,20 @@
     transition: background-color 0.3s ease, color 0.3s ease;
 }
 
-.button:disabled, .favoriteButton:disabled {
-    color: var(--tg-theme-hint-color);
+.button:disabled, .favoriteButton:disabled, .destructiveButton:disabled {
+    color: var(--app-subtitle-text-color);
 }
 
-.favoriteButton {
+.button:active, .favoriteButton:active, .destructiveButton:active {
+    background-color: rgba(169, 199, 255, 0.2);
+}
+
+.favoriteButton, .destructiveButton {
     width: -webkit-fill-available;
     margin: 12px;
     padding: 12px;
 }
 
-.button:active, .favoriteButton:active {
-    background-color: rgba(169, 199, 255, 0.2);
+.destructiveButton {
+    color: var(--app-destructive-text-color)
 }
\ No newline at end of file
diff --git a/web/src/Components/Cell/Cell.module.css b/web/src/Components/Cell/Cell.module.css
index 8ccabe4..0c9beeb 100644
--- a/web/src/Components/Cell/Cell.module.css
+++ b/web/src/Components/Cell/Cell.module.css
@@ -2,8 +2,8 @@
     display: flex;
     align-items: center;
     padding: 12px;
-    border-bottom: 1px solid var(--tg-theme-secondary-bg-color);
-    background-color: var(--tg-theme-bg-color);
+    border-bottom: 1px solid var(--app-secondary-bg-color);
+    background-color: var(--app-bg-color);
     transition: background-color 0.2s;
 }
 
@@ -12,7 +12,7 @@
 }
 
 .cellAble:active {
-    background-color: var(--tg-theme-secondary-bg-color);
+    background-color: var(--app-secondary-bg-color);
 }
 
 .placeholderIcon, .placeholderTitle, .placeholderSubtitle {
@@ -38,7 +38,7 @@
 .title {
     font-size: 16px;
     font-weight: bold;
-    color: var(--tg-theme-text-color);
+    color: var(--app-text-color);
 }
 
 .placeholderTitle {
@@ -49,7 +49,7 @@
 
 .subtitle {
     font-size: 14px;
-    color: var(--tg-theme-hint-color);
+    color: var(--app-subtitle-text-color);
 }
 
 .placeholderSubtitle {
@@ -66,7 +66,7 @@
 
 .text, .textPositive, .textNegative {
     font-size: 14px;
-    color: var(--tg-theme-text-color);
+    color: var(--app-text-color);
 }
 
 .textPositive {
diff --git a/web/src/Components/InputNumber/InputNumber.module.css b/web/src/Components/InputNumber/InputNumber.module.css
index e77b5fe..d21f3e3 100644
--- a/web/src/Components/InputNumber/InputNumber.module.css
+++ b/web/src/Components/InputNumber/InputNumber.module.css
@@ -2,7 +2,7 @@
     display: flex;
     overflow-x: hidden;
     align-items: center;
-    background-color: var(--tg-theme-bg-color);
+    background-color: var(--app-bg-color);
     border-radius: 0 0 8px 8px;
     max-width: 100%;
     margin: 0 auto;
@@ -15,7 +15,7 @@
     border: none;
     padding: 0;
     outline: none;
-    color: var(--tg-theme-text-color);
+    color: var(--app-text-color);
     background: transparent;
 }
 
diff --git a/web/src/Components/MiniCell/MiniCell.module.css b/web/src/Components/MiniCell/MiniCell.module.css
index db46815..2ec8b47 100644
--- a/web/src/Components/MiniCell/MiniCell.module.css
+++ b/web/src/Components/MiniCell/MiniCell.module.css
@@ -2,8 +2,8 @@
     display: flex;
     align-items: center;
     padding: 12px;
-    border-bottom: 1px solid var(--tg-theme-secondary-bg-color);
-    background-color: var(--tg-theme-bg-color);
+    border-bottom: 1px solid var(--app-section-bg-color);
+    background-color: var(--app-bg-color);
     transition: background-color 0.2s;
 }
 
@@ -15,7 +15,7 @@
 .title {
     font-size: 24px;
     font-weight: bold;
-    color: var(--tg-theme-text-color);
+    color: var(--app-text-color);
 }
 
 .icon, .placeholderIcon {
diff --git a/web/src/Components/Placeholder/Placeholder.module.css b/web/src/Components/Placeholder/Placeholder.module.css
index a5c2a6e..650c856 100644
--- a/web/src/Components/Placeholder/Placeholder.module.css
+++ b/web/src/Components/Placeholder/Placeholder.module.css
@@ -9,26 +9,26 @@
 .icon {
     width: 56px;
     height: 56px;
-    color: var(--tg-theme-text-color);
+    color: var(--app-text-color);
     font-size: 3em;
 }
 
 .title {
     font-size: 20px;
     font-weight: bold;
-    color: var(--tg-theme-text-color);
+    color: var(--app-text-color);
     margin-top: 16px;
 }
 
 .description {
     font-size: 16px;
-    color: var(--tg-theme-hint-color);
+    color: var(--app-subtitle-text-color);
     margin-top: 8px;
 }
 
 .errorInfo {
     font-size: 16px;
-    color: var(--tg-theme-hint-color);
+    color: var(--app-subtitle-text-color);
     font-style: oblique;
     margin-top: 8px;
 }
\ No newline at end of file
diff --git a/web/src/Components/ProgressBar/ProgressBar.module.css b/web/src/Components/ProgressBar/ProgressBar.module.css
index e1b9740..19c22c5 100644
--- a/web/src/Components/ProgressBar/ProgressBar.module.css
+++ b/web/src/Components/ProgressBar/ProgressBar.module.css
@@ -14,11 +14,11 @@
 }
 
 .minValue, .maxValue {
-    color: var(--tg-theme-text-color);
+    color: var(--app-text-color);
 }
 
 .title {
-    color: var(--tg-theme-hint-color);
+    color: var(--app-subtitle-text-color);
 }
 
 .progressBar {
@@ -34,7 +34,7 @@
     height: 100%;
     top: 0;
     width: 100%;
-    background-color: var(--tg-theme-link-color);
+    background-color: var(--app-link-color);
 }
 
 .progressFillPositive {
diff --git a/web/src/Components/Search/Search.module.css b/web/src/Components/Search/Search.module.css
index 20598e0..ef0e273 100644
--- a/web/src/Components/Search/Search.module.css
+++ b/web/src/Components/Search/Search.module.css
@@ -2,7 +2,7 @@
     display: flex;
     overflow-x: hidden;
     align-items: center;
-    background-color: var(--tg-theme-bg-color);
+    background-color: var(--app-bg-color);
     border-radius: 0 0 8px 8px;
     max-width: 100%;
     margin: 0 auto;
@@ -15,14 +15,14 @@
     margin: 12px 4px 12px 4px;
     font-size: 16px;
     outline: none;
-    color: var(--tg-theme-text-color);
+    color: var(--app-text-color);
     background: transparent;
 }
 
 .searchIcon {
     width: 20px;
     height: 20px;
-    color: var(--tg-theme-text-color);
+    color: var(--app-text-color);
     animation: appearance 0.3s ease;
 }
 
diff --git a/web/src/Components/Section/Section.module.css b/web/src/Components/Section/Section.module.css
index 3e6500c..2b66bae 100644
--- a/web/src/Components/Section/Section.module.css
+++ b/web/src/Components/Section/Section.module.css
@@ -2,15 +2,15 @@
     overflow-x: hidden;
     margin-top: 16px;
     border-radius: 8px;
-    background-color: var(--tg-theme-bg-color);
+    background-color: var(--app-bg-color);
 }
 
 .title {
     padding: 16px;
     font-size: 20px;
     font-weight: bold;
-    color: var(--tg-theme-text-color);
-    border-bottom: 1px solid var(--tg-theme-secondary-bg-color);
+    color: var(--app-section-header-text-color);
+    border-bottom: 1px solid var(--app-section-bg-color);
 }
 
 .loading {
diff --git a/web/src/Components/StrokeCell/StrokeCell.module.css b/web/src/Components/StrokeCell/StrokeCell.module.css
index 9f0423c..3544b44 100644
--- a/web/src/Components/StrokeCell/StrokeCell.module.css
+++ b/web/src/Components/StrokeCell/StrokeCell.module.css
@@ -8,7 +8,7 @@
 .text {
     font-size: 14px;
     font-weight: bold;
-    color: var(--tg-theme-text-color);
+    color: var(--app-text-color);
 }
 
 .placeholderText {
diff --git a/web/src/index.css b/web/src/index.css
index 55d58fe..9b17cdc 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -4,6 +4,27 @@
   box-sizing: border-box;
 }
 
+:root {
+  --app-bg-color: var(--tg-theme-bg-color, #FFFFFF);
+  --app-secondary-bg-color: var(--tg-theme-secondary-bg-color, #F5F5F5);
+
+  --app-text-color: var(--tg-theme-text-color, #000000);
+  --app-hint-color: var(--tg-theme-hint-color, #8A8A8A);
+  --app-link-color: var(--tg-theme-link-color, #1A0DAB);
+  --app-subtitle-text-color: var(--tg-theme-subtitle-text-color, #9A9A9A);
+
+  --app-button-color: var(--tg-theme-button-color, #F0F0F0);
+  --app-button-text-color: var(--tg-theme-button-text-color, #000000);
+
+  --app-header-bg-color: var(--tg-theme-header-bg-color, #EDEDED);
+  --app-accent-text-color: var(--tg-theme-accent-text-color, #FF9500);
+
+  --app-section-bg-color: var(--tg-theme-section-bg-color, #EFEFEF);
+  --app-section-header-text-color: var(--tg-theme-section-header-text-color, #303030);
+
+  --app-destructive-text-color: var(--tg-theme-destructive-text-color, #FF3B30);
+}
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
@@ -12,7 +33,7 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 
-  background-color: var(--tg-theme-secondary-bg-color);
+  background-color: var(--app-secondary-bg-color);
 }
 
 code {
diff --git a/web/src/routes/Swap/Swap.jsx b/web/src/routes/Swap/Swap.jsx
index e538fdf..dcd12b1 100644
--- a/web/src/routes/Swap/Swap.jsx
+++ b/web/src/routes/Swap/Swap.jsx
@@ -113,13 +113,16 @@ const Swap = () => {
                         title="day's range"
                     />
                     <Button
-                        styleType='favoriteButton'
+                        styleType={isFavorite ? 'destructiveButton' : 'favoriteButton'}
                         onClick={toggleFavorite}
                         loading={loading || toggling}
                     >
                         {isFavorite ? 'Remove from favorites' : 'Add to favorites'}
                     </Button>
                 </Section>
+                {/* <Section title='Triggers' loading={loading}>
+
+                </Section> */}
             </>
     )
 }