From b5838d9d4246fe2afcabe877b3864606bcf9e455 Mon Sep 17 00:00:00 2001
From: Faris Durrani <afarisdurrani@gmail.com>
Date: Thu, 28 Sep 2023 22:17:52 -0400
Subject: [PATCH 1/7] Added iris file

---
 iris.csv | 151 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 151 insertions(+)
 create mode 100644 iris.csv

diff --git a/iris.csv b/iris.csv
new file mode 100644
index 000000000..1b9d0294d
--- /dev/null
+++ b/iris.csv
@@ -0,0 +1,151 @@
+"sepal.length","sepal.width","petal.length","petal.width","variety"
+5.1,3.5,1.4,.2,"Setosa"
+4.9,3,1.4,.2,"Setosa"
+4.7,3.2,1.3,.2,"Setosa"
+4.6,3.1,1.5,.2,"Setosa"
+5,3.6,1.4,.2,"Setosa"
+5.4,3.9,1.7,.4,"Setosa"
+4.6,3.4,1.4,.3,"Setosa"
+5,3.4,1.5,.2,"Setosa"
+4.4,2.9,1.4,.2,"Setosa"
+4.9,3.1,1.5,.1,"Setosa"
+5.4,3.7,1.5,.2,"Setosa"
+4.8,3.4,1.6,.2,"Setosa"
+4.8,3,1.4,.1,"Setosa"
+4.3,3,1.1,.1,"Setosa"
+5.8,4,1.2,.2,"Setosa"
+5.7,4.4,1.5,.4,"Setosa"
+5.4,3.9,1.3,.4,"Setosa"
+5.1,3.5,1.4,.3,"Setosa"
+5.7,3.8,1.7,.3,"Setosa"
+5.1,3.8,1.5,.3,"Setosa"
+5.4,3.4,1.7,.2,"Setosa"
+5.1,3.7,1.5,.4,"Setosa"
+4.6,3.6,1,.2,"Setosa"
+5.1,3.3,1.7,.5,"Setosa"
+4.8,3.4,1.9,.2,"Setosa"
+5,3,1.6,.2,"Setosa"
+5,3.4,1.6,.4,"Setosa"
+5.2,3.5,1.5,.2,"Setosa"
+5.2,3.4,1.4,.2,"Setosa"
+4.7,3.2,1.6,.2,"Setosa"
+4.8,3.1,1.6,.2,"Setosa"
+5.4,3.4,1.5,.4,"Setosa"
+5.2,4.1,1.5,.1,"Setosa"
+5.5,4.2,1.4,.2,"Setosa"
+4.9,3.1,1.5,.2,"Setosa"
+5,3.2,1.2,.2,"Setosa"
+5.5,3.5,1.3,.2,"Setosa"
+4.9,3.6,1.4,.1,"Setosa"
+4.4,3,1.3,.2,"Setosa"
+5.1,3.4,1.5,.2,"Setosa"
+5,3.5,1.3,.3,"Setosa"
+4.5,2.3,1.3,.3,"Setosa"
+4.4,3.2,1.3,.2,"Setosa"
+5,3.5,1.6,.6,"Setosa"
+5.1,3.8,1.9,.4,"Setosa"
+4.8,3,1.4,.3,"Setosa"
+5.1,3.8,1.6,.2,"Setosa"
+4.6,3.2,1.4,.2,"Setosa"
+5.3,3.7,1.5,.2,"Setosa"
+5,3.3,1.4,.2,"Setosa"
+7,3.2,4.7,1.4,"Versicolor"
+6.4,3.2,4.5,1.5,"Versicolor"
+6.9,3.1,4.9,1.5,"Versicolor"
+5.5,2.3,4,1.3,"Versicolor"
+6.5,2.8,4.6,1.5,"Versicolor"
+5.7,2.8,4.5,1.3,"Versicolor"
+6.3,3.3,4.7,1.6,"Versicolor"
+4.9,2.4,3.3,1,"Versicolor"
+6.6,2.9,4.6,1.3,"Versicolor"
+5.2,2.7,3.9,1.4,"Versicolor"
+5,2,3.5,1,"Versicolor"
+5.9,3,4.2,1.5,"Versicolor"
+6,2.2,4,1,"Versicolor"
+6.1,2.9,4.7,1.4,"Versicolor"
+5.6,2.9,3.6,1.3,"Versicolor"
+6.7,3.1,4.4,1.4,"Versicolor"
+5.6,3,4.5,1.5,"Versicolor"
+5.8,2.7,4.1,1,"Versicolor"
+6.2,2.2,4.5,1.5,"Versicolor"
+5.6,2.5,3.9,1.1,"Versicolor"
+5.9,3.2,4.8,1.8,"Versicolor"
+6.1,2.8,4,1.3,"Versicolor"
+6.3,2.5,4.9,1.5,"Versicolor"
+6.1,2.8,4.7,1.2,"Versicolor"
+6.4,2.9,4.3,1.3,"Versicolor"
+6.6,3,4.4,1.4,"Versicolor"
+6.8,2.8,4.8,1.4,"Versicolor"
+6.7,3,5,1.7,"Versicolor"
+6,2.9,4.5,1.5,"Versicolor"
+5.7,2.6,3.5,1,"Versicolor"
+5.5,2.4,3.8,1.1,"Versicolor"
+5.5,2.4,3.7,1,"Versicolor"
+5.8,2.7,3.9,1.2,"Versicolor"
+6,2.7,5.1,1.6,"Versicolor"
+5.4,3,4.5,1.5,"Versicolor"
+6,3.4,4.5,1.6,"Versicolor"
+6.7,3.1,4.7,1.5,"Versicolor"
+6.3,2.3,4.4,1.3,"Versicolor"
+5.6,3,4.1,1.3,"Versicolor"
+5.5,2.5,4,1.3,"Versicolor"
+5.5,2.6,4.4,1.2,"Versicolor"
+6.1,3,4.6,1.4,"Versicolor"
+5.8,2.6,4,1.2,"Versicolor"
+5,2.3,3.3,1,"Versicolor"
+5.6,2.7,4.2,1.3,"Versicolor"
+5.7,3,4.2,1.2,"Versicolor"
+5.7,2.9,4.2,1.3,"Versicolor"
+6.2,2.9,4.3,1.3,"Versicolor"
+5.1,2.5,3,1.1,"Versicolor"
+5.7,2.8,4.1,1.3,"Versicolor"
+6.3,3.3,6,2.5,"Virginica"
+5.8,2.7,5.1,1.9,"Virginica"
+7.1,3,5.9,2.1,"Virginica"
+6.3,2.9,5.6,1.8,"Virginica"
+6.5,3,5.8,2.2,"Virginica"
+7.6,3,6.6,2.1,"Virginica"
+4.9,2.5,4.5,1.7,"Virginica"
+7.3,2.9,6.3,1.8,"Virginica"
+6.7,2.5,5.8,1.8,"Virginica"
+7.2,3.6,6.1,2.5,"Virginica"
+6.5,3.2,5.1,2,"Virginica"
+6.4,2.7,5.3,1.9,"Virginica"
+6.8,3,5.5,2.1,"Virginica"
+5.7,2.5,5,2,"Virginica"
+5.8,2.8,5.1,2.4,"Virginica"
+6.4,3.2,5.3,2.3,"Virginica"
+6.5,3,5.5,1.8,"Virginica"
+7.7,3.8,6.7,2.2,"Virginica"
+7.7,2.6,6.9,2.3,"Virginica"
+6,2.2,5,1.5,"Virginica"
+6.9,3.2,5.7,2.3,"Virginica"
+5.6,2.8,4.9,2,"Virginica"
+7.7,2.8,6.7,2,"Virginica"
+6.3,2.7,4.9,1.8,"Virginica"
+6.7,3.3,5.7,2.1,"Virginica"
+7.2,3.2,6,1.8,"Virginica"
+6.2,2.8,4.8,1.8,"Virginica"
+6.1,3,4.9,1.8,"Virginica"
+6.4,2.8,5.6,2.1,"Virginica"
+7.2,3,5.8,1.6,"Virginica"
+7.4,2.8,6.1,1.9,"Virginica"
+7.9,3.8,6.4,2,"Virginica"
+6.4,2.8,5.6,2.2,"Virginica"
+6.3,2.8,5.1,1.5,"Virginica"
+6.1,2.6,5.6,1.4,"Virginica"
+7.7,3,6.1,2.3,"Virginica"
+6.3,3.4,5.6,2.4,"Virginica"
+6.4,3.1,5.5,1.8,"Virginica"
+6,3,4.8,1.8,"Virginica"
+6.9,3.1,5.4,2.1,"Virginica"
+6.7,3.1,5.6,2.4,"Virginica"
+6.9,3.1,5.1,2.3,"Virginica"
+5.8,2.7,5.1,1.9,"Virginica"
+6.8,3.2,5.9,2.3,"Virginica"
+6.7,3.3,5.7,2.5,"Virginica"
+6.7,3,5.2,2.3,"Virginica"
+6.3,2.5,5,1.9,"Virginica"
+6.5,3,5.2,2,"Virginica"
+6.2,3.4,5.4,2.3,"Virginica"
+5.9,3,5.1,1.8,"Virginica"
\ No newline at end of file

From 4fb7c295f7c315ae4e37eacc39732d34b1b7b29a Mon Sep 17 00:00:00 2001
From: Omanshb <73659149+Omanshb@users.noreply.github.com>
Date: Tue, 17 Oct 2023 19:07:31 -0400
Subject: [PATCH 2/7] package changes

---
 package-lock.json | 53 +++++++++++++++++++++++++++++++++++++++++++++++
 package.json      |  4 +++-
 yarn.lock         | 24 +++++++++++++++++++++
 3 files changed, 80 insertions(+), 1 deletion(-)
 create mode 100644 package-lock.json

diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 000000000..6517da5be
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,53 @@
+{
+  "name": "deep-learning-playground",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "deep-learning-playground",
+      "version": "1.0.0",
+      "license": "MIT",
+      "dependencies": {
+        "mamba": "^0.0.2"
+      }
+    },
+    "node_modules/charenc": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/charenc/-/charenc-0.0.2.tgz",
+      "integrity": "sha512-yrLQ/yVUFXkzg7EDQsPieE/53+0RlaWTs+wBrvW36cyilJ2SaDWfl4Yj7MtLTXleV9uEKefbAGUPv2/iWSooRA==",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/crypt": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/crypt/-/crypt-0.0.2.tgz",
+      "integrity": "sha512-mCxBlsHFYh9C+HVpiEacem8FEBnMXgU9gy4zmNC+SXAZNB/1idgp/aulFJ4FgCi7GPEVbfyng092GqL2k2rmow==",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/mamba": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/mamba/-/mamba-0.0.2.tgz",
+      "integrity": "sha512-pBACjuQ+rIMFjClDTpE1m5c7G4kvdWAZtzDIymRll2gfdiJewgQfZ0XKyxf3xaFlVKwFe8u5+OV5QNOB0oNpkA==",
+      "dependencies": {
+        "MD5": "^1.2.1"
+      }
+    },
+    "node_modules/MD5": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/MD5/-/MD5-1.3.0.tgz",
+      "integrity": "sha512-kDyDOgf7CECKouVCQ8tcbASPTyLMxrHxlvKBTBaXbF4eff5VYdfy4GCkCIIbAice4JGxBK+ExRD/4LdxDNXvLg==",
+      "deprecated": "deprecated, use lowercase 'md5@2.x' from now on",
+      "dependencies": {
+        "charenc": ">= 0.0.1",
+        "crypt": ">= 0.0.1"
+      },
+      "engines": {
+        "node": "*"
+      }
+    }
+  }
+}
diff --git a/package.json b/package.json
index 04e909443..39362e344 100644
--- a/package.json
+++ b/package.json
@@ -30,5 +30,7 @@
     "url": "https://github.com/DSGT-DLP/Deep-Learning-Playground/issues"
   },
   "homepage": "https://github.com/DSGT-DLP/Deep-Learning-Playground#readme",
-  "dependencies": {}
+  "dependencies": {
+    "mamba": "^0.0.2"
+  }
 }
diff --git a/yarn.lock b/yarn.lock
index fb57ccd13..1ad2be84b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,3 +2,27 @@
 # yarn lockfile v1
 
 
+"charenc@>= 0.0.1":
+  version "0.0.2"
+  resolved "https://registry.npmjs.org/charenc/-/charenc-0.0.2.tgz"
+  integrity sha512-yrLQ/yVUFXkzg7EDQsPieE/53+0RlaWTs+wBrvW36cyilJ2SaDWfl4Yj7MtLTXleV9uEKefbAGUPv2/iWSooRA==
+
+"crypt@>= 0.0.1":
+  version "0.0.2"
+  resolved "https://registry.npmjs.org/crypt/-/crypt-0.0.2.tgz"
+  integrity sha512-mCxBlsHFYh9C+HVpiEacem8FEBnMXgU9gy4zmNC+SXAZNB/1idgp/aulFJ4FgCi7GPEVbfyng092GqL2k2rmow==
+
+mamba@^0.0.2:
+  version "0.0.2"
+  resolved "https://registry.npmjs.org/mamba/-/mamba-0.0.2.tgz"
+  integrity sha512-pBACjuQ+rIMFjClDTpE1m5c7G4kvdWAZtzDIymRll2gfdiJewgQfZ0XKyxf3xaFlVKwFe8u5+OV5QNOB0oNpkA==
+  dependencies:
+    MD5 "^1.2.1"
+
+MD5@^1.2.1:
+  version "1.3.0"
+  resolved "https://registry.npmjs.org/MD5/-/MD5-1.3.0.tgz"
+  integrity sha512-kDyDOgf7CECKouVCQ8tcbASPTyLMxrHxlvKBTBaXbF4eff5VYdfy4GCkCIIbAice4JGxBK+ExRD/4LdxDNXvLg==
+  dependencies:
+    charenc ">= 0.0.1"
+    crypt ">= 0.0.1"

From 961ef7040ca511f827f68acb7dacacd2a9768ccb Mon Sep 17 00:00:00 2001
From: Omanshb <73659149+Omanshb@users.noreply.github.com>
Date: Tue, 17 Oct 2023 20:45:05 -0400
Subject: [PATCH 3/7] some yarn stuff

---
 frontend/yarn.lock | 38 ++++++++++++++++++++++++++++++++++++++
 yarn.lock          | 16 ++++++++--------
 2 files changed, 46 insertions(+), 8 deletions(-)

diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index f706c317c..19d11e8d9 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -784,6 +784,44 @@
   dependencies:
     "@floating-ui/core" "^1.2.3"
 
+"@fortawesome/fontawesome-common-types@6.4.2":
+  version "6.4.2"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.2.tgz#1766039cad33f8ad87f9467b98e0d18fbc8f01c5"
+  integrity sha512-1DgP7f+XQIJbLFCTX1V2QnxVmpLdKdzzo2k8EmvDOePfchaIGQ9eCHj2up3/jNEbZuBqel5OxiaOJf37TWauRA==
+
+"@fortawesome/fontawesome-free@^6.4.2":
+  version "6.4.2"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-6.4.2.tgz#36b6a9cb5ffbecdf89815c94d0c0ffa489ac5ecb"
+  integrity sha512-m5cPn3e2+FDCOgi1mz0RexTUvvQibBebOUlUlW0+YrMjDTPkiJ6VTKukA1GRsvRw+12KyJndNjj0O4AgTxm2Pg==
+
+"@fortawesome/fontawesome-svg-core@^6.4.2":
+  version "6.4.2"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.4.2.tgz#37f4507d5ec645c8b50df6db14eced32a6f9be09"
+  integrity sha512-gjYDSKv3TrM2sLTOKBc5rH9ckje8Wrwgx1CxAPbN5N3Fm4prfi7NsJVWd1jklp7i5uSCVwhZS5qlhMXqLrpAIg==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "6.4.2"
+
+"@fortawesome/free-brands-svg-icons@^6.4.2":
+  version "6.4.2"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.4.2.tgz#9b8e78066ea6dd563da5dfa686615791d0f7cc71"
+  integrity sha512-LKOwJX0I7+mR/cvvf6qIiqcERbdnY+24zgpUSouySml+5w8B4BJOx8EhDR/FTKAu06W12fmUIcv6lzPSwYKGGg==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "6.4.2"
+
+"@fortawesome/free-solid-svg-icons@^6.4.2":
+  version "6.4.2"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.4.2.tgz#33a02c4cb6aa28abea7bc082a9626b7922099df4"
+  integrity sha512-sYwXurXUEQS32fZz9hVCUUv/xu49PEJEyUOsA51l6PU/qVgfbTb2glsTEaJngVVT8VqBATRIdh7XVgV1JF1LkA==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "6.4.2"
+
+"@fortawesome/react-fontawesome@^0.2.0":
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz#d90dd8a9211830b4e3c08e94b63a0ba7291ddcf4"
+  integrity sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==
+  dependencies:
+    prop-types "^15.8.1"
+
 "@grpc/grpc-js@~1.7.0":
   version "1.7.3"
   resolved "https://registry.yarnpkg.com/@grpc/grpc-js/-/grpc-js-1.7.3.tgz#f2ea79f65e31622d7f86d4b4c9ae38f13ccab99a"
diff --git a/yarn.lock b/yarn.lock
index 1ad2be84b..cbc36bcaa 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,6 +2,14 @@
 # yarn lockfile v1
 
 
+MD5@^1.2.1:
+  version "1.3.0"
+  resolved "https://registry.npmjs.org/MD5/-/MD5-1.3.0.tgz"
+  integrity sha512-kDyDOgf7CECKouVCQ8tcbASPTyLMxrHxlvKBTBaXbF4eff5VYdfy4GCkCIIbAice4JGxBK+ExRD/4LdxDNXvLg==
+  dependencies:
+    charenc ">= 0.0.1"
+    crypt ">= 0.0.1"
+
 "charenc@>= 0.0.1":
   version "0.0.2"
   resolved "https://registry.npmjs.org/charenc/-/charenc-0.0.2.tgz"
@@ -18,11 +26,3 @@ mamba@^0.0.2:
   integrity sha512-pBACjuQ+rIMFjClDTpE1m5c7G4kvdWAZtzDIymRll2gfdiJewgQfZ0XKyxf3xaFlVKwFe8u5+OV5QNOB0oNpkA==
   dependencies:
     MD5 "^1.2.1"
-
-MD5@^1.2.1:
-  version "1.3.0"
-  resolved "https://registry.npmjs.org/MD5/-/MD5-1.3.0.tgz"
-  integrity sha512-kDyDOgf7CECKouVCQ8tcbASPTyLMxrHxlvKBTBaXbF4eff5VYdfy4GCkCIIbAice4JGxBK+ExRD/4LdxDNXvLg==
-  dependencies:
-    charenc ">= 0.0.1"
-    crypt ">= 0.0.1"

From 3b7256fdcff101ddc2aecc46e5616180fe78eb1e Mon Sep 17 00:00:00 2001
From: Omanshb <73659149+Omanshb@users.noreply.github.com>
Date: Sun, 22 Oct 2023 18:53:58 -0400
Subject: [PATCH 4/7] part-1 changes

---
 frontend/package.json                         |  5 +
 frontend/src/common/components/Footer.tsx     | 55 ++++-------
 frontend/src/common/components/NavBarMain.tsx |  8 +-
 frontend/src/constants.ts                     |  1 +
 .../Tabular/components/TabularFlow.tsx        | 77 ++++-----------
 .../components/TabularParametersStep.tsx      | 98 ++++++++-----------
 .../Tabular/components/TabularTrainspace.tsx  | 61 +++---------
 frontend/src/pages/login.tsx                  | 83 +++++++---------
 8 files changed, 143 insertions(+), 245 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index ba917dcc9..ba320d797 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -9,6 +9,11 @@
     "@dnd-kit/sortable": "^7.0.2",
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",
+    "@fortawesome/fontawesome-free": "^6.4.2",
+    "@fortawesome/fontawesome-svg-core": "^6.4.2",
+    "@fortawesome/free-brands-svg-icons": "^6.4.2",
+    "@fortawesome/free-solid-svg-icons": "^6.4.2",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@mui/icons-material": "^5.11.16",
     "@mui/material": "^5.9.3",
     "@mui/x-data-grid": "^6.0.4",
diff --git a/frontend/src/common/components/Footer.tsx b/frontend/src/common/components/Footer.tsx
index c1a07eb61..10c7489df 100644
--- a/frontend/src/common/components/Footer.tsx
+++ b/frontend/src/common/components/Footer.tsx
@@ -2,6 +2,8 @@ import React from "react";
 import { COLORS, URLs } from "../../constants";
 import { LinkedIn, YouTube, Instagram, GitHub } from "@mui/icons-material";
 import { ThemeProvider, createTheme } from "@mui/material/styles";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faReact } from "@fortawesome/free-brands-svg-icons";
 
 const theme = createTheme({
   components: {
@@ -9,7 +11,7 @@ const theme = createTheme({
       styleOverrides: {
         root: {
           fontSize: 40,
-          color: COLORS.dark_blue
+          color: COLORS.dark_blue,
         },
       },
     },
@@ -18,55 +20,38 @@ const theme = createTheme({
 
 const Footer = () => {
   return (
-    <div id="footer" data-testid="footer">
+    <div id='footer' data-testid='footer'>
       <ThemeProvider theme={theme}>
-        <div
-          className="footer-element"
-          id="footer-socials"
-          data-testid="footer-socials"
-        >
-          <a
-            className="foot-element"
-            data-testid="linkedin-icon"
-            title="Link to LinkedIn profile"
-            href={URLs.linkedin}
-          >
+        <div className='footer-element' id='footer-socials' data-testid='footer-socials'>
+          <a className='foot-element' data-testid='linkedin-icon' title='Link to LinkedIn profile' href={URLs.linkedin}>
             <LinkedIn />
           </a>
-          <a
-            className="foot-element"
-            title="Link to YouTube channel"
-            data-testid="youtube-icon"
-            href={URLs.youtube}
-          >
+          <a className='foot-element' title='Link to YouTube channel' data-testid='youtube-icon' href={URLs.youtube}>
             <YouTube />
           </a>
           <a
-            className="foot-element"
-            title="Link to Instagram profile"
-            data-testid="instagram-icon"
+            className='foot-element'
+            title='Link to Instagram profile'
+            data-testid='instagram-icon'
             href={URLs.instagram}
           >
             <Instagram />
           </a>
+          <a className='foot-element' title='Link to GitHub repository' data-testid='github-icon' href={URLs.github}>
+            <GitHub />
+          </a>
           <a
-            className="foot-element"
-            title="Link to GitHub repository"
-            data-testid="github-icon"
-            href={URLs.github}
+            className='foot-element'
+            title='Link to React documentation'
+            data-testid='react-icon'
+            href={URLs.reactLink}
           >
-            <GitHub />
+            <FontAwesomeIcon icon={faReact} style={{ fontSize: "2.5em", color: "#00233f" }} />
           </a>
         </div>
       </ThemeProvider>
-      <div
-        className="footer-element"
-        id="footer-name"
-        data-testid="footer-name"
-      >
-        <p className="copyright">
-          Deep Learning Playground © {new Date().getFullYear()}
-        </p>
+      <div className='footer-element' id='footer-name' data-testid='footer-name'>
+        <p className='copyright'>Deep Learning Playground © {new Date().getFullYear()}</p>
       </div>
     </div>
   );
diff --git a/frontend/src/common/components/NavBarMain.tsx b/frontend/src/common/components/NavBarMain.tsx
index 579746a9f..6b7fe9120 100644
--- a/frontend/src/common/components/NavBarMain.tsx
+++ b/frontend/src/common/components/NavBarMain.tsx
@@ -103,7 +103,7 @@ const NavbarMain = () => {
               <Grid item>
                 {isSignedIn(user) ? (
                   <Link href="/train" passHref className="nav-link">
-                    Train
+                    Hello World
                   </Link>
                 ) : null}
               </Grid>
@@ -123,7 +123,11 @@ const NavbarMain = () => {
                 </Link>
               </Grid>
               <Grid item>
-                <Link href={URLs.donate} passHref className="nav-link">
+                <Link
+                  href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
+                  passHref
+                  className="nav-link"
+                >
                   Donate
                 </Link>
               </Grid>
diff --git a/frontend/src/constants.ts b/frontend/src/constants.ts
index 4ff358e95..c86c98cf1 100644
--- a/frontend/src/constants.ts
+++ b/frontend/src/constants.ts
@@ -15,6 +15,7 @@ export const URLs = Object.freeze({
   youtube: "https://www.youtube.com/channel/UC1DGL6Tb9ffwC-aHChadxMw",
   instagram: "https://www.instagram.com/datasciencegt/",
   github: "https://github.com/DSGT-DLP/Deep-Learning-Playground",
+  reactLink: "https://react.dev/",
 });
 
 export const GENERAL_STYLES = Object.freeze({
diff --git a/frontend/src/features/Train/features/Tabular/components/TabularFlow.tsx b/frontend/src/features/Train/features/Tabular/components/TabularFlow.tsx
index e56e6b428..bd874a8ed 100644
--- a/frontend/src/features/Train/features/Tabular/components/TabularFlow.tsx
+++ b/frontend/src/features/Train/features/Tabular/components/TabularFlow.tsx
@@ -1,14 +1,6 @@
 import HtmlTooltip from "@/common/components/HtmlTooltip";
 import InfoIcon from "@mui/icons-material/Info";
-import {
-  Button,
-  Card,
-  Divider,
-  Paper,
-  Stack,
-  TextField,
-  Typography,
-} from "@mui/material";
+import { Button, Card, Divider, Paper, Stack, TextField, Typography } from "@mui/material";
 import React, { useEffect } from "react";
 import ReactFlow, {
   Background,
@@ -24,11 +16,7 @@ import ReactFlow, {
   useNodesState,
 } from "reactflow";
 import "reactflow/dist/style.css";
-import {
-  ALL_LAYERS,
-  DEFAULT_LAYERS,
-  STEP_SETTINGS,
-} from "../constants/tabularConstants";
+import { ALL_LAYERS, DEFAULT_LAYERS, STEP_SETTINGS } from "../constants/tabularConstants";
 import { ParameterData } from "../types/tabularTypes";
 import assert from "assert";
 import { nanoid } from "nanoid/non-secure";
@@ -119,21 +107,16 @@ export default function TabularFlow(props: TabularFlowProps) {
   return (
     <>
       <Paper sx={{ mb: 2 }}>
-        <Stack alignItems="center" spacing={2} padding={2}>
-          <Typography variant="h2" fontSize={25}>
+        <Stack alignItems='center' spacing={2} padding={2}>
+          <Typography variant='h2' fontSize={25}>
             Layers
           </Typography>
-          <Stack
-            direction="row"
-            gap={1}
-            flexWrap="wrap"
-            justifyContent="space-between"
-          >
+          <Stack direction='row' gap={1} flexWrap='wrap' justifyContent='space-between'>
             {STEP_SETTINGS.PARAMETERS.layerValues.map((value) => (
               <Button
                 key={value}
-                variant="outlined"
-                color="primary"
+                variant='outlined'
+                color='primary'
                 onClick={() => {
                   setNodes((cur) => [
                     ...cur,
@@ -148,9 +131,7 @@ export default function TabularFlow(props: TabularFlowProps) {
                         label: STEP_SETTINGS.PARAMETERS.layers[value].label,
                         value: value,
                         onChange: onChange,
-                        parameters: STEP_SETTINGS.PARAMETERS.layers[
-                          value
-                        ].parameters.map(() => 0),
+                        parameters: STEP_SETTINGS.PARAMETERS.layers[value].parameters.map(() => 0),
                       },
                     },
                   ]);
@@ -192,23 +173,14 @@ function TextUpdaterNode(props: TextUpdaterNodeProps) {
 
   return (
     <>
-      <Handle
-        type="target"
-        position={Position.Top}
-        isConnectable={isConnectable}
-      />
+      <Handle type='target' position={Position.Top} isConnectable={isConnectable} />
       <div>
         <Card sx={{ p: 3 }}>
-          <Stack
-            direction="row"
-            justifyContent="space-between"
-            alignItems="center"
-            spacing={3}
-          >
+          <Stack direction='row' justifyContent='space-between' alignItems='center' spacing={3}>
             <HtmlTooltip
               title={
                 <React.Fragment>
-                  <Typography color="inherit">{layer.label}</Typography>
+                  <Typography color='inherit'>{layer.label}</Typography>
                   {layer.description}
                 </React.Fragment>
               }
@@ -216,16 +188,16 @@ function TextUpdaterNode(props: TextUpdaterNodeProps) {
               <InfoIcon>Info</InfoIcon>
             </HtmlTooltip>
 
-            <Typography variant="h3" fontSize={18}>
+            <Typography variant='h3' fontSize={18}>
               {layer.label}
             </Typography>
-            <Stack direction="row" alignItems="center" spacing={3}>
+            <Stack direction='row' alignItems='center' spacing={3}>
               <Stack
-                direction="row"
-                alignItems="center"
-                justifyContent="flex-end"
+                direction='row'
+                alignItems='center'
+                justifyContent='flex-end'
                 spacing={2}
-                divider={<Divider orientation="vertical" flexItem />}
+                divider={<Divider orientation='vertical' flexItem />}
               >
                 {layer.parameters.map((parameter, index) => (
                   <TextField
@@ -239,7 +211,7 @@ function TextUpdaterNode(props: TextUpdaterNodeProps) {
                     key={index}
                     label={parameter.label}
                     defaultValue={data.parameters?.[index]}
-                    size="small"
+                    size='small'
                     type={parameter.type}
                     required
                   />
@@ -249,12 +221,7 @@ function TextUpdaterNode(props: TextUpdaterNodeProps) {
           </Stack>
         </Card>
       </div>
-      <Handle
-        type="source"
-        position={Position.Bottom}
-        id="b"
-        isConnectable={isConnectable}
-      />
+      <Handle type='source' position={Position.Bottom} id='b' isConnectable={isConnectable} />
     </>
   );
 }
@@ -266,9 +233,7 @@ interface OnChangeArgs {
 }
 
 interface LayerNodeData {
-  label:
-    | (typeof STEP_SETTINGS.PARAMETERS.layers)[ALL_LAYERS]["label"]
-    | "Start";
+  label: (typeof STEP_SETTINGS.PARAMETERS.layers)[ALL_LAYERS]["label"] | "Beginning";
   value: ALL_LAYERS | "root";
   parameters?: number[];
   onChange: (args: OnChangeArgs) => void;
@@ -282,7 +247,7 @@ const ROOT_NODE: Node<LayerNodeData> = {
   position: { x: DEFAULT_X_POSITION, y: 0 },
   deletable: false,
   data: {
-    label: "Start",
+    label: "Beginning",
     value: "root",
     parameters: [],
     onChange: () => undefined,
diff --git a/frontend/src/features/Train/features/Tabular/components/TabularParametersStep.tsx b/frontend/src/features/Train/features/Tabular/components/TabularParametersStep.tsx
index ab33fbe27..862be4220 100644
--- a/frontend/src/features/Train/features/Tabular/components/TabularParametersStep.tsx
+++ b/frontend/src/features/Train/features/Tabular/components/TabularParametersStep.tsx
@@ -32,16 +32,11 @@ const TabularParametersStep = ({
   setIsModified,
   setStep,
 }: {
-  renderStepperButtons: (
-    submitTrainspace: (data: TrainspaceData<"PARAMETERS">) => void
-  ) => React.ReactNode;
+  renderStepperButtons: (submitTrainspace: (data: TrainspaceData<"PARAMETERS">) => void) => React.ReactNode;
   setIsModified: React.Dispatch<React.SetStateAction<boolean>>;
   setStep: React.Dispatch<React.SetStateAction<number>>;
 }) => {
-  const trainspace = useAppSelector(
-    (state) =>
-      state.trainspace.current as TrainspaceData<"PARAMETERS"> | undefined
-  );
+  const trainspace = useAppSelector((state) => state.trainspace.current as TrainspaceData<"PARAMETERS"> | undefined);
   const dispatch = useAppDispatch();
   const [getColumns, { data, error }] = useLazyGetColumnsFromDatasetQuery();
   useEffect(() => {
@@ -59,8 +54,7 @@ const TabularParametersStep = ({
     setValue,
   } = useForm<ParameterData>({
     defaultValues: {
-      targetCol:
-        trainspace?.parameterData?.targetCol ?? (null as unknown as undefined),
+      targetCol: trainspace?.parameterData?.targetCol ?? (null as unknown as undefined),
       features: trainspace?.parameterData?.features ?? [],
       problemType: trainspace?.parameterData?.problemType ?? "CLASSIFICATION",
       criterion: trainspace?.parameterData?.criterion ?? "CELOSS",
@@ -85,7 +79,7 @@ const TabularParametersStep = ({
     <Stack spacing={3}>
       {error ? (
         <>
-          <Typography variant="h2" fontSize={25} textAlign={"center"}>
+          <Typography variant='h2' fontSize={25} textAlign={"center"}>
             Error Occurred!
           </Typography>
           <Button
@@ -104,7 +98,7 @@ const TabularParametersStep = ({
         <>
           <Controller
             control={control}
-            name="targetCol"
+            name='targetCol'
             rules={{ required: true }}
             render={({ field: { ref, onChange, ...field } }) => (
               <Autocomplete
@@ -119,25 +113,23 @@ const TabularParametersStep = ({
                       {...params}
                       inputRef={ref}
                       required
-                      label="Target Column"
-                      placeholder="Target"
+                      label='Target Column'
+                      placeholder='Target'
                       error={errors.targetCol ? true : false}
                     />
                   ) : (
-                    <Skeleton width="100%">
+                    <Skeleton width='100%'>
                       <TextField fullWidth />
                     </Skeleton>
                   )
                 }
-                options={
-                  data ? data.filter((col) => !features.includes(col)) : []
-                }
+                options={data ? data.filter((col) => !features.includes(col)) : []}
               />
             )}
           />
           <Controller
             control={control}
-            name="features"
+            name='features'
             rules={{ required: true }}
             render={({ field: { ref, onChange, ...field } }) => (
               <Autocomplete
@@ -153,12 +145,12 @@ const TabularParametersStep = ({
                       {...params}
                       inputRef={ref}
                       required
-                      label="Feature Columns"
-                      placeholder="Features"
+                      label='Feature Columns'
+                      placeholder='Features'
                       error={errors.features ? true : false}
                     />
                   ) : (
-                    <Skeleton width="100%">
+                    <Skeleton width='100%'>
                       <TextField fullWidth />
                     </Skeleton>
                   )
@@ -172,7 +164,7 @@ const TabularParametersStep = ({
       <FormControl>
         <FormLabel>Problem Type</FormLabel>
         <Controller
-          name="problemType"
+          name='problemType'
           control={control}
           rules={{ required: true }}
           render={({ field: { onChange, value } }) => (
@@ -190,11 +182,11 @@ const TabularParametersStep = ({
         />
       </FormControl>
       <Controller
-        name="criterion"
+        name='criterion'
         control={control}
         rules={{ required: true }}
         render={({ field: { onChange, value } }) => (
-          <TextField select label="Criterion" onChange={onChange} value={value}>
+          <TextField select label='Criterion' onChange={onChange} value={value}>
             {STEP_SETTINGS["PARAMETERS"].criterions.map((criterion) => (
               <MenuItem key={criterion.value} value={criterion.value}>
                 {criterion.label}
@@ -204,11 +196,11 @@ const TabularParametersStep = ({
         )}
       />
       <Controller
-        name="optimizerName"
+        name='optimizerName'
         control={control}
         rules={{ required: true }}
         render={({ field: { onChange, value } }) => (
-          <TextField select label="Optimizer" onChange={onChange} value={value}>
+          <TextField select label='Optimizer' onChange={onChange} value={value}>
             {STEP_SETTINGS["PARAMETERS"].optimizers.map((optimizer) => (
               <MenuItem key={optimizer.value} value={optimizer.value}>
                 {optimizer.label}
@@ -219,63 +211,57 @@ const TabularParametersStep = ({
       />
       <FormGroup>
         <Controller
-          name="shuffle"
+          name='shuffle'
           control={control}
           rules={{ required: true }}
           render={({ field: { onChange, value } }) => (
-            <FormControlLabel
-              control={
-                <Switch value={value} onChange={onChange} defaultChecked />
-              }
-              label="Shuffle"
-            />
+            <FormControlLabel control={<Switch value={value} onChange={onChange} defaultChecked />} label='Shuffle' />
           )}
         />
       </FormGroup>
       <Controller
-        name="epochs"
+        name='epochs'
         control={control}
         rules={{ required: true }}
         render={({ field: { onChange, value } }) => (
-          <TextField
-            label="Epochs"
-            type={"number"}
-            onChange={onChange}
-            value={value}
-          />
+          <TextField label='Epochs' type={"number"} onChange={onChange} value={value} />
         )}
       />
       <Controller
-        name="batchSize"
+        name='batchSize'
         control={control}
         rules={{ required: true }}
         render={({ field: { onChange, value } }) => (
-          <TextField
-            label="Batch Size"
-            type={"number"}
-            onChange={onChange}
-            value={value}
-          />
+          <TextField label='Batch Size' type={"number"} onChange={onChange} value={value} />
         )}
       />
       <FormControl>
         <FormLabel>Test Size</FormLabel>
         <Controller
-          name="testSize"
+          name='testSize'
+          control={control}
+          rules={{ required: true }}
+          render={({ field: { onChange, value } }) => (
+            <Slider step={0.01} value={value} onChange={onChange} min={0} max={1} valueLabelDisplay='auto' />
+          )}
+        />
+      </FormControl>
+
+      <FormControl>
+        <FormLabel>Super Cool Dataset?</FormLabel>
+        <Controller
+          name='coolChecker'
           control={control}
           rules={{ required: true }}
           render={({ field: { onChange, value } }) => (
-            <Slider
-              step={0.01}
-              value={value}
-              onChange={onChange}
-              min={0}
-              max={1}
-              valueLabelDisplay="auto"
-            />
+            <RadioGroup row value={value} onChange={onChange}>
+              <FormControlLabel key='Cool' value='Cool' control={<Radio />} label='Yuhhh' />
+              <FormControlLabel key='notCool' value='notCool' control={<Radio />} label='Nawww' />
+            </RadioGroup>
           )}
         />
       </FormControl>
+
       <Paper>
         <TabularFlow setLayers={setLayers} />
       </Paper>
diff --git a/frontend/src/features/Train/features/Tabular/components/TabularTrainspace.tsx b/frontend/src/features/Train/features/Tabular/components/TabularTrainspace.tsx
index 40aef3e08..f9bb1aefb 100644
--- a/frontend/src/features/Train/features/Tabular/components/TabularTrainspace.tsx
+++ b/frontend/src/features/Train/features/Tabular/components/TabularTrainspace.tsx
@@ -3,27 +3,14 @@ import { TrainspaceData } from "@/features/Train/features/Tabular/types/tabularT
 import { UseFormHandleSubmit, useForm } from "react-hook-form";
 import React, { useEffect, useState } from "react";
 import TrainspaceLayout from "@/features/Train/components/TrainspaceLayout";
-import {
-  Button,
-  Stack,
-  Step,
-  StepButton,
-  Stepper,
-  TextField,
-  CircularProgress,
-} from "@mui/material";
-import {
-  TRAINSPACE_SETTINGS,
-  STEP_SETTINGS,
-} from "../constants/tabularConstants";
+import { Button, Stack, Step, StepButton, Stepper, TextField, CircularProgress } from "@mui/material";
+import { TRAINSPACE_SETTINGS, STEP_SETTINGS } from "../constants/tabularConstants";
 import { useTrainTabularMutation } from "../redux/tabularApi";
 import { useRouter } from "next/router";
 import { removeTrainspaceData } from "@/features/Train/redux/trainspaceSlice";
 
 const TabularTrainspace = () => {
-  const trainspace = useAppSelector(
-    (state) => state.trainspace.current as TrainspaceData | undefined
-  );
+  const trainspace = useAppSelector((state) => state.trainspace.current as TrainspaceData | undefined);
   const {
     handleSubmit,
     formState: { errors, isDirty },
@@ -38,9 +25,9 @@ const TabularTrainspace = () => {
       code={`#Code to train your model locally\nprint("Hello World")`}
       nameField={
         <TextField
-          id="filled-basic"
-          label="Name"
-          variant="outlined"
+          id='filled-basic'
+          label='Name'
+          variant='outlined'
           required
           helperText={errors.name ? "Name is required" : ""}
           error={errors.name ? true : false}
@@ -49,17 +36,10 @@ const TabularTrainspace = () => {
         />
       }
       stepper={
-        <Stepper
-          activeStep={Math.min(
-            trainspace.step,
-            TRAINSPACE_SETTINGS.steps.length - 1
-          )}
-        >
+        <Stepper activeStep={Math.min(trainspace.step, TRAINSPACE_SETTINGS.steps.length - 1)}>
           {TRAINSPACE_SETTINGS.steps.map((step, index) => (
             <Step key={step}>
-              <StepButton onClick={() => setStep(index)}>
-                {STEP_SETTINGS[step].name}
-              </StepButton>
+              <StepButton onClick={() => setStep(index)}>{STEP_SETTINGS[step].name}</StepButton>
             </Step>
           ))}
         </Stepper>
@@ -109,29 +89,26 @@ const TrainspaceStepInner = ({
   }
 
   useEffect(() => {
-    if (trainspace.step < TRAINSPACE_SETTINGS.steps.length)
-      setStep(trainspace.step);
+    if (trainspace.step < TRAINSPACE_SETTINGS.steps.length) setStep(trainspace.step);
     else {
       train(trainspace)
         .unwrap()
         .then(({ trainspaceId }) => {
+          console.log("Trainspace submitted with ID:", trainspaceId);
           router.push({ pathname: `/train/${trainspaceId}` }).then(() => {
             dispatch(removeTrainspaceData());
           });
         });
     }
   }, [trainspace]);
-  
+
   if (!Component) return null;
   return (
     <Component
       renderStepperButtons={(submitTrainspace) => (
-        <Stack
-          direction={"row"}
-          justifyContent={step > 0 ? "space-between" : "end"}
-        >
+        <Stack direction={"row"} justifyContent={step > 0 ? "space-between" : "end"}>
           {step > 0 ? (
-            <Button variant="outlined" onClick={() => setStep(step - 1)}>
+            <Button variant='outlined' onClick={() => setStep(step - 1)}>
               Previous
             </Button>
           ) : null}
@@ -139,21 +116,13 @@ const TrainspaceStepInner = ({
           {isButtonClicked ? (
             <Button
               disabled
-              variant={
-                step < trainspace.step && !isStepModified && !isModified
-                  ? "outlined"
-                  : "contained"
-              }
+              variant={step < trainspace.step && !isStepModified && !isModified ? "outlined" : "contained"}
             >
               {trainbuttontext}
             </Button>
           ) : (
             <Button
-              variant={
-                step < trainspace.step && !isStepModified && !isModified
-                  ? "outlined"
-                  : "contained"
-              }
+              variant={step < trainspace.step && !isStepModified && !isModified ? "outlined" : "contained"}
               onClick={() => {
                 if (step < trainspace.step && !isStepModified && !isModified) {
                   setStep(step + 1);
diff --git a/frontend/src/pages/login.tsx b/frontend/src/pages/login.tsx
index 4bc45f4e0..83ef20a2d 100644
--- a/frontend/src/pages/login.tsx
+++ b/frontend/src/pages/login.tsx
@@ -54,10 +54,8 @@ const LoadingOverlay = () => {
           alignItems: "center",
         }}
       >
-        <CircularProgress color="primary" size={80} />
-        <p style={{ marginTop: 10, fontSize: 16 }}>
-          Loading... Please wait a moment
-        </p>
+        <CircularProgress color='primary' size={80} />
+        <p style={{ marginTop: 10, fontSize: 16 }}>Loading... Please wait a moment</p>
       </div>
     </div>
   );
@@ -73,29 +71,31 @@ const Login = () => {
   const user = useAppSelector((state) => state.currentUser.user);
   const router = useRouter();
   const dispatch = useAppDispatch();
+
   useEffect(() => {
     if (router.isReady && isSignedIn(user)) {
       router.replace({ pathname: "/dashboard" });
+      console.log("User email is " + user.email);
     }
   }, [user, router.isReady]);
   const Title = (
     <>
-      <h1 className="title mb-5">
+      <h1 className='title mb-5'>
         No-code Solution for <br />
         Machine Learning
       </h1>
-      <p className="description text-center mb-4">
-        DLP is a playground where you can experiment with machine learning tools
-        by inputting a dataset and use PyTorch modules without writing any code
+      <p className='description text-center mb-4'>
+        DLP is a playground where you can experiment with machine learning tools by inputting a dataset and use PyTorch
+        modules without writing any code
       </p>
     </>
   );
 
   const SocialLogins = (
     <>
-      <div className="d-flex justify-content-evenly mb-5">
+      <div className='d-flex justify-content-evenly mb-5'>
         <Button
-          className="login-button google"
+          className='login-button google'
           style={{
             position: "relative",
           }}
@@ -119,7 +119,7 @@ const Login = () => {
           />
         </Button>
         <Button
-          className="login-button github"
+          className='login-button github'
           style={{ position: "relative" }}
           onClick={async () => {
             setIsLoading(true);
@@ -147,53 +147,45 @@ const Login = () => {
   const EmailPasswordInput = (
     <>
       {isRegistering && (
-        <Form.Group className="mb-3" controlId="login-name">
+        <Form.Group className='mb-3' controlId='login-name'>
           <Form.Label>Name</Form.Label>
-          <Form.Control
-            placeholder="Enter name"
-            onBlur={(e) => setFullName(e.target.value)}
-            autoComplete="name"
-          />
+          <Form.Control placeholder='Enter name' onBlur={(e) => setFullName(e.target.value)} autoComplete='name' />
         </Form.Group>
       )}
 
-      <Form.Group className="mb-3" controlId="login-email">
+      <Form.Group className='mb-3' controlId='login-email'>
         <Form.Label>Email address</Form.Label>
         <Form.Control
-          type="email"
-          placeholder="someone@example.com"
+          type='email'
+          placeholder='someone@example.com'
           onBlur={(e) => setEmail(e.target.value)}
-          autoComplete="email"
+          autoComplete='email'
         />
       </Form.Group>
 
-      <Form.Group className="mb-5" controlId="login-password">
+      <Form.Group className='mb-5' controlId='login-password'>
         <Form.Label>Password</Form.Label>
         <Form.Control
-          type="password"
-          placeholder="Password"
+          type='password'
+          placeholder='Password'
           onBlur={(e) => setPassword(e.target.value)}
-          autoComplete="current-password"
+          autoComplete='current-password'
         />
         {!isRegistering && (
-          <div className="link">
-            <Link href="/forgot">Forgot Password?</Link>
+          <div className='link'>
+            <Link href='/forgot'>Forgot Password?</Link>
           </div>
         )}
       </Form.Group>
       {isRegistering && process.env.REACT_APP_CAPTCHA_SITE_KEY && (
-        <div className="reCaptcha">
-          <ReCAPTCHA
-            sitekey={process.env.REACT_APP_CAPTCHA_SITE_KEY}
-            theme="dark"
-            onChange={(e) => setRecaptcha(e)}
-          />
+        <div className='reCaptcha'>
+          <ReCAPTCHA sitekey={process.env.REACT_APP_CAPTCHA_SITE_KEY} theme='dark' onChange={(e) => setRecaptcha(e)} />
         </div>
       )}
-      <div className="email-buttons d-flex flex-column">
+      <div className='email-buttons d-flex flex-column'>
         <Button
-          id="log-in"
-          className="mb-2"
+          id='log-in'
+          className='mb-2'
           onClick={async () => {
             if (isRegistering) {
               setIsLoading(true);
@@ -218,9 +210,7 @@ const Login = () => {
             } else {
               setIsLoading(true);
               try {
-                await dispatch(
-                  signInViaEmailAndPassword({ email, password })
-                ).unwrap();
+                await dispatch(signInViaEmailAndPassword({ email, password })).unwrap();
               } catch (e) {
                 toast.error((e as SerializedError).message, {
                   position: toast.POSITION.TOP_CENTER,
@@ -232,11 +222,7 @@ const Login = () => {
         >
           {isRegistering ? "Register" : "Log in"}
         </Button>
-        <Button
-          variant="outline-dark"
-          id="sign-up"
-          onClick={() => setIsRegistering((e) => !e)}
-        >
+        <Button variant='outline-dark' id='sign-up' onClick={() => setIsRegistering((e) => !e)}>
           {isRegistering ? "Log in" : "Register"}
         </Button>
       </div>
@@ -258,14 +244,11 @@ const Login = () => {
   return (
     <>
       <NavbarMain />
-      <div
-        id="login-page"
-        className="text-center d-flex justify-content-center"
-      >
-        <div className="main-container mt-5 mb-5">
+      <div id='login-page' className='text-center d-flex justify-content-center'>
+        <div className='main-container mt-5 mb-5'>
           {Title}
 
-          <Form className="form-container p-5">
+          <Form className='form-container p-5'>
             {SocialLogins}
             {EmailPasswordInput}
           </Form>

From 6c6e4dccab55d73845c014664aa8fe2e7f5a186c Mon Sep 17 00:00:00 2001
From: Omanshb <73659149+Omanshb@users.noreply.github.com>
Date: Wed, 25 Oct 2023 15:02:43 -0400
Subject: [PATCH 5/7] part3 changes (endpoint adding)

---
 frontend/src/pages/beginner.tsx | 67 +++++++++++++++++++++++++++++++++
 training/training/urls.py       |  5 +++
 2 files changed, 72 insertions(+)
 create mode 100644 frontend/src/pages/beginner.tsx

diff --git a/frontend/src/pages/beginner.tsx b/frontend/src/pages/beginner.tsx
new file mode 100644
index 000000000..9a4ba4a10
--- /dev/null
+++ b/frontend/src/pages/beginner.tsx
@@ -0,0 +1,67 @@
+import React, { type ReactNode, useState } from "react";
+import Image from "next/image";
+import NavbarMain from "@/common/components/NavBarMain";
+import Footer from "@/common/components/Footer";
+
+const styles = {
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    height: "100vh",
+  },
+  btn: {
+    appearance: "button",
+    backgroundColor: "#000",
+    border: "1px solid #000",
+    borderRadius: "4px",
+    boxShadow: "4px 4px 0 0 rgba(255, 255, 255, 1), 4px 4px 0 1px #000",
+    boxSizing: "border-box",
+    color: "#fff",
+    cursor: "pointer",
+    display: "inline-block",
+    fontFamily: "ITCAvantGardeStd-Bk, Arial, sans-serif",
+    fontSize: "14px",
+    fontWeight: "400",
+    lineHeight: "20px",
+    padding: "12px 40px",
+    textAlign: "center",
+    textTransform: "none",
+    touchAction: "manipulation",
+    userSelect: "none",
+    WebkitUserSelect: "none",
+    whiteSpace: "nowrap",
+  },
+  msg: {
+    marginTop: "20px",
+    fontFamily: "Pacifico, cursive",
+    fontSize: "24px",
+  },
+};
+
+const Beginner = () => {
+  const [responseText, setResponseText] = useState("");
+
+  const handleClick = () => {
+    fetch("http://localhost:8000/api/super_cool_awesome_endpoint")
+      .then((response) => response.json())
+      .then((data) => {
+        setResponseText(data.message);
+      })
+      .catch((error) => {
+        console.error(error);
+      });
+  };
+
+  return (
+    <div style={styles.container as React.CSSProperties}>
+      <button style={styles.btn as React.CSSProperties} onClick={handleClick}>
+        Click me bro
+      </button>
+      {responseText && <h3 style={styles.msg}>{responseText}</h3>}
+    </div>
+  );
+};
+
+export default Beginner;
diff --git a/training/training/urls.py b/training/training/urls.py
index c79e13107..34b27e81c 100644
--- a/training/training/urls.py
+++ b/training/training/urls.py
@@ -30,6 +30,11 @@ def test(request: HttpRequest):
     return 200, {"result": "200 Backend surface test successful"}
 
 
+@api.get("/super_cool_awesome_endpoint")
+def super_cool_awesome_endpoint(request: HttpRequest):
+    return 200, {"message": "Welcome to my super cool awesome endpoint"}
+
+
 api.add_router("/datasets/default/", get_default_datasets_router())
 api.add_router("/tabular", get_tabular_router())
 

From 454c2cc4c7bcc8f85c06a115de76ad8fc1c7f02b Mon Sep 17 00:00:00 2001
From: Omanshb <73659149+Omanshb@users.noreply.github.com>
Date: Wed, 25 Oct 2023 15:47:22 -0400
Subject: [PATCH 6/7] url change

---
 training/training/urls.py | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/training/training/urls.py b/training/training/urls.py
index e0a8b6e1b..ef3e9f1c2 100644
--- a/training/training/urls.py
+++ b/training/training/urls.py
@@ -35,8 +35,9 @@ def super_cool_awesome_endpoint(request: HttpRequest):
     return 200, {"message": "Welcome to my super cool awesome endpoint"}
 
 
-api.add_router("/datasets/default/", get_default_datasets_router())
-api.add_router("/tabular", get_tabular_router())
+api.add_router("/datasets/default/", default_dataset_router)
+api.add_router("/tabular", tabular_router)
+
 
 urlpatterns = [
     path("admin/", admin.site.urls),

From c18387bac56c529c4eb7f0b25d3d09c52b4506f1 Mon Sep 17 00:00:00 2001
From: Omanshb <Omanshb@users.noreply.github.com>
Date: Wed, 25 Oct 2023 20:56:24 +0000
Subject: [PATCH 7/7] :art: Auto-generated directory tree for repository in
 Architecture.md

---
 .github/Architecture.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/Architecture.md b/.github/Architecture.md
index 0217372e0..f0337f377 100644
--- a/.github/Architecture.md
+++ b/.github/Architecture.md
@@ -109,6 +109,7 @@
 |  |  |  |- 📂 train:
 |  |  |  |  |- 📜 index.tsx
 |  |  |  |  |- 📜 [train_space_id].tsx
+|  |  |  |- 📜 beginner.tsx
 |  |  |  |- 📜 dashboard.tsx
 |  |  |  |- 📜 LearnContent.tsx
 |  |  |  |- 📜 _document.tsx