diff --git a/src/assets/css/rankGuide.css b/src/assets/css/rankGuide.css
new file mode 100644
index 0000000..9e5ba5c
--- /dev/null
+++ b/src/assets/css/rankGuide.css
@@ -0,0 +1,45 @@
+/* RankGuide */
+/* Saving memory by getting the value from the same memory space, thus preventing placing same value in multiple memory adresses. */
+  :root{
+    --transitionTransformEasInOutDot3: transform .3s ease-in-out;
+    --zIndex11: 11;
+    --scale1Dot2: scale(1.2); 
+  }
+
+/* Keyframes */
+@keyframes rotate360 {
+  0% {
+    transform: rotateY(-220deg);
+    opacity: 0;
+  }
+  50%{
+    opacity: .4;
+  }
+  100% {
+    transform: rotateY(-360deg);
+    opacity: 1;
+  }
+}
+
+  @media (min-width: 992px) {
+  /* Elements in RankGuide.tsx */
+  .zoom-card {
+      transition: var(--transitionTransformEasInOutDot3);
+      animation: rotate360 1s linear;
+      z-index: 10;  
+    }
+    
+    .zoom-card:hover {
+      transform: var(--scale1Dot2);
+      background-color: #000;
+      border: 1px solid #E3E3E3;
+      z-index: var(--zIndex11);
+    }
+    
+    .zoom-card img { transition: var(--transitionTransformEasInOutDot3); }
+    
+    .zoom-card:hover img {
+      transform: var(--scale1Dot2);
+      z-index: var(--zIndex11);
+    }
+  }
\ No newline at end of file
diff --git a/src/pages/RankGuide.tsx b/src/pages/RankGuide.tsx
index 848e86d..62731fb 100644
--- a/src/pages/RankGuide.tsx
+++ b/src/pages/RankGuide.tsx
@@ -2,10 +2,11 @@ import { PageContainer } from '@ant-design/pro-layout';
 import { Card, Typography } from 'antd';
 import React from 'react';
 import { useIntl } from 'umi';
+import '../assets/css/rankGuide.css'; 
 
-const { Meta } = Card;
-const { Text } = Typography;
-
+const { Meta } = Card; 
+const { Text } = Typography; 
+ 
 type RankInfo = {
   id: number;
   name: string;
@@ -882,14 +883,23 @@ export default (): React.ReactNode => {
 
   for (const rank of ranks) {
     const pathToImgAndShowRankEmblem = `/static/media/emblem/${rank.id}.png`;
-
     cards.push(
-      <div className="col-md-3 text-center">
-        <Card hoverable style={{ marginBottom: '16px', minHeight: '375px' }}>
-          <img src={`${pathToImgAndShowRankEmblem}`} />
-          <Meta title={rank.name} description={rank.description} style={{ marginBottom: '4px' }} />
+      <div className="col-md-3 text-center" key={rank.name}>
+        <Card
+          hoverable
+          className="zoom-card"
+          style={{ margin: '15px 0', height: '90%' }}
+        >
+          <img
+            style={{ height: '128px', objectFit: 'cover' }}
+            src={`${pathToImgAndShowRankEmblem}`} alt={rank.name}
+          />
+          <Card.Meta
+            style={{ marginBottom: '4px' }}
+            description={rank.description}  title={rank.name}
+          />
         </Card>
-      </div>,
+      </div>
     );
   }
 
@@ -898,4 +908,4 @@ export default (): React.ReactNode => {
       <div className="row">{cards}</div>
     </PageContainer>
   );
-};
+};
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
deleted file mode 100644
index 85733f6..0000000
--- a/tsconfig.json
+++ /dev/null
@@ -1,23 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "esnext",
-    "module": "esnext",
-    "moduleResolution": "node",
-    "importHelpers": true,
-    "jsx": "preserve",
-    "esModuleInterop": true,
-    "sourceMap": true,
-    "baseUrl": "./",
-    "skipLibCheck": true,
-    "experimentalDecorators": true,
-    "strict": true,
-    "resolveJsonModule": true,
-    "allowSyntheticDefaultImports": true,
-    "paths": {
-      "@/*": ["./src/*"],
-      "@@/*": ["./src/.umi/*"],
-      "@@test/*": ["./src/.umi-test/*"]
-    }
-  },
-  "include": ["./**/*.d.ts", "./**/*.ts", "./**/*.tsx"]
-}