diff --git a/.env.example b/.env.example
deleted file mode 100644
index 711fab6..0000000
--- a/.env.example
+++ /dev/null
@@ -1,7 +0,0 @@
-API_KEY =
-REACT_APP_OFFSET_LIVE_CHAT = 
-REACT_APP_YOUTUBE_VIDEOS_API = "https://youtube.googleapis.com/youtube/v3/videos?part=snippet%2CcontentDetails%2Cstatistics&chart=mostPopular&regionCode=US&key=[YOUR_API_KEY]"
-REACT_APP_YOUTUBE_VIDEO_API = "https://youtube.googleapis.com/youtube/v3/videos?part=snippet%2CcontentDetails%2Cstatistics&id=Ks-_Mh1QhMc&key=[YOUR_API_KEY]"
-REACT_APP_YOUTUBE_SEARCH_SUGGESTIONS_API = "http://suggestqueries.google.com/complete/search?client=firefox&ds=yt&q=Query"
-REACT_APP_YOUTUBE_CHANNEL_API = "https://youtube.googleapis.com/youtube/v3/channels?part=snippet%2CcontentDetails%2Cstatistics&id=UC_x5XG1OV2P6uZZ5FSM9Ttw&key=[YOUR_API_KEY]"
-REACT_APP_YOUTUBE_SEARCH_API = "https://youtube.googleapis.com/youtube/v3/search?part=snippet&maxResults=25&q=surfing&key=[YOUR_API_KEY]"
\ No newline at end of file
diff --git a/src/components/ErrorPage.js b/src/components/ErrorPage.js
index f8f990d..304bdc2 100644
--- a/src/components/ErrorPage.js
+++ b/src/components/ErrorPage.js
@@ -2,13 +2,9 @@ import React from "react";
 
 const ErrorPage = ({ error }) => {
   return (
-    <div className="flex mt-20 justify-center items-center">
-      <div>
-        <p className=" text-2xl sm:text-5xl font-bold mb-2">
-          {error.code} error
-        </p>
-        <p className=" text-lg sm:text-xl">{error.message}</p>
-      </div>
+    <div className="flex flex-col w-full h-screen justify-center items-center">
+      <p className=" text-2xl sm:text-5xl font-bold mb-2">{error.code} error</p>
+      <p className=" text-lg sm:text-xl">{error.message}</p>
     </div>
   );
 };
diff --git a/src/constants/constants.js b/src/constants/constants.js
new file mode 100644
index 0000000..488fa43
--- /dev/null
+++ b/src/constants/constants.js
@@ -0,0 +1,26 @@
+export const OFFSET_LIVE_CHAT = 20;
+
+export const OFFSET_SCROLL = 15;
+
+export const YOUTUBE_VIDEOS_API =
+  "https://youtube.googleapis.com/youtube/v3/videos?part=snippet%2CcontentDetails%2Cstatistics&chart=mostPopular&maxResults=6&pageToken=%PAGE_TOKEN%&regionCode=IN&key=" +
+  process.env.REACT_APP_API_KEY;
+
+export const YOUTUBE_SUGGESTED_VIDEOS_API =
+  "https://youtube.googleapis.com/youtube/v3/videos?part=snippet%2CcontentDetails%2Cstatistics&chart=mostPopular&maxResults=25&regionCode=IN&key=" +
+  process.env.REACT_APP_API_KEY;
+
+export const YOUTUBE_VIDEO_API =
+  "https://youtube.googleapis.com/youtube/v3/videos?part=snippet%2CcontentDetails%2Cstatistics&id=%VIDEO_ID%&key=" +
+  process.env.REACT_APP_API_KEY;
+
+export const YOUTUBE_SEARCH_SUGGESTIONS_API =
+  "http://suggestqueries.google.com/complete/search?client=firefox&ds=yt&q=";
+
+export const YOUTUBE_CHANNEL_API =
+  "https://youtube.googleapis.com/youtube/v3/channels?part=snippet%2CcontentDetails%2Cstatistics&id=%CHANNEL_ID%&key=" +
+  process.env.REACT_APP_API_KEY;
+
+export const YOUTUBE_SEARCH_API =
+  "https://youtube.googleapis.com/youtube/v3/search?part=snippet&maxResults=25&q=%QUERY%&key=" +
+  process.env.REACT_APP_API_KEY;
diff --git a/src/fetchData/getChannelData.js b/src/fetchData/getChannelData.js
index ef049aa..a6f000c 100644
--- a/src/fetchData/getChannelData.js
+++ b/src/fetchData/getChannelData.js
@@ -1,8 +1,7 @@
+import { YOUTUBE_CHANNEL_API } from "../constants/constants";
+
 export const getChannelData = async (channelId, setChannelData) => {
-  const API = process.env.REACT_APP_YOUTUBE_CHANNEL_API.replace(
-    "%CHANNEL_ID%",
-    channelId
-  );
+  const API = YOUTUBE_CHANNEL_API.replace("%CHANNEL_ID%", channelId);
 
   try {
     const data = await fetch(API);
diff --git a/src/fetchData/getSearchResults.js b/src/fetchData/getSearchResults.js
index 3a21666..4d38e7f 100644
--- a/src/fetchData/getSearchResults.js
+++ b/src/fetchData/getSearchResults.js
@@ -1,8 +1,7 @@
+import { YOUTUBE_SEARCH_API } from "../constants/constants";
+
 export const getSearchResults = async (query, setSearchResults) => {
-  const API = process.env.REACT_APP_YOUTUBE_SEARCH_API.replaceAll(
-    "%QUERY%",
-    query
-  );
+  const API = YOUTUBE_SEARCH_API.replaceAll("%QUERY%", query);
 
   try {
     const data = await fetch(API);
diff --git a/src/fetchData/getVideo.js b/src/fetchData/getVideo.js
index bbe491c..db75030 100644
--- a/src/fetchData/getVideo.js
+++ b/src/fetchData/getVideo.js
@@ -1,8 +1,7 @@
+import { YOUTUBE_VIDEO_API } from "../constants/constants";
+
 export const getVideo = async (videoId, setVideo) => {
-  const API = process.env.REACT_APP_YOUTUBE_VIDEO_API.replace(
-    "%VIDEO_ID%",
-    videoId
-  );
+  const API = YOUTUBE_VIDEO_API.replace("%VIDEO_ID%", videoId);
   try {
     const data = await fetch(API);
     const json = await data.json();
diff --git a/src/fetchData/getVideos.js b/src/fetchData/getVideos.js
index 3df4fe2..324f385 100644
--- a/src/fetchData/getVideos.js
+++ b/src/fetchData/getVideos.js
@@ -1,5 +1,7 @@
+import { YOUTUBE_SUGGESTED_VIDEOS_API } from "../constants/constants";
+
 export const getVideos = async (setVideosList) => {
-  const API = process.env.REACT_APP_YOUTUBE_VIDEOS_API;
+  const API = YOUTUBE_SUGGESTED_VIDEOS_API;
   try {
     const data = await fetch(API);
     const json = await data.json();
diff --git a/src/pages/Home.js b/src/pages/Home.js
index 5614bc1..1e5ea0d 100644
--- a/src/pages/Home.js
+++ b/src/pages/Home.js
@@ -5,6 +5,7 @@ import { Link } from "react-router-dom";
 import { useDispatch, useSelector } from "react-redux";
 import SearchButtons from "../components/SearchButtons";
 import { addVideosList } from "../redux/scrollSlice";
+import { YOUTUBE_VIDEOS_API } from "../constants/constants";
 
 const Home = () => {
   const dispatch = useDispatch();
@@ -43,10 +44,7 @@ const Home = () => {
 
   const getVideos = async (pageToken) => {
     try {
-      const API = process.env.REACT_APP_YOUTUBE_VIDEOS_API.replace(
-        "%PAGE_TOKEN%",
-        pageToken
-      );
+      const API = YOUTUBE_VIDEOS_API.replace("%PAGE_TOKEN%", pageToken);
       const data = await fetch(API);
       const json = await data.json();
       dispatch(addVideosList(json));
diff --git a/src/pages/WatchVideo.js b/src/pages/WatchVideo.js
index 727c14d..5ce4710 100644
--- a/src/pages/WatchVideo.js
+++ b/src/pages/WatchVideo.js
@@ -10,6 +10,7 @@ import Channel from "../components/Channel";
 import CommentsList from "../components/CommentsList";
 import commentsDummyData from "../constants/commentsDummyData";
 import LiveChat from "../components/LiveChat";
+import ErrorPage from "../components/ErrorPage";
 
 const WatchVideo = () => {
   const dispatch = useDispatch();
@@ -25,8 +26,6 @@ const WatchVideo = () => {
     });
   };
 
-  const suggestedVideos = videosList.filter((videos) => videos.id !== videoId);
-
   useEffect(() => {
     dispatch(closeWatchMenu());
     getVideos(setVideosList);
@@ -34,61 +33,77 @@ const WatchVideo = () => {
     // eslint-disable-next-line
   }, []);
 
+  // if (videosList.length !== 0) {
+  //   var suggestedVideos = videosList.filter((videos) => videos.id !== videoId);
+  // }
+
+  console.log("videosList", videosList);
+
   return (
-    <div className=" block lg:flex">
-      <div className="watch-video overflow-y-auto  h-full w-full lg:w-8/12 relative sm:top-16 px-5 pt-0 sm:pt-6 pl-5 xl:pl-20 left-0  z-6">
-        <div>
-          <iframe
-            width="100%"
-            height="520"
-            src={"https://www.youtube.com/embed/" + videoId}
-            title="YouTube video player"
-            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-            allowFullScreen
-            style={{ borderRadius: "10px" }}
-          ></iframe>
-          {video !== null && (
-            <>
-              <div className=" font-bold text-xl my-2">
-                {video?.snippet?.title}
-              </div>
+    <>
+      {videosList.error ? (
+        <ErrorPage error={videosList.error} />
+      ) : (
+        <div className=" block lg:flex">
+          <div className="watch-video overflow-y-auto  h-full w-full lg:w-8/12 relative sm:top-16 px-5 pt-0 sm:pt-6 pl-5 xl:pl-20 left-0  z-6">
+            <div>
+              <iframe
+                width="100%"
+                height="520"
+                src={"https://www.youtube.com/embed/" + videoId}
+                title="YouTube video player"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                allowFullScreen
+                style={{ borderRadius: "10px" }}
+              ></iframe>
+              {video !== null && (
+                <>
+                  <div className=" font-bold text-xl my-2">
+                    {video?.snippet?.title}
+                  </div>
 
-              <div className="flex items-center mb-4">
-                <Channel channelId={video.snippet.channelId} />
-                <button className=" ml-5 bg-black px-4 py-2 rounded-3xl text-sm font-semibold text-white">
-                  Subscribe
-                </button>
-              </div>
-            </>
-          )}
-          <h2 className=" font-bold text-lg mb-2">Comments:</h2>
-          <CommentsList comments={commentsDummyData} />
-        </div>
-      </div>
-      <div className="hidden w-4/12 lg:block">
-        <LiveChat />
-        <div className="relative top-[6rem]">
-          <div className="search-buttons bg-white flex items-center h-12 w-[22rem] xl:w-[25rem] relative overflow-x-auto top-0 right-0 z-10">
-            <ButtonsList />
+                  <div className="flex items-center mb-4">
+                    <Channel channelId={video.snippet.channelId} />
+                    <button className=" ml-5 bg-black px-4 py-2 rounded-3xl text-sm font-semibold text-white">
+                      Subscribe
+                    </button>
+                  </div>
+                </>
+              )}
+              <h2 className=" font-bold text-lg mb-2">Comments:</h2>
+              <CommentsList comments={commentsDummyData} />
+            </div>
           </div>
-        </div>
-        <div className="suggested-videos w-[25rem] relative right-0 top-[7rem] z-6">
-          <div className="">
-            {suggestedVideos.map((videos) => {
-              return (
-                <Link
-                  key={videos.id}
-                  to={"/watch?v=" + videos.id}
-                  onClick={handleScrollTop}
-                >
-                  <SuggestedVideos info={videos} />
-                </Link>
-              );
-            })}
+          <div className="hidden w-4/12 lg:block">
+            <LiveChat />
+            <div className="relative top-[6rem]">
+              <div className="search-buttons bg-white flex items-center h-12 w-[22rem] xl:w-[25rem] relative overflow-x-auto top-0 right-0 z-10">
+                <ButtonsList />
+              </div>
+            </div>
+            <div className="suggested-videos w-[25rem] relative right-0 top-[7rem] z-6">
+              {videosList.length !== 0 && (
+                <div className="">
+                  {videosList
+                    .filter((videos) => videos.id !== videoId)
+                    .map((videos) => {
+                      return (
+                        <Link
+                          key={videos.id}
+                          to={"/watch?v=" + videos.id}
+                          onClick={handleScrollTop}
+                        >
+                          <SuggestedVideos info={videos} />
+                        </Link>
+                      );
+                    })}
+                </div>
+              )}
+            </div>
           </div>
         </div>
-      </div>
-    </div>
+      )}
+    </>
   );
 };