diff --git a/frontend/src/components/Auth/Carousel.vue b/frontend/src/components/Auth/Carousel.vue
index 635110cde..bafe2a779 100644
--- a/frontend/src/components/Auth/Carousel.vue
+++ b/frontend/src/components/Auth/Carousel.vue
@@ -39,24 +39,23 @@ export default {
 <style>
 .carousel {
   position: relative;
-  height: 100%;
+  height: 120%;
+  top: -138px;
+  bottom: -369px;
 }
+
 .carousel-inner {
+  background-color: brown;
   height: 100%;
   border-radius: 0 94% 63% 0/0 78% 54% 0;
 }
 
 @media screen and (max-width: 1398px) {
   .carousel-item {
-    width: 116%;
-    top: 101px;
   }
 }
 @media screen and (max-width: 1200px) {
   .carousel-item {
-    width: 129%;
-    top: 118px;
-    left: -75px;
   }
 }
 </style>
diff --git a/frontend/src/components/Auth/MobileStart.vue b/frontend/src/components/Auth/MobileStart.vue
index 87c1645cb..45d709905 100644
--- a/frontend/src/components/Auth/MobileStart.vue
+++ b/frontend/src/components/Auth/MobileStart.vue
@@ -55,26 +55,28 @@ export default {
   bottom: 65px;
   width: 100%;
 }
-
+/* logo */
 .mobil-start-box #img0 {
-  /* position: absolute;*/
+  position: absolute;
   z-index: 1000;
-  /* width: 33%; */
+  min-width: 200px;
+  max-width: 280px;
 }
 
 .mobil-start-box #img1 {
-  /* position: absolute;*/
+  position: absolute;
   overflow: hidden;
   height: 100%;
-  /* width: 100%;*/
+  width: 100%;
   z-index: 10;
 }
 
 .mobil-start-box #img2 {
-  /*position: absolute;*/
-  /*width: 49%;*/
-  height: 14%;
-  z-index: 1;
+  position: absolute;
+  min-width: 220px;
+  max-width: 300px;
+  height: auto;
+  z-index: 100;
 }
 .mobil-start-box #img3 {
   width: 115%;
diff --git a/frontend/src/layouts/AuthLayout_gdd.vue b/frontend/src/layouts/AuthLayout_gdd.vue
index 0bc714251..f43729b71 100644
--- a/frontend/src/layouts/AuthLayout_gdd.vue
+++ b/frontend/src/layouts/AuthLayout_gdd.vue
@@ -4,9 +4,9 @@
     <div>
       <auth-header class="auth-header" />
 
-      <div class="left-content-box">
-        <div class="bg-img-box d-none d-lg-block">
-          <carousel class="d-block w-100 h-100" />
+      <div class="left-content-box d-none d-lg-block">
+        <div class="bg-img-box">
+          <carousel class="carousel" />
         </div>
         <div class="w-100 bg-txt-box d-none d-lg-block text-center align-self-center">
           <div class="h0">{{ $t('auth.left.gratitude') }}</div>
@@ -112,13 +112,32 @@ export default {
 }
 </script>
 <style lang="scss">
+/* left  */
 .left-content-box {
   position: fixed;
-  max-width: 484px;
-  background-color: aquamarine;
+  width: 40%;
+  /* background-color: aquamarine; */
   top: 0px;
   bottom: 0px;
 }
+
+.bg-img-box {
+  /* background-color: red; */
+  position: absolute;
+  top: 0px;
+  bottom: 0px;
+  /* margin-top: -308px;
+  margin-left: -118px;
+  position: absolute;
+  top: 33px;
+  bottom: -228px;
+  min-width: 86%;
+  max-width: 800px;
+  /* background-color: bisque; */
+  /* border-radius: 0% 48% 74% 0%/59% 70% 73% 47%; */
+}
+
+/* right */
 .right-content-box {
   max-width: 640px;
 }
@@ -136,17 +155,6 @@ export default {
   z-index: 999;
 }
 
-.bg-img-box {
-  margin-top: -308px;
-  margin-left: -118px;
-  position: absolute;
-  top: 33px;
-  bottom: -228px;
-  min-width: 86%;
-  max-width: 800px;
-  /* background-color: bisque; */
-  /* border-radius: 0% 48% 74% 0%/59% 70% 73% 47%; */
-}
 .bg-txt-box {
   position: relative;
   margin-top: 317px;