diff --git a/client/src/scenes/Player/scenes/GameClient/components/Scroll.js b/client/src/scenes/Player/scenes/GameClient/components/Scroll.js
index 5d6de1b..bed8634 100644
--- a/client/src/scenes/Player/scenes/GameClient/components/Scroll.js
+++ b/client/src/scenes/Player/scenes/GameClient/components/Scroll.js
@@ -3,20 +3,20 @@ import svgSkull from '../../../../../../public/skull.svg'
 import svgSmiley from '../../../../../../public/smiley.svg'
 import '../../../../../styles/Scroll.css'
 
-const ItemContentWrong      = (props) => <img className="scrl__itm-wrng" src={props.image}/>
-const ItemContentCorrect    = (props) => <img className="scrl__itm-crct" src={props.image}/>
+const ItemContentWrong      = (props) => <img className="scrl__wrng" src={props.image}/>
+const ItemContentCorrect    = (props) => <img className="scrl__crct" src={props.image}/>
 const ItemContent           = (props) => <span className="scrl__cntnt" onClick={props.onClick}>{props.content}</span>
-const Item                  = (props) => <div className={`scrl__itm scrl__itm-prmry flx--mdl ${props.size}`} style={props.top}>
+const Item                  = (props) => <div className={`scrl__itm scrl__itm--prmry flx--mdl ${props.size}`} style={props.top}>
                                         {props.content}
                                     </div>
 const ScrollBody            = (props) => <div className="scrl__bdy jstfy-cntnt--cntr">{props.items}</div>
 const ScrollButton          = (props) => {
-        let btn = "scrl__ptr-up"
+        let ptr = "scrl__ptr-up"
         if(props.down){
-            btn = "scrl__ptr-dwn"
+            ptr = "scrl__ptr-dwn"
         }
-        return <div className="scrl__btn scrl__btn-prmry flx--mdl" onClick={props.onClick}>
-                    <div className={`scrl__ptr-up clr--rd`}></div>
+        return <div className="scrl__btn scrl__btn--prmry flx--mdl" onClick={props.onClick}>
+                    <div className={`${ptr} clr--rd`}></div>
                 </div>
 }
                     
@@ -27,8 +27,8 @@ export default class Scroll extends Component{
         this.state = {
             items: ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q","r","s","t","u","v","w","x","y","z"],
             index: 0,
-            odd: "scrl__itm-sml",
-            even: "scrl__itm-big",
+            odd: "scrl__itm--sml",
+            even: "scrl__itm--big",
             top: 0,
             show: 5
         }
@@ -48,9 +48,9 @@ export default class Scroll extends Component{
     }
 
     swapOddEvenSizes = () => {
-        const currentOddIsSmall = this.state.odd === "scrl__itm-sml"
-        const newOdd = currentOddIsSmall ? "scrl__itm-big" : "scrl__itm-sml"
-        const newEven = currentOddIsSmall ? "scrl__itm-sml" : "scrl__itm-big"
+        const currentOddIsSmall = this.state.odd === "scrl__itm--sml"
+        const newOdd = currentOddIsSmall ? "scrl__itm--big" : "scrl__itm--sml"
+        const newEven = currentOddIsSmall ? "scrl__itm--sml" : "scrl__itm--big"
         this.setState({
             odd: newOdd,
             even: newEven
diff --git a/client/src/scenes/Player/scenes/GameClient/components/Search.js b/client/src/scenes/Player/scenes/GameClient/components/Search.js
index d887bee..6e0bdc1 100644
--- a/client/src/scenes/Player/scenes/GameClient/components/Search.js
+++ b/client/src/scenes/Player/scenes/GameClient/components/Search.js
@@ -3,9 +3,9 @@ import "../../../../../styles/Search.css"
 
 const generateSearch = (status) => {
     if(status){
-        return <div className="srch srch-lrg srch-prmry clr--rd flx--mdl box--pos-abs-top">searching..</div>
+        return <div className="srch srch--lrg srch--prmry clr--rd flx--mdl box--pos-abs-top">searching..</div>
     }
-    return <div className="no-srch"></div>
+    return <div className="vsblty--hdn"></div>
 }
 
 const Search = (props) => generateSearch(props.status) 
diff --git a/client/src/styles/Common.css b/client/src/styles/Common.css
index 58a352a..af300b0 100644
--- a/client/src/styles/Common.css
+++ b/client/src/styles/Common.css
@@ -1,13 +1,13 @@
 
-.flt--rght{
+.flt--rght {
     float: right
 }
 
-.flt--lft{
+.flt--lft {
     float: left
 }
 
-.flx--mdl{
+.flx--mdl {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -22,35 +22,39 @@
     flex-direction: row;
 }
 
-.jstfy-cntnt--cntr{
+.jstfy-cntnt--cntr {
     justify-content: center;
 }
 
-.algn-itms--cntr{
+.algn-itms--cntr {
     align-items: center;
 }
 
-.flx--clm{
+.flx--clm {
     flex-direction: column;
 }
 
-.box--pos-abs-top{
+.box--pos-abs-top {
     position: absolute;
     top: 0px;
 }
 
-.clr--grn{
+.clr--grn {
     color: green;
 }
 
-.clr--ylw{
+.clr--ylw {
     color: yellow;
 }
 
-.clr--wht{
+.clr--wht {
     color: RGB(233,233,233);
 }
 
-.clr--rd{
+.clr--rd {
     color: red
+}
+
+.vsblty--hdn {
+    visibility: hidden;
 }
\ No newline at end of file
diff --git a/client/src/styles/Scroll.css b/client/src/styles/Scroll.css
index e19729b..5e5e464 100644
--- a/client/src/styles/Scroll.css
+++ b/client/src/styles/Scroll.css
@@ -27,12 +27,13 @@
 }
 
 
-.scrl__btn-prmry{
+.scrl__btn--prmry{
     border: 2px solid RGB(233,233,233);
     background-color: RGB(6,6,6);
 }
 
-.scrl__btn:hover{
+.scrl__btn:hover,
+.scrl__btn:focus{
     border-color: RGB(100,100,100);
 }
 
@@ -50,30 +51,33 @@
     font-size: 100%;
 }
 
-.scrl__itm-prmry{
+.scrl__itm--prmry{
     border: 2px solid RGB(168, 161, 161);
     border-radius: 25%;
     background-color: RGB(6,6,6);
 }
 
-.scrl__itm:hover {
+.scrl__itm:hover,
+.scrl__itm:focus {
     color: red;   
     border-color: RGB(100,100,100);
 }
 
-.scrl__itm-big {
+.scrl__itm--big {
     width: 85%;
 }
 
-.scrl__itm-big:hover{
+.scrl__itm--big:hover,
+.scrl__itm--big:focus{
     width: 90%;
 }
 
-.scrl__itm-sml:hover{
+.scrl__itm--sml:hover,
+.scrl__itm--sml:focus{
     width: 70%;
 }
 
-.scrl__itm-sml{
+.scrl__itm--sml{
     width: 75%;
 }
 
@@ -81,11 +85,12 @@
     animation: 0.25s ease-out 0s 1 becomeVisible;
 }
 
-.scrl-itm-wrng{
+.scrl__wrng{
     width: 2.5em;
     height: 2.5em; 
 }
-.scrl-itm-crct{
+
+.scrl__crct{
     width: 1.5em;
     height: 1.5em;
 }
diff --git a/client/src/styles/Search.css b/client/src/styles/Search.css
index c2baec1..b1cd48b 100644
--- a/client/src/styles/Search.css
+++ b/client/src/styles/Search.css
@@ -4,16 +4,12 @@
     font-size: 100%;
 }
 
-.srch-lrg {
+.srch--lrg {
     width: 100%;
     height: 100%;
 }
 
-.srch-prmry {
+.srch--prmry {
     border: 1px solid RGB(6,6,6);
     background-color: RGBA(6,6,6, 0.5);
 }
-
-.no-srch {
-    visibility: hidden;
-}
\ No newline at end of file