diff --git a/web/components/bet-panel.tsx b/web/components/bet-panel.tsx
index 42f3abae..55467527 100644
--- a/web/components/bet-panel.tsx
+++ b/web/components/bet-panel.tsx
@@ -95,9 +95,7 @@ export function BetPanel(props: { contract: Contract; className?: string }) {
   const remainingBalance = (user?.balance || 0) - (betAmount || 0)
 
   return (
-    <Col
-      className={clsx('bg-gray-100 shadow-xl px-8 py-6 rounded-md', className)}
-    >
+    <Col className={clsx('bg-white shadow-md px-8 py-6 rounded-md', className)}>
       <Title className="!mt-0 whitespace-nowrap" text="Place a trade" />
 
       <div className="mt-2 mb-1 text-sm text-gray-400">Outcome</div>
diff --git a/web/components/contracts-list.tsx b/web/components/contracts-list.tsx
index b80ade7c..2902cccd 100644
--- a/web/components/contracts-list.tsx
+++ b/web/components/contracts-list.tsx
@@ -55,7 +55,7 @@ function ContractCard(props: { contract: Contract }) {
   return (
     <Link href={path(contract)}>
       <a>
-        <li className="col-span-1 bg-white hover:bg-gray-100 shadow-xl rounded-lg divide-y divide-gray-200">
+        <li className="col-span-1 bg-white hover:bg-gray-100 shadow-md rounded-lg divide-y divide-gray-200">
           <div className="card">
             <div className="card-body p-6">
               <Row className="justify-between gap-4 mb-2">
diff --git a/web/components/resolution-panel.tsx b/web/components/resolution-panel.tsx
index 4e98a713..626480a7 100644
--- a/web/components/resolution-panel.tsx
+++ b/web/components/resolution-panel.tsx
@@ -51,9 +51,7 @@ export function ResolutionPanel(props: {
       : 'btn-disabled'
 
   return (
-    <Col
-      className={clsx('bg-gray-100 shadow-xl px-8 py-6 rounded-md', className)}
-    >
+    <Col className={clsx('bg-white shadow-md px-8 py-6 rounded-md', className)}>
       <Title className="mt-0" text="Your market" />
 
       <div className="pt-2 pb-1 text-sm text-gray-400">Resolve outcome</div>
diff --git a/web/pages/create.tsx b/web/pages/create.tsx
index d7ad6cae..0a66d14d 100644
--- a/web/pages/create.tsx
+++ b/web/pages/create.tsx
@@ -45,7 +45,7 @@ export default function NewContract() {
     <Page>
       <Title text="Create a new prediction market" />
 
-      <div className="w-full bg-gray-100 rounded-lg shadow-xl px-6 py-4">
+      <div className="w-full bg-white rounded-lg shadow-md px-6 py-4">
         {/* Create a Tailwind form that takes in all the fields needed for a new contract */}
         {/* When the form is submitted, create a new contract in the database */}
         <form>
@@ -57,7 +57,7 @@ export default function NewContract() {
             <input
               type="text"
               placeholder="e.g. Will the FDA approve Paxlovid before Jun 2nd, 2022?"
-              className="input"
+              className="input input-bordered"
               value={question}
               onChange={(e) => setQuestion(e.target.value || '')}
             />