diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 00000000..2ba986f6
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:8080",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index babba088..101be093 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13858,6 +13858,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
       "integrity": "sha512-8VAmEm/ZAwQzJ+GOMLbBsTdDKOpuZh7RPs0UymvBR2vRk4iZWCskjbFnxqjrzoIvlNNRZ3QJFx6/qDSi6zSnaQ==",
+      "license": "MIT",
       "dependencies": {
         "@babel/core": "^7.16.0",
         "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
diff --git a/src/components/App.js b/src/__tests__/App.js
similarity index 75%
rename from src/components/App.js
rename to src/__tests__/App.js
index 344d48d4..37dbe10f 100644
--- a/src/components/App.js
+++ b/src/__tests__/App.js
@@ -1,4 +1,4 @@
-import React from "react";
+mport React from "react";
 import Nav from "./Nav";
 
 import hogs from "../porkers_data";
@@ -11,4 +11,4 @@ function App() {
 	);
 }
 
-export default App;
+export default App;
\ No newline at end of file
diff --git a/src/components/Filtersort.js b/src/components/Filtersort.js
new file mode 100644
index 00000000..f39fa526
--- /dev/null
+++ b/src/components/Filtersort.js
@@ -0,0 +1,31 @@
+import React from "react";
+
+const FilterSort = ({ filterGreased, setFilterGreased, setSortType }) => {
+  return (
+    <div className="filter-sort">
+      <div className="filter">
+        <label>
+          <input
+            type="checkbox"
+            checked={filterGreased}
+            onChange={() => setFilterGreased(!filterGreased)}
+          />
+          Greased Hogs
+        </label>
+      </div>
+
+      <div className="sort">
+        <label>
+          Sort by:
+          <select onChange={(e) => setSortType(e.target.value)}>
+            <option value="">Select</option>
+            <option value="name">Name</option>
+            <option value="weight">Weight</option>
+          </select>
+        </label>
+      </div>
+    </div>
+  );
+};
+
+export default FilterSort;
\ No newline at end of file
diff --git a/src/components/Hogtile.js b/src/components/Hogtile.js
new file mode 100644
index 00000000..5eac90b1
--- /dev/null
+++ b/src/components/Hogtile.js
@@ -0,0 +1,44 @@
+import React, { useState } from "react";
+
+function HogTile({ hog, hideHog }) {
+  const [showDetails, setShowDetails] = useState(false);
+
+  const toggleDetails = () => {
+    setShowDetails(!showDetails);
+  };
+
+  return (
+    <div className="ui eight wide column">
+      <div className="ui card">
+        <div className="image">
+          <img src={hog.image} alt={hog.name} />
+        </div>
+        <div className="content">
+          <h3 className="header">{hog.name}</h3>
+          <div className="meta">
+            <span className="date">Specialty: {hog.specialty}</span>
+          </div>
+          <div className="description">
+            {showDetails && (
+              <>
+                <p>Weight: {hog.weight}</p>
+                <p>Greased: {hog.greased ? "Yes" : "No"}</p>
+                <p>Highest Medal Achieved: {hog["highest medal achieved"]}</p>
+              </>
+            )}
+          </div>
+        </div>
+        <div className="extra content">
+          <button className="ui button" onClick={toggleDetails}>
+            {showDetails ? "Hide Details" : "Show Details"}
+          </button>
+          <button className="ui button red" onClick={() => hideHog(hog.name)}>
+            Hide Hog
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default HogTile;
diff --git a/src/components/NewHogForm.js b/src/components/NewHogForm.js
new file mode 100644
index 00000000..ee21ea78
--- /dev/null
+++ b/src/components/NewHogForm.js
@@ -0,0 +1,97 @@
+import React, { useState } from "react";
+
+const NewHogForm = ({ addNewHog }) => {
+  const [name, setName] = useState("");
+  const [specialty, setSpecialty] = useState("");
+  const [greased, setGreased] = useState(false);
+  const [weight, setWeight] = useState("");
+  const [medal, setMedal] = useState("");
+  const [image, setImage] = useState("");
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    const newHog = { name, specialty, greased, weight, medal, image };
+    addNewHog(newHog);
+    // Clear the form after submission
+    setName("");
+    setSpecialty("");
+    setGreased(false);
+    setWeight("");
+    setMedal("");
+    setImage("");
+  };
+
+  return (
+    <form className="new-hog-form" onSubmit={handleSubmit}>
+      <h2>Add a New Hog</h2>
+      <div className="form-group">
+        <label htmlFor="name">Name:</label>
+        <input
+          type="text"
+          id="name"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          required
+        />
+      </div>
+
+      <div className="form-group">
+        <label htmlFor="specialty">Specialty:</label>
+        <input
+          type="text"
+          id="specialty"
+          value={specialty}
+          onChange={(e) => setSpecialty(e.target.value)}
+          required
+        />
+      </div>
+
+      <div className="form-group">
+        <label htmlFor="greased">Greased:</label>
+        <input
+          type="checkbox"
+          id="greased"
+          checked={greased}
+          onChange={(e) => setGreased(e.target.checked)}
+        />
+      </div>
+
+      <div className="form-group">
+        <label htmlFor="weight">Weight:</label>
+        <input
+          type="number"
+          id="weight"
+          value={weight}
+          onChange={(e) => setWeight(e.target.value)}
+          required
+        />
+      </div>
+
+      <div className="form-group">
+        <label htmlFor="medal">Highest Medal Achieved:</label>
+        <input
+          type="text"
+          id="medal"
+          value={medal}
+          onChange={(e) => setMedal(e.target.value)}
+          required
+        />
+      </div>
+
+      <div className="form-group">
+        <label htmlFor="image">Image URL:</label>
+        <input
+          type="text"
+          id="image"
+          value={image}
+          onChange={(e) => setImage(e.target.value)}
+          required
+        />
+      </div>
+
+      <button type="submit" className="submit-button">Add Hog</button>
+    </form>
+  );
+};
+
+export default NewHogForm;