diff --git a/app/.gcloudignore b/app/.gcloudignore
deleted file mode 100644
index a3f0c766..00000000
--- a/app/.gcloudignore
+++ /dev/null
@@ -1,17 +0,0 @@
-# This file specifies files that are *not* uploaded to Google Cloud Platform
-# using gcloud. It follows the same syntax as .gitignore, with the addition of
-# "#!include" directives (which insert the entries of the given .gitignore-style
-# file at that point).
-#
-# For more information, run:
-#   $ gcloud topic gcloudignore
-#
-.gcloudignore
-# If you would like to upload your .git directory, .gitignore file or files
-# from your .gitignore file, remove the corresponding line
-# below:
-.git
-.gitignore
-
-# Node.js dependencies:
-node_modules/
\ No newline at end of file
diff --git a/app/app.icns b/app/app.icns
deleted file mode 100644
index 4f3cbbaf..00000000
Binary files a/app/app.icns and /dev/null differ
diff --git a/app/components/PodCastClient.jsx b/app/components/PodCastClient.jsx
index a83b4024..498f816c 100644
--- a/app/components/PodCastClient.jsx
+++ b/app/components/PodCastClient.jsx
@@ -25,9 +25,10 @@ const PodcastPaneUI = lazy(() => import('./Podcast/PodcastPaneUI.jsx'));
 import Player from './Player/Player.jsx';
 import PlayerUI from './Player/PlayerUI.jsx';
 
-import Welcome from './Welcome.jsx';
+import Welcome from 'podfriend-approot/pages/Welcome.jsx';
+// import Welcome from 'podfriend-approot/pages/IonicTest.jsx';
 
-import FeedPage from 'podfriend-approot/components/Pages/FeedPage.jsx';
+import FeedPage from 'podfriend-approot/pages/FeedPage.jsx';
 
 // import SettingsPage from '~/app/components/user/SettingsPage';
 const SettingsPage = lazy(() => import('~/app/components/user/SettingsPage'));
@@ -59,7 +60,7 @@ import 'react-spring-bottom-sheet/dist/style.css'
 
 /* Core CSS required for Ionic components to work properly */
 import '@ionic/react/css/core.css';
-import {setupConfig} from '@ionic/react'
+import {setupConfig} from '@ionic/react';
 
 setupConfig({mode: 'ios'})
 
diff --git a/app/components/PodCastClient.scss b/app/components/PodCastClient.scss
index dfdc1026..0dc40e98 100644
--- a/app/components/PodCastClient.scss
+++ b/app/components/PodCastClient.scss
@@ -109,15 +109,31 @@ p {
 .mainArea {
 	flex: 2;
 	max-width: 100%;
-	height: 100%;
 	overflow-x: hidden;
 	overflow-y: hidden;
 	box-shadow: -4px 3px 8px 1px rgba(0,0,0,0.35);
 	border-radius: 20px 0px 0px 0px;
 	
 	filter: blur(0px); /* hack for chrome to make backdrop-filter and scrolling work on childs */
+
+	/*
+	max-height: calc(100% - 90px);
+	@media only screen and (max-width: 570px) {
+		max-height: calc(100% - 60px);
+	}
+	*/
 }
 :global {
+	/*
+	.header-ios {
+		background: var(--ion-color-primary) !important;
+	}
+	*/
+	.ion-page {
+		background-color: #ff23aa;
+		flex: 1;
+		height: calc(100% - 44px);
+	}
 	.podfriendModal {
 		p {
 			a {
@@ -257,11 +273,11 @@ p {
 	.podcastPage {
 		overflow-y: auto;
 
-		height: calc(100% - 90px);
+		/* height: calc(100% - 90px);*/
 	}
 	@media only screen and (max-width: 570px) {
 		.podcastPage {
-			height: calc(100% - 60px);
+			/* height: calc(100% - 60px);*/
 		}
 	}
 	.contentPage, .landingPage {
diff --git a/app/components/Podcast/PodcastExtras.jsx b/app/components/Podcast/PodcastExtras.jsx
index 1f104ace..5e8cc1ed 100644
--- a/app/components/Podcast/PodcastExtras.jsx
+++ b/app/components/Podcast/PodcastExtras.jsx
@@ -66,7 +66,7 @@ const PodcastExtras = React.memo(({isSubscribed, isArchived, selectedPodcast,sub
 					</div>
 				}
 				{ selectedPodcast.funding && selectedPodcast.funding.url &&
-					<button className={styles.donateButton} onClick={goToFundingUrl}><DonateIcon /> Donate to podcast</button>
+					<button className={'button ' + styles.donateButton} onClick={goToFundingUrl}><DonateIcon /> Donate to podcast</button>
 				}
 			</div>
 			<div className={styles.share}>
diff --git a/app/components/Podcast/PodcastPaneUI.jsx b/app/components/Podcast/PodcastPaneUI.jsx
index 9c728124..f324325b 100644
--- a/app/components/Podcast/PodcastPaneUI.jsx
+++ b/app/components/Podcast/PodcastPaneUI.jsx
@@ -17,6 +17,8 @@ import styles from './PodCastPane.css';
 import PodcastHeader from './PodcastHeader.jsx';
 import PodcastExtras from './PodcastExtras.jsx';
 
+
+
 const StyledBadge = withStyles(theme => ({
 	badge: {
 	  backgroundColor: '#0176e5',
@@ -43,117 +45,119 @@ const PodCastPaneUI = ({ showEpisode = false, selectedPodcast, description, podc
 	};
 
 	return (
-		<div ref={podcastPane} className={styles.podcastPane}>
-			{/*
-			<Header>
-				<div>
-					Test of the awesome header
-				</div>
-			</Header>
-			*/}
-			<PodcastHeader
-				reviewCount={selectedPodcast.review_totalCount}
-				reviewScore={selectedPodcast.review_totalScore}
-				coverImage={selectedPodcast.artworkUrl600}
-				imageUrlHash={selectedPodcast.imageUrlHash}
-				categories={selectedPodcast.categories}
-				podcastGuid={selectedPodcast.guid}
-				path={selectedPodcast.path}
-				title={selectedPodcast.name}
-				author={selectedPodcast.author}
-				website={selectedPodcast.link}
-				description={description}
-				podcastLoading={podcastLoading}
-				podcastLoadingError={podcastLoadingError}
-
-				rssFeed={rssFeed}
-			/>
-			<PodcastExtras
-				isSubscribed={isSubscribed}
-				selectedPodcast={selectedPodcast}
-				subscribedPodcasts={subscribedPodcasts}
-				subscribeToPodcast={subscribeToPodcast}
-				unsubscribeToPodcast={unsubscribeToPodcast}
-				isArchived={isArchived}
-				podcastLoadingError={podcastLoading}
-				archivePodcast={archivePodcast}
-				unarchivePodcast={unarchivePodcast}
-
-				rssFeed={rssFeed}
-			/>
-
-			<div className={styles.podcastContent}>
-								
-				<EpisodeList podcastPane={podcastPane} currentPodcastPlaying={currentPodcastPlaying} onEpisodeSelect={onEpisodeSelect} podcastInfo={selectedPodcast} episodes={selectedPodcast.episodes} rssFeed={rssFeed} />
-								
-{/*
-				<Tabs
-					variant="fullWidth"
-					value={tabIndex}
-					onChange={handleTabChange}
-					TabIndicatorProps={{
-						style: {
-							backgroundColor: '#0176e5'
-						}
-					}}
-				>
-					<Tab label={<StyledBadge badgeContent={4} max={999}>Episodes</StyledBadge>} value="episodes" />
-					<Tab label={<StyledBadge badgeContent={3} max={999}>Reviews</StyledBadge>} value="reviews" />
-				</Tabs>
-
-				{ tabIndex === 'episodes' &&
-					<div className={styles.episodeTab}>
-						<div className={styles.episodeColumn}>
-						<EpisodeList currentPodcastPlaying={currentPodcastPlaying} onEpisodeSelect={onEpisodeSelect} podcastInfo={selectedPodcast} episodes={selectedPodcast.episodes} />
-						
-							{ podcastLoadingError &&
-								<div>
-									Error reading Podcast File
-								</div>
-							}
-							{ !podcastLoadingError && podcastLoading && 
-								<div className={styles.episodeListLoading}>
-									<div className="loading-line loading-episode">&nbsp;</div>
-									<div className="loading-line loading-episode">&nbsp;</div>
-									<div className="loading-line loading-episode">&nbsp;</div>
-									<div className="loading-line loading-episode">&nbsp;</div>
-									<div className="loading-line loading-episode">&nbsp;</div>
-									<div className="loading-line loading-episode">&nbsp;</div>
-									<div className="loading-line loading-episode">&nbsp;</div>
-									<div className="loading-line loading-episode">&nbsp;</div>
-									<div className="loading-line loading-episode">&nbsp;</div>
-								</div>
+		
+			<div ref={podcastPane} className={styles.podcastPane}>
+				{/*
+				<Header>
+					<div>
+						Test of the awesome header
+					</div>
+				</Header>
+				*/}
+				<PodcastHeader
+					reviewCount={selectedPodcast.review_totalCount}
+					reviewScore={selectedPodcast.review_totalScore}
+					coverImage={selectedPodcast.artworkUrl600}
+					imageUrlHash={selectedPodcast.imageUrlHash}
+					categories={selectedPodcast.categories}
+					podcastGuid={selectedPodcast.guid}
+					path={selectedPodcast.path}
+					title={selectedPodcast.name}
+					author={selectedPodcast.author}
+					website={selectedPodcast.link}
+					description={description}
+					podcastLoading={podcastLoading}
+					podcastLoadingError={podcastLoadingError}
+
+					rssFeed={rssFeed}
+				/>
+				<PodcastExtras
+					isSubscribed={isSubscribed}
+					selectedPodcast={selectedPodcast}
+					subscribedPodcasts={subscribedPodcasts}
+					subscribeToPodcast={subscribeToPodcast}
+					unsubscribeToPodcast={unsubscribeToPodcast}
+					isArchived={isArchived}
+					podcastLoadingError={podcastLoading}
+					archivePodcast={archivePodcast}
+					unarchivePodcast={unarchivePodcast}
+
+					rssFeed={rssFeed}
+				/>
+
+				<div className={styles.podcastContent}>
+									
+					<EpisodeList podcastPane={podcastPane} currentPodcastPlaying={currentPodcastPlaying} onEpisodeSelect={onEpisodeSelect} podcastInfo={selectedPodcast} episodes={selectedPodcast.episodes} rssFeed={rssFeed} />
+									
+	{/*
+					<Tabs
+						variant="fullWidth"
+						value={tabIndex}
+						onChange={handleTabChange}
+						TabIndicatorProps={{
+							style: {
+								backgroundColor: '#0176e5'
 							}
+						}}
+					>
+						<Tab label={<StyledBadge badgeContent={4} max={999}>Episodes</StyledBadge>} value="episodes" />
+						<Tab label={<StyledBadge badgeContent={3} max={999}>Reviews</StyledBadge>} value="reviews" />
+					</Tabs>
+
+					{ tabIndex === 'episodes' &&
+						<div className={styles.episodeTab}>
+							<div className={styles.episodeColumn}>
+							<EpisodeList currentPodcastPlaying={currentPodcastPlaying} onEpisodeSelect={onEpisodeSelect} podcastInfo={selectedPodcast} episodes={selectedPodcast.episodes} />
+							
+								{ podcastLoadingError &&
+									<div>
+										Error reading Podcast File
+									</div>
+								}
+								{ !podcastLoadingError && podcastLoading && 
+									<div className={styles.episodeListLoading}>
+										<div className="loading-line loading-episode">&nbsp;</div>
+										<div className="loading-line loading-episode">&nbsp;</div>
+										<div className="loading-line loading-episode">&nbsp;</div>
+										<div className="loading-line loading-episode">&nbsp;</div>
+										<div className="loading-line loading-episode">&nbsp;</div>
+										<div className="loading-line loading-episode">&nbsp;</div>
+										<div className="loading-line loading-episode">&nbsp;</div>
+										<div className="loading-line loading-episode">&nbsp;</div>
+										<div className="loading-line loading-episode">&nbsp;</div>
+									</div>
+								}
+							</div>
 						</div>
-					</div>
-				}
-				{ tabIndex === 'reviews' &&
-					<ReviewPane podcast={selectedPodcast} />
-				}
-*/}
-{/*
-				<Tab title="Community" link={'/podcast/' + selectedPodcast.path + '/community'}>
-						community test content
-					</Tab>
-
-					<Tab title="Lists" link={'/podcast/' + selectedPodcast.path + '/lists'}>
-						Lists that feature this podcast
-					</Tab>
-					
-					<Tab title="Creators & Guests" link={'/podcast/' + selectedPodcast.path + '/creators-and-guests'}>
-						creator test content
-					</Tab>
-
-					<Tab title="Podcast content" link={'/podcast/' + selectedPodcast.path + '/extraContent'}>
-						podcast test content
-					</Tab>
+					}
+					{ tabIndex === 'reviews' &&
+						<ReviewPane podcast={selectedPodcast} />
+					}
+	*/}
+	{/*
+					<Tab title="Community" link={'/podcast/' + selectedPodcast.path + '/community'}>
+							community test content
+						</Tab>
+
+						<Tab title="Lists" link={'/podcast/' + selectedPodcast.path + '/lists'}>
+							Lists that feature this podcast
+						</Tab>
+						
+						<Tab title="Creators & Guests" link={'/podcast/' + selectedPodcast.path + '/creators-and-guests'}>
+							creator test content
+						</Tab>
+
+						<Tab title="Podcast content" link={'/podcast/' + selectedPodcast.path + '/extraContent'}>
+							podcast test content
+						</Tab>
+					*/}
+				</div>
+				{/*
+					<div className={styles.headline}>Podcasts like this</div>
+					<div style={{ paddingLeft: '30px', marginBottom: '30px' }}>... Coming soon!</div>
 				*/}
 			</div>
-			{/*
-				<div className={styles.headline}>Podcasts like this</div>
-				<div style={{ paddingLeft: '30px', marginBottom: '30px' }}>... Coming soon!</div>
-			*/}
-		</div>
+		
 	);
 }
 export default PodCastPaneUI;
\ No newline at end of file
diff --git a/app/components/UI/SideBar.jsx b/app/components/UI/SideBar.jsx
index c41cdc63..37d63be7 100644
--- a/app/components/UI/SideBar.jsx
+++ b/app/components/UI/SideBar.jsx
@@ -101,6 +101,11 @@ class SideBar extends Component {
 							<Link to="/" className={styles.mainNavigationButton}>
 								<FaHome size="20" /> Home
 							</Link>
+							{ true &&
+								<Link to="/history/" className={styles.mainNavigationButton}>
+									<FaRegLightbulb size="20" /> History
+								</Link>
+							}
 							<Link to="/podfrndr/" className={styles.mainNavigationButton}>
 								<FaRegLightbulb size="20" /> Podfrndr
 							</Link>
diff --git a/app/components/UI/SideBar.scss b/app/components/UI/SideBar.scss
index d88d0908..758e9ab1 100644
--- a/app/components/UI/SideBar.scss
+++ b/app/components/UI/SideBar.scss
@@ -96,6 +96,8 @@
 	border-radius: 10px 0px 0px 0px;
 
 	padding-bottom: 90px;
+
+	background-color: #f5f9fb;
 }
 .podcastHeader {
 	padding: 10px;
diff --git a/app/components/Window/TitleBar.css b/app/components/Window/TitleBar.css
index 06048179..3af0200e 100644
--- a/app/components/Window/TitleBar.css
+++ b/app/components/Window/TitleBar.css
@@ -75,11 +75,13 @@
 .navigationButton svg {
 	fill: #FFFFFF;
 }
-.navigationButton:hover {
-	background-color: #f6f6f6;
-}
-.navigationButton:hover svg {
-	fill: #999999;
+@media (any-hover: hover) {
+	.navigationButton:hover {
+		background-color: #f6f6f6;
+	}
+	.navigationButton:hover svg {
+		fill: #999999;
+	}
 }
 .navigationButtonDisabled svg {
 	fill: #016ace;
@@ -145,11 +147,13 @@
 	align-items: center;
 	justify-content: center;
 }
-.minimize:hover, .maximizeOrNormalize:hover, .close:hover {
-	background-color: #f6f6f6;
-}
-.minimize:hover svg, .maximizeOrNormalize:hover svg, .close:hover svg {
-	fill: #999999;
+@media (any-hover: hover) {
+	.minimize:hover, .maximizeOrNormalize:hover, .close:hover {
+		background-color: #f6f6f6;
+	}
+	.minimize:hover svg, .maximizeOrNormalize:hover svg, .close:hover svg {
+		fill: #999999;
+	}
 }
 .minimize {
 
@@ -166,11 +170,13 @@
 .navigationButtonForward {
 	
 }
-.close:hover {
-	background-color: #b13435;
-}
-.close:hover svg {
-	fill: #FFFFFF;
+@media (any-hover: hover) {
+	.close:hover {
+		background-color: #b13435;
+	}
+	.close:hover svg {
+		fill: #FFFFFF;
+	}
 }
 @media only screen and (max-width: 540px) {
 	.titleBar {
diff --git a/app/components/Window/WebContainer.jsx b/app/components/Window/WebContainer.jsx
index e90bb0cf..76d3dc74 100644
--- a/app/components/Window/WebContainer.jsx
+++ b/app/components/Window/WebContainer.jsx
@@ -10,6 +10,7 @@ import isElectron from 'is-electron';
 
 import { BrowserRouter as BrowserRouter } from 'react-router-dom';
 import { MemoryRouter as MemoryRouter } from 'react-router-dom';
+import { IonReactRouter } from '@ionic/react-router';
 
 import { Capacitor } from '@capacitor/core'
 
@@ -24,7 +25,9 @@ import TitleBar from '~/app/components/Window/TitleBar';
 
 import styles from '~/app/components/Window/WindowFrame.css';
 
-let Router = BrowserRouter;
+// let Router = BrowserRouter;
+console.log(IonReactRouter);
+let Router = IonReactRouter;
 
 // var platforms = getPlatforms();
 
@@ -64,7 +67,7 @@ class WebContainer extends React.Component {
 		return (
 			<Provider store={this.props.store}>
 				<PersistGate loading={null} persistor={this.props.persistor}>
-					<Router history={this.props.history}>
+					<Router>
 						<div className={styles.webContainer + ' appType_' + appType}>
 							<TitleBar appType={appType} isElectron={false} platform={this.props.platform} />
 							<PodCastClient appType={appType} store={this.props.store} audioController={this.props.audioController} />
diff --git a/app/main.dev.js b/app/electron.dev.js
similarity index 98%
rename from app/main.dev.js
rename to app/electron.dev.js
index 43879f83..85b2659c 100644
--- a/app/main.dev.js
+++ b/app/electron.dev.js
@@ -301,7 +301,7 @@ app.on('ready', async () => {
 	mainWindow.webContents.on('did-fail-load',(event) => {
 		console.log('Failed to load url!');
 		console.log(event);
-		mainWindow.loadURL(`file://${__dirname}/app.html`);
+		mainWindow.loadURL(`file://${__dirname}/web/index.electron.html`);
 	});
 
 	mainWindow.webContents.on('new-window',(e, url) => {
@@ -320,7 +320,7 @@ app.on('ready', async () => {
 	});
 	mainWindow.webContents.userAgent = 'Podfriend/1.0 ' + mainWindow.webContents.userAgent;
 
-	mainWindow.loadURL(`file://${__dirname}/app.html`);
+	mainWindow.loadURL(`file://${__dirname}/web/index.electron.html`);
 	// mainWindow.loadURL('https://www.whatismybrowser.com/detect/what-is-my-user-agent');
 	
 	quickViewWindow.loadURL(`file://${__dirname}/miniwindow.html`);
diff --git a/app/index.js b/app/index.electron.js
similarity index 100%
rename from app/index.js
rename to app/index.electron.js
diff --git a/app/menu.js b/app/menu.js
deleted file mode 100644
index 1306a69d..00000000
--- a/app/menu.js
+++ /dev/null
@@ -1,277 +0,0 @@
-// @flow
-import { app, Menu, shell, BrowserWindow } from 'electron';
-
-export default class MenuBuilder {
-	mainWindow: BrowserWindow;
-
-	constructor(mainWindow: BrowserWindow) {
-		this.mainWindow = mainWindow;
-	}
-
-	buildMenu() {
-		if (
-			process.env.NODE_ENV === 'development' ||
-			process.env.DEBUG_PROD === 'true'
-		) {
-			this.setupDevelopmentEnvironment();
-		}
-
-		const template =
-			process.platform === 'darwin'
-				? this.buildDarwinTemplate()
-				: this.buildDefaultTemplate();
-
-		const menu = Menu.buildFromTemplate(template);
-		Menu.setApplicationMenu(menu);
-
-		return menu;
-	}
-
-	setupDevelopmentEnvironment() {
-		this.mainWindow.openDevTools();
-		this.mainWindow.webContents.on('context-menu', (e, props) => {
-			const { x, y } = props;
-
-			Menu.buildFromTemplate([
-				{
-					label: 'Inspect element',
-					click: () => {
-						this.mainWindow.inspectElement(x, y);
-					}
-				}
-			]).popup(this.mainWindow);
-		});
-	}
-
-	buildDarwinTemplate() {
-		const subMenuAbout = {
-			label: 'Electron',
-			submenu: [
-				{
-					label: 'About ElectronReact',
-					selector: 'orderFrontStandardAboutPanel:'
-				},
-				{ type: 'separator' },
-				{ label: 'Services', submenu: [] },
-				{ type: 'separator' },
-				{
-					label: 'Hide ElectronReact',
-					accelerator: 'Command+H',
-					selector: 'hide:'
-				},
-				{
-					label: 'Hide Others',
-					accelerator: 'Command+Shift+H',
-					selector: 'hideOtherApplications:'
-				},
-				{ label: 'Show All', selector: 'unhideAllApplications:' },
-				{ type: 'separator' },
-				{
-					label: 'Quit',
-					accelerator: 'Command+Q',
-					click: () => {
-						app.quit();
-					}
-				}
-			]
-		};
-		const subMenuEdit = {
-			label: 'Edit',
-			submenu: [
-				{ label: 'Undo', accelerator: 'Command+Z', selector: 'undo:' },
-				{ label: 'Redo', accelerator: 'Shift+Command+Z', selector: 'redo:' },
-				{ type: 'separator' },
-				{ label: 'Cut', accelerator: 'Command+X', selector: 'cut:' },
-				{ label: 'Copy', accelerator: 'Command+C', selector: 'copy:' },
-				{ label: 'Paste', accelerator: 'Command+V', selector: 'paste:' },
-				{
-					label: 'Select All',
-					accelerator: 'Command+A',
-					selector: 'selectAll:'
-				}
-			]
-		};
-		const subMenuViewDev = {
-			label: 'View',
-			submenu: [
-				{
-					label: 'Reload',
-					accelerator: 'Command+R',
-					click: () => {
-						this.mainWindow.webContents.reload();
-					}
-				},
-				{
-					label: 'Toggle Full Screen',
-					accelerator: 'Ctrl+Command+F',
-					click: () => {
-						this.mainWindow.setFullScreen(!this.mainWindow.isFullScreen());
-					}
-				},
-				{
-					label: 'Toggle Developer Tools',
-					accelerator: 'Alt+Command+I',
-					click: () => {
-						this.mainWindow.toggleDevTools();
-					}
-				}
-			]
-		};
-		const subMenuViewProd = {
-			label: 'View',
-			submenu: [
-				{
-					label: 'Toggle Full Screen',
-					accelerator: 'Ctrl+Command+F',
-					click: () => {
-						this.mainWindow.setFullScreen(!this.mainWindow.isFullScreen());
-					}
-				}
-			]
-		};
-		const subMenuWindow = {
-			label: 'Window',
-			submenu: [
-				{
-					label: 'Minimize',
-					accelerator: 'Command+M',
-					selector: 'performMiniaturize:'
-				},
-				{ label: 'Close', accelerator: 'Command+W', selector: 'performClose:' },
-				{ type: 'separator' },
-				{ label: 'Bring All to Front', selector: 'arrangeInFront:' }
-			]
-		};
-		const subMenuHelp = {
-			label: 'Help',
-			submenu: [
-				{
-					label: 'Learn More',
-					click() {
-						shell.openExternal('http://electron.atom.io');
-					}
-				},
-				{
-					label: 'Documentation',
-					click() {
-						shell.openExternal(
-							'https://github.com/atom/electron/tree/master/docs#readme'
-						);
-					}
-				},
-				{
-					label: 'Community Discussions',
-					click() {
-						shell.openExternal('https://discuss.atom.io/c/electron');
-					}
-				},
-				{
-					label: 'Search Issues',
-					click() {
-						shell.openExternal('https://github.com/atom/electron/issues');
-					}
-				}
-			]
-		};
-
-		const subMenuView =
-			process.env.NODE_ENV === 'development' ? subMenuViewDev : subMenuViewProd;
-
-		return [subMenuAbout, subMenuEdit, subMenuView, subMenuWindow, subMenuHelp];
-	}
-
-	buildDefaultTemplate() {
-		const templateDefault = [
-			{
-				label: '&File',
-				submenu: [
-					{
-						label: '&Open',
-						accelerator: 'Ctrl+O'
-					},
-					{
-						label: '&Close',
-						accelerator: 'Ctrl+W',
-						click: () => {
-							this.mainWindow.close();
-						}
-					}
-				]
-			},
-			{
-				label: '&View',
-				submenu:
-					process.env.NODE_ENV === 'development'
-						? [
-								{
-									label: '&Reload',
-									accelerator: 'Ctrl+R',
-									click: () => {
-										this.mainWindow.webContents.reload();
-									}
-								},
-								{
-									label: 'Toggle &Full Screen',
-									accelerator: 'F11',
-									click: () => {
-										this.mainWindow.setFullScreen(
-											!this.mainWindow.isFullScreen()
-										);
-									}
-								},
-								{
-									label: 'Toggle &Developer Tools',
-									accelerator: 'Alt+Ctrl+I',
-									click: () => {
-										this.mainWindow.toggleDevTools();
-									}
-								}
-							]
-						: [
-								{
-									label: 'Toggle &Full Screen',
-									accelerator: 'F11',
-									click: () => {
-										this.mainWindow.setFullScreen(
-											!this.mainWindow.isFullScreen()
-										);
-									}
-								}
-							]
-			},
-			{
-				label: 'Help',
-				submenu: [
-					{
-						label: 'Learn More',
-						click() {
-							shell.openExternal('http://electron.atom.io');
-						}
-					},
-					{
-						label: 'Documentation',
-						click() {
-							shell.openExternal(
-								'https://github.com/atom/electron/tree/master/docs#readme'
-							);
-						}
-					},
-					{
-						label: 'Community Discussions',
-						click() {
-							shell.openExternal('https://discuss.atom.io/c/electron');
-						}
-					},
-					{
-						label: 'Search Issues',
-						click() {
-							shell.openExternal('https://github.com/atom/electron/issues');
-						}
-					}
-				]
-			}
-		];
-
-		return templateDefault;
-	}
-}
diff --git a/app/components/Pages/FeedPage.jsx b/app/pages/FeedPage.jsx
similarity index 99%
rename from app/components/Pages/FeedPage.jsx
rename to app/pages/FeedPage.jsx
index 5b2b82cf..80b76ff0 100644
--- a/app/components/Pages/FeedPage.jsx
+++ b/app/pages/FeedPage.jsx
@@ -23,8 +23,6 @@ const PageHeader = () => {
 };
 */
 const FeedPage = () => {
-
-
 	return (
 		<PodcastPage title="Inbox">
 			<div style={{ backgroundColor: '#FFFFFF', minHeight: '100%' }}>
diff --git a/app/components/Pages/FeedPage.scss b/app/pages/FeedPage.scss
similarity index 100%
rename from app/components/Pages/FeedPage.scss
rename to app/pages/FeedPage.scss
diff --git a/app/pages/IonicTest.jsx b/app/pages/IonicTest.jsx
new file mode 100644
index 00000000..80a00055
--- /dev/null
+++ b/app/pages/IonicTest.jsx
@@ -0,0 +1,99 @@
+import React, { useEffect, useState } from 'react';
+
+
+
+import {
+	IonPage,
+	IonHeader,
+	IonToolbar,
+	IonTitle,
+	IonButtons,
+	IonButton,
+	IonIcon,
+	IonContent,
+	IonMenuButton,
+	IonSearchbar
+  } from '@ionic/react';
+
+
+  import { notificationsOutline } from 'ionicons/icons';
+/**
+*
+*/
+const Welcome = () => {
+	return (
+<IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Activity</IonTitle>
+          <IonButtons slot="start">
+            <IonMenuButton />
+          </IonButtons>
+          <IonButtons slot="end">
+            <IonButton onClick={() => setShowNotifications(true)}>
+              <IonIcon icon={notificationsOutline} />
+            </IonButton>
+          </IonButtons>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent className="ion-padding" fullscreen>
+        <IonHeader collapse="condense">
+          <IonToolbar>
+            <IonTitle size="large">Activity</IonTitle>
+          </IonToolbar>
+		  <IonToolbar>
+				<div>
+					HELO!
+					</div>
+			</IonToolbar>
+        </IonHeader>
+		<div>test 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeah</div>
+		<div>test 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeah</div>
+		<div>test 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeah</div>
+		<div>test 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeah</div>
+		<div>test 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeah</div>
+		<div>test 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeah</div>
+		<div>test 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeah</div>
+		<div>test 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeah</div>
+		<div>test 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeah</div>
+		<div>test 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeah</div>
+
+		<div>test 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeah</div>
+		<div>test 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeah</div>
+		<div>test 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeah</div>
+		<div>test 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeah</div>
+		<div>test 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeah</div>
+		<div>test 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeah</div>
+		<div>test 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeah</div>
+		<div>test 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeah</div>
+		<div>test 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeah</div>
+		<div>test 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeah</div>
+
+		<div>test 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeah</div>
+		<div>test 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeah</div>
+		<div>test 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeah</div>
+		<div>test 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeah</div>
+		<div>test 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeah</div>
+		<div>test 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeah</div>
+		<div>test 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeah</div>
+		<div>test 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeah</div>
+		<div>test 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeah</div>
+		<div>test 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeah</div>
+
+		<div>test 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeah</div>
+		<div>test 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeah</div>
+		<div>test 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeah</div>
+		<div>test 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeah</div>
+		<div>test 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeah</div>
+		<div>test 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeah</div>
+		<div>test 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeah</div>
+		<div>test 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeah</div>
+		<div>test 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeah</div>
+		<div>test 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeahtest 123 yeah</div>
+
+      </IonContent>
+    </IonPage>
+	);
+}
+
+export default Welcome;
\ No newline at end of file
diff --git a/app/components/Welcome.css b/app/pages/Welcome.css
similarity index 100%
rename from app/components/Welcome.css
rename to app/pages/Welcome.css
diff --git a/app/components/Welcome.jsx b/app/pages/Welcome.jsx
similarity index 100%
rename from app/components/Welcome.jsx
rename to app/pages/Welcome.jsx
diff --git a/app/components/Pages/styles.scss b/app/pages/styles.scss
similarity index 100%
rename from app/components/Pages/styles.scss
rename to app/pages/styles.scss
diff --git a/app/volumewindow.html b/app/volumewindow.html
deleted file mode 100644
index e69de29b..00000000
diff --git a/app/app.html b/app/web/index.electron.html
similarity index 100%
rename from app/app.html
rename to app/web/index.electron.html
diff --git a/app/miniwindow.html b/app/web/miniwindow.html
similarity index 100%
rename from app/miniwindow.html
rename to app/web/miniwindow.html
diff --git a/configs/OLD_DELETE_webpack.config.eslint.js b/configs/OLD_DELETE_webpack.config.eslint.js
deleted file mode 100644
index bd000487..00000000
--- a/configs/OLD_DELETE_webpack.config.eslint.js
+++ /dev/null
@@ -1,4 +0,0 @@
-/* eslint import/no-unresolved: off, import/no-self-import: off */
-require('@babel/register');
-
-module.exports = require('./webpack.config.renderer.dev.babel').default;
diff --git a/configs/webpack.config.main.prod.babel.js b/configs/webpack.config.main.prod.babel.js
index 3468da7f..0a3be17e 100644
--- a/configs/webpack.config.main.prod.babel.js
+++ b/configs/webpack.config.main.prod.babel.js
@@ -19,11 +19,11 @@ export default merge.smart(baseConfig, {
 
   target: 'electron-main',
 
-  entry: './app/main.dev',
+  entry: './app/electron.dev.js',
 
   output: {
     path: path.join(__dirname, '..'),
-    filename: './release/main.prod.js'
+    filename: './release/electron.prod.js'
   },
 
   optimization: {
diff --git a/configs/webpack.config.renderer.dev.babel.js b/configs/webpack.config.renderer.dev.babel.js
index 9f45d761..cc062677 100644
--- a/configs/webpack.config.renderer.dev.babel.js
+++ b/configs/webpack.config.renderer.dev.babel.js
@@ -49,7 +49,7 @@ export default merge.smart(baseConfig, {
 		'react-hot-loader/patch',
 		`webpack-dev-server/client?http://localhost:${port}/`,
 		'webpack/hot/only-dev-server',
-		require.resolve('../app/index')
+		require.resolve('../app/index.electron.js')
 	],
 
 	output: {
diff --git a/configs/webpack.config.renderer.prod.babel.js b/configs/webpack.config.renderer.prod.babel.js
index f97aac14..7dd107bf 100644
--- a/configs/webpack.config.renderer.prod.babel.js
+++ b/configs/webpack.config.renderer.prod.babel.js
@@ -20,7 +20,7 @@ var configObject = merge.smart(baseConfig, {
 
   target: 'electron-renderer',
 
-  entry: path.join(__dirname, '..', 'app/index'),
+  entry: path.join(__dirname, '..', 'app/index.electron.js'),
   output: {
     path: path.join(__dirname, '..', 'release/dist'),
     publicPath: './dist/',
diff --git a/package.json b/package.json
index 1e065569..369c4c4f 100644
--- a/package.json
+++ b/package.json
@@ -27,21 +27,21 @@
 		"postinstall": "yarn build-dll",
 		"prestart": "yarn build",
 		"rebuild-native-dependencies": "./node_modules/.bin/electron-rebuild",
-		"start": "cross-env NODE_ENV=production electron ./release/main.prod.js",
-		"start-main-dev": "cross-env HOT=1 NODE_ENV=development electron -r @babel/register ./app/main.dev.js",
+		"start": "cross-env NODE_ENV=production electron ./release/electron.prod.js",
+		"start-main-dev": "cross-env HOT=1 NODE_ENV=development electron -r @babel/register ./app/electron.dev.js",
 		"start-renderer-dev": "cross-env NODE_ENV=development webpack-dev-server --config configs/webpack.config.renderer.dev.babel.js",
 		"bundle-report": "webpack-bundle-analyzer --port 4200 compilation-stats.json"
 	},
-	"main": "./release/main.prod.js",
+	"main": "./release/electron.prod.js",
 	"build": {
 		"productName": "PodFriend",
 		"appId": "com.podfriend",
 		"files": [
 			"app/dist/",
 			"app/images/",
-			"app/app.html",
-			"release/main.prod.js",
-			"release/main.prod.js.map",
+			"app/web/index.electron.html",
+			"release/electron.prod.js",
+			"release/electron.prod.js.map",
 			"app/components/*.jsx",
 			"package.json"
 		],