diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx
index f8eded8..365c7f5 100644
--- a/src/components/Layout/Layout.tsx
+++ b/src/components/Layout/Layout.tsx
@@ -21,7 +21,9 @@ export const Layout: FC = () => {
       <Container maxWidth="xl">
         <Grid container spacing={2} marginTop={8}>
           <Grid xs={12} display="flex" justifyContent="center">
-            <Viewer />
+            <Box  style={{height:'300px', maxWidth: '100hw', overflow: 'auto', paddingTop:'40px'}}>
+              <Viewer />
+            </Box>
           </Grid>
           <Grid xs={12}>
             <Container maxWidth="lg">
@@ -34,7 +36,7 @@ export const Layout: FC = () => {
       </Container>
       <Container maxWidth="lg">
         <Grid container spacing={2} marginTop={isMd ? 5 : 3}>
-          <Grid xs={12} display="flex">
+          <Grid  xs={12} display="flex">
             <ScaleSchema />
           </Grid>
         </Grid>
diff --git a/src/components/ScaleSchema/ScaleSchema.styles.ts b/src/components/ScaleSchema/ScaleSchema.styles.ts
index 4060f0b..6972524 100644
--- a/src/components/ScaleSchema/ScaleSchema.styles.ts
+++ b/src/components/ScaleSchema/ScaleSchema.styles.ts
@@ -1,6 +1,7 @@
 export default {
   root: {
     width: '100%',
+    overflow: 'auto',
     display: 'flex',
     flexDirection: 'row',
   },