diff --git a/.gitignore b/.gitignore
index 94a1e8dd..5877f4a0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -16,6 +16,7 @@
 .env.development.local
 .env.test.local
 .env.production.local
+.env
 
 npm-debug.log*
 yarn-debug.log*
diff --git a/src/context/PhotoContext.js b/src/context/PhotoContext.js
index 406b6f0a..f3f9b3b8 100644
--- a/src/context/PhotoContext.js
+++ b/src/context/PhotoContext.js
@@ -1,6 +1,9 @@
 import React, { createContext, useState } from "react";
 import axios from "axios";
 import { apiKey } from "../api/config";
+
+const updatedApiKey = process?.env.REACT_APP_API_KEY;
+
 export const PhotoContext = createContext();
 
 const PhotoContextProvider = props => {
@@ -9,7 +12,7 @@ const PhotoContextProvider = props => {
   const runSearch = query => {
     axios
       .get(
-        `https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=${apiKey}&tags=${query}&per_page=24&format=json&nojsoncallback=1`
+        `https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=${updatedApiKey}&tags=${query}&per_page=24&format=json&nojsoncallback=1`
       )
       .then(response => {
         setImages(response.data.photos.photo);
diff --git a/src/index.css b/src/index.css
index 3067afe8..e6e0210d 100644
--- a/src/index.css
+++ b/src/index.css
@@ -232,4 +232,14 @@ input {
     -o-transform: rotate(45deg);
     box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.8);
   }
+}
+.search-form button{
+  border: 3px solid #d7dbdf;
+  background-color: #ccc;
+}
+.main-nav ul li a{
+  transition: transform 0.5s ease-out;
+}
+.main-nav ul li a:hover{
+  transform: scale(1.15);
 }
\ No newline at end of file