diff --git a/.eslintrc.js b/.eslintrc.js
index e256083..8f75feb 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -12,14 +12,14 @@ module.exports = {
     "prettier",
     "eslint:recommended",
     "plugin:vue/recommended",
-    'plugin:prettier/recommended',
-    'prettier/vue'
+    "plugin:prettier/recommended",
+    "prettier/vue"
   ],
   plugins: ["prettier"],
   rules: {
     "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
     "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
     "prettier/prettier": "error",
-    "no-unused-vars": process.env.NODE_ENV === "production" ? "error" : "off",
+    "no-unused-vars": process.env.NODE_ENV === "production" ? "error" : "off"
   }
 };
diff --git a/babel.config.js b/babel.config.js
index ba17966..3ecebf1 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,5 +1,3 @@
 module.exports = {
-  presets: [
-    '@vue/app'
-  ]
-}
+  presets: ["@vue/app"]
+};
diff --git a/src/components/Cell.vue b/src/components/Cell.vue
index 0a2f558..6ccc063 100644
--- a/src/components/Cell.vue
+++ b/src/components/Cell.vue
@@ -1,5 +1,7 @@
 <template>
-  <div class="cell" :class="[status, { hidden: !visible }]"></div>
+  <div class="cell">
+    <div class="card" :class="[status, { hidden: !visible }]" />
+  </div>
 </template>
 
 <script>
@@ -19,19 +21,30 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.ship {
+.card {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  transition: transform 1s;
+  transform-style: preserve-3d;
+}
+.card.ship {
   background-color: black;
 }
-.ship.hidden {
+
+.card.ship.hidden {
   background-color: unset;
 }
-.missed {
-  background-color: blue;
+.card.missed {
+  background-color: aqua;
+  transform: rotateY(180deg);
 }
-.hit {
+.card.hit {
   background-color: yellow;
+  transform: rotateY(180deg);
 }
-.sunk {
+.card.sunk {
   background-color: red;
+  transform: rotateY(180deg);
 }
 </style>
diff --git a/src/components/PlayBoard.vue b/src/components/PlayBoard.vue
index 4501817..bf7ebfd 100644
--- a/src/components/PlayBoard.vue
+++ b/src/components/PlayBoard.vue
@@ -117,6 +117,9 @@ export default {
   }
   height: 3vw;
   width: 3vw;
+  position: relative;
+  perspective: 800px;
+  cursor: pointer;
 }
 .legend {
   height: 3vw;