diff --git a/src/frontend/components/view--goal-facets.tsx b/src/frontend/components/view--goal-facets.tsx
index 2ef4d399..521b62a9 100644
--- a/src/frontend/components/view--goal-facets.tsx
+++ b/src/frontend/components/view--goal-facets.tsx
@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react';
+import { Icon } from "@trussworks/react-uswds";
 
-const ViewGoalFacets = ({handleSearch}) => {
+const ViewGoalFacets = ({handleSearch, handleClose}) => {
   const [facets, setFacets] = useState(null);
   const url = `/api/get-facets`;
 
@@ -34,6 +35,12 @@ const ViewGoalFacets = ({handleSearch}) => {
 
   return(
     <div>
+      <div className="grid-row flex-justify">
+        <h2>Filter by topic</h2>
+        <button className="close-button" onClick={() => handleClose()} aria-label="Close filters">
+          <Icon.Close size={3} aria-hidden={true} />
+        </button>
+      </div>
       {facets.data.termTopics.nodes.map(( facetKey ) => (
         <div className="usa-checkbox" key={facetKey.id}>
           <input
diff --git a/src/frontend/components/view--goal-search.tsx b/src/frontend/components/view--goal-search.tsx
index dc6b8c03..6bd038e1 100644
--- a/src/frontend/components/view--goal-search.tsx
+++ b/src/frontend/components/view--goal-search.tsx
@@ -28,6 +28,9 @@ export default function GoalsSearchView({ filters, goals, total, description }:
   const [filtersOpen, setFiltersOpen] = useState(false);
   const [offset, setOffset] = useState(offsetAmount);
 
+  const toggleFilters = () => {
+    setFiltersOpen(!filtersOpen);
+  };
   const handleSearch = useCallback(async (e: FormEvent, facets: Array<string> = []) => {
     if (e) {
       e.preventDefault();
@@ -60,100 +63,104 @@ export default function GoalsSearchView({ filters, goals, total, description }:
         <p className="font-sans-lg margin-y-0">Smart Strategy. Strong Execution.</p>
         <p className="font-sans-lg margin-top-0">Data-Driven Updates on America’s Strategic Goals.</p>
       </div>
-      <div className="grid-row flex-row flex-align-center padding-x-205 padding-y-105 bg-white search-goals--container">
-        <div className="grid-col flex-auto">
-          <button className="usa-button usa-button--unstyled text-no-underline padding-x-2 padding-y-105 text-bold text-black search-goals--filter" onClick={() => setFiltersOpen(!filtersOpen)}>
-            Filter by topic
-          </button>
-        </div>
-        <div className="grid-col flex-fill">
-          <ViewGoalSearchFulltext
-            fulltext={fulltext}
-            setFulltext={setFulltext}
-            handleSearch={handleSearch}
-          />
+      <div className={`position-relative ${filtersOpen ? "container-open" : ""}`}> 
+        <div className="grid-row flex-row flex-align-center padding-x-205 padding-y-105 bg-white search-goals--container">
+          <div className={`side-bar position-absolute ${filtersOpen ? "" : "filters-closed"}`}>
+            <ViewGoalFacets handleSearch={handleSearch} handleClose={toggleFilters} />
+          </div>
+          {!filtersOpen && (
+            <div className="grid-col flex-auto">
+              <button className="usa-button usa-button--unstyled text-no-underline padding-x-2 padding-y-105 text-bold text-black search-goals--filter" onClick={() => toggleFilters()}>
+                Filter by topic
+              </button>
+            </div>
+          )}
+          <div className="grid-col flex-fill">
+            <ViewGoalSearchFulltext
+              fulltext={fulltext}
+              setFulltext={setFulltext}
+              handleSearch={handleSearch}
+            />
+          </div>
+          <div className="grid-col flex-auto">
+            <form className="usa-form">
+              <label className="usa-sr-only" htmlFor="options">Dropdown label</label>
+              <select className="search-goals--administration padding-left-105 padding-right-3 padding-y-1 text-bold"
+                      name="options" id="options" value={administration} onChange={e => setAdministration(e.target.value)}>
+                <option value="53">Trump 47</option>
+                <option value="55">Trump 45</option>
+              </select>
+            </form>
+          </div>
         </div>
-        <div className="grid-col flex-auto">
-          <form className="usa-form">
-            <label className="usa-sr-only" htmlFor="options">Dropdown label</label>
-            <select className="search-goals--administration padding-left-105 padding-right-3 padding-y-1 text-bold"
-                    name="options" id="options" value={administration} onChange={e => setAdministration(e.target.value)}>
-              <option value="53">Trump 47</option>
-              <option value="55">Trump 45</option>
-            </select>
-          </form>
+        <div className="grid-row margin-y-3 padding-x-205 padding-y-105 overflow-hidden">
+          <ul className="add-list-reset search-goals--toggle hr-lines">
+            <li>
+              <button
+                className={"usa-button usa-button--unstyled text-no-underline padding-x-2 padding-y-105 text-bold text-black radius-pill active"}>
+                Everything
+              </button>
+            </li>
+            <li>
+              <button
+                className="usa-button usa-button--unstyled text-no-underline padding-x-2 padding-y-105 text-bold text-black radius-pill">
+                Plans
+              </button>
+            </li>
+            <li>
+              <button
+                className="usa-button usa-button--unstyled text-no-underline padding-x-2 padding-y-105 text-bold text-black radius-pill">
+                Goals
+              </button>
+            </li>
+            <li>
+              <button
+                className="usa-button usa-button--unstyled text-no-underline padding-x-2 padding-y-105 text-bold text-black radius-pill">
+                Indicators
+              </button>
+            </li>
+          </ul>
         </div>
-      </div>
-      <div className="grid-row margin-y-3 padding-x-205 padding-y-105">
-        <ul className="add-list-reset search-goals--toggle hr-lines">
-          <li>
-            <button
-              className={"usa-button usa-button--unstyled text-no-underline padding-x-2 padding-y-105 text-bold text-black radius-pill active"}>
-              Everything
-            </button>
-          </li>
-          <li>
-            <button
-              className="usa-button usa-button--unstyled text-no-underline padding-x-2 padding-y-105 text-bold text-black radius-pill">
-              Plans
-            </button>
-          </li>
-          <li>
-            <button
-              className="usa-button usa-button--unstyled text-no-underline padding-x-2 padding-y-105 text-bold text-black radius-pill">
-              Goals
-            </button>
-          </li>
-          <li>
-            <button
-              className="usa-button usa-button--unstyled text-no-underline padding-x-2 padding-y-105 text-bold text-black radius-pill">
-              Indicators
-            </button>
-          </li>
-        </ul>
-      </div>
 
-      <div className="grid-row">
-        <div className={`side-bar ${filtersOpen ? "" : "filters-closed"}`}>
-          <ViewGoalFacets handleSearch={handleSearch} />
-        </div>
-        <div className="content-area">
-          {displayGoals?.length ? (
-            <ResponsiveMasonry
-              columnsCountBreakPoints={masonryBP}
-              gutterBreakpoints={{350: "12px", 750: "16px", 900: "24px"}}
-          >
-              <Masonry>
-              {displayGoals.slice(0, offset).map((goal) => (
-                isNodeGoalProps(goal) ? (
-                  <NodeGoalCard key={goal.id} goal={goal} />
-                ) : (
-                  <NodePlanCard key={goal.id} goal={goal} />
-                )
-                ))}
-              </Masonry>
-          </ResponsiveMasonry>
+        <div className="grid-row">
+          <div className="content-area">
+            {displayGoals?.length ? (
+              <ResponsiveMasonry
+                columnsCountBreakPoints={masonryBP}
+                gutterBreakpoints={{350: "12px", 750: "16px", 900: "24px"}}
+            >
+                <Masonry>
+                {displayGoals.slice(0, offset).map((goal) => (
+                  isNodeGoalProps(goal) ? (
+                    <NodeGoalCard key={goal.id} goal={goal} />
+                  ) : (
+                    <NodePlanCard key={goal.id} goal={goal} />
+                  )
+                  ))}
+                </Masonry>
+            </ResponsiveMasonry>
 
-        ) : (
-            <div className="usa-alert usa-alert--warning usa-alert--slim">
-              <div className="usa-alert__body">
-                <p className="usa-alert__text">
-                  No matching goals.
-                </p>
+          ) : (
+              <div className="usa-alert usa-alert--warning usa-alert--slim">
+                <div className="usa-alert__body">
+                  <p className="usa-alert__text">
+                    No matching goals.
+                  </p>
+                </div>
               </div>
-            </div>
-          )}
+            )}
 
-        <div className="grid-row flex-justify-center margin-bottom-205">
-          {offset < totalResults &&
-            <Button
-              type="button"
-              onClick={() => setOffset(offset + offsetAmount)}
-            >
-              Show more
-            </Button>
-          }
-        </div>
+          <div className="grid-row flex-justify-center margin-bottom-205">
+            {offset < totalResults &&
+              <Button
+                type="button"
+                onClick={() => setOffset(offset + offsetAmount)}
+              >
+                Show more
+              </Button>
+            }
+          </div>
+          </div>
         </div>
       </div>
     </div>
diff --git a/src/frontend/styles/style.scss b/src/frontend/styles/style.scss
index 99eab310..d3958395 100644
--- a/src/frontend/styles/style.scss
+++ b/src/frontend/styles/style.scss
@@ -22,12 +22,27 @@ $goals-gray: rgba(202, 204, 216, 1);
   margin-bottom: 0 !important;
 }
 
+.container-open {
+  padding-left: 394px;
+}
+
 .side-bar {
   background-color: white;
   min-height: 100%;
   width: 394px;
   max-width: 394px;
-  padding: 24px;
+  padding: 0 24px 24px;
+  border-right: 1px solid $goals-gray;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.close-button {
+  appearance: none;
+  border: 0px;
+  cursor: pointer;
+  background: transparent;
 }
 
 .filters-closed {