diff --git a/src/@newrelic/gatsby-theme-newrelic/icons/feather.js b/src/@newrelic/gatsby-theme-newrelic/icons/feather.js
index 104afaf86..27341e02c 100644
--- a/src/@newrelic/gatsby-theme-newrelic/icons/feather.js
+++ b/src/@newrelic/gatsby-theme-newrelic/icons/feather.js
@@ -70,14 +70,32 @@ export default {
   'message-square': (
     <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
   ),
-  twitter: (
-    <path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z" />
-  ),
   edit: (
     <>
       <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
       <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
     </>
   ),
+  grid: (
+    <>
+      <rect x="3" y="3" width="7" height="7" />
+      <rect x="14" y="3" width="7" height="7" />
+      <rect x="14" y="14" width="7" height="7" />
+      <rect x="3" y="14" width="7" height="7" />
+    </>
+  ),
+  list: (
+    <>
+      <line x1="8" y1="6" x2="21" y2="6" />
+      <line x1="8" y1="12" x2="21" y2="12" />
+      <line x1="8" y1="18" x2="21" y2="18" />
+      <line x1="3" y1="6" x2="3.01" y2="6" />
+      <line x1="3" y1="12" x2="3.01" y2="12" />
+      <line x1="3" y1="18" x2="3.01" y2="18" />
+    </>
+  ),
+  twitter: (
+    <path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z" />
+  ),
   zap: <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />,
 };
diff --git a/src/components/SegmentedControl.js b/src/components/SegmentedControl.js
index 1752e638c..d8980f6b0 100644
--- a/src/components/SegmentedControl.js
+++ b/src/components/SegmentedControl.js
@@ -1,57 +1,30 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { css } from '@emotion/react';
+import { Icon } from '@newrelic/gatsby-theme-newrelic';
+
+const getViewType = (fullView) => fullView.split(' ')[0].toLowerCase();
 
 const get = (x, key) =>
   Object.prototype.hasOwnProperty.call(x, key) ? x[key] : x;
 
-const SegmentedControl = ({ items, onChange }) => {
+const SegmentedControl = ({ items, onChange, className }) => {
   const [selected, setSelected] = useState(get(items[0], 'value'));
 
   return (
     <div
+      className={className}
       css={css`
-        border: 2px solid var(--color-white);
-        background-color: var(--color-white);
-        display: inline-flex;
-        border-radius: 3px;
-
         button {
           border: 0;
-          border-radius: 3px;
           background: none;
-          font-size: 0.75em;
-          padding: 0.5em 1em;
           cursor: pointer;
           user-select: none;
-          flex-grow: 1;
-
-          &[aria-pressed='true'] {
-            color: var(--color-white);
-            background-color: var(--color-brand-600);
-          }
-
-          &[disabled='true'] {
-            color: var(--color-neutrals-500);
-            background-color: var(--color-brand-600);
-            cursor: default;
-          }
         }
 
         .dark-mode & {
-          border-color: var(--primary-background-color);
-          background-color: var(--primary-background-color);
-
           button {
-            color: var(--primary-text-color);
-
-            &[aria-pressed='true'] {
-              color: var(--color-white);
-            }
-
-            &[disabled='true'] {
-              color: var(--color-brand-600);
-            }
+            color: var(--color-neutrals-500);
           }
         }
       `}
@@ -59,21 +32,30 @@ const SegmentedControl = ({ items, onChange }) => {
       {items.map((item, index) => {
         const value = get(item, 'value');
 
+        // Do not display current view button
+        if (getViewType(value) === getViewType(selected)) return;
+
         return (
           <button
             type="button"
             key={index}
             tabIndex={index}
             value={value}
-            aria-pressed={selected === value}
-            disabled={item.disabled}
             onClick={(e) => {
-              if (item.disabled) return;
               setSelected(value);
               onChange && onChange(e, value);
             }}
+            css={css`
+              margin-left: 8px;
+            `}
           >
-            {get(item, 'label')}
+            <Icon
+              css={css`
+                margin-top: 4px;
+                font-size: 2em;
+              `}
+              name={`fe-${getViewType(value)}`}
+            />
           </button>
         );
       })}
@@ -97,6 +79,9 @@ SegmentedControl.propTypes = {
       })
     ),
   ]).isRequired,
+
+  /** A Prop for designating css attributes to parent container */
+  className: PropTypes.string,
 };
 
 export default SegmentedControl;
diff --git a/src/pages/instant-observability.js b/src/pages/instant-observability.js
index 9b637f100..cc51bfcb9 100644
--- a/src/pages/instant-observability.js
+++ b/src/pages/instant-observability.js
@@ -7,7 +7,6 @@ import { css } from '@emotion/react';
 import SegmentedControl from '../components/SegmentedControl';
 import Overlay from '../components/Overlay';
 import PackTile from '../components/PackTile';
-import IOLogo from '../components/IOLogo';
 import IOBanner from '../components/IOBanner';
 import QuickstartFilter from '../components/quickstarts/QuickstartFilter';
 import {
@@ -31,6 +30,9 @@ import CATEGORIES from '../data/instant-observability-categories';
 
 import { getGuidedInstallStackedNr1Url } from '../utils/get-pack-nr1-url';
 import SuperTiles from '../components/SuperTiles';
+import { convertChangesToDMP } from 'diff';
+
+const COLLAPSE_BREAKPOINT = '760px';
 
 const FILTERS = [
   { name: 'Dashboards', type: 'dashboards', icon: 'nr-dashboard' },
@@ -280,7 +282,7 @@ const QuickstartsPage = ({ data, location }) => {
           margin: var(--banner-height) auto;
           max-width: var(--site-max-width);
 
-          @media screen and (max-width: 760px) {
+          @media screen and (max-width: ${COLLAPSE_BREAKPOINT}) {
             grid-template-columns: minmax(0, 1fr);
             grid-template-areas:
               'sidebar'
@@ -295,10 +297,9 @@ const QuickstartsPage = ({ data, location }) => {
             grid-area: sidebar;
             height: calc(100vh - var(--global-header-height));
             position: sticky;
-            top: var(--global-header-height);
 
-            @media screen and (max-width: 760px) {
-              display: block;
+            @media screen and (max-width: ${COLLAPSE_BREAKPOINT}) {
+              display: none;
               position: relative;
               overflow: hidden;
               width: 100%;
@@ -311,12 +312,12 @@ const QuickstartsPage = ({ data, location }) => {
               padding: var(--site-content-padding);
               height: 100%;
               overflow: auto;
-              @media screen and (max-width: 760px) {
+              @media screen and (max-width: ${COLLAPSE_BREAKPOINT}) {
                 position: relative;
               }
             `}
           >
-            <div
+            {/* <div
               css={css`
                 margin-bottom: 1rem;
               `}
@@ -360,7 +361,7 @@ const QuickstartsPage = ({ data, location }) => {
                   />
                 ))}
               </FormControl>
-            </div>
+            </div> */}
             {!isMobile && (
               <>
                 <FormControl>
@@ -397,12 +398,20 @@ const QuickstartsPage = ({ data, location }) => {
             padding: var(--site-content-padding);
           `}
         >
-          <SuperTiles />
+          <div
+            css={css`
+              @media screen and (max-width: ${COLLAPSE_BREAKPOINT}) {
+                display: none;
+              }
+            `}
+          >
+            <SuperTiles />
+          </div>
           <div
             css={css`
               background-color: var(--secondary-background-color);
               border-radius: 4px;
-              padding: 1rem;
+              padding: 0.5rem;
               display: flex;
               justify-content: space-between;
               align-items: center;
@@ -410,26 +419,30 @@ const QuickstartsPage = ({ data, location }) => {
               input {
                 font-size: 1.15em;
                 padding: 0.5rem;
-                padding-left: 3.75rem;
+                padding-left: 2.25rem;
+                background: var(--color-white);
+                border: var(--color-neutrals-600);
                 border-radius: 4px;
 
                 &::placeholder {
-                  color: var(--border-color);
+                  color: var(--color-neutrals-600);
+                  padding-left: 0.5rem;
                 }
               }
 
               .dark-mode & {
                 background-color: var(--tertiary-background-color);
-              }
-
-              @media screen and (max-width: 1180px) {
-                flex-direction: column;
-                align-items: normal;
+                input {
+                  background: var(--color-dark-500);
 
-                > * {
-                  margin: 0.5rem 0;
+                  &::placeholder {
+                    color: var(primary-text-color);
+                  }
                 }
               }
+              @media (max-width: ${COLLAPSE_BREAKPOINT}) {
+                background-color: var(--primary-background-color);
+              }
             `}
           >
             <SearchInput
@@ -439,23 +452,43 @@ const QuickstartsPage = ({ data, location }) => {
               onClear={() => setSearch('')}
               onChange={(e) => setSearch(e.target.value)}
               css={css`
-                .light-mode & {
-                  background: #ffffff;
-                  border: var(--color-neutrals-500);
+                --svg-color: var(--color-neutrals-700);
 
-                  max-width: 630px;
+                svg {
+                  width: 16px;
+                  height: 16px;
+                  color: var(--svg-color);
+                }
 
-                  input::placeholder {
-                    color: var(--color-neutrals-600);
-                  }
+                .dark-mode & {
+                  --svg-color: var(--primary-text-color);
+                }
+
+                @media screen and (max-width: ${COLLAPSE_BREAKPOINT}) {
+                  max-width: 100%;
+                }
+
+                @media screen and (min-width: ${COLLAPSE_BREAKPOINT}) {
+                  max-width: 630px;
                 }
               `}
             />
-            <Icon
+            <SegmentedControl
+              items={Object.values(VIEWS)}
+              onChange={(_e, view) => {
+                setView(view);
+
+                tessen.track({
+                  eventName: 'instantObservability',
+                  category: 'QuickstartViewToggle',
+                  quickstartViewState: view,
+                });
+              }}
               css={css`
-                margin-right: 0.25rem;
+                @media screen and (max-width: ${COLLAPSE_BREAKPOINT}) {
+                  display: none;
+                }
               `}
-              name="fe-clock"
             />
             {isMobile && (
               <div
@@ -671,30 +704,7 @@ const QuickstartsPage = ({ data, location }) => {
               Showing {filteredQuickstarts.length} results for:{' '}
               <strong>{search || getDisplayName()}</strong>
             </span>
-            <div
-              css={css`
-                min-width: 155px;
-                margin-left: 20px;
-                display: inline;
-
-                @media screen and (max-width: 1180px) {
-                  margin-left: 0px;
-                }
-              `}
-            >
-              <SegmentedControl
-                items={Object.values(VIEWS)}
-                onChange={(_e, view) => {
-                  setView(view);
-
-                  tessen.track({
-                    eventName: 'instantObservability',
-                    category: 'QuickstartViewToggle',
-                    quickstartViewState: view,
-                  });
-                }}
-              />
-            </div>
+            <div>HELLO</div>
           </div>
           <div
             css={css`
@@ -838,14 +848,9 @@ Label.propTypes = {
 const FormControl = ({ children }) => (
   <div
     css={css`
-      margin: 0 0.5rem;
       display: flex;
       flex-direction: column;
       align-items: flex-start;
-
-      @media screen and (max-width: 1180px) {
-        margin: 0.5rem 0;
-      }
     `}
   >
     {children}