diff --git a/.cssrem b/.cssrem
new file mode 100644
index 0000000..3a2cdc2
--- /dev/null
+++ b/.cssrem
@@ -0,0 +1,4 @@
+{
+  "rootFontSize": 16,
+  "fixedDigits": 3
+}
diff --git a/package.json b/package.json
index f1e14e4..ec9df1e 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@craco/craco": "^6.4.3",
     "@rbl/terminal-library": "git+https://github.com/Rome-Blockchain-Labs/terminal-library.git#8dda04858acb1c45437325857eff56c60afca5ee",
     "@rbl/velox-common": "4.1.3",
     "@reduxjs/toolkit": "^1.8.0",
@@ -16,6 +17,7 @@
     "graphql-request": "^4.2.0",
     "lodash": "^4.17.21",
     "react": "^17.0.2",
+    "react-accessible-accordion": "^4.0.0",
     "react-dom": "^17.0.2",
     "react-redux": "^7.2.6",
     "react-router": "^6.2.2",
@@ -23,7 +25,8 @@
     "react-scripts": "5.0.0",
     "react-virtualized": "^9.22.3",
     "reactstrap": "^9.0.1",
-    "styled-components": "^5.3.3",
+    "styled-components": "^5.3.5",
+    "twin.macro": "^2.8.2",
     "typescript": "^4.6.2",
     "web-vitals": "^2.1.4"
   },
@@ -51,5 +54,17 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@babel/core": "^7.17.8",
+    "autoprefixer": "^10.4.4",
+    "babel-plugin-macros": "^3.1.0",
+    "postcss": "^8.4.12",
+    "tailwindcss": "^3.0.23"
+  },
+  "babelMacros": {
+    "twin": {
+      "preset": "styled-components"
+    }
   }
 }
diff --git a/src/App.js b/src/App.js
index e070a53..ebca7cb 100644
--- a/src/App.js
+++ b/src/App.js
@@ -10,7 +10,7 @@ function App() {
       <Provider store={store}>
       <br/><br/><br/><br/><br/><br/>
       <br/><br/>
-      <div style={{width:"500px", margin:"auto", border:"solid"}}>
+      <div style={{width:"500px", margin:"auto"}}>
         <TokenSearch />
         {/*  <iframe loading={"lazy"} src={"http://localhost:3000/cookieFramed.html"} height={500}/>*/}
       </div>
diff --git a/src/Components/Chip/index.jsx b/src/Components/Chip/index.jsx
new file mode 100644
index 0000000..d74c43b
--- /dev/null
+++ b/src/Components/Chip/index.jsx
@@ -0,0 +1,16 @@
+import React, { memo } from 'react';
+import './style.css'
+
+export const Chip = memo(
+  (props) => {
+    const {label, checked, onChange, name, value} = props
+    return (
+      <>
+        <input type="checkbox" id={`${label}-${name}`} onChange={onChange} checked={checked} name={name} value={value}/>
+        <label htmlFor={`${label}-${name}`}>{label} </label>
+      </>
+    )
+  }
+)
+
+export default Chip
\ No newline at end of file
diff --git a/src/Components/Chip/style.css b/src/Components/Chip/style.css
new file mode 100644
index 0000000..5594dc4
--- /dev/null
+++ b/src/Components/Chip/style.css
@@ -0,0 +1,27 @@
+input[type="checkbox"] {
+  display: none;
+}
+
+input[type="checkbox"] + label {
+  -webkit-transition: all 500ms ease;
+  transition: all 500ms ease;
+  font-size: 14px;
+  cursor: pointer;
+  border-radius: 5px;
+  background-color: #fff;
+  border:solid 2px #7d7d7d;
+  padding: 0.1rem 0.3rem;
+  display: inline-block;
+  -moz-user-select: -moz-none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  margin: 5px;
+}
+
+
+input[type="checkbox"]:checked + label {
+  -webkit-transition: all 500ms ease;
+  transition: all 500ms ease;
+  background-color: #666699; color: white; border-color:#666699;
+}
diff --git a/src/Components/accordion.css b/src/Components/accordion.css
new file mode 100644
index 0000000..f237bac
--- /dev/null
+++ b/src/Components/accordion.css
@@ -0,0 +1,31 @@
+
+.accordion__button {
+  background-color: #f4f4f4;
+  color: #444;
+  cursor: pointer;
+  padding: 18px;
+  width: 100%;
+  text-align: left;
+  border: none;
+}
+
+.accordion__button:hover {
+  background-color: #ddd;
+}
+
+.accordion__button:after {
+  display: block;
+  content: '';
+  float: right;
+  height: 10px;
+  width: 10px;
+  margin-right: 12px;
+  border-bottom: 2px solid currentColor;
+  border-right: 2px solid currentColor;
+  transform: rotate(-45deg);
+  }
+
+.accordion__button[aria-expanded='true']::after,
+.accordion__button[aria-selected='true']::after {
+  transform: rotate(45deg);
+}
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index ec2585e..17df0e7 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
diff --git a/src/redux/tokenSearchSlice.js b/src/redux/tokenSearchSlice.js
index a75f655..9426559 100644
--- a/src/redux/tokenSearchSlice.js
+++ b/src/redux/tokenSearchSlice.js
@@ -2,7 +2,7 @@ import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
 import retry from 'async-retry';
 import { stringify } from 'flatted';
 import { searchTokensAsync } from "../tokenSearch/helpers/async";
-import { uniq, omitBy } from "lodash"
+import { uniq, omitBy, uniqBy } from "lodash"
 import { networkExchangePairs } from '../tokenSearch/helpers/config';
 
 export const setPair = createAsyncThunk(
@@ -118,6 +118,20 @@ export const searchTokenPairs = createAsyncThunk(
     }
   }
 );
+const initNetworks =  uniq(networkExchangePairs
+  .map(pair => pair[0]))
+  .map(networkName => networkName).reduce((k, v) => ({...k, [v]: false}), {})
+
+const initExchanges = {}
+uniq(networkExchangePairs.map((exchange) => {
+  const netName = exchange[0]
+  const exchangeName = exchange[1]
+
+  if (!Object.keys(initExchanges).includes(netName)) 
+  initExchanges[netName] = {}
+  initExchanges[netName][exchangeName] = false
+  return false
+}))
 
 const initialTimestamp = new Date().getTime();
 const initialState = {
@@ -129,8 +143,8 @@ const initialState = {
   selectedPair: undefined,
   serializedTradeEstimator: '',
   suggestions: [],
-  exchangeMap: {},
-  networkMap: {}
+  exchangeMap: initExchanges,
+  networkMap: initNetworks
 };
 
 export const tokenSearchSlice = createSlice({
@@ -188,12 +202,47 @@ export const tokenSearchSlice = createSlice({
       state.isSelecting = !state.isSelecting;
     },
     setExchangeMap: (state, action) => {
-      state.exchangeMap[action.payload.exchangeName] = action.payload.checked
+      const {checked, exchangeName, networkName} = action.payload
+      
+      
+      if (exchangeName === 'all') {       
+        uniq(networkExchangePairs).map(pair => {
+          const exName = pair[1]
+          const netName = pair[0]
+          
+          if (!Object.keys(state.exchangeMap).includes(netName)) 
+            state.exchangeMap[netName] = {}
+
+          state.exchangeMap[netName][exName] = checked
+          return checked
+        })
+      } else {
+        if (networkName !== undefined)
+          state.exchangeMap[networkName][exchangeName] = checked
+
+        Object.keys(state.networkMap).filter(netName => { 
+          if(state.networkMap[netName] === true && Object.keys(state.exchangeMap[netName]).includes(exchangeName.toString())) {                   
+            state.exchangeMap[netName][exchangeName] = checked
+          }
+          return false
+        })
+         
+      }
     },
+    
     setNetworkMap: (state, action) => {
-      console.log(action)
-      state.networkMap[action.payload.networkName] = action.payload.checked
-    }
+      const {checked, networkName} = action.payload
+
+      if (networkName === 'all') {
+        const allNetworks = uniq(networkExchangePairs
+          .map(pair => pair[0]))
+          .map(networkName => networkName)
+        allNetworks.forEach((network) => {
+          state.networkMap[network] = checked
+        }) 
+      } else
+        state.networkMap[networkName] = checked
+    }, 
   },
 });
 
diff --git a/src/tokenSearch/NetworkFilter.jsx b/src/tokenSearch/NetworkFilter.jsx
new file mode 100644
index 0000000..09ec5c0
--- /dev/null
+++ b/src/tokenSearch/NetworkFilter.jsx
@@ -0,0 +1,43 @@
+import React from "react"
+import { useDispatch, useSelector } from 'react-redux';
+
+import {
+  Accordion,
+  AccordionItem,
+  AccordionItemHeading,
+  AccordionItemButton,
+  AccordionItemPanel,
+} from 'react-accessible-accordion';
+//import 'react-accessible-accordion/dist/fancy-example.css';
+import SearchNetworks from "./SearchNetworks";
+import SearchExchanges from "./SearchExchanges";
+
+import './../Components/accordion.css'
+
+export const NetworkFilter = () => {
+  const { isSelecting, searchText, exchangeMap, networkMap } = useSelector(
+    (state) => state
+  );
+    
+  return (<>
+   <Accordion allowZeroExpanded>
+      <AccordionItem>
+        <AccordionItemHeading>
+          <AccordionItemButton >
+            Filter Networks: search {}
+          </AccordionItemButton>
+        </AccordionItemHeading>
+        <AccordionItemPanel>
+         {<SearchNetworks />}
+         {<SearchExchanges />}
+        </AccordionItemPanel>
+      </AccordionItem>
+
+    </Accordion>
+  </>
+
+
+  )
+}
+
+export default NetworkFilter
\ No newline at end of file
diff --git a/src/tokenSearch/SearchExchanges.jsx b/src/tokenSearch/SearchExchanges.jsx
index bdabda2..8197cdd 100644
--- a/src/tokenSearch/SearchExchanges.jsx
+++ b/src/tokenSearch/SearchExchanges.jsx
@@ -1,10 +1,10 @@
-import React from "react"
+import React, { useMemo, useState, useEffect } from "react"
 import { uniqBy } from "lodash"
 import { networkExchangePairs } from "./helpers/config";
 import { useDispatch, useSelector } from 'react-redux';
 import { setExchangeMap } from "../redux/tokenSearchSlice";
 import styled from 'styled-components';
-
+import Chip from '../Components/Chip';
 
 const ExchangeList = styled.div`
   border-top:solid 1px #000;
@@ -13,34 +13,44 @@ const ExchangeList = styled.div`
   justify-content:center;
   padding:3px;
 `;
-
-
-//todo new file
-const ExchangeSelection = ({ exchangeName }) => {
-  const dispatch = useDispatch();
-  const { exchangeMap } = useSelector((state) => state);
-
-  return <>
-    <input
-      checked={exchangeMap[exchangeName] || false}
-      type="checkbox"
-      onChange={(e) => dispatch(setExchangeMap({ exchangeName, checked: e.target.checked }))}
-    />
-    {exchangeName}
-  </>
-}
-
+ 
 export const SearchExchanges = () => {
-  const { networkMap } = useSelector((state) => state);
-
-
+  const dispatch = useDispatch();
+  const { exchangeMap, networkMap } = useSelector((state) => state);
+  console.log('networkMap]: ', networkMap)
+  console.log('exchangeMap]: ', exchangeMap)
+  const handleChange = (e) => {    
+    const {checked, value } = e.target    
+    const data = value.split('-')
+    const networkName = data[0]
+    const exchangeName = data[1]
+    dispatch(setExchangeMap({ exchangeName, checked, networkName }));
+  } 
+
+  const selectedNets = Object.keys(networkMap).filter((key) => networkMap[key] === true)        
+  const exchanges = Object.fromEntries(Object.entries(exchangeMap).filter(([key, value]) => {                 
+    return selectedNets.includes(key.toString()) && exchangeMap[key]            
+  }))
+  
+  const isAllChecked = useMemo(() => {   
+    const checked = Object.keys(exchanges).every(network => {         
+      const result = Object.values(exchanges[network]).every((value) => {              
+        return value
+      })             
+      return result
+    })  
+    return checked
+  }, [exchanges]) 
+  
   return (
     <>
       <ExchangeList>
-        {<ExchangeSelection key={'*'} exchangeName={'All'} />}
+        <Chip label='All' onChange={handleChange} key={'allExchanges'} name='exchanges' value='-all' checked={isAllChecked} />  
+        
         {uniqBy(networkExchangePairs.filter(pair => networkMap[pair[0]]), 1).map(pair => {
           const exchangeName = pair[1]
-          return <ExchangeSelection key={exchangeName} exchangeName={exchangeName} />
+          const networkName = pair[0] 
+          return <Chip key={exchangeName} label={exchangeName} onChange={handleChange} name='exchanges' value={`${networkName}-${exchangeName}`} checked={exchangeMap[networkName][exchangeName]}/>
         })}
       </ExchangeList>
     </>
diff --git a/src/tokenSearch/SearchNetworks.jsx b/src/tokenSearch/SearchNetworks.jsx
index dc06a79..2c2201d 100644
--- a/src/tokenSearch/SearchNetworks.jsx
+++ b/src/tokenSearch/SearchNetworks.jsx
@@ -1,10 +1,10 @@
-import React from "react"
+import React, { useMemo } from "react"
+import { useDispatch, useSelector } from 'react-redux';
 import { uniq } from "lodash"
 import { networkExchangePairs } from "./helpers/config";
-import { SearchNetworkSelector } from "./SearchNetworksSelector";
-import { SearchNetworksAll } from "./SearchNetworksAll";
+import { setNetworkMap } from "../redux/tokenSearchSlice"
 import styled from 'styled-components';
-
+import Chip from '../Components/Chip';
 
 const NetworkList = styled.div`
   display:flex;
@@ -14,15 +14,29 @@ const NetworkList = styled.div`
 `;
 
 export const SearchNetworks = () => {
+  const dispatch = useDispatch();
+  const { networkMap } = useSelector((state) => state);
+
+  const handleChange = (e) => {    
+    const {checked, value: networkName} = e.target
+    dispatch(setNetworkMap({ networkName, checked }));
+  }
+
+  const isAllChecked = useMemo(() => {
+    return Object.keys(networkMap).length > 0 && 
+            Object.keys(networkMap).length === Object.values(networkMap).filter((e) => e === true).length
+  }, [networkMap])
+
+   
   return (
-    <>
+    <>      
       <NetworkList>
-        <SearchNetworksAll key={'All'} />
+        <Chip label='All' onChange={handleChange} key={'allNetworks'} name='networks' value='all' checked={isAllChecked} />    
         {
           uniq(networkExchangePairs
             .map(pair => pair[0]))
             .map(networkName => {
-              return <SearchNetworkSelector key={networkName} networkName={networkName} />
+              return <Chip label={networkName} onChange={handleChange} key={networkName} name='networks' value={networkName} checked={networkMap[networkName]}/>
             })
         }
       </NetworkList>
diff --git a/src/tokenSearch/SearchNetworksAll.jsx b/src/tokenSearch/SearchNetworksAll.jsx
deleted file mode 100644
index 9f31413..0000000
--- a/src/tokenSearch/SearchNetworksAll.jsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from "react"
-import { useDispatch, useSelector } from 'react-redux';
-import { setNetworkMap } from "../redux/tokenSearchSlice"
-import { omitBy } from "lodash"
-import { networkExchangePairs } from "./helpers/config";
-
-//todo new file
-export const SearchNetworksAll = () => {
-  const dispatch = useDispatch();
-  const { networkMap } = useSelector((state) => state);
-  let networkName = 'All';
-
-
-  return (
-    <>
-      <input
-        checked={networkMap[networkName] === true || Object.keys(omitBy(networkMap, (b) => !b)).length === 0}
-        type="checkbox"
-        onChange={e => {
-          // Loops through all the active networks to set them to false.
-          for (networkName in networkMap) {
-            dispatch(setNetworkMap({ networkName, checked: false }));
-          }
-
-          // Have to reset the name of the network because this is SUPER hacky.
-          networkName = 'All';
-
-          // Sets the "All Network" option to yes.
-          dispatch(setNetworkMap({ networkName, checked: e.target.checked }));
-        }}
-      />
-      {networkName}
-    </>
-  );
-};
-export default SearchNetworksAll;
\ No newline at end of file
diff --git a/src/tokenSearch/SearchNetworksSelector.jsx b/src/tokenSearch/SearchNetworksSelector.jsx
deleted file mode 100644
index 7f34065..0000000
--- a/src/tokenSearch/SearchNetworksSelector.jsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from "react"
-import { useDispatch, useSelector } from 'react-redux';
-import { setNetworkMap } from "../redux/tokenSearchSlice"
-
-
-//todo new file
-export const SearchNetworkSelector = ({ networkName }) => {
-  const dispatch = useDispatch();
-  const { networkMap } = useSelector((state) => state);
-
-
-  return (
-    <>
-      <input
-        checked={networkMap['All'] ? false : (networkMap[networkName] || false)}
-        type="checkbox"
-        onChange={e => {
-          dispatch(setNetworkMap({ networkName, checked: e.target.checked }));
-
-          networkName = 'All';
-          dispatch(setNetworkMap({ networkName, checked: false }));
-        }
-        }
-      />
-      {networkName}
-    </>
-  );
-};
-export default SearchNetworkSelector
\ No newline at end of file
diff --git a/src/tokenSearch/helpers/config.js b/src/tokenSearch/helpers/config.js
index 37c3cc6..56d5628 100644
--- a/src/tokenSearch/helpers/config.js
+++ b/src/tokenSearch/helpers/config.js
@@ -4,8 +4,6 @@ export const romeTokenSyncUri = String(
     'https://romenet.prod.velox.global/v1/graphql'
 ).replace('ws', 'http');
 
-
-
 const AvalanchePairs = [
   ["avalanche","baguette"],
   ["avalanche","canary"],
diff --git a/src/tokenSearch/index.jsx b/src/tokenSearch/index.jsx
index 52096b1..de4f939 100644
--- a/src/tokenSearch/index.jsx
+++ b/src/tokenSearch/index.jsx
@@ -6,9 +6,8 @@ import {
 } from '../redux/tokenSearchSlice';
 import SearchInput from "./SearchInput";
 import SearchResult from "./SearchResult";
-import SearchNetworks from "./SearchNetworks";
-import SearchExchanges from "./SearchExchanges";
 
+import NetworkFilter from "./NetworkFilter.jsx";
 
 export const TokenSearch = () => {
   const dispatch = useDispatch();
@@ -28,8 +27,7 @@ export const TokenSearch = () => {
   return (
     <div ref={searchRef}>
       <SearchInput />
-      {isSelecting && <SearchNetworks />}
-      {isSelecting && <SearchExchanges />}
+      <NetworkFilter />      
       {isSelecting && <SearchResult loading={isLoading} />}
     </div>
   );
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..e43e4d9
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,253 @@
+const { isObject, keys } = require('lodash');
+
+const themeColors = {
+  algorand: 'var(--color-algorand)',
+  avalanche: 'var(--color-avalanche)',
+  binance: 'var(--color-binance)',
+  black: 'var(--color-black)',
+  blue: {
+    100: 'var(--color-blue-100)',
+    200: 'var(--color-blue-200)',
+    300: 'var(--color-blue-300)',
+    400: 'var(--color-blue-400)',
+    500: 'var(--color-blue-500)',
+    600: 'var(--color-blue-600)',
+    700: 'var(--color-blue-700)',
+    800: 'var(--color-blue-800)',
+    900: 'var(--color-blue-900)',
+  },
+  borrow: 'var(--color-borrow)',
+  cardano: 'var(--color-cardano)',
+  cosmos: 'var(--color-cosmos)',
+  dark: {
+    100: 'var(--color-dark-100)',
+    200: 'var(--color-dark-200)',
+    300: 'var(--color-dark-300)',
+    400: 'var(--color-dark-400)',
+    500: 'var(--color-dark-500)',
+    600: 'var(--color-dark-600)',
+    700: 'var(--color-dark-700)',
+    800: 'var(--color-dark-800)',
+    900: 'var(--color-dark-900)',
+  },
+  eos: 'var(--color-eos)',
+  gray: {
+    100: 'var(--color-gray-100)',
+    200: 'var(--color-gray-200)',
+    300: 'var(--color-gray-300)',
+    400: 'var(--color-gray-400)',
+    500: 'var(--color-gray-500)',
+    600: 'var(--color-gray-600)',
+    700: 'var(--color-gray-700)',
+    800: 'var(--color-gray-800)',
+    900: 'var(--color-gray-900)',
+  },
+  green: {
+    400: 'var(--color-green-400)',
+    500: 'var(--color-green-500)',
+    700: 'var(--color-green-700)',
+  },
+  hedera: 'var(--color-hedera)',
+  nuls: 'var(--color-nuls)',
+  orange: {
+    500: 'var(--color-orange-500)',
+  },
+  pink: {
+    800: 'var(--color-pink-800)',
+    900: 'var(--color-pink-900)',
+  },
+  polkadot: 'var(--color-polkadot)',
+  red: {
+    400: 'var(--color-red-400)',
+    500: 'var(--color-red-500)',
+  },
+  solana: 'var(--color-solana)',
+  stellar: 'var(--color-stellar)',
+  supply: 'var(--color-supply)',
+  tezos: 'var(--color-tezos)',
+  transparent: 'transparent',
+  tron: 'var(--color-tron)',
+  white: 'var(--color-white)',
+  yellow: {
+    400: 'var(--color-yellow-400)',
+    500: 'var(--color-yellow-500)',
+  },
+};
+
+const withOpacity = (variable) => {
+  return ({ opacityValue }) => {
+    if (opacityValue) {
+      return `rgba(${variable}, ${opacityValue})`;
+    }
+    return `rgb(${variable})`;
+  };
+};
+
+const generateDefaultColors = (colors) => {
+  const defaultColors = {};
+  keys(colors).forEach((colorName) => {
+    if (isObject(colors[colorName])) {
+      defaultColors[colorName] = generateDefaultColors(colors[colorName]);
+    } else {
+      defaultColors[colorName] = `rgb(${colors[colorName]})`;
+    }
+  });
+
+  return defaultColors;
+};
+
+const generateBackgroundColors = (colors) => {
+  const bgColors = {};
+  keys(colors).forEach((colorName) => {
+    if (isObject(colors[colorName])) {
+      bgColors[colorName] = generateBackgroundColors(colors[colorName]);
+    } else {
+      bgColors[colorName] = withOpacity(colors[colorName]);
+    }
+  });
+
+  return bgColors;
+};
+
+module.exports = {
+  darkMode: false, // or 'media' or 'class'
+  theme: {
+    extend: {
+      backgroundImage: {
+        darkConnect: 'linear-gradient(180deg, transparent 0%, #001016 80%)',
+        darkPage: 'linear-gradient(128deg, #006C8F 0%, #070707 100%)',
+        lightConnect: 'linear-gradient(180deg, transparent 0%, white 80%)',
+        lightPage: 'linear-gradient(236deg, #FFE1E1 0%, #DCF5FF 100%)',
+      },
+      borderRadius: {
+        10: '.625rem',
+        14: '.875rem',
+        17: '1.0625rem',
+        20: '1.25rem',
+        28: '1.75rem',
+        3: '.1875rem',
+        6: '.375rem',
+      },
+      colors: generateDefaultColors(themeColors),
+      backgroundColor: generateBackgroundColors(themeColors),
+      height: {
+        19: '4.75rem',
+        '6/5': '120%',
+        'fit-content': 'fit-content',
+      },
+      maxWidth: {
+        100: '25rem',
+        52: '13rem',
+      },
+      minWidth: {
+        36: '9rem', // 144px
+        screen: '100vw', // 100vw
+      },
+      minHeight: {
+        'full-view': '100vh',
+      },
+      opacity: {
+        15: '.15',
+        33: '.33',
+        50: '.5',
+        72: '.72',
+        83: '.83',
+        85: '.85',
+      },
+      screens: {
+        '3xl': '1920px',
+      },
+      spacing: {
+        1.25: '.3125rem',
+        12.5: '3.125rem',
+        13: '3.25rem',
+        17.5: '4.375rem',
+        18: '4.5rem',
+        2.5: '.625rem',
+        23: '5.75rem',
+        25: '6.25rem',
+        27: '6.75rem',
+        37.5: '9.375rem',
+        4.5: '1.125rem',
+        5.5: '1.375rem',
+        50: '12.5rem',
+        55: '13.75rem',
+        6.25: '1.5625rem',
+        6.5: '1.625rem',
+        7.5: '1.875rem',
+        75: '18.75rem',
+        85: '21.25rem',
+      },
+      transitionProperty: {
+        size: 'width, height',
+      },
+      width: {
+        'fit-content': 'fit-content',
+      },
+      zIndex: {
+        '-1': '-1',
+      },
+      lineHeight: {
+        1: 'var(--line-height-1)',
+        2: 'var(--line-height-2)',
+        3: 'var(--line-height-3)',
+        4: 'var(--line-height-4)',
+        5: 'var(--line-height-5)',
+        6: 'var(--line-height-6)',
+        7: 'var(--line-height-7)',
+        8: 'var(--line-height-8)',
+        9: 'var(--line-height-9)',
+        10: 'var(--line-height-10)',
+        11: 'var(--line-height-11)',
+        12: 'var(--line-height-12)',
+        13: 'var(--line-height-13)',
+        14: 'var(--line-height-14)',
+        15: 'var(--line-height-15)',
+        16: 'var(--line-height-16)',
+        17: 'var(--line-height-17)',
+        18: 'var(--line-height-18)',
+        19: 'var(--line-height-19)',
+        20: 'var(--line-height-20)',
+        21: 'var(--line-height-21)',
+        none: 'var(--line-height-none)',
+      },
+    },
+    fontFamily: {
+      condensed: ['Roboto Condensed'],
+      fira: ['Fira Code', 'monospace'],
+      roboto: ['Roboto', 'sans-serif'],
+      sans: ['Montserrat', 'ui-sans-serif', 'system-ui', '-apple-system'],
+    },
+    fontSize: {
+      '9xs': 'var(--font-9xs-size)',
+      '8xs': 'var(--font-8xs-size)',
+      '7xs': 'var(--font-7xs-size)',
+      '6xs': 'var(--font-6xs-size)',
+      '5xs': 'var(--font-5xs-size)',
+      '4xs': 'var(--font-4xs-size)',
+      '3xs': 'var(--font-3xs-size)',
+      '2xs': 'var(--font-2xs-size)',
+      xs: ['var(--font-xs-size)', { lineHeight: 'var(--font-xs-line-height)' }],
+      sm: ['var(--font-sm-size)', { lineHeight: 'var(--font-sm-line-height)' }],
+      md: 'var(--font-md-size)',
+      base: [
+        'var(--font-base-size)',
+        { lineHeight: 'var(--font-base-line-height)' },
+      ],
+      lg: ['var(--font-lg-size)', { lineHeight: 'var(--font-lg-line-height)' }],
+      xl: ['var(--font-xl-size)', { lineHeight: 'var(--font-xl-line-height)' }],
+      '2xl': 'var(--font-2xl-size)',
+      '3xl': 'var(--font-3xl-size)',
+      '4xl': 'var(--font-4xl-size)',
+      '5xl': 'var(--font-5xl-size)',
+      '6xl': 'var(--font-6xl-size)',
+      '7xl': 'var(--font-7xl-size)',
+      '8xl': 'var(--font-8xl-size)',
+      '9xl': 'var(--font-9xl-size)',
+    },
+  },
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+  ],
+  plugins: [],
+};