diff --git a/uno/css/uno.css b/uno/css/uno.css
index 9ca86c7..58c06ee 100644
--- a/uno/css/uno.css
+++ b/uno/css/uno.css
@@ -87,4 +87,51 @@ body
 #sayUno-glow{
     opacity: 0.3;
     transition: width ease-in-out 0.5s, opacity 0.5s;
+}
+
+.selectColor {
+    display: flex;
+    align-items: center;
+}
+
+.cc{
+    position: absolute;
+    width: 10vw;
+    z-index: 1000;
+}
+#cc-blue{
+    top: 20vw;
+    left: 50vw;
+    transition: top 0.5s, left 0.5s;
+}
+#cc-green{
+    top: 20vw;
+    right: 50vw;
+    transition: top 0.5s, right 0.5s;
+}
+#cc-yellow{
+    top: 10vw;
+    right: 50vw;
+    transition: top 0.5s, right 0.5s;
+}
+#cc-red{
+    top: 10vw;
+    left: 50vw;
+    transition: top 0.5s, left 0.5s;
+}
+#cc-blue:hover{
+    top: calc(20vw + 15px);
+    left: calc(50vw + 15px);
+}
+#cc-red:hover{
+    top: calc(10vw - 15px);
+    left: calc(50vw + 15px);
+}
+#cc-yellow:hover{
+    top: calc(10vw - 15px);
+    right: calc(50vw + 15px);
+}
+#cc-green:hover{
+    top: calc(20vw + 15px);
+    right: calc(50vw + 15px);
 }
\ No newline at end of file
diff --git a/uno/index.html b/uno/index.html
index 56a8013..3bc5b50 100644
--- a/uno/index.html
+++ b/uno/index.html
@@ -13,7 +13,10 @@
 
     <div class="selectColor">
 
-
+        <img class="cc" id="cc-blue" src="./img/selectColor/BLUE.png">
+        <img class="cc" id="cc-red" src="./img/selectColor/RED.png">
+        <img class="cc" id="cc-green" src="./img/selectColor/GREEN.png">
+        <img class="cc" id="cc-yellow" src="./img/selectColor/YELLOW.png">
 
     </div>