diff --git a/@types/index.d.ts b/@types/index.d.ts
index 0409535c..3c55bb69 100644
--- a/@types/index.d.ts
+++ b/@types/index.d.ts
@@ -150,6 +150,8 @@ declare namespace Electron {
     on(channel: "loadCreatorTheme", listener: (event: IpcRendererEvent, theme: Themes.Theme) => void): this;
     on(channel: "sync-themes-start", listener: (event: IpcRendererEvent) => void): this;
     on(channel: "sync-themes-end", listener: (event: IpcRendererEvent) => void): this;
+    on(channel: "did-maximized", listener: (event: IpcRendererEvent) => void): this;
+    on(channel: "did-restored", listener: (event: IpcRendererEvent) => void): this;
 
     send(channel: string, ...args: any[]): void;
     send(channel: "setTitle", data: { id: number; title: string }): this;
@@ -183,6 +185,8 @@ declare namespace Electron {
     send(channel: "saveCreatorTheme", theme: Themes.Theme): this;
     send(channel: "sync-themes"): this;
     send(channel: "set-clipboard-data", data: WebApi.SetClipboardData): this;
+    send(channel: "did-maximized"): this;
+    send(channed: "did-restored"): this;
 
     invoke(channel: "writeNewExtensionToDisk", data: WebApi.WriteNewExtensionToDiskArgs): Promise<number>;
     invoke(channel: "getAllLocalFileExtensionIds"): Promise<number[]>;
diff --git a/src/assets/fonts/Inter.ttf b/src/assets/fonts/Inter.ttf
new file mode 100644
index 00000000..721147d8
Binary files /dev/null and b/src/assets/fonts/Inter.ttf differ
diff --git a/src/constants/_app.ts b/src/constants/_app.ts
index 802cd1e7..fc9e39c0 100644
--- a/src/constants/_app.ts
+++ b/src/constants/_app.ts
@@ -245,7 +245,7 @@ export const DEFAULT_PALETTE: Themes.Palette = {
   "bg-tab": "#222222",
   "bg-tab-hover": "#2c2c2c",
   "bg-tab-active": "#2c2c2c",
-  "fg-tab": "#7A7A7A",
+  "fg-tab": "#ffffff",
   "fg-tab-hover": "#ffffff",
   "fg-tab-active": "#ffffff",
   "bg-header": "#222222",
diff --git a/src/main/window/WindowManager.ts b/src/main/window/WindowManager.ts
index 3cd57fac..37749710 100755
--- a/src/main/window/WindowManager.ts
+++ b/src/main/window/WindowManager.ts
@@ -207,11 +207,13 @@ class WindowManager {
     E.ipcMain.on("window-minimize", () => {
       this.mainWindow.minimize();
     });
-    E.ipcMain.on("window-maximize", () => {
+    E.ipcMain.on("window-maximize", (event: E.IpcMainEvent) => {
       if (this.mainWindow.isMaximized()) {
         this.mainWindow.restore();
+        event.reply("did-restored");
       } else {
         this.mainWindow.maximize();
+        event.reply("did-maximized");
       }
     });
     E.ipcMain.on("closeTab", (event, id) => {
diff --git a/src/renderer/components/Tabs/index.tsx b/src/renderer/components/Tabs/index.tsx
index fd3dd78a..c3176c9e 100755
--- a/src/renderer/components/Tabs/index.tsx
+++ b/src/renderer/components/Tabs/index.tsx
@@ -139,7 +139,7 @@ class Tabs extends React.Component<TabsProps, unknown> {
   };
 
   private mouseDownHandler = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-    (e.target as HTMLDivElement).style.cursor = "grabbing";
+    (e.target as HTMLDivElement).style.cursor = "move";
 
     this.isMoving = true;
     this.pos.x = e.pageX;
@@ -149,7 +149,7 @@ class Tabs extends React.Component<TabsProps, unknown> {
     window.addEventListener("mouseup", this.mouseUpHandler);
   };
   private mouseUpHandler = (e: MouseEvent) => {
-    (e.target as HTMLDivElement).style.cursor = "grab";
+    (e.target as HTMLDivElement).style.cursor = "default";
     this.isMoving = false;
 
     window.removeEventListener("mousemove", this.mouseMoveHandler);
diff --git a/src/renderer/components/Tabs/style.scss b/src/renderer/components/Tabs/style.scss
index 646a4de3..415f4369 100755
--- a/src/renderer/components/Tabs/style.scss
+++ b/src/renderer/components/Tabs/style.scss
@@ -15,12 +15,16 @@
   background-color: var(--bg-tab);
   color: var(--fg-tab);
   fill: var(--fg-tab);
-
+  
   &:hover {
     background-color: var(--bg-tab-hover);
     color: var(--fg-tab-hover);
     fill: var(--fg-tab-hover);
-    cursor: pointer;
+    cursor: default;
+  }
+
+  &:hover .tab__close{
+    opacity: 0.4;
   }
 
   &__text {
@@ -30,17 +34,25 @@
     text-overflow: clip;
     font-size: var(--fontControlSize);
     margin-right: 6px;
+    opacity: 0.4;
+  }
+
+  &:hover .tab__text {
+    opacity: 1;
   }
 
   &__close {
-    height: 16px;
+    height: 14px;
     color: var(--fg-tab);
     fill: var(--fg-tab);
+    opacity: 0;
+    display: inline-flex;
 
     &:hover {
       color: var(--fg-tab-hover);
       fill: var(--fg-tab-hover);
-      cursor: pointer;
+      cursor: default;
+      opacity: 1 !important;
     }
   }
 
@@ -48,5 +60,35 @@
     background-color: var(--bg-tab-active);
     color: var(--fg-tab-active);
     fill: var(--fg-tab-active);
+    opacity: 1;
+    
+    .tab__text {
+      opacity: 1;
+    }
+    
+    .tab__close {
+      opacity: 0.16;
+    }
+
+    
+  }
+
+  &_main_active {
+    background-color: var(--bg-panel);
+
+    .icon {
+      color: var(--bg-panel);
+      filter: invert(1)
+    }
+
+    &:hover {    
+      cursor: default;
+      background-color: var(--bg-panel);
+
+      .icon {
+        color: var(--bg-panel);
+        filter: invert(1)
+      }
+    }
   }
 }
diff --git a/src/renderer/components/Tabs/tabs.tsx b/src/renderer/components/Tabs/tabs.tsx
index 63ea4183..d62e80b3 100755
--- a/src/renderer/components/Tabs/tabs.tsx
+++ b/src/renderer/components/Tabs/tabs.tsx
@@ -24,8 +24,8 @@ const Tabs: React.FunctionComponent<Props> = props => {
           <Button className="tab__close button_clear" onClick={(e): void => props.close(e, t.id)}>
             <Icon
               color={`${props.tabs.current === t.id ? "var(--fg-tab-active)" : "var(--fg-tab)"}`}
-              type="Close"
-              size="16"
+              type="CloseTab"
+              size="14"
             />
           </Button>
         </div>
diff --git a/src/renderer/components/TopPanel/index.tsx b/src/renderer/components/TopPanel/index.tsx
index 81036c2f..0a5167de 100755
--- a/src/renderer/components/TopPanel/index.tsx
+++ b/src/renderer/components/TopPanel/index.tsx
@@ -13,17 +13,33 @@ interface TopPanelProps {
   views?: Views;
 }
 
+interface TopPanelStates {
+  isMaximized: boolean;
+}
+
 @inject("tabs")
 @inject("settings")
 @inject("views")
 @observer
 class TopPanel extends React.Component<TopPanelProps, unknown> {
   props: TopPanelProps;
+  state: TopPanelStates;
 
   constructor(props: TopPanelProps) {
     super(props);
 
     this.props = props;
+    this.state = { isMaximized: false };
+  }
+
+  componentDidMount(): void {
+    E.ipcRenderer.on("did-maximized", () => {
+      this.setState({ isMaximized: true });
+    });
+
+    E.ipcRenderer.on("did-restored", () => {
+      this.setState({ isMaximized: false });
+    });
   }
 
   private onMainTab = (e: React.MouseEvent<HTMLDivElement> & Event): void => {
@@ -75,6 +91,7 @@ class TopPanel extends React.Component<TopPanelProps, unknown> {
         onMainTab={this.onMainTab}
         openMenu={this.onOpenMenu}
         newTab={this.newTab}
+        isMaximized={this.state.isMaximized}
       />
     );
   }
diff --git a/src/renderer/components/TopPanel/style.scss b/src/renderer/components/TopPanel/style.scss
index 8a82a4c8..33000854 100755
--- a/src/renderer/components/TopPanel/style.scss
+++ b/src/renderer/components/TopPanel/style.scss
@@ -14,4 +14,8 @@
       align-items: center;
     }
   }
+  
+  &:hover .tab__close {    
+    opacity: 0.16;
+  }
 }
diff --git a/src/renderer/components/TopPanel/toppanel.tsx b/src/renderer/components/TopPanel/toppanel.tsx
index 9a5323b2..9bc4d727 100755
--- a/src/renderer/components/TopPanel/toppanel.tsx
+++ b/src/renderer/components/TopPanel/toppanel.tsx
@@ -7,6 +7,7 @@ interface TopPanelProps {
   current: number;
   scalePanel: number;
   visibleNewProjectBtn: boolean;
+  isMaximized: boolean;
 
   newTab(): void;
   onMainTab(e: React.MouseEvent<HTMLDivElement>): void;
@@ -21,12 +22,15 @@ const TopPanel: React.FunctionComponent<TopPanelProps> = props => {
   return (
     <div className="top-panel" style={{ zoom: props.scalePanel ? props.scalePanel : 1 }}>
       <div className="panelButtons">
-        <Button className={`button_clear button_title${!props.current ? " tab_active" : ""}`} onClick={props.onMainTab}>
-          <Icon color="var(--fg-tab)" type="Main" size="18" />
+        <Button
+          className={`button_clear button_title button_main${!props.current ? " tab_active tab_main_active" : ""}`}
+          onClick={props.onMainTab}
+        >
+          <Icon color="currentColor" type="Figma" size="17" />
         </Button>
         {props.visibleNewProjectBtn ? (
           <Button className="button_clear button_title" onClick={props.onNewProject}>
-            <Icon color="var(--fg-tab)" type="Plus" size="18" />
+            <Icon color="currentColor" type="Plus" size="15" />
           </Button>
         ) : (
           ""
@@ -35,16 +39,16 @@ const TopPanel: React.FunctionComponent<TopPanelProps> = props => {
       <Tabs />
       <div className="panelButtons">
         <Button className="button_clear button_title" onClick={props.openMenu}>
-          <Icon color="var(--fg-tab)" type="MenuCorner" size="18" />
+          <Icon color="currentColor" type="MenuCorner" size="14" />
         </Button>
         <Button className="button_clear button_control" onClick={props.miniw}>
-          <Icon color="var(--fg-header-control)" type="Minimize" size="18" />
+          <Icon color="var(--fg-header-control)" type="Minimize" size="16" />
         </Button>
         <Button className="button_clear button_control" onClick={props.maxiw}>
-          <Icon color="var(--fg-header-control)" type="Maximize" size="18" />
+          <Icon color="var(--fg-header-control)" type={props.isMaximized ? "Restore" : "Maximize"} size="16" />
         </Button>
         <Button className="button_clear button_control button_close" onClick={props.closew}>
-          <Icon color="var(--fg-header-control)" type="Close" size="18" />
+          <Icon color="var(--fg-header-control)" type="Close" size="16" />
         </Button>
       </div>
     </div>
diff --git a/src/renderer/components/style.scss b/src/renderer/components/style.scss
index 8fabbf9f..ccb77317 100644
--- a/src/renderer/components/style.scss
+++ b/src/renderer/components/style.scss
@@ -1,3 +1,10 @@
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 500;
+  src: url('../../assets/fonts/Inter.ttf')
+}
+
 html,
 body,
 #app,
diff --git a/src/renderer/elements/Button/index.scss b/src/renderer/elements/Button/index.scss
index 6e58cfe4..a848a4c1 100644
--- a/src/renderer/elements/Button/index.scss
+++ b/src/renderer/elements/Button/index.scss
@@ -72,12 +72,14 @@
   &_title {
     padding: 12px;
     color: var(--fg-header);
+    opacity: .4;
     background-color: var(--bg-header-control);
 
     &:hover {
-      background-color: var(--bg-header-control-hover);
-      color: var(--bg-header-hover);
-      cursor: pointer;
+      opacity: 1;
+      // background-color: var(--bg-header-control-hover);
+      // color: var(--bg-header-hover);
+      cursor: default;
     }
   }
   &_control {
@@ -88,14 +90,14 @@
     &:hover {
       background-color: var(--bg-header-control-hover);
       color: var(--bg-header-control-hover);
-      cursor: pointer;
+      cursor: default;
     }
   }
   &_close {
     color: var(--fg-header-control);
     &:hover {
       background: var(--bg-window-close);
-      cursor: pointer;
+      cursor: default;
     }
   }
 
diff --git a/src/renderer/elements/Icon/icons/Close.tsx b/src/renderer/elements/Icon/icons/Close.tsx
index f5ba0d80..23358980 100644
--- a/src/renderer/elements/Icon/icons/Close.tsx
+++ b/src/renderer/elements/Icon/icons/Close.tsx
@@ -9,7 +9,13 @@ export const Close: React.FunctionComponent<IconProps> = props => {
 
   return (
     <svg width={size} height={size} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M12 4L4.00007 12M4 4L11.9999 12" stroke={color} />
+      <g fill={color}>
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M7.116 8l-4.558 4.558l.884.884L8 8.884l4.558 4.558l.884-.884L8.884 8l4.558-4.558l-.884-.884L8 7.116L3.442 2.558l-.884.884L7.116 8z"
+        />
+      </g>
     </svg>
   );
 };
diff --git a/src/renderer/elements/Icon/icons/CloseTab.tsx b/src/renderer/elements/Icon/icons/CloseTab.tsx
new file mode 100644
index 00000000..a43326ac
--- /dev/null
+++ b/src/renderer/elements/Icon/icons/CloseTab.tsx
@@ -0,0 +1,21 @@
+import * as React from "react";
+
+import { IconProps } from "..";
+import "../index.scss";
+
+export const CloseTab: React.FunctionComponent<IconProps> = props => {
+  const size = props.size ? props.size : "16";
+  const color = props.color ? props.color : "#2C2C2C";
+
+  return (
+    <svg className="svg" width={size} height={size} viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M11 4.143L9.857 3 7 5.857 4.143 3 3 4.143 5.857 7 3 9.857 4.143 11 7 8.143 9.857 11 11 9.857 8.143 7 11 4.143z"
+        fillRule="nonzero"
+        fillOpacity="1"
+        fill={color}
+        stroke="none"
+      ></path>
+    </svg>
+  );
+};
diff --git a/src/renderer/elements/Icon/icons/Figma.tsx b/src/renderer/elements/Icon/icons/Figma.tsx
new file mode 100644
index 00000000..ed796444
--- /dev/null
+++ b/src/renderer/elements/Icon/icons/Figma.tsx
@@ -0,0 +1,20 @@
+import * as React from "react";
+
+import { IconProps } from "..";
+import "../index.scss";
+
+export const Figma: React.FunctionComponent<IconProps> = props => {
+  const size = props.size ? props.size : "16";
+
+  return (
+    <svg className="svg" width={size} height={size} viewBox="0 0 12 17" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M5.5 1.5h-2c-1.105 0-2 .895-2 2 0 1.105.895 2 2 2h2v-4zm-5 2c0 1.043.533 1.963 1.341 2.5C1.033 6.537.5 7.457.5 8.5c0 1.043.533 1.963 1.341 2.5C1.033 11.537.5 12.457.5 13.5c0 1.657 1.343 3 3 3 1.657 0 3-1.343 3-3V10.736c.53.475 1.232.764 2 .764 1.657 0 3-1.343 3-3 0-1.043-.533-1.963-1.341-2.5.808-.537 1.341-1.457 1.341-2.5 0-1.657-1.343-3-3-3h-5c-1.657 0-3 1.343-3 3zm1 5c0-1.105.895-2 2-2h2v4h-2c-1.105 0-2-.895-2-2zm0 5c0-1.105.895-2 2-2h2v2c0 1.105-.895 2-2 2-1.105 0-2-.895-2-2zm7-3c-1.105 0-2-.895-2-2 0-1.105.895-2 2-2 1.105 0 2 .895 2 2 0 1.105-.895 2-2 2zm0-5h-2v-4h2c1.105 0 2 .895 2 2 0 1.105-.895 2-2 2z"
+        fillRule="evenodd"
+        fillOpacity="1"
+        fill={props.color ? props.color : "#333333"}
+        stroke="none"
+      ></path>
+    </svg>
+  );
+};
diff --git a/src/renderer/elements/Icon/icons/Maximize.tsx b/src/renderer/elements/Icon/icons/Maximize.tsx
index c904641b..d75dfa3b 100644
--- a/src/renderer/elements/Icon/icons/Maximize.tsx
+++ b/src/renderer/elements/Icon/icons/Maximize.tsx
@@ -8,12 +8,10 @@ export const Maximize: React.FunctionComponent<IconProps> = props => {
   const color = props.color ? props.color : "#7a7a7a";
 
   return (
-    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <rect x="3.5" y="5.5" width="7" height="7" stroke={color} />
-      <line x1="5.5" y1="6" x2="5.5" y2="3" stroke={color} />
-      <line x1="6" y1="3.5" x2="13" y2="3.5" stroke={color} />
-      <line x1="12.5" y1="4" x2="12.5" y2="11" stroke={color} />
-      <line x1="12" y1="10.5" x2="10" y2="10.5" stroke={color} />
+    <svg viewBox="0 0 16 16" fill="none" height={size} width={size} xmlns="http://www.w3.org/2000/svg">
+      <g fill={color}>
+        <path d="M3 3v10h10V3H3zm9 9H4V4h8v8z" />
+      </g>
     </svg>
   );
 };
diff --git a/src/renderer/elements/Icon/icons/Minimize.tsx b/src/renderer/elements/Icon/icons/Minimize.tsx
index aae3c488..05c07d38 100644
--- a/src/renderer/elements/Icon/icons/Minimize.tsx
+++ b/src/renderer/elements/Icon/icons/Minimize.tsx
@@ -8,7 +8,10 @@ export const Minimize: React.FunctionComponent<IconProps> = props => {
 
   return (
     <svg width={size} height={size} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M3 12.277H13" stroke={props.color ? props.color : "#7a7a7a"} />
+      <path d="M3 12.277H13" />
+      <g fill={props.color ? props.color : "#7a7a7a"}>
+        <path d="M14 8v1H3V8h11z" />
+      </g>
     </svg>
   );
 };
diff --git a/src/renderer/elements/Icon/icons/Restore.tsx b/src/renderer/elements/Icon/icons/Restore.tsx
new file mode 100644
index 00000000..787f4130
--- /dev/null
+++ b/src/renderer/elements/Icon/icons/Restore.tsx
@@ -0,0 +1,18 @@
+import * as React from "react";
+
+import { IconProps } from "..";
+import "../index.scss";
+
+export const Restore: React.FunctionComponent<IconProps> = props => {
+  const size = props.size ? props.size : "16";
+  const color = props.color ? props.color : "#7a7a7a";
+
+  return (
+    <svg viewBox="0 0 16 16" fill="none" height={size} width={size} xmlns="http://www.w3.org/2000/svg">
+      <g fill={color}>
+        <path d="M3 5v9h9V5H3zm8 8H4V6h7v7z" />
+        <path fillRule="evenodd" clipRule="evenodd" d="M5 5h1V4h7v7h-1v1h2V3H5v2z" />
+      </g>
+    </svg>
+  );
+};
diff --git a/src/renderer/elements/Icon/index.tsx b/src/renderer/elements/Icon/index.tsx
index a06c6b4c..def74bf5 100644
--- a/src/renderer/elements/Icon/index.tsx
+++ b/src/renderer/elements/Icon/index.tsx
@@ -18,7 +18,9 @@ import { Burger } from "./icons/Burger";
 import { Delete } from "./icons/Delete";
 import { MenuCorner } from "./icons/MenuCorner";
 import { Sync } from "./icons/Sync";
-
+import { Figma } from "./icons/Figma";
+import { Restore } from "./icons/Restore";
+import { CloseTab } from "./icons/CloseTab";
 import "../../animations.scss";
 import "./index.scss";
 
@@ -40,7 +42,10 @@ type Icons =
   | "Delete"
   | "Sync"
   | "MenuCorner"
-  | "Settings";
+  | "Settings"
+  | "Figma"
+  | "Restore"
+  | "CloseTab";
 
 export interface IconProps {
   color?: string;
@@ -73,6 +78,9 @@ export class Icon extends React.Component<ContainerProps, unknown> {
     Settings,
     Sync,
     MenuCorner,
+    Figma,
+    Restore,
+    CloseTab,
   };
 
   constructor(props: ContainerProps) {