diff --git a/src/Training.AirBnb.Clone.Frontend/src/App.vue b/src/Training.AirBnb.Clone.Frontend/src/App.vue
index 33ee96df..89e59d0e 100644
--- a/src/Training.AirBnb.Clone.Frontend/src/App.vue
+++ b/src/Training.AirBnb.Clone.Frontend/src/App.vue
@@ -1,10 +1,12 @@
 <template>
 
   <!--    <main-logo/>-->
-  <home-view/>
+<!--  <home-view/>-->
+  <second-home-page/>
 
 </template>
 
 <script lang="ts" setup>
 import HomeView from "@/common/views/HomeView.vue";
+import SecondHomePage from "@/common/views/SecondHomePage.vue";
 </script>
\ No newline at end of file
diff --git a/src/Training.AirBnb.Clone.Frontend/src/Modules/locations/components/ListingDetailsCard.vue b/src/Training.AirBnb.Clone.Frontend/src/Modules/locations/components/ListingDetailsCard.vue
new file mode 100644
index 00000000..055b1021
--- /dev/null
+++ b/src/Training.AirBnb.Clone.Frontend/src/Modules/locations/components/ListingDetailsCard.vue
@@ -0,0 +1,231 @@
+<template>
+  <div class="flex theme-bg-primary top-20 flex-col items-start justify-start gap-2 relative theme-bg-primary">
+    <div class="flex w-full justify-between pt-1 p-4">
+
+      <div class="content-padding flex flex-col relative w-full">
+        <div>
+          <h5 class="font-medium theme-text-primary text-2xl">Entire chalet in Kittilä, Finland</h5>
+          <ol class="flex-col justify-start decimal ">
+            <li class="inline">
+              7 guests
+              <span> · </span>
+            </li>
+            <li class="inline">
+              4 bedrooms
+              <span> · </span>
+            </li>
+            <li class="inline">
+              7 beds
+              <span> · </span>
+            </li>
+            <li class="inline">
+              1.5 baths
+            </li>
+          </ol>
+        </div>
+
+        <!-- Yulduzcha -->
+        <div class="">
+          <div class="flex items-center gap-1 theme-text-primary">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true" role="presentation"
+                 focusable="false"
+                 style="display: block; height: 12px; width: 12px; fill: currentcolor;">
+              <path fill-rule="evenodd"
+                    d="m15.1 1.58-4.13 8.88-9.86 1.27a1 1 0 0 0-.54 1.74l7.3 6.57-1.97 9.85a1 1 0 0 0 1.48 1.06l8.62-5 8.63 5a1 1 0 0 0 1.48-1.06l-1.97-9.85 7.3-6.57a1 1 0 0 0-.55-1.73l-9.86-1.28-4.12-8.88a1 1 0 0 0-1.82 0z"></path>
+            </svg>
+            <p>
+              <strong>
+                <a href="/">
+                  1-review
+                </a>
+              </strong>
+            </p>
+          </div>
+        </div>
+
+        <!-- Logo -->
+        <div class="theme-border w-[750px] px-8 py-5 rounded-2xl  ">
+          <a href="//">
+            <div class="flex items-center justify-start">
+              <div style="width: auto; height: 36px;">
+                <svg class="inline" viewBox="0 0 20 32" fill="none" xmlns="http://www.w3.org/2000/svg" height="36">
+                  <g clip-path="url(#clip0_5880_37773)">
+                    <path
+                        fill-rule="evenodd" clip-rule="evenodd" d="M15.4895 25.417L14.8276 24.4547L16.5303 23.6492L17.1923 24.6116L16.3409 25.0143L17.1923 24.6116C18.6638 26.751 17.9509 29.3868 15.5999 30.4989C14.8548 30.8513 14.0005 31.0196 13.1221 30.987L12.8044 30.9752L12.7297 29.2305L13.0474 29.2423C13.5744 29.2618 14.0871 29.1608 14.5341 28.9494C15.9447 28.2821 16.3725 26.7007 15.4895 25.417Z" fill="#222222">
+                    </path>
+                    <path
+                        fill-rule="evenodd" clip-rule="evenodd" d="M8.32441 10.235C10.0819 8.96204 10.9247 7.4878 10.853 5.81232C10.7813 4.13685 9.80929 2.59524 7.93708 1.18749C6.17964 2.46049 5.33678 3.93473 5.40851 5.6102C5.48024 7.28568 6.45221 8.82729 8.32441 10.235Z" fill="#F7F7F7">
+                    </path>
+                    <path
+                        fill-rule="evenodd" clip-rule="evenodd" d="M7.19425 0.489275C7.55718 0.226387 8.10753 0.246818 8.49416 0.537533C10.5385 2.07473 11.7071 3.84975 11.7923 5.84026C11.8775 7.83076 10.8574 9.52453 8.93841 10.9146C8.57548 11.1775 8.02513 11.157 7.6385 10.8663C5.59415 9.32914 4.4256 7.55411 4.34039 5.56361C4.25517 3.57311 5.27521 1.87933 7.19425 0.489275ZM7.92362 2.3684C6.77985 3.38355 6.29788 4.47199 6.3478 5.63813C6.39772 6.80428 6.97457 7.93203 8.20904 9.03547C9.35281 8.02032 9.83478 6.93187 9.78486 5.76573C9.73493 4.59959 9.15809 3.47184 7.92362 2.3684Z" fill="#222222">
+                    </path>
+                    <path
+                        fill-rule="evenodd" clip-rule="evenodd" d="M15.6806 24.0529C14.1314 22.353 12.4326 21.4688 10.5842 21.4001C8.73575 21.3315 7.10737 22.0923 5.69905 23.6824C7.24822 25.3823 8.94702 26.2666 10.7955 26.3352C12.6439 26.4038 14.2723 25.6431 15.6806 24.0529Z" fill="#F7F7F7">
+                    </path>
+                    <path
+                        fill-rule="evenodd" clip-rule="evenodd" d="M4.90529 24.1787C4.60807 23.8526 4.58911 23.4097 4.8593 23.1046C6.38985 21.3765 8.27538 20.4331 10.521 20.5164C12.7666 20.5998 14.7391 21.6864 16.4227 23.5339C16.7199 23.86 16.7389 24.303 16.4687 24.608C14.9381 26.3361 13.0526 27.2795 10.807 27.1962C8.56134 27.1128 6.5889 26.0262 4.90529 24.1787ZM6.98781 23.7198C8.22307 24.8808 9.46778 25.4045 10.7323 25.4515C11.9968 25.4984 13.2005 25.0656 14.3402 23.9928C13.1049 22.8318 11.8602 22.3081 10.5957 22.2611C9.3312 22.2142 8.12744 22.6471 6.98781 23.7198Z" fill="#222222">
+                    </path>
+                    <path
+                        fill-rule="evenodd" clip-rule="evenodd" d="M10.6766 20.7043C10.2137 18.5957 9.16392 17.0928 7.52727 16.1956C5.89062 15.2984 3.99442 15.1864 1.83867 15.8596C2.30157 17.9683 3.35135 19.4712 4.988 20.3684C6.62465 21.2656 8.52085 21.3775 10.6766 20.7043Z" fill="#F7F7F7">
+                    </path>
+                    <path
+                        fill-rule="evenodd" clip-rule="evenodd" d="M0.791956 15.9443C0.703053 15.5393 0.94431 15.1569 1.37329 15.023C3.7337 14.2859 5.9714 14.3695 7.95247 15.4554C9.92449 16.5364 11.1013 18.3139 11.6022 20.5956C11.6911 21.0006 11.4499 21.3829 11.0209 21.5169C8.66048 22.254 6.42277 22.1704 4.4417 21.0844C2.46969 20.0034 1.29285 18.226 0.791956 15.9443ZM2.95349 16.4656C3.43375 17.9951 4.27991 19.007 5.41321 19.6282C6.5306 20.2407 7.84423 20.4286 9.44069 20.0743C8.96043 18.5448 8.11427 17.5329 6.98097 16.9116C5.86358 16.2991 4.54995 16.1113 2.95349 16.4656Z" fill="#222222">
+                    </path>
+                    <path
+                        fill-rule="evenodd" clip-rule="evenodd" d="M7.90911 15.6267C8.65652 13.6743 8.53705 11.9555 7.55072 10.4702C6.56438 8.98484 4.90844 8.03014 2.58291 7.60605C1.8355 9.55846 1.95497 11.2773 2.9413 12.7626C3.92764 14.2479 5.58357 15.2026 7.90911 15.6267Z" fill="#F7F7F7">
+                    </path>
+                    <path
+                        fill-rule="evenodd" clip-rule="evenodd" d="M1.66037 7.28295C1.80927 6.89397 2.26578 6.67525 2.74598 6.76282C5.29848 7.22831 7.26368 8.31371 8.44396 10.0911C9.61955 11.8614 9.70866 13.854 8.89805 15.9715C8.74915 16.3605 8.29264 16.5792 7.81244 16.4916C5.25994 16.0261 3.29474 14.9407 2.11446 13.1634C0.938866 11.393 0.849755 9.40048 1.66037 7.28295ZM3.3385 8.6613C2.94038 10.1267 3.14588 11.3465 3.83454 12.3835C4.51397 13.4067 5.60091 14.1584 7.21992 14.5931C7.61804 13.1278 7.41254 11.9079 6.72388 10.8709C6.04445 9.84774 4.95751 9.09607 3.3385 8.6613Z" fill="#222222">
+                    </path>
+                  </g>
+                  <defs>
+                    <clipPath id="clip0_5880_37773">
+                      <rect width="18.8235" height="32" fill="white" transform="translate(0.453125 0.000488281)">
+                      </rect>
+                    </clipPath>
+                  </defs>
+                </svg>
+              </div>
+              <div class="m-2 leading-[1rem] font-medium w-18 basis-1 text-wrap"><center> Guest favorite </center></div>
+              <div style="width: auto; height: 36px;">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 32" fill="none" height="36">
+                  <g clip-path="url(#clip0_5880_37786)">
+                    <path
+                        fill-rule="evenodd" clip-rule="evenodd" d="M4.06516 25.417L4.72713 24.4547L3.02437 23.6492L2.3624 24.6116L3.21378 25.0143L2.3624 24.6116C0.890857 26.751 1.60381 29.3868 3.95483 30.4989C4.69986 30.8513 5.55423 31.0196 6.43257 30.987L6.75025 30.9752L6.82494 29.2305L6.50726 29.2423C5.98026 29.2618 5.46764 29.1608 5.02062 28.9494C3.61001 28.2821 3.18223 26.7007 4.06516 25.417Z" fill="#222222">
+                    </path>
+                    <path
+                        fill-rule="evenodd" clip-rule="evenodd" d="M11.2303 10.235C9.47283 8.96204 8.62998 7.4878 8.70171 5.81232C8.77344 4.13685 9.7454 2.59524 11.6176 1.18749C13.375 2.46049 14.2179 3.93473 14.1462 5.6102C14.0744 7.28568 13.1025 8.82729 11.2303 10.235Z" fill="#F7F7F7">
+                    </path>
+                    <path
+                        fill-rule="evenodd" clip-rule="evenodd" d="M12.3604 0.489275C11.9975 0.226387 11.4472 0.246818 11.0605 0.537533C9.01618 2.07473 7.84763 3.84975 7.76242 5.84026C7.6772 7.83076 8.69724 9.52453 10.6163 10.9146C10.9792 11.1775 11.5296 11.157 11.9162 10.8663C13.9605 9.32914 15.1291 7.55411 15.2143 5.56361C15.2995 3.57311 14.2795 1.87933 12.3604 0.489275ZM11.6311 2.3684C12.7748 3.38355 13.2568 4.47199 13.2069 5.63813C13.157 6.80428 12.5801 7.93203 11.3456 9.03547C10.2019 8.02032 9.71991 6.93187 9.76983 5.76573C9.81975 4.59959 10.3966 3.47184 11.6311 2.3684Z" fill="#222222">
+                    </path>
+                    <path
+                        fill-rule="evenodd" clip-rule="evenodd" d="M3.87411 24.0529C5.42328 22.353 7.12208 21.4688 8.97051 21.4001C10.8189 21.3315 12.4473 22.0923 13.8556 23.6824C12.3065 25.3823 10.6077 26.2666 8.75924 26.3352C6.9108 26.4038 5.28243 25.6431 3.87411 24.0529Z" fill="#F7F7F7">
+                    </path>
+                    <path
+                        fill-rule="evenodd" clip-rule="evenodd" d="M14.6494 24.1787C14.9466 23.8526 14.9656 23.4097 14.6954 23.1046C13.1648 21.3765 11.2793 20.4331 9.03368 20.5164C6.78805 20.5998 4.81561 21.6864 3.13199 23.5339C2.83478 23.86 2.81582 24.303 3.08601 24.608C4.61655 26.3361 6.50208 27.2795 8.74771 27.1962C10.9933 27.1128 12.9658 26.0262 14.6494 24.1787ZM12.5669 23.7198C11.3316 24.8808 10.0869 25.4045 8.82241 25.4515C7.55791 25.4984 6.35415 25.0656 5.21452 23.9928C6.44977 22.8318 7.69449 22.3081 8.95899 22.2611C10.2235 22.2142 11.4272 22.6471 12.5669 23.7198Z" fill="#222222">
+                    </path>
+                    <path
+                        fill-rule="evenodd" clip-rule="evenodd" d="M8.87809 20.7043C9.34099 18.5957 10.3908 17.0928 12.0274 16.1956C13.6641 15.2984 15.5603 15.1864 17.716 15.8596C17.2531 17.9683 16.2033 19.4712 14.5667 20.3684C12.93 21.2656 11.0338 21.3775 8.87809 20.7043Z" fill="#F7F7F7">
+                    </path>
+                    <path
+                        fill-rule="evenodd" clip-rule="evenodd" d="M18.7627 15.9443C18.8516 15.5393 18.6104 15.1569 18.1814 15.023C15.821 14.2859 13.5833 14.3695 11.6022 15.4554C9.6302 16.5364 8.45336 18.3139 7.95247 20.5956C7.86356 21.0006 8.10482 21.3829 8.5338 21.5169C10.8942 22.254 13.1319 22.1704 15.113 21.0844C17.085 20.0034 18.2618 18.226 18.7627 15.9443ZM16.6012 16.4656C16.1209 17.9951 15.2748 19.007 14.1415 19.6282C13.0241 20.2407 11.7105 20.4286 10.114 20.0743C10.5943 18.5448 11.4404 17.5329 12.5737 16.9116C13.6911 16.2991 15.0047 16.1113 16.6012 16.4656Z" fill="#222222">
+                    </path>
+                    <path
+                        fill-rule="evenodd" clip-rule="evenodd" d="M11.6456 15.6267C10.8982 13.6743 11.0176 11.9555 12.004 10.4702C12.9903 8.98484 14.6462 8.03014 16.9718 7.60605C17.7192 9.55846 17.5997 11.2773 16.6134 12.7626C15.6271 14.2479 13.9711 15.2026 11.6456 15.6267Z" fill="#F7F7F7">
+                    </path>
+                    <path
+                        fill-rule="evenodd" clip-rule="evenodd" d="M17.8943 7.28295C17.7454 6.89397 17.2889 6.67525 16.8087 6.76282C14.2562 7.22831 12.291 8.31371 11.1107 10.0911C9.93513 11.8614 9.84602 13.854 10.6566 15.9715C10.8055 16.3605 11.262 16.5792 11.7422 16.4916C14.2947 16.0261 16.26 14.9407 17.4402 13.1634C18.6158 11.393 18.7049 9.40048 17.8943 7.28295ZM16.2162 8.6613C16.6143 10.1267 16.4088 11.3465 15.7201 12.3835C15.0407 13.4067 13.9538 14.1584 12.3348 14.5931C11.9366 13.1278 12.1421 11.9079 12.8308 10.8709C13.5102 9.84774 14.5972 9.09607 16.2162 8.6613Z" fill="#222222">
+                    </path>
+                  </g>
+                  <defs>
+                    <clipPath id="clip0_5880_37786">
+                      <rect width="18.8235" height="32" fill="white" transform="matrix(-1 0 0 1 19.1016 0.000488281)">
+                      </rect>
+                    </clipPath>
+                  </defs>
+                </svg>
+              </div>
+              <div class="mx-10 leading-[1.30rem] my-2 font-medium text-wrap w-64">One of the most loved homes on Airbnb, according to guests</div>
+
+              <!-- Nechta Yulduzligi-->
+              <div class="mb-1 ml-12">
+                <h1 class="mb-0.5 flex text-xl font-medium items-center justify-center">
+                  4.87
+                </h1>
+                <div class=" flex justify-start items-start">
+                  <svg class="mr-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true" role="presentation" focusable="false" style="display: block; height: 10px; width: 10px; fill: currentcolor;">
+                    <path
+                        fill-rule="evenodd" d="m15.1 1.58-4.13 8.88-9.86 1.27a1 1 0 0 0-.54 1.74l7.3 6.57-1.97 9.85a1 1 0 0 0 1.48 1.06l8.62-5 8.63 5a1 1 0 0 0 1.48-1.06l-1.97-9.85 7.3-6.57a1 1 0 0 0-.55-1.73l-9.86-1.28-4.12-8.88a1 1 0 0 0-1.82 0z">
+                    </path>
+                  </svg>
+                  <svg class="mr-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true" role="presentation" focusable="false" style="display: block; height: 10px; width: 10px; fill: currentcolor;">
+                    <path
+                        fill-rule="evenodd" d="m15.1 1.58-4.13 8.88-9.86 1.27a1 1 0 0 0-.54 1.74l7.3 6.57-1.97 9.85a1 1 0 0 0 1.48 1.06l8.62-5 8.63 5a1 1 0 0 0 1.48-1.06l-1.97-9.85 7.3-6.57a1 1 0 0 0-.55-1.73l-9.86-1.28-4.12-8.88a1 1 0 0 0-1.82 0z">
+                    </path>
+                  </svg>
+                  <svg class="mr-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true" role="presentation" focusable="false" style="display: block; height: 10px; width: 10px; fill: currentcolor;">
+                    <path
+                        fill-rule="evenodd" d="m15.1 1.58-4.13 8.88-9.86 1.27a1 1 0 0 0-.54 1.74l7.3 6.57-1.97 9.85a1 1 0 0 0 1.48 1.06l8.62-5 8.63 5a1 1 0 0 0 1.48-1.06l-1.97-9.85 7.3-6.57a1 1 0 0 0-.55-1.73l-9.86-1.28-4.12-8.88a1 1 0 0 0-1.82 0z">
+                    </path>
+                  </svg>
+                  <svg class="mr-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true" role="presentation" focusable="false" style="display: block; height: 10px; width: 10px; fill: currentcolor;">
+                    <path
+                        fill-rule="evenodd" d="m15.1 1.58-4.13 8.88-9.86 1.27a1 1 0 0 0-.54 1.74l7.3 6.57-1.97 9.85a1 1 0 0 0 1.48 1.06l8.62-5 8.63 5a1 1 0 0 0 1.48-1.06l-1.97-9.85 7.3-6.57a1 1 0 0 0-.55-1.73l-9.86-1.28-4.12-8.88a1 1 0 0 0-1.82 0z">
+                    </path>
+                  </svg>
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true" role="presentation" focusable="false" style="display: block; height: 10px; width: 10px; fill: currentcolor;">
+                    <path
+                        fill-rule="evenodd" d="m15.1 1.58-4.13 8.88-9.86 1.27a1 1 0 0 0-.54 1.74l7.3 6.57-1.97 9.85a1 1 0 0 0 1.48 1.06l8.62-5 8.63 5a1 1 0 0 0 1.48-1.06l-1.97-9.85 7.3-6.57a1 1 0 0 0-.55-1.73l-9.86-1.28-4.12-8.88a1 1 0 0 0-1.82 0z">
+                    </path>
+                  </svg>
+                </div>
+              </div>
+              <div class="mx-8 h-8 w-[0.5px] bg-borderColor"/>
+              <!-- Reviews-->
+              <div class="leading-[0.75rem] pb-1 justify-center items-center">
+                <h1 class="text-xl font-medium flex justify-center items-center">
+                  31
+                </h1>
+                <h1 class="text-[12px] underline font-medium items-center justify-center">
+                  Reviews
+                </h1>
+              </div>
+            </div>
+          </a>
+        </div>
+
+        <!-- User componentts-->
+
+        <div class="my-8 flex items-center justify-start">
+          <div class="flex relative items-center justify-start">
+            <a href="https://translate.yandex.com/en/?source_lang=uz&target_lang=en" target="_blank">
+              <img class="object-cover h-[50px] w-[50px] rounded-[50px] flex-wrap flex" src="https://a0.muscache.com/im/pictures/user/a2dfc749-465e-4863-b103-b4d47c3e50c0.jpg?im_w=240">
+            </a>
+            <div class="mt-7 absolute ml-8">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 14" aria-hidden="true" role="presentation" focusable="false" style="display: block; height: 20px; width: 20px;">
+                <linearGradient id="a" x1="8.5%" x2="92.18%" y1="17.16%" y2="17.16%">
+                  <stop
+                      offset="0" stop-color="#e61e4d">
+                  </stop>
+                  <stop
+                      offset=".5" stop-color="#e31c5f">
+                  </stop>
+                  <stop
+                      offset="1" stop-color="#d70466">
+                  </stop>
+                </linearGradient>
+                <path
+                    fill="#fff" d="M9.93 0c.88 0 1.6.67 1.66 1.52l.01.15v2.15c0 .54-.26 1.05-.7 1.36l-.13.08-3.73 2.17a3.4 3.4 0 1 1-2.48 0L.83 5.26A1.67 1.67 0 0 1 0 3.96L0 3.82V1.67C0 .79.67.07 1.52 0L1.67 0z">
+                </path>
+                <path
+                    fill="url(#a)" d="M5.8 8.2a2.4 2.4 0 0 0-.16 4.8h.32a2.4 2.4 0 0 0-.16-4.8zM9.93 1H1.67a.67.67 0 0 0-.66.57l-.01.1v2.15c0 .2.1.39.25.52l.08.05L5.46 6.8c.1.06.2.09.29.1h.1l.1-.02.1-.03.09-.05 4.13-2.4c.17-.1.3-.29.32-.48l.01-.1V1.67a.67.67 0 0 0-.57-.66z">
+                </path>
+              </svg>
+            </div>
+          </div>
+          <div>
+            <div class="ml-5">
+              <h5 class="font-medium theme-text-primary text-lg">Hosted by Ronald & Inese</h5>
+              <ol class="flex-col justify-start decimal">
+                <li class="text-gray-500 text-[15px] inline">
+                  Superhost
+                  <span> · </span>
+                </li>
+                <li class="text-gray-500 text-[15px] inline">
+                  7 years hosting
+                </li>
+              </ol>
+            </div>
+          </div>
+        </div>
+        <listing-features-card/>
+        <listing-details-info/>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import ListingFeaturesCard from "@/Modules/locations/components/ListingFeatures.vue";
+import ListingDetailsInfo from "@/Modules/locations/components/ListingDetailsInfo.vue";
+</script>
\ No newline at end of file
diff --git a/src/Training.AirBnb.Clone.Frontend/src/Modules/locations/components/ListingDetailsInfo.vue b/src/Training.AirBnb.Clone.Frontend/src/Modules/locations/components/ListingDetailsInfo.vue
new file mode 100644
index 00000000..d3c96133
--- /dev/null
+++ b/src/Training.AirBnb.Clone.Frontend/src/Modules/locations/components/ListingDetailsInfo.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="w-[750px]">
+    <!-- Translater Info-->
+    <div class="flex items-center justify-start bg-gray-200 rounded-xl mt-10 px-3 py-5">
+      <h1>
+        Some info is shown in its original language.
+      </h1>
+      <a href="https://google.com" target="_blank">
+        <h1 class="font-medium underline ml-2">
+          Show original
+        </h1>
+      </a>
+    </div>
+    <!--Full Info-->
+    <div class="mt-10">
+      <p class="truncate text-wrap">
+        A cosy nature inspired cabin, on the way and close to the Northcape.
+        Take it easy at this unique and relaxing getaway.
+        Currently, under renovation will be done by 01.06. and there are more pictures coming as soon as the bedrooms and bathroom are going to be done and remodelled. We are also adding jacuzzi and sauna.
+        Surroundings are astonishing, and feeling in the cabin is so calming.
+        The idea came together with local artist who have inspired the owners and have participated in renovation.
+      </p>
+        <button @click="togalModal" class="flex items-center justify-start font-medium underline mt-3">
+          <span  class="text-lg"> Show more </span>
+          <span class="mt-1 ml-2">
+            <svg viewBox="0 0 18 18" role="presentation" aria-hidden="true" focusable="false" style="height: 12px; width: 12px; display: block;">
+              <path
+                  d="m4.29 1.71a1 1 0 1 1 1.42-1.41l8 8a1 1 0 0 1 0 1.41l-8 8a1 1 0 1 1 -1.42-1.41l7.29-7.29z" fill-rule="evenodd">
+              </path>
+            </svg>
+          </span>
+        </button>
+
+      <listing-full-info :modalActive="modalActive" @close-modal="togalModal"/>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+  import ListingFullInfo from "@/Modules/locations/components/ListingFullInfo.vue";
+  import {ref} from "vue";
+  import {DocumentService} from "@/infrastructure/services/DocumentService";
+  const modalActive = ref(false);
+  const documentService = new DocumentService();
+  const togalModal = () => {
+    modalActive.value = !modalActive.value
+    documentService.handleBodyOverflow(modalActive.value)
+  }
+</script>
\ No newline at end of file
diff --git a/src/Training.AirBnb.Clone.Frontend/src/Modules/locations/components/ListingFeatures.vue b/src/Training.AirBnb.Clone.Frontend/src/Modules/locations/components/ListingFeatures.vue
new file mode 100644
index 00000000..b5fc563c
--- /dev/null
+++ b/src/Training.AirBnb.Clone.Frontend/src/Modules/locations/components/ListingFeatures.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="px-3 py-5 w-[750px] items-center justify-start border-y-[1px] border-gray-300 ">
+<!-- Icon 1-->
+    <div class="flex items-center">
+      <div class="pb-3 flex items-center justify-start">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true" role="presentation" focusable="false" style="display: block; height: 24px; width: 24px; fill: currentcolor;">
+          <path
+              d="M26 2a1 1 0 0 1 .92.61l.04.12 2 7a1 1 0 0 1-.85 1.26L28 11h-3v5h6v2h-2v13h-2v-2.54a3.98 3.98 0 0 1-1.73.53L25 29H7a3.98 3.98 0 0 1-2-.54V31H3V18H1v-2h5v-4a1 1 0 0 1 .88-1h.36L6.09 8.4l1.82-.8L9.43 11H12a1 1 0 0 1 1 .88V16h10v-5h-3a1 1 0 0 1-.99-1.16l.03-.11 2-7a1 1 0 0 1 .84-.72L22 2h4zm1 16H5v7a2 2 0 0 0 1.7 1.98l.15.01L7 27h18a2 2 0 0 0 2-1.85V18zm-16-5H8v3h3v-3zm14.24-9h-2.49l-1.43 5h5.35l-1.43-5z">
+          </path>
+        </svg>
+      </div>
+      <ol class="ml-9 flex-col items-center justify-start decimal">
+        <li class="font-medium flex items-start justify-start">
+          Deticated workspace
+        </li>
+          <li class="text-gray-600 items-center justify-start text-[15px] inline">
+            A common area with wifi that’s well-suited for working.
+          </li>
+      </ol>
+    </div>
+<!-- Icon 2-->
+    <div class="flex items-center justify-start my-5">
+      <div class="pb-3 flex items-center justify-start">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true" role="presentation" focusable="false" style="display: block; height: 24px; width: 24px; fill: currentcolor;">
+          <path
+              d="M24.33 1.67a2 2 0 0 1 2 1.85v24.81h3v2H2.67v-2h3V3.67a2 2 0 0 1 1.85-2h.15zm-4 2H7.67v24.66h12.66zm4 0h-2v24.66h2zm-7 11a1.33 1.33 0 1 1 0 2.66 1.33 1.33 0 0 1 0-2.66z">
+          </path>
+        </svg>
+      </div>
+      <ol class="ml-9  flex-col items-center justify-start decimal">
+        <li class="font-medium flex items-start justify-start">
+          Self check-in
+        </li>
+        <li class="text-gray-600 items-center justify-start text-[15px] inline">
+          Check yourself in with the smartlock.
+        </li>
+      </ol>
+    </div>
+<!-- Icon 3-->
+    <div class="flex items-center justify-start">
+      <div class="pb-3 flex items-center justify-start">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true" role="presentation" focusable="false" style="display: block; height: 24px; width: 24px; fill: currentcolor;">
+          <path
+              d="M11.67 0v1.67h8.66V0h2v1.67h6a2 2 0 0 1 2 1.85v16.07a2 2 0 0 1-.46 1.28l-.12.13L21 29.75a2 2 0 0 1-1.24.58H6.67a5 5 0 0 1-5-4.78V3.67a2 2 0 0 1 1.85-2h6.15V0zm16.66 11.67H3.67v13.66a3 3 0 0 0 2.82 3h11.18v-5.66a5 5 0 0 1 4.78-5h5.88zm-.08 8h-5.58a3 3 0 0 0-3 2.82v5.76zm-18.58-16h-6v6h24.66v-6h-6v1.66h-2V3.67h-8.66v1.66h-2z">
+          </path>
+        </svg>
+      </div>
+      <ol class="ml-9 flex-col items-center justify-start decimal">
+        <li class="font-medium flex items-start justify-start">
+          Free cancellation before February 25
+        </li>
+        <li class="text-gray-600 items-center justify-start text-[15px] inline">
+        </li>
+      </ol>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+</script>
\ No newline at end of file
diff --git a/src/Training.AirBnb.Clone.Frontend/src/Modules/locations/components/ListingFullInfo.vue b/src/Training.AirBnb.Clone.Frontend/src/Modules/locations/components/ListingFullInfo.vue
new file mode 100644
index 00000000..3120cf56
--- /dev/null
+++ b/src/Training.AirBnb.Clone.Frontend/src/Modules/locations/components/ListingFullInfo.vue
@@ -0,0 +1,45 @@
+<template>
+  <InfoButtonBase class="items-center justify-center flex" :modalActive="props.modalActive" @close-modal="closeModal">
+    <div class="w-[750px] rounded-xl px-5" v-show="modalActive">
+        <div class="m-5 flex cursor-pointer" @click="$emit('close-modal')">
+      <span>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" aria-hidden="true" role="presentation" focusable="false" style="display: block; fill: none; height: 16px; width: 16px; stroke: currentcolor; stroke-width: 3; overflow: hidden;">
+          <path
+              d="m6 6 20 20M26 6 6 26">
+          </path>
+        </svg>
+      </span>
+        </div>
+      <h1 class="flex items-center justify-start text-xl font-bold ml-5">
+        About this space
+      </h1>
+      <div class="flex ml-5 mt-5 max-h-[550px] overflow-y-scroll">
+        <p>
+          A cosy nature inspired cabin, on the way and close to the Northcape.
+          Take it easy at this unique and relaxing getaway.
+          Currently, under renovation will be done by 01.06. and there are more pictures coming as soon as the bedrooms and bathroom are going to be done and remodelled. We are also adding jacuzzi and sauna.
+          Surroundings are astonishing, and feeling in the cabiA cosy nature inspired cabin, on the way and close to the Northcape.
+          Take it easy at this unique and relaxing getaway.
+          Currently, under renovation will be done by 01.06. and there are more pictures coming as soon as the bedrooms and bathroom are going to be done and remodelled. We are also adding jacuzzi and sauna.
+          Surroundings are astonishing, and feeling in the cabin is so calming.Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
+        </p>
+      </div>
+    </div>
+  </InfoButtonBase>
+</template>
+
+<script setup lang="ts">
+import ModalBase from "@/common/components/InfoButtonBase.vue";
+import InfoButtonBase from "@/common/components/InfoButtonBase.vue";
+
+const emit = defineEmits(["closeModal"])
+const props = defineProps({
+  modalActive:{
+    type: Boolean,
+    default: false
+  }
+})
+const closeModal = () => {
+  emit('closeModal')
+}
+</script>
diff --git a/src/Training.AirBnb.Clone.Frontend/src/common/components/InfoButtonBase.vue b/src/Training.AirBnb.Clone.Frontend/src/common/components/InfoButtonBase.vue
new file mode 100644
index 00000000..36347bd6
--- /dev/null
+++ b/src/Training.AirBnb.Clone.Frontend/src/common/components/InfoButtonBase.vue
@@ -0,0 +1,43 @@
+<template>
+
+<Teleport to="body">    
+    <Transition name="slide-fade">
+        <div v-show="modalActive" class="fixed inset-0 z-30 overflow-auto no-scrollbar" @click="$emit('closeModal')">
+            <div class="relative h-auto mx-auto my-8 border-2 sm:w-full md:w-[745px] theme-bg-secondary rounded-xl" @click.stop>
+                <slot></slot>
+            </div>
+        </div>
+    </Transition>
+</Teleport>
+    
+</template>
+
+<script setup lang="ts">
+
+const emit = defineEmits(['closeModal'])
+
+const props = defineProps({
+    modalActive: {
+        type: Boolean,
+        default: false
+    }
+});
+    
+</script>
+
+<style scoped>
+
+.slide-fade-enter-active {
+  transition: all 0.3s ease-out;
+}
+
+.slide-fade-leave-active {
+  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
+}
+
+.slide-fade-enter-from,
+.slide-fade-leave-to {
+  transform: translateY(500px);
+}
+
+</style>
\ No newline at end of file
diff --git a/src/Training.AirBnb.Clone.Frontend/src/common/views/SecondHomePage.vue b/src/Training.AirBnb.Clone.Frontend/src/common/views/SecondHomePage.vue
new file mode 100644
index 00000000..b2b63648
--- /dev/null
+++ b/src/Training.AirBnb.Clone.Frontend/src/common/views/SecondHomePage.vue
@@ -0,0 +1,17 @@
+<template>
+  <div class="flex flex-col w-screen h-screen theme-bg-primary">
+  <main-header/>
+  <listing-details-card/>
+  </div>
+</template>
+
+<script>
+
+import {defineComponent} from "vue";
+import MainHeader from "@/common/components/MainHeader.vue";
+import ListingDetailsCard from "@/Modules/locations/components/ListingDetailsCard.vue";
+
+export default defineComponent({
+  components: {ListingDetailsCard, MainHeader}
+})
+</script>
\ No newline at end of file