diff --git a/src/portal/src/app/shared/about-dialog/about-dialog.component.scss b/src/portal/src/app/shared/about-dialog/about-dialog.component.scss
index 1d5b21e8b..9d88cb50e 100644
--- a/src/portal/src/app/shared/about-dialog/about-dialog.component.scss
+++ b/src/portal/src/app/shared/about-dialog/about-dialog.component.scss
@@ -12,10 +12,15 @@
 .content {
     margin:0 10px 10px 10px;
     outline: none;
+    width: 470px;
 }
 
 .harbor-icon {
-    transform: translateX(-100%);
     width: 56px;
     filter: drop-shadow(rgb(0, 0, 0) 58px 2px);
+}
+
+.harbor-logo-black {
+    width: 60px;
+    overflow: hidden;
 }
\ No newline at end of file
diff --git a/src/portal/src/css/common.scss b/src/portal/src/css/common.scss
index 75977cee4..d43c651c6 100644
--- a/src/portal/src/css/common.scss
+++ b/src/portal/src/css/common.scss
@@ -17,7 +17,8 @@
 }
 
 .harbor-icon {
-  filter: drop-shadow($fill-color1 58px 2px) !important;
+  transform: translateX($harbor-icon-translate-x) !important;
+  filter: drop-shadow($fill-color1 $harbor-icon-drop-shadow-x 2px) !important;
 }
 
 .color-white-dark {
diff --git a/src/portal/src/css/dark-theme.scss b/src/portal/src/css/dark-theme.scss
index d26d615a1..3f9c9f4bb 100644
--- a/src/portal/src/css/dark-theme.scss
+++ b/src/portal/src/css/dark-theme.scss
@@ -26,4 +26,7 @@ $color-657b83: none;
 $color-fdf6e3:  none;
 $header-color: hsl(198, 100%, 15%)!important;
 
+$harbor-icon-translate-x: 0;
+$harbor-icon-drop-shadow-x: 58px;
+
 @import "./common.scss";
diff --git a/src/portal/src/css/light-theme.scss b/src/portal/src/css/light-theme.scss
index 4c852a44b..212eb272e 100644
--- a/src/portal/src/css/light-theme.scss
+++ b/src/portal/src/css/light-theme.scss
@@ -28,4 +28,7 @@ $color-657b83: #657b83;
 $color-fdf6e3:  #fdf6e3;
 $header-color: rgb(0, 74, 112);
 
+$harbor-icon-translate-x: 100%;
+$harbor-icon-drop-shadow-x: -56px;
+
 @import "./common.scss";