diff --git a/luckydiamond/src/assets/css/ComponentsStyles/AdaptiveStyles/headermobile.css b/luckydiamond/src/assets/css/ComponentsStyles/AdaptiveStyles/headermobile.css
new file mode 100644
index 0000000..5d5a409
--- /dev/null
+++ b/luckydiamond/src/assets/css/ComponentsStyles/AdaptiveStyles/headermobile.css
@@ -0,0 +1,64 @@
+/* Header */
+
+.header-mobile {
+    grid-area: header-mobile;
+    border-radius: 20px;
+    background: #17181C;
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    height: 45%;
+}
+
+.header-mobile__content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.header-mobile__logo {
+    padding: 6% 0 2.5% 4%;
+}
+
+.header-mobile__logo img {
+    width: 85%;
+}
+
+.header-mobile__balance--content {
+    display: flex;
+    align-items: center;
+}
+
+.header-mobile__card {
+    border-radius: 7px;
+    background: #22252F;
+    box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
+}
+
+.card-display h2 {
+    display: flex;
+    align-items: flex-end;
+    padding: 8% 15px 8% 7%;
+}
+
+.card-img img {
+    width: 100%;
+    height: 100%;
+}
+
+.card-text {
+    color: #FFF;
+    font-weight: 700;
+    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    font-family: Montserrat Alternates;
+    font-size: 13px;
+}
+
+.btn-card img {
+    width: 90%;
+    height: 40px;
+}
+
+.btn-card__margin {
+    margin-left: -8%;
+}
+
+/* /Header */
\ No newline at end of file
diff --git a/luckydiamond/src/assets/css/ComponentsStyles/AdaptiveStyles/menumobile.css b/luckydiamond/src/assets/css/ComponentsStyles/AdaptiveStyles/menumobile.css
new file mode 100644
index 0000000..7103c0e
--- /dev/null
+++ b/luckydiamond/src/assets/css/ComponentsStyles/AdaptiveStyles/menumobile.css
@@ -0,0 +1,46 @@
+/* Footer */
+
+.footer-mobile {
+    grid-area: footer-mobile;
+    width: 100%;
+    height: 10%;
+    background: #17181C;
+    position: fixed;
+    bottom: 0;
+}
+
+.footer-mobile__content {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 2%;
+}
+.chat-icon a,
+.home-icon a,
+.settings-icon a {
+    background: #000;
+}
+
+.home-icon a img {
+    padding-left: 6px;
+}
+
+.settings-icon a img {
+    width: 75px;
+    height: 75px;
+    padding: 9px 0 0 6px;
+}
+
+.footer-mobile__block a {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 90%;
+    height: 4em;
+    background: #D9D9D91F;
+    border-radius: 20px;
+    margin: 0 .8em;
+}
+
+
+/* /Footer */
\ No newline at end of file
diff --git a/luckydiamond/src/assets/css/PagesStyles/adaptive-pages/homemobile.css b/luckydiamond/src/assets/css/PagesStyles/adaptive-pages/homemobile.css
index 0885e44..8b5ab36 100644
--- a/luckydiamond/src/assets/css/PagesStyles/adaptive-pages/homemobile.css
+++ b/luckydiamond/src/assets/css/PagesStyles/adaptive-pages/homemobile.css
@@ -16,86 +16,12 @@ body {
     width: 100%;
 }
 
-.header-mobile {
-    grid-area: header-mobile;
-    border-radius: 20px;
-    background: #17181C;
-    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
-    height: 45%;
-}
-
 .main-mobile {
     grid-area: main-mobile;
     width: 100%;
     height: 100%;
 }
 
-.footer-mobile {
-    grid-area: footer-mobile;
-    width: 100%;
-    height: 10%;
-    background: #17181C;
-    position: fixed;
-    bottom: 0;
-}
-
-/* Header */
-
-.header-mobile__content {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-}
-
-.header-mobile__logo {
-    padding: 6% 0 2.5% 4%;
-}
-
-.header-mobile__logo img {
-    width: 85%;
-}
-
-.header-mobile__balance--content {
-    display: flex;
-    align-items: center;
-}
-
-.header-mobile__card {
-    border-radius: 7px;
-    background: #22252F;
-    box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
-}
-
-.card-display h2 {
-    display: flex;
-    align-items: flex-end;
-    padding: 8% 15px 8% 7%;
-}
-
-.card-img img {
-    width: 100%;
-    height: 100%;
-}
-
-.card-text {
-    color: #FFF;
-    font-weight: 700;
-    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-    font-family: Montserrat Alternates;
-    font-size: 13px;
-}
-
-.btn-card img {
-    width: 90%;
-    height: 40px;
-}
-
-.btn-card__margin {
-    margin-left: -8%;
-}
-
-/* /Header */
-
 /* Main */
 
 .main-mobile__content {
@@ -168,41 +94,3 @@ body {
 }
 
 /* /Main */
-
-/* Footer */
-
-.footer-mobile__content {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-top: 2%;
-}
-.chat-icon a,
-.home-icon a,
-.settings-icon a {
-    background: #000;
-}
-
-.home-icon a img {
-    padding-left: 6px;
-}
-
-.settings-icon a img {
-    width: 75px;
-    height: 75px;
-    padding: 9px 0 0 6px;
-}
-
-.footer-mobile__block a {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 90%;
-    height: 4em;
-    background: #D9D9D91F;
-    border-radius: 20px;
-    margin: 0 .8em;
-}
-
-
-/* /Footer */
\ No newline at end of file
diff --git a/luckydiamond/src/components/adaptive-components/HeaderMobileComponent.vue b/luckydiamond/src/components/adaptive-components/HeaderMobileComponent.vue
new file mode 100644
index 0000000..fc072ab
--- /dev/null
+++ b/luckydiamond/src/components/adaptive-components/HeaderMobileComponent.vue
@@ -0,0 +1,30 @@
+<template>
+  <header class="header-mobile">
+    <div class="header-mobile__content">
+      <div class="header-mobile__logo">
+        <img src="@/assets/icons-adaptive/home-adaptive/logo.svg" alt="LuckyDiamond Play Now">
+      </div>
+      <div class="header-mobile__balance">
+        <div class="header-mobile__balance--content">
+          <div class="header-mobile__card card-display card-text card-img">
+            <h2><img src="@/assets/icons-adaptive/home-adaptive/icon-diamond-ore.png">999</h2>
+          </div>
+          <div class="header-mobile__btn--balance btn-card btn-card__margin">
+            <a href="#"><img src="@/assets/icons-adaptive/home-adaptive/icon-deposit.png"></a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </header>
+</template>
+
+<script>
+import '@/assets/css/ComponentsStyles/AdaptiveStyles/headermobile.css'
+export default {
+
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/luckydiamond/src/components/adaptive-components/MenuMobileComponent.vue b/luckydiamond/src/components/adaptive-components/MenuMobileComponent.vue
new file mode 100644
index 0000000..9cd5f78
--- /dev/null
+++ b/luckydiamond/src/components/adaptive-components/MenuMobileComponent.vue
@@ -0,0 +1,32 @@
+<template>
+  <footer class="footer-mobile">
+    <div class="footer-mobile__content">
+      <div class="footer-mobile__block chat-icon">
+        <a href="#">
+          <img src="@/assets/icons-adaptive/home-adaptive/icon-chat.svg">
+        </a>
+      </div>
+      <div class="footer-mobile__block home-icon">
+        <a href="#" @click="$router.push({ name: 'home' })">
+          <img src="@/assets/icons-adaptive/home-adaptive/icon-home.svg">
+        </a>
+      </div>
+      <div class="footer-mobile__block settings-icon">
+        <a href="#">
+          <img width="" src="@/assets/icons-adaptive/home-adaptive/icon-settings.png">
+        </a>
+      </div>
+    </div>
+  </footer>
+</template>
+
+<script>
+import '@/assets/css/ComponentsStyles/AdaptiveStyles/menumobile.css'
+export default {
+
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/luckydiamond/src/pages/adaptive-pages/HomemobilePage.vue b/luckydiamond/src/pages/adaptive-pages/HomemobilePage.vue
index 4998afa..d1c5fb4 100644
--- a/luckydiamond/src/pages/adaptive-pages/HomemobilePage.vue
+++ b/luckydiamond/src/pages/adaptive-pages/HomemobilePage.vue
@@ -1,23 +1,7 @@
 <link rel="stylesheet" href="../../assets/css/PagesStyles/adaptive-pages/homemobile.css">
 <template>
   <div class="content-grid__mobile-home">
-    <header class="header-mobile">
-      <div class="header-mobile__content">
-        <div class="header-mobile__logo">
-          <img src="@/assets/icons-adaptive/home-adaptive/logo.svg" alt="LuckyDiamond Play Now">
-        </div>
-        <div class="header-mobile__balance">
-          <div class="header-mobile__balance--content">
-            <div class="header-mobile__card card-display card-text card-img">
-              <h2><img src="@/assets/icons-adaptive/home-adaptive/icon-diamond-ore.png">999</h2>
-            </div>
-            <div class="header-mobile__btn--balance btn-card btn-card__margin">
-              <a href="#"><img src="@/assets/icons-adaptive/home-adaptive/icon-deposit.png"></a>
-            </div>
-          </div>
-        </div>
-      </div>
-    </header>
+    <header-mobile-component></header-mobile-component>
     <main class="main-mobile">
       <div class="main-mobile__content">
         <div class="main-mobile__first-line">
@@ -38,25 +22,7 @@
         </div>
       </div>
     </main>
-    <footer class="footer-mobile">
-      <div class="footer-mobile__content">
-        <div class="footer-mobile__block chat-icon">
-          <a href="#">
-            <img src="@/assets/icons-adaptive/home-adaptive/icon-chat.svg">
-          </a>
-        </div>
-        <div class="footer-mobile__block home-icon">
-          <a href="#" @click="$router.push({ name: 'home' })">
-            <img src="@/assets/icons-adaptive/home-adaptive/icon-home.svg">
-          </a>
-        </div>
-        <div class="footer-mobile__block settings-icon">
-          <a href="#">
-            <img width="" src="@/assets/icons-adaptive/home-adaptive/icon-settings.png">
-          </a>
-        </div>
-      </div>
-    </footer>
+    <menu-mobile-component></menu-mobile-component>
   </div>
 </template>
 
@@ -65,7 +31,11 @@ import '@/assets/css/PagesStyles/adaptive-pages/homemobile.css'
 import '@/mocks/GameModes'
 import GameModes from "@/mocks/GameModes";
 
+import HeaderMobileComponent from "@/components/adaptive-components/HeaderMobileComponent.vue";
+import MenuMobileComponent from "@/components/adaptive-components/MenuMobileComponent.vue";
+
 export default {
+  components: { HeaderMobileComponent, MenuMobileComponent },
   data() {
     return {
       GameModes