diff --git a/components/dashboard/src/admin/BlockedRepositories.tsx b/components/dashboard/src/admin/BlockedRepositories.tsx
index 2b4e87a4628548..c62fe6fc08df61 100644
--- a/components/dashboard/src/admin/BlockedRepositories.tsx
+++ b/components/dashboard/src/admin/BlockedRepositories.tsx
@@ -16,6 +16,7 @@ import { ItemFieldContextMenu } from "../components/ItemsList";
 import { ContextMenuEntry } from "../components/ContextMenu";
 import Alert from "../components/Alert";
 import { SpinnerLoader } from "../components/Loader";
+import searchIcon from "../icons/search.svg";
 
 export function BlockedRepositories() {
     return (
@@ -116,24 +117,23 @@ export function BlockedRepositoriesList(props: Props) {
                         onClose={() => setDeleteModalVisible(false)}
                     />
                 )}
-                <div className="pt-8 flex">
+                <div className="pb-3 mt-3 flex">
                     <div className="flex justify-between w-full">
-                        <div className="flex">
-                            <div className="py-4">
-                                {searching ? (
+                        <div className="flex relative h-10 my-auto">
+                            {searching ? (
+                                <span className="filter-grayscale absolute top-3 left-3">
                                     <SpinnerLoader small={true} />
-                                ) : (
-                                    <svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                        <path
-                                            fillRule="evenodd"
-                                            clipRule="evenodd"
-                                            d="M6 2a4 4 0 100 8 4 4 0 000-8zM0 6a6 6 0 1110.89 3.477l4.817 4.816a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 010 6z"
-                                            fill="#A8A29E"
-                                        />
-                                    </svg>
-                                )}
-                            </div>
+                                </span>
+                            ) : (
+                                <img
+                                    src={searchIcon}
+                                    title="Search"
+                                    className="filter-grayscale absolute top-3 left-3"
+                                    alt="search icon"
+                                />
+                            )}
                             <input
+                                className="w-64 pl-9 border-0"
                                 type="search"
                                 placeholder="Search by URL RegEx"
                                 onKeyDown={(ke) => ke.key === "Enter" && search()}
diff --git a/components/dashboard/src/admin/ProjectsSearch.tsx b/components/dashboard/src/admin/ProjectsSearch.tsx
index 062b5523116fa2..55b6810504ceef 100644
--- a/components/dashboard/src/admin/ProjectsSearch.tsx
+++ b/components/dashboard/src/admin/ProjectsSearch.tsx
@@ -15,6 +15,7 @@ import { AdminGetListResult, Project } from "@gitpod/gitpod-protocol";
 import { AdminPageHeader } from "./AdminPageHeader";
 import Pagination from "../Pagination/Pagination";
 import { SpinnerLoader } from "../components/Loader";
+import searchIcon from "../icons/search.svg";
 
 export default function ProjectsSearchPage() {
     return (
@@ -94,24 +95,23 @@ export function ProjectsSearch() {
     return (
         <>
             <div className="app-container">
-                <div className="pt-8 flex">
+                <div className="pt-3 mb-3 flex">
                     <div className="flex justify-between w-full">
-                        <div className="flex">
-                            <div className="py-4">
-                                {searching ? (
+                        <div className="flex relative h-10 my-auto">
+                            {searching ? (
+                                <span className="filter-grayscale absolute top-3 left-3">
                                     <SpinnerLoader small={true} />
-                                ) : (
-                                    <svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                        <path
-                                            fillRule="evenodd"
-                                            clipRule="evenodd"
-                                            d="M6 2a4 4 0 100 8 4 4 0 000-8zM0 6a6 6 0 1110.89 3.477l4.817 4.816a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 010 6z"
-                                            fill="#A8A29E"
-                                        />
-                                    </svg>
-                                )}
-                            </div>
+                                </span>
+                            ) : (
+                                <img
+                                    src={searchIcon}
+                                    title="Search"
+                                    className="filter-grayscale absolute top-3 left-3"
+                                    alt="search icon"
+                                />
+                            )}
                             <input
+                                className="w-64 pl-9 border-0"
                                 type="search"
                                 placeholder="Search Projects"
                                 onKeyDown={(k) => k.key === "Enter" && search()}
@@ -120,9 +120,6 @@ export function ProjectsSearch() {
                                 }}
                             />
                         </div>
-                        <button disabled={searching} onClick={() => search()}>
-                            Search
-                        </button>
                     </div>
                 </div>
                 <div className="flex flex-col space-y-2">
diff --git a/components/dashboard/src/admin/TeamsSearch.tsx b/components/dashboard/src/admin/TeamsSearch.tsx
index c813f18ad7d44a..ff57e87d5278a0 100644
--- a/components/dashboard/src/admin/TeamsSearch.tsx
+++ b/components/dashboard/src/admin/TeamsSearch.tsx
@@ -16,6 +16,7 @@ import Label from "./Label";
 import { AdminPageHeader } from "./AdminPageHeader";
 import Pagination from "../Pagination/Pagination";
 import { SpinnerLoader } from "../components/Loader";
+import searchIcon from "../icons/search.svg";
 
 export default function TeamsSearchPage() {
     return (
@@ -75,24 +76,23 @@ export function TeamsSearch() {
     };
     return (
         <>
-            <div className="pt-8 flex">
+            <div className="mb-3 mt-3 flex">
                 <div className="flex justify-between w-full">
-                    <div className="flex">
-                        <div className="py-4">
-                            {searching ? (
+                    <div className="flex relative h-10 my-auto">
+                        {searching ? (
+                            <span className="filter-grayscale absolute top-3 left-3">
                                 <SpinnerLoader small={true} />
-                            ) : (
-                                <svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                    <path
-                                        fillRule="evenodd"
-                                        clipRule="evenodd"
-                                        d="M6 2a4 4 0 100 8 4 4 0 000-8zM0 6a6 6 0 1110.89 3.477l4.817 4.816a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 010 6z"
-                                        fill="#A8A29E"
-                                    />
-                                </svg>
-                            )}
-                        </div>
+                            </span>
+                        ) : (
+                            <img
+                                src={searchIcon}
+                                title="Search"
+                                className="filter-grayscale absolute top-3 left-3"
+                                alt="search icon"
+                            />
+                        )}
                         <input
+                            className="w-64 pl-9 border-0"
                             type="search"
                             placeholder="Search Organizations"
                             onKeyDown={(k) => k.key === "Enter" && search()}
@@ -101,9 +101,6 @@ export function TeamsSearch() {
                             }}
                         />
                     </div>
-                    <button disabled={searching} onClick={() => search()}>
-                        Search
-                    </button>
                 </div>
             </div>
             <div className="flex flex-col space-y-2">
diff --git a/components/dashboard/src/admin/UserSearch.tsx b/components/dashboard/src/admin/UserSearch.tsx
index 36325f085f1f27..52796d18c691ec 100644
--- a/components/dashboard/src/admin/UserSearch.tsx
+++ b/components/dashboard/src/admin/UserSearch.tsx
@@ -14,6 +14,7 @@ import Pagination from "../Pagination/Pagination";
 import { getGitpodService } from "../service/service";
 import { AdminPageHeader } from "./AdminPageHeader";
 import UserDetail from "./UserDetail";
+import searchIcon from "../icons/search.svg";
 
 export default function UserSearch() {
     const location = useLocation();
@@ -64,24 +65,23 @@ export default function UserSearch() {
     return (
         <AdminPageHeader title="Admin" subtitle="Configure and manage instance settings.">
             <div className="app-container">
-                <div className="pt-8 flex">
+                <div className="mb-3 mt-3 flex">
                     <div className="flex justify-between w-full">
-                        <div className="flex">
-                            <div className="py-4">
-                                {searching ? (
+                        <div className="flex relative h-10 my-auto">
+                            {searching ? (
+                                <span className="filter-grayscale absolute top-3 left-3">
                                     <SpinnerLoader small={true} />
-                                ) : (
-                                    <svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                        <path
-                                            fillRule="evenodd"
-                                            clipRule="evenodd"
-                                            d="M6 2a4 4 0 100 8 4 4 0 000-8zM0 6a6 6 0 1110.89 3.477l4.817 4.816a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 010 6z"
-                                            fill="#A8A29E"
-                                        />
-                                    </svg>
-                                )}
-                            </div>
+                                </span>
+                            ) : (
+                                <img
+                                    src={searchIcon}
+                                    title="Search"
+                                    className="filter-grayscale absolute top-3 left-3"
+                                    alt="search icon"
+                                />
+                            )}
                             <input
+                                className="w-64 pl-9 border-0"
                                 type="search"
                                 placeholder="Search Users"
                                 onKeyDown={(ke) => ke.key === "Enter" && search()}
@@ -90,9 +90,6 @@ export default function UserSearch() {
                                 }}
                             />
                         </div>
-                        <button disabled={searching} onClick={() => search()}>
-                            Search
-                        </button>
                     </div>
                 </div>
                 <div className="flex flex-col space-y-2">
diff --git a/components/dashboard/src/admin/WorkspacesSearch.tsx b/components/dashboard/src/admin/WorkspacesSearch.tsx
index a4e4a828822796..579a3e7d673e04 100644
--- a/components/dashboard/src/admin/WorkspacesSearch.tsx
+++ b/components/dashboard/src/admin/WorkspacesSearch.tsx
@@ -28,6 +28,7 @@ import Alert from "../components/Alert";
 import { isGitpodIo } from "../utils";
 import { SpinnerLoader } from "../components/Loader";
 import { WorkspaceStatusIndicator } from "../workspaces/WorkspaceStatusIndicator";
+import searchIcon from "../icons/search.svg";
 
 interface Props {
     user?: User;
@@ -113,24 +114,23 @@ export function WorkspaceSearch(props: Props) {
     return (
         <>
             <div className="app-container">
-                <div className="pt-8 flex">
+                <div className="mt-3 mb-3 flex">
                     <div className="flex justify-between w-full">
-                        <div className="flex">
-                            <div className="py-4">
-                                {searching ? (
+                        <div className="flex relative h-10 my-auto">
+                            {searching ? (
+                                <span className="filter-grayscale absolute top-3 left-3">
                                     <SpinnerLoader small={true} />
-                                ) : (
-                                    <svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                        <path
-                                            fillRule="evenodd"
-                                            clipRule="evenodd"
-                                            d="M6 2a4 4 0 100 8 4 4 0 000-8zM0 6a6 6 0 1110.89 3.477l4.817 4.816a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 010 6z"
-                                            fill="#A8A29E"
-                                        />
-                                    </svg>
-                                )}
-                            </div>
+                                </span>
+                            ) : (
+                                <img
+                                    src={searchIcon}
+                                    title="Search"
+                                    className="filter-grayscale absolute top-3 left-3"
+                                    alt="search icon"
+                                />
+                            )}
                             <input
+                                className="w-64 pl-9 border-0"
                                 type="search"
                                 placeholder="Search Workspace IDs"
                                 onKeyDown={(ke) => ke.key === "Enter" && search()}
@@ -139,9 +139,6 @@ export function WorkspaceSearch(props: Props) {
                                 }}
                             />
                         </div>
-                        <button disabled={searching} onClick={() => search()}>
-                            Search
-                        </button>
                     </div>
                 </div>
                 <Alert type={"info"} closable={false} showIcon={true} className="flex rounded p-2 mb-2 w-full">
diff --git a/components/dashboard/src/index.css b/components/dashboard/src/index.css
index 259461f84c0b3d..0a738e04c14a73 100644
--- a/components/dashboard/src/index.css
+++ b/components/dashboard/src/index.css
@@ -84,10 +84,9 @@
     input[type="text"],
     input[type="tel"],
     input[type="number"],
-    input[type="search"],
     input[type="password"],
     select {
-        @apply block w-56 text-gray-600 dark:text-gray-400 bg-white dark:bg-gray-800 rounded-md border border-gray-300 dark:border-gray-500 focus:border-gray-400 dark:focus:border-gray-400 focus:ring-0;
+        @apply block w-56 text-gray-600 dark:text-gray-400 dark:bg-gray-800 bg-white rounded-md border border-gray-300 dark:border-gray-500 focus:border-gray-400 dark:focus:border-gray-400 focus:ring-0;
     }
     textarea::placeholder,
     input[type="text"]::placeholder,
@@ -112,8 +111,10 @@
     input[type="radio"] {
         @apply border border-gray-300 focus:border-gray-400 focus:bg-white focus:ring-0;
     }
+
+    /* Search */
     input[type="search"] {
-        @apply border-0 dark:bg-transparent;
+        @apply border-0 dark:bg-gray-800 bg-gray-50 text-gray-600 dark:text-gray-400 rounded-md focus:border-gray-400 dark:focus:border-gray-400 focus:outline-none focus:ring ring-0 focus:ring-blue-400 dark:focus:ring-blue-500 transition ease-in-out;
     }
     input[type="checkbox"] {
         @apply disabled:opacity-50;
diff --git a/components/dashboard/src/projects/NewProject.tsx b/components/dashboard/src/projects/NewProject.tsx
index 199ed5519f3322..d716aea7adadf7 100644
--- a/components/dashboard/src/projects/NewProject.tsx
+++ b/components/dashboard/src/projects/NewProject.tsx
@@ -359,7 +359,7 @@ export default function NewProject() {
                             </div>
                         </ContextMenu>
                         {showSearchInput && (
-                            <div className="w-full relative ">
+                            <div className="w-full relative h-10 my-auto">
                                 <img
                                     src={search}
                                     title="Search"
@@ -368,7 +368,7 @@ export default function NewProject() {
                                 />
                                 <input
                                     className="w-96 pl-10 border-0"
-                                    type="text"
+                                    type="search"
                                     placeholder="Search Repositories"
                                     value={repoSearchFilter}
                                     onChange={(e) => setRepoSearchFilter(e.target.value)}
diff --git a/components/dashboard/src/projects/Projects.tsx b/components/dashboard/src/projects/Projects.tsx
index 356f7e928c5fe7..2fd34f8c5dc8d7 100644
--- a/components/dashboard/src/projects/Projects.tsx
+++ b/components/dashboard/src/projects/Projects.tsx
@@ -18,6 +18,7 @@ import { ProjectListItem } from "./ProjectListItem";
 import { SpinnerLoader } from "../components/Loader";
 import { useListProjectsQuery } from "../data/projects/list-projects-query";
 import { projectsPathNew } from "./projects.routes";
+import search from "../icons/search.svg";
 
 export default function ProjectsPage() {
     const history = useHistory();
@@ -93,25 +94,18 @@ export default function ProjectsPage() {
             )}
             {(data?.projects || []).length > 0 && (
                 <div className="app-container">
-                    <div className="mt-8 pb-2 flex border-b border-gray-200 dark:border-gray-800">
-                        <div className="flex">
-                            <div className="py-4">
-                                <svg
-                                    xmlns="http://www.w3.org/2000/svg"
-                                    fill="none"
-                                    viewBox="0 0 16 16"
-                                    width="16"
-                                    height="16"
-                                >
-                                    <path
-                                        fill="#A8A29E"
-                                        d="M6 2a4 4 0 100 8 4 4 0 000-8zM0 6a6 6 0 1110.89 3.477l4.817 4.816a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 010 6z"
-                                    />
-                                </svg>
-                            </div>
+                    <div className="mt-3 pb-3 flex border-b border-gray-200 dark:border-gray-800">
+                        <div className="flex relative h-10 my-auto">
+                            <img
+                                src={search}
+                                title="Search"
+                                className="filter-grayscale absolute top-3 left-3"
+                                alt="search icon"
+                            />
                             <input
                                 type="search"
-                                placeholder="Search Projects"
+                                className="w-64 pl-9 border-0"
+                                placeholder="Filter Projects"
                                 onChange={(e) => setSearchFilter(e.target.value)}
                             />
                         </div>
diff --git a/components/dashboard/src/teams/Members.tsx b/components/dashboard/src/teams/Members.tsx
index 8b5b9fa3a5bc4a..976dea0313731d 100644
--- a/components/dashboard/src/teams/Members.tsx
+++ b/components/dashboard/src/teams/Members.tsx
@@ -19,6 +19,7 @@ import { TeamsContext, useCurrentTeam } from "./teams-context";
 import { trackEvent } from "../Analytics";
 import { publicApiTeamMembersToProtocol, publicApiTeamsToProtocol, teamsService } from "../service/public-api";
 import { TeamRole } from "@gitpod/public-api/lib/gitpod/experimental/v1/teams_pb";
+import searchIcon from "../icons/search.svg";
 
 export default function MembersPage() {
     const { user } = useContext(UserContext);
@@ -132,30 +133,23 @@ export default function MembersPage() {
         <>
             <Header title="Members" subtitle="Manage organization members." />
             <div className="app-container">
-                <div className="flex mt-8">
-                    <div className="flex">
-                        <div className="py-4">
-                            <svg
-                                xmlns="http://www.w3.org/2000/svg"
-                                fill="none"
-                                viewBox="0 0 16 16"
-                                width="16"
-                                height="16"
-                            >
-                                <path
-                                    fill="#A8A29E"
-                                    d="M6 2a4 4 0 100 8 4 4 0 000-8zM0 6a6 6 0 1110.89 3.477l4.817 4.816a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 010 6z"
-                                />
-                            </svg>
-                        </div>
+                <div className="flex mb-3 mt-3">
+                    <div className="flex relative h-10 my-auto">
+                        <img
+                            src={searchIcon}
+                            title="Search"
+                            className="filter-grayscale absolute top-3 left-3"
+                            alt="search icon"
+                        />
                         <input
+                            className="w-64 pl-9 border-0"
                             type="search"
-                            placeholder="Search Members"
+                            placeholder="Filter Members"
                             onChange={(e) => setSearchText(e.target.value)}
                         />
                     </div>
                     <div className="flex-1" />
-                    <div className="py-3 pl-3">
+                    <div className="py-2 pl-3">
                         <DropDown
                             prefix="Role: "
                             customClasses="w-32"
diff --git a/components/dashboard/src/workspaces/WorkspacesSearchBar.tsx b/components/dashboard/src/workspaces/WorkspacesSearchBar.tsx
index e190fd9e24f114..eafb57e897f5b1 100644
--- a/components/dashboard/src/workspaces/WorkspacesSearchBar.tsx
+++ b/components/dashboard/src/workspaces/WorkspacesSearchBar.tsx
@@ -7,6 +7,7 @@
 import { FunctionComponent, useContext } from "react";
 import DropDown from "../components/DropDown";
 import { StartWorkspaceModalContext, StartWorkspaceModalKeyBinding } from "./start-workspace-modal-context";
+import search from "../icons/search.svg";
 
 type WorkspacesSearchBarProps = {
     searchTerm: string;
@@ -25,18 +26,11 @@ export const WorkspacesSearchBar: FunctionComponent<WorkspacesSearchBarProps> =
 
     return (
         <div className="app-container py-2 flex">
-            <div className="flex">
-                <div className="py-4">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="16" height="16">
-                        <path
-                            fill="#A8A29E"
-                            d="M6 2a4 4 0 100 8 4 4 0 000-8zM0 6a6 6 0 1110.89 3.477l4.817 4.816a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 010 6z"
-                        />
-                    </svg>
-                </div>
+            <div className="flex relative h-10 my-auto">
+                <img src={search} title="Search" className="filter-grayscale absolute top-3 left-3" alt="search icon" />
                 <input
                     type="search"
-                    className="text-sm"
+                    className="w-64 pl-9 border-0"
                     placeholder="Filter Workspaces"
                     value={searchTerm}
                     onChange={(v) => {