diff --git a/package-lock.json b/package-lock.json
index 55dca50..1ba68c4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,7 +25,7 @@
         "react": "18.1.0",
         "react-dom": "18.1.0",
         "react-i18next": "^12.1.5",
-        "react-native": "0.70.5",
+        "react-native": "0.70.8",
         "react-native-dotenv": "^3.4.7",
         "react-native-gesture-handler": "~2.8.0",
         "react-native-reanimated": "~2.12.0",
@@ -419,9 +419,9 @@
       }
     },
     "node_modules/@babel/helper-validator-option": {
-      "version": "7.18.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.18.6.tgz",
-      "integrity": "sha512-XO7gESt5ouv/LRJdrVjkShckw6STTaB7l9BrpBaAHDeF5YZT+01PCwmR0SJHnkW6i8OwW/EVWRShfi4j2x+KQw==",
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.21.0.tgz",
+      "integrity": "sha512-rmL/B8/f0mKS2baE9ZpyTcTavvEuWhTTW8amjzXNvYG4AwBsqTLikfXsEofsJEfKHf+HQVQbFOHy6o+4cnC/fQ==",
       "engines": {
         "node": ">=6.9.0"
       }
@@ -1175,11 +1175,11 @@
       }
     },
     "node_modules/@babel/plugin-transform-flow-strip-types": {
-      "version": "7.19.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.19.0.tgz",
-      "integrity": "sha512-sgeMlNaQVbCSpgLSKP4ZZKfsJVnFnNQlUSk6gPYzR/q7tzCgQF2t8RBKAP6cKJeZdveei7Q7Jm527xepI8lNLg==",
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.21.0.tgz",
+      "integrity": "sha512-FlFA2Mj87a6sDkW4gfGrQQqwY/dLlBAyJa2dJEZ+FHXUVHBflO2wyKvg+OOEzXfrKYIa4HWl0mgmbCzt0cMb7w==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.19.0",
+        "@babel/helper-plugin-utils": "^7.20.2",
         "@babel/plugin-syntax-flow": "^7.18.6"
       },
       "engines": {
@@ -1709,13 +1709,13 @@
       }
     },
     "node_modules/@babel/preset-flow": {
-      "version": "7.18.6",
-      "resolved": "https://registry.npmjs.org/@babel/preset-flow/-/preset-flow-7.18.6.tgz",
-      "integrity": "sha512-E7BDhL64W6OUqpuyHnSroLnqyRTcG6ZdOBl1OKI/QK/HJfplqK/S3sq1Cckx7oTodJ5yOXyfw7rEADJ6UjoQDQ==",
+      "version": "7.21.4",
+      "resolved": "https://registry.npmjs.org/@babel/preset-flow/-/preset-flow-7.21.4.tgz",
+      "integrity": "sha512-F24cSq4DIBmhq4OzK3dE63NHagb27OPE3eWR+HLekt4Z3Y5MzIIUGF3LlLgV0gN8vzbDViSY7HnrReNVCJXTeA==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.18.6",
-        "@babel/helper-validator-option": "^7.18.6",
-        "@babel/plugin-transform-flow-strip-types": "^7.18.6"
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/helper-validator-option": "^7.21.0",
+        "@babel/plugin-transform-flow-strip-types": "^7.21.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1756,9 +1756,9 @@
       }
     },
     "node_modules/@babel/register": {
-      "version": "7.18.9",
-      "resolved": "https://registry.npmjs.org/@babel/register/-/register-7.18.9.tgz",
-      "integrity": "sha512-ZlbnXDcNYHMR25ITwwNKT88JiaukkdVj/nG7r3wnuXkOTHc60Uy05PwMCPre0hSkY68E6zK3xz+vUJSP2jWmcw==",
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/register/-/register-7.21.0.tgz",
+      "integrity": "sha512-9nKsPmYDi5DidAqJaQooxIhsLJiNMkGr8ypQ8Uic7cIox7UCDsM7HuUGxdGT7mSDTYbqzIdsOWzfBton/YJrMw==",
       "dependencies": {
         "clone-deep": "^4.0.1",
         "find-cache-dir": "^2.0.0",
@@ -4299,36 +4299,35 @@
       "dev": true
     },
     "node_modules/@jest/create-cache-key-function": {
-      "version": "29.4.3",
-      "resolved": "https://registry.npmjs.org/@jest/create-cache-key-function/-/create-cache-key-function-29.4.3.tgz",
-      "integrity": "sha512-AJVFQTTy6jnZAQiAZrdOaTAPzJUrvAE/4IMe+Foav6WPhypFszqg7a4lOTyuzYQEEiT5RSrGYg9IY+/ivxiyXw==",
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/@jest/create-cache-key-function/-/create-cache-key-function-27.5.1.tgz",
+      "integrity": "sha512-dmH1yW+makpTSURTy8VzdUwFnfQh1G8R+DxO2Ho2FFmBbKFEVm+3jWdvFhE2VqB/LATCTokkP0dotjyQyw5/AQ==",
       "dependencies": {
-        "@jest/types": "^29.4.3"
+        "@jest/types": "^27.5.1"
       },
       "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
       }
     },
     "node_modules/@jest/create-cache-key-function/node_modules/@jest/types": {
-      "version": "29.4.3",
-      "resolved": "https://registry.npmjs.org/@jest/types/-/types-29.4.3.tgz",
-      "integrity": "sha512-bPYfw8V65v17m2Od1cv44FH+SiKW7w2Xu7trhcdTLUmSv85rfKsP+qXSjO4KGJr4dtPSzl/gvslZBXctf1qGEA==",
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/@jest/types/-/types-27.5.1.tgz",
+      "integrity": "sha512-Cx46iJ9QpwQTjIdq5VJu2QTMMs3QlEjI0x1QbBP5W1+nMzyc2XmimiRR/CbX9TO0cPTeUlxWMOu8mslYsJ8DEw==",
       "dependencies": {
-        "@jest/schemas": "^29.4.3",
         "@types/istanbul-lib-coverage": "^2.0.0",
         "@types/istanbul-reports": "^3.0.0",
         "@types/node": "*",
-        "@types/yargs": "^17.0.8",
+        "@types/yargs": "^16.0.0",
         "chalk": "^4.0.0"
       },
       "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
       }
     },
     "node_modules/@jest/create-cache-key-function/node_modules/@types/yargs": {
-      "version": "17.0.22",
-      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.22.tgz",
-      "integrity": "sha512-pet5WJ9U8yPVRhkwuEIp5ktAeAqRZOq4UdAyWLWzxbtpyXnzbtLdKiXAjJzi/KLmPGS9wk86lUFWZFN6sISo4g==",
+      "version": "16.0.5",
+      "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-16.0.5.tgz",
+      "integrity": "sha512-AxO/ADJOBFJScHbWhq2xAhlWP24rY4aCEG/NFaMvbT3X2MgRsLjhjQwsn0Zi5zn0LG9jUhCCZMeX9Dkuw6k+vQ==",
       "dependencies": {
         "@types/yargs-parser": "*"
       }
@@ -4397,17 +4396,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/@jest/schemas": {
-      "version": "29.4.3",
-      "resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-29.4.3.tgz",
-      "integrity": "sha512-VLYKXQmtmuEz6IxJsrZwzG9NvtkQsWNnWMsKxqWNu3+CnfzJQhp0WDDKWLVV9hLKr0l3SLLFRqcYHjhtyuDVxg==",
-      "dependencies": {
-        "@sinclair/typebox": "^0.25.16"
-      },
-      "engines": {
-        "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
-      }
-    },
     "node_modules/@jest/types": {
       "version": "26.6.2",
       "resolved": "https://registry.npmjs.org/@jest/types/-/types-26.6.2.tgz",
@@ -4693,15 +4681,15 @@
       "integrity": "sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw=="
     },
     "node_modules/@react-native-community/cli": {
-      "version": "9.2.1",
-      "resolved": "https://registry.npmjs.org/@react-native-community/cli/-/cli-9.2.1.tgz",
-      "integrity": "sha512-feMYS5WXXKF4TSWnCXozHxtWq36smyhGaENXlkiRESfYZ1mnCUlPfOanNCAvNvBqdyh9d4o0HxhYKX1g9l6DCQ==",
+      "version": "9.3.2",
+      "resolved": "https://registry.npmjs.org/@react-native-community/cli/-/cli-9.3.2.tgz",
+      "integrity": "sha512-IAW4X0vmX/xozNpp/JVZaX7MrC85KV0OP2DF4o7lNGOfpUhzJAEWqTfkxFYS+VsRjZHDve4wSTiGIuXwE7FG1w==",
       "dependencies": {
         "@react-native-community/cli-clean": "^9.2.1",
         "@react-native-community/cli-config": "^9.2.1",
         "@react-native-community/cli-debugger-ui": "^9.0.0",
-        "@react-native-community/cli-doctor": "^9.2.1",
-        "@react-native-community/cli-hermes": "^9.2.1",
+        "@react-native-community/cli-doctor": "^9.3.0",
+        "@react-native-community/cli-hermes": "^9.3.1",
         "@react-native-community/cli-plugin-metro": "^9.2.1",
         "@react-native-community/cli-server-api": "^9.2.1",
         "@react-native-community/cli-tools": "^9.2.1",
@@ -4840,18 +4828,6 @@
         "wcwidth": "^1.0.1"
       }
     },
-    "node_modules/@react-native-community/cli-doctor/node_modules/@react-native-community/cli-platform-ios": {
-      "version": "9.3.0",
-      "resolved": "https://registry.npmjs.org/@react-native-community/cli-platform-ios/-/cli-platform-ios-9.3.0.tgz",
-      "integrity": "sha512-nihTX53BhF2Q8p4B67oG3RGe1XwggoGBrMb6vXdcu2aN0WeXJOXdBLgR900DAA1O8g7oy1Sudu6we+JsVTKnjw==",
-      "dependencies": {
-        "@react-native-community/cli-tools": "^9.2.1",
-        "chalk": "^4.1.2",
-        "execa": "^1.0.0",
-        "glob": "^7.1.3",
-        "ora": "^5.4.1"
-      }
-    },
     "node_modules/@react-native-community/cli-doctor/node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -5026,20 +5002,6 @@
         "ip": "^1.1.5"
       }
     },
-    "node_modules/@react-native-community/cli-hermes/node_modules/@react-native-community/cli-platform-android": {
-      "version": "9.3.1",
-      "resolved": "https://registry.npmjs.org/@react-native-community/cli-platform-android/-/cli-platform-android-9.3.1.tgz",
-      "integrity": "sha512-m0bQ6Twewl7OEZoVf79I2GZmsDqh+Gh0bxfxWgwxobsKDxLx8/RNItAo1lVtTCgzuCR75cX4EEO8idIF9jYhew==",
-      "dependencies": {
-        "@react-native-community/cli-tools": "^9.2.1",
-        "chalk": "^4.1.2",
-        "execa": "^1.0.0",
-        "fs-extra": "^8.1.0",
-        "glob": "^7.1.3",
-        "logkitty": "^0.7.1",
-        "slash": "^3.0.0"
-      }
-    },
     "node_modules/@react-native-community/cli-hermes/node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -5105,9 +5067,9 @@
       }
     },
     "node_modules/@react-native-community/cli-platform-android": {
-      "version": "9.2.1",
-      "resolved": "https://registry.npmjs.org/@react-native-community/cli-platform-android/-/cli-platform-android-9.2.1.tgz",
-      "integrity": "sha512-VamCZ8nido3Q3Orhj6pBIx48itORNPLJ7iTfy3nucD1qISEDih3DOzCaQCtmqdEBgUkNkNl0O+cKgq5A3th3Zg==",
+      "version": "9.3.1",
+      "resolved": "https://registry.npmjs.org/@react-native-community/cli-platform-android/-/cli-platform-android-9.3.1.tgz",
+      "integrity": "sha512-m0bQ6Twewl7OEZoVf79I2GZmsDqh+Gh0bxfxWgwxobsKDxLx8/RNItAo1lVtTCgzuCR75cX4EEO8idIF9jYhew==",
       "dependencies": {
         "@react-native-community/cli-tools": "^9.2.1",
         "chalk": "^4.1.2",
@@ -5183,9 +5145,9 @@
       }
     },
     "node_modules/@react-native-community/cli-platform-ios": {
-      "version": "9.2.1",
-      "resolved": "https://registry.npmjs.org/@react-native-community/cli-platform-ios/-/cli-platform-ios-9.2.1.tgz",
-      "integrity": "sha512-dEgvkI6CFgPk3vs8IOR0toKVUjIFwe4AsXFvWWJL5qhrIzW9E5Owi0zPkSvzXsMlfYMbVX0COfVIK539ZxguSg==",
+      "version": "9.3.0",
+      "resolved": "https://registry.npmjs.org/@react-native-community/cli-platform-ios/-/cli-platform-ios-9.3.0.tgz",
+      "integrity": "sha512-nihTX53BhF2Q8p4B67oG3RGe1XwggoGBrMb6vXdcu2aN0WeXJOXdBLgR900DAA1O8g7oy1Sudu6we+JsVTKnjw==",
       "dependencies": {
         "@react-native-community/cli-tools": "^9.2.1",
         "chalk": "^4.1.2",
@@ -5976,11 +5938,6 @@
       "resolved": "https://registry.npmjs.org/@sideway/pinpoint/-/pinpoint-2.0.0.tgz",
       "integrity": "sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ=="
     },
-    "node_modules/@sinclair/typebox": {
-      "version": "0.25.23",
-      "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.25.23.tgz",
-      "integrity": "sha512-VEB8ygeP42CFLWyAJhN5OklpxUliqdNEUcXb4xZ/CINqtYGTjL5ukluKdKzQ0iWdUxyQ7B0539PAUhHKrCNWSQ=="
-    },
     "node_modules/@types/babel__core": {
       "version": "7.20.0",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.0.tgz",
@@ -7511,9 +7468,9 @@
       }
     },
     "node_modules/bl/node_modules/readable-stream": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
-      "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
       "dependencies": {
         "inherits": "^2.0.3",
         "string_decoder": "^1.1.1",
@@ -14339,9 +14296,9 @@
       "integrity": "sha512-dZ6Ra7u1G8c4Letq/B5EzAxj4tLFHL+cGtdpR+PVm4yzPDj+lCk+AbivWt1eOM+ikzkowtyV7qSqX6qr3t71Ww=="
     },
     "node_modules/joi": {
-      "version": "17.7.1",
-      "resolved": "https://registry.npmjs.org/joi/-/joi-17.7.1.tgz",
-      "integrity": "sha512-teoLhIvWE298R6AeJywcjR4sX2hHjB3/xJX4qPjg+gTg+c0mzUDsziYlqPmLomq9gVsfaMcgPaGc7VxtD/9StA==",
+      "version": "17.9.2",
+      "resolved": "https://registry.npmjs.org/joi/-/joi-17.9.2.tgz",
+      "integrity": "sha512-Itk/r+V4Dx0V3c7RLFdRh12IOjySm2/WGPMubBT92cQvRfYZhPM2W0hZlctjj72iES8jsRCwp7S/cRmWBnJ4nw==",
       "dependencies": {
         "@hapi/hoek": "^9.0.0",
         "@hapi/topo": "^5.0.0",
@@ -18464,14 +18421,14 @@
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
     "node_modules/react-native": {
-      "version": "0.70.5",
-      "resolved": "https://registry.npmjs.org/react-native/-/react-native-0.70.5.tgz",
-      "integrity": "sha512-5NZM80LC3L+TIgQX/09yiyy48S73wMgpIgN5cCv3XTMR394+KpDI3rBZGH4aIgWWuwijz31YYVF5504+9n2Zfw==",
-      "dependencies": {
-        "@jest/create-cache-key-function": "^29.0.3",
-        "@react-native-community/cli": "9.2.1",
-        "@react-native-community/cli-platform-android": "9.2.1",
-        "@react-native-community/cli-platform-ios": "9.2.1",
+      "version": "0.70.8",
+      "resolved": "https://registry.npmjs.org/react-native/-/react-native-0.70.8.tgz",
+      "integrity": "sha512-O3ONJed9W/VEEVWsbZcwyMDhnEvw7v9l9enqWqgbSGLzHfh6HeIGMCNmjz+kRsHnC7AiF47fupWfgYX7hNnhoQ==",
+      "dependencies": {
+        "@jest/create-cache-key-function": "^27.0.1",
+        "@react-native-community/cli": "9.3.2",
+        "@react-native-community/cli-platform-android": "9.3.1",
+        "@react-native-community/cli-platform-ios": "9.3.0",
         "@react-native/assets": "1.0.0",
         "@react-native/normalize-color": "2.0.0",
         "@react-native/polyfills": "2.0.0",
@@ -18488,7 +18445,7 @@
         "mkdirp": "^0.5.1",
         "nullthrows": "^1.1.1",
         "pretty-format": "^26.5.2",
-        "promise": "^8.0.3",
+        "promise": "^8.3.0",
         "react-devtools-core": "4.24.0",
         "react-native-codegen": "^0.70.6",
         "react-native-gradle-plugin": "^0.70.3",
@@ -19624,9 +19581,9 @@
       }
     },
     "node_modules/shell-quote": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.0.tgz",
-      "integrity": "sha512-QHsz8GgQIGKlRi24yFc6a6lN69Idnx634w49ay6+jA5yFh7a1UY+4Rp6HPx/L/1zcEDPEij8cIsiqR6bQsE5VQ==",
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.1.tgz",
+      "integrity": "sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==",
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
diff --git a/package.json b/package.json
index 64ecc52..99f6aea 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "prettier:fix": "npx prettier --write ."
   },
   "dependencies": {
+    "@expo/webpack-config": "^0.17.2",
     "@react-native-community/masked-view": "^0.1.11",
     "@react-navigation/bottom-tabs": "^6.5.7",
     "@react-navigation/native": "^6.1.4",
@@ -26,18 +27,17 @@
     "firebase": "^9.17.2",
     "i18next": "^22.4.10",
     "react": "18.1.0",
+    "react-dom": "18.1.0",
     "react-i18next": "^12.1.5",
-    "react-native": "0.70.5",
+    "react-native": "0.70.8",
     "react-native-dotenv": "^3.4.7",
     "react-native-gesture-handler": "~2.8.0",
     "react-native-reanimated": "~2.12.0",
     "react-native-safe-area-context": "4.4.1",
     "react-native-screens": "~3.18.0",
     "react-native-svg": "13.4.0",
-    "react-navigation": "^4.4.4",
     "react-native-web": "~0.18.9",
-    "react-dom": "18.1.0",
-    "@expo/webpack-config": "^0.17.2"
+    "react-navigation": "^4.4.4"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",
diff --git a/src/screens/AudioScreen/Audio.tsx b/src/screens/AudioScreen/Audio.tsx
index c19b2a0..9052d6a 100644
--- a/src/screens/AudioScreen/Audio.tsx
+++ b/src/screens/AudioScreen/Audio.tsx
@@ -16,7 +16,7 @@ function AudioScreen({ navigation }: RootStackScreenProps<'Audio'>) {
           backgroundColor: Colors.surfaceGrey,
           borderRadius: 10,
           padding: '3%',
-          marginBottom: '5%',
+          marginBottom: '7%',
         }}
       />
       <Text
@@ -47,6 +47,7 @@ function AudioScreen({ navigation }: RootStackScreenProps<'Audio'>) {
         <AudioCard
           name="An Interview with Preston Hardison on the Convention on Biodiversity"
           author="Preson Hardison"
+          // onPress={() => navigation.navigate('SearchOff')}
         />
         <AudioCard
           name="Mrinalini Rai on the Convention on Biodiversity and Gender Rights "
diff --git a/src/screens/SearchOffline/SearchOff.tsx b/src/screens/SearchOffline/SearchOff.tsx
new file mode 100644
index 0000000..12a8515
--- /dev/null
+++ b/src/screens/SearchOffline/SearchOff.tsx
@@ -0,0 +1,61 @@
+import { ScrollView, Text, TextInput, View } from 'react-native';
+import AudioCard from '../../components/AudioCard';
+import '../../i18n/i18n';
+import Colors from '../../styles/Colors';
+import { RootStackScreenProps } from '../../types/navigation';
+import styles from './styles';
+
+function SearchOff({ navigation }: RootStackScreenProps<'Audio'>) {
+  return (
+    <View style={styles.view}>
+      <TextInput
+        placeholder="Search"
+        style={{
+          width: '95%',
+          height: '7%',
+          backgroundColor: Colors.surfaceGrey,
+          borderRadius: 10,
+          padding: '3%',
+          marginBottom: '7%',
+          marginTop: '3%',
+        }}
+      />
+      <View style={styles.view1}>
+        <Text
+          style={{
+            fontSize: 32,
+            marginBottom: 20,
+            fontWeight: '400',
+            color: Colors.textPrimary,
+          }}
+        >
+          You are offline.
+        </Text>
+        <Text
+          style={{
+            fontSize: 20,
+            fontWeight: '400',
+            color: Colors.redPrimary,
+          }}
+        >
+          Go online to search again.
+        </Text>
+      </View>
+      {/* <View style={styles.view2}>
+        <Text style={{
+            fontSize: 15,
+            fontWeight: '400',
+            color: Colors.textPrimary,
+            alignItems: 'center',
+            justifyContent: 'center',
+            top: 15,
+            left: 130,
+          }}> 
+          You are offline.
+        </Text>
+      </View> */}
+    </View>
+  );
+}
+
+export default SearchOff;
diff --git a/src/screens/SearchOffline/styles.tsx b/src/screens/SearchOffline/styles.tsx
new file mode 100644
index 0000000..b817403
--- /dev/null
+++ b/src/screens/SearchOffline/styles.tsx
@@ -0,0 +1,76 @@
+import { StyleSheet } from 'react-native';
+import Colors from '../../styles/Colors';
+
+export default StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.surfaceWhite,
+    alignItems: 'flex-start',
+    justifyContent: 'center',
+  },
+  container2: {
+    flex: 1,
+    backgroundColor: Colors.surfaceWhite,
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+  },
+  header_text: {
+    fontSize: 13,
+    width: '90%',
+    paddingLeft: '15%',
+    textAlign: 'left',
+    color: Colors.textPrimary,
+  },
+  title_text: {
+    fontSize: 20,
+    marginBottom: 10,
+    textAlign: 'left',
+    fontWeight: '500',
+    color: Colors.textPrimary,
+    paddingLeft: '5%',
+  },
+  author_text: {
+    fontSize: 15,
+    textAlign: 'left',
+    fontWeight: '500',
+    color: Colors.textSecondary,
+    paddingBottom: '5%',
+    paddingLeft: '5%',
+  },
+  audio_container: {
+    justifyContent: 'space-around',
+    flexDirection: 'row',
+    paddingTop: '5%',
+    width: '90%',
+    paddingLeft: '10%',
+    paddingBottom: '3%',
+    alignItems: 'center',
+  },
+  view: {
+    flex: 1,
+    backgroundColor: Colors.surfaceWhite,
+    alignItems: 'flex-start',
+    justifyContent: 'center',
+    paddingLeft: '5%',
+    paddingTop: '0%',
+  },
+  view1: {
+    flex: 1,
+    backgroundColor: Colors.surfaceWhite,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingLeft: '15%',
+    paddingBottom: '10%',
+  },
+  view2: {
+    position: 'absolute',
+    width: 400,
+    height: 100,
+    left: 0,
+    top: 500,
+    bottom: 0,
+    backgroundColor: Colors.surfaceGrey,
+    overflow: 'hidden',
+  },
+});
diff --git a/src/stacks/SearchStackNavigator.tsx b/src/stacks/SearchStackNavigator.tsx
index a95b64b..b620a46 100644
--- a/src/stacks/SearchStackNavigator.tsx
+++ b/src/stacks/SearchStackNavigator.tsx
@@ -2,6 +2,7 @@ import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
 import AudioScreen from '../screens/AudioScreen/Audio';
 import PlayScreen from '../screens/PlayScreen/Play';
+import SearchOff from '../screens/SearchOffline/SearchOff';
 import { SearchStackParamList } from '../types/navigation';
 
 const SearchStack = createNativeStackNavigator<SearchStackParamList>();
@@ -15,6 +16,7 @@ export default function SearchStackNavigator() {
     >
       <SearchStack.Screen name="Audio" component={AudioScreen} />
       <SearchStack.Screen name="Play" component={PlayScreen} />
+      <SearchStack.Screen name="SearchOff" component={SearchOff} />
     </SearchStack.Navigator>
   );
 }
diff --git a/src/types/navigation.tsx b/src/types/navigation.tsx
index 4c5e40b..5f05d84 100644
--- a/src/types/navigation.tsx
+++ b/src/types/navigation.tsx
@@ -12,6 +12,7 @@ export type RootStackParamList = {
   Grants: undefined;
   Play: undefined;
   QueriesDemo: undefined;
+  SearchOff: undefined;
 };
 
 export type HomeStackParamList = {
@@ -26,6 +27,7 @@ export type GrantsStackParamList = {
 export type SearchStackParamList = {
   Audio: undefined;
   Play: undefined;
+  SearchOff: undefined;
 };
 
 export type RootStackScreenProps<T extends keyof RootStackParamList> =