diff --git a/.gitignore b/.gitignore
index 9d706fac..ea546958 100644
--- a/.gitignore
+++ b/.gitignore
@@ -39,3 +39,5 @@ next-env.d.ts
 /test-results/
 /playwright-report/
 /playwright/.cache/
+
+localhost:3000/
diff --git a/.prettierignore b/.prettierignore
index 95ee8ea2..2f4d2f7a 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -37,5 +37,11 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 
-logs/*
-playwright-report/*
+/logs/
+.swc/
+/test-results/
+/playwright-report/
+/playwright/.cache/
+
+localhost:3000/
+
diff --git a/src/app/components/AccountHistory.tsx b/src/app/components/AccountHistory.tsx
index 3e3a8367..ad9311ce 100644
--- a/src/app/components/AccountHistory.tsx
+++ b/src/app/components/AccountHistory.tsx
@@ -1,34 +1,50 @@
-import React, { useEffect, useCallback } from "react";
-import { useAppDispatch, useAppSelector } from "../hooks";
+import React, { useEffect } from "react";
+import { useAppDispatch, useAppSelector } from "hooks";
 import {
-  fetchAccountHistory,
   Tables,
+  fetchAccountHistory,
+  selectOpenOrders,
   setSelectedTable,
-  selectTables,
-} from "../redux/accountHistorySlice";
+} from "redux/accountHistorySlice";
 import { DisplayTable } from "./DisplayTable";
 
-interface ButtonProps {
-  label: string;
-  value: Tables;
-  selectedValue: Tables;
-  onClick: (value: Tables) => void;
-}
+function OrdersTabs() {
+  const dispatch = useAppDispatch();
+  const { selectedTable, tables } = useAppSelector(
+    (state) => state.accountHistory
+  );
+  const openOrders = useAppSelector(selectOpenOrders);
+
+  function tabClass(isActive: boolean) {
+    return (
+      "tab w-max no-underline h-full py-3 tab-border-1 uppercase" +
+      (isActive
+        ? " tab-active tab-bordered text-accent-focus !border-accent"
+        : "")
+    );
+  }
 
-const Button: React.FC<ButtonProps> = ({
-  label,
-  value,
-  selectedValue,
-  onClick,
-}) => (
-  <button
-    onClick={() => onClick(value)}
-    aria-label={label}
-    className={"btn" + (selectedValue === value ? " btn-active" : "")}
-  >
-    {label}
-  </button>
-);
+  return (
+    <div className="m-4">
+      <div className="tabs min-w-fit flex flex-nowrap space-x-4">
+        {tables.map((tableName) => (
+          <div
+            key={tableName}
+            className={tabClass(selectedTable === tableName)}
+            onClick={() => dispatch(setSelectedTable(tableName))}
+          >
+            {tableName}{" "}
+            {tableName === Tables.OPEN_ORDERS && openOrders.length ? (
+              <span className="badge badge-xs font-bold badge-accent ml-2 p-0.5 rounded-none">
+                {openOrders.length}
+              </span>
+            ) : null}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
 
 export function AccountHistory() {
   const dispatch = useAppDispatch();
@@ -36,51 +52,17 @@ export function AccountHistory() {
     (state) => state.radix?.walletData.accounts[0]?.address
   );
   const pairAddress = useAppSelector((state) => state.pairSelector.address);
-  const selectedTable = useAppSelector(
-    (state) => state.accountHistory.selectedTable
-  );
-  const tables = useAppSelector(selectTables);
 
   useEffect(() => {
     dispatch(fetchAccountHistory());
   }, [dispatch, account, pairAddress]);
 
-  const handleButtonClick = useCallback(
-    (table: Tables) => {
-      dispatch(setSelectedTable(table));
-    },
-    [dispatch]
-  );
-
   return (
     <div>
-      <div className="btn-group">
-        {tables.map((table) => (
-          <Button
-            key={table}
-            label={table}
-            value={table}
-            selectedValue={selectedTable}
-            onClick={handleButtonClick}
-          />
-        ))}
-        {/* //---COMMENTED OUT BUTTONS FOR SHOW ALL ORDERS AND EXPORT
-        //TO NOT CONFUSE THE TESTERS----------------------------- */}
-        {/* <button
-        <button
-          className="btn btn-ghost normal-case text-xl"
-          aria-label="Show all orders"
-        >
-          Show all orders
-        </button>
-        
-          className="btn btn-ghost normal-case text-xl"
-          aria-label="Export as CSV"
-        >
-          Export as CSV
-        </button> */}
+      <OrdersTabs />
+      <div className="">
+        <DisplayTable />
       </div>
-      <DisplayTable />
     </div>
   );
 }
diff --git a/src/app/components/DisplayTable.tsx b/src/app/components/DisplayTable.tsx
index c7bbe0bf..693a1816 100644
--- a/src/app/components/DisplayTable.tsx
+++ b/src/app/components/DisplayTable.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { useAppSelector, useAppDispatch } from "../hooks";
 import { displayTime, displayOrderSide, calculateTotalFees } from "../utils";
 import {
@@ -12,6 +12,44 @@ interface TableProps {
   data: AccountHistoryState["orderHistory"];
 }
 
+import "../styles/table.css";
+
+const headers = {
+  [Tables.OPEN_ORDERS]: [
+    "Pair",
+    "Order Type",
+    "Direction",
+    "Time Ordered",
+    "Amount",
+    "Order Price",
+    "Filled Qty",
+    "Completed %",
+    "Action",
+  ],
+  [Tables.ORDER_HISTORY]: [
+    "Pair",
+    "Order Type",
+    "Direction",
+    "Status",
+    "Filled Qty",
+    "Order Qty",
+    "Avg Filled Price",
+    "Order Price",
+    "Order Fee",
+    "Time Ordered",
+    "Action",
+  ],
+  [Tables.TRADE_HISTORY]: [
+    "Pair",
+    "Direction",
+    "Order Price",
+    "Avg Filled Price",
+    "Filled Qty",
+    "Order Fee",
+    "Time Completed",
+  ],
+};
+
 function ActionButton({
   order,
 }: {
@@ -28,7 +66,7 @@ function ActionButton({
             cancelOrder({ orderId: order.id, pairAddress: order.pairAddress })
           );
         }}
-        className="text-lime-400 px-4 py-2 rounded hover:bg-lime-400 hover:text-black transition"
+        className="text-error hover:underline transition"
       >
         Cancel
       </button>
@@ -45,166 +83,142 @@ export function DisplayTable() {
   const orderHistory = useAppSelector(selectOrderHistory);
   const tradeHistory = useAppSelector(selectTradeHistory);
 
-  switch (selectedTable) {
-    case Tables.OPEN_ORDERS:
-      return <OpenOrdersTable data={openOrders} />;
-    case Tables.ORDER_HISTORY:
-      return <OrderHistoryTable data={orderHistory} />;
-    case Tables.TRADE_HISTORY:
-      return <TradeHistoryTable data={tradeHistory} />;
-    default:
-      return null;
-  }
-}
+  const tableToShow = useMemo(() => {
+    switch (selectedTable) {
+      case Tables.OPEN_ORDERS:
+        return {
+          headers: headers[Tables.OPEN_ORDERS],
+          rows: <OpenOrdersRows data={openOrders} />,
+        };
+
+      case Tables.ORDER_HISTORY:
+        return {
+          headers: headers[Tables.ORDER_HISTORY],
+          rows: <OrderHistoryRows data={orderHistory} />,
+        };
+
+      case Tables.TRADE_HISTORY:
+        return {
+          headers: headers[Tables.TRADE_HISTORY],
+          rows: <TradeHistoryTable data={tradeHistory} />,
+        };
+
+      default:
+        return {
+          headers: [],
+          rows: <></>,
+        };
+    }
+  }, [openOrders, orderHistory, selectedTable, tradeHistory]);
 
-//TABLE FUNCTIONS
-function OpenOrdersTable({ data }: TableProps) {
   return (
-    <table>
-      <thead>
-        <tr>
-          <th>Pair</th>
-          <th>Order Type</th>
-          <th>Direction</th>
-          <th>Time Ordered</th>
-          <th>Amount</th>
-          <th>Order Price</th>
-          <th>Filled Qty</th>
-          <th>Completed %</th>
-          <th>Action</th>
-        </tr>
-      </thead>
-      <tbody>
-        {data.length === 0 ? (
+    <div className="overflow-x-auto">
+      <table className="table table-zebra table-xs !mt-0">
+        <thead>
           <tr>
-            <td colSpan={9}>No Active Orders</td>
+            {tableToShow.headers.map((header, i) => (
+              <th className="text-secondary-content uppercase" key={i}>
+                {header}
+              </th>
+            ))}
           </tr>
-        ) : (
-          data.map((order) => (
-            <tr key={order.id}>
-              <td>{order.pairName}</td>
-              <td>{order.orderType}</td>
-              <td className={displayOrderSide(order.side).className}>
-                {displayOrderSide(order.side).text}
-              </td>
-              <td>{displayTime(order.timeSubmitted, "full")}</td>
-              <td>
-                {order.amount} {order.specifiedToken.symbol}
-              </td>
-              <td>PlaceHolder {order.specifiedToken.symbol}</td>
-              <td>
-                {order.amountFilled} {order.specifiedToken.symbol}
-              </td>
-              <td>{order.completedPerc}%</td>
-              <td>
-                <ActionButton order={order} />
-              </td>
-            </tr>
-          ))
-        )}
-      </tbody>
-    </table>
+        </thead>
+        <tbody>{tableToShow.rows}</tbody>
+      </table>
+    </div>
   );
 }
 
-function OrderHistoryTable({ data }: TableProps) {
-  return (
-    <table>
-      <thead>
-        <tr>
-          <th>Pair</th>
-          <th>Order Type</th>
-          <th>Direction</th>
-          <th>Status</th>
-          <th>Filled Qty</th>
-          <th>Order Qty</th>
-          <th>Avg Filled Price</th>
-          <th>Order Price</th>
-          <th>Order Fee</th>
-          <th>Time Ordered</th>
-          <th>Action</th>
-        </tr>
-      </thead>
-      <tbody>
-        {data.length === 0 ? (
-          <tr>
-            <td colSpan={11}>No Order History to display</td>
-          </tr>
-        ) : (
-          data.map((order) => (
-            <tr key={order.id}>
-              <td>{order.pairName}</td>
-              <td>{order.orderType}</td>
-              <td className={displayOrderSide(order.side).className}>
-                {displayOrderSide(order.side).text}
-              </td>
-              <td>{order.status}</td>
-              <td>
-                {order.amountFilled} {order.specifiedToken.symbol}
-              </td>
-              <td>
-                {order.amount} {order.specifiedToken.symbol}
-              </td>
-              <td>
-                {order.price} {order.specifiedToken.symbol}
-              </td>
-              <td>PlaceHolder {order.specifiedToken.symbol}</td>
-              <td>
-                {calculateTotalFees(order)} {order.unclaimedToken.symbol}
-              </td>
-              <td>{displayTime(order.timeSubmitted, "full")}</td>
-              <td>
-                <ActionButton order={order} />
-              </td>
-            </tr>
-          ))
-        )}
-      </tbody>
-    </table>
+const OpenOrdersRows = ({ data }: TableProps) => {
+  return data.length ? (
+    data.map((order) => (
+      <tr key={order.id} className="">
+        <td>{order.pairName}</td>
+        <td>{order.orderType}</td>
+        <td className={displayOrderSide(order.side).className}>
+          {displayOrderSide(order.side).text}
+        </td>
+        <td>{displayTime(order.timeSubmitted, "full")}</td>
+        <td>
+          {order.amount} {order.specifiedToken.symbol}
+        </td>
+        <td>PlaceHolder {order.specifiedToken.symbol}</td>
+        <td>
+          {order.amountFilled} {order.specifiedToken.symbol}
+        </td>
+        <td>{order.completedPerc}%</td>
+        <td>
+          <ActionButton order={order} />
+        </td>
+      </tr>
+    ))
+  ) : (
+    <tr>
+      <td colSpan={7}>No Active Orders</td>
+    </tr>
   );
-}
+};
 
-function TradeHistoryTable({ data }: TableProps) {
-  return (
-    <table>
-      <thead>
-        <tr>
-          <th>Pair</th>
-          <th>Direction</th>
-          <th>Order Price</th>
-          <th>Avg Filled Price</th>
-          <th>Filled Qty</th>
-          <th>Order Fee</th>
-          <th>Time Completed</th>
-        </tr>
-      </thead>
-      <tbody>
-        {data.length === 0 ? (
-          <tr>
-            <td colSpan={7}>No Trade History to display</td>
-          </tr>
-        ) : (
-          data.map((order) => (
-            <tr key={order.id}>
-              <td>{order.pairName}</td>
-              <td className={displayOrderSide(order.side).className}>
-                {displayOrderSide(order.side).text}
-              </td>
-              <td>PlaceHolder {order.specifiedToken.symbol}</td>
-              <td>
-                {order.price} {order.specifiedToken.symbol}
-              </td>
-              <td>
-                {order.amountFilled} {order.specifiedToken.symbol}
-              </td>
-              <td>
-                {calculateTotalFees(order)} {order.unclaimedToken.symbol}
-              </td>
-              <td>{displayTime(order.timeCompleted, "full")}</td>
-            </tr>
-          ))
-        )}
-      </tbody>
-    </table>
+const OrderHistoryRows = ({ data }: TableProps) => {
+  return data.length ? (
+    data.map((order) => (
+      <tr key={order.id} className="">
+        <td>{order.pairName}</td>
+        <td>{order.orderType}</td>
+        <td className={displayOrderSide(order.side).className}>
+          {displayOrderSide(order.side).text}
+        </td>
+        <td>{order.status}</td>
+        <td>
+          {order.amountFilled} {order.specifiedToken.symbol}
+        </td>
+        <td>
+          {order.amount} {order.specifiedToken.symbol}
+        </td>
+        <td>
+          {order.price} {order.specifiedToken.symbol}
+        </td>
+        <td>PlaceHolder {order.specifiedToken.symbol}</td>
+        <td>
+          {calculateTotalFees(order)} {order.unclaimedToken.symbol}
+        </td>
+        <td>{displayTime(order.timeSubmitted, "full")}</td>
+        <td>
+          <ActionButton order={order} />
+        </td>
+      </tr>
+    ))
+  ) : (
+    <tr>
+      <td colSpan={7}>No Order History</td>
+    </tr>
   );
-}
+};
+
+const TradeHistoryTable = ({ data }: TableProps) => {
+  return data.length ? (
+    data.map((order) => (
+      <tr key={order.id} className="">
+        <td>{order.pairName}</td>
+        <td className={displayOrderSide(order.side).className}>
+          {displayOrderSide(order.side).text}
+        </td>
+        <td>PlaceHolder {order.specifiedToken.symbol}</td>
+        <td>
+          {order.price} {order.specifiedToken.symbol}
+        </td>
+        <td>
+          {order.amountFilled} {order.specifiedToken.symbol}
+        </td>
+        <td>
+          {calculateTotalFees(order)} {order.unclaimedToken.symbol}
+        </td>
+        <td>{displayTime(order.timeCompleted, "full")}</td>
+      </tr>
+    ))
+  ) : (
+    <tr>
+      <td colSpan={7}>No Trade History</td>
+    </tr>
+  );
+};
diff --git a/src/app/components/PairSelector.tsx b/src/app/components/PairSelector.tsx
index 5d19ab1d..30100c4e 100644
--- a/src/app/components/PairSelector.tsx
+++ b/src/app/components/PairSelector.tsx
@@ -9,10 +9,7 @@ export function PairSelector() {
   };
   return (
     <div className="dropdown dropdown-start w-full" id="pair-selector">
-      <label
-        tabIndex={0}
-        className="justify-between btn btn-block font-bold base-100"
-      >
+      <label tabIndex={0} className="justify-between btn btn-block font-bold">
         <span>{pairSelector.name || "Loading"}</span>
         <span className="float-right">
           <svg
@@ -28,7 +25,7 @@ export function PairSelector() {
       </label>
       <ul
         tabIndex={0}
-        className="dropdown-content z-[1] menu shadow bg-neutral rounded-box w-full !my-0 !px-0"
+        className="dropdown-content z-[1] menu bg-base-200 shadow rounded-box w-full !my-0 !px-0"
       >
         <li className="text-xs text-left uppercase text-secondary-content !pl-4 ">
           Select a pair of tokens:
diff --git a/src/app/styles/globals.css b/src/app/styles/globals.css
index d5a62369..0a978a9c 100644
--- a/src/app/styles/globals.css
+++ b/src/app/styles/globals.css
@@ -79,3 +79,9 @@ input[type="number"]::-webkit-outer-spin-button {
 input[type="number"]::-ms-clear {
   display: none;
 }
+
+/* Use slightly darker base color for backgrounds by default */
+:root,
+[data-theme] {
+  background-color: hsl(var(--b2) / var(--tw-bg-opacity, 1));
+}
diff --git a/src/app/styles/table.css b/src/app/styles/table.css
new file mode 100644
index 00000000..9117f8f7
--- /dev/null
+++ b/src/app/styles/table.css
@@ -0,0 +1,20 @@
+.table thead {
+  border: none;
+}
+
+.table tr {
+  --tw-bg-opacity: 1;
+  background-color: hsl(var(--b2));
+
+  /* using borders instead of padding (as padding does not work for tr */
+  border-color: transparent;
+  border-width: 0 1rem;
+}
+
+.table tr.active,
+.table tr.active:nth-child(even),
+.table-zebra tbody tr:nth-child(even) {
+  --tw-bg-opacity: 1;
+  background-color: hsl(var(--b1) / var(--tw-bg-opacity, 1));
+  border-color: hsl(var(--b1) / var(--tw-bg-opacity, 1));
+}
diff --git a/src/app/utils.ts b/src/app/utils.ts
index 8287c350..143ccd4e 100644
--- a/src/app/utils.ts
+++ b/src/app/utils.ts
@@ -265,15 +265,14 @@ export function displayTime(
 }
 
 // Styling changes for Direction(side) in table
-// I think this would be unaffected by dark/light mode
 export function displayOrderSide(side: string): {
   text: string;
   className: string;
 } {
   if (side === "BUY") {
-    return { text: "Buy", className: "text-green-500" };
+    return { text: "Buy", className: "text-success" };
   } else if (side === "SELL") {
-    return { text: "Sell", className: "text-red-500" };
+    return { text: "Sell", className: "text-error" };
   } else {
     return { text: "-", className: "" };
   }
diff --git a/tailwind.config.js b/tailwind.config.js
index 81ee8e67..54fe2887 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -28,26 +28,41 @@ module.exports = {
   },
   daisyui: {
     themes: [
+      // browse DeXter colors at https://www.figma.com/file/qushS15h87wjpoXaY6ND4W/DeXter-UI---refresh?node-id=456%3A129&mode=dev
+      // by clicking on "Show more colors" in dev mode (while the whole page is selected)
       {
         dark: {
+          // full list of available color vars at https://daisyui.com/docs/colors/
           ...require("daisyui/src/theming/themes")["[data-theme=dark]"],
-          primary: "#292C35",
-          "primary-content": "#fff",
-          secondary: "#5C5E66",
+
+          // unused colors not listed
+          // override more colors if needed below
+
           "secondary-content": "#858D92",
-          accent: "#BFED3F",
-          "accent-content": "#12141C",
-          neutral: "#292C34",
-          error: "#FF7A75",
+          accent: "#CBFC42",
+          "accent-focus": "#CBFC42",
+          "accent-content": "#000000",
+          primary: "#000000",
+          "primary-content": "#FFFFFF",
+          neutral: "#383C3E",
+
+          error: "#FF5C5C",
           "error-content": "#4D2929",
+
+          // TODO: check up with designers on the success color
+          // used in tables for buy/sell indicators
+          // and in charts for the green line and candles
           success: "#73D2BD",
           "success-content": "#243E17",
-          "base-100": "#191B1D",
-          "base-300": "#000",
-          "base-content": "#F6F6F7",
+
+          "base-100": "#232629",
+          "base-200": "#191B1D",
+          "base-300": "#000000",
+          "base-content": "#FFFFFF",
+
           "--rounded-btn": "0",
           "--btn-text-case": "none",
-          "--rounded-box": "0px",
+          "--rounded-box": "0",
         },
       },
       {
@@ -55,20 +70,27 @@ module.exports = {
           ...require("daisyui/src/theming/themes")["[data-theme=light]"],
           // TODO: configure these colors when working with light theme
 
-          // "primary-content": "",
-          // secondary: "",
-          // "secondary-content": "",
-          // accent: "",
-          // "accent-content": "",
-          // neutral: "",
-          // error: "",
-          // success: "",
-          // "base-100": "",
-          // "base-300": "",
-          // "base-content": "",
+          "secondary-content": "#858D92",
+          accent: "#BFED3F",
+          "accent-content": "#000000",
+          primary: "#000000",
+          "primary-content": "#FFFFFF",
+          neutral: "#383C3E",
+
+          error: "#FF5C5C",
+          "error-content": "#4D2929",
+
+          success: "#73D2BD",
+          "success-content": "#243E17",
+
+          "base-100": "#232629",
+          "base-200": "#191B1D",
+          "base-300": "#000000",
+          "base-content": "#FFFFFF",
+
           "--rounded-btn": "0",
           "--btn-text-case": "none",
-          "--rounded-box": "0px",
+          "--rounded-box": "0",
         },
       },
     ], // true: all themes | false: only light + dark | array: specific themes like this ["light", "dark", "cupcake"]