diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index a3c3b867..bf0773a3 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -15,6 +15,7 @@ import LinksDefaultPage from "./scenes/links/LinksDefaultPage";
 import ToursDefaultPage from "./scenes/tours/ToursDefaultPage";
 import PopupDefaultPage from "./scenes/popup/PopupDefaultPage";
 import HintDefaultPage from "./scenes/hints/HintDefaultPage";
+import CreateHintPage from "./scenes/hints/CreateHintPage";
 import HintPage from "./scenes/hints/HintPage";
 import CreatePopupPage from "./scenes/popup/CreatePopupPage";
 
@@ -24,10 +25,13 @@ function App() {
   return (
     <>
       <Routes>
-        <Route path="/" element={isLoggedIn ? <Private Component={Home} /> : <LoginPage />} />
+        <Route
+          path="/"
+          element={isLoggedIn ? <Private Component={Home} /> : <LoginPage />}
+        />
         {/* <Route path="/home" element={<Private Component={Home} />} /> */}
         {/* <Route path="/" element={isLoggedIn ? <Home/> : <LoginPage />} />         */}
-        <Route path="/login" element={<LoginPage />} />        
+        <Route path="/login" element={<LoginPage />} />
         <Route path="/signup" element={<CreateAccountPage />} />
         <Route path="/forgot-password" element={<ForgotPasswordPage />} />
         <Route path="/reset-password" element={<PasswordResetPage />} />
@@ -40,8 +44,9 @@ function App() {
         <Route path="/popup" element={<PopupDefaultPage />} />
         <Route path="/link" element={<LinksDefaultPage />} />
         <Route path="/tour" element={<ToursDefaultPage />} />
-        <Route path="/hint" element={<HintDefaultPage />} />
-        <Route path="/hint/create" element={<HintPage />} />
+        <Route path="/hint-default" element={<HintDefaultPage />} />
+        <Route path="/hint/create" element={<CreateHintPage />} />
+        <Route path="/hint" element={<HintPage />} />
       </Routes>
     </>
   );
diff --git a/frontend/src/components/HintPageComponents/HintLeftContent/HintLeftContent.jsx b/frontend/src/components/HintPageComponents/HintLeftContent/HintLeftContent.jsx
index fac815a4..9744ca32 100644
--- a/frontend/src/components/HintPageComponents/HintLeftContent/HintLeftContent.jsx
+++ b/frontend/src/components/HintPageComponents/HintLeftContent/HintLeftContent.jsx
@@ -4,6 +4,7 @@ import CustomTextField from "../../TextFieldComponents/CustomTextField/CustomTex
 import "./HintLeftContent.css";
 
 const HintLeftContent = ({ setLeftContentFormData, formData }) => {
+  
   const handleChange = (name) => (e) => {
     setLeftContentFormData({ ...formData, [name]: e.target.value });
   };
diff --git a/frontend/src/components/templates/GuideTemplate/GuideTemplate.jsx b/frontend/src/components/templates/GuideTemplate/GuideTemplate.jsx
index 17ec085c..44e97e19 100644
--- a/frontend/src/components/templates/GuideTemplate/GuideTemplate.jsx
+++ b/frontend/src/components/templates/GuideTemplate/GuideTemplate.jsx
@@ -1,7 +1,7 @@
 import { React } from 'react';
 import PropTypes from 'prop-types';
 import CloseOutlinedIcon from '@mui/icons-material/CloseOutlined';
-import styles from './GuideTemplate.module.scss';
+//import styles from './GuideTemplate.module.scss';
 import classNames from 'classnames';
 import Button from '../../Button/Button';
 import { useNavigate } from 'react-router-dom';
diff --git a/frontend/src/scenes/hints/CreateHintPage.jsx b/frontend/src/scenes/hints/CreateHintPage.jsx
new file mode 100644
index 00000000..d7e32619
--- /dev/null
+++ b/frontend/src/scenes/hints/CreateHintPage.jsx
@@ -0,0 +1,86 @@
+import React, { useState } from "react";
+import HomePageTemplate from "../../templates/HomePageTemplate/HomePageTemplate";
+import GuideTemplate from "../../templates/GuideTemplate/GuideTemplate";
+import RichTextEditor from "../../components/RichTextEditor/RichTextEditor";
+import HintLeftContent from "../../components/HintPageComponents/HintLeftContent/HintLeftContent";
+import HintLeftAppearance from "../../components/HintPageComponents/HintLeftAppearance/HintLeftAppearance";
+
+const HintPage = () => {
+  const [activeButton, setActiveButton] = useState(0);
+  const [leftContentFormData, setLeftContentFormData] = useState({
+    actionButtonUrl: "https//",
+    actionButtonText: "",
+    targetElement: ".element",
+  });
+
+  const handleButtonClick = (index) => {
+    setActiveButton(index);
+  };
+
+  const [headerBackgroundColor, setHeaderBackgroundColor] = useState("#F8F9F8");
+  const [headerColor, setHeaderColor] = useState("#101828");
+  const [textColor, setTextColor] = useState("#344054");
+  const [buttonBackgroundColor, setButtonBackgroundColor] = useState("#7F56D9");
+  const [buttonTextColor, setButtonTextColor] = useState("#FFFFFF");
+
+  const stateList = [
+    {
+      stateName: "Header Background Color",
+      state: headerBackgroundColor,
+      setState: setHeaderBackgroundColor,
+    },
+    {
+      stateName: "Header Color",
+      state: headerColor,
+      setState: setHeaderColor,
+    },
+    { stateName: "Text Color", state: textColor, setState: setTextColor },
+    {
+      stateName: "Button Background Color",
+      state: buttonBackgroundColor,
+      setState: setButtonBackgroundColor,
+    },
+    {
+      stateName: "Button Text Color",
+      state: buttonTextColor,
+      setState: setButtonTextColor,
+    },
+  ];
+
+  return (
+    <div>
+      <HomePageTemplate>
+        <GuideTemplate
+          title="New Hint"
+          activeButton={activeButton}
+          handleButtonClick={handleButtonClick}
+          rightContent={() => (
+            <RichTextEditor
+              previewBtnText={leftContentFormData.actionButtonText}
+              headerBackgroundColor={headerBackgroundColor}
+              headerColor={headerColor}
+              textColor={textColor}
+              buttonBackgroundColor={buttonBackgroundColor}
+              buttonTextColor={buttonTextColor}
+              sx={{
+                width: "100%",
+                maxWidth: "700px",
+                marginLeft: "2.5rem",
+                marginTop: "1rem",
+              }}
+            />
+          )}
+          leftContent={() => (
+            <HintLeftContent
+              formData={leftContentFormData}
+              setLeftContentFormData={setLeftContentFormData}
+            />
+          )}
+          leftAppearance={() => <HintLeftAppearance data={stateList} />}
+        />
+      </HomePageTemplate>
+    </div>
+  );
+};
+
+export default HintPage;
diff --git a/frontend/src/scenes/hints/HintPage.css b/frontend/src/scenes/hints/HintPage.css
new file mode 100644
index 00000000..07f8ea87
--- /dev/null
+++ b/frontend/src/scenes/hints/HintPage.css
@@ -0,0 +1,37 @@
+.hint-page-container {
+  display: grid;
+  grid-template-columns: 3fr 1fr;
+  grid-gap: 20px;
+  width: 100%;
+  padding: 2% 3%;
+}
+
+.hint-page-title {
+  margin: 0;
+  height: 34px;
+}
+
+.hint-button,
+.hint-page-right-section {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.hint-info-title,
+.hint-page-title {
+  font-weight: 600;
+  font-size: 16px;
+  color: var(--main-purple);
+}
+
+.hint-right-content {
+  width: 292px;
+  height: 510px;
+}
+
+.hint-info {
+  margin-top: 16px;
+  padding: 16px;
+  border-radius: 8px;
+  border: 1px solid var(--grey-border);
+}
diff --git a/frontend/src/scenes/hints/HintPage.jsx b/frontend/src/scenes/hints/HintPage.jsx
index 6e65995e..60197754 100644
--- a/frontend/src/scenes/hints/HintPage.jsx
+++ b/frontend/src/scenes/hints/HintPage.jsx
@@ -1,86 +1,79 @@
-import React, { useState } from "react";
-import HomePageTemplate from "../../components/templates/HomePageTemplate";
-import GuideTemplate from "../../components/templates/GuideTemplate/GuideTemplate";
-import RichTextEditor from "../../components/RichTextEditor/RichTextEditor";
-import HintLeftContent from "../../components/HintPageComponents/HintLeftContent/HintLeftContent";
-import HintLeftAppearance from "../../components/HintPageComponents/HintLeftAppearance/HintLeftAppearance";
+import React from "react";
+import Button from "../../components/Button/Button";
+import List from "../../components/List/List";
+import HomePageTemplate from "../../templates/HomePageTemplate/HomePageTemplate";
+import HintDefaultPage from "./HintDefaultPage";
+import "./HintPage.css";
+import { useNavigate } from "react-router-dom";
 
-const HintPage = () => {
-  const [activeButton, setActiveButton] = useState(0);
-  const [leftContentFormData, setLeftContentFormData] = useState({
-    actionButtonUrl: "https//",
-    actionButtonText: "",
-    targetElement: ".element",
-  });
-
-  const handleButtonClick = (index) => {
-    setActiveButton(index);
-  };
-
-  const [headerBackgroundColor, setHeaderBackgroundColor] = useState("#F8F9F8");
-  const [headerColor, setHeaderColor] = useState("#101828");
-  const [textColor, setTextColor] = useState("#344054");
-  const [buttonBackgroundColor, setButtonBackgroundColor] = useState("#7F56D9");
-  const [buttonTextColor, setButtonTextColor] = useState("#FFFFFF");
+const hintsData = [
+  {
+    idItem: 184293,
+    title: "Main dashboard - feature hint",
+    text: "This pops up the first time a user logs in to the dashboard.",
+  },
+  {
+    idItem: 194294,
+    title: "Main dashboard - password hint",
+    text: "This pops up the first time a user logs in to the dashboard.",
+  },
+];
 
-  const stateList = [
-    {
-      stateName: "Header Background Color",
-      state: headerBackgroundColor,
-      setState: setHeaderBackgroundColor,
-    },
-    {
-      stateName: "Header Color",
-      state: headerColor,
-      setState: setHeaderColor,
-    },
-    { stateName: "Text Color", state: textColor, setState: setTextColor },
-    {
-      stateName: "Button Background Color",
-      state: buttonBackgroundColor,
-      setState: setButtonBackgroundColor,
-    },
-    {
-      stateName: "Button Text Color",
-      state: buttonTextColor,
-      setState: setButtonTextColor,
-    },
-  ];
-
-  return (
-    <div>
+const HintPage = () => {
+  const navigate = useNavigate();
+  if (hintsData.length === 0) {
+    return <HintDefaultPage />;
+  } else {
+    return (
       <HomePageTemplate>
-        <GuideTemplate
-          title="New Hint"
-          activeButton={activeButton}
-          handleButtonClick={handleButtonClick}
-          rightContent={() => (
-            <RichTextEditor
-              previewBtnText={leftContentFormData.actionButtonText}
-              headerBackgroundColor={headerBackgroundColor}
-              headerColor={headerColor}
-              textColor={textColor}
-              buttonBackgroundColor={buttonBackgroundColor}
-              buttonTextColor={buttonTextColor}
-              sx={{
-                width: "100%",
-                maxWidth: "700px",
-                marginLeft: "2.5rem",
-                marginTop: "1rem",
-              }}
-            />
-          )}
-          leftContent={() => (
-            <HintLeftContent
-              formData={leftContentFormData}
-              setLeftContentFormData={setLeftContentFormData}
-            />
-          )}
-          leftAppearance={() => <HintLeftAppearance data={stateList} />}
-        />
+        <div className="hint-page-container">
+          <div className="hint-page-left-section">
+            <div className="hint-page-header">
+              <h2 className="hint-page-title">All Hints</h2>
+            </div>
+            <div className="hint-page-items" style={{ marginTop: "16px" }}>
+              <List items={hintsData} onSelectItem={() => {}} />
+            </div>
+          </div>
+          <div className="hint-page-right-section">
+            <div className="hint-right-content">
+              <div className="hint-button">
+                <Button
+                  style={{ height: "34px", width: "172px" }}
+                  text="Create a new hint"
+                  variant="contained"
+                  onClick={() => navigate("/hint-default")}
+                />
+              </div>
+              <div className="hint-info">
+                <h2 className="hint-info-title">What is a hint?</h2>
+                <div className="hint-info-content">
+                  <p>
+                    Hints are like friendly reminders in an app, giving tips
+                    without stopping what you are doing. They show up at small
+                    bubbles near buttons or menus, guiding you on how to use
+                    things.
+                  </p>
+                  <p>
+                    One good thing about hints is they help you use the app
+                    better by giving tips when you need them. For example, they
+                    can show clear instructions when you're trying something
+                    new, so you don't get stuck or confused.
+                  </p>
+                  <p>
+                    Hints work for everyone, from beginners to experts. They
+                    give basic tips for people just starting out and clever
+                    tricks for those who know the app well. This makes the app
+                    easier for everyone to use.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
       </HomePageTemplate>
-    </div>
-  );
+    );
+  }
 };
 
 export default HintPage;