GOD-VIEWHEADmain

36 files changed, 2680 insertions, 0 deletions

diff --git a/server/web/src/App.tsx b/server/web/src/App.tsx
new file mode 100644
index 0000000..0ad4620
--- /dev/null
+++ b/server/web/src/App.tsx
@@ -0,0 +1,82 @@
+import { IAllReducer } from './interfaces/AllReducer.interface';
+import { IActivity } from './interfaces/Activity.interface';
+import { IClient } from './interfaces/Client.interface';
+import { useDispatch, useSelector } from 'react-redux';
+import { IAlert } from './interfaces/Alert.interface';
+import Server from './components/Server';
+import { useAlert } from 'react-alert';
+import React from 'react';
+import {
+    sessionAll,
+    sessionClose,
+    sessionAdd,
+    sessionRemove,
+    clientAdd,
+    clientRemove,
+    activityUpdate
+} from './redux/actions';
+
+let sessionAllEel,
+    sessionCloseEel,
+    sessionAddEel,
+    sessionRemoveEel,
+    clientAddEel,
+    clientRemoveEel,
+    activityUpdateEel;
+
+function App() {
+    const dispatch = useDispatch(),
+        alert = useAlert();
+
+    document.title = useSelector<IAllReducer, string>((state) => {
+        return `${state.clients.size} Connected Client${state.clients.size === 1 ? '' : 's'
+            }${state.session.size > 0
+                ? ` [${state.session.size} Client Session]`
+                : ''
+            }`;
+    });
+
+    clientAddEel = (unique_id: string, client: IClient, audio_alert: boolean) => {
+        dispatch(clientAdd(unique_id, client));
+
+        if (audio_alert) {
+            const promise = new Audio('./static/alert.wav').play();
+
+            promise !== undefined &&
+                promise.catch(() => window.showAlert({
+                    message: 'Failed To Play Alert Audio',
+                    type: 'DANGER'
+                }));
+
+            window.showAlert({
+                message: 'Client Connected',
+                type: 'SUCCESS'
+            });
+        }
+    };
+
+    window.showAlert = (data: IAlert) =>
+        // @ts-ignore
+        alert.show(data.message, { type: data.type });
+
+    sessionRemoveEel = (unique_id: string) =>
+        dispatch(sessionRemove(unique_id));
+
+    sessionAllEel = () => dispatch(sessionAll());
+    sessionCloseEel = () => dispatch(sessionClose());
+    sessionAddEel = (unique_id: string) => dispatch(sessionAdd(unique_id));
+    clientRemoveEel = (unique_id: string) => dispatch(clientRemove(unique_id));
+    activityUpdateEel = (activity: IActivity) => dispatch(activityUpdate(activity));
+
+    window.eel.expose(sessionAllEel, 'sessionAllEel');
+    window.eel.expose(sessionCloseEel, 'sessionCloseEel');
+    window.eel.expose(sessionAddEel, 'sessionAddEel');
+    window.eel.expose(sessionRemoveEel, 'sessionRemoveEel');
+    window.eel.expose(clientAddEel, 'clientAddEel');
+    window.eel.expose(clientRemoveEel, 'clientRemoveEel');
+    window.eel.expose(activityUpdateEel, 'activityUpdateEel');
+
+    return <Server />;
+}
+
+export default App;
diff --git a/server/web/src/components/Alert.tsx b/server/web/src/components/Alert.tsx
new file mode 100644
index 0000000..3b69cdf
--- /dev/null
+++ b/server/web/src/components/Alert.tsx
@@ -0,0 +1,14 @@
+// @ts-nocheck
+import { AlertButton, AlertButtonCross } from '../design/components/Alert.design';
+import React from 'react';
+
+export const AlertTemplate = ({ style, options, message, close }) => (
+    <AlertButton style={style} color={options.type} bgColor={options.type}>
+        {message}
+        {options.type === 'SUCCESS' && '!'}
+        {options.type === 'DANGER' && '.'}
+        {options.type === 'WARNING' && '.'}
+        {options.type === 'INFO' && '.'}
+        <AlertButtonCross onClick={close}>x</AlertButtonCross>
+    </AlertButton>
+);
diff --git a/server/web/src/components/Card.tsx b/server/web/src/components/Card.tsx
new file mode 100644
index 0000000..f0e7c0e
--- /dev/null
+++ b/server/web/src/components/Card.tsx
@@ -0,0 +1,80 @@
+import { IProps, IState } from '../interfaces/components/Card.interface';
+import { FaRedo, FaTrash } from 'react-icons/fa';
+import React, { Component } from 'react';
+import svg from 'plyr/dist/plyr.svg';
+import 'plyr/dist/plyr.css';
+import flvjs from 'flv.js';
+import Plyr from 'plyr';
+import {
+    CardContainer,
+    CardHeader,
+    CardFooter,
+    CardFooterItem
+} from '../design/components/Card.design';
+
+class Card extends Component<IProps, IState> {
+    videoRef: any = React.createRef();
+    plyrPlayer: any;
+    flvPlayer: any;
+
+    componentDidMount() {
+        const video = this.videoRef.current;
+        this.createFlvPlayer();
+
+        this.plyrPlayer = new Plyr(video, {
+            iconUrl: svg,
+            controls: [
+                'play-large',
+                'play',
+                'progress',
+                'mute',
+                'volume',
+                'fullscreen'
+            ]
+        });
+    }
+
+    createFlvPlayer = () => {
+        const video = this.videoRef.current;
+        const { source } = this.props;
+
+        this.flvPlayer = flvjs.createPlayer({
+            type: 'flv',
+            isLive: true,
+            url: source
+        });
+        this.flvPlayer.attachMediaElement(video);
+        this.flvPlayer.load()
+    }
+
+    reload = () => {
+        this.flvPlayer.destroy();
+        this.createFlvPlayer();
+    }
+
+    remove = () => {
+        const { source, title } = this.props;
+        this.props.removeStream({ source, title });
+    }
+
+    render() {
+        const { source, title } = this.props;
+
+        return (
+            <CardContainer>
+                <CardHeader title={`${title}: ${source}`}>{title}: {source}</CardHeader>
+                <video ref={this.videoRef} data-poster="./static/poster.png" />
+                <CardFooter>
+                    <CardFooterItem onClick={this.reload}>
+                        <FaRedo size="0.8rem" />
+                    </CardFooterItem>
+                    <CardFooterItem onClick={this.remove}>
+                        <FaTrash size="0.8rem" />
+                    </CardFooterItem>
+                </CardFooter>
+            </CardContainer>
+        )
+    }
+}
+
+export default Card;
diff --git a/server/web/src/components/Footer.tsx b/server/web/src/components/Footer.tsx
new file mode 100644
index 0000000..4814fda
--- /dev/null
+++ b/server/web/src/components/Footer.tsx
@@ -0,0 +1,347 @@
+import { IProps, IState } from '../interfaces/components/Footer.interface';
+import React, { Component, Fragment } from 'react';
+import Window from './Window';
+import {
+    FooterDropdown,
+    FooterDropdownToggle,
+    FooterDropdownContent,
+    FooterNameSpaceButton,
+    FooterDropdownButton,
+    FooterWindowManager,
+    FooterWindowButton,
+    FooterWindowClear,
+    FooterBlock,
+    FooterMenu,
+    FooterParagraph
+} from '../design/components/Footer.design';
+import {
+    FaChevronDown,
+    FaChevronUp,
+    FaLink,
+    FaListUl,
+    FaPlus,
+    FaMinus,
+    FaSyncAlt,
+    FaTrash
+} from 'react-icons/fa';
+
+class Footer extends Component<IProps, IState> {
+    winManager: any = React.createRef();
+    column = 0;
+    row = 0;
+
+    state = {
+        showHelp: false,
+        address: '',
+        windows: [],
+        help: {}
+    };
+
+    componentDidMount() {
+        window.eel.host_eel()((address: string) =>
+            window.eel.help_eel()((help: object) =>
+                this.setState({ address: address, help: help })
+            )
+        );
+    }
+
+    componentDidUpdate() {
+        this.column = 0;
+        this.row = 0;
+    }
+
+    createWindow = (
+        requestType: string,
+        argsArray: any,
+        windowData: string
+    ) => {
+        const newWindow = [
+            requestType,
+            argsArray,
+            React.createRef(),
+            true,
+            windowData ? [windowData] : null
+        ];
+
+        const windows: any = [...this.state.windows];
+        let undefinedExists = false;
+
+        for (let i = 0; i < windows.length; i++)
+            if (windows[i] === undefined) {
+                windows[i] = newWindow;
+                undefinedExists = true;
+                break;
+            }
+
+        if (!undefinedExists)
+            windows.push(newWindow);
+
+        this.setState({ windows: windows });
+    };
+
+    removeWindow = (index: number) => (event: any) => {
+        const windows = [...this.state.windows];
+        delete windows[index];
+
+        windows.filter(Boolean).length === 0
+            ? this.clearWindows()
+            : this.setState({ windows });
+
+        event.stopPropagation();
+    };
+
+    clearWindows = () => {
+        this.winManager.current.style.zIndex = 1;
+        this.setState({ windows: [] });
+    };
+
+    windowPosition = () => {
+        if (this.column === 5) {
+            this.column = 0;
+            this.row++;
+        }
+
+        this.column++;
+
+        return {
+            // CONSTANT : px for every row and column (left & top)
+            x: this.column * 25 + this.row * 25,
+            y: this.column * 25 + 40 + this.row
+        };
+    };
+
+    windowHighlight = (ref: any) => {
+        const newZIndex = Number(this.winManager.current.style.zIndex) + 1
+        this.winManager.current.style.zIndex = newZIndex;
+        ref.current.window.current.style.zIndex = newZIndex;
+    };
+
+    windowToggle = (show: boolean, window: any) => {
+        const windows: any[] = [...this.state.windows];
+        const index: number = windows.indexOf(window);
+        windows[index][3] = show;
+
+        this.windowHighlight(window[2]);
+        this.setState({ windows });
+
+        if (!show) window[2].current.window.current.style.display = 'none';
+        else window[2].current.window.current.style.display = 'block';
+    };
+
+    windowCenter = (window: any) => (event: any) => {
+        this.windowToggle(true, window);
+        // CONSTANT : based on default styles from the CSS of the window
+        // (height & width) & the values of each column & row (left & top)
+        window[2].current.window.current.style.height = '55vh';
+        window[2].current.window.current.style.width = '40vw';
+        window[2].current.window.current.style.left = '25px';
+        window[2].current.window.current.style.top = '65px';
+
+        event.stopPropagation();
+    };
+
+    createWindowEvent = (requestType: string, argsArray: any) => () => {
+        if (argsArray.length > 0) this.createWindow(requestType, argsArray, '');
+        else
+            window.eel.execute_eel({
+                message: requestType.toLowerCase()
+            })((response: any) => {
+                response !== null
+                    ? response.alert
+                        ? window.showAlert({
+                            message: response.message,
+                            type: response.type
+                        })
+                        : this.createWindow(requestType, argsArray, response)
+                    : window.showAlert({
+                        message: `${requestType} Request Executed`,
+                        type: 'INFO'
+                    });
+            });
+    };
+
+    windowHighlightEvent = (ref: any) => () => this.windowHighlight(ref);
+
+    windowToggleEvent = (show: boolean, window: any) => (event: any) => {
+        this.windowToggle(show, window);
+        event.stopPropagation();
+    };
+
+    launchWebVersion = (event: any) => {
+        if (event.ctrlKey) {
+            window.open(window.location.href, '_blank');
+            window.showAlert({
+                message: 'Web Version Launched',
+                type: 'INFO'
+            });
+        } else if (event.altKey) {
+            const request = new XMLHttpRequest();
+            request.open('GET', '/logout');
+            request.send();
+            window.location.reload();
+        }
+    };
+
+    showHelpToggle = () => this.setState({ showHelp: !this.state.showHelp });
+
+    render() {
+        const { showHelp, address, windows, help } = this.state;
+
+        return (
+            <Fragment>
+                <FooterDropdown>
+                    <FooterDropdownToggle onClick={this.showHelpToggle}>
+                        {showHelp ? (
+                            <FaChevronDown size="0.8rem" />
+                        ) : (
+                                <FaChevronUp size="0.8rem" />
+                            )}
+                    </FooterDropdownToggle>
+
+                    <FooterDropdownContent active={showHelp}>
+                        {Object.entries(help).map(
+                            ([namespace, requests]: any, index: number) => (
+                                <Fragment key={index}>
+                                    <FooterNameSpaceButton
+                                        title={`${namespace} Namespace`}
+                                    >
+                                        {namespace}
+                                    </FooterNameSpaceButton>{' '}
+                                    {requests.map(
+                                        (
+                                            [
+                                                available,
+                                                requestType,
+                                                argsString,
+                                                argsArray
+                                            ]: any[],
+                                            i: number
+                                        ) => (
+                                            <FooterDropdownButton
+                                                key={i}
+                                                title={`Available: ${available}${argsString
+                                                    ? ` ${argsString}`
+                                                    : ''
+                                                    }`}
+                                                onClick={this.createWindowEvent(
+                                                    requestType,
+                                                    argsArray
+                                                )}
+                                            >
+                                                {available === 'Session' ? (
+                                                    <FaLink size="0.6rem" />
+                                                ) : null}{' '}
+                                                {argsString ? (
+                                                    <FaListUl size="0.65rem" />
+                                                ) : null}{' '}
+                                                {requestType}
+                                            </FooterDropdownButton>
+                                        )
+                                    )}
+                                </Fragment>
+                            )
+                        )}
+                    </FooterDropdownContent>
+                </FooterDropdown>
+
+                <FooterWindowManager>
+                    <div ref={this.winManager} style={{ zIndex: 1 }}>
+                        {windows.length > 0 ? (
+                            <Fragment>
+                                <FooterWindowClear
+                                    title='Remove All Windows'
+                                    onClick={this.clearWindows}
+                                >
+                                    Clear Windows
+                                </FooterWindowClear>
+                                {windows.map((window: any, index: number) => (
+                                    <Fragment key={index}>
+                                        {window !== undefined ? (
+                                            <Fragment>
+                                                <Window
+                                                    ref={window[2]}
+                                                    requestType={window[0]}
+                                                    requestArgs={window[1]}
+                                                    pos={this.windowPosition()}
+                                                    data={window[4]}
+                                                    hightlight={this.windowHighlightEvent(
+                                                        window[2]
+                                                    )}
+                                                    toggle={this.windowToggleEvent(
+                                                        false,
+                                                        window
+                                                    )}
+                                                    destroy={this.removeWindow(
+                                                        index
+                                                    )}
+                                                />
+                                                <FooterWindowButton
+                                                    onClick={this.windowToggleEvent(
+                                                        window[3]
+                                                            ? false
+                                                            : true,
+                                                        window
+                                                    )}
+                                                >
+                                                    {window[0]}{' '}
+                                                    {window[3] ? (
+                                                        <FaMinus
+                                                            size="0.7rem"
+                                                            title={`Hide ${window[0]} Window`}
+                                                            onClick={this.windowToggleEvent(
+                                                                false,
+                                                                window
+                                                            )}
+                                                        />
+                                                    ) : (
+                                                            <FaPlus
+                                                                size="0.7rem"
+                                                                title={`Show ${window[0]} Window`}
+                                                                onClick={this.windowToggleEvent(
+                                                                    true,
+                                                                    window
+                                                                )}
+                                                            />
+                                                        )}{' '}
+                                                    <FaSyncAlt
+                                                        size="0.7rem"
+                                                        title={`Reset ${window[0]} Window Position`}
+                                                        onClick={this.windowCenter(
+                                                            window
+                                                        )}
+                                                    />{' '}
+                                                    <FaTrash
+                                                        size="0.7rem"
+                                                        title={`Remove ${window[0]} Window`}
+                                                        onClick={this.removeWindow(
+                                                            index
+                                                        )}
+                                                    />
+                                                </FooterWindowButton>
+                                            </Fragment>
+                                        ) : null}
+                                    </Fragment>
+                                ))}
+                            </Fragment>
+                        ) : (
+                                <FooterBlock>
+                                    No Active Windows To Manage
+                                </FooterBlock>
+                            )}
+                    </div>
+                </FooterWindowManager>
+
+                <FooterMenu>
+                    <FooterParagraph
+                        title={`Listening Address: ${address}`}
+                        onClick={this.launchWebVersion}
+                    >
+                        {`Listening Address: ${address}`}
+                    </FooterParagraph>
+                </FooterMenu>
+            </Fragment>
+        );
+    }
+}
+
+export default Footer;
diff --git a/server/web/src/components/Select.tsx b/server/web/src/components/Select.tsx
new file mode 100644
index 0000000..76809f6
--- /dev/null
+++ b/server/web/src/components/Select.tsx
@@ -0,0 +1,56 @@
+import { SelectContainer, SelectRow } from '../design/components/Select.design';
+import { ISelect, IState } from '../interfaces/components/Select.interface';
+import React, { Component } from 'react';
+import {
+    FaUserPlus,
+    FaUserMinus,
+    FaBan,
+    FaUnlockAlt,
+    FaTrash
+} from 'react-icons/fa';
+
+class Select extends Component<ISelect, IState> {
+    render() {
+        const {
+            show,
+            top,
+            left,
+            sessionAdd,
+            sessionRemove,
+            blacklistAdd,
+            blacklistRemove,
+            clientRemove
+        } = this.props;
+
+        return show ? (
+            <SelectContainer
+                style={{
+                    top: top,
+                    left: left
+                }}
+            >
+                <SelectRow onClick={sessionAdd}>
+                    <FaUserPlus size="1rem" color="rgb(0, 255, 255)" /> Session
+                    Add
+                </SelectRow>
+                <SelectRow onClick={sessionRemove}>
+                    <FaUserMinus size="1rem" color="rgb(0, 255, 255)" /> Session
+                    Remove
+                </SelectRow>
+                <SelectRow onClick={blacklistAdd}>
+                    <FaBan size="1rem" color="rgb(138, 43, 226)" /> Blacklist
+                    Add
+                </SelectRow>
+                <SelectRow onClick={blacklistRemove}>
+                    <FaUnlockAlt size="1rem" color="rgb(138, 43, 226)" />{' '}
+                    Blacklist Remove
+                </SelectRow>
+                <SelectRow onClick={clientRemove}>
+                    <FaTrash size="1rem" color="rgb(225, 53, 57)" /> Delete
+                </SelectRow>
+            </SelectContainer>
+        ) : null;
+    }
+}
+
+export default Select;
diff --git a/server/web/src/components/Server.tsx b/server/web/src/components/Server.tsx
new file mode 100644
index 0000000..c581cf6
--- /dev/null
+++ b/server/web/src/components/Server.tsx
@@ -0,0 +1,571 @@
+import { IProps, IState } from '../interfaces/components/Server.interface';
+import { clientsLoad, sessionLoad } from '../redux/actions';
+import { IClient } from '../interfaces/Client.interface';
+import React, { Component, Fragment } from 'react';
+import { connect } from 'react-redux';
+import Sidebar from './Sidebar';
+import Footer from './Footer';
+import Select from './Select';
+import {
+	ServerTable,
+	ServerTableHead,
+	ServerTableBody,
+	ServerTableRow,
+	ServerTableHeader,
+	ServerTableData,
+	ServerTableImage,
+	ServerTableBarBg,
+	ServerTableBar,
+	ServerBlock
+} from '../design/components/Server.design';
+
+class Server extends Component<IProps, IState> {
+	tableBody: any = React.createRef();
+	touchStartMenuTimestamp = 0;
+	touchEndMenuTimestamp = 0;
+	lastSelected: any = null;
+	// CONSTANT : assumes these are
+	// the same on the server side
+	displayKeys = [
+		'Row',
+		'Country',
+		'Connect IP',
+		'Unique ID',
+		'Username',
+		'Hostname',
+		'Privileges',
+		'Antivirus',
+		'Operating System',
+		'CPU',
+		'GPU',
+		'RAM',
+		'Active Window',
+		'Idle Time',
+		'Resource Usage'
+	]
+	displayValues = [
+		'username',
+		'hostname',
+		'privileges',
+		'antivirus',
+		'operating_system',
+		'cpu',
+		'gpu',
+		'ram'
+	]
+	hiddenKeys = [
+		'Initial Connect',
+		'Filepath',
+		'Running',
+		'Build Name',
+		'Build Version',
+		'OS Version',
+		'System Locale',
+		'System Uptime',
+		'PC Manufacturer',
+		'PC Model',
+		'MAC Address',
+		'External IP',
+		'Local IP',
+		'Timezone',
+		'Country Code',
+		'Region',
+		'~City',
+		'~Zip Code',
+		'~Latitude',
+		'~Longitude'
+	]
+	hiddenValues = [
+		'initial_connect',
+		'filepath',
+		'running',
+		'build_name',
+		'build_version',
+		'os_version',
+		'system_locale',
+		'system_uptime',
+		'pc_manufacturer',
+		'pc_model',
+		'mac_address',
+		'external_ip',
+		'local_ip',
+		'timezone',
+		'country_code',
+		'region',
+		'city',
+		'zip_code',
+		'latitude',
+		'longitude'
+	]
+
+	constructor(props: IProps) {
+		super(props);
+
+		this.state = {
+			selectData: { show: false },
+			clients: props.clients,
+			session: props.session
+		};
+	}
+
+	componentDidMount() {
+		const { clientsLoad, sessionLoad } = this.props;
+
+		window.addEventListener('click', () => {
+			this.setState({ selectData: { show: false } });
+			this.clearSelected();
+		});
+
+		window.eel.clients_eel()((clients: Map<string, IClient>) =>
+			window.eel.session_eel()((session: Set<string>) => {
+				clientsLoad(clients);
+				sessionLoad(session);
+			})
+		);
+	}
+
+	sessionAdd = () => {
+		const selected = this.allSelected('unique-id');
+		const length = selected.length;
+
+		if (length > 0) {
+			window.eel.execute_eel({
+				message: 'session',
+				id: selected.join(','),
+			})((response: string) => console.log(response));
+			window.showAlert({
+				message: `Client${this.plural(selected)} Added To Session`,
+				type: 'SUCCESS',
+			});
+		} else this.selectMenuError();
+	};
+
+	sessionRemove = () => {
+		const selected = this.allSelected('unique-id');
+		const length = selected.length;
+
+		if (length > 0) {
+			window.eel.execute_eel({
+				message: 'session',
+				id: selected.join(','),
+				remove: true,
+			})((response: string) => console.log(response));
+			window.showAlert({
+				message: `Client${this.plural(selected)} Removed From Session`,
+				type: 'SUCCESS',
+			});
+		} else this.selectMenuError();
+	};
+
+	blacklistAdd = () => {
+		const selected = this.allSelected('connect-ip');
+		const length = selected.length;
+
+		if (length > 0) {
+			window.eel.execute_eel({
+				message: 'blacklist',
+				add: selected.join(','),
+			})((response: string) => console.log(response));
+			window.showAlert({
+				message: `Blacklist Address${this.plural(selected, 'es')} Added`,
+				type: 'SUCCESS',
+			});
+		} else this.selectMenuError();
+	};
+
+	blacklistRemove = () => {
+		const selected = this.allSelected('connect-ip');
+		const length = selected.length;
+
+		if (length > 0) {
+			window.eel.execute_eel({
+				message: 'blacklist',
+				remove: selected.join(','),
+			})((response: string) => console.log(response));
+			window.showAlert({
+				message: `Blacklist Address${this.plural(selected, 'es')} Removed`,
+				type: 'SUCCESS',
+			});
+		} else this.selectMenuError();
+	};
+
+	clientRemove = () => {
+		const selected = this.allSelected('unique-id');
+		const length = selected.length;
+
+		if (length > 0) {
+			window.eel.execute_eel({
+				message: 'delete',
+				id: selected.join(','),
+			})((response: string) => console.log(response));
+			window.showAlert({
+				message: `Client${this.plural(selected)} Removed`,
+				type: 'SUCCESS',
+			});
+		} else this.selectMenuError();
+	};
+
+	clipboard = (data: string) => (event: any) => {
+		if (event.altKey) {
+			if (window.isSecureContext) {
+				window.navigator.clipboard.writeText(data);
+				window.showAlert({
+					message: 'Field Copied To Clipboard',
+					type: 'SUCCESS'
+				});
+			} else
+				window.showAlert({
+					message: 'Clipboard Failed',
+					type: 'DANGER',
+				});
+
+			event.stopPropagation();
+			event.preventDefault();
+		}
+	};
+
+	selectMenuError = () => window.showAlert({
+		message: 'Select Menu Error',
+		type: 'DANGER',
+	});
+
+	plural = (array: string[], end = 's') =>
+		array.length === 1 ? '' : end;
+
+	errorFlag = (event: any) =>
+		// CONSTANT : placeholder flag name
+		event.currentTarget.src = './static/flags/placeholder.png';
+
+	properties = (client: IClient) => {
+		let result: string[] | string = [];
+
+		for (let i = 0; i < this.hiddenValues.length; i++) {
+			const value = (client as any)[this.hiddenValues[i]];
+			const key = this.hiddenKeys[i];
+			result.push(`${key}: ${value}`);
+		}
+
+		return this.propertiesResult(result.join('\n'));
+	};
+
+	propertiesResult = (result: string) => ({
+		onContextMenu: this.clipboard(result),
+		title: result
+	});
+
+	menu = (event: any) =>
+		this.isSelected(event.currentTarget) &&
+		this.setState({
+			selectData: {
+				show: true,
+				// CONSTANT : when to swap menu horizontally (right to left)
+				left:
+					window.innerWidth - event.clientX < 165
+						? event.clientX - 136
+						: event.clientX,
+				// CONSTANT : when to swap menu vertically (bottom to top)
+				top:
+					window.innerHeight - event.clientY < 165
+						? event.clientY - 150
+						: event.clientY,
+				sessionAdd: this.sessionAdd,
+				sessionRemove: this.sessionRemove,
+				blacklistAdd: this.blacklistAdd,
+				blacklistRemove: this.blacklistRemove,
+				clientRemove: this.clientRemove
+			},
+		});
+
+	touchStartMenu = (event: any) =>
+		(this.touchStartMenuTimestamp = event.timeStamp);
+
+	touchEndMenu = (event: any) => {
+		this.touchEndMenuTimestamp = event.timeStamp;
+		// CONSTANT : hold down touch time
+		this.touchEndMenuTimestamp - this.touchStartMenuTimestamp > 300 &&
+			this.menu(event);
+	};
+
+	select = (event: any) => {
+		this.setState({ selectData: { show: false } });
+		const current = event.currentTarget;
+
+		if (event.ctrlKey) {
+			if (this.isSelected(current)) {
+				this.removeSelected(current);
+				this.lastSelected = null;
+			} else {
+				this.addSelected(current);
+				this.lastSelected = current;
+			}
+		} else if (event.shiftKey) {
+			const rows = this.tableBody.current.rows;
+			let currentPosition = 0;
+			let latestPosition = 0;
+
+			for (let i = 0; i < rows.length; i++)
+				if (rows[i] === current) currentPosition = i;
+				else if (rows[i] === this.lastSelected) latestPosition = i;
+
+			this.rangeSelect(rows, currentPosition, latestPosition);
+		} else this.singleSelect(current);
+
+		event.stopPropagation();
+	};
+
+	singleSelect = (row: any) => {
+		const rows = this.tableBody.current.rows;
+		let currentSelected = false,
+			otherSelected = false;
+
+		for (let i = 0; i < rows.length; i++)
+			if (rows[i] !== row) {
+				if (this.isSelected(rows[i])) {
+					if (!otherSelected) otherSelected = true;
+					this.removeSelected(rows[i]);
+				}
+			} else if (this.isSelected(row)) currentSelected = true;
+
+		if (currentSelected && !otherSelected) {
+			this.removeSelected(row);
+			this.lastSelected = null;
+		} else {
+			this.addSelected(row);
+			this.lastSelected = row;
+		}
+	};
+
+	rangeSelect = (rows: any, start: number, end: number) => {
+		if (this.lastSelected !== rows[start]) {
+			if (start > end) {
+				let n = start;
+				start = end;
+				end = n;
+			}
+
+			for (let i = 0; i < rows.length; i++)
+				if (i >= start && i <= end) {
+					if (!this.isSelected(rows[i])) this.addSelected(rows[i]);
+				} else if (this.isSelected(rows[i])) this.removeSelected(rows[i]);
+		} else this.singleSelect(this.lastSelected);
+	};
+
+	allSelected = (dataAttribute: string) => {
+		let result = [];
+
+		if (this.tableBody.current !== null) {
+			const rows = this.tableBody.current.rows;
+
+			for (let i = 0; i < rows.length; i++)
+				if (this.isSelected(rows[i]))
+					result.push(rows[i].getAttribute(`data-${dataAttribute}`));
+		}
+
+		return result;
+	};
+
+	clearSelected = () => {
+		if (this.tableBody.current !== null) {
+			const rows = this.tableBody.current.rows;
+			this.lastSelected = null;
+
+			for (let i = 0; i < rows.length; i++)
+				if (this.isSelected(rows[i])) this.removeSelected(rows[i]);
+		}
+	};
+
+	addSelected = (row: any) => {
+		row.setAttribute('data-selected', '');
+		row.style.backgroundColor = 'rgb(0, 40, 80)';
+	};
+
+	removeSelected = (row: any) => {
+		row.removeAttribute('data-selected');
+		row.removeAttribute('style');
+	};
+
+	isSelected = (row: any) => row.hasAttribute('data-selected');
+
+	render() {
+		const { clients, session } = this.props;
+		const { selectData } = this.state;
+
+		return (
+			<Fragment>
+				{clients.size > 0 ? (
+					<ServerTable>
+						<ServerTableHead>
+							<ServerTableRow>
+								{this.displayKeys.map((category: string, index: number) => (
+									<ServerTableHeader key={index} title={category}>
+										{category}
+									</ServerTableHeader>
+								))}
+							</ServerTableRow>
+						</ServerTableHead>
+						<ServerTableBody ref={this.tableBody}>
+							{Array.from(clients.entries()).map(([unique_id, client]: [string, IClient], row: number) => (
+								<ServerTableRow
+									key={row}
+									data-unique-id={unique_id}
+									data-connect-ip={client.connect_ip}
+									onClick={this.select}
+									onContextMenu={this.menu}
+									onTouchStart={this.touchStartMenu}
+									onTouchEnd={this.touchEndMenu}
+									activeSession={
+										session.has(unique_id)
+											? 'rgb(0, 255, 255)'
+											: 'rgb(255, 255, 255)'
+									}
+								>
+									<ServerTableData
+										data-label={this.displayKeys[0]}
+										{...this.properties(client)}
+									>
+										{row + 1}
+									</ServerTableData>
+
+									<ServerTableData
+										data-label={this.displayKeys[1]}
+										title={client.country}
+										onContextMenu={this.clipboard(client.country)}
+									>
+										<Fragment>
+											<ServerTableImage
+												src={`./static/flags/${client.country_code}.png`}
+												onError={this.errorFlag}
+											/>
+											{client.country}
+										</Fragment>
+									</ServerTableData>
+
+									<ServerTableData
+										data-label={this.displayKeys[2]}
+										title={client.connect_ip}
+										onContextMenu={this.clipboard(client.connect_ip)}
+									>
+										{client.connect_ip}
+									</ServerTableData>
+
+									<ServerTableData
+										data-label={this.displayKeys[3]}
+										title={unique_id}
+										onContextMenu={this.clipboard(unique_id)}
+									>
+										{unique_id}
+									</ServerTableData>
+
+									{this.displayValues.map(
+										(displayValue: string, column: number) => (
+											<ServerTableData
+												key={column}
+												data-label={
+													// CONSTANT : start index
+													this.displayKeys[4 + column]
+												}
+												title={(client as any)[displayValue]}
+												onContextMenu={this.clipboard(
+													(client as any)[displayValue]
+												)}
+											>
+												{(client as any)[displayValue]}
+											</ServerTableData>
+										)
+									)}
+
+									<ServerTableData
+										data-label={
+											this.displayKeys[this.displayKeys.length - 3]
+										}
+										{...client.active_window && (
+											{
+												title: client.active_window,
+												onContextMenu: this.clipboard(
+													client.active_window
+												)
+											}
+										)}
+									>
+										{client.active_window ? client.active_window : '...'}
+									</ServerTableData>
+
+									<ServerTableData
+										data-label={
+											this.displayKeys[this.displayKeys.length - 2]
+										}
+										{...client.idle_time && (
+											{
+												title: client.idle_time,
+												onContextMenu: this.clipboard(
+													client.idle_time
+												)
+											}
+										)}
+									>
+										{client.idle_time ? client.idle_time : '...'}
+									</ServerTableData>
+
+									<ServerTableData
+										data-label={
+											this.displayKeys[this.displayKeys.length - 1]
+										}
+										{...client.resource_usage && (
+											{
+												title: client.resource_usage,
+												onContextMenu: this.clipboard(
+													client.resource_usage
+												)
+											}
+										)}
+									>
+										{client.resource_usage ? (
+											// CONSTANT : cpu/ram
+											client.resource_usage
+												.split('/')
+												.map((bar: string) => (
+													<ServerTableBarBg>
+														<ServerTableBar width={bar} />
+													</ServerTableBarBg>
+												))
+										) : '...'}
+									</ServerTableData>
+								</ServerTableRow>
+							))}
+						</ServerTableBody>
+					</ServerTable>
+				) : (
+						<ServerBlock>No Clients Connected</ServerBlock>
+					)}
+				<Sidebar />
+				<Footer />
+				<Select
+					show={selectData.show}
+					top={selectData.top}
+					left={selectData.left}
+					sessionAdd={selectData.sessionAdd}
+					sessionRemove={selectData.sessionRemove}
+					blacklistAdd={selectData.blacklistAdd}
+					blacklistRemove={selectData.blacklistRemove}
+					clientRemove={selectData.clientRemove}
+				/>
+			</Fragment>
+		);
+	}
+}
+
+const mapStateToProps = (state: IProps) => {
+	return {
+		session: state.session,
+		clients: state.clients
+	};
+};
+
+const mapDispatchToProps = (dispatch: any) => {
+	return {
+		clientsLoad: (clients: Map<string, IClient>) => dispatch(clientsLoad(clients)),
+		sessionLoad: (session: Set<string>) => dispatch(sessionLoad(session))
+	};
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Server);
diff --git a/server/web/src/components/Sidebar.tsx b/server/web/src/components/Sidebar.tsx
new file mode 100644
index 0000000..d016a19
--- /dev/null
+++ b/server/web/src/components/Sidebar.tsx
@@ -0,0 +1,136 @@
+import { IProps, IState } from '../interfaces/components/Sidebar.interface';
+import { FaChevronLeft, FaChevronRight } from 'react-icons/fa';
+import { IStream } from '../interfaces/Stream.interface';
+import React, { Component } from 'react';
+import Card from './Card';
+import {
+    SidebarDropdown,
+    SidebarDropdownButton,
+    SidebarDropdownContent,
+    SidebarStreamContent,
+    SidebarStream,
+    SidebarStreamSection,
+    SidebarStreamInput,
+    SidebarStreamButton,
+    SidebarBlock
+} from '../design/components/Sidebar.design';
+
+class Sidebar extends Component<IProps, IState> {
+    sourceInput: any = React.createRef();
+    titleInput: any = React.createRef();
+
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            showContent: false,
+            streams: []
+        };
+    }
+
+    removeStream = (toRemove: IStream) =>
+        this.setState({
+            streams: this.state.streams.filter(
+                (stream: IStream) => (
+                    !(stream.source === toRemove.source
+                        && stream.title === toRemove.title)
+                )
+            )
+        });
+
+    addStream = () => {
+        const source = this.sourceInput.current;
+        const title = this.titleInput.current;
+        const sourceValue = source.value.trim();
+        const titleValue = title.value.trim();
+        let sourcePassed = true;
+        let titlePassed = true;
+
+        if (sourceValue === '') {
+            source.style.border = 'solid thin rgb(225, 53, 57)';
+            sourcePassed = false;
+        } else
+            source.style.border = 'solid thin rgb(31, 93, 117)';
+
+        if (titleValue === '') {
+            title.style.border = 'solid thin rgb(225, 53, 57)';
+            titlePassed = false;
+        } else
+            title.style.border = 'solid thin rgb(31, 93, 117)';
+
+        if (sourcePassed && titlePassed)
+            if (this.streamExists(sourceValue, titleValue))
+                alert('Stream Already Exists!')
+            else {
+                this.state.streams.push({
+                    source: sourceValue,
+                    title: titleValue
+                });
+                source.value = '';
+                title.value = '';
+            }
+    }
+
+    streamExists = (source: string, title: string) => {
+        for (const stream of this.state.streams)
+            if (stream.source === source && stream.title === title)
+                return true;
+        return false;
+    }
+
+    updateShowContent = () =>
+        this.setState({ showContent: !this.state.showContent });
+
+    render() {
+        const { showContent, streams } = this.state;
+
+        return (
+            <SidebarDropdown>
+                <SidebarDropdownButton onClick={this.updateShowContent}>
+                    {showContent ? (
+                        <FaChevronRight size=".8rem" />
+                    ) : (
+                            <FaChevronLeft size=".8rem" />
+                        )}
+                </SidebarDropdownButton>
+
+                <SidebarDropdownContent active={showContent}>
+                    <SidebarStream>
+                        <SidebarStreamInput
+                            type="search"
+                            placeholder="Flash video source..."
+                            ref={this.sourceInput}
+                        />
+                        <SidebarStreamSection>
+                            <SidebarStreamInput
+                                type="search"
+                                placeholder="Stream title..."
+                                ref={this.titleInput}
+                            />
+                            <SidebarStreamButton
+                                onClick={this.addStream}
+                            >
+                                Add
+                            </SidebarStreamButton>
+                        </SidebarStreamSection>
+                    </SidebarStream>
+                    {streams.length === 0 ? (
+                        <SidebarBlock>No Streams Available</SidebarBlock>
+                    ) : (
+                            <SidebarStreamContent>
+                                {streams.map((stream: IStream) => (
+                                    <Card
+                                        removeStream={this.removeStream}
+                                        source={stream.source}
+                                        title={stream.title}
+                                    />
+                                ))}
+                            </SidebarStreamContent>
+                        )}
+                </SidebarDropdownContent>
+            </SidebarDropdown>
+        );
+    }
+}
+
+export default Sidebar;
diff --git a/server/web/src/components/Window.tsx b/server/web/src/components/Window.tsx
new file mode 100644
index 0000000..2677819
--- /dev/null
+++ b/server/web/src/components/Window.tsx
@@ -0,0 +1,308 @@
+import { IProps, IState } from '../interfaces/components/Window.interface';
+import React, { Component, Fragment } from 'react';
+import {
+    WindowData,
+    WindowTopBar,
+    WindowTopBarTitle,
+    WindowTopBarAction,
+    WindowContent,
+    WindowResult,
+    WindowForm,
+    WindowInputGroup,
+    WindowLabel,
+    WindowInput,
+    WindowCheckbox,
+    WindowFormSubmit,
+    WindowFormButton,
+    WindowFormClear
+} from '../design/components/Window.design';
+import {
+    FaMinusSquare,
+    FaWindowMaximize,
+    FaWindowMinimize,
+    FaWindowClose,
+    FaRedo
+} from 'react-icons/fa';
+
+class Window extends Component<IProps, IState> {
+    windowResult: any = React.createRef();
+    windowTitle: any = React.createRef();
+    windowForm: any = React.createRef();
+    window: any = React.createRef();
+
+    constructor(props: IProps) {
+        super(props);
+        this.state = {
+            result: props.data || [],
+            fullscreen: false,
+            dragging: false,
+            pos: props.pos,
+            rel: null
+        };
+    }
+
+    componentDidMount() {
+        document.addEventListener('fullscreenchange', this.fullscreenEvent);
+
+        if (this.windowForm.current === null)
+            // CONSTANT : window height minus the margin & borders
+            this.windowResult.current.style.height = 'calc(100% - 1.625rem)';
+        else
+            // CONSTANT : window height minus the form height, margin & borders
+            // CONSTANT : Rem unit dependant & px scrollHeight
+            this.windowResult.current.style.height = `
+                calc(100% - 1.625rem - ${this.windowForm.current.scrollHeight / 16}rem)
+            `;
+    }
+
+    componentDidUpdate(_: IProps, state: IState) {
+        const { dragging } = this.state;
+
+        if (dragging && !state.dragging) {
+            document.addEventListener('mousemove', this.windowMove);
+            document.addEventListener('mouseup', this.windowDrop);
+        } else if (!dragging && state.dragging) {
+            document.removeEventListener('mousemove', this.windowMove);
+            document.removeEventListener('mouseup', this.windowDrop);
+        }
+    }
+
+    componentWillUnmount() {
+        document.removeEventListener('fullscreenchange', this.fullscreenEvent);
+    }
+
+    windowMove = (event: any) => {
+        const { dragging, rel } = this.state;
+
+        if (!dragging) return;
+
+        this.setState({
+            pos: {
+                x: event.pageX - rel.x,
+                y: event.pageY - rel.y
+            }
+        });
+    };
+
+    windowGrab = (event: any) => {
+        if (event.button !== 0) return;
+
+        this.windowTitle.current.style.cursor = 'grabbing';
+        this.props.hightlight();
+
+        this.setState({
+            dragging: true,
+            rel: {
+                x: event.pageX - this.window.current.offsetLeft,
+                y: event.pageY - this.window.current.offsetTop
+            }
+        });
+    };
+
+    windowDrop = () => {
+        this.windowTitle.current.style.cursor = 'grab';
+        this.setState({ dragging: false });
+    };
+
+    clearResult = (event: any) => {
+        this.setState({
+            result: this.state.result.filter(
+                (item: string) => item === 'Request Sent... Awaiting Response')
+        });
+        event.preventDefault();
+    };
+
+    executeRequest = (event: any) => {
+        const { requestType, requestArgs } = this.props;
+        let windowResult: any = {
+            message: requestType.toLowerCase()
+        };
+        let requiredFields = true;
+
+        for (let i = 0; i < requestArgs.length; i++)
+            if (requestArgs[i][2])
+                if (
+                    requestArgs[i][1] &&
+                    !event.target[requestArgs[i][0]].value
+                ) {
+                    event.target[requestArgs[i][0]].style.border =
+                        'solid 0.0625rem rgb(225, 53, 57)';
+                    requiredFields = false;
+                } else {
+                    event.target[requestArgs[i][0]].style.border =
+                        'solid 0.0625rem rgb(31, 93, 117)';
+                    windowResult[requestArgs[i][0]] =
+                        event.target[requestArgs[i][0]].value;
+                }
+            else
+                windowResult[requestArgs[i][0]] =
+                    event.target[requestArgs[i][0]].checked;
+
+        if (requiredFields)
+            this.setState({
+                result: ['Request Sent... Awaiting Response', ...this.state.result]
+            }, () =>
+                window.eel.execute_eel(windowResult)((response: string) => {
+                    const result = this.state.result.reverse()
+                    let awaitResponseMessage = true;
+
+                    this.setState({
+                        result: result.map(
+                            (item: string) => {
+                                if (item === 'Request Sent... Awaiting Response')
+                                    if (awaitResponseMessage) {
+                                        awaitResponseMessage = false;
+                                        return response;
+                                    } else
+                                        return item;
+                                else
+                                    return item;
+                            }
+                        ).reverse()
+                    })
+                })
+            )
+
+        event.preventDefault();
+    };
+
+    updateCheckbox = (event: any) => {
+        if (event.target.previousSibling.hasAttribute('checked'))
+            event.target.previousSibling.removeAttribute('checked');
+        else event.target.previousSibling.setAttribute('checked', '');
+    };
+
+    fullscreenEvent = () => {
+        if (document.fullscreenElement) this.setState({ fullscreen: true });
+        else this.setState({ fullscreen: false });
+    };
+
+    enterFullscreen = () => this.window.current.requestFullscreen();
+
+    exitFullscreen = () => document.exitFullscreen();
+
+    render() {
+        const { pos, result, fullscreen } = this.state;
+        const {
+            requestType,
+            requestArgs,
+            hightlight,
+            toggle,
+            destroy
+        } = this.props;
+
+        return (
+            <WindowData
+                ref={this.window}
+                style={{
+                    left: `${pos.x}px`,
+                    top: `${pos.y}px`
+                }}
+            >
+                <WindowTopBar>
+                    <WindowTopBarTitle
+                        title={`${requestType} Request / Response Window`}
+                        onMouseDown={this.windowGrab}
+                        ref={this.windowTitle}
+                    >
+                        {requestType}
+                    </WindowTopBarTitle>
+                    <WindowTopBarAction>
+                        {fullscreen ? (
+                            <FaWindowMinimize
+                                onClick={this.exitFullscreen}
+                                size="1rem"
+                            />
+                        ) : (
+                                <FaWindowMaximize
+                                    onClick={this.enterFullscreen}
+                                    size="1rem"
+                                />
+                            )}{' '}
+                        <FaMinusSquare onClick={toggle} size="1rem" />{' '}
+                        <FaWindowClose onClick={destroy} size="1rem" />
+                    </WindowTopBarAction>
+                </WindowTopBar>
+                <WindowContent onMouseDown={hightlight}>
+                    <WindowResult ref={this.windowResult}>
+                        {result.length > 0 ? (
+                            result.map((response: any, index: number) => (
+                                <Fragment key={index}>
+                                    {response ? (
+                                        response.html ? (
+                                            <div
+                                                dangerouslySetInnerHTML={{
+                                                    __html: response.message
+                                                        ? response.message
+                                                        : 'Empty Response'
+                                                }}
+                                            ></div>
+                                        ) : (
+                                                <div>{response}</div>
+                                            )
+                                    ) : (
+                                            <div>Empty Response</div>
+                                        )}
+                                </Fragment>
+                            ))
+                        ) : (
+                                <div>No Responses Present</div>
+                            )}
+                    </WindowResult>
+                    {requestArgs.length > 0 ? (
+                        <WindowForm
+                            onSubmit={this.executeRequest}
+                            ref={this.windowForm}
+                        >
+                            {requestArgs.map((
+                                [name, required, response]: [string, boolean, boolean],
+                                index: number
+                            ) =>
+                                response ? (
+                                    <WindowInputGroup key={index}>
+                                        <WindowLabel>
+                                            {required
+                                                ? 'Required'
+                                                : 'Optional'}
+                                        </WindowLabel>
+
+                                        <WindowInput
+                                            type="search"
+                                            name={name}
+                                            placeholder={name}
+                                        />
+                                    </WindowInputGroup>
+                                ) : (
+                                        <WindowInputGroup key={index}>
+                                            <WindowLabel>{name}</WindowLabel>
+                                            <WindowCheckbox>
+                                                <input
+                                                    type="checkbox"
+                                                    name={name}
+                                                />
+                                                <label
+                                                    onClick={
+                                                        this.updateCheckbox
+                                                    }
+                                                ></label>
+                                            </WindowCheckbox>
+                                        </WindowInputGroup>
+                                    )
+                            )}
+                            <WindowFormSubmit>
+                                <WindowFormButton>
+                                    Execute Request
+                                </WindowFormButton>
+                                <WindowFormClear onClick={this.clearResult}>
+                                    <FaRedo />
+                                </WindowFormClear>
+                            </WindowFormSubmit>
+                        </WindowForm>
+                    ) : null}
+                </WindowContent>
+            </WindowData>
+        );
+    }
+}
+
+export default Window;
diff --git a/server/web/src/design/GlobalStyle.tsx b/server/web/src/design/GlobalStyle.tsx
new file mode 100644
index 0000000..25c47bf
--- /dev/null
+++ b/server/web/src/design/GlobalStyle.tsx
@@ -0,0 +1,52 @@
+import { createGlobalStyle } from 'styled-components';
+
+// NOTE : rem unit is used instead of px. But
+// the UI is still dependant on px units, mostly
+// because of some javascript calculations
+export const GlobalStyle = createGlobalStyle`
+    ::-webkit-scrollbar {
+        height: 0.2rem;
+        width: 0.4rem;
+    }
+
+    ::-webkit-scrollbar-track {
+        background-color: rgb(5, 32, 58);
+    }
+
+    ::-webkit-scrollbar-thumb {
+        background-color: rgb(31, 113, 145);
+    }
+
+    ::placeholder {
+        text-transform: capitalize;
+        color: rgb(204, 204, 204);
+        opacity: 1;
+    }
+
+    * {
+        box-sizing: border-box;
+        outline: none;
+    }
+
+    body {
+        font-family: Arial, Helvetica, sans-serif;
+        background-color: rgb(5, 32, 58);
+        color: rgb(255, 255, 255);
+        font-size: 0.7rem;
+        font-weight: 100;
+        margin: 0;
+    }
+
+    button, svg {
+        cursor: pointer;
+    }
+
+    button {
+        transition: 150ms;
+
+        :active {
+            transform: translateY(0.125rem);
+            transition: 150ms;
+        }
+    }
+`;
diff --git a/server/web/src/design/components/Alert.design.tsx b/server/web/src/design/components/Alert.design.tsx
new file mode 100644
index 0000000..ff634bf
--- /dev/null
+++ b/server/web/src/design/components/Alert.design.tsx
@@ -0,0 +1,48 @@
+import { IAlertButton } from '../../interfaces/design/AlertDesign.interface';
+import styled from 'styled-components';
+
+const calcBgColor = (color: string) => {
+    switch (color) {
+        case 'SUCCESS':
+            return 'rgb(24, 79, 59)';
+        case 'DANGER':
+            return 'rgb(175, 45, 45)';
+        case 'WARNING':
+            return 'rgb(175, 121, 21)';
+        case 'INFO':
+            return 'rgb(23, 52, 102)';
+    }
+};
+
+export const AlertButton = styled('div') <IAlertButton>`
+    background-color: ${(props) => calcBgColor(props.bgColor)};
+    border: solid thin rgb(255, 255, 255);
+    grid-template-columns: 1fr auto;
+    color: rgb(255, 255, 255);
+    align-items: center;
+    min-height: 2.5rem;
+    text-align: center;
+    font-size: 0.8rem;
+    width: 17.5rem;
+    display: grid;
+
+    @media (min-width: 768px) {
+        width: 22.5rem;
+    }
+`;
+
+export const AlertButtonCross = styled('span')`
+    border-left: solid thin rgb(255, 255, 255);
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    padding: 0.5rem 1rem;
+    align-items: center;
+    font-size: 1.25rem;
+    user-select: none;
+    cursor: pointer;
+    display: grid;
+    height: 100%;
+`;
diff --git a/server/web/src/design/components/Card.design.tsx b/server/web/src/design/components/Card.design.tsx
new file mode 100644
index 0000000..2eb67a3
--- /dev/null
+++ b/server/web/src/design/components/Card.design.tsx
@@ -0,0 +1,60 @@
+import styled from 'styled-components';
+
+export const CardContainer = styled('div')`
+    border: solid thin rgb(31, 113, 145);
+    background-color: rgb(5, 32, 58);
+    // CONSTANT : left & right borders + left & right margin
+    width: calc(100% - 1.125rem);
+    color: rgb(255, 255, 255);
+    border-radius: 0.5rem;
+    display: inline-block;
+    margin: 0.5rem;
+    
+    @media (min-width: 992px) {
+        width: 46.5%;
+    }
+`;
+
+export const CardHeader = styled('div')`
+    border-bottom: solid thin rgb(31, 113, 145);
+    padding: 0.5rem 0.5rem 0.625rem 0.5rem;
+    border-top-right-radius: 0.5rem;
+    border-top-left-radius: 0.5rem;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 0.9rem;
+    text-align: left;
+    overflow: hidden;
+`;
+
+export const CardFooter = styled('div')`
+    border-top: solid thin rgb(31, 113, 145);
+    border-bottom-right-radius: 0.5rem;
+    border-bottom-left-radius: 0.5rem;
+    grid-template-columns: 1fr 1fr;
+    display: grid;
+`;
+
+export const CardFooterItem = styled('div')`
+    border-right: solid thin rgb(31, 113, 145);
+    justify-content: center;
+    align-items: center;
+    font-size: 0.65rem;
+    padding: 0.5rem 0;
+    cursor: pointer;
+    display: grid;
+
+    :hover {
+        background-color: rgb(0, 55, 117);
+        transition: 250ms;
+    }
+
+    :first-child {
+        border-bottom-left-radius: 0.5rem;
+    }
+
+    :last-child {
+        border-bottom-right-radius: 0.5rem;
+        border-right: none;
+    }
+`;
diff --git a/server/web/src/design/components/Footer.design.tsx b/server/web/src/design/components/Footer.design.tsx
new file mode 100644
index 0000000..a5cf586
--- /dev/null
+++ b/server/web/src/design/components/Footer.design.tsx
@@ -0,0 +1,132 @@
+import { IFooterDropdownContent } from '../../interfaces/design/FooterDesign.interface';
+import styled from 'styled-components';
+
+export const FooterDropdown = styled('div')`
+    border-top: solid thin rgb(31, 93, 117);
+    background-color: rgb(5, 32, 58);
+    width: calc(100% - 1.2rem);
+    text-align: center;
+    position: fixed;
+    bottom: 4.45rem;
+    left: 0;
+`;
+
+export const FooterDropdownToggle = styled('div')`
+    background-color: rgb(5, 32, 58);
+    color: rgb(0, 255, 255);
+    padding: 0.25rem 0;
+    cursor: pointer;
+`;
+
+export const FooterWindowManager = styled('div')`
+    border-top: solid thin rgb(31, 93, 117);
+    background-color: rgb(5, 32, 58);
+    width: calc(100% - 1.2rem);
+    color: rgb(255, 255, 255);
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+    white-space: nowrap;
+    text-align: center;
+    overflow-x: scroll;
+    overflow-y: hidden;
+    position: fixed;
+    height: 3.25rem;
+    bottom: 1.2rem;
+    left: 0;
+`;
+
+export const FooterWindowButton = styled('button')`
+    border: solid thin rgb(31, 93, 117);
+    background-color: rgb(5, 32, 58);
+    margin: 0.578125rem 0.15rem;
+    color: rgb(255, 255, 255);
+    padding: 0.5rem 1.5rem;
+    border-radius: 5rem;
+    transition: 250ms;
+`;
+
+export const FooterWindowClear = styled('button')`
+    border: solid thin rgb(225, 53, 57);
+    background-color: rgb(5, 32, 58);
+    margin: 0.578125rem 0.15rem;
+    color: rgb(255, 255, 255);
+    padding: 0.5rem 1.5rem;
+    border-radius: 5rem;
+    transition: 250ms;
+`;
+
+export const FooterBlock = styled('div')`
+    background-color: rgb(5, 32, 58);
+    color: rgb(255, 255, 255);
+    margin: 1.1875rem 0;
+`;
+
+export const FooterDropdownContent = styled('div') <IFooterDropdownContent>`
+    background-color: rgb(5, 32, 58);
+    overflow-y: scroll;
+    transition: 250ms;
+    padding: 0;
+    height: 0;
+
+    ${({ active }: any) =>
+        active &&
+        `
+        border-top: solid thin rgb(31, 93, 117);
+        padding: 0.5rem 0;
+        transition: 250ms;
+        height: 9.2rem;
+
+        @media (min-width: 1280px) {
+            height: 7.2rem;
+        }
+
+        @media (min-width: 2000px) {
+            height: 5.2rem;
+        }
+    `}
+`;
+
+export const FooterNameSpaceButton = styled('button')`
+    border: solid thin rgb(225, 53, 57);
+    background-color: rgb(225, 53, 57);
+    color: rgb(255, 255, 255);
+    padding: 0.4rem 1rem;
+    border-radius: 5rem;
+    transition: none;
+    cursor: text;
+    
+    :active {
+        transform: none;
+        transition: none;
+    }
+`;
+
+export const FooterDropdownButton = styled('button')`
+    background-color: rgb(31, 93, 117);
+    color: rgb(255, 255, 255);
+    border: rgb(31, 93, 117);
+    padding: 0.4rem 1rem;
+    border-radius: 5rem;
+    margin: 0.15rem;
+`;
+
+export const FooterMenu = styled('div')`
+    border-top: solid thin rgb(31, 93, 117);
+    background-color: rgb(5, 32, 58);
+    width: calc(100% - 1.2rem);
+    color: rgb(255, 255, 255);
+    position: fixed;
+    height: 1.2rem;
+    bottom: 0;
+    left: 0;
+`;
+
+export const FooterParagraph = styled('p')`
+    text-overflow: ellipsis;
+    padding-top: 0.15rem;
+    white-space: nowrap;
+    font-size: 0.75rem;
+    overflow: hidden;
+    height: 1.2rem;
+    margin-top: 0;
+`;
diff --git a/server/web/src/design/components/Select.design.tsx b/server/web/src/design/components/Select.design.tsx
new file mode 100644
index 0000000..92e6719
--- /dev/null
+++ b/server/web/src/design/components/Select.design.tsx
@@ -0,0 +1,37 @@
+import styled from 'styled-components';
+
+export const SelectContainer = styled('div')`
+    position: fixed;
+`;
+
+export const SelectRow = styled('div')`
+    border-bottom: solid thin rgb(31, 113, 145);
+    border-right: solid thin rgb(31, 113, 145);
+    border-left: solid thin rgb(31, 113, 145);
+    background-color: rgb(5, 32, 58);
+    font-size: 0.8rem;
+    transition: 250ms;
+    padding: 0.4rem;
+    cursor: pointer;
+    width: 8.5rem;
+
+    :hover {
+        background-color: rgb(0, 55, 117);
+        transition: 250ms;
+    }
+
+    :first-child {
+        border-top: solid thin rgb(31, 113, 145);
+        border-top-right-radius: 0.25rem;
+        border-top-left-radius: 0.25rem;
+    }
+
+    :last-child {
+        border-bottom-right-radius: 0.25rem;
+        border-bottom-left-radius: 0.25rem;
+    }
+
+    > svg {
+        vertical-align: text-bottom;
+    }
+`;
diff --git a/server/web/src/design/components/Server.design.tsx b/server/web/src/design/components/Server.design.tsx
new file mode 100644
index 0000000..b6296b6
--- /dev/null
+++ b/server/web/src/design/components/Server.design.tsx
@@ -0,0 +1,120 @@
+import styled, { css } from 'styled-components';
+import {
+    IServerTableRow,
+    IServerTableBar
+} from '../../interfaces/design/ServerDesign.interface';
+
+const tableColumn = css`
+    border: solid thin rgb(31, 113, 145);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 3.1rem;
+    border-top: none;
+    overflow: hidden;
+    padding: 0.3rem;
+`;
+
+const tableResponsive = css`
+    @media (max-width: 767px) {
+        display: block;
+    }
+`;
+
+export const ServerTable = styled('table')`
+    width: calc(100% - 1.125rem);
+    color: rgb(255, 255, 255);
+    border-collapse: collapse;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    margin-bottom: 5.9rem;
+    -ms-user-select: none;
+    text-align: center;
+    user-select: none;
+    ${tableResponsive}
+`;
+
+export const ServerTableHead = styled('thead')`
+    background-color: rgb(31, 93, 117);
+
+    @media (max-width: 767px) {
+        display: none;
+    }
+`;
+
+export const ServerTableBody = styled('tbody')`
+    background-color: rgb(5, 32, 58);
+    ${tableResponsive}
+
+    > tr:first-child {
+        padding-top: 1.5rem;
+    }
+
+    > tr:last-child {
+        padding-bottom: 1.5rem;
+    }
+`;
+
+export const ServerTableRow = styled('tr') <IServerTableRow>`
+    ${(props) => props.activeSession && `color: ${props.activeSession};`}
+    padding: 0.75rem 1.5rem;
+    ${tableResponsive}
+
+    > td:first-child {
+        border-top: solid thin rgb(31, 113, 145);
+    }
+`;
+
+export const ServerTableHeader = styled('th')`
+    ${tableColumn}
+`;
+
+export const ServerTableData = styled('td')`
+    ${tableColumn}
+
+    @media (max-width: 767px) {
+        min-height: 1.4125rem;
+        padding-right: 1rem;
+        position: relative;
+        text-align: right;
+        padding-left: 45%;
+        overflow: hidden;
+        max-width: 100%;
+        display: block;
+
+        &:before {
+            content: attr(data-label);
+            position: absolute;
+            padding-left: 1rem;
+            text-align: left;
+            width: 55%;
+            left: 0;
+        }
+    }
+`;
+
+export const ServerTableImage = styled('img')`
+    vertical-align: text-bottom;
+    margin-right: 0.15rem;
+    height: 0.90625rem;
+    width: 0.90625rem;
+`;
+
+export const ServerTableBarBg = styled('div')`
+    background-color: rgb(31, 93, 117);
+`;
+
+export const ServerTableBar = styled('div') <IServerTableBar>`
+    ${(props) => props.width && `width: ${props.width}%;`}
+    background-color: rgb(24, 79, 59);
+    margin: 0.0625rem 0;
+    height: 0.375rem;
+`;
+
+export const ServerBlock = styled('div')`
+    background-color: rgb(31, 93, 117);
+    width: calc(100% - 1.2rem);
+    color: rgb(255, 255, 255);
+    text-align: center;
+    padding: 0.8rem 0;
+`;
diff --git a/server/web/src/design/components/Sidebar.design.tsx b/server/web/src/design/components/Sidebar.design.tsx
new file mode 100644
index 0000000..4496e79
--- /dev/null
+++ b/server/web/src/design/components/Sidebar.design.tsx
@@ -0,0 +1,108 @@
+import { ISidebarSlide } from '../../interfaces/design/SidebarDesign.interface';
+import styled from 'styled-components';
+
+export const SidebarDropdown = styled('div')`
+    background-color: rgb(5, 32, 58);
+    grid-template-columns: 1fr auto;
+    color: rgb(0, 255, 255);
+    position: fixed;
+    display: grid;
+    height: 100%;
+    z-index: 999;
+    right: 0;
+    top: 0;
+`;
+
+export const SidebarDropdownButton = styled('div')`
+    border-left: solid thin rgb(31, 113, 145);
+    padding: 0 0.25rem 0 0.2rem;
+    color: rgb(0, 255, 255);
+    align-items: center;
+    cursor: pointer;
+    width: 1.2rem;
+    display: grid;
+    height: 100vh;
+    z-index: 999;
+`;
+
+export const SidebarDropdownContent = styled('div') <ISidebarSlide>`
+    overflow-x: hidden;
+    text-align: center;
+    transition: 250ms;
+    overflow-y: auto;
+    opacity: 0;
+    padding: 0;
+    width: 0;
+
+    ${({ active }: any) =>
+        active &&
+        `
+        border-left: solid thin rgb(31, 113, 145);
+        width: calc(100vw - 1.2rem);
+        opacity: 1;
+
+        @media (min-width: 576px) {
+            width: 65vw;
+        }
+    `}
+`;
+
+export const SidebarStreamContent = styled('div')`
+    @media (min-width: 992px) {
+        padding: 0.5rem 0;
+    }
+
+    @media (min-width: 1200px) {
+        padding: 1rem 0;
+    }
+
+    @media (min-width: 1600px) {
+        padding: 1.5rem 0;
+    }
+`;
+
+export const SidebarStream = styled('div')`
+    border-bottom: solid thin rgb(31, 113, 145);
+    border-top: solid thin rgb(31, 113, 145);
+    background-color: rgb(5, 32, 58);
+    color: rgb(255, 255, 255);
+    text-align: center;
+    padding: 0.8rem 0;
+`;
+
+export const SidebarStreamSection = styled('div')`
+    grid-template-columns: 1fr auto;
+    display: grid;
+`;
+
+export const SidebarStreamInput = styled('input')`
+    padding: 0.45rem 0.45rem 0.45rem 0.6rem;
+    border: solid thin rgb(31, 93, 117);
+    background-color: rgb(5, 32, 58);
+    width: calc(100% - 0.8rem);
+    color: rgb(255, 255, 255);
+    border-radius: 5rem;
+    font-size: 0.8rem;
+    margin: 0.4rem;
+`;
+
+export const SidebarStreamButton = styled('button')`
+    border: solid thin rgb(31, 93, 117);
+    background-color: rgb(5, 32, 58);
+    margin: 0.4rem 0.4rem 0.4rem 0;
+    color: rgb(255, 255, 255);
+    padding: 0.5rem 2rem;
+    border-radius: 5rem;
+    transition: 250ms;
+
+    @media (min-width: 576px) {
+        padding: 0.5rem 4rem;
+    } 
+`;
+
+export const SidebarBlock = styled('div')`
+    background-color: rgb(31, 93, 117);
+    color: rgb(255, 255, 255);
+    text-align: center;
+    padding: 0.8rem 0;
+`;
diff --git a/server/web/src/design/components/Window.design.tsx b/server/web/src/design/components/Window.design.tsx
new file mode 100644
index 0000000..1daac95
--- /dev/null
+++ b/server/web/src/design/components/Window.design.tsx
@@ -0,0 +1,209 @@
+import styled from 'styled-components';
+
+export const WindowData = styled('div')`
+    border: solid 0.0625rem rgb(178, 178, 178);
+    background-color: rgb(5, 32, 58);
+    color: rgb(255, 255, 255);
+    min-height: 2.1875rem;
+    min-width: 18rem;
+    overflow: hidden;
+    position: fixed;
+    resize: both;
+    height: 55vh;
+    width: 40vw;
+
+    &:after {
+        cursor: nwse-resize;
+        position: absolute;
+        display: block;
+        height: 1rem;
+        width: 1rem;
+        content: '';
+        bottom: 0;
+        right: 0;
+    }
+`;
+
+export const WindowTopBar = styled('div')`
+    border-bottom: solid 0.0625rem rgb(31, 93, 117);
+    background-color: rgb(225, 53, 57);
+    grid-template-columns: 1fr auto;
+    align-items: center;
+    text-align: right;
+    display: grid;
+`;
+
+export const WindowTopBarTitle = styled('div')`
+    text-overflow: ellipsis;
+    text-align: left;
+    overflow: hidden;
+    padding: 0.5rem;
+    cursor: grab;
+`;
+
+export const WindowTopBarAction = styled('div')`
+    padding: 0.5rem;
+`;
+
+export const WindowInputGroup = styled('div')`
+    padding: 0 0.75rem 1rem 0.75rem;
+    grid-template-columns: auto 1fr;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    grid-gap: 0.5rem;
+    display: grid;
+
+    :first-child {
+        padding-top: 0.75rem;
+    }
+`;
+
+export const WindowContent = styled('div')`
+    height: calc(100% - 2.1875rem);
+    overflow-x: auto;
+`;
+
+export const WindowForm = styled('form')`
+    border-bottom: solid 0.0625rem rgb(31, 93, 117);
+    border-right: solid 0.0625rem rgb(31, 93, 117);
+    border-left: solid 0.0625rem rgb(31, 93, 117);
+    margin: 0 0.75rem 0.75rem 0.75rem;
+    width: calc(100% - 1.5rem);
+    text-align: left;
+`;
+
+export const WindowLabel = styled('label')`
+    text-transform: capitalize;
+    font-size: 0.8rem;
+`;
+
+export const WindowInput = styled('input')`
+    border: solid 0.0625rem rgb(31, 93, 117);
+    padding: 0.45rem 0.45rem 0.45rem 0.6rem;
+    background-color: rgb(5, 32, 58);
+    color: rgb(255, 255, 255);
+    border-radius: 5rem;
+    font-size: 0.8rem;
+`;
+
+export const WindowCheckbox = styled('div')`
+    border: solid 0.0625rem rgb(31, 93, 117);
+    background-color: rgb(5, 32, 58);
+    border-radius: 3.125rem;
+    position: relative;
+    width: 4.6875rem;
+    height: 1.5rem;
+    z-index: 0;
+
+    &:before {
+        color: rgb(255, 255, 255);
+        position: absolute;
+        font-weight: bold;
+        right: 0.625rem;
+        content: 'OFF';
+        top: 0.25rem;
+    }
+
+    &:after {
+        color: rgb(255, 255, 255);
+        position: absolute;
+        font-weight: bold;
+        left: 0.625rem;
+        content: 'ON';
+        top: 0.25rem;
+        z-index: 0;
+    }
+
+    label {
+        box-shadow: 0 0.125rem 0.5rem rgb(31, 93, 117);
+        background-color: rgb(255, 255, 255);
+        border-radius: 3.125rem;
+        position: absolute;
+        transition: 250ms;
+        cursor: pointer;
+        width: 1.875rem;
+        display: block;
+        top: 0.1875rem;
+        left: 0.25rem;
+        height: 1rem;
+        z-index: 1;
+    }
+
+    input[type="checkbox"] {
+        visibility: hidden;
+
+        &:checked + label {
+            left: 2.4375rem;
+        }
+    }
+`;
+
+export const WindowFormSubmit = styled('div')`
+    padding: 0.25rem 0.75rem 0.75rem 0.75rem;
+`;
+
+export const WindowFormButton = styled('button')`
+    border: solid 0.0625rem rgb(31, 93, 117);
+    background-color: rgb(5, 32, 58);
+    color: rgb(255, 255, 255);
+    padding: 0.5rem 0.25rem;
+    border-radius: 5rem;
+    width: 10rem;
+`;
+
+export const WindowFormClear = styled('button')`
+    border: solid 0.0625rem rgb(31, 93, 117);
+    padding: 0.45rem 0.4rem 0.55rem 0.4rem;
+    background-color: rgb(5, 32, 58);
+    color: rgb(255, 255, 255);
+    margin-left: 0.5rem;
+    border-radius: 5rem;
+    width: 2rem;
+
+    > svg {
+        vertical-align: bottom;
+    }
+`;
+
+export const WindowResult = styled('div')`
+    font-family: 'Courier New', Courier, monospace;
+    border: solid 0.0625rem rgb(31, 93, 117);
+    padding: 0.75rem 0.75rem 0 0.75rem;
+    margin: 0.75rem 0.75rem 0 0.75rem;
+    line-height: 1.2rem;
+    min-height: 7.5rem;
+    font-size: 0.8rem;
+    text-align: left;
+    white-space: pre;
+    overflow: auto;
+
+    ::-webkit-scrollbar {
+        height: 0.3rem;
+        width: 0.3rem;
+    }
+
+    > div {
+        border: solid 0.0625rem rgb(31, 113, 145);
+        background-color: rgb(5, 32, 58);
+        margin-bottom: 0.75rem;
+        padding: 0.25rem;
+        display: table;
+        width: 100%;
+    }
+
+    table {
+        border-collapse: collapse;
+    }
+
+    td,
+    th {
+        border: solid 0.0625rem rgb(31, 113, 145);
+        background-color: rgb(5, 32, 58);
+        padding: 0.25rem 0.5rem;
+    }
+
+    th {
+        background-color: rgb(31, 93, 117);
+    }
+`;
diff --git a/server/web/src/index.tsx b/server/web/src/index.tsx
new file mode 100644
index 0000000..810a349
--- /dev/null
+++ b/server/web/src/index.tsx
@@ -0,0 +1,56 @@
+import { transitions, positions, Provider as AlertProvider } from 'react-alert';
+import { GlobalStyle } from './design/GlobalStyle';
+import { AlertTemplate } from './components/Alert';
+import { Provider } from 'react-redux';
+import { store } from './redux/store';
+import ReactDOM from 'react-dom';
+import React from 'react';
+import App from './App';
+
+const alertOptions = {
+    // CONSTANT : alert parameters
+    position: positions.TOP_LEFT,
+    transition: transitions.FADE,
+    timeout: 3000
+};
+
+declare global {
+    interface Window {
+        showAlert: any;
+        eel: any;
+    }
+}
+
+window.eel.set_host(`ws://${window.location.host}`);
+window.oncontextmenu = () => false;
+
+window.addEventListener('load', () => {
+    window.addEventListener('error', (event: any) =>
+        console.log(`Window Error: ${event.message}`));
+
+    window.eel._websocket.addEventListener('open', () =>
+        console.log('Host Websocket Connected!'));
+
+    window.eel._websocket.addEventListener('error', (event: any) => {
+        console.log(`Websocket Error: ${event.message}`);
+        window.alert('Host Connection Error. Closing!');
+        window.close();
+    });
+
+    window.eel._websocket.addEventListener('close', () => {
+        window.alert('Host Disconnected. Closing!');
+        window.close();
+    });
+});
+
+ReactDOM.render(
+    <React.StrictMode>
+        <Provider store={store}>
+            <GlobalStyle />
+            <AlertProvider template={AlertTemplate} {...alertOptions}>
+                <App />
+            </AlertProvider>
+        </Provider>
+    </React.StrictMode>,
+    document.getElementById('root')
+);
diff --git a/server/web/src/interfaces/Activity.interface.ts b/server/web/src/interfaces/Activity.interface.ts
new file mode 100644
index 0000000..cb9cb77
--- /dev/null
+++ b/server/web/src/interfaces/Activity.interface.ts
@@ -0,0 +1,6 @@
+export interface IActivity {
+    resource_usage: string;
+    active_window: string;
+    idle_time: string;
+    unique_id: string;
+}
diff --git a/server/web/src/interfaces/Alert.interface.ts b/server/web/src/interfaces/Alert.interface.ts
new file mode 100644
index 0000000..0d58510
--- /dev/null
+++ b/server/web/src/interfaces/Alert.interface.ts
@@ -0,0 +1,4 @@
+export interface IAlert {
+    message: string;
+    type: string;
+}
diff --git a/server/web/src/interfaces/AllReducer.interface.ts b/server/web/src/interfaces/AllReducer.interface.ts
new file mode 100644
index 0000000..f70cc4a
--- /dev/null
+++ b/server/web/src/interfaces/AllReducer.interface.ts
@@ -0,0 +1,8 @@
+import { IClient } from './Client.interface';
+
+export interface IAllReducer {
+    clients: Map<string, IClient>;
+    session: Set<string>;
+    sessionLoad?: any;
+    clientsLoad?: any;
+}
diff --git a/server/web/src/interfaces/Client.interface.ts b/server/web/src/interfaces/Client.interface.ts
new file mode 100644
index 0000000..cb7f036
--- /dev/null
+++ b/server/web/src/interfaces/Client.interface.ts
@@ -0,0 +1,11 @@
+export interface IClient {
+    // CONSTANT : does not including the other
+    // client categories not explicitly accessed
+    resource_usage: string;
+    active_window: string;
+    country_code: string;
+    connect_ip: string;
+    idle_time: string;
+    unique_id: string;
+    country: string;
+}
diff --git a/server/web/src/interfaces/Stream.interface.ts b/server/web/src/interfaces/Stream.interface.ts
new file mode 100644
index 0000000..45b5139
--- /dev/null
+++ b/server/web/src/interfaces/Stream.interface.ts
@@ -0,0 +1,4 @@
+export interface IStream {
+    source: string;
+    title: string;
+}
diff --git a/server/web/src/interfaces/components/Card.interface.ts b/server/web/src/interfaces/components/Card.interface.ts
new file mode 100644
index 0000000..911f1ee
--- /dev/null
+++ b/server/web/src/interfaces/components/Card.interface.ts
@@ -0,0 +1,7 @@
+export interface IProps {
+    removeStream: any;
+    source: string;
+    title: string;
+}
+
+export interface IState {}
diff --git a/server/web/src/interfaces/components/Footer.interface.ts b/server/web/src/interfaces/components/Footer.interface.ts
new file mode 100644
index 0000000..20d9956
--- /dev/null
+++ b/server/web/src/interfaces/components/Footer.interface.ts
@@ -0,0 +1,8 @@
+export interface IProps {}
+
+export interface IState {
+    showHelp: boolean;
+    address: string;
+    windows: any;
+    help: object;
+}
diff --git a/server/web/src/interfaces/components/Select.interface.ts b/server/web/src/interfaces/components/Select.interface.ts
new file mode 100644
index 0000000..994a5a4
--- /dev/null
+++ b/server/web/src/interfaces/components/Select.interface.ts
@@ -0,0 +1,12 @@
+export interface ISelect {
+    blacklistRemove?: any;
+    sessionRemove?: any;
+    blacklistAdd?: any;
+    clientRemove?: any;
+    sessionAdd?: any;
+    left?: number;
+    show: boolean;
+    top?: number;
+}
+
+export interface IState {}
diff --git a/server/web/src/interfaces/components/Server.interface.ts b/server/web/src/interfaces/components/Server.interface.ts
new file mode 100644
index 0000000..67502c9
--- /dev/null
+++ b/server/web/src/interfaces/components/Server.interface.ts
@@ -0,0 +1,15 @@
+import { IClient } from '../Client.interface';
+import { ISelect } from './Select.interface';
+
+export interface IProps {
+    clients: Map<string, IClient>;
+    session: Set<string>;
+    clientsLoad?: any;
+    sessionLoad?: any;
+}
+
+export interface IState {
+    clients: Map<string, IClient>;
+    session: Set<string>;
+    selectData: ISelect;
+}
diff --git a/server/web/src/interfaces/components/Sidebar.interface.ts b/server/web/src/interfaces/components/Sidebar.interface.ts
new file mode 100644
index 0000000..d270713
--- /dev/null
+++ b/server/web/src/interfaces/components/Sidebar.interface.ts
@@ -0,0 +1,8 @@
+import { IStream } from '../Stream.interface';
+
+export interface IProps {}
+
+export interface IState {
+    showContent: boolean;
+    streams: IStream[];
+}
diff --git a/server/web/src/interfaces/components/Window.interface.ts b/server/web/src/interfaces/components/Window.interface.ts
new file mode 100644
index 0000000..7bfe7db
--- /dev/null
+++ b/server/web/src/interfaces/components/Window.interface.ts
@@ -0,0 +1,22 @@
+interface IPos {
+    x: number;
+    y: number;
+}
+
+export interface IProps {
+    requestType: string;
+    requestArgs: any;
+    hightlight: any;
+    data?: string[];
+    destroy: any;
+    toggle: any;
+    pos: IPos;
+}
+
+export interface IState {
+    fullscreen: boolean;
+    dragging: boolean;
+    result: string[];
+    pos: IPos;
+    rel: any;
+}
diff --git a/server/web/src/interfaces/design/AlertDesign.interface.ts b/server/web/src/interfaces/design/AlertDesign.interface.ts
new file mode 100644
index 0000000..9ee6267
--- /dev/null
+++ b/server/web/src/interfaces/design/AlertDesign.interface.ts
@@ -0,0 +1,3 @@
+export interface IAlertButton {
+    bgColor: string;
+}
diff --git a/server/web/src/interfaces/design/FooterDesign.interface.ts b/server/web/src/interfaces/design/FooterDesign.interface.ts
new file mode 100644
index 0000000..84b4d00
--- /dev/null
+++ b/server/web/src/interfaces/design/FooterDesign.interface.ts
@@ -0,0 +1,3 @@
+export interface IFooterDropdownContent {
+    active: boolean;
+}
diff --git a/server/web/src/interfaces/design/ServerDesign.interface.ts b/server/web/src/interfaces/design/ServerDesign.interface.ts
new file mode 100644
index 0000000..07c750b
--- /dev/null
+++ b/server/web/src/interfaces/design/ServerDesign.interface.ts
@@ -0,0 +1,7 @@
+export interface IServerTableRow {
+    activeSession?: string;
+}
+
+export interface IServerTableBar {
+    width?: string;
+}
diff --git a/server/web/src/interfaces/design/SidebarDesign.interface.ts b/server/web/src/interfaces/design/SidebarDesign.interface.ts
new file mode 100644
index 0000000..eb0fe49
--- /dev/null
+++ b/server/web/src/interfaces/design/SidebarDesign.interface.ts
@@ -0,0 +1,3 @@
+export interface ISidebarSlide {
+    active: boolean;
+}
diff --git a/server/web/src/react-app-env.d.ts b/server/web/src/react-app-env.d.ts
new file mode 100644
index 0000000..6431bc5
--- /dev/null
+++ b/server/web/src/react-app-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="react-scripts" />
diff --git a/server/web/src/redux/actions.ts b/server/web/src/redux/actions.ts
new file mode 100644
index 0000000..887b808
--- /dev/null
+++ b/server/web/src/redux/actions.ts
@@ -0,0 +1,55 @@
+import { IActivity } from '../interfaces/Activity.interface';
+import { IClient } from '../interfaces/Client.interface';
+
+export type ClientsLoadType = { type: 'CLIENTS_LOAD'; payload: Map<string, IClient>; };
+export type SessionLoadType = { type: 'SESSION_LOAD'; payload: Set<string>; };
+export type SessionAllType = { type: 'SESSION_ALL'; };
+export type SessionCloseType = { type: 'SESSION_CLOSE'; };
+export type SessionAddType = { type: 'SESSION_ADD'; payload: string; };
+export type SessionRemoveType = { type: 'SESSION_REMOVE'; payload: string; };
+export type ClientAddType = { type: 'CLIENT_ADD'; payload: { unique_id: string, client: IClient; }; };
+export type ClientRemoveType = { type: 'CLIENT_REMOVE'; payload: string; };
+export type ActivityUpdateType = { type: 'ACTIVITY_UPDATE'; payload: IActivity; };
+
+export const clientsLoad = (clients: Map<string, IClient>): ClientsLoadType => ({
+    type: 'CLIENTS_LOAD',
+    payload: clients
+});
+
+export const sessionLoad = (session: Set<string>): SessionLoadType => ({
+    type: 'SESSION_LOAD',
+    payload: session
+});
+
+export const sessionAll = (): SessionAllType => ({
+    type: 'SESSION_ALL'
+});
+
+export const sessionClose = (): SessionCloseType => ({
+    type: 'SESSION_CLOSE'
+});
+
+export const sessionAdd = (unique_id: string): SessionAddType => ({
+    type: 'SESSION_ADD',
+    payload: unique_id
+});
+
+export const sessionRemove = (unique_id: string): SessionRemoveType => ({
+    type: 'SESSION_REMOVE',
+    payload: unique_id
+});
+
+export const clientAdd = (unique_id: string, client: IClient): ClientAddType => ({
+    type: 'CLIENT_ADD',
+    payload: { unique_id, client }
+});
+
+export const clientRemove = (unique_id: string): ClientRemoveType => ({
+    type: 'CLIENT_REMOVE',
+    payload: unique_id
+});
+
+export const activityUpdate = (activity: IActivity): ActivityUpdateType => ({
+    type: 'ACTIVITY_UPDATE',
+    payload: activity
+});
diff --git a/server/web/src/redux/allReducer.ts b/server/web/src/redux/allReducer.ts
new file mode 100644
index 0000000..fe72005
--- /dev/null
+++ b/server/web/src/redux/allReducer.ts
@@ -0,0 +1,83 @@
+import { IAllReducer } from '../interfaces/AllReducer.interface';
+import { IClient } from '../interfaces/Client.interface';
+import {
+    ClientsLoadType,
+    SessionLoadType,
+    SessionAllType,
+    SessionCloseType,
+    SessionAddType,
+    SessionRemoveType,
+    ClientAddType,
+    ClientRemoveType,
+    ActivityUpdateType
+} from './actions';
+
+const initialState: IAllReducer = {
+    clients: new Map<string, IClient>(),
+    session: new Set<string>()
+};
+
+export const allReducer = (
+    state: IAllReducer = initialState,
+    action:
+        | ClientsLoadType
+        | SessionLoadType
+        | SessionAllType
+        | SessionCloseType
+        | SessionAddType
+        | SessionRemoveType
+        | ClientAddType
+        | ClientRemoveType
+        | ActivityUpdateType
+) => {
+    switch (action.type) {
+        case 'CLIENTS_LOAD': {
+            return { ...state, clients: new Map<string, IClient>(action.payload) };
+        }
+        case 'SESSION_LOAD': {
+            return { ...state, session: new Set<string>(action.payload) };
+        }
+        case 'SESSION_ALL': {
+            return { ...state, session: new Set<string>(state.clients.keys()) };
+        }
+        case 'SESSION_CLOSE': {
+            return { ...state, session: new Set<string>() };
+        }
+        case 'SESSION_ADD': {
+            const updatedSession = new Set<string>(state.session);
+            updatedSession.add(action.payload);
+            return { ...state, session: updatedSession };
+        }
+        case 'SESSION_REMOVE': {
+            const updatedSession = new Set<string>(state.session);
+            updatedSession.delete(action.payload);
+            return { ...state, session: updatedSession };
+        }
+        case 'CLIENT_ADD': {
+            const updatedClients = new Map<string, IClient>(state.clients);
+            updatedClients.set(action.payload.unique_id, action.payload.client);
+            return { ...state, clients: updatedClients };
+        }
+        case 'CLIENT_REMOVE': {
+            const updatedClients = new Map<string, IClient>(state.clients);
+            updatedClients.delete(action.payload);
+            return { ...state, clients: updatedClients };
+        }
+        case 'ACTIVITY_UPDATE': {
+            const { unique_id, active_window, idle_time, resource_usage } = action.payload;
+            const updatedClients = new Map<string, IClient>(state.clients);
+            const client = updatedClients.get(unique_id);
+
+            if (client !== undefined) {
+                client.active_window = active_window;
+                client.idle_time = idle_time;
+                client.resource_usage = resource_usage;
+                updatedClients.set(unique_id, client);
+            }
+
+            return { ...state, clients: updatedClients };
+        }
+        default:
+            return state;
+    }
+};
diff --git a/server/web/src/redux/store.ts b/server/web/src/redux/store.ts
new file mode 100644
index 0000000..8321e8e
--- /dev/null
+++ b/server/web/src/redux/store.ts
@@ -0,0 +1,4 @@
+import { createStore } from 'redux';
+import { allReducer } from './allReducer';
+
+export const store = createStore(allReducer);