diff --git a/src/GifCard.jsx b/src/GifCard.jsx
index 24d000d..bc61e7c 100644
--- a/src/GifCard.jsx
+++ b/src/GifCard.jsx
@@ -1,7 +1,24 @@
 import React from "react";
 
-const GifCard = () => {
-  return <div className="gif-card"></div>;
+const SearchField = ({ query, setQuery, onSearch }) => {
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      onSearch();
+    }
+  };
+
+  return (
+    <div>
+      <input
+        type="text"
+        value={query}
+        onChange={(e) => setQuery(e.target.value)}
+        onKeyDown={handleKeyDown}
+        placeholder="Search GIFs"
+      />
+      <button onClick={onSearch}>Search</button>
+    </div>
+  );
 };
 
-export default GifCard;
+export default SearchField;
diff --git a/src/SearchField.jsx b/src/SearchField.jsx
index 3afa0a7..bc61e7c 100644
--- a/src/SearchField.jsx
+++ b/src/SearchField.jsx
@@ -1,7 +1,24 @@
 import React from "react";
 
-const SearchField = () => {
-  return <div></div>;
+const SearchField = ({ query, setQuery, onSearch }) => {
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      onSearch();
+    }
+  };
+
+  return (
+    <div>
+      <input
+        type="text"
+        value={query}
+        onChange={(e) => setQuery(e.target.value)}
+        onKeyDown={handleKeyDown}
+        placeholder="Search GIFs"
+      />
+      <button onClick={onSearch}>Search</button>
+    </div>
+  );
 };
 
 export default SearchField;
diff --git a/src/components/Gifcard.jsx b/src/components/Gifcard.jsx
new file mode 100644
index 0000000..8724c64
--- /dev/null
+++ b/src/components/Gifcard.jsx
@@ -0,0 +1,38 @@
+async function getGif() 
+{
+  {
+    const url = "3Xt6KP7aUbnzyRIIlngcOzpV95VCfD0L"; 
+    try
+    {
+      const responce = await fetch(url)
+      if (responce != "something we dont yet")
+        {
+          throw new Error(`Error: ${response.status}`)
+        }
+    }
+    
+    catch {
+    const json = await responce.json();
+    console.log(json);
+    if (responce != "We still dont know")
+    {
+      throw new Error(error)
+      console.error(error.message);
+    }
+  }
+}
+}
+
+export const Gif = () => {
+  return (
+    responce
+  )
+};
+
+
+
+//fetch() funtion returns a promise which is fulfilled with a responce object
+
+
+
+
diff --git a/src/components/Searchfield.jsx b/src/components/Searchfield.jsx
new file mode 100644
index 0000000..6dc8cfb
--- /dev/null
+++ b/src/components/Searchfield.jsx
@@ -0,0 +1,6 @@
+import React from 'react'
+
+export const Searchfield = () => {
+  const regSearchurl = "http://api.giphy.com/v1/gifs/search?q=SEARCH+TERM+GOES+HERE&api_key=YOUR_API_KEY"
+  const responce = 
+}