diff --git a/packages/twenty-chrome-extension/.env.example b/packages/twenty-chrome-extension/.env.example
index 4ab48f1d9..278bc5952 100644
--- a/packages/twenty-chrome-extension/.env.example
+++ b/packages/twenty-chrome-extension/.env.example
@@ -1,2 +1,2 @@
-VITE_SERVER_BASE_URL=http://localhost:3000
-VITE_FRONT_BASE_URL=http://localhost:3001
\ No newline at end of file
+VITE_SERVER_BASE_URL=https://api.twenty.com
+VITE_FRONT_BASE_URL=https://app.twenty.com
\ No newline at end of file
diff --git a/packages/twenty-chrome-extension/README.md b/packages/twenty-chrome-extension/README.md
index fbe86fdfa..749c477ef 100644
--- a/packages/twenty-chrome-extension/README.md
+++ b/packages/twenty-chrome-extension/README.md
@@ -5,47 +5,56 @@ This extension allows you to save `company` and `people` information to your twe
 To install the extension in development mode with hmr (hot module reload), follow these steps.
 
 - STEP 1: Clone the repository and run `yarn install` in the root directory.
+
 - STEP 2: Once the dependencies installation succeeds, create a file with env variables by executing the following command in the root directory.
 
 ```
 cp ./packages/twenty-chrome-extension/.env.example ./packages/twenty-chrome-extension/.env
 ```
 
-- STEP 3: Now, execute the following command in the root directory to start up the development server on Port 3002. This will create a `dist` folder in `twenty-chrome-extension`.
+- STEP 3 (optional): Update values of the environment variables to match those of your instance for `twenty-front` and `twenty-server`. If you want to work on your local machine with the default setup from `Twenty Docs`, replace everything in the .env file with the following.
+
+```
+VITE_SERVER_BASE_URL=http://localhost:3000
+VITE_FRONT_BASE_URL=http://localhost:3001
+```
+
+- STEP 4: Now, execute the following command in the root directory to start up the development server on Port 3002. This will create a `dist` folder in `twenty-chrome-extension`.
 
 ```
 yarn nx start twenty-chrome-extension
 ```
 
-- STEP 4: Open Google Chrome and head to the extensions page by typing `chrome://extensions` in the address bar.
+- STEP 5: Open Google Chrome and head to the extensions page by typing `chrome://extensions` in the address bar.
 
 <p align="center">
    <img src="../twenty-chrome-extension/public/readme-images/01-img-one.png" width="600" />
 </p>
 
-- STEP 5: Turn on the `Developer mode` from the top-right corner and click `Load unpacked`.
+- STEP 6: Turn on the `Developer mode` from the top-right corner and click `Load unpacked`.
 
 <p align="center">
    <img src="../twenty-chrome-extension/public/readme-images/02-img-two.png" width="600" />
 </p>
 
-- STEP 6: Select the `dist` folder from `twenty-chrome-extension`.
+- STEP 7: Select the `dist` folder from `twenty-chrome-extension`.
 
 <p align="center">
    <img src="../twenty-chrome-extension/public/readme-images/03-img-three.png" width="600" />
 </p>
 
-- STEP 7: This opens up the `options` page, where you must enter your API key.
+- STEP 8: This opens up the `options` page, where you must enter your API key.
 
 <p align="center">
    <img src="../twenty-chrome-extension/public/readme-images/04-img-four.png" width="600" />
 </p>
 
-- STEP 8: Reload any LinkedIn page that you opened before installing the extension for seamless experience.
-- STEP 9: Visit any individual or company profile on LinkedIn and click the `Add to Twenty` button to test.
+- STEP 9: Reload any LinkedIn page that you opened before installing the extension for seamless experience.
+
+- STEP 10: Visit any individual or company profile on LinkedIn and click the `Add to Twenty` button to test.
 
 <p align="center">
    <img src="../twenty-chrome-extension/public/readme-images/05-img-five.png" width="600" />
 </p>
 
-To install the extension in production mode without hmr (hot module reload), replace the command in STEP THREE with `yarn nx build twenty-chrome-extension`.
+To install the extension in production mode without hmr (hot module reload), replace the command in STEP FOUR with `yarn nx build twenty-chrome-extension`. You may or may not want to execute STEP THREE based on your requirements.
\ No newline at end of file
diff --git a/packages/twenty-chrome-extension/public/logo/32-32.svg b/packages/twenty-chrome-extension/public/logo/32-32.svg
new file mode 100644
index 000000000..b5f1e311f
--- /dev/null
+++ b/packages/twenty-chrome-extension/public/logo/32-32.svg
@@ -0,0 +1,12 @@
+<svg width="32" height="32" viewBox="0 0 136 136" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2343_96406)">
+<path d="M136 2.28882e-05H0L0.000144482 136H136V2.28882e-05ZM27.27 50.6401C27.27 43.2101 33.3 37.1801 40.73 37.1801H66.64C67.02 37.1801 67.37 37.4101 67.53 37.7601C67.69 38.1101 67.62 38.5201 67.36 38.8101L61.68 44.9801C60.69 46.0501 59.3 46.6701 57.84 46.6701H40.8C38.57 46.6701 36.76 48.4801 36.76 50.7101V60.8901C36.76 62.2001 35.7 63.2601 34.39 63.2601H29.65C28.34 63.2601 27.28 62.2001 27.28 60.8901V50.6401H27.27ZM107.88 85.3601C107.88 92.7901 101.85 98.82 94.42 98.82H83.41C75.98 98.82 69.95 92.7901 69.95 85.3601V66.0901C69.95 64.7801 70.44 63.5201 71.33 62.5501L77.75 55.5801C78.02 55.2901 78.44 55.1901 78.82 55.3301C79.19 55.4801 79.44 55.83 79.44 56.23V85.3001C79.44 87.5301 81.25 89.3401 83.48 89.3401H94.36C96.59 89.3401 98.4 87.5301 98.4 85.3001V50.7101C98.4 48.4801 96.59 46.6701 94.36 46.6701H81.71C80.26 46.6701 78.88 47.2801 77.89 48.3401L40.16 89.3401H62.83C64.14 89.3401 65.2 90.4001 65.2 91.7101V96.4501C65.2 97.7601 64.14 98.82 62.83 98.82H32.28C29.51 98.82 27.26 96.5701 27.26 93.8001V91.29C27.26 90.03 27.73 88.8201 28.59 87.8901L70.89 41.9401C73.69 38.9001 77.62 37.1801 81.75 37.1801H94.41C101.84 37.1801 107.87 43.2101 107.87 50.6401V85.3601H107.88Z" fill="black"/>
+<path d="M27.27 50.6401C27.27 43.2101 33.3 37.1801 40.73 37.1801H66.64C67.02 37.1801 67.37 37.4101 67.53 37.7601C67.69 38.1101 67.62 38.5201 67.36 38.8101L61.68 44.9801C60.69 46.0501 59.3 46.6701 57.84 46.6701H40.8C38.57 46.6701 36.76 48.4801 36.76 50.7101V60.8901C36.76 62.2001 35.7 63.2601 34.39 63.2601H29.65C28.34 63.2601 27.28 62.2001 27.28 60.8901V50.6401H27.27Z" fill="white"/>
+<path d="M107.88 85.3601C107.88 92.7901 101.85 98.82 94.42 98.82H83.41C75.98 98.82 69.95 92.7901 69.95 85.3601V66.0901C69.95 64.7801 70.44 63.5201 71.33 62.5501L77.75 55.5801C78.02 55.2901 78.44 55.1901 78.82 55.3301C79.19 55.4801 79.44 55.83 79.44 56.23V85.3001C79.44 87.5301 81.25 89.3401 83.48 89.3401H94.36C96.59 89.3401 98.4 87.5301 98.4 85.3001V50.7101C98.4 48.4801 96.59 46.6701 94.36 46.6701H81.71C80.26 46.6701 78.88 47.2801 77.89 48.3401L40.16 89.3401H62.83C64.14 89.3401 65.2 90.4001 65.2 91.7101V96.4501C65.2 97.7601 64.14 98.82 62.83 98.82H32.28C29.51 98.82 27.26 96.5701 27.26 93.8001V91.29C27.26 90.03 27.73 88.8201 28.59 87.8901L70.89 41.9401C73.69 38.9001 77.62 37.1801 81.75 37.1801H94.41C101.84 37.1801 107.87 43.2101 107.87 50.6401V85.3601H107.88Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_2343_96406">
+<rect width="136" height="136" rx="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/packages/twenty-chrome-extension/src/options/modules/api-key/components/ApiKeyForm.tsx b/packages/twenty-chrome-extension/src/options/modules/api-key/components/ApiKeyForm.tsx
index c208d57c6..88e051972 100644
--- a/packages/twenty-chrome-extension/src/options/modules/api-key/components/ApiKeyForm.tsx
+++ b/packages/twenty-chrome-extension/src/options/modules/api-key/components/ApiKeyForm.tsx
@@ -65,6 +65,7 @@ export const ApiKeyForm = () => {
       }
 
       if (localStorage.serverBaseUrl) {
+        setShowSection(true);
         setRoute(localStorage.serverBaseUrl);
       }
     };
@@ -77,7 +78,11 @@ export const ApiKeyForm = () => {
   }, [apiKey]);
 
   useEffect(() => {
-    chrome.storage.local.set({ serverBaseUrl: route });
+    if (import.meta.env.VITE_SERVER_BASE_URL !== route) {
+      chrome.storage.local.set({ serverBaseUrl: route });
+    } else {
+      chrome.storage.local.set({ serverBaseUrl: '' });
+    }
   }, [route]);
 
   const handleGenerateClick = () => {
@@ -93,7 +98,7 @@ export const ApiKeyForm = () => {
   return (
     <StyledContainer isToggleOn={showSection}>
       <StyledHeader>
-        <StyledImg src="/logo/32-32.png" alt="Twenty Logo" />
+        <StyledImg src="/logo/32-32.svg" alt="Twenty Logo" />
       </StyledHeader>
 
       <StyledMain>
diff --git a/packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/animation.ts b/packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/animation.ts
deleted file mode 100644
index 865d43b2b..000000000
--- a/packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/animation.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export const ANIMATION = {
-  duration: {
-    instant: 0.075,
-    fast: 0.15,
-    normal: 0.3,
-  },
-};
-
-export type AnimationDuration = 'instant' | 'fast' | 'normal';
diff --git a/packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/blur.ts b/packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/blur.ts
deleted file mode 100644
index 01f265147..000000000
--- a/packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/blur.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export const BLUR = {
-  light: 'blur(6px)',
-  strong: 'blur(20px)',
-};
diff --git a/packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/colors.ts b/packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/colors.ts
deleted file mode 100644
index 022a67b70..000000000
--- a/packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/colors.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { MAIN_COLORS } from '@/ui/theme/constants/MainColors';
-import { SECONDARY_COLORS } from '@/ui/theme/constants/SecondaryColors';
-
-export const COLOR = {
-  ...MAIN_COLORS,
-  ...SECONDARY_COLORS,
-};
diff --git a/packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/icon.ts b/packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/icon.ts
deleted file mode 100644
index e103c0b8e..000000000
--- a/packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/icon.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-export const ICON = {
-  size: {
-    sm: 14,
-    md: 16,
-    lg: 20,
-    xl: 40,
-  },
-  stroke: {
-    sm: 1.6,
-    md: 2,
-    lg: 2.5,
-  },
-};
diff --git a/packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/modal.ts b/packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/modal.ts
deleted file mode 100644
index 2a53265cc..000000000
--- a/packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/modal.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export const MODAL = {
-  size: {
-    sm: '300px',
-    md: '400px',
-    lg: '53%',
-  },
-};
diff --git a/packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/text.ts b/packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/text.ts
deleted file mode 100644
index db9a0786b..000000000
--- a/packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/text.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-export const TEXT = {
-  lineHeight: {
-    lg: 1.5,
-    md: 1.2,
-  },
-
-  iconSizeMedium: 16,
-  iconSizeSmall: 14,
-
-  iconStrikeLight: 1.6,
-  iconStrikeMedium: 2,
-  iconStrikeBold: 2.5,
-};