From 160a7be9db36e6b706e851233b44e6a800c095b4 Mon Sep 17 00:00:00 2001
From: Pratham Khanal <pkprathamkhanal@gmail.com>
Date: Tue, 14 Apr 2026 15:15:38 -0500
Subject: [PATCH 1/4] Create index.js

Introduced a new Help page to provide users with setup guidance and additional resources. The page includes a video tutorial for running Redux locally and a collection of external links for learning and documentation.
---
 pages/help/index.js | 214 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 214 insertions(+)
 create mode 100644 pages/help/index.js

diff --git a/pages/help/index.js b/pages/help/index.js
new file mode 100644
index 0000000..2e4723d
--- /dev/null
+++ b/pages/help/index.js
@@ -0,0 +1,214 @@
+import ResponsiveAppBar from "../../components/widgets/ResponsiveAppBar";
+/**
+ * UI Components. Every concepts are taken from aboutus page.
+ */
+import {
+  createTheme,
+  ThemeProvider,
+  Container,
+  Box,
+  Typography,
+  CssBaseline,
+  Link,
+} from "@mui/material";
+/**
+ * External links for additional documentations. 
+ */
+const resourceLinks = [
+  { label: "GitHub", url: "https://github.com/ReduxISU/" },
+  {
+    label: "Wikipedia: What is NP-Complete?",
+    url: "https://en.wikipedia.org/wiki/NP-completeness",
+  },
+  {
+    label: "Karp's 21 NP-Complete Problems",
+    url: "https://cgi.di.uoa.gr/~sgk/teaching/grad/handouts/karp.pdf",
+  },
+  {
+    label: "Redux GUI Documentation",
+    url: "https://github.com/ReduxISU/Redux_GUI/blob/ReduxAPI_GUI/Documentation/index.md",
+  },
+  {
+    label: "Redux Backend Documentation",
+    url: "https://github.com/ReduxISU/Redux/blob/CSharpAPI/Documentation/index.md",
+  },
+  {
+    label: "API Swagger Documentation",
+    url: "https://api.redux.portneuf.cose.isu.edu/swagger/index.html",
+  },
+];
+/**
+ * This is the theme configuration for the whole page.
+ */
+const theme = createTheme({
+  palette: {
+    mode: "dark",
+    primary: { main: "#8b5cf6" },
+    secondary: { main: "#a855f7" },
+    background: {
+      default: "#07070b",
+      paper: "rgba(255,255,255,0.04)",
+    },
+    text: {
+      primary: "#ffffff",
+      secondary: "#b4b4c7",
+    },
+  },
+  typography: {
+    fontFamily:
+      'Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+  },
+});
+
+/**
+ * We have box styling across all the sections. 
+ * And this is the common pattern for the box styling
+ */
+const sectionCardStyle = {
+  background: "rgba(255,255,255,0.05)",
+  backdropFilter: "blur(10px)",
+  borderRadius: "16px",
+  border: "1px solid rgba(255,255,255,0.10)",
+  padding: { xs: 3, md: 4 },
+  transition: "all 0.3s ease",
+  "&:hover": {
+    borderColor: "rgba(168,85,247,0.4)",
+    boxShadow: "0 0 25px rgba(168,85,247,0.15)",
+  },
+};
+
+/**
+ * This is the typography for each section's title.
+ */
+function SectionTitle({ children }) {
+  return (
+    <Typography
+      sx={{
+        color: "#ffffff",
+        fontSize: "0.85rem",
+        fontWeight: 600,
+        letterSpacing: "0.22em",
+        mb: 2,
+      }}
+    >
+      {children}
+    </Typography>
+  );
+}
+/**
+ * This is the help page component. 
+ * This provides the YouTube tutorial for Redux setup.
+ */
+export default function HelpPage() {
+  return (
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+
+      {/* Background has been inserted with subtle purple gradient */}
+      <Box
+        sx={{
+          minHeight: "100vh",
+          background: `
+            radial-gradient(circle at 50% -10%, rgba(139,92,246,0.18), transparent 50%),
+            linear-gradient(180deg, #09090f 0%, #07070b 100%)
+          `,
+        }}
+      >
+        <ResponsiveAppBar />
+
+        <Container maxWidth="lg" sx={{ pt: 2 }}>
+          <Box sx={{ maxWidth: "900px", mx: "auto" }}>
+
+            {/* Intro Section */}
+            <Box sx={{ ...sectionCardStyle, mb: 1.5 }}>
+              <SectionTitle>HELP</SectionTitle>
+
+              <Typography
+                sx={{
+                  color: "#d1d5db",
+                  fontSize: "0.87rem",
+                  lineHeight: 1.9,
+                }}
+              >
+                This page includes a setup tutorial and additional resources to help
+                you use Redux and explore NP-Complete problems in more detail.
+              </Typography>
+            </Box>
+
+            {/* Video Tutorial Section */}
+            <Box sx={{ ...sectionCardStyle, mb: 1.5 }}>
+              <SectionTitle>VIDEO TUTORIAL</SectionTitle>
+
+              <Typography
+                sx={{
+                  color: "#d1d5db",
+                  fontSize: "0.87rem",
+                  lineHeight: 1.8,
+                  mb: 2,
+                }}
+              >
+                With the guidance of Dr. Paul Bodily and Michael Trosper, we are
+                excited to share the Redux setup tutorial. This video walks through
+                running Redux locally. More tutorials will be added over time.
+              </Typography>
+
+              <Box
+                sx={{
+                  width: "100%",
+                  borderRadius: "12px",
+                  overflow: "hidden",
+                  border: "1px solid rgba(255,255,255,0.06)",
+                }}
+              >
+                <iframe
+                  width="100%"
+                  height="420"
+                  src="https://www.youtube.com/embed/9vTl522tyhU"
+                  title="Redux Setup Tutorial"
+                  frameBorder="0"
+                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                  allowFullScreen
+                />
+              </Box>
+            </Box>
+
+            {/* Section where there are links to the resources*/}
+            <Box sx={{ ...sectionCardStyle, mb: 4 }}>
+              <SectionTitle>LEARN MORE</SectionTitle>
+
+              <Typography
+                sx={{
+                  color: "#d1d5db",
+                  fontSize: "0.87rem",
+                  mb: 2,
+                }}
+              >
+                Additional documentation can be found at the following links:
+              </Typography>
+
+              <Box sx={{ display: "grid", gap: 1.2 }}>
+                {resourceLinks.map((link) => (
+                  <Link
+                    key={link.label}
+                    href={link.url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    underline="none"
+                    sx={{
+                      color: "#c084fc",
+                      fontSize: "0.8rem",
+                      "&:hover": { color: "#e9d5ff" },
+                    }}
+                  >
+                    • {link.label}
+                  </Link>
+                ))}
+              </Box>
+            </Box>
+
+          </Box>
+        </Container>
+      </Box>
+    </ThemeProvider>
+  );
+}

From e204f2a186199f01966f187477f5737ce1fca4c0 Mon Sep 17 00:00:00 2001
From: Pratham Khanal <pkprathamkhanal@gmail.com>
Date: Wed, 6 May 2026 01:48:44 -0500
Subject: [PATCH 2/4] Update index.js
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Updated Help page with redesigned educational resources layout and light theme styling.

Changes made:

* Reworked Help page structure to align with updated About Us page styling
* Converted Help page from dark purple theme to light academic theme
* Updated navbar/theme primary color to dark gray (#3F3F46)
* Added “Welcome to Redux” introductory section
* Added educational complexity theory reference links using Wikipedia resources
* Added curated links for:

  * Computational problems
  * Algorithms
  * Complexity classes
  * NP-completeness concepts
  * Karp’s NP-complete problems
  * Reductions and approximation algorithms
* Added “Access Redux Content” section
* Added RESTful API access link using Swagger documentation
* Added placeholder section for future C# Library import instructions
* Updated card styling, spacing, shadows, borders, and hover effects
* Updated hyperlink styling to ISU-inspired orange accent color (#F47C20)
* Improved typography consistency and responsive layout spacing
* Removed outdated tutorial-focused dark theme layout
* Standardized Help page visual design with the updated Redux frontend theme
---
 pages/help/index.js | 267 +++++++++++++++++++++++++-------------------
 1 file changed, 154 insertions(+), 113 deletions(-)

diff --git a/pages/help/index.js b/pages/help/index.js
index 2e4723d..f189290 100644
--- a/pages/help/index.js
+++ b/pages/help/index.js
@@ -1,7 +1,5 @@
 import ResponsiveAppBar from "../../components/widgets/ResponsiveAppBar";
-/**
- * UI Components. Every concepts are taken from aboutus page.
- */
+
 import {
   createTheme,
   ThemeProvider,
@@ -11,47 +9,81 @@ import {
   CssBaseline,
   Link,
 } from "@mui/material";
-/**
- * External links for additional documentations. 
- */
-const resourceLinks = [
-  { label: "GitHub", url: "https://github.com/ReduxISU/" },
+
+const backgroundLinks = [
+  {
+    label: "Wikipedia: Computational problem",
+    url: "https://en.wikipedia.org/wiki/Computational_problem",
+  },
   {
-    label: "Wikipedia: What is NP-Complete?",
+    label: "Wikipedia: Algorithm",
+    url: "https://en.wikipedia.org/wiki/Algorithm",
+  },
+  {
+    label: "Wikipedia: List of algorithms",
+    url: "https://en.wikipedia.org/wiki/List_of_algorithms",
+  },
+  {
+    label: "Wikipedia: Complexity class",
+    url: "https://en.wikipedia.org/wiki/Complexity_class",
+  },
+  {
+    label: "Wikipedia: P (complexity)",
+    url: "https://en.wikipedia.org/wiki/P_(complexity)",
+  },
+  {
+    label: "Wikipedia: NP (complexity)",
+    url: "https://en.wikipedia.org/wiki/NP_(complexity)",
+  },
+  {
+    label: "Wikipedia: NP-hardness",
+    url: "https://en.wikipedia.org/wiki/NP-hardness",
+  },
+  {
+    label: "Wikipedia: NP-completeness",
     url: "https://en.wikipedia.org/wiki/NP-completeness",
   },
   {
-    label: "Karp's 21 NP-Complete Problems",
-    url: "https://cgi.di.uoa.gr/~sgk/teaching/grad/handouts/karp.pdf",
+    label: "Wikipedia: Karp's 21 NP-complete problems",
+    url: "https://en.wikipedia.org/wiki/Karp%27s_21_NP-complete_problems",
+  },
+  {
+    label: "Wikipedia: List of NP-complete problems",
+    url: "https://en.wikipedia.org/wiki/List_of_NP-complete_problems",
+  },
+  {
+    label: "Wikipedia: Many-one reduction",
+    url: "https://en.wikipedia.org/wiki/Many-one_reduction",
   },
   {
-    label: "Redux GUI Documentation",
-    url: "https://github.com/ReduxISU/Redux_GUI/blob/ReduxAPI_GUI/Documentation/index.md",
+    label: "Wikipedia: Gadget (computer science)",
+    url: "https://en.wikipedia.org/wiki/Gadget_(computer_science)",
   },
   {
-    label: "Redux Backend Documentation",
-    url: "https://github.com/ReduxISU/Redux/blob/CSharpAPI/Documentation/index.md",
+    label: "Wikipedia: Approximation algorithm",
+    url: "https://en.wikipedia.org/wiki/Approximation_algorithm",
   },
+];
+
+const accessLinks = [
   {
-    label: "API Swagger Documentation",
+    label: "RESTful API",
     url: "https://api.redux.portneuf.cose.isu.edu/swagger/index.html",
   },
 ];
-/**
- * This is the theme configuration for the whole page.
- */
+
 const theme = createTheme({
   palette: {
-    mode: "dark",
-    primary: { main: "#8b5cf6" },
-    secondary: { main: "#a855f7" },
+    mode: "light",
+    primary: { main: "#3F3F46" },
+    secondary: { main: "#F47C20" },
     background: {
-      default: "#07070b",
-      paper: "rgba(255,255,255,0.04)",
+      default: "#F9FAFB",
+      paper: "#FFFFFF",
     },
     text: {
-      primary: "#ffffff",
-      secondary: "#b4b4c7",
+      primary: "#111827",
+      secondary: "#4B5563",
     },
   },
   typography: {
@@ -60,33 +92,39 @@ const theme = createTheme({
   },
 });
 
-/**
- * We have box styling across all the sections. 
- * And this is the common pattern for the box styling
- */
 const sectionCardStyle = {
-  background: "rgba(255,255,255,0.05)",
-  backdropFilter: "blur(10px)",
+  background: "#FFFFFF",
   borderRadius: "16px",
-  border: "1px solid rgba(255,255,255,0.10)",
+  border: "1px solid #E5E7EB",
   padding: { xs: 3, md: 4 },
-  transition: "all 0.3s ease",
+  boxShadow: "0 8px 24px rgba(0,0,0,0.04)",
+  transition: "all 0.25s ease",
+  "&:hover": {
+    borderColor: "#8b5cf6",
+    boxShadow: "0 12px 30px rgba(0,0,0,0.07)",
+  },
+};
+
+const innerCard = {
+  background: "#F9FAFB",
+  border: "1px solid #E5E7EB",
+  borderRadius: "10px",
+  px: 1.2,
+  py: 1,
+  transition: "all 0.2s ease",
   "&:hover": {
-    borderColor: "rgba(168,85,247,0.4)",
-    boxShadow: "0 0 25px rgba(168,85,247,0.15)",
+    borderColor: "#8b5cf6",
+    background: "#FFFFFF",
   },
 };
 
-/**
- * This is the typography for each section's title.
- */
 function SectionTitle({ children }) {
   return (
     <Typography
       sx={{
-        color: "#ffffff",
+        color: "#111827",
         fontSize: "0.85rem",
-        fontWeight: 600,
+        fontWeight: 700,
         letterSpacing: "0.22em",
         mb: 2,
       }}
@@ -95,117 +133,120 @@ function SectionTitle({ children }) {
     </Typography>
   );
 }
-/**
- * This is the help page component. 
- * This provides the YouTube tutorial for Redux setup.
- */
+
 export default function HelpPage() {
   return (
     <ThemeProvider theme={theme}>
       <CssBaseline />
 
-      {/* Background has been inserted with subtle purple gradient */}
       <Box
         sx={{
           minHeight: "100vh",
-          background: `
-            radial-gradient(circle at 50% -10%, rgba(139,92,246,0.18), transparent 50%),
-            linear-gradient(180deg, #09090f 0%, #07070b 100%)
-          `,
+          background:
+            "radial-gradient(circle at top, rgba(139,92,246,0.08), transparent 38%), #F9FAFB",
         }}
       >
         <ResponsiveAppBar />
 
-        <Container maxWidth="lg" sx={{ pt: 2 }}>
-          <Box sx={{ maxWidth: "900px", mx: "auto" }}>
-
-            {/* Intro Section */}
+        <Container maxWidth="lg" sx={{ pt: 4, pb: 5 }}>
+          <Box sx={{ maxWidth: "980px", mx: "auto" }}>
             <Box sx={{ ...sectionCardStyle, mb: 1.5 }}>
-              <SectionTitle>HELP</SectionTitle>
+              <SectionTitle>WELCOME TO REDUX</SectionTitle>
 
               <Typography
                 sx={{
-                  color: "#d1d5db",
+                  color: "#374151",
                   fontSize: "0.87rem",
                   lineHeight: 1.9,
+                  textAlign: "justify",
+                  mb: 2.2,
                 }}
               >
-                This page includes a setup tutorial and additional resources to help
-                you use Redux and explore NP-Complete problems in more detail.
+                Redux is a dynamic, interactive computer science knowledgebase
+                consisting of canonical computer science problems, solutions,
+                and reduction algorithms. The following pages provide helpful
+                background to the organization of problems, solutions, and
+                reductions in Redux based on the concept of complexity classes:
               </Typography>
-            </Box>
-
-            {/* Video Tutorial Section */}
-            <Box sx={{ ...sectionCardStyle, mb: 1.5 }}>
-              <SectionTitle>VIDEO TUTORIAL</SectionTitle>
 
-              <Typography
-                sx={{
-                  color: "#d1d5db",
-                  fontSize: "0.87rem",
-                  lineHeight: 1.8,
-                  mb: 2,
-                }}
-              >
-                With the guidance of Dr. Paul Bodily and Michael Trosper, we are
-                excited to share the Redux setup tutorial. This video walks through
-                running Redux locally. More tutorials will be added over time.
-              </Typography>
-
-              <Box
-                sx={{
-                  width: "100%",
-                  borderRadius: "12px",
-                  overflow: "hidden",
-                  border: "1px solid rgba(255,255,255,0.06)",
-                }}
-              >
-                <iframe
-                  width="100%"
-                  height="420"
-                  src="https://www.youtube.com/embed/9vTl522tyhU"
-                  title="Redux Setup Tutorial"
-                  frameBorder="0"
-                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-                  allowFullScreen
-                />
+              <Box sx={{ display: "grid", gap: 1 }}>
+                {backgroundLinks.map((link) => (
+                  <Box key={link.label} sx={innerCard}>
+                    <Link
+                      href={link.url}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      underline="hover"
+                      sx={{
+                        color: "#F47C20",
+                        fontWeight: 600,
+                        fontSize: "0.82rem",
+                      }}
+                    >
+                      {link.label}
+                    </Link>
+                  </Box>
+                ))}
               </Box>
             </Box>
 
-            {/* Section where there are links to the resources*/}
-            <Box sx={{ ...sectionCardStyle, mb: 4 }}>
-              <SectionTitle>LEARN MORE</SectionTitle>
+            <Box sx={{ ...sectionCardStyle, mb: 1.5 }}>
+              <SectionTitle>ACCESS REDUX CONTENT</SectionTitle>
 
               <Typography
                 sx={{
-                  color: "#d1d5db",
+                  color: "#374151",
                   fontSize: "0.87rem",
+                  lineHeight: 1.9,
+                  textAlign: "justify",
                   mb: 2,
                 }}
               >
-                Additional documentation can be found at the following links:
+                All of the content of the Redux knowledge base can be accessed
+                directly via:
               </Typography>
 
-              <Box sx={{ display: "grid", gap: 1.2 }}>
-                {resourceLinks.map((link) => (
-                  <Link
-                    key={link.label}
-                    href={link.url}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    underline="none"
+              <Box sx={{ display: "grid", gap: 1 }}>
+                {accessLinks.map((link) => (
+                  <Box key={link.label} sx={innerCard}>
+                    <Link
+                      href={link.url}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      underline="hover"
+                      sx={{
+                        color: "#F47C20",
+                        fontWeight: 600,
+                        fontSize: "0.82rem",
+                      }}
+                    >
+                      {link.label}
+                    </Link>
+                  </Box>
+                ))}
+
+                <Box sx={innerCard}>
+                  <Typography
                     sx={{
-                      color: "#c084fc",
-                      fontSize: "0.8rem",
-                      "&:hover": { color: "#e9d5ff" },
+                      color: "#374151",
+                      fontSize: "0.82rem",
+                      lineHeight: 1.7,
                     }}
                   >
-                    • {link.label}
-                  </Link>
-                ))}
+                    C# Library import{" "}
+                    <Box
+                      component="span"
+                      sx={{
+                        color: "#6B7280",
+                        fontStyle: "italic",
+                      }}
+                    >
+                      (instructions coming soon)
+                    </Box>
+                  </Typography>
+                </Box>
               </Box>
             </Box>
-
           </Box>
         </Container>
       </Box>

From 3c03982b34c19764df6302361c0a1e0fc570ebd1 Mon Sep 17 00:00:00 2001
From: Pratham Khanal <pkprathamkhanal@gmail.com>
Date: Wed, 6 May 2026 01:50:31 -0500
Subject: [PATCH 3/4] Update ResponsiveAppBar.js

Added Help and Contribute
---
 components/widgets/ResponsiveAppBar.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/widgets/ResponsiveAppBar.js b/components/widgets/ResponsiveAppBar.js
index 09ee18c..dc6e614 100644
--- a/components/widgets/ResponsiveAppBar.js
+++ b/components/widgets/ResponsiveAppBar.js
@@ -24,7 +24,7 @@ import MenuItem from '@mui/material/MenuItem';
 import AdbIcon from '@mui/icons-material/Adb';
 
 //const pages = ['Home', 'Tutorials', 'About Us', 'Navigation Graph'];
-const pages = ['Home', 'About Us']
+const pages = ['Home', 'About Us', 'Help','Contribute']
 
 const ResponsiveAppBar = (props) => {
   const [anchorElNav, setAnchorElNav] = React.useState(null);

From 9a4b2c971da2684afd753d72023961452014055c Mon Sep 17 00:00:00 2001
From: Pratham Khanal <pkprathamkhanal@gmail.com>
Date: Thu, 21 May 2026 11:35:43 -0500
Subject: [PATCH 4/4] Update index.js

Made changes in Help Tab, including adding orange hover instead of purple, and removing Wikipedia in every line of the "WELCOME TO REDUX" section as reviewed with Dr. Bodily.
---
 pages/help/index.js | 106 ++++++++++++++++++++++++++++++--------------
 1 file changed, 72 insertions(+), 34 deletions(-)

diff --git a/pages/help/index.js b/pages/help/index.js
index f189290..08c9b18 100644
--- a/pages/help/index.js
+++ b/pages/help/index.js
@@ -1,4 +1,5 @@
 import ResponsiveAppBar from "../../components/widgets/ResponsiveAppBar";
+import isulogo from "../../components/images/ISULogo.png";
 
 import {
   createTheme,
@@ -12,55 +13,55 @@ import {
 
 const backgroundLinks = [
   {
-    label: "Wikipedia: Computational problem",
+    label: "Computational problem",
     url: "https://en.wikipedia.org/wiki/Computational_problem",
   },
   {
-    label: "Wikipedia: Algorithm",
+    label: "Algorithm",
     url: "https://en.wikipedia.org/wiki/Algorithm",
   },
   {
-    label: "Wikipedia: List of algorithms",
+    label: "List of algorithms",
     url: "https://en.wikipedia.org/wiki/List_of_algorithms",
   },
   {
-    label: "Wikipedia: Complexity class",
+    label: "Complexity class",
     url: "https://en.wikipedia.org/wiki/Complexity_class",
   },
   {
-    label: "Wikipedia: P (complexity)",
+    label: "P (complexity)",
     url: "https://en.wikipedia.org/wiki/P_(complexity)",
   },
   {
-    label: "Wikipedia: NP (complexity)",
+    label: "NP (complexity)",
     url: "https://en.wikipedia.org/wiki/NP_(complexity)",
   },
   {
-    label: "Wikipedia: NP-hardness",
+    label: "NP-hardness",
     url: "https://en.wikipedia.org/wiki/NP-hardness",
   },
   {
-    label: "Wikipedia: NP-completeness",
+    label: "NP-completeness",
     url: "https://en.wikipedia.org/wiki/NP-completeness",
   },
   {
-    label: "Wikipedia: Karp's 21 NP-complete problems",
+    label: "Karp's 21 NP-complete problems",
     url: "https://en.wikipedia.org/wiki/Karp%27s_21_NP-complete_problems",
   },
   {
-    label: "Wikipedia: List of NP-complete problems",
+    label: "List of NP-complete problems",
     url: "https://en.wikipedia.org/wiki/List_of_NP-complete_problems",
   },
   {
-    label: "Wikipedia: Many-one reduction",
+    label: "Many-one reduction",
     url: "https://en.wikipedia.org/wiki/Many-one_reduction",
   },
   {
-    label: "Wikipedia: Gadget (computer science)",
+    label: "Gadget (computer science)",
     url: "https://en.wikipedia.org/wiki/Gadget_(computer_science)",
   },
   {
-    label: "Wikipedia: Approximation algorithm",
+    label: "Approximation algorithm",
     url: "https://en.wikipedia.org/wiki/Approximation_algorithm",
   },
 ];
@@ -100,7 +101,7 @@ const sectionCardStyle = {
   boxShadow: "0 8px 24px rgba(0,0,0,0.04)",
   transition: "all 0.25s ease",
   "&:hover": {
-    borderColor: "#8b5cf6",
+    borderColor: "#F47C20",
     boxShadow: "0 12px 30px rgba(0,0,0,0.07)",
   },
 };
@@ -113,7 +114,7 @@ const innerCard = {
   py: 1,
   transition: "all 0.2s ease",
   "&:hover": {
-    borderColor: "#8b5cf6",
+    borderColor: "#F47C20",
     background: "#FFFFFF",
   },
 };
@@ -169,25 +170,32 @@ export default function HelpPage() {
                 reductions in Redux based on the concept of complexity classes:
               </Typography>
 
-              <Box sx={{ display: "grid", gap: 1 }}>
-                {backgroundLinks.map((link) => (
-                  <Box key={link.label} sx={innerCard}>
-                    <Link
-                      href={link.url}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      underline="hover"
-                      sx={{
-                        color: "#F47C20",
-                        fontWeight: 600,
-                        fontSize: "0.82rem",
-                      }}
-                    >
-                      {link.label}
-                    </Link>
-                  </Box>
-                ))}
-              </Box>
+              <Typography
+  sx={{
+    color: "#374151",
+    fontSize: "0.87rem",
+    lineHeight: 1.9,
+    textAlign: "justify",
+  }}
+>
+  {backgroundLinks.map((link, index) => (
+    <span key={link.label}>
+      <Link
+        href={link.url}
+        target="_blank"
+        rel="noopener noreferrer"
+        underline="hover"
+        sx={{
+          color: "#F47C20",
+          fontWeight: 600,
+        }}
+      >
+        {link.label}
+      </Link>
+      {index < backgroundLinks.length - 1 ? ", " : "."}
+    </span>
+  ))}
+</Typography>
             </Box>
 
             <Box sx={{ ...sectionCardStyle, mb: 1.5 }}>
@@ -249,6 +257,36 @@ export default function HelpPage() {
             </Box>
           </Box>
         </Container>
+        <Box
+  sx={{
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    pt: 2,
+    pb: 3,
+  }}
+>
+  <Link
+    href="https://www.isu.edu/cs/"
+    target="_blank"
+    rel="noopener noreferrer"
+    underline="none"
+    sx={{ display: "inline-flex" }}
+  >
+    <Box
+      component="img"
+      src={isulogo.src}
+      alt="Idaho State University Computer Science"
+      sx={{
+        height: 72,
+        width: "auto",
+        display: "block",
+        opacity: 1,
+        filter: "none",
+      }}
+    />
+  </Link>
+</Box>
       </Box>
     </ThemeProvider>
   );