From a12fe51370c1ae1d0c9a241eb2a643ca96d613b4 Mon Sep 17 00:00:00 2001
From: Quang Lam <quang.lam2807@gmail.com>
Date: Sun, 31 Oct 2021 20:08:47 -0500
Subject: [PATCH] Improve overall UI/UX (#1554)

---
 .../dialogs/dialog-backup-restore.js          |   4 +-
 .../dialogs/dialog-create-custom-app.js       |   7 +-
 src/components/pages/categories/index.js      | 210 --------------
 src/components/pages/home/defined-app-bar.js  |  70 +----
 src/components/pages/home/home.js             | 185 +++++++++++++
 src/components/pages/home/index.js            | 228 ++++++---------
 src/components/pages/installed/index.js       |  15 +-
 src/components/pages/spaces/add-card.js       |  83 ++++++
 .../{categories => spaces}/defined-app-bar.js |   2 +-
 .../pages/spaces/dialog-add-space/app-card.js | 169 +++++++++++
 .../create-custom-space-card.js               | 106 +++++++
 .../spaces/dialog-add-space/empty-state.js    |  78 ++++++
 .../pages/spaces/dialog-add-space/home.js     | 254 +++++++++++++++++
 .../pages/spaces/dialog-add-space/index.js    |  65 +++++
 .../spaces/dialog-add-space/no-connection.js  |  68 +++++
 src/components/pages/spaces/index.js          |  77 +++++
 .../pages/spaces/installed-spaces.js          |  59 ++++
 src/components/root/container.js              | 109 +-------
 src/components/root/sidebar/index.js          | 234 ++++++----------
 .../root/sidebar/list-item-account.js         | 262 ++++++++----------
 src/components/shared/app-card.js             | 105 ++++---
 src/components/shared/create-button.js        |  33 +--
 src/components/shared/space-icon.js           |  15 +
 src/constants/actions.js                      |   4 +
 src/constants/routes.js                       |   2 +-
 src/state/dialog-add-space/actions.js         |  15 +
 src/state/dialog-add-space/reducers.js        |  19 ++
 src/state/index.js                            |   8 +-
 28 files changed, 1591 insertions(+), 895 deletions(-)
 delete mode 100644 src/components/pages/categories/index.js
 create mode 100644 src/components/pages/home/home.js
 create mode 100644 src/components/pages/spaces/add-card.js
 rename src/components/pages/{categories => spaces}/defined-app-bar.js (98%)
 create mode 100755 src/components/pages/spaces/dialog-add-space/app-card.js
 create mode 100755 src/components/pages/spaces/dialog-add-space/create-custom-space-card.js
 create mode 100755 src/components/pages/spaces/dialog-add-space/empty-state.js
 create mode 100644 src/components/pages/spaces/dialog-add-space/home.js
 create mode 100644 src/components/pages/spaces/dialog-add-space/index.js
 create mode 100755 src/components/pages/spaces/dialog-add-space/no-connection.js
 create mode 100644 src/components/pages/spaces/index.js
 create mode 100644 src/components/pages/spaces/installed-spaces.js
 create mode 100644 src/components/shared/space-icon.js
 create mode 100644 src/state/dialog-add-space/actions.js
 create mode 100644 src/state/dialog-add-space/reducers.js

diff --git a/src/components/dialogs/dialog-backup-restore.js b/src/components/dialogs/dialog-backup-restore.js
index 5c8cbcc4..5156e52c 100644
--- a/src/components/dialogs/dialog-backup-restore.js
+++ b/src/components/dialogs/dialog-backup-restore.js
@@ -40,12 +40,12 @@ const DialogBackupRestore = () => {
       maxWidth="sm"
     >
       <EnhancedDialogTitle onClose={onClose}>
-        Backup & Restore Apps & Spaces (BETA)
+        Backup & Restore Apps & Spaces (ALPHA)
       </EnhancedDialogTitle>
       <DialogContent>
         <Typography variant="body2" color="textSecondary" gutterBottom>
           Backup only includes the list of your apps and spaces (including custom app icons)
-          and does not include app data and preferences.
+          and does not include app/space data and preferences.
         </Typography>
         <List>
           <ListItem
diff --git a/src/components/dialogs/dialog-create-custom-app.js b/src/components/dialogs/dialog-create-custom-app.js
index f29805f6..f892c588 100644
--- a/src/components/dialogs/dialog-create-custom-app.js
+++ b/src/components/dialogs/dialog-create-custom-app.js
@@ -70,6 +70,7 @@ const styles = (theme) => ({
     boxShadow: theme.shadows[1],
     // 96 * 22.375%
     borderRadius: 21,
+    backgroundColor: theme.palette.common.white,
   },
   dialogActions: {
     borderTop: `1px solid ${theme.palette.divider}`,
@@ -125,7 +126,7 @@ const DialogCreateCustomApp = (props) => {
       open={open}
     >
       <EnhancedDialogTitle onClose={onClose}>
-        Create Custom App & Space
+        {urlDisabled ? 'Create Custom Space' : 'Create Custom App'}
       </EnhancedDialogTitle>
       <DialogContent>
         <TextField
@@ -139,7 +140,7 @@ const DialogCreateCustomApp = (props) => {
           error={Boolean(nameError)}
           variant="outlined"
         />
-        <FormControl variant="outlined" fullWidth margin="normal">
+        {/* <FormControl variant="outlined" fullWidth margin="normal">
           <InputLabel id="input-type-label">Classification</InputLabel>
           <Select
             id="input-type"
@@ -160,7 +161,7 @@ const DialogCreateCustomApp = (props) => {
               What is the difference between apps and spaces?
             </Link>
           </FormHelperText>
-        </FormControl>
+        </FormControl> */}
         {!urlDisabled && (
           <TextField
             fullWidth
diff --git a/src/components/pages/categories/index.js b/src/components/pages/categories/index.js
deleted file mode 100644
index 98e31af1..00000000
--- a/src/components/pages/categories/index.js
+++ /dev/null
@@ -1,210 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import {
-  WithSearch,
-} from '@elastic/react-search-ui';
-
-import List from '@material-ui/core/List';
-import ListItem from '@material-ui/core/ListItem';
-import ListItemIcon from '@material-ui/core/ListItemIcon';
-import ListItemText from '@material-ui/core/ListItemText';
-
-import BusinessCenterIcon from '@material-ui/icons/BusinessCenter';
-import CodeIcon from '@material-ui/icons/Code';
-import SchoolIcon from '@material-ui/icons/School';
-import TheatersIcon from '@material-ui/icons/Theaters';
-import AccountBalanceIcon from '@material-ui/icons/AccountBalance';
-import SportsEsportsIcon from '@material-ui/icons/SportsEsports';
-import PhotoLibraryIcon from '@material-ui/icons/PhotoLibrary';
-import DirectionsRunIcon from '@material-ui/icons/DirectionsRun';
-import EmojiEmotionsIcon from '@material-ui/icons/EmojiEmotions';
-import MusicNoteIcon from '@material-ui/icons/MusicNote';
-import WbSunnyIcon from '@material-ui/icons/WbSunny';
-import TrendingUpIcon from '@material-ui/icons/TrendingUp';
-import LibraryBooksIcon from '@material-ui/icons/LibraryBooks';
-import ForumIcon from '@material-ui/icons/Forum';
-import SportsFootballIcon from '@material-ui/icons/SportsFootball';
-import BeachAccessIcon from '@material-ui/icons/BeachAccess';
-import BuildIcon from '@material-ui/icons/Build';
-
-import DefinedAppBar from './defined-app-bar';
-
-import { changeRoute } from '../../../state/router/actions';
-
-import connectComponent from '../../../helpers/connect-component';
-
-import {
-  ROUTE_HOME,
-} from '../../../constants/routes';
-
-const styles = (theme) => ({
-  pageRoot: {
-    height: '100%',
-    display: 'flex',
-    flexDirection: 'column',
-    overflow: 'hidden',
-    flex: 1,
-  },
-  categoryPage: {
-    width: '100%',
-    color: theme.palette.text.primary,
-    overflow: 'auto',
-  },
-});
-
-const Categories = ({ classes, onChangeRoute }) => {
-  const categorySections = {
-    business: {
-      text: 'Business',
-      Icon: BusinessCenterIcon,
-    },
-    developerTools: {
-      text: 'Developer Tools',
-      Icon: CodeIcon,
-    },
-    education: {
-      text: 'Education',
-      Icon: SchoolIcon,
-    },
-    entertainment: {
-      text: 'Entertainment',
-      Icon: TheatersIcon,
-    },
-    finance: {
-      text: 'Finance',
-      Icon: AccountBalanceIcon,
-    },
-    games: {
-      text: 'Games',
-      Icon: SportsEsportsIcon,
-    },
-    photographyGraphics: {
-      text: 'Photography & Graphics',
-      Icon: PhotoLibraryIcon,
-    },
-    healthFitness: {
-      text: 'Health & Fitness',
-      Icon: DirectionsRunIcon,
-    },
-    lifestyle: {
-      text: 'Lifestyle',
-      Icon: EmojiEmotionsIcon,
-    },
-    musicAudio: {
-      text: 'Music & Audio',
-      Icon: MusicNoteIcon,
-    },
-    newsWeather: {
-      text: 'News & Weather',
-      Icon: WbSunnyIcon,
-    },
-    productivity: {
-      text: 'Productivity',
-      Icon: TrendingUpIcon,
-    },
-    booksReference: {
-      text: 'Books & Reference',
-      Icon: LibraryBooksIcon,
-    },
-    socialNetworking: {
-      text: 'Social Networking',
-      Icon: ForumIcon,
-    },
-    sports: {
-      text: 'Sports',
-      Icon: SportsFootballIcon,
-    },
-    travel: {
-      text: 'Travel',
-      Icon: BeachAccessIcon,
-    },
-    utilities: {
-      text: 'Utilities',
-      Icon: BuildIcon,
-    },
-  };
-
-  return (
-    <div className={classes.pageRoot}>
-      <DefinedAppBar />
-      <div className={classes.categoryPage}>
-        <WithSearch
-          mapContextToProps={({
-            filters,
-            clearFilters,
-            setFilter,
-          }) => ({
-            filters,
-            clearFilters,
-            setFilter,
-          })}
-        >
-          {({
-            filters,
-            clearFilters,
-            setFilter,
-          }) => {
-            const typeFilter = filters.find((filter) => filter.field === 'type');
-            const categoryFilter = filters.find((filter) => filter.field === 'category');
-
-            return (
-              <List className={classes.categoryList}>
-                {Object.keys(categorySections).map((sectionKey) => {
-                  const {
-                    Icon, text, hidden,
-                  } = categorySections[sectionKey];
-                  if (hidden) return null;
-
-                  const selected = sectionKey !== 'spaces'
-                    ? categoryFilter && categoryFilter.values[0] === text
-                    : typeFilter && typeFilter.values[0] === 'Multisite';
-
-                  return (
-                    <React.Fragment key={sectionKey}>
-                      <ListItem
-                        button
-                        onClick={() => {
-                          clearFilters('category'); // clear all filters except category filter
-                          setFilter('category', text, 'all');
-                          onChangeRoute(ROUTE_HOME);
-                        }}
-                        selected={selected}
-                      >
-                        <ListItemIcon>
-                          <Icon fontSize="medium" />
-                        </ListItemIcon>
-                        <ListItemText
-                          primary={text}
-                        />
-                      </ListItem>
-                    </React.Fragment>
-                  );
-                })}
-              </List>
-            );
-          }}
-        </WithSearch>
-      </div>
-    </div>
-  );
-};
-
-Categories.propTypes = {
-  classes: PropTypes.object.isRequired,
-  onChangeRoute: PropTypes.func.isRequired,
-};
-
-const actionCreators = {
-  changeRoute,
-};
-
-export default connectComponent(
-  Categories,
-  null,
-  actionCreators,
-  styles,
-);
diff --git a/src/components/pages/home/defined-app-bar.js b/src/components/pages/home/defined-app-bar.js
index 50e54948..ded19566 100644
--- a/src/components/pages/home/defined-app-bar.js
+++ b/src/components/pages/home/defined-app-bar.js
@@ -5,25 +5,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import Button from '@material-ui/core/Button';
-
-import {
-  WithSearch,
-} from '@elastic/react-search-ui';
-
-import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos';
-
 import connectComponent from '../../../helpers/connect-component';
 
-import { changeRoute } from '../../../state/router/actions';
-
 import SearchBox from './search-box';
 
 import EnhancedAppBar from '../../shared/enhanced-app-bar';
 import CreateButton from '../../shared/create-button';
 
-import { ROUTE_CATEGORIES } from '../../../constants/routes';
-
 const styles = (theme) => ({
   backButton: {
     marginLeft: theme.spacing(1),
@@ -40,64 +28,24 @@ const styles = (theme) => ({
 
 const DefinedAppBar = ({
   classes,
-  onChangeRoute,
 }) => (
-  <WithSearch
-    mapContextToProps={({
-      filters,
-      clearFilters,
-    }) => ({
-      filters,
-      clearFilters,
-    })}
-  >
-    {({
-      filters,
-      clearFilters,
-    }) => {
-      const categoryFilter = filters.find((filter) => filter.field === 'category');
-
-      return (
-        <EnhancedAppBar
-          left={categoryFilter == null ? null : (
-            <Button
-              variant="text"
-              color="default"
-              size="small"
-              className={classes.backButton}
-              startIcon={<ArrowBackIosIcon fontSize="small" />}
-              onClick={() => {
-                clearFilters();
-                onChangeRoute(ROUTE_CATEGORIES);
-              }}
-            >
-              Back
-            </Button>
-          )}
-          center={(
-            <div className={classes.centerContainer}>
-              <SearchBox />
-              <CreateButton />
-            </div>
-          )}
-        />
-      );
-    }}
-  </WithSearch>
+  <EnhancedAppBar
+    center={(
+      <div className={classes.centerContainer}>
+        <SearchBox />
+        <CreateButton />
+      </div>
+    )}
+  />
 );
 
 DefinedAppBar.propTypes = {
   classes: PropTypes.object.isRequired,
-  onChangeRoute: PropTypes.func.isRequired,
-};
-
-const actionCreators = {
-  changeRoute,
 };
 
 export default connectComponent(
   DefinedAppBar,
   null,
-  actionCreators,
+  null,
   styles,
 );
diff --git a/src/components/pages/home/home.js b/src/components/pages/home/home.js
new file mode 100644
index 00000000..956595d9
--- /dev/null
+++ b/src/components/pages/home/home.js
@@ -0,0 +1,185 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+/* eslint-disable no-constant-condition */
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+
+import {
+  WithSearch, Paging,
+} from '@elastic/react-search-ui';
+import '@elastic/react-search-ui-views/lib/styles/styles.css';
+
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
+import Divider from '@material-ui/core/Divider';
+
+import SearchIcon from '@material-ui/icons/Search';
+
+import connectComponent from '../../../helpers/connect-component';
+
+import EmptyState from '../../shared/empty-state';
+import NoConnection from '../../shared/no-connection';
+
+import DefinedAppBar from './defined-app-bar';
+import SecondaryToolbar from './toolbar';
+import InstalledSpaces from './installed-spaces';
+
+import AppCard from '../../shared/app-card';
+import SubmitAppCard from '../../shared/submit-app-card';
+import CreateCustomAppCard from '../../shared/create-custom-app-card';
+
+const styles = (theme) => ({
+  root: {
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'row',
+    overflow: 'hidden',
+  },
+  loading: {
+    marginTop: theme.spacing(2),
+  },
+  noMatchingResultOpts: {
+    marginTop: theme.spacing(4),
+  },
+  mainArea: {
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  scrollContainer: {
+    flex: 1,
+    overflow: 'auto',
+    padding: theme.spacing(1),
+  },
+  container: {
+    height: '100%',
+    overflow: 'hidden',
+  },
+});
+
+const Home = forwardRef(({ classes }, scrollContainerRef) => (
+  <Grid item xs className={classes.mainArea}>
+    <DefinedAppBar />
+    <SecondaryToolbar />
+    <Divider />
+    <div className={classes.scrollContainer} ref={scrollContainerRef}>
+      <Grid item xs container spacing={1} justifyContent="space-evenly">
+        <WithSearch
+          mapContextToProps={({
+            error,
+            filters,
+            isLoading,
+            results,
+            searchTerm,
+            setSearchTerm,
+            wasSearched,
+          }) => ({
+            error,
+            filters,
+            isLoading,
+            results,
+            searchTerm,
+            setSearchTerm,
+            wasSearched,
+          })}
+        >
+          {({
+            error,
+            filters,
+            isLoading,
+            results,
+            searchTerm,
+            setSearchTerm,
+            wasSearched,
+          }) => {
+            if (error) {
+              return (
+                <div className={classes.noConnectionContainer}>
+                  <NoConnection
+                    onTryAgainButtonClick={() => {
+                      setSearchTerm(searchTerm, { refresh: true, debounce: 0 });
+                    }}
+                  />
+                </div>
+              );
+            }
+
+            if (isLoading && !error && results.length < 1) {
+              return (
+                <Grid item xs={12}>
+                  <Typography
+                    variant="body2"
+                    align="center"
+                    color="textSecondary"
+                    className={classes.loading}
+                  >
+                    Loading...
+                  </Typography>
+                </Grid>
+              );
+            }
+
+            if (wasSearched && results.length < 1) {
+              return (
+                <EmptyState icon={SearchIcon} title="No Matching Results">
+                  <Typography
+                    variant="subtitle1"
+                    align="center"
+                  >
+                    Your query did not match any apps in our database.
+                  </Typography>
+                  <Grid container justifyContent="center" spacing={1} className={classes.noMatchingResultOpts}>
+                    <CreateCustomAppCard />
+                    <SubmitAppCard />
+                  </Grid>
+                </EmptyState>
+              );
+            }
+
+            const typeFilter = filters.find((filter) => filter.field === 'type');
+            const isRouteSpaces = typeFilter && typeFilter.values[0] === 'Multisite';
+            return (
+              <>
+                <CreateCustomAppCard urlDisabled={isRouteSpaces} />
+                {!isRouteSpaces && <SubmitAppCard />}
+                {isRouteSpaces && <InstalledSpaces />}
+                {results.map((app) => (
+                  <AppCard
+                    key={app.id.raw}
+                    id={app.id.raw}
+                    name={app.name.raw}
+                    url={app.url.raw}
+                    category={app.category.raw}
+                    widevine={app.widevine.raw === 1}
+                    icon={window.process.platform === 'win32' // use unplated icon for Windows
+                      ? app.icon_unplated.raw : app.icon.raw}
+                    iconThumbnail={window.process.platform === 'win32' // use unplated icon for Windows
+                      ? app.icon_unplated_128.raw : app.icon_128.raw}
+                  />
+                ))}
+                {!isRouteSpaces && (
+                  <Grid item xs={12} container justifyContent="center">
+                    <Paging />
+                  </Grid>
+                )}
+              </>
+            );
+          }}
+        </WithSearch>
+      </Grid>
+    </div>
+  </Grid>
+));
+
+Home.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default connectComponent(
+  Home,
+  null,
+  null,
+  styles,
+  { forwardRef: true },
+);
diff --git a/src/components/pages/home/index.js b/src/components/pages/home/index.js
index 956595d9..d2e92db6 100644
--- a/src/components/pages/home/index.js
+++ b/src/components/pages/home/index.js
@@ -2,184 +2,114 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 /* eslint-disable no-constant-condition */
-import React, { forwardRef } from 'react';
+import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
 
+import AppSearchAPIConnector from '@elastic/search-ui-app-search-connector';
 import {
-  WithSearch, Paging,
+  SearchProvider,
 } from '@elastic/react-search-ui';
 import '@elastic/react-search-ui-views/lib/styles/styles.css';
 
-import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
-import Divider from '@material-ui/core/Divider';
-
-import SearchIcon from '@material-ui/icons/Search';
 
 import connectComponent from '../../../helpers/connect-component';
 
-import EmptyState from '../../shared/empty-state';
-import NoConnection from '../../shared/no-connection';
-
-import DefinedAppBar from './defined-app-bar';
-import SecondaryToolbar from './toolbar';
-import InstalledSpaces from './installed-spaces';
+import Home from './home';
 
-import AppCard from '../../shared/app-card';
-import SubmitAppCard from '../../shared/submit-app-card';
-import CreateCustomAppCard from '../../shared/create-custom-app-card';
+const connector = process.env.REACT_APP_ELASTIC_CLOUD_APP_SEARCH_SEARCH_KEY
+  ? new AppSearchAPIConnector({
+    searchKey: process.env.REACT_APP_ELASTIC_CLOUD_APP_SEARCH_SEARCH_KEY,
+    engineName: process.env.REACT_APP_ELASTIC_CLOUD_APP_SEARCH_ENGINE_NAME,
+    endpointBase: process.env.REACT_APP_ELASTIC_CLOUD_APP_SEARCH_API_ENDPOINT,
+  }) : null;
 
-const styles = (theme) => ({
-  root: {
-    height: '100%',
-    display: 'flex',
-    flexDirection: 'row',
-    overflow: 'hidden',
-  },
-  loading: {
-    marginTop: theme.spacing(2),
-  },
-  noMatchingResultOpts: {
-    marginTop: theme.spacing(4),
-  },
-  mainArea: {
+const styles = () => ({
+  badConfigRoot: {
     height: '100%',
     display: 'flex',
     flexDirection: 'column',
-  },
-  scrollContainer: {
-    flex: 1,
-    overflow: 'auto',
-    padding: theme.spacing(1),
-  },
-  container: {
-    height: '100%',
     overflow: 'hidden',
+    justifyContent: 'center',
   },
 });
 
-const Home = forwardRef(({ classes }, scrollContainerRef) => (
-  <Grid item xs className={classes.mainArea}>
-    <DefinedAppBar />
-    <SecondaryToolbar />
-    <Divider />
-    <div className={classes.scrollContainer} ref={scrollContainerRef}>
-      <Grid item xs container spacing={1} justifyContent="space-evenly">
-        <WithSearch
-          mapContextToProps={({
-            error,
-            filters,
-            isLoading,
-            results,
-            searchTerm,
-            setSearchTerm,
-            wasSearched,
-          }) => ({
-            error,
-            filters,
-            isLoading,
-            results,
-            searchTerm,
-            setSearchTerm,
-            wasSearched,
-          })}
+const Container = ({
+  classes,
+}) => {
+  const scrollContainerRef = useRef(null);
+
+  if (!connector) {
+    return (
+      <div
+        className={classes.badConfigRoot}
+      >
+        <Typography
+          variant="body1"
+          align="center"
+          color="textPrimary"
         >
-          {({
-            error,
-            filters,
-            isLoading,
-            results,
-            searchTerm,
-            setSearchTerm,
-            wasSearched,
-          }) => {
-            if (error) {
-              return (
-                <div className={classes.noConnectionContainer}>
-                  <NoConnection
-                    onTryAgainButtonClick={() => {
-                      setSearchTerm(searchTerm, { refresh: true, debounce: 0 });
-                    }}
-                  />
-                </div>
-              );
-            }
+          Elastic Cloud App Search environment variables are required for &quot;Discover&quot;. Learn more at: https://github.com/webcatalog/webcatalog-app/blob/master/README.md#development
+        </Typography>
+      </div>
+    );
+  }
 
-            if (isLoading && !error && results.length < 1) {
-              return (
-                <Grid item xs={12}>
-                  <Typography
-                    variant="body2"
-                    align="center"
-                    color="textSecondary"
-                    className={classes.loading}
-                  >
-                    Loading...
-                  </Typography>
-                </Grid>
-              );
-            }
+  return (
+    <SearchProvider
+      config={{
+        apiConnector: connector,
+        onSearch: (state, queryConfig, next) => {
+          if (scrollContainerRef.current) {
+            scrollContainerRef.current.scrollTop = 0;
+          }
 
-            if (wasSearched && results.length < 1) {
-              return (
-                <EmptyState icon={SearchIcon} title="No Matching Results">
-                  <Typography
-                    variant="subtitle1"
-                    align="center"
-                  >
-                    Your query did not match any apps in our database.
-                  </Typography>
-                  <Grid container justifyContent="center" spacing={1} className={classes.noMatchingResultOpts}>
-                    <CreateCustomAppCard />
-                    <SubmitAppCard />
-                  </Grid>
-                </EmptyState>
-              );
-            }
+          const updatedState = { ...state };
+          // when searching, results should ALWAYS be listed by relevance
+          if (state.searchTerm.length > 0) {
+            updatedState.sortField = '';
+            updatedState.sortDirection = '';
+          }
 
-            const typeFilter = filters.find((filter) => filter.field === 'type');
-            const isRouteSpaces = typeFilter && typeFilter.values[0] === 'Multisite';
-            return (
-              <>
-                <CreateCustomAppCard urlDisabled={isRouteSpaces} />
-                {!isRouteSpaces && <SubmitAppCard />}
-                {isRouteSpaces && <InstalledSpaces />}
-                {results.map((app) => (
-                  <AppCard
-                    key={app.id.raw}
-                    id={app.id.raw}
-                    name={app.name.raw}
-                    url={app.url.raw}
-                    category={app.category.raw}
-                    widevine={app.widevine.raw === 1}
-                    icon={window.process.platform === 'win32' // use unplated icon for Windows
-                      ? app.icon_unplated.raw : app.icon.raw}
-                    iconThumbnail={window.process.platform === 'win32' // use unplated icon for Windows
-                      ? app.icon_unplated_128.raw : app.icon_128.raw}
-                  />
-                ))}
-                {!isRouteSpaces && (
-                  <Grid item xs={12} container justifyContent="center">
-                    <Paging />
-                  </Grid>
-                )}
-              </>
-            );
-          }}
-        </WithSearch>
-      </Grid>
-    </div>
-  </Grid>
-));
+          return next(updatedState, queryConfig);
+        },
+        initialState: {
+          sortField: '',
+          sortDirection: '',
+          filters: [],
+        },
+        alwaysSearchOnInitialLoad: true,
+        searchQuery: {
+          filters: [
+            { field: 'type', values: ['Singlesite'], type: 'all' },
+          ],
+          resultsPerPage: 82,
+          result_fields: {
+            id: { raw: {} },
+            name: { raw: {} },
+            url: { raw: {} },
+            category: { raw: {} },
+            widevine: { raw: {} },
+            icon: window.process.platform === 'win32' ? undefined : { raw: {} },
+            icon_128: window.process.platform === 'win32' ? undefined : { raw: {} },
+            icon_unplated: window.process.platform === 'win32' ? { raw: {} } : undefined,
+            icon_unplated_128: window.process.platform === 'win32' ? { raw: {} } : undefined,
+          },
+        },
+      }}
+    >
+      <Home ref={scrollContainerRef} />
+    </SearchProvider>
+  );
+};
 
-Home.propTypes = {
+Container.propTypes = {
   classes: PropTypes.object.isRequired,
 };
 
 export default connectComponent(
-  Home,
+  Container,
   null,
   null,
   styles,
-  { forwardRef: true },
 );
diff --git a/src/components/pages/installed/index.js b/src/components/pages/installed/index.js
index b0d6631f..89d76292 100644
--- a/src/components/pages/installed/index.js
+++ b/src/components/pages/installed/index.js
@@ -23,7 +23,6 @@ import RestoreAppsCard from '../../shared/restore-apps-card';
 
 import DefinedAppBar from './defined-app-bar';
 import Toolbar from './toolbar';
-import CreateCustomAppCard from '../../shared/create-custom-app-card';
 
 import { updateScrollOffset } from '../../../state/installed/actions';
 
@@ -104,9 +103,9 @@ const Installed = ({
     }
 
     if (appIds.length > 0) {
-      const totalItemCount = appIds.length + 1; // 1 more for custom app card
+      const totalItemCount = appIds.length;
       const rowHeight = 158 + 16;
-      const sidebarWidth = innerWidth < 960 ? 80 : 220;
+      const sidebarWidth = 80;
       const innerWidthMinurScrollbar = window.process.platform === 'darwin'
         ? innerWidth - sidebarWidth - 10 : innerWidth - sidebarWidth - 20;
       const columnCount = Math.floor(innerWidthMinurScrollbar / 184);
@@ -117,17 +116,9 @@ const Installed = ({
       const Cell = ({ columnIndex, rowIndex, style }) => {
         const index = rowIndex * columnCount + columnIndex;
 
-        if (index === 0) {
-          return (
-            <div className={classes.cardContainer} style={style}>
-              <CreateCustomAppCard />
-            </div>
-          );
-        }
-
         if (index >= totalItemCount) return <div style={style} />;
 
-        const appId = appIds[index - 1];
+        const appId = appIds[index];
         return (
           <div className={classes.cardContainer} style={style}>
             <AppCard
diff --git a/src/components/pages/spaces/add-card.js b/src/components/pages/spaces/add-card.js
new file mode 100644
index 00000000..bbc0767c
--- /dev/null
+++ b/src/components/pages/spaces/add-card.js
@@ -0,0 +1,83 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import Grid from '@material-ui/core/Grid';
+import Paper from '@material-ui/core/Paper';
+import Typography from '@material-ui/core/Typography';
+import AddIcon from '@material-ui/icons/Add';
+
+import connectComponent from '../../../helpers/connect-component';
+
+import { open as openDialogAddSpace } from '../../../state/dialog-add-space/actions';
+
+const styles = (theme) => ({
+  card: {
+    width: 168,
+    height: 150,
+    boxSizing: 'border-box',
+    borderRadius: 4,
+    padding: theme.spacing(1),
+    textAlign: 'center',
+    position: 'relative',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    cursor: 'pointer',
+    color: theme.palette.text.primary,
+    border: theme.palette.type === 'dark' ? 'none' : '1px solid rgba(0, 0, 0, 0.12)',
+    outline: 'none',
+    userSelect: 'none',
+    '&:hover, &:focus': {
+      backgroundColor: theme.palette.action.selected,
+    },
+  },
+  icon: {
+    fontSize: '72px',
+  },
+  desc: {
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
+    lineHeight: 'normal',
+    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(2),
+    fontWeight: 500,
+  },
+});
+
+const AddCard = ({ classes, onOpenDialogAddSpace }) => (
+  <Grid item>
+    <Paper
+      className={classes.card}
+      elevation={0}
+      role="link"
+      tabIndex="0"
+      onClick={() => onOpenDialogAddSpace()}
+    >
+      <AddIcon className={classes.icon} />
+      <Typography variant="subtitle2" className={classes.desc}>
+        Add
+      </Typography>
+    </Paper>
+  </Grid>
+);
+
+AddCard.propTypes = {
+  classes: PropTypes.object.isRequired,
+  onOpenDialogAddSpace: PropTypes.func.isRequired,
+};
+
+const actionCreators = {
+  openDialogAddSpace,
+};
+
+export default connectComponent(
+  AddCard,
+  null,
+  actionCreators,
+  styles,
+);
diff --git a/src/components/pages/categories/defined-app-bar.js b/src/components/pages/spaces/defined-app-bar.js
similarity index 98%
rename from src/components/pages/categories/defined-app-bar.js
rename to src/components/pages/spaces/defined-app-bar.js
index 3196db48..1dff91d9 100644
--- a/src/components/pages/categories/defined-app-bar.js
+++ b/src/components/pages/spaces/defined-app-bar.js
@@ -27,7 +27,7 @@ const DefinedAppBar = ({
   <EnhancedAppBar
     center={(
       <Typography variant="body1" className={classes.title}>
-        Categories
+        Spaces
       </Typography>
     )}
   />
diff --git a/src/components/pages/spaces/dialog-add-space/app-card.js b/src/components/pages/spaces/dialog-add-space/app-card.js
new file mode 100755
index 00000000..01083726
--- /dev/null
+++ b/src/components/pages/spaces/dialog-add-space/app-card.js
@@ -0,0 +1,169 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import Button from '@material-ui/core/Button';
+import Typography from '@material-ui/core/Typography';
+import Paper from '@material-ui/core/Paper';
+import IconButton from '@material-ui/core/IconButton';
+import MoreVertIcon from '@material-ui/icons/MoreVert';
+
+import connectComponent from '../../../../helpers/connect-component';
+import isUrl from '../../../../helpers/is-url';
+import { installApp } from '../../../../state/app-management/actions';
+import { close } from '../../../../state/dialog-add-space/actions';
+import { open as openDialogCreateCustomApp } from '../../../../state/dialog-create-custom-app/actions';
+
+const styles = (theme) => ({
+  card: {
+    width: '100%',
+    boxSizing: 'border-box',
+    paddingLeft: theme.spacing(1),
+    paddingRight: theme.spacing(1),
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: 52,
+    marginTop: theme.spacing(1),
+    border: theme.palette.type === 'dark' ? 'none' : '1px solid rgba(0, 0, 0, 0.12)',
+  },
+  appName: {
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
+    fontWeight: 500,
+  },
+  appUrl: {
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
+  },
+  paperIcon: {
+    width: 40,
+    height: 40,
+    borderRadius: 8,
+    border: theme.palette.type === 'dark' ? 'none' : '1px solid rgba(0, 0, 0, 0.12)',
+  },
+  actionContainer: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingLeft: theme.spacing(1),
+  },
+  actionButton: {
+    minWidth: 'auto',
+    marginLeft: theme.spacing(1),
+  },
+  infoContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    paddingLeft: theme.spacing(3),
+    paddingRight: theme.spacing(1),
+    flex: 1,
+    overflow: 'hidden',
+  },
+});
+
+const AppCard = ({
+  classes,
+  description,
+  icon,
+  icon128,
+  id,
+  name,
+  onClose,
+  onInstallApp,
+  onOpenDialogCreateCustomApp,
+  url,
+}) => (
+  <Paper elevation={0} className={classes.card} square>
+    <img
+      alt={name}
+      className={classes.paperIcon}
+      src={icon128 || (isUrl(icon) ? icon : `file://${icon}`)}
+    />
+    <div className={classes.infoContainer}>
+      <Typography variant="subtitle2" className={classes.appName}>
+        {name}
+      </Typography>
+      <Typography variant="body2" color="textSecondary" className={classes.appUrl}>
+        {description}
+      </Typography>
+    </div>
+    <div className={classes.actionContainer}>
+      <IconButton
+        size="small"
+        aria-label="More"
+        className={classes.topRight}
+        onClick={() => {
+          const template = [
+            {
+              label: 'Clone',
+              click: () => {
+                onClose();
+                onOpenDialogCreateCustomApp({
+                  name: `${name} 2`,
+                  url,
+                  urlDisabled: true,
+                  icon,
+                });
+              },
+            },
+          ];
+          const menu = window.remote.Menu.buildFromTemplate(template);
+          menu.popup({
+            window: window.remote.getCurrentWindow(),
+          });
+        }}
+      >
+        <MoreVertIcon fontSize="small" />
+      </IconButton>
+      <Button
+        className={classes.actionButton}
+        color="primary"
+        size="small"
+        variant="contained"
+        disableElevation
+        onClick={() => {
+          onInstallApp(id, name, url, icon);
+          onClose();
+        }}
+      >
+        Add
+      </Button>
+    </div>
+  </Paper>
+);
+
+AppCard.defaultProps = {
+  icon128: null,
+};
+
+AppCard.propTypes = {
+  classes: PropTypes.object.isRequired,
+  icon128: PropTypes.string,
+  icon: PropTypes.string.isRequired,
+  id: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired,
+  url: PropTypes.string.isRequired,
+  onClose: PropTypes.func.isRequired,
+  onInstallApp: PropTypes.func.isRequired,
+  onOpenDialogCreateCustomApp: PropTypes.func.isRequired,
+};
+
+const actionCreators = {
+  close,
+  installApp,
+  openDialogCreateCustomApp,
+};
+
+export default connectComponent(
+  AppCard,
+  null,
+  actionCreators,
+  styles,
+);
diff --git a/src/components/pages/spaces/dialog-add-space/create-custom-space-card.js b/src/components/pages/spaces/dialog-add-space/create-custom-space-card.js
new file mode 100755
index 00000000..ad8e35ee
--- /dev/null
+++ b/src/components/pages/spaces/dialog-add-space/create-custom-space-card.js
@@ -0,0 +1,106 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
+import Paper from '@material-ui/core/Paper';
+import AddCircleIcon from '@material-ui/icons/AddCircle';
+
+import connectComponent from '../../../../helpers/connect-component';
+
+import { open as openDialogCreateCustomApp } from '../../../../state/dialog-create-custom-app/actions';
+import { close as closeDialogAddSpace } from '../../../../state/dialog-add-space/actions';
+
+const styles = (theme) => ({
+  card: {
+    width: '100%',
+    boxSizing: 'border-box',
+    borderRadius: 4,
+    padding: theme.spacing(1.5),
+    display: 'flex',
+    cursor: 'pointer',
+    color: theme.palette.text.primary,
+    border: theme.palette.type === 'dark' ? 'none' : '1px solid rgba(0, 0, 0, 0.12)',
+    '&:hover, &:focus': {
+      backgroundColor: theme.palette.action.selected,
+    },
+    textAlign: 'left',
+  },
+  appName: {
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
+    lineHeight: 1,
+    fontWeight: 500,
+  },
+  appUrl: {
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
+  },
+  paperIcon: {
+    fontSize: '64px',
+  },
+  infoContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    paddingLeft: theme.spacing(1),
+    paddingRight: theme.spacing(1),
+    flex: 1,
+  },
+});
+
+const SubmitAppCard = (props) => {
+  const {
+    classes,
+    onOpenDialogCreateCustomApp,
+    onCloseDialogAddSpace,
+  } = props;
+
+  return (
+    <Grid item xs={12}>
+      <Paper
+        elevation={0}
+        className={classes.card}
+        onClick={() => {
+          onCloseDialogAddSpace();
+          onOpenDialogCreateCustomApp({ urlDisabled: true });
+        }}
+      >
+        <div>
+          <AddCircleIcon className={classes.paperIcon} />
+        </div>
+        <div className={classes.infoContainer}>
+          <Typography variant="subtitle1" className={classes.appName}>
+            Create Custom Space
+          </Typography>
+          <Typography variant="body2" color="textSecondary" className={classes.appUrl}>
+            Create custom space with your preferred name and icon.
+          </Typography>
+        </div>
+      </Paper>
+    </Grid>
+  );
+};
+
+SubmitAppCard.propTypes = {
+  classes: PropTypes.object.isRequired,
+  onOpenDialogCreateCustomApp: PropTypes.func.isRequired,
+  onCloseDialogAddSpace: PropTypes.func.isRequired,
+};
+
+const actionCreators = {
+  openDialogCreateCustomApp,
+  closeDialogAddSpace,
+};
+
+export default connectComponent(
+  SubmitAppCard,
+  null,
+  actionCreators,
+  styles,
+);
diff --git a/src/components/pages/spaces/dialog-add-space/empty-state.js b/src/components/pages/spaces/dialog-add-space/empty-state.js
new file mode 100755
index 00000000..48af9194
--- /dev/null
+++ b/src/components/pages/spaces/dialog-add-space/empty-state.js
@@ -0,0 +1,78 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Typography from '@material-ui/core/Typography';
+import { withStyles } from '@material-ui/core/styles';
+
+const styles = {
+  root: {
+    alignItems: 'center',
+    display: 'flex',
+    flex: 1,
+    flexDirection: 'column',
+    justifyContent: 'center',
+    width: '100%',
+  },
+  title: {
+    marginBottom: 8,
+  },
+  icon: {
+    height: 112,
+    width: 112,
+  },
+};
+
+const EmptyState = (props) => {
+  const {
+    children,
+    classes,
+    icon,
+    title,
+  } = props;
+
+  const Icon = icon;
+
+  return (
+    <div className={classes.root}>
+      <Icon className={classes.icon} color="disabled" />
+      <br />
+      {title && (
+        <Typography
+          className={classes.title}
+          variant="h6"
+        >
+          {title}
+        </Typography>
+      )}
+      {typeof children === 'string' ? (
+        <Typography
+          variant="subtitle1"
+          align="center"
+        >
+          {children}
+        </Typography>
+      ) : children}
+    </div>
+  );
+};
+
+EmptyState.defaultProps = {
+  children: null,
+  title: null,
+};
+
+EmptyState.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.element),
+    PropTypes.element,
+    PropTypes.string,
+  ]),
+  classes: PropTypes.object.isRequired,
+  icon: PropTypes.object.isRequired,
+  title: PropTypes.string,
+};
+
+export default withStyles(styles, { name: 'EmptyState' })(EmptyState);
diff --git a/src/components/pages/spaces/dialog-add-space/home.js b/src/components/pages/spaces/dialog-add-space/home.js
new file mode 100644
index 00000000..c6cf40a3
--- /dev/null
+++ b/src/components/pages/spaces/dialog-add-space/home.js
@@ -0,0 +1,254 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+import React, { useRef } from 'react';
+import PropTypes from 'prop-types';
+
+import AppSearchAPIConnector from '@elastic/search-ui-app-search-connector';
+import { SearchProvider, WithSearch, Paging } from '@elastic/react-search-ui';
+import '@elastic/react-search-ui-views/lib/styles/styles.css';
+
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
+import SearchIcon from '@material-ui/icons/Search';
+import CircularProgress from '@material-ui/core/CircularProgress';
+
+import connectComponent from '../../../../helpers/connect-component';
+
+import AppCard from './app-card';
+import NoConnection from './no-connection';
+import EmptyState from './empty-state';
+import CreateCustomSpaceCard from './create-custom-space-card';
+
+const styles = (theme) => ({
+  paper: {
+    zIndex: 1,
+  },
+  scrollContainer: {
+    flex: 1,
+    padding: 0,
+    overflow: 'auto',
+  },
+  grid: {
+    marginBottom: theme.spacing(1),
+  },
+  homeContainer: {
+    flex: 1,
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100%',
+    overflow: 'hidden',
+  },
+  badConfigContainer: {
+    flex: 1,
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100%',
+    overflow: 'hidden',
+    justifyContent: 'center',
+    padding: theme.spacing(1),
+  },
+  contentContainer: {
+    padding: theme.spacing(1),
+  },
+  progressContainer: {
+    position: 'absolute',
+    bottom: 5,
+    left: 5,
+    zIndex: 2,
+  },
+});
+
+const connector = process.env.REACT_APP_ELASTIC_CLOUD_APP_SEARCH_SEARCH_KEY
+  ? new AppSearchAPIConnector({
+    searchKey: process.env.REACT_APP_ELASTIC_CLOUD_APP_SEARCH_SEARCH_KEY,
+    engineName: process.env.REACT_APP_ELASTIC_CLOUD_APP_SEARCH_ENGINE_NAME,
+    endpointBase: process.env.REACT_APP_ELASTIC_CLOUD_APP_SEARCH_API_ENDPOINT,
+  }) : null;
+
+const filters = [
+  { field: 'type', values: ['Multisite'], type: 'all' },
+];
+
+const Home = ({ classes, installedAppIds }) => {
+  const scrollContainerRef = useRef(null);
+
+  if (!connector) {
+    return (
+      <div className={classes.badConfigContainer}>
+        <Typography
+          variant="body1"
+          align="center"
+          color="textPrimary"
+        >
+          AppSearch environment variables are required for &quot;Catalog&quot;. Learn more at: https://github.com/webcatalog/webcatalog-app/blob/master/README.md#development
+        </Typography>
+      </div>
+    );
+  }
+
+  return (
+    <SearchProvider
+      config={{
+        apiConnector: connector,
+        onSearch: (state, queryConfig, next) => {
+          if (scrollContainerRef.current) {
+            scrollContainerRef.current.scrollTop = 0;
+          }
+
+          return next(state, queryConfig);
+        },
+        initialState: {
+          resultsPerPage: 60,
+          sortField: '',
+          sortDirection: '',
+        },
+        alwaysSearchOnInitialLoad: true,
+        searchQuery: {
+          filters,
+          result_fields: {
+            id: { raw: {} },
+            name: { raw: {} },
+            description: { raw: {} },
+            url: { raw: {} },
+            icon: window.process.platform === 'win32' ? undefined : { raw: {} },
+            icon_unplated: window.process.platform === 'win32' ? { raw: {} } : undefined,
+            icon_filled_128: { raw: {} },
+          },
+        },
+      }}
+    >
+      <div className={classes.homeContainer}>
+        <div
+          className={classes.scrollContainer}
+          ref={scrollContainerRef}
+        >
+          <WithSearch
+            mapContextToProps={({
+              error,
+              isLoading,
+              results,
+              searchTerm,
+              setSearchTerm,
+              wasSearched,
+            }) => ({
+              error,
+              isLoading,
+              results,
+              searchTerm,
+              setSearchTerm,
+              wasSearched,
+            })}
+          >
+            {({
+              error,
+              isLoading,
+              results,
+              searchTerm,
+              setSearchTerm,
+              wasSearched,
+            }) => {
+              if (error) {
+                return (
+                  <div className={classes.contentContainer}>
+                    <NoConnection
+                      onTryAgainButtonClick={() => {
+                        setSearchTerm(searchTerm, {
+                          refresh: true,
+                          debounce: 0,
+                          shouldClearFilters: false,
+                        });
+                      }}
+                    />
+                  </div>
+                );
+              }
+
+              if (isLoading && results.length < 1) {
+                return (
+                  <div className={classes.contentContainer}>
+                    <Typography
+                      variant="body2"
+                      align="center"
+                      color="textSecondary"
+                      className={classes.loading}
+                    >
+                      Loading...
+                    </Typography>
+                  </div>
+                );
+              }
+
+              if (wasSearched && results.length < 1) {
+                return (
+                  <div className={classes.contentContainer}>
+                    <EmptyState icon={SearchIcon} title="No Matching Results">
+                      <Typography
+                        variant="subtitle1"
+                        align="center"
+                      >
+                        Your query did not match any spaces in our database.
+                      </Typography>
+                    </EmptyState>
+                  </div>
+                );
+              }
+
+              return (
+                <>
+                  <CreateCustomSpaceCard />
+                  {results.map((app) => installedAppIds.indexOf(app.id.raw) < 0 && (
+                    <AppCard
+                      key={app.id.raw}
+                      id={app.id.raw}
+                      name={app.name.raw}
+                      description={app.description.raw}
+                      url={app.url.raw}
+                      icon={window.process.platform === 'win32' // use unplated icon for Windows
+                        ? app.icon_unplated.raw : app.icon.raw}
+                      icon128={app.icon_filled_128.raw}
+                    />
+                  ))}
+                  <Grid container justify="center">
+                    <Paging />
+                  </Grid>
+                </>
+              );
+            }}
+          </WithSearch>
+        </div>
+        <WithSearch
+          mapContextToProps={({ isLoading }) => ({ isLoading })}
+        >
+          {({ isLoading }) => (
+            <>
+              {isLoading && (
+                <div className={classes.progressContainer}>
+                  <CircularProgress size={20} />
+                </div>
+              )}
+            </>
+          )}
+        </WithSearch>
+      </div>
+    </SearchProvider>
+  );
+};
+
+Home.defaultProps = {};
+
+Home.propTypes = {
+  classes: PropTypes.object.isRequired,
+  installedAppIds: PropTypes.arrayOf(PropTypes.string).isRequired,
+};
+
+const mapStateToProps = (state) => ({
+  installedAppIds: state.appManagement.sortedAppIds,
+});
+
+export default connectComponent(
+  Home,
+  mapStateToProps,
+  null,
+  styles,
+);
diff --git a/src/components/pages/spaces/dialog-add-space/index.js b/src/components/pages/spaces/dialog-add-space/index.js
new file mode 100644
index 00000000..491bdfa2
--- /dev/null
+++ b/src/components/pages/spaces/dialog-add-space/index.js
@@ -0,0 +1,65 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  Typography,
+  IconButton,
+} from '@material-ui/core';
+import CloseIcon from '@material-ui/icons/Close';
+
+import connectComponent from '../../../../helpers/connect-component';
+import { close } from '../../../../state/dialog-add-space/actions';
+
+import Home from './home';
+
+const styles = (theme) => ({
+  closeButton: {
+    position: 'absolute',
+    right: theme.spacing(1),
+    top: theme.spacing(1),
+    color: theme.palette.grey[500],
+  },
+});
+
+const DialogAddSpace = ({ open, onClose, classes }) => (
+  <Dialog onClose={onClose} aria-labelledby="dialog-add-space-title" open={open} fullWidth maxWidth="sm">
+    <DialogTitle id="dialog-add-space-title" onClose={onClose}>
+      <Typography variant="h6">Add Space</Typography>
+      {onClose ? (
+        <IconButton aria-label="close" className={classes.closeButton} onClick={onClose}>
+          <CloseIcon />
+        </IconButton>
+      ) : null}
+    </DialogTitle>
+    <DialogContent dividers>
+      {open && <Home />}
+    </DialogContent>
+  </Dialog>
+);
+
+DialogAddSpace.propTypes = {
+  classes: PropTypes.object.isRequired,
+  open: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+};
+
+const mapStateToProps = (state) => ({
+  open: state.dialogAddSpace.open,
+});
+
+const actionCreator = {
+  close,
+};
+
+export default connectComponent(
+  DialogAddSpace,
+  mapStateToProps,
+  actionCreator,
+  styles,
+);
diff --git a/src/components/pages/spaces/dialog-add-space/no-connection.js b/src/components/pages/spaces/dialog-add-space/no-connection.js
new file mode 100755
index 00000000..31122300
--- /dev/null
+++ b/src/components/pages/spaces/dialog-add-space/no-connection.js
@@ -0,0 +1,68 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Button from '@material-ui/core/Button';
+import ErrorIcon from '@material-ui/icons/Error';
+import Typography from '@material-ui/core/Typography';
+import { withStyles } from '@material-ui/core/styles';
+
+const styles = {
+  root: {
+    alignItems: 'center',
+    display: 'flex',
+    flex: 1,
+    flexDirection: 'column',
+    height: '100%',
+    width: '100%',
+  },
+  icon: {
+    height: 64,
+    width: 64,
+  },
+  tryAgainButton: {
+    marginTop: 16,
+  },
+};
+
+const NoConnection = (props) => {
+  const {
+    classes,
+    onTryAgainButtonClick,
+  } = props;
+
+  return (
+    <div className={classes.root}>
+      <ErrorIcon className={classes.icon} color="disabled" />
+      <br />
+      <Typography
+        color="textSecondary"
+        variant="h6"
+      >
+        Failed to Connect to Server
+      </Typography>
+      <Typography
+        align="center"
+        variant="subtitle1"
+      >
+        Please check your Internet connection.
+      </Typography>
+      <Button
+        className={classes.tryAgainButton}
+        color="primary"
+        onClick={onTryAgainButtonClick}
+      >
+        Try Again
+      </Button>
+    </div>
+  );
+};
+
+NoConnection.propTypes = {
+  classes: PropTypes.object.isRequired,
+  onTryAgainButtonClick: PropTypes.func.isRequired,
+};
+
+export default withStyles(styles, { name: 'NoConnection' })(NoConnection);
diff --git a/src/components/pages/spaces/index.js b/src/components/pages/spaces/index.js
new file mode 100644
index 00000000..fff0d9bf
--- /dev/null
+++ b/src/components/pages/spaces/index.js
@@ -0,0 +1,77 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Typography, Grid } from '@material-ui/core';
+
+import connectComponent from '../../../helpers/connect-component';
+
+import DefinedAppBar from './defined-app-bar';
+import InstalledSpaces from './installed-spaces';
+import AddCard from './add-card';
+import DialogAddSpace from './dialog-add-space';
+
+const styles = (theme) => ({
+  root: {
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    overflow: 'hidden',
+    flex: 1,
+  },
+  scrollContainer: {
+    flex: 1,
+    paddingTop: theme.spacing(6),
+    paddingBottom: theme.spacing(6),
+    paddingLeft: theme.spacing(2),
+    paddingRight: theme.spacing(2),
+    overflow: 'auto',
+    boxSizing: 'border-box',
+  },
+  descriptionContainer: {
+    margin: '0 auto',
+    textAlign: 'center',
+  },
+  gridContainer: {
+    paddingTop: theme.spacing(15),
+  },
+});
+
+const Preferences = ({
+  classes,
+}) => (
+  <div className={classes.root}>
+    <DefinedAppBar />
+    <div className={classes.scrollContainer}>
+      <div className={classes.descriptionContainer}>
+        <Typography variant="body1" color="textSecondary">
+          With WebCatalog Spaces, you can organize your apps into
+          separate distraction-free environments.
+          <br />
+          Create spaces for friends and family, or split between work and play.
+        </Typography>
+      </div>
+
+      <div className={classes.gridContainer}>
+        <Grid item xs container spacing={1} justifyContent="center">
+          <InstalledSpaces />
+          <AddCard />
+        </Grid>
+      </div>
+    </div>
+    <DialogAddSpace />
+  </div>
+);
+
+Preferences.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default connectComponent(
+  Preferences,
+  null,
+  null,
+  styles,
+);
diff --git a/src/components/pages/spaces/installed-spaces.js b/src/components/pages/spaces/installed-spaces.js
new file mode 100644
index 00000000..3c836bbe
--- /dev/null
+++ b/src/components/pages/spaces/installed-spaces.js
@@ -0,0 +1,59 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import connectComponent from '../../../helpers/connect-component';
+import AppCard from '../../shared/app-card';
+
+// only map app obj to each wrapper
+// to avoid re-rendering the whole list (apps changed very often)
+const AppCardWrapper = ({ isSpace, id }) => {
+  if (!isSpace) return null;
+  return (
+    <AppCard
+      id={id}
+      simple
+    />
+  );
+};
+
+AppCardWrapper.propTypes = {
+  isSpace: PropTypes.bool.isRequired,
+  id: PropTypes.string.isRequired,
+};
+
+const LinkedAppCardWrapper = connectComponent(
+  AppCardWrapper,
+  (state, ownProps) => ({
+    isSpace: state.appManagement.apps[ownProps.id]
+      && !state.appManagement.apps[ownProps.id].url,
+  }),
+);
+
+const InstalledSpaces = ({ sortedAppIds }) => (
+  <>
+    {sortedAppIds.map((appId) => (
+      <LinkedAppCardWrapper
+        key={appId}
+        id={appId}
+      />
+    ))}
+  </>
+);
+
+InstalledSpaces.propTypes = {
+  sortedAppIds: PropTypes.arrayOf(PropTypes.string).isRequired,
+};
+
+const mapStateToProps = (state) => ({
+  sortedAppIds: state.appManagement.sortedAppIds,
+});
+
+export default connectComponent(
+  InstalledSpaces,
+  mapStateToProps,
+  null,
+  null,
+);
diff --git a/src/components/root/container.js b/src/components/root/container.js
index 856db069..580eb26b 100644
--- a/src/components/root/container.js
+++ b/src/components/root/container.js
@@ -2,41 +2,27 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
 /* eslint-disable no-constant-condition */
-import React, { useRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 
-import AppSearchAPIConnector from '@elastic/search-ui-app-search-connector';
-import {
-  SearchProvider,
-} from '@elastic/react-search-ui';
-import '@elastic/react-search-ui-views/lib/styles/styles.css';
-
 import Grid from '@material-ui/core/Grid';
-import Typography from '@material-ui/core/Typography';
 
 import connectComponent from '../../helpers/connect-component';
 
 import {
-  ROUTE_CATEGORIES,
   ROUTE_HOME,
   ROUTE_INSTALLED,
   ROUTE_PREFERENCES,
+  ROUTE_SPACES,
 } from '../../constants/routes';
 
 import Preferences from '../pages/preferences';
 import Installed from '../pages/installed';
-import Categories from '../pages/categories';
 import Home from '../pages/home';
+import Spaces from '../pages/spaces';
 
 import Sidebar from './sidebar';
 
-const connector = process.env.REACT_APP_ELASTIC_CLOUD_APP_SEARCH_SEARCH_KEY
-  ? new AppSearchAPIConnector({
-    searchKey: process.env.REACT_APP_ELASTIC_CLOUD_APP_SEARCH_SEARCH_KEY,
-    engineName: process.env.REACT_APP_ELASTIC_CLOUD_APP_SEARCH_ENGINE_NAME,
-    endpointBase: process.env.REACT_APP_ELASTIC_CLOUD_APP_SEARCH_API_ENDPOINT,
-  }) : null;
-
 const styles = (theme) => ({
   root: {
     height: '100%',
@@ -74,87 +60,20 @@ const styles = (theme) => ({
   },
 });
 
-const filters = [];
-
 const Container = ({
   classes,
   route,
-}) => {
-  const scrollContainerRef = useRef(null);
-
-  if (!connector) {
-    return (
-      <div
-        className={classes.badConfigRoot}
-      >
-        <Typography
-          variant="body1"
-          align="center"
-          color="textPrimary"
-        >
-          Elastic Cloud App Search environment variables are required for &quot;Discover&quot;. Learn more at: https://github.com/webcatalog/webcatalog-app/blob/master/README.md#development
-        </Typography>
-      </div>
-    );
-  }
-
-  return (
-    <SearchProvider
-      config={{
-        apiConnector: connector,
-        onSearch: (state, queryConfig, next) => {
-          if (scrollContainerRef.current) {
-            scrollContainerRef.current.scrollTop = 0;
-          }
-
-          const updatedState = { ...state };
-          // when searching, results should ALWAYS be listed by relevance
-          if (state.searchTerm.length > 0) {
-            updatedState.sortField = '';
-            updatedState.sortDirection = '';
-          }
-
-          return next(updatedState, queryConfig);
-        },
-        initialState: {
-          sortField: '',
-          sortDirection: '',
-          filters: [],
-        },
-        alwaysSearchOnInitialLoad: true,
-        searchQuery: {
-          resultsPerPage: 58,
-          disjunctiveFacets: ['category'],
-          result_fields: {
-            id: { raw: {} },
-            name: { raw: {} },
-            url: { raw: {} },
-            category: { raw: {} },
-            widevine: { raw: {} },
-            icon: window.process.platform === 'win32' ? undefined : { raw: {} },
-            icon_128: window.process.platform === 'win32' ? undefined : { raw: {} },
-            icon_unplated: window.process.platform === 'win32' ? { raw: {} } : undefined,
-            icon_unplated_128: window.process.platform === 'win32' ? { raw: {} } : undefined,
-          },
-          facets: {
-            category: { type: 'value', size: 30 },
-          },
-          filters,
-        },
-      }}
-    >
-      <div className={classes.root}>
-        <Sidebar />
-        <Grid container className={classes.container}>
-          {route === ROUTE_CATEGORIES && <Categories />}
-          {route === ROUTE_INSTALLED && <Installed />}
-          {route === ROUTE_PREFERENCES && <Preferences />}
-          {route === ROUTE_HOME && <Home ref={scrollContainerRef} />}
-        </Grid>
-      </div>
-    </SearchProvider>
-  );
-};
+}) => (
+  <div className={classes.root}>
+    <Sidebar />
+    <Grid container className={classes.container}>
+      {route === ROUTE_INSTALLED && <Installed />}
+      {route === ROUTE_SPACES && <Spaces />}
+      {route === ROUTE_PREFERENCES && <Preferences />}
+      {route === ROUTE_HOME && <Home />}
+    </Grid>
+  </div>
+);
 
 Container.propTypes = {
   classes: PropTypes.object.isRequired,
diff --git a/src/components/root/sidebar/index.js b/src/components/root/sidebar/index.js
index a66e8960..a658b73b 100644
--- a/src/components/root/sidebar/index.js
+++ b/src/components/root/sidebar/index.js
@@ -6,9 +6,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
 
-import {
-  WithSearch,
-} from '@elastic/react-search-ui';
 import '@elastic/react-search-ui-views/lib/styles/styles.css';
 
 import Grid from '@material-ui/core/Grid';
@@ -21,35 +18,32 @@ import Tooltip from '@material-ui/core/Tooltip';
 
 import AppsIcon from '@material-ui/icons/Apps';
 import OfflinePinIcon from '@material-ui/icons/OfflinePin';
-import GroupWorkIcon from '@material-ui/icons/GroupWork';
-import CategoryIcon from '@material-ui/icons/Category';
 import SettingsIcon from '@material-ui/icons/Settings';
 
+import SpaceIcon from '../../shared/space-icon';
+
 import connectComponent from '../../../helpers/connect-component';
 
 import { changeRoute } from '../../../state/router/actions';
 import { getAppBadgeCount } from '../../../state/app-management/utils';
 
 import {
-  ROUTE_CATEGORIES,
   ROUTE_HOME,
   ROUTE_INSTALLED,
   ROUTE_PREFERENCES,
+  ROUTE_SPACES,
 } from '../../../constants/routes';
 
 import ListItemAccount from './list-item-account';
 
 const styles = (theme) => ({
   sidebar: {
-    width: 220,
+    width: 80,
     backgroundColor: theme.palette.type === 'dark' ? theme.palette.grey[900] : theme.palette.grey[800],
     color: theme.palette.common.white,
     height: '100%',
     overflow: 'auto',
     paddingTop: 0,
-    [theme.breakpoints.down('sm')]: {
-      width: 80,
-    },
   },
   sidebarInner: {
     display: 'flex',
@@ -60,26 +54,24 @@ const styles = (theme) => ({
     flex: 1,
     paddingTop: 0,
   },
-  listItemSelected: {
-    backgroundColor: `${theme.palette.type === 'dark' ? theme.palette.common.black : theme.palette.grey[900]} !important`,
-  },
   sidebarTop: {
     height: 40,
     WebkitAppRegion: 'drag',
     userSelect: 'none',
   },
+  listItem: {
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  listItemSelected: {
+    backgroundColor: `${theme.palette.type === 'dark' ? theme.palette.common.black : theme.palette.grey[900]} !important`,
+  },
   listItemIcon: {
     color: theme.palette.common.white,
-    [theme.breakpoints.down('sm')]: {
-      margin: '0 auto',
-      minWidth: 0,
-    },
-  },
-  listItemText: {
-    [theme.breakpoints.down('sm')]: {
-      display: 'none',
-    },
+    margin: '0 auto',
+    minWidth: 'auto',
   },
+  listItemTextPrimary: theme.typography.body2,
 });
 
 const Home = ({
@@ -97,18 +89,14 @@ const Home = ({
     },
     spaces: {
       text: 'Spaces',
-      Icon: GroupWorkIcon,
-    },
-    categories: {
-      text: 'Categories',
-      Icon: CategoryIcon,
+      Icon: SpaceIcon,
     },
     updates: {
       text: 'Installed',
       Icon: OfflinePinIcon,
     },
     preferences: {
-      text: 'Preferences',
+      text: 'Settings',
       Icon: SettingsIcon,
     },
   };
@@ -117,123 +105,85 @@ const Home = ({
     <Grid item className={classes.sidebar}>
       <div className={classes.sidebarInner}>
         <div className={classes.sidebarTop} />
-        <WithSearch
-          mapContextToProps={({
-            filters,
-            clearFilters,
-            setFilter,
-            setSearchTerm,
-          }) => ({
-            filters,
-            clearFilters,
-            setFilter,
-            setSearchTerm,
-          })}
-        >
-          {({
-            filters,
-            clearFilters,
-            setFilter,
-            setSearchTerm,
-          }) => {
-            const typeFilter = filters.find((filter) => filter.field === 'type');
-            const categoryFilter = filters.find((filter) => filter.field === 'category');
-
-            return (
-              <List className={classes.sidebarListTop}>
-                {Object.keys(mainSections).map((sectionKey) => {
-                  const {
-                    Icon, text, hidden,
-                  } = mainSections[sectionKey];
-                  if (hidden) return null;
-
-                  const selected = (() => {
-                    if (sectionKey === 'updates') {
-                      return route === ROUTE_INSTALLED;
-                    }
-
-                    if (sectionKey === 'preferences') {
-                      return route === ROUTE_PREFERENCES;
-                    }
-
-                    if (sectionKey === 'all') {
-                      return route === ROUTE_HOME
-                        && categoryFilter == null && typeFilter == null;
-                    }
-
-                    if (sectionKey === 'spaces') {
-                      return route === ROUTE_HOME
-                        && typeFilter && typeFilter.values[0] === 'Multisite';
-                    }
-
-                    if (sectionKey === 'categories') {
-                      return route === ROUTE_CATEGORIES
-                        || (route === ROUTE_HOME && categoryFilter != null);
-                    }
-
-                    return false;
-                  })();
-
-                  const listItem = (
-                    <ListItem
-                      button
-                      key={sectionKey}
-                      onClick={() => {
-                        if (sectionKey === 'all') {
-                          onChangeRoute(ROUTE_HOME);
-                          clearFilters();
-                        } else if (sectionKey === 'categories') {
-                          onChangeRoute(ROUTE_CATEGORIES);
-                        } else if (sectionKey === 'updates') {
-                          onChangeRoute(ROUTE_INSTALLED);
-                        } else if (sectionKey === 'preferences') {
-                          onChangeRoute(ROUTE_PREFERENCES);
-                        } else if (sectionKey === 'spaces') {
-                          clearFilters('type'); // clear all filters except type filter
-                          setSearchTerm('');
-                          setFilter('type', 'Multisite', 'all');
-                          onChangeRoute(ROUTE_HOME);
-                        }
-                      }}
-                      title={text}
-                      selected={selected}
-                      classes={{
-                        selected: classes.listItemSelected,
-                      }}
-                    >
-                      <ListItemIcon classes={{ root: classes.listItemIcon }}>
-                        {sectionKey === 'updates' ? (
-                          <Badge color="secondary" badgeContent={appBadgeCount}>
-                            <Icon fontSize="medium" />
-                          </Badge>
-                        ) : (
-                          <Icon fontSize="medium" />
-                        )}
-                      </ListItemIcon>
-                      <ListItemText
-                        primary={text}
-                        className={classes.listItemText}
-                      />
-                    </ListItem>
-                  );
-
-                  if (showTooltip) {
-                    return (
-                      <Tooltip key={text} title={text} placement="right" arrow>
-                        {listItem}
-                      </Tooltip>
-                    );
+        <List className={classes.sidebarListTop}>
+          {Object.keys(mainSections).map((sectionKey) => {
+            const {
+              Icon, text, hidden,
+            } = mainSections[sectionKey];
+            if (hidden) return null;
+
+            const selected = (() => {
+              if (sectionKey === 'updates') {
+                return route === ROUTE_INSTALLED;
+              }
+
+              if (sectionKey === 'preferences') {
+                return route === ROUTE_PREFERENCES;
+              }
+
+              if (sectionKey === 'all') {
+                return route === ROUTE_HOME;
+              }
+
+              if (sectionKey === 'spaces') {
+                return route === ROUTE_SPACES;
+              }
+
+              return false;
+            })();
+
+            const listItem = (
+              <ListItem
+                button
+                key={sectionKey}
+                onClick={() => {
+                  if (sectionKey === 'all') {
+                    onChangeRoute(ROUTE_HOME);
+                  } else if (sectionKey === 'updates') {
+                    onChangeRoute(ROUTE_INSTALLED);
+                  } else if (sectionKey === 'preferences') {
+                    onChangeRoute(ROUTE_PREFERENCES);
+                  } else if (sectionKey === 'spaces') {
+                    onChangeRoute(ROUTE_SPACES);
                   }
-
-                  return listItem;
-                })}
-              </List>
+                }}
+                title={text}
+                selected={selected}
+                classes={{
+                  root: classes.listItem,
+                  selected: classes.listItemSelected,
+                }}
+              >
+                <ListItemIcon classes={{ root: classes.listItemIcon }}>
+                  {sectionKey === 'updates' ? (
+                    <Badge color="secondary" badgeContent={appBadgeCount}>
+                      <Icon fontSize="medium" />
+                    </Badge>
+                  ) : (
+                    <Icon fontSize="medium" />
+                  )}
+                </ListItemIcon>
+                <ListItemText
+                  primary={text}
+                  classes={{
+                    primary: classes.listItemTextPrimary,
+                  }}
+                />
+              </ListItem>
             );
-          }}
-        </WithSearch>
-        <List>
-          <ListItemAccount />
+
+            if (showTooltip) {
+              return (
+                <Tooltip key={text} title={text} placement="right" arrow>
+                  {listItem}
+                </Tooltip>
+              );
+            }
+
+            return listItem;
+          })}
         </List>
+        <ListItemAccount />
       </div>
     </Grid>
   );
diff --git a/src/components/root/sidebar/list-item-account.js b/src/components/root/sidebar/list-item-account.js
index d51869c3..00dab5bb 100644
--- a/src/components/root/sidebar/list-item-account.js
+++ b/src/components/root/sidebar/list-item-account.js
@@ -4,20 +4,20 @@
 /* eslint-disable no-constant-condition */
 import React from 'react';
 import PropTypes from 'prop-types';
-import useMediaQuery from '@material-ui/core/useMediaQuery';
-import { getAuth } from 'firebase/auth';
+// import useMediaQuery from '@material-ui/core/useMediaQuery';
+// import { getAuth } from 'firebase/auth';
 
-import Avatar from '@material-ui/core/Avatar';
+// import Avatar from '@material-ui/core/Avatar';
 import Button from '@material-ui/core/Button';
-import ListItem from '@material-ui/core/ListItem';
-import ListItemAvatar from '@material-ui/core/ListItemAvatar';
-import ListItemText from '@material-ui/core/ListItemText';
-import Tooltip from '@material-ui/core/Tooltip';
-import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
+// import ListItem from '@material-ui/core/ListItem';
+// import ListItemAvatar from '@material-ui/core/ListItemAvatar';
+// import ListItemText from '@material-ui/core/ListItemText';
+// import Tooltip from '@material-ui/core/Tooltip';
+// import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
 
-import {
-  requestOpenInBrowser,
-} from '../../../senders';
+// import {
+//   requestOpenInBrowser,
+// } from '../../../senders';
 
 import { open as openDialogLicenseRegistration } from '../../../state/dialog-license-registration/actions';
 
@@ -26,164 +26,136 @@ import connectComponent from '../../../helpers/connect-component';
 import '../../../firebase';
 
 const styles = (theme) => ({
-  upgradeListItem: {
-    [theme.breakpoints.down('sm')]: {
-      display: 'none',
-    },
-  },
-  listItemIcon: {
-    color: theme.palette.common.white,
-    [theme.breakpoints.down('sm')]: {
-      margin: '0 auto',
-      minWidth: 0,
-    },
-  },
-  listItemText: {
-    userSelect: 'none',
-    [theme.breakpoints.down('sm')]: {
-      display: 'none',
-    },
-  },
-  profilePrimaryText: {
-    whiteSpace: 'nowrap',
-    textOverflow: 'ellipsis',
-    overflow: 'hidden',
-  },
-  profileSecondaryText: {
-    whiteSpace: 'nowrap',
-    textOverflow: 'ellipsis',
-    overflow: 'hidden',
-    color: 'rgba(255, 255, 255, 0.7)',
+  container: {
+    paddingBottom: theme.spacing(1),
+    display: 'flex',
+    justifyContent: 'center',
   },
+  // listItemIcon: {
+  //   color: theme.palette.common.white,
+  // },
+  // listItemText: {
+  //   userSelect: 'none',
+  // },
+  // profilePrimaryText: {
+  //   whiteSpace: 'nowrap',
+  //   textOverflow: 'ellipsis',
+  //   overflow: 'hidden',
+  // },
+  // profileSecondaryText: {
+  //   whiteSpace: 'nowrap',
+  //   textOverflow: 'ellipsis',
+  //   overflow: 'hidden',
+  //   color: 'rgba(255, 255, 255, 0.7)',
+  // },
 });
 
 const SectionAccount = ({
-  currentPlan,
   classes,
-  displayName,
-  isSignedIn,
-  photoURL,
   registered,
   onOpenDialogLicenseRegistration,
 }) => {
-  const showTooltip = useMediaQuery((theme) => theme.breakpoints.down('sm'));
-
-  let planName = 'Basic';
-  if (currentPlan === 'pro') planName = 'Pro';
-  else if (registered) planName = 'Lifetime';
-
-  if (!isSignedIn) {
-    const loginListItem = (
-      <ListItem
-        dense
-        classes={{ container: classes.upgradeListItem }}
-      >
-        <ListItemText
-          className={classes.listItemText}
-          primary={registered ? 'Lifetime Plan' : 'Basic Plan'}
-        />
-        {!registered && (
-          <ListItemSecondaryAction>
-            <Button size="small" onClick={() => onOpenDialogLicenseRegistration()} color="inherit">
-              Upgrade
-            </Button>
-          </ListItemSecondaryAction>
-        )}
-      </ListItem>
-    );
-
-    return loginListItem;
-  }
-
-  const accountListItem = (
-    <ListItem
-      button
-      alignItems="flex-start"
-      onClick={() => {
-        const template = [
-          {
-            label: 'Upgrade...',
-            click: () => onOpenDialogLicenseRegistration(),
-            visible: !registered,
-          },
-          {
-            type: 'separator',
-            visible: !registered,
-          },
-          {
-            label: 'Profile',
-            click: () => requestOpenInBrowser('https://webcatalog.io/account/settings/profile/'),
-          },
-          {
-            label: 'Password',
-            click: () => requestOpenInBrowser('https://webcatalog.io/account/settings/password/'),
-          },
-          // {
-          //   label: 'Plans and Billing',
-          //   click: () => requestOpenInBrowser('https://webcatalog.io/account/settings/billing/'),
-          // },
-          {
-            type: 'separator',
-          },
-          {
-            label: 'Log Out',
-            click: () => getAuth().signOut(),
-          },
-        ];
-
-        const menu = window.remote.Menu.buildFromTemplate(template);
-        menu.popup(window.remote.getCurrentWindow());
-      }}
-      title={`${displayName} (${planName})`}
-    >
-      <ListItemAvatar className={classes.listItemIcon}>
-        <Avatar alt={displayName} src={photoURL} />
-      </ListItemAvatar>
-      <ListItemText
-        primary={displayName}
-        secondary={`WebCatalog ${planName}`}
-        classes={{
-          root: classes.listItemText,
-          primary: classes.profilePrimaryText,
-          secondary: classes.profileSecondaryText,
-        }}
-      />
-    </ListItem>
-  );
-
-  if (showTooltip) {
+  if (!registered) {
     return (
-      <Tooltip title={`${displayName} (${planName})`} placement="right" arrow>
-        {accountListItem}
-      </Tooltip>
+      <div className={classes.container}>
+        <Button size="small" onClick={() => onOpenDialogLicenseRegistration()} color="inherit">
+          Upgrade
+        </Button>
+      </div>
     );
   }
-  return accountListItem;
+
+  return null;
+
+  // const accountListItem = (
+  //   <ListItem
+  //     button
+  //     alignItems="flex-start"
+  //     onClick={() => {
+  //       const template = [
+  //         {
+  //           label: 'Upgrade...',
+  //           click: () => onOpenDialogLicenseRegistration(),
+  //           visible: !registered,
+  //         },
+  //         {
+  //           type: 'separator',
+  //           visible: !registered,
+  //         },
+  //         {
+  //           label: 'Profile',
+  //           click: () => requestOpenInBrowser('https://webcatalog.io/account/settings/profile/'),
+  //         },
+  //         {
+  //           label: 'Password',
+  //           click: () => requestOpenInBrowser('https://webcatalog.io/account/settings/password/'),
+  //         },
+  //         // {
+  //         //   label: 'Plans and Billing',
+  //         //   click: () => requestOpenInBrowser('https://webcatalog.io/account/settings/billing/'),
+  //         // },
+  //         {
+  //           type: 'separator',
+  //         },
+  //         {
+  //           label: 'Log Out',
+  //           click: () => getAuth().signOut(),
+  //         },
+  //       ];
+
+  //       const menu = window.remote.Menu.buildFromTemplate(template);
+  //       menu.popup(window.remote.getCurrentWindow());
+  //     }}
+  //     title={`${displayName} (${planName})`}
+  //   >
+  //     <ListItemAvatar className={classes.listItemIcon}>
+  //       <Avatar alt={displayName} src={photoURL} />
+  //     </ListItemAvatar>
+  //     <ListItemText
+  //       primary={displayName}
+  //       secondary={`WebCatalog ${planName}`}
+  //       classes={{
+  //         root: classes.listItemText,
+  //         primary: classes.profilePrimaryText,
+  //         secondary: classes.profileSecondaryText,
+  //       }}
+  //     />
+  //   </ListItem>
+  // );
+
+  // if (showTooltip) {
+  //   return (
+  //     <Tooltip title={`${displayName} (${planName})`} placement="right" arrow>
+  //       {accountListItem}
+  //     </Tooltip>
+  //   );
+  // }
+  // return accountListItem;
 };
 
 SectionAccount.defaultProps = {
-  currentPlan: 'basic',
-  displayName: '',
-  isSignedIn: false,
-  photoURL: null,
+  // currentPlan: 'basic',
+  // displayName: '',
+  // isSignedIn: false,
+  // photoURL: null,
   registered: false,
 };
 
 SectionAccount.propTypes = {
   classes: PropTypes.object.isRequired,
-  currentPlan: PropTypes.string,
-  displayName: PropTypes.string,
-  isSignedIn: PropTypes.bool,
+  // currentPlan: PropTypes.string,
+  // displayName: PropTypes.string,
+  // isSignedIn: PropTypes.bool,
   onOpenDialogLicenseRegistration: PropTypes.func.isRequired,
-  photoURL: PropTypes.string,
+  // photoURL: PropTypes.string,
   registered: PropTypes.bool,
 };
 
 const mapStateToProps = (state) => ({
-  currentPlan: state.user.publicProfile.currentPlan,
-  displayName: state.user.displayName,
-  isSignedIn: state.user.isSignedIn,
-  photoURL: state.user.photoURL,
+  // currentPlan: state.user.publicProfile.currentPlan,
+  // displayName: state.user.displayName,
+  // isSignedIn: state.user.isSignedIn,
+  // photoURL: state.user.photoURL,
   registered: state.preferences.registered,
 });
 
diff --git a/src/components/shared/app-card.js b/src/components/shared/app-card.js
index 2ab946f3..49e4f1c3 100644
--- a/src/components/shared/app-card.js
+++ b/src/components/shared/app-card.js
@@ -13,7 +13,6 @@ import Typography from '@material-ui/core/Typography';
 
 import MoreVertIcon from '@material-ui/icons/MoreVert';
 import WarningIcon from '@material-ui/icons/Warning';
-import GroupWorkIcon from '@material-ui/icons/GroupWork';
 
 import HelpTooltip from './help-tooltip';
 
@@ -22,6 +21,8 @@ import isUrl from '../../helpers/is-url';
 import getEngineName from '../../helpers/get-engine-name';
 import isWidevineSupported from '../../helpers/is-widevine-supported';
 
+import SpaceIcon from './space-icon';
+
 import {
   INSTALLED,
   INSTALLING,
@@ -89,6 +90,13 @@ const styles = (theme) => ({
     marginBottom: window.process.platform === 'win32' ? 4 : 0,
     userSelect: 'none',
   },
+  paperIconMedium: {
+    width: window.process.platform === 'win32' ? 72 : 96,
+    height: window.process.platform === 'win32' ? 72 : 96,
+    marginTop: window.process.platform === 'win32' ? 6 : 0,
+    marginBottom: window.process.platform === 'win32' ? 6 : 0,
+    userSelect: 'none',
+  },
   paperIconLarge: {
     width: window.process.platform === 'win32' ? 96 : 128,
     height: window.process.platform === 'win32' ? 96 : 128,
@@ -120,31 +128,30 @@ const styles = (theme) => ({
   },
 });
 
-const AppCard = (props) => {
-  const {
-    cancelable,
-    category,
-    classes,
-    engine,
-    icon,
-    iconThumbnail,
-    id,
-    inDetailsDialog,
-    isOutdated,
-    latestTemplateVersion,
-    name,
-    onOpenDialogCatalogAppDetails,
-    onInstallApp,
-    onOpenDialogCreateCustomApp,
-    onOpenDialogEditApp,
-    onUpdateApp,
-    opts,
-    status,
-    url,
-    version,
-    widevine,
-  } = props;
-
+const AppCard = ({
+  cancelable,
+  category,
+  classes,
+  engine,
+  icon,
+  iconThumbnail,
+  id,
+  inDetailsDialog,
+  isOutdated,
+  latestTemplateVersion,
+  name,
+  onInstallApp,
+  onOpenDialogCatalogAppDetails,
+  onOpenDialogCreateCustomApp,
+  onOpenDialogEditApp,
+  onUpdateApp,
+  opts,
+  simple,
+  status,
+  url,
+  version,
+  widevine,
+}) => {
   const clickable = !inDetailsDialog;
   const buttonSize = inDetailsDialog ? 'large' : 'medium';
   const buttonVariant = inDetailsDialog ? 'contained' : 'text';
@@ -180,11 +187,6 @@ const AppCard = (props) => {
           opts: combinedOpts,
         }),
       },
-      {
-        label: 'Uninstall',
-        visible: status === INSTALLED && isOutdated,
-        click: () => requestUninstallApp(id, name, engine),
-      },
       {
         label: 'Clone',
         click: () => onOpenDialogCreateCustomApp({
@@ -194,11 +196,6 @@ const AppCard = (props) => {
           icon,
         }),
       },
-      {
-        label: 'Reinstall (Repair)',
-        visible: status === INSTALLED && !isOutdated,
-        click: () => onUpdateApp(id),
-      },
       {
         type: 'separator',
         visible: !inDetailsDialog,
@@ -208,6 +205,20 @@ const AppCard = (props) => {
         visible: status === INSTALLED,
         click: () => requestOpenInBrowser('https://docs.webcatalog.io/article/35-how-can-i-change-an-apps-preferences?utm_source=webcatalog_app'),
       },
+      {
+        type: 'separator',
+        visible: status === INSTALLED,
+      },
+      {
+        label: 'Reinstall (Repair)',
+        visible: status === INSTALLED && !isOutdated,
+        click: () => onUpdateApp(id),
+      },
+      {
+        label: 'Uninstall',
+        visible: status === INSTALLED,
+        click: () => requestUninstallApp(id, name, engine),
+      },
       {
         type: 'separator',
         visible: !inDetailsDialog,
@@ -342,6 +353,9 @@ const AppCard = (props) => {
     );
   };
 
+  // in simple mode, we only show the actions if the app is outdatdd
+  const shouldShowActions = !simple || isOutdated;
+
   return (
     <Grid item>
       <Paper
@@ -352,6 +366,10 @@ const AppCard = (props) => {
           inDetailsDialog && classes.cardFrameless,
         )}
         onClick={clickable ? () => {
+          if (simple) {
+            requestOpenApp(id, name);
+            return;
+          }
           onOpenDialogCatalogAppDetails(id);
         } : null}
         onContextMenu={() => {
@@ -363,6 +381,7 @@ const AppCard = (props) => {
           className={classnames(
             classes.paperIcon,
             inDetailsDialog && classes.paperIconLarge,
+            !shouldShowActions && classes.paperIconMedium,
           )}
           src={iconThumbnail || (isUrl(icon) ? icon : `file://${icon}`)}
         />
@@ -373,10 +392,12 @@ const AppCard = (props) => {
         >
           {name}
         </Typography>
-        <div className={classes.actionContainer}>
-          {renderActionsElement()}
-        </div>
-        {!url && !inDetailsDialog && (
+        {shouldShowActions && (
+          <div className={classes.actionContainer}>
+            {renderActionsElement()}
+          </div>
+        )}
+        {!url && !inDetailsDialog && !simple && (
           <HelpTooltip title="Space">
             <IconButton
               size="small"
@@ -387,7 +408,7 @@ const AppCard = (props) => {
                 requestOpenInBrowser('https://webcatalog.io/webcatalog/spaces/');
               }}
             >
-              <GroupWorkIcon fontSize="small" />
+              <SpaceIcon fontSize="small" />
             </IconButton>
           </HelpTooltip>
         )}
@@ -432,6 +453,7 @@ AppCard.defaultProps = {
   inDetailsDialog: false,
   latestTemplateVersion: null,
   opts: {},
+  simple: false,
   status: null,
   url: null,
   version: null,
@@ -456,6 +478,7 @@ AppCard.propTypes = {
   onOpenDialogEditApp: PropTypes.func.isRequired,
   onUpdateApp: PropTypes.func.isRequired,
   opts: PropTypes.object,
+  simple: PropTypes.bool,
   status: PropTypes.string,
   url: PropTypes.string,
   version: PropTypes.string,
diff --git a/src/components/shared/create-button.js b/src/components/shared/create-button.js
index 4ca0f75d..4bbe78c3 100644
--- a/src/components/shared/create-button.js
+++ b/src/components/shared/create-button.js
@@ -14,8 +14,6 @@ import connectComponent from '../../helpers/connect-component';
 
 import { open as openDialogCreateCustomApp } from '../../state/dialog-create-custom-app/actions';
 
-import { requestOpenInBrowser } from '../../senders';
-
 const styles = (theme) => ({
   button: {
     marginLeft: theme.spacing(1),
@@ -27,38 +25,13 @@ const CreateButton = ({
   classes,
   onOpenDialogCreateCustomApp,
 }) => (
-  <Tooltip title="Create...">
+  <Tooltip title="Create Custom App...">
     <IconButton
       size="small"
       color="inherit"
-      aria-label="Create..."
+      aria-label="Create Custom App..."
       className={classes.button}
-      onClick={() => {
-        const template = [
-          {
-            label: 'Create Custom App',
-            click: () => {
-              onOpenDialogCreateCustomApp();
-            },
-          },
-          {
-            label: 'Create Custom Space',
-            click: () => {
-              onOpenDialogCreateCustomApp({ urlDisabled: true });
-            },
-          },
-          { type: 'separator' },
-          {
-            label: 'Submit New App to the Catalog',
-            click: () => {
-              requestOpenInBrowser('https://forms.gle/redZCVMwkuhvuDtb9');
-            },
-          },
-        ];
-
-        const menu = window.remote.Menu.buildFromTemplate(template);
-        menu.popup(window.remote.getCurrentWindow());
-      }}
+      onClick={() => onOpenDialogCreateCustomApp()}
     >
       <AddIcon fontSize="small" />
     </IconButton>
diff --git a/src/components/shared/space-icon.js b/src/components/shared/space-icon.js
new file mode 100644
index 00000000..4dbbfcf2
--- /dev/null
+++ b/src/components/shared/space-icon.js
@@ -0,0 +1,15 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+import React from 'react';
+
+import SvgIcon from '@material-ui/core/SvgIcon';
+
+const SpaceIcon = (...props) => (
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  <SvgIcon {...props}>
+    <path fill="currentColor" d="M12 0L3 7L4.63 8.27L12 14L19.36 8.27L21 7L12 0M19.37 10.73L12 16.47L4.62 10.74L3 12L12 19L21 12L19.37 10.73M19.37 15.73L12 21.47L4.62 15.74L3 17L12 24L21 17L19.37 15.73Z" />
+  </SvgIcon>
+);
+
+export default SpaceIcon;
diff --git a/src/constants/actions.js b/src/constants/actions.js
index 877c5d0c..aab1ebaf 100644
--- a/src/constants/actions.js
+++ b/src/constants/actions.js
@@ -88,3 +88,7 @@ export const UPDATE_UPDATER = 'UPDATE_UPDATER';
 export const SET_USER_STATE = 'SET_USER_STATE';
 export const SET_PUBLIC_PROFILE = 'SET_PUBLIC_PROFILE';
 export const CLEAR_USER_STATE = 'CLEAR_USER_STATE';
+
+// Dialog Add Space
+export const DIALOG_ADD_SPACE_OPEN = 'DIALOG_ADD_SPACE_OPEN';
+export const DIALOG_ADD_SPACE_CLOSE = 'DIALOG_ADD_SPACE_CLOSE';
diff --git a/src/constants/routes.js b/src/constants/routes.js
index 58ce74a3..fd8d8daa 100644
--- a/src/constants/routes.js
+++ b/src/constants/routes.js
@@ -4,4 +4,4 @@
 export const ROUTE_INSTALLED = 'ROUTE_INSTALLED';
 export const ROUTE_HOME = 'ROUTE_HOME';
 export const ROUTE_PREFERENCES = 'ROUTE_PREFERENCES';
-export const ROUTE_CATEGORIES = 'ROUTE_CATEGORIES';
+export const ROUTE_SPACES = 'ROUTE_SPACES';
diff --git a/src/state/dialog-add-space/actions.js b/src/state/dialog-add-space/actions.js
new file mode 100644
index 00000000..ae5fe0b7
--- /dev/null
+++ b/src/state/dialog-add-space/actions.js
@@ -0,0 +1,15 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+import {
+  DIALOG_ADD_SPACE_CLOSE,
+  DIALOG_ADD_SPACE_OPEN,
+} from '../../constants/actions';
+
+export const close = () => ({
+  type: DIALOG_ADD_SPACE_CLOSE,
+});
+
+export const open = () => ({
+  type: DIALOG_ADD_SPACE_OPEN,
+});
diff --git a/src/state/dialog-add-space/reducers.js b/src/state/dialog-add-space/reducers.js
new file mode 100644
index 00000000..bd090ad3
--- /dev/null
+++ b/src/state/dialog-add-space/reducers.js
@@ -0,0 +1,19 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+import { combineReducers } from 'redux';
+
+import {
+  DIALOG_ADD_SPACE_CLOSE,
+  DIALOG_ADD_SPACE_OPEN,
+} from '../../constants/actions';
+
+const open = (state = false, action) => {
+  switch (action.type) {
+    case DIALOG_ADD_SPACE_CLOSE: return false;
+    case DIALOG_ADD_SPACE_OPEN: return true;
+    default: return state;
+  }
+};
+
+export default combineReducers({ open });
diff --git a/src/state/index.js b/src/state/index.js
index 02a3f38a..51ebc8d0 100644
--- a/src/state/index.js
+++ b/src/state/index.js
@@ -6,14 +6,15 @@ import thunkMiddleware from 'redux-thunk';
 
 import appManagement from './app-management/reducers';
 import dialogAbout from './dialog-about/reducers';
+import dialogAddSpace from './dialog-add-space/reducers';
+import dialogBackup from './dialog-backup/reducers';
+import dialogBackupRestore from './dialog-backup-restore/reducers';
 import dialogCatalogAppDetails from './dialog-catalog-app-details/reducers';
 import dialogCreateCustomApp from './dialog-create-custom-app/reducers';
 import dialogEditApp from './dialog-edit-app/reducers';
-import dialogBackupRestore from './dialog-backup-restore/reducers';
-import dialogBackup from './dialog-backup/reducers';
-import dialogRestore from './dialog-restore/reducers';
 import dialogLicenseRegistration from './dialog-license-registration/reducers';
 import dialogOpenSourceNotices from './dialog-open-source-notices/reducers';
+import dialogRestore from './dialog-restore/reducers';
 import dialogSetInstallationPath from './dialog-set-installation-path/reducers';
 import general from './general/reducers';
 import installed from './installed/reducers';
@@ -26,6 +27,7 @@ import user from './user/reducers';
 const rootReducer = combineReducers({
   appManagement,
   dialogAbout,
+  dialogAddSpace,
   dialogCatalogAppDetails,
   dialogCreateCustomApp,
   dialogEditApp,