diff --git a/.env b/.env
index 783f5a4..c5c025c 100644
--- a/.env
+++ b/.env
@@ -1,4 +1,4 @@
 INLINE_RUNTIME_CHUNK=false
 GENERATE_SOURCEMAP=false
 SKIP_PREFLIGHT_CHECK=true
-REACT_APP_VERSION=1.0.13
+REACT_APP_VERSION=1.0.14
diff --git a/package.json b/package.json
index 550a9e4..dc5d119 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rica",
-  "version": "1.0.13",
+  "version": "1.0.14",
   "private": true,
   "dependencies": {
     "@blueprintjs/core": "^3.53.0",
diff --git a/src/Mobile.js b/src/Mobile.js
new file mode 100644
index 0000000..07bbd52
--- /dev/null
+++ b/src/Mobile.js
@@ -0,0 +1,35 @@
+import React, { Component } from "react";
+
+class MobileMain extends Component {
+  render() {
+    return (
+      <div className="h-screen bg-gradient-to-tr from-indigo-200 via-red-200 to-yellow-100">
+        <div className="fixed z-10 flex items-center justify-center w-full h-full">
+          <div className="px-6 m-auto">
+            <h1 className="mb-8 text-3xl font-extrabold">
+              Hi, this is Rica{" "}
+              <span role="img" aria-label="wave">
+                👋
+              </span>
+            </h1>
+            <div className="my-8">
+              <p className="text-base">
+                It looks like you're visiting from a small screen. Bookmark me
+                and visit me again from your computer.
+              </p>
+            </div>
+            <div className="my-8">
+              <a href="https://www.github.com/ME-ICA/rica" target="_blank">
+                <div className="inline-block w-auto px-4 py-2 font-bold text-white bg-indigo-400 rounded hover:bg-indigo-700">
+                  Learn more
+                </div>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default MobileMain;
diff --git a/src/index.js b/src/index.js
index 3383f78..053d039 100644
--- a/src/index.js
+++ b/src/index.js
@@ -6,6 +6,7 @@ import Info from "./Info/Info";
 import Plots from "./Plots/Plots";
 import IntroPopup from "./PopUps/IntroPopUp";
 import AboutPopup from "./PopUps/AboutPopUp";
+import MobileMain from "./Mobile";
 
 import "./styles/output.css";
 import "./styles.css";
@@ -37,6 +38,7 @@ class App extends Component {
       showAboutPopup: false,
       showTabs: false,
       originalData: [],
+      width: window.innerWidth,
     };
   }
 
@@ -97,97 +99,122 @@ class App extends Component {
     this.setState({ originalData: childData[4] });
   };
 
+  componentWillMount() {
+    window.addEventListener("resize", this.handleWindowSizeChange);
+  }
+
+  // make sure to remove the listener
+  // when the component is not mounted anymore
+  componentWillUnmount() {
+    window.removeEventListener("resize", this.handleWindowSizeChange);
+  }
+
+  handleWindowSizeChange = () => {
+    this.setState({ width: window.innerWidth });
+  };
+
   render() {
-    return (
-      <div className="h-full min-h-full overflow-hidden text-center ">
-        {this.state.showIntroPopup ? (
-          <IntroPopup
-            callBack={this.callbackFunction}
-            closePopup={this.toggleIntroPopup.bind(this)}
-          />
-        ) : null}
-        {this.state.showAboutPopup ? (
-          <AboutPopup
-            callBack={this.callbackFunction}
-            closePopup={this.toggleAboutPopup.bind(this)}
-          />
-        ) : null}
-        {this.state.showTabs ? (
-          <AnimatedTabs>
-            <TabList
-              className="text-base border-b z-5 border-b-gray-300"
-              style={{ justifyContent: "space-around" }}
-            >
-              <AnimatedTab index={0} style={{ flex: 1 }}>
-                <FontAwesomeIcon
-                  icon={["fas", "info-circle"]}
-                  size="lg"
-                  className="mx-2"
-                />
-                <span>Info</span>
-              </AnimatedTab>
-              <AnimatedTab index={1} style={{ flex: 2 }}>
-                <FontAwesomeIcon
-                  icon={["fas", "chart-pie"]}
-                  size="lg"
-                  className="mx-2"
-                />
-                <span>ICA</span>
-              </AnimatedTab>
-              <AnimatedTab index={2} style={{ flex: 1 }}>
-                <FontAwesomeIcon
-                  icon={["fas", "layer-group"]}
-                  size="lg"
-                  className="mx-2"
-                />
-                <span>Carpets</span>
-              </AnimatedTab>
-              <ul className="absolute top-0 right-0 mr-40">
-                <div
-                  className="absolute top-0 right-0 flex mr-24 text-base text-gray-500 rounded-lg hover:text-gray-900 hover:cursor-pointer"
-                  onClick={this.toggleIntroPopup.bind(this)}
-                  style={{ padding: "8px 16px" }}
-                >
+    const { width } = this.state;
+    const isMobile = width <= 1024;
+
+    if (isMobile) {
+      return (
+        <div>
+          <MobileMain />
+        </div>
+      );
+    } else {
+      return (
+        <div className="h-full min-h-full overflow-hidden text-center ">
+          {this.state.showIntroPopup ? (
+            <IntroPopup
+              callBack={this.callbackFunction}
+              closePopup={this.toggleIntroPopup.bind(this)}
+            />
+          ) : null}
+          {this.state.showAboutPopup ? (
+            <AboutPopup
+              callBack={this.callbackFunction}
+              closePopup={this.toggleAboutPopup.bind(this)}
+            />
+          ) : null}
+          {this.state.showTabs ? (
+            <AnimatedTabs>
+              <TabList
+                className="text-base border-b z-5 border-b-gray-300"
+                style={{ justifyContent: "space-around" }}
+              >
+                <AnimatedTab index={0} style={{ flex: 1 }}>
                   <FontAwesomeIcon
-                    icon={["fas", "plus"]}
+                    icon={["fas", "info-circle"]}
                     size="lg"
                     className="mx-2"
                   />
-                  <span>New</span>
-                </div>
-                <div
-                  className="absolute right-0 flex text-base text-gray-500 rounded-lg hover:text-gray-900 hover:cursor-pointer"
-                  onClick={this.toggleAboutPopup.bind(this)}
-                  style={{ padding: "8px 16px" }}
-                >
+                  <span>Info</span>
+                </AnimatedTab>
+                <AnimatedTab index={1} style={{ flex: 2 }}>
                   <FontAwesomeIcon
-                    icon={["fas", "question"]}
+                    icon={["fas", "chart-pie"]}
                     size="lg"
                     className="mx-2"
                   />
-                  <span>About</span>
-                </div>
-              </ul>
-            </TabList>
-            <TabPanels>
-              <TabPanel>
-                <Info info={this.state.info} />
-              </TabPanel>
-              <TabPanel>
-                <Plots
-                  componentData={this.state.componentData}
-                  componentFigures={this.state.componentFigures}
-                  originalData={this.state.originalData}
-                />
-              </TabPanel>
-              <TabPanel>
-                <Carpets images={this.state.carpetFigures} />
-              </TabPanel>
-            </TabPanels>
-          </AnimatedTabs>
-        ) : null}
-      </div>
-    );
+                  <span>ICA</span>
+                </AnimatedTab>
+                <AnimatedTab index={2} style={{ flex: 1 }}>
+                  <FontAwesomeIcon
+                    icon={["fas", "layer-group"]}
+                    size="lg"
+                    className="mx-2"
+                  />
+                  <span>Carpets</span>
+                </AnimatedTab>
+                <ul className="absolute top-0 right-0 mr-40">
+                  <div
+                    className="absolute top-0 right-0 flex mr-24 text-base text-gray-500 rounded-lg hover:text-gray-900 hover:cursor-pointer"
+                    onClick={this.toggleIntroPopup.bind(this)}
+                    style={{ padding: "8px 16px" }}
+                  >
+                    <FontAwesomeIcon
+                      icon={["fas", "plus"]}
+                      size="lg"
+                      className="mx-2"
+                    />
+                    <span>New</span>
+                  </div>
+                  <div
+                    className="absolute right-0 flex text-base text-gray-500 rounded-lg hover:text-gray-900 hover:cursor-pointer"
+                    onClick={this.toggleAboutPopup.bind(this)}
+                    style={{ padding: "8px 16px" }}
+                  >
+                    <FontAwesomeIcon
+                      icon={["fas", "question"]}
+                      size="lg"
+                      className="mx-2"
+                    />
+                    <span>About</span>
+                  </div>
+                </ul>
+              </TabList>
+              <TabPanels>
+                <TabPanel>
+                  <Info info={this.state.info} />
+                </TabPanel>
+                <TabPanel>
+                  <Plots
+                    componentData={this.state.componentData}
+                    componentFigures={this.state.componentFigures}
+                    originalData={this.state.originalData}
+                  />
+                </TabPanel>
+                <TabPanel>
+                  <Carpets images={this.state.carpetFigures} />
+                </TabPanel>
+              </TabPanels>
+            </AnimatedTabs>
+          ) : null}
+        </div>
+      );
+    }
   }
 }
 
diff --git a/src/styles/output.css b/src/styles/output.css
index 245497b..ae95af1 100644
--- a/src/styles/output.css
+++ b/src/styles/output.css
@@ -608,6 +608,10 @@ video {
 .m-auto {
 	margin: auto;
 }
+.my-8 {
+	margin-top: 2rem;
+	margin-bottom: 2rem;
+}
 .mx-2 {
 	margin-left: 0.5rem;
 	margin-right: 0.5rem;
@@ -616,26 +620,13 @@ video {
 	margin-left: 20rem;
 	margin-right: 20rem;
 }
-.my-5 {
-	margin-top: 1.25rem;
-	margin-bottom: 1.25rem;
-}
 .my-4 {
 	margin-top: 1rem;
 	margin-bottom: 1rem;
 }
-.my-8 {
-	margin-top: 2rem;
+.mb-8 {
 	margin-bottom: 2rem;
 }
-.my-10 {
-	margin-top: 2.5rem;
-	margin-bottom: 2.5rem;
-}
-.my-6 {
-	margin-top: 1.5rem;
-	margin-bottom: 1.5rem;
-}
 .mt-4 {
 	margin-top: 1rem;
 }
@@ -654,56 +645,17 @@ video {
 .mt-16 {
 	margin-top: 4rem;
 }
-.mt-2 {
-	margin-top: 0.5rem;
-}
-.ml-4 {
-	margin-left: 1rem;
-}
-.ml-auto {
-	margin-left: auto;
-}
-.mb-8 {
-	margin-bottom: 2rem;
-}
-.mr-5 {
-	margin-right: 1.25rem;
-}
-.-mt-1 {
-	margin-top: -0.25rem;
-}
-.mt-1 {
-	margin-top: 0.25rem;
-}
-.mt-5 {
-	margin-top: 1.25rem;
-}
 .mt-10 {
 	margin-top: 2.5rem;
 }
 .mt-6 {
 	margin-top: 1.5rem;
 }
-.mt-8 {
-	margin-top: 2rem;
-}
-.mt-7 {
-	margin-top: 1.75rem;
-}
-.mb-4 {
-	margin-bottom: 1rem;
-}
-.mt-3 {
-	margin-top: 0.75rem;
-}
-.mr-4 {
-	margin-right: 1rem;
-}
-.mr-6 {
-	margin-right: 1.5rem;
+.ml-4 {
+	margin-left: 1rem;
 }
-.mr-12 {
-	margin-right: 3rem;
+.ml-16 {
+	margin-left: 4rem;
 }
 .mt-12 {
 	margin-top: 3rem;
@@ -711,17 +663,20 @@ video {
 .mr-16 {
 	margin-right: 4rem;
 }
-.ml-8 {
-	margin-left: 2rem;
+.mt-7 {
+	margin-top: 1.75rem;
+}
+.mt-2 {
+	margin-top: 0.5rem;
 }
-.ml-12 {
-	margin-left: 3rem;
+.-mt-1 {
+	margin-top: -0.25rem;
 }
-.ml-24 {
-	margin-left: 6rem;
+.ml-auto {
+	margin-left: auto;
 }
-.ml-16 {
-	margin-left: 4rem;
+.mr-5 {
+	margin-right: 1.25rem;
 }
 .inline-block {
 	display: inline-block;
@@ -741,38 +696,35 @@ video {
 .hidden {
 	display: none;
 }
-.h-10 {
-	height: 2.5rem;
+.h-screen {
+	height: 100vh;
 }
 .h-full {
 	height: 100%;
 }
+.h-10 {
+	height: 2.5rem;
+}
 .h-auto {
 	height: auto;
 }
 .h-24 {
 	height: 6rem;
 }
-.h-7 {
-	height: 1.75rem;
+.h-8 {
+	height: 2rem;
 }
 .h-5 {
 	height: 1.25rem;
 }
-.h-8 {
-	height: 2rem;
-}
 .min-h-full {
 	min-height: 100%;
 }
 .w-full {
 	width: 100%;
 }
-.w-1\/3 {
-	width: 33.333333%;
-}
-.w-5 {
-	width: 1.25rem;
+.w-auto {
+	width: auto;
 }
 .w-1\/2 {
 	width: 50%;
@@ -780,9 +732,18 @@ video {
 .w-5\/12 {
 	width: 41.666667%;
 }
+.w-1\/3 {
+	width: 33.333333%;
+}
+.w-5 {
+	width: 1.25rem;
+}
 .max-w-full {
 	max-width: 100%;
 }
+.resize {
+	resize: both;
+}
 .list-none {
 	list-style-type: none;
 }
@@ -798,15 +759,6 @@ video {
 .justify-center {
 	justify-content: center;
 }
-.gap-x-5 {
-	column-gap: 1.25rem;
-}
-.gap-y-4 {
-	row-gap: 1rem;
-}
-.gap-y-2 {
-	row-gap: 0.5rem;
-}
 .gap-x-1 {
 	column-gap: 0.25rem;
 }
@@ -819,6 +771,9 @@ video {
 .whitespace-pre-wrap {
 	white-space: pre-wrap;
 }
+.rounded {
+	border-radius: 0.25rem;
+}
 .rounded-xl {
 	border-radius: 0.75rem;
 }
@@ -861,16 +816,57 @@ video {
 .bg-transparent {
 	background-color: transparent;
 }
+.bg-indigo-500 {
+	--tw-bg-opacity: 1;
+	background-color: rgba(99, 102, 241, var(--tw-bg-opacity));
+}
+.bg-indigo-400 {
+	--tw-bg-opacity: 1;
+	background-color: rgba(129, 140, 248, var(--tw-bg-opacity));
+}
 .bg-opacity-50 {
 	--tw-bg-opacity: 0.5;
 }
+.bg-gradient-to-tr {
+	background-image: linear-gradient(to top right, var(--tw-gradient-stops));
+}
+.from-indigo-200 {
+	--tw-gradient-from: #c7d2fe;
+	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(199, 210, 254, 0));
+}
+.via-red-200 {
+	--tw-gradient-stops: var(--tw-gradient-from), #fecaca, var(--tw-gradient-to, rgba(254, 202, 202, 0));
+}
+.to-yellow-100 {
+	--tw-gradient-to: #fef9c3;
+}
 .p-2 {
 	padding: 0.5rem;
 }
+.px-6 {
+	padding-left: 1.5rem;
+	padding-right: 1.5rem;
+}
+.px-4 {
+	padding-left: 1rem;
+	padding-right: 1rem;
+}
+.py-2 {
+	padding-top: 0.5rem;
+	padding-bottom: 0.5rem;
+}
 .px-5 {
 	padding-left: 1.25rem;
 	padding-right: 1.25rem;
 }
+.px-1 {
+	padding-left: 0.25rem;
+	padding-right: 0.25rem;
+}
+.py-4 {
+	padding-top: 1rem;
+	padding-bottom: 1rem;
+}
 .px-3 {
 	padding-left: 0.75rem;
 	padding-right: 0.75rem;
@@ -887,95 +883,53 @@ video {
 	padding-top: 2.5rem;
 	padding-bottom: 2.5rem;
 }
-.px-6 {
-	padding-left: 1.5rem;
-	padding-right: 1.5rem;
-}
-.py-8 {
-	padding-top: 2rem;
-	padding-bottom: 2rem;
-}
-.px-2 {
-	padding-left: 0.5rem;
-	padding-right: 0.5rem;
-}
-.py-4 {
-	padding-top: 1rem;
-	padding-bottom: 1rem;
-}
-.px-1 {
-	padding-left: 0.25rem;
-	padding-right: 0.25rem;
-}
 .pt-0\.5 {
 	padding-top: 0.125rem;
 }
 .pt-0 {
 	padding-top: 0px;
 }
-.pt-1 {
-	padding-top: 0.25rem;
-}
-.pt-4 {
-	padding-top: 1rem;
-}
-.pt-8 {
-	padding-top: 2rem;
-}
-.pt-24 {
-	padding-top: 6rem;
-}
 .pt-2 {
 	padding-top: 0.5rem;
 }
-.pt-3 {
-	padding-top: 0.75rem;
-}
-.pt-1\.5 {
-	padding-top: 0.375rem;
-}
 .text-center {
 	text-align: center;
 }
 .text-justify {
 	text-align: justify;
 }
-.text-base {
-	font-size: 1rem;
-	line-height: 1.5rem;
-}
 .text-3xl {
 	font-size: 1.875rem;
 	line-height: 2.25rem;
 }
+.text-base {
+	font-size: 1rem;
+	line-height: 1.5rem;
+}
 .text-lg {
 	font-size: 1.125rem;
 	line-height: 1.75rem;
 }
-.font-semibold {
-	font-weight: 600;
-}
 .font-extrabold {
 	font-weight: 800;
 }
 .font-bold {
 	font-weight: 700;
 }
-.text-gray-500 {
-	--tw-text-opacity: 1;
-	color: rgba(113, 113, 122, var(--tw-text-opacity));
+.font-semibold {
+	font-weight: 600;
 }
 .text-white {
 	--tw-text-opacity: 1;
 	color: rgba(255, 255, 255, var(--tw-text-opacity));
 }
-.text-gray-400 {
+.text-gray-500 {
 	--tw-text-opacity: 1;
-	color: rgba(161, 161, 170, var(--tw-text-opacity));
+	color: rgba(113, 113, 122, var(--tw-text-opacity));
 }
-.text-black {
+.text-gray-400 {
 	--tw-text-opacity: 1;
-	color: rgba(0, 0, 0, var(--tw-text-opacity));
+	color: rgba(161, 161, 170, var(--tw-text-opacity));
 }
 .drop-shadow-sm {
 	--tw-drop-shadow: drop-shadow(0 1px 1px rgba(0,0,0,0.05));
@@ -1000,6 +954,10 @@ video {
 .hover\:cursor-pointer:hover {
 	cursor: pointer;
 }
+.hover\:bg-sky-700:hover {
+	--tw-bg-opacity: 1;
+	background-color: rgba(3, 105, 161, var(--tw-bg-opacity));
+}
 .hover\:bg-sky-600:hover {
 	--tw-bg-opacity: 1;
 	background-color: rgba(2, 132, 199, var(--tw-bg-opacity));
@@ -1008,6 +966,10 @@ video {
 	--tw-bg-opacity: 1;
 	background-color: rgba(228, 228, 231, var(--tw-bg-opacity));
 }
+.hover\:bg-indigo-700:hover {
+	--tw-bg-opacity: 1;
+	background-color: rgba(67, 56, 202, var(--tw-bg-opacity));
+}
 .hover\:text-gray-900:hover {
 	--tw-text-opacity: 1;
 	color: rgba(24, 24, 27, var(--tw-text-opacity));
diff --git a/tailwind.config.js b/tailwind.config.js
index 49f65c6..8123451 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -26,6 +26,12 @@ module.exports = {
       indigo: colors.indigo,
       yellow: colors.yellow,
       sky: colors.sky,
+      blue: colors.blue,
+      purple: colors.purple,
+      pink: colors.pink,
+      violet: colors.violet,
+      orange: colors.orange,
+      red: colors.red,
     },
   },
 };