diff --git a/src/components/Collapsible.tsx b/src/components/Collapsible.tsx
index 65284cd..a2feed7 100644
--- a/src/components/Collapsible.tsx
+++ b/src/components/Collapsible.tsx
@@ -2,7 +2,7 @@ import type { MutableRefObject } from 'react';
 import * as React from 'react';
 import ResizeObserver from 'resize-observer-polyfill';
 
-import { framerMotionResouce } from '../misc/motion';
+import { framerMotionResource } from '../misc/motion';
 
 const { memo, useState, useRef, useEffect } = React;
 
@@ -54,7 +54,7 @@ const variantsCollpapsibleChildContainer = {
 type CollapsibleProps = { children: React.ReactNode; isOpen?: boolean };
 
 const Collapsible = memo(({ children, isOpen }: CollapsibleProps) => {
-  const module = framerMotionResouce.read();
+  const module = framerMotionResource.read();
   const motion = module.motion;
   const previous = usePrevious(isOpen);
   const [refToMeature, { height }] = useMeasure();
diff --git a/src/components/Connections.tsx b/src/components/Connections.tsx
index c7fe882..4a31ffa 100644
--- a/src/components/Connections.tsx
+++ b/src/components/Connections.tsx
@@ -162,7 +162,7 @@ function Conn({ apiConfig }) {
         return [...closed, ...prev].slice(0, 101);
       });
       // if previous connections and current connections are both empty
-      // arrays, we wont update state to avaoid rerender
+      // arrays, we wont update state to avoid rerender
       if (x && (x.length !== 0 || prevConnsRef.current.length !== 0) && !isRefreshPaused) {
         prevConnsRef.current = x;
         setConns(x);
diff --git a/src/components/Rules.tsx b/src/components/Rules.tsx
index ad630b5..4447a14 100644
--- a/src/components/Rules.tsx
+++ b/src/components/Rules.tsx
@@ -4,7 +4,7 @@ import { areEqual, VariableSizeList } from 'react-window';
 import { RuleProviderItem } from 'src/components/rules/RuleProviderItem';
 import { useRuleAndProvider } from 'src/components/rules/rules.hooks';
 import { RulesPageFab } from 'src/components/rules/RulesPageFab';
-import { TextFilter } from 'src/components/shared/TextFitler';
+import { TextFilter } from '$src/components/shared/TextFilter';
 import { ruleFilterText } from 'src/store/rules';
 import { State } from 'src/store/types';
 import { ClashAPIConfig, RuleType } from 'src/types';
diff --git a/src/components/SvgYacd.tsx b/src/components/SvgYacd.tsx
index 499456d..3201969 100644
--- a/src/components/SvgYacd.tsx
+++ b/src/components/SvgYacd.tsx
@@ -23,7 +23,7 @@ function SvgYacd({
   eye = '#eee',
   mouth = '#eee',
 }: Props) {
-  const faceClasName = cx({ [s.path]: animate });
+  const faceClassName = cx({ [s.path]: animate });
   return (
     <svg width={width} height={height} viewBox="0 0 320 320" xmlns="http://www.w3.org/2000/svg">
       <g fill="none" fillRule="evenodd">
@@ -34,7 +34,7 @@ function SvgYacd({
           strokeWidth="4"
           strokeLinecap="round"
           fill={c0}
-          className={faceClasName}
+          className={faceClassName}
         />
         <circle fill={eye} cx="216.5" cy="181.5" r="14.5" />
         <circle fill={eye} cx="104.5" cy="181.5" r="14.5" />
diff --git a/src/components/proxies/Proxies.tsx b/src/components/proxies/Proxies.tsx
index 93b7147..89ced9d 100644
--- a/src/components/proxies/Proxies.tsx
+++ b/src/components/proxies/Proxies.tsx
@@ -9,7 +9,7 @@ import { ProxyPageFab } from 'src/components/proxies/ProxyPageFab';
 import { ProxyProviderList } from 'src/components/proxies/ProxyProviderList';
 import Settings from 'src/components/proxies/Settings';
 import BaseModal from 'src/components/shared/BaseModal';
-import { TextFilter } from 'src/components/shared/TextFitler';
+import { TextFilter } from '$src/components/shared/TextFilter';
 import { connect, useStoreActions } from 'src/components/StateProvider';
 import Equalizer from 'src/components/svg/Equalizer';
 import { getClashAPIConfig } from 'src/store/app';
diff --git a/src/components/proxies/Proxy.module.scss b/src/components/proxies/Proxy.module.scss
index 4a1b8e3..46b6e95 100644
--- a/src/components/proxies/Proxy.module.scss
+++ b/src/components/proxies/Proxy.module.scss
@@ -80,7 +80,7 @@
       height: var(--size-dot);
       background-color: #fff;
       // For non-primitive proxy type like "Selector", "LoadBalance", "DIRECT", etc. we are using a transparent
-      // background, and this selected indicator has a white background. In "light" them mode, the constrast
+      // background, and this selected indicator has a white background. In "light" them mode, the contrast
       // between the bg of the indicator and the "background" is too small. In that case we want to add a
       // border around this indicator so it's more distinguishable.
       border: 1px solid var(--color-proxy-dot-selected-ind-bo);
diff --git a/src/components/proxies/ProxyProvider.tsx b/src/components/proxies/ProxyProvider.tsx
index 465cbdc..c570512 100644
--- a/src/components/proxies/ProxyProvider.tsx
+++ b/src/components/proxies/ProxyProvider.tsx
@@ -6,7 +6,7 @@ import Button from 'src/components/Button';
 import CollapsibleSectionHeader from 'src/components/CollapsibleSectionHeader';
 import { useUpdateProviderItem } from 'src/components/proxies/proxies.hooks';
 import { connect, useStoreActions } from 'src/components/StateProvider';
-import { framerMotionResouce } from 'src/misc/motion';
+import { framerMotionResource } from 'src/misc/motion';
 import {
   getClashAPIConfig,
   getCollapsibleIsOpen,
@@ -113,7 +113,7 @@ const arrow = {
   hover: { rotate: 360, transition: { duration: 0.3 } },
 };
 function Refresh() {
-  const module = framerMotionResouce.read();
+  const module = framerMotionResource.read();
   const motion = module.motion;
   return (
     <motion.div
diff --git a/src/components/shared/TextFitler.module.scss b/src/components/shared/TextFilter.module.scss
similarity index 100%
rename from src/components/shared/TextFitler.module.scss
rename to src/components/shared/TextFilter.module.scss
diff --git a/src/components/shared/TextFitler.tsx b/src/components/shared/TextFilter.tsx
similarity index 68%
rename from src/components/shared/TextFitler.tsx
rename to src/components/shared/TextFilter.tsx
index 7af61ac..cb3d9a5 100644
--- a/src/components/shared/TextFitler.tsx
+++ b/src/components/shared/TextFilter.tsx
@@ -1,11 +1,11 @@
 import * as React from 'react';
 import type { RecoilState } from 'recoil';
-import { useTextInut } from 'src/hooks/useTextInput';
+import { useTextInput } from 'src/hooks/useTextInput';
 
-import s from './TextFitler.module.scss';
+import s from './TextFilter.module.scss';
 
 export function TextFilter(props: { textAtom: RecoilState<string>; placeholder?: string }) {
-  const [onChange, text] = useTextInut(props.textAtom);
+  const [onChange, text] = useTextInput(props.textAtom);
   return (
     <input
       className={s.input}
diff --git a/src/components/shared/ThemeSwitcher.tsx b/src/components/shared/ThemeSwitcher.tsx
index ec5d45f..29dd1b0 100644
--- a/src/components/shared/ThemeSwitcher.tsx
+++ b/src/components/shared/ThemeSwitcher.tsx
@@ -5,7 +5,7 @@ import * as React from 'react';
 import { Check } from 'react-feather';
 import { useTranslation } from 'react-i18next';
 import { connect } from 'src/components/StateProvider';
-import { framerMotionResouce } from 'src/misc/motion';
+import { framerMotionResource } from 'src/misc/motion';
 import { getTheme, switchTheme } from 'src/store/app';
 import { State } from 'src/store/types';
 
@@ -62,7 +62,7 @@ function ThemeMenuItem(props: {
 }
 
 function MoonA() {
-  const module = framerMotionResouce.read();
+  const module = framerMotionResource.read();
   const motion = module.motion;
   return (
     <svg
@@ -87,7 +87,7 @@ function MoonA() {
 }
 
 function Sun() {
-  const module = framerMotionResouce.read();
+  const module = framerMotionResource.read();
   const motion = module.motion;
 
   return (
@@ -118,7 +118,7 @@ function Sun() {
 }
 
 function Auto() {
-  const module = framerMotionResouce.read();
+  const module = framerMotionResource.read();
   const motion = module.motion;
 
   return (
diff --git a/src/hooks/useTextInput.ts b/src/hooks/useTextInput.ts
index 853044c..0dd2032 100644
--- a/src/hooks/useTextInput.ts
+++ b/src/hooks/useTextInput.ts
@@ -4,7 +4,7 @@ import { RecoilState, useRecoilState } from 'recoil';
 
 const { useCallback, useState, useMemo } = React;
 
-export function useTextInut(
+export function useTextInput(
   x: RecoilState<string>
 ): [(e: React.ChangeEvent<HTMLInputElement>) => void, string] {
   const [, setTextGlobal] = useRecoilState(x);
diff --git a/src/misc/motion.ts b/src/misc/motion.ts
index 7fac864..da9c2d7 100644
--- a/src/misc/motion.ts
+++ b/src/misc/motion.ts
@@ -1,3 +1,3 @@
 import { createResource } from './createResource';
 
-export const framerMotionResouce = createResource(() => import('framer-motion'));
+export const framerMotionResource = createResource(() => import('framer-motion'));
diff --git a/src/store/proxies.tsx b/src/store/proxies.tsx
index 0022816..3ac4a3a 100644
--- a/src/store/proxies.tsx
+++ b/src/store/proxies.tsx
@@ -196,7 +196,7 @@ async function switchProxyImpl(
     }
   } catch (err) {
     // eslint-disable-next-line no-console
-    console.log(err, 'failed to swith proxy');
+    console.log(err, 'failed to switch proxy');
     throw err;
   }