diff --git a/frontend/components/views/QuickStartView.tsx b/frontend/components/views/QuickStartView.tsx
index a0fb7c2c..f1da4fb7 100644
--- a/frontend/components/views/QuickStartView.tsx
+++ b/frontend/components/views/QuickStartView.tsx
@@ -10,11 +10,12 @@ import React, { useState } from 'react';
 import styled from 'styled-components';
 import logo from '../../../assets/logo/seeqr_dock.png';
 import '../../lib/style.css';
+import { greyPrimary } from '../../style-variables';
 
 interface QuickStartViewProps {
   show: boolean;
 }
-
+// welcome page container w/o sidebar
 const PageContainer = styled.a`
   display: flex;
   flex-direction: column;
@@ -23,12 +24,19 @@ const PageContainer = styled.a`
   height: auto;
   width: auto;
 `;
-
+// each stepper component
 const StyledStepper = styled(Stepper)`
-  margin: 60px 0px 20px 0px;
-  background: transparent;
+  margin: 60px 10px 20px 0px;
 `;
-
+// stepButton with all elements inside
+const StyledStepButton = styled(StepButton)`
+  padding-top: 25px;
+  & :hover {
+    background-color: ${greyPrimary};
+    transition: 200ms ease-in-out;
+  }
+`;
+// Text label for each stepper
 const StyledStepLabel = styled(StepLabel)`
   width: 10vw;
   & .MuiStepLabel-label {
@@ -36,48 +44,53 @@ const StyledStepLabel = styled(StepLabel)`
   }
 `;
 
+// text instructions div
 const StyledTypographyInstructions = styled.div`
   font-size: clamp(1rem, 2.2vw, 1.2rem);
   text-align: center;
-  width: 40vw;
+  width: 50vw;
 `;
-
+// title: "welcome to SeeQR"
 const StyledTypographyTitle = styled(Typography)`
   font-size: clamp(2rem, 35vw, 3rem);
 `;
-
+// container div for btn back & btn complete
 const NavButtons = styled.div`
-  margin: 15px auto;
+  width: 80%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  margin-bottom: 15px;
 `;
-
+// container for the text instructions and navBtn
 const StepContent = styled.div`
+  min-height: 30vw;
   display: flex;
   flex-direction: column;
-  justify-content: center;
+  justify-content: space-between;
   align-items: center;
+  margin-top: 20px;
 `;
-
+// step list ul
 const StepList = styled.ul`
   text-align: left;
   font-size: 0.9em;
   list-style: circle;
-
   & li {
     margin-top: 7px;
   }
 `;
 
-function getSteps() {
-  return [
-    'Set Up Servers and Permissions',
-    'Import/ Export a Database',
-    'Create New Queries',
-    'Saving/Loading Queries',
-    'Compare Queries',
-  ];
-}
-
-function getStepContent(step: number) {
+// array to hold all the steps
+const steps: string[] = [
+  'Set Up Servers and Permissions',
+  'Import/ Export a Database',
+  'Create New Queries',
+  'Saving/Loading Queries',
+  'Compare Queries',
+];
+// func to help get step instructions and render it
+function getStepContent(step: number): JSX.Element | string {
   switch (step) {
     case 0:
       return (
@@ -90,15 +103,16 @@ function getStepContent(step: number) {
             <li> Run server(s) in the background</li>
             <li>Ensure that PATH is enabled</li>
             <li>
-              MySQL username defaults to 'root' and postgres username defaults to 'postgres' 
-              
+              MySQL username defaults to &quot;root&quot; and postgres username
+              defaults to &quot;postgres&quot;
             </li>
             <li>
-              MySQL and postgres password will be your password to log into mySQL and postgres database
+              MySQL and postgres password will be your password to log into
+              mySQL and postgres database
             </li>
             <li>
-              Ports for PostgresSQL and MySQL are defaulted to ‘5432’ and
-              ‘3306’, respectively
+              Ports for PostgresSQL and MySQL are defaulted to &quot;5432&quot;
+              and &quot;3306&quot;, respectively
             </li>
             <li>Enable full permissions for database manipulation</li>
           </StepList>
@@ -150,7 +164,8 @@ function getStepContent(step: number) {
               query
             </li>
             <li>
-              Use the previous queries dropdown to view and select previously inputted queries
+              Use the previous queries dropdown to view and select previously
+              inputted queries
             </li>
             <li>Select &quot;RUN QUERY&quot; button to execute</li>
             <li>
@@ -209,79 +224,53 @@ function getStepContent(step: number) {
 function QuickStartView({ show }: QuickStartViewProps) {
   if (!show) return null;
   const [activeStep, setActiveStep] = useState(0);
-  const [completed, setCompleted] = useState(new Set<number>());
-  const [skipped, setSkipped] = useState(new Set<number>());
-  const steps = getSteps();
-
-  const totalSteps = () => getSteps().length;
-
-  const isStepOptional = (step: number) => step === null;
+  const [completed, setCompleted] = useState<{ [k: number]: boolean }>({});
 
-  const handleSkip = () => {
-    if (!isStepOptional(activeStep)) {
-      // You probably want to guard against something like this
-      // it should never occur unless someone's actively trying to break something.
-      throw new Error("You can't skip a step that isn't optional.");
-    }
+  const totalSteps = () => steps.length;
 
-    setActiveStep((prevActiveStep) => prevActiveStep + 1);
-    setSkipped((prevSkipped) => {
-      const newSkipped = new Set(prevSkipped.values());
-      newSkipped.add(activeStep);
-      return newSkipped;
-    });
-  };
-
-  const skippedSteps = () => skipped.size;
+  // count completed steps number
+  const completedSteps = (): number => Object.keys(completed).length;
 
-  const completedSteps = () => completed.size;
+  // check if it is the last step
+  const isLastStep = (): boolean => activeStep === totalSteps() - 1;
 
-  const allStepsCompleted = () =>
-    completedSteps() === totalSteps() - skippedSteps();
-
-  const isLastStep = () => activeStep === totalSteps() - 1;
+  // check if all steps are completed
+  const allStepsCompleted = (): boolean => completedSteps() === totalSteps();
 
+  // func to handle next btn
   const handleNext = () => {
     const newActiveStep =
       isLastStep() && !allStepsCompleted()
         ? // It's the last step, but not all steps have been completed
           // find the first step that has been completed
-          steps.findIndex((step, i) => !completed.has(i))
+          steps.findIndex((step, i) => !(i in completed))
         : activeStep + 1;
-
     setActiveStep(newActiveStep);
   };
 
+  // func to handle back btn
   const handleBack = () => {
     setActiveStep((prevActiveStep) => prevActiveStep - 1);
   };
 
+  // func to set activeStep
   const handleStep = (step: number) => () => {
     setActiveStep(step);
   };
-
+  // func to handle each complete step btn
   const handleComplete = () => {
-    const newCompleted = new Set(completed);
-    newCompleted.add(activeStep);
+    const newCompleted = completed;
+    newCompleted[activeStep] = true;
     setCompleted(newCompleted);
-
-    if (completed.size !== totalSteps() - skippedSteps()) {
-      handleNext();
-    }
+    handleNext();
   };
-
+  // handle reset btn after all steps completed
   const handleReset = () => {
     setActiveStep(0);
-    setCompleted(new Set<number>());
-    setSkipped(new Set<number>());
+    setCompleted({});
   };
 
-  const isStepSkipped = (step: number) => skipped.has(step);
-
-  function isStepComplete(step: number) {
-    return completed.has(step);
-  }
-
+  // render components
   return (
     <PageContainer>
       <StyledTypographyTitle align="center">
@@ -289,71 +278,69 @@ function QuickStartView({ show }: QuickStartViewProps) {
       </StyledTypographyTitle>
       <img className="step-img" src={logo} alt="Logo" />
       <StyledStepper alternativeLabel nonLinear activeStep={activeStep}>
-        {steps.map((label, index) => {
-          const stepProps: { completed?: boolean } = {};
-          const buttonProps: { optional?: React.ReactNode } = {};
-          if (isStepOptional(index)) {
-            buttonProps.optional = (
-              <Typography variant="caption">Optional</Typography>
-            );
-          }
-          if (isStepSkipped(index)) {
-            stepProps.completed = false;
-          }
-          return (
-            <Step key={label} {...stepProps} completed={isStepComplete(index)}>
-              <StepButton onClick={handleStep(index)} {...buttonProps}>
-                <StyledStepLabel className="stepper">{label}</StyledStepLabel>
-              </StepButton>
-            </Step>
-          );
-        })}
+        {steps.map((label, index) => (
+          <Step key={label} completed={completed[index]}>
+            <StyledStepButton onClick={handleStep(index)}>
+              <StyledStepLabel className="stepper">{label}</StyledStepLabel>
+            </StyledStepButton>
+          </Step>
+        ))}
       </StyledStepper>
       <div>
         {allStepsCompleted() ? (
-          <div>
+          <div className="step-completed-div">
             <StyledTypographyInstructions className="step-instructions">
               All steps completed - you&apos;re ready to use SeeQr!
             </StyledTypographyInstructions>
-            <Button onClick={handleReset}>Reset</Button>
+            <Button
+              variant="outlined"
+              color="primary"
+              onClick={handleReset}
+              className="step-btn"
+              id="step-reset-btn"
+            >
+              RESET
+            </Button>
           </div>
         ) : (
           <StepContent>
             {getStepContent(activeStep)}
             <NavButtons>
               <Button
+                variant="outlined"
+                color="primary"
                 disabled={activeStep === 0}
                 onClick={handleBack}
                 className="step-btn"
+                id="step-back-btn"
               >
-                Back
+                {activeStep === 0 ? '' : 'BACK'}
               </Button>
-              {isStepOptional(activeStep) && !completed.has(activeStep) && (
-                <Button
-                  variant="contained"
-                  color="primary"
-                  onClick={handleSkip}
-                  className="step-btn"
-                >
-                  Skip
-                </Button>
-              )}
+
               {activeStep !== steps.length &&
-                (completed.has(activeStep) ? (
-                  <Typography variant="caption" className="step-completed">
-                    Step
-                    {` ${activeStep + 1} `}
-                    already completed
-                  </Typography>
+                (completed[activeStep] ? (
+                  <Button
+                    variant="contained"
+                    color="primary"
+                    onClick={handleNext}
+                    className="step-btn"
+                    id="step-next-btn"
+                  >
+                    NEXT
+                  </Button>
                 ) : (
+                  // <Typography variant="caption" className="step-completed-btn">
+                  //   {`Step ${activeStep + 1} already`}
+                  //   <br /> completed
+                  // </Typography>
                   <Button
                     variant="contained"
                     color="primary"
+                    className="step-btn"
+                    id="step-complete-next-btn"
                     onClick={handleComplete}
                   >
-                    {completedSteps() === totalSteps() - 1
-                      ? 'Finish'
-                      : 'Complete Step'}
+                    {completedSteps() === totalSteps() - 1 ? 'FINISH' : 'NEXT'}
                   </Button>
                 ))}
             </NavButtons>
diff --git a/frontend/lib/style.css b/frontend/lib/style.css
index 31c20dd0..1b19bcb6 100644
--- a/frontend/lib/style.css
+++ b/frontend/lib/style.css
@@ -1,117 +1,26 @@
 :root {
-  --greyPrimary: #F0386B;
+  --greyPrimary: #f0386b;
 }
 
 main {
   min-width: 650px;
 }
- /* greyPrimary = '#818584'; */
+/* greyPrimary = '#818584'; */
 
- /* button {
-   /* background: #11998E;  /* fallback for old browsers */ 
-   /* background: -webkit-linear-gradient(#AFCEB9, #097548);  /* Chrome 10-25, Safari 5.1-6 */
-   /* background: linear-gradient(#AFCEB9, #097548); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
- /* }; */
+/* button {
+   /* background: #11998E;  /* fallback for old browsers */
+/* background: -webkit-linear-gradient(#AFCEB9, #097548);  /* Chrome 10-25, Safari 5.1-6 */
+/* background: linear-gradient(#AFCEB9, #097548); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+/* }; */
 
 .tabs {
   background-color: var(--greyPrimary);
   color: white;
   border-radius: 5px;
-};
-
-.db-login-tab.Mui-selected {
-  color: rgb(25, 118, 210) !important;
-}
-
-.db-login-tabs .MuiTabs-indicator {
-  background-color: rgb(25, 118, 210);
-}
-
-/* QuickStartView */
-.step-btn {
-  margin-right: 8px;
-}
-
-.step-btn {
-  margin-right: 8px;
 }
 
-.step-back-btn {
-  margin-right: 8px;
-}
-
-.step-completed {
-  display: inline-block;
-}
-
-.step-instructions {
-  margin-bottom: 24px;
-}
-
-.step-img {
-  margin-top: 16px;
-  margin-bottom: -32px;
-  width: 20vh;
-  height: 20vh;
-  max-height: 300px;
-  max-width: 300px;
-}
-
-.stepper {
-  font-size: 50px;
-}
-
-.Mui-selected:not(.db-login-tab):not(.tables-view-btn) {
-  color: rgb(255, 255, 255) !important;
-  background-color: #11774e;
-  opacity: 1 !important;
-}
-
-.MuiTabs-scroller > div > button:not(.db-login-tab) {
-	color: rgba(255, 255, 255, .3);
-	font-size: 1.25rem;
-  border-right: 1px solid rgba(255, 255, 255, .1);
-  border-left: 1px solid rgba(255, 255, 255, .1);
-  width: 33%;
-}
-
-.query-run-box {
-  margin-top: 1rem;
-}
-
-.hide-3d-btn {
-  color: rgba(255, 255, 255, .8);
-  border: 2px solid rgba(255, 255, 255, .8);
-  border-radius: .5rem;
-  background: transparent;
-  padding: 1rem .5rem;
-  cursor: pointer;
-  outline: none;
-}
-
-:root {
-  --greyPrimary: #F0386B;
-}
-
-main {
-  min-width: 650px;
-}
- /* greyPrimary = '#818584'; */
-
- /* button {
-   /* background: #11998E;  /* fallback for old browsers */ 
-   /* background: -webkit-linear-gradient(#AFCEB9, #097548);  /* Chrome 10-25, Safari 5.1-6 */
-   /* background: linear-gradient(#AFCEB9, #097548); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
- /* }; */
-
-.tabs {
-  background-color: var(--greyPrimary);
-  color: white;
-  border-radius: 5px;
-};
-
 .db-login-tab.Mui-selected {
-  color: rgb(25, 118, 210) !important;
+  color: rgb(25, 118, 210) /*!important*/;
 }
 
 .db-login-tabs .MuiTabs-indicator {
@@ -119,37 +28,57 @@ main {
 }
 
 /* QuickStartView */
+/* step btn class */
 .step-btn {
   margin-right: 8px;
+  padding-left: 50px;
+  padding-right: 50px;
+  border-radius: 15px;
 }
 
-.step-btn {
-  margin-right: 8px;
+/* reset btn */
+#step-reset-btn {
+  margin-top: 20px;
+  border-width: 1.5px;
+  color: rgb(203, 212, 214); /* textColor */
 }
 
-.step-back-btn {
-  margin-right: 8px;
+/* back btn */
+#step-back-btn {
+  color: rgb(203, 212, 214); /* textColor */
+  border-width: 1.5px;
 }
-
-.step-completed {
-  display: inline-block;
+/* div on step 5 */
+.step-completed-div {
+  text-align: center;
 }
+/* Step x already complete -- not need */
+/* .step-completed {
+  display: inline-block;
+} */
 
+/* instruction on step 5 */
 .step-instructions {
   margin-bottom: 24px;
 }
 
+/* logo img in QuickStartView  */
 .step-img {
-  margin-top: 16px;
+  margin-top: 10px;
   margin-bottom: -32px;
   width: 20vh;
   height: 20vh;
   max-height: 300px;
   max-width: 300px;
 }
-
+/* StyledStepLabel component - class stepper */
 .stepper {
-  font-size: 50px;
+  font-size: 40px;
+  padding-left: 1%;
+  padding-right: 1%;
+  padding-bottom: 8px;
+  border-radius: 8px;
+  margin-bottom: 10px;
 }
 
 .Mui-selected:not(.db-login-tab):not(.tables-view-btn) {
@@ -159,10 +88,10 @@ main {
 }
 
 .MuiTabs-scroller > div > button:not(.db-login-tab) {
-	color: rgba(255, 255, 255, .3);
-	font-size: 1.25rem;
-  border-right: 1px solid rgba(255, 255, 255, .1);
-  border-left: 1px solid rgba(255, 255, 255, .1);
+  color: rgba(255, 255, 255, 0.3);
+  font-size: 1.25rem;
+  border-right: 1px solid rgba(255, 255, 255, 0.1);
+  border-left: 1px solid rgba(255, 255, 255, 0.1);
   width: 33%;
 }
 
@@ -171,11 +100,11 @@ main {
 }
 
 .hide-3d-btn {
-  color: rgba(255, 255, 255, .8);
-  border: 2px solid rgba(255, 255, 255, .8);
-  border-radius: .5rem;
+  color: rgba(255, 255, 255, 0.8);
+  border: 2px solid rgba(255, 255, 255, 0.8);
+  border-radius: 0.5rem;
   background: transparent;
-  padding: 1rem .5rem;
+  padding: 1rem 0.5rem;
   cursor: pointer;
   outline: none;
-}
\ No newline at end of file
+}