diff --git a/web/app/cad/scene/controls/ViewCube.less b/web/app/cad/scene/controls/ViewCube.less
index f5240b9e..63f7e794 100644
--- a/web/app/cad/scene/controls/ViewCube.less
+++ b/web/app/cad/scene/controls/ViewCube.less
@@ -25,40 +25,41 @@
   position: absolute;
   width: 100px;
   height: 100px;
-  border: 2px solid black;
+  padding:0px;
+  border: 5px solid black;
   line-height: 100px;
-  font-size: 20px;
+  font-size: 26px;
   font-weight: bold;
-  color: white;
+  color: rgb(0, 0, 0);
   text-align: center;
 }
 
 .front {
-  background: rgba(0, 0, 255, 0.7);
+  background: rgba(102, 102, 255, 0.95);
   transform: rotateY(0deg) rotateX(180deg) translateZ(-50px);
 }
 
 .right {
-  background: rgba(255, 0, 0, 0.7);
+  background: rgba(255, 0, 0, 0.95);
   transform: rotateY(90deg) rotateX(180deg) translateZ(-50px);
 }
 
 .back {
-  background: rgba(0, 255, 255, 0.7);
+  background: rgba(0, 255, 255, 0.95);
   transform: rotateY(180deg) rotateX(180deg) translateZ(-50px);
 }
 
 .left {
-  background: rgba(255, 0, 255, 0.7);
+  background: rgba(255, 0, 255, 0.95);
   transform: rotateY(-90deg) rotateX(180deg) translateZ(-50px);
 }
 
 .top {
-  background: rgba(0, 255, 0, 0.7);
+  background: rgba(0, 255, 0, 0.95);
   transform: rotateX(-90deg) rotateX(180deg) translateZ(-50px);
 }
 
 .bottom {
-  background: rgba(255, 255, 0, 0.7);
+  background: rgba(255, 255, 0, 0.95);
   transform: rotateX(90deg) rotateX(180deg) translateZ(-50px);
 }
diff --git a/web/app/cad/scene/controls/ViewCube.tsx b/web/app/cad/scene/controls/ViewCube.tsx
index fb268512..30ea1602 100644
--- a/web/app/cad/scene/controls/ViewCube.tsx
+++ b/web/app/cad/scene/controls/ViewCube.tsx
@@ -20,12 +20,12 @@ export function ViewCube() {
     <div className={ls.cube} style={{
       transform: `translateZ(-300px) ${cssMatrix}`
     }}>
-      <div className={cx(ls.face, ls.front)} onClick={() => context.actionService.run('StandardViewFront')}> front</div>
-      <div className={cx(ls.face, ls.back)} onClick={() => context.actionService.run('StandardViewBack')}>back</div>
-      <div className={cx(ls.face, ls.right)} onClick={() => context.actionService.run('StandardViewRight')}>right</div>
-      <div className={cx(ls.face, ls.left)} onClick={() => context.actionService.run('StandardViewLeft')}>left</div>
-      <div className={cx(ls.face, ls.top)} onClick={() => context.actionService.run('StandardViewTop')}>top</div>
-      <div className={cx(ls.face, ls.bottom)} onClick={() => context.actionService.run('StandardViewBottom')}>bottom</div>
+      <div className={cx(ls.face, ls.front)} onClick={() => context.actionService.run('StandardViewFront')}>Front</div>
+      <div className={cx(ls.face, ls.back)} onClick={() => context.actionService.run('StandardViewBack')}>Back</div>
+      <div className={cx(ls.face, ls.right)} onClick={() => context.actionService.run('StandardViewRight')}>Right</div>
+      <div className={cx(ls.face, ls.left)} onClick={() => context.actionService.run('StandardViewLeft')}>Left</div>
+      <div className={cx(ls.face, ls.top)} onClick={() => context.actionService.run('StandardViewTop')}>Top</div>
+      <div className={cx(ls.face, ls.bottom)} onClick={() => context.actionService.run('StandardViewBottom')}>Bottom</div>
     </div>
   </div>