diff --git a/package-lock.json b/package-lock.json
index 883f7a16..7f11ccce 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5083,6 +5083,11 @@
         }
       }
     },
+    "css-mediaquery": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/css-mediaquery/-/css-mediaquery-0.1.2.tgz",
+      "integrity": "sha512-COtn4EROW5dBGlE/4PiKnh6rZpAPxDeFLaEEwt4i10jpDMFt2EhQGS79QmmrO+iKCHv0PU/HrOWEhijFd1x99Q=="
+    },
     "css-minimizer-webpack-plugin": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/css-minimizer-webpack-plugin/-/css-minimizer-webpack-plugin-4.2.2.tgz",
@@ -7213,6 +7218,11 @@
       "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
       "dev": true
     },
+    "hyphenate-style-name": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
+      "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ=="
+    },
     "iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -9402,6 +9412,14 @@
         "tmpl": "1.0.5"
       }
     },
+    "matchmediaquery": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/matchmediaquery/-/matchmediaquery-0.3.1.tgz",
+      "integrity": "sha512-Hlk20WQHRIm9EE9luN1kjRjYXAQToHOIAHPJn9buxBwuhfTHoKUcX+lXBbxc85DVQfXYbEQ4HcwQdd128E3qHQ==",
+      "requires": {
+        "css-mediaquery": "^0.1.2"
+      }
+    },
     "mdn-data": {
       "version": "2.0.14",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
@@ -10799,6 +10817,17 @@
         "warning": "^4.0.3"
       }
     },
+    "react-responsive": {
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-9.0.2.tgz",
+      "integrity": "sha512-+4CCab7z8G8glgJoRjAwocsgsv6VA2w7JPxFWHRc7kvz8mec1/K5LutNC2MG28Mn8mu6+bu04XZxHv5gyfT7xQ==",
+      "requires": {
+        "hyphenate-style-name": "^1.0.0",
+        "matchmediaquery": "^0.3.0",
+        "prop-types": "^15.6.1",
+        "shallow-equal": "^1.2.1"
+      }
+    },
     "react-switch": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/react-switch/-/react-switch-7.0.0.tgz",
@@ -11311,6 +11340,11 @@
         "kind-of": "^6.0.2"
       }
     },
+    "shallow-equal": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.1.tgz",
+      "integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA=="
+    },
     "shallowequal": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
diff --git a/package.json b/package.json
index 9e57d3ad..f1b212cb 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "react-highlight-words": "^0.18.0",
     "react-loader-spinner": "^5.3.4",
     "react-modal": "^3.16.1",
+    "react-responsive": "^9.0.2",
     "react-switch": "^7.0.0",
     "rodal": "^2.0.1",
     "subscriptions-transport-ws": "^0.11.0"
diff --git a/src/components/creature/spells/SpellModal.js b/src/components/creature/spells/SpellModal.js
index 56aafa1d..c60f7a21 100644
--- a/src/components/creature/spells/SpellModal.js
+++ b/src/components/creature/spells/SpellModal.js
@@ -1,9 +1,13 @@
+/* eslint-disable import/no-extraneous-dependencies */
 import React, { useEffect } from 'react';
 import Modal from 'react-modal';
 import { Triangle } from 'react-loader-spinner';
+import { useMediaQuery } from 'react-responsive';
 
 import DescriptionHighlight from '../DescriptionHighlight';
-import { spellIcon, spellIconBackground, spellModalStyle } from './utils';
+import {
+  spellIcon, spellIconBackground, spellModalStyle, spellModalStyleMobile, spellModalStyleWeb,
+} from './utils';
 
 const BASE_API_URL = 'https://www.dnd5eapi.co';
 
@@ -15,12 +19,13 @@ export default function SpellModal({
   const [loading, setLoading] = React.useState(false);
   const [spellInfo, setSpellInfo] = React.useState(null);
 
+  const isTabletOrMobile = useMediaQuery({ maxWidth: 1224 });
+
   useEffect(() => {
     setLoading(true);
     fetch(`${BASE_API_URL}${currentSpell.url}`, { 'Content-Type': 'application/json' })
       .then((response) => response.json())
       .then((data) => {
-        console.log('res', data);
         setSpellInfo(data);
       })
       .catch((error) => {
@@ -146,7 +151,8 @@ export default function SpellModal({
   console.log('spellInfo', spellInfo);
   return (
     <Modal
-      style={spellModalStyle}
+      // eslint-disable-next-line max-len
+      style={{ content: { ...spellModalStyle.content, ...(isTabletOrMobile ? spellModalStyleMobile.content : spellModalStyleWeb.content) } }}
       isOpen={visible}
       contentLabel="Minimal Modal Example"
       onRequestClose={onClose}
diff --git a/src/components/creature/spells/utils.js b/src/components/creature/spells/utils.js
index 88277788..d81daccd 100644
--- a/src/components/creature/spells/utils.js
+++ b/src/components/creature/spells/utils.js
@@ -17,20 +17,28 @@ export const spellModalStyle = {
     bottom: 'auto',
     marginRight: '-50%',
     transform: 'translate(-50%, -50%)',
-    width: '55%',
-    height: '55%',
     backgroundColor: '#FDF1DC',
     borderRadius: '20px',
     boxShadow: '0px 1px 18px -4px rgba(117,74,50,0.98)',
+    WebkitOverflowScrolling: 'touch',
+    overflowScrolling: 'touch',
     '-webkit-box-shadow': '0px 1px 18px -4px rgba(117,74,50,0.98)',
     '-moz-box-shadow': '0px 1px 18px -4px rgba(117,74,50,0.98)',
   },
-  // '@media (max-width: 500px)': {
-  //   content: {
-  //     width: '90%',
-  //     height: '70%',
-  //   },
-  // },
+};
+
+export const spellModalStyleWeb = {
+  content: {
+    width: '55%',
+    height: '55%',
+  },
+};
+
+export const spellModalStyleMobile = {
+  content: {
+    width: '80%',
+    height: '60%',
+  },
 };
 
 export const spellIconBackground = (school) => {