diff --git a/src/components/examples/ExampleCard.tsx b/src/components/examples/ExampleCard.tsx
index 28dc89e..8fee10a 100644
--- a/src/components/examples/ExampleCard.tsx
+++ b/src/components/examples/ExampleCard.tsx
@@ -50,13 +50,18 @@ export default function ExampleCard({
           <Typography variant="body2" color="text.secondary">
             {description}
           </Typography>
+
           <Box
-            display="flex"
             onClick={handleSampleTextClick}
             sx={{
+              display: 'flex',
+              zIndex: '2',
               width: '100%',
+              height: '100%',
+              bgcolor: 'transparent',
               padding: '5px 10px',
               borderRadius: '5px',
+              cursor: 'pointer',
               boxShadow: 'inset 2px 2px 5px #b8b9be, inset -3px -3px 7px #fff;'
             }}
           >
@@ -67,6 +72,7 @@ export default function ExampleCard({
               multiline
               sx={{
                 '& .MuiOutlinedInput-root': {
+                  zIndex: '-1',
                   '& fieldset': {
                     border: 'none'
                   }
@@ -74,14 +80,19 @@ export default function ExampleCard({
               }}
             />
           </Box>
+
           <ArrowDownwardIcon />
           <Box
-            display="flex"
             onClick={handleSampleResultClick}
             sx={{
+              display: 'flex',
+              zIndex: '2',
               width: '100%',
+              height: '100%',
+              bgcolor: 'transparent',
               padding: '5px 10px',
               borderRadius: '5px',
+              cursor: 'pointer',
               boxShadow: 'inset 2px 2px 5px #b8b9be, inset -3px -3px 7px #fff;'
             }}
           >
@@ -92,6 +103,7 @@ export default function ExampleCard({
               multiline
               sx={{
                 '& .MuiOutlinedInput-root': {
+                  zIndex: '-1',
                   '& fieldset': {
                     border: 'none'
                   }
diff --git a/src/components/examples/RequiredOptions.tsx b/src/components/examples/RequiredOptions.tsx
index 6e76646..3a5c94e 100644
--- a/src/components/examples/RequiredOptions.tsx
+++ b/src/components/examples/RequiredOptions.tsx
@@ -1,5 +1,5 @@
 import { Box, Stack, TextField, Typography } from '@mui/material';
-import { RequiredOptionsProps } from '../../../components/examples/Examples';
+import { RequiredOptionsProps } from './Examples';
 import CheckboxWithDesc from 'components/options/CheckboxWithDesc';
 
 export default function RequiredOptions({
@@ -27,7 +27,6 @@ export default function RequiredOptions({
       </Typography>
 
       <Box
-        display="flex"
         onClick={handleBoxClick}
         sx={{
           zIndex: '2',