diff --git a/packages/web/.storybook/preview.js b/packages/web/.storybook/preview.js
index d7478763b..2f79d986a 100644
--- a/packages/web/.storybook/preview.js
+++ b/packages/web/.storybook/preview.js
@@ -33,7 +33,7 @@ export const decorators = [
             __html: getCssText(),
           }}
         />
-        <div className='Gray'>
+        <div>
           <Story {...context} />
         </div>
       </>
diff --git a/packages/web/components/elements/Button.tsx b/packages/web/components/elements/Button.tsx
index cdc14dac6..d6f24321b 100644
--- a/packages/web/components/elements/Button.tsx
+++ b/packages/web/components/elements/Button.tsx
@@ -87,6 +87,19 @@ export const Button = styled('button', {
         cursor: 'pointer',
         '&:focus': { outline: 'none' },
       },
+      ctaModal: {
+        height: '32px',
+        verticalAlign: 'middle',
+        color: '$textDefault',
+        backgroundColor: '$grayBase',
+        fontWeight: '600',
+        padding: '0px 12px',
+        fontSize: '16px',
+        border: '1px solid $grayBorder',
+        cursor: 'pointer',
+        borderRadius: '8px',
+        '&:focus': { outline: 'none' },
+      },
       ctaSecondary: {
         color: '$grayText',
         border: 'none',
diff --git a/packages/web/components/elements/ModalPrimitives.tsx b/packages/web/components/elements/ModalPrimitives.tsx
index 3827e020b..1a641bbae 100644
--- a/packages/web/components/elements/ModalPrimitives.tsx
+++ b/packages/web/components/elements/ModalPrimitives.tsx
@@ -10,6 +10,8 @@ const overlayShow = keyframes({
 
 export const ModalOverlay = styled(Overlay, {
   backgroundColor: '$overlay',
+  width: '100vw',
+  height: '100vh',
   position: 'fixed',
   inset: 0,
   '@media (prefers-reduced-motion: no-preference)': {
@@ -37,7 +39,6 @@ export const ModalContent = styled(Modal, {
   width: '90vw',
   maxWidth: '600px',
   maxHeight: '85vh',
-  p: '$1',
   '@media (prefers-reduced-motion: no-preference)': {
     animation: `${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,
     willChange: 'transform',
diff --git a/packages/web/components/elements/StyledText.tsx b/packages/web/components/elements/StyledText.tsx
index 0df5f3b3b..f5113ffb3 100644
--- a/packages/web/components/elements/StyledText.tsx
+++ b/packages/web/components/elements/StyledText.tsx
@@ -50,6 +50,24 @@ const textVariants = {
       color: '$grayText',
       margin: 0,
     },
+    modalTitle: {
+      fontSize: '29px',
+      lineHeight: '37.7px',
+      color: '$textDefault',
+      margin: 0,
+    },
+    boldText: {
+      fontWeight: '600',
+      fontSize: '16px',
+      lineHeight: '1',
+      color: '$textDefault',
+    },
+    shareHighlightModalAnnotation: {
+      fontSize: '18px',
+      lineHeight: '23.4px',
+      color: '$textSubtle',
+      m: 0,
+    },
     footnote: {
       fontSize: '$1',
     },
@@ -81,12 +99,13 @@ const textVariants = {
       lineHeight: '1.5',
       cursor: 'pointer',
     },
-    highlightAuthor: {
-      fontSize: '14px',
-      fontWeight: '600',
-      lineHeight: '1.5',
+    highlightTitleAndAuthor: {
+      fontSize: '18px',
+      fontStyle: 'italic',
+      lineHeight: '22.5px',
+      letterSpacing: '0.01em',
       margin: '0px',
-      color: '$omnivoreGray',
+      color: '$textSubtle',
     },
     highlightTitle: {
       fontSize: '14px',
diff --git a/packages/web/components/elements/images/CloseIcon.tsx b/packages/web/components/elements/images/CloseIcon.tsx
new file mode 100644
index 000000000..0b62251f8
--- /dev/null
+++ b/packages/web/components/elements/images/CloseIcon.tsx
@@ -0,0 +1,19 @@
+type CloseIconProps = {
+  size: number
+  strokeColor: string
+}
+
+export function CloseIcon(props: CloseIconProps): JSX.Element {
+  return (
+    <svg
+      width={props.size}
+      height={props.size}
+      viewBox={`0 0 ${props.size} ${props.size}`}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+        <path d="M18.75 5.75L5.25 19.25" stroke={props.strokeColor} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+        <path d="M18.75 19.25L5.25 5.75" stroke={props.strokeColor} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+    </svg>
+  )
+}
diff --git a/packages/web/components/patterns/HighlightView.tsx b/packages/web/components/patterns/HighlightView.tsx
index ce2ce746d..2534048ca 100644
--- a/packages/web/components/patterns/HighlightView.tsx
+++ b/packages/web/components/patterns/HighlightView.tsx
@@ -15,20 +15,25 @@ export function HighlightView(props: HighlightViewProps): JSX.Element {
     () => props.highlight.quote.split('\n'),
     [props.highlight.quote]
   )
+  const annotation = props.highlight.annotation ?? '';
 
   const StyledQuote = styled(Blockquote, {
-    margin: '0px 0px 24px 0px',
-    fontSize: '14px',
-    lineHeight: '1.5',
-    fontFamily: 'Inter',
-    color: '$omnivoreGray',
+    margin: '0px 24px 16px 24px',
+    fontSize: '18px',
+    lineHeight: '27px',
+    color: '$textDefault',
   })
 
   return (
-    <VStack css={{ width: '100%', bg: '$omnivoreYellow', p: '20px' }}>
+    <VStack css={{ width: '100%', boxSizing: 'border-box' }}>
+      {annotation && (
+        <Box css={{p:'16px', m:'16px', ml:'24px', mr:'24px', borderRadius: '6px', bg: '$grayBase'}}>
+          <StyledText style='shareHighlightModalAnnotation'>{annotation}</StyledText>
+        </Box>)
+      }
       <StyledQuote>
         {props.highlight.prefix}
-        <SpanBox css={{ bg: '$highlight', p: '1px', borderRadius: '2px' }}>
+        <SpanBox css={{ bg: '$highlightBackground', p: '1px', borderRadius: '2px', }}>
           {lines.map((line: string, index: number) => (
             <Fragment key={index}>
               {line}
@@ -43,11 +48,10 @@ export function HighlightView(props: HighlightViewProps): JSX.Element {
         </SpanBox>
         {props.highlight.suffix}
       </StyledQuote>
-      <Box css={{}}>
-        {props.author && (
-          <StyledText style="highlightAuthor">{props.author}</StyledText>
+      <Box css={{p: '24px', pt: '0', width: '100%', boxSizing: 'border-box'}}>
+        {props.author && props.title &&(
+          <StyledText style="highlightTitleAndAuthor">{props.title + props.author}</StyledText>
         )}
-        <StyledText style="highlightTitle">{props.title}</StyledText>
       </Box>
     </VStack>
   )
diff --git a/packages/web/components/templates/article/ShareHighlightModal.tsx b/packages/web/components/templates/article/ShareHighlightModal.tsx
index 446a07a74..b07433fab 100644
--- a/packages/web/components/templates/article/ShareHighlightModal.tsx
+++ b/packages/web/components/templates/article/ShareHighlightModal.tsx
@@ -18,7 +18,7 @@ export function ShareHighlightModal(
     <ShareModalLayout
       url={props.url}
       type='highlight'
-      modalTitle='Share Highlight'
+      modalTitle={`Share Highlight ${props.highlight?.annotation ? '& Note' : ''}`}
       title={props.title}
       description={props.description}
       onOpenChange={props.onOpenChange}
diff --git a/packages/web/components/templates/article/ShareModal.tsx b/packages/web/components/templates/article/ShareModal.tsx
index 35f38a5ac..4a1bfed14 100644
--- a/packages/web/components/templates/article/ShareModal.tsx
+++ b/packages/web/components/templates/article/ShareModal.tsx
@@ -6,12 +6,13 @@ import {
 import { Box, HStack, StyledLink, VStack } from '../../elements/LayoutPrimitives'
 import { Button } from '../../elements/Button'
 import { StyledText } from '../../elements/StyledText'
-import { CrossIcon } from '../../elements/images/CrossIcon'
-import { FacebookIcon } from '../../elements/images/social/FacebookIcon'
-import { TwitterIcon } from '../../elements/images/social/TwitterIcon'
 import { theme } from '../../tokens/stitches.config'
-import { CopyLinkIcon } from '../../elements/images/CopyLinkIcon'
 import { useCopyLink } from '../../../lib/hooks/useCopyLink'
+import { CloseIcon } from '../../elements/images/CloseIcon'
+import {OmnivoreLogoIcon} from '../../elements/images/OmnivoreNameLogo'
+import { useState } from 'react'
+import { TooltipWrapped } from '../../elements/Tooltip'
+import { TwitterLogo, FacebookLogo } from 'phosphor-react'
 
 type ShareType = 'link' | 'highlight'
 
@@ -29,7 +30,12 @@ export function ShareModalLayout(
   props: ShareModalLayoutProps
 ): JSX.Element {
   const { copyLink, isLinkCopied } = useCopyLink(props.url, props.type)
-
+  const [switchOn, setSwitchOn] = useState(false);
+  const toggleSwitch = () => {
+    setSwitchOn(!switchOn);
+  }
+  const iconColor = theme.colors.grayText.toString()
+  
   return (
     <ModalRoot defaultOpen onOpenChange={props.onOpenChange}>
       <ModalOverlay />
@@ -37,56 +43,84 @@ export function ShareModalLayout(
         onPointerDownOutside={(event) => {
           event.preventDefault()
         }}
-        css={{ overflow: 'auto', p: '0' }}
+        css={{ overflow: 'auto', p: '0px', border: '1px solid $grayBorder', boxShadow: 'none'}}
       >
         <VStack distribution="start" css={{ p: '0' }}>
           <HStack
             distribution="between"
             alignment="center"
-            css={{ width: '100%' }}
+            css={{ width: '100%', pt: '24px', pl: '24px', pr: '24px', boxSizing: 'border-box', pb: '16px' }}
           >
-            <StyledText style="modalHeadline" css={{ p: '16px' }}>{props.modalTitle}</StyledText>
+            <StyledText style="modalTitle" css={{ p: '0' }}>{props.modalTitle}</StyledText>
             <Button
-              css={{ pt: '16px', pr: '16px' }}
+              css={{ p: '0' }}
               style="ghost"
               onClick={() => {
                 props.onOpenChange(false)
               }}
             >
-              <CrossIcon
-                size={20}
-                strokeColor={theme.colors.grayText.toString()}
+              <CloseIcon
+                size={24}
+                strokeColor={iconColor}
               />
             </Button>
           </HStack>
           {props.children}
-          <StyledText style='logoTitle' css={{ pl: '16px', color: '$grayText', fontSize: '11px' }}>SHARE</StyledText>
           <HStack
             alignment='start'
             distribution='start'
-            css={{ p: '16px', width: '100%', gap: '16px', mb: '0px' }}
+            css={{ alignItems: 'center', pt: '16px', pb: '16px', pl: '24px', pr: '24px', height:"64px", width: '100%', boxSizing: 'border-box', gap: '8px', mb: '0px', bg: '$grayBg', borderTop: '1px solid $grayBorder', borderRadius: '0px 0px 6px 6px' }}
           >
-            <StyledLink
-              target='_blank'
-              css={{ height: '100%' }}
-              referrerPolicy='no-referrer'
-              href={`https://www.facebook.com/sharer/sharer.php?u=${props.url}&t=${props.title}&display=page`}
+            <StyledText style="boldText" css={{ m: '0' }}>
+              Secret URL
+            </StyledText>
+            <TooltipWrapped
+              tooltipContent="Link copied!"
+              tooltipSide="top"
+              active={isLinkCopied}
+              style={{background: "linear-gradient(0deg, rgba(10, 8, 6, 0.8), rgba(10, 8, 6, 0.8)), #FFFFFF;"}}
+              arrowStyles={{fill: "linear-gradient(0deg, rgba(10, 8, 6, 0.8), rgba(10, 8, 6, 0.8)), #FFFFFF;"}}
             >
-              <FacebookIcon color={theme.colors.grayText.toString()} />
-            </StyledLink>
-            <StyledLink
-              target='_blank'
-              css={{ height: '100%', pl: '8px', pt: '4px' }}
-              referrerPolicy='no-referrer'
-              href={`https://twitter.com/intent/tweet?text=${props.title}&url=${props.url}`}
-            >
-              <TwitterIcon color={theme.colors.grayText.toString()} />
-            </StyledLink>
-            <Box css={{ marginLeft: 'auto' }}>
-              <Button onClick={copyLink} style='plainIcon' css={{ pl: '16px', color: '$grayText', fontSize: '11px', height: '100%', display: 'flex', alignItems: 'center' }}>
-                <span style={{ paddingTop: '4px', paddingRight: '8px' }}>Copy URL</span>
-                <CopyLinkIcon strokeColor={theme.colors.grayText.toString()} isCompleted={isLinkCopied} />
-              </Button>
+            <button onClick={toggleSwitch} className='track' style={{display:'flex', padding:'2px', flexDirection: `${switchOn ? 'row-reverse' : 'row'}`, alignItems: 'center', width: '40px', height:'24px', background: `${switchOn ? 'rgba(255, 210, 52, 1)' : 'rgba(10, 8, 6, 0.15)'}`, borderRadius: '12px', borderColor: theme.colors.grayBorder.toString(), borderWidth: 1, borderStyle: 'solid',}}>
+              <div className='thumb' style={{width: '20px', height: '20px', borderRadius: '20px', background: 'rgba(255, 255, 255, 1)', border: '2px solid rgba(0, 0, 0, 0.06)',}}>
+                </div>
+            </button>
+            </TooltipWrapped>
+            {switchOn && <Button style='ctaModal' onClick={copyLink}>
+              Copy Link
+            </Button>}
+
+            <Box css={{
+              display:'flex',
+              flexDirection: 'row',
+              marginLeft: 'auto',
+              gap: '24px',
+              alignItems: 'center',
+            }}>
+              <StyledLink
+                target='_blank'
+                css={{ height: '24px' }}
+                referrerPolicy='no-referrer'
+                href={``}
+              >
+                <OmnivoreLogoIcon size={26} strokeColor={theme.colors.textNonEssential.toString()} />
+              </StyledLink>
+              <StyledLink
+                target='_blank'
+                css={{ height: '24px' }}
+                referrerPolicy='no-referrer'
+                href={`https://www.facebook.com/sharer/sharer.php?u=${props.url}&t=${props.title}&display=page`}
+              >
+                <FacebookLogo width={26} height={26} color={iconColor} />
+              </StyledLink>
+              <StyledLink
+                target='_blank'
+                css={{ height: '24px' }}
+                referrerPolicy='no-referrer'
+                href={`https://twitter.com/intent/tweet?text=${props.title}&url=${props.url}`}
+              >
+                <TwitterLogo width={26} height={26} color={iconColor} />
+              </StyledLink>
             </Box>
           </HStack>
         </VStack>
diff --git a/packages/web/components/tokens/stitches.config.ts b/packages/web/components/tokens/stitches.config.ts
index 80a87e59f..0fa83c52c 100644
--- a/packages/web/components/tokens/stitches.config.ts
+++ b/packages/web/components/tokens/stitches.config.ts
@@ -149,6 +149,12 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } =
 
         labelButtonsBg: '#F5F5F4',
         tooltipIcons: '#FDFAEC',
+
+        //utility
+        textDefault: 'rgba(10, 8, 6, 0.8)',
+        textSubtle: 'rgba(10, 8, 6, 0.65)',
+        textNonEssential: 'rgba(10, 8, 6, 0.4)',
+        overlay: 'rgba(63, 62, 60, 0.2)',
       },
     },
     media: {
@@ -195,6 +201,13 @@ const darkThemeSpec = {
     avatarBg: '#000000',
     avatarFont: 'rgba(255, 255, 255, 0.8)',
 
+
+    //utility
+    textDefault: 'rgba(255, 255, 255, 0.8)',
+    textSubtle: 'rgba(255, 255, 255, 0.65)',
+    textNonEssential: 'rgba(10, 8, 6, 0.4)',
+    overlay: 'rgba(10, 8, 6, 0.65)',
+
     labelButtonsBg: '#5F5E58',
   },
   shadows: {
diff --git a/packages/web/stories/ShareHighlightModal.stories.tsx b/packages/web/stories/ShareHighlightModal.stories.tsx
new file mode 100644
index 000000000..593a2f55b
--- /dev/null
+++ b/packages/web/stories/ShareHighlightModal.stories.tsx
@@ -0,0 +1,97 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+import {ShareHighlightModal} from '../components/templates/article/ShareHighlightModal'; 
+import { Highlight } from '../lib/networking/fragments/highlightFragment';
+import { updateThemeLocally } from '../lib/themeUpdater';
+import { ThemeId } from '../components/tokens/stitches.config';
+
+export default {
+  title: 'Components/ShareHighlightModal',
+  parameters: {
+    previewTabs: {
+      'storybook/docs/panel': { hidden: true }
+    },
+    viewMode: 'canvas',
+  },
+  component: ShareHighlightModal,
+  argTypes: {
+    author: {control: 'text'},
+    title: {control: 'text'},
+  },
+} as ComponentMeta<typeof ShareHighlightModal>
+
+const Template = (props: {highlight: Highlight, handleOpenChange: () => void, title: string, author: string}) => {
+  return (
+  <ShareHighlightModal
+    url={`https://example.com/${props.highlight.shortId}`}
+    title={props.title}
+    author={props.author}
+    highlight={props.highlight}
+    onOpenChange={() => props.handleOpenChange()}
+  />
+)}
+
+const highlight: Highlight = {
+  id: "nnnnn",
+  shortId: "shortId",
+  quote: "children not only participate in herding work, but are also encouraged to act independently in most other areas of life. They have a say in deciding when to eat, when to sleep, and what to wear, even at temperatures of -30C (-22F).",
+  patch: "patchhhhhhy",
+  createdByMe: true,
+  updatedAt: '123',
+  sharedAt: '123',
+  prefix: "Among the Sami, an indigenous people spread across the northernmost regions of Norway, Sweden, Finland and Russia's Kola Peninsula,",
+  suffix: ' To outsiders, that independence can be surprising. Missionaries who visited the Arctic in the 18th Century and later, wrote in their diaries that it seemed like Sámi children could do whatever they liked, and that they lacked discipline altogether.',
+}
+
+const highlightWithAnnotation: Highlight = {
+  ...highlight,
+  annotation: "Okay… this is wild! I love this independence. Wondering how I can reponsibly instill this type of indepence in my own kids…",
+}
+
+export const LightShareHightlightModal: ComponentStory<typeof ShareHighlightModal> = (args: any) => {
+  updateThemeLocally(ThemeId.Light);
+  highlight.annotation = undefined;
+  return (
+    <Template {...args} handleOpenChange={() => console.log('open changed')} />
+  )
+}
+
+export const DarkShareHightlightModal: ComponentStory<typeof ShareHighlightModal> = (args: any) => {
+  updateThemeLocally(ThemeId.Dark);
+  highlight.annotation = undefined;
+  return (
+    <Template {...args} handleOpenChange={() => console.log('open changed')} />
+  )
+}
+
+export const LightShareHightlightModalWithNote: ComponentStory<typeof ShareHighlightModal> = (args: any) => {
+  updateThemeLocally(ThemeId.Light);
+  return (
+    <Template {...args} handleOpenChange={() => console.log('open changed')} />
+  )
+}
+
+export const DarkShareHightlightModalWithNote: ComponentStory<typeof ShareHighlightModal> = (args: any) => {
+  updateThemeLocally(ThemeId.Dark);
+  return (
+    <Template {...args} handleOpenChange={() => console.log('open changed')} />
+  )
+}
+
+LightShareHightlightModal.args = {
+  highlight: highlight,
+  title: 'The secret of Arctic ‘survival parenting',
+  author: ' by Suvi Pilvi King by bbc.com',
+}
+
+DarkShareHightlightModal.args = {
+  ...LightShareHightlightModal.args
+}
+
+LightShareHightlightModalWithNote.args = {
+  ...LightShareHightlightModal.args,
+  highlight: highlightWithAnnotation,
+}
+
+DarkShareHightlightModalWithNote.args = {
+  ...LightShareHightlightModalWithNote.args,
+}