diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 0a85428..be2fce9 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -14,6 +14,7 @@
         "@mantine/notifications": "^5.0.2",
         "@stripe/react-stripe-js": "^1.1.2",
         "@stripe/stripe-js": "^1.9.0",
+        "@tabler/icons": "^1.78.1",
         "@testing-library/jest-dom": "^4.2.4",
         "@testing-library/react": "^9.3.2",
         "@testing-library/user-event": "^7.1.2",
@@ -3864,6 +3865,27 @@
         "node": ">=8"
       }
     },
+    "node_modules/@tabler/icons": {
+      "version": "1.78.1",
+      "resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-1.78.1.tgz",
+      "integrity": "sha512-QT/94Hufvzn4PxsEyN9NTh96XmNaGGgMh7sKcBZ2216pE9B+Ala98KpdNwTKKBlEvRvHw9y14zW4qFYzxGOhZw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/codecalm"
+      },
+      "peerDependencies": {
+        "react": "^16.x || 17.x || 18.x",
+        "react-dom": "^16.x || 17.x || 18.x"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@testing-library/dom": {
       "version": "6.16.0",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-6.16.0.tgz",
@@ -23162,6 +23184,12 @@
         "loader-utils": "^1.2.3"
       }
     },
+    "@tabler/icons": {
+      "version": "1.78.1",
+      "resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-1.78.1.tgz",
+      "integrity": "sha512-QT/94Hufvzn4PxsEyN9NTh96XmNaGGgMh7sKcBZ2216pE9B+Ala98KpdNwTKKBlEvRvHw9y14zW4qFYzxGOhZw==",
+      "requires": {}
+    },
     "@testing-library/dom": {
       "version": "6.16.0",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-6.16.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 214fd89..fe98458 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -9,6 +9,7 @@
     "@mantine/notifications": "^5.0.2",
     "@stripe/react-stripe-js": "^1.1.2",
     "@stripe/stripe-js": "^1.9.0",
+    "@tabler/icons": "^1.78.1",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
diff --git a/frontend/src/components/Auth/SignUp.js b/frontend/src/components/Auth/SignUp.js
index 9fabd20..d808599 100644
--- a/frontend/src/components/Auth/SignUp.js
+++ b/frontend/src/components/Auth/SignUp.js
@@ -2,7 +2,6 @@ import React, { Component } from "react";
 import { authSignIn, authSignUp } from "../../actions/authActions";
 import { connect } from "react-redux";
 import { Link } from "react-router-dom";
-import loader2 from "../Loader/Loader2";
 import "../../styles/Auth/Auth.css";
 
 class SignUp extends Component {
@@ -85,7 +84,7 @@ class SignUp extends Component {
             <div className="auth-btn-wrapper">
               {this.props.loading ? (
                 <button id="loader-btn" type="submit">
-                  {loader2}
+                  LOADING
                 </button>
               ) : (
                 <button
diff --git a/frontend/src/components/Dashboard/Dashboard.js b/frontend/src/components/Dashboard/Dashboard.js
index 7dfa246..c5c312d 100644
--- a/frontend/src/components/Dashboard/Dashboard.js
+++ b/frontend/src/components/Dashboard/Dashboard.js
@@ -3,67 +3,106 @@ import "../../styles/Dashboard/Dashboard.css";
 import dummyImage from "../images/4.jpg";
 import dummyImage1 from "../images/5.jpg";
 import dummyImage2 from "../images/6.jpg";
+import { ActionIcon, Tabs, Button } from "@mantine/core";
+import {
+  IconDownload,
+  IconSettings,
+  IconListDetails,
+  IconStar,
+} from "@tabler/icons";
 
 class Dashboard extends Component {
   render() {
     return (
       <div className="dashboard-container">
-        <h4 className="title-line d-margin">Dashboard</h4>
+        <h4 className="title-line">Dashboard</h4>
+        <Tabs defaultValue="purchased-items">
+          <Tabs.List>
+            <Tabs.Tab value="purchased-items" icon={<IconStar size={14} />}>
+              Purchased Items
+            </Tabs.Tab>
+            <Tabs.Tab value="billing-info" icon={<IconListDetails size={14} />}>
+              Billing Info
+            </Tabs.Tab>
+            <Tabs.Tab value="settings" icon={<IconSettings size={14} />}>
+              Settings
+            </Tabs.Tab>
+          </Tabs.List>
 
-        <div className="dashboard">
-          <div className="dashboard-nav">
-            <span>
-              <h4>My Products</h4>
-              <h4>Account Info</h4>
-              <h4>Billing Details</h4>
-            </span>
-          </div>
+          <Tabs.Panel value="purchased-items" pt="xs">
+            <div className="items-container">
+              <div className="item">
+                <img src={dummyImage} alt="dummy1" />
+                <ActionIcon variant="filled" className="download-icon">
+                  <IconDownload />
+                </ActionIcon>
+              </div>
 
-          <div className="nav-detail">
-            <div className="dashboard-item">
-              <span className="grp">
-                <img
-                  className="product-img"
-                  src={dummyImage}
-                  alt="product-img"
-                />
-                <h3 className="p-title">Bats and Bunting</h3>
-              </span>
+              <div className="item">
+                <img src={dummyImage1} alt="dummy2" />
+                <ActionIcon variant="filled" className="download-icon">
+                  <IconDownload />
+                </ActionIcon>
+              </div>
 
-              <button className="auth-btn reg-btn download-btn">
-                Download
-              </button>
-            </div>
-            <div className="dashboard-item">
-              <span className="grp">
-                <img
-                  className="product-img"
-                  src={dummyImage1}
-                  alt="product-img"
-                />
-                <h3 className="p-title">Dummy Product</h3>
-              </span>
+              <div className="item">
+                <img src={dummyImage2} alt="dummy3" />
+                <ActionIcon variant="filled" className="download-icon">
+                  <IconDownload />
+                </ActionIcon>
+              </div>
 
-              <button className="auth-btn reg-btn download-btn">
-                Download
-              </button>
-            </div>
-            <div className="dashboard-item">
-              <span className="grp">
-                <img
-                  className="product-img"
-                  src={dummyImage2}
-                  alt="product-img"
-                />
-                <h3 className="p-title">Another</h3>
-              </span>
+              <div className="item">
+                <img src={dummyImage2} alt="dummy3" />
+                <ActionIcon variant="filled" className="download-icon">
+                  <IconDownload />
+                </ActionIcon>
+              </div>
+
+              <div className="item">
+                <img src={dummyImage} alt="dummy1" />
+                <ActionIcon variant="filled" className="download-icon">
+                  <IconDownload />
+                </ActionIcon>
+              </div>
+
+              <div className="item">
+                <img src={dummyImage1} alt="dummy2" />
+                <ActionIcon variant="filled" className="download-icon">
+                  <IconDownload />
+                </ActionIcon>
+              </div>
 
-              <button className="auth-btn reg-btn download-btn">
-                Download
-              </button>
+              <div className="item">
+                <img src={dummyImage2} alt="dummy3" />
+                <ActionIcon variant="filled" className="download-icon">
+                  <IconDownload />
+                </ActionIcon>
+              </div>
+
+              <div className="item">
+                <img src={dummyImage2} alt="dummy3" />
+                <ActionIcon variant="filled" className="download-icon">
+                  <IconDownload />
+                </ActionIcon>
+              </div>
             </div>
-          </div>
-        </div>
+            <Button
+              radius="xs"
+              style={{ marginTop: "1rem", backgroundColor: "#5fa372" }}
+            >
+              DOWNLOAD ALL
+            </Button>
+          </Tabs.Panel>
+
+          <Tabs.Panel value="billing-info" pt="xs">
+            Billing tab content
+          </Tabs.Panel>
+
+          <Tabs.Panel value="settings" pt="xs">
+            Settings tab content
+          </Tabs.Panel>
+        </Tabs>
       </div>
     );
   }
diff --git a/frontend/src/components/Dashboard/Dashboard.sass b/frontend/src/components/Dashboard/Dashboard.sass
index 2b24bb3..40971cd 100644
--- a/frontend/src/components/Dashboard/Dashboard.sass
+++ b/frontend/src/components/Dashboard/Dashboard.sass
@@ -1,49 +1,27 @@
 .dashboard-container
-    padding: 0 18em
+    width: 650px
+    margin: auto
 
-.dashboard-item
+.items-container
     display: flex
-    align-items: center
-    justify-content: space-between
-    margin-top: 2em
+    flex-wrap: wrap
+    gap: 1rem
 
-    img
-        margin-right: 4em
-
-    h3
-        font-weight: 400
-
-.nav-detail
-    width: 100%
-    flex: 3
-
-.grp
-    display: flex
-    align-items: center
+.item
+    position: relative
 
-.download-btn
-    margin: 0
+    .download-icon
+        height: auto
+        width: 30px
+        position: absolute
+        top: 60px
+        left: 63px
 
-.dashboard
-    display: flex
-    //justify-content: space-between
-
-.dashboard-nav
-    widht: 25em
-    flex: 1
-    border: 1px solid #e0e0e0     // #f3f3f344
-    display: flex
-    align-items: center
-    flex-direction: column
-    padding: 2em 0
-    margin-right: 2em
-    border-radius: 4px
+    img
+        height: 150px
+        width: 150px
+        opacity: 0.9
+        border-radius: 4px
+        filter: brightness(90%)
 
-    h4
-        margin-bottom: 1em
-        font-weight: 500
-        cursor: pointer
-        font-size: 0.9em
 
-.p-title
-    font-size: 1em
diff --git a/frontend/src/styles/Dashboard/Dashboard.css b/frontend/src/styles/Dashboard/Dashboard.css
index 70eac46..adac5c3 100644
--- a/frontend/src/styles/Dashboard/Dashboard.css
+++ b/frontend/src/styles/Dashboard/Dashboard.css
@@ -1,56 +1,28 @@
 .dashboard-container {
-  padding: 0 18em;
+  width: 650px;
+  margin: auto;
 }
 
-.dashboard-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-top: 2em;
-}
-.dashboard-item img {
-  margin-right: 4em;
-}
-.dashboard-item h3 {
-  font-weight: 400;
-}
-
-.nav-detail {
-  width: 100%;
-  flex: 3;
-}
-
-.grp {
-  display: flex;
-  align-items: center;
-}
-
-.download-btn {
-  margin: 0;
-}
-
-.dashboard {
+.items-container {
   display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
 }
 
-.dashboard-nav {
-  widht: 25em;
-  flex: 1;
-  border: 1px solid #e0e0e0;
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  padding: 2em 0;
-  margin-right: 2em;
+.item {
+  position: relative;
+}
+.item .download-icon {
+  height: auto;
+  width: 30px;
+  position: absolute;
+  top: 60px;
+  left: 63px;
+}
+.item img {
+  height: 150px;
+  width: 150px;
+  opacity: 0.9;
   border-radius: 4px;
-}
-.dashboard-nav h4 {
-  margin-bottom: 1em;
-  font-weight: 500;
-  cursor: pointer;
-  font-size: 0.9em;
-}
-
-.p-title {
-  font-size: 1em;
+  filter: brightness(90%);
 }