diff --git a/src/components/ArticleEditor.js b/src/components/ArticleEditor.js
deleted file mode 100644
index 4f9b8d8..0000000
--- a/src/components/ArticleEditor.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import React, { useState } from 'react';
-import Article from './Article';
-import "./css/ArticleEditor.css";
-
-const ArticleEditor = (props) => {
-    const [content, setContent] = useState("Hello World");
-
-    let article = {
-        "id":"0",
-        "title": "Article Editor",
-        "desc":"This is a place to edit articles",
-        "contents": content
-    };
-
-    let copyToClipboard = () => {
-        navigator.clipboard.writeText(content).then(function() {
-        console.log('Async: Copying to clipboard was successful!');
-        }, function(err) {
-            console.error('Async: Could not copy text: ', err);
-        });
-    };
-
-    return (
-    <div className="ArticleEditor">
-        <div id="toolbar" className="toolbar">
-            <div className="btn" onClick={copyToClipboard()}>Copy to Clipboard</div>
-        </div>
-        <Article article={article}/>
-        <textarea onInput={e=>{setContent(e.target.value)}}></textarea>
-    </div>
-    );
-};
-
-export default ArticleEditor;
\ No newline at end of file
diff --git a/src/components/Bai.js b/src/components/Bai.js
deleted file mode 100644
index 5c473b6..0000000
--- a/src/components/Bai.js
+++ /dev/null
@@ -1,109 +0,0 @@
-import React from 'react';
-import { connect } from 'react-redux';
-import {downloadModel, loadingModel, predict, error_msg} from '../actions'
-import ProgressBar from "./subcomponents/ProgressBar";
-//import { Link } from 'react-router-dom';
-import './css/Bai.css';
-
-
-class Bai extends React.Component {
-  /**
-   * Blank AI - Artificial Intelligence designed to distinguish photos of blank vs. non-blank paper scans
-   */
-
-  classes = {0: "Blank", 1: "Not Blank"}
-
-  componentDidMount () {
-    document.title = "Blank AI";
-  }
-
-  extExtractor (filename) {
-    let name = filename.split('.');
-    let ext = name[name.length-1];
-    return ext
-  }
-
-  async fileUpload (target, predict) {
-
-    const [file] = target.files;
-
-    let image = document.getElementById("preview")  
-
-    let image_ext = ['jpg', 'png'];
-
-    let file_ext = await this.extExtractor(file.name);
-
-    if (file && image_ext.includes(file_ext)) {
-
-        let imageBM = await createImageBitmap(file);
-        
-        let prediction = await predict(imageBM);
-        
-        console.log(this.declassify(prediction[0]));
-
-        image.src = await URL.createObjectURL(file);
-        image.classList.add('show');
-    } else {
-      this.props.error_msg('Please pass JPG or PNG file Only');
-    }
-  }
-
-  declassify(prediction) {
-      if (prediction > 0.5) {
-          return this.classes[1];
-      } else {
-          return this.classes[0];
-      }
-  }
-
-  render() {
-    
-    let content = (this.props.model === null)?
-        (
-        <div className="content">
-            <h1>Would you like to download the model?</h1>
-            <p>By clicking Accept below, you will download the model which may be between 100 mb in size to 1 gb.</p>
-            <button className={`btn ${this.props.loading?"hide":""}`} onClick={()=>{this.props.loadingModel();this.props.downloadModel()}}>Accept Download</button>
-            <h2>{this.props.loading}</h2>
-            <ProgressBar progress={this.props.downloadProgress}/>
-            <h2>{this.props.loading?this.props.downloadProgress+"%":""}</h2>
-        </div>
-        )
-        :(
-        <div className="content">
-            <h1>BAI Model Prediction</h1>
-
-            <p className="prediction">{this.props.last_prediction ? this.declassify(this.props.last_prediction[0]):"Waiting for Prediction"}</p>
-            
-            <div className={"error " + (this.props.error?'enable':'')}>
-              {this.props.error}
-            </div>
-
-            <img id="preview" alt="preview of predicted file"/>
-
-            <input type='file' id="fileSubmit" onChange={({target}) => this.fileUpload(target, this.props.predict)} />
-
-            <button className='btn' onClick={()=>{document.getElementById('fileSubmit').click();}}>Upload Image</button>
-            
-        </div>
-        );
-
-    return (
-        <div className="Bai">
-            {content}
-            <div className="about">
-              <h1>About</h1>
-              <p>
-                You can find the source, dataset and model created for BAI on github at 
-              </p>
-              <a href="https://www.github.com/RaspberryProgramming/BAI"> https://www.github.com/RaspberryProgramming/BAI</a>
-            </div>
-        </div>
-    );
-  }
-}
-const mapStateToProps = (state) => {
-  return {model: state.model.model, loading: state.model.loading, last_prediction: state.model.last_prediction, downloadProgress: state.model.progress, error: state.model.error};
-}
-
-export default connect(mapStateToProps, {downloadModel, loadingModel, predict, error_msg})(Bai);
diff --git a/src/components/subcomponents/Buttons.js b/src/components/subcomponents/Buttons.js
deleted file mode 100644
index c081d7c..0000000
--- a/src/components/subcomponents/Buttons.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import React, { useState } from 'react';
-import '../css/Buttons.css';
-import { ArrowUpShort, ArrowDownShort } from 'react-bootstrap-icons';
-
-/**
- * Buttons - set of button components that are reusable throughout the app.
- */
-
-export const ToggleButton = ({
-        defVal=true,
-        icons=[<ArrowUpShort/>, <ArrowDownShort/>],
-        text="",
-        clickAction=()=>{}
-    }) => {
-    /**
-     * ToggleButton - A button component for making a toggle button
-     *   defVal: default value, true/false
-     *   icons: array of two jsx values that are displayed depending on value
-     *   text: text next to toggle button
-     *   clickAction: function that will run when clicked. value is passed to this function.
-     */
-
-    const [value, setValue] = useState(defVal);
-
-    return (
-        <div className="btn toggle" onClick={()=>{setValue(!value); clickAction(value);}} >
-            <div className={value?'on':'off'}> {icons[0]} </div>
-            <div className={value?'off':'on'}> {icons[1]} </div>
-            {text}
-        </div>
-    );    
-};
-
-export const Button = ({children, onClick=()=>{}, href=null, className=""}) => {
-    if (href === null) {
-        return (
-            <button onClick={onClick} className={'btn '+ className}>
-                {children}
-            </button>
-        );
-    } else {
-        return (
-            <a onClick={onClick} href={href} className={'btn '+className}>
-                {children}
-            </a>
-        );
-    }
-}
\ No newline at end of file
diff --git a/src/components/subcomponents/GithubRepos.js b/src/components/subcomponents/GithubRepos.js
deleted file mode 100644
index 3b032f3..0000000
--- a/src/components/subcomponents/GithubRepos.js
+++ /dev/null
@@ -1,210 +0,0 @@
-import React from 'react';
-import { connect } from 'react-redux';
-import { getRepos, getUser, getRepoLanguages, nextPage, setSortValue } from '../../actions';
-import { ToggleButton, Button } from './Buttons';
-
-class GithubRepos extends React.Component {
-
-  perPage = 5;
-  sortOptions = [
-    // text: displayed text, value: value used for sorting
-    {text: "Created Date", value: "created_at"},
-    {text: "Last Pushed", value: "pushed_at"},
-    {text: "Name", value: "name"},
-    {text: "Number of Forks", value: "forks"},
-    {text: "Size", value: "size"},
-    {text: "Last Updated", value: "updated_at"},      
-  ];
-  
-  componentDidMount() {
-
-    document.title = "Github Repos";
-
-    if (!this.props.repos) {
-
-      this.props.getUser(this.props.username); // Receive the repos at start
-      this.props.getRepos(this.props.username); // Receive the repos at start
-
-    }
-  
-  }
-
-  renderLanguages(name) {
-    this.props.getRepoLanguages(this.props.username, name);
-
-    // Given that we've already received the repo's languages
-    if (this.props.repoLanguages && this.props.repoLanguages[name]) {
-
-      // Create a bubble for each language
-      return Object.keys(this.props.repoLanguages[name]).map(language=>{
-
-        return <div className="language" key={language}>{language}</div>; // Language bubble JSX
-
-      });
-    }
-
-  }
-
-  roundUp(num) {
-    return num%1 === 0? num : num-(num%1)+1
-  }
-
-  objArrayBubbleSort(arr, value) {
-    /**
-     * arrayBubbleSort
-     */
-    let unsorted;
-    let tmp;
-
-    do {
-      unsorted = false;
-
-      for (let i = 0; i < arr.length-1; i++) {
-        if (
-          (value.asc && arr[i][value.value] > arr[i+1][value.value]) // Ascending
-          || (!value.asc && arr[i][value.value] < arr[i+1][value.value]) // Descending
-          ) {
-          tmp = arr[i+1];
-          arr[i+1] = arr[i];
-          arr[i] = tmp;
-
-          unsorted = true;
-        }
-      }
-
-
-    } while (unsorted);
-
-    return arr;
-
-  }
-
-  renderRepos() {
-
-    if (this.props.repos) { // If the repos have been received
-
-      if (this.props.repos.length > 0) {
-        // Render each repo
-        let repos = this.props.single ? [this.props.repos[0]] : this.props.repos
-
-        let pages = this.roundUp(repos.length/this.perPage);
-
-        let sortedRepos = this.objArrayBubbleSort([...repos], this.props.sortedValue);
-
-        const render = sortedRepos.slice(0, this.props.page*this.perPage).map((repo) =>{
-          let updated = (new Date (repo.updated_at)).toLocaleString();
-          let created = (new Date (repo.created_at)).toLocaleString();
-
-          return (
-            <div className="repo" key={repo.id}>
-
-              <a href={repo.html_url} target="_blank" rel="noreferrer" className="title">{repo.name}</a>
-
-              <div className="content">
-                <p className="description">{repo.description ? repo.description : "No Description"}</p>
-
-                { 
-                  repo.homepage ? // If the repo has a homepage, render a button
-                    <a href={repo.homepage} target="_blank" rel="noreferrer" className="website"> Project Website </a>:
-                    ""
-                }
-              </div>
-
-              <div className="languages">
-                Languages:
-                  
-                  {
-                    this.renderLanguages(repo.name) // Render each language for the repo
-                  }
-              </div>
-              <div className="time">
-                Last Updated: {updated}
-              </div>
-              <div className="time">
-                Created: {created}
-              </div>
-            </div>
-            
-          );
-        });
-        
-        return (
-          <div className="repo-list">
-            <div className="sort-menu">
-              <div className="select-menu">
-                <p>Sort By:&ensp;</p>
-                <select className="dropdown-list" onChange={v=>{
-                  this.props.setSortValue({
-                    ...this.props.sortedValue,
-                    value: v.target.value
-                  });
-                  }}>
-                  {
-                    this.sortOptions.map(option=>{
-                      return (
-                        <option
-                          value={option.value}
-                          key={option.value}
-                          selected={option.value === this.props.sortedValue.value}
-                          >
-                            {option.text}
-                        </option>);
-                    })
-                  }
-                </select>
-              </div>
-              &ensp;
-              <ToggleButton defVal={false} clickAction={(val)=>{
-                console.warn(val);
-                this.props.setSortValue({
-                  ...this.props.sortedValue,
-                  asc: val
-                });
-                }} />
-            </div>
-
-            {render}
-            
-            {this.props.page < pages ?
-              <Button className="mar-la mar-ra" onClick={()=>this.props.nextPage()}>Load More ({this.props.page}/{pages})</Button>
-              : ""
-            }
-          </div>
-        ); // display the repo list with the rendered repos
-      
-      } else {
-
-        return <div className="loading">User doesn't have any repositories</div>
-      
-      }
-
-    }
-
-    // Return nothing if repos haven't been received
-
-    return <div className="loading"> Loading Repositories... </div>; // Return nothing if repos haven't been collected
-  }
-
-  render = () => {
-      return (<div>{this.renderRepos()}</div>);
-  }
-
-}
-
-
-const mapStateToProps = (state) => {
-    return {
-      repos: state.github.repos, 
-      repoLanguages: state.github.repoLanguages,
-      page: state.github.page,
-      sortedValue: state.github.sortedValue
-    };
-}
-  
-export default connect(mapStateToProps, {
-  getRepos,
-  getRepoLanguages,
-  getUser,
-  nextPage,
-  setSortValue
-})(GithubRepos);
\ No newline at end of file
diff --git a/src/components/subcomponents/Listing.js b/src/components/subcomponents/Listing.js
deleted file mode 100644
index 6fb3bb1..0000000
--- a/src/components/subcomponents/Listing.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-import '../css/Listing.css';
-
-const Listing = (props) => {
-    /**
-     * Listing - A subcomponent for making lists of content, mostly to make a list of links.
-     * 
-     * 
-     * title - The title of the listing
-     * children - JSX that is necessary in the content of the component
-     */
-    return (
-        <div className="listing">
-            <Link to={props.link}>
-                <div className="title">{props.title}</div>
-                <div className="content">
-                    {props.children}
-                </div>
-            </Link>
-        </div>
-    );    
-};
-
-export default Listing;
\ No newline at end of file
diff --git a/src/components/subcomponents/ProgressBar.js b/src/components/subcomponents/ProgressBar.js
deleted file mode 100644
index 7c87dcc..0000000
--- a/src/components/subcomponents/ProgressBar.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-import '../css/ProgressBar.css';
-
-class ProgressBar extends React.Component {
-    render () {
-        let pg = document.getElementById("ProgressBar");
-
-        let width = 0;
-
-        if (pg !== null) {
-        
-            width = pg.offsetWidth*(this.props.progress/100);
-
-        }
-
-
-        return (
-            <div className="ProgressBar" id="ProgressBar">
-                <div style={{width:width+"px"}} className="Bar"></div>
-            </div>
-        );
-    }
-};
-
-export default ProgressBar;
\ No newline at end of file