diff --git a/packages/view/src/components/ThemeSelector/ThemeSelector.scss b/packages/view/src/components/ThemeSelector/ThemeSelector.scss
index 482d7343..13f73981 100644
--- a/packages/view/src/components/ThemeSelector/ThemeSelector.scss
+++ b/packages/view/src/components/ThemeSelector/ThemeSelector.scss
@@ -9,21 +9,21 @@
 
 .selector__container {
   position: absolute;
-  top: 30px;
+  top: 2.5rem;
   left: 0;
-  padding: 24px;
-  background-color: var(--color-darkgray);
-  border-radius: 5px 40px 40px 40px;
+  padding: 20px;
+  background-color: var(--color-dark-gray);
+  border-radius: 0.3rem 1.5rem 1.5rem 1.5rem;
   z-index: 10;
 
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 10px;
 
   > div {
     display: flex;
     justify-content: space-between;
-    gap: 4px;
+    gap: 2px;
     &:nth-child(1) {
       font-size: $font-size-title;
       font-weight: $font-weight-semibold;
@@ -39,14 +39,15 @@
   flex-direction: column;
   align-items: center;
   justify-items: center;
-  gap: 24px;
+  gap: 1rem;
   padding: 10px;
   box-sizing: border-box;
 
+
   &:hover,
   &--selected {
     @extend .theme-icon;
-    background-color: #363636;
+    background-color: #4f5662;
     border-radius: 10px;
     cursor: pointer;
   }
diff --git a/packages/view/src/components/ThemeSelector/ThemeSelector.tsx b/packages/view/src/components/ThemeSelector/ThemeSelector.tsx
index 54ec5d2e..83085dd0 100644
--- a/packages/view/src/components/ThemeSelector/ThemeSelector.tsx
+++ b/packages/view/src/components/ThemeSelector/ThemeSelector.tsx
@@ -8,9 +8,9 @@ const themes = [
     title: "Githru",
     value: "githru",
     colors: {
-      primary: "#f14f8c",
-      secondary: "#8421c9",
-      tertiary: "#ffcb7d",
+      primary: "#e06091",
+      secondary: "#8840bb",
+      tertiary: "#ffd08a",
     },
   },
   {
@@ -18,7 +18,7 @@ const themes = [
     value: "hacker-blue",
     colors: {
       primary: "#456cf7",
-      secondary: "#0c216f",
+      secondary: "#3f4c73",
       tertiary: "#6c60f0",
     },
   },
@@ -26,9 +26,9 @@ const themes = [
     title: "Aqua",
     value: "aqua",
     colors: {
-      primary: "#25d4bf",
+      primary: "#51decd",
       secondary: "#0687a3",
-      tertiary: "#35ffff",
+      tertiary: "#a7ffff",
     },
   },
   {
@@ -37,7 +37,7 @@ const themes = [
     colors: {
       primary: "#ffcccb",
       secondary: "#feffd1",
-      tertiary: "#8979ca",
+      tertiary: "#a39aeb",
     },
   },
 
@@ -45,9 +45,9 @@ const themes = [
     title: "Mono",
     value: "mono",
     colors: {
-      primary: "#5f6f86",
+      primary: "#68788f",
       secondary: "#3a4776",
-      tertiary: "#9499c3",
+      tertiary: "#9aaed1",
     },
   },
 ];
diff --git a/packages/view/src/components/VerticalClusterList/Summary/Summary.scss b/packages/view/src/components/VerticalClusterList/Summary/Summary.scss
index ab4e73de..731dcb88 100644
--- a/packages/view/src/components/VerticalClusterList/Summary/Summary.scss
+++ b/packages/view/src/components/VerticalClusterList/Summary/Summary.scss
@@ -94,9 +94,9 @@
 
           a {
             text-decoration: none;
-            color: var(--color-lightgray);
+            color: var(--color-light-gray);
             &:visited {
-              color: var(--color-lightgray);
+              color: var(--color-light-gray);
             }
             &:hover {
               color: var(--color-primary);
diff --git a/packages/view/src/fake-assets/cluster-nodes.json b/packages/view/src/fake-assets/cluster-nodes.json
index db80bf13..b5a9cd8d 100644
--- a/packages/view/src/fake-assets/cluster-nodes.json
+++ b/packages/view/src/fake-assets/cluster-nodes.json
@@ -1622,7 +1622,7 @@
                 "insertions": 40,
                 "deletions": 0
               },
-              "packages/view/src/assets/styles/_pallete.scss": {
+              "packages/view/src/assets/styles/_pallette.scss": {
                 "insertions": 295,
                 "deletions": 0
               },
@@ -1648,7 +1648,7 @@
               }
             }
           },
-          "message": "Merge pull request #20 from jeonghye-choi/feat/styles/n/nfeat: add style pallete"
+          "message": "Merge pull request #20 from jeonghye-choi/feat/styles/n/nfeat: add style pallette"
         },
         "clusterId": 10
       },
@@ -1882,13 +1882,13 @@
             "insertions": 295,
             "deletions": 0,
             "files": {
-              "packages/view/src/styles/_pallete.scss": {
+              "packages/view/src/styles/_pallette.scss": {
                 "insertions": 295,
                 "deletions": 0
               }
             }
           },
-          "message": "feat: add color palletes with levels"
+          "message": "feat: add color pallettes with levels"
         },
         "clusterId": 10
       }
@@ -2047,7 +2047,7 @@
                 "insertions": 40,
                 "deletions": 0
               },
-              "packages/view/src/assets/styles/_pallete.scss": {
+              "packages/view/src/assets/styles/_pallette.scss": {
                 "insertions": 295,
                 "deletions": 0
               },
@@ -2493,7 +2493,7 @@
                 "insertions": 40,
                 "deletions": 0
               },
-              "packages/view/src/assets/styles/_pallete.scss": {
+              "packages/view/src/assets/styles/_pallette.scss": {
                 "insertions": 295,
                 "deletions": 0
               },
diff --git a/packages/view/src/styles/_colors.scss b/packages/view/src/styles/_colors.scss
index cc6482fd..e1b0e39e 100644
--- a/packages/view/src/styles/_colors.scss
+++ b/packages/view/src/styles/_colors.scss
@@ -1,4 +1,4 @@
-@import "pallete";
+@import "pallette";
 
 $color--dark: $white;
 $color--light: $black;
diff --git a/packages/view/src/styles/_customTheme.scss b/packages/view/src/styles/_customTheme.scss
index 8b525186..3095f931 100644
--- a/packages/view/src/styles/_customTheme.scss
+++ b/packages/view/src/styles/_customTheme.scss
@@ -1,47 +1,48 @@
 :root {
-  --color-black: #000000;
-  --color-white: #ffffff;
-  --color-lightgray: #bdbdbd;
-  --color-darkgray: #3e3e3e;
+  --color-black: #010b13;
+  --color-white: #f8f8f8;
+  --color-light-gray: #b4bac6;
+  --color-medium-gray: #757880;
+  --color-dark-gray: #363a41;
   --color-text-white: #f8f8f8;
 }
 
+html[custom-type="githru"] {
+  --color-primary: #e06091;
+  --color-secondary: #8840bb;
+  --color-tertiary: #ffd08a;
+  --color-success: #07bebe;
+  --color-failed: #ee2479;
+}
+
 html[custom-type="hacker-blue"] {
   --color-primary: #456cf7;
-  --color-secondary: #465070;
+  --color-secondary: #3f4c73;
   --color-tertiary: #6c60f0;
   --color-success: #1fc7a9;
   --color-failed: #ee2479;
 }
 
 html[custom-type="aqua"] {
-  --color-primary: #25d4bf;
+  --color-primary: #51decd;
   --color-secondary: #0687a3;
-  --color-tertiary: #35ffff;
-  --color-success: #0373b2;
+  --color-tertiary: #a7ffff;
+  --color-success: #008cde;
   --color-failed: #ee2479;
 }
 
 html[custom-type="cotton-candy"] {
   --color-primary: #ffcccb;
   --color-secondary: #feffd1;
-  --color-tertiary: #8979ca;
+  --color-tertiary: #a39aeb;
   --color-success: #7ad5c4;
   --color-failed: #ff8bbc;
 }
 
-html[custom-type="githru"] {
-  --color-primary: #f14f8c;
-  --color-secondary: #8421c9;
-  --color-tertiary: #ffcb7d;
-  --color-success: #07bebe;
-  --color-failed: #ee2479;
-}
-
 html[custom-type="mono"] {
-  --color-primary: #5f6f86;
+  --color-primary: #68788f;
   --color-secondary: #3a4776;
-  --color-tertiary: #9499c3;
-  --color-success: #42b8b8;
-  --color-failed: #ee2479;
+  --color-tertiary: #9aaed1;
+  --color-success: #6cafaf;
+  --color-failed: #aa4b72;
 }
diff --git a/packages/view/src/styles/_pallete.scss b/packages/view/src/styles/_pallette.scss
similarity index 99%
rename from packages/view/src/styles/_pallete.scss
rename to packages/view/src/styles/_pallette.scss
index 0eebf02b..e600890f 100644
--- a/packages/view/src/styles/_pallete.scss
+++ b/packages/view/src/styles/_pallette.scss
@@ -1,4 +1,4 @@
-//pallete from Bootstrap
+//pallette from Bootstrap
 // red
 $red-50: #ffebee;
 $red-100: #ffcdd2;
diff --git a/packages/view/src/styles/_theme.scss b/packages/view/src/styles/_theme.scss
deleted file mode 100644
index 889ad190..00000000
--- a/packages/view/src/styles/_theme.scss
+++ /dev/null
@@ -1,42 +0,0 @@
-@import "colors";
-
-$themes: (
-  dark: (
-    color: $color--dark,
-    highlight-color: $highlight-color--dark,
-    danger-color: $danger-color--dark,
-    warning-color: $warning-color--dark,
-    success-color: $success-color--dark,
-    info-color: $info-color--dark,
-  ),
-  light: (
-    color: $color--light,
-    highlight-color: $highlight-color--light,
-    danger-color: $danger-color--light,
-    warning-color: $warning-color--light,
-    success-color: $success-color--light,
-  ),
-);
-
-@mixin themed() {
-  @each $theme, $map in $themes {
-    .theme--#{$theme} & {
-      $theme-map: () !global;
-      @each $key, $submap in $map {
-        $value: map-get(map-get($themes, $theme), "#{$key}");
-        $theme-map: map-merge(
-          $theme-map,
-          (
-            $key: $value,
-          )
-        ) !global;
-      }
-      @content;
-      $theme-map: null !global;
-    }
-  }
-}
-
-@function theme($key) {
-  @return map-get($theme-map, $key);
-}
diff --git a/packages/view/src/styles/app.scss b/packages/view/src/styles/app.scss
index 9e3758ea..24c4a2f6 100644
--- a/packages/view/src/styles/app.scss
+++ b/packages/view/src/styles/app.scss
@@ -1,7 +1,6 @@
 @import "customTheme";
 @import "colors";
 @import "font";
-@import "pallete";
+@import "pallette";
 @import "reset";
-@import "theme";
 @import "utils";