diff --git a/src/App.tsx b/src/App.tsx
index d4c6e2d..cdff613 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -7,12 +7,12 @@ import { SearchKeyType } from './types/FormValidationTypes'
 
 function App() {
   const [inputSearchValue, setInputSearchValue] = useState<SearchKeyType>()
-  const [latLng, setLatLng] = useState<number[]>([])
+  const [latLng, setLatLng] = useState<number[]>([0, 0])
   const useAxios = getIpifyUseAxios()
   const [{ data, loading, error }, refetch] = useAxios<IpifyResponse>({})
 
   useEffect(() => {
-    if (data) {
+    if (data?.location) {
       console.debug('🚀 ~ file: App.tsx ~ line 63 ~ useEffect ~ data', data)
       setLatLng([data.location.lat, data.location.lng])
     }
@@ -20,7 +20,7 @@ function App() {
 
   return (
     <>
-      {data && (
+      {/* {data && (
         <Header
           axiosError={error}
           data={data}
@@ -30,9 +30,18 @@ function App() {
           inputSearchValue={inputSearchValue}
           setInputSearchValue={setInputSearchValue}
         />
-      )}
-
-      {latLng.length === 2 && <MapComponent latLng={latLng} />}
+      )} */}
+      <Header
+        axiosError={error}
+        data={data}
+        refetch={refetch}
+        // refetchParams={apiParams}
+        loading={loading}
+        inputSearchValue={inputSearchValue}
+        setInputSearchValue={setInputSearchValue}
+      />
+      {/* {latLng.length === 2 && <MapComponent latLng={latLng} />} */}
+      <MapComponent latLng={latLng} />
     </>
   )
 }
diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx
index ebfd976..eef914c 100644
--- a/src/components/header/Header.tsx
+++ b/src/components/header/Header.tsx
@@ -28,7 +28,7 @@ const Header = (props: {
   return (
     <header
       className={cx(
-        'h-[28rem] relative flex w-full flex-col items-center justify-between pt-6',
+        'relative flex h-[28rem] w-full flex-col items-center justify-between pt-6',
         'text-white transition-all duration-200',
         'gap-y-[2.4rem] lg:gap-y-[4.8rem]'
       )}
@@ -36,7 +36,7 @@ const Header = (props: {
       <h1 className="relative text-heading font-medium lg:text-heading-lg">IP Address Tracker</h1>
       <div
         className={cx(
-          'w-[32.7rem] lg:w-[55.5rem] relative flex flex-col  items-center',
+          'relative flex w-[32.7rem] flex-col items-center  lg:w-[55.5rem]',
           'gap-y-[2.4rem]'
         )}
       >
diff --git a/src/components/map/Map.tsx b/src/components/map/Map.tsx
index 7f5c2f1..9f22309 100644
--- a/src/components/map/Map.tsx
+++ b/src/components/map/Map.tsx
@@ -7,7 +7,9 @@ import 'leaflet/dist/leaflet.css'
 import { Map as LeafletMap, Marker as LeafletMarker } from 'leaflet'
 
 const Map = (props: { latLng: number[] }) => {
-  const [latLong, setLatLong] = useState<LatLng>(L.latLng(props.latLng[0], props.latLng[1]))
+  const [latLong, setLatLong] = useState<LatLng>(
+    L.latLng(props.latLng[0] || 0, props.latLng[1] || 0)
+  )
   const mapRef = useRef<LeafletMap>()
   const markerRef = useRef<LeafletMarker>()