diff --git a/src/App.js b/src/App.js
new file mode 100644
index 00000000..045cb561
--- /dev/null
+++ b/src/App.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import { Routes, Route } from "react-router-dom";
+import Homepage from "./pages/Homepage";
+import Settings from "./pages/Settings";
+import PersonalizationSettings from "./components/PersonalizationSettings";
+import ApplicationSettings from "./components/ApplicationSettings";
+import BookmarkSettings from "./components/BookmarkSettings";
+import ThemesSettings from "./components/ThemesSettings";
+import ProviderSettings from "./components/ProviderSettings";
+
+function App() {
+    return (
+        <>
+            <Routes>
+                <Route path="/sui" element={<Homepage />} />
+                <Route path="/sui/settings" element={<Settings />}>
+                    <Route path="personalization" element={<PersonalizationSettings />}/>
+                    <Route path="apps" element={<ApplicationSettings />}/>
+                    <Route path="bookmarks" element={<BookmarkSettings />}/>
+                    <Route path="themes" element={<ThemesSettings />}/>
+                    <Route path="providers" element={<ProviderSettings />}/>
+                </Route>
+            </Routes>
+        </>
+    );
+}
+
+export default App;
\ No newline at end of file
diff --git a/src/assets/functions.js b/src/assets/functions.js
new file mode 100644
index 00000000..0d8935f2
--- /dev/null
+++ b/src/assets/functions.js
@@ -0,0 +1,300 @@
+import { setValueFromLocalStorage } from '../components/HideButton';
+
+export function date() {
+    let currentDate = new Date();
+    let dateOptions = {
+      weekday: "long",
+      year: "numeric",
+      month: "long",
+      day: "numeric"
+    };
+    let date = currentDate.toLocaleDateString("en-GB", dateOptions);
+    return date;
+}
+export function fixDigits(k) {
+    if (k < 10) {
+      return "0" + k;
+    }
+    else {
+      return k;
+    }
+}
+export function greet() {
+    let currentTime = new Date();
+    let greet = Math.floor(currentTime.getHours() / 6);
+    let easterEggChance = Math.floor(Math.random() * 100);
+    let greetings = require('../messages.json');
+    let timeBased = [];
+    let easterEggs = [];
+    for (var i = 0; i < greetings.messages.length; i++) {
+      if (greetings.messages[i].easteregg === "FALSE") {
+        timeBased = timeBased.concat(greetings.messages[i]);
+      } else {
+        easterEggs = easterEggs.concat(greetings.messages[i]);
+      }
+    }
+    if (easterEggChance > 10) {
+      return timeBased[greet].message;
+    } else {
+      let easterEggText = Math.floor(Math.random() * easterEggs.length);
+      return easterEggs[easterEggText].message;
+    }
+}
+export function getApps() {
+    let applications = require('../apps.json');
+    return applications;
+}
+export function getLinks() {
+    let links = require('../links.json');
+    return links;
+}
+export function getProviders() {
+    let providers = require('../providers.json');
+    return providers;
+}
+export function getThemes() {
+    let themes = require('../themes.json');
+    return themes;
+}
+export function getPersonalData() {
+    let personaldata = require('../personaldata.json');
+    return personaldata;
+}
+export function updateTheme(e) {
+    var themes = getThemes();
+    var themeName = e.target.innerHTML.toLowerCase();
+    var index = themes.themes.findIndex(function(item, i){
+      return item.name === themeName;
+    });
+    localStorage.setItem("image-background", themes.themes[index].imagebackground);
+    localStorage.setItem("color-background", themes.themes[index].colorbackground);
+    localStorage.setItem("color-search-background", themes.themes[index].colorserachbackground);
+    localStorage.setItem("color-text-pri",themes.themes[index].colortextpri);
+    localStorage.setItem("color-text-acc", themes.themes[index].colortextacc);
+    localStorage.setItem("color-border", themes.themes[index].colorborder);
+    
+    //document.documentElement.style.setProperty(prop, `var(--${themeName}${prop.substring(10)})`);
+    setTheme();
+}
+export function setTheme() {
+    if(localStorage.getItem("color-background") === null) {
+      localStorage.setItem("image-background", "");
+      localStorage.setItem("color-background", "#ffffff");
+      localStorage.setItem("color-search-background", "#22222220");
+      localStorage.setItem("color-text-pri", "#222222");
+      localStorage.setItem("color-text-acc", "#dddddd");
+      localStorage.setItem("color-border", "#dddddd");
+    } else {
+      setValueFromLocalStorage('image-background');
+      setValueFromLocalStorage('color-background');
+      setValueFromLocalStorage('color-search-background');
+      setValueFromLocalStorage('color-text-pri');
+      setValueFromLocalStorage('color-text-acc');
+      setValueFromLocalStorage('color-border');
+      setValueFromLocalStorage('content-display');
+    }
+    
+}
+export function handleKeyPress(e) {
+    var sindex = 0;
+    var cycle = false;
+    var key = e.keyCode || e.which;
+    var text = e.target.value.replaceAll("+", "%2B");
+    var option = text.substr(1, text.indexOf(' ') - 1) || text.substr(1);
+    var subtext = text.substr(2 + option.length);
+    if (key === 13) { // Search functions
+        search(text);
+    }
+    if (key === 9) { // Tab Completion Functions
+        e.preventDefault();
+        e.stopPropagation();
+        if (text[0] === ';') {
+            switch (option) {
+                case 't':
+                    var streamers = ['admiralbahroo', 'moonmoon_ow', 'witwix'];
+                    if (!subtext || cycle) {
+                        cycle = true;
+                        if (sindex > streamers.length - 1) sindex = 0;
+                        document.getElementById("keywords").value = ';t ' + streamers[sindex++];
+                        return;
+                    }
+                    for (var streamer of streamers) {
+                        if (subtext === streamer.substr(0, subtext.length)) {
+                            document.getElementById("keywords").value = ';t ' + streamer;
+                            return;
+                        }
+                    }
+                    break;
+                  default :
+                    break;
+            }
+        }
+    }
+    if(key === 32){ //Space to go to search
+    updateLabel(text);
+    }
+    sindex = 0;
+    cycle = false;
+    updateLabel(text);
+}
+export function updateLabel(text) {
+    var option = text.substr(1, text.indexOf(' ') - 1) || text.substr(1);
+    if (text[0] === '/') {
+  //        if (text.indexOf(' ') > -1) {
+            switch (option) {
+                case "am":
+                    document.getElementById("searchType").innerHTML = "Allmusic search";
+                    break;
+    case "d":
+        document.getElementById("searchType").innerHTML = "Duck Duck Go search";
+        break;
+    case "di":
+        document.getElementById("searchType").innerHTML = "Discogs search";
+        break;
+    case "i":
+        document.getElementById("searchType").innerHTML = "IMDB search";
+        break;
+    case "m":
+        document.getElementById("searchType").innerHTML = "TheMovieDB search";
+        break;
+    case "r":
+        document.getElementById("searchType").innerHTML = "Reddit search";
+        break;
+    case "q":
+        document.getElementById("searchType").innerHTML = "Qwant search";
+        break;
+    case "so":
+        document.getElementById("searchType").innerHTML = "Soundcloud search";
+        break;
+    case "s":
+        document.getElementById("searchType").innerHTML = "Spotify search";
+        break;
+    case "tv":
+        document.getElementById("searchType").innerHTML = "TheTVDB search";
+        break;
+    case "t":
+        document.getElementById("searchType").innerHTML = "Trakt search";
+        break;
+    case "y":
+        document.getElementById("searchType").innerHTML = "YouTube search";
+        break;
+    case "w":
+        document.getElementById("searchType").innerHTML = "Wikipedia search";
+        break;
+    case "p":
+        document.getElementById("searchType").innerHTML = "Plex search";
+        break;
+    case "rt":
+        document.getElementById("searchType").innerHTML = "Rotten Tomatoes search";
+        break;
+    default:
+        document.getElementById("searchType").innerHTML = "Invalid search";
+        break;
+            }
+  }else {
+    document.getElementById("searchType").innerHTML = "Google search";
+    }
+}
+export function search(text) {
+    if (text[0] === '/') {
+        if (text.indexOf(' ') > -1) {
+          let option = text.substr(1, text.indexOf(' ') - 1) || text.substr(1);
+          var subtext = text.substr(2 + option.length);
+            switch (option) {
+                case "am":
+                    window.location = "https://www.allmusic.com/search/all/" + subtext;
+                    break;
+                case "d":
+                    window.location = "https://duckduckgo.com/?q=" + subtext;
+                    break;
+                case "di":
+                    window.location = "https://www.discogs.com/search/?q=" + subtext;
+                    break;
+                case "i":
+                    window.location = "https://www.imdb.com/find?q=" + subtext;
+                    break;
+                case "m":
+                    window.location = "https://www.themoviedb.org/search?query=" + subtext;
+                    break;
+                case "r":
+                    window.location = "https://www.reddit.com/search?q=" + subtext;
+                    break;
+                case "q":
+                    window.location = "https://www.qwant.com/?q=" + subtext;
+                    break;
+                case "so":
+                    window.location = "https://soundcloud.com/search?q=" + subtext;
+                    break;
+                case "s":
+                    window.location = "https://open.spotify.com/search/results/" + subtext;
+                    break;
+                case "t":
+                    window.location = "https://trakt.tv/search?query=" + subtext;
+                    break;
+                case "tv":
+                    window.location = "https://www.thetvdb.com/search?query=" + subtext;
+                    break;
+                case "y":
+                    window.location = "https://www.youtube.com/results?search_query=" + subtext;
+                    break;
+                case "w":
+                    window.location = "https://en.wikipedia.org/w/index.php?search=" + subtext;
+                    break;
+                case "p":
+                    window.location = "https://app.plex.tv/desktop/#!/search?query=" + subtext;
+                    break;
+                case "rt":
+                    window.location = "https://www.rottentomatoes.com/search?search=" + subtext;
+                    break;
+                default :
+                    break;
+              }
+        } else {
+            let option = text.substr(1);
+            switch (option) {
+                case "d":
+                    window.location = "https://www.duckduckgo.com";
+                    break;
+                case "y":
+                    window.location = "https://www.youtube.com";
+                    break;
+                case "r":
+                    window.location = "https://reddit.com";
+                    break;
+                case "s":
+                    window.location = "https://open.spotify.com";
+                    break;
+                default :
+                    break;
+            }
+        }
+    } else if (validURL(text)) {
+        if (containsProtocol(text))
+            window.location = text;
+        else
+            window.location = "https://" + text;
+    } else {
+        window.location = "https://www.google.com/search?q=" + text;
+    }
+}
+export function validURL(str) {
+    var pattern = new RegExp('^(https?:\\/\\/)?' + // protocol
+        '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
+        '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
+        '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
+        '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
+        '(\\#[-a-z\\d_]*)?$', 'i'); // fragment locator
+    return !!pattern.test(str);
+}
+export function containsProtocol(str) {
+    var pattern = new RegExp('^(https?:\\/\\/){1}.*', 'i');
+    return !!pattern.test(str);
+}
+export function replaceAll(search, replacement) {
+    var target = this;
+    return target.split(search).join(replacement);
+};
+
+export default function main () {
+    return;
+}
\ No newline at end of file
diff --git a/src/components/AppItem.js b/src/components/AppItem.js
new file mode 100644
index 00000000..0857e0d6
--- /dev/null
+++ b/src/components/AppItem.js
@@ -0,0 +1,23 @@
+function AppItem(props) {
+  
+    let classNameType = props.NSFW + "-content";
+    let hrefUrl = "https://" + props.url;
+    let iconName = "mdi-" + props.icon;
+    return (
+      <div className={classNameType}>
+        <a href={hrefUrl}>
+          <div className="apps_item">
+            <div className="apps_icon">
+              <span className="iconify icon" data-icon={iconName}></span>
+            </div>
+            <div className="apps_text">
+              <span id="app-name">{props.name}</span>
+              <span id="app-address">{props.url}</span>
+            </div>
+          </div>
+        </a>
+      </div>
+    );
+}
+
+export default AppItem;
\ No newline at end of file
diff --git a/src/components/ApplicationDetails.js b/src/components/ApplicationDetails.js
new file mode 100644
index 00000000..ad58e55a
--- /dev/null
+++ b/src/components/ApplicationDetails.js
@@ -0,0 +1,27 @@
+function ApplicationDetails(props) {
+  
+  var nsfwChecked;
+  if(props.NSFW === "NSFW") {
+    nsfwChecked = true;
+  } else if(props.easterEgg === "SAFE") {
+    nsfwChecked = false;
+  } else {
+    nsfwChecked = false;
+  }
+  return (
+    <div id="applicationGrid" title={props.name}>
+      <label htmlFor="name">Name</label>
+      <input id="name" type="text" defaultValue={props.name}></input>
+      <label htmlFor="url">URL</label>
+      <input id="url" type="text" defaultValue={props.url}></input>
+      <label htmlFor="icon">Icon</label>
+      <input id="icon" type="text" defaultValue={props.icon}></input>
+      <label htmlFor="baseurl">Base URL</label>
+      <input id="baseurl" type="text" defaultValue={props.urlbase}></input>
+      <label htmlFor="NSFW">NSFW</label>
+      <input id="NSFW" type="checkbox" defaultChecked={nsfwChecked}></input>
+    </div>
+  );
+}
+
+export default ApplicationDetails;
\ No newline at end of file
diff --git a/src/components/ApplicationSettings.js b/src/components/ApplicationSettings.js
new file mode 100644
index 00000000..75428d73
--- /dev/null
+++ b/src/components/ApplicationSettings.js
@@ -0,0 +1,33 @@
+import { getApps } from '../assets/functions.js';
+import ApplicationDetails from './ApplicationDetails'
+
+const ApplicationSettings = () => {
+    let apps = (getApps()).apps;
+    console.log(apps);
+    const handleSubmit = (e) => {
+      e.preventDefault();
+    };
+    return (
+      <div id="settings-panel">
+        <div id="settings-panel-header">
+            <h1>Applications</h1>
+        </div>
+        <form id="applicationForm">
+          {apps.map((apps) => (
+            <ApplicationDetails
+              key={apps.name}
+              name={apps.name}
+              url={apps.url}
+              icon={apps.icon}
+              urlbase={apps.urlbase}
+              NSFW={apps.NSFW}
+            />
+          ))}
+        </form>
+        <button onClick={handleSubmit} type="submit" form="applicationForm" value="submit">Save</button>
+      </div>
+      
+    );
+}
+
+export default ApplicationSettings;
\ No newline at end of file
diff --git a/src/components/Applications.js b/src/components/Applications.js
new file mode 100644
index 00000000..4a762208
--- /dev/null
+++ b/src/components/Applications.js
@@ -0,0 +1,25 @@
+import AppItem from './AppItem';
+import { getApps } from '../assets/functions';
+
+const Applications = () => {
+  let data = (getApps()).apps;
+  return (
+    <section id="apps">
+      <h3>Applications</h3>
+      <div id="apps_loop">
+      {data.map((data) => (
+        <AppItem
+          key={data.name}
+          name={data.name}
+          url={data.url}
+          icon={data.icon}
+          NSFW={data.NSFW}
+        />
+      ))}
+      </div>
+    </section>
+
+  );
+}
+
+export default Applications;
\ No newline at end of file
diff --git a/src/components/BookmarkDetails.js b/src/components/BookmarkDetails.js
new file mode 100644
index 00000000..b380dcb6
--- /dev/null
+++ b/src/components/BookmarkDetails.js
@@ -0,0 +1,12 @@
+function BookmarkDetails(props) {
+    return (
+      <div id="bookmarkGrid" title={props.name}>
+        <label htmlFor="name">Name</label>
+        <input id="name" type="text" defaultValue={props.name}></input>
+        <label htmlFor="url">URL</label>
+        <input id="url" type="text" defaultValue={props.url}></input>
+      </div>
+    );
+}
+
+export default BookmarkDetails;
\ No newline at end of file
diff --git a/src/components/BookmarkGroups.js b/src/components/BookmarkGroups.js
new file mode 100644
index 00000000..384d1b14
--- /dev/null
+++ b/src/components/BookmarkGroups.js
@@ -0,0 +1,19 @@
+import BookmarkDetails from './BookmarkDetails';
+
+function BookmarkGroups(props) {
+    let links = props.links;
+    return (
+      <div id="bookmarkForm">
+        <h3>{props.category}</h3>
+        {links.map((links) => (
+            <BookmarkDetails
+              key={links.name}
+              name={links.name}
+              url={links.url}
+            />
+        ))}
+      </div>
+    );
+}
+
+export default BookmarkGroups;
\ No newline at end of file
diff --git a/src/components/BookmarkSettings.js b/src/components/BookmarkSettings.js
new file mode 100644
index 00000000..c6d2c3a0
--- /dev/null
+++ b/src/components/BookmarkSettings.js
@@ -0,0 +1,31 @@
+import BookmarkGroups from './BookmarkGroups';
+import { getLinks } from '../assets/functions';
+
+const BookmarksSettings = () => {
+    let groups = (getLinks()).bookmarks;
+    const handleSubmit = (e) => {
+      e.preventDefault();
+    };
+    return (
+      <div id="settings-panel">
+        <div id="settings-panel-header">
+            <h1>Bookmarks</h1>
+        </div>
+        <form id="bookmarkForm">
+          <div>
+            {groups.map((groups) => (
+              <BookmarkGroups
+                key={groups.category}
+                category={groups.category}
+                links={groups.links}
+              />
+            ))}
+          </div>
+        </form>
+        <button onClick={handleSubmit} type="submit" form="bookmarkForm" value="submit">Save</button>
+      </div>
+      
+    );
+}
+
+export default BookmarksSettings;
\ No newline at end of file
diff --git a/src/components/Bookmarks.js b/src/components/Bookmarks.js
new file mode 100644
index 00000000..b9719831
--- /dev/null
+++ b/src/components/Bookmarks.js
@@ -0,0 +1,22 @@
+import LinkGroups from './LinkGroups';
+import { getLinks } from '../assets/functions';
+
+function Links() {
+    let bookmarkList = (getLinks()).bookmarks;
+    return (
+      <section id="links">
+        <h3>Bookmarks</h3>
+        <div id="links_loop">
+          {bookmarkList.map((bookmarkList) => (
+            <LinkGroups
+              key={bookmarkList.category}
+              category={bookmarkList.category}
+              links={bookmarkList.links}
+            />
+          ))}
+        </div>
+      </section>
+    );
+  }
+
+export default Links;
\ No newline at end of file
diff --git a/src/components/Header.js b/src/components/Header.js
new file mode 100644
index 00000000..5e37b9da
--- /dev/null
+++ b/src/components/Header.js
@@ -0,0 +1,46 @@
+import { useState, useEffect } from 'react';
+import { fixDigits } from "../assets/functions";
+
+function Header(props) {
+    return (
+      <section id="header">
+        <div id="greeting_block">
+          <h1 id="header_greet">{props.greet}</h1>
+        </div>
+        <div id="date_block">
+          <h2 id="header_date">{props.date}</h2>
+          <Clock />
+        </div>
+      </section>
+    );
+}
+
+export default Header;
+
+function Clock() {
+  const [date, setDate] = useState(new Date());
+
+  function refreshClock() {
+    setDate(new Date());
+  }
+  useEffect(() => {
+    const timerId = setInterval(refreshClock, 1000);
+    return function cleanup() {
+      clearInterval(timerId);
+    };
+  }, []);
+
+  var hour = date.getHours();
+  var minutes = date.getMinutes();
+  //var seconds = date.getSeconds();
+  var midday = "AM";
+  midday = (hour >= 12) ? "PM" : "AM";
+  hour = (hour === 0) ? 12 : ((hour > 12) ? (hour - 12) : hour);
+  minutes = fixDigits(minutes);
+  //seconds = fixDigits(seconds);
+  let time = hour + ":" + minutes + " " + midday;
+
+  return (
+    <h2 id="clock">{time}</h2>
+  );
+}
\ No newline at end of file
diff --git a/src/components/HideButton.js b/src/components/HideButton.js
new file mode 100644
index 00000000..b8783c7d
--- /dev/null
+++ b/src/components/HideButton.js
@@ -0,0 +1,49 @@
+function HideButton(props) {
+    if(props.checked === "true") {
+      return (
+        <div className="sneaky"><input type="checkbox" id="contenttype" onChange={udpateDisplayedItems} defaultChecked={true}></input>
+        <label htmlFor="contenttype"><span className="iconify" data-icon="mdi-domino-mask"></span></label></div>
+      );
+    } else {
+      return (
+        <div className="sneaky"><input type="checkbox" id="contenttype" onChange={udpateDisplayedItems} defaultChecked={false}></input>
+        <label htmlFor="contenttype"><span className="iconify" data-icon="mdi-domino-mask"></span></label></div>
+      );
+    }
+}
+
+export default HideButton;
+
+function udpateDisplayedItems(e) {
+  localStorage.setItem('contenttype', e.target.checked);
+  if (e.target.checked) {
+    localStorage.setItem('content-display', 'none');
+  } else {
+    localStorage.setItem('content-display', 'block');
+  }
+  setDisplayedItems();
+}
+function setDisplayedItems() {
+  if(localStorage.getItem("contenttype") === null) {
+      localStorage.setItem('contenttype', false);
+      localStorage.setItem('content-display', "block");
+  }
+  setValueFromLocalStorage('contenttype');
+  setValueFromLocalStorage('content-display');
+}
+
+export const setValueFromLocalStorage = property => {
+  let value = localStorage.getItem(property);
+  setValue(property, value);
+};
+export const setValue = (property, value) => {
+  if (value) {
+      document.documentElement.style.setProperty(`--${property}`, value);
+
+      const input = document.querySelector(`#${property}`);
+      if (input) {
+          value = value.replace('px', '');
+          input.value = value;
+      }
+  }
+};
\ No newline at end of file
diff --git a/src/components/LinkGroups.js b/src/components/LinkGroups.js
new file mode 100644
index 00000000..85e5d130
--- /dev/null
+++ b/src/components/LinkGroups.js
@@ -0,0 +1,18 @@
+import LinkItem from './LinkItem'
+
+function LinkGroups(props) {
+    let links = props.links;
+    return (
+      <div id="links_item">
+      <h4>{props.category}</h4>
+        {links.map((links, index) => (
+          <LinkItem
+            key={index}
+            link={links}
+          />
+        ))}
+      </div>
+    );
+}
+
+export default LinkGroups;
\ No newline at end of file
diff --git a/src/components/LinkItem.js b/src/components/LinkItem.js
new file mode 100644
index 00000000..9aeab5fb
--- /dev/null
+++ b/src/components/LinkItem.js
@@ -0,0 +1,9 @@
+function LinkItem(props) {
+    return (
+      <div>
+        <a href={props.link.url} className="theme_color-border theme_text-select">{props.link.name}</a>
+      </div>
+    );
+}
+
+export default LinkItem;
\ No newline at end of file
diff --git a/src/components/MessageInfo.js b/src/components/MessageInfo.js
new file mode 100644
index 00000000..8e8b6e44
--- /dev/null
+++ b/src/components/MessageInfo.js
@@ -0,0 +1,21 @@
+import Messages from './Messages';
+
+function MessageInfo() {
+    let greetings = (require('../messages.json')).messages;
+    console.log(greetings);
+    return (
+      <div id="messageForm">
+        {greetings.map((greetings, index) => (
+            <Messages
+              key={index}
+              group={index+1}
+              index={greetings.index}
+              greeting={greetings.message}
+              easterEgg={greetings.easteregg}
+            />
+        ))}
+      </div>
+    );
+}
+
+export default MessageInfo
\ No newline at end of file
diff --git a/src/components/Messages.js b/src/components/Messages.js
new file mode 100644
index 00000000..c62b50e2
--- /dev/null
+++ b/src/components/Messages.js
@@ -0,0 +1,23 @@
+function Messages(props) {
+
+    var eeChecked;
+    if(props.easterEgg === "TRUE") {
+      eeChecked = true;
+    } else if(props.easterEgg === "FALSE") {
+      eeChecked = false;
+    } else {
+      eeChecked = false;
+    }
+    return (
+      <div id="messageGrid" title={props.group}>
+        <label htmlFor="index">Index</label>
+        <input id="index" type="text" defaultValue={props.index}></input>
+        <label htmlFor="greeting">Greeting</label>
+        <input id="greeting" type="text" defaultValue={props.greeting}></input>
+        <label htmlFor="Easter Egg">Easter Egg</label>
+        <input id="Easter Egg" type="checkbox" defaultChecked={eeChecked}></input>
+      </div>
+    );
+}
+
+export default Messages;
\ No newline at end of file
diff --git a/src/components/PersonalFormInput.js b/src/components/PersonalFormInput.js
new file mode 100644
index 00000000..7af64a77
--- /dev/null
+++ b/src/components/PersonalFormInput.js
@@ -0,0 +1,17 @@
+function PersonalFromInput(props) {
+    let fname = props.fname;
+    let lname = props.lname;
+    let email = props.email;
+    return (
+      <div id="personalForm">
+        <label htmlFor="fname">First Name</label>
+        <input id="fname" type="text" defaultValue={fname} onChange={() => console.log()}></input>
+        <label htmlFor="lname">Last Name</label>
+        <input id="lname" type="text" defaultValue={lname} onChange={() => console.log()}></input>
+        <label htmlFor="email">Email</label>
+        <input id="email" type="email" defaultValue={email} onChange={() => console.log()}></input>
+      </div>
+    );
+  }
+
+export default PersonalFromInput;
\ No newline at end of file
diff --git a/src/components/PersonalInfo.js b/src/components/PersonalInfo.js
new file mode 100644
index 00000000..2dff0a9e
--- /dev/null
+++ b/src/components/PersonalInfo.js
@@ -0,0 +1,15 @@
+import PersonalFormInput from './PersonalFormInput';
+import { getPersonalData } from '../assets/functions';
+
+function PersonalInfo() {
+    var personalData = getPersonalData();
+    return (
+        <PersonalFormInput
+          fname={personalData.fname}
+          lname={personalData.lname}
+          email={personalData.email}
+        />
+    );
+}
+
+export default PersonalInfo;
\ No newline at end of file
diff --git a/src/components/PersonalizationSettings.js b/src/components/PersonalizationSettings.js
new file mode 100644
index 00000000..3adc5075
--- /dev/null
+++ b/src/components/PersonalizationSettings.js
@@ -0,0 +1,27 @@
+import PersonalInfo from './PersonalInfo';
+import MessageInfo from './MessageInfo';
+
+const PersonalizationSettings = () => {
+    const handleSubmit = (e) => {
+      e.preventDefault();
+    };
+    return (
+      <div id="settings-panel">
+        <div id="settings-panel-header">
+            <h1>Personalization</h1>
+            <h3>Personal details</h3>
+        </div>
+        <form id="personalizationForm">
+          <PersonalInfo />
+          <div>
+            <h3>Greetings</h3>
+          </div>
+          <MessageInfo />
+        </form>
+        <button onClick={handleSubmit} type="submit" form="personalizationForm" value="submit">Save</button>
+      </div>
+      
+    );
+};
+
+export default PersonalizationSettings;
\ No newline at end of file
diff --git a/src/components/Provider.js b/src/components/Provider.js
new file mode 100644
index 00000000..ec9dbf49
--- /dev/null
+++ b/src/components/Provider.js
@@ -0,0 +1,10 @@
+function Provider(props) {
+    return (
+      <tr>
+        <td><a href={props.provider.url}>{props.provider.name}</a></td>
+        <td>{props.provider.prefix}</td>
+      </tr>
+    );
+}
+
+export default Provider;
\ No newline at end of file
diff --git a/src/components/ProviderDetails.js b/src/components/ProviderDetails.js
new file mode 100644
index 00000000..b4a42422
--- /dev/null
+++ b/src/components/ProviderDetails.js
@@ -0,0 +1,14 @@
+function ProviderDetails(props) {
+    return (
+      <div id="providersGrid" title={props.name}>
+        <label htmlFor="name">Name</label>
+        <input id="name" type="text" defaultValue={props.name}></input>
+        <label htmlFor="prefix">Prefix</label>
+        <input id="prefix" type="text" defaultValue={props.prefix}></input>
+        <label htmlFor="url">URL</label>
+        <input id="url" type="text" defaultValue={props.url}></input>
+      </div>
+    );
+}
+
+export default ProviderDetails;
\ No newline at end of file
diff --git a/src/components/ProviderSettings.js b/src/components/ProviderSettings.js
new file mode 100644
index 00000000..09a90ec9
--- /dev/null
+++ b/src/components/ProviderSettings.js
@@ -0,0 +1,30 @@
+import ProviderDetails from './ProviderDetails';
+import { getProviders } from '../assets/functions';
+
+function ProviderSettings() {
+    let providers = (getProviders()).providers;
+    const handleSubmit = (e) => {
+      e.preventDefault();
+    };
+    return (
+      <div id="settings-panel">
+        <div id="settings-panel-header">
+            <h1>Providers</h1>
+        </div>
+        <form id="providersForm">
+          {providers.map((providers) => (
+            <ProviderDetails
+              key={providers.name}
+              name={providers.name}
+              url={providers.url}
+              prefix={providers.prefix}
+            />
+          ))}
+        </form>
+        <button onClick={handleSubmit} type="submit" form="providersForm" value="submit">Save</button>
+      </div>
+      
+    );
+}
+
+export default ProviderSettings;
\ No newline at end of file
diff --git a/src/components/Search.js b/src/components/Search.js
new file mode 100644
index 00000000..33a1cc52
--- /dev/null
+++ b/src/components/Search.js
@@ -0,0 +1,13 @@
+import { handleKeyPress } from "../assets/functions";
+
+export default function Search() {
+    return (
+      <section id="search">
+        <div className="abackground">
+          <input name="keywords" type="text" className="keyword" id="keywords" size="50" spellCheck="true" placeholder="" autoComplete="off" autoFocus={true} onKeyUp={handleKeyPress}/>
+          <label id="searchType" className="Input-label">Google search</label>
+        </div>
+      </section>
+    )
+}
+// export default Search;
\ No newline at end of file
diff --git a/src/components/SettingsButton.js b/src/components/SettingsButton.js
new file mode 100644
index 00000000..dd3f0f3a
--- /dev/null
+++ b/src/components/SettingsButton.js
@@ -0,0 +1,15 @@
+import { Link } from "react-router-dom";
+import setDisplayedItems from '../assets/functions'
+
+function SettingsButton() {
+    setDisplayedItems();
+    return (
+      <div id="modal_init">
+        <Link to="/sui/settings">
+          <span className="iconify icon" data-icon="mdi-xbox-controller-menu"></span>
+        </Link>
+      </div>
+    );
+}
+
+export default SettingsButton;
\ No newline at end of file
diff --git a/src/components/ThemesSettings.js b/src/components/ThemesSettings.js
new file mode 100644
index 00000000..f19a5c9b
--- /dev/null
+++ b/src/components/ThemesSettings.js
@@ -0,0 +1,27 @@
+import { getThemes, updateTheme } from "../assets/functions";
+
+function ThemesSettings() {
+    let themes = (getThemes()).themes;
+    console.log(themes[0].colorbackground);
+    return (
+      <div id="settings-panel">
+        <h1>Themes</h1>
+        <div id="modal-theme">
+          {themes.map((themes) => (
+              <div className="theme-row">
+                <button data-theme={themes.name} className={"theme-button theme-" + themes.name} onClick={updateTheme}>{themes.name}</button>
+                <div className="theme-palette">
+                  <div className="swatch" style={{background: themes.colorbackground}}></div>
+                  <div className="swatch" style={{background: themes.colorserachbackground}}></div>
+                  <div className="swatch" style={{background: themes.colortextpri}}></div>
+                  <div className="swatch" style={{background: themes.colortextacc}}></div>
+                  <div className="swatch" style={{background: themes.colorborder}}></div>
+                </div>
+              </div>
+          ))}
+        </div>
+      </div>
+    );
+}
+
+export default ThemesSettings;
\ No newline at end of file
diff --git a/src/pages/Homepage.js b/src/pages/Homepage.js
new file mode 100644
index 00000000..7c5055a7
--- /dev/null
+++ b/src/pages/Homepage.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import { setTheme } from '../assets/functions';
+import Search from '../components/Search';
+import Header from '../components/Header'
+import Applications from '../components/Applications'
+import Bookmarks from '../components/Bookmarks'
+import SettingsButton from '../components/SettingsButton'
+import { date, greet } from '../assets/functions';
+
+export default function Homepage() {
+    setTheme();
+    
+    return (
+      <main id="container" className="fade">
+          <div>
+            <Search />
+          </div>
+          <div>
+            <Header
+              date={date()}
+              greet={greet()}
+            />
+          </div>
+          <div>
+            <Applications />
+          </div>
+          <div>
+            <Bookmarks />
+          </div>
+          <div>
+            <SettingsButton />
+          </div>
+      </main>
+    );
+  }
\ No newline at end of file
diff --git a/src/pages/Settings.js b/src/pages/Settings.js
new file mode 100644
index 00000000..d48db725
--- /dev/null
+++ b/src/pages/Settings.js
@@ -0,0 +1,33 @@
+import HideButton from '../components/HideButton'
+import { setTheme } from "../assets/functions";
+import { Outlet, Link } from "react-router-dom";
+
+function Settings() {
+    setTheme();
+    var isChecked = localStorage.getItem("contenttype");
+    return (
+      <main id="settings-container" className="fade">
+        <div id="settings-nav">
+          <h1>Settings</h1>
+          <nav id="nav_item">
+            <Link id='peronsalization' to="/sui/settings/personalization">Personalization</Link>
+            <Link id='applications' to="/sui/settings/apps">Applications</Link>
+            <Link id='bookmarks' to="/sui/settings/bookmarks">Bookmarks</Link>
+            <Link id='themes' to="/sui/settings/themes">Themes</Link>
+            <Link id='providers' to="/sui/settings/providers">Search Providers</Link>
+          </nav>
+          <nav id="nav_item">
+            <header id="modal-footer">
+              <HideButton 
+                checked = {isChecked}
+              />
+            </header>
+            <Link to="/sui">Back Home</Link>
+          </nav>
+        </div>
+        <Outlet />
+      </main>
+    );
+}
+
+export default Settings;
\ No newline at end of file