diff --git a/components/BinaryCode.tsx b/components/BinaryCode.tsx
new file mode 100644
index 00000000..94d1a22b
--- /dev/null
+++ b/components/BinaryCode.tsx
@@ -0,0 +1,14 @@
+export const BinaryCode = () => {
+  return (
+    <div
+      className="opacity-20 text-vanilla-100 font-bold font-['Inter']"
+      style={{ position: "relative",paddingLeft: "70%", top: "-300px" }}
+    ><p style={{fontSize:48}}>
+      01111001010111100101
+      <br /> 110111010110111100101
+      <br /> 1101110101101111001{" "}
+      <br />
+      <br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 10111100101</p>
+    </div>
+  );
+};
diff --git a/components/GeneralFilter.tsx b/components/GeneralFilter.tsx
new file mode 100644
index 00000000..adbb6fd3
--- /dev/null
+++ b/components/GeneralFilter.tsx
@@ -0,0 +1,10 @@
+type GeneralFilterProps = {
+  filter: string | number | readonly string[] | undefined;
+  setFilter: (filter: string | number | readonly string[] | undefined) => void;
+};
+
+export const GeneralFilter = ({ filter, setFilter }: GeneralFilterProps) => {
+  return (
+    <input type="text" value={filter} onChange={(e) => setFilter(e.target.value)} placeholder="Search Repositories" className="flex-1 mx-2 border rounded-sm p-2 mb-4" />
+  );
+};
diff --git a/components/HappyCommitsInfo.tsx b/components/HappyCommitsInfo.tsx
index 5fc2c119..bbabec73 100644
--- a/components/HappyCommitsInfo.tsx
+++ b/components/HappyCommitsInfo.tsx
@@ -1,6 +1,6 @@
 export const HappyCommitsInfo = () => {
   return (
-    <div style={{ paddingLeft: "10%", paddingBottom: "3%" }}>
+    <div style={{ paddingLeft: "10%" }}>
       <div style={{ width: 541, height: 291, flexDirection: "column" }}>
         <div
           style={{
diff --git a/components/HeroContainer.tsx b/components/HeroContainer.tsx
index 2932c503..7cbebb4d 100644
--- a/components/HeroContainer.tsx
+++ b/components/HeroContainer.tsx
@@ -1,5 +1,6 @@
 import { GitHubIcon } from "./GitHubIcon";
 import { HappyCommitsInfo } from "./HappyCommitsInfo";
+import { BinaryCode } from "./BinaryCode";
 
 export const HeroContainer = () => {
   return (
@@ -7,11 +8,13 @@ export const HeroContainer = () => {
       <div
         style={{
           background:
-            "linear-gradient(278deg, #26C6D0 10%, #4F5BE3 40%, #604FDD 53%, #4B449A 77%, #3A3A62 98%)"
+            "linear-gradient(278deg, #26C6D0 10%, #4F5BE3 40%, #604FDD 53%, #4B449A 77%, #3A3A62 98%)",
+            overflowX: "hidden", height: 520, overflow: "hidden"
         }}
       >
         <GitHubIcon />
         <HappyCommitsInfo />
+        <BinaryCode />
       </div>
     </>
   );
diff --git a/components/LanguageFilter.tsx b/components/LanguageFilter.tsx
new file mode 100644
index 00000000..0a00d208
--- /dev/null
+++ b/components/LanguageFilter.tsx
@@ -0,0 +1,15 @@
+import Select from "react-select";
+
+type LanguageFilterProps = {
+  setSelectedLanguages: (languages: string[]) => void;
+  languageOptions: { value: string; label: string }[];
+};
+
+export const LanguageFilter = ({ setSelectedLanguages, languageOptions }: LanguageFilterProps) => {
+  return (
+    <>
+    <label className="p-2">Filter by Language</label>
+    <Select isMulti closeMenuOnSelect={false} className="flex-1 mx-2 rounded-sm p-2 mb-4" onChange={(selectedOptions) => setSelectedLanguages(selectedOptions.map((option) => option.value))} options={languageOptions} classNamePrefix="select" />
+    </>
+  );
+};
diff --git a/components/RepositoryList.tsx b/components/RepositoryList.tsx
index 1808fdf2..20ce93e2 100644
--- a/components/RepositoryList.tsx
+++ b/components/RepositoryList.tsx
@@ -2,40 +2,20 @@ import { faCircleNotch } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React, { useState } from "react";
 import InfiniteScroll from "react-infinite-scroll-component";
-import Select from "react-select";
-
+import { IndexedTopics } from "../topics";
 import { Repository } from "../types";
 import { RepositoryItem } from "./RepositoryItem";
+import { GeneralFilter } from "./GeneralFilter";
+import { LanguageFilter } from "./LanguageFilter";
+import { SDGFilter } from "./SDGFilter";
 
 type RepositoryListProps = {
   repositories: Repository[];
 };
 
-const indexedTopics: { [key: string]: string } = {
-  "sdg-1": "SDG-1 - No Poverty",
-  "sdg-2": "SDG-2 - Zero Hunger",
-  "sdg-3": "SDG-3 - Good Health And Well-Being",
-  "sdg-4": "SDG-4 - Quality Education",
-  "sdg-5": "SDG-5 - Gender Equality",
-  "sdg-6": "SDG-6 - Clean Water and Sanitation",
-  "sdg-7": "SDG-7 - Affordable and Clean Energy",
-  "sdg-8": "SDG-8 - Decent Work and Economic Growth",
-  "sdg-9": "SDG-9 - Industry, Innovation, and Infrastructure",
-  "sdg-10": "SDG-10 - Reduced Inequalities",
-  "sdg-11": "SDG-11 - Sustainable Cities and Communities",
-  "sdg-12": "SDG-12 - Responsible Consumption and Production",
-  "sdg-13": "SDG-13 - Climate Action",
-  "sdg-14": "SDG-14 - Life Below Water",
-  "sdg-15": "SDG-15 - Life on Land",
-  "sdg-16": "SDG-16 - Peace, Justice, and Strong Institutions",
-  "sdg-17": "SDG-17 - Partnerships for the Goals"
-};
-
 const Loader = () => (
-  <div className="p-4 w-full">
-    <div className="flex items-center justify-center">
-      <FontAwesomeIcon icon={faCircleNotch} className="fa-spin" />
-    </div>
+  <div className="p-4 w-full flex items-center justify-center">
+    <FontAwesomeIcon icon={faCircleNotch} className="fa-spin" />
   </div>
 );
 
@@ -46,89 +26,33 @@ export const RepositoryList = ({ repositories }: RepositoryListProps) => {
   const [selectedLanguages, setSelectedLanguages] = useState<string[]>([]);
   const [selectedTopics, setSelectedTopics] = useState<string[]>([]);
 
-  console.log(selectedTopics);
   const filteredRepositories = repositories.filter((repository) => {
-    const languageFilter =
-      selectedLanguages.length === 0 || selectedLanguages.includes(repository.language.display);
-
-    const topicFilter =
-      selectedTopics.length === 0 ||
-      selectedTopics.some((value) => repository.topics?.some((topic) => topic.display === value));
-
-    const nameFilter = Object.values(repository).some((value) => {
-      if (value === null) {
-        return false;
-      }
-      return value.toString().toLowerCase().includes(filter.toLowerCase());
-    });
-
+    const languageFilter = selectedLanguages.length === 0 || selectedLanguages.includes(repository.language.display);
+    const topicFilter = selectedTopics.length === 0 || repository.topics?.some((topic) => selectedTopics.includes(topic.display));
+    const nameFilter = Object.values(repository).some((value) => value && value.toString().toLowerCase().includes(filter.toLowerCase()));
     return languageFilter && nameFilter && topicFilter;
   });
 
-  const allLanguages = repositories.map((repository) => repository.language.display);
-  const uniqueLanguages = allLanguages.filter(
-    (language, index) => allLanguages.indexOf(language) === index
-  );
-  const languageOptions = uniqueLanguages.map((language) => ({
-    value: language,
-    label: language
-  }));
+  const uniqueLanguages = [...new Set(repositories.map((repository) => repository.language.display))];
+  const languageOptions = uniqueLanguages.map((language) => ({ value: language, label: language }));
+
+  const uniqueTopics = [...new Set(repositories.flatMap((repository) => repository.topics?.map((topic) => topic.display) ?? []))].sort((a, b) => parseInt(a.slice(4)) - parseInt(b.slice(4)));
+  const topicOptions = uniqueTopics.map((topic) => ({ value: topic, label: IndexedTopics[topic] }));
 
-  const topicList = repositories.map((repository) => repository.topics);
-  const allTopics = topicList.map((repos) => repos?.map((topic) => topic.display)) ?? [];
-  const uniqueTopics = allTopics
-    .filter((topic, index) => allTopics.indexOf(topic) === index)
-    .flat();
-  const topicOptions = uniqueTopics.map((topic) => ({
-    value: topic,
-    label: indexedTopics[topic ?? ""]
-  }));
+  const loadMoreItems = () => setItems(items + itemsPerScroll);
+  const hasMoreItems = items < filteredRepositories.length;
 
   return (
     <main className="grow">
       <div className="p-4 w-full">
         <div className="flex flex-wrap">
-          <input
-            type="text"
-            value={filter}
-            onChange={(e) => setFilter(e.target.value)}
-            placeholder="Search Repositories"
-            className="flex-1 mx-2 border rounded-sm p-2 mb-4"
-          />
-          <label className="p-2">Filter by Language</label>
-          <Select
-            isMulti
-            closeMenuOnSelect={false}
-            className="flex-1 mx-2 border rounded-sm p-2 mb-4"
-            onChange={(selectedOptions) => {
-              setSelectedLanguages(selectedOptions.map((option) => option.value));
-            }}
-            options={languageOptions}
-            classNamePrefix="select"
-          />
-          <label className="p-2">Sustainable Development Goal (SDG)</label>
-          <Select
-            isMulti
-            className="flex-1 mx-2 border rounded-sm p-2 mb-4"
-            options={topicOptions}
-            getOptionLabel={(option) => option.label}
-            getOptionValue={(option) => option.value ?? ""}
-            onChange={(selectedOptions) => {
-              setSelectedTopics(selectedOptions.map((option) => option.value ?? ""));
-            }}
-          />
+          <GeneralFilter filter={filter} setFilter={setFilter} />
+          <LanguageFilter setSelectedLanguages={setSelectedLanguages} languageOptions={languageOptions} />
+          <SDGFilter setSelectedTopics={setSelectedTopics} topicOptions={topicOptions} />
         </div>
 
-        <InfiniteScroll
-          dataLength={items}
-          next={() => setItems(items + itemsPerScroll)}
-          hasMore={items < filteredRepositories.length}
-          loader={<Loader />}
-        >
-          {filteredRepositories.slice(0, items).map((repository) => {
-            const key = `${repository.id}_${new Date().getTime()}_${Math.random()}`;
-            return <RepositoryItem key={key} repository={repository} />;
-          })}
+        <InfiniteScroll dataLength={items} next={loadMoreItems} hasMore={hasMoreItems} loader={<Loader />}>
+          {filteredRepositories.slice(0, items).map((repository) => <RepositoryItem key={repository.id} repository={repository} />)}
         </InfiniteScroll>
       </div>
     </main>
diff --git a/components/SDGFilter.tsx b/components/SDGFilter.tsx
new file mode 100644
index 00000000..064006c9
--- /dev/null
+++ b/components/SDGFilter.tsx
@@ -0,0 +1,24 @@
+import Select from "react-select";
+
+type SDGFilterProps = {
+  setSelectedTopics: (topics: string[]) => void;
+  topicOptions: { value: string; label: string }[];
+};
+
+export const SDGFilter = ({ setSelectedTopics, topicOptions }: SDGFilterProps) => {
+  return (
+    <>
+      <label className="p-2">Sustainable Development Goal (SDG)</label>
+      <Select
+        isMulti
+        className="flex-1 mx-2 rounded-sm p-2 mb-4"
+        options={topicOptions}
+        getOptionLabel={(option) => option.label}
+        getOptionValue={(option) => option.value ?? ""}
+        onChange={(selectedOptions) =>
+          setSelectedTopics(selectedOptions.map((option) => option.value ?? ""))
+        }
+      />
+    </>
+  );
+};
diff --git a/components/ShowMoreTopicsButton.tsx b/components/ShowMoreTopicsButton.tsx
deleted file mode 100644
index e3d0233b..00000000
--- a/components/ShowMoreTopicsButton.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-type ShowMoreTopicsButtonProps = {
-  hasMoreTopics: boolean;
-  onClick: () => void;
-};
-
-export const ShowMoreTopicsButton = ({ hasMoreTopics, onClick }: ShowMoreTopicsButtonProps) => {
-  return (
-    <div
-      className="group mx-1 border px-2 py-1 inline-block rounded-sm my-1 text-sm active-pill cursor-pointer hover:bg-light_juniper hover:text-ink-400"
-      onClick={onClick}
-    >
-      Show {hasMoreTopics ? "more..." : "less"}
-    </div>
-  );
-};
diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx
deleted file mode 100644
index b1947ab9..00000000
--- a/components/Sidebar.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { useRouter } from "next/router";
-import React from "react";
-
-import { useAppData } from "../hooks/useAppData";
-import { AddYourProjectLinkButton } from "./AddYourProjectLinkButton";
-import { SidebarAboutSection } from "./SidebarAboutSection";
-import { SidebarLanguagePicker } from "./SidebarLanguagePicker";
-import { SidebarTopicPicker } from "./SidebarTopicPicker";
-
-const DEFAULT_TOPICS_LIMIT = 15;
-
-export const Sidebar = () => {
-  const router = useRouter();
-  const { languages, topics } = useAppData();
-  const [showMoreTopics, setShowMoreTopics] = React.useState(false);
-  const { tag: activeTagId } = router.query;
-
-  // NOTE: This is used to highlight the active language or topic
-  const pageName = router.pathname.split("/")[1];
-
-  const updateShowMoreTopics = () => {
-    if (!showMoreTopics) {
-      window.scrollTo(0, 0);
-    }
-    setShowMoreTopics(!showMoreTopics);
-  };
-
-  return (
-    <section className="font-sans pt-6 px-6 text-vanilla-300 flex-none w-full md:max-w-sm">
-      <SidebarAboutSection />
-      <SidebarLanguagePicker languages={languages} activeTagId={activeTagId} pageName={pageName} />
-      <SidebarTopicPicker
-        activeTagId={activeTagId}
-        handleShowMoreTopics={updateShowMoreTopics}
-        pageName={pageName}
-        showMoreTopics={showMoreTopics}
-        topics={topics}
-        topicsLimit={DEFAULT_TOPICS_LIMIT}
-      />
-      <AddYourProjectLinkButton />
-    </section>
-  );
-};
diff --git a/components/SidebarAboutSection.tsx b/components/SidebarAboutSection.tsx
deleted file mode 100644
index 048b632c..00000000
--- a/components/SidebarAboutSection.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { faHeart } from "@fortawesome/free-regular-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
-const ByLine = () => (
-  <div className="text-sm pt-6">
-    <a
-      className="flex flex-row items-center"
-      target="_blank"
-      rel="noopener noreferrer"
-      href="https://socialimpact.github.com"
-    >
-      <FontAwesomeIcon icon={faHeart} />
-      <span className="ml-2">
-        A{" "}
-        <span className="inline hover:underline text-juniper" title="Visit GitHub profile">
-          @github Social Impact
-        </span>{" "}
-        initiative
-      </span>
-    </a>
-  </div>
-);
-
-export const SidebarAboutSection = () => {
-  return (
-    <div>
-      <h3 className="text-sm font-bold uppercase tracking-wider mb-2 text-slate">About</h3>
-      <p className="text-sm">
-        Happy Commits curates social impact and civic tech open source projects that are looking for
-        contributors and lists issues on thost projects that are tagged with Help Wanted or Good First Issue.
-      </p>
-      <ByLine />
-    </div>
-  );
-};
diff --git a/components/SidebarItemHeader.tsx b/components/SidebarItemHeader.tsx
deleted file mode 100644
index b2e64f99..00000000
--- a/components/SidebarItemHeader.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-type SidebarItemHeaderProps = {
-  text: string;
-};
-
-export const SidebarItemHeader = ({ text }: SidebarItemHeaderProps) => (
-  <h3 className="text-sm font-bold uppercase tracking-wider mb-2 text-slate">{text}</h3>
-);
diff --git a/components/SidebarLanguagePicker.tsx b/components/SidebarLanguagePicker.tsx
deleted file mode 100644
index 086d25ea..00000000
--- a/components/SidebarLanguagePicker.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { CountableTag } from "../types";
-import { SidebarItemHeader } from "./SidebarItemHeader";
-import { SidebarPickerItemLink } from "./SidebarPickerItemLink";
-
-type SidebarLanguagePickerProps = {
-  activeTagId: string | string[] | undefined;
-  languages: CountableTag[];
-  pageName: string;
-};
-
-export const SidebarLanguagePicker = ({
-  activeTagId,
-  languages,
-  pageName
-}: SidebarLanguagePickerProps) => {
-  return (
-    <div className="pt-6">
-      <SidebarItemHeader text="Browse by Language" />
-      <div>
-        {languages.map((language) => {
-          return (
-            <SidebarPickerItemLink
-              className={`group mx-1 border px-2 py-1 inline-block rounded-sm my-1 text-sm ${
-                pageName == "language" && language.id === activeTagId
-                  ? "active-pill"
-                  : "border-slate hover:text-juniper hover:border-juniper"
-              }`}
-              href={`/language/${language.id}`}
-              key={language.id}
-              text={language.display}
-              totalOccurrences={language.count}
-            />
-          );
-        })}
-      </div>
-    </div>
-  );
-};
diff --git a/components/SidebarPickerItemLink.tsx b/components/SidebarPickerItemLink.tsx
deleted file mode 100644
index 06163ecb..00000000
--- a/components/SidebarPickerItemLink.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import Link from "next/link";
-
-import { Tag } from "../types";
-
-type SidebarPickerItemLinkProps = {
-  className: string;
-  totalOccurrences: number;
-  href: string;
-  text: Tag["display"];
-};
-
-export const SidebarPickerItemLink = ({
-  className,
-  totalOccurrences,
-  href,
-  text
-}: SidebarPickerItemLinkProps) => {
-  return (
-    <Link href={href} className={className}>
-      {text}
-      <span className={`text-vanilla-400 group-hover:text-juniper`}>
-        &nbsp;&times;{totalOccurrences}
-      </span>
-    </Link>
-  );
-};
diff --git a/components/SidebarRepositorySortPicker.tsx b/components/SidebarRepositorySortPicker.tsx
deleted file mode 100644
index 84612b86..00000000
--- a/components/SidebarRepositorySortPicker.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { RepositorySortOrder } from "../types";
-import { SidebarItemHeader } from "./SidebarItemHeader";
-
-type SidebarRepositorySortPickerProps = {
-  activeSort: RepositorySortOrder;
-  sortOptions: RepositorySortOrder[];
-  onSortOrderSelect: (sortOrder: RepositorySortOrder) => void;
-};
-
-export const SidebarRepositorySortPicker = ({
-  activeSort,
-  sortOptions,
-  onSortOrderSelect
-}: SidebarRepositorySortPickerProps) => {
-  return (
-    <div className="pt-6">
-      <SidebarItemHeader text="Sort Repositories" />
-      <div>
-        {sortOptions.map((sortOption) => {
-          return (
-            <button
-              key={sortOption}
-              onClick={() => onSortOrderSelect(sortOption)}
-              className={`group mx-1 border px-2 py-1 inline-block rounded-sm my-1 text-sm ${
-                activeSort === sortOption
-                  ? "active-pill"
-                  : "border-slate hover:text-juniper hover:border-juniper"
-              }`}
-            >
-              {sortOption}
-            </button>
-          );
-        })}
-      </div>
-    </div>
-  );
-};
diff --git a/components/SidebarTopicPicker.tsx b/components/SidebarTopicPicker.tsx
deleted file mode 100644
index 335707a9..00000000
--- a/components/SidebarTopicPicker.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { CountableTag } from "../types";
-import { ShowMoreTopicsButton } from "./ShowMoreTopicsButton";
-import { SidebarItemHeader } from "./SidebarItemHeader";
-import { SidebarPickerItemLink } from "./SidebarPickerItemLink";
-
-type SidebarTopicPickerProps = {
-  activeTagId: string | string[] | undefined;
-  handleShowMoreTopics: () => void;
-  pageName: string;
-  showMoreTopics: boolean;
-  topics: CountableTag[];
-  topicsLimit: number;
-};
-
-export const SidebarTopicPicker = ({
-  activeTagId,
-  handleShowMoreTopics,
-  pageName,
-  showMoreTopics,
-  topics,
-  topicsLimit
-}: SidebarTopicPickerProps) => {
-  const hasMoreTopics = topics.length > topicsLimit;
-  const sliceEndNum = showMoreTopics ? topics.length : topicsLimit;
-
-  return (
-    <div className="pt-6">
-      <SidebarItemHeader text="Browse by topic" />
-      <div>
-        {topics.slice(0, sliceEndNum).map((topic) => {
-          return (
-            <SidebarPickerItemLink
-              className={`group mx-1 border px-2 py-1 inline-block rounded-sm my-1 text-sm ${
-                pageName == "topic" && topic.id === activeTagId
-                  ? "active-pill"
-                  : "border-slate hover:text-juniper hover:border-juniper"
-              }`}
-              href={`/topic/${topic.id}`}
-              key={topic.id}
-              text={topic.display}
-              totalOccurrences={topic.count}
-            />
-          );
-        })}
-        {hasMoreTopics && (
-          <ShowMoreTopicsButton hasMoreTopics={!showMoreTopics} onClick={handleShowMoreTopics} />
-        )}
-      </div>
-    </div>
-  );
-};
diff --git a/tailwind.config.js b/tailwind.config.js
index 43d65470..993b30ab 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -39,6 +39,9 @@ module.exports = {
       },
       slate: {
         700: '#334155'
+      },
+      neutral: {
+        200: '#E5E5E5'
       }
     },
     borderRadius: {
diff --git a/topics.ts b/topics.ts
new file mode 100644
index 00000000..056cc713
--- /dev/null
+++ b/topics.ts
@@ -0,0 +1,21 @@
+type IndexedTopics = Record<string, string>;
+
+export const IndexedTopics: IndexedTopics = {
+  "sdg-1": "No Poverty",
+  "sdg-2": "Zero Hunger",
+  "sdg-3": "Good Health and Well-being",
+  "sdg-4": "Quality Education",
+  "sdg-5": "Gender Equality",
+  "sdg-6": "Clean Water and Sanitation",
+  "sdg-7": "Affordable and Clean Energy",
+  "sdg-8": "Decent Work and Economic Growth",
+  "sdg-9": "Industry, Innovation and Infrastructure",
+  "sdg-10": "Reduced Inequalities",
+  "sdg-11": "Sustainable Cities and Communities",
+  "sdg-12": "Responsible Consumption and Production",
+  "sdg-13": "Climate Action",
+  "sdg-14": "Life Below Water",
+  "sdg-15": "Life On Land",
+  "sdg-16": "Peace, Justice and Strong Institutions",
+  "sdg-17": "Partnerships for the Goals",
+};