diff --git a/compass/app/home/page.tsx b/compass/app/home/page.tsx
index 86be3ef..b50bbd6 100644
--- a/compass/app/home/page.tsx
+++ b/compass/app/home/page.tsx
@@ -2,60 +2,18 @@
 import Callout from "@/components/resource/Callout";
 import Card from "@/components/resource/Card";
 import { LandingSearchBar } from "@/components/resource/LandingSearchBar";
-import {
-    BookOpenIcon,
-    BookmarkIcon,
-    ClipboardIcon,
-} from "@heroicons/react/24/solid";
 import Image from "next/image";
 import Link from "next/link";
 
 export default function Page() {
     return (
-        <div className="min-h-screen flex flex-col">
-            {/* icon + title  */}
-            <div className="pt-16 px-8 pb-4 flex-row">
-                <div className="mb-4 flex items-center space-x-4">
-                    <Image
-                        src="/logo.png"
-                        alt="Compass Center logo."
-                        width={25}
-                        height={25}
-                    />
-                    <h1 className="font-bold text-2xl text-purple-800">
-                        Compass Center Advocate Landing Page
-                    </h1>
-                </div>
-                <Callout>
-                    Welcome! Below you will find a list of resources for the
-                    Compass Center&apos;s trained advocates. These materials
-                    serve to virtually provide a collection of advocacy,
-                    resource, and hotline manuals and information.
-                    <b>
-                        {" "}
-                        If you are an advocate looking for the contact
-                        information of a particular Compass Center employee,
-                        please directly contact your staff back-up or the person
-                        in charge of your training.
-                    </b>
-                </Callout>
-            </div>
-            <div className="p-8 flex-grow border-t border-gray-200 bg-gray-50">
-                {/* link to different pages  */}
-                <div className="grid grid-cols-3 gap-6 pb-6">
-                    <Link href="/resource">
-                        <Card icon={<BookmarkIcon />} text="Resources" />
-                    </Link>
-                    <Link href="/service">
-                        <Card icon={<ClipboardIcon />} text="Services" />
-                    </Link>
-                    <Link href="/training-manual">
-                        <Card icon={<BookOpenIcon />} text="Training Manuals" />
-                    </Link>
-                </div>
-                {/* search bar */}
-                <LandingSearchBar />
+        <div className="min-h-screen flex flex-col items-center">
+            <div className="flex justify-center p-14">
+                <h1 className="font-bold text-4xl text-purple-800">
+                    Good evening!
+                </h1>
             </div>
+            <LandingSearchBar />
         </div>
     );
 }
diff --git a/compass/components/resource/LandingSearchBar.tsx b/compass/components/resource/LandingSearchBar.tsx
index afce772..fe90fc6 100644
--- a/compass/components/resource/LandingSearchBar.tsx
+++ b/compass/components/resource/LandingSearchBar.tsx
@@ -1,5 +1,6 @@
+import { FunnelIcon as FunnelIconOutline } from "@heroicons/react/24/outline";
 import {
-    ChevronDownIcon,
+    FunnelIcon,
     MagnifyingGlassIcon,
     XMarkIcon,
 } from "@heroicons/react/24/solid";
@@ -21,39 +22,52 @@ export const LandingSearchBar: React.FC = () => {
     };
 
     return (
-        <div className="max-w mx-auto">
+        <div className="w-9/12">
             {/* searchbar  */}
-            <div className="flex items-center bg-white border border-gray-200 shadow rounded-md">
-                <div className="flex-grow">
-                    <input
-                        className="sm:text-sm text-gray-800 w-full px-6 py-3 rounded-md focus:outline-none"
-                        type="text"
-                        placeholder="Search..."
-                        value={searchTerm}
-                        onChange={handleSearchChange}
-                    />
-                </div>
-                {/* input  */}
-                {searchTerm && (
-                    <button onClick={clearSearch}>
-                        <XMarkIcon
-                            className="h-5 w-5 text-gray-500"
-                            aria-hidden="true"
-                        />
+            <div className="flex items-center bg-white border border-gray-200 shadow rounded-md px-4 py-2">
+                {/* Left side: magnifying glass icon and input */}
+                <MagnifyingGlassIcon
+                    className="h-5 w-5 text-gray-500"
+                    aria-hidden="true"
+                />
+
+                <input
+                    className="sm:text-sm flex-grow text-gray-800 w-full px-3 rounded-md focus:outline-none"
+                    type="text"
+                    placeholder="Search…"
+                    value={searchTerm}
+                    onChange={handleSearchChange}
+                />
+
+                {/* Right side icons */}
+                <div className="flex gap-1">
+                    {/* If search bar is not empty, include clear icon */}
+                    {searchTerm && (
+                        <button
+                            onClick={clearSearch}
+                            className="hover:bg-purple-100 rounded-md p-1"
+                        >
+                            <XMarkIcon
+                                className="h-5 w-5 text-gray-500"
+                                aria-hidden="true"
+                            />
+                        </button>
+                    )}
+                    {/* Filter button */}
+                    <button
+                        className={
+                            "hover:bg-purple-100 rounded-md p-1 " +
+                            (showFilterBox ? "bg-purple-100" : "")
+                        }
+                        onClick={toggleFilterBox}
+                    >
+                        {!showFilterBox && (
+                            <FunnelIconOutline className="h-5 w-5 text-gray-500" />
+                        )}
+                        {showFilterBox && (
+                            <FunnelIcon className="h-5 w-5 text-purple-800" />
+                        )}
                     </button>
-                )}
-                <div className="flex flex-row space-x-1 p-3">
-                    <span>
-                        <ChevronDownIcon
-                            className="h-5 w-5 text-gray-500"
-                            onClick={toggleFilterBox}
-                        />
-                    </span>
-                    {showFilterBox && <FilterBox className="relative top-50" />}
-                    <MagnifyingGlassIcon
-                        className="h-5 w-5 text-gray-500"
-                        aria-hidden="true"
-                    />
                 </div>
             </div>
             {/* search results, for now since it's empty this is the default screen  */}
@@ -64,10 +78,10 @@ export const LandingSearchBar: React.FC = () => {
                     width={250}
                     height={250}
                 />
-                <h2 className="font-medium text-medium text-gray-800">
-                    Need to find something? Use the links or the search bar
-                    above to get your results.
-                </h2>
+                <p className="font-medium text-medium text-gray-800">
+                    Need to find something? Use the search bar above to get your
+                    results.
+                </p>
             </div>
         </div>
     );