From f900f668c19c51168ccad5afc3fc40b70ec07866 Mon Sep 17 00:00:00 2001
From: John Konecny <24961694+jfkonecn@users.noreply.github.com>
Date: Fri, 15 Nov 2024 16:46:20 -0500
Subject: [PATCH] Added new variant page

---
 src/main/webapp/app/Main.tsx                  |  12 +-
 .../app/components/LevelWithDescription.tsx   |   2 +-
 .../webapp/app/components/PageContainer.tsx   |  33 +-
 .../geneticTypeTag/GeneticTypeTag.tsx         |  10 +-
 .../app/components/infoTile/InfoTile.tsx      |  52 --
 .../app/components/infoTile/LoETile.tsx       | 100 ---
 .../components/infoTile/info-tile.module.scss |  17 -
 .../components/searchOption/SearchOption.tsx  |  17 +-
 src/main/webapp/app/config/constants.tsx      |   4 +
 .../annotationPage/AnnotatedAlterations.tsx   |   1 +
 .../AnnotationBreadcrumbs.module.scss         |   6 +
 .../annotationPage/AnnotationBreadcrumbs.tsx  |  26 +-
 .../pages/annotationPage/AnnotationPage.tsx   |  60 +-
 .../pages/annotationPage/CancerTypeView.tsx   |  46 +-
 .../SomaticGermlineAlterationView.tsx         | 185 +++++
 .../SomaticGermlineCancerTypePage.tsx         | 730 ++++++++++++++++++
 .../webapp/app/pages/genePage/GeneInfo.tsx    |   2 +-
 .../app/pages/genePage/GeneInfoTile.tsx       |  89 ---
 .../genePage/SomaticGermlineGenePage.tsx      | 428 +++++-----
 .../app/pages/newsPage/NewsPageContent.tsx    |   3 +-
 .../HighestLevelEvidence.tsx                  |  59 ++
 .../SomaticGermlineAlterationPage.module.scss |  18 +
 .../SomaticGermlineAlterationPage.tsx         | 706 +++++++++++++++++
 .../yearEndSummaryPage/BiomarkerTableData.tsx |  22 +-
 src/main/webapp/app/routes/AdminRoutes.tsx    |  13 +-
 src/main/webapp/app/routes/routes.tsx         | 127 ++-
 ...omaticGermlineCancerTypeSelect.module.scss |   8 +
 .../SomaticGermlineCancerTypeSelect.tsx       | 167 ++++
 .../header/GermlineSomaticHeader.module.scss  |  29 +
 .../shared/header/GermlineSomaticHeader.tsx   |  46 ++
 .../app/shared/nav/MiniNavBarHeader.tsx       |  21 +-
 .../shared/nav/SomaticGermlineBreadcrumbs.tsx |  60 ++
 .../shared/nav/StickyMiniNavBar.module.scss   |  12 +
 .../app/shared/nav/StickyMiniNavBar.tsx       |  54 +-
 .../webapp/app/shared/route/OncokbRoute.tsx   |  52 +-
 .../webapp/app/shared/texts/ShowHideText.tsx  |   6 +-
 .../tiles/SomaticGermlineTiles.module.scss    |  86 +++
 .../app/shared/tiles/SomaticGermlineTiles.tsx | 116 +++
 .../webapp/app/shared/tiles/tile-utils.tsx    | 350 +++++++++
 src/main/webapp/app/shared/utils/UrlUtils.tsx |  41 +-
 src/main/webapp/app/shared/utils/Utils.tsx    |  11 +-
 src/main/webapp/app/variables.scss            |   6 +-
 42 files changed, 3197 insertions(+), 636 deletions(-)
 delete mode 100644 src/main/webapp/app/components/infoTile/InfoTile.tsx
 delete mode 100644 src/main/webapp/app/components/infoTile/LoETile.tsx
 delete mode 100644 src/main/webapp/app/components/infoTile/info-tile.module.scss
 create mode 100644 src/main/webapp/app/pages/annotationPage/AnnotationBreadcrumbs.module.scss
 create mode 100644 src/main/webapp/app/pages/annotationPage/SomaticGermlineAlterationView.tsx
 create mode 100644 src/main/webapp/app/pages/annotationPage/SomaticGermlineCancerTypePage.tsx
 delete mode 100644 src/main/webapp/app/pages/genePage/GeneInfoTile.tsx
 create mode 100644 src/main/webapp/app/pages/somaticGermlineAlterationPage/HighestLevelEvidence.tsx
 create mode 100644 src/main/webapp/app/pages/somaticGermlineAlterationPage/SomaticGermlineAlterationPage.module.scss
 create mode 100644 src/main/webapp/app/pages/somaticGermlineAlterationPage/SomaticGermlineAlterationPage.tsx
 create mode 100644 src/main/webapp/app/shared/dropdown/SomaticGermlineCancerTypeSelect.module.scss
 create mode 100644 src/main/webapp/app/shared/dropdown/SomaticGermlineCancerTypeSelect.tsx
 create mode 100644 src/main/webapp/app/shared/header/GermlineSomaticHeader.module.scss
 create mode 100644 src/main/webapp/app/shared/header/GermlineSomaticHeader.tsx
 create mode 100644 src/main/webapp/app/shared/nav/SomaticGermlineBreadcrumbs.tsx
 create mode 100644 src/main/webapp/app/shared/tiles/SomaticGermlineTiles.module.scss
 create mode 100644 src/main/webapp/app/shared/tiles/SomaticGermlineTiles.tsx
 create mode 100644 src/main/webapp/app/shared/tiles/tile-utils.tsx

diff --git a/src/main/webapp/app/Main.tsx b/src/main/webapp/app/Main.tsx
index d2339828e..0bbba6412 100644
--- a/src/main/webapp/app/Main.tsx
+++ b/src/main/webapp/app/Main.tsx
@@ -104,16 +104,12 @@ class Main extends React.Component<IMainPage> {
           routing={this.props.routing}
           appStore={this.props.appStore}
         />
-        <PageContainer
+        <AppRoutes
+          authenticationStore={this.props.authenticationStore}
+          appStore={this.props.appStore}
           routing={this.props.routing}
           windowStore={this.props.windowStore}
-        >
-          <AppRoutes
-            authenticationStore={this.props.authenticationStore}
-            appStore={this.props.appStore}
-            routing={this.props.routing}
-          />
-        </PageContainer>
+        />
         <FeedbackModal
           showModal={this.props.appStore.showFeedbackFormModal}
           feedback={this.feedbackAnnotation}
diff --git a/src/main/webapp/app/components/LevelWithDescription.tsx b/src/main/webapp/app/components/LevelWithDescription.tsx
index cb73ddae8..8f5de178c 100644
--- a/src/main/webapp/app/components/LevelWithDescription.tsx
+++ b/src/main/webapp/app/components/LevelWithDescription.tsx
@@ -8,7 +8,7 @@ import ReactHtmlParser from 'react-html-parser';
 import { LEVELS } from 'app/config/constants';
 
 export const LevelWithDescription: React.FunctionComponent<{
-  level: LEVELS;
+  level: LEVELS | undefined;
   appStore?: AppStore;
   description?: string;
 }> = inject('appStore')(props => {
diff --git a/src/main/webapp/app/components/PageContainer.tsx b/src/main/webapp/app/components/PageContainer.tsx
index 6b52726b4..55034db1f 100644
--- a/src/main/webapp/app/components/PageContainer.tsx
+++ b/src/main/webapp/app/components/PageContainer.tsx
@@ -1,42 +1,25 @@
 import React, { FunctionComponent } from 'react';
 import { Col, Row } from 'react-bootstrap';
 import WindowStore from 'app/store/WindowStore';
-import { RouterStore } from 'mobx-react-router';
-import { PAGE_ROUTE } from 'app/config/constants';
-import { GENETIC_TYPE } from 'app/components/geneticTypeTabs/GeneticTypeTabs';
-import { parseGenePagePath } from 'app/shared/utils/UrlUtils';
 
-const Container: FunctionComponent<{
-  inGenePage: boolean;
-}> = props => {
-  if (props.inGenePage) {
-    return <div>{props.children}</div>;
-  } else {
-    return (
-      <Row className={`justify-content-center`}>
-        <Col md={11}>{props.children}</Col>
-      </Row>
-    );
-  }
+const Container: FunctionComponent<{}> = props => {
+  return (
+    <Row className={`justify-content-center`}>
+      <Col md={11}>{props.children}</Col>
+    </Row>
+  );
 };
 const PageContainer: React.FunctionComponent<{
-  routing: RouterStore;
   windowStore: WindowStore;
 }> = props => {
-  const genePagePath = parseGenePagePath(props.routing.location.pathname);
-  const inGenePage = genePagePath.geneticType !== undefined;
   return (
     <div className={'view-wrapper'}>
       <div
         className={
-          inGenePage
-            ? ''
-            : props.windowStore.isXLscreen
-            ? 'container'
-            : 'container-fluid'
+          props.windowStore.isXLscreen ? 'container' : 'container-fluid'
         }
       >
-        <Container inGenePage={inGenePage}>{props.children}</Container>
+        <Container>{props.children}</Container>
       </div>
     </div>
   );
diff --git a/src/main/webapp/app/components/geneticTypeTag/GeneticTypeTag.tsx b/src/main/webapp/app/components/geneticTypeTag/GeneticTypeTag.tsx
index f4e38f6a7..e1f5e82f0 100644
--- a/src/main/webapp/app/components/geneticTypeTag/GeneticTypeTag.tsx
+++ b/src/main/webapp/app/components/geneticTypeTag/GeneticTypeTag.tsx
@@ -5,19 +5,19 @@ import styles from './genetic-type-tag.module.scss';
 import { capitalize } from 'cbioportal-frontend-commons';
 
 const GeneticTypeTag: FunctionComponent<{
-  geneticType: GENETIC_TYPE;
+  isGermline: boolean;
   className?: string;
 }> = props => {
   return (
     <span
       className={classnames(
         props.className,
-        props.geneticType === GENETIC_TYPE.GERMLINE
-          ? styles.germlineTag
-          : styles.somaticTag
+        props.isGermline ? styles.germlineTag : styles.somaticTag
       )}
     >
-      {capitalize(props.geneticType)}
+      {capitalize(
+        props.isGermline ? GENETIC_TYPE.GERMLINE : GENETIC_TYPE.SOMATIC
+      )}
     </span>
   );
 };
diff --git a/src/main/webapp/app/components/infoTile/InfoTile.tsx b/src/main/webapp/app/components/infoTile/InfoTile.tsx
deleted file mode 100644
index 836a91e4a..000000000
--- a/src/main/webapp/app/components/infoTile/InfoTile.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import React, { CSSProperties } from 'react';
-import styles from './info-tile.module.scss';
-import { COLOR_GREY } from 'app/config/theme';
-import classnames from 'classnames';
-
-export type Category = {
-  title: string;
-  content?: JSX.Element | string;
-  className?: string;
-};
-export type InfoTile = {
-  title: string;
-  categories: Category[];
-  className?: string;
-};
-
-const Category: React.FunctionComponent<Category> = props => {
-  const isNa = props.content === undefined || props.content === null;
-  const isText = isNa || typeof props.content === 'string';
-  const style: CSSProperties = { height: '3rem' };
-  if (isText) {
-    style.fontSize = '1.5rem';
-    style.fontFamily = 'Gotham Bold';
-  }
-  return (
-    <div className={classnames(props.className, 'flex-grow-1')}>
-      <div style={{ color: COLOR_GREY }} className={'mb-1'}>
-        {props.title}
-      </div>
-      <div className={classnames('d-flex align-items-center')} style={style}>
-        {props.content}
-      </div>
-    </div>
-  );
-};
-
-const InfoTile: React.FunctionComponent<InfoTile> = props => {
-  return props.categories.length > 0 ? (
-    <div className={classnames(styles.tile, props.className)}>
-      <div className={'h6 font-bold mb-2'}>{props.title}</div>
-      <div className={'d-flex'}>
-        {props.categories.map((category, idx) => (
-          <Category key={idx} {...category} className={styles.category} />
-        ))}
-      </div>
-    </div>
-  ) : (
-    <></>
-  );
-};
-
-export default InfoTile;
diff --git a/src/main/webapp/app/components/infoTile/LoETile.tsx b/src/main/webapp/app/components/infoTile/LoETile.tsx
deleted file mode 100644
index f38cb77d2..000000000
--- a/src/main/webapp/app/components/infoTile/LoETile.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-import React from 'react';
-import InfoTile, { Category } from 'app/components/infoTile/InfoTile';
-import {
-  FdaLevelIcon,
-  levelOfEvidence2Level,
-  OncoKBLevelIcon,
-} from 'app/shared/utils/Utils';
-
-type LoETile = {
-  highestSensitiveLevel: string | undefined;
-  highestResistanceLevel: string | undefined;
-  highestDiagnosticImplicationLevel?: string | undefined;
-  highestPrognosticImplicationLevel?: string | undefined;
-  highestFdaLevel?: string | undefined;
-  className?: string;
-};
-
-const LoETile: React.FunctionComponent<LoETile> = props => {
-  const categories: Category[] = [];
-  if (props.highestSensitiveLevel || props.highestResistanceLevel) {
-    categories.push({
-      title: 'Therapeutic',
-      content: (
-        <div className={'d-flex'}>
-          {props.highestSensitiveLevel && (
-            <OncoKBLevelIcon
-              size={'s2'}
-              level={levelOfEvidence2Level(props.highestSensitiveLevel, false)}
-              withDescription
-            />
-          )}
-          {props.highestResistanceLevel && (
-            <OncoKBLevelIcon
-              size={'s2'}
-              level={levelOfEvidence2Level(props.highestResistanceLevel, false)}
-              withDescription
-            />
-          )}
-        </div>
-      ),
-    });
-  }
-  if (props.highestDiagnosticImplicationLevel) {
-    categories.push({
-      title: 'Diagnostic',
-      content: (
-        <div>
-          <OncoKBLevelIcon
-            size={'s2'}
-            level={levelOfEvidence2Level(
-              props.highestDiagnosticImplicationLevel,
-              false
-            )}
-            withDescription
-          />
-        </div>
-      ),
-    });
-  }
-  if (props.highestPrognosticImplicationLevel) {
-    categories.push({
-      title: 'Prognostic',
-      content: (
-        <div>
-          <OncoKBLevelIcon
-            size={'s2'}
-            level={levelOfEvidence2Level(
-              props.highestPrognosticImplicationLevel,
-              false
-            )}
-            withDescription
-          />
-        </div>
-      ),
-    });
-  }
-  if (props.highestFdaLevel) {
-    categories.push({
-      title: 'FDA',
-      content: (
-        <div>
-          <FdaLevelIcon
-            size={'s2'}
-            level={levelOfEvidence2Level(props.highestFdaLevel, false)}
-          />
-        </div>
-      ),
-    });
-  }
-
-  return (
-    <InfoTile
-      title={'Highest level of evidence'}
-      categories={categories}
-      className={props.className}
-    />
-  );
-};
-
-export default LoETile;
diff --git a/src/main/webapp/app/components/infoTile/info-tile.module.scss b/src/main/webapp/app/components/infoTile/info-tile.module.scss
deleted file mode 100644
index aae0e6728..000000000
--- a/src/main/webapp/app/components/infoTile/info-tile.module.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-@import '../../variables';
-
-.tile {
-  border-radius: 8px;
-  border: 1px solid $light-grey;
-  padding: 1rem;
-  display: inline-block;
-  box-shadow: $default-box-shadow;
-}
-
-.category:not(:last-child) {
-  border-right: 1px solid $light-grey;
-  padding-right: 1rem;
-}
-.category:not(:first-child) {
-  padding-left: 1rem;
-}
diff --git a/src/main/webapp/app/components/searchOption/SearchOption.tsx b/src/main/webapp/app/components/searchOption/SearchOption.tsx
index 624e157ff..73c105915 100644
--- a/src/main/webapp/app/components/searchOption/SearchOption.tsx
+++ b/src/main/webapp/app/components/searchOption/SearchOption.tsx
@@ -1,5 +1,8 @@
 import React from 'react';
-import { levelOfEvidence2Level, OncoKBAnnotationIcon } from 'app/shared/utils/Utils';
+import {
+  levelOfEvidence2Level,
+  OncoKBAnnotationIcon,
+} from 'app/shared/utils/Utils';
 import { Else, If, Then } from 'react-if';
 import Highlighter from 'react-highlight-words';
 import styles from './SearchOption.module.scss';
@@ -50,9 +53,15 @@ const GeneSearchOption: React.FunctionComponent<{
           searchWords={[props.search]}
           textToHighlight={`${props.data.gene.hugoSymbol} (Entrez Gene: ${props.data.gene.entrezGeneId})`}
         />
-        {props.data.annotation && Object.values(GENETIC_TYPE).includes(props.data.annotation.toLowerCase() as GENETIC_TYPE) && (
-          <GeneticTypeTag geneticType={props.data.annotation.toLowerCase() === 'germline' ? GENETIC_TYPE.GERMLINE : GENETIC_TYPE.SOMATIC} className={'ml-2'}/>
-        )}
+        {props.data.annotation &&
+          Object.values(GENETIC_TYPE).includes(
+            props.data.annotation.toLowerCase() as GENETIC_TYPE
+          ) && (
+            <GeneticTypeTag
+              isGermline={props.data.annotation.toLowerCase() === 'germline'}
+              className={'ml-2'}
+            />
+          )}
         {props.data.highestSensitiveLevel ||
         props.data.highestResistanceLevel ? (
           <span className={classnames(styles.subTitle, 'ml-2')}>
diff --git a/src/main/webapp/app/config/constants.tsx b/src/main/webapp/app/config/constants.tsx
index 0400ffd2b..a36583422 100644
--- a/src/main/webapp/app/config/constants.tsx
+++ b/src/main/webapp/app/config/constants.tsx
@@ -605,6 +605,10 @@ export enum PAGE_ROUTE {
   SOMATIC_GENE = '/gene/:hugoSymbol/somatic',
   GERMLINE_GENE = '/gene/:hugoSymbol/germline',
   ALTERATION = '/gene/:hugoSymbol/:alteration',
+  SOMATIC_ALTERATION = '/gene/:hugoSymbol/somatic/:alteration',
+  GERMLINE_ALTERATION = '/gene/:hugoSymbol/germline/:alteration',
+  SOMATIC_TUMOR_TYPE = '/gene/:hugoSymbol/somatic/:alteration/:tumorType',
+  GERMLINE_TUMOR_TYPE = '/gene/:hugoSymbol/germline/:alteration/:tumorType',
   HGVSG = '/hgvsg',
   HGVSG_WITH_QUERY = '/hgvsg/:query',
   GENOMIC_CHANGE = '/genomic-change',
diff --git a/src/main/webapp/app/pages/annotationPage/AnnotatedAlterations.tsx b/src/main/webapp/app/pages/annotationPage/AnnotatedAlterations.tsx
index c59d3b91d..027cb1147 100644
--- a/src/main/webapp/app/pages/annotationPage/AnnotatedAlterations.tsx
+++ b/src/main/webapp/app/pages/annotationPage/AnnotatedAlterations.tsx
@@ -35,6 +35,7 @@ const getColumns = (germline: boolean, hugoSymbol: string) => {
             alterationRefGenomes={
               props.original.variant.referenceGenomes as REFERENCE_GENOME[]
             }
+            germline={germline}
           />
         </>
       );
diff --git a/src/main/webapp/app/pages/annotationPage/AnnotationBreadcrumbs.module.scss b/src/main/webapp/app/pages/annotationPage/AnnotationBreadcrumbs.module.scss
new file mode 100644
index 000000000..1a0dbc18e
--- /dev/null
+++ b/src/main/webapp/app/pages/annotationPage/AnnotationBreadcrumbs.module.scss
@@ -0,0 +1,6 @@
+.breadcrumb {
+  max-width: 40ch;
+  text-overflow: ellipsis;
+  text-wrap: nowrap;
+  overflow: hidden;
+}
diff --git a/src/main/webapp/app/pages/annotationPage/AnnotationBreadcrumbs.tsx b/src/main/webapp/app/pages/annotationPage/AnnotationBreadcrumbs.tsx
index 34cd90370..aac8b5510 100644
--- a/src/main/webapp/app/pages/annotationPage/AnnotationBreadcrumbs.tsx
+++ b/src/main/webapp/app/pages/annotationPage/AnnotationBreadcrumbs.tsx
@@ -6,14 +6,17 @@ import Select from 'react-select';
 import { REFERENCE_GENOME } from 'app/config/constants';
 import { COLOR_BLUE } from 'app/config/theme';
 import { Option } from 'app/shared/select/FormSelectWithLabelField';
+import classnames from 'classnames';
+import styles from './AnnotationBreadcrumbs.module.scss';
 
 export type BreadcrumbType = 'text' | 'link' | 'input' | 'dropdown';
 
 export interface IBasicBreadcrumb {
   type: BreadcrumbType;
   active?: boolean;
-  key: string;
+  //key: string;
   text: string;
+  className?: string;
 }
 
 export interface ITextBreadcrumb extends IBasicBreadcrumb {
@@ -51,7 +54,7 @@ const Icon: React.FunctionComponent<{
 };
 const TextBreadcrumb: React.FunctionComponent<IBasicBreadcrumb> = props => {
   return (
-    <Breadcrumb.Item key={props.key} active={props.active}>
+    <Breadcrumb.Item active={props.active} className={props.className}>
       {props.text}
     </Breadcrumb.Item>
   );
@@ -60,10 +63,10 @@ const TextBreadcrumb: React.FunctionComponent<IBasicBreadcrumb> = props => {
 const LinkBreadcrumb: React.FunctionComponent<ILinkBreadcrumb> = props => {
   return (
     <Breadcrumb.Item
-      key={props.key}
       linkAs={Link}
       linkProps={{ to: props.to }}
       active={props.active}
+      className={props.className}
     >
       {props.text}
     </Breadcrumb.Item>
@@ -75,7 +78,11 @@ const InputBreadcrumb: React.FunctionComponent<IInputBreadcrumb> = props => {
   const [text, setText] = useState(props.text);
   const editableContentFontSize = '13px';
   return (
-    <Breadcrumb.Item key={props.key} active style={{ color: COLOR_BLUE }}>
+    <Breadcrumb.Item
+      active
+      style={{ color: COLOR_BLUE }}
+      className={props.className}
+    >
       <If condition={editing}>
         <Then>
           <span style={{ fontSize: editableContentFontSize }}>
@@ -136,7 +143,11 @@ const InputBreadcrumb: React.FunctionComponent<IInputBreadcrumb> = props => {
 const DropdownBreadcrumb: React.FunctionComponent<IDropdownBreadcrumb> = props => {
   const [editing, setEditing] = useState(false);
   return (
-    <Breadcrumb.Item key={props.key} active style={{ color: COLOR_BLUE }}>
+    <Breadcrumb.Item
+      active
+      style={{ color: COLOR_BLUE }}
+      className={props.className}
+    >
       <If condition={editing}>
         <Then>
           <Select
@@ -214,11 +225,12 @@ export const AnnotationBreadcrumbs: React.FunctionComponent<{
   return (
     <Breadcrumb>
       {props.breadcrumbs.map((breadcrumb, index) => {
-        const commonProps: IBasicBreadcrumb = {
+        const commonProps: IBasicBreadcrumb & { key: number } = {
           type: 'text',
-          key: breadcrumb.key,
+          key: index,
           text: breadcrumb.text,
           active: index === props.breadcrumbs.length - 1,
+          className: classnames(styles.breadcrumb),
         };
         switch (breadcrumb.type) {
           case 'text':
diff --git a/src/main/webapp/app/pages/annotationPage/AnnotationPage.tsx b/src/main/webapp/app/pages/annotationPage/AnnotationPage.tsx
index 6067995c9..a96a19e41 100644
--- a/src/main/webapp/app/pages/annotationPage/AnnotationPage.tsx
+++ b/src/main/webapp/app/pages/annotationPage/AnnotationPage.tsx
@@ -20,7 +20,7 @@ import {
 } from 'app/config/constants';
 import styles from 'app/pages/alterationPage/AlterationPage.module.scss';
 import { AlterationInfo } from 'app/pages/annotationPage/AlterationInfo';
-import { Col, Row, Alert } from 'react-bootstrap';
+import { Col, Row, Alert, Container } from 'react-bootstrap';
 import classnames from 'classnames';
 import { action, computed, observable } from 'mobx';
 import * as QueryString from 'querystring';
@@ -752,33 +752,37 @@ export default class AnnotationPage extends React.Component<
         this.props.store.gene.result === DEFAULT_GENE) ? (
       <UnknownGeneAlert />
     ) : (
-      <>
-        {this.navBreadcrumbs}
-        {this.pageShouldBeRendered ? (
-          this.props.store.annotationData.result.query.hugoSymbol ? (
-            this.getAnnotationComponents()
-          ) : (
-            <Alert variant="warning" className={'text-center'}>
-              We do not have any information for this variant
-            </Alert>
-          )
-        ) : (
-          <If condition={this.props.store.annotationData.isError}>
-            <Then>
-              <Alert variant="warning" className={'text-center'}>
-                An error occurred while annotating your variant.
-              </Alert>
-            </Then>
-            <Else>
-              <LoadingIndicator
-                size={LoaderSize.LARGE}
-                center={true}
-                isLoading={true}
-              />
-            </Else>
-          </If>
-        )}
-      </>
+      <Container>
+        <Row className="justify-content-center">
+          <Col md={11}>
+            {this.navBreadcrumbs}
+            {this.pageShouldBeRendered ? (
+              this.props.store.annotationData.result.query.hugoSymbol ? (
+                this.getAnnotationComponents()
+              ) : (
+                <Alert variant="warning" className={'text-center'}>
+                  We do not have any information for this variant
+                </Alert>
+              )
+            ) : (
+              <If condition={this.props.store.annotationData.isError}>
+                <Then>
+                  <Alert variant="warning" className={'text-center'}>
+                    An error occurred while annotating your variant.
+                  </Alert>
+                </Then>
+                <Else>
+                  <LoadingIndicator
+                    size={LoaderSize.LARGE}
+                    center={true}
+                    isLoading={true}
+                  />
+                </Else>
+              </If>
+            )}
+          </Col>
+        </Row>
+      </Container>
     );
   }
 }
diff --git a/src/main/webapp/app/pages/annotationPage/CancerTypeView.tsx b/src/main/webapp/app/pages/annotationPage/CancerTypeView.tsx
index ee07ec045..6c340acc9 100644
--- a/src/main/webapp/app/pages/annotationPage/CancerTypeView.tsx
+++ b/src/main/webapp/app/pages/annotationPage/CancerTypeView.tsx
@@ -19,6 +19,8 @@ import { CancerTypeViewTable } from 'app/pages/annotationPage/CancerTypeViewTabl
 import { sortTherapeuticImplications } from 'app/pages/annotationPage/Utils';
 import WindowStore from 'app/store/WindowStore';
 import { defaultFdaImplicationSortMethod } from 'app/shared/utils/ReactTableUtils';
+import classnames from 'classnames';
+import MiniNavBarHeader from 'app/shared/nav/MiniNavBarHeader';
 
 export type ICancerTypeView = {
   appStore?: AppStore;
@@ -41,6 +43,7 @@ export type ICancerTypeView = {
     selectedTabKey: ANNOTATION_PAGE_TAB_KEYS,
     newTabKey: ANNOTATION_PAGE_TAB_KEYS
   ) => void;
+  somaticGermline?: boolean;
 };
 
 const TxView: React.FunctionComponent<{
@@ -49,6 +52,7 @@ const TxView: React.FunctionComponent<{
   hugoSymbol: string;
   summary?: string;
   implications: TherapeuticImplication[];
+  somaticGermline: boolean;
 }> = props => {
   const txStandardCares = sortTherapeuticImplications(
     props.implications.filter(implication =>
@@ -66,9 +70,15 @@ const TxView: React.FunctionComponent<{
   );
   return (
     <div>
-      <h5 className={'text-primary'}>
-        Treatment implications of this biomarker
-      </h5>
+      <MiniNavBarHeader
+        id="treatment-implications-of-this-biomarker"
+        className={classnames(
+          props.somaticGermline ? undefined : 'text-primary',
+          'h5'
+        )}
+      >
+        Therapeutic Implications
+      </MiniNavBarHeader>
       {props.summary && <p>{props.summary}</p>}
       {txStandardCares.length > 0 && (
         <>
@@ -123,13 +133,19 @@ const DxPxView: React.FunctionComponent<{
   hugoSymbol: string;
   summary?: string;
   implications: TherapeuticImplication[];
+  somaticGermline: boolean;
 }> = props => {
   return (
     <div>
-      <h5 className={'text-primary'}>
-        {props.type === 'dx' ? 'Diagnostic' : 'Prognostic'} implications of this
-        biomarker
-      </h5>
+      <MiniNavBarHeader
+        id="diagnostic-prognostic-implications-of-this-biomarker"
+        className={classnames(
+          props.somaticGermline ? undefined : 'text-primary',
+          'h5'
+        )}
+      >
+        {props.type === 'dx' ? 'Diagnostic' : 'Prognostic'} Implications
+      </MiniNavBarHeader>
       {props.summary && <p>{props.summary}</p>}
       {props.implications.length > 0 && (
         <CancerTypeViewTable
@@ -158,10 +174,19 @@ const FdaView: React.FunctionComponent<{
   hugoSymbol: string;
   summary?: string;
   implications: FdaImplication[];
+  somaticGermline: boolean;
 }> = props => {
   return (
     <div>
-      <h5 className={'text-primary'}>FDA-recognized biomarker</h5>
+      <MiniNavBarHeader
+        id="fda-recognized-biomarker"
+        className={classnames(
+          props.somaticGermline ? undefined : 'text-primary',
+          'h5'
+        )}
+      >
+        FDA-Recognized Biomarker
+      </MiniNavBarHeader>
       <p>
         <FdaTabDescription hugoSymbol={props.hugoSymbol} />
       </p>
@@ -185,6 +210,7 @@ const FdaView: React.FunctionComponent<{
 };
 
 export const CancerTypeView: React.FunctionComponent<ICancerTypeView> = props => {
+  const somaticGermline = props.somaticGermline ?? false;
   return (
     <div className={'mt-3'}>
       <TxView
@@ -193,6 +219,7 @@ export const CancerTypeView: React.FunctionComponent<ICancerTypeView> = props =>
         hugoSymbol={props.hugoSymbol}
         summary={props.annotation.tumorTypeSummary}
         implications={props.therapeuticImplications}
+        somaticGermline={somaticGermline}
       />
       {(props.annotation.diagnosticSummary ||
         props.diagnosticImplications.length > 0) && (
@@ -203,6 +230,7 @@ export const CancerTypeView: React.FunctionComponent<ICancerTypeView> = props =>
           hugoSymbol={props.hugoSymbol}
           summary={props.annotation.diagnosticSummary}
           implications={props.diagnosticImplications}
+          somaticGermline={somaticGermline}
         />
       )}
       {(props.annotation.prognosticSummary ||
@@ -214,6 +242,7 @@ export const CancerTypeView: React.FunctionComponent<ICancerTypeView> = props =>
           hugoSymbol={props.hugoSymbol}
           summary={props.annotation.prognosticSummary}
           implications={props.prognosticImplications}
+          somaticGermline={somaticGermline}
         />
       )}
       {props.fdaImplication.length > 0 && (
@@ -223,6 +252,7 @@ export const CancerTypeView: React.FunctionComponent<ICancerTypeView> = props =>
           hugoSymbol={props.hugoSymbol}
           summary={props.annotation.prognosticSummary}
           implications={props.fdaImplication}
+          somaticGermline={somaticGermline}
         />
       )}
     </div>
diff --git a/src/main/webapp/app/pages/annotationPage/SomaticGermlineAlterationView.tsx b/src/main/webapp/app/pages/annotationPage/SomaticGermlineAlterationView.tsx
new file mode 100644
index 000000000..2d4e69a2c
--- /dev/null
+++ b/src/main/webapp/app/pages/annotationPage/SomaticGermlineAlterationView.tsx
@@ -0,0 +1,185 @@
+import React from 'react';
+import { observer } from 'mobx-react';
+
+import { OncoTreeLink } from 'app/shared/utils/UrlUtils';
+import {
+  ANNOTATION_PAGE_TAB_KEYS,
+  DEFAULT_MARGIN_BOTTOM_LG,
+  OTHER_BIOMARKERS,
+} from 'app/config/constants';
+import InfoIcon from 'app/shared/icons/InfoIcon';
+import { Col, Row } from 'react-bootstrap';
+import classnames from 'classnames';
+import { action, computed } from 'mobx';
+import autobind from 'autobind-decorator';
+import {
+  BiologicalVariant,
+  VariantAnnotation,
+} from 'app/shared/api/generated/OncoKbPrivateAPI';
+import {
+  FdaImplication,
+  TherapeuticImplication,
+} from 'app/store/AnnotationStore';
+import { isCategoricalAlteration } from 'app/shared/utils/Utils';
+import AlterationTableTabs from 'app/pages/annotationPage/AlterationTableTabs';
+import { getSummaries, SummaryKey } from 'app/pages/annotationPage/Utils';
+import AppStore from 'app/store/AppStore';
+import { Alteration } from 'app/shared/api/generated/OncoKbAPI';
+import SomaticGermlineCancerTypeSelect from 'app/shared/dropdown/SomaticGermlineCancerTypeSelect';
+import { RouterStore } from 'mobx-react-router';
+
+export type IAlterationView = {
+  appStore?: AppStore;
+  hugoSymbol: string;
+  alteration: string;
+  alterationQuery: string;
+  germline: boolean;
+  matchedAlteration: Alteration | undefined;
+  tumorType: string;
+  onChangeTumorType: (newTumorType: string) => void;
+  annotation: VariantAnnotation;
+  biologicalAlterations?: BiologicalVariant[];
+  relevantAlterations?: Alteration[];
+  fdaImplication: FdaImplication[];
+  therapeuticImplications: TherapeuticImplication[];
+  diagnosticImplications: TherapeuticImplication[];
+  prognosticImplications: TherapeuticImplication[];
+  defaultSelectedTab?: ANNOTATION_PAGE_TAB_KEYS;
+  onChangeTab?: (
+    selectedTabKey: ANNOTATION_PAGE_TAB_KEYS,
+    newTabKey: ANNOTATION_PAGE_TAB_KEYS
+  ) => void;
+  routing: RouterStore;
+};
+@observer
+export default class SomaticGermlineAlterationView extends React.Component<
+  IAlterationView,
+  {}
+> {
+  @autobind
+  @action
+  updateTumorTypeQuery(selectedOption: any) {
+    this.props.onChangeTumorType(selectedOption ? selectedOption.value : '');
+  }
+
+  @computed
+  get tumorTypeSummaries() {
+    const orderedSummaries = this.props.tumorType
+      ? [
+          SummaryKey.TUMOR_TYPE_SUMMARY,
+          SummaryKey.DIAGNOSTIC_SUMMARY,
+          SummaryKey.PROGNOSTIC_SUMMARY,
+        ]
+      : [];
+    return getSummaries(this.props.annotation, orderedSummaries);
+  }
+
+  @computed get isCategoricalAlteration() {
+    return isCategoricalAlteration(this.props.alteration);
+  }
+
+  @computed
+  get showGeneNameLink() {
+    const lHugo = this.props.hugoSymbol.toLowerCase();
+    const altNameIncludesGene = this.props.alteration
+      .toLowerCase()
+      .includes(lHugo);
+    const isOtherBiomarkers = lHugo === OTHER_BIOMARKERS.toLowerCase();
+    return !altNameIncludesGene && !isOtherBiomarkers;
+  }
+
+  @computed
+  get relevantBiologicalVariants(): BiologicalVariant[] {
+    if (
+      this.isCategoricalAlteration &&
+      this.props.biologicalAlterations &&
+      this.props.relevantAlterations
+    ) {
+      const relevantAltNames = this.props.relevantAlterations.map(
+        alt => alt.alteration
+      );
+      return this.props.biologicalAlterations.filter(variant =>
+        relevantAltNames.includes(variant.variant.alteration)
+      );
+    } else {
+      return [];
+    }
+  }
+
+  render() {
+    return (
+      <>
+        <Row className="mt-4 mb-4">
+          <Col>
+            <div
+              className={classnames(
+                'd-flex',
+                'align-items-center',
+                'justify-content-left',
+                'flex-wrap',
+                DEFAULT_MARGIN_BOTTOM_LG
+              )}
+            >
+              <span className={classnames('mr-3', 'h6')}>
+                Filter this list by:
+              </span>
+              <span style={{ width: '100%', maxWidth: '350px' }}>
+                <SomaticGermlineCancerTypeSelect
+                  hugoSymbol={this.props.hugoSymbol}
+                  alterationQuery={this.props.alterationQuery}
+                  germline={this.props.germline}
+                  routing={this.props.routing}
+                  cancerType={this.props.tumorType}
+                />
+              </span>
+            </div>
+          </Col>
+        </Row>
+        {this.props.tumorType && !this.isCategoricalAlteration ? (
+          <Row>
+            <Col>
+              {this.tumorTypeSummaries.map((summary, index) => {
+                return (
+                  <div
+                    className={DEFAULT_MARGIN_BOTTOM_LG}
+                    key={`summary-${index}`}
+                  >
+                    <h6 className={'mb-0'}>{summary.title}</h6>
+                    {summary.content}
+                  </div>
+                );
+              })}
+            </Col>
+          </Row>
+        ) : null}
+        <Row className="mt-2">
+          <Col>
+            <AlterationTableTabs
+              selectedTab={this.props.defaultSelectedTab}
+              appStore={this.props.appStore}
+              hugoSymbol={this.props.hugoSymbol}
+              alteration={
+                this.props.matchedAlteration
+                  ? {
+                      alteration: this.props.matchedAlteration.alteration,
+                      name: this.props.matchedAlteration.name,
+                    }
+                  : {
+                      alteration: this.props.alteration,
+                      name: this.props.alteration,
+                    }
+              }
+              cancerType={this.props.tumorType}
+              biological={[]}
+              tx={this.props.therapeuticImplications}
+              dx={this.props.diagnosticImplications}
+              px={this.props.prognosticImplications}
+              fda={this.props.fdaImplication}
+              onChangeTab={this.props.onChangeTab}
+            />
+          </Col>
+        </Row>
+      </>
+    );
+  }
+}
diff --git a/src/main/webapp/app/pages/annotationPage/SomaticGermlineCancerTypePage.tsx b/src/main/webapp/app/pages/annotationPage/SomaticGermlineCancerTypePage.tsx
new file mode 100644
index 000000000..f6b79454d
--- /dev/null
+++ b/src/main/webapp/app/pages/annotationPage/SomaticGermlineCancerTypePage.tsx
@@ -0,0 +1,730 @@
+import React from 'react';
+import { Helmet } from 'react-helmet-async';
+import {
+  AnnotationStore,
+  TherapeuticImplication,
+  FdaImplication,
+} from 'app/store/AnnotationStore';
+import { AnnotationType } from '../annotationPage/AnnotationPage';
+import { RouteComponentProps } from 'react-router';
+import * as QueryString from 'query-string';
+import {
+  decodeSlash,
+  getPageTitle,
+  levelOfEvidence2Level,
+  getCancerTypeNameFromOncoTreeType,
+  getCancerTypesName,
+  getTreatmentNameByPriority,
+  articles2Citations,
+  isCategoricalAlteration,
+  isPositionalAlteration,
+} from 'app/shared/utils/Utils';
+import {
+  getAlterationPageLink,
+  parseAlterationPagePath,
+  AlterationPageLink,
+} from 'app/shared/utils/UrlUtils';
+import { computed, reaction, action, observable } from 'mobx';
+import { GENETIC_TYPE } from 'app/components/geneticTypeTabs/GeneticTypeTabs';
+import { observer, inject } from 'mobx-react';
+import classnames from 'classnames';
+import StickyMiniNavBar, {
+  StickyMiniNavBarContextProvider,
+} from 'app/shared/nav/StickyMiniNavBar';
+import AppStore from 'app/store/AppStore';
+import ShowHideText from 'app/shared/texts/ShowHideText';
+import { Col, Alert } from 'reactstrap';
+import { Row, Container } from 'react-bootstrap';
+import { CancerTypeView } from '../annotationPage/CancerTypeView';
+import WindowStore from 'app/store/WindowStore';
+import AuthenticationStore from 'app/store/AuthenticationStore';
+import {
+  EVIDENCE_TYPES,
+  REFERENCE_GENOME,
+  ANNOTATION_PAGE_TAB_KEYS,
+  TREATMENT_EVIDENCE_TYPES,
+  ONCOGENICITY,
+} from 'app/config/constants';
+import { Alteration } from 'app/shared/api/generated/OncoKbAPI';
+import {
+  Evidence,
+  VariantAnnotationTumorType,
+} from 'app/shared/api/generated/OncoKbPrivateAPI';
+import WithSeparator from 'react-with-separator';
+import { uniqBy, upperFirst } from 'app/shared/utils/LodashUtils';
+import {
+  SummaryKey,
+  getSummaries,
+  getUniqueFdaImplications,
+} from '../annotationPage/Utils';
+import autobind from 'autobind-decorator';
+import { AlterationPageHashQueries } from 'app/shared/route/types';
+import MutationEffectDescription from '../annotationPage/MutationEffectDescription';
+import { GenomicIndicatorTable } from '../genePage/GenomicIndicatorTable';
+import { Else, If, Then } from 'react-if';
+import LoadingIndicator, {
+  LoaderSize,
+} from 'app/components/loadingIndicator/LoadingIndicator';
+import { COLOR_BLUE } from 'app/config/theme';
+import SomaticGermlineBreadcrumbs from 'app/shared/nav/SomaticGermlineBreadcrumbs';
+import GermlineSomaticHeader from 'app/shared/header/GermlineSomaticHeader';
+import SomaticGermlineCancerTypeSelect from 'app/shared/dropdown/SomaticGermlineCancerTypeSelect';
+import { RouterStore } from 'mobx-react-router';
+import { SomaticGermlineAlterationTiles } from 'app/shared/tiles/tile-utils';
+import GeneticTypeTag from 'app/components/geneticTypeTag/GeneticTypeTag';
+
+type MatchParams = {
+  hugoSymbol: string;
+  alteration: string;
+  tumorType: string;
+};
+
+type SomaticGermlineCancerTypePageProps = {
+  appStore: AppStore;
+  windowStore: WindowStore;
+  authenticationStore: AuthenticationStore;
+  routing: RouterStore;
+} & RouteComponentProps<MatchParams>;
+
+type SomaticGermlineCancerTypePageState = {};
+
+@inject('appStore', 'windowStore', 'authenticationStore', 'routing')
+@observer
+export class SomaticGermlineCancerTypePage extends React.Component<
+  SomaticGermlineCancerTypePageProps,
+  SomaticGermlineCancerTypePageState
+> {
+  private store: AnnotationStore;
+  private selectedTab: ANNOTATION_PAGE_TAB_KEYS;
+
+  @observable showMutationEffect = true;
+
+  constructor(props: SomaticGermlineCancerTypePageProps) {
+    super(props);
+    const alterationQuery = decodeSlash(props.match.params.alteration);
+
+    reaction(
+      () => [this.props.routing.location.pathname],
+      () => {
+        this.store.tumorTypeQuery =
+          decodeSlash(this.props.match.params.tumorType) ?? '';
+      }
+    );
+    reaction(
+      () => [this.geneticType],
+      ([geneticType]) => {
+        if (props.match.params) {
+          this.store = new AnnotationStore({
+            type: alterationQuery
+              ? AnnotationType.PROTEIN_CHANGE
+              : AnnotationType.GENE,
+            hugoSymbolQuery: props.match.params.hugoSymbol,
+            alterationQuery,
+            germline: geneticType === GENETIC_TYPE.GERMLINE,
+            tumorTypeQuery: props.match.params.tumorType
+              ? decodeSlash(props.match.params.tumorType)
+              : props.match.params.tumorType,
+          });
+          if (this.store.cancerTypeName) {
+            this.showMutationEffect = false;
+          }
+        }
+      },
+      true
+    );
+    reaction(
+      () => [props.location.hash],
+      ([hash]) => {
+        const queryStrings = QueryString.parse(
+          hash
+        ) as AlterationPageHashQueries;
+        if (queryStrings.tab) {
+          this.selectedTab = queryStrings.tab;
+          if (queryStrings.tab === ANNOTATION_PAGE_TAB_KEYS.FDA) {
+            this.props.appStore.inFdaRecognizedContent = true;
+          }
+        }
+      },
+      true
+    );
+  }
+
+  @action.bound
+  toggleMutationEffect(value: boolean) {
+    this.showMutationEffect = value;
+  }
+
+  @computed
+  get pageShouldBeRendered() {
+    return (
+      this.store.gene.isComplete &&
+      this.store.geneNumber.isComplete &&
+      this.store.ensemblGenes.isComplete &&
+      this.store.clinicalAlterations.isComplete &&
+      this.store.biologicalAlterations.isComplete &&
+      this.store.annotationData.isComplete
+    );
+  }
+
+  @computed
+  get errorOccurred() {
+    return (
+      this.store.gene.isError ||
+      this.store.geneNumber.isError ||
+      this.store.ensemblGenes.isError ||
+      this.store.clinicalAlterations.isError ||
+      this.store.biologicalAlterations.isError ||
+      this.store.annotationData.isError
+    );
+  }
+
+  @computed
+  get documentTitle() {
+    const content = [];
+    content.push(
+      `${upperFirst(
+        this.store.germline ? GENETIC_TYPE.GERMLINE : GENETIC_TYPE.SOMATIC
+      )}`
+    );
+    if (this.store.hugoSymbol) {
+      content.push(this.store.hugoSymbol);
+    }
+    if (this.store.alterationQuery) {
+      content.push(this.store.alterationQuery);
+    }
+    if (this.store.tumorTypeQuery) {
+      content.push(`in ${this.store.cancerTypeName}`);
+    }
+    return getPageTitle(content.join(' '));
+  }
+
+  @computed
+  get geneticType() {
+    const { geneticType } = parseAlterationPagePath(
+      this.props.location.pathname
+    );
+    return geneticType ?? GENETIC_TYPE.SOMATIC;
+  }
+
+  onChangeTumorType(newTumorType: string) {
+    this.store.tumorTypeQuery = newTumorType;
+  }
+
+  getImplications(evidences: Evidence[]) {
+    return evidences.reduce((acc, evidence) => {
+      const level = levelOfEvidence2Level(evidence.levelOfEvidence);
+      const fdaLevel = levelOfEvidence2Level(evidence.fdaLevel);
+      const alterations = evidence.alterations.filter(alteration =>
+        alteration.referenceGenomes.includes(this.store.referenceGenomeQuery)
+      );
+      const alterationsName = alterations
+        .map(alteration => alteration.name)
+        .join(', ');
+      const cancerTypes = evidence.cancerTypes.map(cancerType =>
+        getCancerTypeNameFromOncoTreeType(cancerType)
+      );
+      const excludedCancerTypes = evidence.excludedCancerTypes.map(ct =>
+        getCancerTypeNameFromOncoTreeType(ct)
+      );
+      const cancerTypesName = getCancerTypesName(
+        cancerTypes,
+        excludedCancerTypes
+      );
+      if (evidence.treatments.length > 0) {
+        evidence.treatments.forEach(treatment => {
+          acc.push({
+            level,
+            fdaLevel,
+            drugDescription: evidence.description,
+            alterations: alterationsName,
+            alterationsView: (
+              <WithSeparator separator={', '}>
+                {alterations.map(alteration =>
+                  alteration.consequence ? (
+                    <AlterationPageLink
+                      key={alteration.name}
+                      hugoSymbol={this.store.hugoSymbol}
+                      alteration={{
+                        alteration: alteration.alteration,
+                        name: alteration.name,
+                      }}
+                      alterationRefGenomes={
+                        alteration.referenceGenomes as REFERENCE_GENOME[]
+                      }
+                    />
+                  ) : (
+                    <span>{alteration.name}</span>
+                  )
+                )}
+              </WithSeparator>
+            ),
+            drugs: getTreatmentNameByPriority(treatment),
+            cancerTypes: cancerTypesName,
+            cancerTypesView: (
+              <>
+                <WithSeparator separator={', '}>
+                  {cancerTypes.map(cancerType => (
+                    <AlterationPageLink
+                      key={`${this.store.alterationName}-${cancerType}`}
+                      hugoSymbol={this.store.hugoSymbol}
+                      alteration={this.store.alterationName}
+                      alterationRefGenomes={[this.store.referenceGenomeQuery]}
+                      cancerType={cancerType}
+                    >
+                      {cancerType}
+                    </AlterationPageLink>
+                  ))}
+                </WithSeparator>
+                {excludedCancerTypes.length > 0 ? (
+                  <span> (excluding {excludedCancerTypes.join(', ')})</span>
+                ) : (
+                  <></>
+                )}
+              </>
+            ),
+            citations: articles2Citations(evidence.articles),
+          } as TherapeuticImplication);
+        });
+      } else {
+        acc.push({
+          level,
+          fdaLevel,
+          drugDescription: evidence.description,
+          alterations: alterationsName,
+          alterationsView: (
+            <WithSeparator separator={', '}>
+              {alterations.map(alteration =>
+                alteration.consequence ? (
+                  <AlterationPageLink
+                    key={alteration.name}
+                    hugoSymbol={this.store.hugoSymbol}
+                    alteration={{
+                      alteration: alteration.alteration,
+                      name: alteration.name,
+                    }}
+                    alterationRefGenomes={
+                      alteration.referenceGenomes as REFERENCE_GENOME[]
+                    }
+                    germline={this.store.germline}
+                  />
+                ) : (
+                  <span>{alteration.name}</span>
+                )
+              )}
+            </WithSeparator>
+          ),
+          drugs: '',
+          cancerTypes: cancerTypesName,
+          cancerTypesView: (
+            <>
+              <WithSeparator separator={', '}>
+                {cancerTypes.map(cancerType => (
+                  <AlterationPageLink
+                    key={`${this.store.alterationName}-${cancerType}`}
+                    hugoSymbol={this.store.hugoSymbol}
+                    alteration={this.store.alterationName}
+                    alterationRefGenomes={[this.store.referenceGenomeQuery]}
+                    cancerType={cancerType}
+                    germline={this.store.germline}
+                  >
+                    {cancerType}
+                  </AlterationPageLink>
+                ))}
+              </WithSeparator>
+              {excludedCancerTypes.length > 0 ? (
+                <span> (excluding {excludedCancerTypes.join(', ')})</span>
+              ) : (
+                <></>
+              )}
+            </>
+          ),
+          citations: articles2Citations(evidence.articles),
+        } as TherapeuticImplication);
+      }
+      return acc;
+    }, [] as TherapeuticImplication[]);
+  }
+
+  getEvidenceByEvidenceTypes(
+    cancerTypes: VariantAnnotationTumorType[],
+    evidenceTypes: EVIDENCE_TYPES[]
+  ): Evidence[] {
+    let uniqueEvidences: Evidence[] = [];
+    cancerTypes.forEach(cancerType => {
+      uniqueEvidences = uniqueEvidences.concat(
+        cancerType.evidences.filter(evidence =>
+          evidenceTypes.includes(evidence.evidenceType as EVIDENCE_TYPES)
+        )
+      );
+    });
+
+    return uniqBy(uniqueEvidences, evidence => evidence.id);
+  }
+
+  @computed
+  get therapeuticImplications(): TherapeuticImplication[] {
+    return this.getImplications(
+      this.getEvidenceByEvidenceTypes(
+        this.store.annotationData.result.tumorTypes,
+        TREATMENT_EVIDENCE_TYPES
+      )
+    );
+  }
+
+  @computed
+  get fdaImplication(): FdaImplication[] {
+    const evidences = this.getEvidenceByEvidenceTypes(
+      this.store.annotationData.result.tumorTypes,
+      TREATMENT_EVIDENCE_TYPES
+    );
+    const fdaImplications: FdaImplication[] = [];
+    evidences.forEach(evidence => {
+      const fdaLevel = levelOfEvidence2Level(evidence.fdaLevel);
+      const alterations = evidence.alterations.filter(alteration =>
+        alteration.referenceGenomes.includes(this.store.referenceGenomeQuery)
+      );
+      alterations.forEach(alt => {
+        let mappedAlteration = {} as Alteration;
+        if (
+          this.store.relevantAlterations.result
+            .map(relevantAlt => relevantAlt.alteration)
+            .includes(alt.alteration)
+        ) {
+          mappedAlteration = alt;
+        } else {
+          if (this.store.alteration.result) {
+            mappedAlteration = this.store.alteration.result;
+          } else {
+            mappedAlteration.name = mappedAlteration.alteration = this.store.alterationName;
+          }
+        }
+        const ctNames = evidence.cancerTypes.map(ct =>
+          getCancerTypeNameFromOncoTreeType(ct)
+        );
+        const excludedCtNames = evidence.excludedCancerTypes.map(ct =>
+          getCancerTypeNameFromOncoTreeType(ct)
+        );
+        fdaImplications.push({
+          level: fdaLevel,
+          alteration: mappedAlteration,
+          alterationView: (
+            <AlterationPageLink
+              key={mappedAlteration.name}
+              hugoSymbol={this.store.hugoSymbol}
+              alteration={{
+                alteration: mappedAlteration.alteration,
+                name: mappedAlteration.name,
+              }}
+              alterationRefGenomes={
+                mappedAlteration.referenceGenomes as REFERENCE_GENOME[]
+              }
+              hashQueries={{
+                tab: ANNOTATION_PAGE_TAB_KEYS.FDA,
+              }}
+              germline={this.store.germline}
+            />
+          ),
+          cancerType: getCancerTypesName(ctNames, excludedCtNames),
+          cancerTypeView: (
+            <>
+              <WithSeparator separator={', '}>
+                {ctNames.map(cancerType => (
+                  <AlterationPageLink
+                    key={`${this.store.alterationName}-${cancerType}`}
+                    hugoSymbol={this.store.hugoSymbol}
+                    alteration={this.store.alterationName}
+                    alterationRefGenomes={[this.store.referenceGenomeQuery]}
+                    cancerType={cancerType}
+                    hashQueries={{
+                      tab: ANNOTATION_PAGE_TAB_KEYS.FDA,
+                    }}
+                    germline={this.store.germline}
+                  >
+                    {cancerType}
+                  </AlterationPageLink>
+                ))}
+              </WithSeparator>
+              {excludedCtNames.length > 0 ? (
+                <span> (excluding {excludedCtNames.join(', ')})</span>
+              ) : (
+                <></>
+              )}
+            </>
+          ),
+        });
+      });
+    });
+    return getUniqueFdaImplications(fdaImplications);
+  }
+
+  @computed
+  get diagnosticImplications(): TherapeuticImplication[] {
+    return this.getImplications(
+      this.getEvidenceByEvidenceTypes(
+        this.store.annotationData.result.tumorTypes,
+        [EVIDENCE_TYPES.DIAGNOSTIC_IMPLICATION]
+      )
+    );
+  }
+
+  @computed
+  get prognosticImplications(): TherapeuticImplication[] {
+    return this.getImplications(
+      this.getEvidenceByEvidenceTypes(
+        this.store.annotationData.result.tumorTypes,
+        [EVIDENCE_TYPES.PROGNOSTIC_IMPLICATION]
+      )
+    );
+  }
+
+  @computed
+  get alterationSummaries() {
+    const orderedSummaries = [SummaryKey.GENE_SUMMARY];
+    if (!this.isCategoricalAlteration) {
+      orderedSummaries.push(SummaryKey.ALTERATION_SUMMARY);
+    }
+    return getSummaries(this.store.annotationData.result, orderedSummaries);
+  }
+
+  @computed get isCategoricalAlteration() {
+    return isCategoricalAlteration(this.store.alterationName);
+  }
+
+  @autobind
+  onChangeTab(
+    selectedTabKey: ANNOTATION_PAGE_TAB_KEYS,
+    newTabKey: ANNOTATION_PAGE_TAB_KEYS
+  ) {
+    if (newTabKey === ANNOTATION_PAGE_TAB_KEYS.FDA) {
+      this.props.appStore.inFdaRecognizedContent = true;
+    }
+    if (
+      selectedTabKey === ANNOTATION_PAGE_TAB_KEYS.FDA &&
+      newTabKey !== ANNOTATION_PAGE_TAB_KEYS.FDA
+    ) {
+      this.props.appStore.showFdaModal = true;
+    } else {
+      const newHash: AlterationPageHashQueries = { tab: newTabKey };
+      window.location.hash = QueryString.stringify(newHash);
+    }
+    this.selectedTab = newTabKey;
+  }
+
+  @computed
+  get isPositionalAlteration() {
+    return isPositionalAlteration(
+      this.store.annotationData.result.query.proteinStart,
+      this.store.annotationData.result.query.proteinEnd,
+      this.store.annotationData.result.query.consequence
+    );
+  }
+
+  get isUnknownOncogenicity() {
+    return (
+      !this.store.annotationData.result.oncogenic ||
+      this.store.annotationData.result.oncogenic === ONCOGENICITY.UNKNOWN
+    );
+  }
+
+  render() {
+    return (
+      <div className="view-wrapper">
+        <Helmet>
+          <title>{this.documentTitle}</title>
+          <link
+            id="canonical"
+            rel="canonical"
+            href={getAlterationPageLink({
+              hugoSymbol: this.store.hugoSymbol,
+              alteration: this.store.alterationQuery,
+              cancerType: this.store.cancerTypeName,
+              withProtocolHostPrefix: true,
+              germline: this.store.germline,
+            })}
+          />
+        </Helmet>
+        {this.pageShouldBeRendered ? (
+          <StickyMiniNavBarContextProvider>
+            <Container>
+              <Row className="justify-content-center">
+                <Col md={11}>
+                  <SomaticGermlineBreadcrumbs
+                    hugoSymbol={this.store.hugoSymbol}
+                    alterationName={this.store.alterationName}
+                    cancerTypeName={this.store.cancerTypeName}
+                    alterationNameWithDiff={this.store.alterationNameWithDiff}
+                    germline={this.store.germline}
+                  />
+                  <GermlineSomaticHeader
+                    includeEmailLink
+                    annotation={{
+                      gene: this.store.hugoSymbol,
+                      alteration: this.store.alterationName,
+                      cancerType: this.store.cancerTypeName,
+                    }}
+                    appStore={this.props.appStore}
+                    alterationNameWithDiff={this.store.alterationNameWithDiff}
+                    isGermline={this.store.germline}
+                    extra={
+                      <SomaticGermlineCancerTypeSelect
+                        pretext="in"
+                        cancerType={this.store.cancerTypeName}
+                        isClearable={false}
+                        routing={this.props.routing}
+                        hugoSymbol={this.store.hugoSymbol}
+                        alterationQuery={this.store.alterationQuery}
+                        germline={this.store.germline}
+                        onchange={x => (this.store.tumorTypeQuery = x)}
+                        selectStyles={{
+                          singleValue(base) {
+                            return {
+                              ...base,
+                              color: COLOR_BLUE,
+                            };
+                          },
+                          input(base) {
+                            return {
+                              ...base,
+                              color: COLOR_BLUE,
+                            };
+                          },
+                          menu(base) {
+                            return {
+                              ...base,
+                              fontSize: '1rem',
+                              fontFamily: '"Gotham Book", serif',
+                            };
+                          },
+                        }}
+                      />
+                    }
+                  />
+                </Col>
+                <Col md={11}>
+                  <Row>
+                    <Col>
+                      <h3>Variant Overview</h3>
+                      {this.store.annotationData.result.background}
+                    </Col>
+                  </Row>
+                  {this.store.annotationData.result.mutationEffect
+                    .description && (
+                    <Row>
+                      <Col>
+                        <ShowHideText
+                          show={this.showMutationEffect}
+                          title="mutation effect description"
+                          content={
+                            <MutationEffectDescription
+                              hugoSymbol={this.store.hugoSymbol}
+                              description={
+                                this.store.annotationData.result.mutationEffect
+                                  .description
+                              }
+                            />
+                          }
+                          onClick={() =>
+                            this.toggleMutationEffect(!this.showMutationEffect)
+                          }
+                        />
+                      </Col>
+                    </Row>
+                  )}
+                </Col>
+              </Row>
+            </Container>
+            <StickyMiniNavBar
+              title={
+                <span className={'d-flex align-items-center'}>
+                  <span>
+                    {this.store.hugoSymbol} {this.store.alterationNameWithDiff}{' '}
+                  </span>
+                  <GeneticTypeTag
+                    className={'ml-2'}
+                    isGermline={this.store.germline}
+                  />
+                </span>
+              }
+            />
+            <Container>
+              <Row className="justify-content-center">
+                <Col md={11}>
+                  <SomaticGermlineAlterationTiles
+                    includeTitle={false}
+                    isGermline={this.store.germline}
+                    variantAnnotation={this.store.annotationData.result}
+                  />
+                </Col>
+              </Row>
+              <Row className="justify-content-center">
+                <Col md={11}>
+                  {this.store.germline &&
+                    (this.store.genomicIndicators.isPending ||
+                      this.store.genomicIndicators.result.length > 0) && (
+                      <>
+                        <h3>Genomic Indicators</h3>
+                        <GenomicIndicatorTable
+                          data={this.store.genomicIndicators.result}
+                          isPending={this.store.genomicIndicators.isPending}
+                        />
+                      </>
+                    )}
+                  {(this.fdaImplication.length > 0 ||
+                    this.therapeuticImplications.length > 0 ||
+                    this.diagnosticImplications.length > 0 ||
+                    this.prognosticImplications.length > 0) && (
+                    <>
+                      <h3>
+                        Clinical Implications of This Biomarker in{' '}
+                        {this.store.tumorTypeQuery}
+                      </h3>
+                      <CancerTypeView
+                        somaticGermline={true}
+                        appStore={this.props.appStore}
+                        isLargeScreen={this.props.windowStore.isLargeScreen}
+                        userAuthenticated={
+                          this.props.authenticationStore.isUserAuthenticated
+                        }
+                        hugoSymbol={this.store.hugoSymbol}
+                        alteration={this.store.alterationName}
+                        matchedAlteration={this.store.alteration.result}
+                        tumorType={this.store.cancerTypeName}
+                        onChangeTumorType={this.onChangeTumorType.bind(this)}
+                        annotation={this.store.annotationData.result}
+                        biologicalAlterations={
+                          this.store.biologicalAlterations.result
+                        }
+                        relevantAlterations={undefined}
+                        fdaImplication={this.fdaImplication}
+                        therapeuticImplications={this.therapeuticImplications}
+                        diagnosticImplications={this.diagnosticImplications}
+                        prognosticImplications={this.prognosticImplications}
+                        defaultSelectedTab={this.selectedTab}
+                        onChangeTab={this.onChangeTab}
+                      />
+                    </>
+                  )}
+                </Col>
+              </Row>
+            </Container>
+          </StickyMiniNavBarContextProvider>
+        ) : (
+          <If condition={this.errorOccurred}>
+            <Then>
+              <Alert variant="warning" className={'text-center'}>
+                An error occurred while annotating your variant.
+              </Alert>
+            </Then>
+            <Else>
+              <LoadingIndicator
+                size={LoaderSize.LARGE}
+                center={true}
+                isLoading={true}
+              />
+            </Else>
+          </If>
+        )}
+      </div>
+    );
+  }
+}
diff --git a/src/main/webapp/app/pages/genePage/GeneInfo.tsx b/src/main/webapp/app/pages/genePage/GeneInfo.tsx
index 5792aa3c7..34b463662 100644
--- a/src/main/webapp/app/pages/genePage/GeneInfo.tsx
+++ b/src/main/webapp/app/pages/genePage/GeneInfo.tsx
@@ -16,7 +16,7 @@ enum GENE_TYPE_DESC {
   TUMOR_SUPPRESSOR = 'Tumor Suppressor',
 }
 
-const HighestLevelItem: React.FunctionComponent<{
+export const HighestLevelItem: React.FunctionComponent<{
   level: LEVELS;
   key?: string;
 }> = props => {
diff --git a/src/main/webapp/app/pages/genePage/GeneInfoTile.tsx b/src/main/webapp/app/pages/genePage/GeneInfoTile.tsx
deleted file mode 100644
index c4b033f49..000000000
--- a/src/main/webapp/app/pages/genePage/GeneInfoTile.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import styles from 'app/pages/genePage/GenePage.module.scss';
-import InfoTile from 'app/components/infoTile/InfoTile';
-import LoETile from 'app/components/infoTile/LoETile';
-import React from 'react';
-import { GeneNumber } from 'app/shared/api/generated/OncoKbPrivateAPI';
-import {
-  Oncogenicity,
-  Pathogenicity,
-} from 'app/components/oncokbMutationMapper/OncokbMutationMapper';
-import classnames from 'classnames';
-
-export interface IGeneInfoTil {
-  isGermline: boolean;
-  geneNumber: GeneNumber;
-  oncogenicities: Oncogenicity[];
-  pathogenicities: Pathogenicity[];
-}
-
-const GeneInfoTile = (props: IGeneInfoTil) => {
-  let count = 1;
-  const hasGeneticRiskInfo =
-    props.geneNumber.penetrance || props.geneNumber.inheritanceMechanism;
-  if (hasGeneticRiskInfo) count++;
-  if (
-    props.geneNumber.highestSensitiveLevel ||
-    props.geneNumber.highestResistanceLevel ||
-    props.geneNumber.highestDiagnosticImplicationLevel ||
-    props.geneNumber.highestPrognosticImplicationLevel ||
-    props.geneNumber.highestFdaLevel
-  ) {
-    count++;
-  }
-
-  const tileStyle = count === 2 ? styles.evenInfoTile : styles.autoInfoTile;
-
-  return (
-    <div className={styles.infoTileContainer}>
-      {hasGeneticRiskInfo && (
-        <InfoTile
-          className={classnames(styles.infoTile, tileStyle)}
-          title={'Genetic Risk'}
-          categories={[
-            {
-              title: 'Penetrance',
-              content: props.geneNumber.penetrance,
-            },
-            {
-              title: 'Mechanism of Inheritance',
-              content: props.geneNumber.inheritanceMechanism,
-            },
-          ]}
-        />
-      )}
-      <LoETile
-        className={classnames(styles.infoTile, tileStyle)}
-        highestSensitiveLevel={props.geneNumber.highestSensitiveLevel}
-        highestResistanceLevel={props.geneNumber.highestResistanceLevel}
-        highestDiagnosticImplicationLevel={
-          props.geneNumber.highestDiagnosticImplicationLevel
-        }
-        highestPrognosticImplicationLevel={
-          props.geneNumber.highestPrognosticImplicationLevel
-        }
-        highestFdaLevel={props.geneNumber.highestFdaLevel}
-      />
-      <InfoTile
-        className={classnames(styles.infoTile, tileStyle)}
-        title={`Annotated ${props.isGermline ? 'variants' : 'alterations'}`}
-        categories={
-          props.isGermline
-            ? props.pathogenicities.map(pathogenicity => {
-                return {
-                  title: pathogenicity.pathogenicity,
-                  content: pathogenicity.counts.toString(),
-                };
-              })
-            : props.oncogenicities.map(oncogenicity => {
-                return {
-                  title: oncogenicity.oncogenicity,
-                  content: oncogenicity.counts.toString(),
-                };
-              })
-        }
-      />
-    </div>
-  );
-};
-
-export default GeneInfoTile;
diff --git a/src/main/webapp/app/pages/genePage/SomaticGermlineGenePage.tsx b/src/main/webapp/app/pages/genePage/SomaticGermlineGenePage.tsx
index 79dae0b29..f79386d1e 100644
--- a/src/main/webapp/app/pages/genePage/SomaticGermlineGenePage.tsx
+++ b/src/main/webapp/app/pages/genePage/SomaticGermlineGenePage.tsx
@@ -65,24 +65,24 @@ import { getUniqueFdaImplications } from 'app/pages/annotationPage/Utils';
 import ShowHideText from 'app/shared/texts/ShowHideText';
 import { AnnotationType } from 'app/pages/annotationPage/AnnotationPage';
 import SummaryWithRefs from 'app/oncokb-frontend-commons/src/components/SummaryWithRefs';
-import { findLast } from 'app/shared/utils/LodashUtils';
+import { findLast, upperFirst } from 'app/shared/utils/LodashUtils';
 import { Helmet } from 'react-helmet-async';
 import { NcbiLink } from 'app/shared/links/NcbiLink';
 import GeneAliasesDescription from 'app/shared/texts/GeneAliasesDescription';
 import { COLOR_GREY, COLOR_SOMATIC } from 'app/config/theme';
-import LoETile from 'app/components/infoTile/LoETile';
 import GeneticTypeTabs, {
   GENETIC_TYPE,
 } from 'app/components/geneticTypeTabs/GeneticTypeTabs';
-import InfoTile from 'app/components/infoTile/InfoTile';
 import AnnotatedAlterations from 'app/pages/annotationPage/AnnotatedAlterations';
-import { LinkedInLink } from 'app/shared/links/SocialMediaLinks';
 import styles from './GenePage.module.scss';
-import StickyMiniNavBar from 'app/shared/nav/StickyMiniNavBar';
+import { LinkedInLink } from 'app/shared/links/SocialMediaLinks';
+import StickyMiniNavBar, {
+  StickyMiniNavBarContextProvider,
+} from 'app/shared/nav/StickyMiniNavBar';
 import MiniNavBarHeader from 'app/shared/nav/MiniNavBarHeader';
 import { GenomicIndicatorTable } from 'app/pages/genePage/GenomicIndicatorTable';
 import GeneticTypeTag from 'app/components/geneticTypeTag/GeneticTypeTag';
-import GeneInfoTile from './GeneInfoTile';
+import { SomaticGermlineGeneInfoTiles } from 'app/shared/tiles/tile-utils';
 
 interface MatchParams {
   hugoSymbol: string;
@@ -178,6 +178,7 @@ export default class SomaticGermlineGenePage extends React.Component<
           alterationRefGenomes={
             variant.variant.referenceGenomes as REFERENCE_GENOME[]
           }
+          germline={this.store.germline}
         />
       ) : (
         <span>{variant.variant.name}</span>
@@ -202,6 +203,7 @@ export default class SomaticGermlineGenePage extends React.Component<
                     variant.variant.referenceGenomes as REFERENCE_GENOME[]
                   }
                   cancerType={cancerType}
+                  germline={this.store.germline}
                 >
                   {cancerType}
                 </AlterationPageLink>
@@ -286,6 +288,7 @@ export default class SomaticGermlineGenePage extends React.Component<
               hashQueries={{
                 tab: ANNOTATION_PAGE_TAB_KEYS.FDA,
               }}
+              germline={this.store.germline}
             >
               {variant.variant.name}
             </AlterationPageLink>
@@ -306,6 +309,7 @@ export default class SomaticGermlineGenePage extends React.Component<
                       variant.variant.referenceGenomes as REFERENCE_GENOME[]
                     }
                     cancerType={cancerType}
+                    germline={this.store.germline}
                   >
                     {cancerType}
                   </AlterationPageLink>
@@ -366,12 +370,6 @@ export default class SomaticGermlineGenePage extends React.Component<
 
   constructor(props: any) {
     super(props);
-    // eslint-disable-next-line no-console
-    console.log(`gene page constructer}`);
-    const genePagePath = parseGenePagePath(window.location.pathname);
-    if (genePagePath.geneticType) {
-      this.selectedGeneticType = genePagePath.geneticType;
-    }
     this.hugoSymbolQuery = props.match.params
       ? props.match.params.hugoSymbol
       : undefined;
@@ -410,6 +408,10 @@ export default class SomaticGermlineGenePage extends React.Component<
       reaction(
         () => [props.routing.location.hash],
         ([hash]) => {
+          const genePagePath = parseGenePagePath(window.location.pathname);
+          if (genePagePath.geneticType) {
+            this.selectedGeneticType = genePagePath.geneticType;
+          }
           const queryStrings = QueryString.parse(hash) as GenePageHashQueries;
           if (queryStrings.tab) {
             this.defaultSelectedTab = queryStrings.tab;
@@ -423,15 +425,9 @@ export default class SomaticGermlineGenePage extends React.Component<
       reaction(
         () => [this.selectedGeneticType],
         ([newGeneticType]) => {
-          this.props.routing.history.push(
-            getGenePageLink({
-              hugoSymbol: this.hugoSymbolQuery,
-              geneticType: newGeneticType,
-            })
-          );
           this.store = new AnnotationStore({
             type: AnnotationType.GENE,
-            germline: newGeneticType === 'germline',
+            germline: newGeneticType === GENETIC_TYPE.GERMLINE,
             hugoSymbolQuery: this.hugoSymbolQuery,
           });
         },
@@ -531,9 +527,13 @@ export default class SomaticGermlineGenePage extends React.Component<
 
   render() {
     return (
-      <>
+      <div className="view-wrapper">
         <Helmet>
-          <title>{getPageTitle(`${this.store.hugoSymbol}`)}</title>
+          <title>
+            {getPageTitle(
+              `${upperFirst(this.selectedGeneticType)} ${this.store.hugoSymbol}`
+            )}
+          </title>
           <meta name="description" content={this.store.geneSummary.result} />
           <link
             id="canonical"
@@ -652,9 +652,17 @@ export default class SomaticGermlineGenePage extends React.Component<
                         <Row className={'justify-content-center'}>
                           <Col md={11}>
                             <GeneticTypeTabs
-                              onChange={(status: GENETIC_TYPE) =>
-                                (this.selectedGeneticType = status)
-                              }
+                              onChange={(status: GENETIC_TYPE) => {
+                                this.selectedGeneticType = status;
+                                this.props.routing.history.push(
+                                  getGenePageLink({
+                                    hugoSymbol: this.hugoSymbolQuery,
+                                    germline:
+                                      this.selectedGeneticType ===
+                                      GENETIC_TYPE.GERMLINE,
+                                  })
+                                );
+                              }}
                               routing={this.props.routing}
                               hugoSymbol={this.store.hugoSymbol}
                               geneticType={this.selectedGeneticType}
@@ -662,196 +670,208 @@ export default class SomaticGermlineGenePage extends React.Component<
                           </Col>
                         </Row>
                       </Container>
-                      {this.hasContent && (
-                        <StickyMiniNavBar
-                          title={
-                            <span className={'d-flex align-items-center'}>
-                              <span>{this.store.hugoSymbol}</span>
-                              <GeneticTypeTag
-                                className={'ml-2'}
-                                geneticType={this.selectedGeneticType}
-                              />
-                            </span>
-                          }
-                        />
-                      )}
-                      <Container>
-                        <Row className={`justify-content-center`}>
-                          <Col md={11}>
-                            {!this.hasContent && (
-                              <NoContent
-                                geneticType={this.selectedGeneticType}
-                              />
-                            )}
-                            {this.hasContent && (
-                              <>
-                                <GeneInfoTile
-                                  isGermline={this.isGermline}
-                                  pathogenicities={this.store.uniqPathogenicity}
-                                  oncogenicities={this.store.uniqOncogenicity}
-                                  geneNumber={this.store.geneNumber.result}
+                      <StickyMiniNavBarContextProvider>
+                        {this.hasContent && (
+                          <StickyMiniNavBar
+                            title={
+                              <span className={'d-flex align-items-center'}>
+                                <span>{this.store.hugoSymbol}</span>
+                                <GeneticTypeTag
+                                  className={'ml-2'}
+                                  isGermline={this.store.germline}
                                 />
-                                <If
-                                  condition={
-                                    this.store.gene.result.entrezGeneId > 0 &&
-                                    this.store.mutationMapperDataPortal.result
-                                      .length > 0 &&
-                                    !this.isGermline
-                                  }
-                                >
-                                  <div className={'d-flex flex-column mt-2'}>
-                                    <ShowHideText
-                                      show={this.showPrevalenceData}
-                                      content={<></>}
-                                      title={'prevalence data'}
-                                      onClick={() =>
-                                        (this.showPrevalenceData = !this
-                                          .showPrevalenceData)
-                                      }
-                                    />
-                                    {this.showPrevalenceData && (
-                                      <Row className={'mt-5'}>
-                                        <Col
-                                          xl={this.genePanelClass.xl}
-                                          lg={this.genePanelClass.lg}
-                                          xs={this.genePanelClass.xs}
-                                        >
-                                          <h6>
-                                            Annotated Mutations in{' '}
-                                            <MskimpactLink />
-                                          </h6>
-                                          <OncokbLollipopPlot
-                                            store={this.store}
-                                            windowStore={this.props.windowStore}
-                                            showPlotControlsOnHover={true}
-                                          />
-                                        </Col>
-                                        {this.store.barChartData.length > 0 ? (
+                              </span>
+                            }
+                          />
+                        )}
+                        <Container>
+                          <Row className={`justify-content-center`}>
+                            <Col md={11}>
+                              {!this.hasContent && (
+                                <NoContent
+                                  geneticType={this.selectedGeneticType}
+                                />
+                              )}
+                              {this.hasContent && (
+                                <>
+                                  <SomaticGermlineGeneInfoTiles
+                                    isGermline={this.isGermline}
+                                    pathogenicities={
+                                      this.store.uniqPathogenicity
+                                    }
+                                    oncogenicities={this.store.uniqOncogenicity}
+                                    geneNumber={this.store.geneNumber.result}
+                                  />
+                                  <If
+                                    condition={
+                                      this.store.gene.result.entrezGeneId > 0 &&
+                                      this.store.mutationMapperDataPortal.result
+                                        .length > 0 &&
+                                      !this.isGermline
+                                    }
+                                  >
+                                    <div className={'d-flex flex-column mt-2'}>
+                                      <ShowHideText
+                                        show={this.showPrevalenceData}
+                                        content={<></>}
+                                        title={'prevalence data'}
+                                        onClick={() =>
+                                          (this.showPrevalenceData = !this
+                                            .showPrevalenceData)
+                                        }
+                                      />
+                                      {this.showPrevalenceData && (
+                                        <Row className={'mt-5'}>
                                           <Col
-                                            xl={12 - this.genePanelClass.xl}
-                                            lg={12 - this.genePanelClass.lg}
-                                            xs={12 - this.genePanelClass.xs}
-                                            className={
-                                              'd-flex flex-column align-items-center'
-                                            }
+                                            xl={this.genePanelClass.xl}
+                                            lg={this.genePanelClass.lg}
+                                            xs={this.genePanelClass.xs}
                                           >
                                             <h6>
-                                              Cancer Types with{' '}
-                                              {this.store.hugoSymbol} Mutations
-                                              <DefaultTooltip
-                                                overlay={() => (
-                                                  <div
-                                                    style={{ maxWidth: 300 }}
-                                                  >
-                                                    Currently, the mutation
-                                                    frequency does not take into
-                                                    account copy number changes,
-                                                    chromosomal translocations
-                                                    or cancer types with fewer
-                                                    than 50 samples in{' '}
-                                                    <MskimpactLink />
-                                                  </div>
-                                                )}
-                                              >
-                                                <i className="fa fa-question-circle-o ml-2" />
-                                              </DefaultTooltip>
+                                              Annotated Mutations in{' '}
+                                              <MskimpactLink />
                                             </h6>
-                                            <BarChart
-                                              data={this.store.barChartData}
-                                              height={300}
-                                              filters={
-                                                this.store.selectedCancerTypes
-                                              }
+                                            <OncokbLollipopPlot
+                                              store={this.store}
                                               windowStore={
                                                 this.props.windowStore
                                               }
-                                              onUserSelection={selectedCancerTypes =>
-                                                this.store
-                                                  .mutationMapperStore &&
-                                                this.store.mutationMapperStore
-                                                  .result
-                                                  ? onFilterOptionSelect(
-                                                      selectedCancerTypes,
-                                                      false,
-                                                      this.store
-                                                        .mutationMapperStore
-                                                        .result.dataStore,
-                                                      DataFilterType.CANCER_TYPE,
-                                                      CANCER_TYPE_FILTER_ID
-                                                    )
-                                                  : undefined
-                                              }
+                                              showPlotControlsOnHover={true}
                                             />
                                           </Col>
-                                        ) : null}
-                                      </Row>
-                                    )}
-                                  </div>
-                                </If>
-                                {this.isGermline && (
-                                  <>
-                                    <MiniNavBarHeader id="genomic-indicators">
-                                      Genomic Indicators
-                                    </MiniNavBarHeader>
-                                    <GenomicIndicatorTable
-                                      data={this.store.genomicIndicators.result}
-                                      isPending={
-                                        this.store.genomicIndicators.isPending
-                                      }
-                                    />
-                                  </>
-                                )}
-                                {this.hasClinicalImplications && (
-                                  <>
-                                    <MiniNavBarHeader id="clinical-implications">
-                                      Clinical Implications
-                                    </MiniNavBarHeader>
-                                    <AlterationTableTabs
-                                      selectedTab={this.defaultSelectedTab}
-                                      hugoSymbol={this.store.hugoSymbol}
-                                      biological={[]}
-                                      tx={this.getClinicalImplications(
-                                        this.filteredTxAlterations
-                                      )}
-                                      dx={this.getClinicalImplications(
-                                        this.filteredDxAlterations
-                                      )}
-                                      px={this.getClinicalImplications(
-                                        this.filteredPxAlterations
-                                      )}
-                                      fda={this.getFdaImplication(
-                                        this.filteredTxAlterations
+                                          {this.store.barChartData.length >
+                                          0 ? (
+                                            <Col
+                                              xl={12 - this.genePanelClass.xl}
+                                              lg={12 - this.genePanelClass.lg}
+                                              xs={12 - this.genePanelClass.xs}
+                                              className={
+                                                'd-flex flex-column align-items-center'
+                                              }
+                                            >
+                                              <h6>
+                                                Cancer Types with{' '}
+                                                {this.store.hugoSymbol}{' '}
+                                                Mutations
+                                                <DefaultTooltip
+                                                  overlay={() => (
+                                                    <div
+                                                      style={{ maxWidth: 300 }}
+                                                    >
+                                                      Currently, the mutation
+                                                      frequency does not take
+                                                      into account copy number
+                                                      changes, chromosomal
+                                                      translocations or cancer
+                                                      types with fewer than 50
+                                                      samples in{' '}
+                                                      <MskimpactLink />
+                                                    </div>
+                                                  )}
+                                                >
+                                                  <i className="fa fa-question-circle-o ml-2" />
+                                                </DefaultTooltip>
+                                              </h6>
+                                              <BarChart
+                                                data={this.store.barChartData}
+                                                height={300}
+                                                filters={
+                                                  this.store.selectedCancerTypes
+                                                }
+                                                windowStore={
+                                                  this.props.windowStore
+                                                }
+                                                onUserSelection={selectedCancerTypes =>
+                                                  this.store
+                                                    .mutationMapperStore &&
+                                                  this.store.mutationMapperStore
+                                                    .result
+                                                    ? onFilterOptionSelect(
+                                                        selectedCancerTypes,
+                                                        false,
+                                                        this.store
+                                                          .mutationMapperStore
+                                                          .result.dataStore,
+                                                        DataFilterType.CANCER_TYPE,
+                                                        CANCER_TYPE_FILTER_ID
+                                                      )
+                                                    : undefined
+                                                }
+                                              />
+                                            </Col>
+                                          ) : null}
+                                        </Row>
                                       )}
-                                      onChangeTab={this.onChangeTab}
-                                    />
-                                  </>
-                                )}
-                                {this.store.filteredBiologicalAlterations
-                                  .length > 0 && (
-                                  <>
-                                    <MiniNavBarHeader id="annotated">
-                                      Annotated{' '}
-                                      {this.isGermline
-                                        ? 'Variants'
-                                        : 'Alterations'}
-                                    </MiniNavBarHeader>
-                                    <AnnotatedAlterations
-                                      germline={this.isGermline}
-                                      hugoSymbol={this.store.hugoSymbol}
-                                      alterations={
-                                        this.store.filteredBiologicalAlterations
-                                      }
-                                      isLargeScreen={
-                                        this.props.windowStore.isLargeScreen
-                                      }
-                                    />
-                                  </>
-                                )}
-                              </>
-                            )}
-                          </Col>
-                        </Row>
-                      </Container>
+                                    </div>
+                                  </If>
+                                  {this.isGermline && (
+                                    <>
+                                      <MiniNavBarHeader id="genomic-indicators">
+                                        Genomic Indicators
+                                      </MiniNavBarHeader>
+                                      <GenomicIndicatorTable
+                                        data={
+                                          this.store.genomicIndicators.result
+                                        }
+                                        isPending={
+                                          this.store.genomicIndicators.isPending
+                                        }
+                                      />
+                                    </>
+                                  )}
+                                  {this.hasClinicalImplications && (
+                                    <>
+                                      <MiniNavBarHeader id="clinical-implications">
+                                        Clinical Implications
+                                      </MiniNavBarHeader>
+                                      <AlterationTableTabs
+                                        selectedTab={this.defaultSelectedTab}
+                                        hugoSymbol={this.store.hugoSymbol}
+                                        biological={[]}
+                                        tx={this.getClinicalImplications(
+                                          this.filteredTxAlterations
+                                        )}
+                                        dx={this.getClinicalImplications(
+                                          this.filteredDxAlterations
+                                        )}
+                                        px={this.getClinicalImplications(
+                                          this.filteredPxAlterations
+                                        )}
+                                        fda={this.getFdaImplication(
+                                          this.filteredTxAlterations
+                                        )}
+                                        onChangeTab={this.onChangeTab}
+                                      />
+                                    </>
+                                  )}
+                                  {this.store.filteredBiologicalAlterations
+                                    .length > 0 && (
+                                    <>
+                                      <MiniNavBarHeader id="annotated">
+                                        Annotated{' '}
+                                        {this.isGermline
+                                          ? 'Variants'
+                                          : 'Alterations'}
+                                      </MiniNavBarHeader>
+                                      <AnnotatedAlterations
+                                        germline={this.isGermline}
+                                        hugoSymbol={this.store.hugoSymbol}
+                                        alterations={
+                                          this.store
+                                            .filteredBiologicalAlterations
+                                        }
+                                        isLargeScreen={
+                                          this.props.windowStore.isLargeScreen
+                                        }
+                                      />
+                                    </>
+                                  )}
+                                </>
+                              )}
+                            </Col>
+                          </Row>
+                        </Container>
+                      </StickyMiniNavBarContextProvider>
                     </Then>
                     <Else>
                       <LoadingIndicator
@@ -876,7 +896,7 @@ export default class SomaticGermlineGenePage extends React.Component<
             <Redirect to={PAGE_ROUTE.HOME} />
           </Else>
         </If>
-      </>
+      </div>
     );
   }
 }
diff --git a/src/main/webapp/app/pages/newsPage/NewsPageContent.tsx b/src/main/webapp/app/pages/newsPage/NewsPageContent.tsx
index e4b38bfcf..a40233280 100644
--- a/src/main/webapp/app/pages/newsPage/NewsPageContent.tsx
+++ b/src/main/webapp/app/pages/newsPage/NewsPageContent.tsx
@@ -2238,8 +2238,9 @@ export const NEWS_BY_DATE: { [date: string]: NewsData } = {
                 <td>
                   <span>
                     <WithSeparator separator={', '}>
-                      {['S371C', 'G380R', 'K650'].map(alt => (
+                      {['S371C', 'G380R', 'K650'].map((alt, index) => (
                         <AlterationPageLink
+                          key={index}
                           hugoSymbol="FGFR3"
                           alteration={alt}
                         />
diff --git a/src/main/webapp/app/pages/somaticGermlineAlterationPage/HighestLevelEvidence.tsx b/src/main/webapp/app/pages/somaticGermlineAlterationPage/HighestLevelEvidence.tsx
new file mode 100644
index 000000000..6f7c0b609
--- /dev/null
+++ b/src/main/webapp/app/pages/somaticGermlineAlterationPage/HighestLevelEvidence.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import {
+  levelOfEvidence2Level,
+  OncoKBLevelIcon,
+  FdaLevelIcon,
+} from 'app/shared/utils/Utils';
+
+type HighestLevelEvidenceProp = {
+  type:
+    | 'Sensitive'
+    | 'Resistance'
+    | 'DiagnosticImplication'
+    | 'PrognosticImplication'
+    | 'Fda';
+  level: string | undefined;
+};
+
+export default function HighestLevelEvidence({
+  type,
+  level: rawLevel = '',
+}: HighestLevelEvidenceProp): JSX.Element {
+  if (type === 'Sensitive') {
+    const level = levelOfEvidence2Level(rawLevel, false);
+    return (
+      <OncoKBLevelIcon size="s2" level={level} key="highestSensitiveLevel" />
+    );
+  }
+  if (type === 'Resistance') {
+    const level = levelOfEvidence2Level(rawLevel, false);
+    return (
+      <OncoKBLevelIcon size="s2" level={level} key="highestResistanceLevel" />
+    );
+  }
+  if (type === 'DiagnosticImplication') {
+    const level = levelOfEvidence2Level(rawLevel, false);
+    return (
+      <OncoKBLevelIcon
+        size="s2"
+        level={level}
+        key={'highestDiagnosticImplicationLevel'}
+      />
+    );
+  }
+  if (type === 'PrognosticImplication') {
+    const level = levelOfEvidence2Level(rawLevel, false);
+    return (
+      <OncoKBLevelIcon
+        size="s2"
+        level={level}
+        key={'highestPrognosticImplicationLevel'}
+      />
+    );
+  }
+  if (type === 'Fda') {
+    const level = levelOfEvidence2Level(rawLevel, false);
+    return <FdaLevelIcon size="s2" level={level} key={'highestFdaLevel'} />;
+  }
+  return <></>;
+}
diff --git a/src/main/webapp/app/pages/somaticGermlineAlterationPage/SomaticGermlineAlterationPage.module.scss b/src/main/webapp/app/pages/somaticGermlineAlterationPage/SomaticGermlineAlterationPage.module.scss
new file mode 100644
index 000000000..0b57563b0
--- /dev/null
+++ b/src/main/webapp/app/pages/somaticGermlineAlterationPage/SomaticGermlineAlterationPage.module.scss
@@ -0,0 +1,18 @@
+.backLink {
+  gap: 0.5rem;
+}
+
+.navBarTitle {
+  .pill {
+    font-size: 0.85rem;
+  }
+}
+
+.descriptionContainer {
+  margin-top: 0.5rem;
+  margin-bottom: 0rem;
+}
+
+.showHideText {
+  margin-bottom: '0.5rem';
+}
diff --git a/src/main/webapp/app/pages/somaticGermlineAlterationPage/SomaticGermlineAlterationPage.tsx b/src/main/webapp/app/pages/somaticGermlineAlterationPage/SomaticGermlineAlterationPage.tsx
new file mode 100644
index 000000000..729effcbf
--- /dev/null
+++ b/src/main/webapp/app/pages/somaticGermlineAlterationPage/SomaticGermlineAlterationPage.tsx
@@ -0,0 +1,706 @@
+import React from 'react';
+import { Helmet } from 'react-helmet-async';
+import {
+  AnnotationStore,
+  TherapeuticImplication,
+  FdaImplication,
+} from 'app/store/AnnotationStore';
+import { AnnotationType } from '../annotationPage/AnnotationPage';
+import { RouteComponentProps } from 'react-router';
+import * as QueryString from 'query-string';
+import {
+  decodeSlash,
+  getPageTitle,
+  levelOfEvidence2Level,
+  getCancerTypeNameFromOncoTreeType,
+  getCancerTypesName,
+  getTreatmentNameByPriority,
+  articles2Citations,
+  isCategoricalAlteration,
+  citationsHasInfo,
+  isPositionalAlteration,
+  OncoKBOncogenicityIcon,
+} from 'app/shared/utils/Utils';
+import {
+  getAlterationPageLink,
+  parseAlterationPagePath,
+  getGenePageLink,
+  AlterationPageLink,
+} from 'app/shared/utils/UrlUtils';
+import { computed, reaction, action, observable } from 'mobx';
+import { GENETIC_TYPE } from 'app/components/geneticTypeTabs/GeneticTypeTabs';
+import { observer, inject } from 'mobx-react';
+import { Link } from 'react-router-dom';
+import styles from './SomaticGermlineAlterationPage.module.scss';
+import classNames from 'classnames';
+import StickyMiniNavBar, {
+  StickyMiniNavBarContextProvider,
+} from 'app/shared/nav/StickyMiniNavBar';
+import AlterationView from '../annotationPage/AlterationView';
+import AppStore from 'app/store/AppStore';
+import ShowHideText from 'app/shared/texts/ShowHideText';
+import { Col, Alert } from 'reactstrap';
+import { Row, Container } from 'react-bootstrap';
+import { CancerTypeView } from '../annotationPage/CancerTypeView';
+import WindowStore from 'app/store/WindowStore';
+import AuthenticationStore from 'app/store/AuthenticationStore';
+import {
+  EVIDENCE_TYPES,
+  REFERENCE_GENOME,
+  ANNOTATION_PAGE_TAB_KEYS,
+  TREATMENT_EVIDENCE_TYPES,
+  ONCOKB_TM,
+  MUTATION_EFFECT,
+  ONCOGENICITY,
+} from 'app/config/constants';
+import {
+  Alteration,
+  MutationEffectResp,
+} from 'app/shared/api/generated/OncoKbAPI';
+import {
+  Evidence,
+  VariantAnnotationTumorType,
+} from 'app/shared/api/generated/OncoKbPrivateAPI';
+import WithSeparator from 'react-with-separator';
+import { uniqBy, upperFirst } from 'app/shared/utils/LodashUtils';
+import {
+  SummaryKey,
+  getSummaries,
+  getUniqueFdaImplications,
+} from '../annotationPage/Utils';
+import autobind from 'autobind-decorator';
+import { AlterationPageHashQueries } from 'app/shared/route/types';
+import MutationEffectDescription from '../annotationPage/MutationEffectDescription';
+import MiniNavBarHeader from 'app/shared/nav/MiniNavBarHeader';
+import SomaticGermlineTiles from '../../shared/tiles/SomaticGermlineTiles';
+import HighestLevelEvidence from './HighestLevelEvidence';
+import { GenomicIndicatorTable } from '../genePage/GenomicIndicatorTable';
+import { Else, If, Then } from 'react-if';
+import LoadingIndicator, {
+  LoaderSize,
+} from 'app/components/loadingIndicator/LoadingIndicator';
+import { CitationTooltip } from 'app/components/CitationTooltip';
+import { DefaultTooltip } from 'cbioportal-frontend-commons';
+import {
+  COLOR_ICON_WITH_INFO,
+  COLOR_ICON_WITHOUT_INFO,
+} from 'app/config/theme';
+import SomaticGermlineAlterationView from '../annotationPage/SomaticGermlineAlterationView';
+import GermlineSomaticHeader from 'app/shared/header/GermlineSomaticHeader';
+import SomaticGermlineBreadcrumbs from 'app/shared/nav/SomaticGermlineBreadcrumbs';
+import { RouterStore } from 'mobx-react-router';
+import { SomaticGermlineAlterationTiles } from 'app/shared/tiles/tile-utils';
+import GeneticTypeTag from 'app/components/geneticTypeTag/GeneticTypeTag';
+
+type MatchParams = {
+  hugoSymbol: string;
+  alteration: string;
+};
+
+type SomaticGermlineAlterationPageProps = {
+  routing: RouterStore;
+  appStore: AppStore;
+  windowStore: WindowStore;
+  authenticationStore: AuthenticationStore;
+} & RouteComponentProps<MatchParams>;
+
+type SomaticGermlineAlterationPageState = {};
+
+@inject('appStore', 'windowStore', 'authenticationStore', 'routing')
+@observer
+export class SomaticGermlineAlterationPage extends React.Component<
+  SomaticGermlineAlterationPageProps,
+  SomaticGermlineAlterationPageState
+> {
+  private store: AnnotationStore;
+  private selectedTab: ANNOTATION_PAGE_TAB_KEYS;
+
+  @observable showMutationEffect = true;
+
+  constructor(props: SomaticGermlineAlterationPageProps) {
+    super(props);
+    const alterationQuery = decodeSlash(props.match.params.alteration);
+    reaction(
+      () => [this.geneticType],
+      ([geneticType]) => {
+        if (props.match.params) {
+          this.store = new AnnotationStore({
+            type: alterationQuery
+              ? AnnotationType.PROTEIN_CHANGE
+              : AnnotationType.GENE,
+            hugoSymbolQuery: props.match.params.hugoSymbol,
+            alterationQuery,
+            germline: geneticType === GENETIC_TYPE.GERMLINE,
+          });
+          if (this.store.cancerTypeName) {
+            this.showMutationEffect = false;
+          }
+        }
+      },
+      true
+    );
+    reaction(
+      () => [props.location.hash],
+      ([hash]) => {
+        const queryStrings = QueryString.parse(
+          hash
+        ) as AlterationPageHashQueries;
+        if (queryStrings.tab) {
+          this.selectedTab = queryStrings.tab;
+          if (queryStrings.tab === ANNOTATION_PAGE_TAB_KEYS.FDA) {
+            this.props.appStore.inFdaRecognizedContent = true;
+          }
+        }
+      },
+      true
+    );
+  }
+
+  @action.bound
+  toggleMutationEffect(value: boolean) {
+    this.showMutationEffect = value;
+  }
+
+  @computed
+  get pageShouldBeRendered() {
+    return (
+      this.store.gene.isComplete &&
+      this.store.geneNumber.isComplete &&
+      this.store.ensemblGenes.isComplete &&
+      this.store.clinicalAlterations.isComplete &&
+      this.store.biologicalAlterations.isComplete &&
+      this.store.annotationData.isComplete
+    );
+  }
+
+  @computed
+  get errorOccurred() {
+    return (
+      this.store.gene.isError ||
+      this.store.geneNumber.isError ||
+      this.store.ensemblGenes.isError ||
+      this.store.clinicalAlterations.isError ||
+      this.store.biologicalAlterations.isError ||
+      this.store.annotationData.isError
+    );
+  }
+
+  @computed
+  get documentTitle() {
+    const content = [];
+    content.push(
+      `${upperFirst(
+        this.store.germline ? GENETIC_TYPE.GERMLINE : GENETIC_TYPE.SOMATIC
+      )}`
+    );
+    if (this.store.hugoSymbol) {
+      content.push(this.store.hugoSymbol);
+    }
+    if (this.store.alterationQuery) {
+      content.push(this.store.alterationQuery);
+    }
+    if (this.store.tumorTypeQuery) {
+      content.push(`in ${this.store.cancerTypeName}`);
+    }
+    return getPageTitle(content.join(' '));
+  }
+
+  @computed
+  get geneticType() {
+    const { geneticType } = parseAlterationPagePath(
+      this.props.location.pathname
+    );
+    return geneticType ?? GENETIC_TYPE.SOMATIC;
+  }
+
+  onChangeTumorType(newTumorType: string) {
+    this.store.tumorTypeQuery = newTumorType;
+  }
+
+  getImplications(evidences: Evidence[]) {
+    return evidences.reduce((acc, evidence) => {
+      const level = levelOfEvidence2Level(evidence.levelOfEvidence);
+      const fdaLevel = levelOfEvidence2Level(evidence.fdaLevel);
+      const alterations = evidence.alterations.filter(alteration =>
+        alteration.referenceGenomes.includes(this.store.referenceGenomeQuery)
+      );
+      const alterationsName = alterations
+        .map(alteration => alteration.name)
+        .join(', ');
+      const cancerTypes = evidence.cancerTypes.map(cancerType =>
+        getCancerTypeNameFromOncoTreeType(cancerType)
+      );
+      const excludedCancerTypes = evidence.excludedCancerTypes.map(ct =>
+        getCancerTypeNameFromOncoTreeType(ct)
+      );
+      const cancerTypesName = getCancerTypesName(
+        cancerTypes,
+        excludedCancerTypes
+      );
+      if (evidence.treatments.length > 0) {
+        evidence.treatments.forEach(treatment => {
+          acc.push({
+            level,
+            fdaLevel,
+            drugDescription: evidence.description,
+            alterations: alterationsName,
+            alterationsView: (
+              <WithSeparator separator={', '}>
+                {alterations.map(alteration =>
+                  alteration.consequence ? (
+                    <AlterationPageLink
+                      key={alteration.name}
+                      hugoSymbol={this.store.hugoSymbol}
+                      alteration={{
+                        alteration: alteration.alteration,
+                        name: alteration.name,
+                      }}
+                      alterationRefGenomes={
+                        alteration.referenceGenomes as REFERENCE_GENOME[]
+                      }
+                      germline={this.store.germline}
+                    />
+                  ) : (
+                    <span>{alteration.name}</span>
+                  )
+                )}
+              </WithSeparator>
+            ),
+            drugs: getTreatmentNameByPriority(treatment),
+            cancerTypes: cancerTypesName,
+            cancerTypesView: (
+              <>
+                <WithSeparator separator={', '}>
+                  {cancerTypes.map(cancerType => (
+                    <AlterationPageLink
+                      key={`${this.store.alterationName}-${cancerType}`}
+                      hugoSymbol={this.store.hugoSymbol}
+                      alteration={this.store.alterationName}
+                      alterationRefGenomes={[this.store.referenceGenomeQuery]}
+                      cancerType={cancerType}
+                      germline={this.store.germline}
+                    >
+                      {cancerType}
+                    </AlterationPageLink>
+                  ))}
+                </WithSeparator>
+                {excludedCancerTypes.length > 0 ? (
+                  <span> (excluding {excludedCancerTypes.join(', ')})</span>
+                ) : (
+                  <></>
+                )}
+              </>
+            ),
+            citations: articles2Citations(evidence.articles),
+          } as TherapeuticImplication);
+        });
+      } else {
+        acc.push({
+          level,
+          fdaLevel,
+          drugDescription: evidence.description,
+          alterations: alterationsName,
+          alterationsView: (
+            <WithSeparator separator={', '}>
+              {alterations.map(alteration =>
+                alteration.consequence ? (
+                  <AlterationPageLink
+                    key={alteration.name}
+                    hugoSymbol={this.store.hugoSymbol}
+                    alteration={{
+                      alteration: alteration.alteration,
+                      name: alteration.name,
+                    }}
+                    alterationRefGenomes={
+                      alteration.referenceGenomes as REFERENCE_GENOME[]
+                    }
+                    germline={this.store.germline}
+                  />
+                ) : (
+                  <span>{alteration.name}</span>
+                )
+              )}
+            </WithSeparator>
+          ),
+          drugs: '',
+          cancerTypes: cancerTypesName,
+          cancerTypesView: (
+            <>
+              <WithSeparator separator={', '}>
+                {cancerTypes.map(cancerType => (
+                  <AlterationPageLink
+                    key={`${this.store.alterationName}-${cancerType}`}
+                    hugoSymbol={this.store.hugoSymbol}
+                    alteration={this.store.alterationName}
+                    alterationRefGenomes={[this.store.referenceGenomeQuery]}
+                    cancerType={cancerType}
+                    germline={this.store.germline}
+                  >
+                    {cancerType}
+                  </AlterationPageLink>
+                ))}
+              </WithSeparator>
+              {excludedCancerTypes.length > 0 ? (
+                <span> (excluding {excludedCancerTypes.join(', ')})</span>
+              ) : (
+                <></>
+              )}
+            </>
+          ),
+          citations: articles2Citations(evidence.articles),
+        } as TherapeuticImplication);
+      }
+      return acc;
+    }, [] as TherapeuticImplication[]);
+  }
+
+  getEvidenceByEvidenceTypes(
+    cancerTypes: VariantAnnotationTumorType[],
+    evidenceTypes: EVIDENCE_TYPES[]
+  ): Evidence[] {
+    let uniqueEvidences: Evidence[] = [];
+    cancerTypes.forEach(cancerType => {
+      uniqueEvidences = uniqueEvidences.concat(
+        cancerType.evidences.filter(evidence =>
+          evidenceTypes.includes(evidence.evidenceType as EVIDENCE_TYPES)
+        )
+      );
+    });
+
+    return uniqBy(uniqueEvidences, evidence => evidence.id);
+  }
+
+  @computed
+  get therapeuticImplications(): TherapeuticImplication[] {
+    return this.getImplications(
+      this.getEvidenceByEvidenceTypes(
+        this.store.annotationData.result.tumorTypes,
+        TREATMENT_EVIDENCE_TYPES
+      )
+    );
+  }
+
+  @computed
+  get fdaImplication(): FdaImplication[] {
+    const evidences = this.getEvidenceByEvidenceTypes(
+      this.store.annotationData.result.tumorTypes,
+      TREATMENT_EVIDENCE_TYPES
+    );
+    const fdaImplications: FdaImplication[] = [];
+    evidences.forEach(evidence => {
+      const level = levelOfEvidence2Level(evidence.levelOfEvidence);
+      const fdaLevel = levelOfEvidence2Level(evidence.fdaLevel);
+      const alterations = evidence.alterations.filter(alteration =>
+        alteration.referenceGenomes.includes(this.store.referenceGenomeQuery)
+      );
+      alterations.forEach(alt => {
+        // convert all alterations to matchedAlteration/alteration query if not positional variant
+        let mappedAlteration = {} as Alteration;
+        if (
+          this.store.relevantAlterations.result
+            .map(relevantAlt => relevantAlt.alteration)
+            .includes(alt.alteration)
+        ) {
+          mappedAlteration = alt;
+        } else {
+          if (this.store.alteration.result) {
+            mappedAlteration = this.store.alteration.result;
+          } else {
+            mappedAlteration.name = mappedAlteration.alteration = this.store.alterationName;
+          }
+        }
+        const ctNames = evidence.cancerTypes.map(ct =>
+          getCancerTypeNameFromOncoTreeType(ct)
+        );
+        const excludedCtNames = evidence.excludedCancerTypes.map(ct =>
+          getCancerTypeNameFromOncoTreeType(ct)
+        );
+        fdaImplications.push({
+          level: fdaLevel,
+          alteration: mappedAlteration,
+          alterationView: (
+            <AlterationPageLink
+              key={mappedAlteration.name}
+              hugoSymbol={this.store.hugoSymbol}
+              alteration={{
+                alteration: mappedAlteration.alteration,
+                name: mappedAlteration.name,
+              }}
+              alterationRefGenomes={
+                mappedAlteration.referenceGenomes as REFERENCE_GENOME[]
+              }
+              hashQueries={{
+                tab: ANNOTATION_PAGE_TAB_KEYS.FDA,
+              }}
+              germline={this.store.germline}
+            />
+          ),
+          cancerType: getCancerTypesName(ctNames, excludedCtNames),
+          cancerTypeView: (
+            <>
+              <WithSeparator separator={', '}>
+                {ctNames.map(cancerType => (
+                  <AlterationPageLink
+                    key={`${this.store.alterationName}-${cancerType}`}
+                    hugoSymbol={this.store.hugoSymbol}
+                    alteration={this.store.alterationName}
+                    alterationRefGenomes={[this.store.referenceGenomeQuery]}
+                    cancerType={cancerType}
+                    hashQueries={{
+                      tab: ANNOTATION_PAGE_TAB_KEYS.FDA,
+                    }}
+                    germline={this.store.germline}
+                  >
+                    {cancerType}
+                  </AlterationPageLink>
+                ))}
+              </WithSeparator>
+              {excludedCtNames.length > 0 ? (
+                <span> (excluding {excludedCtNames.join(', ')})</span>
+              ) : (
+                <></>
+              )}
+            </>
+          ),
+        });
+      });
+    });
+    return getUniqueFdaImplications(fdaImplications);
+  }
+
+  @computed
+  get diagnosticImplications(): TherapeuticImplication[] {
+    return this.getImplications(
+      this.getEvidenceByEvidenceTypes(
+        this.store.annotationData.result.tumorTypes,
+        [EVIDENCE_TYPES.DIAGNOSTIC_IMPLICATION]
+      )
+    );
+  }
+
+  @computed
+  get prognosticImplications(): TherapeuticImplication[] {
+    return this.getImplications(
+      this.getEvidenceByEvidenceTypes(
+        this.store.annotationData.result.tumorTypes,
+        [EVIDENCE_TYPES.PROGNOSTIC_IMPLICATION]
+      )
+    );
+  }
+
+  @computed
+  get alterationSummaries() {
+    const orderedSummaries = [SummaryKey.GENE_SUMMARY];
+    if (!this.isCategoricalAlteration) {
+      orderedSummaries.push(SummaryKey.ALTERATION_SUMMARY);
+    }
+    return getSummaries(this.store.annotationData.result, orderedSummaries);
+  }
+
+  @computed get isCategoricalAlteration() {
+    return isCategoricalAlteration(this.store.alterationName);
+  }
+
+  @autobind
+  onChangeTab(
+    selectedTabKey: ANNOTATION_PAGE_TAB_KEYS,
+    newTabKey: ANNOTATION_PAGE_TAB_KEYS
+  ) {
+    if (newTabKey === ANNOTATION_PAGE_TAB_KEYS.FDA) {
+      this.props.appStore.inFdaRecognizedContent = true;
+    }
+    if (
+      selectedTabKey === ANNOTATION_PAGE_TAB_KEYS.FDA &&
+      newTabKey !== ANNOTATION_PAGE_TAB_KEYS.FDA
+    ) {
+      this.props.appStore.showFdaModal = true;
+    } else {
+      const newHash: AlterationPageHashQueries = { tab: newTabKey };
+      window.location.hash = QueryString.stringify(newHash);
+    }
+    this.selectedTab = newTabKey;
+  }
+
+  @computed
+  get isPositionalAlteration() {
+    return isPositionalAlteration(
+      this.store.annotationData.result.query.proteinStart,
+      this.store.annotationData.result.query.proteinEnd,
+      this.store.annotationData.result.query.consequence
+    );
+  }
+
+  get isUnknownOncogenicity() {
+    return (
+      !this.store.annotationData.result.oncogenic ||
+      this.store.annotationData.result.oncogenic === ONCOGENICITY.UNKNOWN
+    );
+  }
+
+  render() {
+    return (
+      <div className="view-wrapper">
+        <Helmet>
+          <title>{this.documentTitle}</title>
+          <link
+            id="canonical"
+            rel="canonical"
+            href={getAlterationPageLink({
+              hugoSymbol: this.store.hugoSymbol,
+              alteration: this.store.alterationQuery,
+              cancerType: this.store.cancerTypeName,
+              withProtocolHostPrefix: true,
+            })}
+          />
+        </Helmet>
+        {this.pageShouldBeRendered ? (
+          <StickyMiniNavBarContextProvider>
+            <Container>
+              <Row className="justify-content-center">
+                <Col md={11}>
+                  <SomaticGermlineBreadcrumbs
+                    hugoSymbol={this.store.hugoSymbol}
+                    alterationName={this.store.alterationName}
+                    cancerTypeName={this.store.cancerTypeName}
+                    alterationNameWithDiff={this.store.alterationNameWithDiff}
+                    germline={this.store.germline}
+                  />
+                  <GermlineSomaticHeader
+                    includeEmailLink
+                    annotation={{
+                      gene: this.store.hugoSymbol,
+                      alteration: this.store.alterationName,
+                      cancerType: this.store.cancerTypeName,
+                    }}
+                    appStore={this.props.appStore}
+                    alterationNameWithDiff={this.store.alterationNameWithDiff}
+                    isGermline={this.store.germline}
+                  />
+                </Col>
+                <Col md={11}>
+                  <Row className={classNames(styles.descriptionContainer)}>
+                    <Col>
+                      <h3>Variant Overview</h3>
+                      {this.store.annotationData.result.background}
+                    </Col>
+                  </Row>
+                  {this.store.annotationData.result.mutationEffect
+                    .description && (
+                    <Row className={classNames(styles.descriptionContainer)}>
+                      <Col>
+                        <ShowHideText
+                          show={this.showMutationEffect}
+                          title="mutation effect description"
+                          content={
+                            <MutationEffectDescription
+                              hugoSymbol={this.store.hugoSymbol}
+                              description={
+                                this.store.annotationData.result.mutationEffect
+                                  .description
+                              }
+                            />
+                          }
+                          onClick={() =>
+                            this.toggleMutationEffect(!this.showMutationEffect)
+                          }
+                        />
+                      </Col>
+                    </Row>
+                  )}
+                </Col>
+              </Row>
+            </Container>
+            <StickyMiniNavBar
+              title={
+                <span className={'d-flex align-items-center'}>
+                  <span>
+                    {this.store.hugoSymbol} {this.store.alterationNameWithDiff}{' '}
+                  </span>
+                  <GeneticTypeTag
+                    className={'ml-2'}
+                    isGermline={this.store.germline}
+                  />
+                </span>
+              }
+            />
+            <Container>
+              <Row className="justify-content-center">
+                <Col md={11}>
+                  <SomaticGermlineAlterationTiles
+                    includeTitle
+                    variantAnnotation={this.store.annotationData.result}
+                    isGermline={this.store.germline}
+                  />
+                </Col>
+              </Row>
+              <Row className="justify-content-center">
+                <Col md={11}>
+                  {this.store.germline &&
+                    (this.store.genomicIndicators.isPending ||
+                      this.store.genomicIndicators.result.length > 0) && (
+                      <>
+                        <MiniNavBarHeader id="genomic-indicators">
+                          Genomic Indicators
+                        </MiniNavBarHeader>
+                        <GenomicIndicatorTable
+                          data={this.store.genomicIndicators.result}
+                          isPending={this.store.genomicIndicators.isPending}
+                        />
+                      </>
+                    )}
+                  {(this.fdaImplication.length > 0 ||
+                    this.therapeuticImplications.length > 0 ||
+                    this.diagnosticImplications.length > 0 ||
+                    this.prognosticImplications.length > 0) && (
+                    <>
+                      <MiniNavBarHeader id="clinical-implications">
+                        Clinical Implications For This Biomarker
+                      </MiniNavBarHeader>
+                      <SomaticGermlineAlterationView
+                        appStore={this.props.appStore}
+                        hugoSymbol={this.store.hugoSymbol}
+                        alteration={this.store.alterationName}
+                        alterationQuery={this.store.alterationQuery}
+                        germline={this.store.germline}
+                        matchedAlteration={this.store.alteration.result}
+                        tumorType={this.store.cancerTypeName}
+                        onChangeTumorType={this.onChangeTumorType.bind(this)}
+                        annotation={this.store.annotationData.result}
+                        biologicalAlterations={
+                          this.store.biologicalAlterations.result
+                        }
+                        relevantAlterations={undefined}
+                        fdaImplication={this.fdaImplication}
+                        therapeuticImplications={this.therapeuticImplications}
+                        diagnosticImplications={this.diagnosticImplications}
+                        prognosticImplications={this.prognosticImplications}
+                        defaultSelectedTab={this.selectedTab}
+                        onChangeTab={this.onChangeTab}
+                        routing={this.props.routing}
+                      />
+                    </>
+                  )}
+                </Col>
+              </Row>
+            </Container>
+          </StickyMiniNavBarContextProvider>
+        ) : (
+          <If condition={this.errorOccurred}>
+            <Then>
+              <Alert variant="warning" className={'text-center'}>
+                An error occurred while annotating your variant.
+              </Alert>
+            </Then>
+            <Else>
+              <LoadingIndicator
+                size={LoaderSize.LARGE}
+                center={true}
+                isLoading={true}
+              />
+            </Else>
+          </If>
+        )}
+      </div>
+    );
+  }
+}
diff --git a/src/main/webapp/app/pages/yearEndSummaryPage/BiomarkerTableData.tsx b/src/main/webapp/app/pages/yearEndSummaryPage/BiomarkerTableData.tsx
index 37b5fd8d5..56ef2b488 100644
--- a/src/main/webapp/app/pages/yearEndSummaryPage/BiomarkerTableData.tsx
+++ b/src/main/webapp/app/pages/yearEndSummaryPage/BiomarkerTableData.tsx
@@ -691,7 +691,7 @@ export const DATA: { [key in TableKey]: TableData } = {
         'ALK Fusions',
         'Inflammatory Myofibroblastic Tumor',
         'Crizotinib',
-        'Novel clinically actionable biomarker in this cancer type ',
+        'Novel clinically actionable biomarker in this cancer type',
       ],
       [
         'KRAS G12C',
@@ -711,24 +711,24 @@ export const DATA: { [key in TableKey]: TableData } = {
         'BRCA2 Oncogenic Mutations',
         'Uterine Sarcoma',
         'Olaparib, Rucaparib, Niraparib',
-        'Novel clinically actionable biomarker in this cancer type ',
+        'Novel clinically actionable biomarker in this cancer type',
       ],
       [
         'PALB2 Oncogenic Mutations',
         'Pancreatic Cancer',
         'Rucaparib',
-        'Novel clinically actionable biomarker in this cancer type ',
+        'Novel clinically actionable biomarker in this cancer type',
       ],
       [
         'BRCA1/2 Oncogenic Mutations',
         'Pancreatic Cancer',
         'Rucaparib',
-        'Novel clinically actionable biomarker in this cancer type ',
+        'Novel clinically actionable biomarker in this cancer type',
       ],
       [
         'EGFR S768I, L861Q, G719',
         'Non-Small Cell Lung Cancer',
-        'Osimertinib ',
+        'Osimertinib',
         'Addition of novel drug to an existing clinically actionable biomarker',
       ],
       [
@@ -765,15 +765,15 @@ export const DATA: { [key in TableKey]: TableData } = {
     [LEVELS.Tx3]: [
       [
         'KRAS G12C',
-        'Gastrointestinal cancers ',
+        'Gastrointestinal cancers',
         'Adagrasib',
-        'Novel clinically actionable biomarker in this cancer type ',
+        'Novel clinically actionable biomarker in this cancer type',
       ],
       [
         'KRAS G12C',
         'Pancreatic cancer',
         'Sotorasib',
-        'Novel clinically actionable biomarker in this cancer type ',
+        'Novel clinically actionable biomarker in this cancer type',
       ],
       [
         'TP53 Y220C',
@@ -820,13 +820,13 @@ export const DATA: { [key in TableKey]: TableData } = {
       [
         'KMT2A Fusions',
         'B-Lymphoblastic Leukemia/Lymphoma, Acute Myeloid Leukemia',
-        'SNDX-5613 ',
+        'SNDX-5613',
         'Novel clinically actionable biomarker',
       ],
       [
         'NPM1 Oncogenic Mutations',
         'Acute Myeloid Leukemia',
-        'SNDX-5613 ',
+        'SNDX-5613',
         'Novel clinically actionable biomarker',
       ],
     ],
@@ -835,7 +835,7 @@ export const DATA: { [key in TableKey]: TableData } = {
         'PIK3CA Oncogenic Mutations',
         <div style={{ minWidth: 150 }}>All Solid Tumors</div>,
         'RLY-2608',
-        'Novel clinically actionable biomarker in this cancer type ',
+        'Novel clinically actionable biomarker in this cancer type',
       ],
       [
         'PIK3CA H1047R',
diff --git a/src/main/webapp/app/routes/AdminRoutes.tsx b/src/main/webapp/app/routes/AdminRoutes.tsx
index f94a56ab0..740972c4a 100644
--- a/src/main/webapp/app/routes/AdminRoutes.tsx
+++ b/src/main/webapp/app/routes/AdminRoutes.tsx
@@ -12,51 +12,60 @@ import ResourceUsageDetailsPage from 'app/pages/usageAnalysisPage/ResourceUsageD
 import { CreateCompanyPage } from 'app/pages/CreateCompanyPage';
 import CompanyDetailsPage from 'app/pages/companyManagement/CompanyDetailsPage';
 import ReadOnlyMode from 'app/shared/readonly/ReadOnlyMode';
+import WindowStore from 'app/store/WindowStore';
 
-const AdminRoutes = () => {
+const AdminRoutes = ({ widowStore }: { widowStore: WindowStore }) => {
   return (
     <Switch>
       <ErrorBoundaryRoute
         exact
         path={PAGE_ROUTE.ADMIN_USER_DETAILS}
         component={UserDetailsPage}
+        windowStore={widowStore}
       />
       <ErrorBoundaryRoute
         exact
         path={PAGE_ROUTE.ADMIN_USAGE_ANALYSIS}
         component={UsageAnalysisPage}
+        windowStore={widowStore}
       />
       <ErrorBoundaryRoute
         exact
         path={PAGE_ROUTE.ADMIN_USER_USAGE_DETAILS}
         component={UserUsageDetailsPage}
+        windowStore={widowStore}
       />
       <ErrorBoundaryRoute
         exact
         path={PAGE_ROUTE.ADMIN_RESOURCE_DETAILS}
         component={ResourceUsageDetailsPage}
+        windowStore={widowStore}
       />
       <ErrorBoundaryRoute
         exact
         path={PAGE_ROUTE.ADMIN_SEND_EMAILS}
         component={ReadOnlyMode(SendEmailsPage)}
+        windowStore={widowStore}
       />
       <ErrorBoundaryRoute
         exact
         path={PAGE_ROUTE.ADMIN_CREATE_ACCOUNT}
         component={ReadOnlyMode(CreateAccountPage)}
+        windowStore={widowStore}
       />
       <ErrorBoundaryRoute
         exact
         path={PAGE_ROUTE.ADMIN_ADD_COMPANY}
         component={ReadOnlyMode(CreateCompanyPage)}
+        windowStore={widowStore}
       />
       <ErrorBoundaryRoute
         exact
         path={PAGE_ROUTE.ADMIN_COMPANY_DETAILS}
         component={CompanyDetailsPage}
+        windowStore={widowStore}
       />
-      <ErrorBoundaryRoute component={PageNotFound} />
+      <ErrorBoundaryRoute component={PageNotFound} windowStore={widowStore} />
     </Switch>
   );
 };
diff --git a/src/main/webapp/app/routes/routes.tsx b/src/main/webapp/app/routes/routes.tsx
index b95a37211..1ba82228b 100644
--- a/src/main/webapp/app/routes/routes.tsx
+++ b/src/main/webapp/app/routes/routes.tsx
@@ -37,6 +37,9 @@ import { NewsPageNavTab } from 'app/pages/newsPage/NewsPageNavTab';
 import CompanionDiagnosticDevicePage from 'app/pages/companionDiagnosticDevicesPage/companionDiagnosticDevicePage';
 import OncokbRoute from 'app/shared/route/OncokbRoute';
 import GenePage from 'app/pages/genePage/GenePage';
+import { SomaticGermlineAlterationPage } from 'app/pages/somaticGermlineAlterationPage/SomaticGermlineAlterationPage';
+import { SomaticGermlineCancerTypePage } from 'app/pages/annotationPage/SomaticGermlineCancerTypePage';
+import WindowStore from 'app/store/WindowStore';
 
 const getOldLevelsRedirectRoute = (hash: string) => {
   const queryStrings = QueryString.parse(hash) as {
@@ -69,11 +72,17 @@ const AppRoutes = (props: {
   authenticationStore: AuthenticationStore;
   appStore: AppStore;
   routing: RouterStore;
+  windowStore: WindowStore;
 }) => {
   // Redirect needs to be defined first
   return (
     <Switch>
-      <OncokbRoute exact path={PAGE_ROUTE.HOME} component={HomePage} />
+      <OncokbRoute
+        exact
+        path={PAGE_ROUTE.HOME}
+        windowStore={props.windowStore}
+        component={HomePage}
+      />
       <Redirect exact from={'/updates'} to={PAGE_ROUTE.NEWS} />
       <Redirect exact from={'/genes'} to={PAGE_ROUTE.CANCER_GENES} />
       <Redirect
@@ -117,24 +126,33 @@ const AppRoutes = (props: {
           appStore={props.appStore}
           path={PAGE_ROUTE.LOGIN}
           component={Login}
+          windowStore={props.windowStore}
+        />
+        <ErrorBoundaryRoute
+          exact
+          path={PAGE_ROUTE.LOGOUT}
+          component={Logout}
+          windowStore={props.windowStore}
         />
-        <ErrorBoundaryRoute exact path={PAGE_ROUTE.LOGOUT} component={Logout} />
         <RecaptchaBoundaryRoute
           exact
           isUserAuthenticated={props.authenticationStore.isUserAuthenticated}
           appStore={props.appStore}
           path={PAGE_ROUTE.REGISTER}
           component={ApiAccessPageNavTab}
+          windowStore={props.windowStore}
         />
         <ErrorBoundaryRoute
           exact
           path={PAGE_ROUTE.API_ACCESS}
           component={ApiAccessPageNavTab}
+          windowStore={props.windowStore}
         />
         <ErrorBoundaryRoute
           exact
           path={PAGE_ROUTE.FAQ_ACCESS}
           component={FAQPage}
+          windowStore={props.windowStore}
         />
         <RecaptchaBoundaryRoute
           exact
@@ -142,6 +160,7 @@ const AppRoutes = (props: {
           appStore={props.appStore}
           path={PAGE_ROUTE.CANCER_GENES}
           component={CancerGenesPage}
+          windowStore={props.windowStore}
         />
         <RecaptchaBoundaryRoute
           exact
@@ -149,6 +168,7 @@ const AppRoutes = (props: {
           appStore={props.appStore}
           path={PAGE_ROUTE.ACTIONABLE_GENE}
           component={ActionableGenesPage}
+          windowStore={props.windowStore}
         />
         <RecaptchaBoundaryRoute
           exact
@@ -156,6 +176,7 @@ const AppRoutes = (props: {
           appStore={props.appStore}
           path={PAGE_ROUTE.ONCOLOGY_TX}
           component={OncologyTherapiesPage}
+          windowStore={props.windowStore}
         />
         <RecaptchaBoundaryRoute
           exact
@@ -163,6 +184,7 @@ const AppRoutes = (props: {
           appStore={props.appStore}
           path={PAGE_ROUTE.CDX}
           component={CompanionDiagnosticDevicePage}
+          windowStore={props.windowStore}
         />
         <RecaptchaBoundaryRoute
           exact
@@ -170,6 +192,7 @@ const AppRoutes = (props: {
           appStore={props.appStore}
           path={PAGE_ROUTE.GENE}
           component={GenePage}
+          windowStore={props.windowStore}
         />
         <RecaptchaBoundaryRoute
           exact
@@ -177,6 +200,8 @@ const AppRoutes = (props: {
           appStore={props.appStore}
           path={PAGE_ROUTE.SOMATIC_GENE}
           component={SomaticGermlineGenePage}
+          pageContainer={({ children }) => children}
+          windowStore={props.windowStore}
         />
         <RecaptchaBoundaryRoute
           exact
@@ -184,6 +209,8 @@ const AppRoutes = (props: {
           appStore={props.appStore}
           path={PAGE_ROUTE.GERMLINE_GENE}
           component={SomaticGermlineGenePage}
+          pageContainer={({ children }) => children}
+          windowStore={props.windowStore}
         />
         <RecaptchaBoundaryRoute
           exact
@@ -191,6 +218,43 @@ const AppRoutes = (props: {
           appStore={props.appStore}
           path={PAGE_ROUTE.ALTERATION}
           component={AlterationPage}
+          windowStore={props.windowStore}
+        />
+        <RecaptchaBoundaryRoute
+          exact
+          isUserAuthenticated={props.authenticationStore.isUserAuthenticated}
+          appStore={props.appStore}
+          path={PAGE_ROUTE.GERMLINE_ALTERATION}
+          component={SomaticGermlineAlterationPage}
+          pageContainer={({ children }) => children}
+          windowStore={props.windowStore}
+        />
+        <RecaptchaBoundaryRoute
+          exact
+          isUserAuthenticated={props.authenticationStore.isUserAuthenticated}
+          appStore={props.appStore}
+          path={PAGE_ROUTE.SOMATIC_ALTERATION}
+          pageContainer={({ children }) => children}
+          component={SomaticGermlineAlterationPage}
+          windowStore={props.windowStore}
+        />
+        <RecaptchaBoundaryRoute
+          exact
+          isUserAuthenticated={props.authenticationStore.isUserAuthenticated}
+          appStore={props.appStore}
+          path={PAGE_ROUTE.GERMLINE_TUMOR_TYPE}
+          pageContainer={({ children }) => children}
+          component={SomaticGermlineCancerTypePage}
+          windowStore={props.windowStore}
+        />
+        <RecaptchaBoundaryRoute
+          exact
+          isUserAuthenticated={props.authenticationStore.isUserAuthenticated}
+          appStore={props.appStore}
+          path={PAGE_ROUTE.SOMATIC_TUMOR_TYPE}
+          pageContainer={({ children }) => children}
+          component={SomaticGermlineCancerTypePage}
+          windowStore={props.windowStore}
         />
         <RecaptchaBoundaryRoute
           exact
@@ -198,6 +262,7 @@ const AppRoutes = (props: {
           appStore={props.appStore}
           path={PAGE_ROUTE.HGVSG_WITH_QUERY}
           component={GenomicPage}
+          windowStore={props.windowStore}
         />
         <RecaptchaBoundaryRoute
           exact
@@ -205,6 +270,7 @@ const AppRoutes = (props: {
           appStore={props.appStore}
           path={PAGE_ROUTE.GENOMIC_CHANGE_WITH_QUERY}
           component={GenomicPage}
+          windowStore={props.windowStore}
         />
         <RecaptchaBoundaryRoute
           exact
@@ -212,52 +278,80 @@ const AppRoutes = (props: {
           appStore={props.appStore}
           path={PAGE_ROUTE.ALTERATION_TUMOR_TYPE}
           component={AlterationPage}
+          windowStore={props.windowStore}
         />
         <OncokbRoute
           exact
           path={PAGE_ROUTE.ABOUT}
           component={AboutPageNavTab}
+          windowStore={props.windowStore}
+        />
+        <OncokbRoute
+          exact
+          path={PAGE_ROUTE.TEAM}
+          component={AboutPageNavTab}
+          windowStore={props.windowStore}
+        />
+        <OncokbRoute
+          exact
+          path={PAGE_ROUTE.SOP}
+          component={AboutPageNavTab}
+          windowStore={props.windowStore}
         />
-        <OncokbRoute exact path={PAGE_ROUTE.TEAM} component={AboutPageNavTab} />
-        <OncokbRoute exact path={PAGE_ROUTE.SOP} component={AboutPageNavTab} />
         <OncokbRoute
           exact
           path={PAGE_ROUTE.YEAR_END_SUMMARY}
           component={NewsPageNavTab}
+          windowStore={props.windowStore}
+        />
+        <OncokbRoute
+          exact
+          path={PAGE_ROUTE.NEWS}
+          component={NewsPageNavTab}
+          windowStore={props.windowStore}
         />
-        <OncokbRoute exact path={PAGE_ROUTE.NEWS} component={NewsPageNavTab} />
         <OncokbRoute
           exact
           path={PAGE_ROUTE.FDA_RECOGNITION}
           component={AboutPageNavTab}
+          windowStore={props.windowStore}
         />
         <OncokbRoute
           exact
           path={PAGE_ROUTE.TERMS}
           component={ApiAccessPageNavTab}
+          windowStore={props.windowStore}
         />
-        <OncokbRoute exact path={PAGE_ROUTE.LEVELS}>
+        <OncokbRoute
+          exact
+          path={PAGE_ROUTE.LEVELS}
+          windowStore={props.windowStore}
+        >
           {getOldLevelsRedirectRoute(window.location.hash)}
         </OncokbRoute>
         <OncokbRoute
           exact
           path={PAGE_ROUTE.DX}
           component={LevelOfEvidencePage}
+          windowStore={props.windowStore}
         />
         <OncokbRoute
           exact
           path={PAGE_ROUTE.PX}
           component={LevelOfEvidencePage}
+          windowStore={props.windowStore}
         />
         <OncokbRoute
           exact
           path={PAGE_ROUTE.V2}
           component={LevelOfEvidencePage}
+          windowStore={props.windowStore}
         />
         <OncokbRoute
           exact
           path={PAGE_ROUTE.FDA_NGS}
           component={LevelOfEvidencePage}
+          windowStore={props.windowStore}
         />
 
         <RecaptchaBoundaryRoute
@@ -266,13 +360,7 @@ const AppRoutes = (props: {
           appStore={props.appStore}
           path={PAGE_ROUTE.ACCOUNT_VERIFY}
           render={ReadOnlyMode(ActivateAccount)}
-        />
-        <RecaptchaBoundaryRoute
-          exact
-          isUserAuthenticated={props.authenticationStore.isUserAuthenticated}
-          appStore={props.appStore}
-          path={PAGE_ROUTE.ACCOUNT_PASSWORD_RESET_REQUEST}
-          render={ReadOnlyMode(PasswordResetInit)}
+          windowStore={props.windowStore}
         />
         <RecaptchaBoundaryRoute
           exact
@@ -280,6 +368,7 @@ const AppRoutes = (props: {
           appStore={props.appStore}
           path={PAGE_ROUTE.ACCOUNT_PASSWORD_RESET_FINISH}
           render={ReadOnlyMode(PasswordResetFinish)}
+          windowStore={props.windowStore}
         />
         <RecaptchaBoundaryRoute
           exact
@@ -287,6 +376,7 @@ const AppRoutes = (props: {
           appStore={props.appStore}
           path={PAGE_ROUTE.ACCOUNT_ACTIVE_TRIAL_FINISH}
           render={ReadOnlyMode(ActivateTrialFinish)}
+          windowStore={props.windowStore}
         />
         <PrivateRoute
           authenticationStore={props.authenticationStore}
@@ -294,6 +384,7 @@ const AppRoutes = (props: {
           path={PAGE_ROUTE.ADMIN}
           component={AdminRoutes}
           hasAnyAuthorities={[AUTHORITIES.ADMIN]}
+          windowStore={props.windowStore}
         />
         <PrivateRoute
           exact
@@ -302,6 +393,7 @@ const AppRoutes = (props: {
           path={PAGE_ROUTE.ACCOUNT_PASSWORD}
           render={ReadOnlyMode(AccountPassword)}
           hasAnyAuthorities={[AUTHORITIES.ADMIN, AUTHORITIES.USER]}
+          windowStore={props.windowStore}
         />
         <PrivateRoute
           exact
@@ -310,6 +402,7 @@ const AppRoutes = (props: {
           routing={props.routing}
           component={AccountPage}
           hasAnyAuthorities={[AUTHORITIES.ADMIN, AUTHORITIES.USER]}
+          windowStore={props.windowStore}
         />
         <PrivateRoute
           exact
@@ -318,6 +411,7 @@ const AppRoutes = (props: {
           routing={props.routing}
           render={ReadOnlyMode(UserPage, true)}
           hasAnyAuthorities={[AUTHORITIES.ADMIN]}
+          windowStore={props.windowStore}
         />
         <PrivateRoute
           exact
@@ -326,6 +420,7 @@ const AppRoutes = (props: {
           routing={props.routing}
           render={ReadOnlyMode(CompanyPage, true)}
           hasAnyAuthorities={[AUTHORITIES.ADMIN]}
+          windowStore={props.windowStore}
         />
         <PrivateRoute
           exact
@@ -334,8 +429,12 @@ const AppRoutes = (props: {
           routing={props.routing}
           render={ReadOnlyMode(CreateCompanyUsersPage)}
           hasAnyAuthorities={[AUTHORITIES.ADMIN]}
+          windowStore={props.windowStore}
+        />
+        <ErrorBoundaryRoute
+          component={PageNotFound}
+          windowStore={props.windowStore}
         />
-        <ErrorBoundaryRoute component={PageNotFound} />
       </Switch>
     </Switch>
   );
diff --git a/src/main/webapp/app/shared/dropdown/SomaticGermlineCancerTypeSelect.module.scss b/src/main/webapp/app/shared/dropdown/SomaticGermlineCancerTypeSelect.module.scss
new file mode 100644
index 000000000..9dd8b52cb
--- /dev/null
+++ b/src/main/webapp/app/shared/dropdown/SomaticGermlineCancerTypeSelect.module.scss
@@ -0,0 +1,8 @@
+.cancerTypeWrapper {
+  max-width: 600px;
+  width: 100%;
+}
+
+.pretext {
+  margin-right: 1rem;
+}
diff --git a/src/main/webapp/app/shared/dropdown/SomaticGermlineCancerTypeSelect.tsx b/src/main/webapp/app/shared/dropdown/SomaticGermlineCancerTypeSelect.tsx
new file mode 100644
index 000000000..124a11f00
--- /dev/null
+++ b/src/main/webapp/app/shared/dropdown/SomaticGermlineCancerTypeSelect.tsx
@@ -0,0 +1,167 @@
+import React, { CSSProperties } from 'react';
+import CancerTypeSelect from './CancerTypeSelect';
+import classnames from 'classnames';
+import { COLOR_BLUE } from 'app/config/theme';
+import styles from './SomaticGermlineCancerTypeSelect.module.scss';
+import InfoIcon from '../icons/InfoIcon';
+import { OncoTreeLink, getAlterationPageLink } from '../utils/UrlUtils';
+import { StylesConfig } from 'react-select';
+import { RouterStore } from 'mobx-react-router';
+
+export default function SomaticGermlineCancerTypeSelect({
+  cancerType,
+  selectStyles,
+  className,
+  isClearable,
+  pretext,
+  routing,
+  hugoSymbol,
+  alterationQuery,
+  germline,
+  onchange,
+}: {
+  cancerType?: string;
+  selectStyles?: StylesConfig;
+  className?: string;
+  isClearable?: boolean;
+  pretext?: React.ReactNode;
+  routing: RouterStore;
+  hugoSymbol: string;
+  alterationQuery: string;
+  germline: boolean;
+  onchange?: (cancerType: string) => void;
+}) {
+  const {
+    control,
+    indicatorsContainer,
+    indicatorSeparator,
+    dropdownIndicator,
+    clearIndicator,
+    valueContainer,
+    input,
+    menu,
+    ...remainingStyles
+  }: StylesConfig = selectStyles ?? {};
+  return (
+    <span
+      className={classnames(
+        styles.cancerTypeWrapper,
+        'mr-2',
+        'align-items-center',
+        'justify-content-left',
+        'd-flex'
+      )}
+    >
+      {pretext}
+      <span className={classnames('flex-grow-1')}>
+        <CancerTypeSelect
+          styles={{
+            control(base, props) {
+              const newBase: CSSProperties = {
+                ...base,
+                borderBottomWidth: '1px',
+                borderBottomColor: COLOR_BLUE,
+                borderStyle: 'none',
+                borderBottomStyle: 'solid',
+                borderRadius: '0px',
+              };
+              newBase['&:hover'] = {
+                borderBottomColor: COLOR_BLUE,
+              };
+              return control?.(newBase, props) ?? newBase;
+            },
+            indicatorsContainer(base, props) {
+              const newBase: CSSProperties = {
+                ...base,
+              };
+
+              (newBase['& div'] = {
+                color: COLOR_BLUE,
+              }),
+                (newBase['& div:hover'] = {
+                  color: COLOR_BLUE,
+                });
+              return indicatorsContainer?.(newBase, props) ?? newBase;
+            },
+            indicatorSeparator(base, props) {
+              const newBase: CSSProperties = {
+                ...base,
+                width: '0px',
+              };
+              return indicatorSeparator?.(newBase, props) ?? newBase;
+            },
+            dropdownIndicator(base, props) {
+              const newBase: CSSProperties = {
+                ...base,
+                padding: 4,
+              };
+              return dropdownIndicator?.(newBase, props) ?? newBase;
+            },
+            clearIndicator(base, props) {
+              const newBase: CSSProperties = {
+                ...base,
+                padding: 4,
+              };
+              return clearIndicator?.(newBase, props) ?? newBase;
+            },
+            valueContainer(base, props) {
+              const newBase: CSSProperties = {
+                ...base,
+                padding: '0px 6px',
+              };
+              return valueContainer?.(newBase, props) ?? newBase;
+            },
+            input(base, props) {
+              const newBase: CSSProperties = {
+                ...base,
+                margin: 0,
+                padding: 0,
+              };
+              return input?.(newBase, props) ?? newBase;
+            },
+            menu(base, props) {
+              const newBase: CSSProperties = {
+                ...base,
+                zIndex: 10,
+              };
+              return menu?.(newBase, props) ?? newBase;
+            },
+            ...remainingStyles,
+          }}
+          className={className}
+          isClearable={isClearable}
+          cancerTypes={cancerType ? [cancerType] : undefined}
+          onChange={value => {
+            if (
+              typeof value === 'object' &&
+              value !== null &&
+              'value' in value
+            ) {
+              routing.history.push(
+                getAlterationPageLink({
+                  hugoSymbol,
+                  alteration: alterationQuery,
+                  germline,
+                  cancerType: value.value,
+                  withProtocolHostPrefix: false,
+                })
+              );
+              onchange?.(value.value);
+            }
+          }}
+        />
+      </span>
+      <span style={{ width: '1rem' }}></span>
+      <InfoIcon
+        overlay={
+          <span>
+            For cancer type specific information, please select a cancer type
+            from the dropdown. The cancer type is curated using <OncoTreeLink />
+          </span>
+        }
+        placement="top"
+      />
+      <span style={{ marginRight: '-0.5rem' }}></span>
+    </span>
+  );
+}
diff --git a/src/main/webapp/app/shared/header/GermlineSomaticHeader.module.scss b/src/main/webapp/app/shared/header/GermlineSomaticHeader.module.scss
new file mode 100644
index 000000000..e099208d7
--- /dev/null
+++ b/src/main/webapp/app/shared/header/GermlineSomaticHeader.module.scss
@@ -0,0 +1,29 @@
+.header {
+  margin-top: 1.5rem;
+  margin-bottom: 1rem !important;
+}
+
+.headerContent {
+  gap: 0.5rem;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.headerContentGene {
+  text-wrap: nowrap;
+}
+
+@media (min-width: 600px) {
+  .headerContent {
+    justify-content: flex-start;
+  }
+}
+
+@media (min-width: 800px) {
+  .headerContent {
+    flex-wrap: nowrap;
+  }
+}
diff --git a/src/main/webapp/app/shared/header/GermlineSomaticHeader.tsx b/src/main/webapp/app/shared/header/GermlineSomaticHeader.tsx
new file mode 100644
index 000000000..8d6076575
--- /dev/null
+++ b/src/main/webapp/app/shared/header/GermlineSomaticHeader.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import classnames from 'classnames';
+import { FeedbackType } from 'app/components/feedback/types';
+import { FeedbackIcon } from 'app/components/feedback/FeedbackIcon';
+import styles from './GermlineSomaticHeader.module.scss';
+import AppStore from 'app/store/AppStore';
+import { AnnotationStore } from 'app/store/AnnotationStore';
+import GeneticTypeTag from 'app/components/geneticTypeTag/GeneticTypeTag';
+export default function GermlineSomaticHeader({
+  includeEmailLink,
+  annotation,
+  appStore,
+  alterationNameWithDiff,
+  isGermline,
+  extra,
+}: {
+  includeEmailLink: boolean;
+  appStore: AppStore;
+  alterationNameWithDiff: AnnotationStore['alterationNameWithDiff'];
+  annotation: Parameters<typeof FeedbackIcon>[0]['feedback']['annotation'];
+  isGermline: boolean;
+  extra?: React.ReactNode;
+}) {
+  return (
+    <h1 className={classnames(styles.header, 'h2')}>
+      <div className={classnames(styles.headerContent)}>
+        <span className={classnames(styles.headerContentGene)}>
+          {annotation?.gene} {alterationNameWithDiff}{' '}
+        </span>
+        <GeneticTypeTag className={'ml-2'} isGermline={isGermline} />
+        {extra}
+        <span style={{ fontSize: '0.5em' }} className={'ml-2'}>
+          {includeEmailLink && (
+            <FeedbackIcon
+              feedback={{
+                type: FeedbackType.ANNOTATION,
+                annotation,
+              }}
+              appStore={appStore}
+            />
+          )}
+        </span>
+      </div>
+    </h1>
+  );
+}
diff --git a/src/main/webapp/app/shared/nav/MiniNavBarHeader.tsx b/src/main/webapp/app/shared/nav/MiniNavBarHeader.tsx
index a7930a404..bb077a9c4 100644
--- a/src/main/webapp/app/shared/nav/MiniNavBarHeader.tsx
+++ b/src/main/webapp/app/shared/nav/MiniNavBarHeader.tsx
@@ -1,13 +1,26 @@
-import React from 'react';
+import React, { useContext, useEffect } from 'react';
+import { StickyMiniNavBarContext } from './StickyMiniNavBar';
 
 type IMiniNavBarHeader = {
   id: string;
   children: React.ReactNode;
+  className?: string;
 };
-export default function MiniNavBarHeader({ id, children }: IMiniNavBarHeader) {
+export default function MiniNavBarHeader({
+  id,
+  children,
+  className = 'mt-5',
+}: IMiniNavBarHeader) {
+  const { invalidateCache } = useContext(StickyMiniNavBarContext);
+  useEffect(() => {
+    invalidateCache();
+    return () => {
+      invalidateCache();
+    };
+  }, []);
   return (
-    <h4 id={id} className={'mt-5'} mini-nav-bar-header="">
+    <h3 id={id} className={className} mini-nav-bar-header="">
       {children}
-    </h4>
+    </h3>
   );
 }
diff --git a/src/main/webapp/app/shared/nav/SomaticGermlineBreadcrumbs.tsx b/src/main/webapp/app/shared/nav/SomaticGermlineBreadcrumbs.tsx
new file mode 100644
index 000000000..283f55865
--- /dev/null
+++ b/src/main/webapp/app/shared/nav/SomaticGermlineBreadcrumbs.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import {
+  ITextBreadcrumb,
+  ILinkBreadcrumb,
+  IDropdownBreadcrumb,
+  IInputBreadcrumb,
+  AnnotationBreadcrumbs,
+} from 'app/pages/annotationPage/AnnotationBreadcrumbs';
+import { getAlterationPageLink, getGenePageLink } from '../utils/UrlUtils';
+
+export default function SomaticGermlineBreadcrumbs({
+  hugoSymbol,
+  alterationNameWithDiff,
+  alterationName,
+  cancerTypeName,
+  germline,
+}: {
+  hugoSymbol: string;
+  alterationNameWithDiff: string;
+  alterationName: string;
+  cancerTypeName: string | undefined;
+  germline?: boolean;
+}) {
+  const breadcrumbs: (
+    | ITextBreadcrumb
+    | ILinkBreadcrumb
+    | IDropdownBreadcrumb
+    | IInputBreadcrumb
+  )[] = [
+    {
+      type: 'link',
+      key: 'gene',
+      text: hugoSymbol,
+      to: getGenePageLink({
+        hugoSymbol,
+        germline,
+      }),
+    } as ILinkBreadcrumb,
+    {
+      type: 'link',
+      key: 'alteration',
+      text: alterationNameWithDiff,
+      to: getAlterationPageLink({
+        hugoSymbol,
+        alteration: alterationName,
+        germline,
+      }),
+    } as ILinkBreadcrumb,
+  ];
+
+  if (cancerTypeName) {
+    breadcrumbs.push({
+      type: 'text',
+      text: cancerTypeName,
+      key: 'cancertype',
+    } as ITextBreadcrumb);
+  }
+
+  return <AnnotationBreadcrumbs breadcrumbs={breadcrumbs} />;
+}
diff --git a/src/main/webapp/app/shared/nav/StickyMiniNavBar.module.scss b/src/main/webapp/app/shared/nav/StickyMiniNavBar.module.scss
index 2b379f21e..c3444b630 100644
--- a/src/main/webapp/app/shared/nav/StickyMiniNavBar.module.scss
+++ b/src/main/webapp/app/shared/nav/StickyMiniNavBar.module.scss
@@ -15,7 +15,11 @@ $sticky-border: #e3e5ec;
 }
 
 .nav {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
   border-bottom: 1px solid $sticky-border;
+  min-height: 49px;
 }
 
 .containerSticky {
@@ -46,3 +50,11 @@ $sticky-border: #e3e5ec;
   font-weight: bold;
   border-bottom-color: $primary;
 }
+
+@media (min-width: 550px) {
+  .nav {
+    flex-direction: row;
+    align-items: center;
+    gap: 40px;
+  }
+}
diff --git a/src/main/webapp/app/shared/nav/StickyMiniNavBar.tsx b/src/main/webapp/app/shared/nav/StickyMiniNavBar.tsx
index 801fbe529..29d9c9d42 100644
--- a/src/main/webapp/app/shared/nav/StickyMiniNavBar.tsx
+++ b/src/main/webapp/app/shared/nav/StickyMiniNavBar.tsx
@@ -1,4 +1,11 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, {
+  useEffect,
+  useRef,
+  useState,
+  createContext,
+  useContext,
+  useCallback,
+} from 'react';
 import { Link, useLocation } from 'react-router-dom';
 import { Row, Col, Container } from 'react-bootstrap';
 import styles from './StickyMiniNavBar.module.scss';
@@ -43,6 +50,35 @@ function getHeader() {
   return document.querySelector('header');
 }
 
+export const StickyMiniNavBarContext = createContext<{
+  invalidateCache: () => void;
+  counter: number;
+}>({
+  invalidateCache() {
+    throw new Error(
+      'StickyMiniNavBarContext was not set, please add a StickyMiniNavBarContextProvider'
+    );
+  },
+  counter: 0,
+});
+
+export function StickyMiniNavBarContextProvider({
+  children,
+}: {
+  children: React.ReactNode[];
+}) {
+  const [counter, setCounter] = useState(0);
+
+  const invalidateCache = useCallback(() => {
+    setCounter(x => x + 1);
+  }, [setCounter]);
+  return (
+    <StickyMiniNavBarContext.Provider value={{ counter, invalidateCache }}>
+      {children}
+    </StickyMiniNavBarContext.Provider>
+  );
+}
+
 export default function StickyMiniNavBar({
   title,
   stickyBackgroundColor,
@@ -56,6 +92,7 @@ export default function StickyMiniNavBar({
   const [passedElements, setPassedElements] = useState<
     Record<string, { isPassed: boolean; isInView: boolean }>
   >({});
+  const { counter } = useContext(StickyMiniNavBarContext);
   const stickyDivRef = useRef<HTMLDivElement | null>(null);
   useScrollToHash({
     stickyHeight:
@@ -97,7 +134,7 @@ export default function StickyMiniNavBar({
         resizeObserver.unobserve(headerElement);
       }
     };
-  }, []);
+  }, [counter]);
 
   useEffect(() => {
     const miniNavBarSections = getNavBarSectionElements();
@@ -183,6 +220,10 @@ export default function StickyMiniNavBar({
     }
   }
 
+  if (sections.length < 2) {
+    return <></>;
+  }
+
   return (
     <div
       className={classNames(
@@ -198,14 +239,7 @@ export default function StickyMiniNavBar({
       <Container>
         <Row className="justify-content-center">
           <Col md={11}>
-            <nav
-              ref={stickyDivRef}
-              className={classnames('d-flex flex-row', styles.nav)}
-              style={{
-                gap: '40px',
-                height: '49px',
-              }}
-            >
+            <nav ref={stickyDivRef} className={classnames(styles.nav)}>
               {isSticky && (
                 <Link
                   className={classnames(styles.stickyHeader)}
diff --git a/src/main/webapp/app/shared/route/OncokbRoute.tsx b/src/main/webapp/app/shared/route/OncokbRoute.tsx
index 07fba5669..6053ac95a 100644
--- a/src/main/webapp/app/shared/route/OncokbRoute.tsx
+++ b/src/main/webapp/app/shared/route/OncokbRoute.tsx
@@ -1,52 +1,32 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { RouteProps, Route, RouteComponentProps } from 'react-router';
-
-type CanonicalLinkProps = { routeProps: RouteComponentProps };
-
-function CanonicalLink({ routeProps }: CanonicalLinkProps) {
-  useEffect(() => {
-    const canonicalEndpoint = routeProps.location.pathname;
-    const linkNode = document.createElement('link');
-
-    linkNode.setAttribute('id', 'canonical');
-    linkNode.setAttribute('rel', 'canonical');
-    linkNode.setAttribute(
-      'href',
-      `${location.protocol}//${location.host}${canonicalEndpoint}`
-    );
-
-    document.head.appendChild(linkNode);
-
-    return () => {
-      document.head.removeChild(linkNode);
-    };
-  }, [routeProps]);
-  return <></>;
-}
+import PageContainer from 'app/components/PageContainer';
+import WindowStore from 'app/store/WindowStore';
 
 export type OncokbRouteProps = RouteProps & {
-  addCanonicalLink?: boolean;
+  pageContainer?: (props: {
+    windowStore: WindowStore;
+    children: JSX.Element;
+  }) => JSX.Element;
+  windowStore: WindowStore;
 };
 
 export default function OncokbRoute({
   render,
   component,
-  addCanonicalLink = false,
+  windowStore,
+  pageContainer = props => <PageContainer {...props} />,
   ...rest
 }: OncokbRouteProps) {
   const newRender = (props: RouteComponentProps) => {
     return render ? (
-      <>
-        {render(props)}
-        {addCanonicalLink && <CanonicalLink routeProps={props} />}
-      </>
+      <>{render(props)}</>
     ) : (
-      <>
-        {React.createElement(component!, props)}
-
-        {addCanonicalLink && <CanonicalLink routeProps={props} />}
-      </>
+      <>{React.createElement(component!, props)}</>
     );
   };
-  return <Route render={newRender} {...rest} />;
+  return pageContainer({
+    windowStore,
+    children: <Route render={newRender} {...rest} />,
+  });
 }
diff --git a/src/main/webapp/app/shared/texts/ShowHideText.tsx b/src/main/webapp/app/shared/texts/ShowHideText.tsx
index 7d93336b0..a1da5bff3 100644
--- a/src/main/webapp/app/shared/texts/ShowHideText.tsx
+++ b/src/main/webapp/app/shared/texts/ShowHideText.tsx
@@ -12,7 +12,11 @@ const ShowHideText: React.FunctionComponent<{
   return (
     <div className={props.className}>
       <div
-        style={{ cursor: 'pointer', color: COLOR_PRIMARY }}
+        style={{
+          cursor: 'pointer',
+          color: COLOR_PRIMARY,
+          marginBottom: '0.5rem',
+        }}
         onClick={() => props.onClick()}
       >
         <span>{`${props.show ? 'Hide' : 'Show'} ${props.title}`}</span>{' '}
diff --git a/src/main/webapp/app/shared/tiles/SomaticGermlineTiles.module.scss b/src/main/webapp/app/shared/tiles/SomaticGermlineTiles.module.scss
new file mode 100644
index 000000000..e3059dc65
--- /dev/null
+++ b/src/main/webapp/app/shared/tiles/SomaticGermlineTiles.module.scss
@@ -0,0 +1,86 @@
+@import '../../variables.scss';
+
+.alterationTiles {
+  gap: 8px;
+  padding: 24px 0px;
+  align-items: stretch;
+  justify-content: flex-start;
+  flex-direction: row;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.itemLink a {
+  justify-content: initial;
+}
+
+.itemHeader {
+  font-size: 1rem;
+  color: #878d96;
+  font-family: $font-family-sans-serif !important;
+}
+
+.stringValue {
+  font-family: $font-family-sans-serif-bold !important;
+  font-size: 1.5rem !important;
+}
+
+.tileTitle {
+  font-family: $font-family-sans-serif-bold !important;
+}
+
+.alterationTileContainer {
+  container-type: inline-size;
+  width: 100%;
+}
+
+@media (min-width: 600px) {
+  .alterationTileContainer {
+    width: 50%;
+  }
+  .alterationTiles {
+    flex-wrap: nowrap;
+  }
+}
+
+.alterationTile {
+  padding: 16px;
+  width: 100%;
+  height: 100%;
+  gap: 8px;
+  box-shadow: $default-box-shadow;
+  border-radius: 8px;
+}
+
+.alterationTileColumnMerge {
+  grid-column: 1 / 3;
+}
+
+.alterationTileItems {
+  gap: 16px;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-auto-rows: 1fr;
+}
+
+.externalLinkContent {
+  color: $black;
+  margin-right: 10px;
+}
+
+@container (min-width: 550px) {
+  .alterationTileItems {
+    display: flex;
+    gap: 16px;
+    flex-direction: row;
+  }
+  .alterationTileItems > * {
+    border-right: 1px solid #e5e0df;
+    padding-right: 16px;
+    flex-grow: 1;
+  }
+
+  .alterationTileItems > *:last-child {
+    border-right: none;
+  }
+}
diff --git a/src/main/webapp/app/shared/tiles/SomaticGermlineTiles.tsx b/src/main/webapp/app/shared/tiles/SomaticGermlineTiles.tsx
new file mode 100644
index 000000000..0ee6ecdd2
--- /dev/null
+++ b/src/main/webapp/app/shared/tiles/SomaticGermlineTiles.tsx
@@ -0,0 +1,116 @@
+import React from 'react';
+import styles from './SomaticGermlineTiles.module.scss';
+import classNames from 'classnames';
+import { Linkout } from 'app/shared/links/Linkout';
+
+type AlterationItemProps =
+  | {
+      title: string;
+      show?: boolean;
+      value: JSX.Element | string;
+      link?: undefined;
+    }
+  | {
+      title: string;
+      show?: boolean;
+      value: string;
+      link: string;
+    };
+
+function AlterationItem({
+  title: itemTitle,
+  value,
+  link,
+}: AlterationItemProps) {
+  return (
+    <div>
+      <h4 className={classNames(styles.itemHeader)}>{itemTitle}</h4>
+      <div>
+        {typeof value === 'string' ? (
+          <div className={classNames('h5', styles.stringValue)}>
+            {link ? (
+              <div className={classNames(styles.itemLink)}>
+                <Linkout link={link}>
+                  <span className={styles.externalLinkContent}>{value}</span>
+                  <i className="fa fa-external-link" />
+                </Linkout>
+              </div>
+            ) : (
+              value
+            )}
+          </div>
+        ) : (
+          value
+        )}
+      </div>
+    </div>
+  );
+}
+
+export type AlterationTileProps = {
+  title?: string;
+  items: [AlterationItemProps, AlterationItemProps][];
+};
+
+function SomaticGermlineTile({
+  title,
+  items,
+}: AlterationTileProps): JSX.Element {
+  const slimClass = title === undefined ? styles.slim : undefined;
+  const showTile =
+    items.filter(item => item.filter(x => x.show ?? true).length > 0).length <
+    1;
+  if (showTile) {
+    return <></>;
+  }
+  return (
+    <div className={classNames(styles.alterationTileContainer)}>
+      <div
+        className={classNames(
+          'd-flex',
+          'flex-column',
+          styles.alterationTile,
+          slimClass
+        )}
+      >
+        {title && (
+          <h3 className={classNames('h6', styles.tileTitle)}>{title}</h3>
+        )}
+        <div className={classNames(styles.alterationTileItems, slimClass)}>
+          {items.map((parent, i) => {
+            if (Array.isArray(parent)) {
+              return parent
+                .filter(x => x.show ?? true)
+                .map((child, j) => {
+                  return <AlterationItem key={`${i}:${j}`} {...child} />;
+                });
+            } else {
+              return (
+                <div
+                  key={i}
+                  className={classNames(styles.alterationTileColumnMerge)}
+                >
+                  <AlterationItem {...parent} />
+                </div>
+              );
+            }
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function SomaticGermlineTiles({
+  tiles,
+}: {
+  tiles: AlterationTileProps[];
+}): JSX.Element {
+  return (
+    <div className={classNames(styles.alterationTiles)}>
+      {tiles.map((x, idx) => (
+        <SomaticGermlineTile key={idx} {...x} />
+      ))}
+    </div>
+  );
+}
diff --git a/src/main/webapp/app/shared/tiles/tile-utils.tsx b/src/main/webapp/app/shared/tiles/tile-utils.tsx
new file mode 100644
index 000000000..e3334f81c
--- /dev/null
+++ b/src/main/webapp/app/shared/tiles/tile-utils.tsx
@@ -0,0 +1,350 @@
+import HighestLevelEvidence from 'app/pages/somaticGermlineAlterationPage/HighestLevelEvidence';
+import {
+  VariantAnnotation,
+  MutationEffectResp,
+  GermlineVariant,
+  Query,
+  GeneNumber,
+} from '../api/generated/OncoKbPrivateAPI';
+import React from 'react';
+import classnames from 'classnames';
+import SomaticGermlineTiles, {
+  AlterationTileProps,
+} from './SomaticGermlineTiles';
+import { ONCOGENICITY, MUTATION_EFFECT, ONCOKB_TM } from 'app/config/constants';
+import {
+  isPositionalAlteration,
+  citationsHasInfo,
+  OncoKBOncogenicityIcon,
+} from '../utils/Utils';
+import { DefaultTooltip } from 'cbioportal-frontend-commons';
+import { CitationTooltip } from 'app/components/CitationTooltip';
+import {
+  COLOR_ICON_WITH_INFO,
+  COLOR_ICON_WITHOUT_INFO,
+} from 'app/config/theme';
+import {
+  Oncogenicity,
+  Pathogenicity,
+} from 'app/components/oncokbMutationMapper/OncokbMutationMapper';
+
+function OncogenicInfo({
+  isUnknownOncogenicity,
+  isVus,
+  oncogenicity,
+}: {
+  isUnknownOncogenicity: boolean;
+  oncogenicity: string | undefined;
+  isVus: boolean;
+  className?: string;
+}) {
+  return (
+    <span style={{ margin: '0px' }} className="h5">
+      <span>
+        {isUnknownOncogenicity
+          ? `${ONCOGENICITY.UNKNOWN} Oncogenic Effect`
+          : oncogenicity}
+      </span>
+      <OncoKBOncogenicityIcon
+        oncogenicity={oncogenicity}
+        isVus={isVus}
+        classNameParent={classnames('d-inline-block my-auto')}
+      />
+    </span>
+  );
+}
+
+function MutationEffectIcon({
+  mutationEffect,
+}: {
+  mutationEffect: MutationEffectResp;
+}) {
+  const hasCitations = citationsHasInfo(mutationEffect.citations);
+  const tooltipOverlay = () => (
+    <CitationTooltip
+      pmids={mutationEffect.citations.pmids}
+      abstracts={mutationEffect.citations.abstracts}
+    />
+  );
+  return (
+    <span className="h5">
+      <span>
+        {mutationEffect.knownEffect === MUTATION_EFFECT.UNKNOWN
+          ? `${MUTATION_EFFECT.UNKNOWN} Biological Effect`
+          : mutationEffect.knownEffect}
+      </span>
+      {hasCitations ? (
+        <DefaultTooltip overlay={tooltipOverlay} key="mutationEffectTooltip">
+          <i
+            className="fa fa-book mx-1"
+            style={{
+              fontSize: '0.8em',
+              color: hasCitations
+                ? COLOR_ICON_WITH_INFO
+                : COLOR_ICON_WITHOUT_INFO,
+            }}
+          ></i>
+        </DefaultTooltip>
+      ) : null}
+    </span>
+  );
+}
+function createHighestLevelOfEvidenceTileProps(
+  variantAnnotation: VariantAnnotation | GeneNumber,
+  includeTitle: boolean
+): AlterationTileProps {
+  const {
+    highestDiagnosticImplicationLevel,
+    highestFdaLevel,
+    highestPrognosticImplicationLevel,
+    highestResistanceLevel,
+    highestSensitiveLevel,
+  } = variantAnnotation;
+  return {
+    title: includeTitle ? 'Highest Level of Evidence' : undefined,
+    items: [
+      [
+        {
+          title: 'Therapeutic',
+          show: !!highestSensitiveLevel || !!highestResistanceLevel,
+          value: (
+            <div className={classnames('d-flex', 'flex-row')}>
+              <HighestLevelEvidence
+                type="Sensitive"
+                level={highestSensitiveLevel}
+              />
+              <HighestLevelEvidence
+                type="Resistance"
+                level={highestResistanceLevel}
+              />
+            </div>
+          ),
+        },
+        {
+          title: 'Diagnostic',
+          show: !!highestDiagnosticImplicationLevel,
+          value: (
+            <HighestLevelEvidence
+              type="DiagnosticImplication"
+              level={highestDiagnosticImplicationLevel}
+            />
+          ),
+        },
+      ],
+      [
+        {
+          title: 'Prognostic',
+          show: !!highestPrognosticImplicationLevel,
+          value: (
+            <HighestLevelEvidence
+              type="PrognosticImplication"
+              level={highestPrognosticImplicationLevel}
+            />
+          ),
+        },
+        {
+          title: 'FDA',
+          show: !!highestFdaLevel,
+          value: <HighestLevelEvidence type="Fda" level={highestFdaLevel} />,
+        },
+      ],
+    ],
+  };
+}
+
+function createMutationEffectTileProps(
+  variantAnnotation: VariantAnnotation,
+  includeTitle: boolean
+): AlterationTileProps {
+  const query = variantAnnotation.query;
+  const isPositionalAlt = isPositionalAlteration(
+    query.proteinStart,
+    query.proteinEnd,
+    query.consequence
+  );
+  const { mutationEffect, oncogenic, vus } = variantAnnotation;
+
+  const isUnknownOncogenicity =
+    !oncogenic || oncogenic === ONCOGENICITY.UNKNOWN;
+  return {
+    title: includeTitle ? 'Mutation Effect' : undefined,
+    items: [
+      [
+        {
+          title: 'Oncogenicity',
+          show: !isUnknownOncogenicity || !isPositionalAlt,
+          value: (
+            <OncogenicInfo
+              oncogenicity={oncogenic}
+              isVus={vus}
+              isUnknownOncogenicity={isUnknownOncogenicity}
+            />
+          ),
+        },
+        {
+          title: 'Biological Effect',
+          show:
+            mutationEffect &&
+            (mutationEffect.knownEffect !== MUTATION_EFFECT.UNKNOWN ||
+              isPositionalAlt),
+          value: <MutationEffectIcon mutationEffect={mutationEffect} />,
+        },
+      ],
+    ],
+  };
+}
+
+function createPathogenicityTileProps(
+  variantAnnotation: GermlineVariant,
+  includeTitle: boolean
+): AlterationTileProps {
+  return {
+    title: includeTitle ? 'Pathogenicity' : undefined,
+    items: [
+      [
+        {
+          title: ONCOKB_TM,
+          value: variantAnnotation.pathogenic,
+        },
+        {
+          title: 'Clinvar',
+          value: 'Clinvar not Implemented',
+          link: '#',
+        },
+      ],
+    ],
+  };
+}
+
+function createGeneticRiskTileProps(
+  variantAnnotation: GermlineVariant,
+  includeTitle: boolean
+): AlterationTileProps {
+  return {
+    title: includeTitle ? 'Genetic Risk' : undefined,
+    items: [
+      [
+        {
+          title: 'Penetrance',
+          value: variantAnnotation.penetrance,
+        },
+        {
+          title: 'Inheritance',
+          value: variantAnnotation.inheritanceMechanism,
+        },
+      ],
+    ],
+  };
+}
+
+type SomaticGermlineAlterationTilesProps = {
+  includeTitle: boolean;
+  isGermline: boolean;
+  variantAnnotation: VariantAnnotation;
+};
+
+export function SomaticGermlineAlterationTiles({
+  includeTitle,
+  ...rest
+}: SomaticGermlineAlterationTilesProps) {
+  const tiles: AlterationTileProps[] = [];
+  if (rest.isGermline) {
+    tiles.push(
+      createPathogenicityTileProps(
+        rest.variantAnnotation.germline,
+        includeTitle
+      )
+    );
+    tiles.push(
+      createGeneticRiskTileProps(rest.variantAnnotation.germline, includeTitle)
+    );
+  } else {
+    tiles.push(
+      createMutationEffectTileProps(rest.variantAnnotation, includeTitle)
+    );
+    tiles.push(
+      createHighestLevelOfEvidenceTileProps(
+        rest.variantAnnotation,
+        includeTitle
+      )
+    );
+  }
+
+  return <SomaticGermlineTiles tiles={tiles} />;
+}
+
+function makeTwoColumnRow<T>(arr: T[]): [T, T][] {
+  const columnSize = 2;
+  const rows: [T, T][] = [];
+  for (let tableRow = 0; tableRow < arr.length; tableRow += 2) {
+    const columns: T[] = [];
+    for (
+      let tableColumn = tableRow;
+      tableColumn < arr.length && tableColumn < tableRow + columnSize;
+      tableColumn++
+    ) {
+      columns.push(arr[tableColumn]);
+    }
+    rows.push(columns as [T, T]);
+  }
+  return rows;
+}
+
+export type SomaticGermlineGeneInfoTilesProps = {
+  isGermline: boolean;
+  geneNumber: GeneNumber;
+  oncogenicities: Oncogenicity[];
+  pathogenicities: Pathogenicity[];
+};
+
+export function SomaticGermlineGeneInfoTiles({
+  isGermline,
+  geneNumber,
+  oncogenicities,
+  pathogenicities,
+}: SomaticGermlineGeneInfoTilesProps) {
+  const tiles: AlterationTileProps[] = [];
+  const hasGeneticRiskInfo =
+    geneNumber.penetrance || geneNumber.inheritanceMechanism;
+
+  if (hasGeneticRiskInfo) {
+    tiles.push({
+      title: 'Genetic Risk',
+      items: [
+        [
+          {
+            title: 'Penetrance',
+            value: geneNumber.penetrance,
+          },
+          {
+            title: 'Mechanism of Inheritance',
+            value: geneNumber.inheritanceMechanism,
+          },
+        ],
+      ],
+    });
+  }
+  tiles.push(createHighestLevelOfEvidenceTileProps(geneNumber, true));
+  tiles.push({
+    title: `Annotated ${isGermline ? 'Variants' : 'Alterations'}`,
+    items: isGermline
+      ? makeTwoColumnRow(
+          pathogenicities.map(pathogenicity => {
+            return {
+              title: pathogenicity.pathogenicity,
+              value: pathogenicity.counts.toString(),
+            };
+          })
+        )
+      : makeTwoColumnRow(
+          oncogenicities.map(oncogenicity => {
+            return {
+              title: oncogenicity.oncogenicity,
+              value: oncogenicity.counts.toString(),
+            };
+          })
+        ),
+  });
+
+  return <SomaticGermlineTiles tiles={tiles} />;
+}
diff --git a/src/main/webapp/app/shared/utils/UrlUtils.tsx b/src/main/webapp/app/shared/utils/UrlUtils.tsx
index db9abda9d..3256c4e8e 100644
--- a/src/main/webapp/app/shared/utils/UrlUtils.tsx
+++ b/src/main/webapp/app/shared/utils/UrlUtils.tsx
@@ -35,14 +35,16 @@ export const getHostLinkWithProtocol = (): string => {
 
 export const getGenePageLink = (props: {
   hugoSymbol: string;
-  geneticType?: GENETIC_TYPE;
   searchQueries?: GenePageSearchQueries;
   hashQueries?: GenePageHashQueries;
   withProtocolHostPrefix?: boolean;
+  germline?: boolean;
 }): string => {
   let pageLink = `${PAGE_ROUTE.GENE_HEADER}/${props.hugoSymbol}`;
-  if (props.geneticType) {
-    pageLink += `/${props.geneticType}`;
+  if (props.germline !== undefined) {
+    pageLink += `/${
+      props.germline ? GENETIC_TYPE.GERMLINE : GENETIC_TYPE.SOMATIC
+    }`;
   }
   if (props.searchQueries && Object.keys(props.searchQueries).length > 0) {
     pageLink = `${pageLink}?${QueryString.stringify(props.searchQueries)}`;
@@ -89,6 +91,7 @@ export const getAlterationPageLink = (props: {
   searchQueries?: AlterationPageSearchQueries;
   hashQueries?: AlterationPageHashQueries;
   withProtocolHostPrefix?: boolean;
+  germline?: boolean;
 }): string => {
   const linkoutAltName = getCategoricalAlteration(
     typeof props.alteration === 'string'
@@ -96,7 +99,12 @@ export const getAlterationPageLink = (props: {
       : props.alteration.name
   );
 
-  let pageLink = `${PAGE_ROUTE.GENE_HEADER}/${props.hugoSymbol}/${linkoutAltName}`;
+  const geneTypePath =
+    props.germline !== undefined
+      ? `/${props.germline ? 'germline' : 'somatic'}`
+      : '';
+
+  let pageLink = `${PAGE_ROUTE.GENE_HEADER}/${props.hugoSymbol}${geneTypePath}/${linkoutAltName}`;
   if (props.cancerType) {
     pageLink = `${pageLink}/${encodeSlash(props.cancerType)}`;
   }
@@ -128,6 +136,7 @@ export const AlterationPageLink: React.FunctionComponent<{
   searchQueries?: AlterationPageSearchQueries;
   hashQueries?: AlterationPageHashQueries;
   showGene?: boolean;
+  germline?: boolean;
   onClick?: () => void;
 }> = props => {
   const alterationName = getAlterationName(props.alteration, true);
@@ -138,6 +147,7 @@ export const AlterationPageLink: React.FunctionComponent<{
     cancerType: props.cancerType,
     searchQueries: props.searchQueries,
     hashQueries: props.hashQueries,
+    germline: props.germline,
   });
   return (
     <>
@@ -164,6 +174,7 @@ export const getAlternativeAllelesPageLinks = (
       const alleleLines = alternativeAlleles.split('/').map((allele, index) => {
         return (
           <AlterationPageLink
+            key={index}
             hugoSymbol={hugoSymbol}
             alteration={`${positionalVar}${allele}`}
           >
@@ -219,6 +230,28 @@ export const parseGenePagePath = (pathname: string) => {
   }
 };
 
+export type AlterationPagePath = {
+  hugoSymbol?: string;
+  geneticType?: GENETIC_TYPE;
+};
+
+export const parseAlterationPagePath = (pathname: string) => {
+  const startsWithGene = pathname.startsWith(PAGE_ROUTE.GENE_HEADER);
+  const inExtendedGenePage = (pathname.match(/\//g) || []).length >= 4;
+  if (startsWithGene && inExtendedGenePage) {
+    const segments = pathname.split('/') || [];
+    const result: GenePagePath = {
+      hugoSymbol: segments[1],
+    };
+    if (segments.length > 3) {
+      result.geneticType = segments[3] as GENETIC_TYPE;
+    }
+    return result;
+  } else {
+    return {};
+  }
+};
+
 export const getGenomicPageLocation = (props: {
   rootRoute: PAGE_ROUTE.GENOMIC_CHANGE | PAGE_ROUTE.HGVSG;
   query: string;
diff --git a/src/main/webapp/app/shared/utils/Utils.tsx b/src/main/webapp/app/shared/utils/Utils.tsx
index eea79422d..05f4d944b 100644
--- a/src/main/webapp/app/shared/utils/Utils.tsx
+++ b/src/main/webapp/app/shared/utils/Utils.tsx
@@ -142,7 +142,7 @@ export function toggleStrList(element: string, list: string[]) {
   return list;
 }
 
-export function level2LevelOfEvidence(level: LEVELS) {
+export function level2LevelOfEvidence(level: LEVELS | undefined) {
   switch (level) {
     case LEVELS.Tx3:
     case LEVELS.Tx3A:
@@ -275,6 +275,7 @@ export const OncoKBOncogenicityIcon: React.FunctionComponent<{
   oncogenicity: string | undefined;
   isVus: boolean;
   className?: string;
+  classNameParent?: string;
 }> = props => {
   let oncogenicity = props.oncogenicity;
   if (oncogenicity === undefined) {
@@ -284,6 +285,7 @@ export const OncoKBOncogenicityIcon: React.FunctionComponent<{
     <span
       style={{ width: 16, marginTop: -3, marginLeft: 3 }}
       key={'oncokb-oncogenicity-icone'}
+      className={props.classNameParent}
     >
       <i
         className={classnames(
@@ -314,7 +316,7 @@ export const OncoKBLevelIcon: React.FunctionComponent<{
 };
 
 export const FdaLevelIcon: React.FunctionComponent<{
-  level: LEVELS;
+  level: LEVELS | undefined;
   withDescription?: boolean;
   size?: 's1' | 's2' | 's3';
 }> = ({ level, withDescription = true, size = 's1' }) => {
@@ -324,11 +326,14 @@ export const FdaLevelIcon: React.FunctionComponent<{
     lineHeight: `${16 * scale}px`,
     margin: '0 3px',
   };
+  if (level === undefined) {
+    return <></>;
+  }
   const fdaIcon = (
     <span className="fa-stack" style={style}>
       <span className="fa fa-circle-thin fa-stack-2x"></span>
       <strong className="fa-stack-1x" style={{ fontSize: '1em' }}>
-        {level.toString().replace('Fda', '')}
+        {level?.toString().replace('Fda', '')}
       </strong>
     </span>
   );
diff --git a/src/main/webapp/app/variables.scss b/src/main/webapp/app/variables.scss
index d7f87a8e4..7324ccd24 100644
--- a/src/main/webapp/app/variables.scss
+++ b/src/main/webapp/app/variables.scss
@@ -4,6 +4,8 @@ $oncokb-font-font-size: 15px;
 $oncokb-blue: #0968c3;
 /* Overwrite the bootstrap defaults */
 $font-family-sans-serif: 'Gotham Book', serif;
+
+$font-family-sans-serif-bold: 'Gotham Bold', serif;
 // color overwrite
 $blue: $oncokb-blue;
 $grey: #808080; // grey
@@ -15,6 +17,7 @@ $secondary: $grey;
 $warning: #ffc107;
 $danger: #dc3545;
 $inactive: #f2f4f8; // from design team
+$black: #212529;
 
 $link-hover-color: $oncokb-darker-blue;
 $nav-bg-color: $oncokb-blue;
@@ -44,4 +47,5 @@ $container-max-widths: (
 
 $bigger-default-font-size: 1.2rem;
 
-$default-box-shadow: 0px 0.75px 2px 0px rgba(0, 22, 65, 0.10), 0px 1.5px 4px 0px rgba(0, 22, 65, 0.10), 0px 3px 8px 0px rgba(0, 22, 65, 0.10);
+$default-box-shadow: 0px 0.75px 2px 0px rgba(0, 22, 65, 0.1),
+  0px 1.5px 4px 0px rgba(0, 22, 65, 0.1), 0px 3px 8px 0px rgba(0, 22, 65, 0.1);