diff --git a/app/src/styles/abstracts/variables.scss b/app/src/styles/abstracts/variables.scss
index 6bb3d57..8400709 100644
--- a/app/src/styles/abstracts/variables.scss
+++ b/app/src/styles/abstracts/variables.scss
@@ -60,6 +60,17 @@ $highlight-secondary-color: #6F42C1;
 $highlight-accent-color-dark: #403E6A;
 $highlight-secondary-color-dark: #C4ABF1;
 
+// icon colors
+// ---------- light mode ----------
+$icon-default-color: #6F42C1;
+$icon-default-color-hover: #7f4ddb;
+$icon-default-color-active: #F2F2F7;
+
+// ---------- dark mode ----------
+$icon-default-color-dark: #6F42C1;
+$icon-default-color-hover-dark: #7f4ddb;
+$icon-default-color-active-dark: #F2F2F7;
+
 // colors
 $color1: #A392CD;
 $color2: #7b4cd3;
diff --git a/app/src/styles/base/base.scss b/app/src/styles/base/base.scss
index e74c0ec..d812e9b 100644
--- a/app/src/styles/base/base.scss
+++ b/app/src/styles/base/base.scss
@@ -1,139 +1,156 @@
-@use "../abstracts/variables" as *; // abstracts/variables.scss
+@use "../abstracts/variables" as *;
 
-// Light theme styles
 [data-theme="light"] {
-  // Text and Input colors
-  --text-color: #{$text-color}; // Main text color for light theme
-  --text-disabled: #{$text-disabled}; // Disabled text color
-  --input-text-color: #{$input-text-color}; // Input field text color
+  // text colors
+  --text-color: #{$text-color};
+  --text-disabled: #{$text-disabled};
+  --input-text-color: #{$input-text-color};
+  --highlight-text-color: #{$highlight-text-color};
 
-  // Accent and Highlight colors
-  --primary-color: #{$background-color}; // Primary color for light theme
-  --accent-color: #{$accent-color}; // Primary accent color for light theme
-  --highlight-accent-color: #{$highlight-accent-color}; // Highlight color for light theme
-  --accent-gradient-color: #{$acent-gradient}; // Primary accent color for light theme
+  // background colors
+  --background-color: #{$background-color};
+  --background-color-secondary: #{$background-color-secondary};
+  --background-color-accent: #{$background-color-accent};
+  --background-color-button: #{$background-color-button};
+  --background-color-drop-down: #{$background-color-drop-down};
+  --background-color-input: #{$background-color-input};
+  --background-color-input-focus: #{$background-color-input-focus};
+  --background-color-drop-down-gradient: #{$background-color-drop-down-gradient};
+  --background-color-selected: #{$background-color-selected};
+  --background-radial-gray-gradient: #{$background-radial-gray-gradient};
+
+  // border colors
+  --border-color: #{$border-color};
+  --border-color-accent: #{$border-color-accent};
+
+  // highlight colors
+  --highlight-accent-color: #{$highlight-accent-color};
+  --highlight-secondary-color: #{$highlight-secondary-color};
+
+  // icon colors
+  --icon-default-color: #{$icon-default-color};
+  --icon-default-color-active: #{$icon-default-color-active};
+
+  // old colors
+  --accent-color: #{$accent-color};
+  --highlight-accent-color: #{$highlight-accent-color};
+  --accent-gradient-color: #{$acent-gradient};
   --faint-gradient-color: #{$faint-gradient};
-
-  // Background colors
-  --background-color: #{$background-color}; // Main background color
-  --background-color-secondary: #{$background-color-secondary}; // Secondary background color
-  --background-color-gray: #{$background-color-gray}; // Secondary background color
-
-  // Border colors
-  --border-color: #{$border-color}; // Border color for light theme
-
-  // Shadow variables
-  --shadow-main-light: #{$shadow-color}; // Main shadow color
-  --box-shadow-light: 0px 2px 4px var(--shadow-main-light); // Light shadow
-  --box-shadow-medium: 0px 4px 8px var(--shadow-main-light); // Medium shadow
-  --box-shadow-heavy: 0px 8px 16px var(--shadow-main-light); // Heavy shadow
-
-  // Font families
-  --font-inter: #{$font-inter}; // Inter font family
-  --font-josefin-sans: #{$font-josefin-sans}; // Josefin Sans font family
-  --font-poppins: #{$font-poppins}; // Poppins font family
-  --font-roboto: #{$font-roboto}; // Roboto font family
+  --background-color-gray: #{$background-color-gray};
+  --border-color: #{$border-color};
+  --shadow-main-light: #{$shadow-color};
+  --box-shadow-light: 0px 2px 4px var(--shadow-main-light);
+  --box-shadow-medium: 0px 4px 8px var(--shadow-main-light);
+  --box-shadow-heavy: 0px 8px 16px var(--shadow-main-light);
+  --font-inter: #{$font-inter};
+  --font-josefin-sans: #{$font-josefin-sans};
+  --font-poppins: #{$font-poppins};
+  --font-roboto: #{$font-roboto};
 }
 
-// Dark theme styles
 [data-theme="dark"] {
-  // Text and Input colors
-  --text-color: #{$text-color-dark}; // Main text color for dark theme
-  --text-disabled: #{$text-disabled-dark}; // Disabled text color
-  --input-text-color: #{$input-text-color-dark}; // Input field text color
+  // text colors
+  --text-color: #{$text-color-dark};
+  --text-disabled: #{$text-disabled-dark};
+  --input-text-color: #{$input-text-color-dark};
+  --highlight-text-color: #{$highlight-text-color-dark};
 
-  // Accent and Highlight colors
-  --primary-color: #{$highlight-accent-color-dark};
-  --accent-color: #{$accent-color-dark}; // Primary accent color for dark theme
-  --highlight-accent-color: #{$highlight-accent-color-dark}; // Highlight color for dark theme
-  --accent-gradient-color: #{$acent-gradient-dark}; // Primary accent color for light theme
+  // background colors
+  --background-color: #{$background-color-dark};
+  --background-color-secondary: #{$background-color-secondary-dark};
+  --background-color-accent: #{$background-color-accent-dark};
+  --background-color-button: #{$background-color-button-dark};
+  --background-color-drop-down: #{$background-color-drop-down-dark};
+  --background-color-input: #{$background-color-input-dark};
+  --background-color-input-focus: #{$background-color-input-focus-dark};
+  --background-color-drop-down-gradient: #{$background-color-drop-down-gradient-dark};
+  --background-color-selected: #{$background-color-selected-dark};
+  --background-radial-gray-gradient: #{$background-radial-gray-gradient-dark};
+
+  // border colors
+  --border-color: #{$border-color};
+  --border-color-accent: #{$border-color-accent-dark};
+
+  // highlight colors
+  --highlight-accent-color: #{$highlight-accent-color-dark};
+  --highlight-secondary-color: #{$highlight-secondary-color-dark};
+
+  // icon colors
+  --icon-default-color: #{$icon-default-color-dark};
+  --icon-default-color-active: #{$icon-default-color-active-dark};
+
+  // old colors
+  --accent-color: #{$accent-color-dark};
+  --highlight-accent-color: #{$highlight-accent-color-dark};
+  --accent-gradient-color: #{$acent-gradient-dark};
   --faint-gradient-color: #{$faint-gradient-dark};
-
-  // Background colors
-  --background-color: #{$background-color-dark}; // Main background color
-  --background-color-secondary: #{$background-color-secondary-dark}; // Secondary background color
-  --background-color-gray: #{$background-color-gray-dark}; // Secondary background color
-
-  // Border colors
-  --border-color: #{$border-color-dark}; // Border color for dark theme
-
-  // Shadow variables
-  --shadow-main-dark: #{$shadow-color}; // Main shadow color
-  --box-shadow-light: 0px 2px 4px var(--shadow-main-dark); // Light shadow
-  --box-shadow-medium: 0px 4px 8px var(--shadow-main-dark); // Medium shadow
-  --box-shadow-heavy: 0px 8px 16px var(--shadow-main-dark); // Heavy shadow
-
-  // Font families
-  --font-inter: #{$font-inter}; // Inter font family
-  --font-josefin-sans: #{$font-josefin-sans}; // Josefin Sans font family
-  --font-poppins: #{$font-poppins}; // Poppins font family
-  --font-roboto: #{$font-roboto}; // Roboto font family
+  --background-color-gray: #{$background-color-gray-dark};
+  --border-color: #{$border-color-dark};
+  --shadow-main-dark: #{$shadow-color};
+  --box-shadow-light: 0px 2px 4px var(--shadow-main-dark);
+  --box-shadow-medium: 0px 4px 8px var(--shadow-main-dark);
+  --box-shadow-heavy: 0px 8px 16px var(--shadow-main-dark);
+  --font-inter: #{$font-inter};
+  --font-josefin-sans: #{$font-josefin-sans};
+  --font-poppins: #{$font-poppins};
+  --font-roboto: #{$font-roboto};
 }
 
-// Root container styles
 #root {
-  height: 100vh; // Full viewport height
-  width: 100vw; // Full viewport width
-  overflow: hidden; // Prevent scrollbars
+  height: 100vh;
+  width: 100vw;
+  overflow: hidden;
   background-color: var(--background-color-gray);
 }
 
-// Root overlay styles
 #root-over {
-  position: fixed; // Fix overlay to the viewport
-  top: 0; // Align to the top
-  left: 0; // Align to the left
-  z-index: 99; // Ensure high stacking order
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 99;
 }
 
 body {
   background: var(--background-color);
+  --font-size-tiny: #{$tiny};
+  --font-size-small: #{$small};
+  --font-size-regular: #{$regular};
+  --font-size-large: #{$large};
+  --font-size-xlarge: #{$xlarge};
+  --font-size-xxlarge: #{$xxlarge};
+  --font-size-xxxlarge: #{$xxxlarge};
+  --font-weight-regular: #{$regular-weight};
+  --font-weight-medium: #{$medium-weight};
+  --font-weight-bold: #{$bold-weight};
 
-  /* Font Sizes */
-  --font-size-tiny: #{$tiny}; // Extra small text
-  --font-size-small: #{$small}; // Small text
-  --font-size-regular: #{$regular}; // Default text size
-  --font-size-large: #{$large}; // Large text size
-  --font-size-xlarge: #{$xlarge}; // Extra large text size
-  --font-size-xxlarge: #{$xxlarge}; // Double extra large text size
-  --font-size-xxxlarge: #{$xxxlarge}; // Triple extra large text size
-
-  /* Font Weights */
-  --font-weight-regular: #{$regular-weight}; // Regular font weight
-  --font-weight-medium: #{$medium-weight}; // Medium font weight
-  --font-weight-bold: #{$bold-weight}; // Bold font weight
+  // colors
+  --color1: #{$color1};
+  --color2: #{$color2};
+  --color3: #{$color3};
+  --color4: #{$color4};
+  --color5: #{$color5};
 }
 
-/* Apply custom scrollbar styles globally */
 ::-webkit-scrollbar {
   width: 8px;
-  /* Width of the scrollbar */
   height: 8px;
-  /* Height for horizontal scrollbars */
 }
 
 ::-webkit-scrollbar-track {
   background: transparent;
-  /* Background of the scrollbar track */
   border-radius: 4px;
-  /* Rounded corners */
 }
 
 ::-webkit-scrollbar-thumb {
   background: var(--accent-color);
-  /* Scrollbar handle color */
   border-radius: 4px;
-  /* Rounded corners */
   border: 2px solid var(--primary-color);
-  /* Padding around the scrollbar handle */
 }
 
 ::-webkit-scrollbar-thumb:hover {
   background: var(--accent-color);
-  /* Handle color on hover */
 }
 
 ::-webkit-scrollbar-corner {
   background: transparent;
-  /* Remove corner styling for scrollable containers */
 }