diff --git a/web/src/gallery.html b/web/src/gallery.html
new file mode 100644
index 0000000..4756e59
--- /dev/null
+++ b/web/src/gallery.html
@@ -0,0 +1,43 @@
+
+
+
+
+ EveryNasa
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/src/settings.html b/web/src/settings.html
new file mode 100644
index 0000000..50015f5
--- /dev/null
+++ b/web/src/settings.html
@@ -0,0 +1,59 @@
+
+
+
+
+ EveryNasa
+
+
+
+
+
+
+Application Settings
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/static/scripts/gallery.js b/web/static/scripts/gallery.js
new file mode 100644
index 0000000..b879e61
--- /dev/null
+++ b/web/static/scripts/gallery.js
@@ -0,0 +1,17 @@
+$.ajax({
+ url: `https://api.nasa.gov/planetary/apod?api_key=1gI9G84ZafKDEnrbydviGknReOGiVK9jqrQBE3et&start_date=${new Date().toLocaleString().slice(6, 10)}-${new Date().toLocaleString().slice(3, 5)}-01&end_date=${new Date().toLocaleString().slice(6,10)}-${new Date().toLocaleString().slice(3, 5)}-${new Date().toLocaleString().slice(3, 5)}`,
+ type: "GET",
+ success: function(data){
+ for (let i = 0; i < data.length; i++) {
+ if (data[i].media_type == "image") {
+ $(".header-row").append(`
+
+
+
![${data[i].title}](${data[i].url})
+
+
+ `)
+ }
+ }
+ }
+});
\ No newline at end of file
diff --git a/web/static/scripts/switch.js b/web/static/scripts/switch.js
new file mode 100644
index 0000000..24d4172
--- /dev/null
+++ b/web/static/scripts/switch.js
@@ -0,0 +1,84 @@
+$.ajax({
+ url: "http://localhost:8080/api/get/settings",
+ type: "GET",
+ success: function(data){
+ if(data["autoupdate"] === 1){
+ $("#updateSwitch").attr("checked", "true");
+ $("#updateText").text("On");
+ }
+ if(data["autostart"] === 1) {
+ $("#autorunSwitch").attr("checked", "true");
+ $("#autorunText").text("On");
+ }
+ }
+
+})
+
+$("#updateSwitch").click(function(){
+ $.ajax({
+ url: "http://localhost:8080/api/get/settings",
+ type: "GET",
+ success: function(data){
+ if(data["autoupdate"] === 1){
+ $.ajax({
+ url: "http://localhost:8080/api/update/settings",
+ type: "POST",
+ data: {
+ autoupdate: 0
+ },
+ success: function(){
+ $("#updateSwitch").removeAttr("checked");
+ $("#updateText").text("Off");
+ }
+ })
+ } else {
+ $.ajax({
+ url: "http://localhost:8080/api/update/settings",
+ type: "POST",
+ data: {
+ autoupdate: 1
+ },
+ success: function(){
+ $("#updateSwitch").attr("checked", "true");
+ $("#updateText").text("On");
+ }
+ })
+ }
+ }
+ });
+})
+
+
+$("#autorunSwitch").click(function(){
+ $.ajax({
+ url: "http://localhost:8080/api/get/settings",
+ type: "GET",
+ success: function(data){
+ if(data["autostart"] === 1){
+ $.ajax({
+ url: "http://localhost:8080/api/update/settings",
+ type: "POST",
+ data: {
+ autostart: 0
+ },
+ success: function(){
+ $("#autorunSwitch").removeAttr("checked");
+ $("#autorunText").text("Off");
+ }
+ })
+ } else {
+ $.ajax({
+ url: "http://localhost:8080/api/update/settings",
+ type: "POST",
+ data: {
+ autostart: 1
+ },
+ success: function(){
+ $("#autorunSwitch").attr("checked", "true");
+ $("#autorunText").text("On");
+ }
+ })
+ }
+ }
+ });
+})
\ No newline at end of file
diff --git a/web/static/scripts/tooltip.js b/web/static/scripts/tooltip.js
new file mode 100644
index 0000000..d333701
--- /dev/null
+++ b/web/static/scripts/tooltip.js
@@ -0,0 +1,2 @@
+const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
+const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
diff --git a/web/static/scripts/version.js b/web/static/scripts/version.js
new file mode 100644
index 0000000..83d88b1
--- /dev/null
+++ b/web/static/scripts/version.js
@@ -0,0 +1,7 @@
+$.ajax({
+ url: "http://localhost:8080/api/get/version",
+ type: "GET",
+ success: function(data){
+ $("#program-version").text(data.message);
+ }
+})
\ No newline at end of file
diff --git a/web/static/style/gallery.css b/web/static/style/gallery.css
new file mode 100644
index 0000000..e596f7c
--- /dev/null
+++ b/web/static/style/gallery.css
@@ -0,0 +1,37 @@
+.card {
+ border-radius: 8%;
+ width: 250px;
+ height: 200px;
+ overflow: hidden;
+ margin: 10px;
+ background-color: #131313;
+}
+
+
+.card img {
+ width: initial;
+ height: 100%;
+}
+
+.image {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-around;
+}
+
+.header-row .card {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+}
+
+.header-row span > .card {
+ margin: auto;
+}
+
+.header-row span img {
+ width: 30px;
+ height: auto;
+}
+
diff --git a/web/static/style/settings.css b/web/static/style/settings.css
new file mode 100644
index 0000000..c2af9b9
--- /dev/null
+++ b/web/static/style/settings.css
@@ -0,0 +1,30 @@
+#everynasa-logo {
+ user-drag: none;
+ -webkit-user-drag: none;
+ user-select: none;
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ -ms-user-select: none;
+}
+
+#title {
+ margin-top: 0.6em;
+ margin-left: 0.5em;
+}
+
+.title {
+ margin-top: 2.3em;
+}
+
+.desc {
+ margin-top: -0.7em;
+}
+
+p, .form-check {
+ margin-left: -18em;
+ margin-top: -0.8em;
+}
+
+#update-desc {
+ margin-top: -0.8rem;
+}
\ No newline at end of file