diff --git a/components/Footer.tsx b/components/Footer.tsx
new file mode 100644
index 00000000..c04a451c
--- /dev/null
+++ b/components/Footer.tsx
@@ -0,0 +1,30 @@
+import Link from "next/link";
+
+export const Footer = () => {
+  return (
+    <footer className="inset-x-0 bottom-0 bg-slate-700 text-center text-vanilla-100 py-3">
+      Built with{" "}
+      <span role="img" aria-label="love">
+        ❤️
+      </span>{" "}
+      by the{" "}
+      <Link
+        href="https://socialimpact.github.com"
+        target="_blank"
+        rel="noopener noreferrer"
+        className="text-violet-100 hover:underline"
+      >
+        Github Social Impact Team
+      </Link>{" "}
+      & designed by{" "}
+      <Link
+        href="https://github.com/designbygia"
+        target="_blank"
+        rel="noopener noreferrer"
+        className="text-violet-100 hover:underline"
+      >
+        @designbygia
+      </Link>
+    </footer>
+  );
+};
diff --git a/components/GeneralFilter.tsx b/components/GeneralFilter.tsx
index 632f1ab6..efcaa872 100644
--- a/components/GeneralFilter.tsx
+++ b/components/GeneralFilter.tsx
@@ -1,3 +1,5 @@
+import { FaSearch } from "react-icons/fa";
+
 type GeneralFilterProps = {
   filter: string | number | readonly string[] | undefined;
   setFilter: (filter: string | number | readonly string[] | undefined) => void;
@@ -5,9 +7,15 @@ type GeneralFilterProps = {
 
 export const GeneralFilter = ({ filter, setFilter }: GeneralFilterProps) => {
   return (
-    <input type="text" value={filter} onChange={(e) => setFilter(e.target.value)} placeholder="Search Repositories" className="flex-1 border rounded-sm p-2 mb-4" />
+    <div className="flex border bg-vanilla-100 rounded-sm mr-4">
+      <FaSearch className="self-center mr-2 ml-2" />
+      <input
+        type="text"
+        value={filter}
+        onChange={(e) => setFilter(e.target.value)}
+        placeholder="Search Repositories"
+        className="flex-1 rounded-sm p-2"
+      />
+    </div>
   );
 };
-
-
-
diff --git a/components/GitHubOctocat.tsx b/components/GitHubOctocat.tsx
index 928f4075..56a9abf4 100644
--- a/components/GitHubOctocat.tsx
+++ b/components/GitHubOctocat.tsx
@@ -2,8 +2,8 @@ import Image from "next/image";
 
 export const GitHubOctocat = () => {
   return (
-    <div className="absolute z-10 right-80 top-60">
-    <Image src="/octocatwithbody.svg" alt="First Issue" width={384} height={384} />
+    <div className="absolute z-10 right-80 top-60 hidden sm:block">
+      <Image src="/octocatwithbody.svg" alt="First Issue" width={384} height={384} />
     </div>
   );
 };
diff --git a/components/HappyCommitsInfo.tsx b/components/HappyCommitsInfo.tsx
index ef63a0ae..2fb47746 100644
--- a/components/HappyCommitsInfo.tsx
+++ b/components/HappyCommitsInfo.tsx
@@ -6,7 +6,7 @@ type FilterProps = {
 
 export const HappyCommitsInfo = ({filter, setFilter}: FilterProps) => {
   return (
-    <div style={{ paddingLeft: "10%" }}>
+    <div className="flex" style={{ paddingLeft: "10%" }}>
       <div style={{ width: 541, height: 291, flexDirection: "column" }}>
         <div
           style={{
diff --git a/components/RepositoryList.tsx b/components/RepositoryList.tsx
index 7dbde755..c74644ef 100644
--- a/components/RepositoryList.tsx
+++ b/components/RepositoryList.tsx
@@ -57,7 +57,7 @@ export const RepositoryList = ({ repositories, filter }: RepositoryListProps) =>
 
   return (
     <main className="grow">
-      <div className="p-4 w-full">
+      <div className="p-4 w-full mb-4">
         <div className="flex justify-center">
           <div className="w-[85%] justify-start items-start inline-flex mb-4">
             <FilterInfo />
diff --git a/components/RepositoryMetadata.tsx b/components/RepositoryMetadata.tsx
index d03bd9b7..4b00bdfa 100644
--- a/components/RepositoryMetadata.tsx
+++ b/components/RepositoryMetadata.tsx
@@ -15,7 +15,7 @@ export const RepositoryMetadata = ({
   repositoryTopics
 }: RepositoryMetadataProps) => {
   return (
-    <div className="justify-start items-start gap-6 inline-flex">
+    <div className="justify-start items-start gap-6 inline-flex flex-wrap">
       <div className="justify-start items-center gap-1 flex">
         <div className="text-zinc-900 text-sm font-normal font-['Inter'] leading-[21px]">
           Issues:{" "}
@@ -37,7 +37,7 @@ export const RepositoryMetadata = ({
           </div>
         </div>
       </div>
-      <div className="justify-start items-center gap-1 flex">
+      {repositoryTopics && repositoryTopics.length > 0 &&<div className="justify-start items-center gap-1 flex">
         <div className="text-zinc-900 text-sm font-normal font-['Inter'] leading-[21px]">
           Label:
         </div>
@@ -46,7 +46,7 @@ export const RepositoryMetadata = ({
             {repositoryTopics && repositoryTopics.map(topic => topic.display).join(', ')}
           </div>
         </div>
-      </div>
+      </div>}
       <div className="justify-start items-center gap-1 flex">
         <div className="text-zinc-900 text-sm font-normal font-['Inter'] leading-[21px]">
           Last activity:
diff --git a/pages/index.tsx b/pages/index.tsx
index 6bbb2b27..39e47f9f 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -6,6 +6,7 @@ import { useAppData } from "../hooks/useAppData";
 import { Navbar } from "../components/Navbar";
 import { HeroContainer } from "../components/HeroContainer";
 import { GitHubOctocat } from "../components/GitHubOctocat";
+import { Footer } from "../components/Footer";
 
 export default function Home() {
   const { repositories } = useAppData();
@@ -20,6 +21,7 @@ export default function Home() {
       <HeroContainer filter={filter} setFilter={setFilter} />
       <GitHubOctocat />
       <RepositoryList repositories={repositories} filter={filter} />
+      <Footer />
     </>
   );
 }