diff --git a/src/components/Action/ActionChoose.tsx b/src/components/Action/ActionChoose.tsx
index f33c2289a6d43ef99a6f1c57ff651daba269deb6..c137680a92c4bcc5e4c320062beac5bf3d11544e 100644
--- a/src/components/Action/ActionChoose.tsx
+++ b/src/components/Action/ActionChoose.tsx
@@ -2,17 +2,16 @@ import ActionBegin from 'components/Action/ActionBegin'
 import ActionList from 'components/Action/ActionList'
 import { Ecogesture, UserChallenge } from 'models'
 import React, { useState } from 'react'
-import './actionChoose.scss'
 
 const ActionChoose = ({ userChallenge }: { userChallenge: UserChallenge }) => {
   const [selectedAction, setSelectedAction] = useState<Ecogesture | null>(null)
   const [showList, setShowList] = useState<boolean>(false)
 
   return (
-    <div className="action-choose">
+    <>
       {!showList ? (
         <ActionBegin
-          action={selectedAction ? selectedAction : undefined}
+          action={selectedAction ?? undefined}
           setShowList={setShowList}
           userChallenge={userChallenge}
         />
@@ -22,7 +21,7 @@ const ActionChoose = ({ userChallenge }: { userChallenge: UserChallenge }) => {
           setShowList={setShowList}
         />
       )}
-    </div>
+    </>
   )
 }
 
diff --git a/src/components/Action/actionBegin.scss b/src/components/Action/actionBegin.scss
index 890eb89d90520e164751043fa80809862f564cd3..8acf26de8cfdcecb1fb86f806ef72cd3b17e310f 100644
--- a/src/components/Action/actionBegin.scss
+++ b/src/components/Action/actionBegin.scss
@@ -1,6 +1,9 @@
 @import '../../styles/base/color';
 @import '../../styles/base/breakpoint';
 
+.action-begin {
+  margin: auto;
+}
 .action-container {
   display: flex;
   flex-direction: column;
@@ -20,7 +23,9 @@
   transition: all 300ms ease;
   color: $white;
   background: $grey-linear-gradient-background;
-  height: 63vh;
+  height: auto;
+  gap: 1.5rem;
+  max-height: 63svh;
   text-align: center;
   position: relative;
   padding: 5rem 1rem 1rem 1rem;
diff --git a/src/components/Action/actionChoose.scss b/src/components/Action/actionChoose.scss
deleted file mode 100644
index 380667b4d295a202f77b38a17a77a908910ec05b..0000000000000000000000000000000000000000
--- a/src/components/Action/actionChoose.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.action-choose {
-  margin: auto;
-}
diff --git a/src/components/Action/actionList.scss b/src/components/Action/actionList.scss
index 30824bec53818fbc47886dca93e74a4a7a47732b..4b4c65a2f9f66f5cbac5928d4be39fc04702fb75 100644
--- a/src/components/Action/actionList.scss
+++ b/src/components/Action/actionList.scss
@@ -1,13 +1,16 @@
 @import '../../styles/base/color';
 
 .action-list-container {
-  padding: 1.5rem 2rem;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   max-width: 600px;
   margin: auto;
+  gap: 1rem;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0 1.5rem;
 }
 button.action-card {
   width: 100%;
@@ -20,7 +23,6 @@ button.action-card {
   box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);
   border-radius: 4px;
   padding: 1rem;
-  margin-bottom: 1.5rem;
   .action-title {
     text-align: left;
     color: white;