diff --git a/src/components/ColoredCube/ColoredCube.tsx b/src/components/ColoredCube/ColoredCube.tsx
index 4fe7715..6e34a1f 100644
--- a/src/components/ColoredCube/ColoredCube.tsx
+++ b/src/components/ColoredCube/ColoredCube.tsx
@@ -11,8 +11,8 @@ export default function ColoredCube(props: props) {
       <div
         style={{
           backgroundColor: props.color,
-          width: props.size,
-          height: props.size,
+          width: props.size + "vh",
+          height: props.size + "vh",
         }}
       />
     </div>
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index d91ad75..ae28727 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -7,7 +7,7 @@ export default function Header() {
   return (
     <div style={styles.header_wrapper}>
       <div style={styles.header_left}>
-        <AppLogo size={64} color="#6f9b78" />
+        <AppLogo size={8} color="#6f9b78" />
         <p style={styles.logo_title}>Ivy</p>
       </div>
       <div style={styles.header_right}>
diff --git a/src/components/Icons/AppLogo/AppLogo.tsx b/src/components/Icons/AppLogo/AppLogo.tsx
index 65122d5..4926766 100644
--- a/src/components/Icons/AppLogo/AppLogo.tsx
+++ b/src/components/Icons/AppLogo/AppLogo.tsx
@@ -10,8 +10,8 @@ export default function AppLogo(props: props) {
       <svg
         xmlns="http://www.w3.org/2000/svg"
         className="icon icon-tabler icon-tabler-plant-2"
-        width={props.size}
-        height={props.size}
+        width={props.size + "vh"}
+        height={props.size + "vh"}
         viewBox="0 0 24 24"
         stroke-width="2"
         stroke={props.color}
diff --git a/src/components/Icons/HomeIcon/HomeIcon.tsx b/src/components/Icons/HomeIcon/HomeIcon.tsx
index 54e01f1..2f9bf42 100644
--- a/src/components/Icons/HomeIcon/HomeIcon.tsx
+++ b/src/components/Icons/HomeIcon/HomeIcon.tsx
@@ -10,8 +10,8 @@ export default function HomeIcon(props: props) {
       <svg
         xmlns="http://www.w3.org/2000/svg"
         className="icon icon-tabler icon-tabler-home-2"
-        width={props.size}
-        height={props.size}
+        width={props.size + "vh"}
+        height={props.size + "vh"}
         viewBox="0 0 24 24"
         stroke-width="2"
         stroke={props.color}
diff --git a/src/components/Icons/InventoryIcon/InventoryIcon.tsx b/src/components/Icons/InventoryIcon/InventoryIcon.tsx
index 08d4836..669ca09 100644
--- a/src/components/Icons/InventoryIcon/InventoryIcon.tsx
+++ b/src/components/Icons/InventoryIcon/InventoryIcon.tsx
@@ -10,8 +10,8 @@ export default function InventoryIcon(props: props) {
       <svg
         xmlns="http://www.w3.org/2000/svg"
         className="icon icon-tabler icon-tabler-box-seam"
-        width={props.size}
-        height={props.size}
+        width={props.size + "vh"}
+        height={props.size + "vh"}
         viewBox="0 0 24 24"
         stroke-width="1"
         stroke={props.color}
diff --git a/src/components/Icons/LogoutIcon/LogoutIcon.tsx b/src/components/Icons/LogoutIcon/LogoutIcon.tsx
index cd9e70d..e986e10 100644
--- a/src/components/Icons/LogoutIcon/LogoutIcon.tsx
+++ b/src/components/Icons/LogoutIcon/LogoutIcon.tsx
@@ -10,8 +10,8 @@ export default function LogoutIcon(props: props) {
       <svg
         xmlns="http://www.w3.org/2000/svg"
         className="icon icon-tabler icon-tabler-logout"
-        width={props.size}
-        height={props.size}
+        width={props.size + "vh"}
+        height={props.size + "vh"}
         viewBox="0 0 24 24"
         stroke-width="1"
         stroke={props.color}
diff --git a/src/components/Icons/LogsIcon/LogsIcon.tsx b/src/components/Icons/LogsIcon/LogsIcon.tsx
index c1a90b5..d125858 100644
--- a/src/components/Icons/LogsIcon/LogsIcon.tsx
+++ b/src/components/Icons/LogsIcon/LogsIcon.tsx
@@ -10,8 +10,8 @@ export default function LogsIcon(props: props) {
       <svg
         xmlns="http://www.w3.org/2000/svg"
         className="icon icon-tabler icon-tabler-clipboard-data"
-        width={props.size}
-        height={props.size}
+        width={props.size + "vh"}
+        height={props.size + "vh"}
         viewBox="0 0 24 24"
         stroke-width="1"
         stroke={props.color}
diff --git a/src/components/Icons/NotFoundIcon/NotFoundIcon.tsx b/src/components/Icons/NotFoundIcon/NotFoundIcon.tsx
index c539230..6a395b6 100644
--- a/src/components/Icons/NotFoundIcon/NotFoundIcon.tsx
+++ b/src/components/Icons/NotFoundIcon/NotFoundIcon.tsx
@@ -10,8 +10,8 @@ export default function NotFoundIcon(props: props) {
       <svg
         xmlns="http://www.w3.org/2000/svg"
         className="icon icon-tabler icon-tabler-error-404"
-        width={props.size}
-        height={props.size}
+        width={props.size + "vh"}
+        height={props.size + "vh"}
         viewBox="0 0 24 24"
         stroke-width="1"
         stroke={props.color}
diff --git a/src/components/Icons/ProductsIcon/ProductsIcon.tsx b/src/components/Icons/ProductsIcon/ProductsIcon.tsx
index 5888276..74d8832 100644
--- a/src/components/Icons/ProductsIcon/ProductsIcon.tsx
+++ b/src/components/Icons/ProductsIcon/ProductsIcon.tsx
@@ -10,8 +10,8 @@ export default function ProductsIcon(props: props) {
       <svg
         xmlns="http://www.w3.org/2000/svg"
         className="icon icon-tabler icon-tabler-list-numbers"
-        width={props.size}
-        height={props.size}
+        width={props.size + "vh"}
+        height={props.size + "vh"}
         viewBox="0 0 24 24"
         stroke-width="1"
         stroke={props.color}
diff --git a/src/components/Icons/StatsIcon/StatsIcon.tsx b/src/components/Icons/StatsIcon/StatsIcon.tsx
index a0b1e56..02f600d 100644
--- a/src/components/Icons/StatsIcon/StatsIcon.tsx
+++ b/src/components/Icons/StatsIcon/StatsIcon.tsx
@@ -10,8 +10,8 @@ export default function StatsIcon(props: props) {
       <svg
         xmlns="http://www.w3.org/2000/svg"
         className="icon icon-tabler icon-tabler-align-box-bottom-center"
-        width={props.size}
-        height={props.size}
+        width={props.size + "vh"}
+        height={props.size + "vh"}
         viewBox="0 0 24 24"
         stroke-width="1"
         stroke={props.color}
diff --git a/src/components/Icons/TotalProductsIcon/TotalProductsIcon.tsx b/src/components/Icons/TotalProductsIcon/TotalProductsIcon.tsx
index 3b2a802..f799772 100644
--- a/src/components/Icons/TotalProductsIcon/TotalProductsIcon.tsx
+++ b/src/components/Icons/TotalProductsIcon/TotalProductsIcon.tsx
@@ -10,8 +10,8 @@ export default function TotalProductsIcon(props: props) {
       <svg
         xmlns="http://www.w3.org/2000/svg"
         className="icon icon-tabler icon-tabler-packages"
-        width={props.size}
-        height={props.size}
+        width={props.size + "vh"}
+        height={props.size + "vh"}
         viewBox="0 0 24 24"
         stroke-width="1"
         stroke={props.color}
diff --git a/src/components/Logout/Logout.tsx b/src/components/Logout/Logout.tsx
index 1b334e0..1fcfef1 100644
--- a/src/components/Logout/Logout.tsx
+++ b/src/components/Logout/Logout.tsx
@@ -23,7 +23,7 @@ export default function Logout(props: props) {
   }
 
   return (
-    <div style={{ paddingTop: "90%" }}>
+    <div style={{ paddingTop: "40vh" }}>
       <Button
         onClick={login}
         value="Log out"
diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx
index f6a75c6..a7f53a5 100644
--- a/src/components/Sidebar/Sidebar.tsx
+++ b/src/components/Sidebar/Sidebar.tsx
@@ -29,16 +29,16 @@ export default function Sidebar() {
           }}
         >
           <SidebarButton onClick={() => navigate("/")} name="Dashboard">
-            <HomeIcon size={48} color="white" />
+            <HomeIcon size={4} color="white" />
           </SidebarButton>
           <SidebarButton onClick={() => navigate("/Products")} name="Products">
-            <ProductsIcon size={48} color="white" />
+            <ProductsIcon size={4} color="white" />
           </SidebarButton>
           <SidebarButton
             onClick={() => navigate("/Inventory")}
             name="Inventory"
           >
-            <InventoryIcon size={48} color="white" />
+            <InventoryIcon size={4} color="white" />
           </SidebarButton>
         </div>
       </div>
@@ -54,24 +54,24 @@ export default function Sidebar() {
           }}
         >
           <SidebarButton onClick={() => navigate("/")} name="Dashboard">
-            <HomeIcon size={48} color="white" />
+            <HomeIcon size={4} color="white" />
           </SidebarButton>
           <SidebarButton onClick={() => navigate("/Products")} name="Products">
-            <ProductsIcon size={48} color="white" />
+            <ProductsIcon size={4} color="white" />
           </SidebarButton>
           <SidebarButton
             onClick={() => navigate("/Inventory")}
             name="Inventory"
           >
-            <InventoryIcon size={48} color="white" />
+            <InventoryIcon size={4} color="white" />
           </SidebarButton>
           <SidebarButton onClick={() => navigate("/Logs")} name="Logs">
-            <LogsIcon size={48} color="white" />
+            <LogsIcon size={4} color="white" />
           </SidebarButton>
         </div>
 
         <Logout>
-          <LogoutIcon size={48} color="white" />
+          <LogoutIcon size={4} color="white" />
         </Logout>
       </div>
     );
diff --git a/src/routes/Dashboard/Dashboard.tsx b/src/routes/Dashboard/Dashboard.tsx
index c40d145..65a1242 100644
--- a/src/routes/Dashboard/Dashboard.tsx
+++ b/src/routes/Dashboard/Dashboard.tsx
@@ -11,47 +11,38 @@ export default function Dashboard() {
   return (
     <div style={styles.container}>
       <div style={styles.wrapper_row}>
-        <HomeIcon size={64} color="white" />
+        <HomeIcon size={8} color="white" />
         <h1 style={styles.text_large}>Dashboard</h1>
       </div>
       <div style={styles.DashboardWidget_WrapperRow}>
         <div style={{ flex: 8 }}>
           <div style={styles.DashboardWidget_WrapperColumn}>
             <div style={{ display: "flex", flex: 5, flexDirection: "row" }}>
-              <div style={{ flex: 7 }}>
+              <div style={{ flex: 1 }}>
                 <DashboardContainer>
                   <div style={styles.wrapper_row}>
-                    <TotalProductsIcon size={64} color="white" />
+                    <TotalProductsIcon size={8} color="white" />
                     <h1 style={styles.text_extra_large}>Total Products</h1>
                   </div>
                   <h1 style={styles.text_large}>2546 Unique Items</h1>
                   <h1 style={styles.text_large}>In inventory</h1>
                 </DashboardContainer>
               </div>
-              <div style={{ flex: 3 }}>
-                <DashboardContainer>
-                  <div style={styles.wrapper_row}>
-                    <TotalProductsIcon size={64} color="white" />
-                    <h1 style={styles.text_large}>Widget 2</h1>
-                  </div>
-                  <h1 style={styles.text_medium}>Placeholder</h1>
-                </DashboardContainer>
-              </div>
             </div>
             <div style={{ display: "flex", flex: 5, flexDirection: "row" }}>
               <div style={{ flex: 7 }}>
                 <DashboardContainer>
                   <div style={styles.wrapper_row}>
-                    <StatsIcon size={64} color="white" />
+                    <StatsIcon size={8} color="white" />
                     <h1 style={styles.text_large}>Current Session</h1>
                   </div>
                   <div style={styles.wrapper_row}>
-                    <ColoredCube size={32} color="#a48e41" />
+                    <ColoredCube size={4} color="#a48e41" />
                     <h1 style={styles.text_large}>Added</h1>
                   </div>
                   <h1 style={styles.text_medium}>254</h1>
                   <div style={styles.wrapper_row}>
-                    <ColoredCube size={32} color="#a44141" />
+                    <ColoredCube size={4} color="#a44141" />
                     <h1 style={styles.text_large}>Removed</h1>
                   </div>
                   <h1 style={styles.text_medium}>64</h1>
@@ -60,10 +51,20 @@ export default function Dashboard() {
               <div style={{ flex: 3 }}>
                 <DashboardContainer>
                   <div style={styles.wrapper_row}>
-                    <TotalProductsIcon size={64} color="white" />
-                    <h1 style={styles.text_large}>Widget 4</h1>
+                    <TotalProductsIcon size={8} color="white" />
+                    <h1 style={styles.text_medium}>Low Stock Items</h1>
                   </div>
-                  <h1 style={styles.text_medium}>Placeholder</h1>
+                  <h1 style={styles.text_medium}>Canned Pagmamahal</h1>
+                  <h1 style={styles.text_tiny}>In Stock: 3</h1>
+                </DashboardContainer>
+                <div style={{ padding: "1.5vh" }} />
+                <DashboardContainer>
+                  <div style={styles.wrapper_row}>
+                    <TotalProductsIcon size={8} color="white" />
+                    <h1 style={styles.text_medium}>Recently Added</h1>
+                  </div>
+                  <h1 style={styles.text_medium}>Zidane's Water</h1>
+                  <h1 style={styles.text_tiny}>Added 02/17/2023</h1>
                 </DashboardContainer>
               </div>
             </div>
@@ -72,10 +73,40 @@ export default function Dashboard() {
         <div style={{ flex: 2 }}>
           <DashboardContainer>
             <div style={styles.wrapper_row}>
-              <TotalProductsIcon size={64} color="white" />
-              <h1 style={styles.text_large}>Widget 5</h1>
+              <TotalProductsIcon size={8} color="white" />
+              <div style={styles.wrapper_column}>
+                <h1 style={styles.text_medium}>Recent</h1>
+                <h1 style={styles.text_medium}>Transactions</h1>
+              </div>
             </div>
-            <h1 style={styles.text_medium}>Placeholder</h1>
+            <div style={{ marginBottom: "2vh" }} />
+            <h1 style={styles.text}>Kopiko Blanca (Sack)</h1>
+            <h1 style={styles.text_small}>Added: 96</h1>
+            <h1 style={styles.text_small}>Removed: 105</h1>
+            <h1 style={styles.text_tiny}>02/17/2023</h1>
+            <div style={{ marginBottom: "2vh" }} />
+            <h1 style={styles.text}>Zidane's Water</h1>
+            <h1 style={styles.text_small}>Added: 49</h1>
+            <h1 style={styles.text_small}>Removed: 24</h1>
+            <h1 style={styles.text_tiny}>02/17/2023</h1>
+            <div style={{ marginBottom: "2vh" }} />
+            <h1 style={styles.text}>Dan's Beefed Corn</h1>
+            <h1 style={styles.text_small}>Added: 32</h1>
+            <h1 style={styles.text_small}>Removed: 64</h1>
+            <h1 style={styles.text_tiny}>02/17/2023</h1>
+            <div style={{ marginBottom: "2vh" }} />
+            <div style={styles.wrapper_column}>
+              <h1 style={styles.text}>Canned</h1>
+              <h1 style={styles.text}>Pagmamahal</h1>
+            </div>
+            <h1 style={styles.text_small}>Added: 0</h1>
+            <h1 style={styles.text_small}>Removed: 60</h1>
+            <h1 style={styles.text_tiny}>02/17/2023</h1>
+            <div style={{ marginBottom: "2vh" }} />
+            <h1 style={styles.text}>Dan's Beefed Corn</h1>
+            <h1 style={styles.text_small}>Added: 32</h1>
+            <h1 style={styles.text_small}>Removed: 64</h1>
+            <h1 style={styles.text_tiny}>02/17/2023</h1>
           </DashboardContainer>
         </div>
       </div>
diff --git a/src/routes/Products/Products.tsx b/src/routes/Products/Products.tsx
index 607cdc2..79345bc 100644
--- a/src/routes/Products/Products.tsx
+++ b/src/routes/Products/Products.tsx
@@ -5,7 +5,7 @@ import AppLogo from "../../Components/Icons/AppLogo/AppLogo";
 export default function Products() {
   return (
     <div style={styles.container}>
-      <AppLogo size={64} color="#6f9b78" />
+      <AppLogo size={8} color="#6f9b78" />
       <p style={styles.text}>Ivy - Inventory Manager</p>
       <p style={styles.text}>Products Page</p>
     </div>
diff --git a/src/styles.tsx b/src/styles.tsx
index 8ff115f..62fd1ee 100644
--- a/src/styles.tsx
+++ b/src/styles.tsx
@@ -16,6 +16,16 @@ const styles: { [key: string]: React.CSSProperties } = {
     paddingTop: 0,
     paddingLeft: 16,
   },
+  text_tiny: {
+    fontSize: "0.6vw",
+    color: "white",
+    fontWeight: "bold",
+  },
+  text_small: {
+    fontSize: "0.8vw",
+    color: "white",
+    fontWeight: "bold",
+  },
   text: {
     fontSize: "1.3vw",
     color: "white",
@@ -34,6 +44,7 @@ const styles: { [key: string]: React.CSSProperties } = {
   text_extra_large: {
     fontSize: "3.2vw",
     color: "white",
+    fontWeight: "bold",
   },
   logo_title: {
     color: "#6c9575",
@@ -74,8 +85,8 @@ const styles: { [key: string]: React.CSSProperties } = {
   },
   logout_button: {
     backgroundColor: "#0b2322",
-    height: 64,
-    width: 192,
+    width: "30vh",
+    height: "6vh",
     border: "none",
     padding: 8,
     borderRadius: 16,
@@ -114,8 +125,9 @@ const styles: { [key: string]: React.CSSProperties } = {
   wrapper_column: {
     display: "flex",
     flexDirection: "column",
-    alignItems: "center",
     alignSelf: "flex-start",
+    justifyContent: "left",
+    lineHeight: 0,
   },
   DashboardWidget_WrapperColumn: {
     justifyContent: "center",