diff --git a/src/pages/studyView/studyPageHeader/rightPanel/RightPanel.tsx b/src/pages/studyView/studyPageHeader/rightPanel/RightPanel.tsx
index 23dedd01b76..3383d1a24ee 100644
--- a/src/pages/studyView/studyPageHeader/rightPanel/RightPanel.tsx
+++ b/src/pages/studyView/studyPageHeader/rightPanel/RightPanel.tsx
@@ -57,12 +57,14 @@ export default class RightPanel extends React.Component<IRightPanelProps, {}> {
         return (
             <div className="studyViewSummaryHeader">
                 <div className={styles.rightPanel}>
+                    <div className={"small"}>
                     <OQLTextArea
                         inputGeneQuery={this.props.store.geneQueryStr}
                         validateInputGeneQuery={false}
                         callback={this.updateSelectedGenes}
                         location={GeneBoxType.STUDY_VIEW_PAGE}
                     />
+                    </div>
                     <button
                         disabled={this.isQueryButtonDisabled}
                         className={classnames(
diff --git a/src/pages/studyView/styles.scss b/src/pages/studyView/styles.scss
index 0b13913f41e..12867c1374a 100644
--- a/src/pages/studyView/styles.scss
+++ b/src/pages/studyView/styles.scss
@@ -73,10 +73,6 @@ $selectHeightInner: $selectHeight - 2px;
     width: 100%;
 }
 
-#geneBoxValidationStatus > div {
-    max-width: 280px;
-}
-
 #wideGeneBoxValidationStatus > div {
     max-width: 555px;
 }
diff --git a/src/shared/components/GeneSelectionBox/GeneSymbolValidator.spec.tsx b/src/shared/components/GeneSelectionBox/GeneSymbolValidator.spec.tsx
index 9f298c41f8f..a07e4dac74a 100644
--- a/src/shared/components/GeneSelectionBox/GeneSymbolValidator.spec.tsx
+++ b/src/shared/components/GeneSelectionBox/GeneSymbolValidator.spec.tsx
@@ -17,6 +17,7 @@ describe('GeneSymbolValidator', () => {
             },
             geneQuery: 'TP53',
             skipGeneValidation: false,
+            replaceGene: ()=>{},
             updateGeneQuery: () => null,
         } as IGeneSymbolValidatorProps;
         wrapper = mount(<GeneSymbolValidator {...props} />);
diff --git a/src/shared/components/GeneSelectionBox/GeneSymbolValidator.tsx b/src/shared/components/GeneSelectionBox/GeneSymbolValidator.tsx
index f465a8a6595..209fe120a56 100644
--- a/src/shared/components/GeneSelectionBox/GeneSymbolValidator.tsx
+++ b/src/shared/components/GeneSelectionBox/GeneSymbolValidator.tsx
@@ -33,6 +33,7 @@ export interface IGeneSymbolValidatorProps {
         oql: OQL
     ) => void;
     wrap?: boolean;
+    replaceGene:(oldSymbol: string, newSymbol: string)=>void;
 }
 
 export type GeneValidationResult = {
@@ -194,24 +195,10 @@ export default class GeneSymbolValidator extends React.Component<
                 }
                 errorMessageOnly={this.props.errorMessageOnly}
                 wrapTheContent={this.props.wrap}
-                replaceGene={this.replaceGene}
+                replaceGene={this.props.replaceGene}
             >
                 {this.props.children}
             </GeneSymbolValidatorMessage>
         );
     }
-
-    @autobind
-    @action
-    private replaceGene(oldSymbol: string, newSymbol: string) {
-        let updatedQuery = normalizeQuery(
-            this.props.geneQuery
-                .toUpperCase()
-                .replace(
-                    new RegExp(`\\b${oldSymbol.toUpperCase()}\\b`, 'g'),
-                    () => newSymbol.toUpperCase()
-                )
-        );
-        this.props.updateGeneQuery(updatedQuery);
-    }
 }
diff --git a/src/shared/components/GeneSelectionBox/GeneSymbolValidatorMessage.tsx b/src/shared/components/GeneSelectionBox/GeneSymbolValidatorMessage.tsx
index 5378fecd483..c82bbeb4d1c 100644
--- a/src/shared/components/GeneSelectionBox/GeneSymbolValidatorMessage.tsx
+++ b/src/shared/components/GeneSelectionBox/GeneSymbolValidatorMessage.tsx
@@ -7,6 +7,7 @@ import { GeneReplacement } from 'shared/components/query/QueryStore';
 import ReactSelect from 'react-select1';
 import classNames from 'classnames';
 import * as _ from 'lodash';
+import {DropdownButton, MenuItem} from "react-bootstrap";
 
 export type GeneSymbolValidatorMessageProps = {
     errorMessageOnly?: boolean;
@@ -67,15 +68,21 @@ const RenderSuggestion = function(props: RenderSuggestionProps) {
         <div className={styles.suggestionBubble} title={title}>
             <FontAwesome className={styles.icon} name="question" />
             <span className={styles.multiChoiceLabel}>{props.alias}</span>
-            <span>{': '}</span>
-            <ReactSelect
-                placeholder="select a symbol"
-                options={options}
-                onChange={(option: any) =>
-                    option && props.replaceGene(props.alias, option.value)
+            <span>{':'}&nbsp;</span>
+            <DropdownButton
+                bsStyle={title.toLowerCase()}
+                bsSize="xsmall"
+                title="Select symbol"
+                id={`geneReplace_${props.alias}`}
+            >
+                {
+                    options.map((item, i)=>{
+                        return <MenuItem onClick={()=>{ props.replaceGene(props.alias, item.value)  }} eventKey={i+1}>{item.label}</MenuItem>
+                    })
                 }
-                autosize
-            />
+            </DropdownButton>
+
+
         </div>
     );
 };
@@ -131,14 +138,15 @@ const GeneSymbolValidatorMessageChild = (
                     <span>Invalid gene symbols.</span>
                 </div>
 
-                {props.genes.suggestions.map((suggestion, index) => (
+                {
+                    props.genes.suggestions.map((suggestion, index) =>
                     <RenderSuggestion
                         key={index}
                         genes={suggestion.genes}
                         alias={suggestion.alias}
                         replaceGene={props.replaceGene}
-                    />
-                ))}
+                    />)
+                }
             </div>
         );
     }
@@ -213,7 +221,7 @@ class GeneSymbolValidatorMessage extends React.Component<
 
         return (
             <div id="geneBoxValidationStatus">
-                <GeneSymbolValidatorMessageChild {...this.props} />
+                <GeneSymbolValidatorMessageChild replaceGene={this.props.replaceGene} {...this.props} />
             </div>
         );
     }
diff --git a/src/shared/components/GeneSelectionBox/OQLTextArea.tsx b/src/shared/components/GeneSelectionBox/OQLTextArea.tsx
index e27088a8c94..3141cc28ba2 100644
--- a/src/shared/components/GeneSelectionBox/OQLTextArea.tsx
+++ b/src/shared/components/GeneSelectionBox/OQLTextArea.tsx
@@ -12,7 +12,7 @@ import {
 } from 'mobx';
 import { Gene } from 'shared/api/generated/CBioPortalAPI';
 import { SingleGeneQuery } from 'shared/lib/oql/oql-parser';
-import { GeneReplacement, Focus } from 'shared/components/query/QueryStore';
+import {GeneReplacement, Focus, normalizeQuery} from 'shared/components/query/QueryStore';
 import {
     getEmptyGeneValidationResult,
     getFocusOutText,
@@ -22,6 +22,7 @@ import GeneSymbolValidator, {
     GeneValidationResult,
 } from './GeneSymbolValidator';
 import autobind from 'autobind-decorator';
+import bind from "bind-decorator";
 
 export interface IGeneSelectionBoxProps {
     focus?: Focus;
@@ -208,8 +209,7 @@ export default class OQLTextArea extends React.Component<
         oql: OQL
     ) {
         this.geneQueryIsValid = validQuery;
-        // no matter whether the query is valid, we need to sync queryToBeValidated with geneQuery
-        this.geneQuery = this.queryToBeValidated;
+
         if (this.props.callback) {
             this.props.callback(oql, validationResult, this.geneQuery);
         }
@@ -235,38 +235,65 @@ export default class OQLTextArea extends React.Component<
             : 'Click gene symbols below or enter here';
     }
 
+    @bind onChange(event:any){
+        this.currentTextAreaValue = event.currentTarget.value;
+        this.geneQuery = this.currentTextAreaValue;
+        this.updateQueryToBeValidateDebounce();
+    }
+
+    @bind onFocus(){
+        this.isFocused = true;
+    }
+
+    @bind onBlur(){
+        this.isFocused = false;
+    }
+
+    @bind replaceGene(oldSymbol: string, newSymbol: string) {
+        let updatedQuery = normalizeQuery(
+            this.getTextAreaValue()
+                .toUpperCase()
+                .replace(
+                    new RegExp(`\\b${oldSymbol.toUpperCase()}\\b`, 'g'),
+                    () => newSymbol.toUpperCase()
+                )
+        );
+        this.updateGeneQuery(updatedQuery);
+    }
+
     render() {
         return (
             <div className={styles.genesSelection}>
+
                 <textarea
-                    ref={this.textAreaRef}
-                    onFocus={() => (this.isFocused = true)}
-                    onBlur={() => (this.isFocused = false)}
-                    className={classnames(...this.textAreaClasses)}
+                    ref={this.textAreaRef as any}
+                    onFocus={this.onFocus}
+                    onBlur={this.onBlur}
+                    className={classnames(this.textAreaClasses)}
                     rows={5}
                     cols={80}
                     placeholder={this.promptText}
                     title={this.promptText}
                     defaultValue={this.getTextAreaValue()}
-                    onChange={event => {
-                        this.currentTextAreaValue = event.currentTarget.value;
-                        this.updateQueryToBeValidateDebounce();
-                    }}
+                    onChange={this.onChange}
                     data-test="geneSet"
                 />
 
+                <div className={classnames({ [styles.minWidthContainer]: (this.props.location === GeneBoxType.DEFAULT) })}>
                 <GeneSymbolValidator
                     focus={this.props.focus}
                     geneQuery={this.queryToBeValidated}
                     skipGeneValidation={this.skipGenesValidation}
                     updateGeneQuery={this.updateGeneQuery}
                     afterValidation={this.afterGeneSymbolValidation}
+                    replaceGene={this.replaceGene}
                     errorMessageOnly={
                         this.props.location === GeneBoxType.STUDY_VIEW_PAGE
                     }
                 >
                     {this.props.children}
                 </GeneSymbolValidator>
+                </div>
             </div>
         );
     }
diff --git a/src/shared/components/GeneSelectionBox/styles.module.scss b/src/shared/components/GeneSelectionBox/styles.module.scss
index 248aac8f18f..b1d2253b81a 100644
--- a/src/shared/components/GeneSelectionBox/styles.module.scss
+++ b/src/shared/components/GeneSelectionBox/styles.module.scss
@@ -1,8 +1,17 @@
+.validationBubbleBase {
+	margin: 0px 5px 3px 0;
+	padding: 2px 5px;
+	border-radius: $border-radius-base;
+}
+
+.minWidthContainer {
+	min-height:25px;
+}
+
 .genesSelection {
 	textarea.default {
 		width: 555px;
 		resize: vertical;
-		border-radius: 2px;
 	}
 	textarea.oncoprintHeatmap {
 		width: 100%;
@@ -10,17 +19,16 @@
 		border-radius: 2px;
 	}
 	textarea{
+		border-radius: $border-radius-base;
 		padding: 5px;
-		border: 1px solid #d3d3d3;
 		&.empty {
 		}
+		border-color: $borderColor;
 	}
 
 	textarea.studyView {
 		width: 200px;
-		//box-sizing: content-box;
 		height: 30px;
-		//color: darkgrey;
 		border-radius: $border-radius-base;
 		outline-offset: -2px;
 		font-size:12px;
@@ -39,13 +47,18 @@
 		cursor: default;
 		display: flex;
 		align-items: center;
-		padding-top: 5px;
+		padding-top: 1px;
 		flex-wrap:wrap;
 		&.nowrap {
 			white-space: nowrap;
 			flex-wrap:nowrap;
 			width:200px;
 		}
+
+		button {
+			line-height:1 !important;
+		}
+
 		span.icon {
 			text-align: center;
 			margin-right: 4px;
@@ -65,9 +78,7 @@
 			color: #fff;
 			display: flex;
 			align-items: center;
-			margin: 2px 2px 2px 0;
-			padding: 5px 10px;
-			border-radius: 2px;
+			@extend .validationBubbleBase;
 			span.icon {
 				color: #fff;
 				line-height: 17px;
@@ -87,8 +98,7 @@
 			cursor: pointer;
 			display: flex;
 			align-items: center;
-			margin: 2px;
-			padding: 5px 10px;
+			@extend .validationBubbleBase;
 			background-color: $lightGrey;
 			border-radius: 2px;
 			&:hover {
diff --git a/src/shared/components/flexbox/styles.module.scss b/src/shared/components/flexbox/styles.module.scss
index 294e2c3d1bf..4d79c5e3b06 100644
--- a/src/shared/components/flexbox/styles.module.scss
+++ b/src/shared/components/flexbox/styles.module.scss
@@ -1,6 +1,5 @@
 .padded.column {
 	> * {
-		flex-shrink: 0;
 		margin-top: 8px;
 	}
 	> *:nth-child(1) {
@@ -9,10 +8,9 @@
 }
 .padded.row {
 	> * {
-		flex-shrink: 0;
 		margin-left: 8px;
 	}
 	> *:nth-child(1) {
 		margin-left: 0;
 	}
-}
\ No newline at end of file
+}
diff --git a/src/shared/components/query/GeneSetSelector.tsx b/src/shared/components/query/GeneSetSelector.tsx
index 731f96a41c0..0410af3bb55 100644
--- a/src/shared/components/query/GeneSetSelector.tsx
+++ b/src/shared/components/query/GeneSetSelector.tsx
@@ -117,7 +117,7 @@ export default class GeneSetSelector extends QueryStoreComponent<{}, {}> {
 
     render() {
         return (
-            <FlexRow padded overflow className={styles.GeneSetSelector}>
+            <FlexRow overflow padded className={styles.GeneSetSelector}>
                 <SectionHeader
                     className="sectionLabel"
                     secondaryComponent={
@@ -133,11 +133,6 @@ export default class GeneSetSelector extends QueryStoreComponent<{}, {}> {
                             <i className={'fa fa-external-link'} />
                         </a>
                     }
-                    promises={[
-                        this.store.mutSigForSingleStudy,
-                        this.store.gisticForSingleStudy,
-                        this.store.genes,
-                    ]}
                 >
                     Enter Genes:
                 </SectionHeader>
diff --git a/src/shared/components/query/GeneSymbolValidator.tsx b/src/shared/components/query/GeneSymbolValidator.tsx
deleted file mode 100644
index 89f5d42bba7..00000000000
--- a/src/shared/components/query/GeneSymbolValidator.tsx
+++ /dev/null
@@ -1,177 +0,0 @@
-import * as React from 'react';
-import * as styles_any from './styles/styles.module.scss';
-import { observer } from 'mobx-react';
-import FontAwesome from 'react-fontawesome';
-import ReactSelect from 'react-select1';
-import { GeneReplacement, QueryStoreComponent, Focus } from './QueryStore';
-import AppConfig from 'appConfig';
-import GeneSymbolValidationError from './GeneSymbolValidationError';
-
-const styles = styles_any as {
-    GeneSymbolValidator: string;
-    pendingMessage: string;
-    errorMessage: string;
-    validBubble: string;
-    invalidBubble: string;
-    suggestionBubble: string;
-    icon: string;
-    noChoiceLabel: string;
-    singleChoiceLabel: string;
-    multiChoiceLabel: string;
-};
-
-@observer
-export default class GeneSymbolValidator extends QueryStoreComponent<{}, {}> {
-    render() {
-        if (this.store.oql.error)
-            return (
-                <div className={styles.GeneSymbolValidator}>
-                    <span className={styles.errorMessage}>
-                        {`Cannot validate gene symbols because of invalid OQL. ${
-                            this.store.geneQueryErrorDisplayStatus ===
-                            Focus.Unfocused
-                                ? "Please click 'Submit' to see location of error."
-                                : this.store.oql.error.message
-                        }`}
-                    </span>
-                </div>
-            );
-
-        if (!this.store.oql.query.length) return null;
-
-        if (this.store.isQueryLimitReached)
-            return (
-                <div className={styles.GeneSymbolValidator}>
-                    <div
-                        className={styles.invalidBubble}
-                        title={`Please limit your queries to ${this.store.geneLimit} genes or fewer.`}
-                    >
-                        <FontAwesome
-                            className={styles.icon}
-                            name="exclamation-circle"
-                        />
-                        <GeneSymbolValidationError
-                            sampleCount={this.store.approxSampleCount}
-                            queryProductLimit={
-                                AppConfig.serverConfig.query_product_limit
-                            }
-                            email={AppConfig.serverConfig.skin_email_contact}
-                        />
-                    </div>
-                </div>
-            );
-
-        if (this.store.genes.isError)
-            return (
-                <div className={styles.GeneSymbolValidator}>
-                    <span className={styles.pendingMessage}>
-                        Unable to validate gene symbols.
-                    </span>
-                </div>
-            );
-
-        if (
-            this.store.genes.isPending &&
-            this.store.genes.result.suggestions.length == 0
-        )
-            return (
-                <div className={styles.GeneSymbolValidator}>
-                    <span className={styles.pendingMessage}>
-                        Validating gene symbols...
-                    </span>
-                </div>
-            );
-
-        if (this.store.genes.result.suggestions.length)
-            return (
-                <div className={styles.GeneSymbolValidator}>
-                    <div
-                        className={styles.invalidBubble}
-                        title="Please edit the gene symbols."
-                    >
-                        <FontAwesome
-                            className={styles.icon}
-                            name="exclamation-circle"
-                        />
-                        <span>Invalid gene symbols.</span>
-                    </div>
-
-                    {this.store.genes.result.suggestions.map(
-                        this.renderSuggestion,
-                        this
-                    )}
-                </div>
-            );
-
-        return (
-            <div className={styles.GeneSymbolValidator}>
-                <div
-                    className={styles.validBubble}
-                    title="You can now submit the list."
-                >
-                    <FontAwesome className={styles.icon} name="check-circle" />
-                    <span>All gene symbols are valid.</span>
-                </div>
-            </div>
-        );
-    }
-
-    renderSuggestion({ alias, genes }: GeneReplacement, key: number) {
-        if (genes.length == 0) {
-            let title =
-                'Could not find gene symbol. Click to remove it from the gene list.';
-            let onClick = () => this.store.replaceGene(alias, '');
-            return (
-                <div
-                    key={key}
-                    className={styles.suggestionBubble}
-                    title={title}
-                    onClick={onClick}
-                >
-                    <FontAwesome className={styles.icon} name="times-circle" />
-                    <span className={styles.noChoiceLabel}>{alias}</span>
-                </div>
-            );
-        }
-
-        if (genes.length == 1) {
-            let { hugoGeneSymbol } = genes[0];
-            let title = `'${alias}' is a synonym for '${hugoGeneSymbol}'. Click here to replace it with the official symbol.`;
-            let onClick = () => this.store.replaceGene(alias, hugoGeneSymbol);
-            return (
-                <div
-                    key={key}
-                    className={styles.suggestionBubble}
-                    title={title}
-                    onClick={onClick}
-                >
-                    <FontAwesome className={styles.icon} name="question" />
-                    <span className={styles.singleChoiceLabel}>{alias}</span>
-                    <span>{`: ${hugoGeneSymbol}`}</span>
-                </div>
-            );
-        }
-
-        let title =
-            'Ambiguous gene symbol. Click on one of the alternatives to replace it.';
-        let options: any = genes.map(gene => ({
-            label: gene.hugoGeneSymbol,
-            value: gene.hugoGeneSymbol,
-        }));
-        return (
-            <div key={key} className={styles.suggestionBubble} title={title}>
-                <FontAwesome className={styles.icon} name="question" />
-                <span className={styles.multiChoiceLabel}>{alias}</span>
-                <span>{': '}</span>
-                <ReactSelect
-                    placeholder="select a symbol"
-                    options={options}
-                    onChange={(option: any) =>
-                        option && this.store.replaceGene(alias, option.value)
-                    }
-                    autosize
-                />
-            </div>
-        );
-    }
-}