diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
index 6855e725..64c5e4b0 100644
--- a/src/components/button/button.tsx
+++ b/src/components/button/button.tsx
@@ -23,6 +23,7 @@ export interface Props extends BreakpointsProps {
     | 'link-gray';
   size?: Size;
   disabled?: boolean;
+  destructive?: boolean;
   href?: string;
   theme?: 'light' | 'dark';
   onClick?: () => void;
@@ -32,6 +33,7 @@ export interface Props extends BreakpointsProps {
 const Button = ({
   children,
   disabled,
+  destructive,
   type = 'primary',
   size = 'md',
   onClick,
@@ -56,6 +58,7 @@ const Button = ({
         styles[theme],
         styles[sizeClass],
         { [styles.disabled]: disabled },
+        { [styles.destructive]: destructive },
         className
       )}
       {...(isExternal(href) ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
@@ -71,6 +74,7 @@ const Button = ({
         styles[theme],
         styles[sizeClass],
         { [styles.disabled]: disabled },
+        { [styles.destructive]: destructive },
         className
       )}
       onClick={onClick}
diff --git a/src/components/button/variants/primary.module.scss b/src/components/button/variants/primary.module.scss
index 47aec2da..b079976e 100644
--- a/src/components/button/variants/primary.module.scss
+++ b/src/components/button/variants/primary.module.scss
@@ -3,6 +3,11 @@
   color: $color-base-light;
   border: none;
 
+  &.destructive {
+    color: $color-base-light;
+    background-color: $color-action-error-500;
+  }
+
   &.xxs {
     padding: 0 10px;
     border-radius: 24px;
@@ -51,6 +56,23 @@
     background-color: $color-blue-10;
   }
 
+  &.destructive {
+    &:hover {
+      color: $color-base-light;
+      background-color: $color-action-error-700;
+    }
+
+    &:active {
+      color: $color-base-light;
+      background-color: $color-action-error-600;
+    }
+
+    &:disabled {
+      color: $color-action-error-50;
+      background-color: $color-action-error-200;
+    }
+  }
+
   &.dark {
     background-color: $color-blue-400;
 
diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts
index 815f1d5b..035f7547 100644
--- a/src/components/icons/index.ts
+++ b/src/components/icons/index.ts
@@ -8,16 +8,20 @@ import { ErrorCircleIcon } from './error-circle';
 import { ErrorCircleFillIcon } from './error-circle-fill';
 import { HelpOutlineIcon } from './help-outline';
 import { InfoCircleIcon } from './info-circle';
+import { RadioButtonIcon } from './radio-button';
+import { RadioButtonFillIcon } from './radio-button-fill';
 
 export {
   CheckCircleIcon,
   CheckCircleFillIcon,
-  CheckIcon,
   CheckboxRadioIcon,
+  CheckIcon,
   CloseIcon,
   CrossIcon,
   ErrorCircleIcon,
   ErrorCircleFillIcon,
   HelpOutlineIcon,
   InfoCircleIcon,
+  RadioButtonIcon,
+  RadioButtonFillIcon,
 };
diff --git a/src/components/icons/radio-button-fill.tsx b/src/components/icons/radio-button-fill.tsx
new file mode 100644
index 00000000..c3a1e5a2
--- /dev/null
+++ b/src/components/icons/radio-button-fill.tsx
@@ -0,0 +1,10 @@
+import { ComponentProps } from 'react';
+
+export const RadioButtonFillIcon = (props: ComponentProps<'svg'>) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="27" height="28" viewBox="0 0 27 28" fill="none" {...props}>
+      <circle cx="13.5" cy="14" r="13" stroke="currentColor" />
+      <circle cx="13.5" cy="14" r="7.5" fill="currentColor" />
+    </svg>
+  );
+};
diff --git a/src/components/icons/radio-button.tsx b/src/components/icons/radio-button.tsx
new file mode 100644
index 00000000..b258f4bd
--- /dev/null
+++ b/src/components/icons/radio-button.tsx
@@ -0,0 +1,9 @@
+import { ComponentPropsWithoutRef } from 'react';
+
+export const RadioButtonIcon = (props: ComponentPropsWithoutRef<'svg'>) => {
+  return (
+    <svg width="27" height="28" viewBox="0 0 27 28" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <circle cx="13.5" cy="14" r="13" stroke="currentColor" />
+    </svg>
+  );
+};
diff --git a/src/components/input/input.module.scss b/src/components/input/input.module.scss
index 106cc9a2..10e0315f 100644
--- a/src/components/input/input.module.scss
+++ b/src/components/input/input.module.scss
@@ -9,73 +9,61 @@
     opacity: 0.4;
     pointer-events: none;
   }
-  &.block {
-    width: 100%;
-    .input,
-    input {
-      width: 100%;
-    }
-  }
-}
-
-@mixin normal {
-  @include font-heading-7;
-}
-
-@mixin large {
-  @include font-heading-4;
 }
 
 .input {
   display: inline-block;
   max-width: 100%;
 
-  &.textCenter {
-    input {
-      text-align: center;
-    }
-  }
-
   input {
     min-width: 30px;
     background-color: transparent;
-    color: $color-dark-blue-400;
     border-width: 0;
     outline: none;
-
-    &:focus {
-      color: $color-dark-blue-400;
-    }
-
-    &::placeholder {
-      color: $color-dark-blue-400;
-    }
+    box-shadow: none;
+    text-align: center;
   }
 
   &.normal {
     input {
-      @include normal;
+      @include font-heading-7;
+      color: $color-dark-blue-400;
+
+      &:focus {
+        color: $color-dark-blue-400;
+      }
+
+      &::placeholder {
+        color: $color-dark-blue-400;
+      }
     }
-  }
 
-  &.large {
-    input {
-      @include large;
+    @media (min-width: $sm) {
+      min-width: 50px;
+
+      input {
+        @include font-heading-4;
+      }
     }
   }
 
-  &:not(.normal):not(.large) {
+  &.small {
     input {
-      @include normal;
-    }
-  }
+      @include font-body-8;
+      color: $color-dark-blue-100;
 
-  @media (min-width: $sm) {
-    min-width: 50px;
+      &:focus {
+        color: $color-dark-blue-100;
+      }
+
+      &::placeholder {
+        color: $color-dark-blue-100;
+      }
+    }
 
-    &:not(.normal):not(.large) {
+    @media (min-width: $sm) {
       input {
-        @include large;
+        @include font-body-2;
       }
     }
   }
diff --git a/src/components/input/input.tsx b/src/components/input/input.tsx
index d754636e..c3e739a3 100644
--- a/src/components/input/input.tsx
+++ b/src/components/input/input.tsx
@@ -7,46 +7,49 @@ import styles from './input.module.scss';
 type Props = {
   onChange: ChangeEventHandler<HTMLInputElement>;
   value: string;
-  size?: 'normal' | 'large';
+  size?: 'normal' | 'small';
   disabled?: boolean;
   type?: 'text' | 'number';
   placeholder?: string;
   id?: string;
-  block?: boolean;
   allowNegative?: boolean;
   autoFocus?: boolean;
 };
 
-const Input = ({ size, type = 'text', block, disabled, allowNegative, ...componentProps }: Props) => {
+const Input = ({
+  size = 'normal',
+  type = 'text',
+  disabled,
+  allowNegative,
+  value,
+  placeholder,
+  ...componentProps
+}: Props) => {
   return (
     <div
       className={classNames(styles.inputWrapper, {
         [styles.disabled]: disabled,
-        [styles.block]: block,
       })}
     >
       {type === 'text' && (
         <AutosizeInput
-          className={classNames(styles.input, styles.textCenter, {
-            [styles.large]: size === 'large',
-            [styles.normal]: size === 'normal',
-          })}
+          className={classNames(styles.input, [styles[size]])}
           {...componentProps}
+          placeholder={placeholder}
           placeholderIsMinWidth
+          value={value}
         />
       )}
       {type === 'number' && (
         <NumberFormat
-          className={classNames(styles.input, styles.textCenter, {
-            [styles.large]: size === 'large',
-            [styles.normal]: size === 'normal',
-          })}
+          className={classNames(styles.input, [styles[size]])}
           {...componentProps}
-          customInput={AutosizeInput}
           allowNegative={allowNegative || false}
+          customInput={AutosizeInput}
           decimalScale={18}
+          placeholder={placeholder || '00'}
           placeholderIsMinWidth
-          placeholder="00"
+          value={value}
         />
       )}
     </div>
diff --git a/src/components/radio-button/radio-button.module.scss b/src/components/radio-button/radio-button.module.scss
index e828e5e6..c0098599 100644
--- a/src/components/radio-button/radio-button.module.scss
+++ b/src/components/radio-button/radio-button.module.scss
@@ -1,12 +1,13 @@
 @import '../../styles/variables.module.scss';
 @import '../../styles/fonts.module.scss';
 
-.radioButtonLabel {
+.label {
   position: relative;
   display: flex;
   align-items: center;
   user-select: none;
   cursor: pointer;
+  transition: color 0.2s ease;
 
   @include font-body-12;
   color: $color-dark-blue-50;
@@ -33,13 +34,32 @@
   }
 }
 
-.radioButtonInput {
+.labelLarge {
+  @include font-heading-7;
+  padding-left: 40px;
+  height: auto;
+
+  &.warning {
+    color: $color-action-error-600;
+
+    &:hover:not(.checked) {
+      color: $color-action-error-400;
+    }
+  }
+
+  @media (min-width: $sm) {
+    @include font-heading-4;
+    padding-left: 40px;
+  }
+}
+
+.input {
   position: absolute;
   left: 0;
   opacity: 0;
 }
 
-.radioButtonCheckmark {
+.icon {
   position: absolute;
   left: 0;
   display: flex;
@@ -57,3 +77,10 @@
     }
   }
 }
+
+.iconLarge {
+  svg {
+    width: 27px;
+    height: 27px;
+  }
+}
diff --git a/src/components/radio-button/radio-button.tsx b/src/components/radio-button/radio-button.tsx
index 6201c2e8..f1442fd3 100644
--- a/src/components/radio-button/radio-button.tsx
+++ b/src/components/radio-button/radio-button.tsx
@@ -2,34 +2,50 @@ import { ReactNode } from 'react';
 import classNames from 'classnames';
 import styles from './radio-button.module.scss';
 import { triggerOnEnter } from '../modal';
-import { CheckboxRadioIcon, CheckCircleFillIcon } from '../icons';
+import { CheckboxRadioIcon, CheckCircleFillIcon, RadioButtonFillIcon, RadioButtonIcon } from '../icons';
+
+type Radio = { type: 'radio'; size?: 'default'; color?: undefined };
+type RadioLarge = { type?: 'radio'; size: 'large'; color?: 'default' | 'success' | 'warning' };
+type Checkbox = { type?: 'checkbox'; size?: 'default'; color?: undefined };
 
 type Props = {
   checked: boolean;
   children: ReactNode;
   name?: string;
-  type?: 'radio' | 'checkbox';
   onChange: () => void;
-};
+} & (Radio | RadioLarge | Checkbox);
 
 const RadioButton = (props: Props) => {
-  const { checked, children, name, type = 'radio', onChange } = props;
+  const { checked, children, name, type = 'radio', size = 'default', color = 'default', onChange } = props;
+
+  if (size === 'large') {
+    return (
+      <div role={type} aria-checked={checked} tabIndex={0} onKeyDown={triggerOnEnter(onChange)}>
+        <label
+          className={classNames(styles.label, styles.labelLarge, [styles[color]], {
+            [styles.checked]: checked,
+          })}
+        >
+          {children}
+
+          <input className={styles.input} type={type} name={name} tabIndex={-1} onChange={onChange} checked={checked} />
+
+          <span className={classNames(styles.icon, styles.iconLarge, [styles[color]])}>
+            {checked ? <RadioButtonFillIcon /> : <RadioButtonIcon />}
+          </span>
+        </label>
+      </div>
+    );
+  }
 
   return (
     <div role={type} aria-checked={checked} tabIndex={0} onKeyDown={triggerOnEnter(onChange)}>
-      <label className={classNames(styles.radioButtonLabel, { [styles.checked]: checked })}>
+      <label className={classNames(styles.label, { [styles.checked]: checked })}>
         {children}
 
-        <input
-          className={styles.radioButtonInput}
-          type={type}
-          name={name}
-          tabIndex={-1}
-          onChange={onChange}
-          checked={checked}
-        />
+        <input className={styles.input} type={type} name={name} tabIndex={-1} onChange={onChange} checked={checked} />
 
-        <span className={styles.radioButtonCheckmark}>{checked ? <CheckCircleFillIcon /> : <CheckboxRadioIcon />}</span>
+        <span className={styles.icon}>{checked ? <CheckCircleFillIcon /> : <CheckboxRadioIcon />}</span>
       </label>
     </div>
   );
diff --git a/src/pages/proposal-commons/proposal-details/vote-form/vote-form.module.scss b/src/pages/proposal-commons/proposal-details/vote-form/vote-form.module.scss
index f6f472f9..fe21b0ab 100644
--- a/src/pages/proposal-commons/proposal-details/vote-form/vote-form.module.scss
+++ b/src/pages/proposal-commons/proposal-details/vote-form/vote-form.module.scss
@@ -1,12 +1,30 @@
 @import '../../../../styles/variables.module.scss';
+@import '../../../../styles/fonts.module.scss';
 
-.voteForm {
-  text-align: center;
+.voteFormContent {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 16px 0;
+
+  @media (min-width: $sm) {
+    gap: 24px;
+    padding: 32px 0;
+  }
 }
 
-.voteFormContent {
-  margin-top: $space-xxxl;
-  margin-bottom: 2 * $space-xxl;
+.voteFormFooter {
   display: flex;
   justify-content: center;
+  width: 100%;
+
+  > button {
+    width: 100%;
+  }
+
+  @media (min-width: $sm) {
+    > button {
+      width: auto;
+    }
+  }
 }
diff --git a/src/pages/proposal-commons/proposal-details/vote-form/vote-form.tsx b/src/pages/proposal-commons/proposal-details/vote-form/vote-form.tsx
index bb030954..1206d57e 100644
--- a/src/pages/proposal-commons/proposal-details/vote-form/vote-form.tsx
+++ b/src/pages/proposal-commons/proposal-details/vote-form/vote-form.tsx
@@ -2,6 +2,7 @@ import { useState } from 'react';
 import Button from '../../../../components/button';
 import RadioButton from '../../../../components/radio-button/radio-button';
 import styles from './vote-form.module.scss';
+import { ModalFooter, ModalHeader } from '../../../../components/modal';
 
 export type VotingChoice = 'for' | 'against';
 
@@ -17,22 +18,32 @@ const VoteForm = (props: Props) => {
   const isVotingFor = checked === 'for';
 
   return (
-    <div className={styles.voteForm}>
-      <h5>Vote on Proposal #{voteId}</h5>
-      <div className={styles.voteFormContent}>
-        <div role="radiogroup" aria-label="Vote form">
-          <RadioButton name="vote-form" onChange={() => setChecked('for')} checked={isVotingFor}>
-            <h4>For</h4>
-          </RadioButton>
-          <RadioButton name="vote-form" onChange={() => setChecked('against')} checked={!isVotingFor}>
-            <h4>Against</h4>
-          </RadioButton>
-        </div>
+    <>
+      <ModalHeader>{`Vote on Proposal #${voteId}`}</ModalHeader>
+
+      <div className={styles.voteFormContent} role="radiogroup" aria-label="Vote form">
+        <RadioButton
+          size="large"
+          name="vote-form"
+          color="warning"
+          onChange={() => setChecked('against')}
+          checked={!isVotingFor}
+        >
+          Against
+        </RadioButton>
+        <RadioButton size="large" name="vote-form" onChange={() => setChecked('for')} checked={isVotingFor}>
+          For
+        </RadioButton>
       </div>
-      <Button type="secondary" size="large" onClick={() => onConfirm(checked)}>
-        Create Transaction
-      </Button>
-    </div>
+
+      <ModalFooter>
+        <div className={styles.voteFormFooter}>
+          <Button type="primary" size="sm" sm={{ size: 'lg' }} onClick={() => onConfirm(checked)}>
+            Create Transaction
+          </Button>
+        </div>
+      </ModalFooter>
+    </>
   );
 };
 
diff --git a/src/pages/proposals/forms/choose-delegate-action/choose-delegate-action.module.scss b/src/pages/proposals/forms/choose-delegate-action/choose-delegate-action.module.scss
index 05ad7ab2..7902f732 100644
--- a/src/pages/proposals/forms/choose-delegate-action/choose-delegate-action.module.scss
+++ b/src/pages/proposals/forms/choose-delegate-action/choose-delegate-action.module.scss
@@ -1,7 +1,38 @@
 @import '../../../../styles/variables.module.scss';
+@import '../../../../styles/fonts.module.scss';
 
 .actions {
-  & > * {
-    margin: 0 $space-sm;
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 24px;
+  margin-top: -8px;
+
+  &,
+  > button {
+    width: 100%;
+  }
+
+  @media (min-width: $sm) {
+    flex-direction: row;
+    justify-content: center;
+    gap: 32px;
+    margin-top: 24px;
+
+    > button {
+      width: auto;
+    }
+  }
+}
+
+.confirmationText {
+  margin-top: 24px;
+  text-align: center;
+  text-wrap: pretty;
+  text-align: center;
+  color: $color-action-error-800;
+  @include font-body-15;
+
+  @media (min-width: $sm) {
+    @include font-body-9;
   }
 }
diff --git a/src/pages/proposals/forms/choose-delegate-action/choose-delegate-action.tsx b/src/pages/proposals/forms/choose-delegate-action/choose-delegate-action.tsx
index 03c0a200..8f015588 100644
--- a/src/pages/proposals/forms/choose-delegate-action/choose-delegate-action.tsx
+++ b/src/pages/proposals/forms/choose-delegate-action/choose-delegate-action.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import Button from '../../../../components/button';
 import { ModalFooter, ModalHeader } from '../../../../components/modal';
 import styles from './choose-delegate-action.module.scss';
@@ -12,17 +13,53 @@ interface Props {
 const ChooseDelegateAction = (props: Props) => {
   const { onUpdateDelegation, onUndelegate, canUpdateDelegation, canUndelegate } = props;
 
+  const [confirmationStep, setConfirmationStep] = useState(false);
+
+  if (confirmationStep) {
+    return (
+      <>
+        <ModalHeader>Confirm delegation action</ModalHeader>
+
+        <ModalFooter>
+          <div className={styles.actions}>
+            <Button type="secondary-neutral" size="sm" sm={{ size: 'lg' }} onClick={() => setConfirmationStep(false)}>
+              Cancel
+            </Button>
+
+            <Button destructive type="primary" size="sm" sm={{ size: 'lg' }} onClick={onUndelegate}>
+              Yes, Undelegate
+            </Button>
+          </div>
+
+          <p className={styles.confirmationText}>Once altered, your delegation cannot be changed again for 7 days.</p>
+        </ModalFooter>
+      </>
+    );
+  }
+
   return (
     <>
       <ModalHeader>Choose delegation action</ModalHeader>
 
       <ModalFooter>
         <div className={styles.actions}>
-          <Button type="secondary" onClick={onUpdateDelegation} disabled={!canUpdateDelegation}>
+          <Button
+            type="secondary-neutral"
+            size="sm"
+            sm={{ size: 'lg' }}
+            onClick={onUpdateDelegation}
+            disabled={!canUpdateDelegation}
+          >
             Update delegation
           </Button>
 
-          <Button type="secondary" onClick={onUndelegate} disabled={!canUndelegate}>
+          <Button
+            type="primary"
+            size="sm"
+            sm={{ size: 'lg' }}
+            onClick={() => setConfirmationStep(true)}
+            disabled={!canUndelegate}
+          >
             Undelegate
           </Button>
         </div>
diff --git a/src/pages/proposals/forms/delegate/delegate-form.tsx b/src/pages/proposals/forms/delegate/delegate-form.tsx
index 512ac110..60e74a26 100644
--- a/src/pages/proposals/forms/delegate/delegate-form.tsx
+++ b/src/pages/proposals/forms/delegate/delegate-form.tsx
@@ -1,5 +1,4 @@
 import { useState } from 'react';
-import classNames from 'classnames';
 import Button from '../../../../components/button';
 import { Input } from '../../../../components/input';
 import { ModalFooter, ModalHeader } from '../../../../components/modal';
@@ -8,7 +7,6 @@ import { useApi3Pool } from '../../../../contracts';
 import { utils, constants } from 'ethers';
 import * as notifications from '../../../../components/notifications';
 import { messages } from '../../../../utils/messages';
-import globalStyles from '../../../../styles/global-styles.module.scss';
 import styles from './delegate.module.scss';
 import { handleTransactionError } from '../../../../utils';
 import { convertToAddressOrThrow } from '../../../../logic/proposals/encoding/ens-name';
@@ -67,25 +65,28 @@ const DelegateVotesForm = (props: Props) => {
     <>
       <ModalHeader>Delegate my votes to:</ModalHeader>
 
-      <div className={globalStyles.textCenter}>
-        <Input
-          type="text"
-          placeholder="Enter address or ENS name here"
-          value={delegationAddress}
-          onChange={(e) => {
-            setDelegationAddress(e.target.value);
-            setError('');
-          }}
-          autoFocus
-        />
-
-        <div className={classNames(globalStyles.textNormal, styles.subtext)}>
-          You will not be able to vote on proposals while your votes are delegated. Your delegate can vote for you.
+      <div className={styles.delegateFormModalContent}>
+        <div className={styles.inputWrapper}>
+          <Input
+            type="text"
+            size="small"
+            placeholder="Enter address or ENS name here"
+            value={delegationAddress}
+            onChange={(e) => {
+              setDelegationAddress(e.target.value);
+              setError('');
+            }}
+            autoFocus
+          />
         </div>
+
+        <p className={styles.subtext}>
+          You will not be able to vote on proposals while your votes are delegated. Your delegate can vote for you.
+        </p>
       </div>
 
       <ModalFooter>
-        <Button type="secondary" size="large" onClick={onDelegate}>
+        <Button className={styles.delegateButton} type="primary" size="sm" sm={{ size: 'md' }} onClick={onDelegate}>
           Delegate
         </Button>
 
diff --git a/src/pages/proposals/forms/delegate/delegate.module.scss b/src/pages/proposals/forms/delegate/delegate.module.scss
index 6a9858a3..2b94349c 100644
--- a/src/pages/proposals/forms/delegate/delegate.module.scss
+++ b/src/pages/proposals/forms/delegate/delegate.module.scss
@@ -1,12 +1,56 @@
 @import '../../../../styles/variables.module.scss';
+@import '../../../../styles/fonts.module.scss';
 
-.error {
-  margin-top: $space-xl;
-  color: $error-color;
+.delegateFormModalContent {
+  display: flex;
+  flex-direction: column;
+  gap: 48px;
   text-align: center;
+  width: 100%;
+}
+
+.inputWrapper {
+  display: flex;
+  justify-content: center;
+  padding: 6px 16px;
+  height: 50px;
+  box-sizing: border-box;
+  overflow: hidden;
+
+  @media (min-width: $sm) {
+    padding: 24px 0 0 0;
+    height: 82px;
+  }
 }
 
 .subtext {
-  color: $tertiary-color;
-  margin-top: $space-xxxl;
+  @include font-body-15;
+  color: $color-dark-blue-400;
+  text-align: center;
+  padding: 0 24px;
+  text-wrap: pretty;
+
+  @media (min-width: $sm) {
+    @include font-body-9;
+    padding: 0;
+  }
+}
+
+.delegateButton {
+  width: 100%;
+
+  @media (min-width: $sm) {
+    width: auto;
+  }
+}
+
+.error {
+  @include font-body-15;
+  margin-top: 48px;
+  color: $color-action-error-800;
+  text-align: center;
+
+  @media (min-width: $sm) {
+    @include font-body-9;
+  }
 }
diff --git a/src/styles/fonts.module.scss b/src/styles/fonts.module.scss
index 7b8cce54..b498f4bd 100644
--- a/src/styles/fonts.module.scss
+++ b/src/styles/fonts.module.scss
@@ -1,3 +1,11 @@
+@mixin font-body-2 {
+  font-family: Karla;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 150%; /* 30px */
+}
+
 @mixin font-body-3 {
   font-family: Karla;
   font-size: 20px;