diff --git a/src/example/Course_about.jsx b/src/example/Course_about.jsx
index 3500ec3..83eb7ac 100644
--- a/src/example/Course_about.jsx
+++ b/src/example/Course_about.jsx
@@ -351,15 +351,19 @@ const About = () => {
                 <strong className="text-block-footer">End: {date(data?.end)}</strong>
               </div>
             </span>
-            {enrollMessage ? (
-              <Button disabled="true">
-                {enrollMessage}
-              </Button>
-            ) : (
-              <Button onClick={handleEnroll} disabled={enrolled}>
-                {enrolled ? 'Enrolled' : 'Enroll'}
-              </Button>
-            )}
+            {
+              enrollMessage ? (
+                <Button disabled="true">
+                  {enrollMessage}
+                </Button>
+              ) : (
+                !enrolled && (
+                  <Button onClick={handleEnroll}>
+                    'Enroll'
+                  </Button>
+                )
+              )
+            }
             {enrolled && (
               <a className="btn btn-primary" href={`${appsurl}/learning/course/${courseId}/home`}>
                 View Course
@@ -383,9 +387,7 @@ const About = () => {
                   isActive={active === id}
               />
             ))}
-            </div>
-            <div className="tabs">
-            {enrollMessage ? (
+              {enrollMessage ? (
               <Button id="enroll-button" disabled="true">
                 {enrollMessage}
               </Button>
diff --git a/src/example/custom_scss/styles.scss b/src/example/custom_scss/styles.scss
index d6b1dee..7c7f685 100644
--- a/src/example/custom_scss/styles.scss
+++ b/src/example/custom_scss/styles.scss
@@ -106,6 +106,11 @@ div.wrapper-continer {
       @extend .theme-btn;
     }
   }
+  @media (max-width: 499px) {
+    .wrapper-continer {
+      display: grid;
+    }
+  }
 }
 
 .white-continer-claim {