diff --git a/SayHiStyledComponent/.env b/SayHiStyledComponent/.env
new file mode 100644
index 0000000..31a154f
--- /dev/null
+++ b/SayHiStyledComponent/.env
@@ -0,0 +1 @@
+REACT_APP_BASE_URL=https://v2.jokeapi.dev/joke/Any
\ No newline at end of file
diff --git a/SayHiStyledComponent/package.json b/SayHiStyledComponent/package.json
index b833ae7..79479f2 100644
--- a/SayHiStyledComponent/package.json
+++ b/SayHiStyledComponent/package.json
@@ -12,6 +12,7 @@
     "@types/react-dom": "^17.0.3",
     "@types/styled-components": "^5.1.9",
     "axios": "^0.21.1",
+    "dotenv": "^8.2.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-query": "^3.13.12",
diff --git a/SayHiStyledComponent/src/App.tsx b/SayHiStyledComponent/src/App.tsx
index d22ba20..cc63f38 100644
--- a/SayHiStyledComponent/src/App.tsx
+++ b/SayHiStyledComponent/src/App.tsx
@@ -14,8 +14,13 @@ import cat from "./images/cat.png";
 import axios from "axios";
 import { Joke } from "./types/Joke";
 
-const BASE_URL = "https://v2.jokeapi.dev/joke/Any";
+
+require('dotenv').config()
+
 const App:React.FC=()=>{
+
+  
+
   const [search, setSearch] = useState("");
   const [error, setError] = useState(false);
   const [jokes, setJokes] = useState<Joke[]>([]);
@@ -26,7 +31,7 @@ const App:React.FC=()=>{
 
   const getJokes = async (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
-    const ENDPOINT = `${BASE_URL}?contains=${search}&amount=10`;
+    const ENDPOINT = `${process.env.REACT_APP_BASE_URL}?contains=${search}&amount=10`;
     const { data } = await axios.get(ENDPOINT);
     if (data.error) {
       setError(true);