diff --git a/packages/search-package/.gitignore b/packages/search-package/.gitignore
new file mode 100644
index 0000000000..430675afe5
--- /dev/null
+++ b/packages/search-package/.gitignore
@@ -0,0 +1,2 @@
+dist/
+.out/
diff --git a/packages/search-package/.storybook/main.js b/packages/search-package/.storybook/main.js
new file mode 100644
index 0000000000..67ff1d56aa
--- /dev/null
+++ b/packages/search-package/.storybook/main.js
@@ -0,0 +1,39 @@
+module.exports = {
+  stories: ["../src/components/**/*.stories.@(js|jsx|ts|tsx|mdx)"],
+  addons: [
+    {
+      name: "@storybook/addon-docs",
+      options: {
+        configureJSX: true,
+        babelOptions: {},
+        sourceLoaderOptions: null,
+        transcludeMarkdown: true
+      }
+    }
+  ],
+  babel: async (options) => ({
+    ...options,
+
+    "plugins": [
+      "@babel/plugin-proposal-optional-chaining",
+      "@babel/plugin-transform-runtime",
+    ]
+  }),
+  webpackFinal: async (config) => {
+    config.module.rules[0].use[0].options.plugins[1] = [
+      '@babel/plugin-proposal-class-properties',
+      { loose: true }
+    ]
+
+    config.module.rules.push({
+      test: /\.(stories|story)\.[tj]sx?$/,
+      loader: require.resolve("@storybook/source-loader"),
+      exclude: [/node_modules/],
+      enforce: "pre"
+    });
+
+    config.resolve.extensions.push(".ts", ".tsx", ".mdx")
+
+    return config
+  }
+}
diff --git a/packages/search-package/.storybook/preview-head.html b/packages/search-package/.storybook/preview-head.html
new file mode 100644
index 0000000000..a05ce31fa3
--- /dev/null
+++ b/packages/search-package/.storybook/preview-head.html
@@ -0,0 +1 @@
+<link rel="stylesheet" href="https://i.icomoon.io/public/830a3260df/SaaSquatch/style.css">
diff --git a/packages/search-package/.storybook/preview.js b/packages/search-package/.storybook/preview.js
new file mode 100644
index 0000000000..cdb3a20801
--- /dev/null
+++ b/packages/search-package/.storybook/preview.js
@@ -0,0 +1,24 @@
+import { DocsPage, DocsContainer } from "@storybook/addon-docs";
+import { GlobalStyle } from '@saasquatch/visual-dev';
+import React from "react";
+
+export const parameters = {
+  docs: {
+    container: DocsContainer,
+    page: DocsPage,
+  },
+  options: {
+    enableShortcuts: false,
+  },
+  viewMode: "docs",
+};
+
+const withGlobalStyles = (Story, context) => {
+  return (
+    <>
+      <GlobalStyle />
+      <Story {...context} />
+    </>
+  );
+};
+export const decorators = [withGlobalStyles];
diff --git a/packages/search-package/CHANGELOG.md b/packages/search-package/CHANGELOG.md
new file mode 100644
index 0000000000..aaedbe54f3
--- /dev/null
+++ b/packages/search-package/CHANGELOG.md
@@ -0,0 +1,65 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+## [1.0.2] - 2022-08-02
+
+### Changed
+
+- Update global CSS variables to match new portal design system variables
+
+## [1.0.1] - 2022-07-21
+
+### Changed
+
+- Fix icons in safari by adding width to svg
+- Make Modal buttons more configurable
+- More SVG icon options added
+- Remove stopPropagation from select list to prevent conflict with Popper.js
+
+### Added
+
+## [1.0.0] - 2022-06-01
+
+### Added
+
+- New visual-dev components:
+  - \<Accordion>
+  - \<Alert>
+  - \<ArrayFieldTemplate>
+  - \<Avatar>
+  - \<Badge>
+  - \<Button>
+  - \<Card>
+  - \<Checkbox>
+  - \<Combobox>
+  - \<CopyWrapper>
+  - \<DataTable>
+  - \<Dropdown>
+  - \<ErrorListTemplate>
+  - \<FieldTemplate>
+  - \<Form>
+  - \<GlobalStyle>
+  - \<Input>
+  - \<List>
+  - \<Modal>
+  - \<ObjectFieldTemplate>
+  - \<Popover>
+  - \<Radio
+  - \<RadioAction>
+  - \<RadioCard>
+  - \<Select>
+  - \<Select2>
+  - \<Switch>
+  - \<Tabs>
+  - \<Tag>
+  - \<TextArea>
+  - \<Tooltip>
+
+[unreleased]: https://github.com/saasquatch/program-tools/compare/visual-dev%401.0.1...HEAD
+[1.0.1]: https://github.com/saasquatch/program-tools/releases/tag/%40saasquatch/visual-dev%401.0.1
diff --git a/packages/search-package/README.md b/packages/search-package/README.md
new file mode 100644
index 0000000000..e32c32e4e4
--- /dev/null
+++ b/packages/search-package/README.md
@@ -0,0 +1,26 @@
+# visual-dev
+
+Template repo for visual development for Saasquatch products.
+
+## Usage
+
+To install dependencies
+``` 
+$ npm install
+```
+
+To build
+```
+$ npm run build 
+```
+
+To run tests
+```
+$ npm run test
+```
+
+To run Storybook
+``` 
+$ npm run storybook
+```
+
diff --git a/packages/search-package/package.json b/packages/search-package/package.json
new file mode 100644
index 0000000000..277f750acb
--- /dev/null
+++ b/packages/search-package/package.json
@@ -0,0 +1,84 @@
+{
+  "name": "@saasquatch/squatch-search",
+  "version": "0.1.0-16",
+  "description": "SaaSquatch search",
+  "main": "dist/index.js",
+  "module": "dist/visual-dev.esm.js",
+  "typings": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "start": "tsdx watch",
+    "build": "tsdx build",
+    "test": "tsdx test --passWithNoTests",
+    "lint": "tsdx lint",
+    "storybook": "cross-env NODE_ENV=storybook start-storybook -p 9001 -c .storybook",
+    "storybook:build": "cross-env NODE_ENV=storybook build-storybook -c .storybook -o .out"
+  },
+  "keywords": [],
+  "author": "SaaSquatch Team",
+  "license": "MIT",
+  "dependencies": {
+    "@saasquatch/visual-dev": "^1.0.3-2",
+    "jquery": "^3.6.0",
+    "react-shadow": "^19.0.2",
+    "use-debounce": "^8.0.3"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.16.12",
+    "@rjsf/core": "^2.4.1",
+    "@storybook/addon-a11y": "^6.3.8",
+    "@storybook/addon-docs": "^6.3.8",
+    "@storybook/addon-knobs": "^6.3.1",
+    "@storybook/addon-viewport": "^6.3.8",
+    "@storybook/react": "^6.3.8",
+    "@testing-library/jest-dom": "^5.12.0",
+    "@testing-library/react": "^10.0.4",
+    "@types/jest": "^25.2.1",
+    "@types/json-schema": "^7.0.9",
+    "@types/marked": "^3.0.1",
+    "@types/react": "^16.14.6",
+    "@types/react-dom": "^16.9.12",
+    "@types/react-select": "^3.1.2",
+    "@types/styled-components": "^5.1.9",
+    "awesome-typescript-loader": "^5.2.1",
+    "babel-loader": "^8.2.2",
+    "cross-env": "^7.0.3",
+    "downshift": "^6.1.7",
+    "jest": "^25.5.1",
+    "marked": "^3.0.4",
+    "prettier-standard": "^16.3.0",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-router-hash-link": "^1.2.2",
+    "storybook-addon-matrix": "^1.6.0",
+    "styled-components": "^5.3.0",
+    "ts-jest": "^25.5.1",
+    "ts-loader": "^7.0.3",
+    "tsdx": "^0.14.1",
+    "tslib": "^2.3.1",
+    "typescript": "^3.9.9"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0",
+    "styled-components": ">=5.3.0"
+  },
+  "jest": {
+    "preset": "ts-jest",
+    "testEnvironment": "jsdom",
+    "testPathIgnorePatterns": [
+      "dist/"
+    ]
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/saasquatch/program-tools.git"
+  },
+  "bugs": {
+    "url": "https://github.com/saasquatch/program-tools/issues"
+  },
+  "homepage": "https://github.com/saasquatch/program-tools#readme"
+}
diff --git a/packages/search-package/src/components/Search/Results.stories.tsx b/packages/search-package/src/components/Search/Results.stories.tsx
new file mode 100644
index 0000000000..bc46997fa6
--- /dev/null
+++ b/packages/search-package/src/components/Search/Results.stories.tsx
@@ -0,0 +1,63 @@
+import React from "react";
+import { Results, ResultsProps } from "./Results";
+import { isBlank } from "./SearchFunctions";
+
+export default {
+  title: "Results",
+  component: Results,
+};
+
+const defaultProps: ResultsProps = {
+  response: {
+    title: "test",
+    items: [
+      {
+        cacheId: "test",
+        displayLink: "docs.saasquatch.com",
+        formattedUrl: "https://docs.saasquatch.com",
+        htmlFormattedUrl: "https://docs.saasquatch.com",
+        htmlSnippet: "Testing...",
+        htmlTitle: "Test",
+        kind: "customsearch#result",
+        link: "https://docs.saasquatch.com",
+        pagemap: "",
+      },
+			{
+        cacheId: "test",
+        displayLink: "docs.saasquatch.com",
+        formattedUrl: "https://docs.saasquatch.com",
+        htmlFormattedUrl: "https://docs.saasquatch.com",
+        htmlSnippet: "Testing...",
+        htmlTitle: "Test",
+        kind: "customsearch#result",
+        link: "https://docs.saasquatch.com/something/bread/",
+        pagemap: "",
+      },
+			{
+        cacheId: "test",
+        displayLink: "docs.saasquatch.com",
+        formattedUrl: "https://docs.saasquatch.com",
+        htmlFormattedUrl: "https://docs.saasquatch.com",
+        htmlSnippet: "Testing...",
+        htmlTitle: "Test",
+        kind: "customsearch#result",
+        link: "https://docs.saasquatch.com",
+        pagemap: "",
+      },
+    ],
+    kind: "customsearch#search",
+    searchInformation: {
+      formattedSearchTime: "0.12",
+      formattedTotalResults: "0",
+      searchTime: 0.123753,
+      totalResults: "0",
+    },
+  },
+  setStartIndex: "",
+  query: "test",
+  onIsBlank: isBlank,
+};
+
+export const MultipleItems = () => {
+  return <Results {...defaultProps} />;
+};
diff --git a/packages/search-package/src/components/Search/Results.tsx b/packages/search-package/src/components/Search/Results.tsx
new file mode 100644
index 0000000000..9c5adde0b4
--- /dev/null
+++ b/packages/search-package/src/components/Search/Results.tsx
@@ -0,0 +1,131 @@
+import React from "react";
+import styled from "styled-components";
+import ItemView from "../SmallViews/ItemView";
+
+const ItemsContainerDiv = styled.div<{sidebar?: boolean, query: string, background?: boolean}>`
+  max-width: ${(props) => (props.sidebar ? "470px" : "1000px")};
+  margin-top: var(--sq-spacing-large);
+  min-height: ${(props) => (props.background && props.query && props.sidebar  && "20px")}; 
+  padding: ${(props) => (props.background && props.query && props.sidebar  && "19px;")};
+  margin-bottom: ${(props) => (props.background && props.query && props.sidebar  && "20px;")};
+  background-color: ${(props) => (props.background && props.query && props.sidebar  && "#f5f5f5;")};
+  border: ${(props) => (props.background && props.query && props.sidebar  && "1px solid #e3e3e3;")};
+  -webkit-border-radius: ${(props) => (props.background && props.query && props.sidebar  && "4px;")};
+  -moz-border-radius: ${(props) => (props.background && props.query && props.sidebar  && "4px;")};
+  border-radius: ${(props) => (props.background && props.query && props.sidebar  && "4px;")};
+  -webkit-box-shadow: ${(props) => (props.background && props.query && props.sidebar  && "inset 0 1px 1px rgba(0, 0, 0, 0.05);")};
+  -moz-box-shadow: ${(props) => (props.background && props.query && props.sidebar  && "inset 0 1px 1px rgba(0, 0, 0, 0.05);")};
+  box-shadow: ${(props) => (props.background && props.query && props.sidebar  && "inset 0 1px 1px rgba(0, 0, 0, 0.05);")};
+`;
+
+const PrevNextDiv = styled.div<{ sidebar?: boolean }>`
+  max-width: ${(props) => (props.sidebar ? "470px" : "1000px")};
+  display: flex;
+  flex-direction: row;
+  justify-content: ${(props) => (props.sidebar ? "right" : "center")};
+`;
+
+const PrevA = styled.a`
+  color: #06966f;
+  cursor: pointer;
+  &:hover {
+    color: #06966f;
+  }
+`;
+
+const NextA = styled.a`
+  color: #06966f;
+  margin-left: var(--sq-spacing-medium);
+  cursor: pointer;
+  &:hover {
+    color: #06966f;
+  }
+`;
+
+const ContainerA = styled.a`
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  text-decoration: none !important;
+  &:hover > div {
+    text-decoration: none !important;
+  }
+`;
+
+export interface ResultsProps {
+  response: any;
+  setStartIndex: any;
+  query: string;
+  onIsBlank: (str?: string) => boolean;
+  sidebar?: boolean;
+  background?: boolean;
+  linkComponent?: React.ReactNode;
+}
+
+// @ts-ignore
+export function Results(props: ResultsProps) {
+  const { items, queries, searchInformation } = props.response;
+  const { background = true } = props;
+
+  return (
+    <>
+      <ItemsContainerDiv sidebar={props.sidebar} query={props.query} background={background}>
+        {items &&
+          items
+            // @ts-ignore
+            .filter((item) => item)
+            // @ts-ignore
+            .map((item, i) => (
+              // getBreadcrumb(item.link)
+              <ContainerA href={item.link}>
+                <ItemView
+                  item={item}
+                />
+              </ContainerA>
+            ))}
+            {items && (
+        <p>
+          {searchInformation.totalResults} total results found in{" "}
+          {searchInformation.formattedSearchTime} seconds
+        </p>
+      )}
+      <PrevNextDiv sidebar={props.sidebar}>
+        {queries?.previousPage && (
+          <PrevA
+            onClick={() =>
+              props.setStartIndex(queries.previousPage[0].startIndex)
+            }
+          >
+            Previous
+          </PrevA>
+        )}
+
+        {queries?.nextPage && (
+          <NextA
+            onClick={() => props.setStartIndex(queries.nextPage[0].startIndex)}
+          >
+            Next
+          </NextA>
+        )}
+      </PrevNextDiv>
+
+      {!props.sidebar && !items && props.onIsBlank(props.query) && (
+        <div>
+          <p>What are you looking for?</p>
+        </div>
+      )}
+      {!items && !props.onIsBlank(props.query) && (
+        <div>
+          <h3>
+            No matching Docs!
+          </h3>
+          <p>
+            Looks like we couldn't find any Help Center page that matches your
+            search term <strong>"{props.query}"</strong>
+          </p>
+        </div>
+      )}
+      </ItemsContainerDiv>
+    </>
+  );
+}
diff --git a/packages/search-package/src/components/Search/Search.stories.tsx b/packages/search-package/src/components/Search/Search.stories.tsx
new file mode 100644
index 0000000000..592e2174d8
--- /dev/null
+++ b/packages/search-package/src/components/Search/Search.stories.tsx
@@ -0,0 +1,49 @@
+import React from "react";
+import Search, { SearchProps } from "./Search";
+import { isBlank } from './SearchFunctions'
+import { useSearch } from "./UseSearch";
+
+export default {
+  title: "Search",
+  component: Search,
+};
+
+export const Default = () => {
+  const defaultProps: SearchProps = {
+    onIsBlank: isBlank,
+    useSearch: useSearch(),
+    background: true
+  }
+
+  return <Search {...defaultProps}/>;
+};
+
+export const NoBackground = () => {
+  const defaultProps: SearchProps = {
+    onIsBlank: isBlank,
+    useSearch: useSearch(),
+  }
+
+  return <Search {...defaultProps}/>;
+};
+
+export const MiniSearch = () => {
+  const miniProps: SearchProps = {
+    onIsBlank: isBlank,
+    useSearch: useSearch(),
+    sidebar: true,
+  }
+
+  return <Search {...miniProps}/>;
+};
+
+export const MiniSearchNoBackground = () => {
+  const miniProps: SearchProps = {
+    onIsBlank: isBlank,
+    useSearch: useSearch(),
+    sidebar: true,
+    background: false
+  }
+
+  return <Search {...miniProps}/>;
+};
diff --git a/packages/search-package/src/components/Search/Search.tsx b/packages/search-package/src/components/Search/Search.tsx
new file mode 100644
index 0000000000..a0f6953f47
--- /dev/null
+++ b/packages/search-package/src/components/Search/Search.tsx
@@ -0,0 +1,159 @@
+import React from "react";
+import styled from "styled-components";
+import { InputView, RadioView } from "@saasquatch/visual-dev";
+import { Results } from "./Results";
+
+const SearchContainerDiv = styled.div<{sidebar?: boolean}>`
+  max-width: ${(props) => (props.sidebar ? "470px" : "1000px")};
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+const RadioContainerDiv = styled.div`
+  display: flex;
+  flex-direction: row;
+`;
+
+const WellDiv = styled.div<{sidebar?: boolean, background?: boolean}>`
+  min-height: ${(props) => (props.background && !props.sidebar && "20px")}; 
+  padding: ${(props) => (props.background && !props.sidebar && "19px;")};
+  text-align: center;
+  margin-bottom: ${(props) => (props.background && !props.sidebar && "20px;")};
+  background-color: ${(props) => (props.background && !props.sidebar && "#f5f5f5;")};
+  border: ${(props) => (props.background && !props.sidebar && "1px solid #e3e3e3;")};
+  -webkit-border-radius: ${(props) => (props.background && !props.sidebar && "4px;")};
+  -moz-border-radius: ${(props) => (props.background && !props.sidebar && "4px;")};
+  border-radius: ${(props) => (props.background && !props.sidebar && "4px;")};
+  -webkit-box-shadow: ${(props) => (props.background && !props.sidebar && "inset 0 1px 1px rgba(0, 0, 0, 0.05);")};
+  -moz-box-shadow: ${(props) => (props.background && !props.sidebar && "inset 0 1px 1px rgba(0, 0, 0, 0.05);")};
+  box-shadow: ${(props) => (props.background && !props.sidebar && "inset 0 1px 1px rgba(0, 0, 0, 0.05);")};
+`
+
+export interface useSearchProps {
+  response: any;
+  query: string;
+  setQuery: (newValue: string) => void;
+  cat: string;
+  setCat: (cat: string) => void;
+  setStartIndex: (startIndex: any) => void;
+}
+
+export interface SearchProps {
+  /**
+   * Pass in isBlank function to check if query is blank
+   */
+  onIsBlank: (str?: string) => boolean;
+  /**
+   * Pass in useSearch function in here
+   */
+  useSearch: useSearchProps;
+  /**
+   * If sidebar is true, it'll be mini and remove radio buttons
+   */
+  sidebar?: boolean;
+  /**
+   * If this is true, the search will have a greyish background container - defaulted to true for sidebar
+   */
+  background?: boolean;
+  /**
+   * 
+   */
+  linkComponent?: React.ReactNode;
+}
+
+export default function Search(props: SearchProps) {
+  if (typeof document === "undefined") {
+    return <div />;
+  }
+  console.log(props.sidebar);
+  return (
+    <>
+      <section>
+        <WellDiv sidebar={props.sidebar} background={props.background}>
+          {!props.sidebar && <h3>Help Center Search</h3>}
+            <form action="/search/">
+              <SearchContainerDiv sidebar={props.sidebar}>
+                <InputView
+                  customCSS={"margin-bottom: var(--sq-spacing-medium);"}
+                  limitWidth="false"
+                  icon="search"
+                  position="left"
+                  value={props.useSearch.query}
+                  onChange={(e: any) =>
+                    props.useSearch.setQuery(e.target.value)
+                  }
+                />
+                {!props.sidebar && (
+                  <RadioContainerDiv>
+                    <RadioView
+                      css=""
+                      customLabelCSS="margin-left: 0px; margin-right: 35px;"
+                      label="All"
+                      value={props.useSearch.cat === "" ? true : false}
+                      onChange={() => props.useSearch.setCat("")}
+                    />
+                    <RadioView
+                      css=""
+                      customLabelCSS="margin-left: 0px; margin-right: 35px;"
+                      label="Developer"
+                      value={
+                        props.useSearch.cat === "developerCenter" ? true : false
+                      }
+                      onChange={() => props.useSearch.setCat("developerCenter")}
+                    />
+                    <RadioView
+                      css=""
+                      customLabelCSS="margin-left: 0px; margin-right: 35px;"
+                      label="Success"
+                      value={
+                        props.useSearch.cat === "successCenter" ? true : false
+                      }
+                      onChange={() => props.useSearch.setCat("successCenter")}
+                    />
+                    <RadioView
+                      css=""
+                      label="Designer"
+                      value={
+                        props.useSearch.cat === "designerCenter" ? true : false
+                      }
+                      onChange={() => props.useSearch.setCat("designerCenter")}
+                    />
+                  </RadioContainerDiv>
+                )}
+              </SearchContainerDiv>
+            </form>
+          <div>
+            <div>
+              {!props.sidebar && !props.useSearch.response && (
+                <div>
+                  <h3>Searching Help Center...</h3>
+                  <i></i>
+                </div>
+              )}
+              {/* @ts-ignore */}
+              {props.useSearch.response && props.useSearch.response.error && (
+                <div>
+                  {/* @ts-ignore */}
+                  <h3>{props.useSearch.response.error.message}</h3>
+                </div>
+              )}
+              {/* @ts-ignore */}
+              {props.useSearch.response && !props.useSearch.response.error && (
+                <Results
+                  response={props.useSearch.response}
+                  setStartIndex={props.useSearch.setStartIndex}
+                  query={props.useSearch.query}
+                  onIsBlank={props.onIsBlank}
+                  sidebar={props.sidebar}
+                  background={props.background}
+                  linkComponent={props.linkComponent}
+                />
+              )}
+            </div>
+          </div>
+        </WellDiv>
+      </section>
+    </>
+  );
+}
diff --git a/packages/search-package/src/components/Search/SearchFunctions.ts b/packages/search-package/src/components/Search/SearchFunctions.ts
new file mode 100644
index 0000000000..9229ff8c78
--- /dev/null
+++ b/packages/search-package/src/components/Search/SearchFunctions.ts
@@ -0,0 +1,30 @@
+// import { BreadcrumbLinkProps } from "../SmallViews/BreadcrumbLink";
+
+export function isBlank(str?: string) {
+  return !str || /^\s*$/.test(str);
+}
+
+//Logan didn't want it - had non-existant saasquatch links
+// export const getfullPath = (pathArray: Array<string>, index: number) => {
+//   let fullPath: string = "";
+//   for (let i = 0; i < index; i++) {
+//     fullPath = fullPath + pathArray[i] + "/";
+//   }
+//   return fullPath;
+// };
+
+// export const getBreadcrumb = (link: string) => {
+//   const fullPath: string = new URL(link).pathname;
+//   const noStartEndSlashes: string = fullPath.slice(1, -1);
+//   const pathArray: Array<string> = noStartEndSlashes.split("/");
+//   const pathObjectsArray: Array<BreadcrumbLinkProps> = [];
+//   for (let i = 0; i < pathArray.length; i++) {
+//     const tempPathObject = {
+//       link: "https://docs.saasquatch.com/" + getfullPath(pathArray, i + 1),
+//       linkName:
+//         i + 1 === pathArray.length ? pathArray[i] : pathArray[i] + " > ",
+//     };
+//     pathObjectsArray.push(tempPathObject);
+//   }
+//   return pathObjectsArray;
+// };
diff --git a/packages/search-package/src/components/Search/UseSearch.tsx b/packages/search-package/src/components/Search/UseSearch.tsx
new file mode 100644
index 0000000000..ce2916f0e0
--- /dev/null
+++ b/packages/search-package/src/components/Search/UseSearch.tsx
@@ -0,0 +1,110 @@
+import { useEffect, useState } from "react";
+import { useDebouncedCallback } from "use-debounce";
+
+const GCSE_CX = "012261857935385488279:90grrsobq40";
+// Prod
+// const GCSE_KEY = "AIzaSyC3Lc2HenETRKNS3VIsHAMobTYhnKYG6dE";
+// Local
+const GCSE_KEY = "AIzaSyCrIbUMtCnszBe5kZzkbSMk5ii0PZJ5nqw";
+
+export function getParameterByName(name: string) {
+  name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
+  var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
+    results = regex.exec(window.location.search);
+  return results === null
+    ? ""
+    : decodeURIComponent(results[1].replace(/\+/g, " "));
+}
+
+export function useSearch() {
+  const [response, setResponse] = useState(null);
+
+  // Only run in the browser
+  const jQuery = require("jquery");
+
+  // var categoryFilter = "more:pagemap:metatags-type:jsReference";
+  let initialIndex = 0;
+  try {
+    initialIndex = parseInt(getParameterByName("startIndex"));
+  } catch (e) {}
+  const initialState = {
+    query: getParameterByName("q"),
+    cat: getParameterByName("cat"),
+    startIndex: initialIndex
+  };
+  const [{ query, cat, startIndex }, setState] = useState(initialState);
+  function setQuery(newValue: string) {
+    setState({
+      // If you change the query, go back to page 0
+      startIndex: 0,
+      cat,
+      query: newValue
+    });
+  }
+  function setCat(cat: string) {
+    setState({
+      query,
+      cat,
+      // If you change the category, go back to page 0
+      startIndex: 0
+    });
+  }
+  // @ts-ignore
+  function setStartIndex(startIndex) {
+    setState({
+      query,
+      cat,
+      startIndex
+    });
+  }
+  //   jQuery(".js-search-form input[name=cat]").val([cat]);
+  let privateQuery;
+  if (cat && cat.length > 1) {
+    // privateQuery = query + " more:pagemap:metatags-type:" + cat;
+    privateQuery = query + " more:pagemap:metatags-docsCategory:" + cat;
+  } else {
+    privateQuery = query ? query : "hi";
+  }
+  let dataObj = {
+    q: privateQuery,
+    cx: GCSE_CX,
+    key: GCSE_KEY,
+    format: "json",
+    start: undefined
+  };
+  if (startIndex) {
+      // @ts-ignore
+    dataObj.start = startIndex;
+  }
+
+  const debounced = useDebouncedCallback(
+    // function
+    (value) => {
+      jQuery.ajax({
+        url: "https://www.googleapis.com/customsearch/v1",
+        dataType: "jsonp",
+        jsonp: "callback",
+        data: value,
+        // Work with the response
+        success: function (response: any) {
+          setResponse(response);
+        }
+      });
+    },
+    // delay in ms
+    100
+  );
+
+  useEffect(() => {
+    debounced(dataObj);
+  }, [query, cat, startIndex]);
+
+  return {
+    response,
+    query,
+    setQuery,
+    cat,
+    setCat,
+    setStartIndex
+  };
+}
diff --git a/packages/search-package/src/components/SmallViews/BreadcrumbLink.tsx b/packages/search-package/src/components/SmallViews/BreadcrumbLink.tsx
new file mode 100644
index 0000000000..2784943b4f
--- /dev/null
+++ b/packages/search-package/src/components/SmallViews/BreadcrumbLink.tsx
@@ -0,0 +1,30 @@
+import React from "react";
+import styled from "styled-components";
+
+export interface BreadcrumbLinkProps {
+  link: string;
+  linkName: string;
+}
+
+const BreadLink = styled.a`
+  cursor: pointer;
+  border: none;
+  font-family: "Helvetica Neue", Helvetica, sans-serif;
+  border: none;
+  color: var(--sq-text-subdued);
+  &:hover {
+    color: #0088CC;
+  }
+  &:visited {
+    color: #681DA8;
+  }
+  text-decoration: none;
+  background: none;
+  font-size: var( --sq-font-size-regular);
+`;
+
+const BreadcrumbLink = (props: BreadcrumbLinkProps) => {
+  return <BreadLink href={props.link}>{props.linkName}</BreadLink>;
+};
+
+export default BreadcrumbLink;
diff --git a/packages/search-package/src/components/SmallViews/ItemView.stories.tsx b/packages/search-package/src/components/SmallViews/ItemView.stories.tsx
new file mode 100644
index 0000000000..52ba21d558
--- /dev/null
+++ b/packages/search-package/src/components/SmallViews/ItemView.stories.tsx
@@ -0,0 +1,29 @@
+import React from "react";
+import { getBreadcrumb } from "../Search/SearchFunctions";
+import ItemView, { ItemViewProps } from "./ItemView";
+
+
+export default {
+  title: "Item",
+  component: ItemView,
+};
+
+const defaultProps: ItemViewProps = {
+    item: {
+        cacheId: "test",
+        displayLink: "docs.saasquatch.com",
+        formattedUrl: "https://docs.saasquatch.com",
+        htmlSnippet: "Testing...",
+        htmlTitle: "Test",
+        kind: "customsearch#result",
+        link: "https://docs.saasquatch.com/Test/Test/",
+        pagemap: "",
+        snippet: "",
+        title: ""
+    },
+    onGetBreadcrumbs: getBreadcrumb
+}
+
+export const OneItem = () => {
+    return <ItemView {...defaultProps}/>
+}
\ No newline at end of file
diff --git a/packages/search-package/src/components/SmallViews/ItemView.tsx b/packages/search-package/src/components/SmallViews/ItemView.tsx
new file mode 100644
index 0000000000..3abc2a4259
--- /dev/null
+++ b/packages/search-package/src/components/SmallViews/ItemView.tsx
@@ -0,0 +1,72 @@
+import React from "react";
+import styled from "styled-components";
+
+export interface ItemViewProps {
+  item: {
+    cacheId: string;
+    displayLink: string;
+    formattedUrl: string;
+    htmlSnippet: string;
+    htmlTitle: string;
+    kind: string;
+    link: string;
+    pagemap: any;
+    snippet: string;
+    title: string;
+  };
+}
+
+const ItemContainerDiv = styled.div`
+  padding: var(--sq-spacing-large) var(--sq-spacing-x-small);
+  border-bottom: 1px solid var(--sq-border);
+  &:hover {
+    cursor: pointer;
+    /* h3 {
+      color: #06966F;
+    } */
+    background-color: #E7EDEE;
+  }
+`;
+
+const TitleDiv = styled.h3`
+  margin: 0;
+  font-weight: bold;
+  color: var(--sq-text);
+  margin-bottom: var(--sq-spacing-xxsmall);
+`;
+
+const DescriptionDiv = styled.div`
+  font-size: 15px;
+  overflow-wrap: break-word;
+  color: var(--sq-text);
+`;
+
+// const BreadcrumbContainerDiv = styled.div`
+//   display: row;
+//   flex-direction: column;
+//   margin-bottom: var(--sq-spacing-small);
+// `;
+
+const ItemView = (props: ItemViewProps) => {
+  return (
+    <ItemContainerDiv>
+      <TitleDiv
+        dangerouslySetInnerHTML={{
+          __html: props.item.htmlTitle,
+        }}
+      ></TitleDiv>
+      {/* <BreadcrumbContainerDiv>
+        {props.onGetBreadcrumbs(props.item.link).map((item) => {
+          return <BreadcrumbLink {...item} />;
+        })}
+      </BreadcrumbContainerDiv> */}
+      <DescriptionDiv
+        dangerouslySetInnerHTML={{
+          __html: props.item.htmlSnippet,
+        }}
+      ></DescriptionDiv>
+    </ItemContainerDiv>
+  );
+};
+
+export default ItemView;
diff --git a/packages/search-package/src/index.d.ts b/packages/search-package/src/index.d.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/search-package/src/index.ts b/packages/search-package/src/index.ts
new file mode 100644
index 0000000000..4d5a44a867
--- /dev/null
+++ b/packages/search-package/src/index.ts
@@ -0,0 +1,11 @@
+import Search, { SearchProps } from './components/Search/Search';
+import { isBlank } from './components/Search/SearchFunctions';
+import { useSearch } from './components/Search/UseSearch';
+/// <reference types="styled-components/cssprop" />
+
+export {
+  Search,
+  isBlank,
+  useSearch,
+  SearchProps
+};
diff --git a/packages/search-package/src/styles.css b/packages/search-package/src/styles.css
new file mode 100644
index 0000000000..a06a5e6ff8
--- /dev/null
+++ b/packages/search-package/src/styles.css
@@ -0,0 +1,120 @@
+:root {
+  /* font-size: 16px; */
+
+  /* ~~~ Colors ~~~ */
+
+  /* Surface */
+  --sq-surface: #ffffff;
+  --sq-surface-subdued: #f6f6f6;
+  --sq-background: #f9f9f9;
+
+  /* On Surface */
+  --sq-text: #575757;
+  --sq-text-dark: #232323;
+  --sq-text-subdued: #858585;
+  --sq-border: #e2e2e2;
+
+  /* Top Nav Bar */
+  --sq-nav-surface-primary: #003b45;
+  --sq-nav-text-on-primary: #ffffff;
+  --sq-nav-text-on-primary-subdued: #999999;
+  --sq-nav-surface-secondary: #ffffff;
+  --sq-nav-text-on-secondary: #003b45;
+  --sq-nav-text-on-secondary-subdued: #7c7c7c;
+
+  /* Primary */
+  --sq-action-primary: #f49c20;
+  --sq-action-primary-hovered: #dc8f32;
+  --sq-text-on-primary: #ffffff;
+  --sq-action-primary-disabled: #e2e2e2;
+
+  /* Secondary */
+  --sq-action-secondary: #ffffff;
+  --sq-action-secondary-hovered: #a6b9bd;
+  --sq-action-secondary-border: #a6b9bd;
+  --sq-text-on-secondary: #575757;
+  --sq-text-on-secondary-hovered: #ffffff;
+  --sq-placeholder-text-on-secondary: #bdbdbd;
+
+  /* Success */
+  --sq-surface-success: #57ac59;
+  --sq-surface-success-hovered: #479449;
+  --sq-surface-success-subdued: #e4fce3;
+  --sq-border-success: #57ac59;
+
+  /* Warning */
+  --sq-surface-warning: #f1c359;
+  --sq-surface-warning-subdued: #fcf8e3;
+  --sq-border-warning: #f1c359;
+
+  /* Critical */
+  --sq-surface-critical: #fe6666;
+  --sq-surface-critical-hovered: #cb0000;
+  --sq-surface-critical-subdued: #faf2ee;
+  --sq-border-critical: #d14040;
+  --sq-on-surface-critical: #c71d06;
+
+  /* Interactive */
+  --sq-text-interactive: #0088cc;
+  --sq-focused: #458edf;
+  --sq-icon-interactive: #0275fb;
+  --sq-surface-hover: #eef6ff;
+
+  /* Typography */
+  --sq-font-family-sans: "Helvetica Neue", Helvetica, sans-serif;
+
+  --sq-font-weight-regular: 400;
+  --sq-font-weight-semibold: 600;
+  --sq-font-weight-bold: 700;
+
+  --sq-font-size-header-one: 26px;
+  --sq-font-size-header-two: 22px;
+  --sq-font-size-header-three: 18px;
+  --sq-font-size-regular: 14px;
+  --sq-font-size-small: 12px;
+  --sq-font-size-caption: 16px;
+
+  --sq-line-height-header-one: 28px;
+  --sq-line-height-header-two: 28px;
+  --sq-line-height-header-three: 20px;
+  --sq-line-height-regular: 20px;
+  --sq-line-height-caption: 16px;
+
+  /* Button */
+  --sq-font-size-button-small: 12px;
+  --sq-font-size-button-medium: 14px;
+  --sq-font-size-button-large: 18px;
+  --sq-line-height-button-small: 16px;
+  --sq-line-height-button-medium: 16px;
+  --sq-line-height-button-large: 18px;
+
+  /* Icon Sizes */
+  --sq-icon-size-small: 12px;
+  --sq-icon-size-medium: 20px;
+  --sq-icon-size-large: 36px;
+  --sq-icon-size-badge: 18px;
+
+  /* Avatar Sizes */
+  --sq-icon-size-avatar: 36px;
+  --sq-icon-size-avatar-large: 50px;
+  --sq-font-size-avatar: 24px;
+
+  /* Modal */
+  --sq-surface-modal-banner: #12c8d7;
+
+  /* Input */
+  --sq-surface-input-disabled: #ebebeb;
+  --sq-text-input-disabled: #bdbdbd;
+
+  /* Spacing */
+  --sq-spacing-xxx-small: 2px;
+  --sq-spacing-xx-small: 4px;
+  --sq-spacing-x-small: 8px;
+  --sq-spacing-small: 12px;
+  --sq-spacing-medium: 16px;
+  --sq-spacing-large: 20px;
+  --sq-spacing-x-large: 24px;
+  --sq-spacing-xx-large: 32px;
+  --sq-spacing-xxx-large: 48px;
+  --sq-spacing-xxxx-large: 64px;
+}
diff --git a/packages/search-package/tsconfig.json b/packages/search-package/tsconfig.json
new file mode 100644
index 0000000000..2d7419fbbf
--- /dev/null
+++ b/packages/search-package/tsconfig.json
@@ -0,0 +1,35 @@
+{
+  // see https://www.typescriptlang.org/tsconfig to better understand tsconfigs
+  "include": ["src", "types"],
+  "compilerOptions": {
+    "module": "esnext",
+    "lib": ["dom", "esnext"],
+    "importHelpers": true,
+    // output .d.ts declaration files for consumers
+    "declaration": true,
+    // output .js.map sourcemap files for consumers
+    "sourceMap": true,
+    // match output dir to input dir. e.g. dist/index instead of dist/src/index
+    "rootDir": "./src",
+    // stricter type-checking for stronger correctness. Recommended by TS
+    "strict": true,
+    // linter checks for common issues
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    // noUnused* overlap with @typescript-eslint/no-unused-vars, can disable if duplicative
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    // use Node's module resolution algorithm, instead of the legacy TS one
+    "moduleResolution": "node",
+    // transpile JSX to React.createElement
+    "jsx": "react",
+    // interop between ESM and CJS modules. Recommended by TS
+    "esModuleInterop": true,
+    // significant perf increase by skipping checking .d.ts files, particularly those in node_modules. Recommended by TS
+    "skipLibCheck": true,
+    // error out if import and file system have a casing mismatch. Recommended by TS
+    "forceConsistentCasingInFileNames": true,
+    // `tsdx build` ignores this option, but it is commonly used when type-checking separately with `tsc`
+    "noEmit": true
+  }
+}